discourse/discourse
1
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-03-06 11:19:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

FIX: Specificity and other fixes for WCAG colors (#13082)

Browse Source
This commit is contained in:
Kris 2021-05-20 02:28:03 -04:00 committed by GitHub
parent 28e201f391
commit f1b14a7f71
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 259 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
app/assets/stylesheets/wcag.scss
View File

@ -7,7 +7,7 @@
opacity: 1;
}
.discourse-no-touch {
html.discourse-no-touch {
.btn-default,
.btn-icon {
&.btn-default {
@ -37,6 +37,8 @@
}
}
html {
// html parent adds some additional specificity to override core styles
.nav-pills > li > a:not(.active):hover {
background: var(--tertiary-low);
color: var(--primary);
@ -73,6 +75,11 @@
}
}
div.menu-links-header button:hover,
div.menu-links-header button:focus {
background: var(--tertiary-high);
}
.menu-panel .panel-body-bottom .btn:hover {
.d-icon {
color: var(--primary);
@ -203,29 +210,18 @@ blockquote {
// Post controls
nav.post-controls {
// this is a bit tedious
a,
button {
.topic-admin-menu-button-container,
.timeline-controls {
.btn .d-icon {
// admin wrenches
color: var(--primary-medium);
.d-icon {
color: var(--primary-low-mid);
}
.discourse-no-touch & {
}
nav.post-controls {
.actions {
.double-button {
&:hover {
color: var(--secondary);
background: var(--primary-medium);
.d-icon {
color: var(--secondary);
}
}
}
&:focus {
background: var(--primary-medium);
}
}
.discourse-no-touch & {
.double-button:hover {
button {
background: var(--primary-medium);
color: var(--secondary);
@ -234,58 +230,101 @@ nav.post-controls {
}
&.has-like {
.d-icon {
color: var(--secondary);
color: var(--love-low);
}
}
}
}
}
button.bookmark.bookmarked.d-hover .d-icon {
color: var(--secondary);
}
.double-button button.button-count + .toggle-like.d-hover {
background: var(--primary-medium);
button {
&.like {
// Like button with 0 likes
&.d-hover {
background: var(--love-low);
.d-icon {
color: var(--love-low);
}
}
.discourse-no-touch & {
.double-button button.button-count.d-hover {
}
&.has-like {
// Like button after I've liked
.d-icon {
color: var(--love);
}
&.d-hover {
background: var(--primary-medium);
.d-icon {
color: var(--secondary);
}
}
}
&.button-count {
&.d-hover {
background: var(--primary-medium);
color: var(--secondary);
}
+ .toggle-like {
&.d-hover {
background: var(--primary-medium);
color: var(--secondary);
}
}
}
}
}
button.create {
color: var(--primary-high-or-secondary-low);
.d-icon {
color: var(--primary-low-mid);
color: var(--primary-high-or-secondary-low);
}
}
button {
&.d-hover,
&:focus,
&:active {
background: var(--primary-medium);
color: var(--secondary);
.d-icon {
color: var(--secondary);
}
}
&.delete.d-hover,
&.delete:hover,
&.delete:focus {
background: var(--danger);
color: var(--secondary);
.d-icon {
color: var(--secondary);
}
}
&.bookmark {
&.bookmarked {
.d-icon {
color: var(--tertiary);
}
&.d-hover {
.d-icon {
color: var(--tertiary-medium);
}
}
}
}
}
}
.show-replies {
color: var(--primary-medium);
&:hover,
&:focus {
color: var(--secondary);
background: var(--primary-medium);
.d-icon {
color: var(--secondary);
}
}
}
.actions a,
.actions button {
color: var(--primary-medium);
}
}
nav.post-controls
.actions
.double-button
button.button-count
+ .toggle-like.d-hover {
background: var(--primary-medium);
}
.topic-admin-menu-button-container,
.timeline-controls {
.btn .d-icon {
// admin wrenches
color: var(--primary-medium);
}
}
// Categories
@ -305,3 +344,4 @@ nav.post-controls
color: var(--secondary);
}
}
}