me
/
glitchier-soc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
th-downstream
Eugen Rochko 8 years ago
parent 28e65027b2
commit 68f96b1d8c
9 changed files with 203 additions and 199 deletions
Show Stats Download Patch File Download Diff File

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

@ -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%);
}
}
}

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

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

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

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

27
app/assets/stylesheets/application.scss
Unescape 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+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;

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

@ -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%);
}
}

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

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

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

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

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

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

8
app/assets/stylesheets/variables.scss
Unescape 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
Write Preview
Loading…
Cancel
Save