treehouse
/
mastodon
22
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Improve scss color variables (#2912) 

- Updates scss variables file to use better-named variables for black/white/etc
- Arranges the "mastodon classic" colors into variables
- Remove all references to `$color-*` naming, replacing with new

This does not in itself introduce "theme" support, but:

- It would probably be easier to start working on theme support after this
  change and others
- Even without the goal of themes, these changes make it more clear how the
  colors are being used.

There is almost definitely some edge case in here where I've guessed the
intent/context of some color usage incorrectly, but it still seems like a net
improvement.
lolsob-rspec
Matt Jankowski 2017-05-08 09:57:49 -04:00 committed by Eugen Rochko
parent 3f61d4e01c
commit 50d632ea01
15 changed files with 479 additions and 461 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
app/javascript/styles/about.scss
View File

@ -2,7 +2,7 @@
.wrapper { .wrapper {
max-width: 600px; max-width: 600px;
margin: 0 auto; margin: 0 auto;
color: $color3; color: $ui-primary-color;
padding-top: 50px; padding-top: 50px;
padding-bottom: 50px; padding-bottom: 50px;
@ -15,7 +15,7 @@
font: 46px/52px 'mastodon-font-sans-serif', sans-serif; font: 46px/52px 'mastodon-font-sans-serif', sans-serif;
font-weight: 600; font-weight: 600;
margin-bottom: 20px; margin-bottom: 20px;
color: $color4; color: $ui-highlight-color;
padding: 20px 0; padding: 20px 0;
img { img {
@ -32,7 +32,7 @@
line-height: 28px; line-height: 28px;
font-weight: 400; font-weight: 400;
margin-bottom: 20px; margin-bottom: 20px;
color: $color5; color: $primary-text-color;
} }
h3 { h3 {
@ -41,7 +41,7 @@
line-height: 28px; line-height: 28px;
font-weight: 400; font-weight: 400;
margin-bottom: 20px; margin-bottom: 20px;
color: $color2; color: $ui-secondary-color;
} }
ul, ul,
@ -70,7 +70,7 @@
margin-bottom: 12px; margin-bottom: 12px;
a { a {
color: $color4; color: $ui-highlight-color;
text-decoration: underline; text-decoration: underline;
} }
} }
@ -79,14 +79,14 @@
display: inline-block; display: inline-block;
padding: 7px 7px 5px; padding: 7px 7px 5px;
margin: 0 2px; margin: 0 2px;
background: $color3; background: $ui-primary-color;
color: $color1; color: $ui-base-color;
font: 16px/16px 'mastodon-font-sans-serif', sans-serif; font: 16px/16px 'mastodon-font-sans-serif', sans-serif;
font-weight: 300; font-weight: 300;
} }
.screenshot { .screenshot {
box-shadow: 0 0 15px rgba($color8, 0.4); box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
margin-bottom: 26px; margin-bottom: 26px;
img { img {
@ -106,7 +106,7 @@
line-height: 36px; line-height: 36px;
a { a {
color: $color3; color: $ui-primary-color;
text-decoration: underline; text-decoration: underline;
} }
} }
@ -127,8 +127,8 @@
margin: 20px 0; margin: 20px 0;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
border-top: 1px solid lighten($color1, 10%); border-top: 1px solid lighten($ui-base-color, 10%);
border-bottom: 1px solid lighten($color1, 10%); border-bottom: 1px solid lighten($ui-base-color, 10%);
padding-right: 14px; padding-right: 14px;
.section { .section {
@ -146,7 +146,7 @@
font-size: 16px; font-size: 16px;
&:last-child { &:last-child {
color: $color2; color: $ui-secondary-color;
font-size: 14px; font-size: 14px;
} }
} }
@ -155,7 +155,7 @@
font-weight: 500; font-weight: 500;
font-size: 32px; font-size: 32px;
line-height: 48px; line-height: 48px;
color: $color5; color: $primary-text-color;
} }
} }
@ -190,7 +190,7 @@
a { a {
display: block; display: block;
color: $color5; color: $primary-text-color;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -202,7 +202,7 @@
.username { .username {
display: block; display: block;
color: $color3; color: $ui-primary-color;
} }
} }
} }
@ -213,7 +213,7 @@
strong { strong {
display: block; display: block;
color: $color5; color: $primary-text-color;
word-break: break-word; word-break: break-word;
} }
} }
@ -231,14 +231,14 @@
} }
.sidebar { .sidebar {
border-left: 1px solid lighten($color1, 10%); border-left: 1px solid lighten($ui-base-color, 10%);
width: 200px; width: 200px;
flex: 0 0 auto; flex: 0 0 auto;
} }
.panel { .panel {
.panel-header { .panel-header {
background: lighten($color1, 10%); background: lighten($ui-base-color, 10%);
padding: 7px 14px; padding: 7px 14px;
text-transform: uppercase; text-transform: uppercase;
font-size: 12px; font-size: 12px;
@ -263,7 +263,7 @@
a { a {
display: block; display: block;
padding: 7px 14px; padding: 7px 14px;
color: rgba($color5, 0.7); color: rgba($primary-text-color, 0.7);
text-decoration: none; text-decoration: none;
transition: all 200ms linear; transition: all 200ms linear;
@ -272,17 +272,17 @@
} }
&:hover { &:hover {
color: $color5; color: $primary-text-color;
background-color: darken($color1, 5%); background-color: darken($ui-base-color, 5%);
transition: all 100ms linear; transition: all 100ms linear;
} }
&.selected { &.selected {
color: $color5; color: $primary-text-color;
background-color: $color4; background-color: $ui-highlight-color;
&:hover { &:hover {
background-color: lighten($color4, 5%); background-color: lighten($ui-highlight-color, 5%);
} }
} }
} }
@ -295,7 +295,7 @@
flex-direction: column; flex-direction: column;
.sidebar { .sidebar {
border: 1px solid lighten($color1, 10%); border: 1px solid lighten($ui-base-color, 10%);
width: auto; width: auto;
} }
} }
@ -341,10 +341,10 @@
.closed-registrations-message { .closed-registrations-message {
width: 300px; width: 300px;
flex: 0 0 auto; flex: 0 0 auto;
background: rgba(darken($color1, 7%), 0.5); background: rgba(darken($ui-base-color, 7%), 0.5);
padding: 14px; padding: 14px;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 0 15px rgba($color8, 0.4); box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
.actions { .actions {
margin-bottom: 0; margin-bottom: 0;
@ -354,7 +354,7 @@
text-align: center; text-align: center;
a { a {
color: $color2; color: $ui-secondary-color;
} }
} }
} }

64
app/javascript/styles/accounts.scss
View File

@ -1,10 +1,10 @@
.card { .card {
background: $color1; background: $ui-base-color;
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($color8, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
@ -14,7 +14,7 @@
} }
&::after { &::after {
background: linear-gradient(rgba($color8, 0.5), rgba($color8, 0.8)); background: linear-gradient(rgba($base-shadow-color, 0.5), rgba($base-shadow-color, 0.8));
display: block; display: block;
content: ""; content: "";
position: absolute; position: absolute;
@ -29,17 +29,17 @@
display: block; display: block;
font-size: 20px; font-size: 20px;
line-height: 18px * 1.5; line-height: 18px * 1.5;
color: $color5; color: $primary-text-color;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
position: relative; position: relative;
z-index: 2; z-index: 2;
text-shadow: 0 0 2px $color8; text-shadow: 0 0 2px $base-shadow-color;
small { small {
display: block; display: block;
font-size: 14px; font-size: 14px;
color: $color4; color: $ui-highlight-color;
font-weight: 400; font-weight: 400;
} }
} }
@ -82,10 +82,10 @@
.counter { .counter {
width: 80px; width: 80px;
color: $color3; color: $ui-primary-color;
padding: 5px 10px 0; padding: 5px 10px 0;
margin-bottom: 10px; margin-bottom: 10px;
border-right: 1px solid $color3; border-right: 1px solid $ui-primary-color;
cursor: default; cursor: default;
position: relative; position: relative;
@ -100,14 +100,14 @@
bottom: -10px; bottom: -10px;
left: 0; left: 0;
width: 100%; width: 100%;
border-bottom: 4px solid $color3; border-bottom: 4px solid $ui-primary-color;
opacity: 0.5; opacity: 0.5;
transition: all 0.8s ease; transition: all 0.8s ease;
} }
&.active { &.active {
&::after { &::after {
border-bottom: 4px solid $color4; border-bottom: 4px solid $ui-highlight-color;
opacity: 1; opacity: 1;
} }
} }
@ -129,13 +129,13 @@
text-transform: uppercase; text-transform: uppercase;
display: block; display: block;
margin-bottom: 5px; margin-bottom: 5px;
text-shadow: 0 0 2px $color8; text-shadow: 0 0 2px $base-shadow-color;
} }
.counter-number { .counter-number {
font-weight: 500; font-weight: 500;
font-size: 18px; font-size: 18px;
color: $color5; color: $primary-text-color;
} }
} }
@ -144,7 +144,7 @@
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
padding: 5px 10px; padding: 5px 10px;
color: $color2; color: $ui-secondary-color;
order: 1; order: 1;
} }
@ -180,7 +180,7 @@
.page, .page,
.gap { .gap {
font-size: 14px; font-size: 14px;
color: $color5; color: $primary-text-color;
font-weight: 500; font-weight: 500;
display: inline-block; display: inline-block;
padding: 6px 10px; padding: 6px 10px;
@ -188,9 +188,9 @@
} }
.current { .current {
background: $color5; background: $simple-background-color;
border-radius: 100px; border-radius: 100px;
color: $color1; color: $ui-base-color;
cursor: default; cursor: default;
margin: 0 10px; margin: 0 10px;
} }
@ -202,7 +202,7 @@
.prev, .prev,
.next { .next {
text-transform: uppercase; text-transform: uppercase;
color: $color2; color: $ui-secondary-color;
} }
.prev { .prev {
@ -227,7 +227,7 @@
.disabled { .disabled {
cursor: default; cursor: default;
color: lighten($color1, 10%); color: lighten($ui-base-color, 10%);
} }
@media screen and (max-width: 360px) { @media screen and (max-width: 360px) {
@ -249,8 +249,8 @@
} }
.accounts-grid { .accounts-grid {
box-shadow: 0 0 15px rgba($color8, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
background: $color5; background: $simple-background-color;
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
padding: 20px 10px; padding: 20px 10px;
padding-bottom: 10px; padding-bottom: 10px;
@ -266,9 +266,9 @@
.account-grid-card { .account-grid-card {
box-sizing: border-box; box-sizing: border-box;
width: 335px; width: 335px;
border: 1px solid $color2; border: 1px solid $ui-secondary-color;
border-radius: 4px; border-radius: 4px;
color: $color1; color: $ui-base-color;
margin-bottom: 10px; margin-bottom: 10px;
&:nth-child(odd) { &:nth-child(odd) {
@ -278,7 +278,7 @@
.account-grid-card__header { .account-grid-card__header {
overflow: hidden; overflow: hidden;
padding: 10px; padding: 10px;
border-bottom: 1px solid $color2; border-bottom: 1px solid $ui-secondary-color;
} }
.avatar { .avatar {
@ -300,7 +300,7 @@
a { a {
display: block; display: block;
color: $color1; color: $ui-base-color;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -317,20 +317,20 @@
} }
.username { .username {
color: $color4; color: $ui-highlight-color;
} }
.note { .note {
padding: 10px; padding: 10px;
padding-top: 15px; padding-top: 15px;
color: $color3; color: $ui-primary-color;
word-wrap: break-word; word-wrap: break-word;
} }
} }
} }
.nothing-here { .nothing-here {
color: $color3; color: $ui-primary-color;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
@ -341,10 +341,10 @@
.account-card { .account-card {
padding: 14px 10px; padding: 14px 10px;
background: $color5; background: $simple-background-color;
border-radius: 4px; border-radius: 4px;
text-align: left; text-align: left;
box-shadow: 0 0 15px rgba($color8, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
.detailed-status__display-name { .detailed-status__display-name {
display: block; display: block;
@ -377,12 +377,12 @@
strong { strong {
font-weight: 500; font-weight: 500;
color: $color1; color: $ui-base-color;
} }
span { span {
font-size: 14px; font-size: 14px;
color: $color3; color: $ui-primary-color;
} }
} }
@ -397,6 +397,6 @@
.account__header__content { .account__header__content {
font-size: 14px; font-size: 14px;
color: $color1; color: $ui-base-color;
} }
} }

40
app/javascript/styles/admin.scss
View File

@ -6,7 +6,7 @@
.sidebar-wrapper { .sidebar-wrapper {
flex: 1; flex: 1;
height: 100%; height: 100%;
background: $color1; background: $ui-base-color;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
} }
@ -33,7 +33,7 @@
a { a {
display: block; display: block;
padding: 15px 25px; padding: 15px 25px;
color: rgba($color5, 0.7); color: rgba($primary-text-color, 0.7);
text-decoration: none; text-decoration: none;
transition: all 200ms linear; transition: all 200ms linear;
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
@ -43,19 +43,19 @@
} }
&:hover { &:hover {
color: $color5; color: $primary-text-color;
background-color: darken($color1, 5%); background-color: darken($ui-base-color, 5%);
transition: all 100ms linear; transition: all 100ms linear;
} }
&.selected { &.selected {
background: darken($color1, 2%); background: darken($ui-base-color, 2%);
border-radius: 4px 0 0; border-radius: 4px 0 0;
} }
} }
ul { ul {
background: darken($color1, 4%); background: darken($ui-base-color, 4%);
border-radius: 0 0 0 4px; border-radius: 0 0 0 4px;
margin: 0; margin: 0;
@ -63,13 +63,13 @@
border: 0; border: 0;
&.selected { &.selected {
color: $color5; color: $primary-text-color;
background-color: $color4; background-color: $ui-highlight-color;
border-bottom: 0; border-bottom: 0;
border-radius: 0; border-radius: 0;
&:hover { &:hover {
background-color: lighten($color4, 5%); background-color: lighten($ui-highlight-color, 5%);
} }
} }
} }
@ -89,7 +89,7 @@
padding-left: 25px; padding-left: 25px;
h2 { h2 {
color: $color2; color: $ui-secondary-color;
font-size: 24px; font-size: 24px;
line-height: 28px; line-height: 28px;
font-weight: 400; font-weight: 400;
@ -99,11 +99,11 @@
& > p { & > p {
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
color: $color2; color: $ui-secondary-color;
margin-bottom: 20px; margin-bottom: 20px;
strong { strong {
color: $color5; color: $primary-text-color;
font-weight: 500; font-weight: 500;
} }
} }
@ -112,7 +112,7 @@
margin: 20px 0; margin: 20px 0;
border: 0; border: 0;
background: transparent; background: transparent;
border-bottom: 1px solid $color1; border-bottom: 1px solid $ui-base-color;
} }
} }
@ -185,21 +185,21 @@
a { a {
display: inline-block; display: inline-block;
color: rgba($color5, 0.7); color: rgba($primary-text-color, 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 $color1; border-bottom: 2px solid $ui-base-color;
&:hover { &:hover {
color: $color5; color: $primary-text-color;
border-bottom: 2px solid lighten($color1, 5%); border-bottom: 2px solid lighten($ui-base-color, 5%);
} }
&.selected { &.selected {
color: $color4; color: $ui-highlight-color;
border-bottom: 2px solid $color4; border-bottom: 2px solid $ui-highlight-color;
} }
} }
} }
@ -221,7 +221,7 @@
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
color: $color2; color: $ui-secondary-color;
} }
&:first-child { &:first-child {

8
app/javascript/styles/basics.scss
View File

@ -1,12 +1,12 @@
body { body {
font-family: 'mastodon-font-sans-serif', sans-serif; font-family: 'mastodon-font-sans-serif', sans-serif;
background: $color1 url('../images/background-photo.jpg'); background: $ui-base-color url('../images/background-photo.jpg');
background-size: cover; background-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: $color5; color: $primary-text-color;
padding-bottom: 140px; padding-bottom: 140px;
text-rendering: optimizelegibility; text-rendering: optimizelegibility;
font-feature-settings: "kern"; font-feature-settings: "kern";
@ -17,7 +17,7 @@ body {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 0; padding: 0;
background: $color1; background: $ui-base-color;
} }
&.embed { &.embed {
@ -33,7 +33,7 @@ body {
} }
&.admin { &.admin {
background: darken($color1, 4%); background: darken($ui-base-color, 4%);
position: fixed; position: fixed;
width: 100%; width: 100%;
height: 100%; height: 100%;

4
app/javascript/styles/boost.scss
View File

File diff suppressed because one or more lines are too long

4
app/javascript/styles/compact_header.scss
View File

@ -2,7 +2,7 @@
h1 { h1 {
font-size: 24px; font-size: 24px;
line-height: 28px; line-height: 28px;
color: $color3; color: $ui-primary-color;
overflow: hidden; overflow: hidden;
font-weight: 500; font-weight: 500;
margin-bottom: 20px; margin-bottom: 20px;
@ -14,7 +14,7 @@
small { small {
font-weight: 400; font-weight: 400;
color: $color2; color: $ui-secondary-color;
} }
img { img {

570
app/javascript/styles/components.scss
View File

File diff suppressed because it is too large Load Diff

2
app/javascript/styles/containers.scss
View File

@ -32,7 +32,7 @@
h1 { h1 {
display: block; display: block;
text-align: center; text-align: center;
color: $color5; color: $primary-text-color;
font-size: 48px; font-size: 48px;
font-weight: 500; font-weight: 500;

2
app/javascript/styles/footer.scss
View File

@ -2,7 +2,7 @@
text-align: center; text-align: center;
margin-top: 30px; margin-top: 30px;
font-size: 12px; font-size: 12px;
color: darken($color2, 25%); color: darken($ui-secondary-color, 25%);
.domain { .domain {
font-weight: 500; font-weight: 500;

68
app/javascript/styles/forms.scss
View File

@ -16,7 +16,7 @@ code {
span.hint { span.hint {
display: block; display: block;
color: $color3; color: $ui-primary-color;
font-size: 12px; font-size: 12px;
margin-top: 4px; margin-top: 4px;
} }
@ -51,7 +51,7 @@ code {
label { label {
font-family: inherit; font-family: inherit;
font-size: 16px; font-size: 16px;
color: $color5; color: $primary-text-color;
display: block; display: block;
padding-top: 5px; padding-top: 5px;
} }
@ -65,7 +65,7 @@ code {
margin-bottom: 5px; margin-bottom: 5px;
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: 14px;
color: $color5; color: $primary-text-color;
display: block; display: block;
width: auto; width: auto;
} }
@ -76,7 +76,7 @@ code {
label { label {
font-family: inherit; font-family: inherit;
font-size: 14px; font-size: 14px;
color: $color5; color: $primary-text-color;
display: block; display: block;
width: auto; width: auto;
} }
@ -108,11 +108,11 @@ code {
background: transparent; background: transparent;
box-sizing: border-box; box-sizing: border-box;
border: 0; border: 0;
border-bottom: 2px solid $color3; border-bottom: 2px solid $ui-primary-color;
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: $color5; color: $primary-text-color;
display: block; display: block;
width: 100%; width: 100%;
outline: 0; outline: 0;
@ -124,35 +124,35 @@ code {
} }
&:focus:invalid { &:focus:invalid {
border-bottom-color: $color6; border-bottom-color: $error-value-color;
} }
&:required:valid { &:required:valid {
border-bottom-color: $color7; border-bottom-color: $valid-value-color;
} }
&:active, &:active,
&:focus { &:focus {
border-bottom-color: $color4; border-bottom-color: $ui-highlight-color;
background: rgba($color8, 0.1); background: rgba($base-overlay-background, 0.1);
} }
} }
.input.field_with_errors { .input.field_with_errors {
label { label {
color: $color6; color: $error-value-color;
} }
input[type=text], input[type=text],
input[type=email], input[type=email],
input[type=password] { input[type=password] {
border-bottom-color: $color6; border-bottom-color: $error-value-color;
} }
.error { .error {
display: block; display: block;
font-weight: 500; font-weight: 500;
color: $color6; color: $error-value-color;
margin-top: 4px; margin-top: 4px;
} }
} }
@ -167,8 +167,8 @@ code {
width: 100%; width: 100%;
border: 0; border: 0;
border-radius: 4px; border-radius: 4px;
background: $color4; background: $ui-highlight-color;
color: $color5; color: $primary-text-color;
font-size: 18px; font-size: 18px;
padding: 10px; padding: 10px;
text-transform: uppercase; text-transform: uppercase;
@ -181,26 +181,26 @@ code {
margin-bottom: 10px; margin-bottom: 10px;
&:hover { &:hover {
background-color: lighten($color4, 5%); background-color: lighten($ui-highlight-color, 5%);
} }
&:active, &:active,
&:focus { &:focus {
position: relative; position: relative;
top: 1px; top: 1px;
background-color: darken($color4, 5%); background-color: darken($ui-highlight-color, 5%);
} }
&.negative { &.negative {
background: $color6; background: $error-value-color;
&:hover { &:hover {
background-color: lighten($color6, 5%); background-color: lighten($error-value-color, 5%);
} }
&:active, &:active,
&:focus { &:focus {
background-color: darken($color6, 5%); background-color: darken($error-value-color, 5%);
} }
} }
} }
@ -211,12 +211,12 @@ code {
} }
.flash-message { .flash-message {
background: $color1; background: $ui-base-color;
color: $color3; color: $ui-primary-color;
border-radius: 4px; border-radius: 4px;
padding: 15px 10px; padding: 15px 10px;
margin-bottom: 30px; margin-bottom: 30px;
box-shadow: 0 0 5px rgba($color8, 0.2); box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
text-align: center; text-align: center;
strong { strong {
@ -229,7 +229,7 @@ code {
text-align: center; text-align: center;
a { a {
color: $color5; color: $primary-text-color;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@ -242,7 +242,7 @@ code {
.follow-prompt { .follow-prompt {
margin-bottom: 30px; margin-bottom: 30px;
text-align: center; text-align: center;
color: $color3; color: $ui-primary-color;
h2 { h2 {
font-size: 16px; font-size: 16px;
@ -250,7 +250,7 @@ code {
} }
strong { strong {
color: $color2; color: $ui-secondary-color;
font-weight: 500; font-weight: 500;
} }
} }
@ -261,10 +261,10 @@ code {
.qr-code { .qr-code {
flex: 0 0 auto; flex: 0 0 auto;
background: $color5; background: $simple-background-color;
padding: 4px; padding: 4px;
margin-bottom: 20px; margin-bottom: 20px;
box-shadow: 0 0 15px rgba($color8, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
display: inline-block; display: inline-block;
svg { svg {
@ -275,7 +275,7 @@ code {
.qr-alternative { .qr-alternative {
margin-left: 10px; margin-left: 10px;
color: $color3; color: $ui-primary-color;
samp { samp {
display: block; display: block;
@ -296,16 +296,16 @@ code {
.warning { .warning {
max-width: 400px; max-width: 400px;
box-sizing: border-box; box-sizing: border-box;
background: rgba($color6, 0.5); background: rgba($error-value-color, 0.5);
color: $color5; color: $primary-text-color;
text-shadow: 1px 1px 0 rgba($color8, 0.3); text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3);
box-shadow: 0 2px 6px rgba($color8, 0.4); box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4);
border-radius: 4px; border-radius: 4px;
padding: 10px; padding: 10px;
margin-bottom: 15px; margin-bottom: 15px;
a { a {
color: $color5; color: $primary-text-color;
text-decoration: underline; text-decoration: underline;
&:hover, &:hover,

4
app/javascript/styles/landing_strip.scss
View File

@ -1,6 +1,6 @@
.landing-strip { .landing-strip {
background: rgba(darken($color1, 7%), 0.8); background: rgba(darken($ui-base-color, 7%), 0.8);
color: $color3; color: $ui-primary-color;
font-weight: 400; font-weight: 400;
padding: 14px; padding: 14px;
border-radius: 4px; border-radius: 4px;

16
app/javascript/styles/reset.scss
View File

@ -59,31 +59,31 @@ table {
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: lighten($color1, 4%); background: lighten($ui-base-color, 4%);
border: 0px none $color5; border: 0px none $base-border-color;
border-radius: 50px; border-radius: 50px;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: lighten($color1, 6%); background: lighten($ui-base-color, 6%);
} }
::-webkit-scrollbar-thumb:active { ::-webkit-scrollbar-thumb:active {
background: lighten($color1, 4%); background: lighten($ui-base-color, 4%);
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
border: 0px none $color5; border: 0px none $base-border-color;
border-radius: 0; border-radius: 0;
background: rgba($color8, 0.1); background: rgba($base-overlay-background, 0.1);
} }
::-webkit-scrollbar-track:hover { ::-webkit-scrollbar-track:hover {
background: $color1; background: $ui-base-color;
} }
::-webkit-scrollbar-track:active { ::-webkit-scrollbar-track:active {
background: $color1; background: $ui-base-color;
} }
::-webkit-scrollbar-corner { ::-webkit-scrollbar-corner {

52
app/javascript/styles/stream_entries.scss
View File

@ -1,13 +1,13 @@
.activity-stream { .activity-stream {
clear: both; clear: both;
box-shadow: 0 0 15px rgba($color8, 0.2); box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
.entry { .entry {
background: $color5; background: $simple-background-color;
.detailed-status.light, .detailed-status.light,
.status.light { .status.light {
border-bottom: 1px solid $color2; border-bottom: 1px solid $ui-secondary-color;
} }
&:last-child { &:last-child {
@ -50,7 +50,7 @@
font-size: 14px; font-size: 14px;
.status__relative-time { .status__relative-time {
color: $color4; color: $ui-primary-color;
} }
} }
} }
@ -59,7 +59,7 @@
display: block; display: block;
max-width: 100%; max-width: 100%;
padding-right: 25px; padding-right: 25px;
color: $color1; color: $ui-base-color;
} }
.status__avatar { .status__avatar {
@ -89,28 +89,28 @@
strong { strong {
font-weight: 500; font-weight: 500;
color: $color1; color: $ui-base-color;
} }
span { span {
font-size: 14px; font-size: 14px;
color: $color4; color: $ui-primary-color;
} }
} }
.status__content { .status__content {
color: $color1; color: $ui-base-color;
a { a {
color: $color4; color: $ui-highlight-color;
} }
a.status__content__spoiler-link { a.status__content__spoiler-link {
color: $color5; color: $primary-text-color;
background: $color3; background: $ui-primary-color;
&:hover { &:hover {
background: lighten($color3, 8%); background: lighten($ui-primary-color, 8%);
} }
} }
} }
@ -131,7 +131,7 @@
.detailed-status.light { .detailed-status.light {
padding: 14px; padding: 14px;
background: $color5; background: $simple-background-color;
cursor: default; cursor: default;
.detailed-status__display-name { .detailed-status__display-name {
@ -153,12 +153,12 @@
strong { strong {
font-weight: 500; font-weight: 500;
color: $color1; color: $ui-base-color;
} }
span { span {
font-size: 14px; font-size: 14px;
color: $color3; color: $ui-primary-color;
} }
} }
} }
@ -174,25 +174,25 @@
} }
.status__content { .status__content {
color: $color1; color: $ui-base-color;
a { a {
color: $color4; color: $ui-highlight-color;
} }
a.status__content__spoiler-link { a.status__content__spoiler-link {
color: $color5; color: $primary-text-color;
background: $color3; background: $ui-primary-color;
&:hover { &:hover {
background: lighten($color3, 8%); background: lighten($ui-primary-color, 8%);
} }
} }
} }
.detailed-status__meta { .detailed-status__meta {
margin-top: 15px; margin-top: 15px;
color: $color3; color: $ui-primary-color;
font-size: 14px; font-size: 14px;
line-height: 18px; line-height: 18px;
@ -291,13 +291,13 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
padding: 5px; padding: 5px;
border-radius: 100px; border-radius: 100px;
color: rgba($color5, 0.8); color: rgba($primary-text-color, 0.8);
z-index: 1; z-index: 1;
} }
} }
.media-spoiler { .media-spoiler {
background: $color3; background: $ui-primary-color;
width: 100%; width: 100%;
height: 100%; height: 100%;
cursor: pointer; cursor: pointer;
@ -313,7 +313,7 @@
z-index: 2; z-index: 2;
&:hover { &:hover {
background: darken($color3, 5%); background: darken($ui-primary-color, 5%);
} }
span { span {
@ -335,7 +335,7 @@
padding-left: (48px + 14px * 2); padding-left: (48px + 14px * 2);
padding-bottom: 0; padding-bottom: 0;
margin-bottom: -4px; margin-bottom: -4px;
color: $color3; color: $ui-primary-color;
font-size: 14px; font-size: 14px;
position: relative; position: relative;
@ -345,7 +345,7 @@
} }
.status__display-name.muted strong { .status__display-name.muted strong {
color: $color3; color: $ui-primary-color;
} }
} }

12
app/javascript/styles/tables.scss
View File

@ -10,13 +10,13 @@
padding: 8px; padding: 8px;
line-height: 18px; line-height: 18px;
vertical-align: top; vertical-align: top;
border-top: 1px solid $color1; border-top: 1px solid $ui-base-color;
text-align: left; text-align: left;
} }
& > thead > tr > th { & > thead > tr > th {
vertical-align: bottom; vertical-align: bottom;
border-bottom: 2px solid $color1; border-bottom: 2px solid $ui-base-color;
border-top: 0; border-top: 0;
font-weight: 500; font-weight: 500;
} }
@ -27,11 +27,11 @@
& > tbody > tr:nth-child(odd) > td, & > tbody > tr:nth-child(odd) > td,
& > tbody > tr:nth-child(odd) > th { & > tbody > tr:nth-child(odd) > th {
background: $color1; background: $ui-base-color;
} }
a { a {
color: $color4; color: $ui-highlight-color;
text-decoration: underline; text-decoration: underline;
&:hover { &:hover {
@ -53,11 +53,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($color5, 0.7); color: rgba($primary-text-color, 0.7);
font-weight: 500; font-weight: 500;
&:hover { &:hover {
color: $color5; color: $primary-text-color;
} }
i.fa { i.fa {

38
app/javascript/styles/variables.scss
View File

@ -1,10 +1,28 @@
$color1: #282c37 !default; // darkest // Commonly used web colors
$color2: #d9e1e8 !default; // lightest $black: #000000; // Black
$color3: #9baec8 !default; // lighter $white: #ffffff; // White
$color4: #2b90d9 !default; // vibrant $success-green: #79bd9a; // Padua
$color5: #ffffff !default; // white $error-red: #df405a; // Cerise
$color6: #df405a !default; // error red $warning-red: #ff5050; // Sunset Orange
$color7: #79bd9a !default; // succ green $gold-star: #ca8f04; // Dark Goldenrod
$color8: #000000 !default; // black
$color9: #ff5050 !default; // red // Values from the classic Mastodon UI
$color10: #ca8f04 !default; // dark goldenrod $classic-base-color: #282c37; // Midnight Express
$classic-primary-color: #9baec8; // Echo Blue
$classic-secondary-color: #d9e1e8; // Pattens Blue
$classic-highlight-color: #2b90d9; // Summer Sky
// Variables for defaults in UI
$base-shadow-color: $black;
$base-overlay-background: $black;
$base-border-color: $white;
$simple-background-color: $white;
$primary-text-color: $white;
$valid-value-color: $success-green;
$error-value-color: $error-red;
// Tell UI to use selected colors
$ui-base-color: $classic-base-color !default; // Darkest
$ui-primary-color: $classic-primary-color !default; // Lighter
$ui-secondary-color: $classic-secondary-color !default; // Lightest
$ui-highlight-color: $classic-highlight-color !default; // Vibrant