/* qpoints/assets/css/qp-shell.css */ /* The app shell + component kit shared by all Q-Points layouts. */ /* Structure contract every layout template renders: */ /* */ /* */ /*

*/ /* */ /* (icon rail / sidebar) */ /*

…

*/ /* */ /* */ /* (phone bottom bar) */ /*

*/ /* */ /* */ /* Everything below is `qp-` prefixed so legacy base.css components (.button, */ /* .custom-modal, .form-group) keep working on pages that mix the two. */ /* ============================================================ 1. Page reset for redesigned pages ============================================================ */ body.qp { margin: 0; display: block; /* overrides base.css flex column body */ min-height: 100vh; min-height: 100dvh; font-family: var(--qp-font-ui); font-size: var(--qp-text-base); line-height: var(--qp-leading-base); color: var(--qp-ink); background-color: var(--qp-canvas); -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; } .qp *, .qp *::before, .qp *::after { box-sizing: border-box; } .qp h1, .qp h2, .qp h3, .qp h4, .qp h5, .qp h6 { margin: 0; font-weight: 800; line-height: var(--qp-leading-tight); letter-spacing: -.02em; color: inherit; } .qp p { margin: 0; } .qp ul, .qp ol { margin: 0; padding: 0; list-style: none; } .qp img, .qp svg { max-width: 100%; } /* Links inherit their surrounding text colour — EXCEPT ones styled as buttons. `.qp a` is (0,1,1) and would otherwise beat `.qp-btn--primary` (0,1,0), leaving every with body ink on an accent fill instead of its intended on-fill colour. */ .qp a:not(.qp-btn) { color: inherit; text-decoration: none; } .qp a:not(.qp-btn):hover { color: inherit; text-decoration: none; } .qp a.qp-btn { text-decoration: none; } .qp button, .qp input, .qp select, .qp textarea { font: inherit; color: inherit; } .qp button { cursor: pointer; } /* Long unbreakable strings — file paths, emails, tickers — must not widen the page on a narrow phone. */ .qp code, .qp kbd, .qp samp { padding: 1px 5px; border-radius: var(--qp-radius-xs); background: var(--qp-surface-inset); font-family: var(--qp-font-mono); font-size: .92em; overflow-wrap: anywhere; word-break: break-word; } .qp-alert, .qp-empty, .qp-row__meta, .qp-queue__meta, .qp-settings__lede { overflow-wrap: anywhere; } .qp :focus-visible { outline: 2px solid var(--qp-focus); outline-offset: 2px; border-radius: var(--qp-radius-xs); } .qp-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ============================================================ 2. Shell grid — tablet is the design baseline ============================================================ */ .qp-app { display: grid; gap: var(--qp-gutter); max-width: var(--qp-page-max); min-height: 100vh; min-height: 100dvh; margin-inline: auto; padding: var(--qp-gutter); grid-template-columns: var(--qp-rail-w) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "topbar topbar" "rail main" "footer footer"; align-content: start; } /* Layouts that want a right-hand rail add .qp-app--aside */ .qp-app--aside { grid-template-columns: var(--qp-rail-w) minmax(0, 1fr) var(--qp-aside-w); grid-template-areas: "topbar topbar topbar" "rail main aside" "footer footer footer"; } /* Layouts with a wide labelled sidebar instead of an icon rail */ .qp-app--sidebar { --qp-rail-w: var(--qp-rail-w-lg); } /* Layouts that drop the rail entirely (single editorial column) */ .qp-app--plain { grid-template-columns: minmax(0, 1fr); grid-template-areas: "topbar" "main" "footer"; } .qp-topbar { grid-area: topbar; } .qp-rail { grid-area: rail; } .qp-main { grid-area: main; min-width: 0; } .qp-aside { grid-area: aside; min-width: 0; } .qp-footer { grid-area: footer; } @media (min-width: 1280px) { .qp-app { --qp-aside-w: 330px; --qp-gutter: var(--qp-6); } } /* Phone: everything stacks, the rail becomes a bottom tab bar. The rail itself is hidden further down, in the media query that follows its own declaration — hiding it here would lose to `.qp-rail { display: flex }` in section 4, and a still-visible rail would add an implicit grid column. */ @media (max-width: 780px) { .qp-app, .qp-app--aside, .qp-app--sidebar { grid-template-columns: minmax(0, 1fr); grid-template-areas: "topbar" "main" "aside" "footer"; gap: var(--qp-4); padding: var(--qp-3) var(--qp-3) calc(var(--qp-tabbar-h) + var(--qp-6)); } } /* ============================================================ 3. Top bar ============================================================ */ .qp-topbar { display: flex; align-items: center; gap: var(--qp-3); min-height: var(--qp-topbar-h); padding: var(--qp-2) var(--qp-4); background: var(--qp-surface); border-radius: var(--qp-radius-lg); box-shadow: var(--qp-shadow-sm); } .qp-topbar__row { display: flex; align-items: center; gap: var(--qp-3); width: 100%; } .qp-brand { display: flex; align-items: center; gap: var(--qp-3); min-width: 0; } .qp-brand__mark { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: var(--qp-radius-sm); background: var(--qp-accent); color: var(--qp-accent-ink); font-weight: 900; font-size: var(--qp-text-md); } .qp-brand__text { min-width: 0; } .qp-brand__name { font-size: var(--qp-text-md); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qp-brand__sub { color: var(--qp-ink-muted); font-size: var(--qp-text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .qp-topbar__spacer { margin-inline-start: auto; } .qp-topbar__tools { display: flex; align-items: center; gap: var(--qp-2); margin-inline-start: auto; } /* Balance / XP pill that sits in the top bar */ .qp-meterpill { display: flex; align-items: center; gap: var(--qp-3); padding: var(--qp-2) var(--qp-4); background: var(--qp-surface-2); border-radius: var(--qp-radius-pill); font-size: var(--qp-text-xs); font-weight: 800; } .qp-meterpill__track { display: block; width: 120px; height: 8px; border-radius: var(--qp-radius-pill); background: var(--qp-surface-3); overflow: hidden; } .qp-meterpill__fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--qp-accent), var(--qp-gold)); } @media (max-width: 640px) { .qp-meterpill__track { width: 72px; } } /* ============================================================ 4. Navigation rail (tablet/desktop) + tab bar (phone) ============================================================ */ .qp-rail { display: flex; flex-direction: column; gap: var(--qp-2); position: sticky; top: var(--qp-4); align-self: start; max-height: calc(100vh - var(--qp-8)); padding: var(--qp-3); overflow-y: auto; background: var(--qp-surface); border-radius: var(--qp-radius-lg); box-shadow: var(--qp-shadow-sm); z-index: var(--qp-z-rail); } .qp-rail__link { display: grid; gap: 2px; place-items: center; padding: var(--qp-3) var(--qp-2); border-radius: var(--qp-radius-sm); color: var(--qp-ink-muted); text-align: center; transition: background-color var(--qp-fast), color var(--qp-fast); } .qp-rail__link:hover { background: var(--qp-surface-inset); color: var(--qp-ink); } .qp-rail__link.is-active { background: var(--qp-accent); color: var(--qp-accent-ink); } .qp-rail__icon { font-size: 1.4rem; line-height: 1; } .qp-rail__label { font-size: var(--qp-text-2xs); font-weight: 800; letter-spacing: .02em; } .qp-rail__spacer { margin-block-start: auto; } /* Wide sidebar variant: icon + label on one line */ .qp-app--sidebar .qp-rail__link { grid-auto-flow: column; grid-template-columns: 24px 1fr; justify-items: start; gap: var(--qp-3); place-items: center start; padding: var(--qp-3); text-align: start; } .qp-app--sidebar .qp-rail__label { font-size: var(--qp-text-sm); } /* Phone bottom bar */ .qp-tabbar { position: fixed; inset-inline: 0; bottom: 0; z-index: var(--qp-z-tabbar); display: none; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--qp-1); padding: var(--qp-2) var(--qp-2) calc(var(--qp-2) + env(safe-area-inset-bottom, 0px)); background: var(--qp-surface); border-top: 1px solid var(--qp-line); box-shadow: 0 -6px 22px rgba(16, 24, 40, .12); } .qp-tabbar__link { display: grid; gap: 2px; place-items: center; min-height: 50px; padding: var(--qp-1); border-radius: var(--qp-radius-sm); color: var(--qp-ink-muted); } .qp-tabbar__link.is-active { background: var(--qp-accent-soft); color: var(--qp-accent-strong); } .qp-tabbar__icon { font-size: 1.25rem; line-height: 1; } .qp-tabbar__label { font-size: 10px; font-weight: 800; } .qp-tabbar__link .qp-dot { position: absolute; } /* Below the tablet breakpoint the rail is replaced by the bottom tab bar. This block must stay after the `.qp-rail` declaration above so it wins. */ @media (max-width: 780px) { .qp-rail { display: none !important; } .qp-tabbar { display: grid; } } /* ============================================================ 5. Surfaces ============================================================ */ .qp-card { display: flex; flex-direction: column; background: var(--qp-surface); border-radius: var(--qp-panel-radius); box-shadow: var(--qp-shadow-sm); overflow: hidden; } .qp-card__head { display: flex; align-items: center; gap: var(--qp-3); padding: var(--qp-4) var(--qp-5) var(--qp-2); } .qp-card__title { display: flex; align-items: center; gap: var(--qp-2); font-size: var(--qp-text-md); font-weight: 800; } .qp-card__title .qp-emoji { font-size: 1.15em; } .qp-card__tools { margin-inline-start: auto; display: flex; gap: var(--qp-2); align-items: center; } .qp-card__body { flex: 1 1 auto; padding: var(--qp-4) var(--qp-5) var(--qp-5); } .qp-card__head + .qp-card__body { padding-block-start: var(--qp-2); } .qp-card__foot { display: flex; flex-wrap: wrap; gap: var(--qp-2); align-items: center; padding: var(--qp-3) var(--qp-5); background: var(--qp-surface-2); } .qp-section-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--qp-2) var(--qp-3); min-width: 0; margin-block-end: var(--qp-3); font-size: var(--qp-text-lg); } .qp-section-title small { color: var(--qp-ink-muted); font-size: var(--qp-text-xs); font-weight: 700; } .qp-eyebrow { display: block; color: var(--qp-ink-muted); font-size: var(--qp-text-2xs); font-weight: 900; letter-spacing: .14em; text-transform: uppercase; } /* ============================================================ 6. Layout utilities (grid + flex primitives) ============================================================ */ .qp-stack { display: flex; flex-direction: column; gap: var(--qp-4); } .qp-stack--sm { gap: var(--qp-2); } .qp-stack--lg { gap: var(--qp-6); } .qp-cluster { display: flex; flex-wrap: wrap; gap: var(--qp-2); align-items: center; } .qp-cluster--between { justify-content: space-between; } .qp-cluster--end { justify-content: flex-end; } .qp-cluster--tight { gap: var(--qp-1); } .qp-grid { display: grid; gap: var(--qp-4); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); } .qp-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qp-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .qp-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 980px) { .qp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qp-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .qp-grid--2, .qp-grid--3, .qp-grid--4 { grid-template-columns: minmax(0, 1fr); } } .qp-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .qp-grow { flex: 1 1 auto; min-width: 0; } .qp-push { margin-inline-start: auto; } .qp-nowrap { white-space: nowrap; } .qp-center { text-align: center; } .qp-right { text-align: right; } .qp-muted { color: var(--qp-ink-muted); } .qp-soft { color: var(--qp-ink-soft); } .qp-tiny { font-size: var(--qp-text-xs); } .qp-hide { display: none !important; } @media (max-width: 780px) { .qp-hide-sm { display: none !important; } } @media (min-width: 781px) { .qp-only-sm { display: none !important; } } /* ============================================================ 7. Buttons ============================================================ */ .qp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--qp-2); padding: var(--qp-3) var(--qp-4); border: 1px solid transparent; border-radius: var(--qp-radius-sm); background: var(--qp-surface-3); color: var(--qp-ink); font-size: var(--qp-text-sm); font-weight: 800; line-height: 1.1; text-align: center; transition: transform var(--qp-fast), background-color var(--qp-fast), box-shadow var(--qp-fast), opacity var(--qp-fast); } .qp-btn:hover { transform: translateY(-1px); } .qp-btn:active { transform: translateY(0); } .qp-btn[disabled], .qp-btn.is-disabled { opacity: .55; pointer-events: none; } .qp-btn--primary { background: var(--qp-accent); color: var(--qp-accent-ink); } .qp-btn--primary:hover { background: var(--qp-accent-strong); color: var(--qp-accent-ink); } .qp-btn--ok { background: var(--qp-ok); color: var(--qp-on-ok); } .qp-btn--bad { background: var(--qp-bad); color: var(--qp-on-bad); } .qp-btn--warn { background: var(--qp-warn); color: var(--qp-on-warn); } .qp-btn--gold { background: var(--qp-gold); color: var(--qp-gold-ink); } .qp-btn--ghost { background: transparent; border-color: var(--qp-line); color: var(--qp-ink-soft); } .qp-btn--ghost:hover { background: var(--qp-surface-inset); color: var(--qp-ink); } .qp-btn--quiet { background: transparent; color: var(--qp-ink-muted); } .qp-btn--quiet:hover { background: var(--qp-surface-inset); } .qp-btn--sm { padding: var(--qp-2) var(--qp-3); font-size: var(--qp-text-xs); } .qp-btn--lg { padding: var(--qp-4) var(--qp-6); font-size: var(--qp-text-md); } .qp-btn--block { display: flex; width: 100%; } .qp-btn--icon { padding: var(--qp-2); min-width: 40px; min-height: 40px; font-size: 1.15rem; } .qp-btnbar { display: flex; flex-wrap: wrap; gap: var(--qp-2); align-items: center; } .qp-btnbar form { display: contents; } /* ============================================================ 8. Chips, pills, badges, avatars ============================================================ */ .qp-chip { display: inline-flex; align-items: center; gap: var(--qp-2); padding: var(--qp-1) var(--qp-3); border-radius: var(--qp-radius-pill); background: var(--qp-surface-3); color: var(--qp-ink-soft); font-size: var(--qp-text-xs); font-weight: 800; white-space: nowrap; } .qp-chip--ok { background: var(--qp-ok-soft); color: var(--qp-ok-ink); } .qp-chip--warn { background: var(--qp-warn-soft); color: var(--qp-warn-ink); } .qp-chip--bad { background: var(--qp-bad-soft); color: var(--qp-bad-ink); } .qp-chip--info { background: var(--qp-info-soft); color: var(--qp-info-ink); } .qp-chip--gold { background: #fff2cc; color: var(--qp-gold-ink); } .qp-chip--accent { background: var(--qp-accent-soft); color: var(--qp-accent-strong); } .qp-dot { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--qp-radius-pill); background: var(--qp-bad); color: #fff; font-size: 11px; font-weight: 900; line-height: 1; } .qp-dot--gold { background: var(--qp-gold); color: var(--qp-gold-ink); } .qp-dot--accent { background: var(--qp-accent); color: var(--qp-accent-ink); } .qp-avatar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--qp-radius-sm); background: var(--qp-accent-soft); color: var(--qp-accent-strong); font-size: var(--qp-text-sm); font-weight: 900; overflow: hidden; } .qp-avatar img { width: 100%; height: 100%; object-fit: cover; } .qp-avatar--round { border-radius: 50%; } .qp-avatar--lg { width: 72px; height: 72px; font-size: var(--qp-text-lg); } .qp-avatar--xl { width: 96px; height: 96px; font-size: var(--qp-text-2xl); } .qp-coin { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe680, var(--qp-gold-deep)); color: var(--qp-gold-ink); font-size: var(--qp-text-xs); font-weight: 900; box-shadow: inset 0 -3px 0 rgba(160, 100, 0, .35); } /* ============================================================ 9. Stat blocks & rows ============================================================ */ .qp-stat { display: flex; flex-direction: column; gap: var(--qp-1); padding: var(--qp-4); background: var(--qp-surface); border-radius: var(--qp-radius); box-shadow: var(--qp-shadow-xs); } .qp-stat__label { color: var(--qp-ink-muted); font-size: var(--qp-text-2xs); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .qp-stat__value { font-size: var(--qp-text-xl); font-weight: 900; letter-spacing: -.03em; } .qp-stat__hint { color: var(--qp-ink-muted); font-size: var(--qp-text-xs); font-weight: 700; } .qp-stat__hint.is-up { color: var(--qp-ok); } .qp-stat__hint.is-down { color: var(--qp-bad); } .qp-spark { display: flex; align-items: flex-end; gap: 3px; height: 30px; margin-block-start: var(--qp-1); } .qp-spark i { flex: 1; min-height: 2px; border-radius: 3px; background: linear-gradient(180deg, var(--qp-accent), transparent); } .qp-row { display: flex; align-items: center; gap: var(--qp-3); padding: var(--qp-3) 0; border-block-start: 1px solid var(--qp-line); } .qp-row:first-child { border-block-start: 0; } .qp-row__main { flex: 1 1 auto; min-width: 0; } .qp-row__title { font-size: var(--qp-text-sm); font-weight: 800; } .qp-row__meta { color: var(--qp-ink-muted); font-size: var(--qp-text-xs); font-weight: 600; } .qp-row__value { text-align: right; font-weight: 900; white-space: nowrap; } .qp-row__actions { display: flex; flex-wrap: wrap; gap: var(--qp-2); flex: none; } @media (max-width: 560px) { .qp-row { flex-wrap: wrap; } .qp-row__actions { width: 100%; } .qp-row__actions .qp-btn { flex: 1 1 auto; } } .qp-empty { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--qp-2); justify-items: center; padding: var(--qp-8) var(--qp-4); color: var(--qp-ink-muted); text-align: center; } .qp-empty__icon { font-size: 2.4rem; } .qp-empty__title { color: var(--qp-ink); font-size: var(--qp-text-md); font-weight: 800; } /* ============================================================ 10. Progress & meters ============================================================ */ .qp-progress { height: 10px; border-radius: var(--qp-radius-pill); background: var(--qp-surface-3); overflow: hidden; } .qp-progress__fill { display: block; height: 100%; border-radius: inherit; background: var(--qp-accent); transition: width var(--qp-slow); } .qp-progress--gold .qp-progress__fill { background: var(--qp-gold); } .qp-progress--ok .qp-progress__fill { background: var(--qp-ok); } .qp-progress--bad .qp-progress__fill { background: var(--qp-bad); } .qp-streak { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--qp-1); } .qp-streak i { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--qp-surface-3); color: var(--qp-ink-muted); font-size: 10px; font-weight: 900; font-style: normal; } .qp-streak i.is-on { background: var(--qp-ok); color: #fff; } /* ============================================================ 11. Forms ============================================================ */ .qp-field { display: flex; flex-direction: column; gap: var(--qp-2); } .qp-field__label { font-size: var(--qp-text-xs); font-weight: 800; } .qp-field__hint { color: var(--qp-ink-muted); font-size: var(--qp-text-xs); } .qp-field__error { color: var(--qp-bad); font-size: var(--qp-text-xs); font-weight: 700; } .qp-input, .qp-select, .qp-textarea { width: 100%; padding: var(--qp-3); border: 1px solid var(--qp-line); border-radius: var(--qp-radius-sm); background: var(--qp-surface); color: var(--qp-ink); font-size: var(--qp-text-sm); transition: border-color var(--qp-fast), box-shadow var(--qp-fast); } .qp-input:focus, .qp-select:focus, .qp-textarea:focus { outline: 0; border-color: var(--qp-accent); box-shadow: var(--qp-ring); } .qp-textarea { min-height: 96px; resize: vertical; } .qp-input--num { max-width: 130px; text-align: center; font-weight: 800; } .qp-formgrid { display: grid; gap: var(--qp-4); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); align-items: end; } /* Toggle switch used heavily by the module settings screens */ .qp-switch { display: inline-flex; align-items: center; gap: var(--qp-3); cursor: pointer; } .qp-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .qp-switch__track { position: relative; flex: none; width: 46px; height: 26px; border-radius: var(--qp-radius-pill); background: var(--qp-line-strong); transition: background-color var(--qp-fast); } .qp-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--qp-shadow-xs); transition: transform var(--qp-fast); } .qp-switch input:checked + .qp-switch__track { background: var(--qp-ok); } .qp-switch input:checked + .qp-switch__track::after { transform: translateX(20px); } .qp-switch input:focus-visible + .qp-switch__track { box-shadow: var(--qp-ring); } .qp-switch__text { font-size: var(--qp-text-sm); font-weight: 700; } /* Checkbox that reads as a row selector */ .qp-check { display: inline-flex; align-items: center; gap: var(--qp-2); font-size: var(--qp-text-sm); font-weight: 700; cursor: pointer; } .qp-check input { width: 18px; height: 18px; accent-color: var(--qp-accent); cursor: pointer; } /* Radio group rendered as selectable tiles (amount presets, layout picker) */ .qp-choices { display: grid; gap: var(--qp-3); grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); } .qp-choice { position: relative; display: block; } .qp-choice input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .qp-choice__box { display: flex; flex-direction: column; gap: var(--qp-1); height: 100%; padding: var(--qp-3) var(--qp-4); border: 2px solid var(--qp-line); border-radius: var(--qp-radius); background: var(--qp-surface); transition: border-color var(--qp-fast), background-color var(--qp-fast), transform var(--qp-fast); } .qp-choice input:checked + .qp-choice__box { border-color: var(--qp-accent); background: var(--qp-accent-soft); transform: translateY(-2px); } .qp-choice input:focus-visible + .qp-choice__box { box-shadow: var(--qp-ring); } .qp-choice__title { font-size: var(--qp-text-sm); font-weight: 900; } .qp-choice__desc { color: var(--qp-ink-muted); font-size: var(--qp-text-xs); } /* Compact preset buttons: +5 / +10 / -5 … */ .qp-presets { display: flex; flex-wrap: wrap; gap: var(--qp-2); } .qp-presets .qp-btn { min-width: 62px; } /* ============================================================ 12. Tabs / segmented control ============================================================ */ .qp-tabs { display: flex; gap: var(--qp-1); padding: var(--qp-1); background: var(--qp-surface-3); border-radius: var(--qp-radius-sm); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .qp-tabs::-webkit-scrollbar { display: none; } .qp-tab { display: inline-flex; align-items: center; gap: var(--qp-2); flex: 1 0 auto; justify-content: center; padding: var(--qp-2) var(--qp-4); border: 0; border-radius: var(--qp-radius-xs); background: transparent; color: var(--qp-ink-muted); font-size: var(--qp-text-xs); font-weight: 800; white-space: nowrap; } .qp-tab.is-active { background: var(--qp-surface); color: var(--qp-ink); box-shadow: var(--qp-shadow-xs); } .qp-tabpanel { display: none; } .qp-tabpanel.is-active { display: block; } /* ============================================================ 13. Tables ============================================================ */ .qp-table { width: 100%; border-collapse: collapse; font-size: var(--qp-text-sm); } .qp-table th, .qp-table td { padding: var(--qp-3); text-align: left; vertical-align: middle; border-block-end: 1px solid var(--qp-line); } .qp-table th { color: var(--qp-ink-muted); font-size: var(--qp-text-2xs); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } .qp-table tbody tr:last-child td { border-block-end: 0; } .qp-table__num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; } .qp-pos { color: var(--qp-ok); } .qp-neg { color: var(--qp-bad); } /* ============================================================ 14. Alerts & toasts ============================================================ */ .qp-alert { display: flex; gap: var(--qp-3); align-items: flex-start; padding: var(--qp-3) var(--qp-4); border-radius: var(--qp-radius-sm); background: var(--qp-info-soft); color: var(--qp-info-ink); font-size: var(--qp-text-sm); font-weight: 700; } .qp-alert--ok { background: var(--qp-ok-soft); color: var(--qp-ok-ink); } .qp-alert--warn { background: var(--qp-warn-soft); color: var(--qp-warn-ink); } .qp-alert--bad { background: var(--qp-bad-soft); color: var(--qp-bad-ink); } .qp-toast { position: fixed; left: 50%; bottom: calc(var(--qp-tabbar-h) + var(--qp-4)); z-index: var(--qp-z-toast); padding: var(--qp-3) var(--qp-4); border-radius: var(--qp-radius-sm); background: #1c1b30; color: #fff; font-size: var(--qp-text-xs); font-weight: 800; opacity: 0; transform: translate(-50%, 14px); pointer-events: none; transition: opacity var(--qp-slow), transform var(--qp-slow); } .qp-toast.is-on { opacity: 1; transform: translate(-50%, 0); } @media (min-width: 781px) { .qp-toast { bottom: var(--qp-6); } } /* ============================================================ 15. Modal (self-contained; independent of base.css .custom-modal) ============================================================ */ .qp-modal { position: fixed; inset: 0; z-index: var(--qp-z-overlay); display: none; place-items: center; padding: var(--qp-4); background: rgba(12, 18, 32, .55); overflow-y: auto; } .qp-modal.is-open { display: grid; } .qp-modal__dialog { width: min(520px, 100%); background: var(--qp-surface); border-radius: var(--qp-radius-lg); box-shadow: var(--qp-shadow-lg); overflow: hidden; } .qp-modal__head { display: flex; align-items: center; gap: var(--qp-3); padding: var(--qp-4) var(--qp-5); border-block-end: 1px solid var(--qp-line); } .qp-modal__title { font-size: var(--qp-text-md); font-weight: 900; } .qp-modal__close { margin-inline-start: auto; border: 0; background: transparent; color: var(--qp-ink-muted); font-size: 1.4rem; line-height: 1; } .qp-modal__body { padding: var(--qp-5); } .qp-modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--qp-2); padding: var(--qp-4) var(--qp-5); background: var(--qp-surface-2); } /* PIN entry pad */ .qp-pin { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--qp-3); justify-items: center; } .qp-pin__input { width: min(260px, 100%); padding: var(--qp-3); border: 2px solid var(--qp-line); border-radius: var(--qp-radius-sm); font-size: var(--qp-text-xl); font-weight: 900; letter-spacing: .5em; text-align: center; text-indent: .5em; } .qp-pin__input:focus { outline: 0; border-color: var(--qp-accent); box-shadow: var(--qp-ring); } /* ============================================================ 16. Currency icon (ported from base.css so new pages stand alone) ============================================================ */ .qp .currency-symbol-inline { display: inline-block; width: .9em; height: .9em; margin-inline: .1em .2em; vertical-align: baseline; fill: currentColor; } .qp .currency-symbol-inline svg { display: block; } /* ============================================================ 17. Collapsible panels Markup contract (see qp_collapse_attrs() in qp_layouts.php):

Without JS no panel is ever hidden — the pre-collapse rule below is gated on :not([data-qp-collapse-ready]), which qp-app.js stamps on only once it has resolved the real state. That is deliberately the reverse of the usual no-JS-hides-nothing trick: the attribute is absent both before JS runs and when JS never runs, so the rule has to be paired with a `hidden` fallback. It is: the rule matches only default-collapsed panels, and every panel is also served with its content visible, so a JS-less visitor sees everything. ============================================================ */ .qp-collapse { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-inline-start: auto; padding: 0; border: 0; border-radius: var(--qp-radius-sm); background: transparent; color: var(--qp-ink-muted); cursor: pointer; } /* A tools cluster has already taken the auto margin; sit alongside it. */ .qp-card__tools + .qp-collapse { margin-inline-start: var(--qp-1); } .qp-collapse:hover { background: var(--qp-surface-2); color: var(--qp-ink); } .qp-collapse__chev { display: block; font-size: 1rem; line-height: 1; transition: transform var(--qp-fast); } [data-qp-collapse].is-collapsed .qp-collapse__chev { transform: rotate(-90deg); } /* Before qp-app.js has resolved the stored preference. */ [data-qp-collapse-default="collapsed"]:not([data-qp-collapse-ready]) [data-qp-collapse-panel] { display: none; } /* After. `hidden` alone loses to any display rule the panel picks up. */ [data-qp-collapse-panel][hidden] { display: none !important; } /* The head's tight bottom padding assumes a body underneath it. */ .qp-card.is-collapsed .qp-card__head { padding-block-end: var(--qp-4); } /* ============================================================ 18. Print ============================================================ */ @media print { .qp-rail, .qp-tabbar, .qp-topbar__tools, .qp-toast { display: none !important; } .qp-app { display: block; padding: 0; } .qp-card { box-shadow: none; border: 1px solid #ccc; } /* Paper has no toggles — print every panel open regardless of state. */ .qp-collapse { display: none !important; } [data-qp-collapse-panel][hidden] { display: block !important; } }