toggles for inline rename/edit forms (dashboard.html,
categories.html) — plain text-muted with list-style:none gave no visual
signal they expand into a form. Suppress the native marker (list-style
alone doesn't fully hide it in every browser) and draw our own chevron
that flips when open, in the link color instead of muted gray. */
summary.disclosure-toggle { cursor: pointer; list-style: none; color: var(--bs-primary); }
summary.disclosure-toggle::-webkit-details-marker { display: none; }
summary.disclosure-toggle::before { content: "▸ "; display: inline-block; }
summary.disclosure-toggle:hover { text-decoration: underline; }
details[open] > summary.disclosure-toggle::before { content: "▾ "; }
[data-bs-theme="dark"] summary.disclosure-toggle { color: #818cf8; }
/* Bootstrap's stock btn-outline-warning (#ffc107 on white) is ~1.5:1 —
effectively invisible. Same amber already used for .badge.bg-warning. */
.btn-outline-warning { border-color: #854d0e; color: #854d0e; }
.btn-outline-warning:hover { background: #854d0e; color: #fff; border-color: #854d0e; }
/* Subtle filled variant — replaces hardcoded style="background-color:#e9ecef" */
.btn-tinted { background-color: #e9ecef; }
[data-bs-theme="dark"] .btn-tinted { background-color: #1e293b; }
/* ── Section labels (idiom page) ─────────────────────────────────────────── */
.section-label {
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--bs-secondary-color);
margin-bottom: .6rem;
}
/* ── Prose (long-form text) ──────────────────────────────────────────────── */
.prose {
line-height: 1.8;
color: #3f3f46;
max-width: 70ch;
}
.prose > :last-child { margin-bottom: 0; }
/* Guide pages — full-width prose (overrides the 70ch idiom default) */
.guide-prose { max-width: none; }
.guide-prose table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.guide-prose th, .guide-prose td { padding: .4rem .75rem; border: 1px solid #dee2e6; }
.guide-prose th { background: #f8f9fa; font-weight: 600; }
.guide-prose h2 { margin-top: 2rem; }
.guide-prose hr { margin: 2rem 0; }
[data-bs-theme="dark"] .guide-prose th { background: #162032; border-color: #334155; }
[data-bs-theme="dark"] .guide-prose td { border-color: #334155; }
/* ── Comment body (rendered HTML from mistune) ───────────────────────────── */
.comment-body {
line-height: 1.7;
color: #3f3f46;
}
.comment-body > :last-child { margin-bottom: 0; }
.comment-body blockquote {
background: #f8f9fa;
border-left: 4px solid #adb5bd;
border-radius: 0 .25rem .25rem 0;
padding: .5rem .75rem;
margin: .25rem 0 .75rem;
color: #495057;
font-style: italic;
}
.comment-body blockquote > :last-child { margin-bottom: 0; }
/* ── Code blocks (public view) ───────────────────────────────────────────── */
pre { margin: 0; }
pre code.hljs {
font-family: var(--bs-font-monospace);
font-size: .84rem;
line-height: 1.6;
border-radius: 0;
padding: 1.1rem 1.25rem;
}
.code-card pre:last-child code.hljs {
border-bottom-left-radius: calc(var(--radius) - 1px);
border-bottom-right-radius: calc(var(--radius) - 1px);
}
/* ── CodeMirror (admin editor) ───────────────────────────────────────────── */
.CodeMirror {
height: auto;
min-height: 180px;
font-family: var(--bs-font-monospace);
font-size: .85rem;
line-height: 1.55;
border-radius: var(--radius);
border: 1px solid var(--bs-border-color);
}
/* ── Tables (admin) ──────────────────────────────────────────────────────── */
.table {
background: #fff;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
border: 1px solid var(--bs-border-color);
}
.table thead th {
font-size: .75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--bs-secondary-color);
background: #faf9f6;
border-bottom-width: 1px;
}
.table tbody tr:hover td { background: #faf9f6; }
/* Bootstrap's stock light-mode table-secondary (#e2e3e5) sits only ~1.1:1
from this same page's own row-hover tone (#faf9f6 blended with the
generic 7.5% black hover overlay) — a hovered ordinary row and a
*resting* deleted row were nearly indistinguishable. Give it its own
clearly darker shade, same reasoning as the dark-mode variant colors. */
.table-secondary { --bs-table-bg: #c5c6c9; --bs-table-hover-bg: #b6b7ba; --bs-table-color: #33373b; --bs-table-hover-color: #33373b; }
/* Same .text-muted-doesn't-adapt issue as the dark-mode fix above, and the
same reason a plain `color: inherit` alone doesn't work: Bootstrap marks
.text-muted's color !important, so overriding it needs !important too. */
.table-secondary .text-muted { color: inherit !important; }
/* ── Breadcrumb ──────────────────────────────────────────────────────────── */
.breadcrumb { font-size: .85rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--bs-secondary-color); }
/* ── Category checklist ─────────────────────────────────────────────────── */
.category-checklist .form-check { padding-top: .2rem; padding-bottom: .2rem; }
/* ── OAuth buttons ───────────────────────────────────────────────────────── */
.btn-oauth {
display: flex;
align-items: center;
justify-content: center;
gap: .6rem;
padding: .55rem 1rem;
font-size: .9rem;
font-weight: 500;
border-radius: var(--radius);
border: 1px solid var(--bs-border-color);
text-decoration: none;
transition: filter .15s;
}
.btn-oauth:hover { filter: brightness(.95); }
.btn-oauth-google { background: #fff; color: #3c4043; border-color: #dadce0; }
.btn-oauth-github { background: #24292e; color: #fff; border-color: #24292e; }
.oauth-icon { width: 18px; height: 18px; flex-shrink: 0; }
/* ── Auth divider ────────────────────────────────────────────────────────── */
.auth-divider {
display: flex;
align-items: center;
gap: .75rem;
color: var(--bs-secondary-color);
font-size: .8rem;
}
.auth-divider::before,
.auth-divider::after { content: ''; flex: 1; border-top: 1px solid var(--bs-border-color); }
/* ── Navbar username ─────────────────────────────────────────────────────── */
.navbar-username {
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: .875rem;
}
/* ── Footer ──────────────────────────────────────────────────────────────── */
footer { background: var(--bs-body-bg); }
/* ── Dark mode ───────────────────────────────────────────────────────────── */
[data-bs-theme="dark"] {
--bs-body-bg: #0f172a;
--bs-body-color: #e2e8f0;
--bs-secondary-color: #94a3b8;
--bs-border-color: #334155;
--bs-card-border-color: #334155;
--bs-link-color: #818cf8;
--bs-link-color-rgb: 129, 140, 248;
--bs-link-hover-color: #a5b4fc;
--bs-code-color: #e685b5;
--shadow-sm: 0 1px 2px rgba(0,0,0,.4);
--shadow: 0 2px 8px rgba(0,0,0,.5);
}
[data-bs-theme="dark"] .card { background: #1e293b; }
[data-bs-theme="dark"] .list-group-item { background: #1e293b; border-color: #334155; }
[data-bs-theme="dark"] .list-group-item-action:hover { background: #283548; }
[data-bs-theme="dark"] .list-group-item h5 a,
[data-bs-theme="dark"] .list-group-item-action h5 { color: var(--bs-link-color); }
[data-bs-theme="dark"] .prose { color: #cbd5e1; }
[data-bs-theme="dark"] .prose p,
[data-bs-theme="dark"] .prose li,
[data-bs-theme="dark"] .prose td { color: #cbd5e1; }
[data-bs-theme="dark"] .comment-body { color: #cbd5e1; }
[data-bs-theme="dark"] .comment-body blockquote {
background: #162032; border-color: #475569; color: #94a3b8;
}
[data-bs-theme="dark"] .table { background: #1e293b; border-color: #334155; }
[data-bs-theme="dark"] .table thead th { background: #162032 !important; border-color: #334155; }
[data-bs-theme="dark"] .table tbody tr:hover td { background: #253347; }
[data-bs-theme="dark"] .table-light, [data-bs-theme="dark"] .table-light th { background: #162032 !important; }
[data-bs-theme="dark"] .table td, [data-bs-theme="dark"] .table th { border-color: #334155; color: #e2e8f0; }
/* Bootstrap's table-variant classes set --bs-table-bg/--bs-table-color, which
each cell reads individually (background-color: var(--bs-table-bg)) — a
plain background-color override on .table-success itself doesn't reach the
| , only overriding these same custom properties does. */
[data-bs-theme="dark"] .table-success { --bs-table-bg: #14532d; --bs-table-color: #bbf7d0; --bs-table-border-color: #1e6b3a; }
[data-bs-theme="dark"] .table-warning { --bs-table-bg: #78350f; --bs-table-color: #fde68a; --bs-table-border-color: #92400e; }
[data-bs-theme="dark"] .table-secondary { --bs-table-bg: #3f3f46; --bs-table-color: #d4d4d8; --bs-table-border-color: #52525b; }
/* .text-muted's fixed --bs-secondary-color doesn't adapt to sit on top of
these variant backgrounds — fall back to the cell's own (already correct)
color instead of the generic muted gray. */
[data-bs-theme="dark"] .table-success .text-muted,
[data-bs-theme="dark"] .table-warning .text-muted,
[data-bs-theme="dark"] .table-secondary .text-muted { color: inherit !important; opacity: .8; }
/* Bootstrap 5.3's actual table-hover paint isn't background-color at all —
it's `box-shadow: inset 0 0 0 9999px var(--bs-table-hover-bg)` on
`tr:hover > *`, a separate custom property from --bs-table-bg above.
Light mode already ships a sensible --bs-table-hover-bg per variant
(Bootstrap's own default, e.g. #e2e3e5 for table-secondary) — leave that
alone. Dark mode has no such default for these custom colors, so hovering
fell back to the page's plain hover tint, wiping out the variant entirely.
Give dark mode its own hover shade — a step lighter than the base, not
identical to it, so hovering still reads as "this row responded" instead
of feeling inert next to every other (still-interactive) row. */
[data-bs-theme="dark"] .table-success { --bs-table-hover-bg: #1c6b3a; --bs-table-hover-color: #bbf7d0; }
[data-bs-theme="dark"] .table-warning { --bs-table-hover-bg: #8a4014; --bs-table-hover-color: #fde68a; }
[data-bs-theme="dark"] .table-secondary { --bs-table-hover-bg: #4b4b54; --bs-table-hover-color: #d4d4d8; }
[data-bs-theme="dark"] .badge.bg-primary { background: #312e81 !important; color: #c7d2fe !important; }
[data-bs-theme="dark"] .badge.bg-secondary { background: #3f3f46 !important; color: #d4d4d8 !important; }
[data-bs-theme="dark"] .badge.bg-success { background: #14532d !important; color: #bbf7d0 !important; }
[data-bs-theme="dark"] .badge.bg-warning { background: #78350f !important; color: #fde68a !important; }
[data-bs-theme="dark"] .activity-created { color: #bbf7d0; }
[data-bs-theme="dark"] .activity-deleted { color: #fca5a5; }
[data-bs-theme="dark"] .btn-outline-secondary { border-color: #475569; color: #94a3b8; }
[data-bs-theme="dark"] .btn-outline-secondary:hover { background: #334155; color: #e2e8f0; border-color: #64748b; }
[data-bs-theme="dark"] .btn-outline-warning { border-color: #fde68a; color: #fde68a; }
[data-bs-theme="dark"] .btn-outline-warning:hover { background: #fde68a; color: #1a1d22; border-color: #fde68a; }
[data-bs-theme="dark"] .btn-oauth-google { background: #1e293b; color: #e2e8f0; border-color: #334155; }
/* ── Diff page ───────────────────────────────────────────────────────────── */
.diff-add { background: #d4edda; color: #155724; }
.diff-remove { background: #f8d7da; color: #721c24; }
.diff-header { background: #e9ecef; color: #5c646b; font-style: italic; }
.diff-line { font-family: var(--bs-font-monospace); font-size: .82rem;
white-space: pre-wrap; word-break: break-all;
padding: .1rem .5rem; display: block; }
.diff-line::before { display: inline-block; width: 1.2rem; }
.diff-add .diff-line::before { content: "+ "; }
.diff-remove .diff-line::before { content: "− "; }
.diff-header .diff-line::before { content: " "; }
.diff-context .diff-line::before { content: " "; }
.diff-example-add { background: #d4edda; font-size: .82rem; }
.diff-example-remove { background: #f8d7da; font-size: .82rem; }
/* Character-level highlight within a changed line/value, GitHub-PR style */
.diff-char-remove, .diff-char-add { border-radius: 2px; padding: 0 1px; color: inherit; }
.diff-char-remove { background: #f1948a; text-decoration: line-through; }
.diff-char-add { background: #7dcea0; text-decoration: underline; }
[data-bs-theme="dark"] .diff-add { background: #14532d; color: #bbf7d0; }
[data-bs-theme="dark"] .diff-remove { background: #7f1d1d; color: #fecaca; }
[data-bs-theme="dark"] .diff-header { background: #1e293b; color: #94a3b8; }
[data-bs-theme="dark"] .diff-context { background: transparent; }
[data-bs-theme="dark"] .diff-example-add { background: #14532d; }
[data-bs-theme="dark"] .diff-example-remove { background: #7f1d1d; }
[data-bs-theme="dark"] .diff-char-remove { background: #b91c1c; }
[data-bs-theme="dark"] .diff-char-add { background: #15803d; }
/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state {
text-align: center;
padding: 5rem 1rem;
color: var(--bs-secondary-color);
}
.empty-state h2 { font-size: 1.25rem; font-weight: 500; margin-bottom: .5rem; }
.empty-state p { font-size: .95rem; margin-bottom: 1.5rem; }
|