Add color variables of texts for better accesibility (#7125)
* Add variables for text colors * Change variables in sass files * Apply text color variables for recently added colors * Fix text colors of emoji mart anchors * Fix text colors of search__input * Fix text colors of text area of compose-form * Fix icon colors of privacy dropdown and modal * Inverted icon colors by classname * Change variables in boost.scss * Change action-button-color * Fix text colors of pre-header
This commit is contained in:
parent
0ba49eca8b
commit
74dae9458d
16 changed files with 285 additions and 340 deletions
|
@ -33,7 +33,7 @@
|
|||
a {
|
||||
display: block;
|
||||
padding: 15px;
|
||||
color: rgba($primary-text-color, 0.7);
|
||||
color: $darker-text-color;
|
||||
text-decoration: none;
|
||||
transition: all 200ms linear;
|
||||
border-radius: 4px 0 0 4px;
|
||||
|
@ -90,7 +90,7 @@
|
|||
padding-left: 25px;
|
||||
|
||||
h2 {
|
||||
color: $ui-secondary-color;
|
||||
color: $primary-text-color;
|
||||
font-size: 24px;
|
||||
line-height: 28px;
|
||||
font-weight: 400;
|
||||
|
@ -98,7 +98,7 @@
|
|||
}
|
||||
|
||||
h3 {
|
||||
color: $ui-secondary-color;
|
||||
color: $primary-text-color;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
font-weight: 400;
|
||||
|
@ -109,7 +109,7 @@
|
|||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: $ui-primary-color;
|
||||
color: $primary-text-color;
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: 8px;
|
||||
border-bottom: 1px solid lighten($ui-base-color, 8%);
|
||||
|
@ -117,7 +117,7 @@
|
|||
|
||||
h6 {
|
||||
font-size: 16px;
|
||||
color: $ui-secondary-color;
|
||||
color: $primary-text-color;
|
||||
line-height: 28px;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
@ -125,7 +125,7 @@
|
|||
& > p {
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
color: $ui-secondary-color;
|
||||
color: $darker-text-color;
|
||||
margin-bottom: 20px;
|
||||
|
||||
strong {
|
||||
|
@ -153,10 +153,10 @@
|
|||
}
|
||||
|
||||
.muted-hint {
|
||||
color: $ui-primary-color;
|
||||
color: $darker-text-color;
|
||||
|
||||
a {
|
||||
color: $ui-highlight-color;
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -253,7 +253,7 @@
|
|||
|
||||
a {
|
||||
display: inline-block;
|
||||
color: rgba($primary-text-color, 0.7);
|
||||
color: $darker-text-color;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
|
@ -266,7 +266,7 @@
|
|||
}
|
||||
|
||||
&.selected {
|
||||
color: $ui-highlight-color;
|
||||
color: $highlight-text-color;
|
||||
border-bottom: 2px solid $ui-highlight-color;
|
||||
}
|
||||
}
|
||||
|
@ -291,7 +291,7 @@
|
|||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
color: $ui-secondary-color;
|
||||
color: $primary-text-color;
|
||||
|
||||
@each $lang in $cjk-langs {
|
||||
&:lang(#{$lang}) {
|
||||
|
@ -348,7 +348,7 @@
|
|||
padding: 7px 4px;
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
color: $ui-base-color;
|
||||
color: $inverted-text-color;
|
||||
display: block;
|
||||
width: 100%;
|
||||
outline: 0;
|
||||
|
@ -402,7 +402,7 @@
|
|||
font-size: 14px;
|
||||
|
||||
a {
|
||||
color: $classic-highlight-color;
|
||||
color: $highlight-text-color;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
|
@ -425,7 +425,7 @@
|
|||
align-items: center;
|
||||
padding: 10px;
|
||||
background: $ui-base-color;
|
||||
color: $ui-primary-color;
|
||||
color: $darker-text-color;
|
||||
border-radius: 4px 4px 0 0;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
|
@ -452,14 +452,14 @@
|
|||
}
|
||||
|
||||
&__timestamp {
|
||||
color: lighten($ui-base-color, 34%);
|
||||
color: $darker-text-color;
|
||||
}
|
||||
|
||||
&__extras {
|
||||
background: lighten($ui-base-color, 6%);
|
||||
border-radius: 0 0 4px 4px;
|
||||
padding: 10px;
|
||||
color: $ui-primary-color;
|
||||
color: $darker-text-color;
|
||||
font-family: 'mastodon-font-monospace', monospace;
|
||||
font-size: 12px;
|
||||
word-wrap: break-word;
|
||||
|
@ -469,7 +469,7 @@
|
|||
&__icon {
|
||||
font-size: 28px;
|
||||
margin-right: 10px;
|
||||
color: lighten($ui-base-color, 34%);
|
||||
color: $darker-text-color;
|
||||
}
|
||||
|
||||
&__icon__overlay {
|
||||
|
@ -485,7 +485,7 @@
|
|||
}
|
||||
|
||||
&.negative {
|
||||
background: $error-red;
|
||||
background: lighten($error-red, 12%);
|
||||
}
|
||||
|
||||
&.neutral {
|
||||
|
@ -496,17 +496,17 @@
|
|||
a,
|
||||
.username,
|
||||
.target {
|
||||
color: $ui-secondary-color;
|
||||
color: $primary-text-color;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.diff-old {
|
||||
color: $error-red;
|
||||
color: lighten($error-red, 12%);
|
||||
}
|
||||
|
||||
.diff-neutral {
|
||||
color: $ui-secondary-color;
|
||||
color: $darker-text-color;
|
||||
}
|
||||
|
||||
.diff-new {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue