/** * ActionStudio — Full UI stylesheet * Three display modes: light, dusk, dark. * Overrides WP admin chrome when actionstudio-app body class is present. */ /* ═══ WP ADMIN CHROME OVERRIDE ═══ */ body.actionstudio-app #wpadminbar, body.actionstudio-app #adminmenumain, body.actionstudio-app #adminmenuback, body.actionstudio-app #adminmenuwrap, body.actionstudio-app #wpfooter, body.actionstudio-app .notice, body.actionstudio-app .update-nag, body.actionstudio-app .updated, body.actionstudio-app .error:not(.as-error) { display: none !important; } body.actionstudio-app #wpcontent { margin-left: 0 !important; padding-left: 0 !important; } body.actionstudio-app #wpbody-content { padding-bottom: 0 !important; } body.actionstudio-app .wrap { margin: 0 !important; padding: 0 !important; } html.wp-toolbar { padding-top: 0 !important; } body.actionstudio-app { margin-top: 0 !important; } /* AS-0180: WP core's own @media(max-width:600px) responsive-admin CSS * (wp-admin/css/common.css, not part of this plugin) sets * `#wpbody { padding-top: 46px }` — space it reserves for its mobile * admin-bar toolbar. We hide #wpadminbar above but never neutralized this * WP-core #wpbody padding, so on any real phone width (<=600px) a 46px * gray (#f0f0f1) band from #wpbody's own background showed above the * ActionStudio app header — confirmed live via getComputedStyle + reading * the matched CSS rule's cssText at a real 390px iframe viewport. */ body.actionstudio-app #wpbody { padding-top: 0 !important; } /* v0.1.79: WP 7.0 defensive overrides */ body.actionstudio-app .wp-header-end { display: none !important; } body.actionstudio-app #screen-meta, body.actionstudio-app #screen-meta-links { display: none !important; } body.actionstudio-app #wp-admin-bar-root-default { display: none !important; } body.actionstudio-app .is-fullscreen-mode { /* WP 7.0 fullscreen editor class — no conflict */ } body.actionstudio-app [class*="dataviews"] { display: none !important; } body.actionstudio-app .wp-admin-bar-appearance { display: none !important; } body.actionstudio-app #adminmenu { display: none !important; } /* ═══ HIDE SCROLLBARS (keep scroll) ═══ */ #as-app *::-webkit-scrollbar { display: none; } #as-app * { -ms-overflow-style: none; scrollbar-width: none; } /* ═══ LIGHT MODE (default) ═══ */ /* v0.3.5: Mirror AS palette to :root so modal/overlay elements appended to * document.body (e.g. .as-g-modal-backdrop, palette popover) inherit the * tokens. Pre-v0.3.5 these overlays were outside #as-app's scope, so * var(--s) and var(--b) resolved to nothing, making modals see-through. * When #as-app.as-dark is active we re-emit the dark values onto :root * so body-scoped overlays switch palette with the app. */ :root { --bg:#f8f6f1;--s:#fff;--sa:#f0ece4;--b:#e7e3da;--b2:#eeeae2; --t1:#1a1d23;--t2:#4b5563;--t3:#8a909a; --ac:#D4740E;--acl:#fbeee2;--ach:#B8630B; --bl:#3949ab;--bll:#eaecf7; --gn:#2e9e5b;--gnl:#e6f4ec; --rd:#c0392b;--rdl:#fbe9e9; --am:#b8860b;--aml:#fbf3df; --pu:#7c5cbf;--pul:#f0ecf8; /* AS-0127 (v0.10.238): --zebra was #eceff1 and --row-hover #dfe3e6 — both * COOL blue-grays (R-B of -5 and -7) sitting in an otherwise entirely WARM * light palette (--s #fff, --bg #f8f6f1 +7, --sa #f0ece4 +12, --b #e7e3da * +13). The un-striped inbox row had no background of its own, so it * painted --bg; the pair therefore straddled neutral, and adjacent bands * on opposite sides of neutral produce simultaneous contrast — the warm * band reads pink, the cool band reads gray. Now warm-family, and the row * base is pinned to --s in as-email.css so the pair is actually defined. * See tests/as-0127-inbox-zebra-smoke.js for the measured proof; do not * recolor either of these without re-running it green. */ --head:#faf6ee;--zebra:#f9f6ef;--row-hover:#ece7de; --card-sh:0 1px 2px rgba(20,24,31,.05),0 2px 5px rgba(20,24,31,.06); --card-sh-h:0 3px 8px rgba(20,24,31,.10),0 6px 18px rgba(20,24,31,.09); --sb:#1A1A1A;--sb2:#2A2A2A;--sb3:#555;--sbt:#A0998F;--sbh:#DDD; --inp-bg:#FFF;--r:0;--rs:0; --err:#c0392b;--ok:#2e9e5b; --serif:Georgia,'Times New Roman',serif; } :root:has(#as-app.as-dark) { --bg:#16181d;--s:#1f2228;--sa:#262a31;--b:#2c3038;--b2:#31353d; --t1:#e8eaed;--t2:#a7adb7;--t3:#727884; --ac:#E8943A;--acl:#3a2a14;--ach:#F0A84E; --bl:#8f9ee6;--bll:#20242e; --gn:#5cbd82;--gnl:#173026; --rd:#e0655a;--rdl:#33191a; --am:#d8b24a;--aml:#312812; --pu:#b39ae0;--pul:#241f30; --head:#232830;--zebra:#262b33;--row-hover:#2f3540; --card-sh:0 1px 2px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.24); --card-sh-h:0 4px 12px rgba(0,0,0,.42),0 8px 22px rgba(0,0,0,.36); --sb:#0D0C0B;--sb2:#181716;--sb3:#444;--sbt:#706A63;--sbh:#BBB; --inp-bg:#222120; --err:#e0655a;--ok:#5cbd82; } #as-app { --bg:#f8f6f1;--s:#fff;--sa:#f0ece4;--b:#e7e3da;--b2:#eeeae2; --t1:#1a1d23;--t2:#4b5563;--t3:#8a909a; --ac:#D4740E;--acl:#fbeee2;--ach:#B8630B; --bl:#3949ab;--bll:#eaecf7; --gn:#2e9e5b;--gnl:#e6f4ec; --rd:#c0392b;--rdl:#fbe9e9; --am:#b8860b;--aml:#fbf3df; --pu:#7c5cbf;--pul:#f0ecf8; /* AS-0127 (v0.10.238): --zebra was #eceff1 and --row-hover #dfe3e6 — both * COOL blue-grays (R-B of -5 and -7) sitting in an otherwise entirely WARM * light palette (--s #fff, --bg #f8f6f1 +7, --sa #f0ece4 +12, --b #e7e3da * +13). The un-striped inbox row had no background of its own, so it * painted --bg; the pair therefore straddled neutral, and adjacent bands * on opposite sides of neutral produce simultaneous contrast — the warm * band reads pink, the cool band reads gray. Now warm-family, and the row * base is pinned to --s in as-email.css so the pair is actually defined. * See tests/as-0127-inbox-zebra-smoke.js for the measured proof; do not * recolor either of these without re-running it green. */ --head:#faf6ee;--zebra:#f9f6ef;--row-hover:#ece7de; --card-sh:0 1px 2px rgba(20,24,31,.05),0 2px 5px rgba(20,24,31,.06); --card-sh-h:0 3px 8px rgba(20,24,31,.10),0 6px 18px rgba(20,24,31,.09); --sb:#1A1A1A;--sb2:#2A2A2A;--sb3:#555;--sbt:#A0998F;--sbh:#DDD; --inp-bg:#FFF;--r:0;--rs:0; --serif:Georgia,'Times New Roman',serif; } /* Dusk removed in v0.1.48 — light/dark only */ #as-app.as-dark { --bg:#16181d;--s:#1f2228;--sa:#262a31;--b:#2c3038;--b2:#31353d; --t1:#e8eaed;--t2:#a7adb7;--t3:#727884; --ac:#E8943A;--acl:#3a2a14;--ach:#F0A84E; --bl:#8f9ee6;--bll:#20242e; --gn:#5cbd82;--gnl:#173026; --rd:#e0655a;--rdl:#33191a; --am:#d8b24a;--aml:#312812; --pu:#b39ae0;--pul:#241f30; --head:#232830;--zebra:#262b33;--row-hover:#2f3540; --card-sh:0 1px 2px rgba(0,0,0,.3),0 2px 6px rgba(0,0,0,.24); --card-sh-h:0 4px 12px rgba(0,0,0,.42),0 8px 22px rgba(0,0,0,.36); --sb:#0D0C0B;--sb2:#181716;--sb3:#444;--sbt:#706A63;--sbh:#BBB; --inp-bg:#222120; } /* ═══ RESET ═══ */ /* v0.10.179: `*:not(.btn)` — see the v0.10.179 note at the BUTTONS block * below for why .btn is excluded from this reset outright, rather than * re-fighting it with more selector specificity on the button rules (as * v0.10.178 did). Only elements literally carrying the .btn class are * skipped; anything nested INSIDE a .btn (e.g. an icon span) still matches * `#as-app *:not(.btn)` and still gets reset normally. */ #as-app, #as-app *:not(.btn) { margin:0; padding:0; box-sizing:border-box; } #as-app { font-family:'Source Sans 3','Source Sans Pro',system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--t1); display:flex; min-height:100vh; font-size:13px; transition:background .3s,color .3s; position:relative; overflow-x:hidden; max-width:100vw; } /* ═══ SIDEBAR ═══ */ #as-app .side { width:210px; background:var(--sb); position:fixed; top:0; left:0; bottom:0; display:flex; flex-direction:column; z-index:100; transition:background .3s, width .2s ease; } #as-app .brand { padding:20px 16px; border-bottom:1px solid var(--sb2); } #as-app .brand h1 { font-family:'Fraunces',Georgia,serif; font-size:17px; color:#FFF; font-weight:700; } #as-app .brand small { font-size:9px; color:var(--sb3); text-transform:uppercase; letter-spacing:1.5px; display:block; margin-top:2px; } #as-app .snav { flex:1; padding:10px 8px; overflow-y:auto; } #as-app .slbl { display:flex; align-items:center; gap:8px; font-size:9px; text-transform:uppercase; letter-spacing:1.5px; padding:12px 10px 4px; margin-top:4px; font-weight:700; border-top:1px solid var(--sb2); } /* Phase 6: group dot, ported from the prototype's GROUPS[].dc — squared (no border-radius), matching the prototype's "squared, NO radius" design note. */ #as-app .slbl i { width:7px; height:7px; flex:0 0 auto; display:block; background:var(--slc,var(--sb3)); } /* v0.10.54: label text now takes the same per-group accent (--slc, set inline per .slbl alongside the dot) instead of a flat gray, plus the border-top above as a section divider — both per Glenn's live feedback session. */ #as-app .slbl span { color:var(--slc,var(--sb3)); } #as-app .si { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--rs); color:var(--sbt); cursor:pointer; font-size:13px; font-weight:500; transition:all .12s; } /* Phase 6: colored hover, ported from the prototype's per-row --onc custom property (GROUPS[].c / SURF[].c: --ac/--bl/--gn by section) — a deliberate extension beyond the prototype's own flat .si:hover{background:var(--side2)} (which doesn't vary by section), per Glenn's explicit "the hover state as well" requirement this session. Falls back to --ac for any .si with no --onc set (matches the prototype's own Dashboard/Engage default). */ #as-app .si:hover { background:color-mix(in srgb, var(--onc, var(--ac)) 18%, transparent); color:var(--sbh); } #as-app .si.on { background:var(--onc, var(--ac)); color:#FFF; } #as-app .si .ct { margin-left:auto; background:var(--sb2); color:var(--sbt); font-size:10px; padding:1px 6px; border-radius:8px; font-weight:600; } #as-app .si.on .ct { background:rgba(255,255,255,.25); color:#FFF; } #as-app .sfoot { padding:14px 16px; border-top:1px solid var(--sb2); display:flex; align-items:center; gap:8px; } #as-app .av { width:28px; height:28px; border-radius:50%; background:var(--ac); display:flex; align-items:center; justify-content:center; color:#FFF; font-weight:700; font-size:11px; } #as-app .sfoot .nm { color:var(--sbh); font-size:12px; font-weight:600; } #as-app .sfoot .rl { color:var(--sb3); font-size:10px; } /* ═══ BACK TO ADMIN + ESCAPE LINKS ═══ */ #as-app .as-back-admin { display:flex; align-items:center; gap:6px; margin:0 8px; padding:6px 10px; color:var(--sb3); opacity:.5; transition:opacity .15s, color .15s; text-decoration:none; font-size:11px; border-radius:var(--rs); } #as-app .as-back-admin:hover { opacity:1; color:var(--sbh); background:var(--sb2); } #as-app .as-escape-links { border-top:1px solid var(--sb2); padding:6px 8px; display:flex; flex-direction:column; gap:2px; } #as-app .as-escape-link { display:flex; align-items:center; gap:4px; padding:5px 10px; font-size:10px; font-weight:600; color:var(--sb3); text-decoration:none; text-transform:uppercase; letter-spacing:.6px; opacity:.45; transition:opacity .15s, color .15s; border-radius:var(--rs); } #as-app .as-escape-link:hover { opacity:.85; color:var(--sbh); background:var(--sb2); } /* ═══ SIDEBAR COLLAPSE ═══ */ /* INTAKE-095: ActionStudio product icon doubles as the collapse control (replaces the standalone chevron). The mark is always visible; clicking it toggles the sidebar. Expanded = icon + text; collapsed = icon only. */ #as-app .brand { position:relative; display:flex; align-items:center; gap:10px; } #as-app .as-brand-mark { flex:0 0 auto; background:none; border:none; padding:0; cursor:pointer; color:var(--sbh); display:flex; align-items:center; justify-content:center; width:28px; height:28px; transition:opacity .15s, transform .15s; } #as-app .as-brand-mark svg { width:28px; height:28px; } #as-app .as-brand-mark:hover { opacity:.8; } #as-app .as-brand-text { min-width:0; } #as-app.as-collapsed .side { width:48px; } #as-app.as-collapsed .as-main { margin-left:48px; max-width:calc(100vw - 48px); } #as-app.as-collapsed .brand h1, #as-app.as-collapsed .brand small, #as-app.as-collapsed .as-brand-text, #as-app.as-collapsed .as-side-label, #as-app.as-collapsed .slbl, #as-app.as-collapsed .si .ct { display:none; } #as-app.as-collapsed .brand { padding:14px 8px; justify-content:center; } #as-app.as-collapsed .snav { padding:6px 4px; } #as-app.as-collapsed .si { justify-content:center; padding:8px; font-size:0; overflow:hidden; } #as-app.as-collapsed .si .as-icon { margin:0; font-size:13px; } #as-app.as-collapsed .sfoot { padding:10px 4px; justify-content:center; } #as-app.as-collapsed .sfoot .as-side-label { display:none; } #as-app.as-collapsed .as-escape-links { padding:4px; gap:2px; } #as-app.as-collapsed .as-escape-link { width:26px; height:26px; } #as-app.as-collapsed .as-brand-mark { margin:0 auto; } /* Phase 6 (Sidebar cosmetics): removed the v0.10.9 "collapsed-default rail, hover-peek, pin" block that used to live here (#as-app.as-collapsed .side:hover { width:210px; ... } + its child display:revert rules). Root cause of Glenn's "the collapse is broken, it doesn't collapse" report (2026-08-15): the collapse toggle button lives INSIDE .side, so clicking it to collapse leaves the mouse hovering over .side — the hover rule immediately re-expanded it back to 210px while .as-main's margin stayed at the collapsed 48px (by design, "nothing reflows"), producing a visibly full-width sidebar over a shifted, gapped content pane. That's the old "pin" concept's hover-peek mechanic, already supposed to have been retired in v0.10.14 (which removed the pin GLYPH/rotate animation but left this CSS behind) — removing it here finishes that and matches the current mandate: plain click-to-open/close, no pin, no hover magic. */ #as-app .si .lb { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* v0.10.14: plain open/close toggle — no "pinned" visual language (Glenn removed the pin concept entirely; the icon is now the same glyph as the Dashboard nav row, not a pin, so a rotate-on-pin effect no longer applies). */ #as-app .as-brand-mark svg { transition:color .15s; } #as-app:not(.as-collapsed) .as-brand-mark { color:var(--ac); } /* ═══ MOBILE BOTTOM TAB BAR (AS-0028) ═══ Fixed-position primary-nav tab bar shown only at @media(max-width:768px) (see the 768px block below) — hidden by default so it never appears at desktop widths, where the sidebar itself is the primary nav. It SUPPLEMENTS the existing .as-hamburger/.side slide-in overlay rather than replacing it: the sidebar and asToggleSidebar() are untouched, and the overlay is still reachable both from the (still-present) hamburger and from this bar's own "More" tab, so no markup/JS the hamburger already depended on had to move. Holds the 5 most-used destinations per the existing nav's own top-to-bottom order/grouping (Dashboard, Communications as "Comms" (AS-0189), Priorities as "Tasks", Opportunities as "Pipeline", Projects) plus a 6th "More" tab that opens the same .side overlay for the remaining 8 (Engage, People, Processes, Performance, Reports, Display, plus the already-hidden Drive). asBottomNav() (actionstudio.js) delegates to the existing asNav() router so badges/gating/loaders are unchanged — it just also keeps this bar's own .on state and the sidebar's .si.on state in sync in both directions. */ #as-app .as-tabbar { display:none; } /* AS-0221: hidden at desktop widths same as .as-tabbar above — only ever opened via .as-tabbar-more, itself only reachable inside the @media(max-width:768px) tab bar. Without this, the sheet/scrim markup (siblings of #as-app's main content, admin-app.php) would render as plain flow content at the bottom of the desktop page instead of staying inert. */ #as-app .as-more-scrim, #as-app .as-more-sheet { display:none; } /* ═══ TOOLBAR DOCTRINE v0.10.9 — uniform 30px controls ═══ Scoped utility: add class="as-toolbar" onto a view's existing toolbar row (its own flex/justify-content/margin inline style is left alone) to pull every .btn / select / search-ish input inside it down to the prototype's 30px control height, without hand-editing each control. Doesn't touch .tab/.lens height — those already read fine at their current size and aren't part of this pass's confirmed gaps. */ #as-app .as-toolbar .btn, #as-app .as-toolbar select, #as-app .as-toolbar input[type="search"], #as-app .as-toolbar input[type="text"], #as-app .as-toolbar input[type="month"] { height:30px; min-height:0; box-sizing:border-box; } /* v0.10.12: page-specific control classes that aren't .btn/select/input — * each needs its own override the same way .as-comm-filters did (see the * v0.10.11 fix note above the Commissions rule). Scoped to .as-toolbar so * these classes stay their original size anywhere else they're reused. */ #as-app .as-toolbar .as-toolbar-btn, #as-app .as-toolbar .as-drive-vbtn { width:30px; height:30px; min-height:0; box-sizing:border-box; } #as-app .as-toolbar .as-compose-btn { height:30px; min-height:0; box-sizing:border-box; } /* ═══ DARK MODE TOGGLE ═══ */ #as-app .as-mode-toggle { background:none; border:1px solid var(--b); border-radius:var(--rs); padding:6px; cursor:pointer; color:var(--t3); display:flex; align-items:center; justify-content:center; transition:color .15s, border-color .15s; width:34px; height:34px; box-sizing:border-box; } #as-app .as-mode-toggle:hover { color:var(--t1); border-color:var(--t3); } /* ═══ MAIN ═══ */ #as-app .as-main { margin-left:210px; flex:1; min-height:100vh; min-width:0; max-width:calc(100vw - 210px); overflow-x:hidden; transition:background .3s, margin-left .2s ease, max-width .2s ease; } #as-app .top { padding:11px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px; border-bottom:1px solid var(--b); background:var(--s); position:sticky; top:0; z-index:50; transition:background .3s,border-color .3s; } /* v0.10.255: pairs with the viewport-fit=cover meta tag (class-as-router.php * output_pwa_head()) — on an iPhone home-screen install (manifest * display:standalone), this pushes the sticky header down below the * status-bar/notch instead of leaving that area a bare white gap above it. * env() resolves to 0 without viewport-fit=cover, so this is a no-op on * desktop/non-notch/regular-tab contexts. Same pairing as the tabbar's * existing safe-area-inset-bottom padding, just for the opposite edge. */ #as-app .top { padding-top:calc(11px + env(safe-area-inset-top)); } #as-app .top h2 { font-family:'Fraunces',Georgia,serif; font-size:20px; font-weight:700; color:var(--t1); } #as-app .top p { font-size:11.5px; color:var(--t3); margin-top:1px; } #as-app .btns { display:flex; gap:6px; align-items:center; } #as-app .cnt { padding:20px 28px; } /* ═══ BUTTONS ═══ */ /* v0.10.172 (AS-0010): de-scoped from #as-app to a bare selector so the base * button rule is mount-point-agnostic. .as-g-modal-backdrop (the Google- * connect wizard, as-google-wizard.js openModal()) mounts on document.body, * outside #as-app, so it never matched these #as-app-scoped rules — it * previously fell back to a hand-duplicated copy in as-funnels.css * (.as-g-wiz-foot .btn*) that had already drifted out of sync (missing the * .btn.sm/.btn-plus variants below) and had no mechanism to stay in sync. * Safe to de-scope: actionstudio.css (handle 'actionstudio-app') is * unconditionally enqueued first, ahead of every other AS stylesheet, on * every load of the AS admin page (see class-as-router.php * enqueue_app_assets) — so these bare rules are always present wherever * #as-app or a body-mounted AS overlay can exist. :root already mirrors the * --ac/--t1/--rs/etc. tokens for exactly this class of overlay (see the * v0.3.5 comment above). Every other .btn override in the codebase uses a * higher-specificity compound selector (e.g. `.as-pd-panel .btn`, `#as-app * .as-toolbar .btn`), so lowering this base rule's own specificity doesn't * change which rule wins anywhere else. * * v0.10.178 fix (SUPERSEDED by v0.10.179 below — kept for history): that * "doesn't change which rule wins" claim missed the * `#as-app, #as-app * { margin:0; padding:0; ... }` reset near the top of * this file (~:109). That reset's `#as-app *` selector carries an ID * (specificity 1-0-0), which beats the bare `.btn`/`.btn.sm` selectors * (0-1-0 / 0-2-0) below now that they lost their own `#as-app` prefix — * so every plain-text .btn INSIDE #as-app silently rendered with zero * padding (reported: the What's New modal's "Got it" button squished * flush against its own edges). v0.10.178 re-added `#as-app .btn` / * `#as-app .btn.sm` as an extra selector on just the two padding-bearing * rules to restore enough specificity to beat the reset inside #as-app. * * v0.10.179 fix: v0.10.178's own fix was itself a third-order regression. * `.btn, #as-app .btn { ... }` is ONE rule with TWO selectors — every * property it declares (not just padding) now carries the elevated * `#as-app .btn` specificity (1 ID + 1 class = 1-1-0), including font-size * and color, which this rule also sets. That's higher than any bare * single-class modifier declared after it — `.btn-plus` (font-size:0, * padding:0), `.btn-p` (color:#FFF), `.btn-g` (color:var(--t2)) — all * 0-1-0. Per normal CSS, specificity beats source order, so those * modifiers silently lost on font-size/color no matter where they sit in * the file: icon-only +Compose/+Add-contact buttons rendered their full * text label instead of collapsing to the "+" glyph, and the What's New * modal's "Got it" button (.btn.btn-p) rendered var(--t1) dark text * instead of #FFF. * * Root fix: stop fighting this with more specificity stacking (that's * what caused both prior regressions) and remove the actual conflict * instead — .btn is now excluded from the `#as-app *` reset itself (see * the RESET block, ~:109: `#as-app *:not(.btn)`), so the base button rule * never needs an `#as-app`-scoped escape hatch at all. With the reset out * of the way, .btn/.btn.sm go back to bare single/double-class selectors, * and .btn-plus/.btn-p/.btn-g naturally win on the properties they * override via normal same-specificity source-order tie-breaking — * restoring the original pre-v0.10.172 cascade behavior while keeping * v0.10.172's benefit (bare `.btn` still matches the body-mounted * Google-wizard buttons, which sit outside #as-app and were never touched * by the #as-app-scoped reset to begin with). */ .btn { padding:7px 14px; border-radius:var(--rs); font-size:12px; font-weight:600; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:all .12s; font-family:inherit; color:var(--t1); height:34px; box-sizing:border-box; } .btn-p { background:var(--ac); color:#FFF; } .btn-p:hover { background:var(--ach); } .btn-g { background:transparent; color:var(--t2); border:1px solid var(--b); } .btn-g:hover { background:var(--sa); } .btn:disabled { opacity:.4; cursor:not-allowed; } .btn.sm { height:28px; padding:0 10px; font-size:11px; } /* v0.10.39: icon-only primary "create" button — every module's +New/+Add * button collapses to just this glyph, leftmost in its toolbar. Text stays * in the DOM (font-size:0, not display:none) so screen readers still get * the label; sighted users get it via title= instead. */ .btn-plus { width:34px; padding:0; justify-content:center; font-size:0; flex:0 0 auto; gap:0; } .btn-plus::before { content:'+'; font-size:20px; font-weight:400; line-height:1; } /* ═══ SUB-HEADER TOOLBAR — v0.10.14: shared component ported 1:1 from the * as-integrated prototype's shared.css. This is the canonical sub-header shell * every surface should use going forward (Dashboard and Display are the two * documented exceptions — see HANDOFF-NEXT-SESSION-sidebar-redo.md). Additive * only: nothing existing references these classes yet, so this cannot regress * any page already shipped. Surfaces adopt it one at a time as their own phase * lands, replacing the old hand-inlined `.as-toolbar style="display:flex;..."` * pattern. ═══ */ /* v0.10.15: .toolbar lives inside .cnt, which already carries its own 20px/28px * padding (unlike the prototype's zero-padding page shell) — cancel that out * with a negative margin so the toolbar still bleeds edge-to-edge under the * header, matching the prototype exactly, without touching .cnt's padding * globally (used by every view, most not yet on this component). */ #as-app .toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:11px 22px; background:var(--s); border-bottom:1px solid var(--b); margin:-20px -28px 20px; } #as-app .toolbar + .toolbar { margin-top:-20px; } #as-app .toolbar .grow { flex:1; } #as-app .toolbar .spacer { flex:1; } /* v0.10.255: Tasks toolbar's search/filter/view-swap icon buttons, wrapped in * one row so mobile's flex-direction:column (below) stacks this as ONE group * instead of three separate full-width rows — matches how they sat side by * side as plain .toolbar children before the wrap. */ #as-app .as-task-icon-row { display:flex; align-items:center; gap:12px; } /* segmented lens/tab group — the prototype's People/Companies, Opportunities-lens style */ #as-app .lenses { display:flex; border:1px solid var(--b); background:var(--bg); } #as-app .lens { height:30px; padding:0 15px; font-size:12px; font-weight:600; color:var(--t3); display:flex; align-items:center; gap:7px; background:none; border:none; cursor:pointer; font-family:inherit; } #as-app .lens+.lens { border-left:1px solid var(--b); } #as-app .lens .dot { width:6px; height:6px; border-radius:50%; background:var(--ac); } /* AS-0239: base (all widths) row for the Queue group + All / This week * group. AS-0229 added this wrapper but only styled it inside the 768px * media query, so on desktop it was a block div and the two groups stacked. * The later mobile rules (768px block, display:contents block) still win on * phones by source order. */ #as-app .as-task-scope-row { display:flex; align-items:center; gap:0; flex:0 0 auto; } @media (min-width:769px) { #as-app .as-task-scope-row > .lenses + .lenses { border-left:0; } } #as-app .lens:hover { color:var(--t1); } #as-app .lens.on { background:var(--t1); color:#fff; } #as-app.as-dark .lens.on { background:var(--ac); color:#16181d; } #as-app .lens.on .dot { background:#fff; } #as-app .lens .n { font-size:10px; font-weight:700; opacity:.6; } /* icon-button Cards/List segmented toggle */ #as-app .viewseg { display:inline-flex; border:1px solid var(--b); background:var(--s); } #as-app .viewseg button { width:32px; height:30px; display:flex; align-items:center; justify-content:center; color:var(--t3); border:none; background:none; cursor:pointer; } #as-app .viewseg button+button { border-left:1px solid var(--b); } #as-app .viewseg button.on { background:var(--ac); color:#fff; } #as-app .viewseg svg { width:15px; height:15px; } #as-app .osearch { display:flex; align-items:center; gap:7px; height:30px; padding:0 10px; border:1px solid var(--b); background:var(--bg); color:var(--t3); min-width:170px; } #as-app .osearch input { border:none; background:none; outline:none; color:var(--t1); font-size:12px; width:100%; font-family:inherit; } #as-app .osearch svg { width:14px; height:14px; flex:0 0 auto; } #as-app .iconbtn { width:32px; height:32px; display:flex; align-items:center; justify-content:center; border:1px solid var(--b); background:var(--s); color:var(--t2); cursor:pointer; } #as-app .iconbtn:hover { background:var(--sa); color:var(--t1); } #as-app .iconbtn svg { width:16px; height:16px; } #as-app .seg { display:inline-flex; border:1px solid var(--b); background:var(--s); height:34px; box-sizing:border-box; } /* v0.10.54: height:34px + flex-centering added to match .btn's fixed 34px header-bar height — previously unset here, so .seg rendered shorter than an adjacent .btn/.btn-plus in the same toolbar row (Glenn, live feedback). */ /* v0.10.58: gap between the icon and label — matches .si's icon/label gap. Previously relied on the single literal space character between and the label text in the markup, which read as too tight (Glenn, live feedback on the Email/Calendar toggle). */ #as-app .seg button { height:100%; box-sizing:border-box; display:inline-flex; align-items:center; gap:8px; padding:0 12px; font-size:12px; font-weight:600; color:var(--t2); border-right:1px solid var(--b); border-left:none; border-top:none; border-bottom:none; background:none; cursor:pointer; font-family:inherit; } #as-app .seg button:last-child { border-right:none; } #as-app .seg button.on { background:var(--ac); color:#fff; } #as-app .search { flex:1; min-width:120px; max-width:280px; height:30px; padding:0 11px; font-size:12px; border:1px solid var(--b); background:var(--s); color:var(--t1); font-family:inherit; } /* v0.10.17: labeled-select toolbar control (prototype's Health filter on * Projects) — ported 1:1 from shared.css alongside the rest of the sub-header * component set. */ #as-app .selctl { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--t2); } #as-app .selctl label { color:var(--t3); font-size:11px; } #as-app .sel { height:30px; border:1px solid var(--b); background:var(--bg); color:var(--t1); font-size:12px; padding:0 8px; font-family:inherit; } /* toolbar-doctrine-v2 (2026-08-16): funnel/campaign picker moved into the * shared Opportunities toolbar (was inside its own .as-funnels-pickbar row, * which had generic ".as-toolbar select{height:30px}" sizing) — its * generated