Move all hex colors in SASS to variables and all variations to darken/lighten
This commit is contained in:
Eugen Rochko
@ -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%);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user