Skip to content

Commit 8b8fc69

Browse files
sam8979sam8979
committed
Deploying to gh-pages from @ f70b834 🚀
1 parent e043063 commit 8b8fc69

File tree

2 files changed

+538
-0
lines changed

2 files changed

+538
-0
lines changed

‎dashboard/dashboard.css

+324
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,324 @@
1+
body {
2+
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
3+
width: 1000px;
4+
margin: 0 auto 0 auto;
5+
background-color: #eeeeee;
6+
}
7+
8+
a {
9+
text-decoration: none;
10+
color: #0366d6;
11+
}
12+
13+
:root {
14+
--color-red-background: #ee0000;
15+
--color-red-foreground: #ffffff;
16+
--color-red-border: #cc0000;
17+
18+
--color-yellow-background: #eeee00;
19+
--color-yellow-foreground: #000000;
20+
--color-yellow-border: #cccc00;
21+
22+
--color-green-background: #00bb00;
23+
--color-green-foreground: #ffffff;
24+
--color-green-border: #999900;
25+
26+
--color-blue-background: #0000ee;
27+
--color-blue-foreground: #ffffff;
28+
--color-blue-border: #0000cc;
29+
30+
--color-black-background: #000000;
31+
--color-black-foreground: #ffffff;
32+
--color-black-border: #333333;
33+
}
34+
35+
/* Header / footer */
36+
37+
div#analytics h1 {
38+
width: 900px;
39+
margin: 50px 50px 30px 50px;
40+
}
41+
div#main_description {
42+
width: 900px;
43+
margin: -20px 50px 30px 50px;
44+
}
45+
div#footer {
46+
margin: 15px 50px 30px 50px;
47+
font-size: 13px;
48+
}
49+
50+
/* Sections */
51+
52+
div.sections {
53+
background-color: #ffffff;
54+
width: 900px;
55+
min-height: 250px;
56+
padding: 15px 50px 50px 50px;
57+
border: solid 1px #dddddd;
58+
}
59+
60+
div.section {
61+
margin-top: 30px;
62+
width: 900px;
63+
position: relative;
64+
display: inline-block;
65+
}
66+
div.section:after {
67+
content: '';
68+
clear: both;
69+
display: inline-block;
70+
}
71+
div.section_metadata {
72+
width: 275px;
73+
margin-right: 25px;
74+
float: left;
75+
}
76+
div.section_metadata h2 {
77+
padding: 0;
78+
margin: 0;
79+
}
80+
div.section_metadata .description {
81+
margin-top: 15px;
82+
}
83+
84+
div.section_widgets {
85+
float: left;
86+
width: 600px;
87+
}
88+
89+
div.section_widgets > *:first-child {
90+
margin-top: 0;
91+
}
92+
div.section_widgets > * {
93+
margin-top: 25px;
94+
}
95+
96+
/* Number widgets */
97+
98+
div.number_widgets {
99+
position: relative;
100+
display: inline-block;
101+
}
102+
div.number_widgets:after {
103+
content: '';
104+
clear: both;
105+
display: inline-block;
106+
}
107+
108+
div.number_widget {
109+
width: 143px;
110+
height: 143px;
111+
margin: 0 5px 5px 0;
112+
float: left;
113+
position: relative;
114+
background-color: #ffffff;
115+
border: solid 1px #dddddd;
116+
color: #000000;
117+
}
118+
div.number_widget.red {
119+
background-color: var(--color-red-background);
120+
border: solid 1px var(--color-red-border);
121+
color: var(--color-red-foreground);
122+
}
123+
div.number_widget.yellow {
124+
background-color: var(--color-yellow-background);
125+
border: solid 1px var(--color-yellow-border);
126+
color: var(--color-yellow-foreground);
127+
}
128+
div.number_widget.green {
129+
background-color: var(--color-green-background);
130+
border: solid 1px var(--color-green-border);
131+
color: var(--color-green-foreground);
132+
}
133+
div.number_widget.blue {
134+
background-color: var(--color-blue-background);
135+
border: solid 1px var(--color-blue-border);
136+
color: var(--color-blue-foreground);
137+
}
138+
div.number_widget.black {
139+
background-color: var(--color-black-background);
140+
border: solid 1px var(--color-black-border);
141+
color: var(--color-black-foreground);
142+
}
143+
div.number_widget .title {
144+
display: block;
145+
position: absolute;
146+
top: 8px;
147+
left: 0;
148+
margin: 0 10px 0 10px;
149+
font-size: 14px;
150+
}
151+
div.number_widget .value {
152+
display: block;
153+
position: absolute;
154+
bottom: 4px;
155+
left: 0;
156+
margin: 0 10px 0 10px;
157+
font-size: 80px;
158+
vertical-align: bottom;
159+
line-height: 1;
160+
}
161+
162+
/* String widgets */
163+
164+
div.string_widget {
165+
width: 558px;
166+
padding: 15px 20px;
167+
background-color: #ffffff;
168+
border: solid 1px #dddddd;
169+
color: #000000;
170+
}
171+
div.string_widget.red {
172+
background-color: var(--color-red-background);
173+
border: solid 1px var(--color-red-border);
174+
color: var(--color-red-foreground);
175+
}
176+
div.string_widget.yellow {
177+
background-color: var(--color-yellow-background);
178+
border: solid 1px var(--color-yellow-border);
179+
color: var(--color-yellow-foreground);
180+
}
181+
div.string_widget.green {
182+
background-color: var(--color-green-background);
183+
border: solid 1px var(--color-green-border);
184+
color: var(--color-green-foreground);
185+
}
186+
div.string_widget.blue {
187+
background-color: var(--color-blue-background);
188+
border: solid 1px var(--color-blue-border);
189+
color: var(--color-blue-foreground);
190+
}
191+
div.string_widget.black {
192+
background-color: var(--color-black-background);
193+
border: solid 1px var(--color-black-border);
194+
color: var(--color-black-foreground);
195+
}
196+
197+
div.string_widget h3 {
198+
margin: 0 0 15px 0;
199+
}
200+
201+
/* Graph widgets */
202+
203+
div.graph_widget h3.graph_title {
204+
margin: 0 0 20px 0;
205+
}
206+
207+
div.graph_widget h3.graph_title a {
208+
color: #222222;
209+
}
210+
211+
div.graph {
212+
display: table;
213+
}
214+
div.graph_item {
215+
display: table-row;
216+
}
217+
span.graph_item_title {
218+
display: table-cell;
219+
vertical-align: right;
220+
padding: 5px 10px 5px 0;
221+
white-space: nowrap;
222+
}
223+
span.graph_item_value {
224+
display: table-cell;
225+
width: 100%;
226+
padding-right: 7px;
227+
border-left: solid 1px #dddddd;
228+
}
229+
span.graph_item_value span.value {
230+
display: block;
231+
height: 15px;
232+
text-align: right;
233+
padding-right: 5px;
234+
font-size: 11px;
235+
background-color: #000000;
236+
color: #ffffff;
237+
}
238+
span.graph_item_value span.empty_value {
239+
padding-right: 0;
240+
}
241+
div.graph_item.red span.graph_item_value span.value {
242+
background-color: var(--color-red-background);
243+
border: solid 1px var(--color-red-border);
244+
color: var(--color-red-foreground);
245+
}
246+
div.graph_item.yellow span.graph_item_value span.value {
247+
background-color: var(--color-yellow-background);
248+
border: solid 1px var(--color-yellow-border);
249+
color: var(--color-yellow-foreground);
250+
}
251+
div.graph_item.green span.graph_item_value span.value {
252+
background-color: var(--color-green-background);
253+
border: solid 1px var(--color-green-border);
254+
color: var(--color-green-foreground);
255+
}
256+
div.graph_item.blue span.graph_item_value span.value {
257+
background-color: var(--color-blue-background);
258+
border: solid 1px var(--color-blue-border);
259+
color: var(--color-blue-foreground);
260+
}
261+
div.graph_item.black span.graph_item_value span.value {
262+
background-color: var(--color-black-background);
263+
border: solid 1px var(--color-black-border);
264+
color: var(--color-black-foreground);
265+
}
266+
div.graph_item:last-of-type span.graph_item_value {
267+
border-bottom: solid 1px #dddddd;
268+
}
269+
270+
/* Table widgets */
271+
272+
div.table_widget h3.table_title {
273+
margin: 0 0 20px 0;
274+
}
275+
276+
div.table_widget h3.table_title a {
277+
color: #222222;
278+
}
279+
280+
div.table_widget table {
281+
border-collapse: collapse;
282+
width: 600px;
283+
}
284+
div.table_widget table th, div.table_widget table td {
285+
border: solid 1px #888888;
286+
padding: 4px 8px;
287+
text-align: left;
288+
vertical-align: top;
289+
}
290+
div.table_widget table th {
291+
background-color: #cccccc;
292+
}
293+
div.table_widget table tr:nth-child(odd) td {
294+
background-color: #e8e8e8;
295+
}
296+
div.table_widget table th a, div.table_widget table td a {
297+
display: block;
298+
}
299+
div.table_widget table tr th.red, div.table_widget table tr td.red,
300+
div.table_widget table tr th.red a, div.table_widget table tr td.red a {
301+
background-color: var(--color-red-background);
302+
color: var(--color-red-foreground);
303+
}
304+
div.table_widget table tr th.yellow, div.table_widget table tr td.yellow,
305+
div.table_widget table tr th.yellow a, div.table_widget table tr td.yellow a {
306+
background-color: var(--color-yellow-background);
307+
color: var(--color-yellow-foreground);
308+
}
309+
div.table_widget table tr th.green, div.table_widget table tr td.green,
310+
div.table_widget table tr th.green a, div.table_widget table tr td.green a {
311+
background-color: var(--color-green-background);
312+
color: var(--color-green-foreground);
313+
}
314+
div.table_widget table tr th.blue, div.table_widget table tr td.blue,
315+
div.table_widget table tr th.blue a, div.table_widget table tr td.blue a {
316+
background-color: var(--color-blue-background);
317+
color: var(--color-blue-foreground);
318+
}
319+
div.table_widget table tr th.black, div.table_widget table tr td.black,
320+
div.table_widget table tr th.black a, div.table_widget table tr td.black a {
321+
background-color: var(--color-black-background);
322+
color: var(--color-black-foreground);
323+
}
324+

0 commit comments

Comments
 (0)