/* * theme.css — the only hand-maintained stylesheet (ui-rewrite-spec). * * Rules of the file: * - express everything through Web Awesome --wa-* tokens; no raw * color values and no per-component overrides that a token could * do instead * - the brand hue is picked by the wa-brand-green class on * (green: the site's lime identity), so this file only carries * what the shipped token classes cannot * - grows only when a converted page needs a primitive; delete * entries when their last user goes */ /* owned by Tailwind today; carried here too so the U5 deletion of app.css cannot silently break the shell */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .hidden { display: none; } /* the old design's light-theme green: pages sit on a pale brand tint while cards/header/footer stay on the white raised surface; dark theme keeps WA's neutral surfaces */ html:not(.wa-dark) { --wa-color-surface-default: var(--wa-color-brand-95); } /* ---- shell: page ---- flex column so
soaks up leftover height: short pages keep the footer at the viewport bottom and .site-auth can center its card between header and footer */ body { display: flex; flex-direction: column; min-height: 100vh; } body > main { flex: 1; } /* ---- shell: header ---- */ .site-header { background: var(--wa-color-surface-raised); border-block-end: 1px solid var(--wa-color-surface-border); } .site-header nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-s); max-width: 80rem; margin-inline: auto; padding: var(--wa-space-xs) var(--wa-space-m); } .site-brand { display: flex; align-items: center; gap: var(--wa-space-s); color: var(--wa-color-text-normal); text-decoration: none; } .site-header .site-brand { margin-inline-end: auto; } .site-brand img { height: 2.25rem; } .site-brand-text { display: flex; flex-direction: column; } .site-brand-name { font-size: var(--wa-font-size-l); font-weight: var(--wa-font-weight-semibold); white-space: nowrap; } .site-brand-motto { font-size: var(--wa-font-size-3xs); letter-spacing: 0.35em; color: var(--wa-color-text-quiet); } /* the menu collapses behind the hamburger
; :has() lets the closed-details content live outside the details element */ .site-menu { display: none; order: 4; flex-basis: 100%; flex-direction: column; margin: 0; padding: 0; list-style: none; gap: var(--wa-space-2xs); } .site-header nav:has(.site-nav-toggle[open]) .site-menu { display: flex; } .site-menu a { display: block; padding: var(--wa-space-2xs) var(--wa-space-xs); border-radius: var(--wa-border-radius-m); color: var(--wa-color-text-normal); font-weight: var(--wa-font-weight-action); text-decoration: none; } .site-menu a:hover { background: color-mix(in oklab, var(--wa-color-surface-raised), var(--wa-color-mix-hover)); } .site-menu a[aria-current="page"] { color: var(--wa-color-text-link); } @media (min-width: 64rem) { .site-menu { display: flex; order: 0; flex-basis: auto; flex-direction: row; gap: var(--wa-space-m); } .site-nav-toggle { display: none; } } .site-actions { display: flex; align-items: center; gap: var(--wa-space-2xs); } /* links and s dressed as buttons */ .site-button { display: inline-flex; align-items: center; gap: var(--wa-space-2xs); padding: var(--wa-space-2xs) var(--wa-space-s); border: none; border-radius: var(--wa-border-radius-m); background: transparent; color: var(--wa-color-text-normal); font-size: var(--wa-font-size-s); font-weight: var(--wa-font-weight-action); text-decoration: none; white-space: nowrap; cursor: pointer; } .site-button:hover { background: color-mix(in oklab, var(--wa-color-surface-raised), var(--wa-color-mix-hover)); } .site-button-brand { background: var(--wa-color-brand-fill-loud); color: var(--wa-color-brand-on-loud); } .site-button-brand:hover { background: color-mix(in oklab, var(--wa-color-brand-fill-loud), var(--wa-color-mix-hover)); } .site-button-icon { padding: var(--wa-space-xs); color: var(--wa-color-text-quiet); } .site-button-icon:hover { color: var(--wa-color-text-normal); } .site-button svg { width: 0.7em; height: 0.7em; } .site-button-icon svg { width: 1rem; height: 1rem; } /*
-based dropdown (language picker, hamburger); WA's wa-native layer dresses every
as a disclosure panel (border, open-state padding, ::after chevron) — undo all of it, these are menu buttons, not panels */ .site-dropdown { position: relative; margin: 0; /* content-flow margin-block-end would lift it off-center */ background: none; border: none; border-radius: 0; } .site-dropdown[open] { padding: 0; } .site-dropdown[open] summary { margin-inline: 0; } .site-dropdown summary { /* block-level flex: the .site-button inline-flex would sit on a text baseline inside the block
, adding leading below it and pushing it off-center in the header row */ display: flex; list-style: none; } .site-dropdown summary::marker, .site-dropdown summary::-webkit-details-marker { display: none; } .site-dropdown summary::after { content: none; } .site-dropdown > ul { position: absolute; inset-inline-end: 0; top: calc(100% + var(--wa-space-2xs)); z-index: 30; min-width: 7rem; margin: 0; padding: var(--wa-space-3xs); list-style: none; background: var(--wa-color-surface-raised); border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-m); box-shadow: var(--wa-shadow-m); } .site-dropdown > ul a { display: flex; align-items: center; gap: var(--wa-space-2xs); padding: var(--wa-space-2xs) var(--wa-space-s); border-radius: var(--wa-border-radius-s); color: var(--wa-color-text-normal); text-decoration: none; } .site-dropdown > ul a:hover { background: color-mix(in oklab, var(--wa-color-surface-raised), var(--wa-color-mix-hover)); } .site-dropdown > ul a[aria-current="true"] { font-weight: var(--wa-font-weight-bold); } /* ---- shell: flash message ---- */ .site-flash { position: relative; width: min(80rem, 100% - 2 * var(--wa-space-m)); margin: var(--wa-space-m) auto; } .site-flash [data-dismiss] { position: absolute; inset-inline-end: var(--wa-space-s); /* center on the callout so a single line of text and the X line up, instead of pinning the button to the top edge */ inset-block-start: 50%; transform: translateY(-50%); display: inline-flex; padding: var(--wa-space-3xs); border: none; border-radius: var(--wa-border-radius-s); background: transparent; color: inherit; cursor: pointer; } .site-flash [data-dismiss]:hover { background: color-mix(in oklab, transparent, var(--wa-color-mix-hover)); } .site-flash [data-dismiss] svg { width: 0.75rem; height: 0.75rem; } /* raw has no intrinsic size inside wa-callout — without this it renders 0×0 (and page-sized before the component upgrades) */ wa-callout svg[slot="icon"] { width: 1.25em; height: 1.25em; } .site-flag { width: 1.25rem; height: 0.95rem; border-radius: var(--wa-border-radius-s); } /* ---- prose pages (about, tos, privacy, quickstart) ---- Tailwind's preflight is unlayered, so it beats Web Awesome's layered native typography on any page that still loads app.css; the prose look is restated here unlayered until U5 deletes Tailwind. */ .site-prose { width: min(42rem, 100% - 2 * var(--wa-space-m)); margin-inline: auto; padding-block: var(--wa-space-2xl) var(--wa-space-3xl); color: var(--wa-color-text-normal); font-size: var(--wa-font-size-m); line-height: var(--wa-line-height-normal); } .site-prose h1 { margin-block: 0 var(--wa-space-l); font-size: var(--wa-font-size-2xl); font-weight: var(--wa-font-weight-heading); line-height: var(--wa-line-height-condensed); } .site-prose h2 { margin-block: var(--wa-space-xl) var(--wa-space-s); font-size: var(--wa-font-size-xl); font-weight: var(--wa-font-weight-heading); line-height: var(--wa-line-height-condensed); } .site-prose h3 { margin-block: var(--wa-space-l) var(--wa-space-s); font-size: var(--wa-font-size-l); font-weight: var(--wa-font-weight-heading); line-height: var(--wa-line-height-condensed); } .site-prose p, .site-prose ul, .site-prose ol { margin-block: 0 var(--wa-space-m); } .site-prose ul, .site-prose ol { padding-inline-start: 1.5em; } .site-prose ul { list-style: disc; } .site-prose ol { list-style: decimal; } .site-prose a:not(.site-button) { /* :not(.site-button): the prose link color would out-specify .site-button-brand and paint green text on the green buttons */ color: var(--wa-color-text-link); } .site-prose blockquote { margin: 0 0 var(--wa-space-m); padding-inline-start: var(--wa-space-m); border-inline-start: 3px solid var(--wa-color-surface-border); color: var(--wa-color-text-quiet); font-style: italic; } .site-prose table { width: 100%; margin-block: 0 var(--wa-space-m); border-collapse: collapse; font-size: var(--wa-font-size-s); } .site-prose th, .site-prose td { padding: var(--wa-space-2xs) var(--wa-space-s); border: 1px solid var(--wa-color-surface-border); text-align: start; vertical-align: top; } .site-prose th { background: var(--wa-color-surface-raised); font-weight: var(--wa-font-weight-semibold); } .site-prose img { max-width: 100%; margin-block: 0 var(--wa-space-l); border-radius: var(--wa-border-radius-m); } .site-prose wa-callout { margin-block: var(--wa-space-l); } .site-prose .signature { text-align: end; } .site-prose.site-wide { width: min(80rem, 100% - 2 * var(--wa-space-m)); } .site-center { text-align: center; } /* card pages (download, price) */ .site-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--wa-space-l); align-items: stretch; text-align: center; } /* cards in the grid stretch to equal height, but wa-card's body does not fill that height, so buy buttons floated wherever the copy ended (varying name/description lengths -> ragged buttons). Make the body a full-height flex column and pin the button to the bottom. */ .site-card-grid wa-card::part(body) { display: flex; flex-direction: column; flex: 1; } .site-card-grid .site-button-block { margin-block-start: auto; } .site-price { font-size: var(--wa-font-size-2xl); font-weight: var(--wa-font-weight-bold); } .site-price small { font-size: var(--wa-font-size-s); font-weight: var(--wa-font-weight-normal); color: var(--wa-color-text-quiet); } .site-button-block { display: flex; justify-content: center; } .site-button-outline { border: 1px solid var(--wa-color-surface-border); } .site-download { padding: var(--wa-space-m); } .site-download svg { width: 3rem; height: 3rem; } /* ---- cards and forms (auth pages; admin follows in U3) ---- Native controls are styled here, unlayered, for the same reason as .site-prose: Tailwind's preflight + forms plugin beat Web Awesome's layered native styles while app.css is still loaded. */ .site-card { padding: var(--wa-space-xl); background: var(--wa-color-surface-raised); border: 1px solid var(--wa-color-surface-border); border-radius: var(--wa-border-radius-l); box-shadow: var(--wa-shadow-s); } .site-card h1 { margin-block: 0 var(--wa-space-l); font-size: var(--wa-font-size-xl); font-weight: var(--wa-font-weight-heading); line-height: var(--wa-line-height-condensed); } .site-auth { display: flex; justify-content: center; /* center, don't stretch: the default would pull the card to full main height now that main grows; symmetric padding keeps the centered card equidistant from header and footer */ align-items: center; padding: var(--wa-space-2xl) var(--wa-space-m); } .site-auth .site-card { width: 100%; max-width: 28rem; } .site-auth .site-card.site-card-wide { max-width: 42rem; } .site-card h2 { margin-block: 0 var(--wa-space-m); font-size: var(--wa-font-size-l); font-weight: var(--wa-font-weight-heading); line-height: var(--wa-line-height-condensed); } .site-card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--wa-space-s); margin-block-end: var(--wa-space-m); } .site-card-header h2 { margin: 0; } .site-card-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: var(--wa-space-l); margin-block-end: var(--wa-space-l); } .site-card-columns .site-card { display: flex; flex-direction: column; } .site-card-footer { margin-block: auto 0; padding-block-start: var(--wa-space-m); text-align: end; } .site-table-scroll { overflow-x: auto; } .site-cell-actions { display: flex; gap: var(--wa-space-2xs); white-space: nowrap; } .site-cell-actions + .site-cell-actions { margin-block-start: var(--wa-space-2xs); } .site-invite input { width: 13rem; padding: var(--wa-space-2xs) var(--wa-space-xs); border: 1px solid var(--wa-form-control-border-color); border-radius: var(--wa-form-control-border-radius); background: var(--wa-form-control-background-color); color: var(--wa-color-text-quiet); font-size: var(--wa-font-size-xs); } .site-button-danger { color: var(--wa-color-danger-fill-loud); } .site-button-outline.site-button-danger { border-color: var(--wa-color-danger-fill-loud); } .site-form { display: flex; flex-direction: column; gap: var(--wa-space-m); margin-block-end: var(--wa-space-m); } .site-form label { display: block; margin-block-end: var(--wa-space-3xs); font-size: var(--wa-font-size-s); font-weight: var(--wa-font-weight-semibold); } /* the label's display:block out-specifies the UA [hidden] rule, so a JS-toggled label (e.g. the meme "type" field) would never actually hide */ .site-form label[hidden] { display: none; } .site-form fieldset { display: flex; flex-direction: column; gap: var(--wa-space-m); margin: 0; padding: 0 0 var(--wa-space-m); border: none; border-block-end: 1px solid var(--wa-color-surface-border); } .site-form fieldset:last-of-type { padding-block-end: 0; border-block-end: none; } /* Inputs, selects and textareas are left to WebAwesome's native.css, which already gives them the border, radius, brand-tinted fill, focus ring and control height — a hand-rolled .site-form rule here only duplicated those tokens (and, via `font: inherit`, shrank the controls below WA's standard height). The only native-control override we still need is the select caret below. native.css paints the