/* * RingDesk shared design tokens. * * Themes are selected with `data-theme` on ("teams" | "webex") and the * light/dark palette with `data-appearance` ("light" | "dark"). flags.js always * writes a resolved appearance, so the prefers-color-scheme block below only * covers the first paint before the module executes — keep it in sync with the * [data-appearance="dark"] block. */ :root { --density-scale: 1; --space-1: calc(4px * var(--density-scale)); --space-2: calc(8px * var(--density-scale)); --space-3: calc(12px * var(--density-scale)); --space-4: calc(16px * var(--density-scale)); --space-5: calc(20px * var(--density-scale)); --space-6: calc(24px * var(--density-scale)); --space-7: calc(32px * var(--density-scale)); --space-8: calc(48px * var(--density-scale)); --control-h-sm: calc(36px * var(--density-scale)); --control-h: calc(44px * var(--density-scale)); --control-h-lg: calc(52px * var(--density-scale)); --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --weight-medium: 600; --weight-semibold: 700; --weight-bold: 800; --tracking-tight: -0.02em; --tracking-display: -0.04em; --tracking-wide: 0.12em; --ease: cubic-bezier(0.33, 0, 0.1, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur: 180ms; --dur-slow: 300ms; --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 32%, transparent); } [data-density="compact"] { --density-scale: 0.85; } /* ---------------------------------------------------------------- themes -- */ :root, [data-theme="teams"] { --font-sans: "Segoe UI Variable", "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-display: var(--font-sans); --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-pill: 999px; --radius-avatar: 50%; /* Fluent 2: flat rectangular controls, crisp strokes, restrained type. */ --btn-radius: 4px; --btn-h: calc(40px * var(--density-scale)); --btn-h-lg: calc(48px * var(--density-scale)); --btn-px: calc(16px * var(--density-scale)); --btn-weight: 600; --btn-shadow: none; --btn-shadow-hover: none; --btn-lift: none; --field-radius: 4px; --field-h: calc(40px * var(--density-scale)); --card-radius: 8px; --card-pad: calc(16px * var(--density-scale)); --card-border: 1px solid var(--line); --card-shadow: var(--shadow-xs); --card-gap: calc(12px * var(--density-scale)); --chip-radius: 4px; --chip-px: calc(8px * var(--density-scale)); --icon-btn-radius: 4px; --nav-radius: 4px; --logo-radius: 6px; --dialog-radius: 8px; --toast-radius: 4px; --eyebrow-transform: none; --eyebrow-tracking: 0; --eyebrow-weight: 600; --eyebrow-size: 12px; --heading-weight: 600; --heading-tracking: -0.01em; --label-weight: 600; --stat-weight: 600; --brand-500: #5b5fc7; --brand-600: #4f52b2; --brand-700: #444791; --brand-800: #33366b; --brand-300: #9299f7; --brand-200: #c1c5f2; --brand-100: #e8ebfa; --shadow-xs: 0 1px 2px rgba(16, 20, 40, 0.06); --shadow-sm: 0 1px 2px rgba(16, 20, 40, 0.07), 0 2px 6px rgba(16, 20, 40, 0.06); --shadow-md: 0 2px 4px rgba(16, 20, 40, 0.07), 0 8px 20px rgba(16, 20, 40, 0.08); --shadow-lg: 0 8px 16px rgba(16, 20, 40, 0.08), 0 24px 56px rgba(16, 20, 40, 0.14); } [data-theme="webex"] { --font-sans: "CiscoSansTT", "Cisco Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; --font-display: var(--font-sans); --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 28px; --radius-pill: 999px; --radius-avatar: 50%; /* Momentum: capsule controls, borderless elevated cards, generous rhythm. */ --btn-radius: 999px; --btn-h: calc(44px * var(--density-scale)); --btn-h-lg: calc(54px * var(--density-scale)); --btn-px: calc(24px * var(--density-scale)); --btn-weight: 700; --btn-shadow: var(--shadow-sm); --btn-shadow-hover: var(--shadow-md); --btn-lift: translateY(-1px); --field-radius: 12px; --field-h: calc(48px * var(--density-scale)); --card-radius: 20px; --card-pad: calc(24px * var(--density-scale)); --card-border: 1px solid transparent; --card-shadow: var(--shadow-md); --card-gap: calc(20px * var(--density-scale)); --chip-radius: 999px; --chip-px: calc(12px * var(--density-scale)); --icon-btn-radius: 50%; --nav-radius: 16px; --logo-radius: 50%; --dialog-radius: 28px; --toast-radius: 16px; --eyebrow-transform: uppercase; --eyebrow-tracking: 0.12em; --eyebrow-weight: 700; --eyebrow-size: 11px; --heading-weight: 700; --heading-tracking: -0.025em; --label-weight: 700; --stat-weight: 800; --brand-500: #0a7a52; --brand-600: #086340; --brand-700: #064f33; --brand-800: #06301f; --brand-300: #2ecc8f; --brand-200: #a5dcc2; --brand-100: #e3f5ec; --shadow-xs: 0 1px 3px rgba(6, 40, 30, 0.06); --shadow-sm: 0 2px 6px rgba(6, 40, 30, 0.07), 0 1px 2px rgba(6, 40, 30, 0.05); --shadow-md: 0 6px 18px rgba(6, 40, 30, 0.09), 0 2px 4px rgba(6, 40, 30, 0.05); --shadow-lg: 0 18px 48px rgba(6, 40, 30, 0.16), 0 4px 12px rgba(6, 40, 30, 0.07); } /* ------------------------------------------------------------ light mode -- */ :root, [data-appearance="light"] { color-scheme: light; --canvas: #f5f5f5; --canvas-alt: #ffffff; --surface: #ffffff; --surface-raised: #ffffff; --surface-sunken: #fafafa; --surface-hover: #f0f0f0; --surface-inverse: #1f1f1f; --ink: #242424; --ink-muted: #616161; --ink-subtle: #8a8886; --ink-inverse: #ffffff; --ink-on-accent: #ffffff; --line: #e1dfdd; --line-strong: #cfcdcb; --line-subtle: #efeeed; --accent: var(--brand-500); --accent-hover: color-mix(in srgb, var(--accent) 86%, #000000); --accent-active: color-mix(in srgb, var(--accent) 72%, #000000); --accent-soft: color-mix(in srgb, var(--accent) 11%, #ffffff); --accent-soft-hover: color-mix(in srgb, var(--accent) 18%, #ffffff); --accent-border: color-mix(in srgb, var(--accent) 32%, #ffffff); --accent-text: color-mix(in srgb, var(--accent) 82%, #000000); --success: #0f7b4f; --success-soft: #e6f5ed; --success-text: #0b5c3b; --warning: #b15c00; --warning-soft: #fdf2e0; --warning-text: #8a4700; --danger: #c4314b; --danger-hover: #a72740; --danger-soft: #fdeaee; --danger-text: #a1233a; --info: #1f5eb8; --info-soft: #e7effb; --info-text: #174a94; --overlay: rgba(20, 22, 38, 0.55); --scrim: rgba(255, 255, 255, 0.9); } [data-appearance="light"][data-theme="teams"] { --nav-bg: #33366b; --nav-ink: #ffffff; --nav-ink-muted: #c1c5f2; --nav-hover: #414592; --nav-active-bg: #5b5fc7; --nav-active-ink: #ffffff; --nav-accent: #b8bbfa; --nav-line: rgba(255, 255, 255, 0.14); --hero-bg: linear-gradient(150deg, #2c2f60 0%, #444791 55%, #5b5fc7 100%); --call-bg: radial-gradient(circle at 50% 28%, #4a4d9e 0, #2d3068 38%, #17182d 84%); } [data-appearance="light"][data-theme="webex"] { --nav-bg: #0f2a22; --nav-ink: #ffffff; --nav-ink-muted: #a8ceba; --nav-hover: #17392e; --nav-active-bg: #0a7a52; --nav-active-ink: #ffffff; --nav-accent: #5fdca6; --nav-line: rgba(255, 255, 255, 0.13); --hero-bg: linear-gradient(150deg, #06301f 0%, #0a5c3d 52%, #12876a 100%); --call-bg: radial-gradient(circle at 50% 28%, #0f6b52 0, #0a3f31 38%, #071c17 84%); } /* ------------------------------------------------------------- dark mode -- */ [data-appearance="dark"] { color-scheme: dark; --canvas: #1a1a1a; --canvas-alt: #222222; --surface: #262626; --surface-raised: #303030; --surface-sunken: #141414; --surface-hover: #383838; --surface-inverse: #f5f5f5; --ink: #f5f5f5; --ink-muted: #b3b3b3; --ink-subtle: #8f8f8f; --ink-inverse: #1a1a1a; --ink-on-accent: #10121f; --line: #3b3b3b; --line-strong: #545454; --line-subtle: #2e2e2e; --accent: var(--brand-300); --accent-hover: color-mix(in srgb, var(--accent) 84%, #ffffff); --accent-active: color-mix(in srgb, var(--accent) 70%, #ffffff); --accent-soft: color-mix(in srgb, var(--accent) 20%, transparent); --accent-soft-hover: color-mix(in srgb, var(--accent) 30%, transparent); --accent-border: color-mix(in srgb, var(--accent) 44%, transparent); --accent-text: color-mix(in srgb, var(--accent) 90%, #ffffff); --success: #4ec98a; --success-soft: rgba(78, 201, 138, 0.16); --success-text: #7bdda9; --warning: #e8a33d; --warning-soft: rgba(232, 163, 61, 0.16); --warning-text: #f0bd72; --danger: #f1707f; --danger-hover: #f68c98; --danger-soft: rgba(241, 112, 127, 0.16); --danger-text: #f79aa5; --info: #79aef7; --info-soft: rgba(121, 174, 247, 0.16); --info-text: #9cc5fa; --overlay: rgba(0, 0, 0, 0.66); --scrim: rgba(26, 26, 26, 0.9); --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.45), 0 10px 24px rgba(0, 0, 0, 0.4); --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.45), 0 28px 64px rgba(0, 0, 0, 0.55); } [data-appearance="dark"][data-theme="teams"] { --nav-bg: #141414; --nav-ink: #ffffff; --nav-ink-muted: #a6a6a6; --nav-hover: #262626; --nav-active-bg: #34366d; --nav-active-ink: #ffffff; --nav-accent: #9299f7; --nav-line: rgba(255, 255, 255, 0.1); --hero-bg: linear-gradient(150deg, #1c1d3a 0%, #2f3170 55%, #444791 100%); --call-bg: radial-gradient(circle at 50% 28%, #33366b 0, #1e2044 38%, #101124 84%); } [data-appearance="dark"][data-theme="webex"] { --canvas: #121715; --canvas-alt: #182220; --surface: #1b2422; --surface-raised: #23302c; --surface-sunken: #0d1211; --surface-hover: #2a3733; --line: #33423d; --line-strong: #4a5b55; --line-subtle: #26312e; --nav-bg: #0d1211; --nav-ink: #ffffff; --nav-ink-muted: #93aca1; --nav-hover: #1b2422; --nav-active-bg: #0f5237; --nav-active-ink: #ffffff; --nav-accent: #2ecc8f; --nav-line: rgba(255, 255, 255, 0.09); --hero-bg: linear-gradient(150deg, #06231a 0%, #0a4a33 55%, #0f7351 100%); --call-bg: radial-gradient(circle at 50% 28%, #0d5a41 0, #072d22 38%, #050f0d 84%); } /* Pre-hydration fallback — mirrors [data-appearance="dark"] above. */ @media (prefers-color-scheme: dark) { :root:not([data-appearance]) { color-scheme: dark; --canvas: #1a1a1a; --canvas-alt: #222222; --surface: #262626; --surface-raised: #303030; --surface-sunken: #141414; --surface-hover: #383838; --surface-inverse: #f5f5f5; --ink: #f5f5f5; --ink-muted: #b3b3b3; --ink-subtle: #8f8f8f; --ink-inverse: #1a1a1a; --ink-on-accent: #10121f; --line: #3b3b3b; --line-strong: #545454; --line-subtle: #2e2e2e; --accent: var(--brand-300); --accent-hover: color-mix(in srgb, var(--accent) 84%, #ffffff); --accent-active: color-mix(in srgb, var(--accent) 70%, #ffffff); --accent-soft: color-mix(in srgb, var(--accent) 20%, transparent); --accent-soft-hover: color-mix(in srgb, var(--accent) 30%, transparent); --accent-border: color-mix(in srgb, var(--accent) 44%, transparent); --accent-text: color-mix(in srgb, var(--accent) 90%, #ffffff); --success: #4ec98a; --success-soft: rgba(78, 201, 138, 0.16); --success-text: #7bdda9; --warning: #e8a33d; --warning-soft: rgba(232, 163, 61, 0.16); --warning-text: #f0bd72; --danger: #f1707f; --danger-hover: #f68c98; --danger-soft: rgba(241, 112, 127, 0.16); --danger-text: #f79aa5; --info: #79aef7; --info-soft: rgba(121, 174, 247, 0.16); --info-text: #9cc5fa; --overlay: rgba(0, 0, 0, 0.66); --scrim: rgba(26, 26, 26, 0.9); --nav-bg: #141414; --nav-ink: #ffffff; --nav-ink-muted: #a6a6a6; --nav-hover: #262626; --nav-active-bg: #34366d; --nav-active-ink: #ffffff; --nav-accent: #9299f7; --nav-line: rgba(255, 255, 255, 0.1); --hero-bg: linear-gradient(150deg, #1c1d3a 0%, #2f3170 55%, #444791 100%); --call-bg: radial-gradient(circle at 50% 28%, #33366b 0, #1e2044 38%, #101124 84%); } } /* --------------------------------------------------------------- motion -- */ [data-motion="reduced"] *, [data-motion="reduced"] *::before, [data-motion="reduced"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ------------------------------------------------- shared settings panel -- */ .rd-settings-dialog { width: min(600px, calc(100% - 24px)); padding: 0; border: 1px solid var(--line); border-radius: var(--dialog-radius); color: var(--ink); background: var(--surface); box-shadow: var(--shadow-lg); font-family: var(--font-sans); } .rd-settings-dialog::backdrop { background: var(--overlay); backdrop-filter: blur(4px); } .rd-settings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); padding: var(--space-6); border-bottom: 1px solid var(--line); } .rd-settings-head h2 { margin: 0; color: var(--ink); font-size: 20px; font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking); } .rd-settings-head p { margin: var(--space-1) 0 0; color: var(--ink-muted); font-size: 13px; line-height: 1.55; } .rd-settings-close { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: var(--icon-btn-radius); color: var(--ink-muted); background: var(--surface); cursor: pointer; font: inherit; font-size: 18px; line-height: 1; } .rd-settings-close:hover { border-color: var(--line-strong); background: var(--surface-hover); } .rd-settings-body { display: grid; gap: var(--space-6); max-height: min(64vh, 560px); padding: var(--space-6); overflow-y: auto; } .rd-field { display: grid; gap: var(--space-3); } .rd-field-label { margin: 0; color: var(--ink); font-size: 13px; font-weight: var(--label-weight); } .rd-field-help { margin: calc(var(--space-1) * -1) 0 0; color: var(--ink-muted); font-size: 12px; line-height: 1.5; } .rd-theme-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .rd-theme-option { display: grid; gap: var(--space-3); padding: var(--card-pad); border: 1px solid var(--line); border-radius: var(--card-radius); color: var(--ink); background: var(--surface); cursor: pointer; font: inherit; text-align: left; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .rd-theme-option:hover { border-color: var(--accent-border); } .rd-theme-option[aria-checked="true"] { border-color: var(--accent); box-shadow: var(--focus-ring); } .rd-theme-option strong { display: block; font-size: 14px; font-weight: var(--weight-semibold); } .rd-theme-option small { display: block; margin-top: 2px; color: var(--ink-muted); font-size: 12px; line-height: 1.45; } .rd-theme-preview { display: flex; height: 54px; align-items: stretch; overflow: hidden; border: 1px solid var(--line-subtle); border-radius: var(--field-radius); } .rd-preview-rail { flex: 0 0 24%; } .rd-preview-body { display: flex; flex: 1; align-items: center; gap: 6px; padding-left: 10px; } .rd-preview-btn { width: 36px; height: 14px; } .rd-preview-chip { width: 20px; height: 14px; } /* Previews mirror each system's control shape, not just its palette. */ .rd-preview-teams-light .rd-preview-rail { background: #33366b; } .rd-preview-teams-light .rd-preview-body { background: #ffffff; } .rd-preview-teams-light .rd-preview-btn { border-radius: 2px; background: #5b5fc7; } .rd-preview-teams-light .rd-preview-chip { border-radius: 2px; background: #e8ebfa; } .rd-preview-teams-dark .rd-preview-rail { background: #141414; } .rd-preview-teams-dark .rd-preview-body { background: #262626; } .rd-preview-teams-dark .rd-preview-btn { border-radius: 2px; background: #9299f7; } .rd-preview-teams-dark .rd-preview-chip { border-radius: 2px; background: #3b3b3b; } .rd-preview-webex-light .rd-preview-rail { background: #0f2a22; } .rd-preview-webex-light .rd-preview-body { background: #ffffff; } .rd-preview-webex-light .rd-preview-btn { border-radius: 999px; background: #0a7a52; } .rd-preview-webex-light .rd-preview-chip { border-radius: 999px; background: #e3f5ec; } .rd-preview-webex-dark .rd-preview-rail { background: #0d1211; } .rd-preview-webex-dark .rd-preview-body { background: #1b2422; } .rd-preview-webex-dark .rd-preview-btn { border-radius: 999px; background: #2ecc8f; } .rd-preview-webex-dark .rd-preview-chip { border-radius: 999px; background: #33423d; } .rd-segmented { display: grid; gap: var(--space-1); padding: var(--space-1); border: 1px solid var(--line); border-radius: var(--btn-radius); background: var(--surface-sunken); grid-auto-columns: 1fr; grid-auto-flow: column; } .rd-segmented button { min-height: var(--control-h-sm); padding: 0 var(--space-3); border: 0; border-radius: var(--btn-radius); color: var(--ink-muted); background: transparent; cursor: pointer; font: inherit; font-size: 13px; font-weight: var(--btn-weight); transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .rd-segmented button:hover { color: var(--ink); } .rd-segmented button[aria-pressed="true"] { color: var(--ink); background: var(--surface); box-shadow: var(--shadow-xs); } .rd-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--control-h); padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--field-radius); background: var(--surface); cursor: pointer; font: inherit; text-align: left; } .rd-toggle-row:hover { border-color: var(--line-strong); } .rd-toggle-row span:first-child { display: grid; gap: 2px; min-width: 0; } .rd-toggle-row strong { color: var(--ink); font-size: 13px; font-weight: var(--weight-semibold); } .rd-toggle-row small { color: var(--ink-muted); font-size: 12px; line-height: 1.45; } .rd-switch { position: relative; width: 42px; height: 24px; flex: 0 0 auto; border-radius: var(--radius-pill); background: var(--line-strong); transition: background var(--dur) var(--ease); } .rd-switch::after { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #ffffff; box-shadow: var(--shadow-xs); content: ""; transition: transform var(--dur) var(--ease); } .rd-toggle-row[aria-pressed="true"] .rd-switch { background: var(--accent); } .rd-toggle-row[aria-pressed="true"] .rd-switch::after { transform: translateX(18px); } .rd-settings-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--line); } .rd-settings-foot button { min-height: var(--btn-h); padding: 0 var(--btn-px); border: 1px solid var(--line); border-radius: var(--btn-radius); color: var(--ink); background: var(--surface); cursor: pointer; font: inherit; font-size: 13px; font-weight: var(--btn-weight); } .rd-settings-foot button.rd-primary { color: var(--ink-on-accent); border-color: var(--accent); background: var(--accent); } .rd-settings-foot button.rd-primary:hover { border-color: var(--accent-hover); background: var(--accent-hover); } .rd-settings-dialog :focus-visible { outline: none; box-shadow: var(--focus-ring); } @media (max-width: 560px) { .rd-settings-head, .rd-settings-body { padding: var(--space-4); } .rd-settings-foot { padding: var(--space-3) var(--space-4); } .rd-theme-grid { grid-template-columns: 1fr; } } /* ========================================================================== * Component behaviour * * Tokens cover shape and colour; these rules cover the parts of each design * system that are structural. They use an attribute selector so they outrank * the per-app stylesheets, which are loaded after this file. * ========================================================================== */ /* -- Fluent 2 (Teams) ---------------------------------------------------- */ /* Focus moves to a 2px accent underline instead of a ring. */ [data-theme="teams"] input:focus, [data-theme="teams"] input:focus-visible, [data-theme="teams"] textarea:focus, [data-theme="teams"] textarea:focus-visible, [data-theme="teams"] select:focus, [data-theme="teams"] select:focus-visible { border-color: var(--line-strong); border-bottom: 2px solid var(--accent); box-shadow: none; outline: none; } /* Flat brand surfaces — Fluent avoids gradient fills. */ [data-theme="teams"] .application-hero, [data-theme="teams"] .auth-hero { background-image: none; background-color: var(--nav-bg); } [data-theme="teams"] .welcome-strip { border-color: var(--line); background: var(--surface); } /* Selected navigation gets a rail accent bar, not a filled capsule. */ [data-theme="teams"] .nav-item { position: relative; } [data-theme="teams"] .nav-item.active::before { position: absolute; top: 50%; left: -8px; width: 3px; height: 18px; border-radius: 2px; background: var(--nav-accent); transform: translateY(-50%); content: ""; } /* Data cards read as tinted stripes rather than decorative blobs. */ [data-theme="teams"] .metric-card::after, [data-theme="teams"] .app-card::after { display: none; } [data-theme="teams"] .metric-card { border-left: 3px solid var(--tone-soft, var(--accent-soft)); } [data-theme="teams"] .app-card { border-top: 3px solid var(--card-color, var(--accent)); } /* -- Momentum (Webex) ---------------------------------------------------- */ /* A 2px offset ring, applied uniformly across every control. */ [data-theme="webex"] :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; } [data-theme="webex"] input:focus, [data-theme="webex"] textarea:focus, [data-theme="webex"] select:focus { border-color: var(--accent); } /* Capsule controls lift on hover. */ [data-theme="webex"] .primary-button:hover:not(:disabled), [data-theme="webex"] .call-button:hover:not(:disabled), [data-theme="webex"] .google-button:hover:not(:disabled), [data-theme="webex"] .oauth-button:hover:not(:disabled) { transform: var(--btn-lift); } /* Tabs become a segmented capsule instead of an underline. */ [data-theme="webex"] .tabs { display: inline-flex; gap: var(--space-1); padding: var(--space-1); border: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-sunken); } [data-theme="webex"] .tabs button { padding: var(--space-2) var(--space-4); border-bottom: 0; border-radius: var(--radius-pill); } [data-theme="webex"] .tabs button.active { color: var(--ink-on-accent); background: var(--accent); } [data-theme="webex"] .table-shell { margin-top: var(--space-3); border-top: 1px solid var(--line); border-radius: var(--card-radius); } /* Momentum separates dialog sections with space, not rules. */ [data-theme="webex"] .dialog-heading, [data-theme="webex"] .dialog-actions, [data-theme="webex"] .rd-settings-head, [data-theme="webex"] .rd-settings-foot { border-color: transparent; }