/* AutoPoller admin. * * Palette and theme system lifted from ContentPipeline's base.html so the two * consoles look like one product: same variable names, same values, same * light/dark switch driven by a data-theme attribute on . */ :root, [data-theme="dark"] { /* Tells the browser which palette to paint the parts of the UI it owns: date editors and their calendar popups, scrollbars, spinners. Without it a date input renders as a white native widget inside a dark card. */ color-scheme: dark; --bg-page: #111827; --bg-card: #1f2937; --bg-elevated: #374151; --bg-hover: #4b5563; --bg-input: #374151; --text-primary: #f9fafb; --text-strong: #f3f4f6; --text-body: #e5e7eb; --text-secondary: #d1d5db; --text-muted: #9ca3af; --text-faint: #6b7280; --border-default: #374151; --border-strong: #4b5563; --border-subtle: rgba(55, 65, 81, .3); --accent: #e94560; --accent-bg: rgba(233, 69, 96, .1); --link: #60a5fa; --link-hover: #93c5fd; --shadow-card: none; --ok: #34d399; --ok-bg: rgba(52, 211, 153, .12); --warn: #fbbf24; --warn-bg: rgba(251, 191, 36, .12); --bad: #f87171; --bad-bg: rgba(248, 113, 113, .12); --bar-track: #374151; } [data-theme="light"] { color-scheme: light; --bg-page: #f9fafb; --bg-card: #ffffff; --bg-elevated: #f3f4f6; --bg-hover: #e5e7eb; --bg-input: #ffffff; --text-primary: #111827; --text-strong: #1f2937; --text-body: #374151; --text-secondary: #4b5563; --text-muted: #6b7280; --text-faint: #9ca3af; --border-default: #e5e7eb; --border-strong: #d1d5db; --border-subtle: rgba(229, 231, 235, .5); --accent: #e94560; --accent-bg: rgba(233, 69, 96, .08); --link: #2563eb; --link-hover: #1d4ed8; --shadow-card: 0 1px 3px rgba(0, 0, 0, .08); --ok: #059669; --ok-bg: rgba(5, 150, 105, .1); --warn: #b45309; --warn-bg: rgba(180, 83, 9, .1); --bad: #dc2626; --bad-bg: rgba(220, 38, 38, .1); --bar-track: #e5e7eb; } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-page); color: var(--text-primary); font: 14px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; } main { flex: 1 0 auto; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; } /* nav */ .topbar { background: var(--bg-card); border-bottom: 1px solid var(--border-default); } .topbar .wrap { display: flex; align-items: center; gap: 26px; height: 56px; } /* The lockup is an inline SVG so it can read currentColor and --accent; the link is just a hit area around it. */ .brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--text-primary); } .brand-logo { height: 26px; width: auto; display: block; } .brand:hover { opacity: .9; } .topnav { display: flex; gap: 2px; margin-left: auto; align-items: center; } .topnav a { color: var(--text-secondary); text-decoration: none; padding: 7px 11px; border-radius: 8px; transition: background .14s, color .14s; } .topnav a:hover { color: var(--text-primary); background: var(--bg-elevated); } .topnav a.on { color: var(--text-primary); background: var(--bg-elevated); font-weight: 600; } .theme-toggle { margin-left: 10px; background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border-strong); border-radius: 8px; padding: 6px 11px; cursor: pointer; font: inherit; font-size: 13px; } .theme-toggle:hover { color: var(--text-primary); background: var(--bg-hover); } /* page furniture */ .head { padding: 28px 0 20px; display: flex; align-items: flex-end; gap: 16px; } .head h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.015em; color: var(--text-primary); } .head .sub { color: var(--text-secondary); margin-top: 5px; font-size: 13.5px; } .head .right { margin-left: auto; display: flex; gap: 8px; } .section { margin-bottom: 26px; } .section > h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin: 0 0 10px; font-weight: 600; } .card { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 10px; padding: 18px; box-shadow: var(--shadow-card); } .card + .card { margin-top: 12px; } .card h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--text-primary); } .muted { color: var(--text-secondary); } .faint { color: var(--text-muted); } .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; } .num { font-variant-numeric: tabular-nums; } .grid { display: grid; gap: 12px; } .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 860px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } } .stat { background: var(--bg-card); border: 1px solid var(--border-default); border-radius: 10px; padding: 14px 16px; box-shadow: var(--shadow-card); } .stat .k { color: var(--text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; } .stat .v { font-size: 25px; font-weight: 700; margin-top: 4px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text-primary); } /* controls */ .btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 8px; border: 1px solid transparent; cursor: pointer; background: var(--accent); color: #fff; font: inherit; font-weight: 600; text-decoration: none; transition: filter .14s, transform .09s; } .btn:hover { filter: brightness(1.08); } .btn:active { transform: translateY(.5px); } .btn.sec { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-strong); } .btn.sec:hover { background: var(--bg-hover); filter: none; } .btn.ghost { background: transparent; border-color: var(--border-strong); color: var(--text-secondary); } .btn.ghost:hover { color: var(--text-primary); background: var(--bg-elevated); filter: none; } .btn.danger { background: transparent; border-color: var(--bad); color: var(--bad); } .btn.danger:hover { background: var(--bad-bg); filter: none; } .btn.sm { padding: 5px 11px; font-size: 12.5px; } label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 5px; } input[type=text], input[type=number], input[type=url], input[type=email], input[type=password], input[type=date], input[type=datetime-local], input[type=time], input[type=search], select, textarea { width: 100%; padding: 9px 11px; background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: 8px; font: inherit; transition: border-color .14s, box-shadow .14s; } input:hover, select:hover, textarea:hover { border-color: var(--text-faint); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } input::placeholder, textarea::placeholder { color: var(--text-faint); } /* Date inputs. * * A date field is half ours and half the browser's: we own the box, the browser * owns the segmented mm/dd/yyyy editor and the calendar popup it opens. Styling * only the box leaves a white native widget sitting inside a dark card, so the * browser's half has to be told which palette it is in - that is what * color-scheme does, and nothing else will do it. */ input[type=date], input[type=datetime-local], input[type=time] { /* Native segment text and the popup follow this. */ color-scheme: inherit; /* Their intrinsic width is wider than the content and ignores width:100% in some engines unless min-width is released. */ min-width: 0; } /* The little calendar glyph ships black, which disappears against a dark input. Inverting is the only handle CSS has on it. */ [data-theme="dark"] input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .45; cursor: pointer; } [data-theme="dark"] input::-webkit-calendar-picker-indicator:hover { opacity: .9; } input::-webkit-calendar-picker-indicator { cursor: pointer; } /* An empty date reads as a placeholder, not as an error. Chrome paints unfilled segments at full contrast, which makes a blank filter look like a field somebody failed to complete. */ input[type=date]:not(:focus)::-webkit-datetime-edit { color: var(--text-faint); } input[type=date]:focus::-webkit-datetime-edit { color: var(--text-primary); } textarea { min-height: 92px; resize: vertical; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6; } .field { margin-bottom: 14px; } .check { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .check input { width: auto; } .check label { margin: 0; color: var(--text-body); font-size: 13px; } .row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; } .row > * { flex: 1 1 180px; } .row > .fit { flex: 0 0 auto; } /* tables */ table { width: 100%; border-collapse: collapse; } th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; padding: 9px 10px; border-bottom: 1px solid var(--border-default); } td { padding: 10px; border-bottom: 1px solid var(--border-default); vertical-align: top; color: var(--text-body); } tr:last-child td { border-bottom: 0; } td a { color: var(--link); text-decoration: none; } td a:hover { color: var(--link-hover); text-decoration: underline; } .tablewrap { overflow-x: auto; } /* chips */ .chip { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; border: 1px solid var(--border-strong); color: var(--text-secondary); } .chip.ok { color: var(--ok); background: var(--ok-bg); border-color: transparent; } .chip.warn { color: var(--warn); background: var(--warn-bg); border-color: transparent; } .chip.bad { color: var(--bad); background: var(--bad-bg); border-color: transparent; } .chip.accent { color: var(--accent); background: var(--accent-bg); border-color: transparent; } pre.snippet { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 8px; padding: 14px; overflow-x: auto; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; color: var(--text-body); margin: 0; } /* poll preview cards */ .poll { border: 1px solid var(--border-default); border-radius: 10px; background: var(--bg-card); padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-card); } .poll .qhead { display: flex; align-items: flex-start; gap: 10px; } .poll .q { font-size: 15.5px; font-weight: 600; line-height: 1.4; color: var(--text-primary); } .poll .angle { color: var(--text-muted); font-size: 12px; margin-top: 5px; } .opts { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; } .opt { border: 1px solid var(--border-default); border-radius: 8px; padding: 9px 12px; font-size: 13.5px; display: flex; gap: 10px; align-items: center; background: var(--bg-elevated); color: var(--text-body); } .opt .rank { color: var(--text-muted); font-size: 11px; min-width: 14px; } .bar { height: 7px; border-radius: 999px; background: var(--bar-track); overflow: hidden; margin-top: 6px; } .bar > i { display: block; height: 100%; background: var(--accent); border-radius: 999px; } .notice { border: 1px solid var(--border-default); border-left: 3px solid var(--link); background: var(--bg-card); border-radius: 8px; padding: 12px 14px; color: var(--text-body); font-size: 13.5px; margin-bottom: 16px; } .notice.bad { border-left-color: var(--bad); } .notice.warn { border-left-color: var(--warn); } .notice.ok { border-left-color: var(--ok); } .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-default); margin-bottom: 18px; flex-wrap: wrap; } .tabs a { padding: 9px 13px; color: var(--text-secondary); text-decoration: none; font-size: 13px; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs a:hover { color: var(--text-primary); } .tabs a.on { color: var(--text-primary); border-bottom-color: var(--accent); font-weight: 600; } /* Pager. Sits under a table that only grows, so it states the range and the total rather than only offering arrows - "showing 51-100 of 24,844" is the difference between navigating and guessing. */ .pager { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; } .pager-controls { display: flex; align-items: center; gap: 8px; margin-left: auto; } /* Filter row sizing. Without these every control gets the same flex basis, so a "Per page" holding two digits grows as wide as a search box. */ .row > .narrow { flex: 0 1 168px; } .row > .tiny { flex: 0 1 104px; } details summary { color: var(--text-secondary); } footer { flex-shrink: 0; border-top: 1px solid var(--border-default); margin-top: 40px; padding: 16px 0; color: var(--text-muted); font-size: 12px; } footer .wrap { display: flex; gap: 16px; } footer .right { margin-left: auto; } /* Preview stage. A transformed, positioned ancestor makes the widget's position:fixed overlay resolve against this box instead of the viewport, so a modal previews inside the panel rather than covering the admin. */ .ap-preview-stage { position: relative; transform: translateZ(0); overflow: auto; min-height: 460px; border: 1px solid var(--border-default); border-radius: 10px; background: var(--bg-elevated); padding: 18px; } .ap-preview-stage.page-sim { background: #f4f4f7; } .ap-preview-stage .fake-copy { max-width: 640px; margin: 0 auto; color: #8a8a95; font-size: 13px; line-height: 1.7; } .design-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 18px; align-items: start; } @media (max-width: 1000px) { .design-grid { grid-template-columns: 1fr; } } .design-panel { position: sticky; top: 18px; } .swatch-row { display: flex; gap: 8px; align-items: center; } .swatch-row input[type=color] { width: 38px; height: 34px; padding: 2px; border-radius: 6px; cursor: pointer; } .swatch-row input[type=text] { flex: 1; } fieldset.group { border: 1px solid var(--border-default); border-radius: 10px; padding: 14px; margin: 0 0 14px; } fieldset.group > legend { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); padding: 0 6px; font-weight: 600; } /* Landing-page mock (design preview). The real landing page is rendered by the publisher's plugin on their own domain; this is a faithful stand-in painted from the same tokens, so an operator can judge the colours without a WordPress install in front of them. */ .apl-page { background: #f3f4f6; border: 1px solid var(--border-default); border-radius: 10px; padding: 22px; min-height: 460px; } .apl-topbar { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; } .apl-brand { font-weight: 600; font-size: 15px; color: var(--apl-ink, #141419); } .apl-steps { margin-left: auto; display: flex; align-items: center; gap: 0; } .apl-step { font-size: 11px; font-weight: 600; color: #9b9ba6; border: 1px solid #d8d8e0; border-radius: 999px; padding: 3px 10px; background: #fff; } .apl-step.done { color: #fff; background: var(--apl-ink, #141419); border-color: var(--apl-ink, #141419); } .apl-rule { width: 26px; height: 1px; background: #d8d8e0; } .apl-card { background: var(--apl-surface, #fff); border: 1px solid var(--apl-border, #e4e4ea); border-radius: var(--apl-radius, 14px); padding: 30px; max-width: 620px; margin: 0 auto; } .apl-title { font-size: 26px; line-height: 1.25; font-weight: 700; color: var(--apl-ink, #141419); } .apl-sub { margin-top: 10px; font-size: 14px; color: var(--apl-muted, #5d5d68); } .apl-answer { margin-top: 16px; font-size: 14px; color: var(--apl-muted, #5d5d68); } .apl-options { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; } .apl-choice { text-align: left; padding: 14px 16px; font-size: 15px; font-weight: 600; cursor: default; background: var(--apl-option-bg, #fff); color: var(--apl-ink, #141419); border: 1px solid var(--apl-option-border, #d9d9e0); border-radius: var(--apl-option-radius, 10px); } .apl-field { display: block; width: 100%; margin-top: 12px; padding: 12px 14px; font-size: 15px; border: 1px solid var(--apl-option-border, #d9d9e0); border-radius: var(--apl-option-radius, 10px); background: #fff; color: #141419; } .apl-consent { display: flex; gap: 8px; margin-top: 16px; font-size: 12px; line-height: 1.5; color: var(--apl-muted, #5d5d68); } .apl-submit { margin-top: 20px; width: 100%; padding: 13px; font-size: 15px; font-weight: 600; cursor: default; background: var(--apl-button-bg, #141419); color: var(--apl-button-text, #fff); border: 0; border-radius: var(--apl-button-radius, 10px); } .apl-bars { margin-top: 24px; display: flex; flex-direction: column; gap: 18px; } .apl-bar-head { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; color: var(--apl-ink, #141419); margin-bottom: 7px; } .apl-track { height: 12px; border-radius: 999px; background: var(--apl-track, #ececf1); overflow: hidden; } .apl-fill { height: 100%; background: var(--apl-bar, #2f6df6); border-radius: 999px; }