davidwindham.com
forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
1/* Base reset and defaults */
2*,
3*::before,
4*::after {
5 box-sizing: border-box;
6}
7
8:root:not([data-theme='light']),
9:root[data-theme='dark'] {
10 /* background colors */
11 --bg: var(--bg-color, oklch(0.171 0 0));
12 --bg-subtle: var(--bg-subtle-color, oklch(0.198 0 0));
13 --bg-muted: var(--bg-muted-color, oklch(0.236 0 0));
14 --bg-elevated: var(--bg-elevated-color, oklch(0.266 0 0));
15
16 /* text colors */
17 --fg: oklch(0.982 0 0);
18 --fg-muted: oklch(0.749 0 0);
19 --fg-subtle: oklch(0.673 0 0);
20
21 /* border, separator colors */
22 --border: oklch(0.269 0 0);
23 --border-subtle: oklch(0.239 0 0);
24 --border-hover: oklch(0.371 0 0);
25
26 /* accent color, set by user from settings */
27 --accent: var(--accent-color, oklch(1 0 0));
28 --accent-muted: var(--accent-color, oklch(0.922 0 0));
29
30 /* accent colors */
31 --swatch-coral: oklch(0.704 0.177 14.75);
32 --swatch-amber: oklch(0.828 0.165 84.429);
33 --swatch-emerald: oklch(0.792 0.153 166.95);
34 --swatch-sky: oklch(0.787 0.128 230.318);
35 --swatch-violet: oklch(0.78 0.148 286.067);
36 --swatch-magenta: oklch(0.78 0.15 330);
37
38 /* syntax highlighting colors */
39 --syntax-fn: oklch(0.727 0.137 299.149);
40 --syntax-str: oklch(0.829 0.088 252.458);
41 --syntax-kw: oklch(0.721 0.162 15.494);
42 --syntax-comment: oklch(0.551 0.019 250.976);
43
44 /* badge colors for background & text */
45 --badge-orange: oklch(0.67 0.185 55);
46 --badge-yellow: oklch(0.588 0.183 91);
47 --badge-green: oklch(0.566 0.202 165);
48 --badge-cyan: oklch(0.571 0.181 210);
49 --badge-blue: oklch(0.579 0.191 252);
50 --badge-indigo: oklch(0.573 0.262 276.966);
51 --badge-purple: oklch(0.495 0.172 295);
52 --badge-pink: oklch(0.584 0.189 343);
53}
54
55:root[data-theme='dark'][data-bg-theme='slate'] {
56 --bg: oklch(0.151 0.018 264.695);
57 --bg-subtle: oklch(0.179 0.015 262.421);
58 --bg-muted: oklch(0.214 0.018 261.234);
59 --bg-elevated: oklch(0.259 0.021 260.031);
60}
61
62:root[data-theme='dark'][data-bg-theme='zinc'] {
63 --bg: oklch(0.158 0.005 285.823);
64 --bg-subtle: oklch(0.188 0.005 285.894);
65 --bg-muted: oklch(0.219 0.005 285.929);
66 --bg-elevated: oklch(0.256 0.006 286.033);
67}
68
69:root[data-theme='dark'][data-bg-theme='stone'] {
70 --bg: oklch(0.164 0.004 89.25);
71 --bg-subtle: oklch(0.198 0.008 89.321);
72 --bg-muted: oklch(0.228 0.015 89.386);
73 --bg-elevated: oklch(0.252 0.018 84.298);
74}
75
76:root[data-theme='dark'][data-bg-theme='black'] {
77 --bg: oklch(0 0 0);
78 --bg-subtle: oklch(0.148 0 0);
79 --bg-muted: oklch(0.204 0 0);
80 --bg-elevated: oklch(0.264 0 0);
81}
82
83:root[data-theme='light'] {
84 --bg: var(--bg-color, oklch(1 0 0));
85 --bg-subtle: var(--bg-subtle-color, oklch(0.979 0.001 286.375));
86 --bg-muted: var(--bg-muted-color, oklch(0.955 0.001 286.76));
87 --bg-elevated: var(--bg-elevated-color, oklch(0.94 0.002 287.29));
88
89 --fg: oklch(0.146 0 0);
90 --fg-muted: oklch(0.398 0 0);
91 --fg-subtle: oklch(0.48 0 0);
92
93 --border: oklch(0.8514 0 0);
94 --border-subtle: oklch(0.922 0 0);
95 --border-hover: oklch(0.715 0 0);
96
97 --accent: var(--accent-color, oklch(0.145 0 0));
98 --accent-muted: var(--accent-color, oklch(0.205 0 0));
99
100 /* accent colors */
101 --swatch-coral: oklch(0.7 0.19 14.75);
102 --swatch-amber: oklch(0.8 0.25 84.429);
103 --swatch-emerald: oklch(0.7 0.17 166.95);
104 --swatch-sky: oklch(0.7 0.15 230.318);
105 --swatch-violet: oklch(0.7 0.17 286.067);
106 --swatch-magenta: oklch(0.75 0.18 330);
107
108 --syntax-fn: oklch(0.502 0.188 294.988);
109 --syntax-str: oklch(0.425 0.152 252);
110 --syntax-kw: oklch(0.588 0.193 20.469);
111 --syntax-comment: oklch(0.551 0.019 250.976);
112
113 --badge-blue: oklch(0.579 0.191 252);
114 --badge-yellow: oklch(0.588 0.183 91);
115 --badge-green: oklch(0.566 0.202 165);
116 --badge-indigo: oklch(0.457 0.24 277.023);
117 --badge-purple: oklch(0.495 0.172 295);
118 --badge-orange: oklch(0.67 0.185 55);
119 --badge-pink: oklch(0.584 0.189 343);
120 --badge-cyan: oklch(0.571 0.181 210);
121}
122
123:root[data-theme='light'][data-bg-theme='slate'] {
124 --bg: oklch(1 0 0);
125 --bg-subtle: oklch(0.982 0.008 269.62);
126 --bg-muted: oklch(0.96 0.008 261.234);
127 --bg-elevated: oklch(0.943 0.012 255.52);
128}
129
130:root[data-theme='light'][data-bg-theme='zinc'] {
131 --bg: oklch(1 0 0);
132 --bg-subtle: oklch(0.979 0.004 286.53);
133 --bg-muted: oklch(0.958 0.004 286.39);
134 --bg-elevated: oklch(0.939 0.004 286.32);
135}
136
137:root[data-theme='light'][data-bg-theme='stone'] {
138 --bg: oklch(1 0 0);
139 --bg-subtle: oklch(0.979 0.004 88.762);
140 --bg-muted: oklch(0.958 0.005 88.743);
141 --bg-elevated: oklch(0.943 0.005 88.731);
142}
143
144:root[data-theme='light'][data-bg-theme='black'] {
145 --bg-subtle: var(--bg-subtle-color, oklch(0.979 0 0));
146}
147
148@media (prefers-contrast: more) {
149 :root[data-theme='dark'] {
150 /* text colors */
151 --fg: oklch(1 0 0);
152 --fg-muted: oklch(0.769 0 0);
153 --fg-subtle: oklch(0.693 0 0);
154
155 /* border, separator colors */
156 --border: oklch(0.769 0 0);
157 --border-subtle: oklch(0.739 0 0);
158 --border-hover: oklch(0.771 0 0);
159 }
160
161 :root[data-theme='light'] {
162 /* text colors */
163 --fg: oklch(0 0 0);
164 --fg-muted: oklch(0.329 0 0);
165 --fg-subtle: oklch(0.4 0 0);
166
167 /* border, separator colors */
168 --border: oklch(0.3514 0 0);
169 --border-subtle: oklch(0.422 0 0);
170 --border-hover: oklch(0.315 0 0);
171 }
172}
173
174/*
175 * Forced Colors Mode (WHCM) Override for Icons
176 *
177 * By default, `forced-color-adjust: preserve-parent-color` (from UnoConfig) works fine
178 * for most icons as they inherit the correct text color.
179 *
180 * However, if icons disappear in specific contexts (e.g., inside buttons with
181 * complex backgrounds or transparent states), uncomment the following block
182 * to enforce visibility using `CanvasText`.
183 */
184/*
185@media (forced-colors: active) {
186 [class^='i-'],
187 [class*=' i-'] {
188 forced-color-adjust: none !important;
189 color: CanvasText !important;
190 }
191}
192*/
193
194html {
195 @apply scroll-pt-20;
196 -webkit-font-smoothing: antialiased;
197 -moz-osx-font-smoothing: grayscale;
198 text-rendering: optimizeLegibility;
199 /* Offset for fixed header - otherwise anchor headers are cutted */
200 scrollbar-gutter: stable;
201}
202
203/*
204 * Enable CSS scroll-state container queries for the document
205 * This allows the footer to query the scroll state using pure CSS
206 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@container#scroll-state_container_descriptors
207 */
208@supports (container-type: scroll-state) {
209 html {
210 container-type: scroll-state;
211 }
212}
213
214html[dir='rtl'] .rtl-flip {
215 transform: scale(-1, 1);
216}
217
218body {
219 margin: 0;
220 background-color: var(--bg);
221 color: var(--fg);
222 line-height: 1.6;
223}
224
225:focus-visible,
226:-moz-focusring {
227 /* weird Firefox behavior makes it necessary to add `!important`
228 or otherwise the selector would need to be more specific,
229 which it explicitly should not be. */
230 outline: 2px solid var(--accent) !important;
231 outline-offset: 2px !important;
232}
233
234/* Reset dd margin (browser default is margin-left: 40px) */
235dd {
236 margin: 0;
237}
238
239/* Selection */
240::selection {
241 background-color: var(--fg-muted);
242 color: var(--bg-subtle);
243}
244
245/* Scrollbar styling */
246* {
247 scrollbar-color: var(--border) var(--bg);
248}
249
250::-webkit-scrollbar {
251 width: 8px;
252 height: 8px;
253}
254
255::-webkit-scrollbar-track {
256 background: var(--bg);
257}
258
259::-webkit-scrollbar-thumb {
260 background: var(--border);
261 border-radius: 4px;
262}
263
264::-webkit-scrollbar-thumb:hover {
265 background: var(--border-hover);
266}
267
268/* Scrollbar styling for Firefox */
269@supports not selector(::-webkit-scrollbar) {
270 * {
271 scrollbar-width: thin;
272 }
273}
274
275/* Shiki theme colors */
276html.light .shiki,
277html.light .shiki span {
278 color: var(--shiki-light) !important;
279 background-color: var(--shiki-light-bg) !important;
280 font-style: var(--shiki-light-font-style) !important;
281 font-weight: var(--shiki-light-font-weight) !important;
282 text-decoration: var(--shiki-light-text-decoration) !important;
283}
284
285/* Inline code in package descriptions */
286p > span > code,
287.line-clamp-2 code {
288 @apply font-mono;
289 font-size: 0.85em;
290 background: var(--bg-muted);
291 padding: 0.1em 0.3em;
292 border-radius: 3px;
293 border: 1px solid var(--border);
294}
295
296/* View transition for search box (includes / and input) */
297.search-box {
298 view-transition-name: search-box;
299}
300
301/* Safari search input fixes */
302input[type='search'] {
303 -webkit-appearance: none;
304 appearance: none;
305}
306
307@media screen and (max-width: 767px) {
308 input,
309 select,
310 textarea {
311 font-size: 16px !important;
312 }
313}
314
315input[type='search']::-webkit-search-decoration,
316input[type='search']::-webkit-search-cancel-button,
317input[type='search']::-webkit-search-results-button,
318input[type='search']::-webkit-search-results-decoration {
319 -webkit-appearance: none;
320 appearance: none;
321}
322
323/* Disable the default fade transition on page navigation */
324::view-transition-old(root),
325::view-transition-new(root) {
326 animation: none;
327}
328
329/* Customize the view transition animations for specific elements */
330::view-transition-old(search-box),
331::view-transition-new(search-box) {
332 animation-duration: 0.3s;
333 animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
334}
335
336/* Locking the scroll whenever any of the modals are open */
337html:has(dialog:modal) {
338 overflow: hidden;
339 scrollbar-gutter: stable;
340}