Skip to content

Commit 09ed6a3

Browse files
author
LinuxJava7
committed
new bottom bar
1 parent 430e98c commit 09ed6a3

File tree

3 files changed

+132
-108
lines changed

3 files changed

+132
-108
lines changed

‎catppuccin.css‎

Lines changed: 87 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -135,46 +135,51 @@
135135
--dark-5: #000000;
136136
}
137137

138+
.view-switcher a,
139+
.view-switcher-narrow a {
140+
color: rgb(76, 79, 105, 0.9);
141+
}
142+
138143
@media (prefers-color-scheme: dark) {
139144
:root {
140145
/* Accent Colors */
141-
--accent-color: rgb(186, 187, 241);
142-
--accent-bg-color: rgb(186, 187, 241);
143-
--accent-fg-color: rgb(48, 52, 70);
146+
--accent-color: rgb(180, 190, 254);
147+
--accent-bg-color: rgb(180, 190, 254);
148+
--accent-fg-color: rgb(17, 17, 27);
144149

145150
/* Destructive Colors */
146-
--destructive-color: rgb(231, 130, 132);
147-
--destructive-bg-color: rgb(234, 153, 156);
148-
--destructive-fg-color: rgb(48, 52, 70);
151+
--destructive-color: rgb(238, 153, 160);
152+
--destructive-bg-color: rgb(237, 135, 150);
153+
--destructive-fg-color: rgb(17, 17, 27);
149154

150155
/* Success Colors */
151-
--success-color: rgb(166, 209, 137);
152-
--success-bg-color: rgb(129, 200, 190);
153-
--success-fg-color: rgb(48, 52, 70);
156+
--success-color: rgb(166, 218, 149);
157+
--success-bg-color: rgb(139, 213, 202);
158+
--success-fg-color: rgb(17, 17, 27);
154159

155160
/* Warning Colors */
156-
--warning-color: rgb(229, 200, 144);
157-
--warning-bg-color: rgb(239, 159, 118);
158-
--warning-fg-color: rgb(48, 52, 70);
161+
--warning-color: rgb(245, 169, 127);
162+
--warning-bg-color: rgb(238, 212, 159);
163+
--warning-fg-color: rgb(17, 17, 27);
159164

160165
/* Error Colors */
161-
--error-color: rgb(231, 130, 132);
162-
--error-bg-color: rgb(234, 153, 156);
163-
--error-fg-color: rgb(48, 52, 70);
166+
--error-color: rgb(238, 153, 160);
167+
--error-bg-color: rgb(237, 135, 150);
168+
--error-fg-color: rgb(17, 17, 27);
164169

165170
/* Window Colors */
166-
--window-bg-color: rgb(48, 52, 70);
167-
--window-fg-color: rgb(198, 208, 245);
171+
--window-bg-color: rgb(30, 30, 46);
172+
--window-fg-color: rgb(205, 214, 244);
168173

169174
/* View Colors */
170-
--view-bg-color: rgb(41, 44, 60);
171-
--view-fg-color: rgb(198, 208, 245);
175+
--view-bg-color: rgb(24, 24, 37);
176+
--view-fg-color: rgb(205, 214, 244);
172177

173178
/* Header Bar Colors */
174-
--headerbar-bg-color: rgb(35, 38, 52);
175-
--headerbar-fg-color: rgb(198, 208, 245);
176-
--headerbar-border-color: rgb(115, 121, 148);
177-
--headerbar-backdrop-color: rgba(48, 52, 70, 0.8);
179+
--headerbar-bg-color: rgb(17, 17, 27);
180+
--headerbar-fg-color: rgb(205, 214, 244);
181+
--headerbar-border-color: rgb(49, 50, 68);
182+
--headerbar-backdrop-color: rgba(30, 30, 46, 0.8);
178183
--headerbar-shade-color: rgba(0, 0, 0, 0.36);
179184
--headerbar-darker-shade-color: rgba(0, 0, 0, 0.9);
180185

@@ -193,29 +198,79 @@
193198
--secondary-sidebar-shade-color: rgba(0, 0, 0, 0.25);
194199

195200
/* Card Colors */
196-
--card-bg-color: rgba(81, 87, 109, 0.08);
197-
--card-fg-color: rgb(198, 208, 245);
201+
--card-bg-color: rgb(49, 50, 68);
202+
--card-fg-color: rgb(205, 214, 244);
198203
--card-shade-color: rgba(0, 0, 0, 0.36);
199204

200205
/* Thumbnail Colors */
201206
--thumbnail-bg-color: rgb(98, 104, 128);
202207
--thumbnail-fg-color: rgb(198, 208, 245);
203208

204209
/* Dialog Colors */
205-
--dialog-bg-color: rgb(98, 104, 128);
206-
--dialog-fg-color: rgb(198, 208, 245);
210+
--dialog-bg-color: rgb(24, 24, 37);
211+
--dialog-fg-color: rgb(205, 214, 244);
207212

208213
/* Popover Colors */
209-
--popover-bg-color: rgb(98, 104, 128);
210-
--popover-fg-color: rgb(198, 208, 245);
211-
--popover-shade-color: rgba(0, 0, 0, 0.25);
214+
--popover-bg-color: rgb(24, 24, 37);
215+
--popover-fg-color: rgb(205, 214, 244);
216+
--popover-shade-color: rgba(0, 0, 0, 0.36);
212217

213218
/* Miscellaneous Colors */
214-
--shade-color: rgba(0, 0, 0, 0.25);
219+
--shade-color: rgba(0, 0, 0, 0.36);
215220
--scrollbar-outline-color: rgba(0, 0, 0, 0.5);
216221

217222
/* Helper Colors */
218223
--borders: rgba(255, 255, 255, 0.5);
219224
}
225+
226+
.view-switcher a:hover,
227+
.view-switcher a:focus,
228+
.view-switcher-narrow a:hover,
229+
.view-switcher-narrow a:focus {
230+
background-color: rgba(255, 255, 255, 0.04);
231+
color: var(--window-fg-color);
232+
}
233+
234+
.view-switcher .current,
235+
.view-switcher-narrow .current {
236+
background-color: rgba(255, 255, 255, 0.06);
237+
}
238+
239+
.view-switcher .current:hover,
240+
.view-switcher .current:focus,
241+
.view-switcher-narrow .current:hover,
242+
.view-switcher-narrow .current:focus {
243+
background-color: rgba(255, 255, 255, 0.10);
244+
}
245+
246+
.view-switcher a,
247+
.view-switcher-narrow a {
248+
color: rgb(205, 214, 244, 0.9);
249+
}
250+
251+
.view-switcher-bar {
252+
box-shadow: 0 0.3rem 0.3rem rgba(0, 0, 0, 0.1),
253+
0 0 1rem rgba(0, 0, 0, 0.05),
254+
inset 0 1px 1px rgba(255, 255, 255, 0.1),
255+
inset 0 0 0.27rem rgba(255, 255, 255, 0.1);
256+
}
220257
}
221-
258+
259+
@supports (color: AccentColor) {
260+
:root{
261+
--accent-bg-color: oklch(from AccentColor 0.6638 0.1751 h);
262+
--window-bg-color: oklch(from AccentColor 0.9578 0.0058 h);
263+
--card-bg-color: oklch(from AccentColor 0.9335 0.0087 h);
264+
--headerbar-backdrop-color: oklch(from AccentColor 0.9578 0.0058 h / 80%);
265+
--view-switcher-accent: oklch(from AccentColor 0.50 0.12 h);
266+
}
267+
@media (prefers-color-scheme: dark) {
268+
:root{
269+
--accent-bg-color: oklch(from AccentColor 0.7664 0.1113 h);
270+
--window-bg-color: oklch(from AccentColor 0.2429 0.0304 h);
271+
--card-bg-color: oklch(from AccentColor 0.3240 0.0319 h);
272+
--headerbar-backdrop-color: oklch(from AccentColor 0.2429 0.0304 h / 70%);
273+
--view-switcher-accent: oklch(from AccentColor 0.7664 0.1113 h);
274+
}
275+
}
276+
}

‎colors.css‎

Lines changed: 1 addition & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,6 @@
1-
@supports (color: AccentColor) {
2-
:root{
3-
--accent-bg-color: oklch(from AccentColor 0.6638 0.1751 h);
4-
--window-bg-color: oklch(from AccentColor 0.9578 0.0058 h);
5-
--card-bg-color: oklch(from AccentColor 0.9335 0.0087 h);
6-
--headerbar-backdrop-color: oklch(from AccentColor 0.9578 0.0058 h / 80%);
7-
}
8-
@media (prefers-color-scheme: dark){
9-
:root{
10-
--accent-bg-color: oklch(from AccentColor 0.8099 0.0759 h);
11-
--window-bg-color: oklch(from AccentColor 0.3291 0.0324 h);
12-
--card-bg-color: oklch(from AccentColor 0.4601 0.0367 h / 8%);
13-
--headerbar-backdrop-color: oklch(from AccentColor 0.3291 0.0324 h / 80%);
14-
}
15-
}
16-
}
17-
1+
@import "catppuccin.css";
182

193
@media (prefers-color-scheme: dark) {
20-
.view-switcher a:hover,
21-
.view-switcher a:focus,
22-
.view-switcher-narrow a:hover,
23-
.view-switcher-narrow a:focus {
24-
background-color: rgba(255, 255, 255, 0.056);
25-
}
26-
27-
.view-switcher .current,
28-
.view-switcher-narrow .current {
29-
background-color: rgba(255, 255, 255, 0.08);
30-
}
31-
32-
.view-switcher .current:hover,
33-
.view-switcher .current:focus,
34-
.view-switcher-narrow .current:hover,
35-
.view-switcher-narrow .current:focus {
36-
background-color: rgba(255, 255, 255, 0.136);
37-
}
38-
39-
404
a {
415
color: var(--blue-2);
426
}

‎style.css‎

Lines changed: 44 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
@import 'catppuccin.css';
21
@import 'colors.css';
32

43
/* Root Variables - Light Mode (Default) */
@@ -251,6 +250,7 @@ a[href^="http"]:not(:has(.arrow)):not(:has(img)):not(:has(svg))::after {
251250
.card a {
252251
justify-self: start;
253252
width: 100%;
253+
color: var(--blue-4);
254254
}
255255

256256
.card a:not(.btn) {
@@ -305,27 +305,33 @@ a[href^="http"]:not(:has(.arrow)):not(:has(img)):not(:has(svg))::after {
305305
display: none;
306306
justify-content: center;
307307
align-items: center;
308-
height: 4rem;
309-
width: 100%;
308+
height: fit-content;
309+
width: fit-content;
310310
position: fixed;
311311
bottom: 0;
312-
padding: 0;
313312
background-color: var(--headerbar-backdrop-color);
314313
backdrop-filter: blur(12px);
315314
z-index: 9999;
316-
padding-left: 8px;
317-
padding-right: 8px;
315+
margin: 1rem;
316+
padding: 0.25rem;
317+
right: 0;
318+
left: 0;
319+
border-radius: var(--btnround);
320+
box-shadow: 0 0.3rem 0.3rem rgba(0, 0, 0, 0.1),
321+
0 0 1rem rgba(0, 0, 0, 0.05),
322+
inset 0 1px 1px rgba(255, 255, 255, 1),
323+
inset 0 0 0.27rem rgba(255, 255, 255, 1);
318324
}
319325

320326
/* View Switcher */
321327
.view-switcher-narrow {
322328
display: flex;
323329
justify-content: center;
324330
padding: 0;
325-
height: 85%;
331+
height: 100%;
326332
width: 100%;
327333
align-content: center;
328-
align-items: center;
334+
align-items: stretch;
329335
}
330336

331337
.view-switcher-narrow ul {
@@ -337,50 +343,66 @@ a[href^="http"]:not(:has(.arrow)):not(:has(img)):not(:has(svg))::after {
337343
height: 100%;
338344
justify-content: space-evenly;
339345
max-width: 28rem;
346+
gap: 0.25rem;
347+
align-items: stretch;
340348
}
341349

342350
.view-switcher-narrow li {
343-
display: inline-block;
344-
width: 100%;
345-
height: 100%;
346-
max-width: 5rem;
351+
display: flex;
352+
flex: 1;
353+
min-width: 0;
354+
align-items: stretch;
347355
}
348356

349357
.view-switcher-narrow a {
350358
display: flex;
351359
align-items: center;
352360
justify-content: center;
353361
flex-direction: column;
354-
width: auto;
362+
width: 100%;
355363
height: 100%;
356-
color: var(--window-fg-color);
357364
font-weight: bold;
358365
text-decoration: none;
359-
border-radius: var(--btnsqr);
366+
border-radius: var(--btnround);
360367
transition: background-color 0.2s ease, color 0.2s ease;
361-
gap: 0.1rem;
362-
font-size: 0.85rem;
368+
gap: 0.05rem;
369+
font-size: 0.8rem;
363370
padding: 0.15rem;
371+
padding-left: 1.25rem;
372+
padding-right: 1.25rem;
373+
white-space: nowrap;
374+
overflow: hidden;
375+
text-overflow: ellipsis;
376+
flex: 1;
364377
}
365378

366379
.view-switcher-narrow a:hover,
367-
.view-switcher-narrow a:focus {
380+
.view-switcher-narrow a:focus,
381+
.view-switcher a:hover,
382+
.view-switcher a:focus {
368383
background-color: rgba(0, 0, 6, 0.03);
384+
color: var(--window-fg-color);
385+
369386
}
370387

371-
.view-switcher-narrow .current {
388+
.view-switcher-narrow .current,
389+
.view-switcher .current {
372390
background-color: rgba(0, 0, 6, 0.05);
391+
color: var(--view-switcher-accent)
373392
}
374393

375394
.view-switcher-narrow .current:hover,
376-
.view-switcher-narrow .current:focus {
395+
.view-switcher-narrow .current:focus,
396+
.view-switcher .current:hover,
397+
.view-switcher .current:focus {
377398
background-color: rgba(0, 0, 6, 0.08);
399+
color: var(--view-switcher-accent)
400+
378401
}
379402

380403
.view-switcher-narrow svg {
381-
margin-top: 4px;
404+
margin-top: 0.25rem;
382405
width: 1.2rem;
383-
384406
}
385407

386408
/* Header Bar */
@@ -432,20 +454,6 @@ a[href^="http"]:not(:has(.arrow)):not(:has(img)):not(:has(svg))::after {
432454
gap: 0.4rem;
433455
}
434456

435-
.view-switcher a:hover,
436-
.view-switcher a:focus {
437-
background-color: rgba(0, 0, 6, 0.056);
438-
}
439-
440-
.view-switcher .current {
441-
background-color: rgba(0, 0, 6, 0.08);
442-
}
443-
444-
.view-switcher .current:hover,
445-
.view-switcher .current:focus {
446-
background-color: rgba(0, 0, 6, 0.136);
447-
}
448-
449457
.view-switcher svg {
450458
width: 1em;
451459
height: 1em;
@@ -531,7 +539,4 @@ footer {
531539
body {
532540
padding-top: 3rem;
533541
}
534-
535-
536-
537542
}

0 commit comments

Comments
 (0)