scalie-business
/
mastodon
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Move all hex colors in SASS to variables and all variations to darken/lighten

This commit is contained in:
Eugen Rochko 2017-01-23 16:01:46 +01:00
parent d4d56b8af0
commit f855d645b2
9 changed files with 203 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
app/assets/stylesheets/about.scss
View File

@ -1,11 +1,10 @@
@import url(https://fonts.googleapis.com/css?family=Montserrat); @import url(https://fonts.googleapis.com/css?family=Montserrat);
@import url(https://fonts.googleapis.com/css?family=Judson);
.about-body { .about-body {
.wrapper { .wrapper {
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
color: #9baec8; color: $color3;
padding-top: 50px; padding-top: 50px;
padding-bottom: 50px; padding-bottom: 50px;
@ -18,7 +17,7 @@
font: 46px/52px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font: 46px/52px -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-weight: 600; font-weight: 600;
margin-bottom: 20px; margin-bottom: 20px;
color: #2b90d9; color: $color4;
padding: 20px 0; padding: 20px 0;
img { img {
@ -32,19 +31,19 @@
h2 { h2 {
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
font-size: 24px; font-size: 24px;
line-height: 28px;// 'Judson', sans-serif; line-height: 28px;
font-weight: 400; font-weight: 400;
margin-bottom: 20px; margin-bottom: 20px;
color: #fff; color: $color5;
} }
h3 { h3 {
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
font-size: 20px; font-size: 20px;
line-height: 28px;// 'Judson', sans-serif; line-height: 28px;
font-weight: 400; font-weight: 400;
margin-bottom: 20px; margin-bottom: 20px;
color: #d9e1e8; color: $color2;
} }
ul, ol { ul, ol {
@ -66,13 +65,11 @@
p, li { p, li {
font: 16px/28px 'Montserrat', sans-serif; font: 16px/28px 'Montserrat', sans-serif;
//font-size: 19px;
//line-height: 28px;// 'Judson', sans-serif;
font-weight: 400; font-weight: 400;
margin-bottom: 26px; margin-bottom: 26px;
a { a {
color: #2b90d9; color: $color4;
text-decoration: underline; text-decoration: underline;
} }
} }
@ -81,14 +78,14 @@
display: inline-block; display: inline-block;
padding: 7px 7px 5px 7px; padding: 7px 7px 5px 7px;
margin: 0 2px; margin: 0 2px;
background: #9baec8; background: $color3;
color: #282c37; color: $color1;
font: 16px/16px 'Montserrat', sans-serif; font: 16px/16px 'Montserrat', sans-serif;
font-weight: 300; font-weight: 300;
} }
.screenshot { .screenshot {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); box-shadow: 0 0 15px rgba($color8, 0.4);
margin-bottom: 26px; margin-bottom: 26px;
img { img {
@ -107,7 +104,7 @@
line-height: 36px; line-height: 36px;
a { a {
color: #9baec8; color: $color3;
text-decoration: underline; text-decoration: underline;
} }
} }
@ -124,8 +121,8 @@
margin: 20px 0; margin: 20px 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border-top: 1px solid lighten(#282c37, 10%); border-top: 1px solid lighten($color1, 10%);
border-bottom: 1px solid lighten(#282c37, 10%); border-bottom: 1px solid lighten($color1, 10%);
padding-right: 14px; padding-right: 14px;
.section { .section {
@ -142,7 +139,7 @@
font-size: 16px; font-size: 16px;
&:last-child { &:last-child {
color: #d9e1e8; color: $color2;
font-size: 14px; font-size: 14px;
} }
} }
@ -151,7 +148,7 @@
font-weight: 500; font-weight: 500;
font-size: 32px; font-size: 32px;
line-height: 48px; line-height: 48px;
color: #fff; color: $color5;
} }
} }
} }
@ -178,7 +175,7 @@
a { a {
display: block; display: block;
color: #fff; color: $color5;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -190,7 +187,7 @@
.username { .username {
display: block; display: block;
color: #9baec8; color: $color3;
} }
} }
} }
@ -201,7 +198,7 @@
strong { strong {
display: block; display: block;
color: #fff; color: $color5;
} }
} }
@ -218,14 +215,14 @@
} }
.sidebar { .sidebar {
border-left: 1px solid lighten(#282c37, 10%); border-left: 1px solid lighten($color1, 10%);
width: 180px; width: 180px;
flex: 0 0 auto; flex: 0 0 auto;
} }
.panel { .panel {
.panel-header { .panel-header {
background: lighten(#282c37, 10%); background: lighten($color1, 10%);
padding: 7px 14px; padding: 7px 14px;
text-transform: uppercase; text-transform: uppercase;
font-size: 12px; font-size: 12px;
@ -250,7 +247,7 @@
a { a {
display: block; display: block;
padding: 7px 14px; padding: 7px 14px;
color: rgba(255, 255, 255, 0.7); color: rgba($color5, 0.7);
text-decoration: none; text-decoration: none;
transition: all 200ms linear; transition: all 200ms linear;
@ -259,17 +256,17 @@
} }
&:hover { &:hover {
color: #fff; color: $color5;
background-color: darken(#282c37, 5%); background-color: darken($color1, 5%);
transition: all 100ms linear; transition: all 100ms linear;
} }
&.selected { &.selected {
color: #fff; color: $color5;
background-color: #2b90d9; background-color: $color4;
&:hover { &:hover {
background-color: lighten(#2b90d9, 5%); background-color: lighten($color4, 5%);
} }
} }
} }

60
app/assets/stylesheets/accounts.scss
View File

@ -1,10 +1,10 @@
.card { .card {
background: #282c37; background: $color1;
background-size: cover; background-size: cover;
padding: 60px 0; padding: 60px 0;
padding-bottom: 0; padding-bottom: 0;
border-radius: 4px 4px 0 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; overflow: hidden;
position: relative; position: relative;
@ -14,7 +14,7 @@
} }
&:after { &:after {
background: rgba(0, 0, 0, 0.5); background: rgba($color8, 0.5);
display: block; display: block;
content: ""; content: "";
position: absolute; position: absolute;
@ -29,7 +29,7 @@
display: block; display: block;
font-size: 20px; font-size: 20px;
line-height: 18px * 1.5; line-height: 18px * 1.5;
color: #fff; color: $color5;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
position: relative; position: relative;
@ -38,7 +38,7 @@
small { small {
display: block; display: block;
font-size: 14px; font-size: 14px;
color: #2b90d9; color: $color4;
font-weight: 400; font-weight: 400;
} }
} }
@ -81,10 +81,10 @@
.counter { .counter {
width: 80px; width: 80px;
color: #9baec8; color: $color3;
padding: 0 10px; padding: 0 10px;
margin-bottom: 10px; margin-bottom: 10px;
border-right: 1px solid #9baec8; border-right: 1px solid $color3;
cursor: default; cursor: default;
position: relative; position: relative;
@ -99,14 +99,14 @@
bottom: -10px; bottom: -10px;
left: 0; left: 0;
width: 100%; width: 100%;
border-bottom: 4px solid #9baec8; border-bottom: 4px solid $color3;
opacity: 0.5; opacity: 0.5;
transition: all 0.8s ease; transition: all 0.8s ease;
} }
&.active { &.active {
&:after { &:after {
border-bottom: 4px solid #2b90d9; border-bottom: 4px solid $color4;
opacity: 1; opacity: 1;
} }
} }
@ -133,7 +133,7 @@
.counter-number { .counter-number {
font-weight: 500; font-weight: 500;
font-size: 18px; font-size: 18px;
color: #fff; color: $color5;
} }
} }
@ -142,7 +142,7 @@
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
padding: 5px 10px; padding: 5px 10px;
color: #d9e1e8; color: $color2;
order: 1; order: 1;
} }
@ -173,7 +173,7 @@
a, .current, .next_page, .previous_page, .gap { a, .current, .next_page, .previous_page, .gap {
font-size: 14px; font-size: 14px;
color: #fff; color: $color5;
font-weight: 500; font-weight: 500;
display: inline-block; display: inline-block;
padding: 6px 10px; padding: 6px 10px;
@ -181,9 +181,9 @@
} }
.current { .current {
background: #fff; background: $color5;
border-radius: 100px; border-radius: 100px;
color: #282c37; color: $color1;
cursor: default; cursor: default;
} }
@ -193,7 +193,7 @@
.previous_page, .next_page { .previous_page, .next_page {
text-transform: uppercase; text-transform: uppercase;
color: #d9e1e8; color: $color2;
} }
.previous_page { .previous_page {
@ -218,7 +218,7 @@
.disabled { .disabled {
cursor: default; cursor: default;
color: lighten(#282c37, 10%); color: lighten($color1, 10%);
} }
@media screen and (max-width: 360px) { @media screen and (max-width: 360px) {
@ -236,8 +236,8 @@
.accounts-grid { .accounts-grid {
clear: both; clear: both;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); box-shadow: 0 0 15px rgba($color8, 0.2);
background: #fff; background: $color5;
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
padding: 20px 10px; padding: 20px 10px;
padding-bottom: 10px; padding-bottom: 10px;
@ -252,9 +252,9 @@
box-sizing: border-box; box-sizing: border-box;
width: 335px; width: 335px;
float: left; float: left;
border: 1px solid #d9e1e8; border: 1px solid $color2;
border-radius: 4px; border-radius: 4px;
color: #282c37; color: $color1;
height: 160px; height: 160px;
margin-bottom: 10px; margin-bottom: 10px;
@ -265,7 +265,7 @@
.account-grid-card__header { .account-grid-card__header {
overflow: hidden; overflow: hidden;
padding: 10px; padding: 10px;
border-bottom: 1px solid #d9e1e8; border-bottom: 1px solid $color2;
} }
.avatar { .avatar {
@ -287,7 +287,7 @@
a { a {
display: block; display: block;
color: #282c37; color: $color1;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -304,19 +304,19 @@
} }
.username { .username {
color: #2b90d9; color: $color4;
} }
.note { .note {
padding: 10px; padding: 10px;
padding-top: 15px; padding-top: 15px;
color: #9baec8; color: $color3;
} }
} }
} }
.nothing-here { .nothing-here {
color: #9baec8; color: $color3;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
@ -327,10 +327,10 @@
.account-card { .account-card {
padding: 14px 10px; padding: 14px 10px;
background: #fff; background: $color5;
border-radius: 4px; border-radius: 4px;
text-align: left; 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 { .detailed-status__display-name {
display: block; display: block;
@ -363,12 +363,12 @@
strong { strong {
font-weight: 500; font-weight: 500;
color: #282c37; color: $color1;
} }
span { span {
font-size: 14px; font-size: 14px;
color: #9baec8; color: $color3;
} }
} }
@ -383,6 +383,6 @@
.account__header__content { .account__header__content {
font-size: 14px; font-size: 14px;
color: #282c37; color: $color1;
} }
} }

28
app/assets/stylesheets/admin.scss
View File

@ -2,7 +2,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
position: fixed; position: fixed;
background: #1a1c23; background: darken($color1, 2%);
overflow-y: scroll; overflow-y: scroll;
.sidebar { .sidebar {
@ -10,7 +10,7 @@
position: fixed; position: fixed;
left: 0; left: 0;
height: 100%; height: 100%;
background: #282c37; background: $color1;
.logo { .logo {
display: block; display: block;
@ -25,7 +25,7 @@
a { a {
display: block; display: block;
padding: 15px 25px; padding: 15px 25px;
color: rgba(255, 255, 255, 0.7); color: rgba($color5, 0.7);
text-decoration: none; text-decoration: none;
transition: all 200ms linear; transition: all 200ms linear;
@ -34,17 +34,17 @@
} }
&:hover { &:hover {
color: #fff; color: $color5;
background-color: darken(#282c37, 5%); background-color: darken($color1, 5%);
transition: all 100ms linear; transition: all 100ms linear;
} }
&.selected { &.selected {
color: #fff; color: $color5;
background-color: #2b90d9; background-color: $color4;
&:hover { &:hover {
background-color: lighten(#2b90d9, 5%); background-color: lighten($color4, 5%);
} }
} }
} }
@ -84,21 +84,21 @@
a { a {
display: inline-block; display: inline-block;
color: rgba(255, 255, 255, 0.7); color: rgba($color5, 0.7);
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
font-size: 12px; font-size: 12px;
font-weight: 500; font-weight: 500;
border-bottom: 2px solid #282c37; border-bottom: 2px solid $color1;
&:hover { &:hover {
color: #fff; color: $color5;
border-bottom: 2px solid lighten(#282c37, 5%); border-bottom: 2px solid lighten($color1, 5%);
} }
&.selected { &.selected {
color: #2b90d9; color: $color4;
border-bottom: 2px solid #2b90d9; border-bottom: 2px solid $color4;
} }
} }
} }

27
app/assets/stylesheets/application.scss
View File

@ -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:400,500,400italic);
@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:400,500); @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/ /* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126 v2.0 | 20110126
@ -63,31 +64,31 @@ table {
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: #42495b; background: lighten($color1, 4%);
border: 0px none #ffffff; border: 0px none $color5;
border-radius: 50px; border-radius: 50px;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: #525a70; background: lighten($color1, 6%);
} }
::-webkit-scrollbar-thumb:active { ::-webkit-scrollbar-thumb:active {
background: #42495b; background: lighten($color1, 4%);
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
border: 0px none #ffffff; border: 0px none $color5;
border-radius: 0; border-radius: 0;
background: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.1);
} }
::-webkit-scrollbar-track:hover { ::-webkit-scrollbar-track:hover {
background: #282c37; background: $color1;
} }
::-webkit-scrollbar-track:active { ::-webkit-scrollbar-track:active {
background: #282c37; background: $color1;
} }
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {
@ -96,13 +97,13 @@ table {
body { body {
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
background: #282c37 image-url('background-photo.jpeg'); background: $color1 image-url('background-photo.jpeg');
background-size: cover; background-size: cover;
background-attachment: fixed; background-attachment: fixed;
font-size: 13px; font-size: 13px;
line-height: 18px; line-height: 18px;
font-weight: 400; font-weight: 400;
color: #fff; color: $color5;
padding-bottom: 140px; padding-bottom: 140px;
text-rendering: optimizelegibility; text-rendering: optimizelegibility;
font-feature-settings: "kern"; font-feature-settings: "kern";
@ -164,7 +165,7 @@ body {
h1 { h1 {
display: block; display: block;
text-align: center; text-align: center;
color: #fff; color: $color5;
font-size: 48px; font-size: 48px;
font-weight: 500; font-weight: 500;
@ -215,12 +216,10 @@ body {
text-align: center; text-align: center;
margin-top: 30px; margin-top: 30px;
font-size: 12px; font-size: 12px;
color: darken(#d9e1e8, 25%); color: darken($color2, 25%);
.domain { .domain {
//font-size: 12px;
font-weight: 500; font-weight: 500;
//font-family: 'Roboto Mono', monospace;
a { a {
color: inherit; color: inherit;

128
app/assets/stylesheets/components.scss
View File

@ -1,12 +1,12 @@
.button { .button {
background-color: #2b90d9; background-color: $color4;
font-family: inherit; font-family: inherit;
display: inline-block; display: inline-block;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
text-align: center; text-align: center;
border: 10px none; border: 10px none;
color: #fff; color: $color5;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
letter-spacing: 0; letter-spacing: 0;
@ -19,56 +19,56 @@
text-decoration: none; text-decoration: none;
&:hover { &:hover {
background-color: #489fde; background-color: lighten($color4, 7%);
} }
&:disabled { &:disabled {
background-color: #9baec8; background-color: $color3;
cursor: default; cursor: default;
} }
&.button-secondary { &.button-secondary {
background-color: #282c37; background-color: $color1;
&:hover { &:hover {
background-color: #282c37; background-color: $color1;
} }
&:disabled { &:disabled {
background-color: #9baec8; background-color: $color3;
} }
} }
} }
.icon-button { .icon-button {
color: #616b86; color: lighten($color1, 26%);
border: none; border: none;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: #717b98; color: lighten($color1, 33%);
} }
&.disabled { &.disabled {
color: #454b5e; color: lighten($color1, 13%);
cursor: default; cursor: default;
} }
&.active { &.active {
color: #2b90d9; color: $color4;
} }
} }
.lightbox .icon-button { .lightbox .icon-button {
color: #282c37; color: $color1;
} }
.compose-form__textarea, .follow-form__input { .compose-form__textarea, .follow-form__input {
background: #fff; background: $color5;
&:disabled { &:disabled {
background: #d9e1e8; background: $color2;
} }
} }
@ -107,7 +107,7 @@
} }
a { a {
color: #d9e1e8; color: $color2;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -139,11 +139,11 @@
} }
.reply-indicator__content { .reply-indicator__content {
color: #282c37; color: $color1;
font-size: 14px; font-size: 14px;
a { a {
color: #535b72; color: lighten($color1, 20%);
} }
} }
@ -189,7 +189,7 @@
.status__display-name, .account__display-name { .status__display-name, .account__display-name {
strong { strong {
color: #fff; color: $color5;
} }
&.muted { &.muted {
@ -214,7 +214,7 @@
} }
.detailed-status__display-name { .detailed-status__display-name {
color: #d9e1e8; color: $color2;
line-height: 24px; line-height: 24px;
strong, span { strong, span {
@ -223,17 +223,17 @@
strong { strong {
font-size: 16px; font-size: 16px;
color: #fff; color: $color5;
} }
} }
.muted { .muted {
.status__content p, .status__content a { .status__content p, .status__content a {
color: #616b86; color: lighten($color1, 26%);
} }
.status__display-name strong { .status__display-name strong {
color: #616b86; color: lighten($color1, 26%);
} }
.status__avatar { .status__avatar {
@ -246,7 +246,7 @@
text-decoration: none; text-decoration: none;
&:hover { &:hover {
color: #fff; color: $color5;
text-decoration: underline; text-decoration: underline;
} }
} }
@ -282,17 +282,17 @@
height: 0; height: 0;
border-style: solid; border-style: solid;
border-width: 0 4.5px 7.8px 4.5px; border-width: 0 4.5px 7.8px 4.5px;
border-color: transparent transparent #d9e1e8 transparent; border-color: transparent transparent $color2 transparent;
top: -7px; top: -7px;
left: 8px; left: 8px;
} }
ul { ul {
list-style: none; list-style: none;
background: #d9e1e8; background: $color2;
padding: 4px 0; padding: 4px 0;
border-radius: 4px; 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; min-width: 100px;
} }
@ -302,12 +302,12 @@
padding: 6px 16px; padding: 6px 16px;
width: 100px; width: 100px;
text-decoration: none; text-decoration: none;
background: #d9e1e8; background: $color2;
color: #282c37; color: $color1;
&:hover { &:hover {
background: #2b90d9; background: $color4;
color: #d9e1e8; color: $color2;
} }
} }
} }
@ -315,7 +315,7 @@
.static-content { .static-content {
padding: 10px; padding: 10px;
padding-top: 20px; padding-top: 20px;
color: #616b86; color: lighten($color1, 26%);
h1 { h1 {
font-size: 16px; font-size: 16px;
@ -350,13 +350,13 @@
} }
.drawer__inner { .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 { .drawer__header {
flex: 0 0 auto; flex: 0 0 auto;
font-size: 16px; font-size: 16px;
background: darken(#454b5e, 5%); background: lighten($color1, 8%);
margin-bottom: 10px; margin-bottom: 10px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -365,7 +365,7 @@
transition: all 100ms ease-in; transition: all 100ms ease-in;
&:hover { &:hover {
background: darken(#454b5e, 10%); background: lighten($color1, 3%);
transition: all 200ms ease-out; transition: all 200ms ease-out;
} }
} }
@ -424,22 +424,22 @@
top: 100%; top: 100%;
width: 100%; width: 100%;
z-index: 99; 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 { .react-autosuggest__section-title {
background: #9baec8; background: $color3;
padding: 4px 10px; padding: 4px 10px;
font-weight: 500; font-weight: 500;
cursor: default; cursor: default;
color: #282c37; color: $color1;
text-transform: uppercase; text-transform: uppercase;
font-size: 11px; font-size: 11px;
} }
.react-autosuggest__suggestions-list { .react-autosuggest__suggestions-list {
background: #d9e1e8; background: $color2;
color: #282c37; color: $color1;
font-size: 14px; font-size: 14px;
} }
@ -449,8 +449,8 @@
} }
.react-autosuggest__suggestion--focused { .react-autosuggest__suggestion--focused {
background: #2b90d9; background: $color4;
color: #fff; color: $color5;
} }
.scrollable { .scrollable {
@ -478,7 +478,7 @@
border: 0; border: 0;
padding: 0; padding: 0;
user-select: none; user-select: none;
-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: rgba($color8, 0);
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
@ -504,20 +504,20 @@
height: 24px; height: 24px;
padding: 0; padding: 0;
border-radius: 30px; border-radius: 30px;
background-color: #282c37; background-color: $color1;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track { .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 { .react-toggle--checked .react-toggle-track {
background-color: #2b90d9; background-color: $color4;
} }
.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track { .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 { .react-toggle-track-check {
@ -564,23 +564,23 @@
left: 1px; left: 1px;
width: 22px; width: 22px;
height: 22px; height: 22px;
border: 1px solid #282c37; border: 1px solid $color1;
border-radius: 50%; border-radius: 50%;
background-color: #FAFAFA; background-color: darken($color5, 2%);
box-sizing: border-box; box-sizing: border-box;
transition: all 0.25s ease; transition: all 0.25s ease;
} }
.react-toggle--checked .react-toggle-thumb { .react-toggle--checked .react-toggle-thumb {
left: 27px; left: 27px;
border-color: #2b90d9; border-color: $color4;
} }
.column-link { .column-link {
background: #373b4a; background: lighten($color1, 6%);
&:hover { &:hover {
background: lighten(#373b4a, 5%); background: lighten($color1, 11%);
} }
} }
@ -594,7 +594,7 @@
width: 100%; width: 100%;
height: 100px; height: 100px;
resize: none; resize: none;
color: #282c37; color: $color1;
padding: 7px; padding: 7px;
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: 14px;
@ -605,7 +605,7 @@
transition: border-color 0.3s ease; transition: border-color 0.3s ease;
&.file-drop { &.file-drop {
border-color: #aaa; border-color: darken($color5, 33%);
} }
} }
@ -614,9 +614,9 @@
top: 100%; top: 100%;
width: 100%; width: 100%;
z-index: 99; z-index: 99;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.4); box-shadow: 0 0 15px rgba($color8, 0.4);
background: #d9e1e8; background: $color2;
color: #282c37; color: $color1;
font-size: 14px; font-size: 14px;
} }
@ -625,12 +625,12 @@
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: darken(#d9e1e8, 10%); background: darken($color2, 10%);
} }
&.selected { &.selected {
background: #2b90d9; background: $color4;
color: #fff; color: $color5;
} }
} }
@ -652,14 +652,14 @@
} }
.setting-text { .setting-text {
color: #9baec8; color: $color3;
background: transparent; background: transparent;
border: none; border: none;
border-bottom: 2px solid #9baec8; border-bottom: 2px solid $color3;
&:focus, &:active { &:focus, &:active {
color: #fff; color: $color5;
border-bottom-color: #2b90d9; border-bottom-color: $color4;
} }
} }
@ -683,6 +683,6 @@ button.active i.fa-retweet {
.status-card { .status-card {
&:hover { &:hover {
background: #363c4b; background: lighten($color1, 6%);
} }
} }

44
app/assets/stylesheets/forms.scss
View File

@ -16,7 +16,7 @@ code {
.hint { .hint {
display: block; display: block;
color: rgba(255, 255, 255, 0.8); color: rgba($color5, 0.8);
font-size: 12px; font-size: 12px;
} }
@ -28,7 +28,7 @@ code {
label { label {
font-family: inherit; font-family: inherit;
font-size: 16px; font-size: 16px;
color: #fff; color: $color5;
width: 100px; width: 100px;
display: block; display: block;
flex: 0 0 auto; flex: 0 0 auto;
@ -75,11 +75,11 @@ code {
background: transparent; background: transparent;
box-sizing: border-box; box-sizing: border-box;
border: 0; border: 0;
border-bottom: 2px solid #9baec8; border-bottom: 2px solid $color3;
border-radius: 2px 2px 0 0; border-radius: 2px 2px 0 0;
padding: 7px 4px; padding: 7px 4px;
font-size: 16px; font-size: 16px;
color: #fff; color: $color5;
display: block; display: block;
width: 100%; width: 100%;
outline: 0; outline: 0;
@ -90,27 +90,27 @@ code {
} }
&:focus:invalid { &:focus:invalid {
border-bottom-color: #df405a; border-bottom-color: $color6;
} }
&:required:valid { &:required:valid {
border-bottom-color: #79bd9a; border-bottom-color: $color7;
} }
&:active, &:focus { &:active, &:focus {
border-bottom-color: #2b90d9; border-bottom-color: $color4;
background: rgba(0, 0, 0, 0.1); background: rgba($color8, 0.1);
} }
} }
.input.field_with_errors { .input.field_with_errors {
input[type=text], input[type=email], input[type=password] { input[type=text], input[type=email], input[type=password] {
border-bottom-color: #df405a; border-bottom-color: $color6;
} }
.error { .error {
font-weight: 500; font-weight: 500;
color: #df405a; color: $color6;
} }
} }
@ -123,8 +123,8 @@ code {
width: 100%; width: 100%;
border: 0; border: 0;
border-radius: 4px; border-radius: 4px;
background: #2b90d9; background: $color4;
color: #fff; color: $color5;
font-size: 18px; font-size: 18px;
padding: 10px; padding: 10px;
text-transform: uppercase; text-transform: uppercase;
@ -134,36 +134,36 @@ code {
margin-bottom: 10px; margin-bottom: 10px;
&:hover { &:hover {
background-color: lighten(#2b90d9, 5%); background-color: lighten($color4, 5%);
} }
&:active, &:focus { &:active, &:focus {
position: relative; position: relative;
top: 1px; top: 1px;
background-color: darken(#2b90d9, 5%); background-color: darken($color4, 5%);
} }
&.negative { &.negative {
background: #df405a; background: $color6;
&:hover { &:hover {
background-color: lighten(#df405a, 5%); background-color: lighten($color6, 5%);
} }
&:active, &:focus { &:active, &:focus {
background-color: darken(#df405a, 5%); background-color: darken($color6, 5%);
} }
} }
} }
} }
.flash-message { .flash-message {
background: #282c37; background: $color1;
color: #9baec8; color: $color3;
border-radius: 4px; border-radius: 4px;
padding: 15px 10px; padding: 15px 10px;
margin-bottom: 30px; 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; text-align: center;
strong { strong {
@ -188,7 +188,7 @@ code {
.oauth-prompt, .follow-prompt { .oauth-prompt, .follow-prompt {
margin-bottom: 30px; margin-bottom: 30px;
text-align: center; text-align: center;
color: #9baec8; color: $color3;
h2 { h2 {
font-size: 16px; font-size: 16px;
@ -196,7 +196,7 @@ code {
} }
strong { strong {
color: #d9e1e8; color: $color2;
font-weight: 500; font-weight: 500;
} }
} }

40
app/assets/stylesheets/stream_entries.scss
View File

@ -1,12 +1,12 @@
.activity-stream { .activity-stream {
clear: both; clear: both;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); box-shadow: 0 0 15px rgba($color8, 0.2);
.entry { .entry {
background: lighten(#d9e1e8, 8%); background: lighten($color2, 8%);
&, .detailed-status.light { &, .detailed-status.light {
border-bottom: 1px solid #d9e1e8; border-bottom: 1px solid $color2;
} }
&:last-child { &:last-child {
@ -43,7 +43,7 @@
font-size: 14px; font-size: 14px;
.status__relative-time { .status__relative-time {
color: #9baec8; color: $color3;
} }
} }
} }
@ -52,7 +52,7 @@
display: block; display: block;
max-width: 100%; max-width: 100%;
padding-right: 25px; padding-right: 25px;
color: #282c37; color: $color1;
} }
.status__avatar { .status__avatar {
@ -82,20 +82,20 @@
strong { strong {
font-weight: 500; font-weight: 500;
color: #282c37; color: $color1;
} }
span { span {
font-size: 14px; font-size: 14px;
color: #9baec8; color: $color3;
} }
} }
.status__content { .status__content {
color: #282c37; color: $color1;
a { a {
color: #2b90d9; color: $color4;
} }
} }
@ -111,7 +111,7 @@
.detailed-status.light { .detailed-status.light {
padding: 14px; padding: 14px;
background: #fff; background: $color5;
cursor: default; cursor: default;
.detailed-status__display-name { .detailed-status__display-name {
@ -133,12 +133,12 @@
strong { strong {
font-weight: 500; font-weight: 500;
color: #282c37; color: $color1;
} }
span { span {
font-size: 14px; font-size: 14px;
color: #9baec8; color: $color3;
} }
} }
} }
@ -154,16 +154,16 @@
} }
.status__content { .status__content {
color: #282c37; color: $color1;
a { a {
color: #2b90d9; color: $color4;
} }
} }
.detailed-status__meta { .detailed-status__meta {
margin-top: 15px; margin-top: 15px;
color: #9baec8; color: $color3;
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
@ -248,12 +248,12 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
padding: 5px; padding: 5px;
border-radius: 100px; border-radius: 100px;
color: rgba(255, 255, 255, 0.8); color: rgba($color5, 0.8);
} }
} }
.media-spoiler { .media-spoiler {
background: #9baec8; background: $color3;
width: 100%; width: 100%;
height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
@ -265,7 +265,7 @@
transition: all 100ms linear; transition: all 100ms linear;
&:hover { &:hover {
background: darken(#9baec8, 5%); background: darken($color3, 5%);
} }
span { span {
@ -287,7 +287,7 @@
padding-left: (48px + 14px*2); padding-left: (48px + 14px*2);
padding-bottom: 0; padding-bottom: 0;
margin-bottom: -4px; margin-bottom: -4px;
color: #9baec8; color: $color3;
font-size: 14px; font-size: 14px;
position: relative; position: relative;
@ -297,7 +297,7 @@
} }
.status__display-name.muted strong { .status__display-name.muted strong {
color: #9baec8; color: $color3;
} }
} }
} }

12
app/assets/stylesheets/tables.scss
View File

@ -9,13 +9,13 @@
padding: 8px; padding: 8px;
line-height: 18px; line-height: 18px;
vertical-align: top; vertical-align: top;
border-top: 1px solid #282c37; border-top: 1px solid $color1;
text-align: left; text-align: left;
} }
& > thead > tr > th { & > thead > tr > th {
vertical-align: bottom; vertical-align: bottom;
border-bottom: 2px solid #282c37; border-bottom: 2px solid $color1;
border-top: 0; border-top: 0;
font-weight: 500; font-weight: 500;
} }
@ -25,11 +25,11 @@
} }
& > tbody > tr:nth-child(odd) > td, & > tbody > tr:nth-child(odd) > th { & > tbody > tr:nth-child(odd) > td, & > tbody > tr:nth-child(odd) > th {
background: lighten(#1a1c23, 2%); background: $color1;
} }
a { a {
color: #2b90d9; color: $color4;
text-decoration: underline; text-decoration: underline;
&:hover { &:hover {
@ -51,11 +51,11 @@ a.table-action-link {
display: inline-block; display: inline-block;
margin-right: 5px; margin-right: 5px;
padding: 0 10px; padding: 0 10px;
color: rgba(255, 255, 255, 0.7); color: rgba($color5, 0.7);
font-weight: 500; font-weight: 500;
&:hover { &:hover {
color: #fff; color: $color5;
} }
i.fa { i.fa {

8
app/assets/stylesheets/variables.scss Normal file
View File

@ -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