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..dafafe1b300272fbf6dbf70c0122e5a825d3ae6f 100644 |
--- a/chrome/browser/resources/bluetooth_internals/bluetooth_internals.css |
+++ b/chrome/browser/resources/bluetooth_internals/bluetooth_internals.css |
@@ -13,11 +13,89 @@ body { |
padding: 0; |
} |
+/* Header bar */ |
+ |
header { |
- background-color: blue; |
- padding: 2px; |
+ align-items: center; |
+ background-color: cornflowerblue; |
+ display: flex; |
+ flex-direction: row; |
+ font-size: 20pt; |
+ height: 56px; |
+ justify-content: flex-start; |
+ padding: 0 16px; |
+} |
+ |
+header .menu-button a { |
+ color: white; |
+ margin-right: 16px; |
+ 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
|
} |
-header * { |
+header .title { |
color: white; |
+ display: inline-block; |
+ margin-left: 8px; |
+} |
+ |
+ |
+/* Device table */ |
+ |
+#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.
|
+ border: 1px solid #ccc; |
+ border-collapse: collapse; |
+ 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.
|
+ margin: 0; |
+ padding: 0; |
+ width: 100%; |
+} |
+ |
+#device-table tr { |
+ border: 1px solid #ddd; |
+ padding: 5px; |
+} |
+ |
+#device-table th, |
+#device-table td { |
+ padding: 10px; |
+ text-align: center; |
+} |
+ |
+#device-table th { |
+ font-size: 14px; |
+ letter-spacing: 1px; |
+ text-transform: uppercase; |
+} |
+ |
+@media screen and (max-width: 600px) { |
+ #device-table { |
+ border: 0; |
+ } |
+ |
+ #device-table thead { |
+ display: none; |
+ } |
+ |
+ #device-table tr { |
+ border-bottom: 2px solid #ddd; |
+ display: block; |
+ } |
+ |
+ #device-table td { |
+ border-bottom: 1px dotted #ccc; |
+ display: block; |
+ font-size: 13px; |
+ text-align: right; |
+ } |
+ |
+ #device-table td:last-child { |
+ border-bottom: 0; |
+ } |
+ |
+ #device-table td::before { |
+ content: attr(data-label); |
+ float: left; |
+ font-weight: bold; |
+ text-transform: uppercase; |
+ } |
} |