OLD | NEW |
---|---|
1 /* Copyright 2016 The Chromium Authors. All rights reserved. | 1 /* Copyright 2016 The Chromium Authors. All rights reserved. |
2 * Use of this source code is governed by a BSD-style license that can be | 2 * Use of this source code is governed by a BSD-style license that can be |
3 * found in the LICENSE file. | 3 * found in the LICENSE file. |
4 */ | 4 */ |
5 | 5 |
6 html { | 6 html { |
7 margin: 0; | 7 margin: 0; |
8 padding: 0; | 8 padding: 0; |
9 } | 9 } |
10 | 10 |
11 body { | 11 body { |
12 margin: 0; | 12 margin: 0; |
13 padding: 0; | 13 padding: 0; |
14 } | 14 } |
15 | 15 |
16 /* Header bar */ | |
17 | |
16 header { | 18 header { |
17 background-color: blue; | 19 align-items: center; |
18 padding: 2px; | 20 background-color: cornflowerblue; |
21 display: flex; | |
22 flex-direction: row; | |
23 font-size: 20pt; | |
24 height: 56px; | |
25 justify-content: flex-start; | |
26 padding: 0 16px; | |
19 } | 27 } |
20 | 28 |
21 header * { | 29 header .menu-button a { |
22 color: white; | 30 color: white; |
31 margin-right: 16px; | |
32 text-decoration: none; | |
scheib
2016/10/15 03:51:45
text-decoration necessary?
mbrunson
2016/10/18 00:21:25
I meant to remove this rule. This was for a menu b
| |
33 } | |
34 | |
35 header .title { | |
36 color: white; | |
37 display: inline-block; | |
38 margin-left: 8px; | |
39 } | |
40 | |
41 | |
42 /* Device table */ | |
43 | |
44 #device-table { | |
scheib
2016/10/15 03:51:45
You'll likely have other tables? Perhaps use a cla
mbrunson
2016/10/18 00:21:25
Done.
| |
45 border: 1px solid #ccc; | |
46 border-collapse: collapse; | |
47 border-spacing: 0; | |
scheib
2016/10/15 03:51:45
border-spacing necessary if collapse is used?
mbrunson
2016/10/18 00:21:25
Removed.
| |
48 margin: 0; | |
49 padding: 0; | |
50 width: 100%; | |
51 } | |
52 | |
53 #device-table tr { | |
54 border: 1px solid #ddd; | |
55 padding: 5px; | |
56 } | |
57 | |
58 #device-table th, | |
59 #device-table td { | |
60 padding: 10px; | |
61 text-align: center; | |
62 } | |
63 | |
64 #device-table th { | |
65 font-size: 14px; | |
66 letter-spacing: 1px; | |
67 text-transform: uppercase; | |
68 } | |
69 | |
70 @media screen and (max-width: 600px) { | |
71 #device-table { | |
72 border: 0; | |
73 } | |
74 | |
75 #device-table thead { | |
76 display: none; | |
77 } | |
78 | |
79 #device-table tr { | |
80 border-bottom: 2px solid #ddd; | |
81 display: block; | |
82 } | |
83 | |
84 #device-table td { | |
85 border-bottom: 1px dotted #ccc; | |
86 display: block; | |
87 font-size: 13px; | |
88 text-align: right; | |
89 } | |
90 | |
91 #device-table td:last-child { | |
92 border-bottom: 0; | |
93 } | |
94 | |
95 #device-table td::before { | |
96 content: attr(data-label); | |
97 float: left; | |
98 font-weight: bold; | |
99 text-transform: uppercase; | |
100 } | |
23 } | 101 } |
OLD | NEW |