-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathelection-web.css
98 lines (82 loc) · 3.92 KB
/
election-web.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
body { margin: 8px; font-family: sans-serif; }
/* Splashscreen */
#splash { position: fixed; left: 0; right: 0; top: 0; bottom: 0; width:200px; height:200px; margin: auto; }
#splash svg { width: 200px; height: 200px; }
path#progback { stroke: none; fill: lightgray; }
path#progbar { stroke: none; fill: lightblue; }
#progtext { font-size: 32px; font-weight: bold; }
/* Overall layout */
#wrapper { position: relative; }
@media only screen and (max-width: 429px) {
#map { position:relative; width: 100%; height: 0; padding-bottom: 90%; }
#piechart { position: relative; width: 75%; height: 0; margin:0 auto; padding-bottom: 75%; }
}
@media only screen and (min-width: 430px) and (max-width:774px) {
#map { position:relative; width: 400px; height: 360px; margin:0 auto; }
#piechart { position: relative; width: 300px; height: 300px; margin:0 auto; }
}
@media only screen and (min-width: 775px)
{
#content { position: relative; }
#map { position:relative; width: 400px; height: 360px; }
#midlink { width: 400px; }
#piechart { position: relative; width: 300px; height: 300px; left:50px;}
#regstuff { position:relative; width: 400px; }
#legend { position:absolute; left: 410px; top: 0; }
}
@media only screen and (min-width: 775px) and (max-width: 899px)
{
#wrapper { width: 100% }
}
@media only screen and (min-width: 900px)
{
#wrapper { width:870px; margin:0 auto; }
}
#piechart, #regstuff, #midlink { padding-top: 10px; }
div.header { padding-bottom: 1em; }
svg { overflow: hidden; }
/* Text formatting */
div.heading { font-size: 125%; font-weight: bold; text-align: center; padding-bottom: 3px; }
div.hint { font-size: 85%; font-style: italic; text-align: center; height: 0; }
div#midlink { text-align: center; }
/* Map formatting */
#resetdiv { position:absolute; right:0; bottom:0; text-align: right; }
#hovertext { position:absolute; left:0; bottom:0; }
.background { fill: none; pointer-events: all; }
.prov-border, .dist-border, .muni-border { fill: none; stroke: white; stroke-linejoin: round; stroke-linecap:round; }
.province, .district, .muni { fill: gray; stroke: none; }
.winner-EPRDF { fill: #66c2a5; }
/*.winner-DA { fill: #8da0cb; }*/
/*.winner-IFP { fill: #fc8d62; }*/
.nation { display: none; fill: none; stroke: none; }
#hoverobj { fill: white; stroke:none; fill-opacity: 0.5; pointer-events: none; }
#selpath { fill: white; stroke:none; fill-opacity: 0.3; pointer-events: none; }
/* Table formatting */
.numbercell { text-align: right; }
table.regstats { font-size:85%; margin: 0 auto; }
table.regstats tr :first-child { padding-right: 1em; }
table.votes { margin: 0 auto; }
table.votes { font-size:85%; border-spacing: 0; }
table.votes th { text-align: left; white-space: nowrap; }
table.votes td, table.votes th { padding-right: 1em; border-top: 1px solid gray; padding-top: 2px; padding-bottom: 2px; height: 22px; }
table.votes tr :first-child { padding-left: 2px; }
table.votes tr :last-child { padding-right: 2px; }
table.votes thead th { border-top: none; }
table.votes tfoot tr:first-child td, table.votes tbody tr:first-child td { border-top: 2px solid gray; }
table.votes tbody tr:nth-child(odd) { background-color: lightgray; }
table.votes tbody tr:nth-child(even) { background-color: white; }
table.votes tbody tr.row-EPRDF { background-color: #93d3bf; }
/*table.votes tbody tr.row-DA { background-color: #aebbd9; }*/
/*table.votes tbody tr.row-IFP { background-color: #fcae90; }*/
table.votes tbody tr.row-COPE { background-color: #fee36c; }
table.votes td.partylogo { text-align: center; padding-right: 2px; }
table.votes tr.validrow td { font-weight: bold; }
table.votes tr.spoiltrow td { font-style: italic; }
table.votes tr.totalrow td { font-weight:bold; font-style: italic; }
/* Pie chart formatting */
.slice { stroke: white; fill: lightgray; }
.slice.EPRDF { fill: #93d3bf; }
/*.slice.DA { fill: #aebbd9; }*/
/*.slice.IFP { fill: #fcae90; }*/
.slice.COPE { fill: #fee36c; }
.pielabel { fill: black; stroke: none; }