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
|
@ -84,7 +84,7 @@
|
|||
font-size: 14px;
|
||||
|
||||
.status__relative-time {
|
||||
color: $ui-primary-color;
|
||||
color: $lighter-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -93,7 +93,7 @@
|
|||
display: block;
|
||||
max-width: 100%;
|
||||
padding-right: 25px;
|
||||
color: $ui-base-color;
|
||||
color: $lighter-text-color;
|
||||
}
|
||||
|
||||
.status__avatar {
|
||||
|
@ -123,7 +123,7 @@
|
|||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
color: $ui-base-color;
|
||||
color: $inverted-text-color;
|
||||
|
||||
@each $lang in $cjk-langs {
|
||||
&:lang(#{$lang}) {
|
||||
|
@ -134,15 +134,15 @@
|
|||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: $ui-primary-color;
|
||||
color: $inverted-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.status__content {
|
||||
color: $ui-base-color;
|
||||
color: $inverted-text-color;
|
||||
|
||||
a {
|
||||
color: $ui-highlight-color;
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
a.status__content__spoiler-link {
|
||||
|
@ -180,7 +180,7 @@
|
|||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
color: $ui-base-color;
|
||||
color: $inverted-text-color;
|
||||
|
||||
@each $lang in $cjk-langs {
|
||||
&:lang(#{$lang}) {
|
||||
|
@ -191,7 +191,7 @@
|
|||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: $ui-primary-color;
|
||||
color: $lighter-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -207,10 +207,10 @@
|
|||
}
|
||||
|
||||
.status__content {
|
||||
color: $ui-base-color;
|
||||
color: $inverted-text-color;
|
||||
|
||||
a {
|
||||
color: $ui-highlight-color;
|
||||
color: $highlight-text-color;
|
||||
}
|
||||
|
||||
a.status__content__spoiler-link {
|
||||
|
@ -225,7 +225,7 @@
|
|||
|
||||
.detailed-status__meta {
|
||||
margin-top: 15px;
|
||||
color: $ui-primary-color;
|
||||
color: $lighter-text-color;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
|
||||
|
@ -243,7 +243,7 @@
|
|||
|
||||
.status-card {
|
||||
border-color: lighten($ui-secondary-color, 4%);
|
||||
color: darken($ui-primary-color, 4%);
|
||||
color: $lighter-text-color;
|
||||
|
||||
&:hover {
|
||||
background: lighten($ui-secondary-color, 4%);
|
||||
|
@ -252,7 +252,7 @@
|
|||
|
||||
.status-card__title,
|
||||
.status-card__description {
|
||||
color: $ui-base-color;
|
||||
color: $inverted-text-color;
|
||||
}
|
||||
|
||||
.status-card__image {
|
||||
|
@ -262,7 +262,7 @@
|
|||
|
||||
.media-spoiler {
|
||||
background: $ui-base-color;
|
||||
color: $ui-primary-color;
|
||||
color: $darker-text-color;
|
||||
}
|
||||
|
||||
.pre-header {
|
||||
|
@ -270,7 +270,7 @@
|
|||
padding-left: (48px + 14px * 2);
|
||||
padding-bottom: 0;
|
||||
margin-bottom: -4px;
|
||||
color: $ui-primary-color;
|
||||
color: $lighter-text-color;
|
||||
font-size: 14px;
|
||||
position: relative;
|
||||
|
||||
|
@ -280,7 +280,7 @@
|
|||
}
|
||||
|
||||
.status__display-name.muted strong {
|
||||
color: $ui-primary-color;
|
||||
color: $lighter-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue