Refine coming-soon UI glass controls and language toggle
This commit is contained in:
MOH
+213
-8
@@ -3,22 +3,227 @@
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
--color-bg: #f5f6f8;
|
||||
--color-fg: #111214;
|
||||
--color-surface: #ffffff;
|
||||
--color-surface-soft: #eef0f3;
|
||||
--color-surface-elevated: #fdfdfd;
|
||||
|
||||
--color-border: #dde1e7;
|
||||
--color-border-strong: #bec5d0;
|
||||
|
||||
--color-muted: #4b5565;
|
||||
--color-muted-strong: #374151;
|
||||
--color-subtle: #6b7380;
|
||||
|
||||
--color-inverse-bg: #111214;
|
||||
--color-inverse-fg: #f3f4f6;
|
||||
|
||||
--color-brand-primary: #dd4124;
|
||||
--color-brand-secondary: #f7b91f;
|
||||
|
||||
--color-success-bg: #dcfce7;
|
||||
--color-success-fg: #166534;
|
||||
--color-warning-bg: #fef3c7;
|
||||
--color-warning-fg: #92400e;
|
||||
--color-danger-bg: #fee2e2;
|
||||
--color-danger-fg: #991b1b;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
--color-bg: #090b0f;
|
||||
--color-fg: #eef1f7;
|
||||
--color-surface: #10141c;
|
||||
--color-surface-soft: #151b24;
|
||||
--color-surface-elevated: #1b2230;
|
||||
|
||||
--color-border: #2a3342;
|
||||
--color-border-strong: #3a465a;
|
||||
|
||||
--color-muted: #c6cfdd;
|
||||
--color-muted-strong: #dbe4f3;
|
||||
--color-subtle: #98a4b8;
|
||||
|
||||
--color-inverse-bg: #eff3f9;
|
||||
--color-inverse-fg: #0e1118;
|
||||
|
||||
--color-success-bg: rgba(22, 101, 52, 0.35);
|
||||
--color-success-fg: #86efac;
|
||||
--color-warning-bg: rgba(146, 64, 14, 0.35);
|
||||
--color-warning-fg: #fde68a;
|
||||
--color-danger-bg: rgba(153, 27, 27, 0.35);
|
||||
--color-danger-fg: #fecaca;
|
||||
}
|
||||
|
||||
html {
|
||||
color-scheme: light;
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
html.dark {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
min-height: 100vh;
|
||||
color: var(--color-fg);
|
||||
background: var(--color-bg);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: color-mix(in oklab, var(--color-brand-primary) 72%, black 0%);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
.bg-app {
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
.bg-surface {
|
||||
background-color: var(--color-surface);
|
||||
}
|
||||
|
||||
.bg-surface-soft {
|
||||
background-color: var(--color-surface-soft);
|
||||
}
|
||||
|
||||
.bg-surface-elevated {
|
||||
background-color: var(--color-surface-elevated);
|
||||
}
|
||||
|
||||
.bg-inverse {
|
||||
background-color: var(--color-inverse-bg);
|
||||
}
|
||||
|
||||
.text-fg {
|
||||
color: var(--color-fg);
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
.text-muted-strong {
|
||||
color: var(--color-muted-strong);
|
||||
}
|
||||
|
||||
.text-subtle {
|
||||
color: var(--color-subtle);
|
||||
}
|
||||
|
||||
.text-inverse {
|
||||
color: var(--color-inverse-fg);
|
||||
}
|
||||
|
||||
.border-default {
|
||||
border-color: var(--color-border);
|
||||
}
|
||||
|
||||
.border-strong {
|
||||
border-color: var(--color-border-strong);
|
||||
}
|
||||
|
||||
.status-success {
|
||||
background-color: var(--color-success-bg);
|
||||
color: var(--color-success-fg);
|
||||
}
|
||||
|
||||
.status-warning {
|
||||
background-color: var(--color-warning-bg);
|
||||
color: var(--color-warning-fg);
|
||||
}
|
||||
|
||||
.status-danger {
|
||||
background-color: var(--color-danger-bg);
|
||||
color: var(--color-danger-fg);
|
||||
}
|
||||
|
||||
.hover-surface-soft:hover {
|
||||
background-color: var(--color-surface-soft);
|
||||
}
|
||||
|
||||
.hover-fg:hover {
|
||||
color: var(--color-fg);
|
||||
}
|
||||
|
||||
.group:hover .group-hover-fg {
|
||||
color: var(--color-fg);
|
||||
}
|
||||
|
||||
.group:hover .group-hover-border-strong {
|
||||
border-color: var(--color-border-strong);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--color-inverse-bg);
|
||||
color: var(--color-inverse-fg);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
border: 1px solid var(--color-border-strong);
|
||||
color: var(--color-muted-strong);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: var(--color-surface-soft);
|
||||
}
|
||||
|
||||
.field-surface {
|
||||
border: 1px solid var(--color-border-strong);
|
||||
background-color: var(--color-surface);
|
||||
color: var(--color-fg);
|
||||
}
|
||||
|
||||
.field-surface:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-brand-primary) 20%, transparent);
|
||||
}
|
||||
|
||||
|
||||
.brand-gradient-text {
|
||||
background: linear-gradient(120deg, var(--color-brand-primary), var(--color-brand-secondary));
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.brand-glow {
|
||||
box-shadow:
|
||||
0 10px 40px -16px color-mix(in oklab, var(--color-brand-primary) 52%, transparent),
|
||||
0 8px 32px -18px color-mix(in oklab, var(--color-brand-secondary) 58%, transparent);
|
||||
}
|
||||
|
||||
.float-slow {
|
||||
animation: float-slow 9s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.float-medium {
|
||||
animation: float-medium 7s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float-slow {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0px) translateX(0px) scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-12px) translateX(10px) scale(1.04);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float-medium {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0px) translateX(0px) scale(1);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(10px) translateX(-8px) scale(1.03);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user