tailwind.css RawHistoryFolder
1@import "tailwindcss";
2
3/* Define custom theme colors for v4 */
4@theme {
5 /* Light theme colors (default) */
6 --color-browser-bg: rgb(253 252 250);
7 --color-browser-surface: rgb(245 245 240);
8 --color-browser-surface-variant: rgb(253 250 245);
9 --color-browser-text: rgb(17 24 39);
10 --color-browser-muted: rgb(107 114 128);
11 --color-browser-accent: rgb(59 130 246);
12 --color-browser-border: rgb(229 231 235);
13}
14
15/* Dynamic theme switching via CSS variables */
16:root {
17 --dynamic-bg: var(--color-browser-bg);
18 --dynamic-surface-variant: var(--color-browser-surface-variant);
19 --dynamic-surface: var(--color-browser-surface);
20 --dynamic-text: var(--color-browser-text);
21 --dynamic-muted: var(--color-browser-muted);
22 --dynamic-accent: var(--color-browser-accent);
23 --dynamic-border: var(--color-browser-border);
24}
25
26/* Dark theme colors (applied via .dark class from GTK) */
27.dark {
28 --dynamic-bg: rgb(17 24 39);
29 --dynamic-surface-variant: rgb(21 30 50);
30 --dynamic-surface: rgb(31 41 55);
31 --dynamic-text: rgb(243 244 246);
32 --dynamic-muted: rgb(156 163 175);
33 --dynamic-accent: rgb(96 165 250);
34 --dynamic-border: rgb(55 65 81);
35}
36
37/* Base styles for browser UI components */
38.browser-ui {
39 background-color: var(--dynamic-bg);
40 color: var(--dynamic-text);
41 border-color: var(--dynamic-border);
42 transition: colors 250ms;
43}
44
45/* Toast notification styles */
46.toast-base {
47 border-radius: 0.375rem; /* rounded-md */
48 box-shadow:
49 0 10px 15px -3px rgb(0 0 0 / 0.1),
50 0 4px 6px -4px rgb(0 0 0 / 0.1);
51 padding: 0.25rem 0.5rem;
52 max-width: 24rem;
53 pointer-events: auto;
54 background-color: var(--dynamic-surface);
55 color: var(--dynamic-text);
56 border: 1px solid var(--dynamic-border);
57}
58
59.toast-success {
60 background-color: rgb(240 253 244);
61 color: rgb(22 163 74);
62 border: 1px solid rgb(187 247 208);
63}
64
65.dark .toast-success {
66 background-color: rgb(22 163 74 / 0.2);
67 color: rgb(187 247 208);
68 border-color: rgb(22 163 74);
69}
70
71.toast-error {
72 background-color: rgb(254 242 242);
73 color: rgb(220 38 38);
74 border: 1px solid rgb(254 202 202);
75}
76
77.dark .toast-error {
78 background-color: rgb(220 38 38 / 0.2);
79 color: rgb(254 202 202);
80 border-color: rgb(220 38 38);
81}
82
83.toast-info {
84 background-color: rgb(239 246 255);
85 color: rgb(59 130 246);
86 border: 1px solid rgb(191 219 254);
87}
88
89.dark .toast-info {
90 background-color: rgb(59 130 246 / 0.2);
91 color: rgb(191 219 254);
92 border-color: rgb(59 130 246);
93}
94
95/* Omnibox/Find bar styles */
96.omnibox-base {
97 background-color: var(--dynamic-bg);
98 color: var(--dynamic-text);
99 border: 2px solid var(--dynamic-border);
100 box-shadow:
101 0 4px 6px -1px rgb(0 0 0 / 0.1),
102 0 2px 4px -2px rgb(0 0 0 / 0.1);
103 transition: all 150ms;
104}
105
106.omnibox-base:focus-within {
107 border-color: var(--dynamic-accent);
108}
109
110.omnibox-input {
111 width: 100%;
112 padding: 0.5rem 0.75rem;
113 background-color: transparent;
114 color: var(--dynamic-text);
115 outline: none;
116 font-size: 0.875rem;
117}
118
119.omnibox-input::placeholder {
120 color: var(--dynamic-muted);
121}
122
123.omnibox-results {
124 background-color: var(--dynamic-bg);
125 border: 1px solid var(--dynamic-border);
126 border-radius: 0.375rem;
127 box-shadow:
128 0 10px 15px -3px rgb(0 0 0 / 0.1),
129 0 4px 6px -4px rgb(0 0 0 / 0.1);
130 max-height: 24rem;
131 overflow-y: auto;
132}
133
134.omnibox-item {
135 padding: 0.75rem 1rem;
136 cursor: pointer;
137 transition: colors 150ms;
138 border-bottom: 1px solid var(--dynamic-border);
139}
140
141.omnibox-item:hover,
142.omnibox-item:focus {
143 background-color: var(--dynamic-surface);
144 outline: none;
145}
146
147.omnibox-item.selected {
148 background-color: color-mix(in srgb, var(--dynamic-accent) 10%, transparent);
149 color: var(--dynamic-accent);
150}
151
152/* Find bar specific styles */
153.findbar {
154 display: flex;
155 align-items: center;
156 gap: 0.5rem;
157 padding: 0.5rem 0.75rem;
158}
159
160.findbar-input {
161 flex: 1;
162 background-color: transparent;
163 color: var(--dynamic-text);
164 outline: none;
165 font-size: 0.875rem;
166}
167
168.findbar-input::placeholder {
169 color: var(--dynamic-muted);
170}
171
172.findbar-button {
173 padding: 0.25rem 0.5rem;
174 color: var(--dynamic-muted);
175 transition: colors 150ms;
176 font-size: 0.875rem;
177}
178
179.findbar-button:hover {
180 color: var(--dynamic-text);
181}
182
183.findbar-count {
184 font-size: 0.75rem;
185 color: var(--dynamic-muted);
186 font-variant-numeric: tabular-nums;
187}
188
189/* Animation utilities */
190.slide-in-top {
191 animation: slide-in-top 0.25s ease-out;
192}
193
194.slide-out-top {
195 animation: slide-out-top 0.25s ease-in;
196}
197
198.fade-in {
199 animation: fade-in 0.15s ease-out;
200}
201
202.fade-out {
203 animation: fade-out 0.15s ease-in;
204}
205
206@keyframes slide-in-top {
207 from {
208 transform: translateY(-100%);
209 opacity: 0;
210 }
211 to {
212 transform: translateY(0);
213 opacity: 1;
214 }
215}
216
217@keyframes slide-out-top {
218 from {
219 transform: translateY(0);
220 opacity: 1;
221 }
222 to {
223 transform: translateY(-100%);
224 opacity: 0;
225 }
226}
227
228@keyframes fade-in {
229 from {
230 opacity: 0;
231 }
232 to {
233 opacity: 1;
234 }
235}
236
237@keyframes fade-out {
238 from {
239 opacity: 1;
240 }
241 to {
242 opacity: 0;
243 }
244}
245
246/* Find highlighting styles for in-page search */
247.find-highlight {
248 background-color: rgb(255 235 59); /* yellow-400 */
249 color: rgb(0 0 0); /* black */
250 padding: 0 0.125rem; /* px-0.5 */
251 border-radius: 0.125rem; /* rounded-sm */
252 box-shadow: 0 0 0 1px rgb(200 185 0) inset;
253}
254
255.find-active {
256 background-color: rgb(255 152 0) !important; /* orange-500 */
257 color: rgb(0 0 0); /* black */
258 box-shadow: 0 0 0 1px rgb(179 107 0) inset !important;
259}
260
261/* Utility for isolating component styles */
262.browser-component-root {
263 /* Reset any inherited styles from the website */
264 all: initial;
265 /* Apply our design system */
266 font-family:
267 Fira Sans,
268 system-ui,
269 -apple-system,
270 sans-serif;
271 box-sizing: border-box;
272 * {
273 box-sizing: border-box;
274 }
275}
276
277/* Global body styles */
278body {
279 background-color: var(--dynamic-bg);
280 color: var(--dynamic-text);
281 transition:
282 background-color 200ms ease,
283 color 200ms ease;
284}