feat: export complete Discourse themes ecosystem (16 themes, SCSS, JS components and color schemes)
This commit is contained in:
eldov
@@ -0,0 +1,470 @@
|
||||
/* ═══════════════════════════════════════════════════════════════
|
||||
ONYX — info-board.win
|
||||
Ultra-premium. Near-black. Violet + Cyan. Inspired by Linear.
|
||||
For the professional who demands perfection.
|
||||
═══════════════════════════════════════════════════════════════ */
|
||||
|
||||
.d-header,
|
||||
#main-outlet,
|
||||
html body {
|
||||
--ox-bg: #09090b;
|
||||
--ox-bg2: #0d0d10;
|
||||
--ox-surface: #18181b;
|
||||
--ox-surface2: #1f1f23;
|
||||
--ox-border: #27272a;
|
||||
--ox-border2: #1e1e21;
|
||||
--ox-fg: #fafafa;
|
||||
--ox-fg-dim: #a1a1aa;
|
||||
--ox-fg-muted: #71717a;
|
||||
--ox-violet: #8b5cf6;
|
||||
--ox-violet-dim: rgba(139,92,246,0.12);
|
||||
--ox-cyan: #06b6d4;
|
||||
--ox-cyan-dim: rgba(6,182,212,0.1);
|
||||
--ox-emerald: #10b981;
|
||||
--ox-amber: #f59e0b;
|
||||
--ox-rose: #f43f5e;
|
||||
--ox-pink: #f472b6;
|
||||
--ox-radius: 7px;
|
||||
--ox-radius-lg: 12px;
|
||||
--ox-t: 0.13s ease;
|
||||
}
|
||||
|
||||
/* ── LAYOUT ── */
|
||||
#main-outlet .wrap,
|
||||
.d-header .wrap {
|
||||
max-width: 1420px;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, "Inter", "SF Pro Text", "Segoe UI", system-ui, sans-serif;
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
letter-spacing: -0.005em;
|
||||
}
|
||||
|
||||
/* ── HEADER ── */
|
||||
.d-header {
|
||||
background: rgba(9,9,11,0.96) !important;
|
||||
border-bottom: 1px solid var(--ox-border) !important;
|
||||
box-shadow: 0 1px 0 rgba(255,255,255,0.04) !important;
|
||||
height: 60px;
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.d-header-icons .btn.icon,
|
||||
.d-header .icons .btn.icon {
|
||||
color: var(--ox-fg-muted) !important;
|
||||
border-radius: var(--ox-radius);
|
||||
transition: color var(--ox-t), background var(--ox-t);
|
||||
}
|
||||
|
||||
.d-header-icons .btn.icon:hover,
|
||||
.d-header .icons .btn.icon:hover {
|
||||
color: var(--ox-violet) !important;
|
||||
background: var(--ox-violet-dim) !important;
|
||||
}
|
||||
|
||||
/* ── NAV ── */
|
||||
.nav-pills .nav-item a {
|
||||
color: var(--ox-fg-muted) !important;
|
||||
border-radius: var(--ox-radius);
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
padding: 6px 14px;
|
||||
letter-spacing: -0.01em;
|
||||
transition: all var(--ox-t);
|
||||
}
|
||||
|
||||
.nav-pills .nav-item.active a,
|
||||
.nav-pills .nav-item a:hover {
|
||||
color: var(--ox-fg) !important;
|
||||
background: var(--ox-surface) !important;
|
||||
}
|
||||
|
||||
/* ── SIDEBAR ── */
|
||||
.sidebar-wrapper {
|
||||
background: var(--ox-bg) !important;
|
||||
border-right: 1px solid var(--ox-border) !important;
|
||||
}
|
||||
|
||||
.sidebar-sections .sidebar-section-header-wrapper button {
|
||||
color: var(--ox-fg-muted) !important;
|
||||
font-size: 0.65rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.sidebar-sections .sidebar-section-link-wrapper a {
|
||||
color: var(--ox-fg-dim) !important;
|
||||
border-radius: var(--ox-radius);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 450;
|
||||
padding: 6px 10px;
|
||||
letter-spacing: -0.01em;
|
||||
transition: all var(--ox-t);
|
||||
}
|
||||
|
||||
.sidebar-sections .sidebar-section-link-wrapper a:hover {
|
||||
color: var(--ox-fg) !important;
|
||||
background: var(--ox-surface) !important;
|
||||
}
|
||||
|
||||
.sidebar-sections .sidebar-section-link-wrapper a.active {
|
||||
color: var(--ox-violet) !important;
|
||||
background: var(--ox-violet-dim) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ── TOPIC LIST ── */
|
||||
.topic-list thead th {
|
||||
font-size: 0.68rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--ox-fg-muted) !important;
|
||||
border-bottom: 1px solid var(--ox-border) !important;
|
||||
background: transparent !important;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.topic-list tbody .topic-list-item {
|
||||
border-bottom: 1px solid var(--ox-border2) !important;
|
||||
transition: background var(--ox-t);
|
||||
}
|
||||
|
||||
.topic-list tbody .topic-list-item:hover {
|
||||
background: var(--ox-surface) !important;
|
||||
}
|
||||
|
||||
.topic-list .main-link a.title,
|
||||
.topic-list .link-top-line a.title {
|
||||
color: var(--ox-fg) !important;
|
||||
font-weight: 560;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.45;
|
||||
letter-spacing: -0.015em;
|
||||
transition: color var(--ox-t);
|
||||
}
|
||||
|
||||
.topic-list .main-link a.title:hover,
|
||||
.topic-list .link-top-line a.title:hover {
|
||||
color: var(--ox-violet) !important;
|
||||
}
|
||||
|
||||
.topic-list .link-bottom-line { margin-top: 5px; }
|
||||
|
||||
.topic-list .topic-excerpt {
|
||||
color: var(--ox-fg-muted) !important;
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.5;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.topic-list .num a,
|
||||
.topic-list .num { color: var(--ox-fg-muted) !important; font-size: 0.82rem; }
|
||||
|
||||
/* ── CATEGORY LIST ── */
|
||||
.category-list thead th {
|
||||
font-size: 0.68rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
color: var(--ox-fg-muted) !important;
|
||||
border-bottom: 1px solid var(--ox-border) !important;
|
||||
background: transparent !important;
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
.category-list tbody tr {
|
||||
border-bottom: 1px solid var(--ox-border2) !important;
|
||||
transition: background var(--ox-t);
|
||||
}
|
||||
|
||||
.category-list tbody tr:hover { background: var(--ox-surface) !important; }
|
||||
|
||||
.category-list td.category .category-name a {
|
||||
color: var(--ox-fg) !important;
|
||||
font-weight: 650;
|
||||
font-size: 0.95rem;
|
||||
letter-spacing: -0.01em;
|
||||
transition: color var(--ox-t);
|
||||
}
|
||||
|
||||
.category-list td.category .category-name a:hover { color: var(--ox-violet) !important; }
|
||||
|
||||
.category-list td.category .category-description,
|
||||
.category-list td.category p {
|
||||
color: var(--ox-fg-muted) !important;
|
||||
font-size: 0.81rem;
|
||||
margin-top: 4px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ── POST CONTENT ── */
|
||||
.cooked {
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.85;
|
||||
color: var(--ox-fg) !important;
|
||||
letter-spacing: -0.005em;
|
||||
}
|
||||
|
||||
.cooked p { margin: 0 0 1.1em; }
|
||||
|
||||
.cooked a {
|
||||
color: var(--ox-violet) !important;
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid rgba(139,92,246,0.3);
|
||||
transition: border-color var(--ox-t);
|
||||
}
|
||||
|
||||
.cooked a:hover { border-bottom-color: var(--ox-violet); }
|
||||
|
||||
.cooked h1, .cooked h2, .cooked h3,
|
||||
.cooked h4, .cooked h5, .cooked h6 {
|
||||
font-weight: 700;
|
||||
line-height: 1.28;
|
||||
margin: 1.8em 0 0.65em;
|
||||
padding-bottom: 9px;
|
||||
border-bottom: 1px solid var(--ox-border);
|
||||
letter-spacing: -0.025em;
|
||||
}
|
||||
|
||||
.cooked h1 { font-size: 1.65rem; color: var(--ox-fg) !important; font-weight: 800; }
|
||||
.cooked h2 { font-size: 1.3rem; color: var(--ox-fg) !important; }
|
||||
.cooked h3 { font-size: 1.08rem; color: var(--ox-violet) !important; }
|
||||
.cooked h4 { font-size: 0.95rem; color: var(--ox-cyan) !important; border-bottom: none; }
|
||||
.cooked h5, .cooked h6 { font-size: 0.875rem; color: var(--ox-fg-dim) !important; border-bottom: none; }
|
||||
|
||||
.cooked code:not(pre code) {
|
||||
background: var(--ox-surface2) !important;
|
||||
color: var(--ox-cyan) !important;
|
||||
border: 1px solid var(--ox-border) !important;
|
||||
border-radius: 5px;
|
||||
font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;
|
||||
font-size: 0.83em;
|
||||
padding: 2px 7px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.cooked pre {
|
||||
background: var(--ox-bg2) !important;
|
||||
border: 1px solid var(--ox-border) !important;
|
||||
border-left: 4px solid var(--ox-violet) !important;
|
||||
border-radius: 0 var(--ox-radius) var(--ox-radius) 0;
|
||||
padding: 20px 22px;
|
||||
margin: 18px 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.cooked pre code {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
padding: 0 !important;
|
||||
color: var(--ox-emerald) !important;
|
||||
font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.72;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.cooked blockquote {
|
||||
border-left: 4px solid var(--ox-violet) !important;
|
||||
background: var(--ox-violet-dim) !important;
|
||||
border-radius: 0 var(--ox-radius) var(--ox-radius) 0;
|
||||
padding: 14px 20px;
|
||||
margin: 18px 0;
|
||||
color: var(--ox-fg-dim) !important;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.cooked blockquote p { margin: 0; }
|
||||
|
||||
.cooked ul, .cooked ol { padding-left: 1.5em; margin: 0.8em 0; }
|
||||
.cooked li { margin: 0.4em 0; }
|
||||
|
||||
.cooked table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
margin: 18px 0;
|
||||
border: 1px solid var(--ox-border);
|
||||
border-radius: var(--ox-radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cooked table th {
|
||||
background: var(--ox-surface) !important;
|
||||
color: var(--ox-fg-dim) !important;
|
||||
font-size: 0.74rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.07em;
|
||||
padding: 11px 16px;
|
||||
border-bottom: 1px solid var(--ox-border) !important;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.cooked table td {
|
||||
padding: 10px 16px;
|
||||
border-bottom: 1px solid var(--ox-border2) !important;
|
||||
color: var(--ox-fg-dim) !important;
|
||||
}
|
||||
|
||||
.cooked table tr:last-child td { border-bottom: none !important; }
|
||||
.cooked table tr:nth-child(even) td { background: rgba(24,24,27,0.6) !important; }
|
||||
|
||||
.cooked hr { border: none; border-top: 1px solid var(--ox-border); margin: 24px 0; }
|
||||
|
||||
/* ── TOPIC TITLE ── */
|
||||
.fancy-title, #topic-title h1, .title-wrapper h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 800;
|
||||
line-height: 1.28;
|
||||
letter-spacing: -0.03em;
|
||||
color: var(--ox-fg) !important;
|
||||
}
|
||||
|
||||
/* ── BUTTONS ── */
|
||||
.btn {
|
||||
border-radius: var(--ox-radius) !important;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
letter-spacing: -0.01em;
|
||||
transition: all var(--ox-t);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--ox-violet) !important;
|
||||
color: #fff !important;
|
||||
border: none !important;
|
||||
box-shadow: 0 2px 8px rgba(139,92,246,0.3);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #9d6ef8 !important;
|
||||
box-shadow: 0 4px 18px rgba(139,92,246,0.45) !important;
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
background: var(--ox-surface) !important;
|
||||
border: 1px solid var(--ox-border) !important;
|
||||
color: var(--ox-fg-dim) !important;
|
||||
}
|
||||
|
||||
.btn-default:hover {
|
||||
background: var(--ox-surface2) !important;
|
||||
border-color: var(--ox-fg-muted) !important;
|
||||
color: var(--ox-fg) !important;
|
||||
}
|
||||
|
||||
/* ── POST ACTIONS ── */
|
||||
.post-controls .actions .btn {
|
||||
color: var(--ox-fg-muted) !important;
|
||||
background: transparent !important;
|
||||
border-radius: var(--ox-radius) !important;
|
||||
padding: 5px 10px;
|
||||
font-size: 0.82rem;
|
||||
transition: all var(--ox-t);
|
||||
}
|
||||
|
||||
.post-controls .actions .btn:hover {
|
||||
color: var(--ox-fg-dim) !important;
|
||||
background: var(--ox-surface) !important;
|
||||
}
|
||||
|
||||
.post-controls .actions .btn.like-button.has-like .d-icon { color: var(--ox-rose) !important; }
|
||||
|
||||
/* ── TAGS ── */
|
||||
.discourse-tag {
|
||||
background: var(--ox-surface2) !important;
|
||||
color: var(--ox-fg-dim) !important;
|
||||
border: 1px solid var(--ox-border) !important;
|
||||
border-radius: 5px !important;
|
||||
font-size: 0.71rem;
|
||||
font-weight: 600;
|
||||
padding: 3px 9px !important;
|
||||
letter-spacing: 0.01em;
|
||||
transition: all var(--ox-t);
|
||||
}
|
||||
|
||||
.discourse-tag:hover {
|
||||
background: var(--ox-violet-dim) !important;
|
||||
color: var(--ox-violet) !important;
|
||||
border-color: rgba(139,92,246,0.3) !important;
|
||||
}
|
||||
|
||||
/* ── BADGE ── */
|
||||
.badge-notification {
|
||||
background: var(--ox-violet) !important;
|
||||
color: #fff !important;
|
||||
border-radius: 8px;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
padding: 2px 7px;
|
||||
}
|
||||
|
||||
/* ── COMPOSER ── */
|
||||
.d-editor-textarea-wrapper {
|
||||
border-radius: var(--ox-radius) !important;
|
||||
border-color: var(--ox-border) !important;
|
||||
background: var(--ox-surface) !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.d-editor-input {
|
||||
font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace !important;
|
||||
font-size: 0.9rem !important;
|
||||
line-height: 1.65 !important;
|
||||
letter-spacing: 0 !important;
|
||||
}
|
||||
|
||||
.d-editor-preview { background: var(--ox-bg2) !important; border-left: 1px solid var(--ox-border) !important; }
|
||||
|
||||
/* ── INPUTS ── */
|
||||
input[type="text"], input[type="email"],
|
||||
input[type="password"], textarea, select {
|
||||
border-radius: var(--ox-radius) !important;
|
||||
padding: 8px 12px !important;
|
||||
border-color: var(--ox-border) !important;
|
||||
background: var(--ox-surface) !important;
|
||||
color: var(--ox-fg) !important;
|
||||
transition: border-color var(--ox-t), box-shadow var(--ox-t);
|
||||
}
|
||||
|
||||
input:focus, textarea:focus, select:focus {
|
||||
border-color: var(--ox-violet) !important;
|
||||
box-shadow: 0 0 0 3px rgba(139,92,246,0.12) !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/* ── USER CARD ── */
|
||||
.user-card, .group-card {
|
||||
border-radius: var(--ox-radius-lg) !important;
|
||||
box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 0 1px var(--ox-border) !important;
|
||||
}
|
||||
|
||||
/* ── NOTIFICATIONS ── */
|
||||
.notification.unread { background: rgba(139,92,246,0.06) !important; border-left: 2px solid var(--ox-violet) !important; }
|
||||
|
||||
/* ── STATUS ICONS ── */
|
||||
.topic-status .d-icon-thumbtack { color: var(--ox-amber) !important; }
|
||||
.topic-status .d-icon-lock { color: var(--ox-fg-muted) !important; }
|
||||
|
||||
/* ── SCROLLBAR ── */
|
||||
::-webkit-scrollbar { width: 5px; height: 5px; }
|
||||
::-webkit-scrollbar-track { background: var(--ox-bg); }
|
||||
::-webkit-scrollbar-thumb { background: var(--ox-border); border-radius: 3px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--ox-fg-muted); }
|
||||
|
||||
/* ── RESPONSIVE ── */
|
||||
@media (max-width: 1100px) { #main-outlet .wrap, .d-header .wrap { padding: 0 20px; } }
|
||||
@media (max-width: 768px) {
|
||||
body { font-size: 14px; letter-spacing: 0; }
|
||||
.fancy-title, #topic-title h1 { font-size: 1.2rem; }
|
||||
.cooked { font-size: 0.9rem; }
|
||||
#main-outlet .wrap, .d-header .wrap { padding: 0 14px; }
|
||||
}
|
||||
Reference in New Issue
Block a user