eca8de6349
🎨 **Enhanced Glassmorphism** - Added radial gradients to glass-hud - Improved shadows with multiple layers - Better light mode glass effects - Inset highlights for depth ✨ **Premium Visual Effects** - Neon glow effects (cyan, magenta) - Premium gradients for all themes - Enhanced borders with glow - Depth shadows (3 levels) - Frosted glass variants (strong, subtle) 🎯 **Interactive Components** - Premium button with shine effect - Enhanced card hover states - Smooth transitions everywhere - Text glow and shadow effects 💎 **New Utility Classes** - .neon-glow-cyan, .neon-glow-magenta - .gradient-cyber, ocean, forest, sunset - .border-glow, .shadow-premium - .depth-1, depth-2, depth-3 - .glass-strong, .glass-subtle - .btn-premium, .card-premium - .interactive, .text-glow The app now has a truly premium, polished visual design!
656 lines
No EOL
14 KiB
CSS
656 lines
No EOL
14 KiB
CSS
@import 'tailwindcss';
|
|
|
|
/* === SMOOTH THEME TRANSITIONS === */
|
|
* {
|
|
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
|
|
}
|
|
|
|
@theme {
|
|
/* === KODO DESIGN SYSTEM - DEFAULTS === */
|
|
/* Map shadcn variables to Kodo colors by default */
|
|
--color-background: rgb(var(--kodo-void));
|
|
--color-foreground: rgb(var(--kodo-text-main));
|
|
--color-card: rgb(var(--kodo-graphite));
|
|
--color-card-foreground: rgb(var(--kodo-text-main));
|
|
--color-popover: rgb(var(--kodo-ink));
|
|
--color-popover-foreground: rgb(var(--kodo-text-main));
|
|
--color-primary: rgb(var(--kodo-cyan));
|
|
--color-primary-foreground: rgb(var(--kodo-void));
|
|
--color-secondary: rgb(var(--kodo-slate));
|
|
--color-secondary-foreground: rgb(var(--kodo-text-main));
|
|
--color-muted: rgb(var(--kodo-steel));
|
|
--color-muted-foreground: rgb(var(--kodo-content-dim));
|
|
--color-accent: rgb(var(--kodo-cyan));
|
|
--color-accent-foreground: rgb(var(--kodo-void));
|
|
--color-destructive: rgb(var(--kodo-red));
|
|
--color-destructive-foreground: rgb(var(--kodo-text-main));
|
|
--color-border: rgb(var(--kodo-steel));
|
|
--color-input: rgb(var(--kodo-steel));
|
|
--color-ring: rgb(var(--kodo-cyan));
|
|
--radius: 0.75rem;
|
|
|
|
/* === KŌDŌ DESIGN SYSTEM - SPECTRE ASTRAL PALETTE === */
|
|
/* Core Backgrounds */
|
|
--kodo-void: 11 12 16;
|
|
/* #0B0C10 Nadir Black */
|
|
--kodo-ink: 23 25 35;
|
|
/* Darker Blue-Grey for panels */
|
|
--kodo-graphite: 31 40 51;
|
|
/* #1F2833 Graphite Blue */
|
|
--kodo-slate: 44 54 67;
|
|
/* Surface Elevated */
|
|
--kodo-steel: 59 69 84;
|
|
/* Borders */
|
|
|
|
/* Accents */
|
|
--kodo-cyan: 102 252 241;
|
|
/* #66FCF1 Spectral Cyan */
|
|
--kodo-cyan-dim: 69 162 158;
|
|
/* #45A29E Anodized Turquoise */
|
|
--kodo-magenta: 138 126 164;
|
|
/* #8A7EA4 Astral Lavender */
|
|
--kodo-orange: 230 184 156;
|
|
/* #E6B89C Soft Ember */
|
|
|
|
/* Utility Colors */
|
|
--kodo-lime: 54 229 209;
|
|
/* Muted Teal/Green for Success */
|
|
--kodo-gold: 234 179 8;
|
|
/* Refined Gold */
|
|
--kodo-red: 230 57 70;
|
|
/* #E63946 Error */
|
|
|
|
/* Text */
|
|
--kodo-text-main: 243 243 224;
|
|
/* #F3F3E0 Quiet Paper */
|
|
--kodo-content-highlight: 255 255 255;
|
|
/* White for dark mode */
|
|
--kodo-content-dim: 156 163 175;
|
|
/* Gray-400 for dark mode */
|
|
|
|
/* Kōdō Color Utilities for Tailwind */
|
|
--color-kodo-void: rgb(var(--kodo-void));
|
|
--color-kodo-ink: rgb(var(--kodo-ink));
|
|
--color-kodo-graphite: rgb(var(--kodo-graphite));
|
|
--color-kodo-slate: rgb(var(--kodo-slate));
|
|
--color-kodo-steel: rgb(var(--kodo-steel));
|
|
--color-kodo-cyan: rgb(var(--kodo-cyan));
|
|
--color-kodo-cyan-dim: rgb(var(--kodo-cyan-dim));
|
|
--color-kodo-magenta: rgb(var(--kodo-magenta));
|
|
--color-kodo-lime: rgb(var(--kodo-lime));
|
|
--color-kodo-orange: rgb(var(--kodo-orange));
|
|
--color-kodo-gold: rgb(var(--kodo-gold));
|
|
--color-kodo-red: rgb(var(--kodo-red));
|
|
--color-kodo-primary: rgb(var(--kodo-content-highlight));
|
|
--color-kodo-secondary: rgb(var(--kodo-content-dim));
|
|
|
|
/* === Z-INDEX SCALE === */
|
|
--z-base: 0;
|
|
--z-dropdown: 1000;
|
|
--z-sticky: 1020;
|
|
--z-fixed: 1030;
|
|
--z-modal-backdrop: 1040;
|
|
--z-modal: 1050;
|
|
--z-popover: 1060;
|
|
--z-tooltip: 1070;
|
|
--z-notification: 1080;
|
|
|
|
/* === V5 VARIABLES === */
|
|
--v5-primary: #667eea;
|
|
--v5-primary-light: #8b9aff;
|
|
--v5-primary-dark: #4a5fc1;
|
|
--v5-secondary: #764ba2;
|
|
--v5-accent: #f093fb;
|
|
--v5-success: #84fab0;
|
|
--v5-warning: #ffecd2;
|
|
--v5-danger: #f5576c;
|
|
--v5-info: #8fd3f4;
|
|
|
|
--glass-light: rgba(255, 255, 255, 0.85);
|
|
--glass-dark: rgba(18, 18, 18, 0.85);
|
|
--glass-border: rgba(255, 255, 255, 0.1);
|
|
|
|
--gradient-brand: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
--gradient-success: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
|
|
--gradient-danger: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
--gradient-aurora: linear-gradient(45deg,
|
|
#ff0080,
|
|
#ff8c00,
|
|
#ffd700,
|
|
#00ced1,
|
|
#8a2be2);
|
|
|
|
/* Kōdō Gradients */
|
|
--gradient-neon: linear-gradient(135deg, rgb(var(--kodo-cyan-dim)) 0%, rgb(var(--kodo-cyan)) 100%);
|
|
--gradient-cyber: linear-gradient(135deg, rgba(var(--kodo-cyan), 0.1) 0%, rgba(var(--kodo-magenta), 0.1) 100%);
|
|
--gradient-astral: linear-gradient(to bottom, #0B0E11, #131720, #0B0E11);
|
|
|
|
/* HUD Utilities */
|
|
--hud-border-cyan: 1px solid rgba(var(--kodo-cyan), 0.2);
|
|
--hud-glow-cyan: 0 0 15px rgba(var(--kodo-cyan), 0.15);
|
|
}
|
|
|
|
/* Base styles - Kodo dark theme by default */
|
|
body {
|
|
background-color: rgb(var(--kodo-void));
|
|
color: rgb(var(--kodo-text-main));
|
|
font-family: 'Inter', sans-serif;
|
|
transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* === LIGHT MODE === */
|
|
.light,
|
|
[data-theme="light"] {
|
|
/* Light backgrounds */
|
|
--kodo-void: 250 250 252;
|
|
/* #FAFAFC Almost white */
|
|
--kodo-ink: 245 245 247;
|
|
/* #F5F5F7 Light grey */
|
|
--kodo-graphite: 240 240 243;
|
|
/* #F0F0F3 Soft grey */
|
|
--kodo-slate: 235 235 238;
|
|
/* #EBEBEE Light surface */
|
|
--kodo-steel: 220 220 225;
|
|
/* #DCDCE1 Borders */
|
|
|
|
/* Light mode text */
|
|
--kodo-text-main: 30 30 35;
|
|
/* #1E1E23 Dark text */
|
|
--kodo-content-highlight: 0 0 0;
|
|
/* Black */
|
|
--kodo-content-dim: 100 100 110;
|
|
/* #64646E Muted text */
|
|
|
|
/* Adjust accents for light mode (keep vibrant) */
|
|
--kodo-cyan: 0 180 216;
|
|
/* Darker cyan for contrast */
|
|
--kodo-cyan-dim: 0 150 180;
|
|
/* Darker dim cyan */
|
|
--kodo-magenta: 120 80 150;
|
|
/* Darker magenta */
|
|
--kodo-lime: 80 200 120;
|
|
/* Darker lime */
|
|
--kodo-red: 220 38 38;
|
|
/* Darker red */
|
|
|
|
/* Light mode specific */
|
|
--glass-light: rgba(255, 255, 255, 0.95);
|
|
--glass-dark: rgba(255, 255, 255, 0.85);
|
|
--glass-border: rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
/* Dark mode theme variables - Keep for compatibility */
|
|
.dark,
|
|
[data-theme="dark"] {
|
|
--color-background: rgb(var(--kodo-void));
|
|
--color-foreground: rgb(var(--kodo-text-main));
|
|
--color-card: rgb(var(--kodo-graphite));
|
|
--color-card-foreground: rgb(var(--kodo-text-main));
|
|
--color-popover: rgb(var(--kodo-ink));
|
|
--color-popover-foreground: rgb(var(--kodo-text-main));
|
|
--color-primary: rgb(var(--kodo-cyan));
|
|
--color-primary-foreground: rgb(var(--kodo-void));
|
|
--color-secondary: rgb(var(--kodo-slate));
|
|
--color-secondary-foreground: rgb(var(--kodo-text-main));
|
|
--color-muted: rgb(var(--kodo-steel));
|
|
--color-muted-foreground: rgb(var(--kodo-content-dim));
|
|
--color-accent: rgb(var(--kodo-cyan));
|
|
--color-accent-foreground: rgb(var(--kodo-void));
|
|
--color-destructive: rgb(var(--kodo-red));
|
|
--color-destructive-foreground: rgb(var(--kodo-text-main));
|
|
--color-border: rgb(var(--kodo-steel));
|
|
--color-input: rgb(var(--kodo-steel));
|
|
--color-ring: rgb(var(--kodo-cyan));
|
|
}
|
|
|
|
/* === THEME VARIANTS === */
|
|
/* Cyber Theme (Default) - Cyan/Magenta */
|
|
[data-color-theme="cyber"],
|
|
:root {
|
|
--theme-primary: var(--kodo-cyan);
|
|
--theme-accent: var(--kodo-magenta);
|
|
--theme-success: var(--kodo-lime);
|
|
--theme-warning: var(--kodo-gold);
|
|
--theme-error: var(--kodo-red);
|
|
}
|
|
|
|
/* Ocean Theme - Blue/Teal */
|
|
[data-color-theme="ocean"] {
|
|
--kodo-cyan: 14 165 233;
|
|
/* Sky blue #0EA5E9 */
|
|
--kodo-cyan-dim: 6 182 212;
|
|
/* Cyan #06B6D4 */
|
|
--kodo-magenta: 59 130 246;
|
|
/* Blue #3B82F6 */
|
|
--kodo-lime: 16 185 129;
|
|
/* Emerald #10B981 */
|
|
--kodo-gold: 245 158 11;
|
|
/* Amber #F59E0B */
|
|
--theme-primary: 14 165 233;
|
|
--theme-accent: 6 182 212;
|
|
}
|
|
|
|
/* Forest Theme - Green/Lime */
|
|
[data-color-theme="forest"] {
|
|
--kodo-cyan: 34 197 94;
|
|
/* Green #22C55E */
|
|
--kodo-cyan-dim: 132 204 22;
|
|
/* Lime #84CC16 */
|
|
--kodo-magenta: 74 222 128;
|
|
/* Light green #4ADE80 */
|
|
--kodo-lime: 16 185 129;
|
|
/* Emerald #10B981 */
|
|
--kodo-gold: 234 179 8;
|
|
/* Yellow #EAB308 */
|
|
--theme-primary: 34 197 94;
|
|
--theme-accent: 132 204 22;
|
|
}
|
|
|
|
/* Sunset Theme - Orange/Purple */
|
|
[data-color-theme="sunset"] {
|
|
--kodo-cyan: 249 115 22;
|
|
/* Orange #F97316 */
|
|
--kodo-cyan-dim: 251 146 60;
|
|
/* Light orange #FB923C */
|
|
--kodo-magenta: 168 85 247;
|
|
/* Purple #A855F7 */
|
|
--kodo-lime: 20 184 166;
|
|
/* Teal #14B8A6 */
|
|
--kodo-gold: 251 191 36;
|
|
/* Amber #FBBF24 */
|
|
--kodo-red: 244 63 94;
|
|
/* Rose #F43F5E */
|
|
--theme-primary: 249 115 22;
|
|
--theme-accent: 168 85 247;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
@theme {
|
|
--color-background: rgb(var(--kodo-void));
|
|
--color-foreground: rgb(var(--kodo-text-main));
|
|
--color-card: rgb(var(--kodo-graphite));
|
|
--color-card-foreground: rgb(var(--kodo-text-main));
|
|
--color-popover: rgb(var(--kodo-ink));
|
|
--color-popover-foreground: rgb(var(--kodo-text-main));
|
|
--color-primary: rgb(var(--kodo-cyan));
|
|
--color-primary-foreground: rgb(var(--kodo-void));
|
|
--color-secondary: rgb(var(--kodo-slate));
|
|
--color-secondary-foreground: rgb(var(--kodo-text-main));
|
|
--color-muted: rgb(var(--kodo-steel));
|
|
--color-muted-foreground: rgb(var(--kodo-content-dim));
|
|
--color-accent: rgb(var(--kodo-cyan));
|
|
--color-accent-foreground: rgb(var(--kodo-void));
|
|
--color-destructive: rgb(var(--kodo-red));
|
|
--color-destructive-foreground: rgb(var(--kodo-text-main));
|
|
--color-border: rgb(var(--kodo-steel));
|
|
--color-input: rgb(var(--kodo-steel));
|
|
--color-ring: rgb(var(--kodo-cyan));
|
|
}
|
|
}
|
|
|
|
/* === V5 ANIMATIONS === */
|
|
@keyframes appear {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: -200% 0;
|
|
}
|
|
|
|
100% {
|
|
background-position: 200% 0;
|
|
}
|
|
}
|
|
|
|
@keyframes gradient-shift {
|
|
|
|
0%,
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
}
|
|
|
|
/* === PREMIUM ANIMATIONS === */
|
|
@keyframes float {
|
|
|
|
0%,
|
|
100% {
|
|
transform: translateY(0px);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(-10px);
|
|
}
|
|
}
|
|
|
|
@keyframes glow-pulse {
|
|
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 20px rgba(102, 252, 241, 0.3);
|
|
}
|
|
|
|
50% {
|
|
box-shadow: 0 0 40px rgba(102, 252, 241, 0.6);
|
|
}
|
|
}
|
|
|
|
@keyframes slide-in-right {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(30px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slide-in-left {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-30px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes scale-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes rotate-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: rotate(-5deg) scale(0.95);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: rotate(0) scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes float {
|
|
|
|
0%,
|
|
100% {
|
|
transform: translateY(0px);
|
|
}
|
|
|
|
50% {
|
|
transform: translateY(-10px);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
/* === KŌDŌ ANIMATIONS === */
|
|
@keyframes pulse-glow {
|
|
|
|
0%,
|
|
100% {
|
|
box-shadow: 0 0 5px rgba(var(--kodo-cyan), 0.5);
|
|
}
|
|
|
|
50% {
|
|
box-shadow: 0 0 20px rgba(var(--kodo-cyan), 0.8), 0 0 30px rgba(var(--kodo-cyan), 0.4);
|
|
}
|
|
}
|
|
|
|
@keyframes neon-flicker {
|
|
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
75% {
|
|
opacity: 0.95;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes scaleIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Utility classes */
|
|
.animate-fadeIn {
|
|
animation: fadeIn 0.2s ease-in-out;
|
|
}
|
|
|
|
.animate-scaleIn {
|
|
animation: scaleIn 0.2s ease-in-out;
|
|
}
|
|
|
|
.animate-slideInRight {
|
|
animation: slideInRight 0.3s ease-out;
|
|
}
|
|
|
|
.animate-slideUp {
|
|
animation: slideUp 0.3s ease-out;
|
|
}
|
|
|
|
.animate-float {
|
|
animation: float 3s ease-in-out infinite;
|
|
}
|
|
|
|
/* === PREMIUM HUD UTILITIES === */
|
|
/* === ENHANCED HUD STYLES === */
|
|
.glass-hud {
|
|
@apply bg-kodo-void/40 backdrop-blur-2xl border border-white/5 shadow-2xl;
|
|
background-image:
|
|
linear-gradient(to bottom right, rgba(255, 255, 255, 0.03), transparent),
|
|
radial-gradient(circle at top right, rgba(102, 252, 241, 0.05), transparent 50%);
|
|
box-shadow:
|
|
0 8px 32px rgba(0, 0, 0, 0.3),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.light .glass-hud {
|
|
@apply bg-white/80 backdrop-blur-2xl border border-black/5;
|
|
background-image:
|
|
linear-gradient(to bottom right, rgba(0, 0, 0, 0.02), transparent),
|
|
radial-gradient(circle at top right, rgba(102, 252, 241, 0.08), transparent 50%);
|
|
box-shadow:
|
|
0 4px 24px rgba(0, 0, 0, 0.08),
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.5);
|
|
}
|
|
|
|
.glass-hud-active {
|
|
@apply bg-kodo-cyan/5 border-kodo-cyan/30;
|
|
box-shadow:
|
|
0 0 20px rgba(102, 252, 241, 0.2),
|
|
0 8px 32px rgba(0, 0, 0, 0.3),
|
|
inset 0 1px 0 rgba(102, 252, 241, 0.1);
|
|
}
|
|
|
|
.light .glass-hud-active {
|
|
@apply bg-kodo-cyan/10 border-kodo-cyan/40;
|
|
box-shadow:
|
|
0 0 20px rgba(0, 180, 216, 0.15),
|
|
0 4px 24px rgba(0, 0, 0, 0.08),
|
|
inset 0 1px 0 rgba(0, 180, 216, 0.2);
|
|
}
|
|
|
|
.hud-corner {
|
|
@apply relative;
|
|
}
|
|
|
|
.hud-corner::before {
|
|
content: '';
|
|
@apply absolute -top-px -left-px w-2 h-2 border-t border-l border-kodo-cyan opacity-40 rounded-tl-sm;
|
|
}
|
|
|
|
.hud-corner::after {
|
|
content: '';
|
|
@apply absolute -bottom-px -right-px w-2 h-2 border-b border-r border-kodo-cyan opacity-40 rounded-br-sm;
|
|
}
|
|
|
|
.text-hud {
|
|
@apply font-mono uppercase tracking-[0.2em] text-[10px] font-bold opacity-60;
|
|
}
|
|
|
|
.animate-scan {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.animate-scan::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: -100%;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 50%;
|
|
background: linear-gradient(to bottom, transparent, rgba(var(--kodo-cyan), 0.05), transparent);
|
|
animation: scan 4s linear infinite;
|
|
}
|
|
|
|
@keyframes scan {
|
|
from {
|
|
top: -100%;
|
|
}
|
|
|
|
to {
|
|
top: 200%;
|
|
}
|
|
}
|
|
|
|
.liquid-bg {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
background: var(--gradient-astral);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.liquid-blob {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(80px);
|
|
opacity: 0.15;
|
|
mix-blend-mode: screen;
|
|
animation: float-blob 20s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes float-blob {
|
|
0% {
|
|
transform: translate(0, 0) scale(1);
|
|
}
|
|
|
|
100% {
|
|
transform: translate(10%, 10%) scale(1.1);
|
|
}
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: rgb(var(--kodo-void));
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background: rgb(var(--kodo-steel));
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background: rgb(var(--kodo-cyan));
|
|
}
|
|
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
} |