Alireza HassaniandCursor
e9400c2281
Login and in-app surfaces follow tenant themeMode, matching customer dark tokens, with themed switches and tighter card/table chrome. Co-authored-by: Cursor <cursoragent@cursor.com>
269 lines
7.9 KiB
CSS
269 lines
7.9 KiB
CSS
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
:root {
|
|
--primary: #3b82f6;
|
|
--primary-glow: #3b82f6;
|
|
--primary-light: #dbeafe;
|
|
--primary-dark: #2563eb;
|
|
--primary-rgb: 59 130 246;
|
|
--primary-dark-rgb: 37 99 235;
|
|
--chart-accent: #06b6d4;
|
|
--chart-accent-dark: #0891b2;
|
|
--chart-accent-rgb: 6 182 212;
|
|
--chart-accent-dark-rgb: 8 145 178;
|
|
--page-accent: #38bdf8;
|
|
--page-accent-rgb: 56 189 248;
|
|
--bg-gradient-start: color-mix(in srgb, var(--primary-light) 20%, #ffffff);
|
|
--bg-gradient-mid: color-mix(
|
|
in srgb,
|
|
var(--primary-light) 13%,
|
|
color-mix(in srgb, var(--page-accent, var(--primary)) 4%, #ffffff)
|
|
);
|
|
--bg-gradient-end: color-mix(in srgb, var(--page-accent, var(--primary)) 4%, #ffffff);
|
|
--glass-bg: rgba(255, 255, 255, 0.42);
|
|
/* Sticky header: opaque enough over scrolling content; tinted by theme (works for near-white primary-light e.g. brown) */
|
|
--header-bg: color-mix(
|
|
in srgb,
|
|
color-mix(in srgb, var(--primary-light) 22%, #ffffff) 92%,
|
|
transparent
|
|
);
|
|
--glass-border: rgba(255, 255, 255, 0.7);
|
|
--glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.08);
|
|
--blur-glass: 28px;
|
|
--modal-overlay-bg: rgba(15, 23, 42, 0.4);
|
|
--modal-overlay-blur: 16px;
|
|
--toast-z-index: 11000;
|
|
--toast-bg: rgba(255, 255, 255, 0.94);
|
|
--toast-shadow: 0 12px 40px rgba(15, 23, 42, 0.14);
|
|
--text-primary: #1e293b;
|
|
--text-secondary: #64748b;
|
|
--text-muted: #94a3b8;
|
|
--border-color: rgba(148, 163, 184, 0.35);
|
|
--surface: rgba(255, 255, 255, 0.82);
|
|
--card-media-bg: #ffffff;
|
|
--elevated-surface: rgba(255, 255, 255, 0.96);
|
|
--icon-bg: color-mix(in srgb, var(--primary) 14%, #ffffff);
|
|
--icon-bg-end: color-mix(in srgb, var(--primary) 8%, #f1f5f9);
|
|
--card-hover-lift: -4px;
|
|
--card-hover-shadow: 0 16px 48px rgba(var(--primary-rgb) / 0.14);
|
|
--card-hover-transition: transform 0.25s ease, box-shadow 0.25s ease;
|
|
--table-header-bg: rgba(255, 255, 255, 0.35);
|
|
--sidebar-width: 260px;
|
|
--radius: 16px;
|
|
--radius-sm: 12px;
|
|
--select-arrow-size: 16px;
|
|
--select-arrow-offset: 12px;
|
|
--select-padding-end: 2.5rem;
|
|
--field-font-size: 13px;
|
|
--field-padding-y: 9px;
|
|
--field-padding-x: 12px;
|
|
--field-height: 38px;
|
|
/* Named faces only — generic/system families in --font-en intercept Persian glyphs. */
|
|
--font-en: 'Montserrat';
|
|
--font-fa: 'IRANYekan', 'IranYekan';
|
|
--font-ui: var(--font-en), var(--font-fa), -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma,
|
|
sans-serif;
|
|
}
|
|
|
|
/*
|
|
* Dark mode: neutral dark gray backgrounds.
|
|
* Brand/theme color (--primary) is for accents only — not page/card backgrounds.
|
|
*/
|
|
html[data-theme='dark'] {
|
|
color-scheme: dark;
|
|
|
|
--bg-gradient-start: #2a2d34;
|
|
--bg-gradient-mid: #22252b;
|
|
--bg-gradient-end: #1a1d23;
|
|
|
|
--glass-bg: rgba(45, 49, 57, 0.9);
|
|
--header-bg: color-mix(in srgb, #2a2d34 92%, transparent);
|
|
--glass-border: rgba(255, 255, 255, 0.1);
|
|
--glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
|
|
--modal-overlay-bg: rgba(0, 0, 0, 0.6);
|
|
|
|
--text-primary: #f1f5f9;
|
|
--text-secondary: #cbd5e1;
|
|
--text-muted: #94a3b8;
|
|
--border-color: rgba(255, 255, 255, 0.12);
|
|
--surface: rgba(55, 59, 68, 0.95);
|
|
--card-media-bg: #32363f;
|
|
--elevated-surface: #3a3e48;
|
|
--toast-bg: rgba(58, 62, 72, 0.96);
|
|
--toast-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
|
|
|
|
--card-hover-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
|
|
|
|
/* Table header: one step above the row, still dark */
|
|
--table-header-bg: rgba(255, 255, 255, 0.07);
|
|
|
|
/* Icon chip: dark gray tile, slight primary tint — not a light wash */
|
|
--icon-bg: color-mix(in srgb, var(--primary) 22%, #2f333c);
|
|
--icon-bg-end: color-mix(in srgb, var(--primary) 12%, #25282f);
|
|
}
|
|
|
|
html[data-theme='dark'] select {
|
|
background-color: var(--surface);
|
|
color: var(--text-primary);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
html[data-theme='dark']
|
|
input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='hidden']),
|
|
html[data-theme='dark'] textarea {
|
|
background-color: var(--surface);
|
|
color: var(--text-primary);
|
|
border-color: var(--border-color);
|
|
}
|
|
|
|
html {
|
|
min-height: 100%;
|
|
}
|
|
|
|
body,
|
|
#root {
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-ui);
|
|
color: var(--text-primary);
|
|
background:
|
|
radial-gradient(ellipse 80% 60% at 10% 0%, rgba(var(--primary-rgb) / 0.07) 0%, transparent 55%),
|
|
radial-gradient(
|
|
ellipse 70% 50% at 90% 100%,
|
|
rgba(var(--page-accent-rgb, var(--primary-rgb)) / 0.06) 0%,
|
|
transparent 50%
|
|
),
|
|
linear-gradient(
|
|
135deg,
|
|
var(--bg-gradient-start) 0%,
|
|
var(--bg-gradient-mid) 45%,
|
|
var(--bg-gradient-end) 100%
|
|
);
|
|
background-attachment: fixed;
|
|
-webkit-font-smoothing: antialiased;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
html[data-theme='dark'] body {
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--bg-gradient-start) 0%,
|
|
var(--bg-gradient-mid) 45%,
|
|
var(--bg-gradient-end) 100%
|
|
);
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
/* Soft neutral aura — no theme-color wash on the page */
|
|
html[data-theme='dark'] body::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: -30%;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
display: block;
|
|
background:
|
|
radial-gradient(ellipse 520px 520px at 72% 18%, rgba(255, 255, 255, 0.04), transparent 72%),
|
|
radial-gradient(ellipse 420px 420px at 22% 82%, rgba(255, 255, 255, 0.03), transparent 72%);
|
|
}
|
|
|
|
/* Portaled dialogs sit on body; blur the app behind them. */
|
|
body:has([aria-modal='true']) #root {
|
|
filter: blur(var(--modal-overlay-blur, 16px));
|
|
pointer-events: none;
|
|
}
|
|
|
|
button {
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
border: none;
|
|
background: none;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
select {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
font-family: inherit;
|
|
font-size: var(--field-font-size);
|
|
line-height: 1.4;
|
|
color: var(--text-primary);
|
|
background-color: var(--surface);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius-sm);
|
|
min-height: var(--field-height);
|
|
padding: var(--field-padding-y) var(--select-padding-end) var(--field-padding-y) var(--field-padding-x);
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right var(--select-arrow-offset) center;
|
|
background-size: var(--select-arrow-size);
|
|
cursor: pointer;
|
|
outline: none;
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
select:focus {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb) / 0.12);
|
|
}
|
|
|
|
input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='hidden']),
|
|
textarea {
|
|
font-family: var(--font-ui);
|
|
font-size: var(--field-font-size);
|
|
outline: none;
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
:where(input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='hidden'])) {
|
|
min-height: var(--field-height);
|
|
padding: var(--field-padding-y) var(--field-padding-x);
|
|
line-height: 1.4;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='hidden']):focus,
|
|
textarea:focus {
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-rgb) / 0.12);
|
|
}
|
|
|
|
input:not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([type='hidden'])::placeholder,
|
|
textarea::placeholder {
|
|
font-family: var(--font-ui);
|
|
opacity: 1;
|
|
}
|
|
|
|
[dir='rtl'],
|
|
:lang(fa),
|
|
.faText {
|
|
font-family: var(--font-ui);
|
|
font-weight: 400; /* IRANYekan Regular for FA glyphs */
|
|
text-align: start;
|
|
}
|
|
|
|
[dir='rtl']::placeholder,
|
|
:lang(fa)::placeholder,
|
|
.faText::placeholder,
|
|
input.faText::placeholder,
|
|
input[dir='rtl']::placeholder,
|
|
input[lang='fa']::placeholder {
|
|
font-family: var(--font-ui);
|
|
font-weight: 400;
|
|
opacity: 1;
|
|
}
|