Skip to content

Commit 57caee6

Browse files
prithaxdevprithaxdev
committed
style(global): add custom thin scrollbar styles
1 parent 9c54697 commit 57caee6

1 file changed

Lines changed: 148 additions & 122 deletions

File tree

‎apps/web/app/globals.css‎

Lines changed: 148 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -9,142 +9,148 @@
99
/* monospace DNA, developer-grade clarity. */
1010

1111
:root {
12-
/* Base surfaces — light mode (rarely used, dark is default) */
13-
--background: oklch(0.98 0.002 240);
14-
--foreground: oklch(0.13 0.012 255);
15-
--card: oklch(0.96 0.003 240);
16-
--card-foreground: oklch(0.13 0.012 255);
17-
--popover: oklch(0.98 0.002 240);
18-
--popover-foreground: oklch(0.13 0.012 255);
19-
--primary: oklch(0.54 0.18 162); /* emerald */
20-
--primary-foreground: oklch(0.99 0 0);
21-
--secondary: oklch(0.93 0.004 240);
22-
--secondary-foreground: oklch(0.13 0.012 255);
23-
--muted: oklch(0.93 0.004 240);
24-
--muted-foreground: oklch(0.52 0.012 255);
25-
--accent: oklch(0.93 0.004 240);
26-
--accent-foreground: oklch(0.13 0.012 255);
27-
--destructive: oklch(0.58 0.22 27);
28-
--border: oklch(0.88 0.006 240);
29-
--input: oklch(0.88 0.006 240);
30-
--ring: oklch(0.54 0.18 162);
31-
--radius: 0.5rem;
12+
/* Base surfaces — light mode (rarely used, dark is default) */
13+
--background: oklch(0.98 0.002 240);
14+
--foreground: oklch(0.13 0.012 255);
15+
--card: oklch(0.96 0.003 240);
16+
--card-foreground: oklch(0.13 0.012 255);
17+
--popover: oklch(0.98 0.002 240);
18+
--popover-foreground: oklch(0.13 0.012 255);
19+
--primary: oklch(0.54 0.18 162); /* emerald */
20+
--primary-foreground: oklch(0.99 0 0);
21+
--secondary: oklch(0.93 0.004 240);
22+
--secondary-foreground: oklch(0.13 0.012 255);
23+
--muted: oklch(0.93 0.004 240);
24+
--muted-foreground: oklch(0.52 0.012 255);
25+
--accent: oklch(0.93 0.004 240);
26+
--accent-foreground: oklch(0.13 0.012 255);
27+
--destructive: oklch(0.58 0.22 27);
28+
--border: oklch(0.88 0.006 240);
29+
--input: oklch(0.88 0.006 240);
30+
--ring: oklch(0.54 0.18 162);
31+
--radius: 0.5rem;
3232

33-
/* Pulse — amber for "due today" urgency */
34-
--pulse: oklch(0.78 0.17 68);
35-
--pulse-foreground: oklch(0.13 0.012 255);
33+
/* Pulse — amber for "due today" urgency */
34+
--pulse: oklch(0.78 0.17 68);
35+
--pulse-foreground: oklch(0.13 0.012 255);
3636

37-
/* Charts */
38-
--chart-1: oklch(0.54 0.18 162);
39-
--chart-2: oklch(0.72 0.18 162);
40-
--chart-3: oklch(0.78 0.17 68);
41-
--chart-4: oklch(0.60 0.16 232);
42-
--chart-5: oklch(0.65 0.18 320);
37+
/* Charts */
38+
--chart-1: oklch(0.54 0.18 162);
39+
--chart-2: oklch(0.72 0.18 162);
40+
--chart-3: oklch(0.78 0.17 68);
41+
--chart-4: oklch(0.6 0.16 232);
42+
--chart-5: oklch(0.65 0.18 320);
4343

44-
/* Sidebar */
45-
--sidebar: oklch(0.96 0.003 240);
46-
--sidebar-foreground: oklch(0.13 0.012 255);
47-
--sidebar-primary: oklch(0.54 0.18 162);
48-
--sidebar-primary-foreground: oklch(0.99 0 0);
49-
--sidebar-accent: oklch(0.93 0.004 240);
50-
--sidebar-accent-foreground: oklch(0.13 0.012 255);
51-
--sidebar-border: oklch(0.88 0.006 240);
52-
--sidebar-ring: oklch(0.54 0.18 162);
44+
/* Sidebar */
45+
--sidebar: oklch(0.96 0.003 240);
46+
--sidebar-foreground: oklch(0.13 0.012 255);
47+
--sidebar-primary: oklch(0.54 0.18 162);
48+
--sidebar-primary-foreground: oklch(0.99 0 0);
49+
--sidebar-accent: oklch(0.93 0.004 240);
50+
--sidebar-accent-foreground: oklch(0.13 0.012 255);
51+
--sidebar-border: oklch(0.88 0.006 240);
52+
--sidebar-ring: oklch(0.54 0.18 162);
5353
}
5454

5555
.dark {
56-
/* Base surfaces */
57-
--background: oklch(0.10 0.012 255); /* #09090f — deep dark indigo-black */
58-
--foreground: oklch(0.94 0.006 240);
59-
--card: oklch(0.14 0.014 255); /* slightly elevated surface */
60-
--card-foreground: oklch(0.94 0.006 240);
61-
--popover: oklch(0.14 0.014 255);
62-
--popover-foreground: oklch(0.94 0.006 240);
63-
--primary: oklch(0.72 0.18 162); /* vivid emerald */
64-
--primary-foreground: oklch(0.10 0.012 255);
65-
--secondary: oklch(0.18 0.016 255);
66-
--secondary-foreground: oklch(0.94 0.006 240);
67-
--muted: oklch(0.18 0.016 255);
68-
--muted-foreground: oklch(0.56 0.014 255);
69-
--accent: oklch(0.20 0.018 255);
70-
--accent-foreground: oklch(0.94 0.006 240);
71-
--destructive: oklch(0.65 0.22 27);
72-
--border: oklch(1 0 0 / 8%);
73-
--input: oklch(1 0 0 / 10%);
74-
--ring: oklch(0.72 0.18 162);
56+
/* Base surfaces */
57+
--background: oklch(0.1 0.012 255); /* #09090f — deep dark indigo-black */
58+
--foreground: oklch(0.94 0.006 240);
59+
--card: oklch(0.14 0.014 255); /* slightly elevated surface */
60+
--card-foreground: oklch(0.94 0.006 240);
61+
--popover: oklch(0.14 0.014 255);
62+
--popover-foreground: oklch(0.94 0.006 240);
63+
--primary: oklch(0.72 0.18 162); /* vivid emerald */
64+
--primary-foreground: oklch(0.1 0.012 255);
65+
--secondary: oklch(0.18 0.016 255);
66+
--secondary-foreground: oklch(0.94 0.006 240);
67+
--muted: oklch(0.18 0.016 255);
68+
--muted-foreground: oklch(0.56 0.014 255);
69+
--accent: oklch(0.2 0.018 255);
70+
--accent-foreground: oklch(0.94 0.006 240);
71+
--destructive: oklch(0.65 0.22 27);
72+
--border: oklch(1 0 0 / 8%);
73+
--input: oklch(1 0 0 / 10%);
74+
--ring: oklch(0.72 0.18 162);
7575

76-
/* Pulse — amber for due badges */
77-
--pulse: oklch(0.78 0.17 68);
78-
--pulse-foreground: oklch(0.10 0.012 255);
76+
/* Pulse — amber for due badges */
77+
--pulse: oklch(0.78 0.17 68);
78+
--pulse-foreground: oklch(0.1 0.012 255);
7979

80-
/* Charts */
81-
--chart-1: oklch(0.72 0.18 162);
82-
--chart-2: oklch(0.54 0.18 162);
83-
--chart-3: oklch(0.78 0.17 68);
84-
--chart-4: oklch(0.60 0.16 232);
85-
--chart-5: oklch(0.65 0.18 320);
80+
/* Charts */
81+
--chart-1: oklch(0.72 0.18 162);
82+
--chart-2: oklch(0.54 0.18 162);
83+
--chart-3: oklch(0.78 0.17 68);
84+
--chart-4: oklch(0.6 0.16 232);
85+
--chart-5: oklch(0.65 0.18 320);
8686

87-
/* Sidebar — slightly different from page bg for depth */
88-
--sidebar: oklch(0.12 0.013 255);
89-
--sidebar-foreground: oklch(0.94 0.006 240);
90-
--sidebar-primary: oklch(0.72 0.18 162);
91-
--sidebar-primary-foreground: oklch(0.10 0.012 255);
92-
--sidebar-accent: oklch(0.18 0.016 255);
93-
--sidebar-accent-foreground: oklch(0.94 0.006 240);
94-
--sidebar-border: oklch(1 0 0 / 6%);
95-
--sidebar-ring: oklch(0.72 0.18 162);
87+
/* Sidebar — slightly different from page bg for depth */
88+
--sidebar: oklch(0.12 0.013 255);
89+
--sidebar-foreground: oklch(0.94 0.006 240);
90+
--sidebar-primary: oklch(0.72 0.18 162);
91+
--sidebar-primary-foreground: oklch(0.1 0.012 255);
92+
--sidebar-accent: oklch(0.18 0.016 255);
93+
--sidebar-accent-foreground: oklch(0.94 0.006 240);
94+
--sidebar-border: oklch(1 0 0 / 6%);
95+
--sidebar-ring: oklch(0.72 0.18 162);
9696
}
9797

9898
@theme inline {
99-
--font-sans: var(--font-sans);
100-
--font-mono: var(--font-mono);
101-
--font-heading: var(--font-heading);
102-
--color-pulse: var(--pulse);
103-
--color-pulse-foreground: var(--pulse-foreground);
104-
--color-sidebar-ring: var(--sidebar-ring);
105-
--color-sidebar-border: var(--sidebar-border);
106-
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
107-
--color-sidebar-accent: var(--sidebar-accent);
108-
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
109-
--color-sidebar-primary: var(--sidebar-primary);
110-
--color-sidebar-foreground: var(--sidebar-foreground);
111-
--color-sidebar: var(--sidebar);
112-
--color-chart-5: var(--chart-5);
113-
--color-chart-4: var(--chart-4);
114-
--color-chart-3: var(--chart-3);
115-
--color-chart-2: var(--chart-2);
116-
--color-chart-1: var(--chart-1);
117-
--color-ring: var(--ring);
118-
--color-input: var(--input);
119-
--color-border: var(--border);
120-
--color-destructive: var(--destructive);
121-
--color-accent-foreground: var(--accent-foreground);
122-
--color-accent: var(--accent);
123-
--color-muted-foreground: var(--muted-foreground);
124-
--color-muted: var(--muted);
125-
--color-secondary-foreground: var(--secondary-foreground);
126-
--color-secondary: var(--secondary);
127-
--color-primary-foreground: var(--primary-foreground);
128-
--color-primary: var(--primary);
129-
--color-popover-foreground: var(--popover-foreground);
130-
--color-popover: var(--popover);
131-
--color-card-foreground: var(--card-foreground);
132-
--color-card: var(--card);
133-
--color-foreground: var(--foreground);
134-
--color-background: var(--background);
135-
--radius-sm: calc(var(--radius) * 0.6);
136-
--radius-md: calc(var(--radius) * 0.8);
137-
--radius-lg: var(--radius);
138-
--radius-xl: calc(var(--radius) * 1.4);
139-
--radius-2xl: calc(var(--radius) * 1.8);
140-
--radius-3xl: calc(var(--radius) * 2.2);
141-
--radius-4xl: calc(var(--radius) * 2.6);
99+
--font-sans: var(--font-sans);
100+
--font-mono: var(--font-mono);
101+
--font-heading: var(--font-heading);
102+
--color-pulse: var(--pulse);
103+
--color-pulse-foreground: var(--pulse-foreground);
104+
--color-sidebar-ring: var(--sidebar-ring);
105+
--color-sidebar-border: var(--sidebar-border);
106+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
107+
--color-sidebar-accent: var(--sidebar-accent);
108+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
109+
--color-sidebar-primary: var(--sidebar-primary);
110+
--color-sidebar-foreground: var(--sidebar-foreground);
111+
--color-sidebar: var(--sidebar);
112+
--color-chart-5: var(--chart-5);
113+
--color-chart-4: var(--chart-4);
114+
--color-chart-3: var(--chart-3);
115+
--color-chart-2: var(--chart-2);
116+
--color-chart-1: var(--chart-1);
117+
--color-ring: var(--ring);
118+
--color-input: var(--input);
119+
--color-border: var(--border);
120+
--color-destructive: var(--destructive);
121+
--color-accent-foreground: var(--accent-foreground);
122+
--color-accent: var(--accent);
123+
--color-muted-foreground: var(--muted-foreground);
124+
--color-muted: var(--muted);
125+
--color-secondary-foreground: var(--secondary-foreground);
126+
--color-secondary: var(--secondary);
127+
--color-primary-foreground: var(--primary-foreground);
128+
--color-primary: var(--primary);
129+
--color-popover-foreground: var(--popover-foreground);
130+
--color-popover: var(--popover);
131+
--color-card-foreground: var(--card-foreground);
132+
--color-card: var(--card);
133+
--color-foreground: var(--foreground);
134+
--color-background: var(--background);
135+
--radius-sm: calc(var(--radius) * 0.6);
136+
--radius-md: calc(var(--radius) * 0.8);
137+
--radius-lg: var(--radius);
138+
--radius-xl: calc(var(--radius) * 1.4);
139+
--radius-2xl: calc(var(--radius) * 1.8);
140+
--radius-3xl: calc(var(--radius) * 2.2);
141+
--radius-4xl: calc(var(--radius) * 2.6);
142142
}
143143

144144
/* ─── Shared animations ─────────────────────────────────────────── */
145145
@keyframes fadeSlideUp {
146-
from { opacity: 0; transform: translateY(6px); }
147-
to { opacity: 1; transform: translateY(0); }
146+
from {
147+
opacity: 0;
148+
transform: translateY(6px);
149+
}
150+
to {
151+
opacity: 1;
152+
transform: translateY(0);
153+
}
148154
}
149155

150156
@layer base {
@@ -161,17 +167,37 @@
161167
-webkit-font-smoothing: antialiased;
162168
-moz-osx-font-smoothing: grayscale;
163169
}
170+
::-webkit-scrollbar {
171+
width: 5px;
172+
}
173+
::-webkit-scrollbar-track {
174+
background: transparent;
175+
}
176+
::-webkit-scrollbar-thumb {
177+
background: var(--border);
178+
border-radius: 5px;
179+
}
180+
* {
181+
scrollbar-width: thin;
182+
scrollbar-color: var(--border) transparent;
183+
}
164184
/* tabular numbers globally for stats/counts */
165185
[data-tabular] {
166186
font-variant-numeric: tabular-nums;
167187
}
168-
h1, h2, h3, h4, h5, h6 {
188+
h1,
189+
h2,
190+
h3,
191+
h4,
192+
h5,
193+
h6 {
169194
text-wrap: balance;
170195
}
171196
p {
172197
text-wrap: pretty;
173198
}
174-
button:not(:disabled), [role="button"]:not(:disabled) {
199+
button:not(:disabled),
200+
[role="button"]:not(:disabled) {
175201
cursor: pointer;
176202
}
177203
}

0 commit comments

Comments
 (0)