/* ========================================================================
CzG UI Registry — showcase styling
Tři themes: auto (default, sleduje OS), light (force), dark (force).
Theme se ukládá v localStorage 'czg-ui-theme'.
Aplikace přes data-theme atribut na :
→ @media (prefers-color-scheme)
→ light vars
→ dark vars
======================================================================== */
/* Light defaults */
:root {
--bg-page: #fafafa;
--bg-surface: #ffffff;
--bg-surface-2: #f3f4f6;
--bg-surface-3: #f9fafb;
--bg-code: #1e293b;
--bg-code-text: #e2e8f0;
--bg-cmd: #0f172a;
--bg-overlay: rgba(0, 0, 0, 0.5);
--text-primary: #1f2937;
--text-muted: #6b7280;
--text-faint: #9ca3af;
--text-inverse: #ffffff;
--border: #e5e7eb;
--border-strong: #d1d5db;
--accent: #2563eb;
--accent-hover: #1d4ed8;
--accent-soft: #dbeafe;
--accent-text: #1e40af;
--success: #10b981;
--success-soft: #d1fae5;
--success-text: #065f46;
--warning: #f59e0b;
--warning-soft: #fef3c7;
--warning-text: #92400e;
--error: #ef4444;
--error-soft: #fee2e2;
--error-text: #991b1b;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.08);
}
/* Force dark via [data-theme="dark"] */
[data-theme="dark"] {
--bg-page: #0f172a;
--bg-surface: #1e293b;
--bg-surface-2: #334155;
--bg-surface-3: #1e293b;
--bg-code: #020617;
--bg-code-text: #cbd5e1;
--bg-cmd: #020617;
--text-primary: #f1f5f9;
--text-muted: #94a3b8;
--text-faint: #64748b;
--border: #334155;
--border-strong: #475569;
--accent: #60a5fa;
--accent-hover: #93c5fd;
--accent-soft: #1e3a8a;
--accent-text: #93c5fd;
--success: #34d399;
--success-soft: #064e3b;
--success-text: #6ee7b7;
--warning: #fbbf24;
--warning-soft: #78350f;
--warning-text: #fde68a;
--error: #f87171;
--error-soft: #7f1d1d;
--error-text: #fca5a5;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.4);
}
/* Auto mode — sleduje OS preference */
@media (prefers-color-scheme: dark) {
[data-theme="auto"] {
--bg-page: #0f172a;
--bg-surface: #1e293b;
--bg-surface-2: #334155;
--bg-surface-3: #1e293b;
--bg-code: #020617;
--bg-code-text: #cbd5e1;
--bg-cmd: #020617;
--text-primary: #f1f5f9;
--text-muted: #94a3b8;
--text-faint: #64748b;
--border: #334155;
--border-strong: #475569;
--accent: #60a5fa;
--accent-hover: #93c5fd;
--accent-soft: #1e3a8a;
--accent-text: #93c5fd;
--success: #34d399;
--success-soft: #064e3b;
--success-text: #6ee7b7;
--warning: #fbbf24;
--warning-soft: #78350f;
--warning-text: #fde68a;
--error: #f87171;
--error-soft: #7f1d1d;
--error-text: #fca5a5;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 6px 18px rgba(0, 0, 0, 0.4);
}
}
* { box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
margin: 0;
color: var(--text-primary);
background: var(--bg-page);
line-height: 1.5;
}
.topbar {
background: var(--bg-surface);
border-bottom: 1px solid var(--border);
padding: 12px 24px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 10;
}
.topbar__logo {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 500;
font-size: 1.05em;
color: var(--accent-text);
text-decoration: none;
transition: opacity 0.15s;
}
.topbar__logo:hover { opacity: 0.85; }
.topbar__logo strong {
color: var(--accent);
font-weight: 700;
}
.topbar__logo-icon {
display: block;
width: 32px;
height: 32px;
flex-shrink: 0;
}
.topbar__nav {
display: flex;
gap: 16px;
align-items: center;
}
.topbar__nav a {
color: var(--text-muted);
text-decoration: none;
}
.topbar__nav a:hover { color: var(--accent); }
.topbar__badge {
font-size: 0.8em;
background: var(--warning-soft);
color: var(--warning-text);
padding: 2px 8px;
border-radius: 10px;
font-weight: 600;
}
.topbar__user {
font-size: 0.85em;
color: var(--text-muted);
padding: 2px 8px;
background: var(--bg-surface-2);
border-radius: 10px;
}
.topbar__logout {
color: var(--error) !important;
font-size: 0.9em;
}
.topbar__logout:hover { text-decoration: underline; }
.theme-toggle {
background: transparent;
border: 1px solid var(--border);
color: var(--text-muted);
padding: 4px 10px;
border-radius: 14px;
font-size: 0.8em;
cursor: pointer;
font-family: inherit;
display: inline-flex;
align-items: center;
gap: 6px;
}
.theme-toggle:hover {
border-color: var(--accent);
color: var(--accent);
}
.theme-toggle__icon { font-size: 1em; line-height: 1; }
.main {
max-width: 1200px;
margin: 0 auto;
padding: 32px 24px;
}
.hero { margin-bottom: 32px; }
.hero h1 { margin: 0 0 8px; font-size: 1.8em; color: var(--accent-text); }
.hero p { margin: 0; color: var(--text-muted); }
.hero code {
background: var(--bg-surface-2);
color: var(--text-primary);
padding: 2px 6px;
border-radius: 4px;
font-size: 0.9em;
}
/* ─── Filters (clean compact layout) ──────────────────────────────────── */
.filters {
display: flex;
flex-direction: column;
gap: 14px;
margin: 0 0 28px;
padding: 18px 20px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 10px;
}
.filters__top {
display: flex;
gap: 12px;
align-items: stretch;
flex-wrap: wrap;
}
.filters__search {
flex: 1;
min-width: 240px;
display: flex;
align-items: center;
gap: 8px;
background: var(--bg-surface-2);
border: 1px solid var(--border);
border-radius: 8px;
padding: 0 12px;
transition: border-color 0.15s, background 0.15s;
}
.filters__search:focus-within {
border-color: var(--accent);
background: var(--bg-surface);
}
.filters__search-icon { color: var(--text-faint); flex-shrink: 0; }
.filters__search-input {
flex: 1;
height: 40px;
border: none;
background: transparent;
color: var(--text-primary);
font-size: 0.95em;
outline: none;
min-width: 0;
padding: 0;
}
.filters__search-input::placeholder { color: var(--text-faint); }
.filters__search-clear {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
font-size: 1.4em;
line-height: 1;
color: var(--text-muted);
text-decoration: none;
border-radius: 50%;
transition: background 0.15s;
}
.filters__search-clear:hover { background: var(--bg-surface-2); color: var(--text-primary); }
.filters__sort { display: inline-flex; align-items: center; }
.filters__sort-select {
height: 40px;
padding: 0 32px 0 14px;
background: var(--bg-surface-2) url("data:image/svg+xml;utf8,") no-repeat right 12px center;
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text-primary);
font-size: 0.9em;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: border-color 0.15s;
}
.filters__sort-select:hover,
.filters__sort-select:focus { border-color: var(--accent); outline: none; }
.filters__chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.filters__tags {
border-top: 1px dashed var(--border);
padding-top: 12px;
}
.filters__tags-summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
font-size: 0.85em;
color: var(--text-muted);
user-select: none;
list-style: none;
}
.filters__tags-summary::-webkit-details-marker { display: none; }
.filters__tags-summary::before {
content: '▸';
display: inline-block;
transition: transform 0.15s;
color: var(--text-faint);
}
.filters__tags[open] .filters__tags-summary::before { transform: rotate(90deg); }
.filters__tags-summary:hover { color: var(--accent); }
.filters__tags-active {
display: inline-flex;
align-items: center;
padding: 2px 8px;
background: var(--accent-soft);
color: var(--accent-text);
border-radius: 10px;
font-size: 0.85em;
}
.filters__tags-count { color: var(--text-faint); font-size: 0.85em; }
.filters__chips--tags { margin-top: 10px; gap: 5px; }
.filters__status {
font-size: 0.82em;
color: var(--text-muted);
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
border-top: 1px dashed var(--border);
padding-top: 12px;
}
.filters__status strong { color: var(--text-primary); font-weight: 600; }
.filters__clear {
margin-left: auto;
color: var(--accent);
text-decoration: none;
font-size: 0.95em;
}
.filters__clear:hover { text-decoration: underline; }
/* Chip — base */
.filter-chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--bg-surface-2);
border: 1px solid transparent;
padding: 4px 11px;
border-radius: 14px;
font-size: 0.85em;
text-decoration: none;
color: var(--text-muted);
transition: all 0.12s;
}
.filter-chip:hover {
background: var(--bg-surface);
border-color: var(--accent);
color: var(--accent);
}
.filter-chip--active {
background: var(--accent);
color: var(--text-inverse);
border-color: var(--accent);
}
.filter-chip--active:hover {
background: var(--accent-hover);
color: var(--text-inverse);
}
.filter-chip--tag {
font-size: 0.78em;
padding: 2px 9px;
background: transparent;
border: 1px solid var(--border);
}
.filter-chip--tag-clear {
font-size: 0.78em;
padding: 2px 9px;
background: var(--accent-soft);
color: var(--accent-text);
border: 1px solid var(--accent);
}
.filter-chip--tag-clear:hover { background: var(--accent); color: var(--text-inverse); }
.filter-chip__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
padding: 0 4px;
font-size: 0.82em;
font-weight: 500;
background: rgba(0, 0, 0, 0.06);
color: var(--text-muted);
border-radius: 9px;
line-height: 1.5;
}
[data-theme="dark"] .filter-chip__count,
[data-theme="auto"] .filter-chip__count { background: rgba(255, 255, 255, 0.08); }
@media (prefers-color-scheme: dark) {
[data-theme="auto"] .filter-chip__count { background: rgba(255, 255, 255, 0.08); }
}
.filter-chip--active .filter-chip__count {
background: rgba(255, 255, 255, 0.22);
color: var(--text-inverse);
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
}
.card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: box-shadow 0.15s, transform 0.15s;
}
.card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.card__thumb {
height: 110px;
background: linear-gradient(135deg, var(--bg-surface-2) 0%, var(--bg-surface-3) 100%);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-faint);
font-size: 0.85em;
overflow: hidden;
}
.card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 12px 16px; }
.card__title {
margin: 0 0 4px;
font-size: 1.05em;
color: var(--text-primary);
font-family: "SF Mono", Monaco, Consolas, monospace;
}
.card__desc {
margin: 0 0 8px;
font-size: 0.85em;
color: var(--text-muted);
min-height: 2.6em;
}
.card__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag {
display: inline-block;
padding: 2px 8px;
border-radius: 10px;
font-size: 0.75em;
font-weight: 600;
background: var(--accent-soft);
color: var(--accent-text);
}
.tag--stable { background: var(--success-soft); color: var(--success-text); }
.tag--beta { background: var(--warning-soft); color: var(--warning-text); }
.tag--deprecated { background: var(--error-soft); color: var(--error-text); }
.tag--ghost { background: var(--bg-surface-2); color: var(--text-muted); }
.empty { color: var(--text-faint); text-align: center; padding: 60px 20px; }
.back-link {
display: inline-block;
margin-bottom: 16px;
color: var(--accent);
text-decoration: none;
font-size: 0.9em;
}
.comp-head {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 20px 24px;
margin-bottom: 16px;
display: flex;
gap: 16px;
align-items: flex-start;
flex-wrap: wrap;
}
.comp-head h1 {
margin: 0 0 4px;
font-family: "SF Mono", Monaco, monospace;
color: var(--accent-text);
}
.comp-head__desc { margin: 0 0 8px; color: var(--text-muted); }
.comp-head__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.install-cmd {
margin-left: auto;
background: var(--bg-cmd);
color: var(--bg-code-text);
padding: 8px 14px;
border-radius: 6px;
font-family: "SF Mono", monospace;
font-size: 0.9em;
}
.tabs {
background: var(--bg-surface);
border: 1px solid var(--border);
border-bottom: none;
border-radius: 8px 8px 0 0;
padding: 0 16px;
display: flex;
gap: 0;
}
.tab {
background: none;
border: none;
padding: 12px 16px;
cursor: pointer;
border-bottom: 2px solid transparent;
color: var(--text-muted);
font-size: 0.95em;
}
.tab:hover { color: var(--accent); }
.tab--active {
color: var(--accent);
border-bottom-color: var(--accent);
font-weight: 600;
}
.tab-content {
display: none;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 0 0 8px 8px;
padding: 24px;
}
.tab-content--active { display: block; }
.preview-mock {
background: linear-gradient(135deg, var(--bg-surface-3) 0%, var(--bg-surface-2) 100%);
border: 2px dashed var(--border-strong);
border-radius: 8px;
padding: 60px 20px;
text-align: center;
}
.preview-mock__placeholder { color: var(--text-muted); font-size: 1.1em; }
.preview-image {
max-width: 100%;
border: 1px solid var(--border);
border-radius: 6px;
display: block;
margin: 0 auto;
}
.preview-iframe {
width: 100%;
min-height: 420px;
border: 1px solid var(--border);
border-radius: 6px;
background: white; /* Iframe content stays light — komponenta sama je light-themed */
}
.preview-note {
color: var(--text-faint);
font-size: 0.85em;
text-align: center;
margin-top: 8px;
}
.preview-source {
margin-top: 16px;
border: 1px solid var(--border);
border-radius: 6px;
}
.preview-source summary {
padding: 8px 14px;
background: var(--bg-surface-3);
cursor: pointer;
font-size: 0.9em;
}
.src-file {
margin-bottom: 12px;
border: 1px solid var(--border);
border-radius: 6px;
overflow: hidden;
}
.src-file summary {
background: var(--bg-surface-3);
padding: 10px 16px;
cursor: pointer;
font-family: "SF Mono", monospace;
font-size: 0.88em;
color: var(--text-muted);
}
.src-file pre {
margin: 0;
background: var(--bg-code);
color: var(--bg-code-text);
padding: 16px;
font-size: 0.85em;
overflow-x: auto;
line-height: 1.5;
}
.tab-content h3 { margin-top: 20px; color: var(--accent-text); }
.tab-content h3:first-child { margin-top: 0; }
.cmd {
background: var(--bg-cmd);
color: var(--bg-code-text);
padding: 12px 16px;
border-radius: 6px;
font-family: "SF Mono", monospace;
}
.steps, .file-list, .dep-list { padding-left: 24px; }
.steps li, .file-list li, .dep-list li { margin: 4px 0; }
.file-list code, .dep-list code {
background: var(--bg-surface-2);
padding: 2px 8px;
border-radius: 4px;
font-size: 0.88em;
}
.dim { color: var(--text-faint); }
.footer {
text-align: center;
color: var(--text-faint);
font-size: 0.85em;
padding: 40px 20px;
}
.error { text-align: center; padding: 80px 20px; }
.error h1 { color: var(--error); }
.landing {
text-align: center;
padding: 80px 20px;
max-width: 560px;
margin: 0 auto;
}
.landing h1 { color: var(--accent-text); margin-bottom: 16px; }
.landing p { color: var(--text-muted); margin-bottom: 24px; }
.landing__hint { font-size: 0.9em; color: var(--text-faint); margin-top: 32px; }
.landing__hint code {
background: var(--bg-surface-2);
color: var(--text-primary);
padding: 2px 6px;
border-radius: 4px;
}
.btn--primary {
display: inline-block;
background: var(--accent);
color: var(--text-inverse);
padding: 12px 24px;
border-radius: 4px;
text-decoration: none;
font-weight: 600;
}
.btn--primary:hover { background: var(--accent-hover); }
.btn--lg { padding: 14px 28px; font-size: 1.05em; }
/* ─── Copy buttons ─────────────────────────────────────────────────────── */
.copy-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: var(--bg-surface-2);
color: var(--text-muted);
border: 1px solid var(--border);
border-radius: 6px;
font-size: 0.85em;
cursor: pointer;
transition: all 0.15s;
}
.copy-btn:hover { color: var(--accent); border-color: var(--accent); }
.copy-btn--success { background: #16a34a; color: #fff; border-color: #16a34a; }
.copy-btn--small { padding: 4px 8px; font-size: 0.8em; }
.copy-btn__label { white-space: nowrap; }
.install-cmd {
display: flex;
align-items: center;
gap: 8px;
background: var(--bg-cmd);
color: var(--bg-code-text);
padding: 8px 8px 8px 16px;
border-radius: 6px;
font-family: ui-monospace, monospace;
font-size: 0.9em;
}
.install-cmd code { background: none; color: inherit; padding: 0; }
.install-cmd .copy-btn {
background: rgba(255, 255, 255, 0.1);
color: var(--bg-code-text);
border-color: rgba(255, 255, 255, 0.15);
}
.install-cmd .copy-btn:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.3); }
.cmd-with-copy {
display: flex;
align-items: stretch;
gap: 8px;
}
.cmd-with-copy .cmd { flex: 1; margin: 0; }
/* ─── Preview toolbar ──────────────────────────────────────────────────── */
.preview-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 8px 12px;
background: var(--bg-surface-2);
border: 1px solid var(--border);
border-bottom: none;
border-radius: 6px 6px 0 0;
flex-wrap: wrap;
}
.preview-toolbar__group {
display: flex;
gap: 4px;
background: var(--bg-surface);
padding: 4px;
border-radius: 6px;
border: 1px solid var(--border);
}
.preview-tool {
background: transparent;
border: none;
padding: 4px 10px;
border-radius: 4px;
font-size: 1em;
cursor: pointer;
transition: background 0.15s;
}
.preview-tool:hover { background: var(--bg-surface-2); }
.preview-tool--active { background: var(--accent); color: var(--text-inverse); }
.preview-tool--active:hover { background: var(--accent); }
.preview-frame-wrap {
margin: 0 auto;
transition: max-width 0.25s ease;
border: 1px solid var(--border);
border-top: none;
border-radius: 0 0 6px 6px;
overflow: hidden;
}
.preview-frame-wrap--constrained { box-shadow: 0 0 0 8px var(--bg-surface-2); }
.preview-frame-wrap .preview-iframe {
display: block;
width: 100%;
border: none;
}
/* ─── Markdown content ─────────────────────────────────────────────────── */
.md-content {
max-width: 800px;
color: var(--text-primary);
line-height: 1.65;
}
.md-content h1, .md-content h2, .md-content h3, .md-content h4 {
margin-top: 1.6em;
margin-bottom: 0.5em;
color: var(--text-primary);
}
.md-content h1 { font-size: 1.6em; border-bottom: 1px solid var(--border); padding-bottom: 0.3em; }
.md-content h2 { font-size: 1.3em; }
.md-content h3 { font-size: 1.1em; }
.md-content p { margin: 0 0 1em; }
.md-content ul, .md-content ol { margin: 0 0 1em 1.5em; }
.md-content li { margin-bottom: 0.3em; }
.md-content a { color: var(--accent); }
.md-content code {
background: var(--bg-surface-2);
padding: 2px 6px;
border-radius: 3px;
font-size: 0.9em;
}
.md-content pre.md-code {
background: var(--bg-code);
color: var(--bg-code-text);
padding: 14px 18px;
border-radius: 6px;
overflow-x: auto;
font-size: 0.85em;
margin: 1em 0;
}
.md-content pre.md-code code { background: none; color: inherit; padding: 0; }
.md-content blockquote {
border-left: 3px solid var(--accent);
margin: 1em 0;
padding: 4px 16px;
color: var(--text-muted);
background: var(--bg-surface-2);
border-radius: 0 4px 4px 0;
}
.md-content hr { border: none; border-top: 1px solid var(--border); margin: 2em 0; }
.md-content .md-table {
border-collapse: collapse;
width: 100%;
margin: 1em 0;
font-size: 0.9em;
}
.md-content .md-table th,
.md-content .md-table td {
border: 1px solid var(--border);
padding: 6px 12px;
text-align: left;
}
.md-content .md-table th { background: var(--bg-surface-2); font-weight: 600; }
/* ─── Related components ───────────────────────────────────────────────── */
.related-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
margin: 12px 0;
}
.related-card {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 6px;
text-decoration: none;
color: var(--text-primary);
transition: border-color 0.15s, transform 0.15s;
}
.related-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.related-card strong { color: var(--text-primary); }
.related-card small { color: var(--text-muted); font-size: 0.85em; }
/* ─── Versions list ────────────────────────────────────────────────────── */
.version-list {
list-style: none;
padding: 0;
margin: 12px 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.version-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text-primary);
text-decoration: none;
font-family: ui-monospace, monospace;
transition: border-color 0.15s;
}
.version-link:hover { border-color: var(--accent); }
.version-link--active { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }
.version-link small { font-weight: normal; opacity: 0.75; }
/* ─── Source file summary with copy ────────────────────────────────────── */
.src-file > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
/* ─── Preview source + tab content overflow ────────────────────────────── */
/* Fix: dlouhé řádky v přepisují parent layout pokud parent
nemá explicit min-width: 0 (flex/grid item default min-width: auto). */
main.main, .tab-content { min-width: 0; }
.preview-source {
max-width: 100%;
overflow: hidden;
}
.preview-source pre {
max-width: 100%;
width: 100%;
box-sizing: border-box;
margin: 0;
background: var(--bg-code);
color: var(--bg-code-text);
padding: 14px 18px;
font-size: 0.85em;
line-height: 1.5;
white-space: pre-wrap !important;
word-break: break-word;
overflow-wrap: anywhere;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.preview-source code { white-space: inherit; word-break: inherit; }
.tab-content pre {
max-width: 100%;
box-sizing: border-box;
white-space: pre-wrap !important;
word-break: break-word;
overflow-wrap: anywhere;
}
.src-file pre { max-width: 100%; box-sizing: border-box; }
/* ─── Recent updates ───────────────────────────────────────────────────── */
.recent {
margin: 0 0 24px;
padding: 12px 16px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 8px;
}
.recent__title {
font-size: 0.95em;
font-weight: 600;
margin: 0 0 10px;
color: var(--text-muted);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.recent__list {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.recent__item {
display: inline-flex;
align-items: baseline;
gap: 8px;
padding: 6px 12px;
background: var(--bg-surface-2);
border: 1px solid var(--border);
border-radius: 6px;
text-decoration: none;
color: var(--text-primary);
transition: border-color 0.15s, transform 0.15s;
}
.recent__item:hover { border-color: var(--accent); transform: translateY(-1px); }
.recent__item small { color: var(--text-muted); font-size: 0.78em; }
.recent__time {
color: var(--text-faint);
font-size: 0.78em;
font-variant-numeric: tabular-nums;
}
/* ─── Deprecated badge + card overlay ──────────────────────────────────── */
.tag--deprecated {
background: var(--error-soft);
color: var(--error-text);
border: 1px solid var(--error);
}
.card--deprecated {
opacity: 0.7;
position: relative;
}
.card--deprecated::after {
content: 'DEPRECATED';
position: absolute;
top: 8px;
right: 8px;
padding: 3px 8px;
background: var(--error);
color: #fff;
font-size: 0.65em;
font-weight: 700;
letter-spacing: 0.05em;
border-radius: 3px;
z-index: 2;
}
.card--deprecated:hover { opacity: 1; }
/* ─── Source sub-tabs (per language) ───────────────────────────────────── */
.lang-tabs {
display: inline-flex;
gap: 4px;
margin-bottom: 18px;
padding: 4px;
background: var(--bg-surface-2);
border-radius: 8px;
}
.lang-tab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: transparent;
border: none;
border-radius: 6px;
font: inherit;
font-size: 0.9em;
font-weight: 600;
color: var(--text-muted);
cursor: pointer;
white-space: nowrap;
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.lang-tab:hover { color: var(--text-primary); }
.lang-tab--active {
background: var(--bg-surface);
color: var(--accent);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.lang-tab__count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
padding: 1px 6px;
font-size: 0.78em;
font-weight: 700;
background: rgba(0, 0, 0, 0.08);
color: var(--text-muted);
border-radius: 10px;
line-height: 1.4;
}
.lang-tab--active .lang-tab__count {
background: var(--accent);
color: #fff;
}
.lang-content { display: none !important; }
.lang-content--active { display: block !important; }
/* ─── Component dep graph (mermaid) ────────────────────────────────────── */
.dep-graph {
margin: 16px 0;
padding: 24px;
background: var(--bg-surface-2);
border: 1px solid var(--border);
border-radius: 8px;
overflow-x: auto;
text-align: center;
}
.dep-graph svg { max-width: 100%; height: auto; }
/* ─── Diff viewer ──────────────────────────────────────────────────────── */
.diff-head {
margin: 0 0 24px;
padding: 16px 20px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 10px;
}
.diff-head h1 { margin: 0 0 8px; font-size: 1.4em; }
.diff-head__meta {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin: 0;
font-size: 0.9em;
color: var(--text-muted);
}
.diff-version {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 12px;
font-family: ui-monospace, monospace;
font-weight: 600;
}
.diff-version--from { background: var(--error-soft); color: var(--error-text); }
.diff-version--to { background: var(--success-soft); color: var(--success-text); }
.diff-arrow { color: var(--text-faint); }
.diff-head__count { margin-left: auto; }
.diff-file {
margin: 0 0 20px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
.diff-file--added { border-color: var(--success); }
.diff-file--removed { border-color: var(--error); }
.diff-file__head {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
background: var(--bg-surface-2);
border-bottom: 1px solid var(--border);
font-size: 0.85em;
}
.diff-file__status {
padding: 2px 8px;
border-radius: 10px;
font-size: 0.78em;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
background: var(--bg-surface);
color: var(--text-muted);
}
.diff-file--added .diff-file__status { background: var(--success-soft); color: var(--success-text); }
.diff-file--removed .diff-file__status { background: var(--error-soft); color: var(--error-text); }
.diff-file--modified .diff-file__status { background: var(--accent-soft); color: var(--accent-text); }
.diff-file__path { flex: 1; font-weight: 500; color: var(--text-primary); }
.diff-file__stat { display: inline-flex; gap: 8px; font-family: ui-monospace, monospace; }
.diff-stat--add { color: #16a34a; }
.diff-stat--rm { color: #dc2626; }
.diff-table {
width: 100%;
border-collapse: collapse;
font-family: ui-monospace, monospace;
font-size: 0.82em;
line-height: 1.5;
}
.diff-line__num {
width: 40px;
padding: 0 8px;
text-align: right;
color: var(--text-faint);
background: var(--bg-surface-3);
user-select: none;
border-right: 1px solid var(--border);
}
.diff-line__sign {
width: 22px;
text-align: center;
color: var(--text-muted);
user-select: none;
border-right: 1px solid var(--border);
}
.diff-line__content { padding: 0 12px; max-width: 0; }
.diff-line__content pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
.diff-line--add { background: rgba(22, 163, 74, 0.08); }
.diff-line--add .diff-line__sign { color: #16a34a; font-weight: 700; }
.diff-line--rm { background: rgba(220, 38, 38, 0.08); }
.diff-line--rm .diff-line__sign { color: #dc2626; font-weight: 700; }
.diff-line--same { color: var(--text-muted); }
.version-diff-link {
display: inline-block;
margin-left: 12px;
font-size: 0.8em;
color: var(--accent);
text-decoration: none;
font-family: ui-monospace, monospace;
}
.version-diff-link:hover { text-decoration: underline; }
/* ─── Install stats tag ────────────────────────────────────────────────── */
.tag--installs {
background: var(--accent-soft);
color: var(--accent-text);
border: 1px solid var(--accent);
display: inline-flex;
align-items: center;
gap: 4px;
}
.tag--installs small {
font-size: 0.85em;
opacity: 0.85;
font-weight: 400;
}