abunchtell
/
mastodon
1
0
Fork 0
Código Issues 0 Atividade
Ver código fonte

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.
master
Matt Jankowski 7 anos atrás
committed by Eugen Rochko
pai
cbd673601c
commit
b85dec2b97
15 arquivos alterados com 479 adições e 461 exclusões
Visão dividida
Opções de diferenças
Mostrar estatísticas Baixar arquivo de patch Baixar arquivo de diferenças
  1. +28
    -28
      app/javascript/styles/about.scss
  2. +32
    -32
      app/javascript/styles/accounts.scss
  3. +20
    -20
      app/javascript/styles/admin.scss
  4. +4
    -4
      app/javascript/styles/basics.scss
  5. +2
    -2
      app/javascript/styles/boost.scss
  6. +2
    -2
      app/javascript/styles/compact_header.scss
  7. +285
    -285
      app/javascript/styles/components.scss
  8. +1
    -1
      app/javascript/styles/containers.scss
  9. +1
    -1
      app/javascript/styles/footer.scss
  10. +34
    -34
      app/javascript/styles/forms.scss
  11. +2
    -2
      app/javascript/styles/landing_strip.scss
  12. +8
    -8
      app/javascript/styles/reset.scss
  13. +26
    -26
      app/javascript/styles/stream_entries.scss
  14. +6
    -6
      app/javascript/styles/tables.scss
  15. +28
    -10
      app/javascript/styles/variables.scss

+ 28
- 28
app/javascript/styles/about.scss Ver arquivo

@@ -2,7 +2,7 @@
.wrapper {
max-width: 600px;
margin: 0 auto;
color: $color3;
color: $ui-primary-color;
padding-top: 50px;
padding-bottom: 50px;

@@ -15,7 +15,7 @@
font: 46px/52px 'mastodon-font-sans-serif', sans-serif;
font-weight: 600;
margin-bottom: 20px;
color: $color4;
color: $ui-highlight-color;
padding: 20px 0;

img {
@@ -32,7 +32,7 @@
line-height: 28px;
font-weight: 400;
margin-bottom: 20px;
color: $color5;
color: $primary-text-color;
}

h3 {
@@ -41,7 +41,7 @@
line-height: 28px;
font-weight: 400;
margin-bottom: 20px;
color: $color2;
color: $ui-secondary-color;
}

ul,
@@ -70,7 +70,7 @@
margin-bottom: 12px;

a {
color: $color4;
color: $ui-highlight-color;
text-decoration: underline;
}
}
@@ -79,14 +79,14 @@
display: inline-block;
padding: 7px 7px 5px;
margin: 0 2px;
background: $color3;
color: $color1;
background: $ui-primary-color;
color: $ui-base-color;
font: 16px/16px 'mastodon-font-sans-serif', sans-serif;
font-weight: 300;
}

.screenshot {
box-shadow: 0 0 15px rgba($color8, 0.4);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
margin-bottom: 26px;

img {
@@ -106,7 +106,7 @@
line-height: 36px;

a {
color: $color3;
color: $ui-primary-color;
text-decoration: underline;
}
}
@@ -127,8 +127,8 @@
margin: 20px 0;
display: flex;
justify-content: space-between;
border-top: 1px solid lighten($color1, 10%);
border-bottom: 1px solid lighten($color1, 10%);
border-top: 1px solid lighten($ui-base-color, 10%);
border-bottom: 1px solid lighten($ui-base-color, 10%);
padding-right: 14px;

.section {
@@ -146,7 +146,7 @@
font-size: 16px;

&:last-child {
color: $color2;
color: $ui-secondary-color;
font-size: 14px;
}
}
@@ -155,7 +155,7 @@
font-weight: 500;
font-size: 32px;
line-height: 48px;
color: $color5;
color: $primary-text-color;
}
}

@@ -190,7 +190,7 @@

a {
display: block;
color: $color5;
color: $primary-text-color;
text-decoration: none;

&:hover {
@@ -202,7 +202,7 @@

.username {
display: block;
color: $color3;
color: $ui-primary-color;
}
}
}
@@ -213,7 +213,7 @@

strong {
display: block;
color: $color5;
color: $primary-text-color;
word-break: break-word;
}
}
@@ -231,14 +231,14 @@
}

.sidebar {
border-left: 1px solid lighten($color1, 10%);
border-left: 1px solid lighten($ui-base-color, 10%);
width: 200px;
flex: 0 0 auto;
}

.panel {
.panel-header {
background: lighten($color1, 10%);
background: lighten($ui-base-color, 10%);
padding: 7px 14px;
text-transform: uppercase;
font-size: 12px;
@@ -263,7 +263,7 @@
a {
display: block;
padding: 7px 14px;
color: rgba($color5, 0.7);
color: rgba($primary-text-color, 0.7);
text-decoration: none;
transition: all 200ms linear;

@@ -272,17 +272,17 @@
}

&:hover {
color: $color5;
background-color: darken($color1, 5%);
color: $primary-text-color;
background-color: darken($ui-base-color, 5%);
transition: all 100ms linear;
}

&.selected {
color: $color5;
background-color: $color4;
color: $primary-text-color;
background-color: $ui-highlight-color;

&:hover {
background-color: lighten($color4, 5%);
background-color: lighten($ui-highlight-color, 5%);
}
}
}
@@ -295,7 +295,7 @@
flex-direction: column;

.sidebar {
border: 1px solid lighten($color1, 10%);
border: 1px solid lighten($ui-base-color, 10%);
width: auto;
}
}
@@ -341,10 +341,10 @@
.closed-registrations-message {
width: 300px;
flex: 0 0 auto;
background: rgba(darken($color1, 7%), 0.5);
background: rgba(darken($ui-base-color, 7%), 0.5);
padding: 14px;
border-radius: 4px;
box-shadow: 0 0 15px rgba($color8, 0.4);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);

.actions {
margin-bottom: 0;
@@ -354,7 +354,7 @@
text-align: center;

a {
color: $color2;
color: $ui-secondary-color;
}
}
}


+ 32
- 32
app/javascript/styles/accounts.scss Ver arquivo

@@ -1,10 +1,10 @@
.card {
background: $color1;
background: $ui-base-color;
background-size: cover;
padding: 60px 0;
padding-bottom: 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;
position: relative;

@@ -14,7 +14,7 @@
}

&::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;
content: "";
position: absolute;
@@ -29,17 +29,17 @@
display: block;
font-size: 20px;
line-height: 18px * 1.5;
color: $color5;
color: $primary-text-color;
font-weight: 500;
text-align: center;
position: relative;
z-index: 2;
text-shadow: 0 0 2px $color8;
text-shadow: 0 0 2px $base-shadow-color;

small {
display: block;
font-size: 14px;
color: $color4;
color: $ui-highlight-color;
font-weight: 400;
}
}
@@ -82,10 +82,10 @@

.counter {
width: 80px;
color: $color3;
color: $ui-primary-color;
padding: 5px 10px 0;
margin-bottom: 10px;
border-right: 1px solid $color3;
border-right: 1px solid $ui-primary-color;
cursor: default;
position: relative;

@@ -100,14 +100,14 @@
bottom: -10px;
left: 0;
width: 100%;
border-bottom: 4px solid $color3;
border-bottom: 4px solid $ui-primary-color;
opacity: 0.5;
transition: all 0.8s ease;
}

&.active {
&::after {
border-bottom: 4px solid $color4;
border-bottom: 4px solid $ui-highlight-color;
opacity: 1;
}
}
@@ -129,13 +129,13 @@
text-transform: uppercase;
display: block;
margin-bottom: 5px;
text-shadow: 0 0 2px $color8;
text-shadow: 0 0 2px $base-shadow-color;
}

.counter-number {
font-weight: 500;
font-size: 18px;
color: $color5;
color: $primary-text-color;
}
}

@@ -144,7 +144,7 @@
font-size: 14px;
line-height: 18px;
padding: 5px 10px;
color: $color2;
color: $ui-secondary-color;
order: 1;
}

@@ -180,7 +180,7 @@
.page,
.gap {
font-size: 14px;
color: $color5;
color: $primary-text-color;
font-weight: 500;
display: inline-block;
padding: 6px 10px;
@@ -188,9 +188,9 @@
}

.current {
background: $color5;
background: $simple-background-color;
border-radius: 100px;
color: $color1;
color: $ui-base-color;
cursor: default;
margin: 0 10px;
}
@@ -202,7 +202,7 @@
.prev,
.next {
text-transform: uppercase;
color: $color2;
color: $ui-secondary-color;
}

.prev {
@@ -227,7 +227,7 @@

.disabled {
cursor: default;
color: lighten($color1, 10%);
color: lighten($ui-base-color, 10%);
}

@media screen and (max-width: 360px) {
@@ -249,8 +249,8 @@
}

.accounts-grid {
box-shadow: 0 0 15px rgba($color8, 0.2);
background: $color5;
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
background: $simple-background-color;
border-radius: 0 0 4px 4px;
padding: 20px 10px;
padding-bottom: 10px;
@@ -266,9 +266,9 @@
.account-grid-card {
box-sizing: border-box;
width: 335px;
border: 1px solid $color2;
border: 1px solid $ui-secondary-color;
border-radius: 4px;
color: $color1;
color: $ui-base-color;
margin-bottom: 10px;

&:nth-child(odd) {
@@ -278,7 +278,7 @@
.account-grid-card__header {
overflow: hidden;
padding: 10px;
border-bottom: 1px solid $color2;
border-bottom: 1px solid $ui-secondary-color;
}

.avatar {
@@ -300,7 +300,7 @@

a {
display: block;
color: $color1;
color: $ui-base-color;
text-decoration: none;

&:hover {
@@ -317,20 +317,20 @@
}

.username {
color: $color4;
color: $ui-highlight-color;
}

.note {
padding: 10px;
padding-top: 15px;
color: $color3;
color: $ui-primary-color;
word-wrap: break-word;
}
}
}

.nothing-here {
color: $color3;
color: $ui-primary-color;
font-size: 14px;
font-weight: 500;
text-align: center;
@@ -341,10 +341,10 @@

.account-card {
padding: 14px 10px;
background: $color5;
background: $simple-background-color;
border-radius: 4px;
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 {
display: block;
@@ -377,12 +377,12 @@

strong {
font-weight: 500;
color: $color1;
color: $ui-base-color;
}

span {
font-size: 14px;
color: $color3;
color: $ui-primary-color;
}
}

@@ -397,6 +397,6 @@

.account__header__content {
font-size: 14px;
color: $color1;
color: $ui-base-color;
}
}

+ 20
- 20
app/javascript/styles/admin.scss Ver arquivo

@@ -6,7 +6,7 @@
.sidebar-wrapper {
flex: 1;
height: 100%;
background: $color1;
background: $ui-base-color;
display: flex;
justify-content: flex-end;
}
@@ -33,7 +33,7 @@
a {
display: block;
padding: 15px 25px;
color: rgba($color5, 0.7);
color: rgba($primary-text-color, 0.7);
text-decoration: none;
transition: all 200ms linear;
border-radius: 4px 0 0 4px;
@@ -43,19 +43,19 @@
}

&:hover {
color: $color5;
background-color: darken($color1, 5%);
color: $primary-text-color;
background-color: darken($ui-base-color, 5%);
transition: all 100ms linear;
}

&.selected {
background: darken($color1, 2%);
background: darken($ui-base-color, 2%);
border-radius: 4px 0 0;
}
}

ul {
background: darken($color1, 4%);
background: darken($ui-base-color, 4%);
border-radius: 0 0 0 4px;
margin: 0;

@@ -63,13 +63,13 @@
border: 0;

&.selected {
color: $color5;
background-color: $color4;
color: $primary-text-color;
background-color: $ui-highlight-color;
border-bottom: 0;
border-radius: 0;

&:hover {
background-color: lighten($color4, 5%);
background-color: lighten($ui-highlight-color, 5%);
}
}
}
@@ -89,7 +89,7 @@
padding-left: 25px;

h2 {
color: $color2;
color: $ui-secondary-color;
font-size: 24px;
line-height: 28px;
font-weight: 400;
@@ -99,11 +99,11 @@
& > p {
font-size: 14px;
line-height: 18px;
color: $color2;
color: $ui-secondary-color;
margin-bottom: 20px;

strong {
color: $color5;
color: $primary-text-color;
font-weight: 500;
}
}
@@ -112,7 +112,7 @@
margin: 20px 0;
border: 0;
background: transparent;
border-bottom: 1px solid $color1;
border-bottom: 1px solid $ui-base-color;
}
}

@@ -185,21 +185,21 @@

a {
display: inline-block;
color: rgba($color5, 0.7);
color: rgba($primary-text-color, 0.7);
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
font-weight: 500;
border-bottom: 2px solid $color1;
border-bottom: 2px solid $ui-base-color;

&:hover {
color: $color5;
border-bottom: 2px solid lighten($color1, 5%);
color: $primary-text-color;
border-bottom: 2px solid lighten($ui-base-color, 5%);
}

&.selected {
color: $color4;
border-bottom: 2px solid $color4;
color: $ui-highlight-color;
border-bottom: 2px solid $ui-highlight-color;
}
}
}
@@ -221,7 +221,7 @@
font-weight: 500;
font-size: 14px;
line-height: 18px;
color: $color2;
color: $ui-secondary-color;
}

&:first-child {


+ 4
- 4
app/javascript/styles/basics.scss Ver arquivo

@@ -1,12 +1,12 @@
body {
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-attachment: fixed;
font-size: 13px;
line-height: 18px;
font-weight: 400;
color: $color5;
color: $primary-text-color;
padding-bottom: 140px;
text-rendering: optimizelegibility;
font-feature-settings: "kern";
@@ -17,7 +17,7 @@ body {
width: 100%;
height: 100%;
padding: 0;
background: $color1;
background: $ui-base-color;
}

&.embed {
@@ -33,7 +33,7 @@ body {
}

&.admin {
background: darken($color1, 4%);
background: darken($ui-base-color, 4%);
position: fixed;
width: 100%;
height: 100%;


+ 2
- 2
app/javascript/styles/boost.scss
Diferenças do arquivo suprimidas por serem muito extensas
Ver arquivo


+ 2
- 2
app/javascript/styles/compact_header.scss Ver arquivo

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

small {
font-weight: 400;
color: $color2;
color: $ui-secondary-color;
}

img {


+ 285
- 285
app/javascript/styles/components.scss
Diferenças do arquivo suprimidas por serem muito extensas
Ver arquivo


+ 1
- 1
app/javascript/styles/containers.scss Ver arquivo

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



+ 1
- 1
app/javascript/styles/footer.scss Ver arquivo

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

.domain {
font-weight: 500;


+ 34
- 34
app/javascript/styles/forms.scss Ver arquivo

@@ -16,7 +16,7 @@ code {

span.hint {
display: block;
color: $color3;
color: $ui-primary-color;
font-size: 12px;
margin-top: 4px;
}
@@ -51,7 +51,7 @@ code {
label {
font-family: inherit;
font-size: 16px;
color: $color5;
color: $primary-text-color;
display: block;
padding-top: 5px;
}
@@ -65,7 +65,7 @@ code {
margin-bottom: 5px;
font-family: inherit;
font-size: 14px;
color: $color5;
color: $primary-text-color;
display: block;
width: auto;
}
@@ -76,7 +76,7 @@ code {
label {
font-family: inherit;
font-size: 14px;
color: $color5;
color: $primary-text-color;
display: block;
width: auto;
}
@@ -108,11 +108,11 @@ code {
background: transparent;
box-sizing: border-box;
border: 0;
border-bottom: 2px solid $color3;
border-bottom: 2px solid $ui-primary-color;
border-radius: 2px 2px 0 0;
padding: 7px 4px;
font-size: 16px;
color: $color5;
color: $primary-text-color;
display: block;
width: 100%;
outline: 0;
@@ -124,35 +124,35 @@ code {
}

&:focus:invalid {
border-bottom-color: $color6;
border-bottom-color: $error-value-color;
}

&:required:valid {
border-bottom-color: $color7;
border-bottom-color: $valid-value-color;
}

&:active,
&:focus {
border-bottom-color: $color4;
background: rgba($color8, 0.1);
border-bottom-color: $ui-highlight-color;
background: rgba($base-overlay-background, 0.1);
}
}

.input.field_with_errors {
label {
color: $color6;
color: $error-value-color;
}

input[type=text],
input[type=email],
input[type=password] {
border-bottom-color: $color6;
border-bottom-color: $error-value-color;
}

.error {
display: block;
font-weight: 500;
color: $color6;
color: $error-value-color;
margin-top: 4px;
}
}
@@ -167,8 +167,8 @@ code {
width: 100%;
border: 0;
border-radius: 4px;
background: $color4;
color: $color5;
background: $ui-highlight-color;
color: $primary-text-color;
font-size: 18px;
padding: 10px;
text-transform: uppercase;
@@ -181,26 +181,26 @@ code {
margin-bottom: 10px;

&:hover {
background-color: lighten($color4, 5%);
background-color: lighten($ui-highlight-color, 5%);
}

&:active,
&:focus {
position: relative;
top: 1px;
background-color: darken($color4, 5%);
background-color: darken($ui-highlight-color, 5%);
}

&.negative {
background: $color6;
background: $error-value-color;

&:hover {
background-color: lighten($color6, 5%);
background-color: lighten($error-value-color, 5%);
}

&:active,
&:focus {
background-color: darken($color6, 5%);
background-color: darken($error-value-color, 5%);
}
}
}
@@ -211,12 +211,12 @@ code {
}

.flash-message {
background: $color1;
color: $color3;
background: $ui-base-color;
color: $ui-primary-color;
border-radius: 4px;
padding: 15px 10px;
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;

strong {
@@ -229,7 +229,7 @@ code {
text-align: center;

a {
color: $color5;
color: $primary-text-color;
text-decoration: none;

&:hover {
@@ -242,7 +242,7 @@ code {
.follow-prompt {
margin-bottom: 30px;
text-align: center;
color: $color3;
color: $ui-primary-color;

h2 {
font-size: 16px;
@@ -250,7 +250,7 @@ code {
}

strong {
color: $color2;
color: $ui-secondary-color;
font-weight: 500;
}
}
@@ -261,10 +261,10 @@ code {

.qr-code {
flex: 0 0 auto;
background: $color5;
background: $simple-background-color;
padding: 4px;
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;

svg {
@@ -275,7 +275,7 @@ code {

.qr-alternative {
margin-left: 10px;
color: $color3;
color: $ui-primary-color;

samp {
display: block;
@@ -296,16 +296,16 @@ code {
.warning {
max-width: 400px;
box-sizing: border-box;
background: rgba($color6, 0.5);
color: $color5;
text-shadow: 1px 1px 0 rgba($color8, 0.3);
box-shadow: 0 2px 6px rgba($color8, 0.4);
background: rgba($error-value-color, 0.5);
color: $primary-text-color;
text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3);
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4);
border-radius: 4px;
padding: 10px;
margin-bottom: 15px;

a {
color: $color5;
color: $primary-text-color;
text-decoration: underline;

&:hover,


+ 2
- 2
app/javascript/styles/landing_strip.scss Ver arquivo

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


+ 8
- 8
app/javascript/styles/reset.scss Ver arquivo

@@ -59,31 +59,31 @@ table {
}

::-webkit-scrollbar-thumb {
background: lighten($color1, 4%);
border: 0px none $color5;
background: lighten($ui-base-color, 4%);
border: 0px none $base-border-color;
border-radius: 50px;
}

::-webkit-scrollbar-thumb:hover {
background: lighten($color1, 6%);
background: lighten($ui-base-color, 6%);
}

::-webkit-scrollbar-thumb:active {
background: lighten($color1, 4%);
background: lighten($ui-base-color, 4%);
}

::-webkit-scrollbar-track {
border: 0px none $color5;
border: 0px none $base-border-color;
border-radius: 0;
background: rgba($color8, 0.1);
background: rgba($base-overlay-background, 0.1);
}

::-webkit-scrollbar-track:hover {
background: $color1;
background: $ui-base-color;
}

::-webkit-scrollbar-track:active {
background: $color1;
background: $ui-base-color;
}

::-webkit-scrollbar-corner {


+ 26
- 26
app/javascript/styles/stream_entries.scss Ver arquivo

@@ -1,13 +1,13 @@
.activity-stream {
clear: both;
box-shadow: 0 0 15px rgba($color8, 0.2);
box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);

.entry {
background: $color5;
background: $simple-background-color;

.detailed-status.light,
.status.light {
border-bottom: 1px solid $color2;
border-bottom: 1px solid $ui-secondary-color;
}

&:last-child {
@@ -50,7 +50,7 @@
font-size: 14px;

.status__relative-time {
color: $color4;
color: $ui-primary-color;
}
}
}
@@ -59,7 +59,7 @@
display: block;
max-width: 100%;
padding-right: 25px;
color: $color1;
color: $ui-base-color;
}

.status__avatar {
@@ -89,28 +89,28 @@

strong {
font-weight: 500;
color: $color1;
color: $ui-base-color;
}

span {
font-size: 14px;
color: $color4;
color: $ui-primary-color;
}
}

.status__content {
color: $color1;
color: $ui-base-color;

a {
color: $color4;
color: $ui-highlight-color;
}

a.status__content__spoiler-link {
color: $color5;
background: $color3;
color: $primary-text-color;
background: $ui-primary-color;

&:hover {
background: lighten($color3, 8%);
background: lighten($ui-primary-color, 8%);
}
}
}
@@ -131,7 +131,7 @@

.detailed-status.light {
padding: 14px;
background: $color5;
background: $simple-background-color;
cursor: default;

.detailed-status__display-name {
@@ -153,12 +153,12 @@

strong {
font-weight: 500;
color: $color1;
color: $ui-base-color;
}

span {
font-size: 14px;
color: $color3;
color: $ui-primary-color;
}
}
}
@@ -174,25 +174,25 @@
}

.status__content {
color: $color1;
color: $ui-base-color;

a {
color: $color4;
color: $ui-highlight-color;
}

a.status__content__spoiler-link {
color: $color5;
background: $color3;
color: $primary-text-color;
background: $ui-primary-color;

&:hover {
background: lighten($color3, 8%);
background: lighten($ui-primary-color, 8%);
}
}
}

.detailed-status__meta {
margin-top: 15px;
color: $color3;
color: $ui-primary-color;
font-size: 14px;
line-height: 18px;

@@ -291,13 +291,13 @@
transform: translate(-50%, -50%);
padding: 5px;
border-radius: 100px;
color: rgba($color5, 0.8);
color: rgba($primary-text-color, 0.8);
z-index: 1;
}
}

.media-spoiler {
background: $color3;
background: $ui-primary-color;
width: 100%;
height: 100%;
cursor: pointer;
@@ -313,7 +313,7 @@
z-index: 2;

&:hover {
background: darken($color3, 5%);
background: darken($ui-primary-color, 5%);
}

span {
@@ -335,7 +335,7 @@
padding-left: (48px + 14px * 2);
padding-bottom: 0;
margin-bottom: -4px;
color: $color3;
color: $ui-primary-color;
font-size: 14px;
position: relative;

@@ -345,7 +345,7 @@
}

.status__display-name.muted strong {
color: $color3;
color: $ui-primary-color;
}
}



+ 6
- 6
app/javascript/styles/tables.scss Ver arquivo

@@ -10,13 +10,13 @@
padding: 8px;
line-height: 18px;
vertical-align: top;
border-top: 1px solid $color1;
border-top: 1px solid $ui-base-color;
text-align: left;
}

& > thead > tr > th {
vertical-align: bottom;
border-bottom: 2px solid $color1;
border-bottom: 2px solid $ui-base-color;
border-top: 0;
font-weight: 500;
}
@@ -27,11 +27,11 @@

& > tbody > tr:nth-child(odd) > td,
& > tbody > tr:nth-child(odd) > th {
background: $color1;
background: $ui-base-color;
}

a {
color: $color4;
color: $ui-highlight-color;
text-decoration: underline;

&:hover {
@@ -53,11 +53,11 @@ a.table-action-link {
display: inline-block;
margin-right: 5px;
padding: 0 10px;
color: rgba($color5, 0.7);
color: rgba($primary-text-color, 0.7);
font-weight: 500;

&:hover {
color: $color5;
color: $primary-text-color;
}

i.fa {


+ 28
- 10
app/javascript/styles/variables.scss Ver arquivo

@@ -1,10 +1,28 @@
$color1: #282c37 !default; // darkest
$color2: #d9e1e8 !default; // lightest
$color3: #9baec8 !default; // lighter
$color4: #2b90d9 !default; // vibrant
$color5: #ffffff !default; // white
$color6: #df405a !default; // error red
$color7: #79bd9a !default; // succ green
$color8: #000000 !default; // black
$color9: #ff5050 !default; // red
$color10: #ca8f04 !default; // dark goldenrod
// Commonly used web colors
$black: #000000; // Black
$white: #ffffff; // White
$success-green: #79bd9a; // Padua
$error-red: #df405a; // Cerise
$warning-red: #ff5050; // Sunset Orange
$gold-star: #ca8f04; // Dark Goldenrod

// Values from the classic Mastodon UI
$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

Escrever Pré-visualização
Carregando…
Cancelar
Salvar