/* ph stylesheet. Base layout + the "classic" gallery style (black-framed photos in a single centered column with a monospace EXIF caption). The `assist` body modifier enlarges tap targets and text for users who need it. Further styles (grid, artistic) will hook in via additional `.style-*` selectors. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { color-scheme: light; --bg: #fff; --surface: #f3f3f3; --text: #222; --text-dim: #888; --accent: #000; --frame: #000; --line: #d6d6d6; --border: #8c8c8c; --badge-text: #555; --danger: #c0392b; --danger-bg: #fdecea; --maxw: 1100px; } /* Dark palette. Applied when the OS prefers dark (unless the user forced light via the corner toggle), and whenever the user explicitly selects dark - the toggle sets data-theme on ; see static/theme.js. Photos are never tinted, only the surrounding chrome. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #16181c; --surface: #23262b; --text: #e6e6e6; --text-dim: #9aa0a6; --accent: #d8dadf; --frame: #2c2f34; --line: #3a3e45; --border: #5b6068; --badge-text: #b8bcc2; --danger: #ef6f63; --danger-bg: #3a2422; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #16181c; --surface: #23262b; --text: #e6e6e6; --text-dim: #9aa0a6; --accent: #d8dadf; --frame: #2c2f34; --line: #3a3e45; --border: #5b6068; --badge-text: #b8bcc2; --danger: #ef6f63; --danger-bg: #3a2422; } html, body { height: 100%; } body { background: var(--bg); color: var(--text); font-family: 'Trebuchet MS', system-ui, sans-serif; line-height: 1.5; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* -- Top bar: breadcrumbs + user ------------------------------- */ .topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.8rem 1rem; border-bottom: 2px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 10; } .crumbs { font-family: ui-monospace, 'Courier New', monospace; font-size: 0.95rem; } .crumbs .sep { color: var(--text-dim); padding: 0 0.35em; } /* -- Portal tabs (Photos / Videos) ------------------------------ */ /* Two pills in the top bar that swap /p/ <-> /v/ at the current path. */ .portal-tabs { display: inline-flex; gap: 0.25rem; padding: 0.15rem; background: var(--surface, rgba(127, 127, 127, 0.08)); border-radius: 999px; border: 1px solid var(--line); } .portal-tab { display: inline-block; padding: 0.2rem 0.85rem; border-radius: 999px; font-size: 0.85rem; color: var(--text-dim); text-decoration: none; line-height: 1.4; } .portal-tab:hover { text-decoration: none; color: var(--text); } .portal-tab.active { background: var(--bg); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } .assist .portal-tab { font-size: 1rem; padding: 0.4rem 1.1rem; } .userbox { display: flex; align-items: center; gap: 0.75rem; } .userbox .user { color: var(--text-dim); font-size: 0.85rem; } /* Per-tile cache state for video items: a small label rendered BELOW the *