1@import 'tailwindcss/base';
2@import 'tailwindcss/components';
3@import 'tailwindcss/utilities';
4@import 'xp.css';
5@import './lib/styles/fonts.css';
6
7/* Local font faces with 30-day cache */
8@font-face {
9 font-family: 'Arial';
10 src: url('/fonts/Arial.TTF') format('truetype');
11 font-display: swap;
12 font-weight: normal;
13 font-style: normal;
14}
15
16@font-face {
17 font-family: 'Arial';
18 src: url('/fonts/Arialbd.TTF') format('truetype');
19 font-display: swap;
20 font-weight: bold;
21 font-style: normal;
22}
23
24@font-face {
25 font-family: 'Arial';
26 src: url('/fonts/Ariali.TTF') format('truetype');
27 font-display: swap;
28 font-weight: normal;
29 font-style: italic;
30}
31
32@font-face {
33 font-family: 'Arial';
34 src: url('/fonts/Arialbi.TTF') format('truetype');
35 font-display: swap;
36 font-weight: bold;
37 font-style: italic;
38}
39
40@font-face {
41 font-family: 'Tahoma';
42 src: url('/fonts/tahoma.ttf') format('truetype');
43 font-display: swap;
44 font-weight: 80;
45 font-style: normal;
46}
47
48@font-face {
49 font-family: 'Tahoma';
50 src: url('/fonts/tahomabd.ttf') format('truetype');
51 font-display: swap;
52 font-weight: 200;
53 font-style: normal;
54}
55
56@font-face {
57 font-family: 'Verdana';
58 src: url('/fonts/Verdana.TTF') format('truetype');
59 font-display: swap;
60 font-weight: normal;
61 font-style: normal;
62}
63
64@font-face {
65 font-family: 'Verdana';
66 src: url('/fonts/Verdanab.TTF') format('truetype');
67 font-display: swap;
68 font-weight: bold;
69 font-style: normal;
70}
71
72@font-face {
73 font-family: 'Verdana';
74 src: url('/fonts/Verdanai.TTF') format('truetype');
75 font-display: swap;
76 font-weight: normal;
77 font-style: italic;
78}
79
80@font-face {
81 font-family: 'Verdana';
82 src: url('/fonts/Verdanaz.TTF') format('truetype');
83 font-display: swap;
84 font-weight: bold;
85 font-style: italic;
86}
87
88@font-face {
89 font-family: 'Comic Sans MS';
90 src: url('/fonts/Comic.TTF') format('truetype');
91 font-display: swap;
92 font-weight: normal;
93 font-style: normal;
94}
95
96@font-face {
97 font-family: 'Comic Sans MS';
98 src: url('/fonts/Comicbd.TTF') format('truetype');
99 font-display: swap;
100 font-weight: bold;
101 font-style: normal;
102}
103
104@font-face {
105 font-family: 'Times New Roman';
106 src: url('/fonts/Times.TTF') format('truetype');
107 font-display: swap;
108 font-weight: normal;
109 font-style: normal;
110}
111
112@font-face {
113 font-family: 'Times New Roman';
114 src: url('/fonts/Timesbd.TTF') format('truetype');
115 font-display: swap;
116 font-weight: bold;
117 font-style: normal;
118}
119
120@font-face {
121 font-family: 'Times New Roman';
122 src: url('/fonts/Timesi.TTF') format('truetype');
123 font-display: swap;
124 font-weight: normal;
125 font-style: italic;
126}
127
128@font-face {
129 font-family: 'Times New Roman';
130 src: url('/fonts/Timesbi.TTF') format('truetype');
131 font-display: swap;
132 font-weight: bold;
133 font-style: italic;
134}
135
136@font-face {
137 font-family: 'Courier New';
138 src: url('/fonts/LiberationMono-Regular.ttf') format('truetype');
139 font-display: swap;
140 font-weight: normal;
141 font-style: normal;
142}
143
144@font-face {
145 font-family: 'Courier New';
146 src: url('/fonts/LiberationMono-Bold.ttf') format('truetype');
147 font-display: swap;
148 font-weight: bold;
149 font-style: normal;
150}
151
152@font-face {
153 font-family: 'Courier New';
154 src: url('/fonts/LiberationMono-Italic.ttf') format('truetype');
155 font-display: swap;
156 font-weight: normal;
157 font-style: italic;
158}
159
160@font-face {
161 font-family: 'Courier New';
162 src: url('/fonts/LiberationMono-BoldItalic.ttf') format('truetype');
163 font-display: swap;
164 font-weight: bold;
165 font-style: italic;
166}
167
168/* ===== RETRO FONT STYLING ===== */
169/* Retro Windows fonts with proper fallbacks */
170.retro-font-pixelated {
171 font-family: "Pixelated MS Sans Serif", "Tahoma", Geneva, sans-serif;
172}
173
174.retro-font-tahoma {
175 font-family: Tahoma, "Pixelated MS Sans Serif", Geneva, sans-serif;
176}
177
178.retro-font-verdana {
179 font-family: Verdana, "Pixelated MS Sans Serif", Geneva, sans-serif;
180}
181
182.retro-font-comicSans {
183 font-family: "Comic Sans MS", "Pixelated MS Sans Serif", cursive, sans-serif;
184}
185
186.retro-font-timesNewRoman {
187 font-family: "Times New Roman", Times, serif;
188}
189
190.retro-font-arial {
191 font-family: Arial, "Pixelated MS Sans Serif", Helvetica, sans-serif;
192}
193
194.retro-font-courierNew {
195 font-family: "Courier New", "Perfect DOS VGA 437 Win", Courier, monospace;
196}
197
198.retro-font-dos {
199 font-family: "Perfect DOS VGA 437 Win", "Courier New", Courier, monospace;
200}
201
202/* ===== GRADIENT TEXT EFFECTS ===== */
203.gradient-text {
204 background-size: 200% 200%;
205 -webkit-background-clip: text;
206 -webkit-text-fill-color: transparent;
207 background-clip: text;
208 animation: gradientShift 3s ease infinite;
209}
210
211.gradient-text-static {
212 /* Remove text-fill-color to allow inline color styles to work */
213 /* Individual spans will have their own colors set inline */
214 letter-spacing: normal;
215 word-spacing: normal;
216}
217
218/* Gradient text container uses flexbox */
219.gradient-text-static {
220 display: inline-flex !important;
221 flex-wrap: wrap !important;
222 align-items: baseline !important;
223}
224
225/* Ensure gradient character spans don't add spacing */
226.gradient-text-static > span {
227 display: inline !important;
228 margin: 0 !important;
229 padding: 0 !important;
230 letter-spacing: 0 !important;
231 line-height: inherit !important;
232 font-size: inherit !important;
233}
234
235/* Ensure gradient character colors from inline styles are respected */
236.gradient-text-static .gradient-char {
237 -webkit-text-fill-color: initial !important;
238}
239
240/* Gradient text in input fields - preserve normal input background */
241input[style*="background-clip: text"] {
242 /* Keep default input background while allowing gradient text */
243}
244
245/* Gradient animation for AOL-style effects */
246@keyframes gradientShift {
247 0% { background-position: 0% 50%; }
248 50% { background-position: 100% 50%; }
249 100% { background-position: 0% 50%; }
250}
251
252/* Specific gradient presets */
253.gradient-rainbow {
254 background: linear-gradient(45deg,
255 #FF0000, #FF8000, #FFFF00, #80FF00, #00FF00, #00FF80,
256 #00FFFF, #0080FF, #0000FF, #8000FF, #FF00FF, #FF0080);
257}
258
259.gradient-fire {
260 background: linear-gradient(45deg, #FF0000, #FF4000, #FF8000, #FFBF00, #FFFF00);
261}
262
263.gradient-ocean {
264 background: linear-gradient(45deg, #000080, #0040FF, #0080FF, #00BFFF, #00FFFF);
265}
266
267.gradient-sunset {
268 background: linear-gradient(45deg, #FF4500, #FF6347, #FFD700, #FFFF00);
269}
270
271.gradient-neon {
272 background: linear-gradient(45deg, #FF00FF, #8000FF, #0080FF, #00FFFF);
273}
274
275.gradient-forest {
276 background: linear-gradient(45deg, #006400, #228B22, #32CD32, #90EE90);
277}
278
279.gradient-royal {
280 background: linear-gradient(45deg, #4B0082, #6A5ACD, #9370DB, #DDA0DD);
281}
282
283/* ===== CHAT MESSAGE FORMATTING ===== */
284.formatted-message {
285 word-break: break-word;
286 line-height: 1.4;
287 max-width: 100%;
288}
289
290.formatted-message strong {
291 font-weight: bold;
292}
293
294.formatted-message em {
295 font-style: italic;
296}
297
298.formatted-message u {
299 text-decoration: underline;
300}
301
302.formatted-message s {
303 text-decoration: line-through;
304}
305
306.formatted-message code {
307 background: #f0f0f0;
308 padding: 1px 3px;
309 border-radius: 2px;
310 font-family: 'Courier New', Courier, monospace;
311 font-size: 0.9em;
312}
313
314/* ===== INPUT STYLING FIXES ===== */
315/* Fix letter spacing issues with gradient text in inputs */
316input[style*="background-clip: text"] {
317 letter-spacing: normal !important;
318 word-spacing: normal !important;
319}
320
321/* Ensure gradient inputs don't have extra padding */
322input.styled-input {
323 letter-spacing: 0;
324 word-spacing: 0;
325}
326
327/* Ensure proper font weights are used */
328.retro-font-tahoma {
329 font-weight: 80;
330}
331
332/* ===== TEXT STYLE SELECTOR STYLING ===== */
333.text-formatting-toolbar {
334 background: #f0f0f0;
335 border: 2px inset #dfdfdf;
336 padding: 4px;
337 margin-bottom: 8px;
338 display: flex;
339 flex-wrap: wrap;
340 gap: 4px;
341 align-items: center;
342}
343
344.formatting-button {
345 width: 24px;
346 height: 24px;
347 border: 1px outset #dfdfdf;
348 background: #f0f0f0;
349 cursor: pointer;
350 display: flex;
351 align-items: center;
352 justify-content: center;
353 font-size: 12px;
354 font-weight: bold;
355 transition: all 0.1s ease;
356}
357
358.formatting-button:hover {
359 background: #e0e0e0;
360}
361
362.formatting-button:active,
363.formatting-button.active {
364 border: 1px inset #dfdfdf;
365 background: #d0d0d0;
366}
367
368.font-selector {
369 padding: 2px 4px;
370 border: 1px inset #dfdfdf;
371 background: white;
372 font-size: 11px;
373 min-width: 80px;
374}
375
376.size-slider {
377 width: 60px;
378}
379
380.color-indicator {
381 width: 16px;
382 height: 16px;
383 border: 1px solid #000;
384 cursor: pointer;
385 display: inline-block;
386}
387
388/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
389@media (prefers-reduced-motion: reduce) {
390 .gradient-text {
391 animation: none;
392 }
393}
394
395/* High contrast mode support */
396@media (prefers-contrast: high) {
397 .gradient-text {
398 -webkit-text-fill-color: unset;
399 background: none;
400 color: inherit;
401 }
402
403 .gradient-text-static {
404 -webkit-text-fill-color: unset;
405 background: none;
406 color: inherit;
407 }
408}
409
410/* ===== RETRO STYLING ENHANCEMENTS ===== */
411.retro-message {
412 font-family: inherit;
413 line-height: 1.3;
414 word-wrap: break-word;
415}
416
417.retro-message.style-bold {
418 font-weight: bold;
419}
420
421.retro-message.style-italic {
422 font-style: italic;
423}
424
425.retro-message.style-underline {
426 text-decoration: underline;
427}
428
429.retro-message.style-strikethrough {
430 text-decoration: line-through;
431}
432
433.retro-message.style-underline.style-strikethrough {
434 text-decoration: underline line-through;
435}
436
437/* ===== PERFORMANCE OPTIMIZATIONS ===== */
438.gradient-text,
439.gradient-text-static {
440 will-change: background-position;
441 contain: layout style paint;
442}
443
444/* Limit gradient text length for performance */
445.gradient-text-long {
446 max-width: 500px;
447 overflow: hidden;
448 text-overflow: ellipsis;
449}
450