byGalax
53b3b5e1fc
- Update globals.css reduced-motion block: 0.01ms → 0.001ms durations and add scroll-behavior: auto to suppress all transitions/animations when OS reduced-motion preference is active. - Gate canvas-confetti burst in GameModal behind matchMedia check so the particle effect is skipped entirely for users who opt out of motion. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
135 lines
3.2 KiB
CSS
135 lines
3.2 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap');
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
* Desktop chat design tokens.
|
|
*
|
|
* `--bg-rgb / --fg-rgb / --accent-rgb` are *space-separated rgb triplets*
|
|
* (no `rgb(...)` wrapper) so Tailwind's `rgb(var(--x) / <alpha-value>)`
|
|
* alpha modifier works (e.g. `bg-surface/40`).
|
|
*
|
|
* `--line` is a full color value with baked-in alpha — theme decides whether
|
|
* borders are inked-on-white or white-on-ink.
|
|
* ------------------------------------------------------------------------- */
|
|
|
|
:root {
|
|
--bg-rgb: 246 247 250;
|
|
--bg-2-rgb: 235 237 242;
|
|
--bg-3-rgb: 255 255 255;
|
|
--fg-rgb: 24 25 28;
|
|
--fg-muted-rgb: 91 95 104;
|
|
--accent-rgb: 88 101 242;
|
|
--accent-fg-rgb: 255 255 255;
|
|
--line: rgba(24, 25, 28, 0.1);
|
|
color-scheme: light;
|
|
}
|
|
|
|
.dark {
|
|
--bg-rgb: 30 31 34;
|
|
--bg-2-rgb: 43 45 49;
|
|
--bg-3-rgb: 49 51 56;
|
|
--fg-rgb: 242 243 245;
|
|
--fg-muted-rgb: 148 155 164;
|
|
--accent-rgb: 88 101 242;
|
|
--accent-fg-rgb: 255 255 255;
|
|
--line: rgba(255, 255, 255, 0.08);
|
|
color-scheme: dark;
|
|
}
|
|
|
|
@layer base {
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
@apply bg-surface text-fg font-sans antialiased;
|
|
font-feature-settings: 'cv11', 'ss01';
|
|
}
|
|
|
|
* {
|
|
scrollbar-color: rgb(var(--fg-muted-rgb) / 0.36) transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
height: 10px;
|
|
width: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgb(var(--fg-muted-rgb) / 0.28);
|
|
border: 3px solid transparent;
|
|
border-radius: 999px;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgb(var(--fg-muted-rgb) / 0.44);
|
|
border: 3px solid transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
::selection {
|
|
@apply bg-accent/40 text-white;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.001ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.001ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.scrollbar-none::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.bg-grid {
|
|
background-image:
|
|
linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
|
|
background-size: 32px 32px;
|
|
background-position: -1px -1px;
|
|
}
|
|
.discord-panel {
|
|
background: rgb(var(--bg-2-rgb) / 0.94);
|
|
border-color: var(--line);
|
|
}
|
|
.dark .discord-rail {
|
|
background: #1e1f22;
|
|
}
|
|
.dark .discord-chat-panel {
|
|
background: #2b2d31;
|
|
}
|
|
.dark .discord-chat-surface {
|
|
background: #313338;
|
|
}
|
|
.dark .discord-composer {
|
|
background: #383a40;
|
|
}
|
|
/* Glass pill used for the fullscreen call controls bar. */
|
|
.glass-pill {
|
|
background: rgba(10, 10, 15, 0.7);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
.glass-chip {
|
|
background: rgba(0, 0, 0, 0.55);
|
|
backdrop-filter: blur(10px);
|
|
color: #fff;
|
|
}
|
|
}
|