css/common.sass
Copying Source is Forbidden
1105 lines of code
1
// mostly just css classes
2
//
3
// #msgsbox
4
//
5
// .as_body_textcolor
6
// .as_button
7
//
8
// .block
9
// .blue-bg,
10
// .blue-panel
11
// .bordered
12
// .bordered-outset
13
// .boxshadow
14
// .button-panel
15
// .caps
16
// .center
17
// .center-auto
18
// .centered
19
// .centered-top
20
// .centered-bottom
21
// .centered-left
22
// .centered-right
23
// .chat_in
24
// .chat_out
25
// .chatwrap
26
// .circular
27
// .clickable
28
// .container
29
// .copyright
30
// .credits
31
//
32
// .danger
33
// .dark-blue-bg,
34
// .description
35
// .dynamic_blend
36
//
37
// .embolden
38
// .enlarge
39
// .error
40
//
41
// .faded_panel
42
// .flexboxed
43
// .floating-menu
44
// .fullsize
45
//
46
// .giant-font-size
47
// .glass
48
// .gradient
49
// .gradient-circle
50
// .green
51
// .green-bg
52
// .green-panel
53
//
54
// .hbordered
55
// .hidden
56
// .hide
57
// .highlight
58
// .hoverborder
59
//
60
// .inheritbg
61
// .inline
62
// .italic
63
//
64
// .large-font-size
65
//
66
// .mailbody
67
// .mailsubject
68
// .mailto
69
// .margins
70
// .margins-auto
71
// .margins-bottom
72
// .margins-bottom-large
73
// .margins-bottom-larger
74
// .margins-bottom-largest
75
// .margins-large
76
// .margins-mini
77
// .margins-none
78
// .margins-left
79
// .margins-left-large
80
// .margins-left-larger
81
// .margins-left-largest
82
// .margins-left-auto
83
// .margins-left-right
84
// .margins-left-right-auto
85
// .margins-left-right-mini
86
// .margins-right
87
// .margins-top
88
// .margins-top-large
89
// .margins-top-larger
90
// .margins-top-largest
91
// .margins-top-small
92
// .margins-top-bottom
93
// .margins-top-bottom-large
94
// .margins-top-bottom-small
95
// .margins-top-bottom-tiny
96
// .margins-top-none
97
// .medium-font-size
98
// .min-content
99
// .minititle
100
// .modal
101
//
102
// .neartiny
103
// .no-transitions
104
// .nobgimg
105
// .noborders
106
// .nodisabled
107
// .normal-panel
108
// .noscroll
109
// .notice
110
// .nohand
111
// .nowrap
112
//
113
// .outlined-none
114
//
115
// .padded
116
// .padded-bottom
117
// .padded-bottom-large
118
// .padded-large
119
// .padded-left
120
// .padded-left-right
121
// .padded-left-right-small
122
// .padded-left-right-tiny
123
// .padded-tiny
124
// .padded-right
125
// .padded-top-bottom
126
// .padded-top-bottom-large
127
// .padded-top-bottom-small
128
// .padded-small
129
// .padding-auto
130
// .padding-none
131
// .photo-modal
132
// .purple
133
// .purple-bg
134
// .purple-panel
135
// .purple-light-panel
136
//
137
// .red-bg
138
// .red-panel
139
// .right-aligned
140
// .rounded
141
// .rounded-large
142
// .rounded-larger
143
// .rounded-largest
144
// .rounded-ends
145
//
146
// .scrollable
147
// .scrollable-auto
148
// .scrollbarred
149
// .scrolling_both
150
// .scrolling_both-auto
151
// .scrolling_vertical
152
// .scrolling_vertical-auto
153
// .scrolling_horizontal
154
// .scrolling_horizontal-auto
155
// .seethrufont
156
// .snakey-link
157
// .small
158
// .special_thanks
159
// .sticky
160
// .subdesclink
161
// .subnavbar
162
// .subnavbar_sunken
163
// .subnavbar_dark
164
// .subtitle
165
// .sunken
166
//
167
// .tall
168
// .title
169
// .text-align-left
170
// .text-align-right
171
// .text-align-center
172
// .translucent
173
// .translucent-red
174
// .translucent-green
175
// .translucent-blue
176
// .translucent-yellow
177
// .translucent-purple
178
// .translucent-cyan
179
// .translucent-gray
180
// .translucent-fadein
181
// .transparent
182
//
183
// .uc
184
//
185
// .vbordered
186
// .vh (min height of 100vh)
187
// .vw (min width of 100vw)
188
//
189
// .wide
190
// .white-panel
191
//
192
// .yellow-bg,
193
// .yellow-panel
194
// .yellow-text
195
//
196
197
.bordered { @include borders($clr: var(--borders-clr)); }
198
.bordered-outset { @include borders(outset); }
199
200
[LOGGEDIN]
201
.chat_in, .chat_out {
202
border-radius: 5px;
203
padding: 0 3px 0 3px;
204
}
205
206
.chat_in {
207
}
208
209
.chat_out {
210
color: var(--body-clr);
211
background-color: var(--gradient-dark);
212
border: 1px solid var(--borders-clr);
213
}
214
215
#msgsbox {
216
//@include sunken;
217
}
218
[/LOGGEDIN]
219
220
.hide {
221
position: relative;
222
223
&::before {
224
content: '';
225
background-color: var(--gradient-light);
226
width: 100%;
227
height: 100%;
228
position: absolute;
229
top: 0;
230
left: 0;
231
bottom: 0;
232
right: 0;
233
opacity: 1;
234
}
235
236
&:hover::before {
237
opacity: 0;
238
}
239
}
240
241
.scrollable, .scrolling_both { @include scrolling(both); }
242
.scrollable-auto, .scrolling_both-auto { @include scrolling(both, auto); }
243
.scrolling_vertical { @include scrolling(vertical); }
244
.scrolling_vertical-auto { @include scrolling(vertical, auto); }
245
.scrolling_horizontal { @include scrolling(horizontal); }
246
.scrolling_horizontal-auto { @include scrolling(horizontal, auto); }
247
248
.enlarge {
249
@include transition;
250
@include mo-lift;
251
}
252
253
.uc {
254
@include uc;
255
}
256
257
.subnavbar {
258
@include panel(gradient-light, var(--bold-clr),
259
var(--normal-font-size), var(--title-font), bold,
260
var(--borders-clr),
261
var(--bold-shadow-clr));
262
263
display: inline-block;
264
padding-top: 0;
265
padding-right: 5px;
266
padding-bottom: 1px;
267
padding-left: 5px;
268
text-align: center;
269
270
&.title, &.subtitle {
271
color: var(--title-clr) !important;
272
}
273
}
274
275
.subnavbar_sunken {
276
@include panel(gradient-light, var(--bold-clr),
277
var(--normal-font-size), var(--title-font), bold,
278
var(--borders-clr),
279
var(--bold-shadow-clr),
280
$borderstyle: inset,
281
$borderwidth: 3px);
282
283
display: inline-block;
284
padding-top: 0;
285
padding-right: 5px;
286
padding-bottom: 1px;
287
padding-left: 5px;
288
text-align: center;
289
290
&.title, &.subtitle {
291
color: var(--title-clr) !important;
292
}
293
}
294
295
.subnavbar_dark {
296
@include panel(gradient-dark, var(--bold-clr),
297
var(--normal-font-size), var(--title-font), bold,
298
var(--borders-clr),
299
var(--bold-shadow-clr));
300
301
color: inherit;
302
display: inline-block;
303
padding-top: 0;
304
padding-right: 5px;
305
padding-bottom: 1px;
306
padding-left: 5px;
307
text-align: center;
308
}
309
310
.title {
311
@include font(var(--title-font) !important, var(--giant-font-size), bold !important);
312
@include text-shadow(black);
313
color: var(--title-clr) !important;
314
}
315
316
.subtitle {
317
@include font(var(--title-font), var(--large-font-size), bold !important);
318
@include text-shadow(black);
319
color: var(--subtitle-clr) !important;
320
}
321
322
.container {
323
display: inline-block;
324
margin: 0 auto;
325
}
326
327
.center {
328
text-align: center;
329
justify-content: center;
330
// margin: auto auto;
331
}
332
333
.center-auto { margin: auto auto; }
334
335
.centered { @include centered; }
336
.centered-top { @include centered-top; }
337
.centered-bottom { @include centered-bottom; }
338
.centered-left { @include centered-left; }
339
.centered-right { @include centered-right; }
340
341
.danger {
342
@include panel(medium-red, var(--white), $bc: var(--red), $fs: inherit);
343
border-width: 3px;
344
@include uniform-padding(25px);
345
346
button, select {
347
@include box-shadow(dark-red);
348
}
349
350
b { color: white; font-weight: bold; }
351
}
352
353
.vh {
354
min-height: 100vh;
355
}
356
357
.vw {
358
min-width: 100vw;
359
}
360
361
.titlebar { @include panel(gradient-light, var(--bold-clr), var(--giant-font-size), $paddings: 1); }
362
363
// ****************************************************************************************************
364
365
.hilite:hover, .hilite:focus {
366
filter: brightness(108%);
367
}
368
369
.highlight {
370
color: var(--black) !important;
371
background-color: var(--medium-green) !important;
372
border-radius: inherit;
373
}
374
375
.copyright { font-size: var(--tiny-font-size) !important; }
376
377
.seethrufont {
378
@include font-imagined('https://unsplash.it/50');
379
}
380
381
.right-aligned {
382
@include h-alignment(right);
383
}
384
385
.green-panel,
386
.yellow-panel,
387
.white-panel,
388
.purple-panel,
389
.purple-light-panel,
390
.red-panel,
391
.blue-panel,
392
.cyan-panel,
393
.normal-panel,
394
.error,
395
.notice,
396
.description {
397
@include text-shadow;
398
}
399
400
.notice, .description {
401
@include panel($bg: medium-yellow, $c: var(--black), $bc: var(--yellow), $fs: inherit);
402
@include side-padding(10px);
403
404
a, a:visited, a:hover { color: blue; }
405
b, i { color: black; }
406
}
407
408
.notice { @include blink(noticeblink, yellow); }
409
.description { @include circular-gradient(yellow, yellow, var(--dark-yellow)); }
410
411
.error {
412
@include blink(errorblink, red);
413
@include panel($bg: medium-red, $c: var(--white),
414
$ff: var(--caps-font), $w: bold,
415
$bc: var(--red),
416
$bsc: var(--bold-shadow-clr));
417
@include side-padding(5px);
418
419
i { color: var(--white); }
420
421
a, b {
422
@include text-shadow(black);
423
}
424
425
a, a:visited, a:hover { color: yellow; }
426
b, i { color: white; }
427
}
428
429
.red-panel {
430
@include panel($bg: medium-red, $c: var(--white), $paddings: 1, $bc: var(--red), $fs: inherit);
431
432
a, a:visited, a:hover { color: yellow; }
433
b, i { color: white !important; }
434
435
hr {
436
display: block;
437
height: 1px;
438
border: 0;
439
border-top: 1px solid var(--white);
440
}
441
}
442
443
.green-panel {
444
@include panel($bg: medium-green, $c: var(--white), $paddings: 1, $bc: var(--green));
445
446
a, a:visited, a:hover { color: yellow; }
447
b, i { color: white !important; }
448
449
hr {
450
display: block;
451
height: 1px;
452
border: 0;
453
border-top: 1px solid var(--black);
454
}
455
}
456
457
.yellow-panel {
458
@include panel($bg: medium-yellow, $c: var(--black), $paddings: 1, $bc: var(--yellow), $fs: inherit);
459
460
a, a:visited, a:hover { color: blue; }
461
b, i { color: black !important; }
462
463
hr {
464
display: block;
465
height: 1px;
466
border: 0;
467
border-top: 1px solid var(--black);
468
}
469
}
470
471
.white-panel {
472
@include panel($bg: white, $c: var(--black), $paddings: 1, $bc: var(--black), $fs: inherit);
473
474
a, a:visited, a:hover { color: blue; }
475
b, i { color: black !important; }
476
477
hr {
478
display: block;
479
height: 1px;
480
border: 0;
481
border-top: 1px solid var(--black);
482
}
483
}
484
485
.purple-panel {
486
@include panel($bg: dark-purple, $c: var(--white), $paddings: 1, $bc: var(--medium-purple), $fs: inherit);
487
488
a, a:visited, a:hover { color: yellow; }
489
b, i { color: white !important; }
490
491
hr {
492
display: block;
493
height: 1px;
494
border: 0;
495
border-top: 1px solid var(--white);
496
}
497
}
498
499
.purple-light-panel {
500
@include panel($bg: medium-dark-purple, $c: var(--white), $paddings: 1, $bc: var(--purple), $fs: inherit);
501
502
a, a:visited, a:hover { color: yellow; }
503
b, i { color: white !important; }
504
505
hr {
506
display: block;
507
height: 1px;
508
border: 0;
509
border-top: 1px solid var(--white);
510
}
511
}
512
513
.blue-panel {
514
@include panel($bg: medium-blue, $c: var(--white), $paddings: 1, $bc: var(--blue), $fs: inherit);
515
516
a, a:visited, a:hover { color: yellow; }
517
b, i { color: white !important; }
518
519
hr {
520
display: block;
521
height: 1px;
522
border: 0;
523
border-top: 1px solid var(--white);
524
}
525
}
526
527
.cyan-panel {
528
@include panel($bg: medium-cyan, $c: var(--black), $paddings: 1, $bc: var(--cyan), $fs: inherit);
529
530
a, a:visited, a:hover { color: blue; }
531
b, i { color: black !important; }
532
533
hr {
534
display: block;
535
height: 1px;
536
border: 0;
537
border-top: 1px solid var(--black);
538
}
539
}
540
541
.normal-panel {
542
@include panel($bg: gradient-light, $paddings: 1, $fs: inherit);
543
}
544
545
.button-panel {
546
@include panel($bg: button-bg, $c: var(--white), $paddings: 1, $bc: var(--button-bg), $fs: inherit);
547
margin-top: 2px;
548
}
549
550
.block {
551
display: block !important;
552
}
553
554
.tall {
555
height: 100% !important;
556
}
557
558
.wide {
559
width: 100% !important;
560
}
561
562
.hidden {
563
opacity: 0;
564
transform: scale(0);
565
min-width: 5px;
566
567
@include transition(all, 1500ms, linear);
568
}
569
570
.inline {
571
display: inline;
572
}
573
574
.minititle {
575
color: getval($vars, subtitle-clr);
576
font-family: getval($vars, title-font);
577
font-size: getval($vars, normal-font-size);
578
font-style: italic;
579
font-weight: bold;
580
text-shadow: 0px 1px 1px getval($vars, subtitle-shadow-clr), 1px 1px 1px getval($vars, subtitle-shadow-clr);
581
white-space: nowrap;
582
}
583
584
.clickable, .pointer {
585
cursor: url('/images/site/pointer.png'), auto;
586
}
587
588
.credits {
589
max-height: 330px;
590
overflow: hidden;
591
text-align: center !important;
592
width: 100%;
593
}
594
595
.floating-menu {
596
position: fixed;
597
text-align: center;
598
width: 100%;
599
z-index: 1000;
600
height: 23px;
601
}
602
603
.special_thanks {
604
background-color: #004400;
605
border: 3px ridge #000000;
606
color: #FFFFFF;
607
text-align: center;
608
}
609
610
.subdesclink, .subdesclink:visited {
611
background: var(--body_bg);
612
border: 1px solid var(--borders_clr);
613
box-shadow: 3px 3px 3px var(--input_box_shadow_clr);
614
color: var(--body_clr);
615
font-weight: normal;
616
padding: 1px 3px 1px 3px;
617
}
618
619
*::-webkit-input-placeholder, *:-moz-placeholder, *::-moz-placeholder, *:-ms-input-placeholder {
620
color: rgba(white, 0.5) !important;
621
text-shadow: var(--bold-shadow-clr) !important;
622
}
623
624
.as_body_textcolor {
625
color: var(--body-clr);
626
}
627
628
.mailsubject, .mailbody, .mailto {
629
width: 400px;
630
631
@include mq() {
632
width: 250px;
633
}
634
}
635
636
.noscroll {
637
overflow-x: hidden;
638
overflow-y: hidden;
639
overflow: hidden; // redundant!
640
}
641
642
.snakey-link {
643
@include snakey-link();
644
}
645
646
.modal { @include modal(); }
647
648
.nowrap {
649
white-space: nowrap;
650
}
651
652
.small { font-size: var(--small-font-size) !important; }
653
.neartiny { font-size: var(--neartiny-font-size) !important; }
654
655
.gradient {
656
@include gradient();
657
}
658
659
.gradient-circle {
660
@include circular-gradient();
661
}
662
663
.photo-modal {
664
@include circular-gradient();
665
}
666
667
.nohand {
668
cursor: url('/images/site/cursor.png'), auto;
669
}
670
671
.vbordered {
672
text-color: var(--borders-clr);
673
border: 2px outset var(--borders-clr);
674
min-height: 10px;
675
}
676
677
.hbordered {
678
text-color: var(--borders-clr);
679
border: 2px outset var(--borders-clr);
680
min-width: 10px;
681
}
682
683
.faded_panel {
684
@include transition;
685
686
border: 1px solid transparent;
687
margin-bottom: 2px;
688
}
689
690
.faded_panel:hover {
691
@include panel();
692
}
693
694
.chatwrap {
695
white-space: pre-wrap; /* CSS3 */
696
white-space: -moz-pre-wrap; /* Firefox */
697
white-space: -pre-wrap; /* Opera <7 */
698
white-space: -o-pre-wrap; /* Opera 7 */
699
word-wrap: break-word; /* IE */
700
word-break: break-word; /* Chrome */
701
}
702
703
.padded { padding: 5px 15px !important; }
704
.padded-bottom { padding-bottom: 5px !important; }
705
.padded-bottom-large { padding-bottom: 8px !important; }
706
.padded-large { padding: 10px 25px !important; }
707
.padded-left { padding-left: 8px; }
708
.padded-left-right { padding-left: 8px; padding-right: 8px; }
709
.padded-left-right-small { padding-left: 3px; padding-right: 3px; }
710
.padded-left-right-tiny { padding-left: 2px; padding-right: 2px; }
711
.padded-right { padding-right: 8px; }
712
.padded-tiny { padding: 2px 2px !important; }
713
.padded-top-bottom { padding-top: 5px; padding-bottom: 5px; }
714
.padded-top-bottom-large { padding-top: 8px; padding-bottom: 8px; }
715
.padded-top-bottom-small { padding-top: 3px; padding-bottom: 3px; }
716
.padded-small { padding: 3px 5px !important; }
717
.padding-auto { padding: auto auto !important; }
718
.padding-none { padding: 0 !important; }
719
720
.caps { font-family: var(--funny-font) !important; }
721
.embolden { font-weight: 900; }
722
723
.rounded { @include rounded; }
724
.rounded-large { @include rounded(10px); }
725
.rounded-larger { @include rounded(15px); }
726
.rounded-largest { @include rounded(20px); }
727
.rounded-ends { @include rounded(500px); }
728
.circular { border-radius: 50%; }
729
730
.translucent,
731
.translucent-red,
732
.translucent-green,
733
.translucent-grey,
734
.translucent-blue,
735
.translucent-yellow,
736
.translucent-purple,
737
.translucent-cyan {
738
border-radius: 5px;
739
font-size: var(--normal-font-size);
740
margin: 5px 5px 5px 5px;
741
padding: 5px 5px 5px 5px;
742
}
743
744
.translucent {
745
border: 1px solid var(--borders-clr);
746
color: var(--body-clr);
747
background-color: rgba(0, 0, 0, 0.35) !important;
748
color: rgba(255, 255, 255, 0.85) !important;
749
750
b, i { color: inherit; }
751
752
a {
753
color: var(--link-clr);
754
@include text-shadow(var(--bold-shadow-clr));
755
}
756
757
a:visited, a:hover, a:focus { color: yellow; }
758
759
.notice {
760
@include borders($clr: var(--yellow));
761
}
762
}
763
764
.translucent-red {
765
border: 1px solid var(--red);
766
color: white;
767
background-color: rgba(200, 0, 0, 0.5) !important;
768
769
a, b, button {
770
color: yellow;
771
@include text-shadow(white);
772
}
773
774
a:visited, a:hover, a:focus { color: yellow; }
775
776
.notice {
777
@include borders($clr: var(--yellow));
778
}
779
}
780
781
.translucent-green {
782
border: 1px solid var(--medium-green);
783
color: white;
784
background-color: rgba(0, 55, 0, 0.5) !important;
785
}
786
787
.translucent-blue {
788
border: 1px solid var(--blue);
789
color: white;
790
background-color: rgba(0, 0, 200, 0.5) !important;
791
}
792
793
.translucent-yellow {
794
border: 1px solid var(--yellow);
795
color: white;
796
background-color: rgba(200, 200, 0, 0.5) !important;
797
}
798
799
.translucent-purple {
800
border: 1px solid var(--purple);
801
color: white;
802
background-color: rgba(200, 0, 200, 0.5) !important;
803
}
804
805
.translucent-cyan {
806
border: 1px solid var(--cyan);
807
color: black;
808
background-color: rgba(0, 200, 200, 0.5) !important;
809
}
810
811
.translucent-grey {
812
border: 1px solid var(--grey);
813
color: rgba(255, 255, 255, 0.75);
814
background-color: rgba(127, 127, 127, 0.5) !important;
815
816
a, b, button {
817
color: yellow;
818
@include text-shadow(white);
819
}
820
821
a:visited, a:hover, a:focus { color: yellow; }
822
823
.notice {
824
@include borders($clr: var(--yellow));
825
}
826
}
827
828
.translucent-fadein {
829
border: 1px solid transparent;
830
border-radius: 5px;
831
color: rgba(255, 255, 255, 0.75);
832
background-color: transparent;
833
width: min-content;
834
padding: 8px;
835
margin-bottom: 5px;
836
}
837
838
.translucent-fadein:hover {
839
border: 1px solid var(--borders-clr);
840
border-radius: 5px;
841
color: rgba(255, 255, 255, 0.75);
842
background-color: rgba(0, 0, 0, 0.3);
843
}
844
845
.sticky {
846
position: sticky;
847
top: 2px;
848
z-index: 1000000;
849
}
850
851
.margins { margin: 5px !important; }
852
.margins-auto { margin: auto auto !important; }
853
.margins-bottom { margin-bottom: 5px !important; }
854
.margins-bottom-large { margin-bottom: 8px !important; }
855
.margins-bottom-larger { margin-bottom: 10px !important; }
856
.margins-bottom-largest { margin-bottom: 15px !important; }
857
.margins-mini { margin: 2px !important; }
858
.margins-large { margin: 8px !important; }
859
.margins-none { margin: 0 !important; }
860
.margins-left { margin-left: 5px !important; }
861
.margins-left-large { margin-left: 8px !important; }
862
.margins-left-larger { margin-left: 10px !important; }
863
.margins-left-largest { margin-left: 15px !important; }
864
.margins-left-auto { margin-left: auto !important; }
865
.margins-left-right { margin-left: 5px !important; margin-right: 5px !important; }
866
.margins-left-right-auto { margin-left: auto !important; margin-right: auto !important; }
867
.margins-left-right-mini { margin-left: 2px !important; margin-right: 2px !important; }
868
.margins-left-right-small { margin-left: 2px !important; margin-right: 2px !important; }
869
.margins-left-right-tiny { margin-left: 1px !important; margin-right: 1px !important; }
870
.margins-right { margin-right: 5px !important; }
871
.margins-top { margin-top: 5px !important; }
872
.margins-top-large { margin-top: 8px !important; }
873
.margins-top-larger { margin-top: 10px !important; }
874
.margins-top-largest { margin-top: 15px !important; }
875
.margins-top-bottom { margin-top: 5px !important; margin-bottom: 5px !important; }
876
.margins-top-bottom-auto { margin-top: auto !important; margin-bottom: auto !important; }
877
.margins-top-bottom-large { margin-top: 8px !important; margin-bottom: 8px !important; }
878
.margins-top-bottom-small { margin-top: 3px !important; margin-bottom: 3px !important; }
879
.margins-top-bottom-tiny { margin-top: 2px !important; margin-bottom: 2px !important; }
880
.margins-top-none { margin-top: 0 !important; }
881
.margins-top-small { margin-top: 3px !important; }
882
883
.hoverborder { border: 1px solid transparent; }
884
.hoverborder:hover { border: 1px solid var(--borders-clr); }
885
886
.hoverbg:hover { background-color: rgba(0, 0, 0, 0.15); }
887
888
.blue-bg,
889
.green-bg,
890
.yellow-bg,
891
.red-bg {
892
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
893
}
894
895
.blue-bg {
896
background-color: var(--blue);
897
color: var(--white);
898
}
899
900
.dark-blue-bg {
901
background-color: var(--dark-blue);
902
color: var(--grey);
903
}
904
905
.green-bg {
906
background-color: var(--green);
907
color: var(--black);
908
}
909
910
.dark-green-bg {
911
background-color: var(--dark-green);
912
color: var(--grey);
913
}
914
915
.yellow-bg {
916
background-color: var(--medium-yellow) !important;
917
color: var(--white);
918
}
919
920
.red-bg {
921
background-color: var(--red);
922
color: var(--white);
923
}
924
925
.inline-block { display: inline-block; }
926
.inline { display: inline; }
927
928
.giant-font-size { font-size: var(--giant-font-size); }
929
.large-font-size { font-size: var(--large-font-size); }
930
.medium-font-size { font-size: var(--medium-font-size); }
931
.normal-font-size { font-size: var(--normal-font-size); }
932
.nearsmall-font-size { font-size: var(--nearsmall-font-size); }
933
.small-font-size { font-size: var(--small-font-size); }
934
.neartiny-font-size { font-size: var(--neartiny-font-size); }
935
.tiny-font-size { font-size: var(--tiny-font-size); }
936
937
.fieldset-plain {
938
background-color: transparent;
939
@include borders;
940
}
941
942
.faded {
943
// the goal is to fade out the font colour a little
944
color: rgba(0, 0, 0, 0.75);
945
}
946
947
.no-transitions {
948
transition: none !important;
949
transform: none !important;
950
cursor: url(/images/site/cursor2.png), auto;
951
}
952
953
.no-transitions:hover {
954
transform: none !important;
955
filter: none !important;
956
cursor: url(/images/site/cursor2.png), auto !important;
957
}
958
959
.scrollbarred {
960
@include scrollbarred();
961
}
962
963
.min-content {
964
height: min-content;
965
width: min-content;
966
}
967
968
.flexboxed {
969
display: flex;
970
flex-flow: row wrap;
971
justify-content: start;
972
}
973
974
.flexboxed > * {
975
flex-shrink: 0;
976
flex-grow: 0;
977
flex-basis: auto;
978
margin: 0 0 0px 0;
979
padding: 5px;
980
}
981
982
.boxshadowed {
983
@include box-shadow();
984
}
985
986
.blink {
987
animation: blink 200ms;
988
animation-iteration-count: 8;
989
}
990
991
@keyframes blink {
992
50% {
993
filter: brightness(150%);
994
}
995
}
996
997
.notice-msg {
998
border-style: solid;
999
border-width: 2px;
1000
border-radius: 5px;
1001
padding: 15px;
1002
}
1003
1004
.error-msg {
1005
border-style: solid;
1006
border-width: 2px;
1007
border-radius: 5px;
1008
padding: 15px;
1009
}
1010
1011
.flexed-col {
1012
display: flex;
1013
flex-direction: column;
1014
align-items: center;
1015
}
1016
1017
.outlined-none {
1018
outline: none;
1019
}
1020
1021
.as_button {
1022
@include buttonize($bg: blue);
1023
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.9) !important;
1024
text-align: center;
1025
}
1026
1027
.italic {
1028
font-style: italic;
1029
}
1030
1031
.dynamic_blend {
1032
background-color: inherit;
1033
background-image: inherit;
1034
background-blend-mode: darken;
1035
}
1036
1037
.text-align-left {
1038
text-align: left !important;
1039
}
1040
1041
.text-align-right {
1042
text-align: right !important;
1043
}
1044
1045
.text-align-center {
1046
text-align: center !important;
1047
}
1048
1049
.transparent {
1050
background-color: transparent;
1051
border: transparent;
1052
box-shadow: none;
1053
}
1054
1055
.sunken {
1056
@include sunken();
1057
}
1058
1059
.super {
1060
vertical-align: super
1061
}
1062
1063
.nobgimg {
1064
background-image: none !important;
1065
}
1066
1067
.noborders {
1068
border: none !important;
1069
}
1070
1071
.fullsize {
1072
//height: 100%;
1073
//max-height: 100%;
1074
min-height: 100%;
1075
max-width: 100%;
1076
min-width: 100%;
1077
width: 100%;
1078
}
1079
1080
.nodisabled {
1081
background-color: var(--input-bg) !important;
1082
color: var(--input-clr) !important;
1083
}
1084
1085
.yellow-text {
1086
color: var(--yellow) !important;
1087
}
1088
1089
.green {
1090
color: green;
1091
}
1092
1093
.red { color: red; }
1094
1095
.boxshadow {
1096
@include box-shadow(input-box-shadow-clr);
1097
}
1098
1099
.glass {
1100
backdrop-filter: blur(20px);
1101
background-clip: padding-box;
1102
border: 2px solid transparent;
1103
1104
@include box-shadow(input-box-shadow-clr);
1105
}