discourse/app/assets/stylesheets/wcag.scss
Penar Musaraj 5763309953
FEATURE: WCAG compliant color schemes (#10882)
Co-authored-by: Kris <kris.aubuchon@discourse.org>
2020-10-15 14:05:48 -04:00

308 lines
5.1 KiB
SCSS

// Overrides for WCAG color schemes only
// Global
::placeholder {
color: var(--primary-medium);
opacity: 1;
}
.discourse-no-touch {
.btn-default,
.btn-icon {
&.btn-default {
.d-icon {
color: var(--primary-medium);
}
}
&:hover,
&.btn-hover {
.d-icon {
color: var(--secondary);
}
}
}
.btn-primary .d-icon {
color: var(--secondary);
}
.btn-icon.ok,
.btn-icon.cancel,
.btn-danger {
.d-icon {
color: var(--secondary);
}
}
.btn-flat.delete.d-hover {
background: var(--danger);
}
}
.nav-pills > li > a:not(.active):hover {
background: var(--tertiary-low);
color: var(--primary);
}
// Composer
#reply-control .reply-to .reply-details .d-icon {
opacity: 1;
color: var(--primary-low-mid);
}
.d-editor-button-bar {
.btn-icon.btn-default .d-icon {
color: var(--primary-low-mid);
.discourse-no-touch & {
&:hover {
color: var(--secondary);
}
}
}
}
// Site header
.menu-panel li a.widget-link:hover,
.menu-panel li a.widget-link:focus,
.menu-panel li.heading a.widget-link:hover,
.menu-panel li.heading a.widget-link:focus {
color: var(--primary);
background-color: var(--highlight-medium);
.d-icon {
color: var(--primary);
}
}
.menu-panel .panel-body-bottom .btn:hover {
.d-icon {
color: var(--primary);
}
}
.d-header-icons .d-icon {
color: var(--primary-low-mid);
}
.d-header-icons .icon:hover .d-icon,
.d-header-icons .icon:focus .d-icon {
color: var(--primary-high);
}
.d-header-icons .unread-notifications {
background: var(--tertiary);
}
// Topic list
table th {
color: var(--primary-medium);
}
.coldmap {
&-high {
color: #6c77cc !important;
}
&-med {
color: #548eaa !important;
}
&-low {
color: #32a1a5 !important;
}
}
.heatmap-high,
.heatmap-high a {
color: #dc3249 !important;
}
.heatmap-med,
.heatmap-med a {
color: #ae5b54 !important;
}
.heatmap-low,
.heatmap-low a {
color: #8f6d5b !important;
}
.badge-notification {
background: var(--primary-medium);
}
.badge-notification.new-posts,
.badge-notification.unread-posts {
background: var(--tertiary);
}
.select-kit.dropdown-select-box.period-chooser
.period-chooser-header
h2.selected-name
.top-date-string,
.select-kit.dropdown-select-box.period-chooser
.period-chooser-row
.top-date-string {
color: var(--primary-high);
}
// Posts
.discourse-no-touch .topic-body .actions .fade-out {
opacity: 1;
}
.topic-body .reply-to-tab {
color: var(--primary-medium);
.d-icon {
color: var(--primary-low-mid);
}
}
.timeline-container .topic-timeline {
.timeline-scrollarea {
border-color: var(--primary-low-mid);
}
.timeline-handle {
background: var(--primary-low-mid);
}
}
.topic-map h4 {
color: var(--primary);
}
.quote-controls,
.quote-controls .d-icon {
color: var(--primary-medium);
}
blockquote {
a,
a:visited {
color: var(--tertiary);
}
}
.meta .d-icon + .filename,
.meta .informations {
color: var(--secondary);
}
#topic-footer-buttons .bookmark.bookmarked:hover .d-icon-bookmark {
color: var(--secondary);
}
.gap {
color: var(--primary-medium);
}
.badge-notification.clicks {
color: var(--primary-high);
}
.topic-map {
background: transparent;
}
// Post controls
nav.post-controls {
// this is a bit tedious
a,
button {
color: var(--primary-medium);
.d-icon {
color: var(--primary-low-mid);
}
.discourse-no-touch & {
&: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);
.d-icon {
color: var(--secondary);
}
&.has-like {
.d-icon {
color: var(--secondary);
}
}
}
}
}
button.bookmark.bookmarked.d-hover .d-icon {
color: var(--secondary);
}
.double-button button.button-count + .toggle-like.d-hover {
background: var(--primary-medium);
.d-icon {
color: var(--love-low);
}
}
.discourse-no-touch & {
.double-button button.button-count.d-hover {
background: var(--primary-medium);
color: var(--secondary);
}
}
button.create {
.d-icon {
color: var(--primary-low-mid);
}
&.d-hover {
color: var(--secondary);
.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
.list-cell,
.table-heading,
.category-list td,
.category-list th {
color: var(--primary-medium);
}
// Admin
.admin-controls {
.nav-pills > li > a:not(.active):hover {
background: var(--primary-medium);
color: var(--secondary);
}
}