Skip to content

Commit 0273a1c

Browse files
LukePriorLukePrior
committed
"dark mode"
1 parent ccc65af commit 0273a1c

File tree

5 files changed

+79
-62
lines changed

5 files changed

+79
-62
lines changed

‎css/base.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,9 @@
6262
/* #Basic Styles
6363
================================================== */
6464
body {
65-
background: #fff;
65+
background: var(--background-color);
6666
font: 14px/21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
67-
color: #666;
67+
color: var(--text-color);
6868
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
6969
-webkit-text-size-adjust: 100%;
7070
}
@@ -88,7 +88,7 @@
8888
p.lead { font-size: 21px; line-height: 27px; color: #777; }
8989

9090
em { font-style: italic; }
91-
strong { font-weight: bold; color: #333; }
91+
strong { font-weight: bold; color: var(--text-secondary-color); }
9292
b { font-weight: bold; }
9393
small { font-size: 80%; }
9494

@@ -104,7 +104,7 @@
104104

105105
/* #Links
106106
================================================== */
107-
a, a:visited { color: #333; text-decoration: underline; outline: 0; }
107+
a, a:visited { color: var(--text-secondary-color); text-decoration: underline; outline: 0; }
108108
a:hover, a:focus { color: #000; }
109109
p a, p a:visited { line-height: inherit; }
110110

@@ -189,7 +189,7 @@
189189
input[type="submit"]:active,
190190
input[type="reset"]:active,
191191
input[type="button"]:active {
192-
border: 1px solid #666;
192+
border: 1px solid var(--text-color);
193193
background: #ccc; /* Old browsers */
194194
background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */
195195
background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */
@@ -222,7 +222,7 @@
222222
input[type="button"].disabled {
223223
border: 1px solid #aaa;
224224
color: #aaa;
225-
background: #fff;
225+
background: var(--background-color);
226226
}
227227

228228

@@ -246,7 +246,7 @@
246246
color: #888;
247247
margin: 0;
248248
max-width: 100%;
249-
background: #fff; }
249+
background: var(--background-color); }
250250
select {
251251
padding: 0; }
252252
input[type="text"]:focus,

‎css/layout.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@ header{
3232
font-size: 14px;
3333
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
3434

35-
background: #00a3d3;
36-
border-bottom: 1px solid #009bc9;
35+
background: var(--primary-color);
36+
border-bottom: 1px solid var(--primary-color);
3737

3838
}
3939

@@ -48,15 +48,15 @@ header h1{
4848
margin-bottom: 50px;
4949
padding: 15px 0 15px 0;
5050

51-
color: #666666;
51+
color: var(--text-color);
5252

5353
background: #fcfcfc;
5454
border-top: 1px solid #ffffff;
5555
border-bottom: 1px solid #eeeeee;
5656
}
5757

5858
#grey-section h3{
59-
color: #00a3d3;
59+
color: var(--primary-color);
6060
}
6161

6262
#grey-section .badge{

‎css/leaflet.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -557,7 +557,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
557557

558558
.leaflet-div-icon {
559559
background: #fff;
560-
border: 1px solid #666;
560+
border: 1px solid var(--text-color);
561561
}
562562

563563

‎css/main.css‎

Lines changed: 58 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,29 @@
22
* Main style sheet
33
*
44
*/
5+
6+
:root {
7+
--primary-color: #00A3D3;
8+
--secondary-color: #33B5E5;
9+
--background-color: #ffffff;
10+
--background-secondary-color: #f4f4f4;
11+
--text-color: #666666;
12+
--text-secondary-color: #333333;
13+
--chart-fill: #f9d6d6;
14+
--chart-stroke: #f53333;
15+
}
16+
17+
[data-theme="dark"] {
18+
--primary-color: #00A3D3;
19+
--secondary-color: #33B5E5;
20+
--background-color: #ffffff;
21+
--background-secondary-color: #f4f4f4;
22+
--text-color: #666666;
23+
--text-secondary-color: #333333;
24+
--chart-fill: #f9d6d6;
25+
--chart-stroke: #f53333;
26+
}
27+
528
@font-face {
629
font-family: 'Roboto';
730
font-style: normal;
@@ -62,7 +85,7 @@ body {
6285

6386
.slickbox {
6487
z-index: 49;
65-
background-color: #fff;
88+
background-color: var(--background-color);
6689
position: absolute;
6790
height: 28px;
6891
width: 195px;
@@ -93,7 +116,7 @@ body {
93116
-ms-transition: all 0.4s ease-in-out;
94117
-o-transition: all 0.4s ease-in-out;
95118
transition: all 0.4s ease-in-out;
96-
fill: #00a3d3;
119+
fill: var(--primary-color);
97120
}
98121

99122
#timebox {
@@ -147,7 +170,7 @@ body {
147170
z-index: 99;
148171
width: 100%;
149172
height: 100%;
150-
background: #00A3D3;
173+
background: var(--primary-color);
151174
}
152175
#loading img {
153176
position: absolute;
@@ -170,7 +193,7 @@ body {
170193
width: 0px;
171194
height: 5px;
172195
border-radius: 3px;
173-
background: #fff;
196+
background: var(--background-color);
174197
}
175198

176199
header {
@@ -183,7 +206,7 @@ header {
183206
min-height: 50px;
184207
max-height: 50px;
185208
line-height: normal;
186-
border-bottom: 5px solid #33b5e5;
209+
border-bottom: 5px solid var(--secondary-color);
187210
box-shadow: 0px 1px 3px #555;
188211
z-index: 5;
189212
}
@@ -279,14 +302,14 @@ header .search form input[type='submit'] {
279302
float: left;
280303
height: 40px;
281304
width: 35px;
282-
border-right: 1px solid #33b5e5;
305+
border-right: 1px solid var(--secondary-color);
283306
cursor: pointer;
284-
color: #fff;
307+
color: var(--background-color);
285308
line-height: 45px;
286309
font-size: 35px;
287310
}
288311
.nav > li.last { border: 0; }
289-
.nav > li:active { background-color: #33b5e5; }
312+
.nav > li:active { background-color: var(--secondary-color); }
290313
.nav > li:hover { border-bottom: 5px solid #fff; }
291314

292315

@@ -305,18 +328,18 @@ header .search form input[type='submit'] {
305328
padding: 10px;
306329
padding-right: 3px;
307330
padding-left: 5px;
308-
border-bottom: 1px solid #33b5e5;
331+
border-bottom: 1px solid var(--secondary-color);
309332
position: relative;
310333
z-index: 51;
311334
cursor: pointer;
312-
background-color: #fff;
313-
border-left: 5px solid #fff;
335+
background-color: var(--background-color);
336+
border-left: 5px solid var(--background-color);
314337
}
315338
#main .row.selected {
316-
border-left: 5px solid #00A3D3;
339+
border-left: 5px solid var(--primary-color);
317340
}
318341
#main .row:hover .header {
319-
border-left: 5px solid #00A3D3;
342+
border-left: 5px solid var(--primary-color);
320343
}
321344

322345
#main .row:hover .data {
@@ -373,7 +396,7 @@ header .search form input[type='submit'] {
373396
-ms-transform: rotate(-90deg);
374397
-o-transform: rotate(-90deg);
375398
transform: rotate(-90deg);
376-
color: #00a3d3;
399+
color: var(--primary-color);
377400
}
378401
.row.active .header .arrow {
379402
-webkit-transform: rotate(-180deg);
@@ -384,7 +407,7 @@ header .search form input[type='submit'] {
384407
}
385408

386409
#main .row {
387-
background-color: #f4f4f4;
410+
background-color: var(--background-secondary-color);
388411
margin: 0;
389412
padding: 0;
390413
position: relative;
@@ -394,7 +417,7 @@ header .search form input[type='submit'] {
394417
#main .row .data {
395418
display: none;
396419
width: 100%;
397-
border-left: 5px solid #F4F4F4;
420+
border-left: 5px solid var(--background-secondary-color);
398421
}
399422

400423
#main .row .icon-target:before {
@@ -411,7 +434,7 @@ header .search form input[type='submit'] {
411434
}
412435
#main .row .data .vbutton {
413436
position: absolute;
414-
background-color: #fff;
437+
background-color: var(--background-color);
415438
width: 30px !important;
416439
right: 5px;
417440
top: 150px;
@@ -427,7 +450,7 @@ header .search form input[type='submit'] {
427450

428451
#main .row .data .sbutton {
429452
position: absolute;
430-
background-color: #fff;
453+
background-color: var(--background-color);
431454
width: 30px !important;
432455
right: 5px;
433456
top: 170px;
@@ -442,9 +465,9 @@ header .search form input[type='submit'] {
442465
}
443466

444467
#main .row .data .vbutton.active {
445-
background-color: #33b5e5;
446-
border: 1px solid #33b5e5;
447-
color: #fff;
468+
background-color: var(--secondary-color);
469+
border: 1px solid var(--secondary-color);
470+
color: var(--background-color);
448471
}
449472

450473
#main .row .data .vbutton:hover {
@@ -487,7 +510,7 @@ header .search form input[type='submit'] {
487510
}
488511
#main .row .data a {
489512
text-decoration: none;
490-
color: #00A3D3;
513+
color: var(--primary-color);
491514
}
492515
#main .data dl > dt.receivers {
493516
font-size: 12px;
@@ -500,7 +523,7 @@ header .search form input[type='submit'] {
500523
position: absolute;
501524
width: 100%;
502525
z-index: 100;
503-
background: #fff;
526+
background: var(--background-color);
504527
}
505528

506529
.topanel {
@@ -579,9 +602,9 @@ header .search form input[type='submit'] {
579602
width: 0px;
580603
position: absolute;
581604
border-radius: 20px;
582-
-webkit-box-shadow: inset 0 1px 2px #33B5E5, inset 0 12px 3px 2px #00A3D3;
583-
box-shadow: inset 0 1px 2px #33B5E5, inset 0 12px 3px 2px #00A3D3;
584-
background-color: #33B5E5;
605+
-webkit-box-shadow: inset 0 1px 2px var(--secondary-color), inset 0 12px 3px 2px var(--primary-color);
606+
box-shadow: inset 0 1px 2px var(--secondary-color), inset 0 12px 3px 2px var(--primary-color);
607+
background-color: var(--secondary-color);
585608
}
586609
.switch.on:before {
587610
width: 77px;
@@ -625,7 +648,7 @@ header .search form input[type='submit'] {
625648
.switch > .thumb:before {
626649
font-weight: bold;
627650
font-size: 14px;
628-
color: #fff;
651+
color: var(--background-color);
629652
content: "On";
630653
display: block;
631654
height: 14px;
@@ -668,9 +691,9 @@ header .search form input[type='submit'] {
668691
width: 0px;
669692
position: absolute;
670693
border-radius: 20px;
671-
-webkit-box-shadow: inset 0 1px 2px #33B5E5, inset 0 12px 3px 2px #00A3D3;
672-
box-shadow: inset 0 1px 2px #33B5E5, inset 0 12px 3px 2px #00A3D3;
673-
background-color: #33B5E5;
694+
-webkit-box-shadow: inset 0 1px 2px var(--secondary-color), inset 0 12px 3px 2px var(--primary-color);
695+
box-shadow: inset 0 1px 2px var(--secondary-color), inset 0 12px 3px 2px var(--primary-color);
696+
background-color: var(--secondary-color);
674697
}
675698
.switchyn.on:before {
676699
width: 77px;
@@ -714,7 +737,7 @@ header .search form input[type='submit'] {
714737
.switchyn > .thumb:before {
715738
font-weight: bold;
716739
font-size: 14px;
717-
color: #fff;
740+
color: var(--background-color);
718741
content: "Yes";
719742
display: block;
720743
height: 14px;
@@ -791,7 +814,7 @@ header .search form input[type='submit'] {
791814
visibility: hidden;
792815
width: 120px;
793816
background-color: black;
794-
color: #fff;
817+
color: var(--background-color);
795818
text-align: center;
796819
padding: 5px 0;
797820
border-radius: 6px;
@@ -851,7 +874,7 @@ header .search form input[type='submit'] {
851874
float: right;
852875
height: 200px;
853876
width: 280px;
854-
background: #fff;
877+
background: var(--background-color);
855878
position: relative;
856879
z-index: 2;
857880
}
@@ -864,11 +887,11 @@ header .search form input[type='submit'] {
864887
left: 0px;
865888
height: 20px;
866889
padding: 3px 5px;
867-
background: #00a3d3;
890+
background: var(--primary-color);
868891
z-index: 20;
869892
font-weight: bold;
870893
font-size: 11px;
871-
color: #fff;
894+
color: var(--background-color);
872895
border-radius: 0px 5px 0 0;
873896
box-shadow: 1px -1px 5px rgba(0, 0, 0, 0.2);
874897
cursor: pointer;

0 commit comments

Comments
 (0)