tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Add color variables of texts for better accesibility

Browse Source 
Port 74dae9458d and related to glitch-soc
This commit is contained in:
Thibaut Girka
2018-05-05 17:58:46 +02:00
parent 390cfdef2e
commit b3a236637e
27 changed files with 293 additions and 328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
app/javascript/flavours/glitch/styles/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;
@@ -116,7 +116,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%);
@@ -146,7 +146,7 @@
&.active {
&::after {
border-bottom: 4px solid $ui-highlight-color;
border-bottom: 4px solid $highlight-text-color;
opacity: 1;
}
}
@@ -182,7 +182,7 @@
line-height: 18px;
padding: 0 15px;
text-align: center;
color: $ui-secondary-color;
color: $secondary-text-color;
}
@media screen and (max-width: 480px) {
@@ -260,7 +260,7 @@
.current {
background: $simple-background-color;
border-radius: 100px;
color: $ui-base-color;
color: $inverted-text-color;
cursor: default;
margin: 0 10px;
}
@@ -272,7 +272,7 @@
.older,
.newer {
text-transform: uppercase;
color: $ui-secondary-color;
color: $secondary-text-color;
}
.older {
@@ -297,7 +297,7 @@
.disabled {
cursor: default;
color: lighten($ui-base-color, 10%);
color: lighten($inverted-text-color, 10%);
}
@media screen and (max-width: 700px) {
@@ -336,7 +336,7 @@
width: 335px;
background: $simple-background-color;
border-radius: 4px;
color: $ui-base-color;
color: $inverted-text-color;
margin: 0 5px 10px;
position: relative;
@@ -348,7 +348,7 @@
overflow: hidden;
height: 100px;
border-radius: 4px 4px 0 0;
background-color: lighten($ui-base-color, 4%);
background-color: lighten($inverted-text-color, 4%);
background-size: cover;
background-position: center;
position: relative;
@@ -399,7 +399,7 @@
a {
display: block;
color: $ui-base-color;
color: $inverted-text-color;
text-decoration: none;
text-overflow: ellipsis;
overflow: hidden;
@@ -421,7 +421,7 @@
}
.username {
color: lighten($ui-base-color, 34%);
color: $lighter-text-color;
font-size: 14px;
font-weight: 400;
}
@@ -429,7 +429,7 @@
.account__header__content {
padding: 10px 15px;
padding-top: 15px;
color: lighten($ui-base-color, 26%);
color: $lighter-text-color;
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
@@ -441,7 +441,7 @@
.nothing-here {
width: 100%;
display: block;
color: $ui-primary-color;
color: $light-text-color;
font-size: 14px;
font-weight: 500;
text-align: center;
@@ -502,7 +502,7 @@
span {
font-size: 14px;
color: $ui-primary-color;
color: $light-text-color;
}
}
@@ -517,7 +517,7 @@
.account__header__content {
font-size: 14px;
color: $ui-base-color;
color: $inverted-text-color;
}
}
@@ -531,18 +531,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;
}
}