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