mirror of
https://github.com/discourse/discourse.git
synced 2026-03-04 01:15:08 +08:00
f733e72176
Switching to our variables here makes this simpler and solves a couple button issues Before (no color change for state): <img width="100" alt="image" src="https://github.com/user-attachments/assets/6b536d7e-93ec-4b71-bbe9-2464aede4fae" /> After (correct color changes): <img width="100" alt="image" src="https://github.com/user-attachments/assets/190edc83-d500-4922-bc01-4951926b2ff6" />
374 lines
7.7 KiB
SCSS
374 lines
7.7 KiB
SCSS
// Overrides for WCAG color schemes only
|
|
|
|
// Global
|
|
::placeholder {
|
|
color: var(--primary-medium);
|
|
opacity: 1;
|
|
}
|
|
|
|
:root {
|
|
--bronze: #d38f42 !important;
|
|
}
|
|
|
|
html.discourse-no-touch {
|
|
.btn-default {
|
|
--d-button-default-icon-color: var(--primary-medium);
|
|
--d-button-default-icon-color--hover: var(--secondary);
|
|
}
|
|
|
|
.btn-primary {
|
|
--d-button-primary-icon-color: var(--secondary);
|
|
}
|
|
|
|
.btn-icon.ok,
|
|
.btn-icon.cancel,
|
|
.btn-danger:not(.btn-flat, .btn-transparent, .popup-menu-btn-danger) {
|
|
.d-icon {
|
|
color: var(--secondary);
|
|
}
|
|
}
|
|
|
|
.btn-flat.delete.d-hover,
|
|
.btn-flat.delete:hover {
|
|
background: var(--danger);
|
|
}
|
|
|
|
.select-kit.single-select .select-kit-header:focus {
|
|
border-color: var(--primary-medium);
|
|
}
|
|
}
|
|
|
|
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);
|
|
}
|
|
|
|
// 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);
|
|
}
|
|
}
|
|
}
|
|
|
|
.btn-icon:not(.btn-flat, .btn-danger, .btn-primary):focus {
|
|
.d-icon {
|
|
color: currentcolor;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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);
|
|
}
|
|
}
|
|
|
|
.d-header-icons .d-icon,
|
|
.header-sidebar-toggle button .d-icon {
|
|
color: var(--primary-low-mid);
|
|
}
|
|
|
|
.d-header-icons .unread-notifications {
|
|
background: var(--tertiary);
|
|
}
|
|
|
|
.extra-info-wrapper {
|
|
--header_primary-high: var(--header_primary);
|
|
}
|
|
|
|
// Topic list
|
|
table th {
|
|
color: var(--primary-high);
|
|
}
|
|
|
|
.heatmap-high,
|
|
.heatmap-high a,
|
|
.heatmap-med,
|
|
.heatmap-med a,
|
|
.heatmap-low,
|
|
.heatmap-low a {
|
|
color: var(--primary-medium) !important;
|
|
}
|
|
|
|
.badge-notification {
|
|
background: var(--primary-medium);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.topic-list .posters a:first-child .avatar.latest:not(.single) {
|
|
box-shadow: 0 0 0 2px var(--tertiary);
|
|
}
|
|
|
|
.topic-list .topic-list-item-separator .topic-list-data span {
|
|
color: var(--danger);
|
|
}
|
|
|
|
.discourse-tag.box {
|
|
background: var(--primary-very-low);
|
|
}
|
|
|
|
// 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);
|
|
}
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
a[data-clicks]::before,
|
|
a[data-clicks]::after {
|
|
color: var(--primary-high);
|
|
}
|
|
|
|
nav.post-controls {
|
|
.btn.btn-flat {
|
|
--d-post-control-icon-color: var(--primary-high);
|
|
}
|
|
}
|
|
|
|
// Categories
|
|
.table-heading,
|
|
.category-list td,
|
|
.category-list th {
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
.alert.alert-success a {
|
|
color: var(--primary);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.latest-topic-list .table-heading,
|
|
.top-topic-list .table-heading {
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
.latest-topic-list-item .topic-last-activity a,
|
|
.category-list .featured-topic a.last-posted-at,
|
|
.category-list .featured-topic a.last-posted-at:visited {
|
|
color: var(--primary-high-or-secondary-low);
|
|
}
|
|
|
|
.category-boxes .description {
|
|
color: var(--primary-med-or-secondary-med);
|
|
}
|
|
|
|
// User Preferences
|
|
.user-menu.revamped .quick-access-panel li.unread,
|
|
.user-menu.revamped .quick-access-panel li.pending {
|
|
background-color: var(--tertiary-very-low);
|
|
}
|
|
|
|
.user-main .deleted-posts {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.user-main .flags {
|
|
color: dark-light-choose($primary, $secondary);
|
|
}
|
|
|
|
.uploaded-file-preview .expand-overlay .file-uploader-lightbox-btn .d-icon {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.settings .setting .setting-value .uploaded-file-preview {
|
|
background-color: var(--primary-very-low);
|
|
}
|
|
|
|
// Notifications
|
|
.user-menu.revamped .tabs-list .btn .badge-notification {
|
|
background-color: dark-light-choose($tertiary-high, $tertiary);
|
|
}
|
|
|
|
.user-stream .notification.unread {
|
|
background-color: var(--tertiary-very-low);
|
|
}
|
|
|
|
.user-stream .time {
|
|
color: var(--primary-very-high);
|
|
}
|
|
|
|
// Admin Settings
|
|
.admin-controls {
|
|
.nav-pills > li > a:not(.active):hover {
|
|
background: var(--primary-medium);
|
|
color: var(--secondary);
|
|
}
|
|
}
|
|
|
|
.cooked mark,
|
|
.d-editor-preview mark {
|
|
background-color: yellow; // resets to browser default
|
|
}
|
|
|
|
.settings .setting.overridden h3::before {
|
|
background-color: var(--tertiary);
|
|
}
|
|
|
|
.admin-controls .controls {
|
|
background: var(--primary-very-low);
|
|
}
|
|
|
|
// Dashboard
|
|
.user-metrics .table-cell.user-basic .label,
|
|
.user-metrics .table-cell.user-member .label,
|
|
.user-metrics .table-cell.user-leader .label {
|
|
color: dark-light-choose($primary, $secondary);
|
|
}
|
|
|
|
.admin-contents.admin-plugins td.version .commit-hash {
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
.chat-notices__notice,
|
|
.chat-notices .chat-retention-reminder {
|
|
background-color: var(--tertiary-very-low);
|
|
}
|
|
|
|
// Review
|
|
.reviewable-item .reviewable-meta-data .created-at a {
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
.reviewable-item {
|
|
background: dark-light-choose($primary-very-low, $secondary-very-high);
|
|
}
|
|
|
|
.reviewable .status span.approved {
|
|
color: var(--success-hover);
|
|
}
|
|
}
|
|
|
|
// chat
|
|
.no-touch
|
|
.chat-messages-container
|
|
.chat-message:hover
|
|
.chat-message-react-btn:hover {
|
|
.d-icon {
|
|
color: var(--primary) !important;
|
|
}
|
|
}
|
|
|
|
// sidebar
|
|
.sidebar-wrapper
|
|
.sidebar-sections
|
|
.sidebar-section-link-suffix.icon.unread
|
|
svg {
|
|
color: var(--tertiary);
|
|
}
|
|
|
|
// Modernize Foundation Theme specific WCAG overrides
|
|
html.discourse-no-touch .uc-modernize-foundation-theme {
|
|
.btn-default {
|
|
.d-icon {
|
|
color: var(--d-button-default-icon-color);
|
|
}
|
|
|
|
&:hover,
|
|
&.btn-hover,
|
|
&:focus {
|
|
.d-icon {
|
|
color: var(--d-button-default-icon-color--hover);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Create topic button - ensure icon matches text color
|
|
#create-topic .d-icon {
|
|
color: var(--d-button-default-icon-color);
|
|
}
|
|
|
|
// Composer button bar icons should match the modernize theme
|
|
.d-editor-button-bar .btn-icon.btn-default .d-icon {
|
|
color: var(--d-button-default-icon-color);
|
|
|
|
&:hover {
|
|
color: var(--d-button-default-icon-color--hover);
|
|
}
|
|
}
|
|
}
|
|
|
|
html .uc-modernize-foundation-theme {
|
|
// Header icons with modernize theme colors
|
|
.d-header-icons .d-icon,
|
|
.header-sidebar-toggle button .d-icon {
|
|
color: var(--d-sidebar-link-icon-color);
|
|
}
|
|
|
|
// Topic list header consistency
|
|
table th {
|
|
color: var(--d-topic-list-header-text-color);
|
|
}
|
|
}
|
