/* src/publish_core/open-pages.css — the sign-in link and the legal footer publish adds to a public project page for an anonymous visitor, and the 401 sign-in page of a project page that needs a sign-in (openpages.py; publish 0.9.25, session 1018c, 1018c-Q460 b, Q391 b). version 0.6.0 · created 2026-10-27 by Pascal Ehlig, ITS · edited 2026-10-31 by Pascal Ehlig, ITS Served at /_gwydion/open-pages.css (style-src 'self' holds under the bundle CSP and the page CSP; nothing inline). The link sits in the float slot top-right (the kit's float manager adopts it when a page loads one); the page keeps a top band free for it, so it covers no content at the top. 0.3.0 (publish 0.9.30, session 1018c, 1018c-Q589 a): the colours follow the PAGE, not the device. Order: the kit's roles as a pair (--c-text with --c-raised), else the page's tokens as a pair (--text with --surface; --link for the action), else the fallbacks — light, unless the page declares dark (data-theme="dark" or with dark alone on the root) or page-scheme.js measured a dark page (class gw-on-dark on ; gw-on-light wins over a declaration — the measured background is the truth). A pair is used only whole: color-mix(… A 100%, B 0%) is A when both exist and invalid otherwise, so var() falls through to the next pair. The border is mixed from the pair (a page's --border is a width in the kit). Only the 401 sign-in page (publish's own page, declared "light dark") follows the device. The seed button (seed.py, 1018c-Q205, PLAN-1024-lleu L3) wears the same roles. 0.4.0 (publish 0.9.31, session 1018c, 1018c-Q608 a, Q609 a): the account control docked into a page's own top bar (data-gwydion-dock="account", openpages.dock_at) — .gw-dock-account wears the same roles: 40 px high, radius 8 px, a 1 px border, the page's font; its menu (.gw-dock-menu) opens below, right-aligned, on the raised surface with a soft shadow, at least 180 px wide and never wider than the viewport less 32 px. 0.6.0 (publish 0.9.33, owner 2026-10-31, dev_hell PLAN-1031-menues-laschen M2): the left tab rail (.gw-dock-tabs: fixed at the left edge, hidden while empty; at most 600 px at the bottom left; a site may place it itself — the rail's own rules sit in :where()) and the seed button as its 44 px tab rounded on the side facing the page; the account's mini picture (initials in a circle in the page pair's action colours, the Gravatar picture over it when the person allowed it), the visibly shortened name (dotted underline, the whole name on focus), the Gravatar item of its menu. */ .gw-open-signin, .gw-open-legal, .gw-open-login, .gw-seed, .gw-dock-account { --gw-open-fb-text: #18211c; --gw-open-fb-surface: #ffffff; --gw-open-fb-border: #cfd5c4; --gw-open-fb-action: #2c6a4c; --gw-open-fb-on-action: #ffffff; --gw-open-fb-focus: #2c6a4c; --gw-open-kit-text: color-mix(in srgb, var(--c-text) 100%, var(--c-raised) 0%); --gw-open-kit-surface: color-mix(in srgb, var(--c-raised) 100%, var(--c-text) 0%); --gw-open-kit-border: color-mix(in srgb, var(--c-border) 100%, var(--gw-open-kit-text) 0%); --gw-open-kit-action: color-mix(in srgb, var(--c-action) 100%, var(--gw-open-kit-text) 0%); --gw-open-kit-on-action: color-mix(in srgb, var(--c-on-action) 100%, var(--gw-open-kit-action) 0%); --gw-open-kit-focus: color-mix(in srgb, var(--c-focus) 100%, var(--gw-open-kit-text) 0%); --gw-open-page-text: color-mix(in srgb, var(--text) 100%, var(--surface) 0%); --gw-open-page-surface: color-mix(in srgb, var(--surface) 100%, var(--text) 0%); --gw-open-page-border: color-mix(in srgb, var(--text) 25%, var(--surface)); --gw-open-page-action: color-mix(in srgb, var(--link) 100%, var(--gw-open-page-text) 0%); --gw-open-page-on-action: color-mix(in srgb, var(--gw-open-page-surface) 100%, var(--gw-open-page-action) 0%); --gw-open-text: var(--gw-open-kit-text, var(--gw-open-page-text, var(--gw-open-fb-text))); --gw-open-surface: var(--gw-open-kit-surface, var(--gw-open-page-surface, var(--gw-open-fb-surface))); --gw-open-border: var(--gw-open-kit-border, var(--gw-open-page-border, var(--gw-open-fb-border))); --gw-open-action: var(--gw-open-kit-action, var(--gw-open-page-action, var(--gw-open-fb-action))); --gw-open-on-action: var(--gw-open-kit-on-action, var(--gw-open-page-on-action, var(--gw-open-fb-on-action))); --gw-open-focus: var(--gw-open-kit-focus, var(--gw-open-page-action, var(--gw-open-fb-focus))); color-scheme: light; } /* the dark fallbacks: only where the page itself declares dark (no specificity of their own, so the measured class below wins) */ :where(:root[data-theme="dark" i], :root:has(> head > meta[name="color-scheme" i]:is([content="dark" i], [content="only dark" i], [content="dark only" i]))) :is(.gw-open-signin, .gw-open-legal, .gw-seed, .gw-dock-account), :root.gw-on-dark :is(.gw-open-signin, .gw-open-legal, .gw-seed, .gw-dock-account) { --gw-open-fb-text: #e6ebe3; --gw-open-fb-surface: #1d2420; --gw-open-fb-border: #3d4a41; --gw-open-fb-action: #7fc8a0; --gw-open-fb-on-action: #0f1612; --gw-open-fb-focus: #9fe0bc; color-scheme: dark; } :root.gw-on-light :is(.gw-open-signin, .gw-open-legal, .gw-seed, .gw-dock-account) { --gw-open-fb-text: #18211c; --gw-open-fb-surface: #ffffff; --gw-open-fb-border: #cfd5c4; --gw-open-fb-action: #2c6a4c; --gw-open-fb-on-action: #ffffff; --gw-open-fb-focus: #2c6a4c; color-scheme: light; } /* the 401 sign-in page is publish's own page ("light dark"): it and its footer follow the device */ @media (prefers-color-scheme: dark) { body.gw-open-login, body.gw-open-login .gw-open-legal { --gw-open-fb-text: #e6ebe3; --gw-open-fb-surface: #1d2420; --gw-open-fb-border: #3d4a41; --gw-open-fb-action: #7fc8a0; --gw-open-fb-on-action: #0f1612; --gw-open-fb-focus: #9fe0bc; color-scheme: dark; } } html:has(> body > a.gw-open-signin) { padding-top: calc(env(safe-area-inset-top, 0px) + 3.25rem); } a.gw-open-signin { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 8px); right: calc(env(safe-area-inset-right, 0px) + 12px); left: auto; bottom: auto; z-index: 40; box-sizing: border-box; display: inline-block; min-height: 2.25rem; padding: .45rem .9rem; font: 600 .95rem/1.3 var(--font, system-ui, sans-serif); text-decoration: none; white-space: nowrap; color: var(--gw-open-on-action); background: var(--gw-open-action); border: 1px solid var(--gw-open-action); border-radius: 999px; box-shadow: 0 2px 8px #00000029; } a.gw-open-signin:hover { filter: brightness(1.08); } /* 0.2.0 (1018c-Q390 b): the signed-in person's name and Sign out, quieter than the sign-in button */ a.gw-open-account { color: var(--gw-open-text); background: var(--gw-open-surface); border-color: var(--gw-open-border); font-weight: 500; } a.gw-open-signin:focus-visible, .gw-open-legal a:focus-visible, .gw-open-button:focus-visible, button.gw-seed:focus-visible { outline: 3px solid var(--gw-open-focus); outline-offset: 2px; } .gw-open-legal { box-sizing: border-box; margin: 2rem 0 0; padding: .75rem 1rem; border-top: 1px solid var(--gw-open-border); font: 400 .9rem/1.4 var(--font, system-ui, sans-serif); color: var(--gw-open-text); text-align: center; } .gw-open-legal-links a { color: inherit; margin: 0 .6rem; } @media print { a.gw-open-signin, button.gw-seed { display: none !important; } html:has(> body > a.gw-open-signin) { padding-top: 0; } } /* the 401 sign-in page */ body.gw-open-login { margin: 0; min-height: 100vh; display: flex; flex-direction: column; color: var(--gw-open-text); background: var(--c-surface, #f6f7f2); font: 400 1rem/1.5 var(--font, system-ui, sans-serif); } @media (prefers-color-scheme: dark) { body.gw-open-login { background: var(--c-surface, #121814); } } body.gw-open-login main { flex: 1; box-sizing: border-box; width: min(34rem, 100%); margin: 0 auto; padding: 3rem 1.25rem; } body.gw-open-login h1 { font-size: 1.5rem; margin: 0 0 .75rem; } .gw-open-button { display: inline-block; min-height: 2.75rem; box-sizing: border-box; padding: .6rem 1.2rem; border-radius: 8px; font-weight: 600; text-decoration: none; color: var(--gw-open-on-action); background: var(--gw-open-action); } /* 0.3.0 (1018c-Q589 a, Q205, PLAN-1024-lleu L3): the seed button — signed-in persons only (the server leaves it out otherwise); the float slot bottom-right above the explain switch (priority 0) and the consent button (priority 1): data-gw-float-priority 2, two rows up; these lines are the fallback before float.js places it */ button.gw-seed { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: calc(max(12px, env(safe-area-inset-bottom)) + 112px); left: auto; top: auto; z-index: 40; box-sizing: border-box; display: inline-grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; cursor: pointer; color: var(--gw-open-action); background: var(--gw-open-surface); border: 1px solid var(--gw-open-border); border-radius: 50%; box-shadow: 0 2px 8px #00000029; -webkit-tap-highlight-color: transparent; } button.gw-seed:hover { filter: brightness(1.05); } button.gw-seed[aria-expanded="true"] { color: var(--gw-open-on-action); background: var(--gw-open-action); border-color: var(--gw-open-action); } button.gw-seed[aria-busy="true"] { cursor: progress; opacity: .7; } button.gw-seed svg { display: block; width: 22px; height: 22px; } /* 0.4.0 (publish 0.9.31, 1018c-Q608 a, Q609 a): the account control in a page's own top bar — the name as a button, a click opens the menu with sign-out (details/summary: no script needed); anonymous, the sign-in link as the same button. Text and surface as a pair. */ details.gw-dock-account { position: relative; display: inline-block; vertical-align: middle; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--gw-open-text); } details.gw-dock-account summary, a.gw-dock-account { box-sizing: border-box; display: inline-flex; align-items: center; gap: .4em; height: 40px; max-width: min(16rem, calc(100vw - 32px)); margin: 0; padding: 0 12px; font: inherit; line-height: 1.2; white-space: nowrap; text-decoration: none; cursor: pointer; list-style: none; color: var(--gw-open-text); background: var(--gw-open-surface); border: 1px solid var(--gw-open-border); border-radius: 8px; -webkit-tap-highlight-color: transparent; } details.gw-dock-account summary::-webkit-details-marker { display: none; } details.gw-dock-account summary::marker { content: ""; } .gw-dock-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .gw-dock-caret { flex: none; font-size: .8em; } details.gw-dock-account[open] summary .gw-dock-caret { transform: rotate(180deg); } details.gw-dock-account summary:hover, a.gw-dock-account:hover { background: color-mix(in srgb, var(--gw-open-text) 6%, var(--gw-open-surface)); } .gw-dock-menu { position: absolute; top: calc(100% + 4px); right: 0; left: auto; z-index: 41; box-sizing: border-box; min-width: min(180px, calc(100vw - 32px)); max-width: calc(100vw - 32px); margin: 0; padding: 4px; text-align: start; white-space: normal; color: var(--gw-open-text); background: var(--gw-open-surface); border: 1px solid var(--gw-open-border); border-radius: 8px; box-shadow: 0 6px 20px #00000033; } .gw-dock-menu.gw-dock-start { right: auto; left: 0; } /* page-scheme.js: the menu would leave the viewport on the left */ .gw-dock-who { margin: 0; padding: 8px 10px; font-size: .875em; overflow-wrap: anywhere; } .gw-dock-menu a { box-sizing: border-box; display: flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 6px; color: var(--gw-open-text); text-decoration: none; } .gw-dock-menu a:hover { background: color-mix(in srgb, var(--gw-open-text) 8%, var(--gw-open-surface)); text-decoration: underline; } details.gw-dock-account summary:focus-visible, a.gw-dock-account:focus-visible, .gw-dock-menu a:focus-visible { outline: 2px solid var(--gw-open-focus); outline-offset: 2px; } /* publish's own pages: the dock sits at the end of the header, before the explain switch */ .gw-dock-slot { margin-inline-start: auto; margin-inline-end: .5rem; } /* 0.5.0 (publish 0.9.32, 1018c-Q707): the seed button (Lleu) snapped into the page's top bar (page-scheme.js 0.3.0) — the account's 40 px square, no shadow; the Lleu panel itself still opens at the side */ :where(.gw-dock-slot, [data-gwydion-dock]) { display: inline-flex; align-items: center; gap: .375rem; } button.gw-seed.gw-docked { position: static !important; width: 40px; height: 40px; border-radius: 8px; box-shadow: none; vertical-align: middle; } /* 0.6.0 (publish 0.9.33): the left tab rail (page-scheme.js 0.4.0 marks data-gwydion-dock-form="tabs" as .gw-dock-tabs) */ :where(.gw-dock-tabs) { position: fixed; left: 0; top: max(72px, 14vh); z-index: 42; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; padding: 0; } :where(.gw-dock-tabs):empty { display: none; } button.gw-seed.gw-docked.gw-tab { width: 44px; height: 44px; border-radius: 0 10px 10px 0; border-left: 0; box-shadow: 0 2px 8px #00000029; } @media (max-width: 600px) { :where(.gw-dock-tabs) { top: auto; bottom: 0; left: max(8px, env(safe-area-inset-left)); flex-direction: row; align-items: flex-end; } button.gw-seed.gw-docked.gw-tab { width: 36px; height: 36px; border-radius: 10px 10px 0 0; border-left: 1px solid var(--gw-open-border); border-bottom: 0; } } /* 0.6.0: the account's mini picture, the shortened name, the Gravatar item */ .gw-dock-pic { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; min-width: 0; border-radius: 50%; overflow: hidden; font-size: .75rem; font-weight: 600; line-height: 1; letter-spacing: .02em; color: var(--gw-open-on-action); background: var(--gw-open-action); } img.gw-dock-gravatar { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } details.gw-dock-account { max-width: 100%; min-width: 0; } /* a narrow dock (the site's span) keeps the control inside */ details.gw-dock-account summary { padding-inline-start: 6px; max-width: min(16rem, 100%); } .gw-dock-name { max-width: 12rem; } .gw-dock-name.gw-cut { text-decoration: underline dotted; text-underline-offset: 3px; } details.gw-dock-account:not([open]) summary.gw-cut:focus-visible::after, details.gw-dock-account:not([open]) summary.gw-cut:hover::after { content: attr(data-full); position: absolute; top: calc(100% + 4px); right: 0; z-index: 41; max-width: calc(100vw - 32px); padding: 4px 8px; white-space: normal; overflow-wrap: anywhere; font-size: .875em; color: var(--gw-open-text); background: var(--gw-open-surface); border: 1px solid var(--gw-open-border); border-radius: 6px; box-shadow: 0 6px 20px #00000033; } .gw-dock-menu button.gw-dock-item { box-sizing: border-box; display: flex; align-items: center; width: 100%; min-height: 40px; margin: 0; padding: 0 10px; font: inherit; text-align: start; color: var(--gw-open-text); background: none; border: 0; border-radius: 6px; cursor: pointer; } .gw-dock-menu button.gw-dock-item:hover { background: color-mix(in srgb, var(--gw-open-text) 8%, var(--gw-open-surface)); } .gw-dock-menu button.gw-dock-item:focus-visible { outline: 2px solid var(--gw-open-focus); outline-offset: 2px; } .gw-dock-ask { margin: 4px 0; padding: 8px 10px; font-size: .875em; border: 1px solid var(--gw-open-border); border-radius: 6px; max-width: 22rem; } .gw-dock-ask p { margin: 0 0 6px; } .gw-dock-ask-actions { display: flex; gap: 4px; } .gw-dock-note { margin: 0; padding: 4px 10px; font-size: .875em; } [data-gwydion-gravatar][hidden], .gw-dock-ask[hidden], .gw-dock-note[hidden], img.gw-dock-gravatar[hidden] { display: none; } @media print { details.gw-dock-account, a.gw-dock-account { display: none !important; } }