/* * dliu.com shared UI, v1: https://files.dliu.com/dliu.com/ui/v1/dl.css * Source: https://github.com/dliu-com/shared-resources (public/ui/v1/dl.css) * * One look for every dliu.com site: colours, header (menu bar) with the app's own logo, buttons, * sign-in buttons, page layout and footer with the DL logo. Load it before the site's own stylesheet. * Classes start with dl- so they never clash with a site's own names. Element defaults use * :where() (no specificity), so any site rule overrides them. * v1 only gains things; a change that would break a page goes to v2. */ :root { color-scheme: light; --dl-bg: #ffffff; --dl-panel: #f6f7f9; --dl-surface: #ffffff; --dl-line: #dfe3e8; --dl-line-strong: #b8c0ca; --dl-text: #1c2024; --dl-muted: #646b75; /* The DL logo's blue, exactly. */ --dl-accent: #209cee; --dl-accent-hover: #1786d1; --dl-accent-soft: #e8f5fd; --dl-focus: rgba(32, 156, 238, 0.35); --dl-danger: #d1242f; --dl-ok: #1a7f37; --dl-radius: 12px; --dl-radius-small: 8px; --dl-font: system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; --dl-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --dl-main-width: 1280px; --dl-gutter: 24px; } @media (max-width: 640px) { :root { --dl-gutter: 16px; } } /* ---------- Base (no specificity: site rules win) ---------- */ :where(*, *::before, *::after) { box-sizing: border-box; } :where(html) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-family: var(--dl-font); } :where(body) { margin: 0; background: var(--dl-bg); color: var(--dl-text); font-family: var(--dl-font); } :where(img, video) { max-width: 100%; } :where(a) { color: var(--dl-accent); text-decoration: none; } :where(a:hover) { text-decoration: underline; } :where(h1) { font-size: 24px; margin: 0 0 16px; } :where(h2) { font-size: 18px; margin: 24px 0 12px; } :where(input:not([type]), input[type=text], input[type=search], input[type=email], input[type=url], input[type=number], input[type=password], input[type=tel], input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week], textarea, select) { font: inherit; padding: 9px 11px; border-radius: var(--dl-radius-small); border: 1px solid var(--dl-line); background: var(--dl-surface); color: var(--dl-text); } :where(input:not([type]), input[type=text], input[type=search], input[type=email], input[type=url], input[type=number], input[type=password], input[type=tel], input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week], textarea) { width: 100%; } /* Same box for selects in every browser (Safari ignores padding and borders on native selects). The arrow is chevron.svg next to this file, so a CSP that allows https://files.dliu.com/dliu.com/ for images covers it. */ :where(select:not([multiple]):not([size])) { -webkit-appearance: none; appearance: none; padding-right: 32px; line-height: normal; background-image: url("chevron.svg"); background-repeat: no-repeat; background-position: right 11px center; background-size: 12px 8px; } :where(input, textarea, select):focus { outline: 2px solid var(--dl-focus); border-color: var(--dl-accent); } :where(a, button, summary):focus-visible { outline: 2px solid var(--dl-accent); outline-offset: 2px; } [hidden] { display: none !important; } /* ---------- Page layout ---------- */ /* : header on top, main fills the screen, footer at the bottom. */ .dl-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } .dl-main { width: 100%; max-width: var(--dl-main-width); margin: 0 auto; flex: 1 0 auto; padding: var(--dl-gutter) max(var(--dl-gutter), env(safe-area-inset-right)) var(--dl-gutter) max(var(--dl-gutter), env(safe-area-inset-left)); } .dl-main.dl-narrow { max-width: 760px; } /* ---------- Header (menu bar) ---------- The app's own logo and name, linking to the app's home page:

Site name

(The earlier form, beside the dl-brand link, still works.) */ .dl-header { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 60px; padding: max(10px, env(safe-area-inset-top)) max(var(--dl-gutter), env(safe-area-inset-right)) 10px max(var(--dl-gutter), env(safe-area-inset-left)); background: rgba(255, 255, 255, 0.92); border-bottom: 1px solid var(--dl-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-family: var(--dl-font); } a.dl-logo { display: flex; flex: none; border-radius: 7px; } a.dl-logo img, img.dl-logo { display: block; flex: none; width: 32px; height: 32px; object-fit: contain; } .dl-brand { display: inline-flex; align-items: center; gap: 10px; flex: none; font: 650 18px/1.2 var(--dl-font); color: var(--dl-text); white-space: nowrap; text-decoration: none; } .dl-brand:hover { color: var(--dl-text); text-decoration: none; } .dl-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-left: auto; } /* Plain text links in the menu bar. */ .dl-nav-link { padding: 8px 6px; color: var(--dl-muted); font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none; } .dl-nav-link:hover { color: var(--dl-text); text-decoration: none; } .dl-nav-link[aria-current] { color: var(--dl-text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--dl-accent); } .dl-account { color: var(--dl-muted); font-size: 13px; overflow-wrap: anywhere; } /* Collapsible menu, for apps with more links than fit on a phone. On screens up to 600 px the nav hides behind a ☰ button; the app's script toggles .is-open on the nav and aria-expanded on the button. */ .dl-button.dl-menu-toggle { display: none; margin-left: auto; padding: 8px 12px; font-size: 16px; } @media (max-width: 600px) { .dl-button.dl-menu-toggle { display: inline-flex; } .dl-nav.dl-nav-collapsible { display: none; } .dl-nav.dl-nav-collapsible.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 4px; position: absolute; top: 100%; left: 0; right: 0; z-index: 25; margin: 0; padding: 8px max(var(--dl-gutter), env(safe-area-inset-right)) 12px max(var(--dl-gutter), env(safe-area-inset-left)); background: var(--dl-surface); border-bottom: 1px solid var(--dl-line); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); } .dl-nav-collapsible.is-open .dl-nav-link { padding: 10px 4px; } .dl-nav-collapsible.is-open .dl-nav-link[aria-current] { box-shadow: inset 3px 0 0 var(--dl-accent); padding-left: 12px; } .dl-nav-collapsible.is-open .dl-language { align-self: flex-start; } .dl-nav-collapsible.is-open .dl-button.dl-language-toggle { display: none; } .dl-nav-collapsible.is-open .dl-languages { display: inline-flex; flex-direction: row; position: static; box-shadow: none; } } /* ---------- Buttons ---------- , aria-pressed, aria-checked or aria-selected="true" marks the chosen one. */ .dl-segmented { display: inline-flex; border: 1px solid var(--dl-line); border-radius: var(--dl-radius-small); overflow: hidden; background: var(--dl-surface); } .dl-segmented > button, .dl-segmented > a { padding: 8px 14px; border: 0; border-left: 1px solid var(--dl-line); background: none; color: var(--dl-text); font: 500 14px/1.2 var(--dl-font); text-decoration: none; cursor: pointer; } .dl-segmented > :first-child { border-left: 0; } .dl-segmented > button:hover, .dl-segmented > a:hover { background: var(--dl-panel); text-decoration: none; } .dl-segmented > [aria-pressed="true"], .dl-segmented > [aria-checked="true"], .dl-segmented > [aria-selected="true"] { background: var(--dl-accent-soft); color: var(--dl-accent); font-weight: 600; } .dl-segmented > :disabled { opacity: 0.55; cursor: default; } .dl-segmented.dl-segmented-small > button, .dl-segmented.dl-segmented-small > a { padding: 4px 12px; font-size: 13px; } /* ---------- Dialogs (native