Improve scss color variables (#2912)
- Updates scss variables file to use better-named variables for black/white/etc - Arranges the "mastodon classic" colors into variables - Remove all references to `$color-*` naming, replacing with new This does not in itself introduce "theme" support, but: - It would probably be easier to start working on theme support after this change and others - Even without the goal of themes, these changes make it more clear how the colors are being used. There is almost definitely some edge case in here where I've guessed the intent/context of some color usage incorrectly, but it still seems like a net improvement.
This commit is contained in:
Matt Jankowski
committed by
Eugen Rochko
Eugen Rochko
parent
cbd673601c
commit
b85dec2b97
@ -2,7 +2,7 @@
|
||||
.wrapper {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
font: 46px/52px 'mastodon-font-sans-serif', sans-serif;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
color: $color4;
|
||||
color: $ui-highlight-color;
|
||||
padding: 20px 0;
|
||||
|
||||
img {
|
||||
@ -32,7 +32,7 @@
|
||||
line-height: 28px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 20px;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@ -41,7 +41,7 @@
|
||||
line-height: 28px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 20px;
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
}
|
||||
|
||||
ul,
|
||||
@ -70,7 +70,7 @@
|
||||
margin-bottom: 12px;
|
||||
|
||||
a {
|
||||
color: $color4;
|
||||
color: $ui-highlight-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
@ -79,14 +79,14 @@
|
||||
display: inline-block;
|
||||
padding: 7px 7px 5px;
|
||||
margin: 0 2px;
|
||||
background: $color3;
|
||||
color: $color1;
|
||||
background: $ui-primary-color;
|
||||
color: $ui-base-color;
|
||||
font: 16px/16px 'mastodon-font-sans-serif', sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.screenshot {
|
||||
box-shadow: 0 0 15px rgba($color8, 0.4);
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
|
||||
margin-bottom: 26px;
|
||||
|
||||
img {
|
||||
@ -106,7 +106,7 @@
|
||||
line-height: 36px;
|
||||
|
||||
a {
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
@ -127,8 +127,8 @@
|
||||
margin: 20px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid lighten($color1, 10%);
|
||||
border-bottom: 1px solid lighten($color1, 10%);
|
||||
border-top: 1px solid lighten($ui-base-color, 10%);
|
||||
border-bottom: 1px solid lighten($ui-base-color, 10%);
|
||||
padding-right: 14px;
|
||||
|
||||
.section {
|
||||
@ -146,7 +146,7 @@
|
||||
font-size: 16px;
|
||||
|
||||
&:last-child {
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@ -155,7 +155,7 @@
|
||||
font-weight: 500;
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@ -190,7 +190,7 @@
|
||||
|
||||
a {
|
||||
display: block;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
@ -202,7 +202,7 @@
|
||||
|
||||
.username {
|
||||
display: block;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -213,7 +213,7 @@
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
@ -231,14 +231,14 @@
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
border-left: 1px solid lighten($color1, 10%);
|
||||
border-left: 1px solid lighten($ui-base-color, 10%);
|
||||
width: 200px;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.panel {
|
||||
.panel-header {
|
||||
background: lighten($color1, 10%);
|
||||
background: lighten($ui-base-color, 10%);
|
||||
padding: 7px 14px;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
@ -263,7 +263,7 @@
|
||||
a {
|
||||
display: block;
|
||||
padding: 7px 14px;
|
||||
color: rgba($color5, 0.7);
|
||||
color: rgba($primary-text-color, 0.7);
|
||||
text-decoration: none;
|
||||
transition: all 200ms linear;
|
||||
|
||||
@ -272,17 +272,17 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $color5;
|
||||
background-color: darken($color1, 5%);
|
||||
color: $primary-text-color;
|
||||
background-color: darken($ui-base-color, 5%);
|
||||
transition: all 100ms linear;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: $color5;
|
||||
background-color: $color4;
|
||||
color: $primary-text-color;
|
||||
background-color: $ui-highlight-color;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color4, 5%);
|
||||
background-color: lighten($ui-highlight-color, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -295,7 +295,7 @@
|
||||
flex-direction: column;
|
||||
|
||||
.sidebar {
|
||||
border: 1px solid lighten($color1, 10%);
|
||||
border: 1px solid lighten($ui-base-color, 10%);
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@ -341,10 +341,10 @@
|
||||
.closed-registrations-message {
|
||||
width: 300px;
|
||||
flex: 0 0 auto;
|
||||
background: rgba(darken($color1, 7%), 0.5);
|
||||
background: rgba(darken($ui-base-color, 7%), 0.5);
|
||||
padding: 14px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 0 15px rgba($color8, 0.4);
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
|
||||
|
||||
.actions {
|
||||
margin-bottom: 0;
|
||||
@ -354,7 +354,7 @@
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user