/* ============================================================================ Topics — category rail, filters, paginated card grid ---------------------------------------------------------------------------- Everything is prefixed .tp-. The page still loads Phoenix's theme.min.css for the navbar, footer and the topic modal, so this sheet deliberately styles only the catalogue between them and never reaches for a bare element selector. ========================================================================= */ :root { --tp-ink: #16203a; --tp-violet-t: #4f46e5; /* accent as text; see the dark block */ --tp-muted: #77839f; --tp-line: rgba(27, 45, 90, .09); --tp-card: #fff; --tp-soft: #f7f8fc; --tp-violet:#4f46e5; --tp-chip: #f1f5f9; } [data-bs-theme="dark"] { /* Accent TEXT only. --tp-violet stays put because it also fills the primary buttons, where white-on-indigo is correct; as text on the dark card it measured 2.7:1. */ --tp-violet-t: #a5b4fc; --tp-ink: #f2f4fb; --tp-muted: #98a2be; --tp-line: #2b3247; --tp-card: #171c2c; --tp-soft: #1c2233; --tp-chip: #232a3d; } /* The reference lays the whole directory over a faint dot grid. Painted on the page shell rather than so it stops at the footer and never reaches another page. */ .tp-body { background-image: radial-gradient(rgba(148, 163, 184, .38) 1.2px, transparent 1.2px); background-size: 24px 24px; } [data-bs-theme="dark"] .tp-body { background-image: radial-gradient(rgba(148, 163, 184, .13) 1.2px, transparent 1.2px); } .tp-shell { display: grid; gap: 1.2rem; align-items: start; grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr); margin-bottom: 2rem; } @media (max-width: 991.98px) { .tp-shell { grid-template-columns: 1fr; } } /* ---- sidebar ---- */ /* The rail is now the column, not the panel - each group carries its own card, which is what separates "what am I looking at" from "how am I narrowing it" without a hairline rule. */ .tp-side { display: flex; flex-direction: column; gap: 1.15rem; position: sticky; top: 1rem; } .tp-scard { background: var(--tp-card); border: 1px solid var(--tp-line); border-radius: 1rem; padding: 1.25rem; box-shadow: 0 2px 10px rgba(15, 23, 42, .03); } @media (max-width: 991.98px) { .tp-side { position: static; } } .tp-side-h { font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #8a94b4; margin: 0 0 .7rem; } .tp-side-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .85rem; } .tp-side-head .tp-side-h { margin: 0; } .tp-side-head.is-sub { margin-top: 1.5rem; } .tp-clear { margin-left: auto; background: none; border: 0; padding: 0; cursor: pointer; font-size: .74rem; font-weight: 650; color: var(--tp-violet-t); } .tp-clear:hover { text-decoration: underline; } .tp-cats { display: flex; flex-direction: column; gap: .2rem; } .tp-cat { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; padding: .5rem .6rem; border: 0; border-radius: .7rem; background: none; cursor: pointer; font-size: .84rem; color: var(--tp-ink); transition: background .14s ease, color .14s ease; } .tp-cat:hover:not(:disabled) { background: var(--tp-soft); } .tp-cat.active { background: #eef2ff; color: #4338ca; font-weight: 700; } [data-bs-theme="dark"] .tp-cat.active { background: rgba(129, 140, 248, .16); color: #c4b5fd; } .tp-cat:disabled { opacity: .42; cursor: default; } .tp-cico { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: .5rem; display: grid; place-items: center; font-size: .78rem; } .tp-cname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tp-cat b { flex: 0 0 auto; font-size: .72rem; font-weight: 700; color: var(--tp-muted); background: var(--tp-chip); padding: .1rem .5rem; border-radius: 999px; font-variant-numeric: tabular-nums; } .tp-cat.active b { color: var(--tp-violet); background: var(--tp-card); } [data-bs-theme="dark"] .tp-cat.active b { color: #c4b5fd; } /* One hue per category, used by the rail icon, the pill and the card badge, so a category is the same colour everywhere it appears. */ .c-all { color: #4f46e5; --tp-hue: #4f46e5; background: rgba(79, 70, 229, .12); } .c-java { color: #dc2626; --tp-hue: #dc2626; background: rgba(220, 38, 38, .12); } .c-spring { color: #16a34a; --tp-hue: #16a34a; background: rgba(22, 163, 74, .12); } .c-hib { color: #0891b2; --tp-hue: #0891b2; background: rgba(8, 145, 178, .12); } .c-kafka { color: #d97706; --tp-hue: #d97706; background: rgba(217, 119, 6, .13); } .c-sql { color: #2563eb; --tp-hue: #2563eb; background: rgba(37, 99, 235, .12); } .c-kong { color: #7c3aed; --tp-hue: #7c3aed; background: rgba(124, 58, 237, .12); } .tp-fgroup { border: 0; padding: 0; margin: 0 0 1rem; } .tp-flabel { display: block; float: none; width: auto; padding: 0; font-size: .78rem; font-weight: 700; color: var(--tp-ink); margin-bottom: .45rem; } .tp-check { display: flex; align-items: center; gap: .55rem; padding: .3rem 0; font-size: .82rem; color: var(--tp-muted); cursor: pointer; } .tp-check input { width: 1rem; height: 1rem; accent-color: var(--tp-violet); cursor: pointer; flex: 0 0 auto; } .tp-check span { flex: 1 1 auto; } .tp-check b { font-size: .72rem; font-weight: 650; color: #a8b0c6; font-variant-numeric: tabular-nums; } /* ---- main ---- */ .tp-main { min-width: 0; } .tp-head { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; } .tp-head-txt { flex: 1 1 16rem; min-width: 0; } .tp-head-txt h1 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -.03em; color: var(--tp-ink); } .tp-head-txt p { margin: .25rem 0 0; font-size: .88rem; color: var(--tp-muted); } .tp-search { position: relative; flex: 1 1 22rem; min-width: 0; display: flex; } .tp-search > .fa-magnifying-glass { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #98a2b8; font-size: .9rem; pointer-events: none; } .tp-search input { width: 100%; padding: .7rem 1rem .7rem 2.5rem; border-radius: .625rem; background: var(--tp-card); border: 1px solid var(--tp-line); color: var(--tp-ink); font-size: .88rem; } .tp-search input:focus { outline: none; border-color: rgba(79, 70, 229, .45); box-shadow: 0 0 0 .18rem rgba(79, 70, 229, .12); } /* No submit button: the reference has a bare field, so the page searches as you type (debounced in topics.html) and Enter still submits for anyone who reaches for it. */ .tp-post { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; padding: .7rem 1.15rem; border-radius: 0; font-size: .875rem; font-weight: 600; color: #fff; background: var(--tp-violet); box-shadow: 0 4px 12px rgba(79, 70, 229, .25); } .tp-post:hover { color: #fff; filter: brightness(1.07); } .tp-pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; } .tp-pill { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; padding: .55rem 1rem; border-radius: .8rem; font-size: .85rem; font-weight: 650; background: var(--tp-card); border: 1px solid var(--tp-line); color: var(--tp-ink); transition: border-color .14s ease, transform .14s ease; } .tp-pill:hover { transform: translateY(-1px); border-color: rgba(79, 70, 229, .35); } .tp-pill b { font-size: .74rem; font-weight: 700; color: #8a94b4; font-variant-numeric: tabular-nums; } /* Solid, and in ink rather than a hue - it has to beat several tinted neighbours, and a fill that borrowed the category colour would compete with the tag on every card below. Reading the fill from --tp-ink means it inverts by itself in dark mode instead of going white on white. */ .tp-pill.active { background: var(--tp-ink); border-color: var(--tp-ink); color: var(--tp-card); font-weight: 700; } .tp-pill.active:hover { background: var(--tp-ink); transform: none; } .tp-pill.active b { color: inherit; opacity: .7; background: none; } .tp-tools { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .tp-showing { font-size: .85rem; color: var(--tp-muted); } .tp-tools-right { margin-left: auto; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; } .tp-sortby { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-size: .8rem; color: var(--tp-muted); white-space: nowrap; } .tp-sel { position: relative; display: inline-flex; } .tp-sel select { appearance: none; -webkit-appearance: none; padding: .5rem 2rem .5rem .8rem; border-radius: .6rem; background: var(--tp-card); border: 1px solid var(--tp-line); color: var(--tp-ink); font-size: .82rem; font-weight: 650; cursor: pointer; } .tp-sel select:focus { outline: none; border-color: rgba(79, 70, 229, .45); box-shadow: 0 0 0 .18rem rgba(79, 70, 229, .12); } .tp-sel > .fa-chevron-down { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); color: #8a94b4; font-size: .66rem; pointer-events: none; } .tp-view { display: inline-flex; gap: .2rem; padding: .2rem; border-radius: .6rem; background: var(--tp-soft); border: 1px solid var(--tp-line); } .tp-viewbtn { width: 2rem; height: 2rem; border: 0; border-radius: .45rem; background: none; cursor: pointer; color: #8a94b4; font-size: .78rem; display: grid; place-items: center; } .tp-viewbtn.active { background: var(--tp-card); color: var(--tp-violet-t); box-shadow: 0 1px 3px rgba(22, 20, 58, .12); } /* ---- cards ---- */ .tp-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); } .tp-grid.is-list { grid-template-columns: 1fr; } .tp-card { position: relative; display: flex; flex-direction: column; gap: .7rem; cursor: pointer; padding: 1.4rem; border-radius: 1rem; background: var(--tp-card); border: 1px solid var(--tp-line); box-shadow: 0 2px 6px rgba(15, 23, 42, .02); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } /* Neutral on hover. The category hue is already carried by the tag; lifting the border to it as well made a grid of mixed categories flicker between six colours as the pointer moved. */ .tp-card:hover { transform: translateY(-3px); border-color: #cbd5e1; box-shadow: 0 12px 24px -8px rgba(15, 23, 42, .08); } [data-bs-theme="dark"] .tp-card:hover { border-color: #3a4360; } .tp-card-top { display: flex; align-items: center; gap: .5rem; } /* Inherits the card's category colour, which .c-* set on the card itself. */ .tp-cat-badge { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .18rem .5rem; border-radius: .25rem; color: inherit; background: color-mix(in srgb, currentColor 13%, transparent); } .tp-acc { margin-left: auto; font-size: .68rem; font-weight: 700; padding: .24rem .6rem; border-radius: 999px; white-space: nowrap; } .tp-acc.open { color: #15803d; background: rgba(22, 163, 74, .12); } .tp-acc.login { color: #56658a; background: rgba(27, 45, 90, .08); } .tp-acc.pro { color: #b45309; background: rgba(245, 158, 11, .16); } [data-bs-theme="dark"] .tp-acc.open { color: #4ade80; } [data-bs-theme="dark"] .tp-acc.login { color: #a8b1cd; background: #232a3d; } [data-bs-theme="dark"] .tp-acc.pro { color: #fbbf24; } .tp-card-title { display: flex; align-items: flex-start; gap: .55rem; margin: 0; font-size: .98rem; font-weight: 750; line-height: 1.35; } .tp-card-title a { color: var(--tp-ink); text-decoration: none; } .tp-grid:not(.is-list) .tp-card-title { min-height: 3.55rem; } /* Covers the card so the whole tile is the hit area, while the anchor stays a real link for crawlers and middle-click. */ .tp-card-title a::after { content: ""; position: absolute; inset: 0; } .tp-doc { flex: 0 0 auto; color: inherit; font-size: .85rem; margin-top: .1rem; } .tp-doc.locked { color: #8a94b4; } .tp-card-foot { display: flex; align-items: center; gap: .6rem; margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--tp-line); font-size: .74rem; color: var(--tp-muted); } .tp-by { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; } .tp-by b { font-weight: 650; color: var(--tp-ink); } .tp-by i { font-style: normal; opacity: .5; margin: 0 .1rem; } .tp-av { flex: 0 0 auto; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; font-size: .64rem; font-weight: 700; color: #fff; background: #a8b0c6; } .tp-av.is-admin { background: linear-gradient(135deg, #6366f1, #4f46e5); } .tp-views { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; font-weight: 650; white-space: nowrap; } .tp-empty { grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; color: var(--tp-muted); font-size: .9rem; } /* ---- pager ---- */ .tp-pager { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .35rem; margin-top: 1.6rem; } .tp-page { /* Square, with the rest of the buttons. A pager is a row of small cells, so the corners are the only thing separating it from a table - the 1px border and the gap carry that now. */ min-width: 2.25rem; height: 2.25rem; padding: 0 .5rem; border-radius: 0; cursor: pointer; background: var(--tp-card); border: 1px solid var(--tp-line); color: var(--tp-ink); font-size: .84rem; font-weight: 650; display: grid; place-items: center; transition: background .14s ease, border-color .14s ease, color .14s ease; } .tp-page:hover:not(:disabled):not(.active) { border-color: rgba(79, 70, 229, .4); color: var(--tp-violet-t); } .tp-page.active { background: var(--tp-violet); border-color: var(--tp-violet); color: #fff; } .tp-page:disabled { opacity: .4; cursor: default; } .tp-page.nav { color: #8a94b4; } .tp-dots { display: grid; place-items: center; min-width: 1.6rem; color: #a8b0c6; } @media (max-width: 767.98px) { .tp-head { flex-direction: column; align-items: stretch; } .tp-post { justify-content: center; } .tp-tools-right { width: 100%; } } @media (prefers-reduced-motion: reduce) { .tp-card, .tp-pill { transition: none; } .tp-card:hover, .tp-pill:hover { transform: none; } } /* ============================================================================ Topic detail dialog ---------------------------------------------------------------------------- Opened from a card, so it is built from the same parts: the category hue is on .modal-content (JS sets .c-java / .c-kafka / ...) and the badge, title rule and Run button all read it from there via currentColor. ========================================================================= */ .tp-modal .modal-content { border: 1px solid var(--tp-line); border-radius: 1rem; overflow: hidden; background: var(--tp-card); box-shadow: 0 24px 48px -12px rgba(15, 23, 42, .25); } .tp-modal .modal-dialog { max-width: min(72rem, calc(100vw - 2rem)); } /* ---- header ---- */ .tp-m-head { position: relative; padding: 1.4rem 4.25rem 1.2rem 1.5rem; border-bottom: 1px solid var(--tp-line); /* The same dot grid the catalogue is laid on, so the dialog reads as a panel lifted off that page rather than a surface of its own. */ background-color: var(--tp-card); background-image: radial-gradient(rgba(148, 163, 184, .3) 1.2px, transparent 1.2px); background-size: 24px 24px; } [data-bs-theme="dark"] .tp-m-head { background-image: radial-gradient(rgba(148, 163, 184, .1) 1.2px, transparent 1.2px); } .tp-m-badges { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; } /* The access chip sits beside the category rather than being pushed to the far edge, which is where the card puts it - in a 72rem dialog that would strand it on its own. */ .tp-m-head .tp-acc { margin-left: 0; } .tp-m-title { margin: 0; font-size: clamp(1.1rem, 2.2vw, 1.4rem); font-weight: 750; line-height: 1.35; letter-spacing: -.015em; color: var(--tp-ink); } .tp-m-meta { display: flex; align-items: center; gap: .4rem; margin-top: .7rem; font-size: .76rem; color: var(--tp-muted); } .tp-m-meta b { font-weight: 650; color: var(--tp-ink); } .tp-m-meta i { font-style: normal; opacity: .5; margin: 0 .1rem; } .tp-m-close { position: absolute; top: 1rem; right: 1rem; width: 2.25rem; height: 2.25rem; border-radius: .375rem; cursor: pointer; display: grid; place-items: center; font-size: .9rem; background: var(--tp-card); border: 1px solid var(--tp-line); color: var(--tp-muted); transition: background .14s ease, color .14s ease; } .tp-m-close:hover { background: var(--tp-soft); color: var(--tp-ink); } /* ---- body ---- */ .tp-m-body { padding: 1.3rem 1.5rem; } .tp-m-desc { margin: 0 0 1.1rem; font-size: .92rem; line-height: 1.65; color: var(--tp-muted); } .tp-m-panes { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 991.98px) { .tp-m-panes { grid-template-columns: 1fr; } } .tp-m-pane { min-width: 0; } .tp-m-pane-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .45rem; } .tp-m-pane-head h3 { margin: 0; display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 700; color: var(--tp-ink); } .tp-m-pane-head h3 .fa-solid { color: currentColor; opacity: .75; font-size: .78rem; } /* The editor pane keeps its own dark ground in BOTH themes: it is a screenshot of a terminal, and a light code block here would be the only surface on the page pretending to be one. */ .tp-modal pre.jch-code { background: #0d1117; color: #e6edf3; margin: 0; padding: 1rem 1.1rem; border-radius: .625rem; border: 1px solid #1f2937; font-size: .84rem; line-height: 1.6; max-height: 52vh; overflow: auto; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .jch-copy-btn { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--tp-line); background: var(--tp-soft); color: var(--tp-muted); border-radius: .375rem; padding: .25rem .6rem; font-size: .74rem; font-weight: 650; line-height: 1.4; cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease; } .jch-copy-btn:hover { color: var(--tp-ink); border-color: rgba(79, 70, 229, .4); } .jch-copy-btn.copied { background: rgba(22, 163, 74, .12); border-color: rgba(22, 163, 74, .35); color: #15803d; } [data-bs-theme="dark"] .jch-copy-btn.copied { color: #4ade80; } .output-img { max-width: 100%; border: 1px solid var(--tp-line); border-radius: .625rem; margin-top: .6rem; } /* ---- footer ---- */ .tp-m-foot { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.5rem; border-top: 1px solid var(--tp-line); background: var(--tp-soft); } .tp-m-link { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; font-size: .82rem; font-weight: 650; color: var(--tp-muted); } .tp-m-link:hover { color: var(--tp-violet-t); } .tp-m-actions { margin-left: auto; display: flex; align-items: center; gap: .6rem; } .tp-m-run, .tp-m-close-btn { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; padding: .65rem 1.15rem; border-radius: 0; font-size: .875rem; font-weight: 600; transition: filter .14s ease, background .14s ease, border-color .14s ease; } /* Indigo, not the category hue. It is the primary action here, and the page now has exactly one primary colour - the same one "Post a topic" wears - so a reader learns the fill once instead of relearning it per category. */ .tp-m-run { border: 0; color: #fff; background: var(--tp-violet); box-shadow: 0 4px 12px rgba(79, 70, 229, .25); } .tp-m-run:hover { background: #4338ca; filter: none; } .tp-m-run > * { color: #fff; } .tp-m-run:hover { filter: brightness(1.08); } .tp-m-close-btn { background: var(--tp-card); border: 1px solid var(--tp-line); color: var(--tp-ink); } .tp-m-close-btn:hover { border-color: rgba(79, 70, 229, .4); color: var(--tp-violet-t); } /* Slate rather than Bootstrap's pure black, matching the ink the rest of the page uses. */ .tp-modal + .modal-backdrop.show, .modal-backdrop.show { opacity: 1; background: rgba(15, 23, 42, .55); } @media (max-width: 575.98px) { .tp-m-head { padding: 1.1rem 3.9rem 1rem 1.1rem; } .tp-m-body, .tp-m-foot { padding-inline: 1.1rem; } .tp-m-actions { width: 100%; } .tp-m-actions > * { flex: 1 1 auto; justify-content: center; } } /* ============================================================================ Post a Topic ---------------------------------------------------------------------------- Same surfaces, hues and controls as the topics catalogue, so submitting a topic looks like part of the page you submit it to. ========================================================================= */ .tp-crumb { margin: 0 0 1rem; font-size: .82rem; } .tp-crumb a { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; color: var(--tp-muted); font-weight: 650; } .tp-crumb a:hover { color: var(--tp-violet-t); } .tp-post-head { margin-bottom: 1.2rem; } .tp-form { display: grid; gap: 1.2rem; align-items: start; margin-bottom: 2rem; grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); } @media (max-width: 991.98px) { .tp-form { grid-template-columns: 1fr; } } .tp-form-main { background: var(--tp-card); border: 1px solid var(--tp-line); border-radius: 1.25rem; padding: 1.4rem 1.5rem; box-shadow: 0 1px 2px rgba(22, 20, 58, .04); } .tp-field { border: 0; padding: 0; margin: 0 0 1.3rem; } .tp-field:last-of-type { margin-bottom: 0; } .tp-label { display: flex; align-items: center; gap: .45rem; float: none; width: auto; font-size: .84rem; font-weight: 700; color: var(--tp-ink); margin-bottom: .5rem; } .tp-label .fa-solid { color: var(--tp-muted); font-size: .8rem; } /* "required" as a quiet word rather than a red asterisk, which means nothing on its own to anyone who has not been taught the convention. */ .tp-label em { font-style: normal; font-size: .7rem; font-weight: 650; color: var(--tp-muted); background: var(--tp-soft); border-radius: .35rem; padding: .12rem .4rem; } .tp-input { display: block; width: 100%; padding: .75rem .9rem; border-radius: .7rem; background: var(--tp-card); border: 1px solid var(--tp-line); color: var(--tp-ink); font-size: .9rem; line-height: 1.6; } .tp-input::placeholder { color: #a8b0c6; } .tp-input:focus { outline: none; border-color: rgba(79, 70, 229, .45); box-shadow: 0 0 0 .18rem rgba(79, 70, 229, .12); } textarea.tp-input { resize: vertical; } .tp-help { display: flex; align-items: baseline; gap: 1rem; margin-top: .4rem; font-size: .74rem; color: var(--tp-muted); } .tp-help b { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; } .tp-help b.near { color: #b45309; } /* The code fields keep the dark editor ground the detail dialog uses, so what you type here looks like what will be shown there. */ .tp-code { background: #0d1117; color: #e6edf3; border-color: #1f2937; font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .84rem; line-height: 1.6; tab-size: 2; } .tp-code::placeholder { color: #6b7689; } .tp-code:focus { background: #0d1117; color: #e6edf3; border-color: rgba(124, 108, 243, .6); box-shadow: 0 0 0 .18rem rgba(124, 108, 243, .18); } .tp-code-pair { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 767.98px) { .tp-code-pair { grid-template-columns: 1fr; } } /* ---- category picker ---- */ .tp-picker { display: flex; flex-wrap: wrap; gap: .5rem; } .tp-pick { position: relative; display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; padding: .55rem 1rem; border-radius: .7rem; font-size: .85rem; font-weight: 650; background: var(--tp-card); border: 1px solid var(--tp-line); color: var(--tp-ink); transition: border-color .14s ease, background .14s ease; } .tp-pick input { position: absolute; opacity: 0; pointer-events: none; } .tp-pick > .fa-solid, .tp-pick > .fa-brands { color: var(--tp-hue, var(--tp-violet)); font-size: .85rem; } .tp-pick:hover { border-color: var(--tp-hue, var(--tp-violet)); } /* The chosen one fills with its own category colour - the same colour the topic will wear on the catalogue, so the choice shows its own consequence. */ .tp-pick:has(input:checked) { background: color-mix(in srgb, var(--tp-hue, #4f46e5) 12%, transparent); border-color: var(--tp-hue, #4f46e5); color: var(--tp-hue, #4f46e5); font-weight: 750; } .tp-pick:has(input:focus-visible) { outline: 2px solid var(--tp-hue, #4f46e5); outline-offset: 2px; } .tp-form-foot { display: flex; align-items: center; justify-content: flex-end; gap: .7rem; margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--tp-line); } .tp-form-foot .tp-post { padding: .7rem 1.4rem; } /* ---- side rail ---- */ .tp-form-side { background: var(--tp-card); border: 1px solid var(--tp-line); border-radius: 1.25rem; padding: 1.2rem 1.3rem; box-shadow: 0 1px 2px rgba(22, 20, 58, .04); position: sticky; top: 1rem; } @media (max-width: 991.98px) { .tp-form-side { position: static; } } .tp-form-side .tp-side-h:not(:first-child) { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--tp-line); } .tp-steps { list-style: none; counter-reset: s; margin: 0; padding: 0; } .tp-steps li { position: relative; counter-increment: s; padding: 0 0 1rem 2.1rem; } .tp-steps li:last-child { padding-bottom: 0; } .tp-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #6366f1, #4f46e5); } /* The rail joining the steps, drawn on the item so the last one has none. */ .tp-steps li:not(:last-child)::after { content: ""; position: absolute; left: .72rem; top: 1.7rem; bottom: .3rem; width: 1px; background: var(--tp-line); } .tp-steps b { display: block; font-size: .84rem; font-weight: 700; color: var(--tp-ink); } .tp-steps i { display: block; font-style: normal; font-size: .76rem; line-height: 1.5; color: var(--tp-muted); margin-top: .1rem; } .tp-tips { list-style: none; margin: 0; padding: 0; } .tp-tips li { position: relative; padding: 0 0 .6rem 1.4rem; font-size: .78rem; line-height: 1.55; color: var(--tp-muted); } .tp-tips li:last-child { padding-bottom: 0; } .tp-tips li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: .05rem; font-size: .68rem; color: #16a34a; } /* ---- notices ---- */ .tp-note { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: 1.2rem; padding: .95rem 1.1rem; border-radius: .9rem; font-size: .85rem; line-height: 1.55; } .tp-note b { display: block; font-weight: 750; margin-bottom: .1rem; } .tp-note .fa-solid { margin-top: .15rem; font-size: .95rem; } .tp-note.ok { background: rgba(22, 163, 74, .1); border: 1px solid rgba(22, 163, 74, .25); color: #15803d; } .tp-note.bad { background: rgba(220, 38, 38, .09); border: 1px solid rgba(220, 38, 38, .25); color: #b91c1c; } [data-bs-theme="dark"] .tp-note.ok { color: #4ade80; } [data-bs-theme="dark"] .tp-note.bad { color: #fca5a5; } /* ============================================================================ Floating scroll-to-top ---------------------------------------------------------------------------- The reference pairs this with a chat bubble; there is no chat here, so only the button that does something real is drawn. Hidden until there is something to scroll back from. ========================================================================= */ .tp-float { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; font-size: 1rem; background: var(--tp-violet); color: #fff; box-shadow: 0 4px 14px rgba(79, 70, 229, .4); opacity: 0; visibility: hidden; transform: translateY(.5rem); transition: opacity .2s ease, transform .2s ease, visibility .2s; } .tp-float.is-on { opacity: 1; visibility: visible; transform: none; } .tp-float:hover { background: #4338ca; } @media (prefers-reduced-motion: reduce) { .tp-float { transition: none; } } /* Focus rings, brightened for dark. The light-mode indigo at 45% over a #171c2c field is barely distinguishable from the resting border - and this is the affordance a keyboard user navigates by. */ [data-bs-theme="dark"] .tp-search input:focus, [data-bs-theme="dark"] .tp-sel select:focus, [data-bs-theme="dark"] .tp-input:focus { border-color: var(--tp-violet-t); box-shadow: 0 0 0 .18rem rgba(165, 180, 252, .22); }