207 lines
6.5 KiB
CSS
207 lines
6.5 KiB
CSS
.theme-key-light {
|
|
color-scheme: light;
|
|
--accent: #047857;
|
|
--bg: #f7f8fb;
|
|
--panel: #ffffff;
|
|
--panel-2: #f1f5f9;
|
|
--panel-3: #e8edf3;
|
|
--border: rgba(15, 23, 42, 0.11);
|
|
--border-strong: rgba(15, 23, 42, 0.2);
|
|
--text: #0f172a;
|
|
--muted: #475569;
|
|
--dim: #64748b;
|
|
--danger: #dc2626;
|
|
--danger-text: #b91c1c;
|
|
--danger-soft: color-mix(in srgb, var(--danger) 9%, var(--panel));
|
|
--danger-border: color-mix(in srgb, var(--danger) 34%, var(--border));
|
|
--success: #16a34a;
|
|
--success-text: #166534;
|
|
--success-soft: color-mix(in srgb, var(--success) 10%, var(--panel));
|
|
--success-border: color-mix(in srgb, var(--success) 34%, var(--border));
|
|
--warning: #d97706;
|
|
--warning-text: #92400e;
|
|
--warning-soft: color-mix(in srgb, var(--warning) 11%, var(--panel));
|
|
--warning-border: color-mix(in srgb, var(--warning) 34%, var(--border));
|
|
--info: #2563eb;
|
|
--info-text: #1d4ed8;
|
|
--info-soft: color-mix(in srgb, var(--info) 9%, var(--panel));
|
|
--info-border: color-mix(in srgb, var(--info) 30%, var(--border));
|
|
--blue: #2563eb;
|
|
--radius: 8px;
|
|
--accent-contrast: #ffffff;
|
|
--surface-sheen: rgba(15, 23, 42, 0.035);
|
|
--surface-sheen-soft: rgba(15, 23, 42, 0.012);
|
|
--surface-hover: rgba(15, 23, 42, 0.045);
|
|
--surface-muted: rgba(15, 23, 42, 0.035);
|
|
--surface-subtle: rgba(15, 23, 42, 0.025);
|
|
--surface-subtle-border: rgba(15, 23, 42, 0.1);
|
|
--overlay-scrim: rgba(15, 23, 42, 0.34);
|
|
--nav-bg: rgba(255, 255, 255, 0.88);
|
|
--rail-bg: rgba(255, 255, 255, 0.72);
|
|
--shadow-soft: 0 6px 18px rgba(15, 23, 42, 0.06);
|
|
--shadow-strong: 0 18px 44px rgba(15, 23, 42, 0.12);
|
|
--shadow-popover: 0 14px 28px rgba(15, 23, 42, 0.12);
|
|
--inset-highlight: rgba(255, 255, 255, 0.75);
|
|
--admin-bg: #f7f8fb;
|
|
--admin-surface: #ffffff;
|
|
--admin-surface-2: #f1f5f9;
|
|
--admin-elev: #e8edf3;
|
|
--admin-border: rgba(15, 23, 42, 0.1);
|
|
--admin-border-strong: rgba(15, 23, 42, 0.18);
|
|
--admin-text: #0f172a;
|
|
--admin-muted: #64748b;
|
|
--admin-dim: #64748b;
|
|
--admin-chart-stroke: #065f46;
|
|
--admin-chart-fill: rgba(6, 95, 70, 0.22);
|
|
}
|
|
|
|
.theme-key-light .ui-spinner,
|
|
.theme-key-light .brand-mark-spinner {
|
|
color: inherit;
|
|
}
|
|
|
|
.theme-key-light .telegram-button-spinner {
|
|
border-color: rgba(255, 255, 255, 0.35);
|
|
border-top-color: #ffffff;
|
|
}
|
|
|
|
.theme-key-light .btn-primary,
|
|
.theme-key-light .admin-btn.admin-btn-primary,
|
|
.theme-key-light .admin-extend-control .admin-btn.admin-btn-primary {
|
|
background: color-mix(in srgb, var(--accent) 50%, #000000);
|
|
border-color: color-mix(in srgb, var(--accent) 42%, #000000);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.theme-key-light .btn-primary:hover:not(:disabled),
|
|
.theme-key-light .admin-btn.admin-btn-primary:hover:not(:disabled),
|
|
.theme-key-light .admin-extend-control .admin-btn.admin-btn-primary:hover:not(:disabled) {
|
|
background: color-mix(in srgb, var(--accent) 52%, #000000);
|
|
}
|
|
|
|
.theme-key-light.app-shell {
|
|
background: var(--bg) !important;
|
|
}
|
|
|
|
.theme-key-light .phone-screen {
|
|
background: var(--bg);
|
|
}
|
|
|
|
/* Flatten Settings rows: no gradient sheen, no inset highlight that reads as a 3D bevel */
|
|
.theme-key-light .settings-row {
|
|
background: var(--panel);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.theme-key-light .settings-row-linked {
|
|
background: var(--success-soft);
|
|
}
|
|
|
|
/* Avatar/profile card: bigger lift, but rows below have an opaque background and
|
|
stack above, so the shadow stays visually under them instead of bleeding through. */
|
|
.theme-key-light .settings-profile {
|
|
box-shadow:
|
|
0 10px 24px rgba(15, 23, 42, 0.10),
|
|
inset 0 1px 0 var(--inset-highlight);
|
|
}
|
|
|
|
.theme-key-light .settings-links-block {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* New user-facing activation surfaces */
|
|
.theme-key-light .trial-offer-card,
|
|
.theme-key-light .trial-activation-card,
|
|
.theme-key-light .activation-success-dialog {
|
|
border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
|
|
background: #ffffff;
|
|
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
|
|
}
|
|
|
|
.theme-key-light .trial-card-head > svg,
|
|
.theme-key-light .dialog-title-icon {
|
|
color: color-mix(in srgb, var(--accent) 54%, #000000);
|
|
}
|
|
|
|
.theme-key-light .trial-card-facts span,
|
|
.theme-key-light .trial-activation-facts div {
|
|
border-color: rgba(15, 23, 42, 0.12);
|
|
background: rgba(15, 23, 42, 0.025);
|
|
}
|
|
|
|
/* Slightly stronger axis/grid contrast for the revenue chart on a light surface */
|
|
.theme-key-light .admin-revenue-svg-frame {
|
|
background: #ffffff;
|
|
}
|
|
|
|
/* Bonus section: drop accent color from body strongs; only the bonus-system heading
|
|
and explicitly-accent card headings stay tinted — and they use the same darkened
|
|
accent technique as .btn-primary on light, so they remain readable on white. */
|
|
.theme-key-light .bonus-card strong {
|
|
color: var(--text);
|
|
}
|
|
|
|
.theme-key-light .bonus-card-head strong,
|
|
.theme-key-light .card-heading-accent {
|
|
color: color-mix(in srgb, var(--accent) 50%, #000000);
|
|
}
|
|
|
|
.theme-key-light .bonus-card-head > svg {
|
|
color: color-mix(in srgb, var(--accent) 50%, #000000);
|
|
}
|
|
|
|
/* Install guide theme surfaces */
|
|
|
|
.theme-key-light .install-platform-trigger,
|
|
.theme-key-light .install-app-button,
|
|
.theme-key-light .install-step,
|
|
.theme-key-light .install-subscription-card,
|
|
.theme-key-light .install-qr-wrap {
|
|
background: #ffffff;
|
|
border-color: rgba(15, 23, 42, 0.12);
|
|
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.055);
|
|
}
|
|
|
|
.theme-key-light .install-app-button.active {
|
|
border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
|
|
background: color-mix(in srgb, var(--accent) 8%, #ffffff);
|
|
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
|
|
}
|
|
|
|
.theme-key-light .install-platform-trigger:focus-visible,
|
|
.theme-key-light .install-platform-trigger[data-state="open"],
|
|
.theme-key-light .install-app-button:focus-visible {
|
|
border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
|
|
}
|
|
|
|
body:has(.theme-key-light) .install-platform-content {
|
|
background: #ffffff;
|
|
border-color: rgba(15, 23, 42, 0.14);
|
|
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
|
|
}
|
|
|
|
body:has(.theme-key-light) .install-platform-item[data-highlighted],
|
|
body:has(.theme-key-light) .install-platform-item[data-selected] {
|
|
background: color-mix(in srgb, var(--accent) 9%, #ffffff);
|
|
}
|
|
|
|
.theme-key-light .install-step-icon,
|
|
.theme-key-light .install-subscription-header-icon {
|
|
background: color-mix(in srgb, var(--accent) 8%, #ffffff);
|
|
color: color-mix(in srgb, var(--accent) 55%, #000000);
|
|
}
|
|
|
|
.theme-key-light .install-qr-divider {
|
|
color: rgba(15, 23, 42, 0.24);
|
|
}
|
|
|
|
.theme-key-light .install-feature-star.attention-dot {
|
|
background: #f59e0b;
|
|
}
|
|
|
|
.theme-key-light .install-loading .ui-spinner {
|
|
color: color-mix(in srgb, var(--accent) 55%, #000000);
|
|
}
|