forked from fedi/mastodon
Fix contrast of some elements with new brand colors (#18691)
This commit is contained in:
parent
7b5100aaed
commit
0391b2a603
app/javascript/styles
contrast
mastodon-light
mastodon
|
@ -4,19 +4,17 @@ $black: #000000;
|
|||
$classic-base-color: #282c37;
|
||||
$classic-primary-color: #9baec8;
|
||||
$classic-secondary-color: #d9e1e8;
|
||||
$classic-highlight-color: #2b90d9;
|
||||
$classic-highlight-color: #6364ff;
|
||||
|
||||
$ui-base-color: $classic-base-color !default;
|
||||
$ui-primary-color: $classic-primary-color !default;
|
||||
$ui-secondary-color: $classic-secondary-color !default;
|
||||
|
||||
// Differences
|
||||
$ui-highlight-color: #2b5fd9;
|
||||
$ui-highlight-color: $classic-highlight-color !default;
|
||||
|
||||
$darker-text-color: lighten($ui-primary-color, 20%) !default;
|
||||
$dark-text-color: lighten($ui-primary-color, 12%) !default;
|
||||
$secondary-text-color: lighten($ui-secondary-color, 6%) !default;
|
||||
$highlight-text-color: $classic-highlight-color !default;
|
||||
$highlight-text-color: lighten($ui-highlight-color, 8%) !default;
|
||||
$action-button-color: #8d9ac2;
|
||||
|
||||
$inverted-text-color: $black !default;
|
||||
|
|
|
@ -5,7 +5,7 @@ $white: #ffffff;
|
|||
$classic-base-color: #282c37;
|
||||
$classic-primary-color: #9baec8;
|
||||
$classic-secondary-color: #d9e1e8;
|
||||
$classic-highlight-color: #2b90d9;
|
||||
$classic-highlight-color: #6364ff;
|
||||
|
||||
// Differences
|
||||
$success-green: lighten(#3c754d, 8%);
|
||||
|
@ -17,10 +17,11 @@ $ui-base-color: $classic-secondary-color !default;
|
|||
$ui-base-lighter-color: #b0c0cf;
|
||||
$ui-primary-color: #9bcbed;
|
||||
$ui-secondary-color: $classic-base-color !default;
|
||||
$ui-highlight-color: #2b90d9;
|
||||
$ui-highlight-color: $classic-highlight-color !default;
|
||||
|
||||
$primary-text-color: $black !default;
|
||||
$darker-text-color: $classic-base-color !default;
|
||||
$highlight-text-color: darken($ui-highlight-color, 8%) !default;
|
||||
$dark-text-color: #444b5d;
|
||||
$action-button-color: #606984;
|
||||
|
||||
|
|
|
@ -133,12 +133,12 @@ $content-width: 840px;
|
|||
|
||||
.simple-navigation-active-leaf a {
|
||||
color: $primary-text-color;
|
||||
background-color: $ui-highlight-color;
|
||||
background-color: darken($ui-highlight-color, 2%);
|
||||
border-bottom: 0;
|
||||
border-radius: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($ui-highlight-color, 5%);
|
||||
background-color: $ui-highlight-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -885,7 +885,7 @@ a.name-tag,
|
|||
border: 0;
|
||||
|
||||
a {
|
||||
color: lighten($ui-highlight-color, 8%);
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
dl:first-child .verified {
|
||||
|
|
|
@ -42,7 +42,7 @@
|
|||
}
|
||||
|
||||
.button {
|
||||
background-color: $ui-highlight-color;
|
||||
background-color: darken($ui-highlight-color, 2%);
|
||||
border: 10px none;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
|
@ -60,20 +60,16 @@
|
|||
text-align: center;
|
||||
text-decoration: none;
|
||||
text-overflow: ellipsis;
|
||||
transition: all 100ms ease-in;
|
||||
white-space: nowrap;
|
||||
width: auto;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: lighten($ui-highlight-color, 10%);
|
||||
transition: all 200ms ease-out;
|
||||
background-color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
&--destructive {
|
||||
transition: none;
|
||||
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
|
@ -829,7 +825,7 @@
|
|||
}
|
||||
|
||||
a.unhandled-link {
|
||||
color: lighten($ui-highlight-color, 8%);
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
.status__content__spoiler-link {
|
||||
|
@ -899,7 +895,7 @@
|
|||
}
|
||||
|
||||
&.unhandled-link {
|
||||
color: lighten($ui-highlight-color, 8%);
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -912,7 +908,7 @@
|
|||
display: block;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
color: lighten($ui-highlight-color, 8%);
|
||||
color: $highlight-text-color;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
|
@ -2437,7 +2433,7 @@ a.account__display-name {
|
|||
height: 3.9375rem;
|
||||
bottom: 1.3125rem;
|
||||
right: 1.3125rem;
|
||||
background: darken($ui-highlight-color, 3%);
|
||||
background: darken($ui-highlight-color, 2%);
|
||||
color: $white;
|
||||
border-radius: 50%;
|
||||
font-size: 21px;
|
||||
|
@ -2448,7 +2444,7 @@ a.account__display-name {
|
|||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
background: lighten($ui-highlight-color, 7%);
|
||||
background: $ui-highlight-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -2881,11 +2877,11 @@ a.account__display-name {
|
|||
}
|
||||
|
||||
.react-toggle--checked .react-toggle-track {
|
||||
background-color: $ui-highlight-color;
|
||||
background-color: darken($ui-highlight-color, 2%);
|
||||
}
|
||||
|
||||
.react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled) .react-toggle-track {
|
||||
background-color: lighten($ui-highlight-color, 10%);
|
||||
background-color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
.react-toggle-track-check {
|
||||
|
@ -2974,7 +2970,7 @@ a.account__display-name {
|
|||
}
|
||||
|
||||
&.active {
|
||||
color: $ui-highlight-color;
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -3407,14 +3403,14 @@ a.status-card.compact:hover {
|
|||
}
|
||||
|
||||
a {
|
||||
color: lighten($ui-highlight-color, 8%);
|
||||
color: $highlight-text-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
text-decoration: underline;
|
||||
color: lighten($ui-highlight-color, 12%);
|
||||
color: lighten($highlight-text-color, 4%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -6427,8 +6423,8 @@ a.status-card.compact:hover {
|
|||
vertical-align: middle;
|
||||
|
||||
&.checked {
|
||||
border-color: lighten($ui-highlight-color, 8%);
|
||||
background: lighten($ui-highlight-color, 8%);
|
||||
border-color: lighten($ui-highlight-color, 4%);
|
||||
background: lighten($ui-highlight-color, 4%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -791,7 +791,7 @@
|
|||
border-top: 0;
|
||||
|
||||
a {
|
||||
color: lighten($ui-highlight-color, 8%);
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
dl:first-child .verified {
|
||||
|
|
|
@ -82,7 +82,7 @@
|
|||
display: flex;
|
||||
align-items: baseline;
|
||||
border-radius: 4px;
|
||||
background: $ui-highlight-color;
|
||||
background: darken($ui-highlight-color, 2%);
|
||||
color: $primary-text-color;
|
||||
transition: all 100ms ease-in;
|
||||
font-size: 14px;
|
||||
|
@ -95,7 +95,7 @@
|
|||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: lighten($ui-highlight-color, 10%);
|
||||
background-color: $ui-highlight-color;
|
||||
transition: all 200ms ease-out;
|
||||
}
|
||||
|
||||
|
|
|
@ -463,14 +463,14 @@ code {
|
|||
width: 100%;
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
background: $ui-highlight-color;
|
||||
background: darken($ui-highlight-color, 2%);
|
||||
color: $primary-text-color;
|
||||
font-size: 18px;
|
||||
line-height: inherit;
|
||||
height: auto;
|
||||
padding: 10px;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
|
@ -483,13 +483,10 @@ code {
|
|||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($ui-highlight-color, 5%);
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
background-color: darken($ui-highlight-color, 5%);
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
&:disabled:hover {
|
||||
|
|
|
@ -80,7 +80,7 @@
|
|||
.button.logo-button {
|
||||
flex: 0 auto;
|
||||
font-size: 14px;
|
||||
background: $ui-highlight-color;
|
||||
background: darken($ui-highlight-color, 2%);
|
||||
color: $primary-text-color;
|
||||
text-transform: none;
|
||||
line-height: 1.2;
|
||||
|
@ -104,7 +104,7 @@
|
|||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: lighten($ui-highlight-color, 10%);
|
||||
background: $ui-highlight-color;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
|
|
|
@ -34,7 +34,7 @@ $primary-text-color: $white !default;
|
|||
$darker-text-color: $ui-primary-color !default;
|
||||
$dark-text-color: $ui-base-lighter-color !default;
|
||||
$secondary-text-color: $ui-secondary-color !default;
|
||||
$highlight-text-color: $ui-highlight-color !default;
|
||||
$highlight-text-color: lighten($ui-highlight-color, 8%) !default;
|
||||
$action-button-color: $ui-base-lighter-color !default;
|
||||
$passive-text-color: $gold-star !default;
|
||||
$active-passive-text-color: $success-green !default;
|
||||
|
|
Loading…
Reference in a new issue