Index: chrome/browser/resources/bluetooth_internals/bluetooth_internals.css |
diff --git a/chrome/browser/resources/bluetooth_internals/bluetooth_internals.css b/chrome/browser/resources/bluetooth_internals/bluetooth_internals.css |
index 1cd2375dae567b4ff8df989b1872fafa42f74625..0f4812e4303665280190b0d205c59f33f3801c0c 100644 |
--- a/chrome/browser/resources/bluetooth_internals/bluetooth_internals.css |
+++ b/chrome/browser/resources/bluetooth_internals/bluetooth_internals.css |
@@ -13,11 +13,83 @@ body { |
padding: 0; |
} |
+ |
+/* Header bar */ |
+ |
header { |
- background-color: blue; |
- padding: 2px; |
+ align-items: center; |
+ background-color: rgb(33, 150, 243); |
+ display: flex; |
+ flex-direction: row; |
+ font-size: 20pt; |
+ height: 56px; |
+ justify-content: flex-start; |
+ padding: 0 16px; |
} |
-header * { |
+.title { |
color: white; |
+ display: inline-block; |
+ margin-left: 8px; |
+} |
+ |
+ |
+/* Device table */ |
+ |
+table { |
+ border: 1px solid #ccc; |
+ border-collapse: collapse; |
+ margin: 0; |
+ padding: 0; |
+ width: 100%; |
+} |
+ |
+table tr { |
+ border: 1px solid #ddd; |
+ padding: 5px; |
+} |
+ |
+table th, |
+table td { |
+ padding: 10px; |
+ text-align: center; |
+} |
+ |
+table th { |
+ font-size: 14px; |
+ letter-spacing: 1px; |
+ text-transform: uppercase; |
+} |
+ |
+@media screen and (max-width: 600px) { |
+ table { |
+ border: 0; |
+ } |
+ table thead { |
+ display: none; |
+ } |
+ table tr { |
+ border-bottom: 2px solid #ddd; |
+ display: block; |
+ } |
+ table td { |
+ border-bottom: 1px dotted #ccc; |
+ display: block; |
+ font-size: 13px; |
+ text-align: right; |
+ } |
+ table td:last-child { |
+ border-bottom: 0; |
+ } |
+ table td::before { |
+ content: attr(data-label); |
+ float: left; |
+ font-weight: bold; |
+ text-transform: uppercase; |
+ } |
+} |
+ |
+/* Device Row */ |
+table .removed { |
+ background-color: #BDBDBD; |
} |