kacaii.dev
👩🚒 Firefighters API written in Gleam!
lustre
gleam
1@import "tailwindcss";
2@import "https://www.nerdfonts.com/assets/css/webfont.css";
3
4@theme {
5 --font-sans:
6 sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
7 "Noto Color Emoji";
8
9
10 --color-ctp_mantle: #181825;
11 --color-ctp_base: #1e1e2e;
12
13 --color-ctp_surface2: #585b70;
14 --color-ctp_surface1: #45475a;
15 --color-ctp_surface0: #313244;
16
17 --color-ctp_overlay2: #9399b2;
18 --color-ctp_overlay1: #7f849c;
19 --color-ctp_overlay0: #6c7086;
20
21 --color-ctp_subtext0: #a6adc8;
22 --color-ctp_subtext1: #bac2de;
23
24 --color-ctp_flamingo: #f2cdcd;
25
26 --color-ctp_white: #cdd6f4;
27 --color-ctp_green: #a6e3a1;
28 --color-ctp_yellow: #f9e2af;
29 --color-ctp_red: #f38ba8;
30}
31
32@theme inline {
33 --color-background: var(--color-ctp_mantle);
34 --color-foreground: var(--color-ctp_base);
35 --color-accent: var(--color-ctp_flamingo);
36
37 --color-disabled: var(--color-ctp_surface1);
38
39 --color-text_primary: var(--color-ctp_white);
40 --color-subtext: var(--color-ctp_subtext1);
41
42 --color-border_primary: var(--color-ctp_surface0);
43}
44
45@layer components {
46 .btn-submit {
47 background-color: var(--color-background);
48 color: var(--color-text_primary);
49
50
51 &:hover {
52 & .nf {
53 color: var(--color-background);
54 }
55
56 background-color: var(--color-accent);
57 color: var(--color-background);
58 }
59
60 &:focus-visible {
61 background-color: var(--color-accent);
62 color: var(--color-background);
63 }
64
65 &:disabled {
66 & .nf {
67 color: var(--color-background);
68 }
69
70 background-color: var(--color-disabled);
71 color: var(--color-background);
72 }
73
74 }
75
76 .form-input {
77 background-color: var(--color-foreground);
78 color: var(--color-text_primary);
79
80 border-width: 1px;
81 border-color: var(--color-border_primary);
82
83 &:focus-visible {
84 outline-style: solid;
85 outline-width: 1px;
86 }
87
88 &::placeholder {
89 color: var(--color-disabled);
90 }
91
92 &:valid {
93 outline-color: var(--color-ctp_green);
94 }
95
96 &:invalid {
97 outline-color: var(--color-ctp_red);
98 }
99
100 &:invalid:focus-visible {
101 outline-color: var(--color-ctp_yellow);
102 }
103 }
104}
105
106@layer base {
107 p {
108 font-size: var(--text-base);
109 color: var(--color-text_primary);
110 }
111
112 h1 {
113 font-size: var(--text-2xl);
114 font-weight: var(--font-weight-semibold);
115 color: var(--color-text_primary);
116 }
117
118 h2 {
119 font-size: var(--text-xl);
120 font-weight: var(--font-weight-semibold);
121 color: var(--color-text_primary);
122 }
123
124 h3 {
125 font-size: var(--text-lg);
126 font-weight: var(--font-weight-semibold);
127 color: var(--color-text_primary);
128 }
129
130 .nf {
131 color: var(--color-text_primary);
132 }
133}