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
Eugen Rochko
parent
cbd673601c
commit
b85dec2b97
15 changed files with 479 additions and 461 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
.card {
|
||||
background: $color1;
|
||||
background: $ui-base-color;
|
||||
background-size: cover;
|
||||
padding: 60px 0;
|
||||
padding-bottom: 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
box-shadow: 0 0 15px rgba($color8, 0.2);
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
}
|
||||
|
||||
&::after {
|
||||
background: linear-gradient(rgba($color8, 0.5), rgba($color8, 0.8));
|
||||
background: linear-gradient(rgba($base-shadow-color, 0.5), rgba($base-shadow-color, 0.8));
|
||||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
|
|
@ -29,17 +29,17 @@
|
|||
display: block;
|
||||
font-size: 20px;
|
||||
line-height: 18px * 1.5;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-shadow: 0 0 2px $color8;
|
||||
text-shadow: 0 0 2px $base-shadow-color;
|
||||
|
||||
small {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: $color4;
|
||||
color: $ui-highlight-color;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
|
@ -82,10 +82,10 @@
|
|||
|
||||
.counter {
|
||||
width: 80px;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
padding: 5px 10px 0;
|
||||
margin-bottom: 10px;
|
||||
border-right: 1px solid $color3;
|
||||
border-right: 1px solid $ui-primary-color;
|
||||
cursor: default;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -100,14 +100,14 @@
|
|||
bottom: -10px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
border-bottom: 4px solid $color3;
|
||||
border-bottom: 4px solid $ui-primary-color;
|
||||
opacity: 0.5;
|
||||
transition: all 0.8s ease;
|
||||
}
|
||||
|
||||
&.active {
|
||||
&::after {
|
||||
border-bottom: 4px solid $color4;
|
||||
border-bottom: 4px solid $ui-highlight-color;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -129,13 +129,13 @@
|
|||
text-transform: uppercase;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
text-shadow: 0 0 2px $color8;
|
||||
text-shadow: 0 0 2px $base-shadow-color;
|
||||
}
|
||||
|
||||
.counter-number {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -144,7 +144,7 @@
|
|||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
padding: 5px 10px;
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
|
|
@ -180,7 +180,7 @@
|
|||
.page,
|
||||
.gap {
|
||||
font-size: 14px;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
font-weight: 500;
|
||||
display: inline-block;
|
||||
padding: 6px 10px;
|
||||
|
|
@ -188,9 +188,9 @@
|
|||
}
|
||||
|
||||
.current {
|
||||
background: $color5;
|
||||
background: $simple-background-color;
|
||||
border-radius: 100px;
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
cursor: default;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
|
@ -202,7 +202,7 @@
|
|||
.prev,
|
||||
.next {
|
||||
text-transform: uppercase;
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
}
|
||||
|
||||
.prev {
|
||||
|
|
@ -227,7 +227,7 @@
|
|||
|
||||
.disabled {
|
||||
cursor: default;
|
||||
color: lighten($color1, 10%);
|
||||
color: lighten($ui-base-color, 10%);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 360px) {
|
||||
|
|
@ -249,8 +249,8 @@
|
|||
}
|
||||
|
||||
.accounts-grid {
|
||||
box-shadow: 0 0 15px rgba($color8, 0.2);
|
||||
background: $color5;
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
||||
background: $simple-background-color;
|
||||
border-radius: 0 0 4px 4px;
|
||||
padding: 20px 10px;
|
||||
padding-bottom: 10px;
|
||||
|
|
@ -266,9 +266,9 @@
|
|||
.account-grid-card {
|
||||
box-sizing: border-box;
|
||||
width: 335px;
|
||||
border: 1px solid $color2;
|
||||
border: 1px solid $ui-secondary-color;
|
||||
border-radius: 4px;
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:nth-child(odd) {
|
||||
|
|
@ -278,7 +278,7 @@
|
|||
.account-grid-card__header {
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
border-bottom: 1px solid $color2;
|
||||
border-bottom: 1px solid $ui-secondary-color;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
|
|
@ -300,7 +300,7 @@
|
|||
|
||||
a {
|
||||
display: block;
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -317,20 +317,20 @@
|
|||
}
|
||||
|
||||
.username {
|
||||
color: $color4;
|
||||
color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
.note {
|
||||
padding: 10px;
|
||||
padding-top: 15px;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nothing-here {
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
|
|
@ -341,10 +341,10 @@
|
|||
|
||||
.account-card {
|
||||
padding: 14px 10px;
|
||||
background: $color5;
|
||||
background: $simple-background-color;
|
||||
border-radius: 4px;
|
||||
text-align: left;
|
||||
box-shadow: 0 0 15px rgba($color8, 0.2);
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
||||
|
||||
.detailed-status__display-name {
|
||||
display: block;
|
||||
|
|
@ -377,12 +377,12 @@
|
|||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -397,6 +397,6 @@
|
|||
|
||||
.account__header__content {
|
||||
font-size: 14px;
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
.sidebar-wrapper {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
background: $color1;
|
||||
background: $ui-base-color;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
a {
|
||||
display: block;
|
||||
padding: 15px 25px;
|
||||
color: rgba($color5, 0.7);
|
||||
color: rgba($primary-text-color, 0.7);
|
||||
text-decoration: none;
|
||||
transition: all 200ms linear;
|
||||
border-radius: 4px 0 0 4px;
|
||||
|
|
@ -43,19 +43,19 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
color: $color5;
|
||||
background-color: darken($color1, 5%);
|
||||
color: $primary-text-color;
|
||||
background-color: darken($ui-base-color, 5%);
|
||||
transition: all 100ms linear;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: darken($color1, 2%);
|
||||
background: darken($ui-base-color, 2%);
|
||||
border-radius: 4px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
background: darken($color1, 4%);
|
||||
background: darken($ui-base-color, 4%);
|
||||
border-radius: 0 0 0 4px;
|
||||
margin: 0;
|
||||
|
||||
|
|
@ -63,13 +63,13 @@
|
|||
border: 0;
|
||||
|
||||
&.selected {
|
||||
color: $color5;
|
||||
background-color: $color4;
|
||||
color: $primary-text-color;
|
||||
background-color: $ui-highlight-color;
|
||||
border-bottom: 0;
|
||||
border-radius: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color4, 5%);
|
||||
background-color: lighten($ui-highlight-color, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
padding-left: 25px;
|
||||
|
||||
h2 {
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
font-weight: 400;
|
||||
|
|
@ -99,11 +99,11 @@
|
|||
& > p {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
margin-bottom: 20px;
|
||||
|
||||
strong {
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
|
@ -112,7 +112,7 @@
|
|||
margin: 20px 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
border-bottom: 1px solid $color1;
|
||||
border-bottom: 1px solid $ui-base-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -185,21 +185,21 @@
|
|||
|
||||
a {
|
||||
display: inline-block;
|
||||
color: rgba($color5, 0.7);
|
||||
color: rgba($primary-text-color, 0.7);
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
border-bottom: 2px solid $color1;
|
||||
border-bottom: 2px solid $ui-base-color;
|
||||
|
||||
&:hover {
|
||||
color: $color5;
|
||||
border-bottom: 2px solid lighten($color1, 5%);
|
||||
color: $primary-text-color;
|
||||
border-bottom: 2px solid lighten($ui-base-color, 5%);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
color: $color4;
|
||||
border-bottom: 2px solid $color4;
|
||||
color: $ui-highlight-color;
|
||||
border-bottom: 2px solid $ui-highlight-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -221,7 +221,7 @@
|
|||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
body {
|
||||
font-family: 'mastodon-font-sans-serif', sans-serif;
|
||||
background: $color1 url('../images/background-photo.jpg');
|
||||
background: $ui-base-color url('../images/background-photo.jpg');
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
font-weight: 400;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
padding-bottom: 140px;
|
||||
text-rendering: optimizelegibility;
|
||||
font-feature-settings: "kern";
|
||||
|
|
@ -17,7 +17,7 @@ body {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
background: $color1;
|
||||
background: $ui-base-color;
|
||||
}
|
||||
|
||||
&.embed {
|
||||
|
|
@ -33,7 +33,7 @@ body {
|
|||
}
|
||||
|
||||
&.admin {
|
||||
background: darken($color1, 4%);
|
||||
background: darken($ui-base-color, 4%);
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -2,7 +2,7 @@
|
|||
h1 {
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
overflow: hidden;
|
||||
font-weight: 500;
|
||||
margin-bottom: 20px;
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
small {
|
||||
font-weight: 400;
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -32,7 +32,7 @@
|
|||
h1 {
|
||||
display: block;
|
||||
text-align: center;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
font-size: 48px;
|
||||
font-weight: 500;
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
text-align: center;
|
||||
margin-top: 30px;
|
||||
font-size: 12px;
|
||||
color: darken($color2, 25%);
|
||||
color: darken($ui-secondary-color, 25%);
|
||||
|
||||
.domain {
|
||||
font-weight: 500;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ code {
|
|||
|
||||
span.hint {
|
||||
display: block;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
font-size: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
|
@ -51,7 +51,7 @@ code {
|
|||
label {
|
||||
font-family: inherit;
|
||||
font-size: 16px;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
display: block;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
|
@ -65,7 +65,7 @@ code {
|
|||
margin-bottom: 5px;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
display: block;
|
||||
width: auto;
|
||||
}
|
||||
|
|
@ -76,7 +76,7 @@ code {
|
|||
label {
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
display: block;
|
||||
width: auto;
|
||||
}
|
||||
|
|
@ -108,11 +108,11 @@ code {
|
|||
background: transparent;
|
||||
box-sizing: border-box;
|
||||
border: 0;
|
||||
border-bottom: 2px solid $color3;
|
||||
border-bottom: 2px solid $ui-primary-color;
|
||||
border-radius: 2px 2px 0 0;
|
||||
padding: 7px 4px;
|
||||
font-size: 16px;
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
display: block;
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
|
|
@ -124,35 +124,35 @@ code {
|
|||
}
|
||||
|
||||
&:focus:invalid {
|
||||
border-bottom-color: $color6;
|
||||
border-bottom-color: $error-value-color;
|
||||
}
|
||||
|
||||
&:required:valid {
|
||||
border-bottom-color: $color7;
|
||||
border-bottom-color: $valid-value-color;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
border-bottom-color: $color4;
|
||||
background: rgba($color8, 0.1);
|
||||
border-bottom-color: $ui-highlight-color;
|
||||
background: rgba($base-overlay-background, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.input.field_with_errors {
|
||||
label {
|
||||
color: $color6;
|
||||
color: $error-value-color;
|
||||
}
|
||||
|
||||
input[type=text],
|
||||
input[type=email],
|
||||
input[type=password] {
|
||||
border-bottom-color: $color6;
|
||||
border-bottom-color: $error-value-color;
|
||||
}
|
||||
|
||||
.error {
|
||||
display: block;
|
||||
font-weight: 500;
|
||||
color: $color6;
|
||||
color: $error-value-color;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
|
@ -167,8 +167,8 @@ code {
|
|||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: $color4;
|
||||
color: $color5;
|
||||
background: $ui-highlight-color;
|
||||
color: $primary-text-color;
|
||||
font-size: 18px;
|
||||
padding: 10px;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -181,26 +181,26 @@ code {
|
|||
margin-bottom: 10px;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color4, 5%);
|
||||
background-color: lighten($ui-highlight-color, 5%);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
background-color: darken($color4, 5%);
|
||||
background-color: darken($ui-highlight-color, 5%);
|
||||
}
|
||||
|
||||
&.negative {
|
||||
background: $color6;
|
||||
background: $error-value-color;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($color6, 5%);
|
||||
background-color: lighten($error-value-color, 5%);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: darken($color6, 5%);
|
||||
background-color: darken($error-value-color, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -211,12 +211,12 @@ code {
|
|||
}
|
||||
|
||||
.flash-message {
|
||||
background: $color1;
|
||||
color: $color3;
|
||||
background: $ui-base-color;
|
||||
color: $ui-primary-color;
|
||||
border-radius: 4px;
|
||||
padding: 15px 10px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 0 5px rgba($color8, 0.2);
|
||||
box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
|
||||
text-align: center;
|
||||
|
||||
strong {
|
||||
|
|
@ -229,7 +229,7 @@ code {
|
|||
text-align: center;
|
||||
|
||||
a {
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -242,7 +242,7 @@ code {
|
|||
.follow-prompt {
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
|
||||
h2 {
|
||||
font-size: 16px;
|
||||
|
|
@ -250,7 +250,7 @@ code {
|
|||
}
|
||||
|
||||
strong {
|
||||
color: $color2;
|
||||
color: $ui-secondary-color;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
|
@ -261,10 +261,10 @@ code {
|
|||
|
||||
.qr-code {
|
||||
flex: 0 0 auto;
|
||||
background: $color5;
|
||||
background: $simple-background-color;
|
||||
padding: 4px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 0 15px rgba($color8, 0.2);
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
||||
display: inline-block;
|
||||
|
||||
svg {
|
||||
|
|
@ -275,7 +275,7 @@ code {
|
|||
|
||||
.qr-alternative {
|
||||
margin-left: 10px;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
|
||||
samp {
|
||||
display: block;
|
||||
|
|
@ -296,16 +296,16 @@ code {
|
|||
.warning {
|
||||
max-width: 400px;
|
||||
box-sizing: border-box;
|
||||
background: rgba($color6, 0.5);
|
||||
color: $color5;
|
||||
text-shadow: 1px 1px 0 rgba($color8, 0.3);
|
||||
box-shadow: 0 2px 6px rgba($color8, 0.4);
|
||||
background: rgba($error-value-color, 0.5);
|
||||
color: $primary-text-color;
|
||||
text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3);
|
||||
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4);
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
a {
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
.landing-strip {
|
||||
background: rgba(darken($color1, 7%), 0.8);
|
||||
color: $color3;
|
||||
background: rgba(darken($ui-base-color, 7%), 0.8);
|
||||
color: $ui-primary-color;
|
||||
font-weight: 400;
|
||||
padding: 14px;
|
||||
border-radius: 4px;
|
||||
|
|
|
|||
|
|
@ -59,31 +59,31 @@ table {
|
|||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: lighten($color1, 4%);
|
||||
border: 0px none $color5;
|
||||
background: lighten($ui-base-color, 4%);
|
||||
border: 0px none $base-border-color;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: lighten($color1, 6%);
|
||||
background: lighten($ui-base-color, 6%);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background: lighten($color1, 4%);
|
||||
background: lighten($ui-base-color, 4%);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
border: 0px none $color5;
|
||||
border: 0px none $base-border-color;
|
||||
border-radius: 0;
|
||||
background: rgba($color8, 0.1);
|
||||
background: rgba($base-overlay-background, 0.1);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track:hover {
|
||||
background: $color1;
|
||||
background: $ui-base-color;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track:active {
|
||||
background: $color1;
|
||||
background: $ui-base-color;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
.activity-stream {
|
||||
clear: both;
|
||||
box-shadow: 0 0 15px rgba($color8, 0.2);
|
||||
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
|
||||
|
||||
.entry {
|
||||
background: $color5;
|
||||
background: $simple-background-color;
|
||||
|
||||
.detailed-status.light,
|
||||
.status.light {
|
||||
border-bottom: 1px solid $color2;
|
||||
border-bottom: 1px solid $ui-secondary-color;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
font-size: 14px;
|
||||
|
||||
.status__relative-time {
|
||||
color: $color4;
|
||||
color: $ui-primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
display: block;
|
||||
max-width: 100%;
|
||||
padding-right: 25px;
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
}
|
||||
|
||||
.status__avatar {
|
||||
|
|
@ -89,28 +89,28 @@
|
|||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: $color4;
|
||||
color: $ui-primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.status__content {
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
|
||||
a {
|
||||
color: $color4;
|
||||
color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
a.status__content__spoiler-link {
|
||||
color: $color5;
|
||||
background: $color3;
|
||||
color: $primary-text-color;
|
||||
background: $ui-primary-color;
|
||||
|
||||
&:hover {
|
||||
background: lighten($color3, 8%);
|
||||
background: lighten($ui-primary-color, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -131,7 +131,7 @@
|
|||
|
||||
.detailed-status.light {
|
||||
padding: 14px;
|
||||
background: $color5;
|
||||
background: $simple-background-color;
|
||||
cursor: default;
|
||||
|
||||
.detailed-status__display-name {
|
||||
|
|
@ -153,12 +153,12 @@
|
|||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -174,25 +174,25 @@
|
|||
}
|
||||
|
||||
.status__content {
|
||||
color: $color1;
|
||||
color: $ui-base-color;
|
||||
|
||||
a {
|
||||
color: $color4;
|
||||
color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
a.status__content__spoiler-link {
|
||||
color: $color5;
|
||||
background: $color3;
|
||||
color: $primary-text-color;
|
||||
background: $ui-primary-color;
|
||||
|
||||
&:hover {
|
||||
background: lighten($color3, 8%);
|
||||
background: lighten($ui-primary-color, 8%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detailed-status__meta {
|
||||
margin-top: 15px;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
|
||||
|
|
@ -291,13 +291,13 @@
|
|||
transform: translate(-50%, -50%);
|
||||
padding: 5px;
|
||||
border-radius: 100px;
|
||||
color: rgba($color5, 0.8);
|
||||
color: rgba($primary-text-color, 0.8);
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.media-spoiler {
|
||||
background: $color3;
|
||||
background: $ui-primary-color;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
|
|
@ -313,7 +313,7 @@
|
|||
z-index: 2;
|
||||
|
||||
&:hover {
|
||||
background: darken($color3, 5%);
|
||||
background: darken($ui-primary-color, 5%);
|
||||
}
|
||||
|
||||
span {
|
||||
|
|
@ -335,7 +335,7 @@
|
|||
padding-left: (48px + 14px * 2);
|
||||
padding-bottom: 0;
|
||||
margin-bottom: -4px;
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
|
||||
|
|
@ -345,7 +345,7 @@
|
|||
}
|
||||
|
||||
.status__display-name.muted strong {
|
||||
color: $color3;
|
||||
color: $ui-primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,13 +10,13 @@
|
|||
padding: 8px;
|
||||
line-height: 18px;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid $color1;
|
||||
border-top: 1px solid $ui-base-color;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
& > thead > tr > th {
|
||||
vertical-align: bottom;
|
||||
border-bottom: 2px solid $color1;
|
||||
border-bottom: 2px solid $ui-base-color;
|
||||
border-top: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
@ -27,11 +27,11 @@
|
|||
|
||||
& > tbody > tr:nth-child(odd) > td,
|
||||
& > tbody > tr:nth-child(odd) > th {
|
||||
background: $color1;
|
||||
background: $ui-base-color;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $color4;
|
||||
color: $ui-highlight-color;
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -53,11 +53,11 @@ a.table-action-link {
|
|||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
padding: 0 10px;
|
||||
color: rgba($color5, 0.7);
|
||||
color: rgba($primary-text-color, 0.7);
|
||||
font-weight: 500;
|
||||
|
||||
&:hover {
|
||||
color: $color5;
|
||||
color: $primary-text-color;
|
||||
}
|
||||
|
||||
i.fa {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,28 @@
|
|||
$color1: #282c37 !default; // darkest
|
||||
$color2: #d9e1e8 !default; // lightest
|
||||
$color3: #9baec8 !default; // lighter
|
||||
$color4: #2b90d9 !default; // vibrant
|
||||
$color5: #ffffff !default; // white
|
||||
$color6: #df405a !default; // error red
|
||||
$color7: #79bd9a !default; // succ green
|
||||
$color8: #000000 !default; // black
|
||||
$color9: #ff5050 !default; // red
|
||||
$color10: #ca8f04 !default; // dark goldenrod
|
||||
// Commonly used web colors
|
||||
$black: #000000; // Black
|
||||
$white: #ffffff; // White
|
||||
$success-green: #79bd9a; // Padua
|
||||
$error-red: #df405a; // Cerise
|
||||
$warning-red: #ff5050; // Sunset Orange
|
||||
$gold-star: #ca8f04; // Dark Goldenrod
|
||||
|
||||
// Values from the classic Mastodon UI
|
||||
$classic-base-color: #282c37; // Midnight Express
|
||||
$classic-primary-color: #9baec8; // Echo Blue
|
||||
$classic-secondary-color: #d9e1e8; // Pattens Blue
|
||||
$classic-highlight-color: #2b90d9; // Summer Sky
|
||||
|
||||
// Variables for defaults in UI
|
||||
$base-shadow-color: $black;
|
||||
$base-overlay-background: $black;
|
||||
$base-border-color: $white;
|
||||
$simple-background-color: $white;
|
||||
$primary-text-color: $white;
|
||||
$valid-value-color: $success-green;
|
||||
$error-value-color: $error-red;
|
||||
|
||||
// Tell UI to use selected colors
|
||||
$ui-base-color: $classic-base-color !default; // Darkest
|
||||
$ui-primary-color: $classic-primary-color !default; // Lighter
|
||||
$ui-secondary-color: $classic-secondary-color !default; // Lightest
|
||||
$ui-highlight-color: $classic-highlight-color !default; // Vibrant
|
||||
|
|
|
|||
Loading…
Reference in a new issue