File size: 3,465 Bytes
f61f6a3 1768a66 4bc38b6 1768a66 f61f6a3 1768a66 f61f6a3 1768a66 f61f6a3 4bc38b6 f61f6a3 1768a66 f61f6a3 7649e72 f61f6a3 1768a66 f61f6a3 7649e72 1768a66 7649e72 f61f6a3 7649e72 f61f6a3 7649e72 f61f6a3 7649e72 f61f6a3 7649e72 1768a66 f61f6a3 35299d9 1768a66 f61f6a3 35299d9 f61f6a3 4bc38b6 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | @import "tailwindcss";
@theme {
--color-brand: #6c63ff;
--color-brand-light: #8b85ff;
--color-brand-dim: rgba(108, 99, 255, 0.15);
--color-brand-glow: rgba(108, 99, 255, 0.3);
--color-surface: #0a0a0f;
--color-surface-2: #111118;
--color-card: #16161f;
--color-card-hover: #1c1c28;
--color-border: rgba(255, 255, 255, 0.06);
--color-border-strong: rgba(255, 255, 255, 0.12);
--color-text: #f0f0f8;
--color-muted: #9494b0;
--color-dimmer: #5c5c78;
--color-success: #22c55e;
--color-warning: #eab308;
--color-danger: #ef4444;
--color-info: #3b82f6;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
}
html { scroll-behavior: smooth; }
body {
font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
background: var(--color-surface);
color: var(--color-text);
-webkit-font-smoothing: antialiased;
min-height: 100vh;
}
::selection { background: var(--color-brand-dim); color: var(--color-brand-light); }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-surface); }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-dimmer); }
input[type="range"] {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
background: var(--color-border-strong);
border-radius: 99px;
outline: none;
cursor: pointer;
margin: 10px 0;
}
input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: 6px;
cursor: pointer;
background: transparent;
border-radius: 99px;
}
input[type="range"]::-webkit-slider-thumb {
height: 16px;
width: 16px;
border-radius: 50%;
background: var(--thumb-color, var(--color-brand));
cursor: pointer;
-webkit-appearance: none;
margin-top: -5px; /* Centers thumb on the track */
box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 0 2px var(--color-surface);
transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}
input[type="range"]:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 3px var(--color-brand-glow), 0 0 10px rgba(0,0,0,0.5);
}
input[type="range"]::-moz-range-track {
width: 100%;
height: 6px;
cursor: pointer;
background: var(--color-border-strong);
border-radius: 99px;
}
input[type="range"]::-moz-range-thumb {
height: 16px;
width: 16px;
border-radius: 50%;
background: var(--thumb-color, var(--color-brand));
cursor: pointer;
border: none;
box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 0 0 2px var(--color-surface);
}
input[type="range"]::-webkit-slider-thumb:active {
transform: scale(1.2);
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slide-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes pulse-border { 0%, 100% { border-color: var(--color-brand-dim); } 50% { border-color: var(--color-brand); } }
.animate-spin { animation: spin 0.7s linear infinite; }
.animate-slide-up { animation: slide-up 0.3s ease; }
.animate-fade-in { animation: fade-in 0.4s ease; }
.animate-shimmer {
background: linear-gradient(90deg, var(--color-card) 25%, var(--color-card-hover) 50%, var(--color-card) 75%);
background-size: 200% 100%;
animation: shimmer 1.4s infinite;
}
|