/* Moekura base styles. Override by placing css/main.css in paths.static_override. Colours are tokens so themes can swap them. */ :root { color-scheme: light dark; --bg: #fbfafc; --surface: #ffffff; --text: #1f1d24; --muted: #6b6775; --border: #e4e1ea; --accent: #d6336c; --accent-text: #ffffff; --danger: #c92a2a; --radius: 8px; --gutter: 16px; --max-width: 1200px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.5; } /* Dark colours: from the browser's preference unless the user picked a theme (data-theme on ). Keep the two blocks the same. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #16141a; --surface: #1f1c24; --text: #ece9f1; --muted: #a39fad; --border: #34303b; --accent: #f06595; --accent-text: #16141a; --danger: #ff8787; --tag-general: #4fa3ff; --tag-artist: #ff8a8b; --tag-copyright: #d98cff; --tag-character: #35c64a; --tag-meta: #ffb54a; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #16141a; --surface: #1f1c24; --text: #ece9f1; --muted: #a39fad; --border: #34303b; --accent: #f06595; --accent-text: #16141a; --danger: #ff8787; --tag-general: #4fa3ff; --tag-artist: #ff8a8b; --tag-copyright: #d98cff; --tag-character: #35c64a; --tag-meta: #ffb54a; } :root[data-theme="light"] { color-scheme: light; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } main { flex: 1; width: 100%; max-width: var(--max-width); margin: 0 auto; padding: var(--gutter); } .site-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 12px var(--gutter); background: var(--surface); border-bottom: 1px solid var(--border); } .brand { font-weight: 700; font-size: 1.15rem; color: var(--text); } .primary { display: flex; gap: 16px; flex: 1; } .account { display: flex; align-items: center; gap: 12px; } .account form { margin: 0; } .who { color: var(--muted); } .button, button { display: inline-block; padding: 6px 14px; border: 0; border-radius: var(--radius); background: var(--accent); color: var(--accent-text); font: inherit; font-weight: 600; cursor: pointer; } .button:hover, button:hover { filter: brightness(1.08); text-decoration: none; } button.link { padding: 0; background: none; color: var(--accent); font-weight: inherit; } button.link:hover { text-decoration: underline; } /* Not the spacing of full-size form buttons. */ form button.link[type="submit"] { margin: 0; padding: 0; } .flash { max-width: var(--max-width); margin: var(--gutter) auto 0; width: calc(100% - 2 * var(--gutter)); padding: 10px 14px; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--radius); background: var(--surface); } .empty { text-align: center; padding: 64px 0; color: var(--muted); } .empty h1 { color: var(--text); margin: 0 0 8px; } .status-code { font-size: 3rem; font-weight: 800; color: var(--accent); margin: 0; } .site-footer { padding: 16px var(--gutter); color: var(--muted); font-size: 0.875rem; text-align: center; border-top: 1px solid var(--border); } /* Forms */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.5); padding: 24px; } .narrow { max-width: 420px; margin: 32px auto; } .card h1 { margin: 0 0 16px; font-size: 1.5rem; } form { display: flex; flex-direction: column; } label { font-weight: 600; margin: 12px 0 4px; } .optional { font-weight: normal; color: var(--muted); } input { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font: inherit; } input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; } form button[type="submit"] { margin-top: 20px; padding: 10px; } .hint, .aside { color: var(--muted); font-size: 0.875rem; margin: 4px 0 0; } .aside { margin-top: 16px; } .field-error, .form-error { color: var(--danger); font-size: 0.875rem; margin: 4px 0 0; } .form-error { margin: 0 0 8px; padding: 8px 12px; border: 1px solid var(--danger); border-radius: var(--radius); } .medium { max-width: 640px; margin: 32px auto; } textarea { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font: inherit; resize: vertical; } textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; } input[type="file"] { padding: 6px; } fieldset.ratings { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0 0; padding: 0; border: 0; } fieldset.ratings legend { font-weight: 600; margin-bottom: 4px; padding: 0; } label.choice { display: flex; align-items: center; gap: 6px; font-weight: normal; margin: 0; } /* Post grid */ .post-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 42vw), 1fr)); gap: 12px; } .post-grid .card { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .post-grid .card:hover { border-color: var(--accent); text-decoration: none; } .post-grid .thumb { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: calc(var(--radius) / 2); } .post-grid .pending-media { background: var(--border); object-fit: none; } .post-grid .is-pending { border-style: dashed; } .post-grid .is-deleted { opacity: 0.5; } .badge { position: absolute; top: 8px; right: 8px; padding: 1px 6px; border-radius: 4px; background: rgb(0 0 0 / 0.65); color: #fff; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; } .pager { display: flex; justify-content: center; margin: 24px 0 8px; } /* Post page */ .post-layout { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 900px) { .post-layout { grid-template-columns: minmax(0, 1fr) 280px; } .post-info { order: 2; } } .post-media img, .post-media video { display: block; max-width: 100%; height: auto; max-height: 85vh; width: auto; margin: 0 auto; border-radius: var(--radius); } .post-info h1 { font-size: 1.25rem; margin: 0 0 12px; } .post-info dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; } .post-info dt { color: var(--muted); } .post-info dd { margin: 0; } .source { overflow-wrap: anywhere; } .description { white-space: pre-wrap; } .notice { padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--muted); } .rating-e { color: var(--danger); } /* Tags */ :root { --tag-general: #0075f8; --tag-artist: #c00004; --tag-copyright: #a800aa; --tag-character: #00ab2c; --tag-meta: #d57800; } .tag { color: var(--tag-general); overflow-wrap: anywhere; } .tag-artist { color: var(--tag-artist); } .tag-copyright { color: var(--tag-copyright); } .tag-character { color: var(--tag-character); } .tag-meta { color: var(--tag-meta); } .tag.is-deprecated { text-decoration: line-through; } .count { color: var(--muted); font-size: 0.8125rem; } .tag-group h2 { font-size: 0.9375rem; margin: 16px 0 4px; } .tag-list { list-style: none; margin: 0; padding: 0; } .tag-list li { padding: 1px 0; } .filters { flex-direction: row; flex-wrap: wrap; align-items: end; gap: 4px 12px; margin-bottom: 16px; } .filters label { margin: 0; align-self: center; } .filters button[type="submit"] { margin-top: 0; padding: 6px 14px; } select { padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font: inherit; } .tag-table { width: 100%; border-collapse: collapse; } .tag-table th, .tag-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); } .tag-table .num { text-align: right; font-variant-numeric: tabular-nums; } .table-scroll { overflow-x: auto; } /* API reference */ .api-docs { max-width: 960px; margin: 0 auto; } .api-docs pre { overflow-x: auto; padding: 8px 12px; border-radius: var(--radius); background: var(--surface); } .api-docs pre code { padding: 0; background: none; } .api-toc ul { list-style: none; padding: 0; margin: 0 0 12px; } .api-toc li { padding: 2px 0; } .api-toc .toc-group { font-size: 1rem; margin: 16px 0 4px; } .api-op, .api-schema { margin: 16px 0; } .api-op h3, .api-schema h3 { margin-top: 0; overflow-wrap: anywhere; } .api-op h4 { margin: 16px 0 4px; font-size: 0.875rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .api-docs td p { margin: 0; } .method { display: inline-block; min-width: 4.5em; padding: 1px 6px; border-radius: 4px; font-size: 0.75rem; font-weight: 700; text-align: center; color: #fff; background: var(--muted); } .method-get { background: #2f7d32; } .method-post { background: #1f5fbf; } .method-put, .method-patch { background: #9a5b00; } .method-delete { background: #b3261e; } .required { font-size: 0.75rem; color: var(--danger); } /* On phones each row becomes a block: name and type, then the text. */ @media (max-width: 600px) { .api-docs table, .api-docs tbody, .api-docs tr, .api-docs td { display: block; } .api-docs thead { display: none; } .api-docs tr { padding: 6px 0; border-bottom: 1px solid var(--border); } .api-docs .tag-table td { padding: 2px 0; border: 0; } } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } code { font-size: 0.875em; padding: 1px 4px; border-radius: 4px; background: var(--border); } /* A secret shown once: selectable in one go, and wrapped on phones. */ code.secret { display: inline-block; overflow-wrap: anywhere; user-select: all; color: var(--text); } .subnav { display: flex; gap: 16px; margin-bottom: 8px; font-size: 0.9375rem; } .request-form { margin: 16px 0 24px; } .request-form h2 { margin: 0 0 4px; font-size: 1.125rem; } .pair { display: flex; flex-wrap: wrap; align-items: end; gap: 0 12px; } .pair > div { display: flex; flex-direction: column; flex: 1 1 200px; } .pair .arrow { padding-bottom: 8px; color: var(--muted); } button.secondary, .button.secondary { background: var(--border); color: var(--text); } .actions { display: flex; flex-wrap: wrap; gap: 6px; } .actions form { margin: 0; } .actions button { padding: 3px 10px; font-size: 0.875rem; } .status { font-size: 0.8125rem; font-weight: 600; text-transform: capitalize; } .status-active { color: var(--tag-character); } .status-pending { color: var(--tag-meta); } .status-rejected, .status-deleted { color: var(--muted); } /* Search */ .site-header .search { flex: 1 1 240px; max-width: 420px; } .site-header .search input { width: 100%; padding: 6px 10px; } .results-layout { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 900px) { .results-layout { grid-template-columns: 220px minmax(0, 1fr); } } .results-sidebar h2 { font-size: 0.9375rem; margin: 0 0 4px; } .result-count { color: var(--muted); margin: 0 0 12px; font-size: 0.875rem; } .refine { display: inline-block; width: 1em; color: var(--muted); text-align: center; } .refine:hover { color: var(--accent); text-decoration: none; } @media (max-width: 899px) { .results-sidebar { order: 2; } } .pager { flex-wrap: wrap; align-items: center; gap: 8px; } .pager .current { font-weight: 700; padding: 0 4px; } .pager .gap { color: var(--muted); } .pager a:not(.button) { padding: 0 4px; } .back { margin: 0 0 8px; overflow-wrap: anywhere; } /* Autocomplete (added by the script) */ .autocomplete-wrap { position: relative; display: flex; flex-direction: column; } .site-header .search .autocomplete-wrap { width: 100%; } .autocomplete { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 10; min-width: 240px; max-height: 320px; overflow-y: auto; margin: 0; padding: 4px 0; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 20px rgb(0 0 0 / 0.15); } .autocomplete [role="option"] { display: flex; align-items: baseline; gap: 6px; padding: 4px 10px; cursor: pointer; } .autocomplete [aria-selected="true"], .autocomplete [role="option"]:hover { background: var(--bg); } .autocomplete .count { margin-left: auto; } .autocomplete .antecedent, .autocomplete .metatag { color: var(--muted); } /* Post family and editing */ .family { margin-top: 16px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .family p { margin: 0 0 8px; } .family-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .family-cards img { display: block; max-width: 110px; max-height: 110px; width: auto; height: auto; border-radius: calc(var(--radius) / 2); } .family-cards .current img { outline: 2px solid var(--accent); outline-offset: 2px; } .edit { margin-top: 16px; max-width: 640px; } .edit summary { cursor: pointer; font-weight: 600; color: var(--accent); } .suggestions { margin-top: 20px; } .suggestions h3 { margin: 0 0 6px; font-size: 0.95rem; } .suggested-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .suggestions p { margin: 6px 0 0; } form .suggestions button[type="submit"] { margin: 0; padding: 3px 10px; font-size: 0.875rem; background: var(--border); color: var(--text); } .suggestions .confidence { color: var(--muted); font-size: 0.8em; } .suggestions button.chosen { opacity: 0.5; } /* History */ .history { list-style: none; margin: 0; padding: 0; } .history > li { padding: 12px 0; border-bottom: 1px solid var(--border); } .history-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; } .history-head form { margin: 0 0 0 auto; } .history-head button { padding: 3px 10px; font-size: 0.875rem; } .changes { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; } .changes .added { color: var(--tag-character); } .changes .removed { color: var(--danger); } .changes .removed a { text-decoration: line-through; } .changes .source { overflow-wrap: anywhere; } /* Wiki */ .wiki { max-width: 800px; } .wiki-head h1 { margin: 0; overflow-wrap: anywhere; } .wiki-head .hint { margin-bottom: 16px; } .wiki .notice { margin: 0 0 16px; } .markup { overflow-wrap: anywhere; } .markup > :first-child { margin-top: 0; } .markup > :last-child { margin-bottom: 0; } .markup h2, .markup h3, .markup h4, .markup h5, .markup h6 { margin: 20px 0 8px; } .markup ul { padding-left: 24px; } .wiki-excerpt { margin: 0 0 16px; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; } .wiki-excerpt .hint { margin-top: 6px; } .wiki-form { max-width: 800px; } .wiki-form textarea { font-family: ui-monospace, "Cascadia Code", Menlo, monospace; font-size: 0.875rem; } /* Comments */ .comments { margin-top: 24px; max-width: 800px; } .comments h2 { font-size: 1.125rem; margin: 0 0 12px; } .comments h2 .count { color: var(--muted); font-weight: normal; } .comment { padding: 10px 0; border-top: 1px solid var(--border); } .comment:target { background: var(--surface); outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; } .comment.is-deleted { opacity: 0.6; } .comment-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; margin-bottom: 4px; } .comment-author { font-weight: 600; } .comment-actions { display: flex; gap: 12px; align-items: baseline; margin-top: 6px; font-size: 0.875rem; } .comment-actions form { display: inline; } button.link { background: none; border: none; padding: 0; color: var(--accent); cursor: pointer; font: inherit; } button.link:hover { text-decoration: underline; } .comment-head .vote { margin-left: auto; font-size: 0.875rem; } .comment .collapsed summary { color: var(--muted); cursor: pointer; } details.inline { display: inline-block; } details.inline summary { color: var(--accent); cursor: pointer; list-style: none; } details.inline[open] { display: block; flex-basis: 100%; } .comment-actions { flex-wrap: wrap; } .comment-form { margin-top: 12px; } .comment-form textarea { width: 100%; } .markup blockquote { margin: 8px 0; padding: 4px 12px; border-left: 3px solid var(--border); color: var(--muted); } .comment-list { max-width: 1000px; } .comment-row { display: flex; gap: 16px; align-items: flex-start; border-top: 1px solid var(--border); padding: 8px 0; } .comment-row .comment { border-top: none; padding: 0; flex: 1; min-width: 0; } .comment-post { flex: 0 0 150px; } .comment-post img { display: block; max-width: 150px; max-height: 150px; width: auto; height: auto; border-radius: calc(var(--radius) / 2); } /* Pools */ .pool-description { max-width: 800px; margin-bottom: 16px; } .pool-order { list-style: none; margin: 8px 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: pool; } .pool-order li { position: relative; counter-increment: pool; cursor: grab; } .pool-order li::before { content: counter(pool); position: absolute; top: 2px; left: 4px; z-index: 1; font-size: 0.75rem; color: var(--accent-text); background: var(--accent); padding: 0 4px; border-radius: 4px; } .pool-order li.dragging { opacity: 0.4; } .pool-order img { display: block; max-width: 110px; max-height: 110px; width: auto; height: auto; } tr.is-deleted td { opacity: 0.6; } .pool-nav { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 8px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .pool-nav.current { border-color: var(--accent); } .pool-nav .pool-steps { display: flex; gap: 12px; white-space: nowrap; } .pool-nav .pool-steps span { color: var(--muted); opacity: 0.5; } .pool-nav .pool-name { text-align: center; overflow-wrap: anywhere; } .reader { max-width: 1000px; margin: 0 auto; } .reader-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px; } .reader-page { margin: 0 0 24px; text-align: center; } .reader-page img, .reader-page video { display: block; margin: 0 auto; max-width: 100%; height: auto; } .reader-page figcaption { margin-top: 4px; } .reader-pager { gap: 12px; } .reader-resume { margin: 0 0 16px; } /* Notes */ .note-text { white-space: pre-wrap; margin: 4px 0 0; } .note-layer { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; } .note-layer > a > img { display: block; } .notes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .note-box { fill: rgb(255 255 238 / 0.25); stroke: rgb(0 0 0 / 0.6); stroke-width: 1; pointer-events: all; cursor: help; } .note-box:hover, .note-box.active { fill: rgb(255 255 238 / 0.45); stroke: var(--accent); } .notes-hidden .notes { display: none; } .note-popup { position: absolute; z-index: 5; max-width: 320px; padding: 6px 10px; background: #ffe; color: #111; border: 1px solid #333; border-radius: 4px; box-shadow: 0 2px 8px rgb(0 0 0 / 0.25); font-size: 0.9375rem; } .note-popup .markup > :first-child { margin-top: 0; } .note-popup .markup > :last-child { margin-bottom: 0; } .note-list { margin-top: 8px; } .note-list ol { margin: 8px 0 0; padding-left: 24px; } .note-toggle { margin: 6px 6px 0 0; } .editing-notes .notes { pointer-events: all; cursor: crosshair; touch-action: none; } .editing-notes .note-box { cursor: move; fill: rgb(255 255 238 / 0.4); stroke: var(--accent); stroke-width: 2; } .note-box.draft { fill: rgb(255 255 238 / 0.3); stroke: var(--accent); stroke-dasharray: 4 3; } .note-form { max-width: 480px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .note-form textarea { width: 100%; } .note-form .actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; } .note-form[hidden], .note-popup[hidden] { display: none; } /* Tag scripts and mass edits */ .tag-script { margin-bottom: 16px; } .tag-script h2 { font-size: 1rem; margin: 0 0 6px; } .post-grid a.card.script-busy { opacity: 0.5; } .post-grid a.card.script-ok { outline: 3px solid var(--tag-character, #2b8a3e); outline-offset: 2px; } .post-grid a.card.script-failed { outline: 3px solid var(--danger); outline-offset: 2px; } .mass-preview { margin: 16px 0; } .bulk-script { padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; } .request-votes { margin: 16px 0; } .added { color: var(--tag-character); } .removed { color: var(--danger); } /* Votes and favorites */ .vote, .favorite { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; } button.icon { padding: 0 6px; background: none; color: var(--muted); font-size: 1rem; line-height: 1.4; border: 1px solid var(--border); } button.icon:hover { color: var(--accent); border-color: var(--accent); } button.icon[aria-pressed="true"] { color: var(--accent-text); background: var(--accent); border-color: var(--accent); } form.vote button[type="submit"], form.favorite button[type="submit"] { margin: 0; padding: 0 6px; } .score, .fav-count { font-variant-numeric: tabular-nums; min-width: 1.5em; text-align: center; } .facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; } .facts dt { color: var(--muted); } .facts dd { margin: 0; } .search-nav { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; } .search-nav .back { flex: 1; overflow-wrap: anywhere; } .search-nav a[rel] { font-size: 1.25rem; line-height: 1; padding: 2px 8px; border: 1px solid var(--border); border-radius: var(--radius); } .search-nav a[rel]:hover { border-color: var(--accent); text-decoration: none; } /* Keyboard shortcuts help (added by the script) */ .shortcuts { border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.5); background: var(--surface); color: var(--text); padding: 20px 24px; } .shortcuts::backdrop { background: rgb(0 0 0 / 0.4); } .shortcuts h2 { margin: 0 0 12px; font-size: 1.125rem; } .shortcuts dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 16px; } .shortcuts dt { font-family: ui-monospace, monospace; font-weight: 600; } .shortcuts dd { margin: 0; } /* Moderation */ .log { list-style: none; margin: 0; padding: 0; } .log > li { padding: 8px 0; border-bottom: 1px solid var(--border); } .log .reason { margin-top: 2px; } button.danger { background: var(--danger); } .moderate form + form { margin-top: 12px; } .review { list-style: none; margin: 0; padding: 0; } .review > li { display: flex; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); } .review-thumb img { display: block; max-width: 180px; max-height: 180px; width: auto; height: auto; border-radius: var(--radius); } .review-body { flex: 1; min-width: 0; } .review-body p { margin: 0 0 6px; } .review-tags { color: var(--muted); overflow-wrap: anywhere; } .actions form.reject { flex-direction: row; gap: 6px; } .actions form.reject input { padding: 3px 8px; } .plain { list-style: none; margin: 0 0 8px; padding: 0; } .status-open { color: var(--danger); } .status-dismissed, .status-upheld { color: var(--muted); } .flash.banned { border-left-color: var(--danger); } /* Admin */ form.inline { flex-direction: row; flex-wrap: wrap; gap: 6px; align-items: center; } form.inline select { padding: 3px 6px; } form.inline button { margin: 0; padding: 3px 10px; font-size: 0.875rem; } .role { margin-bottom: 16px; } .role h2 { margin: 0 0 4px; font-size: 1.125rem; } fieldset.permissions { border: 0; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 16px; } fieldset.permissions legend { font-weight: 600; margin-bottom: 4px; padding: 0; } .stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0 0 24px; } .stats > div { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .stats dt { color: var(--muted); font-size: 0.875rem; } .stats dd { margin: 4px 0 0; font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; } .log .actions { margin-top: 6px; } /* Two-factor login */ .qr { width: 200px; margin: 8px 0; } .qr svg { display: block; width: 100%; height: auto; border-radius: calc(var(--radius) / 2); } .secret { overflow-wrap: anywhere; } .recovery-codes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(9em, 1fr)); gap: 4px 16px; } .recovery-codes code { font-size: 1rem; } /* Single sign-on */ .sso { display: block; text-align: center; } .plain-list { list-style: none; padding: 0; margin: 0 0 12px; } .plain-list li { padding: 4px 0; }