meshkee-app/dashboards
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Give dashboards a themed orb background and a solid current-nav state.

Browse Source 
Login pages share the same wash as the app shell; customer light mode matches business while dark mode stays gray.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
2026-08-17 09:00:08 +03:30
co-authored by Cursor
parent e0e68de30f
commit 36180cda2b
25 changed files with 636 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/business/src/index.css
+24 -58
View File
@@ -17,14 +17,20 @@
--chart-accent-dark: #0891b2;
--chart-accent-rgb: 6 182 212;
--chart-accent-dark-rgb: 8 145 178;
--bg-gradient-start: color-mix(in srgb, var(--primary-light) 72%, #ffffff);
--bg-gradient-mid: color-mix(in srgb, var(--primary-light) 42%, #ffffff);
--bg-gradient-end: color-mix(in srgb, var(--primary-light) 18%, #ffffff);
--glass-bg: rgba(255, 255, 255, 0.55);
--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) 42%, #ffffff) 90%,
color-mix(in srgb, var(--primary-light) 22%, #ffffff) 92%,
transparent
);
--glass-border: rgba(255, 255, 255, 0.7);
@@ -64,64 +70,24 @@ body,
body {
font-family: var(--font-ui);
color: var(--text-primary);
background-color: var(--bg-gradient-mid);
background-image: linear-gradient(
135deg,
var(--bg-gradient-start) 0%,
var(--bg-gradient-mid) 50%,
var(--bg-gradient-end) 100%
);
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;
background-repeat: no-repeat;
background-size: cover;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
body::before {
content: '';
position: fixed;
inset: -30%;
z-index: -1;
pointer-events: none;
background:
radial-gradient(
ellipse 520px 520px at 72% 18%,
rgba(var(--primary-rgb) / 0.3),
transparent 72%
),
radial-gradient(
ellipse 420px 420px at 22% 82%,
rgba(var(--primary-rgb) / 0.2),
transparent 72%
),
radial-gradient(
ellipse 360px 360px at 8% 42%,
rgba(var(--chart-accent-rgb, var(--primary-rgb)) / 0.14),
transparent 72%
);
animation: pageAuraDrift 22s ease-in-out infinite alternate;
will-change: transform;
}
@keyframes pageAuraDrift {
0% {
transform: translate3d(0, 0, 0) scale(1);
}
50% {
transform: translate3d(3.5%, -2.5%, 0) scale(1.06);
}
100% {
transform: translate3d(-3%, 3.5%, 0) scale(1.04);
}
}
@media (prefers-reduced-motion: reduce) {
body::before {
animation: none;
}
}
/* Portaled dialogs sit on body; blur the app behind them. */
body:has([aria-modal='true']) #root {
filter: blur(var(--modal-overlay-blur, 16px));