mirrors
/
meemudotorg-theemu
mirror of https://github.com/meemudotorg/theemu.git
1
0
Fork 0
Code Releases Activity

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 2022-12-14 18:18:16 -08:00
parent 4c255bc996
commit be266473af
2 changed files with 196 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
app/javascript/styles/meemu-default.scss
View File

@ -1,24 +1,48 @@
/* 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;
}
@ -26,13 +50,99 @@ background: #332a54;
background: #332a54;
}
/* Replied-to-toot text over toot box */
.reply-indicator {
a {
color: var(--fbc-light-gray) }
/* 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;
}
/* OCR image description button */
/* Reply box: CR 11.70 (AAA) against black text,
CR 4.71 (AA) against hashtags and @s */
.reply-indicator {
color: #F0F0F4;
}
/* 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;

85
app/javascript/styles/meemu-purple-contrast-patch.css
View File

@ -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 {
/* 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;
}
/* 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,