Colonel John Hannibal Smith
fa427d4a9e
(1) All <style> blocks already removed by Murdock — verified zero across all 3 templates. (2) CSS reset already comprehensive (8 rules) — applied globally via opencd.css. (3) Jewel-case width: wrapped 100%%-2rem in calc() for proper min() parsing in all browsers. (4) Back-tray fix: spines no longer overlap — left spine grid-column:1, right spine grid-column:3 via :first-child/:last-child. demo-tray-container overflow-y:auto so scrollbar visible. 280x236 CD dims correct. (5) Leaflet width: wrapped calc() same as jewel-case. (6) .cd-spine--side: class now defined (inherits vertical-rl from .cd-spine). Back-tray grid explicitly positions side spines. (7) Token consistency: disc-art section converted from raw var(--gray-*) to 7 new --cd-disc-surface-* tokens. Zero raw OpenProps remain outside :root definitions in opencd.css.
254 lines
14 KiB
CSS
254 lines
14 KiB
CSS
/* OpenCD — CD Jewel Case CSS Framework */
|
|
@import "https://unpkg.com/open-props";
|
|
|
|
/* 1. Tokens */
|
|
:root {
|
|
--cd-scale: 1;
|
|
--cd-jewel-width: calc(280px * var(--cd-scale));
|
|
--cd-jewel-height: calc(245px * var(--cd-scale));
|
|
--cd-jewel-open-width: calc(560px * var(--cd-scale));
|
|
--cd-disc-diameter: calc(240px * var(--cd-scale));
|
|
--cd-disc-hole: calc(30px * var(--cd-scale));
|
|
--cd-leaflet-size: calc(240px * var(--cd-scale));
|
|
--cd-spine-width: calc(14px * var(--cd-scale));
|
|
--cd-tray-width: calc(260px * var(--cd-scale));
|
|
--cd-tray-height: calc(236px * var(--cd-scale));
|
|
--cd-surface-0: var(--gray-0);
|
|
--cd-surface-1: oklch(30% .015 265);
|
|
--cd-surface-2: oklch(35% .015 265);
|
|
--cd-surface-3: oklch(40% .015 265);
|
|
--cd-surface-4: oklch(15% .01 265);
|
|
--cd-font-neo-grotesque: 'Inter', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif;
|
|
--cd-font-label: var(--cd-font-neo-grotesque);
|
|
--cd-font-body: var(--font-serif);
|
|
--cd-font-mono: var(--font-mono-code, var(--font-mono));
|
|
--cd-font-size-body: var(--font-size-fluid-1);
|
|
--cd-font-size-title: var(--font-size-fluid-2);
|
|
--cd-font-size-display: var(--font-size-fluid-3);
|
|
--cd-text-primary: var(--gray-9);
|
|
--cd-text-secondary: var(--gray-7);
|
|
--cd-text-muted: var(--gray-5);
|
|
--cd-text-on-spine: var(--gray-1);
|
|
--cd-advisory-red: var(--red-6);
|
|
--cd-advisory-red-dark: var(--red-7);
|
|
--cd-advisory-bg: var(--red-0);
|
|
--cd-advisory-fg: #000;
|
|
--cd-advisory-fg-inv: #fff;
|
|
--cd-advisory-font: 'Impact', 'Arial Black', var(--cd-font-label), sans-serif;
|
|
--cd-text-opacity-muted: 0.8;
|
|
--cd-tray-bg: var(--cd-surface-1);
|
|
--cd-tray-bg-raised: var(--cd-surface-2);
|
|
--cd-tray-bg-sunken: var(--cd-surface-3);
|
|
--cd-spine-bg: var(--cd-surface-4);
|
|
--cd-grid-color: var(--gray-3);
|
|
--cd-grid-color-alt: var(--gray-2);
|
|
--cd-grid-fine: 4px;
|
|
--cd-grid-coarse: 8px;
|
|
--cd-jewel-radius: var(--radius-2);
|
|
--cd-jewel-shadow: var(--shadow-2);
|
|
--cd-jewel-shadow-raised: var(--shadow-3);
|
|
--cd-leaflet-radius: var(--radius-3);
|
|
--cd-page-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
|
|
--cd-disc-hole-shadow: inset 0 0 3px rgb(0 0 0 / 0.15);
|
|
--cd-disc-shadow: inset 0 0 8px rgb(0 0 0 / 0.12);
|
|
--cd-advisory-border: 2px solid var(--cd-advisory-fg);
|
|
--cd-tray-border-top: 1px solid var(--cd-grid-color);
|
|
--cd-track-border-bot: 1px solid var(--cd-grid-color-alt);
|
|
--cd-track-num-min-w: 2.5ch;
|
|
--cd-space-inset: var(--size-fluid-1);
|
|
--cd-space-stack: var(--size-fluid-2);
|
|
--cd-space-gutter: var(--size-fluid-3);
|
|
--cd-space-xs: var(--size-1);
|
|
--cd-space-sm: var(--size-2);
|
|
--cd-spine-font-xs: var(--font-size-0);
|
|
--cd-spine-font-sm: var(--font-size-1);
|
|
--cd-spine-font-md: var(--font-size-2);
|
|
--cd-spine-font-lg: var(--font-size-3);
|
|
--cd-font-weight-semibold: 600;
|
|
--cd-letter-spacing-1: 0.05em;
|
|
--cd-letter-spacing-2: 0.075em;
|
|
--cd-letter-spacing-3: 0.1em;
|
|
--cd-transition-duration: 200ms;
|
|
--cd-ease-flip: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
--cd-ease-default: var(--ease-3);
|
|
--cd-break-sm: 350px;
|
|
--cd-break-md-min: 351px;
|
|
--cd-break-md-max: 549px;
|
|
--cd-disc-hole-scale: 0.6;
|
|
--cd-disc-hole-font-scale: 0.5;
|
|
--cd-z-stack-base: 1;
|
|
--cd-aspect-jewel: 280 / 245;
|
|
--cd-aspect-leaflet: 1 / 1;
|
|
--cd-aspect-disc: 1 / 1;
|
|
--cd-disc-surface-1: var(--gray-4);
|
|
--cd-disc-surface-2: var(--gray-2);
|
|
--cd-disc-surface-3: var(--gray-6);
|
|
--cd-disc-surface-4: var(--gray-5);
|
|
--cd-disc-surface-5: var(--gray-7);
|
|
--cd-disc-surface-6: var(--gray-3);
|
|
--cd-disc-hole-text: var(--gray-4);
|
|
}
|
|
|
|
/* 2. Reset */
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
html { font-size: 100%; line-height: 1.5; -webkit-text-size-adjust: 100%; }
|
|
body { font-family: inherit; }
|
|
img, svg, video, canvas { display: block; max-width: 100%; }
|
|
button, input, select, textarea { font: inherit; border: 0; background: transparent; }
|
|
a { color: inherit; text-decoration: none; }
|
|
ul, ol { list-style: none; }
|
|
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
|
|
|
|
/* 3. Jewel Case */
|
|
.cd-jewel-case {
|
|
display: grid; grid-template-columns: var(--cd-spine-width) 1fr; grid-template-rows: auto 1fr;
|
|
width: min(var(--cd-jewel-width), calc(100% - 2rem)); min-height: var(--cd-jewel-height);
|
|
background: var(--cd-surface-0); border-radius: var(--cd-jewel-radius);
|
|
box-shadow: var(--cd-jewel-shadow); overflow: hidden; position: relative;
|
|
transition: width var(--cd-transition-duration) var(--cd-ease-default);
|
|
font-family: var(--cd-font-body); color: var(--cd-text-primary);
|
|
container-type: inline-size;
|
|
}
|
|
.cd-jewel-case--open, .cd-jewel-case[data-jewel-state="open"] {
|
|
width: min(var(--cd-jewel-open-width), calc(100% - 2rem));
|
|
}
|
|
.cd-jewel-case > .cd-jewel-inner {
|
|
grid-column: 2; grid-row: 1 / -1; display: flex; flex-direction: column;
|
|
padding: var(--cd-space-inset); gap: var(--cd-space-stack); min-height: 0;
|
|
}
|
|
|
|
/* 4. Spine */
|
|
.cd-spine {
|
|
grid-column: 1; grid-row: 1 / -1; display: flex; flex-direction: column;
|
|
align-items: center; justify-content: center; background: var(--cd-spine-bg);
|
|
color: var(--cd-text-on-spine); font-family: var(--cd-font-label);
|
|
padding: var(--cd-space-sm) var(--cd-space-xs); gap: var(--cd-space-sm);
|
|
writing-mode: vertical-rl; text-orientation: mixed; user-select: none;
|
|
}
|
|
.cd-spine .spine-label {
|
|
font-size: var(--cd-spine-font-sm); font-weight: var(--cd-font-weight-semibold);
|
|
letter-spacing: var(--cd-letter-spacing-3); text-transform: uppercase;
|
|
}
|
|
.cd-spine .spine-track { font-size: var(--cd-spine-font-xs); letter-spacing: var(--cd-letter-spacing-1); opacity: var(--cd-text-opacity-muted); }
|
|
/* side spine: inherits vertical-rl from .cd-spine, positioned by back-tray grid */
|
|
.cd-spine--side { }
|
|
|
|
/* 5. Leaflet */
|
|
.leaflet-content {
|
|
display: flex; flex-direction: column; gap: var(--cd-space-stack);
|
|
max-width: var(--cd-leaflet-size); position: relative;
|
|
background: repeating-linear-gradient(0deg, transparent 0 calc(var(--cd-grid-coarse)*3 - 1px), var(--cd-grid-color) calc(var(--cd-grid-coarse)*3 - 1px) calc(var(--cd-grid-coarse)*3)), var(--cd-tray-bg);
|
|
border-radius: var(--cd-leaflet-radius); padding: var(--cd-space-inset);
|
|
}
|
|
.leaflet-page {
|
|
aspect-ratio: var(--cd-aspect-leaflet); background: var(--cd-surface-0);
|
|
border-radius: calc(var(--cd-leaflet-radius) / 2); padding: var(--cd-space-inset);
|
|
display: flex; flex-direction: column; gap: var(--cd-space-sm);
|
|
box-shadow: var(--cd-page-shadow); position: relative;
|
|
transition: transform var(--cd-transition-duration) var(--cd-ease-flip);
|
|
}
|
|
.leaflet-page[data-leaflet-active="true"] { box-shadow: var(--cd-jewel-shadow); }
|
|
.leaflet-page[data-leaflet-direction="rtl"] { direction: rtl; }
|
|
.leaflet-page h1, .leaflet-page h2 {
|
|
font-family: var(--cd-font-label); font-size: var(--cd-font-size-title);
|
|
color: var(--cd-text-primary); line-height: 1.2;
|
|
}
|
|
.leaflet-page p {
|
|
font-family: var(--cd-font-body); font-size: var(--cd-font-size-body);
|
|
color: var(--cd-text-secondary); line-height: 1.6;
|
|
}
|
|
.leaflet-page .leaflet-meta {
|
|
font-family: var(--cd-font-mono); font-size: var(--cd-spine-font-xs);
|
|
color: var(--cd-text-muted); margin-top: auto;
|
|
}
|
|
.cd-jewel-case--leaflet { width: min(var(--cd-leaflet-size), calc(100% - 2rem)); box-shadow: none; background: transparent; }
|
|
.cd-jewel-case--leaflet .cd-jewel-inner { grid-column: 2; gap: var(--cd-space-inset); }
|
|
.leaflet-page ul { margin-left: 1rem; color: var(--cd-text-secondary); line-height: 1.6; }
|
|
.leaflet-page dl { margin-top: .5rem; display: grid; gap: .25rem; font-size: var(--cd-font-size-body); }
|
|
.leaflet-page dt { font-family: var(--cd-font-mono); color: var(--cd-text-muted); }
|
|
.leaflet-page dd { color: var(--cd-text-secondary); }
|
|
.leaflet-page p + p { margin-top: .5rem; }
|
|
|
|
/* 6. Disc Art */
|
|
.disc-art {
|
|
width: var(--cd-disc-diameter); aspect-ratio: var(--cd-aspect-disc); border-radius: 50%;
|
|
background: radial-gradient(circle at 30% 30%, var(--cd-disc-surface-1) 0%, var(--cd-disc-surface-2) 40%, var(--cd-disc-surface-3) 70%, var(--cd-disc-surface-2) 100%);
|
|
display: flex; align-items: center; justify-content: center; position: relative;
|
|
box-shadow: var(--cd-disc-shadow);
|
|
}
|
|
.disc-art::before {
|
|
content: ""; position: absolute; width: var(--cd-disc-hole); aspect-ratio: 1;
|
|
border-radius: 50%; background: var(--cd-surface-0); box-shadow: var(--cd-disc-hole-shadow);
|
|
}
|
|
.disc-hole {
|
|
position: absolute; width: calc(var(--cd-disc-hole) * var(--cd-disc-hole-scale));
|
|
aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center;
|
|
font-size: calc(var(--cd-disc-hole) * var(--cd-disc-hole-font-scale));
|
|
color: var(--cd-disc-hole-text); z-index: var(--cd-z-stack-base); pointer-events: none;
|
|
}
|
|
.disc-art--sheen {
|
|
background: radial-gradient(circle at 25% 25%, var(--cd-disc-surface-1) 0%, var(--cd-disc-surface-2) 35%, var(--cd-disc-surface-4) 50%, transparent 65%),
|
|
radial-gradient(circle at 75% 75%, var(--cd-disc-surface-5) 0%, var(--cd-disc-surface-6) 40%, transparent 70%);
|
|
}
|
|
|
|
/* 7. Human Advisory */
|
|
.human-advisory {
|
|
display: flex; flex-direction: column; align-items: center;
|
|
background: var(--cd-advisory-fg); color: var(--cd-advisory-fg-inv);
|
|
border: var(--cd-advisory-border); font-family: var(--cd-advisory-font);
|
|
text-transform: uppercase; text-align: center; padding: 0; width: fit-content; max-width: 100%;
|
|
position: absolute; bottom: var(--cd-space-inset); right: var(--cd-space-inset);
|
|
}
|
|
.human-advisory .advisory-row {
|
|
width: 100%; padding: var(--cd-space-xs) var(--cd-space-sm);
|
|
font-size: var(--cd-spine-font-sm); letter-spacing: var(--cd-letter-spacing-3); line-height: 1.2; white-space: nowrap;
|
|
}
|
|
.human-advisory .advisory-row--black { background: var(--cd-advisory-fg); color: var(--cd-advisory-fg-inv); }
|
|
.human-advisory .advisory-row--white { background: var(--cd-advisory-fg-inv); color: var(--cd-advisory-fg); }
|
|
.human-advisory--red .advisory-row--black { background: var(--cd-advisory-red-dark); color: var(--cd-advisory-fg-inv); }
|
|
.human-advisory--red .advisory-row--white { background: var(--cd-advisory-red); color: var(--cd-advisory-fg-inv); }
|
|
.human-advisory--inline { position: static; align-self: flex-end; }
|
|
|
|
/* 8. Back Tray */
|
|
.back-tray {
|
|
display: grid; grid-template-columns: var(--cd-spine-width) 1fr var(--cd-spine-width);
|
|
background: var(--cd-tray-bg); border-top: var(--cd-tray-border-top);
|
|
padding: 0; max-height: var(--cd-tray-height); overflow-y: auto; position: relative;
|
|
}
|
|
.back-tray .tray-credits { grid-column: 2; padding: var(--cd-space-inset); display: flex; flex-direction: column; gap: var(--cd-space-stack); background: var(--cd-tray-bg-raised); border-radius: 0 0 var(--cd-leaflet-radius) var(--cd-leaflet-radius); }
|
|
.tray-credits h2 { font-family: var(--cd-font-label); font-size: var(--cd-font-size-title); color: var(--cd-text-primary); text-transform: uppercase; letter-spacing: var(--cd-letter-spacing-2); }
|
|
.tray-credits ol { list-style: none; counter-reset: track; display: flex; flex-direction: column; gap: var(--cd-space-xs); }
|
|
.tray-credits ol li { counter-increment: track; font-family: var(--cd-font-label); font-size: var(--cd-font-size-body); color: var(--cd-text-secondary); padding: var(--cd-space-xs) 0; border-bottom: var(--cd-track-border-bot); display: flex; gap: var(--cd-space-sm); }
|
|
.tray-credits ol li::before { content: counter(track, decimal-leading-zero) "."; font-family: var(--cd-font-mono); color: var(--cd-text-muted); min-width: var(--cd-track-num-min-w); }
|
|
.tray-credits .credits-label { font-family: var(--cd-font-mono); font-size: var(--cd-spine-font-xs); color: var(--cd-text-muted); text-transform: uppercase; letter-spacing: var(--cd-letter-spacing-1); }
|
|
.tray-credits p { font-family: var(--cd-font-body); font-size: var(--cd-font-size-body); color: var(--cd-text-secondary); line-height: 1.5; }
|
|
.back-tray .cd-spine { grid-row: 1; background: var(--cd-spine-bg); }
|
|
.back-tray > .cd-spine:first-child { grid-column: 1; }
|
|
.back-tray > .cd-spine:last-child { grid-column: 3; }
|
|
|
|
/* 9. Grid */
|
|
.cd-grid { background-image: repeating-linear-gradient(0deg, transparent 0 calc(var(--cd-grid-coarse) - 1px), var(--cd-grid-color) calc(var(--cd-grid-coarse) - 1px) var(--cd-grid-coarse)); }
|
|
.cd-grid--fine { background-image: repeating-linear-gradient(0deg, transparent 0 calc(var(--cd-grid-fine) - 1px), var(--cd-grid-color) calc(var(--cd-grid-fine) - 1px) var(--cd-grid-fine)); }
|
|
.cd-grid--crosshatch {
|
|
background-image: repeating-linear-gradient(0deg, transparent 0 calc(var(--cd-grid-fine) - 1px), var(--cd-grid-color-alt) calc(var(--cd-grid-fine) - 1px) var(--cd-grid-fine)),
|
|
repeating-linear-gradient(90deg, transparent 0 calc(var(--cd-grid-coarse) - 1px), var(--cd-grid-color) calc(var(--cd-grid-coarse) - 1px) var(--cd-grid-coarse));
|
|
}
|
|
|
|
/* 10. Open/Closed */
|
|
.cd-jewel-case .back-tray { display: none; }
|
|
.cd-jewel-case--open .back-tray, .cd-jewel-case[data-jewel-state="open"] .back-tray { display: grid; }
|
|
|
|
/* 11. Responsive */
|
|
@container (max-width: var(--cd-break-sm)) {
|
|
.cd-jewel-case { width: 100% !important; grid-template-columns: 1fr; }
|
|
.cd-spine { writing-mode: horizontal-tb; flex-direction: row; padding: var(--cd-space-xs) var(--cd-space-sm); grid-column: 1; grid-row: 1; }
|
|
.cd-jewel-inner { grid-column: 1; grid-row: 2; }
|
|
.disc-art { width: 100% !important; max-width: var(--cd-disc-diameter); margin: 0 auto; }
|
|
.leaflet-content { max-width: 100%; }
|
|
.human-advisory { position: static; margin-top: var(--cd-space-stack); align-self: center; }
|
|
}
|
|
@container (min-width: var(--cd-break-md-min)) and (max-width: var(--cd-break-md-max)) {
|
|
.cd-jewel-case { width: 100% !important; max-width: var(--cd-jewel-width); }
|
|
.leaflet-content { gap: var(--cd-space-sm); }
|
|
.human-advisory .advisory-row { font-size: var(--cd-spine-font-xs); padding: var(--cd-space-xs) var(--cd-space-sm); }
|
|
}
|