Easier on my eyes. Less eye strain.
Stylus theme.
/* ==UserStyle==
@name resource.dopus.com — Coffee Palette (clean)
@namespace github.com/openstyles/stylus
@version 2.0.0
@description Coffee-themed recolor for resource.dopus.com (latte base, mocha accents)
@author pt + cleanup
==/UserStyle== */
@-moz-document domain("resource.dopus.com") {
/* =========================
PALETTE / TOKENS (edit me)
========================= */
:root{
/* Core */
--primary: #2e1c18; /* main text (espresso) */
--secondary: #b49578; /* page bg (latte) */
--tertiary: #c69a72; /* links/buttons (caramel) */
--tertiary-hover: #b58661; /* hover caramel */
--quaternary: #8c6f56; /* mocha accent */
/* Header */
--header_background: #8c6f56; /* mocha header */
--header_primary: #fdf6ec; /* cream header text */
/* Surfaces */
--very-low: #cbb297; /* light panel */
--low: #a48366; /* borders/lines */
--hover: #967359; /* row hover */
/* Status / highlight */
--highlight-bg: #e8d0a9;
/* Code */
--code-bg: #6d4c41; /* block bg (mocha) */
--code-fg: #ffcc80; /* text (warm yellow) */
--code-chip-bg: #8d6e63; /* inline code chip */
--code-chip-fg: #ffd966;
/* Shadows */
--shadow-card: 0 2px 8px rgba(46,28,24,.18);
--shadow-header: 0 2px 4px -1px rgba(46,28,24,.25);
}
/* ==============
BASE ELEMENTS
============== */
html, body{
background: var(--secondary);
color: var(--primary);
}
a{ color: var(--tertiary); }
a:hover{ color: var(--tertiary-hover); }
/* =========
HEADER UI
========= */
.d-header{
background: var(--header_background) !important;
color: var(--header_primary) !important;
box-shadow: var(--shadow-header) !important;
}
.d-header .panel{ background: transparent !important; border: 0 !important; box-shadow:none !important; }
.d-header .header-buttons .btn{
background: transparent !important; border: 0 !important; box-shadow:none !important;
color: var(--header_primary) !important; padding:.25em !important; margin:0 .15em !important;
}
.d-header .header-buttons .btn svg{ fill: var(--header_primary) !important; stroke:none !important; }
.d-header .header-buttons .btn:hover{ background: rgba(255,255,255,.08) !important; border-radius:4px !important; }
/* ======
BANNER
====== */
#banner{
background: var(--quaternary) !important;
color: var(--header_primary) !important;
border: 1px solid #6d4c41 !important;
box-shadow: none !important;
}
#banner a{ color:#ffe0b2 !important; }
#banner a:hover{ color:#ffcc80 !important; }
/* If you want it gone, uncomment: */
/* #banner{ display:none !important; } */
/* =========
LIST VIEWS
========= */
.topic-list .topic-list-item{ border-bottom: 1px solid var(--low) !important; }
.topic-list .topic-list-item:hover{ background: var(--hover) !important; }
/* Replies / Views / Activity — plain black, normal weight */
.topic-list td.num,
.topic-list td.views,
.topic-list td.activity,
.topic-list td.num *,
.topic-list td.views *,
.topic-list td.activity *,
.heatmap-high, .heatmap-med, .heatmap-low,
.new-posts, .unread, .muted, .badge-posts, .badge-posts .new,
.post-activity, .age {
color:#000 !important;
font-weight: normal !important;
opacity: 1 !important;
text-shadow:none !important;
}
/* Optional: align and width hints */
.topic-list th,
.topic-list td.num,
.topic-list td.views,
.topic-list td.activity { text-align:right !important; }
.topic-list td.num{ width:5rem !important; }
.topic-list td.views{ width:6rem !important; }
.topic-list td.activity{ width:5rem !important; }
/* Nav pills and list controls */
.navigation-container .nav-pills li a{
background: transparent !important; box-shadow:none !important; color: var(--primary) !important;
}
.navigation-container .nav-pills li.active a{
background: transparent !important; border-bottom:3px solid var(--tertiary) !important; border-radius:0 !important;
}
.list-controls .combo-box .btn,
.list-controls .dropdown-select-box .btn{
background: transparent !important; color: var(--primary) !important;
border: 1px solid var(--low) !important; box-shadow:none !important;
}
.list-controls .combo-box .btn:hover{ background: var(--very-low) !important; }
/* “last visit” separator — subtle line */
.topic-list .separator{ background: transparent !important; border-bottom:1px solid var(--low) !important; box-shadow:none !important; }
.topic-list .separator span{ background: transparent !important; color: #694b3e !important; }
/* =====
TAGS
===== */
.discourse-tags a.discourse-tag,
a.discourse-tag,
span.discourse-tag,
.discourse-tag.box,
.discourse-tag.simple,
.topic-list .badge,
.topic-list .badge-wrapper,
.topic-list .badge-category,
.topic-list .badge-notification{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: var(--primary) !important;
text-decoration: none !important;
}
/* ===========
COMPONENTS
=========== */
.modal-inner-container,
.menu-panel,
.dropdown-menu,
.composer, .composer-container,
.card, .panel, .boxed, .topic-map, .post-stream .topic-post{
background: var(--secondary) !important;
color: var(--primary) !important;
box-shadow: var(--shadow-card) !important;
}
/* Buttons */
.btn, .btn-primary, .btn-default, .badge-notification{
background: var(--tertiary) !important;
color: #fff !important;
border: 1px solid var(--tertiary-hover) !important;
box-shadow: none !important;
}
.btn:hover, .btn-primary:hover{ background: var(--tertiary-hover) !important; }
/* Inputs */
input[type="text"], input[type="search"], textarea,
.d-editor-input, .select-kit .select-kit-header, .search-menu .search-input{
background: #d9c2a8 !important;
color: var(--primary) !important;
border: 1px solid var(--low) !important;
}
input::placeholder, textarea::placeholder{ color:#6d4c41 !important; }
/* ========
CODE UI
======== */
pre, pre code{
background: var(--code-bg) !important;
color: var(--code-fg) !important;
border: 1px solid #5d4037 !important;
border-radius: 6px !important;
padding: 0.75em 1em !important;
font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
line-height: 1.4 !important;
overflow-x: auto;
}
code:not(pre code){
background: var(--code-chip-bg) !important;
color: var(--code-chip-fg) !important;
border-radius: 4px !important;
padding: .12em .35em !important;
font-size: .95em !important;
}
/* Selection */
::selection{ background: var(--highlight-bg); color: #000; }
/* === Fixes for table headers and separators === */
/* Column headers → black, normal */
.topic-list thead th {
color: #000 !important;
font-weight: normal !important;
opacity: 1 !important;
}
/* Kill Discourse “muted/visited” fade */
.topic-list a.title,
.topic-list a.title.visited,
.topic-list a.title.muted,
.topic-list .topic-list-item .title {
color: var(--primary) !important; /* espresso dark text */
font-weight: normal !important;
opacity: 1 !important;
}
/* “last visit” separator → mocha line instead of red */
.topic-list .separator {
border-bottom: 1px solid var(--low) !important;
background: transparent !important;
box-shadow: none !important;
}
.topic-list .separator span {
color: var(--primary-medium) !important; /* muted espresso */
background: transparent !important;
font-weight: normal !important;
}
/* If you’d rather hide it entirely: */
/* .topic-list .separator { display:none !important; } */
/* === Fix embedded/quote cards === */
/* Topic link/quote previews */
.onebox,
blockquote,
.embedded-posts,
.topic-embed {
background: var(--secondary) !important; /* latte base */
border: 1px solid var(--primary-low) !important; /* soft mocha border */
color: var(--primary) !important;
border-radius: 6px !important;
padding: 0.75em 1em !important;
box-shadow: none !important;
}
/* Title inside onebox */
.onebox .onebox-title,
.onebox .source {
color: var(--primary-very-high) !important; /* espresso */
font-weight: 600 !important;
}
/* Description text */
.onebox .onebox-body,
.onebox .onebox-description {
color: var(--primary) !important; /* normal espresso text */
font-weight: normal !important;
}
/* Tiny category/tag chips inside onebox */
.onebox .badge-category,
.onebox .discourse-tag {
background: transparent !important;
border: none !important;
color: var(--primary-medium) !important;
font-weight: normal !important;
}
/* === QUOTES / QUOTED POST CARDS ===================================== */
/* Whole quote card */
.cooked .quote, /* quoted-post widget */
blockquote { /* Markdown > blockquotes */
background: var(--secondary) !important; /* latte */
border: 1px solid var(--low) !important; /* mocha line */
border-radius: 8px !important;
box-shadow: none !important;
padding: .6rem .8rem !important;
}
/* Kill the white title strip inside Discourse quote widget */
.cooked .quote .title,
.cooked .quote .title a {
background: transparent !important;
color: var(--primary) !important;
border: 0 !important;
font-weight: 600 !important;
}
/* Inner content text */
.cooked .quote .contents {
color: var(--primary) !important;
}
/* Quote controls (little reply/bookmark icons in the header) */
.cooked .quote .quote-controls .widget-button {
background: transparent !important;
color: var(--primary) !important;
border: 1px solid var(--low) !important;
border-radius: 6px !important;
}
.cooked .quote .quote-controls .widget-button:hover {
background: var(--very-low) !important;
}
/* Markdown blockquote left bar (keep subtle) */
.cooked blockquote {
border-left: 4px solid var(--low) !important;
padding-left: .9rem !important;
}
/* === TIMELINE (right rail) ========================================== */
.timeline-container,
.timeline-controls { background: transparent !important; }
.timeline-container .timeline-handle {
background: #e0c2a5 !important; /* caramel handle */
border: 1px solid var(--low) !important;
box-shadow: none !important;
}
.timeline-container .timeline-ago,
.timeline-container .timeline-date,
.timeline-container .start-date,
.timeline-container .now-date {
color: var(--primary) !important; /* espresso text */
opacity: 1 !important;
}
.timeline-container .timeline-scrollarea,
.timeline-container .timeline {
background: transparent !important;
border-left: 2px solid var(--low) !important; /* subtle mocha spine */
}
/* Buttons under the timeline (back/reload/notify) */
.timeline-container .widget-button {
background: transparent !important;
color: var(--primary) !important;
border: 1px solid var(--low) !important;
border-radius: 6px !important;
}
.timeline-container .widget-button:hover {
background: var(--very-low) !important;
}
/* === POST ACTION BUTTONS (Like / Link / Flag / Reply) ================= */
/* Default state – transparent, espresso icons/text */
.post-controls .actions .widget-button,
.post-controls .actions .widget-button .d-icon {
background: transparent !important;
color: var(--primary) !important; /* espresso text */
border: none !important;
box-shadow: none !important;
font-weight: normal !important;
}
/* Hover state – faint latte background + caramel accent */
.post-controls .actions .widget-button:hover {
background: var(--primary-very-low) !important; /* light cream */
color: var(--tertiary) !important; /* caramel */
border-radius: 4px !important;
}
/* Reply button – slightly stronger (mocha bg + cream text) */
.post-controls .actions .reply {
background: var(--tertiary) !important; /* caramel mocha */
color: #fffbe9 !important; /* light cream text */
border-radius: 6px !important;
padding: 0.3em 0.8em !important;
font-weight: 600 !important;
}
.post-controls .actions .reply:hover {
background: var(--tertiary-hover) !important;
color: #fff !important;
}
/* === Topic-map (views / likes / users strip) ======================= */
.topic-map, /* container */
.topic-map .map,
.topic-map .map-collapsable {
background: transparent !important;
border: 1px solid var(--low) !important; /* subtle mocha line */
border-left: 0 !important;
border-right: 0 !important;
box-shadow: none !important;
}
/* Buttons: “views”, “likes”, “users” — remove beige boxes */
.topic-map .buttons .button,
.topic-map .buttons .btn {
background: transparent !important;
color: var(--primary) !important; /* espresso text */
border: 1px solid var(--low) !important;
box-shadow: none !important;
border-radius: 6px !important;
}
.topic-map .buttons .button:hover,
.topic-map .buttons .btn:hover {
background: var(--very-low) !important; /* light latte on hover */
color: var(--tertiary) !important; /* caramel accent */
}
/* Avatars row – keep clean */
.topic-map .avatars { background: transparent !important; }
/* Right-side meta (“5 min”, “read”, dates) — make readable espresso */
.topic-map .topic-info,
.topic-map .secondary,
.topic-map .secondary a,
.topic-map time,
.post-info time,
.relative-date,
.discourse-local-date,
.post-date {
color: var(--primary) !important;
opacity: 1 !important;
}
/* Like count chip next to the heart — flatten */
.post-controls .actions .like-count,
.post-controls .actions .button-count,
.post-controls .actions .toggle-like .count {
background: transparent !important;
border: 1px solid var(--low) !important;
color: var(--primary) !important;
border-radius: 6px !important;
box-shadow: none !important;
}
.post-controls .actions .like-count:hover,
.post-controls .actions .button-count:hover {
background: var(--very-low) !important;
}
/* === Fix Topic-map metric chips (views / likes / links / users) === */
.topic-map .buttons .button,
.topic-map .buttons .btn,
.topic-map .buttons .btn-link,
.topic-map .buttons .btn-text {
background: transparent !important;
border: none !important;
box-shadow: none !important;
color: var(--primary) !important; /* espresso text */
font-weight: normal !important;
padding: 0 .4em !important;
text-transform: none !important;
}
/* Hover: subtle caramel underline */
.topic-map .buttons .button:hover,
.topic-map .buttons .btn:hover,
.topic-map .buttons .btn-link:hover,
.topic-map .buttons .btn-text:hover {
background: transparent !important;
color: var(--tertiary) !important; /* caramel highlight */
text-decoration: underline !important;
}
/* === Overrides: category text === */
.category-description span,
.category-support .badge-category__name {
color: #000 !important;
font-weight: normal !important;
opacity: 1 !important;
text-shadow: none !important;
}
/* === Hard override: Topic titles === */
a.title,
a.title:link,
a.title:visited,
a.title:active,
a.title:hover,
a.title:focus {
color: #000 !important;
font-weight: normal !important;
opacity: 1 !important;
text-shadow: none !important;
}
/* === Hard override: Category badge names === */
.badge-category__name,
.badge-category__name a,
.badge-category__name:visited,
.badge-category__name:hover,
.badge-category__name:focus {
color: #000 !important;
font-weight: normal !important;
opacity: 1 !important;
text-shadow: none !important;
}
/* === Hard override: Topic list column headers === */
.topic-list thead th,
.topic-list thead th.topics,
.topic-list thead th.posts,
.topic-list thead th.views,
.topic-list thead th.activity {
color: #000 !important;
font-weight: normal !important;
opacity: 1 !important;
text-shadow: none !important;
}
/* === Hard override: numeric counters (posts/views/activity) === */
.topic-list .value,
.topic-list .value *,
.topic-list td.num,
.topic-list td.num *,
.topic-list td.views,
.topic-list td.views *,
.topic-list td.activity,
.topic-list td.activity * {
color: #000 !important;
font-weight: normal !important;
opacity: 1 !important;
text-shadow: none !important;
}
/* === Hard override: breadcrumb + category nav links === */
.breadcrumb a,
.breadcrumb a:visited,
.breadcrumb a:hover,
.breadcrumb a:active,
.category-breadcrumb a,
.category-breadcrumb a:visited,
.category-breadcrumb a:hover,
.category-breadcrumb a:active {
color: #000 !important;
font-weight: normal !important;
opacity: 1 !important;
text-shadow: none !important;
}
/* === Hard override: user group links === */
a.user-group.trigger-group-card,
a.user-group.trigger-group-card:visited,
a.user-group.trigger-group-card:hover,
a.user-group.trigger-group-card:active {
color: #000 !important;
font-weight: normal !important;
opacity: 1 !important;
text-shadow: none !important;
}
/* === Hard override: poster icon + Opus Pro badge === */
.poster-icon.directoryopus-link-poster-pro,
.poster-icon.directoryopus-link-poster-pro * {
color: #000 !important;
opacity: 1 !important;
text-shadow: none !important;
}
/* === Hard override: button labels + muted text === */
/* Button labels (e.g. Reply, Like, Flag) */
.d-button-label {
color: #000 !important;
opacity: 1 !important;
text-shadow: none !important;
font-weight: normal !important;
}
/* Muted gray body text */
span.text,
.text {
color: #000 !important;
opacity: 1 !important;
text-shadow: none !important;
font-weight: normal !important;
}
/* === Overrides: numbers, stat labels, usernames === */
span.number {
color: #000 !important;
font-weight: normal !important;
opacity: 1 !important;
text-shadow: none !important;
}
.topic-map__stat-label {
color: #000 !important;
opacity: 1 !important;
text-shadow: none !important;
font-weight: normal !important;
}
a.username,
a.username:visited,
a.username:hover,
a.username:active {
color: #000 !important;
opacity: 1 !important;
text-shadow: none !important;
font-weight: normal !important;
}
/* === Hard override: .value counters === */
span.value,
.value,
.value * {
color: #000 !important;
opacity: 1 !important;
text-shadow: none !important;
font-weight: normal !important;
}
/* === Hard override: Categories heading === */
#categories-only-category {
color: #000 !important;
opacity: 1 !important;
text-shadow: none !important;
font-weight: normal !important;
}
/* === Hard override: .name spans (category names, labels) === */
span.name,
.name {
color: #000 !important;
opacity: 1 !important;
text-shadow: none !important;
font-weight: normal !important;
}
/* === Match category dropdown header to New Topic button === */
.select-kit-header.single-select-header.combo-box-header.category-drop-header {
background: var(--tertiary) !important; /* same as New Topic button */
color: #fff !important; /* cream text */
border: 1px solid var(--tertiary-hover) !important;
border-radius: 4px !important;
box-shadow: none !important;
font-weight: normal !important;
}
.select-kit-header.single-select-header.combo-box-header.category-drop-header:hover {
background: var(--tertiary-hover) !important;
color: #fff !important;
}
/* === Match dropdown headers to New Topic button === */
.select-kit-header.single-select-header.combo-box-header.category-drop-header,
.select-kit-header.single-select-header.combo-box-header.tag-drop-header {
background: var(--tertiary) !important; /* caramel background */
color: #fff !important; /* cream text */
border: 1px solid var(--tertiary-hover) !important;
border-radius: 4px !important;
box-shadow: none !important;
font-weight: normal !important;
}
.select-kit-header.single-select-header.combo-box-header.category-drop-header:hover,
.select-kit-header.single-select-header.combo-box-header.tag-drop-header:hover {
background: var(--tertiary-hover) !important;
color: #fff !important;
}
/* === Hard override: usernames === */
a[data-user-card],
a.username,
a[data-user-card]:visited,
a[data-user-card]:hover,
a[data-user-card]:active {
color: #000 !important;
font-weight: normal !important;
opacity: 1 !important;
text-shadow: none !important;
}
/* === Hard override: timegap notices (e.g. "2 months later") === */
.small-action-desc.timegap {
color: #000 !important;
opacity: 1 !important;
text-shadow: none !important;
font-weight: normal !important;
}
/* === Hard override: generic resize button === */
button[aria-label="Resize"] {
background: #000 !important;
border: 1px solid #000 !important;
width: 1.2em !important;
height: 1.2em !important;
border-radius: 3px !important;
}
/* === Global black text overrides via CSS variables === */
:root {
--primary: #000 !important;
--primary-medium: #000 !important;
--primary-high: #000 !important;
--primary-very-high: #000 !important;
--header_primary: #000 !important;
--tag-text-color: #000 !important;
--d-post-control-text-color: #000 !important;
--d-post-control-text-color--hover: #000 !important;
--d-post-create-text-color: #000 !important;
--d-post-create-text-color--hover: #000 !important;
}
/* === Hard override: plain span text like "Synchronizing labels" === */
span[data-label-id] {
color: #000 !important;
opacity: 1 !important;
text-shadow: none !important;
font-weight: normal !important;
}
/* === Global override: force all greys to pure black === */
:root {
--gray-0: #000 !important;
--gray-1: #000 !important;
--gray-2: #000 !important;
--gray-3: #000 !important;
--gray-4: #000 !important;
--gray-5: #000 !important;
--gray-6: #000 !important;
--gray-7: #000 !important;
--gray-8: #000 !important;
--gray-9: #000 !important;
--gray-10: #000 !important;
}
:root {
--primary-med-or-secondary-med: #000 !important;
}
:root {
--d-button-flat-icon-color: #000 !important;
}
a { color: var(--tertiary) !important; } /* caramel */
a:hover { color: var(--tertiary-hover) !important; }
a {
color: var(--code-fg) !important; /* warm yellow */
}
a:hover {
color: #2e1c18 !important; /* brighter yellow on hover */
}
.cooked h1,
.cooked h2,
.cooked h3,
.cooked h4,
.cooked h5,
.cooked h6,
.d-editor-preview h1,
.d-editor-preview h2,
.d-editor-preview h3,
.d-editor-preview h4,
.d-editor-preview h5,
.d-editor-preview h6 {
color: var(--heading-color) !important;
}
} /* end @-moz-document */