finxol.io
A very simple bookmarking webapp
bookmarker.finxol.deno.net/
1@layer components {
2 [class*="button"],
3 button {
4 --bg-opacity: 1;
5 --bg: var(--primary);
6
7 display: inline-flex;
8 align-items: center;
9 justify-content: center;
10 gap: calc(var(--spacing) * 0.5);
11 padding: calc(var(--spacing) * 0.75) calc(var(--spacing) * 1.5);
12
13 background-color: oklch(from var(--bg) l c h / var(--bg-opacity));
14 color: var(--color, white);
15 color: var(--color, contrast-color(var(--primary)));
16
17 border: none;
18 border-radius: var(--radius);
19 text-decoration: none;
20
21 font-weight: 600;
22 font-size: 0.875rem;
23 cursor: pointer;
24
25 transition: 0.25s ease;
26
27 &:hover {
28 --bg-opacity: 0.85;
29 }
30
31 &:disabled {
32 cursor: not-allowed;
33 opacity: 0.5;
34 }
35 }
36
37 .button-ghost {
38 --bg-opacity: 0;
39 --bg-lightness: 1;
40 --bg-saturation: 0.7;
41 --color: oklch(from var(--primary-text) l c h / 0.75);
42 background-color: hsl(
43 from var(--bg) h calc(s * var(--bg-saturation))
44 calc(l * var(--bg-lightness)) / var(--bg-opacity)
45 );
46
47 &:hover {
48 --bg-opacity: 0.3;
49 }
50
51 &:active,
52 &.active {
53 --bg-opacity: 0.4;
54 --bg-lightness: 1.05;
55 --bg-saturation: 0.25;
56 }
57 }
58
59 .button-danger {
60 --bg: var(--danger);
61 --saturation: 80%;
62 --color: hsl(from var(--danger) h var(--saturation) l);
63
64 &:hover {
65 --saturation: 100%;
66 }
67 }
68
69 .button-icon {
70 padding: 0.5rem;
71 }
72
73 .button-round {
74 border-radius: 100vw;
75 }
76}