/* Moekura base styles. Override by placing css/main.css in paths.static_override. Colours are tokens so themes can swap them. The tokens here are the default theme. Other themes are files in themes/ that set the same tokens again; the page loads the chosen one after this file. Each colour is light-dark(, ): the browser's preference picks one unless the user chose a mode (data-mode on ). */ :root { color-scheme: light dark; --bg: light-dark(#f7f7f8, #141416); --surface: light-dark(#ffffff, #1c1c1f); --text: light-dark(#1b1b1f, #ececef); --muted: light-dark(#63636b, #a1a1aa); --border: light-dark(#e2e2e6, #323238); --accent: light-dark(#3451b2, #8fa3f0); --accent-text: light-dark(#ffffff, #141416); --danger: light-dark(#c92a2a, #ff8787); /* Tag colours, each at least 4.5:1 against --bg and --surface. */ --tag-general: light-dark(#0068e0, #4fa3ff); --tag-artist: light-dark(#c00004, #ff8a8b); --tag-copyright: light-dark(#a800aa, #d98cff); --tag-character: light-dark(#007e25, #35c64a); --tag-meta: light-dark(#ad5c00, #ffb54a); --radius: 8px; --gutter: 16px; --max-width: 1200px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.5; } :root[data-mode="light"] { color-scheme: light; } :root[data-mode="dark"] { color-scheme: dark; } * { 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; flex-wrap: wrap; gap: 4px 16px; flex: 1 1 auto; } .primary a[aria-current] { color: var(--text); font-weight: 600; text-decoration: underline 2px var(--accent); text-underline-offset: 6px; } .account { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; } .account form { margin: 0; } .who { color: var(--muted); } /* Phones: brand and account on the first row, search on its own row, then the links, wrapping as needed. */ @media (max-width: 699px) { .site-header { gap: 8px 16px; } .brand { flex: 1; } .account { order: 1; } .site-header .search { order: 2; flex-basis: 100%; max-width: none; } .primary { order: 3; flex-basis: 100%; } } /* One focus ring for everything the keyboard can reach. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 1px; border-color: transparent; } button:focus-visible, .button:focus-visible { outline-color: var(--text); } @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .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; border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; } button.link:hover { text-decoration: underline; } /* Not the spacing of full-size form buttons. */ form button.link[type="submit"] { margin: 0; padding: 0; } button.secondary, .button.secondary { background: var(--border); color: var(--text); } button.danger { background: var(--danger); color: var(--accent-text); } /* Compact buttons and selects, for rows of actions. */ .actions button, form.inline button, .history-head button, form .suggestions button[type="submit"] { margin: 0; padding: 3px 10px; font-size: 0.875rem; } form.inline select { padding: 3px 6px; } .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; } 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; } input[type="file"] { padding: 6px; } fieldset.ratings, fieldset.locks { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 12px 0 0; padding: 0; border: 0; } fieldset.ratings legend, fieldset.locks legend { font-weight: 600; margin-bottom: 4px; padding: 0; } fieldset.group { display: flex; flex-direction: column; margin: 16px 0 0; padding: 4px 14px 14px; border: 1px solid var(--border); border-radius: var(--radius); } fieldset.group legend { font-weight: 600; padding: 0 4px; } 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-links { display: flex; flex-wrap: wrap; gap: 4px 12px; } .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 */ .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; } kbd { font: 600 0.8125rem ui-monospace, monospace; padding: 0 5px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; } 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; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 8px; font-size: 0.9375rem; } .subnav a[aria-current] { color: var(--text); font-weight: 600; } .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); } .actions { display: flex; flex-wrap: wrap; gap: 6px; } .actions form { margin: 0; } .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: 240px 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; } /* 24px at least, so they can be hit on a touch screen. */ .refine { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; border-radius: 4px; color: var(--muted); vertical-align: middle; } .refine:hover { color: var(--accent); background: var(--surface); text-decoration: none; } /* Buttons in a row, then the name, which wraps beside them. */ .tag-list li:has(> .refine) { display: flex; align-items: baseline; gap: 0 4px; } .tag-list li:has(> .refine) .tag { min-width: 0; } .tag-list li:has(> .refine) .count { margin-left: 2px; white-space: nowrap; } .tag-script input[type="text"] { width: 100%; } @media (max-width: 899px) { .results-sidebar { order: 2; } } .pager .button { background: var(--border); color: var(--text); } .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"] { 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; } .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; flex-wrap: wrap; gap: 12px; align-items: baseline; margin-top: 6px; font-size: 0.875rem; } .comment-actions form { display: inline; } .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-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; } .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 > li > input[type="checkbox"] { align-self: flex-start; margin-top: 4px; } .bulk-review { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 6px 12px; padding: 10px 12px; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .bulk-review .hint { flex-basis: 100%; margin: 0; } .bulk-review label.choice { margin: 0; } .bulk-review button { margin-top: 0; } .bulk-review select, .bulk-review input:not([type="checkbox"]) { width: auto; } html:not(.js) .select-all { display: none; } .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; } .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; } /* Messages from scripts (toast.ts) */ .toasts { position: fixed; bottom: 16px; left: 50%; translate: -50% 0; z-index: 20; display: flex; flex-direction: column; gap: 8px; width: max-content; max-width: calc(100% - 32px); margin: 0; padding: 0; list-style: none; pointer-events: none; } .toast { padding: 10px 14px; border: 1px solid var(--border); border-left: 4px solid var(--danger); border-radius: var(--radius); background: var(--surface); box-shadow: 0 6px 20px rgb(0 0 0 / 0.15); } /* Footer */ .site-footer p { margin: 4px 0; } .site-footer .appearance { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 24px; } .site-footer form { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; } .site-footer label { font-weight: normal; margin: 0; } .site-footer select { padding: 2px 6px; font-size: inherit; } .js .site-footer [data-autosubmit] button { display: none; } .site-footer button.link[aria-pressed="true"] { color: var(--text); font-weight: 600; } /* Upload: the native file picker remains available without JavaScript. */ .upload-drop-zone { display: flex; flex-direction: column; } .upload-drop-zone.enhanced { padding: 12px; border: 2px dashed var(--border); border-radius: var(--radius); } .upload-drop-zone input { min-width: 0; } .upload-drop-zone.enhanced label { margin-top: 0; } .upload-drop-zone.dragging { border-color: var(--accent); background: var(--surface); }