tailwind.css RawHistoryFolder

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