Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Add color variables of texts for better accesibility (#7125)

Browse source 
* 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:
Lynx Kotoura 2018-04-18 23:52:15 +09:00 • committed by Eugen Rochko
parent 0ba49eca8b
commit 74dae9458d
16 changed files with 285 additions and 340 deletions
Download patch file Download diff file Expand all files Collapse all files

42
app/javascript/styles/mastodon/accounts.scss
View file

@ -75,7 +75,7 @@
small {
display: block;
font-size: 14px;
color: $ui-highlight-color;
color: $highlight-text-color;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
@ -113,7 +113,7 @@
width: 33.3%;
box-sizing: border-box;
flex: 0 0 auto;
color: $ui-primary-color;
color: $darker-text-color;
padding: 5px 10px 0;
margin-bottom: 10px;
border-right: 1px solid lighten($ui-base-color, 4%);
@ -143,7 +143,7 @@
&.active {
&::after {
border-bottom: 4px solid $ui-highlight-color;
border-bottom: 4px solid $highlight-text-color;
opacity: 1;
}
}
@ -178,7 +178,7 @@
font-size: 14px;
line-height: 18px;
padding: 0 15px;
color: $ui-secondary-color;
color: $darker-text-color;
}
@media screen and (max-width: 480px) {
@ -256,7 +256,7 @@
.current {
background: $simple-background-color;
border-radius: 100px;
color: $ui-base-color;
color: $lighter-text-color;
cursor: default;
margin: 0 10px;
}
@ -268,7 +268,7 @@
.older,
.newer {
text-transform: uppercase;
color: $ui-secondary-color;
color: $primary-text-color;
}
.older {
@ -293,7 +293,7 @@
.disabled {
cursor: default;
color: lighten($ui-base-color, 10%);
color: opacify($lighter-text-color, 0.1);
}
@media screen and (max-width: 700px) {
@ -332,7 +332,7 @@
width: 335px;
background: $simple-background-color;
border-radius: 4px;
color: $ui-base-color;
color: $lighter-text-color;
margin: 0 5px 10px;
position: relative;
@ -344,7 +344,7 @@
overflow: hidden;
height: 100px;
border-radius: 4px 4px 0 0;
background-color: lighten($ui-base-color, 4%);
background-color: opacify($lighter-text-color, 0.04);
background-size: cover;
background-position: center;
position: relative;
@ -392,7 +392,7 @@
a {
display: block;
color: $ui-base-color;
color: $inverted-text-color;
text-decoration: none;
text-overflow: ellipsis;
overflow: hidden;
@ -414,7 +414,7 @@
}
.username {
color: lighten($ui-base-color, 34%);
color: $lighter-text-color;
font-size: 14px;
font-weight: 400;
}
@ -422,7 +422,7 @@
.account__header__content {
padding: 10px 15px;
padding-top: 15px;
color: lighten($ui-base-color, 26%);
color: transparentize($lighter-text-color, 0.1);
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
@ -434,7 +434,7 @@
.nothing-here {
width: 100%;
display: block;
color: $ui-primary-color;
color: $lighter-text-color;
font-size: 14px;
font-weight: 500;
text-align: center;
@ -493,7 +493,7 @@
span {
font-size: 14px;
color: $ui-primary-color;
color: $inverted-text-color;
}
}
@ -508,7 +508,7 @@
.account__header__content {
font-size: 14px;
color: $ui-base-color;
color: $darker-text-color;
}
}
@ -522,18 +522,18 @@
display: inline-block;
padding: 15px;
text-decoration: none;
color: $ui-highlight-color;
color: $highlight-text-color;
text-transform: uppercase;
font-weight: 500;
&:hover,
&:active,
&:focus {
color: lighten($ui-highlight-color, 8%);
color: lighten($highlight-text-color, 8%);
}
&.active {
color: $ui-base-color;
color: $inverted-text-color;
cursor: default;
}
}
@ -586,19 +586,19 @@
font-weight: 500;
text-align: center;
width: 94px;
color: $ui-secondary-color;
color: opacify($darker-text-color, 0.1);
background: rgba(darken($ui-base-color, 8%), 0.5);
}
td {
color: $ui-primary-color;
color: $darker-text-color;
text-align: center;
width: 100%;
padding-left: 0;
}
a {
color: $ui-highlight-color;
color: $highlight-text-color;
text-decoration: none;
&:hover,