1662 lines
39 KiB
CSS
1662 lines
39 KiB
CSS
/* ── Fonts (local files) ─────────────────────────────────────────────── */
|
|
@font-face {
|
|
font-family: 'IBM Plex Mono';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url('/static/plexmono400.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'IBM Plex Mono';
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-display: swap;
|
|
src: url('/static/plexmono500.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'IBM Plex Serif';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-display: swap;
|
|
src: url('/static/plexserif400.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'IBM Plex Serif';
|
|
font-style: normal;
|
|
font-weight: 500;
|
|
font-display: swap;
|
|
src: url('/static/plexserif500.ttf') format('truetype');
|
|
}
|
|
|
|
/* ── Solarized Palette & Semantic Tokens (light default) ─────────────── */
|
|
:root {
|
|
/* Solarized base */
|
|
--sol-base03: #002b36;
|
|
--sol-base02: #073642;
|
|
--sol-base01: #586e75;
|
|
--sol-base00: #657b83;
|
|
--sol-base0: #839496;
|
|
--sol-base1: #93a1a1;
|
|
--sol-base2: #eee8d5;
|
|
--sol-base3: #fdf6e3;
|
|
/* Solarized accent */
|
|
--sol-yellow: #b58900;
|
|
--sol-orange: #cb4b16;
|
|
--sol-red: #dc322f;
|
|
--sol-magenta: #d33682;
|
|
--sol-violet: #6c71c4;
|
|
--sol-blue: #268bd2;
|
|
--sol-cyan: #2aa198;
|
|
--sol-green: #859900;
|
|
|
|
/* Light theme semantic vars */
|
|
--solarized-bg: var(--sol-base3);
|
|
--solarized-bg-highlight: var(--sol-base2);
|
|
--solarized-bg-emphasis: #e4dcc8;
|
|
--solarized-secondary: var(--sol-base1);
|
|
--solarized-primary: var(--sol-base00);
|
|
--solarized-emphasis: var(--sol-base01);
|
|
--solarized-border: #d3cbb7;
|
|
--solarized-border-emphasis: var(--sol-base1);
|
|
|
|
--background: var(--solarized-bg);
|
|
--foreground: var(--solarized-primary);
|
|
--card: var(--solarized-bg-highlight);
|
|
--card-foreground: var(--solarized-primary);
|
|
--muted: var(--solarized-bg-highlight);
|
|
--muted-foreground: var(--solarized-secondary);
|
|
--accent: var(--sol-blue);
|
|
--border: var(--solarized-border);
|
|
--ring: var(--sol-blue);
|
|
--radius: 0.125rem;
|
|
--destructive: var(--sol-red);
|
|
|
|
--font-family-sans: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
|
|
--font-family-mono: 'IBM Plex Mono', 'Courier New', Courier, monospace;
|
|
--font-size: 16px;
|
|
}
|
|
|
|
/* ── System dark preference ──────────────────────────────────────────── */
|
|
/* Applies only in "auto" (no explicit light/mac8 choice). */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme="light"]):not([data-theme="mac8"]) {
|
|
--solarized-bg: var(--sol-base03);
|
|
--solarized-bg-highlight: var(--sol-base02);
|
|
--solarized-bg-emphasis: #0a4453;
|
|
--solarized-secondary: var(--sol-base01);
|
|
--solarized-primary: var(--sol-base0);
|
|
--solarized-emphasis: var(--sol-base1);
|
|
--solarized-border: #0d5664;
|
|
--solarized-border-emphasis: var(--sol-base01);
|
|
--ring: var(--sol-cyan);
|
|
}
|
|
}
|
|
|
|
/* ── Explicit theme overrides ────────────────────────────────────────── */
|
|
[data-theme="dark"] {
|
|
--solarized-bg: var(--sol-base03);
|
|
--solarized-bg-highlight: var(--sol-base02);
|
|
--solarized-bg-emphasis: #0a4453;
|
|
--solarized-secondary: var(--sol-base01);
|
|
--solarized-primary: var(--sol-base0);
|
|
--solarized-emphasis: var(--sol-base1);
|
|
--solarized-border: #0d5664;
|
|
--solarized-border-emphasis: var(--sol-base01);
|
|
--ring: var(--sol-cyan);
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--solarized-bg: var(--sol-base3);
|
|
--solarized-bg-highlight: var(--sol-base2);
|
|
--solarized-bg-emphasis: #e4dcc8;
|
|
--solarized-secondary: var(--sol-base1);
|
|
--solarized-primary: var(--sol-base00);
|
|
--solarized-emphasis: var(--sol-base01);
|
|
--solarized-border: #d3cbb7;
|
|
--solarized-border-emphasis: var(--sol-base1);
|
|
--ring: var(--sol-blue);
|
|
}
|
|
|
|
/* ── Base / Reset ────────────────────────────────────────────────────── */
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
font-size: var(--font-size);
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background-color: var(--background);
|
|
color: var(--foreground);
|
|
font-family: var(--font-family-sans);
|
|
line-height: 1.65;
|
|
}
|
|
|
|
/* ── Typography ──────────────────────────────────────────────────────── */
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-weight: 500;
|
|
line-height: 1.3;
|
|
margin-top: 0;
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
h1 { font-size: 2rem; }
|
|
h2 { font-size: 1.5rem; }
|
|
h3 { font-size: 1.25rem; }
|
|
h4 { font-size: 1rem; }
|
|
|
|
p {
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
a {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--sol-cyan);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
ul, ol {
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
li {
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
strong { font-weight: 500; }
|
|
|
|
code {
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.875em;
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
padding: 0.1em 0.35em;
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
pre {
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.875em;
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
padding: 1rem 1.25rem;
|
|
overflow-x: auto;
|
|
margin-top: 0;
|
|
margin-bottom: 1rem;
|
|
border-radius: var(--radius);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
pre code {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
font-size: 1em;
|
|
}
|
|
|
|
blockquote {
|
|
border-left: 3px solid var(--border);
|
|
margin: 0 0 1rem 0;
|
|
padding: 0.5rem 0 0.5rem 1rem;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 1rem;
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
th, td {
|
|
border: 1px solid var(--border);
|
|
padding: 0.4rem 0.75rem;
|
|
text-align: left;
|
|
}
|
|
|
|
th {
|
|
background: var(--card);
|
|
font-weight: 500;
|
|
}
|
|
|
|
mark {
|
|
background: var(--sol-yellow);
|
|
color: var(--sol-base03);
|
|
padding: 0.05em 0.2em;
|
|
}
|
|
|
|
hr {
|
|
border: none;
|
|
border-top: 1px solid var(--border);
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
/* ── Site header ─────────────────────────────────────────────────────── */
|
|
.site-header {
|
|
border-bottom: 1px solid var(--border);
|
|
background: var(--card);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 20;
|
|
}
|
|
|
|
.header-inner {
|
|
max-width: 72rem;
|
|
margin: 0 auto;
|
|
padding: 0 1.5rem;
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: 0;
|
|
height: 2.75rem;
|
|
}
|
|
|
|
.site-brand {
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.7rem;
|
|
font-weight: 500;
|
|
color: var(--foreground);
|
|
text-decoration: none;
|
|
letter-spacing: 0.1em;
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-right: 1.5rem;
|
|
border-right: 1px solid var(--border);
|
|
margin-right: 0.5rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.site-brand:hover {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* ── Navigation ──────────────────────────────────────────────────────── */
|
|
.site-nav {
|
|
flex: 1;
|
|
}
|
|
|
|
.nav-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
align-items: stretch;
|
|
height: 100%;
|
|
}
|
|
|
|
.nav-link {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 0.75rem;
|
|
padding-top: 0.75rem;
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.6875rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--muted-foreground);
|
|
text-decoration: none;
|
|
border-bottom: 2px solid transparent;
|
|
white-space: nowrap;
|
|
transition: color 0.1s, border-color 0.1s;
|
|
}
|
|
|
|
.nav-link:hover {
|
|
color: var(--foreground);
|
|
border-color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav-admin {
|
|
color: var(--sol-yellow);
|
|
}
|
|
|
|
.nav-admin:hover {
|
|
color: var(--sol-orange);
|
|
border-color: var(--sol-orange);
|
|
}
|
|
|
|
/* ── Theme toggle ────────────────────────────────────────────────────── */
|
|
.nav-end {
|
|
margin-left: auto;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 0.75rem;
|
|
border-left: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.theme-toggle {
|
|
background: none;
|
|
border: 1px solid var(--border);
|
|
color: var(--muted-foreground);
|
|
padding: 0.3125rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
line-height: 0;
|
|
transition: color 0.1s, border-color 0.1s;
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.theme-toggle:hover {
|
|
color: var(--foreground);
|
|
border-color: var(--foreground);
|
|
}
|
|
|
|
/* ── Theme picker dropdown ───────────────────────────────────────────── */
|
|
.theme-menu {
|
|
position: relative;
|
|
}
|
|
|
|
.theme-menu summary {
|
|
list-style: none;
|
|
}
|
|
|
|
.theme-menu summary::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.theme-options {
|
|
position: absolute;
|
|
top: calc(100% + 0.375rem);
|
|
right: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 0.25rem;
|
|
z-index: 30;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.theme-option {
|
|
background: none;
|
|
border: 1px solid transparent;
|
|
color: var(--muted-foreground);
|
|
padding: 0.3125rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
line-height: 0;
|
|
border-radius: var(--radius);
|
|
transition: color 0.1s, border-color 0.1s;
|
|
}
|
|
|
|
.theme-option:hover {
|
|
color: var(--foreground);
|
|
border-color: var(--border);
|
|
}
|
|
|
|
/* The currently selected theme */
|
|
.theme-option.theme-active {
|
|
color: var(--accent);
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
/* ── Main content ─────────────────────────────────────────────────────── */
|
|
.main-content {
|
|
max-width: 72rem;
|
|
margin: 0 auto;
|
|
padding: 2.5rem 1.5rem;
|
|
min-height: calc(100vh - 2.75rem);
|
|
}
|
|
|
|
/* ── Card ─────────────────────────────────────────────────────────────── */
|
|
.card {
|
|
border: 1px solid var(--border);
|
|
background: var(--card);
|
|
padding: 1.5rem;
|
|
transition: border-color 0.1s;
|
|
}
|
|
|
|
.card-hover:hover {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
/* ── Stub page (Phase 2) ─────────────────────────────────────────────── */
|
|
.stub-page {
|
|
border: 1px solid var(--border);
|
|
background: var(--card);
|
|
padding: 3rem 2rem;
|
|
text-align: center;
|
|
color: var(--muted-foreground);
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.875rem;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
/* ── Error page ──────────────────────────────────────────────────────── */
|
|
.error-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 40vh;
|
|
text-align: center;
|
|
}
|
|
|
|
.error-code {
|
|
font-family: var(--font-family-mono);
|
|
font-size: 5rem;
|
|
font-weight: 400;
|
|
color: var(--border);
|
|
line-height: 1;
|
|
margin-bottom: 1.5rem;
|
|
letter-spacing: -0.05em;
|
|
}
|
|
|
|
.error-page h1 {
|
|
font-size: 1.25rem;
|
|
margin-bottom: 0.75rem;
|
|
color: var(--muted-foreground);
|
|
font-family: var(--font-family-mono);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
.error-page p {
|
|
color: var(--muted-foreground);
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.error-page a {
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.8125rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
/* ── Search / form inputs ─────────────────────────────────────────────── */
|
|
input[type="text"],
|
|
input[type="email"],
|
|
input[type="search"],
|
|
textarea,
|
|
select {
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
border: 1px solid var(--border);
|
|
padding: 0.5rem 0.75rem;
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.875rem;
|
|
width: 100%;
|
|
outline: none;
|
|
transition: border-color 0.1s;
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
input[type="text"]:focus,
|
|
input[type="email"]:focus,
|
|
input[type="search"]:focus,
|
|
textarea:focus,
|
|
select:focus {
|
|
border-color: var(--ring);
|
|
}
|
|
|
|
input[type="text"]::placeholder,
|
|
input[type="email"]::placeholder,
|
|
input[type="search"]::placeholder,
|
|
textarea::placeholder {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
textarea {
|
|
resize: vertical;
|
|
min-height: 8rem;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--muted-foreground);
|
|
margin-bottom: 0.375rem;
|
|
}
|
|
|
|
button,
|
|
.btn {
|
|
background: none;
|
|
border: 1px solid var(--border);
|
|
color: var(--foreground);
|
|
padding: 0.5rem 1rem;
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.8125rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
cursor: pointer;
|
|
transition: border-color 0.1s, color 0.1s, background 0.1s;
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
button:hover,
|
|
.btn:hover {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.btn-primary {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--accent);
|
|
color: var(--card);
|
|
}
|
|
|
|
.btn-danger {
|
|
border-color: var(--destructive);
|
|
color: var(--destructive);
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
/* ── Utilities ───────────────────────────────────────────────────────── */
|
|
.font-mono { font-family: var(--font-family-mono); }
|
|
.text-muted { color: var(--muted-foreground); }
|
|
.text-accent { color: var(--accent); }
|
|
.text-sm { font-size: 0.875rem; }
|
|
.text-xs { font-size: 0.75rem; }
|
|
.uppercase { text-transform: uppercase; letter-spacing: 0.08em; }
|
|
.flex { display: flex; }
|
|
.items-center { align-items: center; }
|
|
.gap-2 { gap: 0.5rem; }
|
|
.gap-4 { gap: 1rem; }
|
|
.mt-0 { margin-top: 0; }
|
|
.mb-0 { margin-bottom: 0; }
|
|
.mb-4 { margin-bottom: 1rem; }
|
|
.mb-8 { margin-bottom: 2rem; }
|
|
|
|
/* ── Responsive ──────────────────────────────────────────────────────── */
|
|
@media (max-width: 640px) {
|
|
.header-inner {
|
|
padding: 0 0.75rem;
|
|
}
|
|
|
|
.site-brand {
|
|
font-size: 0.6rem;
|
|
padding-right: 0.75rem;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
.nav-link {
|
|
padding: 0 0.4rem;
|
|
font-size: 0.6rem;
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
.main-content {
|
|
padding: 1.5rem 1rem;
|
|
}
|
|
}
|
|
|
|
/* ── Phase 3: Blog / Wiki list ───────────────────────────────────────── */
|
|
.section-header {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.section-header h1 {
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.section-header p {
|
|
color: var(--muted-foreground);
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.875rem;
|
|
margin: 0;
|
|
}
|
|
|
|
.search-wrap {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.post-card {
|
|
border: 1px solid var(--border);
|
|
background: var(--card);
|
|
margin-bottom: 1rem;
|
|
transition: border-color 0.1s;
|
|
}
|
|
|
|
.post-card:hover {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
.post-card > a {
|
|
display: block;
|
|
padding: 1.5rem;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.post-card h2 {
|
|
font-size: 1.25rem;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--foreground);
|
|
transition: color 0.1s;
|
|
}
|
|
|
|
.post-card:hover h2 {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.post-meta {
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.75rem;
|
|
color: var(--muted-foreground);
|
|
margin-bottom: 0.75rem;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.post-excerpt {
|
|
color: var(--muted-foreground);
|
|
margin: 0;
|
|
font-size: 0.9375rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.no-results {
|
|
text-align: center;
|
|
padding: 3rem 1rem;
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.875rem;
|
|
color: var(--muted-foreground);
|
|
border: 1px solid var(--border);
|
|
background: var(--card);
|
|
}
|
|
|
|
/* ── Phase 3: Post / Wiki detail ─────────────────────────────────────── */
|
|
.post-detail {
|
|
max-width: 46rem;
|
|
}
|
|
|
|
.post-header {
|
|
margin-bottom: 2rem;
|
|
padding-bottom: 1.5rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.back-link {
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
display: inline-block;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.post-header h1 {
|
|
font-size: 1.875rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
/* Prose: rendered Markdown inside .post-body */
|
|
.post-body {
|
|
line-height: 1.75;
|
|
}
|
|
|
|
.post-body h1,
|
|
.post-body h2,
|
|
.post-body h3,
|
|
.post-body h4 {
|
|
margin-top: 2rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.post-body h1:first-child,
|
|
.post-body h2:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.post-body p,
|
|
.post-body ul,
|
|
.post-body ol,
|
|
.post-body blockquote,
|
|
.post-body pre,
|
|
.post-body table {
|
|
margin-bottom: 1.25rem;
|
|
}
|
|
|
|
.post-body img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
/* Admin edit affordance on detail pages */
|
|
.admin-edit-bar {
|
|
margin-top: 3rem;
|
|
padding-top: 1.5rem;
|
|
border-top: 1px solid var(--border);
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.admin-edit-link {
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
border: 1px solid var(--sol-yellow);
|
|
color: var(--sol-yellow);
|
|
padding: 0.375rem 0.75rem;
|
|
text-decoration: none;
|
|
transition: background 0.1s, color 0.1s;
|
|
}
|
|
|
|
.admin-edit-link:hover {
|
|
background: var(--sol-yellow);
|
|
color: var(--sol-base03);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* ── Phase 5: Admin dashboard ────────────────────────────────────────── */
|
|
.admin-new-row {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.admin-table-wrap {
|
|
overflow-x: auto;
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.admin-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.8125rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.admin-table th,
|
|
.admin-table td {
|
|
border: 1px solid var(--border);
|
|
padding: 0.45rem 0.75rem;
|
|
text-align: left;
|
|
vertical-align: middle;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.admin-table th {
|
|
background: var(--card);
|
|
color: var(--muted-foreground);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
font-size: 0.625rem;
|
|
}
|
|
|
|
/* Allow the title column to wrap */
|
|
.admin-table td:nth-child(2) {
|
|
white-space: normal;
|
|
max-width: 22rem;
|
|
}
|
|
|
|
/* Kind badges */
|
|
.kind-badge {
|
|
display: inline-block;
|
|
padding: 0.1em 0.45em;
|
|
font-size: 0.625rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
border: 1px solid currentColor;
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.kind-blog { color: var(--sol-blue); }
|
|
.kind-wiki { color: var(--sol-green); }
|
|
.kind-docs { color: var(--sol-yellow); }
|
|
|
|
/* Status badges */
|
|
.status-badge {
|
|
display: inline-block;
|
|
padding: 0.1em 0.45em;
|
|
font-size: 0.625rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
border: 1px solid currentColor;
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.status-published { color: var(--sol-green); }
|
|
.status-draft { color: var(--muted-foreground); }
|
|
|
|
/* Monospace data columns */
|
|
.col-mono {
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.75rem;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
/* Actions column */
|
|
.col-actions {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.action-link {
|
|
display: inline-block;
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.625rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
padding: 0.2em 0.55em;
|
|
border: 1px solid var(--border);
|
|
color: var(--foreground);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
background: none;
|
|
transition: border-color 0.1s, color 0.1s, background 0.1s;
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
.action-link:hover {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.action-link-danger {
|
|
border-color: var(--destructive);
|
|
color: var(--destructive);
|
|
margin-right: 0;
|
|
}
|
|
|
|
.action-link-danger:hover {
|
|
background: var(--destructive);
|
|
color: var(--card);
|
|
border-color: var(--destructive);
|
|
}
|
|
|
|
.action-delete-form {
|
|
display: inline;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* ── Phase 5: Editor ─────────────────────────────────────────────────── */
|
|
.editor-wrap {
|
|
max-width: 80rem;
|
|
}
|
|
|
|
/* Meta row: title / slug / published checkbox — flex, wraps on mobile */
|
|
.editor-meta-row {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
flex-wrap: wrap;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.editor-meta-row .form-group {
|
|
flex: 1;
|
|
min-width: 11rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.form-group-inline {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
padding-bottom: 0.5rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.checkbox-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
color: var(--foreground);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
input[type="checkbox"] {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
cursor: pointer;
|
|
accent-color: var(--accent);
|
|
}
|
|
|
|
/* Two-column editor / preview */
|
|
.editor-layout {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
min-height: 30rem;
|
|
}
|
|
|
|
@media (max-width: 780px) {
|
|
.editor-layout {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.editor-pane,
|
|
.preview-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.pane-label {
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.6875rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--muted-foreground);
|
|
margin-bottom: 0.375rem;
|
|
}
|
|
|
|
.editor-textarea {
|
|
flex: 1;
|
|
resize: none;
|
|
min-height: 28rem;
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.875rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.slug-input {
|
|
font-family: var(--font-family-mono);
|
|
}
|
|
|
|
.preview-pane {
|
|
border: 1px solid var(--border);
|
|
background: var(--card);
|
|
padding: 1.25rem;
|
|
overflow-y: auto;
|
|
min-height: 28rem;
|
|
max-height: 60rem;
|
|
}
|
|
|
|
/* Editor actions row */
|
|
.editor-actions {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
justify-content: flex-end;
|
|
padding-top: 0.75rem;
|
|
border-top: 1px solid var(--border);
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
/* Inline error banner above the form */
|
|
.editor-error {
|
|
border: 1px solid var(--destructive);
|
|
background: color-mix(in srgb, var(--destructive) 8%, var(--background));
|
|
color: var(--destructive);
|
|
padding: 0.75rem 1rem;
|
|
margin-bottom: 1rem;
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.editor-error p { margin: 0; }
|
|
|
|
/* ── Phase 6: Tags ───────────────────────────────────────────────────── */
|
|
|
|
/* Tag pill — used in list cards, detail headers, and the tag cloud */
|
|
.tag-pill {
|
|
display: inline-block;
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.625rem;
|
|
text-transform: lowercase;
|
|
letter-spacing: 0.04em;
|
|
padding: 0.15em 0.55em;
|
|
border: 1px solid var(--sol-green);
|
|
color: var(--sol-green);
|
|
text-decoration: none;
|
|
border-radius: var(--radius);
|
|
transition: background 0.1s, color 0.1s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tag-pill:hover {
|
|
background: var(--sol-green);
|
|
color: var(--sol-base03);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tag-pill-active {
|
|
background: var(--sol-green);
|
|
color: var(--sol-base03);
|
|
}
|
|
|
|
.tag-pill-active:hover {
|
|
background: none;
|
|
color: var(--sol-green);
|
|
}
|
|
|
|
/* Tag cloud: row of pills above the search input on list pages */
|
|
.tag-cloud {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.375rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Tags row inside a post card (below the excerpt link) */
|
|
.post-card-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.375rem;
|
|
padding: 0.75rem 1.5rem 1rem;
|
|
border-top: 1px solid var(--border);
|
|
background: var(--card);
|
|
}
|
|
|
|
/* Tags row in post/wiki detail page header */
|
|
.post-meta-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.375rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
/* ── Phase 6: Wiki 2-column grid ─────────────────────────────────────── */
|
|
|
|
.post-list-wiki {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 1rem;
|
|
}
|
|
|
|
.post-list-wiki .no-results {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.post-list-wiki {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* ── Phase 6: Global search page ─────────────────────────────────────── */
|
|
|
|
/* Section grouping on /search results (Blog / Wiki / Docs) */
|
|
.search-group {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.search-group:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.search-group-label {
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.6875rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--muted-foreground);
|
|
margin-bottom: 0.75rem;
|
|
padding-bottom: 0.375rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
/* ── Phase 6: Nav search input ───────────────────────────────────────── */
|
|
|
|
.nav-search {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.nav-search-input {
|
|
width: 10rem;
|
|
padding: 0.2rem 0.5rem;
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.6875rem;
|
|
background: var(--background);
|
|
color: var(--foreground);
|
|
border: 1px solid var(--border);
|
|
outline: none;
|
|
transition: border-color 0.1s, width 0.2s;
|
|
border-radius: var(--radius);
|
|
height: 1.625rem;
|
|
}
|
|
|
|
.nav-search-input:focus {
|
|
border-color: var(--ring);
|
|
width: 13rem;
|
|
}
|
|
|
|
.nav-search-input::placeholder {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
/* The nav search is the site's only search input, so it must survive
|
|
small screens: shrink instead of hiding, widen on focus. */
|
|
@media (max-width: 640px) {
|
|
.nav-search-input {
|
|
width: 5.5rem;
|
|
}
|
|
|
|
.nav-search-input:focus {
|
|
width: 9rem;
|
|
}
|
|
}
|
|
|
|
/* ── Login ─────────────────────────────────────────────────────────── */
|
|
|
|
.login-wrap {
|
|
max-width: 24rem;
|
|
margin: 4rem auto;
|
|
padding: 2rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
background: var(--card);
|
|
}
|
|
|
|
.login-wrap h1 {
|
|
font-family: var(--font-family-mono);
|
|
font-size: 1.1rem;
|
|
letter-spacing: 0.05em;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.login-error {
|
|
padding: 0.6rem 0.75rem;
|
|
border-left: 3px solid var(--destructive);
|
|
background: color-mix(in srgb, var(--destructive) 10%, transparent);
|
|
margin-bottom: 1rem;
|
|
border-radius: 0 var(--radius) var(--radius) 0;
|
|
font-size: 0.8rem;
|
|
color: var(--destructive);
|
|
}
|
|
|
|
/* ── Dashboard header row (title + sign-out) ───────────────────────── */
|
|
|
|
.admin-section-header {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.logout-form {
|
|
margin: 0;
|
|
}
|
|
|
|
.btn-logout {
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.6875rem;
|
|
letter-spacing: 0.05em;
|
|
padding: 0.35rem 0.75rem;
|
|
background: transparent;
|
|
color: var(--muted-foreground);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
cursor: pointer;
|
|
transition: color 0.15s, border-color 0.15s;
|
|
}
|
|
|
|
.btn-logout:hover {
|
|
color: var(--destructive);
|
|
border-color: var(--destructive);
|
|
}
|
|
|
|
/* ── Site footer ─────────────────────────────────────────────────────── */
|
|
.site-footer {
|
|
max-width: 72rem;
|
|
margin: 0 auto;
|
|
padding: 1.5rem;
|
|
border-top: 1px solid var(--border);
|
|
text-align: center;
|
|
}
|
|
|
|
.site-footer p {
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.75rem;
|
|
color: var(--muted-foreground);
|
|
margin: 0;
|
|
}
|
|
|
|
/* ── Nav feed icon ───────────────────────────────────────────────────── */
|
|
.nav-feed {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--muted-foreground);
|
|
padding: 0.3125rem;
|
|
margin-right: 0.5rem;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
line-height: 0;
|
|
transition: color 0.1s, border-color 0.1s;
|
|
}
|
|
|
|
.nav-feed:hover {
|
|
color: var(--sol-orange);
|
|
border-color: var(--sol-orange);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* ── Feed pagination ─────────────────────────────────────────────────── */
|
|
.pagination {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
margin-top: 2rem;
|
|
padding-top: 1.25rem;
|
|
border-top: 1px solid var(--border);
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.75rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.page-link {
|
|
border: 1px solid var(--border);
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: var(--radius);
|
|
color: var(--foreground);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.page-link:hover {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.page-link-disabled {
|
|
border: 1px solid var(--border);
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: var(--radius);
|
|
color: var(--muted-foreground);
|
|
opacity: 0.4;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.page-current {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
/* ── Markdown: heading anchors ───────────────────────────────────────── */
|
|
.heading-anchor {
|
|
color: var(--muted-foreground);
|
|
opacity: 0;
|
|
text-decoration: none;
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.8em;
|
|
transition: opacity 0.1s;
|
|
}
|
|
|
|
h1:hover .heading-anchor,
|
|
h2:hover .heading-anchor,
|
|
h3:hover .heading-anchor,
|
|
h4:hover .heading-anchor,
|
|
h5:hover .heading-anchor,
|
|
h6:hover .heading-anchor,
|
|
.heading-anchor:focus {
|
|
opacity: 1;
|
|
}
|
|
|
|
.heading-anchor:hover {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* ── Markdown: footnotes ─────────────────────────────────────────────── */
|
|
.footnote-ref a {
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.75em;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.footnotes {
|
|
margin-top: 2rem;
|
|
font-size: 0.875rem;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.footnotes ol {
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.footnotes li {
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.footnote-back {
|
|
font-family: var(--font-family-mono);
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* ── Syntax highlighting (highlight.js classes, Solarized accents) ───── */
|
|
.hljs-comment, .hljs-quote { color: var(--muted-foreground); font-style: italic; }
|
|
.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-type { color: var(--sol-green); }
|
|
.hljs-string, .hljs-regexp, .hljs-addition { color: var(--sol-cyan); }
|
|
.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-link { color: var(--sol-magenta); }
|
|
.hljs-title, .hljs-section, .hljs-name, .hljs-function { color: var(--sol-blue); }
|
|
.hljs-attribute, .hljs-attr, .hljs-variable, .hljs-template-variable { color: var(--sol-yellow); }
|
|
.hljs-built_in, .hljs-builtin-name, .hljs-class { color: var(--sol-orange); }
|
|
.hljs-meta, .hljs-deletion { color: var(--sol-red); }
|
|
.hljs-emphasis { font-style: italic; }
|
|
.hljs-strong { font-weight: 500; }
|
|
|
|
/* ── Editor: image upload widget ─────────────────────────────────────── */
|
|
.editor-media {
|
|
margin-top: 1.5rem;
|
|
padding: 1rem 1.25rem;
|
|
border: 1px dashed var(--border);
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.upload-form {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.upload-form input[type="file"] {
|
|
flex: 1;
|
|
min-width: 12rem;
|
|
border: none;
|
|
padding: 0;
|
|
background: none;
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.upload-name {
|
|
width: 12rem;
|
|
flex: 0 1 auto;
|
|
}
|
|
|
|
#upload-result {
|
|
margin-top: 0.75rem;
|
|
}
|
|
|
|
.upload-ok {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.upload-ok code {
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.upload-error {
|
|
color: var(--destructive);
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.8125rem;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ── Settings page ───────────────────────────────────────────────────── */
|
|
.settings-wrap {
|
|
max-width: 40rem;
|
|
}
|
|
|
|
.settings-wrap .form-group-inline {
|
|
margin: 1.25rem 0;
|
|
}
|
|
|
|
.settings-saved {
|
|
border: 1px solid var(--sol-green);
|
|
background: color-mix(in srgb, var(--sol-green) 8%, var(--background));
|
|
color: var(--sol-green);
|
|
padding: 0.75rem 1rem;
|
|
margin-bottom: 1rem;
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.settings-saved p { margin: 0; }
|
|
|
|
/* ── Settings page sections ──────────────────────────────────────────── */
|
|
.settings-section-label {
|
|
font-family: var(--font-family-mono);
|
|
font-size: 0.6875rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.1em;
|
|
color: var(--muted-foreground);
|
|
font-weight: 400;
|
|
margin: 1.75rem 0 0.75rem;
|
|
padding-bottom: 0.375rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.nav-link-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr 2fr;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.nav-link-row .form-group {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.field-note {
|
|
font-size: 0.8125rem;
|
|
color: var(--muted-foreground);
|
|
margin: 0.25rem 0 0.75rem;
|
|
}
|
|
|
|
/* ── Radio player (floating, bottom-left) ────────────────────────────── */
|
|
.radio-player {
|
|
position: fixed;
|
|
bottom: 1rem;
|
|
left: 1rem;
|
|
z-index: 40;
|
|
background: var(--card);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
padding: 0.5rem;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
max-width: 16rem;
|
|
font-family: var(--font-family-mono);
|
|
}
|
|
|
|
.radio-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.radio-btn {
|
|
padding: 0.3125rem 0.4375rem;
|
|
line-height: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.radio-btn[disabled] {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
#radio-vol {
|
|
width: 5.5rem;
|
|
accent-color: var(--accent);
|
|
}
|
|
|
|
/* Play button swaps between the two icons via .radio-playing */
|
|
.radio-icon-pause { display: none; }
|
|
.radio-playing .radio-icon-pause { display: block; }
|
|
.radio-playing .radio-icon-play { display: none; }
|
|
|
|
#radio-expand {
|
|
transition: transform 0.15s;
|
|
}
|
|
|
|
#radio-expand.radio-open {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.radio-channels {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.25rem;
|
|
margin-top: 0.5rem;
|
|
max-height: 12rem;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.radio-channels[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.radio-ch {
|
|
text-align: left;
|
|
font-size: 0.6875rem;
|
|
padding: 0.3rem 0.5rem;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.radio-ch-active {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.radio-loading {
|
|
font-size: 0.6875rem;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
/* ── Mac-8 retro theme ───────────────────────────────────────────────── */
|
|
/* Purple desktop, grey raised "window" chrome, black-on-white pages. */
|
|
:root[data-theme="mac8"] {
|
|
--background: #6d6da8;
|
|
--foreground: #000000;
|
|
--card: #cccccc;
|
|
--card-foreground: #000000;
|
|
--muted: #bbbbbb;
|
|
--muted-foreground: #3a3a3a;
|
|
--accent: #000080;
|
|
--border: #808080;
|
|
--ring: #000080;
|
|
--radius: 0;
|
|
--destructive: #990000;
|
|
}
|
|
|
|
/* The desktop metaphor, applied uniformly: ALL content lives inside a
|
|
raised grey window — text is never rendered onto the purple desktop.
|
|
The page body (#content) and footer are themselves windows, so every
|
|
element inside them automatically sits on grey; the same chrome is
|
|
shared by the header bar, floating widgets, and inner raised panels. */
|
|
[data-theme="mac8"] .main-content,
|
|
[data-theme="mac8"] .site-footer,
|
|
[data-theme="mac8"] .site-header,
|
|
[data-theme="mac8"] .post-card,
|
|
[data-theme="mac8"] .no-results,
|
|
[data-theme="mac8"] .admin-table-wrap,
|
|
[data-theme="mac8"] .login-wrap,
|
|
[data-theme="mac8"] .editor-media,
|
|
[data-theme="mac8"] .preview-pane,
|
|
[data-theme="mac8"] .theme-options,
|
|
[data-theme="mac8"] .settings-saved,
|
|
[data-theme="mac8"] .editor-error,
|
|
[data-theme="mac8"] .radio-player {
|
|
background: #cccccc;
|
|
border: 2px solid;
|
|
border-color: #ffffff #5a5a5a #5a5a5a #ffffff;
|
|
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
|
|
border-radius: 0;
|
|
}
|
|
|
|
[data-theme="mac8"] .site-header {
|
|
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
|
|
}
|
|
|
|
/* Float the main window and footer window on the desktop. */
|
|
[data-theme="mac8"] .main-content {
|
|
margin: 1.5rem auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
[data-theme="mac8"] .site-footer {
|
|
margin: 0 auto 1.5rem;
|
|
}
|
|
|
|
/* Post/page body: black on white, inset like a document well. */
|
|
[data-theme="mac8"] .post-body {
|
|
background: #ffffff;
|
|
color: #000000;
|
|
padding: 1.25rem 1.5rem;
|
|
border: 2px solid;
|
|
border-color: #5a5a5a #ffffff #ffffff #5a5a5a;
|
|
}
|
|
|
|
[data-theme="mac8"] .post-body code,
|
|
[data-theme="mac8"] .post-body pre {
|
|
background: #eeeeee;
|
|
border-color: #999999;
|
|
}
|
|
|
|
/* Buttons: classic raised chrome that depresses on click. */
|
|
[data-theme="mac8"] button:not(.theme-option),
|
|
[data-theme="mac8"] .btn,
|
|
[data-theme="mac8"] .page-link,
|
|
[data-theme="mac8"] .action-link {
|
|
background: #cccccc;
|
|
color: #000000;
|
|
border: 2px solid;
|
|
border-color: #ffffff #5a5a5a #5a5a5a #ffffff;
|
|
border-radius: 0;
|
|
}
|
|
|
|
[data-theme="mac8"] button:not(.theme-option):active,
|
|
[data-theme="mac8"] .btn:active {
|
|
border-color: #5a5a5a #ffffff #ffffff #5a5a5a;
|
|
}
|
|
|
|
/* Inputs: white wells with an inset bevel. */
|
|
[data-theme="mac8"] input[type="text"],
|
|
[data-theme="mac8"] input[type="email"],
|
|
[data-theme="mac8"] input[type="search"],
|
|
[data-theme="mac8"] input[type="password"],
|
|
[data-theme="mac8"] textarea,
|
|
[data-theme="mac8"] select {
|
|
background: #ffffff;
|
|
color: #000000;
|
|
border: 2px solid;
|
|
border-color: #5a5a5a #ffffff #ffffff #5a5a5a;
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* Tag pills read as small controls inside the window. */
|
|
[data-theme="mac8"] .tag-pill {
|
|
background: #cccccc;
|
|
border: 1px solid #5a5a5a;
|
|
color: #000000;
|
|
}
|
|
|
|
[data-theme="mac8"] .tag-pill:hover,
|
|
[data-theme="mac8"] .tag-pill-active {
|
|
background: #9999cc;
|
|
color: #000000;
|
|
}
|