css_old.pl
Copying Source is Forbidden
1802 lines of code
1
#!/usr/bin/perl
2
3
use strict;
4
use warnings;
5
use CGI qw(:standard);
6
use CGI::Carp qw(fatalsToBrowser);
7
use CSS::Sass;
8
9
use lib "/var/www/html/Pm";
10
11
use Bc_chef qw(cookie_get);
12
use Bc_misc qw(get_param referrer clear_spaces hexDigit2Dec);
13
use Bc_sql qw(get_constant
14
sql_execute
15
user_exists
16
$QUERY_PAGE
17
$QUERY_UID
18
$LOGGEDIN
19
theme_exists
20
get_theme_data
21
get_default_theme
22
23
$DB
24
);
25
26
use User qw(
27
get_user_stats
28
isUserAdmin
29
get_user_theme_data
30
$USER_DATA
31
);
32
33
# although, strictly speaking, CSS is not exactly HTML,
34
# this script, in the interest of uniformity, will
35
# utilize the HTTP response header that is used
36
# throughout this project
37
use Html qw(pre_html_header);
38
my %headerCfg;
39
$headerCfg{type} = "text/css";
40
$headerCfg{status} = "200 Ok";
41
42
43
#my $DEBUG = get_param("debug");
44
my $DEBUG = 0;
45
46
my $debugger_in_use = get_param("debugger");
47
my $BORDERS = 0;
48
my $EOL = "\n";
49
my $GIANT_FONT_SIZE = "24pt";
50
my $LARGE_FONT_SIZE = "16pt";
51
my $NORMAL_FONT_SIZE = "12pt";
52
my $SMALL_FONT_SIZE = "10pt";
53
my $TINY_FONT_SIZE = "8pt";
54
my $TITLE_FONT = "Book Antiqua";
55
my $LINK_FONT = "Book Antiqua";
56
my $NORMAL_FONT = "Times New Roman";
57
my $WELCOME_FONT = "Trebuchet MS";
58
my $NOTICE_WIDTH = "75%";
59
60
if ($debugger_in_use) {
61
$TITLE_FONT = "Courier";
62
$NORMAL_FONT = "Courier";
63
$LINK_FONT = "Courier";
64
$GIANT_FONT_SIZE = "26pt";
65
$LARGE_FONT_SIZE = "20pt";
66
$NORMAL_FONT_SIZE = "14pt";
67
}
68
69
my $forcedTheme = get_param("t");
70
my $nobg_img = get_param("nobg_img");
71
72
my $OUTPUT = "";
73
my $fadeTime = 3300;
74
my $fastFadeTime = $fadeTime / 3;
75
$fadeTime .= "ms";
76
$fastFadeTime .= "ms";
77
my $gender = 0;
78
my $theme = get_default_theme();
79
80
my %ustats = %$USER_DATA;
81
82
if ($LOGGEDIN) {
83
$gender = $ustats{gender};
84
if (theme_exists($ustats{TID})) { $theme = $ustats{TID}; }
85
}
86
87
if ($forcedTheme) { $theme = $forcedTheme; }
88
89
my $valid = theme_exists($theme);
90
91
my %themedata;
92
if (ref $valid ne "HASH") {
93
# so, instead of just breaking the CSS here, let's clean it up by selecting the "white" theme from the DB
94
# if THAT fails, which it shouldn't ever fail, but if it does, then display this error.
95
print pre_html_header({ type => "text/plain"});
96
print "($theme)";
97
exit 1;
98
99
my $sql = "select * from themes where ID=" . $DB->quote($theme);
100
my $results = sql_execute($sql, "css.pl, 2nd execute");
101
if (ref $results eq "HASH") {
102
$theme = $results->{ID};
103
$valid = $results;
104
%themedata = %$results;
105
} else {
106
$headerCfg{status} = "500 Internal Server Error: " . DBI->errstr;
107
$headerCfg{type} = "text/plain";
108
$OUTPUT .= "referrer: " . referrer() . "\n";
109
$OUTPUT .= "error retrieving theme data:\n";
110
$OUTPUT .= " \$results = $results\n";
111
$OUTPUT .= " \$valid = $valid\n";
112
$OUTPUT .= " \$theme = $theme\n";
113
$OUTPUT .= " \$DB = $DB\n\n";
114
115
if (ref $results eq "ARRAY") {
116
foreach my $elem (@$results) {
117
$OUTPUT .= $elem . "\n";
118
}
119
}
120
121
print $OUTPUT;
122
123
exit 1;
124
}
125
} else {
126
%themedata = %$valid;
127
}
128
129
# ID
130
# connect_TITLE_SUBTITLE
131
# connect_TITLE_SUBTITLE_SHADOWS
132
# name
133
# premium
134
my $body_bg = "#" . $themedata{bg_clr};
135
my $body_clr_dark = "#" . $themedata{body_clr_dark};
136
my $body_clr = "#" . $themedata{body_clr};
137
my $gradient_light = "#" . $themedata{gradient_light};
138
my $gradient_dark = "#" . $themedata{gradient_dark};
139
my $link_clr = "#" . $themedata{link_clr};
140
my $title_clr = "#" . $themedata{title_clr};
141
my $subtitle_clr = "#" . $themedata{subtitle_clr};
142
my $select_bg = "#" . $themedata{select_bg};
143
my $select_clr = "#" . $themedata{select_clr};
144
my $input_bg = "#" . $themedata{input_bg};
145
my $input_clr = "#" . $themedata{input_clr};
146
my $bg_img = $themedata{bg_image};
147
my $bold_clr = "#" . $themedata{bold_clr};
148
my $borders_clr = "#" . $themedata{borders_clr};
149
my $button_bg = "#" . $themedata{button_bg};
150
my $button_clr = "#" . $themedata{button_clr};
151
my $title_shadow_clr = "#" . $themedata{title_shadow_clr};
152
my $subtitle_shadow_clr = "#" . $themedata{subtitle_shadow_clr};
153
my $input_box_shadow_clr = "#" . $themedata{input_box_shadow_clr};
154
my $input_text_shadow_clr = "#" . $themedata{input_text_shadow_clr};
155
my $bold_shadow_clr = "#" . $themedata{bold_shadow_clr};
156
my $italic_shadow_clr = "#" . $themedata{italic_shadow_clr};
157
158
if ($DEBUG) {
159
$OUTPUT .= "/*\n";
160
$OUTPUT .= " referrer: $ENV{HTTP_REFERER}\n\n";
161
if ($LOGGEDIN) {
162
$OUTPUT .= " user info\n";
163
$OUTPUT .= " id = $LOGGEDIN (nickname: $ustats{nickname})\n";
164
$OUTPUT .= " exists: ";
165
if (user_exists($LOGGEDIN)) { $OUTPUT .= "yes"; } else { $OUTPUT .= "no"; }
166
$OUTPUT .= "\n";
167
my $dispgender = "boy";
168
if ($gender eq 2) { $dispgender = "girl"; }
169
$OUTPUT .= " gender = $dispgender\n";
170
$OUTPUT .= " user theme: $ustats{TID} ("; if (not $valid) { $OUTPUT .= "in"; } else { $theme = $ustats{TID}; }
171
$OUTPUT .= "valid)\n";
172
} else {
173
$OUTPUT .= " no user is currently logged in\n";
174
}
175
$OUTPUT .= " forced theme = ";
176
177
if ($forcedTheme) { $OUTPUT .= "yes ($forcedTheme)"; } else { $OUTPUT .= "no"; $forcedTheme = 0; }
178
$OUTPUT .= "\n";
179
180
if ($forcedTheme and theme_exists($forcedTheme)) {
181
$OUTPUT .= ", TID $forcedTheme is valid";
182
} else {
183
$OUTPUT .= " using ";
184
if ($LOGGEDIN) {
185
$OUTPUT .= "member selected";
186
} else {
187
$OUTPUT .= "\"guest\"";
188
}
189
$OUTPUT .= " theme $theme";
190
}
191
192
$OUTPUT .= "\n\n Theme $theme Data\n";
193
if (keys %themedata) {
194
foreach my $key (sort keys %themedata) {
195
if ($themedata{$key}) {
196
$OUTPUT .= " $key => $themedata{$key}\n";
197
} else {
198
if ($key) {
199
my $errMsg = $key;
200
my @err = split(";", $errMsg);
201
$err[0] =~ s/-//;
202
$OUTPUT .= " ***ERROR*** $err[0]: $err[1]\n";
203
} else {
204
$OUTPUT .= " some other error in theme data!\n";
205
}
206
}
207
}
208
} else {
209
my $numKeys = keys %themedata;
210
$OUTPUT .= " an uncaptured error occured whilst reading theme data, I presume?\n";
211
$OUTPUT .= " possibles?\n";
212
$OUTPUT .= " - \$! = \"$!\"\n";
213
$OUTPUT .= " - number of keys: $numKeys\n";
214
$OUTPUT .= " - \$valid = $valid\n";
215
$OUTPUT .= "*/\n";
216
217
print $OUTPUT;
218
exit 1;
219
}
220
221
$OUTPUT .= "*/\n";
222
}
223
224
####################################################################
225
####################################################################
226
####################################################################
227
####################################################################
228
#
229
# CSS output
230
#
231
####################################################################
232
####################################################################
233
####################################################################
234
####################################################################
235
236
if ($DEBUG) {
237
$OUTPUT .= "\n/*///////////////////////////////////////////////////////////////////*/\n";
238
$OUTPUT .= "/* SASSyness */\n\n";
239
}
240
241
$OUTPUT .= <<END;
242
:root {
243
--body_bg: $body_bg;
244
--body_clr_dark: $body_clr_dark;
245
--body_clr: $body_clr;
246
--gradient_light: $gradient_light;
247
--gradient_dark: $gradient_dark;
248
--link_clr: $link_clr;
249
--title_clr: $title_clr;
250
--subtitle_clr: $subtitle_clr;
251
--select_bg: $select_bg;
252
--select_clr: $select_clr;
253
--input_bg: $input_bg;
254
--input_clr: $input_clr;
255
--bold_clr: $bold_clr;
256
--borders_clr: $borders_clr;
257
--button_bg: $button_bg;
258
--button_clr: $button_clr;
259
--title_shadow_clr: $title_shadow_clr;
260
--subtitle_shadow_clr: $subtitle_shadow_clr;
261
--input_box_shadow_clr: $input_box_shadow_clr;
262
--input_text_shadow_clr: $input_text_shadow_clr;
263
--bold_shadow_clr: $bold_shadow_clr;
264
--italic_shadow_clr: $italic_shadow_clr;
265
--giant_font_size: $GIANT_FONT_SIZE;
266
--large_font_size: $LARGE_FONT_SIZE;
267
--normal_font_size: $NORMAL_FONT_SIZE;
268
--small_font_size: $SMALL_FONT_SIZE;
269
--tiny_font_size: $TINY_FONT_SIZE;
270
--title_font: $TITLE_FONT;
271
--link_font: $LINK_FONT;
272
--normal_font: $NORMAL_FONT;
273
--welcome_font: $WELCOME_FONT;
274
--notice_width: $NOTICE_WIDTH;
275
--fade_time: $fadeTime;
276
--fast_fade_time: $fastFadeTime;
277
}
278
279
END
280
281
if ($DEBUG) {
282
$OUTPUT .= "/*///////////////////////////////////////////////////////////////////*/\n";
283
$OUTPUT .= "/* HTML Tags */\n\n";
284
}
285
286
if ($bg_img !~ /none/i and not $nobg_img) {
287
$OUTPUT .= <<END;
288
.dynamic_blend {
289
mix-blend-mode: luminosity difference;
290
}
291
END
292
}
293
294
$OUTPUT .= <<END;
295
296
\@mixin centered(\$h: center, \$v: center) {
297
display: grid;
298
justify-content: \$h;
299
align-items: \$v;
300
min-width: 100%;
301
min-height: 100%;
302
}
303
304
.centered {
305
\@include centered;
306
}
307
308
*, *::before, *::after {
309
margin: 0;
310
padding: 0;
311
box-sizing: inherit;
312
}
313
314
a {
315
color: var(--link_clr);
316
font-family: var(--link_font);
317
font-weight: bold;
318
opacity: 1.0;
319
position: relative;
320
text-decoration: none;
321
text-shadow: 0px 1px 1px var(--bold_shadow_clr), 1px 1px 1px var(--bold_shadow_clr);
322
white-space: nowrap;
323
transform: scale(1);
324
}
325
326
a:hover {
327
}
328
329
a:visited {
330
color: var(--link_clr);
331
}
332
333
b {
334
color: var(--bold_clr);
335
font-weight: bold;
336
text-shadow: 0px 1px 1px var(--bold_shadow_clr), 1px 1px 1px var(--bold_shadow_clr);
337
}
338
339
big {
340
font-size: var(--giant_font_size);
341
font-weight: bold;
342
}
343
344
body {
345
background-color: var(--body_bg);
346
END
347
348
if ($bg_img !~ /none/i and not $nobg_img) {
349
$OUTPUT .= " background-attachment: fixed;\n";
350
$OUTPUT .= " background-image: url(\"img.pl?s=f&i=$bg_img\");\n";
351
if ($bg_img =~ /wallpaper/) {
352
$OUTPUT .= " background-repeat: no-repeat;\n";
353
$OUTPUT .= " background-size: 100% 100%;\n";
354
}
355
} else {
356
$OUTPUT .= " background-image: none;\n";
357
}
358
359
$OUTPUT .= <<END;
360
color: var(--body_clr);
361
font-family: var(--normal_font);
362
font-size: var(--normal_font_size);
363
font-weight: normal;
364
}
365
366
button {
367
background-color: var(--button_bg);
368
border-color: var(--borders_clr);
369
border-style: outset;
370
border-width: 2px;
371
border-radius: 5px;
372
box-shadow: 3px 3px 3px var(--input_box_shadow_clr);
373
color: var(--button_clr);
374
font-family: var(--title_font);
375
font-weight: bold;
376
margin: 0 5px 5px 0;
377
white-space: nowrap;
378
transition: all 123ms;
379
}
380
381
button:hover {
382
transform: scale(1.1);
383
}
384
385
div {
386
END
387
388
if ($BORDERS) { $OUTPUT .= " border: 1px solid var(--borders_clr);\n"; }
389
390
$OUTPUT .= <<END;
391
font-weight: normal;
392
}
393
394
button:disabled {
395
color: var(--gradient_dark);
396
}
397
398
fieldset {
399
background-color: var(--gradient_light);
400
border: 2px ridge var(--borders_clr);
401
border-radius: 8px;
402
font-weight: normal;
403
padding: 3px;
404
}
405
406
h1, h2, h3, h4, h5, h6 {
407
color: inherit;
408
display: inline;
409
font-family: inherit;
410
font-size: inherit;
411
font-weight: inherit;
412
height: inherit;
413
margin: inherit;
414
padding: inherit;
415
text-align: inherit;
416
text-decoration: inherit;
417
width: inherit;
418
}
419
420
hr {
421
border: 0px;
422
height: 1px;
423
background-image: -webkit-linear-gradient(left, var(--borders_clr), var(--gradient_dark), var(--borders_clr));
424
background-image: -moz-linear-gradient(left, var(--borders_clr), var(--gradient_dark), var(--borders_clr));
425
background-image: -ms-linear-gradient(left, var(--borders_clr), var(--gradient_dark), var(--borders_clr));
426
background-image: -o-linear-gradient(left, var(--borders_clr), var(--gradient_dark), var(--borders_clr));
427
}
428
429
html {
430
box-sizing: border-box;
431
min-height: 100vh;
432
min-width: 100vh;
433
}
434
435
i {
436
font-weight: normal;
437
text-shadow: 0px 1px 1px var(--italic_shadow_clr), 1px 1px 1px var(--italic_shadow_clr);
438
}
439
440
iframe {
441
background-color: var(--gradient_light);
442
border: 2px ridge var(--borders_clr);
443
box-shadow: 3px 3px 3px var(--input_box_shadow_clr);
444
}
445
446
img {
447
END
448
449
if ($BORDERS)
450
{ $OUTPUT .= " border: 1px solid var(--borders_clr);\n"; } else
451
{ $OUTPUT .= " border: 0px;\n"; }
452
453
$OUTPUT .= <<END;
454
padding: 1px;
455
vertical-align: middle;
456
}
457
458
input {
459
background: var(--select_bg);
460
border-color: var(--borders_clr);
461
border-style: outset;
462
border-width: 2px;
463
border-radius: 5px;
464
box-shadow: 3px 3px 3px var(--input_box_shadow_clr);
465
color: var(--input_clr);
466
font-family: var(--title_font);
467
font-weight: bold;
468
margin: 0 5px 5px 0;
469
padding: 4px 4px 1px 4px;
470
text-shadow: 1px 1px 0px var(--input_text_shadow_clr);
471
transition: all 123ms;
472
}
473
474
input:hover {
475
filter: brightness(105%);
476
transform: scale(1.1);
477
}
478
479
input:disabled {
480
background-color: var(--gradient_dark);
481
border-color: var(--gradient_light);
482
color: var(--body_clr);
483
font-weight: normal;
484
text-align: center;
485
text-shadow: 1px 1px 0px var(--input_box_shadow_clr);
486
}
487
488
input[type="button"] {
489
background-color: var(--button_bg);
490
border-color: var(--borders_clr);
491
border-style: outset;
492
border-width: 2px;
493
border-radius: 5px;
494
color: var(--button_clr);
495
padding: 1px 4px 1px 4px;
496
text-shadow: none;
497
}
498
499
input[type="checkbox"] {
500
border-radius: 50%;
501
vertical-align: middle;
502
cursor: pointer;
503
box-shadow: 0px 0px 0px;
504
}
505
506
input[type="color"] {
507
border: 1px outset var(--borders_clr);
508
text-align: center;
509
background-color: white;
510
cursor: default;
511
height: 24px;
512
max-width: 24px;
513
}
514
515
input[type="radio"] {
516
border-style: outset;
517
box-shadow: none;
518
width: 15px;
519
height: 15px;
520
}
521
522
input[type="reset"] {
523
background-color: #888800;
524
background-image: none;
525
border-color: #FFFF00;
526
border-style: outset;
527
border-width: 2px;
528
color: #FFFFFF;
529
text-shadow: 1px 1px 0px #444400;
530
padding: 1px 4px 1px 4px;
531
}
532
533
input[type="submit"] {
534
border-color: var(--borders_clr);
535
border-style: outset;
536
border-width: 2px;
537
text-shadow: 1px 1px 0px var(--input_text_shadow_clr);
538
}
539
540
input::-webkit-input-placeholder {
541
color: var(--bold_shadow_clr);
542
font-family: arial;
543
font-size: var(--small_font_size);
544
font-weight: normal;
545
text-align: center;
546
text-shadow: 1px 1px 0px var(--input_text_shadow_clr);
547
}
548
549
label {
550
color: var(--link_clr);
551
font-weight: bold;
552
text-shadow: 0px 1px 1px var(--bold_shadow_clr), 1px 1px 1px var(--bold_shadow_clr);
553
}
554
555
legend {
556
background-image: -webkit-linear-gradient(left, var(--gradient_light), var(--gradient_dark), var(--gradient_light));
557
background-image: -moz-linear-gradient(left, var(--gradient_light), var(--gradient_dark), var(--gradient_light));
558
background-image: -ms-linear-gradient(left, var(--gradient_light), var(--gradient_dark), var(--gradient_light));
559
background-image: -o-linear-gradient(left, var(--gradient_light), var(--gradient_dark), var(--gradient_light));
560
border: 2px ridge var(--borders_clr);
561
border-radius: 4px;
562
color: var(--title_clr);
563
font-family: var(--title_font);
564
font-weight: bold;
565
padding: 5px 8px 3px 5px;
566
}
567
568
li {
569
padding: 2px;
570
}
571
572
ol {
573
padding: 0 0 0 20px;
574
list-style-type: none;
575
list-style-position: inside;
576
}
577
578
pre {
579
background-color: var(--gradient_light);
580
border: 1px ridge var(--borders_clr);
581
box-shadow: 3px 3px 3px var(--input_box_shadow_clr);
582
color: var(--body_clr);
583
line-height: 13px;
584
padding: 4px 4px 4px 6px;
585
}
586
587
select {
588
background-color: var(--select_bg);
589
color: var(--select_clr);
590
border: 2px outset var(--borders_clr);
591
border-radius: 10px;
592
box-shadow: 3px 3px 3px var(--input_box_shadow_clr);
593
font-weight: bold;
594
padding: 1px 1px 0px 1px;
595
text-indent: 0.01px;
596
margin: 0 5px 5px 0;
597
transition: all 123ms;
598
}
599
600
select:hover {
601
filter: brightness(105%);
602
transform: scale(1.1);
603
}
604
605
select.mini {
606
font-size: var(--tiny_font_size);
607
height: 18px;
608
}
609
610
select.mini option {
611
font-size: var(--tiny_font_size);
612
}
613
614
select:disabled {
615
border-color: var(--borders_clr);
616
color: var(--gradient_dark);
617
font-weight: normal;
618
}
619
620
small, sup {
621
font-size: var(--small_font_size);
622
font-weight: normal;
623
text-shadow: var(--bold_shadow_clr);
624
}
625
626
END
627
628
if ($BORDERS) {
629
$OUTPUT .= "table tr td {\n";
630
$OUTPUT .= " border: 1px solid var(--borders_clr);\n";
631
$OUTPUT .= "}\n";
632
}
633
634
$OUTPUT .= <<END;
635
636
textarea {
637
-webkit-appearance: none;
638
-moz-appearance: none;
639
appearance: none;
640
border: 1px inset var(--borders_clr);
641
padding: 3px;
642
resize: none;
643
text-align: left;
644
background: var(--select_bg);
645
box-shadow: 3px 3px 3px var(--input_box_shadow_clr);
646
color: var(--input_clr);
647
font-family: var(--link_font);
648
font-weight: bold;
649
}
650
651
ul {
652
font-weight: normal;
653
margin: 5px;
654
padding: 0 0 0 20px;
655
list-style-type: none;
656
list-style-position: inside;
657
}
658
659
END
660
661
if ($DEBUG) {
662
$OUTPUT .= "\n/*///////////////////////////////////////////////////////////////////*/\n";
663
$OUTPUT .= "/* 'named' HTML tags */\n";
664
}
665
666
$OUTPUT .= <<END;
667
a.anchor {
668
display: block;
669
position: relative;
670
top: -50px;
671
visibility: hidden;
672
}
673
674
a.small {
675
font-size: var(--small_font_size);
676
}
677
678
a.error {
679
background-color: #FF0000;
680
border: 2px outset #000000;
681
box-shadow: 3px 3px 3px var(--bold_shadow_clr);
682
color: #FFFF00;
683
padding: 3px 5px;
684
}
685
686
a.notice {
687
background-color: #FFFF00;
688
border: 2px outset #000000;
689
box-shadow: 3px 3px 3px var(--bold_shadow_clr);
690
color: #000000;
691
padding: 3px 5px;
692
}
693
694
big.notsobig {
695
font-size: var(--large_font_size);
696
}
697
698
br.little {
699
line-height: 0;
700
}
701
702
button.danger:hover {
703
background-color: #CC0000;
704
}
705
706
fieldset.error {
707
background-color: #AA0000;
708
background-image: none;
709
border-radius: 8px;
710
border: 3px ridge #FFFF00;
711
color: #FFFFFF;
712
font-weight: bold;
713
box-shadow: 3px 3px 3px var(--input_box_shadow_clr);
714
text-shadow: 1px 1px 0px #000000;
715
padding: 5px;
716
}
717
718
fieldset.error label {
719
color: #FFFFFF;
720
}
721
722
fieldset.error fieldset {
723
color: #000000;
724
}
725
726
fieldset.error .notice {
727
box-shadow: 2px 2px #000000;
728
}
729
730
fieldset.notice {
731
background: #AAAA00;
732
background-image: none;
733
border: 3px outset #000000;
734
color: #FFFFFF;
735
box-shadow: 3px 3px 3px var(--input_box_shadow_clr);
736
text-shadow: 1px 1px 0px #000000;
737
}
738
739
font.LE { /* Login Error Msg */
740
background: red;
741
border: #FFFF00 1px ridge;
742
box-shadow: 3px 3px 3px var(--input_box_shadow_clr);
743
font-size: var(--small_font_size);
744
font-family: var(--title_font);
745
font-weight: bold;
746
padding: 2px;
747
}
748
749
hr.error {
750
border: 0px;
751
height: 1px;
752
background-image: -webkit-linear-gradient(left, #BB0000, #FF0000, #BB0000);
753
background-image: -moz-linear-gradient(left, #BB0000, #FF0000, #BB0000);
754
background-image: -ms-linear-gradient(left, #BB0000, #FF0000, #BB0000);
755
background-image: -o-linear-gradient(left, #BB0000, #FF0000, #BB0000);
756
}
757
758
hr.half {
759
width: 50%;
760
border: 0px;
761
height: 1px;
762
background-image: -webkit-linear-gradient(left, var(--gradient_dark), var(--borders_clr), var(--gradient_dark));
763
background-image: -moz-linear-gradient(left, var(--gradient_dark), var(--borders_clr), var(--gradient_dark));
764
background-image: -ms-linear-gradient(left, var(--gradient_dark), var(--borders_clr), var(--gradient_dark));
765
background-image: -o-linear-gradient(left, var(--gradient_dark), var(--borders_clr), var(--gradient_dark));
766
}
767
768
hr.large {
769
width: 70%;
770
border: 0px;
771
height: 1px;
772
background-image: -webkit-linear-gradient(left, var(--gradient_dark), var(--borders_clr), var(--gradient_dark));
773
background-image: -moz-linear-gradient(left, var(--gradient_dark), var(--borders_clr), var(--gradient_dark));
774
background-image: -ms-linear-gradient(left, var(--gradient_dark), var(--borders_clr), var(--gradient_dark));
775
background-image: -o-linear-gradient(left, var(--gradient_dark), var(--borders_clr), var(--gradient_dark));
776
}
777
778
hr.notice {
779
border: 0px;
780
height: 1px;
781
background-image: -webkit-linear-gradient(left, #BBBB00, #FFFF00, #BBBB00);
782
background-image: -moz-linear-gradient(left, #BBBB00, #FFFF00, #BBBB00);
783
background-image: -ms-linear-gradient(left, #BBBB00, #FFFF00, #BBBB00);
784
background-image: -o-linear-gradient(left, #BBBB00, #FFFF00, #BBBB00);
785
}
786
787
hr.small {
788
width: 40%;
789
border: 0px;
790
height: 1px;
791
background-image: -webkit-linear-gradient(left, var(--gradient_dark), var(--borders_clr), var(--gradient_dark));
792
background-image: -moz-linear-gradient(left, var(--gradient_dark), var(--borders_clr), var(--gradient_dark));
793
background-image: -ms-linear-gradient(left, var(--gradient_dark), var(--borders_clr), var(--gradient_dark));
794
background-image: -o-linear-gradient(left, var(--gradient_dark), var(--borders_clr), var(--gradient_dark));
795
}
796
797
hr.tiny {
798
width: 25%;
799
border: 0px;
800
height: 1px;
801
background-image: -webkit-linear-gradient(left, var(--gradient_dark), var(--borders_clr), var(--gradient_dark));
802
background-image: -moz-linear-gradient(left, var(--gradient_dark), var(--borders_clr), var(--gradient_dark));
803
background-image: -ms-linear-gradient(left, var(--gradient_dark), var(--borders_clr), var(--gradient_dark));
804
background-image: -o-linear-gradient(left, var(--gradient_dark), var(--borders_clr), var(--gradient_dark));
805
}
806
807
img.logo {
808
border: 3px ridge var(--borders_clr);
809
box-shadow: 3px 3px 3px var(--input_box_shadow_clr);
810
}
811
812
img.navbar {
813
width: 32px;
814
}
815
816
img.selected {
817
border: 1px solid var(--borders_clr);
818
padding: 1px;
819
}
820
821
input.color {
822
width: 30px;
823
}
824
825
label.small {
826
font-size: var(--small_font_size);
827
}
828
829
legend.error {
830
background-color: #AA0000;
831
background-image: none;
832
border-radius: 8px;
833
border: 1px solid #FFFF00;
834
box-shadow: 3px 3px 3px var(--input_box_shadow_clr);
835
color: #FFFF00;
836
font-weight: bold;
837
text-shadow: 1px 1px 0px #000000;
838
}
839
840
legend.notice {
841
background: #AAAA00;
842
background-image: none;
843
border: 1px outset #000000;
844
box-shadow: 3px 3px 3px var(--input_box_shadow_clr);
845
color: #FFFF00;
846
text-shadow: 1px 1px 0px #000000;
847
}
848
849
legend.subnavbar_dark {
850
background-image: none;
851
border: 2px inset var(--borders_clr);
852
color: var(--body_clr_dark);
853
padding: 5px 5px 5px 5px;
854
box-shadow: none;
855
}
856
857
ol.number {
858
list-style: decimal inside;
859
}
860
861
select.multi {
862
border: 1px inset var(--borders_clr);
863
color: var(--body_clr);
864
width: 100px;
865
}
866
867
ul.dot {
868
list-style: disc inside;
869
}
870
871
ul.roman {
872
list-style: square inside;
873
}
874
875
END
876
877
if ($DEBUG) {
878
$OUTPUT .= "\n/*///////////////////////////////////////////////////////////////////*/\n";
879
$OUTPUT .= "/* named classes */\n";
880
}
881
882
$OUTPUT .= <<END;
883
.big_green_button {
884
border-color: #00FF00;
885
border-width: 3px;
886
border-style: outset;
887
border-radius: 5px;
888
background: #00AA00;
889
color: #DDDDDD;
890
font-size: var(--giant_font_size);
891
padding: 2px 8px 2px 8px;
892
width: 50%;
893
}
894
895
.big_button {
896
border-width: 3px;
897
border-style: outset;
898
border-radius: 10px;
899
font-size: var(--giant_font_size);
900
padding: 2px 8px 2px 8px;
901
}
902
903
.block {
904
display: block;
905
}
906
907
.blue_button {
908
background-color: #0000CC;
909
background-image: none;
910
border-color: #0000FF;
911
border-style: outset;
912
border-width: 2px;
913
border-radius: 5px;
914
box-shadow: 3px 3px 3px var(--input_box_shadow_clr);
915
color: #FFFFFF;
916
font-family: var(--title_font);
917
font-weight: bold;
918
padding: 1px 5px 1px 5px;
919
text-shadow: 1px 1px 0px #0000AA;
920
}
921
922
.blue_button:hover {
923
background-color: #0000FF;
924
}
925
926
.bordered {
927
text-color: var(--borders_clr);
928
border: 2px outset var(--borders_clr);
929
}
930
931
.btn_onechar {
932
padding: 0 5px 0 5px;
933
}
934
935
.vbordered {
936
text-color: var(--borders_clr);
937
border: 2px outset var(--borders_clr);
938
min-height: 10px;
939
}
940
941
.hbordered {
942
text-color: var(--borders_clr);
943
border: 2px outset var(--borders_clr);
944
min-width: 5px;
945
}
946
947
.button {
948
background-color: var(--button_bg);
949
border-color: var(--borders_clr);
950
border-style: outset;
951
border-width: 2px;
952
border-radius: 5px;
953
box-shadow: 3px 3px 3px var(--input_box_shadow_clr);
954
color: var(--button_clr);
955
font-family: var(--title_font);
956
font-weight: bold;
957
padding: 1px 4px 1px 4px;
958
text-shadow: 1px 1px 0px var(--input_text_shadow_clr);
959
}
960
961
.cancel {
962
background-color: #FFFF00;
963
border-color: #FFFF00;
964
border-style: outset;
965
border-width: 2px;
966
border-radius: 5px;
967
box-shadow: 3px 3px 3px var(--input_box_shadow_clr);
968
color: #000000;
969
font-family: var(--normal_font);
970
font-weight: bold;
971
padding: 1px 4px 1px 4px;
972
text-shadow: 1px 1px 0px #888888;
973
}
974
975
.chat_in {
976
color: var(--body_clr);
977
border-radius: 5px;
978
padding: 2px 5px;
979
border: 1px solid var(--borders_clr);
980
background-color: var(--gradient_light);
981
text-align: right;
982
}
983
984
.chat_out {
985
color: var(--body_clr);
986
border-radius: 5px;
987
padding: 2px 5px;
988
background-color: var(--gradient_dark);
989
text-align: right;
990
}
991
992
.clickable {
993
color: var(--link_clr) !important;
994
cursor: pointer;
995
}
996
997
.copyright {
998
font-size: var(--small_font_size) !important;
999
}
1000
1001
.credits {
1002
END
1003
1004
if ($BORDERS) { $OUTPUT .= " border: 1px solid var(--borders_clr);\n"; }
1005
1006
$OUTPUT .= <<END;
1007
height: 330px;
1008
overflow-x: hidden;
1009
overflow-y: hidden;
1010
text-align: center !important;
1011
width: 100%;
1012
}
1013
1014
.danger {
1015
background-color: #AA0000;
1016
border: 2px outset #FF0000;
1017
box-shadow: 3px 3px 3px var(--input_box_shadow_clr);
1018
color: #FFFF00;
1019
padding: 1px 5px 1px 5px;
1020
text-align: center;
1021
text-shadow: 1px 1px 0px #000000;
1022
}
1023
1024
.disabled {
1025
background: #444444;
1026
color: #888888;
1027
}
1028
1029
.error {
1030
white-space: nowrap;
1031
background-color: #AA0000;
1032
border: 2px outset #FF0000;
1033
box-shadow: 3px 3px 3px var(--input_box_shadow_clr);
1034
color: #FFFF00;
1035
text-align: center;
1036
text-shadow: 1px 1px 0px #000000;
1037
}
1038
1039
.error .subnavbar, .error fieldset {
1040
border-color: #FFFF00;
1041
color: #FFFF00 !important;
1042
background-color: #CC4400;
1043
}
1044
1045
.success {
1046
white-space: nowrap;
1047
background-color: #00AA00;
1048
border: 2px outset #00DD00;
1049
box-shadow: 3px 3px 3px var(--input_box_shadow_clr);
1050
color: #FFFF00;
1051
text-align: center;
1052
text-shadow: 1px 1px 0px #000000;
1053
}
1054
1055
.fullsize {
1056
min-height: 100vh;
1057
min-width: 98vw;
1058
padding: 5px;
1059
}
1060
1061
.floating-menu {
1062
END
1063
1064
if ($BORDERS) {
1065
$OUTPUT .= " border: 1px solid var(--borders_clr);\n";
1066
$OUTPUT .= " box-shadow: 3px 3px 3px var(--input_box_shadow_clr);\n";
1067
}
1068
1069
$OUTPUT .= <<END;
1070
position: fixed;
1071
text-align: center;
1072
width: 100%;
1073
z-index: 100;
1074
}
1075
1076
.gradient {
1077
background-image: -webkit-linear-gradient(left, var(--gradient_light), var(--gradient_dark), var(--gradient_light));
1078
background-image: -moz-linear-gradient(left, var(--gradient_light), var(--gradient_dark), var(--gradient_light));
1079
background-image: -ms-linear-gradient(left, var(--gradient_light), var(--gradient_dark), var(--gradient_light));
1080
background-image: -o-linear-gradient(left, var(--gradient_light), var(--gradient_dark), var(--gradient_light));
1081
}
1082
1083
.green {
1084
color: #00CC00;
1085
font-style: italic;
1086
}
1087
1088
.green_button {
1089
background-color: #00BB00;
1090
background-image: none;
1091
border-color: #00FF00;
1092
border-style: outset;
1093
border-width: 2px;
1094
border-radius: 5px;
1095
box-shadow: 3px 3px 3px var(--input_box_shadow_clr);
1096
color: #FFFFFF;
1097
font-family: var(--title_font);
1098
font-weight: bold;
1099
padding: 1px 5px 1px 5px;
1100
text-shadow: 1px 1px 0px #000000;
1101
white-space: nowrap;
1102
}
1103
1104
.green_button:hover {
1105
background-color: #00DD00;
1106
}
1107
1108
.hidden {
1109
opacity: 0;
1110
transform: scale(0);
1111
transition: all var(--fast_fade_time) linear;
1112
}
1113
1114
.visible {
1115
opacity: 1;
1116
transform: scale(1);
1117
transition: all var(--fast_fade_time) linear;
1118
}
1119
1120
.hidden_highlight {
1121
visibility: hidden;
1122
}
1123
1124
.hidden_highlight:hover {
1125
visibility: visible;
1126
}
1127
1128
.highlight:hover {
1129
background-color: var(--gradient_dark);
1130
}
1131
1132
.inline {
1133
display: inline;
1134
}
1135
1136
.as_body_textcolor {
1137
color: var(--body_clr);
1138
}
1139
1140
.navbutton, .navbutton_selected {
1141
background-color: var(--gradient_light);
1142
border: 1px outset var(--borders_clr);
1143
border-radius: 3px;
1144
box-shadow: 3px 3px 3px var(--input_box_shadow_clr);
1145
cursor: default;
1146
margin: 0 4px 4px 0;
1147
padding: 0px 3px 0px 3px;
1148
text-align: center;
1149
transition: all ease-in-out 250ms;
1150
}
1151
1152
.navbutton:hover {
1153
box-shadow: 1px 10px 8px -3px var(--input_box_shadow_clr);
1154
cursor: pointer;
1155
transform: translateY(-3px);
1156
transform: scale(1.1);
1157
}
1158
1159
.navbutton_selected {
1160
background-color: var(--gradient_dark);
1161
cursor: pointer;
1162
transform: translateY(3px);
1163
transform: scale(0.8);
1164
}
1165
1166
.navbutton:hover {
1167
background-color: var(--gradient_dark);
1168
}
1169
1170
.noshadow {
1171
box-shadow: none;
1172
text-shadow: none;
1173
}
1174
1175
.nobold {
1176
font-weight: normal;
1177
}
1178
1179
.notice {
1180
background-color: #666600;
1181
border: 2px outset #FFFF00;
1182
border-radius: 5px;
1183
box-shadow: 3px 3px 3px var(--input_box_shadow_clr);
1184
color: #FFFF00;
1185
padding: 3px 4px 1px 4px;
1186
text-align: center;
1187
text-shadow: 1px 1px 0px #000000;
1188
}
1189
1190
.notice .subtitle {
1191
color: #ffffff;
1192
}
1193
1194
.none {
1195
color: var(--body_clr);
1196
font-family: var(--normal_font);
1197
font-size: var(--normal_font_size);
1198
font-style: normal;
1199
font-weight: normal;
1200
text-decoration: none;
1201
text-shadow: none;
1202
}
1203
1204
.nowrap {
1205
white-space: nowrap;
1206
}
1207
1208
.paypal_btn {
1209
background: none;
1210
border: 0px;
1211
box-shadow: none;
1212
padding: 1px 4px 1px 4px;
1213
}
1214
1215
.pointed {
1216
cursor: pointer;
1217
}
1218
1219
.red {
1220
color: #FF0000;
1221
font-style: italic;
1222
}
1223
1224
.save_button {
1225
background-color: #00AA00;
1226
background-image: none;
1227
border-color: #00FF00;
1228
border-style: outset;
1229
border-width: 2px;
1230
box-shadow: 3px 3px 3px var(--input_box_shadow_clr);
1231
color: #FFFFFF;
1232
font-family: var(--title_font);
1233
font-weight: bold;
1234
padding: 1px 20px 1px 20px;
1235
text-shadow: 1px 1px 0px #000000;
1236
white-space: nowrap;
1237
}
1238
1239
.save_button:hover {
1240
background-color: #00CC00;
1241
}
1242
1243
.scrolling_both {
1244
END
1245
1246
if ($BORDERS) { $OUTPUT .= " border: 1px solid var(--borders_clr);\n"; }
1247
1248
$OUTPUT .= <<END;
1249
clear: both;
1250
float: left;
1251
height: 100%;
1252
overflow-x: scroll;
1253
overflow-y: scroll;
1254
text-align: left !important;
1255
width: 97%;
1256
}
1257
1258
.scrolling_horizontal {
1259
END
1260
1261
if ($BORDERS) { $OUTPUT .= " border: 1px solid var(--borders_clr);\n"; }
1262
1263
$OUTPUT .= <<END;
1264
float: left;
1265
height: 100%;
1266
overflow-x: scroll;
1267
overflow-y: hidden;
1268
width: 100%;
1269
}
1270
1271
.scrolling_vertical {
1272
END
1273
1274
if ($BORDERS) { $OUTPUT .= " border: 1px solid var(--borders_clr);\n"; }
1275
1276
$OUTPUT .= <<END;
1277
float: left;
1278
height: 100%;
1279
overflow-x: hidden;
1280
overflow-y: scroll;
1281
text-align: left;
1282
width: 100%;
1283
}
1284
1285
.scrolling_vertical_centered {
1286
END
1287
1288
if ($BORDERS) { $OUTPUT .= " border: 1px solid var(--borders_clr);\n"; }
1289
1290
$OUTPUT .= <<END;
1291
float: left;
1292
height: 100%;
1293
overflow-x: hidden;
1294
overflow-y: scroll;
1295
text-align: center;
1296
width: 100%;
1297
}
1298
1299
.banned {
1300
background-color: #AA0000;
1301
color: white;
1302
}
1303
1304
.selected {
1305
background-color: #00AA00;
1306
}
1307
1308
.selected_dp {
1309
background-color: var(--gradient_light);
1310
border: 3px inset var(--borders_clr);
1311
box-shadow: 3px 3px 3px var(--input_box_shadow_clr);
1312
}
1313
1314
.spacerx {
1315
max-width: 5px;
1316
min-width: 5px;
1317
width: 5px;
1318
}
1319
1320
.spacerx_big {
1321
max-width: 8px;
1322
min-width: 8px;
1323
width: 5px;
1324
}
1325
1326
.spacerx_large {
1327
max-width: 15px;
1328
min-width: 15px;
1329
width: 15px;
1330
}
1331
1332
.spacerx_larger {
1333
max-width: 20px;
1334
min-width: 20px;
1335
width: 20px;
1336
}
1337
1338
.spacerx_largest {
1339
max-width: 30px;
1340
min-width: 30px;
1341
width: 30px;
1342
}
1343
1344
.spacery {
1345
max-height: 5px;
1346
minx-height: 5px;
1347
height: 5px;
1348
}
1349
1350
.spacery_large {
1351
max-height: 10px;
1352
minx-height: 10px;
1353
height: 10px;
1354
}
1355
1356
.spacery_larger {
1357
max-height: 15px;
1358
minx-height: 15px;
1359
height: 15px;
1360
}
1361
1362
.spacery_largest {
1363
max-height: 25px;
1364
minx-height: 25px;
1365
height: 25px;
1366
}
1367
1368
.spacery_big {
1369
max-height: 100px;
1370
min-height: 100px;
1371
height: 100px;
1372
}
1373
1374
END
1375
1376
my $bigger_space = "275px";
1377
$OUTPUT .= <<END;
1378
.spacery_bigger {
1379
max-height: $bigger_space;
1380
min-height: $bigger_space;
1381
height: $bigger_space;
1382
}
1383
1384
END
1385
1386
my $gargantuan_space = "350px";
1387
$OUTPUT .= <<END;
1388
.spacery_gargantuan {
1389
max-height: $gargantuan_space;
1390
min-height: $gargantuan_space;
1391
height: $gargantuan_space;
1392
}
1393
1394
.spacery_giant {
1395
max-height: 35px;
1396
min-height: 35px;
1397
height: 35px;
1398
}
1399
1400
.spacery_large {
1401
max-height: 15px;
1402
min-height: 15px;
1403
height: 15px;
1404
}
1405
1406
.spacery_tiny {
1407
max-height: 2px;
1408
min-height: 2px;
1409
height: 2px;
1410
}
1411
1412
.special_thanks {
1413
background-color: #004400;
1414
border: 3px ridge #000000;
1415
color: #FFFFFF;
1416
text-align: center;
1417
}
1418
1419
.subdesclink, .subdesclink:visited {
1420
background: var(--body_bg);
1421
border: 1px solid var(--borders_clr);
1422
box-shadow: 3px 3px 3px var(--input_box_shadow_clr);
1423
color: var(--body_clr);
1424
font-weight: normal;
1425
padding: 1px 3px 1px 3px;
1426
}
1427
1428
.subnavbar {
1429
background-color: var(--gradient_light);
1430
border: 1px solid var(--borders_clr);
1431
border-radius: 5px;
1432
box-shadow: 3px 3px 3px var(--input_box_shadow_clr);
1433
color: var(--body_clr_dark);
1434
padding: 5px;
1435
text-align: center;
1436
}
1437
1438
.subnavbar_dark {
1439
background-color: var(--gradient_dark);
1440
border: 1px solid var(--borders_clr);
1441
border-radius: 5px;
1442
box-shadow: 3px 3px 3px var(--input_box_shadow_clr);
1443
color: var(--body_clr_dark);
1444
padding: 3px;
1445
text-align: center;
1446
}
1447
1448
.subnavbar_dark_inset {
1449
background-color: var(--gradient_dark);
1450
border: 2px solid var(--borders_clr);
1451
border-radius: 5px;
1452
box-shadow: none;
1453
color: var(--body_clr_dark);
1454
padding: 3px;
1455
text-align: center;
1456
}
1457
1458
.subnavbar_selected {
1459
background-color: transparent;
1460
border: 2px ridge transparent;
1461
border-radius: 5px;
1462
color: var(--body_clr_dark);
1463
box-shadow: 3px 3px 3px transparent;
1464
padding: 3px;
1465
text-align: center;
1466
}
1467
1468
.subtitle {
1469
color: var(--subtitle_clr);
1470
font-family: var(--title_font);
1471
font-size: var(--large_font_size);
1472
font-style: italic;
1473
font-weight: bold;
1474
text-shadow: 0px 1px 1px var(--subtitle_shadow_clr), 1px 1px 1px var(--subtitle_shadow_clr);
1475
white-space: nowrap;
1476
}
1477
1478
.danger .subtitle {
1479
color: #FFFFFF;
1480
}
1481
1482
.minititle {
1483
color: var(--subtitle_clr);
1484
font-family: var(--title_font);
1485
font-size: var(--normal_font_size);
1486
font-style: italic;
1487
font-weight: bold;
1488
text-shadow: 0px 1px 1px var(--subtitle_shadow_clr), 1px 1px 1px var(--subtitle_shadow_clr);
1489
white-space: nowrap;
1490
}
1491
1492
.trebuchet {
1493
font-size: var(--large_font_size);
1494
font-family: var(--welcome_font);
1495
font-weight: bold;
1496
}
1497
1498
.thin_border {
1499
border: 1px solid var(--borders_clr);
1500
}
1501
1502
.tiny {
1503
font-size: var(--tiny_font_size) !important;
1504
}
1505
1506
.title {
1507
color: var(--title_clr);
1508
font-family: var(--title_font);
1509
font-size: var(--giant_font_size);
1510
font-style: italic;
1511
font-weight: bold;
1512
text-align: center;
1513
text-shadow: 0px 1px 1px var(--title_shadow_clr), 1px 1px 1px var(--title_shadow_clr);
1514
white-space: nowrap;
1515
}
1516
1517
.title_underlined {
1518
color: var(--title_clr);
1519
font-family: var(--title_font);
1520
font-size: var(--giant_font_size);
1521
font-style: italic;
1522
font-weight: bold;
1523
text-decoration: underline;
1524
text-shadow: 0px 1px 1px var(--title_shadow_clr), 1px 1px 1px var(--title_shadow_clr);
1525
white-space: nowrap;
1526
}
1527
1528
// vertical rule (like hr)
1529
.vr {
1530
border: 1px var(--borders_clr) solid;
1531
width: 0;
1532
}
1533
1534
.white {
1535
color: #FFFFFF;
1536
}
1537
1538
.yellow, .yellow_button {
1539
background-color: #888800;
1540
background-image: none;
1541
border-color: #EEEE00;
1542
border-style: outset;
1543
border-width: 2px;
1544
box-shadow: 3px 3px 3px var(--input_box_shadow_clr);
1545
color: #FFFF00;
1546
font-family: var(--title_font);
1547
font-weight: bold;
1548
padding: 1px 5px 1px 5px;
1549
text-shadow: 1px 1px 0px #888800;
1550
}
1551
1552
.yellow_button:hover {
1553
background-color: #AAAA00;
1554
}
1555
1556
END
1557
1558
if ($DEBUG) {
1559
$OUTPUT .= "\n/*///////////////////////////////////////////////////////////////////*/\n";
1560
$OUTPUT .= "/* HTML tags within named classes */\n";
1561
}
1562
1563
1564
$OUTPUT .= <<END;
1565
.danger a {
1566
color: #FFFFFF;
1567
}
1568
1569
.danger b {
1570
color: #ffffff;
1571
}
1572
1573
.error a {
1574
color: #FFFFFF;
1575
text-shadow: 1px 1px 0px #000000;
1576
}
1577
1578
.error b {
1579
color: #FFFFFF;
1580
text-shadow: 1px 1px 0px #000000;
1581
}
1582
1583
.notice a {
1584
color: #FFFFFF;
1585
text-shadow: 1px 1px 0px #000000;
1586
}
1587
1588
.notice b {
1589
color: #FFFFFF;
1590
text-shadow: 1px 1px 0px #000000;
1591
}
1592
1593
END
1594
1595
if ($DEBUG) {
1596
$OUTPUT .= "\n/*///////////////////////////////////////////////////////////////////*/\n";
1597
$OUTPUT .= "/* IDs */\n";
1598
}
1599
1600
$OUTPUT .= <<END;
1601
#cssframe {
1602
border: ridge 3px var(--borders_clr);
1603
color: #FFFFFF;
1604
}
1605
1606
#msgsbox {
1607
background-color: var(--input_bg);
1608
color: var(--input_clr);
1609
}
1610
1611
#picbox {
1612
background-repeat: repeat-x;
1613
/*height: 121px;
1614
width: 984px;*/
1615
margin-left: 20px;
1616
margin-top: 13px;
1617
display: inline;
1618
}
1619
1620
#picbox .content {
1621
line-height: 20px;
1622
margin-top: 0px;
1623
margin-left: 0px;
1624
margin-right: 0px;
1625
display: inline;
1626
position: relative;
1627
}
1628
1629
#picbox .content a {
1630
position: absolute;
1631
bottom: 22px;
1632
right: 8px;
1633
background: blue;
1634
color: #FFFFF;
1635
}
1636
1637
END
1638
1639
if ($DEBUG) {
1640
$OUTPUT .= "\n/*///////////////////////////////////////////////////////////////////*/\n";
1641
$OUTPUT .= "/* Other */\n";
1642
}
1643
1644
#/* do not group the following rules! */
1645
#/* \$body_clr needs to change, but to what colour instead? */
1646
1647
$OUTPUT .= <<END;
1648
*::-webkit-input-placeholder {
1649
color: var(--bold_shadow_clr) !important;
1650
text-shadow: var(--bold_clr) !important;
1651
}
1652
1653
*:-moz-placeholder {
1654
/* FF 4-18 */
1655
color: var(--bold_shadow_clr) !important;
1656
text-shadow: var(--bold_clr) !important;
1657
}
1658
1659
*::-moz-placeholder {
1660
/* FF 19+ */
1661
color: var(--bold_shadow_clr) !important;
1662
text-shadow: var(--bold_clr) !important;
1663
}
1664
1665
*:-ms-input-placeholder {
1666
/* IE 10+ */
1667
color: var(--bold_shadow_clr) !important;
1668
text-shadow: var(--bold_clr) !important;
1669
}
1670
END
1671
1672
if ($DEBUG) {
1673
$OUTPUT .= "\n/*///////////////////////////////////////////////////////////////////*/\n";
1674
$OUTPUT .= "\n/* dropdown menu */\n";
1675
}
1676
1677
$OUTPUT .= <<END;
1678
/* Dropdown Button */
1679
.dropbtn {
1680
background-color: var(--button_bg);
1681
background-image: url(/images/site/menu.png);
1682
background-repeat: no-repeat;
1683
border: 1px outset var(--borders_clr);
1684
color: var(--button_clr);
1685
cursor: pointer;
1686
height: 28px;
1687
padding: 0 4px 0 32px;
1688
min-width: 34px;
1689
}
1690
1691
/* Dropdown button on hover & focus */
1692
.dropbtn:hover, .dropbtn:focus {
1693
background-color: var(--gradient_light);
1694
border: 1px inset var(--borders_clr);
1695
}
1696
1697
/* The container <div> - needed to position the dropdown content */
1698
.dropdown {
1699
position: relative;
1700
display: inline-block;
1701
}
1702
1703
/* Dropdown Content (Hidden by Default) */
1704
.dropdown-content {
1705
background-color: var(--gradient_dark);
1706
border: 1px solid var(--borders_clr);
1707
border-radius: 5px;
1708
END
1709
1710
my $tempclr = $input_box_shadow_clr;
1711
$tempclr =~ s/^\#//;
1712
my ($red1, $red2, $green1, $green2, $blue1, $blue2) = split("", $tempclr);
1713
# convert, for example, $red1 (which equals, say, A), from hex to decimal
1714
1715
my ($red, $green, $blue) = (0, 0, 0);
1716
$red = hexDigit2Dec($red1) + hexDigit2Dec($red2);
1717
1718
# // tempclr = $tempclr (R: $red1$red2, G: $green1$green2, B: $blue1$blue2)
1719
$OUTPUT .= <<END;
1720
box-shadow: 8px 8px 8px rgba($red, $green, $blue, 0.3);
1721
color: var(--button_clr);
1722
left: 8px;
1723
max-height: 370px;
1724
min-width: 140px;
1725
overflow-x: hidden;
1726
overflow-y: hidden;
1727
position: absolute;
1728
top: 38px;
1729
z-index: 999;
1730
opacity: 0.25;
1731
transform: scale(0);
1732
transform-origin: top left;
1733
transition: transform 500ms ease-in-out 100ms, opacity 600ms ease-in-out;
1734
}
1735
1736
/* Links inside the dropdown */
1737
.dropdown-content a {
1738
background-color: var(--gradient_dark);
1739
//border: 1px solid var(--gradient_dark);
1740
border-bottom: 1px solid var(--gradient_dark);
1741
border-top: 1px solid var(--gradient_dark);
1742
color: var(--button_clr);
1743
padding: 2px 3px; //padding: 5px 6px;
1744
text-decoration: none;
1745
display: block;
1746
opacity: 0;
1747
transition: opacity 350ms ease-in-out;
1748
}
1749
1750
.dropdown-content hr {
1751
background-color: var(--gradient_dark);
1752
}
1753
1754
.dropdown-content hr {
1755
cursor: pointer;
1756
}
1757
1758
/* Change color of dropdown links on hover */
1759
.dropdown-content a:hover {
1760
background-color: var(--gradient_light);
1761
//border: 1px solid var(--borders_clr);
1762
border-bottom: 1px solid var(--borders_clr);
1763
border-top: 1px solid var(--borders_clr);
1764
transform: scale(1);
1765
}
1766
1767
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
1768
.show {
1769
opacity: 1;
1770
transform: scale(1);
1771
}
1772
1773
.show a {
1774
opacity: 1;
1775
transition: opacity 350ms ease-in-out 150ms;
1776
}
1777
END
1778
1779
if ($DEBUG) {
1780
$OUTPUT .= "\n/*///////////////////////////////////////////////////////////////////*/\n";
1781
$OUTPUT .= "\n/* image preloads */\n";
1782
}
1783
1784
$OUTPUT .= <<END;
1785
#preload-image-mail { background: url(/images/site/mail.png) no-repeat -9999px -9999px; }
1786
END
1787
1788
if (isUserAdmin($LOGGEDIN)) {
1789
$OUTPUT .= "#preload-image-debug { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }\n";
1790
}
1791
1792
my $sass = CSS::Sass->new;
1793
$OUTPUT = $sass->compile($OUTPUT);
1794
1795
if ($DEBUG) {
1796
print $OUTPUT;
1797
} else {
1798
print pre_html_header(\%headerCfg);
1799
print clear_spaces($OUTPUT);
1800
}
1801
1802
exit 1;