You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
327 lines
7.6 KiB
327 lines
7.6 KiB
@import "tailwindcss";
|
|
|
|
:root {
|
|
--default-page-background-image: url("/assets/images/home-Checkups-List.svg");
|
|
--safe-top: 0px;
|
|
--safe-bottom: 0px;
|
|
--safe-left: 0px;
|
|
--safe-right: 0px;
|
|
|
|
/* ─── Semantic Tokens (Light) ─── */
|
|
--semantic-neutral-bg: #f1f5f9;
|
|
--semantic-neutral-text: #475569;
|
|
--semantic-neutral-border: #cbd5e1;
|
|
--semantic-neutral-icon: #64748b;
|
|
|
|
--semantic-info-bg: #eff6ff;
|
|
--semantic-info-text: #1d4ed8;
|
|
--semantic-info-border: #bfdbfe;
|
|
--semantic-info-icon: #2563eb;
|
|
|
|
--semantic-success-bg: #ecfdf5;
|
|
--semantic-success-text: #047857;
|
|
--semantic-success-border: #a7f3d0;
|
|
--semantic-success-icon: #059669;
|
|
|
|
--semantic-warning-bg: #fffbeb;
|
|
--semantic-warning-text: #b45309;
|
|
--semantic-warning-border: #fde68a;
|
|
--semantic-warning-icon: #d97706;
|
|
|
|
--semantic-danger-bg: #fef2f2;
|
|
--semantic-danger-text: #b91c1c;
|
|
--semantic-danger-border: #fecaca;
|
|
--semantic-danger-icon: #dc2626;
|
|
|
|
--semantic-ai-bg: #f5f3ff;
|
|
--semantic-ai-text: #6d28d9;
|
|
--semantic-ai-border: #ddd6fe;
|
|
--semantic-ai-icon: #7c3aed;
|
|
}
|
|
|
|
.dark {
|
|
--semantic-neutral-bg: #1e293b;
|
|
--semantic-neutral-text: #e2e8f0;
|
|
--semantic-neutral-border: #475569;
|
|
--semantic-neutral-icon: #cbd5e1;
|
|
|
|
--semantic-info-bg: #172554;
|
|
--semantic-info-text: #bfdbfe;
|
|
--semantic-info-border: #1d4ed8;
|
|
--semantic-info-icon: #93c5fd;
|
|
|
|
--semantic-success-bg: #052e2b;
|
|
--semantic-success-text: #a7f3d0;
|
|
--semantic-success-border: #047857;
|
|
--semantic-success-icon: #6ee7b7;
|
|
|
|
--semantic-warning-bg: #451a03;
|
|
--semantic-warning-text: #fde68a;
|
|
--semantic-warning-border: #b45309;
|
|
--semantic-warning-icon: #fcd34d;
|
|
|
|
--semantic-danger-bg: #450a0a;
|
|
--semantic-danger-text: #fecaca;
|
|
--semantic-danger-border: #b91c1c;
|
|
--semantic-danger-icon: #fca5a5;
|
|
|
|
--semantic-ai-bg: #2e1065;
|
|
--semantic-ai-text: #ddd6fe;
|
|
--semantic-ai-border: #7c3aed;
|
|
--semantic-ai-icon: #c4b5fd;
|
|
}
|
|
|
|
@theme inline {
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--font-sans: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
--font-mono: var(--font-geist-mono);
|
|
--font-arabic: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
--font-ryling: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
--font-faminela: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
|
|
--color-semantic-neutral-bg: var(--semantic-neutral-bg);
|
|
--color-semantic-neutral-text: var(--semantic-neutral-text);
|
|
--color-semantic-neutral-border: var(--semantic-neutral-border);
|
|
--color-semantic-neutral-icon: var(--semantic-neutral-icon);
|
|
|
|
--color-semantic-info-bg: var(--semantic-info-bg);
|
|
--color-semantic-info-text: var(--semantic-info-text);
|
|
--color-semantic-info-border: var(--semantic-info-border);
|
|
--color-semantic-info-icon: var(--semantic-info-icon);
|
|
|
|
--color-semantic-success-bg: var(--semantic-success-bg);
|
|
--color-semantic-success-text: var(--semantic-success-text);
|
|
--color-semantic-success-border: var(--semantic-success-border);
|
|
--color-semantic-success-icon: var(--semantic-success-icon);
|
|
|
|
--color-semantic-warning-bg: var(--semantic-warning-bg);
|
|
--color-semantic-warning-text: var(--semantic-warning-text);
|
|
--color-semantic-warning-border: var(--semantic-warning-border);
|
|
--color-semantic-warning-icon: var(--semantic-warning-icon);
|
|
|
|
--color-semantic-danger-bg: var(--semantic-danger-bg);
|
|
--color-semantic-danger-text: var(--semantic-danger-text);
|
|
--color-semantic-danger-border: var(--semantic-danger-border);
|
|
--color-semantic-danger-icon: var(--semantic-danger-icon);
|
|
|
|
--color-semantic-ai-bg: var(--semantic-ai-bg);
|
|
--color-semantic-ai-text: var(--semantic-ai-text);
|
|
--color-semantic-ai-border: var(--semantic-ai-border);
|
|
--color-semantic-ai-icon: var(--semantic-ai-icon);
|
|
}
|
|
|
|
/* Typography Configuration - Centralized Design System Scale */
|
|
@utility group-10 {
|
|
font-size: 10px;
|
|
}
|
|
|
|
@utility group-12 {
|
|
font-size: 12px;
|
|
}
|
|
|
|
@utility group-14 {
|
|
font-size: 14px;
|
|
}
|
|
|
|
@utility group-16 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.group-10 {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.group-12 {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.group-14 {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.group-16 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
html {
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
color: var(--foreground);
|
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
html:lang(ar) body,
|
|
:lang(ar) {
|
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
.font-arabic,
|
|
.font-ryling {
|
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
.font-faminela:lang(ar),
|
|
.font-ryling:lang(ar),
|
|
[dir="rtl"] .font-faminela,
|
|
[dir="rtl"] .font-ryling,
|
|
[dir="rtl"].font-faminela,
|
|
[dir="rtl"].font-ryling,
|
|
.font-faminela {
|
|
font-family:
|
|
var(--font-faminela-local), "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
.app-shell {
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
padding-inline: 17px;
|
|
padding-bottom: var(--safe-bottom, 0px);
|
|
box-sizing: border-box;
|
|
background-color: var(--background);
|
|
background-image: var(--default-page-background-image);
|
|
background-position: top;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.app-shell {
|
|
width: 375px;
|
|
}
|
|
}
|
|
|
|
body[data-page-background="none"] .app-shell {
|
|
background-image: none;
|
|
}
|
|
|
|
body[data-page-background="custom"] .app-shell {
|
|
background-image: var(--page-background-image);
|
|
}
|
|
|
|
.question-slider-range {
|
|
height: 18px;
|
|
width: 100%;
|
|
cursor: pointer;
|
|
appearance: none;
|
|
border-radius: 999px;
|
|
outline: none;
|
|
background: transparent;
|
|
}
|
|
|
|
.question-slider-range::-webkit-slider-runnable-track {
|
|
height: 10px;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.question-slider-range::-webkit-slider-thumb {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-top: -4px;
|
|
appearance: none;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
background: #ffffff;
|
|
box-shadow:
|
|
0 3px 8px rgba(0, 0, 0, 0.12),
|
|
0 0 2px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.question-slider-range::-moz-range-track {
|
|
height: 10px;
|
|
border-radius: 999px;
|
|
background: transparent;
|
|
}
|
|
|
|
.question-slider-range::-moz-range-progress {
|
|
height: 10px;
|
|
border-radius: 999px;
|
|
background: #f2465f;
|
|
}
|
|
|
|
.question-slider-range::-moz-range-thumb {
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 0;
|
|
border-radius: 999px;
|
|
background: #ffffff;
|
|
box-shadow:
|
|
0 3px 8px rgba(0, 0, 0, 0.12),
|
|
0 0 2px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* 3 Dots Bouncing Line Circle Loader for Buttons */
|
|
@keyframes button-dot-bounce {
|
|
0%,
|
|
80%,
|
|
100% {
|
|
transform: translateY(0) scale(0.7);
|
|
opacity: 0.4;
|
|
}
|
|
40% {
|
|
transform: translateY(-4px) scale(1.15);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.animate-dots-slide-1 {
|
|
animation: button-dot-bounce 0.9s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.animate-dots-slide-2 {
|
|
animation: button-dot-bounce 0.9s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
animation-delay: 0.15s;
|
|
}
|
|
|
|
.animate-dots-slide-3 {
|
|
animation: button-dot-bounce 0.9s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
animation-delay: 0.3s;
|
|
}
|
|
|
|
/* ─── Premium Shimmer Animations ─── */
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: -200% 0;
|
|
}
|
|
100% {
|
|
background-position: 200% 0;
|
|
}
|
|
}
|
|
.shimmer-bg {
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(0, 0, 0, 0.05) 25%,
|
|
rgba(0, 0, 0, 0.1) 37%,
|
|
rgba(0, 0, 0, 0.05) 63%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.5s infinite linear;
|
|
}
|
|
.dark .shimmer-bg {
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(255, 255, 255, 0.04) 25%,
|
|
rgba(255, 255, 255, 0.09) 37%,
|
|
rgba(255, 255, 255, 0.04) 63%
|
|
);
|
|
background-size: 200% 100%;
|
|
}
|
|
|
|
.shimmer-white-bg {
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(255, 255, 255, 0.12) 25%,
|
|
rgba(255, 255, 255, 0.24) 37%,
|
|
rgba(255, 255, 255, 0.12) 63%
|
|
);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.5s infinite linear;
|
|
}
|
|
|