Move all hex colors in SASS to variables and all variations to darken/lighten
This commit is contained in:
Eugen Rochko
parent
d4d56b8af0
commit
f855d645b2
9 changed files with 203 additions and 199 deletions
|
|
@ -1,11 +1,10 @@
|
|||
@import url(https://fonts.googleapis.com/css?family=Montserrat);
|
||||
@import url(https://fonts.googleapis.com/css?family=Judson);
|
||||
|
||||
.about-body {
|
||||
.wrapper {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
color: #9baec8;
|
||||
color: $color3;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
|
||||
|
|
@ -18,7 +17,7 @@
|
|||
font: 46px/52px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: #2b90d9;
|
||||
color: $color4;
|
||||
padding: 20px 0;
|
||||
|
||||
img {
|
||||
|
|
@ -32,19 +31,19 @@
|
|||
h2 {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-size: 24px;
|
||||
line-height: 28px;// 'Judson', sans-serif;
|
||||
line-height: 28px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 20px;
|
||||
color: #fff;
|
||||
color: $color5;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-size: 20px;
|
||||
line-height: 28px;// 'Judson', sans-serif;
|
||||
line-height: 28px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 20px;
|
||||
color: #d9e1e8;
|
||||
color: $color2;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
|
|
@ -66,13 +65,11 @@
|
|||
|
||||
p, li {
|
||||
font: 16px/28px 'Montserrat', sans-serif;
|
||||
//font-size: 19px;
|
||||
//line-height: 28px;// 'Judson', sans-serif;
|
||||
font-weight: 400;
|
||||
margin-bottom: 26px;
|
||||
|
||||
a {
|
||||
color: #2b90d9;
|
||||
color: $color4;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
@ -81,14 +78,14 @@
|
|||
display: inline-block;
|
||||
padding: 7px 7px 5px 7px;
|
||||
margin: 0 2px;
|
||||
background: #9baec8;
|
||||
color: #282c37;
|
||||
background: $color3;
|
||||
color: $color1;
|
||||
font: 16px/16px 'Montserrat', sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
|
||||
box-shadow: 0 0 15px rgba($color8, 0.4);
|
||||
margin-bottom: 26px;
|
||||
|
||||
img {
|
||||
|
|
@ -107,7 +104,7 @@
|
|||
line-height: 36px;
|
||||
|
||||
a {
|
||||
color: #9baec8;
|
||||
color: $color3;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
@ -124,8 +121,8 @@
|
|||
margin: 20px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid lighten(#282c37, 10%);
|
||||
border-bottom: 1px solid lighten(#282c37, 10%);
|
||||
border-top: 1px solid lighten($color1, 10%);
|
||||
border-bottom: 1px solid lighten($color1, 10%);
|
||||
padding-right: 14px;
|
||||
|
||||
.section {
|
||||
|
|
@ -142,7 +139,7 @@
|
|||
font-size: 16px;
|
||||
|
||||
&:last-child {
|
||||
color: #d9e1e8;
|
||||
color: $color2;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
|
@ -151,7 +148,7 @@
|
|||
font-weight: 500;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
color: #fff;
|
||||
color: $color5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -178,7 +175,7 @@
|
|||
|
||||
a {
|
||||
display: block;
|
||||
color: #fff;
|
||||
color: $color5;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -190,7 +187,7 @@
|
|||
|
||||
.username {
|
||||
display: block;
|
||||
color: #9baec8;
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -201,7 +198,7 @@
|
|||
|
||||
strong {
|
||||
display: block;
|
||||
color: #fff;
|
||||
color: $color5;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -218,14 +215,14 @@
|
|||
}
|
||||
|
||||
.sidebar {
|
||||
border-left: 1px solid lighten(#282c37, 10%);
|
||||
border-left: 1px solid lighten($color1, 10%);
|
||||
width: 180px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.panel {
|
||||
.panel-header {
|
||||
background: lighten(#282c37, 10%);
|
||||
background: lighten($color1, 10%);
|
||||
padding: 7px 14px;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
|
|
@ -250,7 +247,7 @@
|
|||
a {
|
||||
display: block;
|
||||
padding: 7px 14px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: rgba($color5, 0.7);
|
||||
text-decoration: none;
|
||||
transition: all 200ms linear;
|
||||
|
||||
|
|
@ -259,17 +256,17 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background-color: darken(#282c37, 5%);
|
||||
color: $color5;
|
||||
background-color: darken($color1, 5%);
|
||||
transition: all 100ms linear;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: #fff;
|
||||
background-color: #2b90d9;
|
||||
color: $color5;
|
||||
background-color: $color4;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten(#2b90d9, 5%);
|
||||
background-color: lighten($color4, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
.card {
|
||||
background: #282c37;
|
||||
background: $color1;
|
||||
background-size: cover;
|
||||
padding: 60px 0;
|
||||
padding-bottom: 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 0 15px rgba($color8, 0.2);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
}
|
||||
|
||||
&:after {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
background: rgba($color8, 0.5);
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
display: block;
|
||||
font-size: 20px;
|
||||
line-height: 18px * 1.5;
|
||||
color: #fff;
|
||||
color: $color5;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
small {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #2b90d9;
|
||||
color: $color4;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
|
@ -81,10 +81,10 @@
|
|||
|
||||
.counter {
|
||||
width: 80px;
|
||||
color: #9baec8;
|
||||
color: $color3;
|
||||
padding: 0 10px;
|
||||
margin-bottom: 10px;
|
||||
border-right: 1px solid #9baec8;
|
||||
border-right: 1px solid $color3;
|
||||
cursor: default;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -99,14 +99,14 @@
|
|||
bottom: -10px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-bottom: 4px solid #9baec8;
|
||||
border-bottom: 4px solid $color3;
|
||||
opacity: 0.5;
|
||||
transition: all 0.8s ease;
|
||||
}
|
||||
|
||||
&.active {
|
||||
&:after {
|
||||
border-bottom: 4px solid #2b90d9;
|
||||
border-bottom: 4px solid $color4;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -133,7 +133,7 @@
|
|||
.counter-number {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
color: $color5;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -142,7 +142,7 @@
|
|||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
padding: 5px 10px;
|
||||
color: #d9e1e8;
|
||||
color: $color2;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
|
|
@ -173,7 +173,7 @@
|
|||
|
||||
a, .current, .next_page, .previous_page, .gap {
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
color: $color5;
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
padding: 6px 10px;
|
||||
|
|
@ -181,9 +181,9 @@
|
|||
}
|
||||
|
||||
.current {
|
||||
background: #fff;
|
||||
background: $color5;
|
||||
border-radius: 100px;
|
||||
color: #282c37;
|
||||
color: $color1;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
|
|
@ -193,7 +193,7 @@
|
|||
|
||||
.previous_page, .next_page {
|
||||
text-transform: uppercase;
|
||||
color: #d9e1e8;
|
||||
color: $color2;
|
||||
}
|
||||
|
||||
.previous_page {
|
||||
|
|
@ -218,7 +218,7 @@
|
|||
|
||||
.disabled {
|
||||
cursor: default;
|
||||
color: lighten(#282c37, 10%);
|
||||
color: lighten($color1, 10%);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
|
|
@ -236,8 +236,8 @@
|
|||
|
||||
.accounts-grid {
|
||||
clear: both;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
|
||||
background: #fff;
|
||||
box-shadow: 0 0 15px rgba($color8, 0.2);
|
||||
background: $color5;
|
||||
border-radius: 0 0 4px 4px;
|
||||
padding: 20px 10px;
|
||||
padding-bottom: 10px;
|
||||
|
|
@ -252,9 +252,9 @@
|
|||
box-sizing: border-box;
|
||||
width: 335px;
|
||||
float: left;
|
||||
border: 1px solid #d9e1e8;
|
||||
border: 1px solid $color2;
|
||||
border-radius: 4px;
|
||||
color: #282c37;
|
||||
color: $color1;
|
||||
height: 160px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
|
|
@ -265,7 +265,7 @@
|
|||
.account-grid-card__header {
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid #d9e1e8;
|
||||
border-bottom: 1px solid $color2;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
|
|
@ -287,7 +287,7 @@
|
|||
|
||||
a {
|
||||
display: block;
|
||||
color: #282c37;
|
||||
color: $color1;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -304,19 +304,19 @@
|
|||
}
|
||||
|
||||
.username {
|
||||
color: #2b90d9;
|
||||
color: $color4;
|
||||
}
|
||||
|
||||
.note {
|
||||
padding: 10px;
|
||||
padding-top: 15px;
|
||||
color: #9baec8;
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nothing-here {
|
||||
color: #9baec8;
|
||||
color: $color3;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
|
|
@ -327,10 +327,10 @@
|
|||
|
||||
.account-card {
|
||||
padding: 14px 10px;
|
||||
background: #fff;
|
||||
background: $color5;
|
||||
border-radius: 4px;
|
||||
text-align: left;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 0 15px rgba($color8, 0.2);
|
||||
|
||||
.detailed-status__display-name {
|
||||
display: block;
|
||||
|
|
@ -363,12 +363,12 @@
|
|||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
color: #282c37;
|
||||
color: $color1;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #9baec8;
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -383,6 +383,6 @@
|
|||
|
||||
.account__header__content {
|
||||
font-size: 14px;
|
||||
color: #282c37;
|
||||
color: $color1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
background: #1a1c23;
|
||||
background: darken($color1, 2%);
|
||||
overflow-y: scroll;
|
||||
|
||||
.sidebar {
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
position: fixed;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
background: #282c37;
|
||||
background: $color1;
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
a {
|
||||
display: block;
|
||||
padding: 15px 25px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: rgba($color5, 0.7);
|
||||
text-decoration: none;
|
||||
transition: all 200ms linear;
|
||||
|
||||
|
|
@ -34,17 +34,17 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background-color: darken(#282c37, 5%);
|
||||
color: $color5;
|
||||
background-color: darken($color1, 5%);
|
||||
transition: all 100ms linear;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: #fff;
|
||||
background-color: #2b90d9;
|
||||
color: $color5;
|
||||
background-color: $color4;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten(#2b90d9, 5%);
|
||||
background-color: lighten($color4, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -84,21 +84,21 @@
|
|||
|
||||
a {
|
||||
display: inline-block;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: rgba($color5, 0.7);
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border-bottom: 2px solid #282c37;
|
||||
border-bottom: 2px solid $color1;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
border-bottom: 2px solid lighten(#282c37, 5%);
|
||||
color: $color5;
|
||||
border-bottom: 2px solid lighten($color1, 5%);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: #2b90d9;
|
||||
border-bottom: 2px solid #2b90d9;
|
||||
color: $color4;
|
||||
border-bottom: 2px solid $color4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
@import 'variables';
|
||||
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,400italic);
|
||||
@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:400,500);
|
||||
@import "font-awesome";
|
||||
@import 'font-awesome';
|
||||
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v2.0 | 20110126
|
||||
|
|
@ -63,31 +64,31 @@ table {
|
|||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #42495b;
|
||||
border: 0px none #ffffff;
|
||||
background: lighten($color1, 4%);
|
||||
border: 0px none $color5;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #525a70;
|
||||
background: lighten($color1, 6%);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background: #42495b;
|
||||
background: lighten($color1, 4%);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
border: 0px none #ffffff;
|
||||
border: 0px none $color5;
|
||||
border-radius: 0;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track:hover {
|
||||
background: #282c37;
|
||||
background: $color1;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track:active {
|
||||
background: #282c37;
|
||||
background: $color1;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
|
|
@ -96,13 +97,13 @@ table {
|
|||
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background: #282c37 image-url('background-photo.jpeg');
|
||||
background: $color1 image-url('background-photo.jpeg');
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
color: $color5;
|
||||
padding-bottom: 140px;
|
||||
text-rendering: optimizelegibility;
|
||||
font-feature-settings: "kern";
|
||||
|
|
@ -164,7 +165,7 @@ body {
|
|||
h1 {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
color: $color5;
|
||||
font-size: 48px;
|
||||
font-weight: 500;
|
||||
|
||||
|
|
@ -215,12 +216,10 @@ body {
|
|||
text-align: center;
|
||||
margin-top: 30px;
|
||||
font-size: 12px;
|
||||
color: darken(#d9e1e8, 25%);
|
||||
color: darken($color2, 25%);
|
||||
|
||||
.domain {
|
||||
//font-size: 12px;
|
||||
font-weight: 500;
|
||||
//font-family: 'Roboto Mono', monospace;
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
.button {
|
||||
background-color: #2b90d9;
|
||||
background-color: $color4;
|
||||
font-family: inherit;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
border: 10px none;
|
||||
color: #fff;
|
||||
color: $color5;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0;
|
||||
|
|
@ -19,56 +19,56 @@
|
|||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background-color: #489fde;
|
||||
background-color: lighten($color4, 7%);
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: #9baec8;
|
||||
background-color: $color3;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.button-secondary {
|
||||
background-color: #282c37;
|
||||
background-color: $color1;
|
||||
|
||||
&:hover {
|
||||
background-color: #282c37;
|
||||
background-color: $color1;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: #9baec8;
|
||||
background-color: $color3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
color: #616b86;
|
||||
color: lighten($color1, 26%);
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: #717b98;
|
||||
color: lighten($color1, 33%);
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: #454b5e;
|
||||
color: lighten($color1, 13%);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #2b90d9;
|
||||
color: $color4;
|
||||
}
|
||||
}
|
||||
|
||||
.lightbox .icon-button {
|
||||
color: #282c37;
|
||||
color: $color1;
|
||||
}
|
||||
|
||||
.compose-form__textarea, .follow-form__input {
|
||||
background: #fff;
|
||||
background: $color5;
|
||||
|
||||
&:disabled {
|
||||
background: #d9e1e8;
|
||||
background: $color2;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
}
|
||||
|
||||
a {
|
||||
color: #d9e1e8;
|
||||
color: $color2;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -139,11 +139,11 @@
|
|||
}
|
||||
|
||||
.reply-indicator__content {
|
||||
color: #282c37;
|
||||
color: $color1;
|
||||
font-size: 14px;
|
||||
|
||||
a {
|
||||
color: #535b72;
|
||||
color: lighten($color1, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -189,7 +189,7 @@
|
|||
|
||||
.status__display-name, .account__display-name {
|
||||
strong {
|
||||
color: #fff;
|
||||
color: $color5;
|
||||
}
|
||||
|
||||
&.muted {
|
||||
|
|
@ -214,7 +214,7 @@
|
|||
}
|
||||
|
||||
.detailed-status__display-name {
|
||||
color: #d9e1e8;
|
||||
color: $color2;
|
||||
line-height: 24px;
|
||||
|
||||
strong, span {
|
||||
|
|
@ -223,17 +223,17 @@
|
|||
|
||||
strong {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
color: $color5;
|
||||
}
|
||||
}
|
||||
|
||||
.muted {
|
||||
.status__content p, .status__content a {
|
||||
color: #616b86;
|
||||
color: lighten($color1, 26%);
|
||||
}
|
||||
|
||||
.status__display-name strong {
|
||||
color: #616b86;
|
||||
color: lighten($color1, 26%);
|
||||
}
|
||||
|
||||
.status__avatar {
|
||||
|
|
@ -246,7 +246,7 @@
|
|||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
color: $color5;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
|
@ -282,17 +282,17 @@
|
|||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 4.5px 7.8px 4.5px;
|
||||
border-color: transparent transparent #d9e1e8 transparent;
|
||||
border-color: transparent transparent $color2 transparent;
|
||||
top: -7px;
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
background: #d9e1e8;
|
||||
background: $color2;
|
||||
padding: 4px 0;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
|
||||
box-shadow: 0 0 15px rgba($color8, 0.4);
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
|
|
@ -302,12 +302,12 @@
|
|||
padding: 6px 16px;
|
||||
width: 100px;
|
||||
text-decoration: none;
|
||||
background: #d9e1e8;
|
||||
color: #282c37;
|
||||
background: $color2;
|
||||
color: $color1;
|
||||
|
||||
&:hover {
|
||||
background: #2b90d9;
|
||||
color: #d9e1e8;
|
||||
background: $color4;
|
||||
color: $color2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -315,7 +315,7 @@
|
|||
.static-content {
|
||||
padding: 10px;
|
||||
padding-top: 20px;
|
||||
color: #616b86;
|
||||
color: lighten($color1, 26%);
|
||||
|
||||
h1 {
|
||||
font-size: 16px;
|
||||
|
|
@ -350,13 +350,13 @@
|
|||
}
|
||||
|
||||
.drawer__inner {
|
||||
background: linear-gradient(rgba(69, 75, 94, 1), rgba(69, 75, 94, 0.65));
|
||||
background: linear-gradient(rgba(lighten($color1, 13%), 1), rgba(lighten($color1, 13%), 0.65));
|
||||
}
|
||||
|
||||
.drawer__header {
|
||||
flex: 0 0 auto;
|
||||
font-size: 16px;
|
||||
background: darken(#454b5e, 5%);
|
||||
background: lighten($color1, 8%);
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -365,7 +365,7 @@
|
|||
transition: all 100ms ease-in;
|
||||
|
||||
&:hover {
|
||||
background: darken(#454b5e, 10%);
|
||||
background: lighten($color1, 3%);
|
||||
transition: all 200ms ease-out;
|
||||
}
|
||||
}
|
||||
|
|
@ -424,22 +424,22 @@
|
|||
top: 100%;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
|
||||
box-shadow: 0 0 15px rgba($color8, 0.4);
|
||||
}
|
||||
|
||||
.react-autosuggest__section-title {
|
||||
background: #9baec8;
|
||||
background: $color3;
|
||||
padding: 4px 10px;
|
||||
font-weight: 500;
|
||||
cursor: default;
|
||||
color: #282c37;
|
||||
color: $color1;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.react-autosuggest__suggestions-list {
|
||||
background: #d9e1e8;
|
||||
color: #282c37;
|
||||
background: $color2;
|
||||
color: $color1;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
|
@ -449,8 +449,8 @@
|
|||
}
|
||||
|
||||
.react-autosuggest__suggestion--focused {
|
||||
background: #2b90d9;
|
||||
color: #fff;
|
||||
background: $color4;
|
||||
color: $color5;
|
||||
}
|
||||
|
||||
.scrollable {
|
||||
|
|
@ -478,7 +478,7 @@
|
|||
border: 0;
|
||||
padding: 0;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-tap-highlight-color: rgba($color8, 0);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
|
|
@ -504,20 +504,20 @@
|
|||
height: 24px;
|
||||
padding: 0;
|
||||
border-radius: 30px;
|
||||
background-color: #282c37;
|
||||
background-color: $color1;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||||
background-color: darken(#282c37, 10%);
|
||||
background-color: darken($color1, 10%);
|
||||
}
|
||||
|
||||
.react-toggle--checked .react-toggle-track {
|
||||
background-color: #2b90d9;
|
||||
background-color: $color4;
|
||||
}
|
||||
|
||||
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
|
||||
background-color: lighten(#2b90d9, 10%);
|
||||
background-color: lighten($color4, 10%);
|
||||
}
|
||||
|
||||
.react-toggle-track-check {
|
||||
|
|
@ -564,23 +564,23 @@
|
|||
left: 1px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 1px solid #282c37;
|
||||
border: 1px solid $color1;
|
||||
border-radius: 50%;
|
||||
background-color: #FAFAFA;
|
||||
background-color: darken($color5, 2%);
|
||||
box-sizing: border-box;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.react-toggle--checked .react-toggle-thumb {
|
||||
left: 27px;
|
||||
border-color: #2b90d9;
|
||||
border-color: $color4;
|
||||
}
|
||||
|
||||
.column-link {
|
||||
background: #373b4a;
|
||||
background: lighten($color1, 6%);
|
||||
|
||||
&:hover {
|
||||
background: lighten(#373b4a, 5%);
|
||||
background: lighten($color1, 11%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -594,7 +594,7 @@
|
|||
width: 100%;
|
||||
height: 100px;
|
||||
resize: none;
|
||||
color: #282c37;
|
||||
color: $color1;
|
||||
padding: 7px;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
|
|
@ -605,7 +605,7 @@
|
|||
transition: border-color 0.3s ease;
|
||||
|
||||
&.file-drop {
|
||||
border-color: #aaa;
|
||||
border-color: darken($color5, 33%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -614,9 +614,9 @@
|
|||
top: 100%;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
|
||||
background: #d9e1e8;
|
||||
color: #282c37;
|
||||
box-shadow: 0 0 15px rgba($color8, 0.4);
|
||||
background: $color2;
|
||||
color: $color1;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
|
|
@ -625,12 +625,12 @@
|
|||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: darken(#d9e1e8, 10%);
|
||||
background: darken($color2, 10%);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: #2b90d9;
|
||||
color: #fff;
|
||||
background: $color4;
|
||||
color: $color5;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -652,14 +652,14 @@
|
|||
}
|
||||
|
||||
.setting-text {
|
||||
color: #9baec8;
|
||||
color: $color3;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 2px solid #9baec8;
|
||||
border-bottom: 2px solid $color3;
|
||||
|
||||
&:focus, &:active {
|
||||
color: #fff;
|
||||
border-bottom-color: #2b90d9;
|
||||
color: $color5;
|
||||
border-bottom-color: $color4;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -683,6 +683,6 @@ button.active i.fa-retweet {
|
|||
|
||||
.status-card {
|
||||
&:hover {
|
||||
background: #363c4b;
|
||||
background: lighten($color1, 6%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ code {
|
|||
|
||||
.hint {
|
||||
display: block;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
color: rgba($color5, 0.8);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
|
@ -28,7 +28,7 @@ code {
|
|||
label {
|
||||
font-family: inherit;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
color: $color5;
|
||||
width: 100px;
|
||||
display: block;
|
||||
flex: 0 0 auto;
|
||||
|
|
@ -75,11 +75,11 @@ code {
|
|||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
border-bottom: 2px solid #9baec8;
|
||||
border-bottom: 2px solid $color3;
|
||||
border-radius: 2px 2px 0 0;
|
||||
padding: 7px 4px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
color: $color5;
|
||||
display: block;
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
|
|
@ -90,27 +90,27 @@ code {
|
|||
}
|
||||
|
||||
&:focus:invalid {
|
||||
border-bottom-color: #df405a;
|
||||
border-bottom-color: $color6;
|
||||
}
|
||||
|
||||
&:required:valid {
|
||||
border-bottom-color: #79bd9a;
|
||||
border-bottom-color: $color7;
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
border-bottom-color: #2b90d9;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
border-bottom-color: $color4;
|
||||
background: rgba($color8, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.input.field_with_errors {
|
||||
input[type=text], input[type=email], input[type=password] {
|
||||
border-bottom-color: #df405a;
|
||||
border-bottom-color: $color6;
|
||||
}
|
||||
|
||||
.error {
|
||||
font-weight: 500;
|
||||
color: #df405a;
|
||||
color: $color6;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -123,8 +123,8 @@ code {
|
|||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: #2b90d9;
|
||||
color: #fff;
|
||||
background: $color4;
|
||||
color: $color5;
|
||||
font-size: 18px;
|
||||
padding: 10px;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -134,36 +134,36 @@ code {
|
|||
margin-bottom: 10px;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten(#2b90d9, 5%);
|
||||
background-color: lighten($color4, 5%);
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
background-color: darken(#2b90d9, 5%);
|
||||
background-color: darken($color4, 5%);
|
||||
}
|
||||
|
||||
&.negative {
|
||||
background: #df405a;
|
||||
background: $color6;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten(#df405a, 5%);
|
||||
background-color: lighten($color6, 5%);
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
background-color: darken(#df405a, 5%);
|
||||
background-color: darken($color6, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.flash-message {
|
||||
background: #282c37;
|
||||
color: #9baec8;
|
||||
background: $color1;
|
||||
color: $color3;
|
||||
border-radius: 4px;
|
||||
padding: 15px 10px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 0 5px rgba($color8, 0.2);
|
||||
text-align: center;
|
||||
|
||||
strong {
|
||||
|
|
@ -188,7 +188,7 @@ code {
|
|||
.oauth-prompt, .follow-prompt {
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
color: #9baec8;
|
||||
color: $color3;
|
||||
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
|
|
@ -196,7 +196,7 @@ code {
|
|||
}
|
||||
|
||||
strong {
|
||||
color: #d9e1e8;
|
||||
color: $color2;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
.activity-stream {
|
||||
clear: both;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 0 15px rgba($color8, 0.2);
|
||||
|
||||
.entry {
|
||||
background: lighten(#d9e1e8, 8%);
|
||||
background: lighten($color2, 8%);
|
||||
|
||||
&, .detailed-status.light {
|
||||
border-bottom: 1px solid #d9e1e8;
|
||||
border-bottom: 1px solid $color2;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
font-size: 14px;
|
||||
|
||||
.status__relative-time {
|
||||
color: #9baec8;
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
display: block;
|
||||
max-width: 100%;
|
||||
padding-right: 25px;
|
||||
color: #282c37;
|
||||
color: $color1;
|
||||
}
|
||||
|
||||
.status__avatar {
|
||||
|
|
@ -82,20 +82,20 @@
|
|||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
color: #282c37;
|
||||
color: $color1;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #9baec8;
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
|
||||
.status__content {
|
||||
color: #282c37;
|
||||
color: $color1;
|
||||
|
||||
a {
|
||||
color: #2b90d9;
|
||||
color: $color4;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
|
||||
.detailed-status.light {
|
||||
padding: 14px;
|
||||
background: #fff;
|
||||
background: $color5;
|
||||
cursor: default;
|
||||
|
||||
.detailed-status__display-name {
|
||||
|
|
@ -133,12 +133,12 @@
|
|||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
color: #282c37;
|
||||
color: $color1;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: #9baec8;
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -154,16 +154,16 @@
|
|||
}
|
||||
|
||||
.status__content {
|
||||
color: #282c37;
|
||||
color: $color1;
|
||||
|
||||
a {
|
||||
color: #2b90d9;
|
||||
color: $color4;
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status__meta {
|
||||
margin-top: 15px;
|
||||
color: #9baec8;
|
||||
color: $color3;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
|
||||
|
|
@ -248,12 +248,12 @@
|
|||
transform: translate(-50%, -50%);
|
||||
padding: 5px;
|
||||
border-radius: 100px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
color: rgba($color5, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.media-spoiler {
|
||||
background: #9baec8;
|
||||
background: $color3;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
|
|
@ -265,7 +265,7 @@
|
|||
transition: all 100ms linear;
|
||||
|
||||
&:hover {
|
||||
background: darken(#9baec8, 5%);
|
||||
background: darken($color3, 5%);
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
@ -287,7 +287,7 @@
|
|||
padding-left: (48px + 14px*2);
|
||||
padding-bottom: 0;
|
||||
margin-bottom: -4px;
|
||||
color: #9baec8;
|
||||
color: $color3;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -297,7 +297,7 @@
|
|||
}
|
||||
|
||||
.status__display-name.muted strong {
|
||||
color: #9baec8;
|
||||
color: $color3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,13 +9,13 @@
|
|||
padding: 8px;
|
||||
line-height: 18px;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid #282c37;
|
||||
border-top: 1px solid $color1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
& > thead > tr > th {
|
||||
vertical-align: bottom;
|
||||
border-bottom: 2px solid #282c37;
|
||||
border-bottom: 2px solid $color1;
|
||||
border-top: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
@ -25,11 +25,11 @@
|
|||
}
|
||||
|
||||
& > tbody > tr:nth-child(odd) > td, & > tbody > tr:nth-child(odd) > th {
|
||||
background: lighten(#1a1c23, 2%);
|
||||
background: $color1;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #2b90d9;
|
||||
color: $color4;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -51,11 +51,11 @@ a.table-action-link {
|
|||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
padding: 0 10px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: rgba($color5, 0.7);
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
color: $color5;
|
||||
}
|
||||
|
||||
i.fa {
|
||||
|
|
|
|||
8
app/assets/stylesheets/variables.scss
Normal file
8
app/assets/stylesheets/variables.scss
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
$color1: #282c37; // darkest
|
||||
$color2: #d9e1e8; // lightest
|
||||
$color3: #9baec8; // lighter
|
||||
$color4: #2b90d9; // vibrant
|
||||
$color5: #fff; // white
|
||||
$color6: #df405a; // error red
|
||||
$color7: #79bd9a; // succ green
|
||||
$color8: #000; // black
|
||||
Loading…
Add table
Reference in a new issue