dashboard.css (3474B) download
1body {
2 background-color: #BCCFB0;
3 color: #333333;
4 font-family: Roboto, sans-serif;
5 margin: 0;
6 padding: 0;
7}
8
9/*NAVBAR*/
10nav {
11 background-color: #333333;
12 width: 100%;
13 height: 15vw;
14 display: flex;
15 align-items: center;
16}
17
18nav ul {
19 margin: 0;
20 padding: 0;
21 width: 100%;
22 height: 15vw;
23 display: flex;
24 list-style-type: none;
25 align-items: center;
26}
27
28nav li {
29 font-weight: bold;
30 font-size: 4vw;
31 margin-right: 3vw;
32}
33
34nav ul li a {
35 color: #fff;
36 text-decoration: none;
37 padding: 0;
38}
39
40nav ul li a.active {
41 pointer-events: none;
42 color: gray;
43}
44
45nav ul li:first-child {
46 margin-right: auto;
47}
48
49.img-big-logo {
50 display: none;
51}
52
53.img-small-logo,
54.img-big-logo {
55 height: 15vw;
56 width: auto;
57 vertical-align: middle;
58}
59
60.download-button {
61 display: flex;
62 padding: 10px 20px;
63 background-color: #BC9999;
64 color: white;
65 text-decoration: none;
66 cursor: pointer;
67}
68
69/* HEADER */
70h1 {
71 text-align: center;
72 font-size: 8vw;
73 margin: 5vw;
74}
75
76/* DATA BLOCKS */
77.block1,
78.block2 {
79 display: flex;
80 width: 90vw;
81 height: auto;
82 padding-top: 20px;
83 margin: 5vw auto 5vw;
84 justify-content: space-between;
85 background-color: #333333;
86 color: white;
87 box-shadow: 0 0 10px rgba(51, 51, 51, 0.2);
88 border-radius: 4px;
89 font-size: 4vw;
90}
91
92.block2 {
93 margin: 10vw auto 110vw;
94}
95
96.content {
97 height: auto;
98 align-items: center;
99 justify-content: center;
100 width: 100%;
101}
102
103.content-title {
104 display: inline-block;
105 background-color: #BCCFB0;
106 padding: 2px;
107 box-shadow: 0 0 10px #333333;
108}
109
110.content h2 {
111 font-size: 5vw;
112 font-weight: bold;
113 color: #333333;
114 margin: 5px;
115}
116
117.topFiveTable {
118 margin: 2vw 5% 3vw 5%;
119 width: 90%;
120}
121
122.topFiveTable thead {
123 font-weight: bold;
124}
125
126table {
127 width: 100%;
128 border-collapse: collapse;
129 color: white;
130}
131
132th, td {
133 padding: 8px;
134 text-align: left;
135 border-bottom: 1px solid #ddd;
136}
137
138th {
139 background-color: gray;
140 font-weight: bold;
141}
142
143tr:hover {
144 background-color: #444444;
145}
146
147#tabledate{
148 background-color: black;
149 color: #BCCFB0;
150}
151
152#chilling{
153 background-color: steelblue;
154 color: #BCCFB0;
155}
156
157.space{
158 background-color: #BCCFB0;
159 box-shadow: none;
160 padding-bottom: 100px
161}
162
163#myChart {
164 display: inline !important;
165 width: 90% !important;
166 height: auto !important;
167 margin: 2vw 5% 3vw 5%;
168}
169
170@media (min-width: 400px) {
171 /*NAVBAR*/
172 nav {
173 height: 60px;
174 }
175
176 nav ul {
177 height: 60px;
178 }
179
180 nav li {
181 font-size: 16px;
182 margin-right: 12px;
183 }
184
185 .img-small-logo,
186 .img-big-logo {
187 height: 60px;
188 }
189
190 /* HEADER */
191 h1 {
192 font-size: 32px;
193 margin: 20px;
194 }
195
196 /* DATA BLOCKS */
197 .block1 {
198 font-size: 16px;
199 margin: 20px auto 20px;
200 }
201
202 .block2 {
203 font-size: 16px;
204 margin: 40px auto 40px;
205 }
206
207 .content h2 {
208 font-size: 20px;
209 }
210
211 .fancy-list {
212 font-size: 16px;
213 }
214}
215
216@media (min-width: 700px) {
217 .img-big-logo {
218 display: block;
219 }
220
221 .img-small-logo {
222 display: none;
223 }
224
225 nav ul li:first-child {
226 margin-right: 0;
227 }
228
229 nav ul li:nth-child(2) {
230 margin-right: auto;
231 }
232}
233
234@media (min-width: 1200px) {
235 /* DATA BLOCKS */
236 .block1,
237 .block2 {
238 width: 1080px;
239 }
240}