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