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