mirror of
https://github.com/stack-auth/stack.git
synced 2026-06-21 21:09:49 +08:00
325 lines
7.7 KiB
CSS
325 lines
7.7 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 230 45% 86%;
|
|
--foreground: 240 10% 3.9%;
|
|
|
|
--card: 0 0% 100% / 0.5;
|
|
--card-foreground: 240 10% 3.9%;
|
|
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 240 10% 3.9%;
|
|
|
|
--primary: 240 5.9% 10%;
|
|
--primary-foreground: 0 0% 98%;
|
|
|
|
--secondary: 245 30% 90%;
|
|
--secondary-in-card: 240 4.8% 95.9%;
|
|
--secondary-foreground: 240 5.9% 10%;
|
|
|
|
--muted: 250 35% 92%;
|
|
--muted-in-card: 240 4.8% 95.9%;
|
|
--muted-foreground: 232 12% 38%;
|
|
|
|
--accent: 248 32% 91%;
|
|
--accent-in-card: 240 4.8% 95.9%;
|
|
--accent-foreground: 240 5.9% 10%;
|
|
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
|
|
--success: 120 40% 50%;
|
|
--success-foreground: 0 0% 98%;
|
|
|
|
--border: 230 25% 78%;
|
|
--border-in-card: 240 5.9% 90%;
|
|
--input: 230 20% 72%;
|
|
--input-in-card: 240 5.9% 80%;
|
|
--ring: 240 10% 3.9%;
|
|
|
|
--radius: 0.5rem;
|
|
|
|
--rainbow-beam-blur: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899, #f59e0b, #10b981, #3b82f6);
|
|
--rainbow-beam-sharp: linear-gradient(90deg, #60a5fa, #a78bfa, #f472b6, #fbbf24, #34d399, #60a5fa);
|
|
|
|
--page-ambient:
|
|
linear-gradient(145deg, hsl(232 42% 88%) 0%, hsl(228 48% 84%) 40%, hsl(244 38% 86%) 100%);
|
|
}
|
|
|
|
.dark {
|
|
--background: 240 10% 3.9%;
|
|
--foreground: 0 0% 98%;
|
|
|
|
--card: 240 10% 9.4% / 0.5;
|
|
--card-foreground: 0 0% 98%;
|
|
|
|
--popover: 240 10% 3.9%;
|
|
--popover-foreground: 0 0% 98%;
|
|
|
|
--primary: 0 0% 98%;
|
|
--primary-foreground: 240 5.9% 10%;
|
|
|
|
--secondary: 240 3.7% 15.9%;
|
|
--secondary-in-card: 240 3.7% 23.9%;
|
|
--secondary-foreground: 0 0% 98%;
|
|
|
|
--muted: 240 3.7% 15.9%;
|
|
--muted-in-card: 240 3.7% 23.9%;
|
|
--muted-foreground: 240 5% 64.9%;
|
|
|
|
--accent: 240 3.7% 15.9%;
|
|
--accent-in-card: 240 3.7% 23.9%;
|
|
--accent-foreground: 0 0% 98%;
|
|
|
|
--destructive: 0 62.8% 50%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
|
|
--success: 120 40% 50%;
|
|
--success-foreground: 0 0% 98%;
|
|
|
|
--border: 240 3.7% 35.9%;
|
|
--border-in-card: 240 3.7% 43.9%;
|
|
--input: 240 3.7% 25.9%;
|
|
--input-in-card: 240 3.7% 43.9%;
|
|
--ring: 240 4.9% 83.9%;
|
|
|
|
--page-ambient: none;
|
|
}
|
|
}
|
|
|
|
.stack-scope {
|
|
--background: inherit !important;
|
|
--foreground: inherit !important;
|
|
|
|
--card: inherit !important;
|
|
--card-foreground: inherit !important;
|
|
|
|
--popover: inherit !important;
|
|
--popover-foreground: inherit !important;
|
|
|
|
--primary: inherit !important;
|
|
--primary-foreground: inherit !important;
|
|
|
|
--secondary: inherit !important;
|
|
--secondary-in-card: inherit !important;
|
|
--secondary-foreground: inherit !important;
|
|
|
|
--muted: inherit !important;
|
|
--muted-in-card: inherit !important;
|
|
--muted-foreground: inherit !important;
|
|
|
|
--accent: inherit !important;
|
|
--accent-in-card: inherit !important;
|
|
--accent-foreground: inherit !important;
|
|
|
|
--destructive: inherit !important;
|
|
--destructive-foreground: inherit !important;
|
|
|
|
--success: inherit !important;
|
|
--success-foreground: inherit !important;
|
|
|
|
--border: inherit !important;
|
|
--border-in-card: inherit !important;
|
|
--input: inherit !important;
|
|
--input-in-card: inherit !important;
|
|
--ring: inherit !important;
|
|
|
|
--radius: inherit !important;
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
background-image: var(--page-ambient);
|
|
background-blend-mode: normal, screen, screen, normal;
|
|
background-attachment: fixed;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
position: relative;
|
|
}
|
|
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
opacity: 0.75;
|
|
background-image: var(--page-ambient);
|
|
background-blend-mode: normal, screen, screen, normal;
|
|
mix-blend-mode: normal;
|
|
}
|
|
|
|
.dark body::before {
|
|
opacity: 0;
|
|
}
|
|
|
|
html:not(.dark) body:has([data-stack-handler-page]) {
|
|
background-color: white;
|
|
background-image: none;
|
|
}
|
|
|
|
html:not(.dark) body:has([data-stack-handler-page])::before {
|
|
opacity: 0;
|
|
background-image: none;
|
|
}
|
|
}
|
|
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
animation: none;
|
|
mix-blend-mode: normal;
|
|
}
|
|
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
transform-origin: center center;
|
|
}
|
|
|
|
/* Applied during theme view-transitions so component-level CSS transitions
|
|
(transition-colors, transition-all, etc.) don't lag behind the swipe. */
|
|
.vt-disable-transitions,
|
|
.vt-disable-transitions *,
|
|
.vt-disable-transitions *::before,
|
|
.vt-disable-transitions *::after {
|
|
transition-duration: 0s !important;
|
|
}
|
|
|
|
.bg-card {
|
|
box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.02);
|
|
backdrop-filter: blur(12px);
|
|
background-image: radial-gradient(ellipse at top, #fdfdfd88, transparent), radial-gradient(ellipse at bottom, #ffffff88, transparent);
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.dark .bg-card {
|
|
box-shadow: none;
|
|
backdrop-filter: blur(12px);
|
|
background-image: radial-gradient(ellipse at top, #18182288, transparent), radial-gradient(ellipse at bottom, #19191988, transparent);
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.bg-card > * {
|
|
--secondary: var(--secondary-in-card);
|
|
--muted: var(--muted-in-card);
|
|
--accent: var(--accent-in-card);
|
|
--input: var(--input-in-card);
|
|
--border: var(--border-in-card);
|
|
}
|
|
|
|
.site-loading-indicator {
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 24px;
|
|
position: fixed;
|
|
background: transparent;
|
|
overflow: hidden;
|
|
z-index: 9999;
|
|
pointer-events: none;
|
|
touch-action: none;
|
|
user-select: none;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease-in-out;
|
|
}
|
|
body:has(.show-site-loading-indicator) .site-loading-indicator {
|
|
opacity: 1;
|
|
transition: none;
|
|
}
|
|
.site-loading-indicator > .site-loading-indicator-inner {
|
|
width: 40%;
|
|
height: 3px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
box-sizing: border-box;
|
|
animation: animsite-loading-indicator 1s linear infinite;
|
|
border-radius: 1.5px;
|
|
background-image: linear-gradient(90deg,
|
|
rgba(95, 174, 247, 0) 0%,
|
|
rgba(95, 174, 247, 1) 64.8%,
|
|
rgba(107, 93, 247, 1) 84%,
|
|
rgba(255, 255, 255, 1) 100%
|
|
);
|
|
}
|
|
.site-loading-indicator > .site-loading-indicator-inner > .site-loading-indicator-inner-glow {
|
|
position: absolute;
|
|
inset: -32px;
|
|
filter: blur(8px);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.site-loading-indicator > .site-loading-indicator-inner > .site-loading-indicator-inner-glow::after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 28px;
|
|
background-image: linear-gradient(90deg,
|
|
rgba(95, 174, 247, 0) 0%,
|
|
rgba(95, 174, 247, 1) 64.8%,
|
|
rgba(107, 93, 247, 1) 84%,
|
|
rgba(255, 255, 255, 1) 100%
|
|
);
|
|
}
|
|
|
|
@media (min-width: 800px) {
|
|
.site-loading-indicator > .site-loading-indicator-inner {
|
|
width: 20%;
|
|
animation: animsite-loading-indicator 2s linear infinite;
|
|
}
|
|
}
|
|
|
|
@keyframes animsite-loading-indicator {
|
|
0% {
|
|
left: 0;
|
|
transform: translateX(-100%);
|
|
}
|
|
100% {
|
|
left: 100%;
|
|
transform: translateX(0%);
|
|
}
|
|
}
|
|
|
|
@keyframes rainbow-beam {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
|
|
/* Pacifica styles */
|
|
[data-pacifica-surface] {
|
|
backdrop-filter: contrast(40%) blur(24px);
|
|
background-color: hsl(var(--background), 0.2);
|
|
color: hsl(var(--card-foreground));
|
|
}
|
|
|
|
.dark [data-pacifica-surface] {
|
|
background-image: radial-gradient(circle at top, #ffffff0d, #ffffff04), radial-gradient(circle at top right, #ffffff04, transparent, transparent);
|
|
}
|
|
|
|
[data-pacifica-border] {
|
|
border: 2px solid rgba(127, 127, 127, 0.2);
|
|
box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
:where([data-pacifica-children-flex-grow] > *) {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
:where([data-pacifica-children-min-width-0] > *) {
|
|
min-width: 0;
|
|
}
|