diff --git a/app/javascript/styles/about.scss b/app/javascript/styles/about.scss index b5626551e..3512bdcb4 100644 --- a/app/javascript/styles/about.scss +++ b/app/javascript/styles/about.scss @@ -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; } } } diff --git a/app/javascript/styles/accounts.scss b/app/javascript/styles/accounts.scss index e1fa28f43..b2b807a82 100644 --- a/app/javascript/styles/accounts.scss +++ b/app/javascript/styles/accounts.scss @@ -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; } } diff --git a/app/javascript/styles/admin.scss b/app/javascript/styles/admin.scss index 3442464e7..3d3623154 100644 --- a/app/javascript/styles/admin.scss +++ b/app/javascript/styles/admin.scss @@ -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 { diff --git a/app/javascript/styles/basics.scss b/app/javascript/styles/basics.scss index e49c2214a..08121f03e 100644 --- a/app/javascript/styles/basics.scss +++ b/app/javascript/styles/basics.scss @@ -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%; diff --git a/app/javascript/styles/boost.scss b/app/javascript/styles/boost.scss index 90511c88c..7589828c6 100644 --- a/app/javascript/styles/boost.scss +++ b/app/javascript/styles/boost.scss @@ -3,9 +3,9 @@ } button.icon-button i.fa-retweet { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); &:hover { - background-image: url("data:image/svg+xml;utf8,"); + background-image: url("data:image/svg+xml;utf8,"); } } diff --git a/app/javascript/styles/compact_header.scss b/app/javascript/styles/compact_header.scss index 8fef05f0f..27a67135f 100644 --- a/app/javascript/styles/compact_header.scss +++ b/app/javascript/styles/compact_header.scss @@ -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 { diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss index beaa5dd71..4edaf5ae7 100644 --- a/app/javascript/styles/components.scss +++ b/app/javascript/styles/components.scss @@ -6,11 +6,11 @@ } .button { - background-color: darken($color4, 3%); + background-color: darken($ui-highlight-color, 3%); border: 10px none; border-radius: 4px; box-sizing: border-box; - color: $color5; + color: $primary-text-color; cursor: pointer; display: inline-block; font-family: inherit; @@ -32,12 +32,12 @@ &:active, &:focus, &:hover { - background-color: lighten($color4, 7%); + background-color: lighten($ui-highlight-color, 7%); transition: all 200ms ease-out; } &:disabled { - background-color: $color3; + background-color: $ui-primary-color; cursor: default; } @@ -51,8 +51,8 @@ } .column-icon { - background: lighten($color1, 4%); - color: $color3; + background: lighten($ui-base-color, 4%); + color: $ui-primary-color; cursor: pointer; font-size: 16px; padding: 15px; @@ -62,7 +62,7 @@ z-index: 3; &:hover { - color: lighten($color3, 7%); + color: lighten($ui-primary-color, 7%); } } @@ -85,7 +85,7 @@ .icon-button { display: inline-block; padding: 0; - color: lighten($color1, 26%); + color: lighten($ui-base-color, 26%); border: none; background: transparent; cursor: pointer; @@ -94,17 +94,17 @@ &:hover, &:active, &:focus { - color: lighten($color1, 33%); + color: lighten($ui-base-color, 33%); transition: color 200ms ease-out; } &.disabled { - color: lighten($color1, 13%); + color: lighten($ui-base-color, 13%); cursor: default; } &.active { - color: $color4; + color: $ui-highlight-color; } &::-moz-focus-inner { @@ -118,38 +118,38 @@ } &.inverted { - color: lighten($color1, 33%); + color: lighten($ui-base-color, 33%); &:hover, &:active, &:focus { - color: lighten($color1, 26%); + color: lighten($ui-base-color, 26%); } &.active { - color: $color4; + color: $ui-highlight-color; } &.disabled { - color: $color3; + color: $ui-primary-color; } } &.overlayed { box-sizing: content-box; - background: rgba($color8, 0.6); - color: rgba($color5, 0.7); + background: rgba($base-overlay-background, 0.6); + color: rgba($primary-text-color, 0.7); border-radius: 4px; padding: 2px; &:hover { - background: rgba($color8, 0.9); + background: rgba($base-overlay-background, 0.9); } } } .text-icon-button { - color: lighten($color1, 33%); + color: lighten($ui-base-color, 33%); border: none; background: transparent; cursor: pointer; @@ -163,17 +163,17 @@ &:hover, &:active, &:focus { - color: lighten($color1, 26%); + color: lighten($ui-base-color, 26%); transition: color 200ms ease-out; } &.disabled { - color: lighten($color1, 13%); + color: lighten($ui-base-color, 13%); cursor: default; } &.active { - color: $color4; + color: $ui-highlight-color; } &::-moz-focus-inner { @@ -188,7 +188,7 @@ } .dropdown--active .icon-button { - color: $color4; + color: $ui-highlight-color; } .dropdown--active::after { @@ -199,7 +199,7 @@ height: 0; border-style: solid; border-width: 0 4.5px 7.8px; - border-color: transparent transparent $color2; + border-color: transparent transparent $ui-secondary-color; bottom: 8px; right: 104px; } @@ -218,7 +218,7 @@ } .lightbox .icon-button { - color: $color1; + color: $ui-base-color; } .compose-form { @@ -226,22 +226,22 @@ } .compose-form__warning { - color: darken($color3, 33%); + color: darken($ui-secondary-color, 33%); margin-bottom: 15px; - background: $color3; - box-shadow: 0 2px 6px rgba($color8, 0.3); + background: $ui-primary-color; + box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3); padding: 8px 10px; border-radius: 4px; font-size: 13px; font-weight: 400; strong { - color: darken($color3, 33%); + color: darken($primary-text-color, 33%); font-weight: 500; } a { - color: darken($color3, 33%); + color: darken($ui-primary-color, 33%); font-weight: 500; text-decoration: underline; @@ -254,10 +254,10 @@ } .compose-form__modifiers { - color: $color1; + color: $ui-base-color; font-family: inherit; font-size: 14px; - background: $color5; + background: $simple-background-color; border-radius: 0 0 4px; } @@ -268,8 +268,8 @@ .compose-form__buttons { padding: 10px; - background: darken($color5, 8%); - box-shadow: inset 0 5px 5px rgba($color8, 0.05); + background: darken($simple-background-color, 8%); + box-shadow: inset 0 5px 5px rgba($base-shadow-color, 0.05); border-radius: 0 0 4px 4px; display: flex; @@ -319,7 +319,7 @@ vertical-align: middle; &.with-border { - border-top: 1px solid $color1; + border-top: 1px solid $ui-base-color; padding-top: 10px; } @@ -328,16 +328,16 @@ vertical-align: middle; margin-bottom: 14px; margin-left: 8px; - color: $color3; + color: $ui-primary-color; } } .compose-form__textarea, .follow-form__input { - background: $color5; + background: $simple-background-color; &:disabled { - background: $color2; + background: $ui-secondary-color; } } @@ -345,7 +345,7 @@ position: relative; .dropdown--active::after { - border-color: transparent transparent $color5; + border-color: transparent transparent $base-border-color; bottom: -1px; right: 8px; } @@ -378,7 +378,7 @@ border-radius: 4px 4px 0 0; position: relative; bottom: -2px; - background: $color3; + background: $ui-primary-color; padding: 10px; } @@ -393,7 +393,7 @@ } .reply-indicator__display-name { - color: $color1; + color: $ui-base-color; display: block; max-width: 100%; line-height: 24px; @@ -438,14 +438,14 @@ } a { - color: $color2; + color: $ui-secondary-color; text-decoration: none; &:hover { text-decoration: underline; .fa { - color: lighten($color1, 40%); + color: lighten($ui-base-color, 40%); } } @@ -460,15 +460,15 @@ } .fa { - color: lighten($color1, 30%); + color: lighten($ui-base-color, 30%); } } .status__content__spoiler-link { - background: lighten($color1, 30%); + background: lighten($ui-base-color, 30%); &:hover { - background: lighten($color1, 33%); + background: lighten($ui-base-color, 33%); text-decoration: none; } } @@ -477,7 +477,7 @@ a.status__content__spoiler-link { display: inline-block; border-radius: 2px; - color: lighten($color1, 8%); + color: lighten($ui-base-color, 8%); font-weight: 500; font-size: 11px; padding: 0 6px; @@ -495,41 +495,41 @@ a.status__content__spoiler-link { padding-left: 68px; position: relative; min-height: 48px; - border-bottom: 1px solid lighten($color1, 8%); + border-bottom: 1px solid lighten($ui-base-color, 8%); cursor: default; &.light { .status__relative-time { - color: $color3; + color: $ui-primary-color; } .status__display-name { - color: $color1; + color: $ui-base-color; } .display-name { strong { - color: $color1; + color: $ui-base-color; } span { - color: $color3; + 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%); } } } @@ -537,11 +537,11 @@ a.status__content__spoiler-link { } .status__relative-time { - color: lighten($color1, 26%); + color: lighten($ui-base-color, 26%); } .status__display-name { - color: lighten($color1, 26%); + color: lighten($ui-base-color, 26%); } .status__info .status__display-name { @@ -560,11 +560,11 @@ a.status__content__spoiler-link { } .status-check-box { - border-bottom: 1px solid lighten($color1, 8%); + border-bottom: 1px solid lighten($ui-base-color, 8%); display: flex; .status__content { - background: lighten($color1, 4%); + background: lighten($ui-base-color, 4%); flex: 1 1 auto; padding: 10px; } @@ -580,14 +580,14 @@ a.status__content__spoiler-link { .status__prepend { margin-left: 68px; - color: lighten($color1, 26%); + color: lighten($ui-base-color, 26%); padding: 8px 0; padding-bottom: 2px; font-size: 14px; position: relative; .status__display-name strong { - color: lighten($color1, 26%); + color: lighten($ui-base-color, 26%); } } @@ -609,7 +609,7 @@ a.status__content__spoiler-link { } .detailed-status { - background: lighten($color1, 4%); + background: lighten($ui-base-color, 4%); padding: 14px 10px; .status__content { @@ -625,15 +625,15 @@ a.status__content__spoiler-link { .detailed-status__meta { margin-top: 15px; - color: lighten($color1, 26%); + color: lighten($ui-base-color, 26%); font-size: 14px; line-height: 18px; } .detailed-status__action-bar { - background: lighten($color1, 4%); - border-top: 1px solid lighten($color1, 8%); - border-bottom: 1px solid lighten($color1, 8%); + background: lighten($ui-base-color, 4%); + border-top: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid lighten($ui-base-color, 8%); display: flex; flex-direction: row; padding: 10px 0; @@ -653,22 +653,22 @@ a.status__content__spoiler-link { } .reply-indicator__content { - color: $color1; + color: $ui-base-color; font-size: 14px; a { - color: lighten($color1, 20%); + color: lighten($ui-base-color, 20%); } } .account { padding: 10px; - border-bottom: 1px solid lighten($color1, 8%); + border-bottom: 1px solid lighten($ui-base-color, 8%); .account__display-name { flex: 1 1 auto; display: block; - color: $color3; + color: $ui-primary-color; overflow: hidden; text-decoration: none; font-size: 14px; @@ -722,31 +722,31 @@ a.status__content__spoiler-link { .account__header { flex: 0 0 auto; - background: lighten($color1, 4%); + background: lighten($ui-base-color, 4%); text-align: center; background-size: cover; background-position: center; position: relative; & > div { - background: rgba(lighten($color1, 4%), 0.9); + background: rgba(lighten($ui-base-color, 4%), 0.9); } .account__header__content { - color: $color2; + color: $ui-secondary-color; } .account__header__display-name { - color: $color5; + color: $primary-text-color; } .account__header__username { - color: $color4; + color: $ui-highlight-color; } } .account__header__content { - color: $color3; + color: $ui-primary-color; font-size: 14px; font-weight: 400; overflow: hidden; @@ -779,8 +779,8 @@ a.status__content__spoiler-link { } .account__action-bar { - border-top: 1px solid lighten($color1, 8%); - border-bottom: 1px solid lighten($color1, 8%); + border-top: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid lighten($ui-base-color, 8%); line-height: 36px; overflow: hidden; flex: 0 0 auto; @@ -816,25 +816,25 @@ a.status__content__spoiler-link { text-decoration: none; overflow: hidden; width: 80px; - border-left: 1px solid lighten($color1, 8%); + border-left: 1px solid lighten($ui-base-color, 8%); padding: 10px 5px; & > span { display: block; text-transform: uppercase; font-size: 11px; - color: $color3; + color: $ui-primary-color; } strong { display: block; font-size: 15px; font-weight: 500; - color: $color5; + color: $primary-text-color; } abbr { - color: lighten($color1, 26%); + color: lighten($ui-base-color, 26%); } } @@ -874,7 +874,7 @@ a.status__content__spoiler-link { .status__display-name, .account__display-name { strong { - color: $color5; + color: $primary-text-color; } &.muted { @@ -903,7 +903,7 @@ a.status__content__spoiler-link { } .detailed-status__display-name { - color: $color2; + color: $ui-secondary-color; display: block; line-height: 24px; margin-bottom: 15px; @@ -916,7 +916,7 @@ a.status__content__spoiler-link { strong { font-size: 16px; - color: $color5; + color: $primary-text-color; } } @@ -936,11 +936,11 @@ a.status__content__spoiler-link { .muted { .status__content p, .status__content a { - color: lighten($color1, 26%); + color: lighten($ui-base-color, 26%); } .status__display-name strong { - color: lighten($color1, 26%); + color: lighten($ui-base-color, 26%); } .status__avatar { @@ -948,11 +948,11 @@ a.status__content__spoiler-link { } a.status__content__spoiler-link { - background: lighten($color1, 26%); - color: lighten($color1, 4%); + background: lighten($ui-base-color, 26%); + color: lighten($ui-base-color, 4%); &:hover { - background: lighten($color1, 29%); + background: lighten($ui-base-color, 29%); text-decoration: none; } } @@ -963,12 +963,12 @@ a.status__content__spoiler-link { padding: 8px 0; padding-bottom: 0; cursor: default; - color: $color3; + color: $ui-primary-color; font-size: 15px; position: relative; .fa { - color: $color4; + color: $ui-highlight-color; } } @@ -977,12 +977,12 @@ a.status__content__spoiler-link { position: absolute; .star-icon { - color: $color10; + color: $gold-star; } } .star-icon.active { - color: $color10; + color: $gold-star; } .notification__display-name { @@ -991,7 +991,7 @@ a.status__content__spoiler-link { text-decoration: none; &:hover { - color: $color5; + color: $primary-text-color; text-decoration: underline; } } @@ -1033,10 +1033,10 @@ a.status__content__spoiler-link { display: flex; flex-shrink: 0; cursor: default; - color: $color3; + color: $ui-primary-color; strong { - color: $color5; + color: $primary-text-color; } .permalink { @@ -1069,7 +1069,7 @@ a.status__content__spoiler-link { } .dropdown__sep { - border-bottom: 1px solid darken($color2, 8%); + border-bottom: 1px solid darken($ui-secondary-color, 8%); margin: 5px 7px 6px; padding-top: 1px; } @@ -1084,10 +1084,10 @@ a.status__content__spoiler-link { & > ul { list-style: none; - background: $color2; + background: $ui-secondary-color; padding: 4px 0; border-radius: 4px; - box-shadow: 0 0 15px rgba($color8, 0.4); + box-shadow: 0 0 15px rgba($base-shadow-color, 0.4); min-width: 140px; position: relative; } @@ -1109,8 +1109,8 @@ a.status__content__spoiler-link { padding: 4px 14px; box-sizing: border-box; text-decoration: none; - background: $color2; - color: $color1; + background: $ui-secondary-color; + color: $ui-base-color; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -1120,8 +1120,8 @@ a.status__content__spoiler-link { } &:hover { - background: $color4; - color: $color2; + background: $ui-highlight-color; + color: $ui-secondary-color; } } } @@ -1133,7 +1133,7 @@ a.status__content__spoiler-link { .static-content { padding: 10px; padding-top: 20px; - color: lighten($color1, 26%); + color: lighten($ui-base-color, 26%); h1 { font-size: 16px; @@ -1171,7 +1171,7 @@ a.status__content__spoiler-link { flex-direction: column; > .scrollable { - background: $color1; + background: $ui-base-color; } } @@ -1181,7 +1181,7 @@ a.status__content__spoiler-link { flex-direction: column; width: 100%; height: 100%; - background: darken($color1, 7%); + background: darken($ui-base-color, 7%); } .drawer { @@ -1197,7 +1197,7 @@ a.status__content__spoiler-link { flex: 1 1 auto; padding: 15px; padding-bottom: 13px; - color: $color3; + color: $ui-primary-color; text-decoration: none; text-align: center; font-size: 16px; @@ -1298,7 +1298,7 @@ a.status__content__spoiler-link { position: absolute; top: 0; left: 0; - background: lighten($color1, 13%); + background: lighten($ui-base-color, 13%); box-sizing: border-box; padding: 0; display: flex; @@ -1309,12 +1309,12 @@ a.status__content__spoiler-link { height: 100%; &.darker { - background: $color1; + background: $ui-base-color; } } .pseudo-drawer { - background: lighten($color1, 13%); + background: lighten($ui-base-color, 13%); font-size: 13px; text-align: left; } @@ -1322,7 +1322,7 @@ a.status__content__spoiler-link { .drawer__header { flex: 0 0 auto; font-size: 16px; - background: lighten($color1, 8%); + background: lighten($ui-base-color, 8%); margin-bottom: 10px; display: flex; flex-direction: row; @@ -1331,7 +1331,7 @@ a.status__content__spoiler-link { transition: background 100ms ease-in; &:hover { - background: lighten($color1, 3%); + background: lighten($ui-base-color, 3%); transition: background 200ms ease-out; } } @@ -1339,7 +1339,7 @@ a.status__content__spoiler-link { .tabs-bar { display: flex; - background: lighten($color1, 8%); + background: lighten($ui-base-color, 8%); flex: 0 0 auto; overflow-y: auto; } @@ -1348,12 +1348,12 @@ a.status__content__spoiler-link { display: block; flex: 1 1 auto; padding: 15px 10px; - color: $color5; + color: $primary-text-color; text-decoration: none; text-align: center; font-size: 14px; font-weight: 500; - border-bottom: 2px solid lighten($color1, 8%); + border-bottom: 2px solid lighten($ui-base-color, 8%); transition: all 200ms linear; .fa { @@ -1362,14 +1362,14 @@ a.status__content__spoiler-link { } &.active { - border-bottom: 2px solid $color4; - color: $color4; + border-bottom: 2px solid $ui-highlight-color; + color: $ui-highlight-color; } &:hover, &:focus, &:active { - background: lighten($color1, 14%); + background: lighten($ui-base-color, 14%); transition: all 100ms linear; } @@ -1402,22 +1402,22 @@ a.status__content__spoiler-link { top: 100%; width: 100%; z-index: 99; - box-shadow: 0 0 15px rgba($color8, 0.4); + box-shadow: 0 0 15px rgba($base-shadow-color, 0.4); } .react-autosuggest__section-title { - background: $color3; + background: $ui-primary-color; padding: 4px 10px; font-weight: 500; cursor: default; - color: $color1; + color: $ui-base-color; text-transform: uppercase; font-size: 11px; } .react-autosuggest__suggestions-list { - background: $color2; - color: $color1; + background: $ui-secondary-color; + color: $ui-base-color; font-size: 14px; } @@ -1427,8 +1427,8 @@ a.status__content__spoiler-link { } .react-autosuggest__suggestion--focused { - background: $color4; - color: $color5; + background: $ui-highlight-color; + color: $primary-text-color; } .scrollable { @@ -1444,8 +1444,8 @@ a.status__content__spoiler-link { } .column-back-button { - background: lighten($color1, 4%); - color: $color4; + background: lighten($ui-base-color, 4%); + color: $ui-highlight-color; cursor: pointer; flex: 0 0 auto; font-size: 16px; @@ -1484,7 +1484,7 @@ a.status__content__spoiler-link { border: 0; padding: 0; user-select: none; - -webkit-tap-highlight-color: rgba($color8, 0); + -webkit-tap-highlight-color: rgba($base-overlay-background, 0); -webkit-tap-highlight-color: transparent; } @@ -1510,20 +1510,20 @@ a.status__content__spoiler-link { height: 24px; padding: 0; border-radius: 30px; - background-color: $color1; + background-color: $ui-base-color; transition: all 0.2s ease; } .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { - background-color: darken($color1, 10%); + background-color: darken($ui-base-color, 10%); } .react-toggle--checked .react-toggle-track { - background-color: $color4; + background-color: $ui-highlight-color; } .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { - background-color: lighten($color4, 10%); + background-color: lighten($ui-highlight-color, 10%); } .react-toggle-track-check { @@ -1570,28 +1570,28 @@ a.status__content__spoiler-link { left: 1px; width: 22px; height: 22px; - border: 1px solid $color1; + border: 1px solid $ui-base-color; border-radius: 50%; - background-color: darken($color5, 2%); + background-color: darken($simple-background-color, 2%); box-sizing: border-box; transition: all 0.25s ease; } .react-toggle--checked .react-toggle-thumb { left: 27px; - border-color: $color4; + border-color: $ui-highlight-color; } .column-link { - background: lighten($color1, 8%); - color: $color5; + background: lighten($ui-base-color, 8%); + color: $primary-text-color; display: block; font-size: 16px; padding: 15px; text-decoration: none; &:hover { - background: lighten($color1, 11%); + background: lighten($ui-base-color, 11%); } &.hidden-on-mobile { @@ -1607,8 +1607,8 @@ a.status__content__spoiler-link { } .column-subheading { - background: $color1; - color: lighten($color1, 26%); + background: $ui-base-color; + color: lighten($ui-base-color, 26%); padding: 8px 20px; font-size: 12px; font-weight: 500; @@ -1627,7 +1627,7 @@ a.status__content__spoiler-link { box-sizing: border-box; width: 100%; margin: 0; - color: $color1; + color: $ui-base-color; padding: 10px; font-family: inherit; font-size: 14px; @@ -1650,7 +1650,7 @@ a.status__content__spoiler-link { .autosuggest-textarea__textarea { min-height: 100px; - background: $color5; + background: $simple-background-color; border-radius: 4px 4px 0 0; padding-bottom: 0; padding-right: 10px + 22px; @@ -1667,9 +1667,9 @@ a.status__content__spoiler-link { top: 100%; width: 100%; z-index: 99; - box-shadow: 0 0 15px rgba($color8, 0.4); - background: $color2; - color: $color1; + box-shadow: 0 0 15px rgba($base-shadow-color, 0.4); + background: $ui-secondary-color; + color: $ui-base-color; font-size: 14px; } @@ -1678,12 +1678,12 @@ a.status__content__spoiler-link { cursor: pointer; &:hover { - background: darken($color2, 10%); + background: darken($ui-secondary-color, 10%); } &.selected { - background: $color4; - color: $color5; + background: $ui-highlight-color; + color: $base-border-color; } } @@ -1718,7 +1718,7 @@ a.status__content__spoiler-link { } .character-counter--over { - color: $color9; + color: $warning-red; } .getting-started__wrapper { @@ -1732,19 +1732,19 @@ a.status__content__spoiler-link { flex: 1 0 auto; p { - color: $color2; + color: $ui-secondary-color; } a { - color: lighten($color1, 26%); + color: lighten($ui-base-color, 26%); } } .setting-text { - color: $color3; + color: $ui-primary-color; background: transparent; border: none; - border-bottom: 2px solid $color3; + border-bottom: 2px solid $ui-primary-color; box-sizing: border-box; display: block; font-family: inherit; @@ -1754,8 +1754,8 @@ a.status__content__spoiler-link { &:focus, &:active { - color: $color5; - border-bottom-color: $color4; + color: $primary-text-color; + border-bottom-color: $ui-highlight-color; } @media screen and (max-width: 600px) { @@ -1787,15 +1787,15 @@ button.icon-button.active i.fa-retweet { display: flex; cursor: pointer; font-size: 14px; - border: 1px solid lighten($color1, 8%); + border: 1px solid lighten($ui-base-color, 8%); border-radius: 4px; - color: lighten($color1, 26%); + color: lighten($ui-base-color, 26%); margin-top: 14px; text-decoration: none; overflow: hidden; &:hover { - background: lighten($color1, 8%); + background: lighten($ui-base-color, 8%); } } @@ -1847,7 +1847,7 @@ button.icon-button.active i.fa-retweet { display: block; font-weight: 500; margin-bottom: 5px; - color: $color3; + color: $ui-primary-color; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -1860,7 +1860,7 @@ button.icon-button.active i.fa-retweet { } .status-card__description { - color: $color3; + color: $ui-primary-color; } .status-card__host { @@ -1871,7 +1871,7 @@ button.icon-button.active i.fa-retweet { .status-card__image { flex: 0 0 100px; - background: lighten($color1, 8%); + background: lighten($ui-base-color, 8%); } .status-card__image-image { @@ -1884,13 +1884,13 @@ button.icon-button.active i.fa-retweet { .load-more { display: block; - color: lighten($color1, 26%); + color: lighten($ui-base-color, 26%); text-align: center; padding: 15px; text-decoration: none; &:hover { - background: lighten($color1, 2%); + background: lighten($ui-base-color, 2%); } } @@ -1898,8 +1898,8 @@ button.icon-button.active i.fa-retweet { text-align: center; font-size: 16px; font-weight: 500; - color: lighten($color1, 16%); - background: $color1; + color: lighten($ui-base-color, 16%); + background: $ui-base-color; cursor: default; display: flex; flex: 1 1 auto; @@ -1916,7 +1916,7 @@ button.icon-button.active i.fa-retweet { .column-header { padding: 15px; font-size: 16px; - background: lighten($color1, 4%); + background: lighten($ui-base-color, 4%); flex: 0 0 auto; cursor: pointer; position: relative; @@ -1924,12 +1924,12 @@ button.icon-button.active i.fa-retweet { outline: 0; &.active { - box-shadow: 0 1px 0 rgba($color4, 0.3); + box-shadow: 0 1px 0 rgba($ui-highlight-color, 0.3); } &.active .fa { - color: $color4; - text-shadow: 0 0 10px rgba($color4, 0.4); + color: $ui-highlight-color; + text-shadow: 0 0 10px rgba($ui-highlight-color, 0.4); } &.hidden-on-mobile { @@ -1950,7 +1950,7 @@ button.icon-button.active i.fa-retweet { } .loading-indicator { - color: $color2; + color: $ui-secondary-color; font-size: 16px; font-weight: 500; padding-top: 120px; @@ -1958,24 +1958,24 @@ button.icon-button.active i.fa-retweet { } .collapsable-collapsed { - color: $color3; - background: lighten($color1, 4%); + color: $ui-primary-color; + background: lighten($ui-base-color, 4%); } .collapsable { - color: $color5; - background: lighten($color1, 8%); + color: $primary-text-color; + background: lighten($ui-base-color, 8%); &:hover { - color: $color5; - background: lighten($color1, 8%); + color: $primary-text-color; + background: lighten($ui-base-color, 8%); } } .video-error-cover { align-items: center; - background: $color8; - color: $color5; + background: $base-overlay-background; + color: $primary-text-color; cursor: pointer; display: flex; flex-direction: column; @@ -1989,8 +1989,8 @@ button.icon-button.active i.fa-retweet { .media-spoiler { align-items: center; - background: $color8; - color: $color5; + background: $base-overlay-background; + color: $primary-text-color; cursor: pointer; display: flex; flex-direction: column; @@ -2015,19 +2015,19 @@ button.icon-button.active i.fa-retweet { .spoiler-button { left: 4px; position: absolute; - text-shadow: 0 1px 1px $color8, 1px 0 1px $color8; + text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; top: 4px; z-index: 100; } .modal-container--preloader { - background: lighten($color1, 8%); + background: lighten($ui-base-color, 8%); } .account--panel { - background: lighten($color1, 4%); - border-top: 1px solid lighten($color1, 8%); - border-bottom: 1px solid lighten($color1, 8%); + background: lighten($ui-base-color, 4%); + border-top: 1px solid lighten($ui-base-color, 8%); + border-bottom: 1px solid lighten($ui-base-color, 8%); display: flex; flex-direction: row; padding: 10px 0; @@ -2040,12 +2040,12 @@ button.icon-button.active i.fa-retweet { } .column-settings__outer { - background: lighten($color1, 8%); + background: lighten($ui-base-color, 8%); padding: 15px; } .column-settings__section { - color: $color3; + color: $ui-primary-color; cursor: default; display: block; font-weight: 500; @@ -2054,9 +2054,9 @@ button.icon-button.active i.fa-retweet { .modal-container__nav { align-items: center; - background: rgba($color8, 0.5); + background: rgba($base-overlay-background, 0.5); box-sizing: border-box; - color: $color5; + color: $primary-text-color; cursor: pointer; display: flex; font-size: 24px; @@ -2075,7 +2075,7 @@ button.icon-button.active i.fa-retweet { } .account--follows-info { - color: $color5; + color: $primary-text-color; } .setting-toggle__label { @@ -2085,7 +2085,7 @@ button.icon-button.active i.fa-retweet { } .setting-toggle { - color: $color3; + color: $ui-primary-color; display: inline-block; margin-bottom: 14px; margin-left: 8px; @@ -2100,14 +2100,14 @@ button.icon-button.active i.fa-retweet { } .report__target { - border-bottom: 1px solid lighten($color1, 4%); - color: $color2; + border-bottom: 1px solid lighten($ui-base-color, 4%); + color: $ui-secondary-color; flex: 0 0 auto; padding: 10px; strong { display: block; - color: $color5; + color: $primary-text-color; font-weight: 500; } } @@ -2125,9 +2125,9 @@ button.icon-button.active i.fa-retweet { 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; - color: $color5; + color: $primary-text-color; display: block; font-family: inherit; font-size: 14px; @@ -2139,8 +2139,8 @@ button.icon-button.active i.fa-retweet { &:active, &:focus { - border-bottom-color: $color4; - background: rgba($color8, 0.1); + border-bottom-color: $ui-highlight-color; + background: rgba($base-overlay-background, 0.1); } } @@ -2154,8 +2154,8 @@ button.icon-button.active i.fa-retweet { } .empty-column-indicator { - color: lighten($color1, 20%); - background: $color1; + color: lighten($ui-base-color, 20%); + background: $ui-base-color; text-align: center; padding: 20px; font-size: 15px; @@ -2166,7 +2166,7 @@ button.icon-button.active i.fa-retweet { align-items: center; a { - color: $color4; + color: $ui-highlight-color; text-decoration: none; &:hover { @@ -2186,7 +2186,7 @@ button.icon-button.active i.fa-retweet { pointer-events: none; height: 28px; z-index: 1; - background: radial-gradient(ellipse, rgba($color4, 0.23) 0%, rgba($color4, 0) 60%); + background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%); } @keyframes pulse { @@ -2207,12 +2207,12 @@ button.icon-button.active i.fa-retweet { .emoji-dialog { width: 245px; height: 270px; - background: $color5; + background: $simple-background-color; box-sizing: border-box; border-radius: 4px; overflow: hidden; position: relative; - box-shadow: 0 0 8px rgba($color8, 0.2); + box-shadow: 0 0 8px rgba($base-shadow-color, 0.2); .emojione { margin: 0; @@ -2256,7 +2256,7 @@ button.icon-button.active i.fa-retweet { } &.active { - border-bottom-color: $color4; + border-bottom-color: $ui-highlight-color; img, svg { @@ -2294,7 +2294,7 @@ button.icon-button.active i.fa-retweet { font-size: 12px; text-transform: uppercase; font-weight: 500; - color: darken($color2, 18%); + color: darken($ui-secondary-color, 18%); cursor: default; } @@ -2334,7 +2334,7 @@ button.icon-button.active i.fa-retweet { width: 7px; height: 7px; border-radius: 10px; - border: 2px solid $color5; + border: 2px solid $base-border-color; top: 2px; left: 2px; } @@ -2343,7 +2343,7 @@ button.icon-button.active i.fa-retweet { .emoji-search-wrapper { padding: 10px; - border-bottom: 1px solid lighten($color2, 4%); + border-bottom: 1px solid lighten($ui-secondary-color, 4%); } .emoji-search { @@ -2353,9 +2353,9 @@ button.icon-button.active i.fa-retweet { font-family: inherit; display: block; width: 100%; - background: rgba($color2, 0.3); - color: darken($color2, 18%); - border: 1px solid $color2; + background: rgba($ui-secondary-color, 0.3); + color: darken($ui-secondary-color, 18%); + border: 1px solid $ui-secondary-color; border-radius: 4px; } @@ -2378,7 +2378,7 @@ button.icon-button.active i.fa-retweet { } &:hover { - background: lighten($color2, 3%); + background: lighten($ui-secondary-color, 3%); img, svg { @@ -2400,7 +2400,7 @@ button.icon-button.active i.fa-retweet { .upload-area { align-items: center; - background: rgba($color8, 0.8); + background: rgba($base-overlay-background, 0.8); display: flex; height: 100%; justify-content: center; @@ -2434,8 +2434,8 @@ button.icon-button.active i.fa-retweet { left: 0; z-index: -1; border-radius: 4px; - background: $color1; - box-shadow: 0 0 5px rgba($color8, 0.2); + background: $ui-base-color; + box-shadow: 0 0 5px rgba($base-shadow-color, 0.2); } .upload-area__content { @@ -2443,16 +2443,16 @@ button.icon-button.active i.fa-retweet { display: flex; align-items: center; justify-content: center; - color: $color2; + color: $ui-secondary-color; font-size: 18px; font-weight: 500; - border: 2px dashed lighten($color1, 26%); + border: 2px dashed lighten($ui-base-color, 26%); border-radius: 4px; } .upload-progress { padding: 10px; - color: lighten($color1, 26%); + color: lighten($ui-base-color, 26%); overflow: hidden; display: flex; @@ -2477,7 +2477,7 @@ button.icon-button.active i.fa-retweet { width: 100%; height: 6px; border-radius: 6px; - background: lighten($color1, 26%); + background: lighten($ui-base-color, 26%); position: relative; margin-top: 5px; } @@ -2487,7 +2487,7 @@ button.icon-button.active i.fa-retweet { left: 0; top: 0; height: 6px; - background: $color4; + background: $ui-highlight-color; border-radius: 6px; } @@ -2534,34 +2534,34 @@ button.icon-button.active i.fa-retweet { left: 0; top: 27px; width: 230px; - background: $color5; + background: $simple-background-color; border-radius: 0 4px 4px; z-index: 2; overflow: hidden; } .privacy-dropdown__option { - color: $color1; + color: $ui-base-color; padding: 10px; cursor: pointer; display: flex; &:hover, &.active { - background: $color4; - color: $color5; + background: $ui-highlight-color; + color: $primary-text-color; .privacy-dropdown__option__content { - color: $color5; + color: $primary-text-color; strong { - color: $color5; + color: $primary-text-color; } } } &.active:hover { - background: lighten($color4, 4%); + background: lighten($ui-highlight-color, 4%); } } @@ -2574,25 +2574,25 @@ button.icon-button.active i.fa-retweet { .privacy-dropdown__option__content { flex: 1 1 auto; - color: darken($color3, 24%); + color: darken($ui-primary-color, 24%); strong { font-weight: 500; display: block; - color: $color1; + color: $ui-base-color; } } .privacy-dropdown.active { .privacy-dropdown__value { - background: $color5; + background: $simple-background-color; border-radius: 4px 4px 0 0; - box-shadow: 0 -4px 4px rgba($color8, 0.1); + box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1); } .privacy-dropdown__dropdown { display: block; - box-shadow: 2px 4px 6px rgba($color8, 0.1); + box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1); } } @@ -2602,7 +2602,7 @@ button.icon-button.active i.fa-retweet { .search__input { padding-right: 30px; - color: $color2; + color: $ui-secondary-color; outline: 0; box-sizing: border-box; display: block; @@ -2611,8 +2611,8 @@ button.icon-button.active i.fa-retweet { padding: 10px; padding-right: 30px; font-family: inherit; - background: $color1; - color: $color3; + background: $ui-base-color; + color: $ui-primary-color; font-size: 14px; margin: 0; @@ -2627,7 +2627,7 @@ button.icon-button.active i.fa-retweet { } &:focus { - background: lighten($color1, 4%); + background: lighten($ui-base-color, 4%); } @media screen and (max-width: 600px) { @@ -2647,7 +2647,7 @@ button.icon-button.active i.fa-retweet { font-size: 18px; width: 18px; height: 18px; - color: $color2; + color: $ui-secondary-color; cursor: default; pointer-events: none; @@ -2676,15 +2676,15 @@ button.icon-button.active i.fa-retweet { } &:hover { - color: $color5; + color: $primary-text-color; } } } .search-results__header { - color: lighten($color1, 26%); - background: lighten($color1, 2%); - border-bottom: 1px solid darken($color1, 4%); + color: lighten($ui-base-color, 26%); + background: lighten($ui-base-color, 2%); + border-bottom: 1px solid darken($ui-base-color, 4%); padding: 15px 10px; font-size: 14px; font-weight: 500; @@ -2693,13 +2693,13 @@ button.icon-button.active i.fa-retweet { .search-results__hashtag { display: block; padding: 10px; - color: $color2; + color: $ui-secondary-color; text-decoration: none; &:hover, &:active, &:focus { - color: lighten($color2, 4%); + color: lighten($ui-secondary-color, 4%); text-decoration: underline; } } @@ -2712,7 +2712,7 @@ button.icon-button.active i.fa-retweet { bottom: 0; z-index: 9999; opacity: 0; - background: rgba($color8, 0.7); + background: rgba($base-overlay-background, 0.7); transform: translateZ(0); } @@ -2759,8 +2759,8 @@ button.icon-button.active i.fa-retweet { } .onboarding-modal { - background: $color2; - color: $color1; + background: $ui-secondary-color; + color: $ui-base-color; border-radius: 8px; overflow: hidden; display: flex; @@ -2810,7 +2810,7 @@ button.icon-button.active i.fa-retweet { .onboarding-modal__paginator { flex: 0 0 auto; - background: darken($color2, 8%); + background: darken($ui-secondary-color, 8%); display: flex; padding: 25px; @@ -2819,7 +2819,7 @@ button.icon-button.active i.fa-retweet { } a { - color: darken($color2, 34%); + color: darken($ui-secondary-color, 34%); text-decoration: none; font-size: 14px; font-weight: 500; @@ -2827,12 +2827,12 @@ button.icon-button.active i.fa-retweet { &:hover, &:focus, &:active { - color: darken($color2, 38%); + color: darken($ui-secondary-color, 38%); } &.onboarding-modal__done, &.onboarding-modal__next { - color: $color4; + color: $ui-highlight-color; } } } @@ -2848,17 +2848,17 @@ button.icon-button.active i.fa-retweet { width: 14px; height: 14px; border-radius: 14px; - background: darken($color2, 16%); + background: darken($ui-secondary-color, 16%); margin: 0 3px; cursor: pointer; &:hover { - background: darken($color2, 18%); + background: darken($ui-secondary-color, 18%); } &.active { cursor: default; - background: darken($color2, 24%); + background: darken($ui-secondary-color, 24%); } } @@ -2869,23 +2869,23 @@ button.icon-button.active i.fa-retweet { h1 { font-size: 18px; font-weight: 500; - color: $color1; + color: $ui-base-color; margin-bottom: 20px; } a { - color: $color4; + color: $ui-highlight-color; &:hover, &:focus, &:active { - color: lighten($color4, 4%); + color: lighten($ui-highlight-color, 4%); } } p { font-size: 16px; - color: lighten($color1, 8%); + color: lighten($ui-base-color, 8%); margin-top: 10px; margin-bottom: 10px; @@ -2895,8 +2895,8 @@ button.icon-button.active i.fa-retweet { strong { font-weight: 500; - background: $color1; - color: $color2; + background: $ui-base-color; + color: $ui-secondary-color; border-radius: 4px; font-size: 14px; padding: 3px 6px; @@ -2937,14 +2937,14 @@ button.icon-button.active i.fa-retweet { } .figure { - background: darken($color1, 8%); - color: $color2; + background: darken($ui-base-color, 8%); + color: $ui-secondary-color; margin-bottom: 20px; border-radius: 4px; padding: 10px; text-align: center; font-size: 14px; - box-shadow: 1px 2px 6px rgba($color8, 0.3); + box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.3); .onboarding-modal__image { border-radius: 4px; @@ -2986,7 +2986,7 @@ button.icon-button.active i.fa-retweet { } .column-header { - color: $color5; + color: $primary-text-color; } } @@ -3033,8 +3033,8 @@ button.icon-button.active i.fa-retweet { .boost-modal, .confirmation-modal { - background: lighten($color2, 8%); - color: $color1; + background: lighten($ui-secondary-color, 8%); + color: $ui-base-color; border-radius: 8px; overflow: hidden; max-width: 90vw; @@ -3070,14 +3070,14 @@ button.icon-button.active i.fa-retweet { .boost-modal__action-bar, .confirmation-modal__action-bar { display: flex; - background: $color2; + background: $ui-secondary-color; padding: 10px; line-height: 36px; & > div { flex: 1 1 auto; text-align: right; - color: lighten($color1, 33%); + color: lighten($ui-base-color, 33%); padding-right: 10px; } @@ -3110,7 +3110,7 @@ button.icon-button.active i.fa-retweet { } a { - color: darken($color2, 34%); + color: darken($ui-secondary-color, 34%); text-decoration: none; font-size: 14px; font-weight: 500; @@ -3118,7 +3118,7 @@ button.icon-button.active i.fa-retweet { &:hover, &:focus, &:active { - color: darken($color2, 38%); + color: darken($ui-secondary-color, 38%); } } } @@ -3134,7 +3134,7 @@ button.icon-button.active i.fa-retweet { } .loading-bar { - background-color: $color4; + background-color: $ui-highlight-color; height: 3px; position: absolute; top: 0; @@ -3144,8 +3144,8 @@ button.icon-button.active i.fa-retweet { .media-gallery__gifv__label { display: block; position: absolute; - color: $color5; - background: rgba($color8, 0.5); + color: $primary-text-color; + background: rgba($base-overlay-background, 0.5); bottom: 6px; left: 6px; padding: 2px 6px; @@ -3175,7 +3175,7 @@ button.icon-button.active i.fa-retweet { .attachment-list { display: flex; font-size: 14px; - border: 1px solid lighten($color1, 8%); + border: 1px solid lighten($ui-base-color, 8%); border-radius: 4px; margin-top: 14px; overflow: hidden; @@ -3183,10 +3183,10 @@ button.icon-button.active i.fa-retweet { .attachment-list__icon { flex: 0 0 auto; - color: lighten($color1, 26%); + color: lighten($ui-base-color, 26%); padding: 8px 18px; cursor: default; - border-right: 1px solid lighten($color1, 8%); + border-right: 1px solid lighten($ui-base-color, 8%); display: flex; flex-direction: column; align-items: center; @@ -3213,7 +3213,7 @@ button.icon-button.active i.fa-retweet { a { text-decoration: none; - color: lighten($color1, 26%); + color: lighten($ui-base-color, 26%); font-weight: 500; &:hover { @@ -3278,7 +3278,7 @@ button.icon-button.active i.fa-retweet { /* Status Video Player */ .status__video-player { - background: $color8; + background: $base-overlay-background; box-sizing: border-box; cursor: default; /* May not be needed */ margin-top: 8px; @@ -3298,18 +3298,18 @@ button.icon-button.active i.fa-retweet { .status__video-player-expand, .status__video-player-mute { - color: $color5; + color: $primary-text-color; opacity: 0.8; position: absolute; right: 4px; - text-shadow: 0 1px 1px $color8, 1px 0 1px $color8; + text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; } .status__video-player-spoiler { - color: $color5; + color: $primary-text-color; left: 4px; position: absolute; - text-shadow: 0 1px 1px $color8, 1px 0 1px $color8; + text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color; top: 4px; z-index: 100; } @@ -3333,7 +3333,7 @@ button.icon-button.active i.fa-retweet { .media-spoiler-video-play-icon { border-radius: 100px; - color: rgba($color5, 0.8); + color: rgba($primary-text-color, 0.8); font-size: 36px; left: 50%; padding: 5px; diff --git a/app/javascript/styles/containers.scss b/app/javascript/styles/containers.scss index 3c489d5c8..390b9596c 100644 --- a/app/javascript/styles/containers.scss +++ b/app/javascript/styles/containers.scss @@ -32,7 +32,7 @@ h1 { display: block; text-align: center; - color: $color5; + color: $primary-text-color; font-size: 48px; font-weight: 500; diff --git a/app/javascript/styles/footer.scss b/app/javascript/styles/footer.scss index 90d430dfa..2d953b34e 100644 --- a/app/javascript/styles/footer.scss +++ b/app/javascript/styles/footer.scss @@ -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; diff --git a/app/javascript/styles/forms.scss b/app/javascript/styles/forms.scss index 20d28acb6..d66359943 100644 --- a/app/javascript/styles/forms.scss +++ b/app/javascript/styles/forms.scss @@ -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, diff --git a/app/javascript/styles/landing_strip.scss b/app/javascript/styles/landing_strip.scss index 077827180..d2ac5b822 100644 --- a/app/javascript/styles/landing_strip.scss +++ b/app/javascript/styles/landing_strip.scss @@ -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; diff --git a/app/javascript/styles/reset.scss b/app/javascript/styles/reset.scss index 71064cc31..cc5ba9d7c 100644 --- a/app/javascript/styles/reset.scss +++ b/app/javascript/styles/reset.scss @@ -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 { diff --git a/app/javascript/styles/stream_entries.scss b/app/javascript/styles/stream_entries.scss index bd679f00b..fcec32d44 100644 --- a/app/javascript/styles/stream_entries.scss +++ b/app/javascript/styles/stream_entries.scss @@ -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; } } diff --git a/app/javascript/styles/tables.scss b/app/javascript/styles/tables.scss index ed0ef4468..f7def8cf3 100644 --- a/app/javascript/styles/tables.scss +++ b/app/javascript/styles/tables.scss @@ -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 { diff --git a/app/javascript/styles/variables.scss b/app/javascript/styles/variables.scss index 76b58426a..cdf70f027 100644 --- a/app/javascript/styles/variables.scss +++ b/app/javascript/styles/variables.scss @@ -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