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 |
| 17 /* Header bar */ |
| 18 |
16 header { | 19 header { |
17 background-color: blue; | 20 align-items: center; |
18 padding: 2px; | 21 background-color: rgb(33, 150, 243); |
| 22 display: flex; |
| 23 flex-direction: row; |
| 24 font-size: 20pt; |
| 25 height: 56px; |
| 26 justify-content: flex-start; |
| 27 padding: 0 16px; |
19 } | 28 } |
20 | 29 |
21 header * { | 30 .title { |
22 color: white; | 31 color: white; |
| 32 display: inline-block; |
| 33 margin-left: 8px; |
| 34 } |
| 35 |
| 36 |
| 37 /* Device table */ |
| 38 |
| 39 table { |
| 40 border: 1px solid #ccc; |
| 41 border-collapse: collapse; |
| 42 margin: 0; |
| 43 padding: 0; |
| 44 width: 100%; |
| 45 } |
| 46 |
| 47 table tr { |
| 48 border: 1px solid #ddd; |
| 49 padding: 5px; |
| 50 } |
| 51 |
| 52 table th, |
| 53 table td { |
| 54 padding: 10px; |
| 55 text-align: center; |
| 56 } |
| 57 |
| 58 table th { |
| 59 font-size: 14px; |
| 60 letter-spacing: 1px; |
| 61 text-transform: uppercase; |
| 62 } |
| 63 |
| 64 @media screen and (max-width: 600px) { |
| 65 table { |
| 66 border: 0; |
| 67 } |
| 68 table thead { |
| 69 display: none; |
| 70 } |
| 71 table tr { |
| 72 border-bottom: 2px solid #ddd; |
| 73 display: block; |
| 74 } |
| 75 table td { |
| 76 border-bottom: 1px dotted #ccc; |
| 77 display: block; |
| 78 font-size: 13px; |
| 79 text-align: right; |
| 80 } |
| 81 table td:last-child { |
| 82 border-bottom: 0; |
| 83 } |
| 84 table td::before { |
| 85 content: attr(data-label); |
| 86 float: left; |
| 87 font-weight: bold; |
| 88 text-transform: uppercase; |
| 89 } |
| 90 } |
| 91 |
| 92 /* Device Row */ |
| 93 table .removed { |
| 94 background-color: #BDBDBD; |
23 } | 95 } |
OLD | NEW |