/* skins/parse-center/parse-center.css - the Parse Center skin (p22c-1). * * Active only while carries data-skin="parse-center"; without the * attribute every rule here is inert and the shell renders exactly as before. * Variables first, one dark block (the A12 rule every module stylesheet keeps), * then the structure the skin adds. Every class the skin adds is prefixed * pc-. Existing shell elements are reached only under the skin attribute, and * only for room (the top line and the dock need space) or for hiding the two * header controls the top line takes over (#btn-theme, #export-menu). * * Not wired into the shell yet: index.html does not link this file. See * skins/parse-center/hooks.md for what the apply row does. */ /* ---------- 1. the variable layer ---------- */ body[data-skin="parse-center"] { /* the app's own light tokens stay; the skin changes texture, not palette: * panels go slightly translucent so the backdrop shows at their edges */ --surface: rgba(255, 255, 255, 0.82); /* skin-only tokens */ --pc-dock: #0a0a0b; --pc-dock-text: #e8e6df; --pc-dock-muted: #a2a09a; --pc-dock-faint: #8c8a84; /* 11px labels on the dock ground: kept at or above 4.5:1, measured in the note */ --pc-track: #2c2d31; --pc-topline: rgba(250, 250, 247, 0.72); --pc-topline-h: 44px; --pc-dock-w: 100px; --pc-gap: 22px; --pc-backdrop: url("../backdrops/parse-center-light.jpg"); --pc-backdrop-pos: center center; --pc-accent-settings: #d9a35c; --pc-accent-parse: #55c2a2; --pc-accent-diff: #6cabe8; --pc-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); } body.dark[data-skin="parse-center"] { --surface: rgba(30, 32, 36, 0.9); --pc-topline: rgba(20, 21, 24, 0.72); --pc-backdrop: url("../backdrops/parse-center-dark.jpg"); --pc-backdrop-pos: right center; } /* ---------- 2. room: the shell makes space for the top line and the dock ---------- */ body[data-skin="parse-center"] { padding-top: var(--pc-topline-h); } body[data-skin="parse-center"] .topbar { display: none !important; } body[data-skin="parse-center"] .app { height: calc(100vh - var(--pc-topline-h)); padding-right: calc(var(--pc-dock-w) + var(--pc-gap)); } @media (max-width: 900px) { body[data-skin="parse-center"] .app { height: auto; } } body[data-skin="parse-center"] .panel { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } /* the top line takes these two over; the originals stay in the DOM so every * existing handler, shortcut and palette action keeps working */ body[data-skin="parse-center"] #btn-theme, body[data-skin="parse-center"] #btn-skin, body[data-skin="parse-center"] #export-menu { display: none; } /* ---------- 3. the backdrop ---------- */ body[data-skin="parse-center"][data-pc-backdrop="on"]::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--pc-backdrop) var(--pc-backdrop-pos) / cover no-repeat; pointer-events: none; } body[data-skin="parse-center"][data-pc-backdrop="off"]::before { content: ""; position: fixed; inset: 0; z-index: -1; background-image: radial-gradient(var(--border) 1px, transparent 1.2px); background-size: 22px 22px; opacity: 0.55; pointer-events: none; } /* ---------- 4. the top line ---------- */ .pc-topline { position: fixed; top: 0; left: 0; right: 0; height: var(--pc-topline-h); z-index: 40; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0 calc(var(--pc-dock-w) + 16px) 0 24px; background: var(--pc-topline); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); font-family: var(--sans); color: var(--text); } .pc-tl-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; font-size: 12px; position: relative; } .pc-tl-btn svg { flex: none; } .pc-pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border: 1px solid var(--border-strong); border-radius: 15px; background: var(--surface); font: inherit; font-size: 12px; color: var(--text); cursor: pointer; } .pc-pill:hover { background: var(--surface-sunken); } .pc-pill[data-state="on"] svg { stroke: var(--assistant-accent); } .pc-pill[data-state="off"] svg { stroke: var(--text-faint); } .pc-pill[data-state="kept"] { border-color: var(--tool-accent); } .pc-pill[data-state="kept"] svg { stroke: var(--tool-accent); } .pc-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--assistant-accent); } .pc-pill[data-state="off"] .pc-dot { background: var(--border-strong); } .pc-pill[data-state="kept"] .pc-dot { background: var(--tool-accent); } .pc-pill-detail { color: var(--text-muted); } .pc-sel-swatch { width: 10px; height: 10px; border-radius: 3px; background: linear-gradient(135deg, #0a0a0b 50%, #55c2a2 50%); display: inline-block; flex: none; } .pc-sel-chevron { width: 5px; height: 5px; border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted); transform: translateY(-2px) rotate(45deg); margin-left: 4px; flex: none; } .pc-divider { width: 1px; height: 18px; background: var(--border); margin: 0 4px; } .pc-time { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.01em; color: var(--text); } .pc-time-date { color: var(--text-muted); } .pc-time-sep { color: var(--border-strong); } /* icons-only: the words drop, the time stays as text */ body[data-pc-labels="icons"] .pc-label { display: none; } body[data-pc-labels="icons"] .pc-tl-btn { width: 30px; padding: 0; justify-content: center; } body[data-pc-labels="icons"] .pc-pill { padding: 0 10px; } body[data-pc-labels="icons"] .pc-sel-swatch, body[data-pc-labels="icons"] .pc-sel-chevron { display: none; } body[data-pc-labels="icons"] .pc-sel-glyph { display: inline; } .pc-sel-glyph { display: none; } /* small menus that hang from a top line control (export kinds, skin list); * the wrapper is a class, not an inline style, because the shell's Content * Security Policy (style-src 'self') refuses style attributes */ .pc-menu-wrap { position: relative; display: inline-flex; } .pc-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 170px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); padding: 4px; display: flex; flex-direction: column; z-index: 45; font-size: 12px; } .pc-menu[hidden] { display: none; } .pc-menu-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--text); font: inherit; font-size: 12px; text-align: left; cursor: pointer; } .pc-menu-item:hover { background: var(--surface-sunken); } .pc-menu-item[aria-checked="true"] { background: var(--surface-sunken); } .pc-menu-item .pc-menu-sub { color: var(--text-muted); margin-left: auto; } /* ---------- 5. the dock ---------- */ .pc-dock { position: fixed; right: 0; top: 50%; transform: translateY(-50%); width: var(--pc-dock-w); height: 323px; padding: 24px 0 22px 0; z-index: 41; display: flex; flex-direction: column; align-items: center; gap: 20px; font-family: var(--sans); color: var(--pc-dock-text); } /* the shape: a pill whose top and bottom flare into the screen edge */ .pc-dock-shape { position: absolute; left: 0; top: -24px; width: 100px; height: 371px; filter: drop-shadow(var(--pc-shadow)); pointer-events: none; } .pc-dock-shape path { fill: var(--pc-dock); } .pc-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; } .pc-ring { width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: transparent; position: relative; cursor: pointer; color: var(--pc-dock-muted); } .pc-ring:hover { background: transparent; } .pc-ring:active { background: transparent; } .pc-ring svg { position: absolute; } .pc-ring .pc-ring-svg { inset: 0; } .pc-ring .pc-track { fill: none; stroke: var(--pc-track); stroke-width: 3; } .pc-ring .pc-arc { fill: none; stroke: var(--pc-accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 150.8; stroke-dashoffset: 150.8; opacity: 0.7; transition: stroke-dashoffset 0.25s ease, opacity 0.25s ease; } .pc-ring .pc-glyph { left: 17px; top: 17px; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .pc-ring:hover { color: var(--pc-dock-text); } .pc-ring:hover .pc-arc { stroke-dashoffset: 113; } .pc-ring[aria-pressed="true"] { color: #ffffff; } .pc-ring[aria-pressed="true"] .pc-arc { stroke-dashoffset: 0; opacity: 1; } .pc-ring:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 3px; } .pc-item[data-id="settings"] { --pc-accent: var(--pc-accent-settings); } .pc-item[data-id="parse"] { --pc-accent: var(--pc-accent-parse); } .pc-item[data-id="diff"] { --pc-accent: var(--pc-accent-diff); } .pc-dock-label { font-size: 11px; letter-spacing: 0.02em; color: var(--pc-dock-faint); } .pc-item:hover .pc-dock-label { color: var(--pc-dock-muted); } .pc-item[data-active="true"] .pc-dock-label { color: var(--pc-dock-text); } /* the card that slides out of a dock button: on hover it names the view, * on Settings it is the settings panel once clicked */ .pc-card { position: absolute; right: calc(100% + 16px); top: 50%; transform: translateY(-50%); width: 250px; background: var(--pc-dock); color: var(--pc-dock-text); border-radius: 12px; padding: 12px 14px; box-shadow: var(--pc-shadow); display: flex; flex-direction: column; gap: 8px; font-size: 12px; opacity: 0; visibility: hidden; transition: opacity 0.15s ease 0s, visibility 0s linear 0.15s; z-index: 42; } .pc-item:hover .pc-card, .pc-item:focus-within .pc-card, .pc-item[data-open="true"] .pc-card { opacity: 1; visibility: visible; transition-delay: 0.35s, 0.35s; } /* a click opens at once, even mid-way through the hover delay: ending the * running transition jumps it to its end state */ .pc-item[data-open="true"] .pc-card { transition: none; } .pc-card-title { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; } .pc-card-key { font-family: var(--mono); font-size: 11px; color: var(--pc-dock-faint); font-weight: 400; } .pc-card-desc { color: var(--pc-dock-muted); } .pc-card-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .pc-card-row .pc-mono { font-family: var(--mono); } .pc-bar { height: 3px; border-radius: 2px; background: var(--pc-track); overflow: hidden; } .pc-bar > span { display: block; height: 100%; } .pc-added { color: #7fd497; } .pc-bar-added > span { background: #7fd497; } .pc-removed { color: #ef9a8d; } .pc-bar-removed > span { background: #ef9a8d; } .pc-changed { color: #d9a35c; } .pc-bar-changed > span { background: #d9a35c; } /* the settings card is a hover card until it is clicked open: hovering (or * focusing) names it, the click exposes the controls */ .pc-item[data-id="settings"]:not([data-open="true"]) .pc-card-row { display: none; } /* settings panel controls, drawn in the dock's own palette */ .pc-card .pc-seg { display: inline-flex; border: 1px solid #45484f; border-radius: 6px; overflow: hidden; } .pc-card .pc-seg button { padding: 3px 10px; border: 0; border-radius: 0; background: transparent; color: var(--pc-dock-muted); font: inherit; font-size: 12px; cursor: pointer; } .pc-card .pc-seg button[aria-pressed="true"] { background: #26282d; color: var(--pc-dock-text); } .pc-card .pc-seg button:hover { background: #26282d; } .pc-card select { font: inherit; font-size: 12px; padding: 3px 8px; border: 1px solid #45484f; border-radius: 6px; background: #1e2024; color: var(--pc-dock-text); } /* ---------- 6. motion and small screens ---------- */ @media (prefers-reduced-motion: reduce) { .pc-ring .pc-arc, .pc-card { transition: none; } } @media (max-width: 900px) { /* narrow screens: the dock becomes a bottom bar and the top line keeps only icons */ body[data-skin="parse-center"] .app { padding-right: 14px; padding-bottom: 96px; } .pc-dock { top: auto; bottom: 0; right: 0; left: 0; width: auto; height: 88px; padding: 12px 0 8px 0; transform: none; flex-direction: row; justify-content: center; gap: 36px; } .pc-dock-shape { display: none; } .pc-dock::before { content: ""; position: absolute; inset: 0; background: var(--pc-dock); border-radius: 28px 28px 0 0; box-shadow: var(--pc-shadow); z-index: -1; } /* cards span the bar instead of hanging off one button, so the leftmost * and rightmost cards cannot leave the viewport */ .pc-item { position: static; } .pc-card { right: 12px; left: 12px; width: auto; top: auto; bottom: calc(100% + 12px); transform: none; } .pc-topline { padding-right: 16px; } .pc-topline .pc-label { display: none; } .pc-topline .pc-tl-btn { width: 30px; padding: 0; justify-content: center; } .pc-topline .pc-sel-swatch, .pc-topline .pc-sel-chevron { display: none; } .pc-topline .pc-sel-glyph { display: inline; } }