mirror of
https://git.kescher.at/CatCatNya/catstodon.git
synced 2024-11-27 11:41:35 +01:00
Move all hex colors in SASS to variables and all variations to darken/lighten
This commit is contained in:
Eugen Rochko
parent
d4d56b8af0
commit
f855d645b2
9 changed files with 203 additions and 199 deletions
|
|
@ -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%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -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
8
app/assets/stylesheets/variables.scss
Normal 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
|
||||||
Loading…
Reference in a new issue