Improved contrast of many UI elements
Improved contrast of usernames, hashtags and @s against reply box, account bio field box contents, icons/buttons, left panel UI elements, toot borders, etc Added CR value notes to all colors Made indentation consistent
This commit is contained in:
killerbee
parent
4c255bc996
commit
be266473af
|
|
@ -1,41 +1,151 @@
|
|||
/* Main background: CR 15.55 against white text */
|
||||
/* Main/base background: CR 15.55 (AAA) against white text */
|
||||
$classic-base-color: #261f3f;
|
||||
$ui-base-color: $classic-base-color;
|
||||
|
||||
/* 'grey' text: CR 4.6 against base */
|
||||
$ui-base-lighter-color: #a87ea8;
|
||||
/* Left panel background:
|
||||
* (Unknown variable, components.scss)
|
||||
.drawer__inner {
|
||||
background: #4d417a;
|
||||
}
|
||||
*/
|
||||
|
||||
/* Highlight text: CR 9.0 against base,
|
||||
Reply box: CR 12.16 against black text */
|
||||
/* Toot! and Follow/Unfollow buttons: CR 3.2 (AA for UI) against white text,
|
||||
* would be 6.54 (AA) against black text, but I think that looks worse */
|
||||
.button,
|
||||
.button .logo-button {
|
||||
background: #c363ff !important;
|
||||
}
|
||||
/* Hovering over Unfollow button (unknown variable, boost.scss)
|
||||
* CR 4.18 (AA for UI) against white text, would be 5.01 (AA) against black
|
||||
.button. logo-button .button--destructive:active,
|
||||
.button. logo-button .button--destructive:focus,
|
||||
.button. logo-button .button--destructive:hover {
|
||||
background: #df405a;
|
||||
}
|
||||
*/
|
||||
|
||||
/* Account view background: CR 11.84 (AAA) against white text
|
||||
* (Unknown variable, components.scss):
|
||||
.account__header {
|
||||
background: #3a315c;
|
||||
}
|
||||
* Account header fields box background:
|
||||
* (Unknown variable, components.scss)
|
||||
.account__header__bio .account__header__fields {
|
||||
background: #2a2342;
|
||||
}
|
||||
*/
|
||||
|
||||
/* Highlight text: CR 9.0 (AAA) against base,
|
||||
* CR 6.85 (AA) against account view
|
||||
* CR 8.58 against account bio field background #2a2342; */
|
||||
$ui-primary-color: #9bcbed;
|
||||
|
||||
/* Hashtags and @s: CR 7.25 against base,
|
||||
! CR 1.24 against reply box
|
||||
Is it possible to override the reply box color? Re-using a
|
||||
text color for a background color does not make sense. */
|
||||
$ui-secondary-color: #d8a2ba;
|
||||
|
||||
/* Winning poll option: CR 5.77 against base */
|
||||
$ui-highlight-color: #CC7AFF;
|
||||
|
||||
/* Selected toot */
|
||||
/* Selected toot: CR 13.13 (AAA) against white text,
|
||||
CR 6.12 (AA) against @s */
|
||||
.detailed-status {
|
||||
background: #332a54;
|
||||
background: #332a54;
|
||||
}
|
||||
.detailed-status__action-bar {
|
||||
background: #332a54;
|
||||
background: #332a54;
|
||||
}
|
||||
|
||||
/* Replied-to-toot text over toot box */
|
||||
/* Informational text under highlighted toots and polls, for image
|
||||
* attachment names, in link embeds, and for the load-more text buttons */
|
||||
.detailed-status__meta,
|
||||
.poll__footer,
|
||||
.poll__link,
|
||||
.attachment-list__list a,
|
||||
.status-card,
|
||||
.load-more {
|
||||
color: #b38bdb !important;
|
||||
}
|
||||
|
||||
/* Reply box: CR 11.70 (AAA) against black text,
|
||||
CR 4.71 (AA) against hashtags and @s */
|
||||
.reply-indicator {
|
||||
a {
|
||||
color: var(--fbc-light-gray) }
|
||||
color: #F0F0F4;
|
||||
}
|
||||
|
||||
/* OCR image description button */
|
||||
/* Usernames: CR 15.55 (AAA) against base */
|
||||
.account__display-name strong, .status__display-name strong {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* 'grey' text: CR 4.6 (AA) against base */
|
||||
$ui-base-lighter-color: #a87ea8;
|
||||
/* Account name for boost labels */
|
||||
.status__prepend,
|
||||
.status__prepend .status__display-name strong {
|
||||
color: $ui-base-lighter-color;
|
||||
}
|
||||
|
||||
/* Border between toots in timelines: CR 1.87 against base
|
||||
* (Not a text element, so no WCAG score) */
|
||||
.status {
|
||||
border-bottom-color: #524486;
|
||||
}
|
||||
|
||||
/* Icons: CR 4.60 against base,
|
||||
* CR 3.88 (Fail) against highlighted toot */
|
||||
.icon-button {
|
||||
color: #b576b4;
|
||||
}
|
||||
|
||||
/* CW labels: 5.35 (AA) against button #885b8c */
|
||||
.status__content__spoiler-link {
|
||||
color: #fff;
|
||||
}
|
||||
/* Image CW overlay buttons: CR 5.74 (AA) against white text */
|
||||
.spoiler-button__overlay__label {
|
||||
background: rgba(0,0,0,.6);
|
||||
}
|
||||
|
||||
/* Username of user, shown above toot box: re-use highlight text color
|
||||
* CR 5.17 (AA) against left panel background */
|
||||
.navigation-bar strong {
|
||||
color: $ui-primary-color !important;
|
||||
}
|
||||
/* Menu button above toot box: CR 8.93 (AAA) against left panel background */
|
||||
.navigation-bar .icon-button {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Toot box buttons: CR 4.61 (AA) against medium gray
|
||||
* (unknown variable, components.scss)
|
||||
.compose-form__buttons-wrapper { background: #ebebeb; }
|
||||
*/
|
||||
.icon-button.inverted,
|
||||
.text-icon-button,
|
||||
.character-counter {
|
||||
color: #88588c;
|
||||
}
|
||||
|
||||
|
||||
/* Hashtags and @s: CR 7.25 (AAA) against base,
|
||||
* Overridden (would be CR 1.89 (Fail)) in reply box
|
||||
* Not used for account view */
|
||||
$ui-secondary-color: #d8a2ba;
|
||||
|
||||
/* Hashtags and @s in reply box: CR 4.71 (AA) */
|
||||
.reply-indicator__content a {
|
||||
color: #885b8c;
|
||||
}
|
||||
|
||||
/* Account field labels: CR 10.09 (AAA) against background #2a2342; */
|
||||
.account__header__fields dt {
|
||||
color: #e8cde6 !important;
|
||||
}
|
||||
|
||||
/* Winning poll option: CR 5.77 against base
|
||||
* (not a text element, but would be AA) */
|
||||
$ui-highlight-color: #CC7AFF;
|
||||
|
||||
|
||||
/* image description OCR button: CR 4.68 (AA) */
|
||||
.link-button {
|
||||
color: #00446c;
|
||||
text-decoration: underline;
|
||||
color: #00446c;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
@import 'application';
|
||||
|
|
|
|||
|
|
@ -1,52 +1,48 @@
|
|||
/* Increase contrast */
|
||||
/* meemu-purple-221234c0.chunk.css | https://queer.party/packs/css/meemu-purple-221234c0.chunk.css */
|
||||
.column > .scrollable {
|
||||
/* background: #322a4f; */
|
||||
background: #261f3f;
|
||||
}
|
||||
|
||||
.status__relative-time {
|
||||
/* color: #885b8c; */
|
||||
color: #a87ea8;
|
||||
}
|
||||
|
||||
.status__display-name {
|
||||
/* color: #885b8c; */
|
||||
color: #a87ea8;
|
||||
.navigation-bar strong {
|
||||
color: #9bcbed !important;
|
||||
}
|
||||
|
||||
.status {
|
||||
/* border-bottom: 1px solid #43386a; */
|
||||
border-bottom: 1px solid #524486;
|
||||
/* border-bottom-color: #43386a; */
|
||||
border-bottom-color: #524486;
|
||||
}
|
||||
|
||||
.status__relative-time,
|
||||
.status__display-name,
|
||||
.muted .status__content,
|
||||
.muted .status__content a,
|
||||
.muted .status__content p,
|
||||
.muted .status__display-name strong {
|
||||
color: #a87ea8;
|
||||
}
|
||||
|
||||
.muted .poll {
|
||||
.muted .status__display-name strong,
|
||||
.muted .poll,
|
||||
.status__prepend,
|
||||
.status__prepend .status__display-name strong {
|
||||
/* color: #885b8c; */
|
||||
color: #a87ea8;
|
||||
}
|
||||
.reply-indicator__content a, .status__content a {
|
||||
color: #d8a2ba;
|
||||
|
||||
/* hashtags and @s */
|
||||
.status__content a {
|
||||
color: #d8a2ba;
|
||||
}
|
||||
.detailed-status {
|
||||
background: #332a54;
|
||||
|
||||
/* hashtags and @s in reply box */
|
||||
.reply-indicator__content a {
|
||||
color: #885b8c;
|
||||
}
|
||||
|
||||
.detailed-status,
|
||||
.detailed-status__action-bar {
|
||||
background: #332a54;
|
||||
background: #332a54;
|
||||
}
|
||||
|
||||
|
||||
/* meemu-purple-652b2e02.chunk.css | https://queer.party/packs/css/meemu-purple-652b2e02.chunk.css */
|
||||
|
||||
.reply-indicator {
|
||||
/* background: var\(--fbc-grey-20; */
|
||||
background: var(--fbc-light-gray);
|
||||
background: #f0f0f4;
|
||||
}
|
||||
|
||||
.link-button {
|
||||
|
|
@ -54,6 +50,47 @@ background: #332a54;
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
color: #b576b4;
|
||||
}
|
||||
|
||||
.navigation-bar .icon-button {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.icon-button.inverted,
|
||||
.text-icon-button,
|
||||
.character-counter {
|
||||
color: #88588c;
|
||||
}
|
||||
|
||||
.account__header__fields dt {
|
||||
/* color: #ba8d98; */
|
||||
color: #e8cde6 !important;
|
||||
}
|
||||
|
||||
.detailed-status__meta,
|
||||
.poll__footer,
|
||||
.poll__link,
|
||||
.attachment-list__list a,
|
||||
.status-card,
|
||||
.load-more {
|
||||
/* color: #885b8c; */
|
||||
color: #b38bdb;
|
||||
}
|
||||
|
||||
.button,
|
||||
.button .logo-button {
|
||||
/* background: #c870ff */
|
||||
background: #c363ff !important;
|
||||
}
|
||||
|
||||
.status__content__spoiler-link {
|
||||
color: #fff;
|
||||
}
|
||||
.spoiler-button__overlay__label {
|
||||
background: rgba(0,0,0,.6);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 631px) {
|
||||
.column,
|
||||
|
|
|
|||
Loading…
Reference in New Issue