bluetooth: Change internal page style to increase contrast of UI elements

chrome/browser/resources/bluetooth_internals/bluetooth_internals.css

 /* Copyright 2016 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 :root {
-  --expandable-list-item-border: 1px solid gray;
+  --dark-primary-color: rgb(25, 118, 210);
+  --darker-primary-color: rgb(13, 71, 161);
+  --divider-border: 1px solid #bdbdbd;
   --fade-duration: 225ms;
   --header-height: 48px;
   --md-timing-function: cubic-bezier(.4, 0, .6, 1);
+  --primary-color: rgb(33, 150, 243);
+  --section-padding: 1em;
+  --sidebar-neg-width: calc(var(--sidebar-width) * -1);
   --sidebar-width: 155px;
-  --sidebar-neg-width: calc(var(--sidebar-width) * -1);
 }
 
 html,
 body {
   margin: 0;
   padding: 0;
 }
 
 h1 {
   color: rgb(92, 97, 102);
@@ skipping 19 matching lines @@
 
 list .spinner {
   height: 48px;
   margin: 0 auto;
   pointer-events: none;
   width: 48px;
 }
 
 .expandable-list-item .brief-content {
   align-items: center;
-  background-color: whitesmoke;
-  border-left: var(--expandable-list-item-border);
-  border-right: var(--expandable-list-item-border);
-  border-top: var(--expandable-list-item-border);
+  border-bottom: var(--divider-border);
+  color: white;
   cursor: pointer;
   display: flex;
   font-weight: 600;
   height: 40px;
   padding: 8px;
 }
 
-.expandable-list-item.expanded > .brief-content {
-  border-bottom: var(--expandable-list-item-border);
+.service-list-item > .brief-content {
+  background-color: var(--primary-color);
 }
 
-.expandable-list-item:nth-last-child(2) > .brief-content {
-  border-bottom: var(--expandable-list-item-border);
+.characteristic-list-item > .brief-content {
+  background-color: var(--dark-primary-color);
+}
+
+.descriptor-list-item > .brief-content {
+  background-color: var(--darker-primary-color);
 }
 
 .expandable-list-item > .expanded-content {
   height: 0;
   overflow: hidden;
 }
 
 .expandable-list-item.expanded > .expanded-content {
   height: auto;
 }
 
-.expandable-list-item .info-container {
-  padding: 0 0 8px;
+.expandable-list-item .info-container > h4,
+.expandable-list-item .info-container > div {
+  margin: var(--section-padding);
+}
+
+.empty-message {
+  padding-left: calc(2 * var(--section-padding));
 }
 
 /* Page container */
 #page-container {
   -webkit-margin-start: var(--sidebar-width);
 }
 
 @media screen and (max-width: 600px) {
   #page-container {
     -webkit-margin-start: 0;
   }
 }
 
 /* Page content */
 #page-container > section {
-  padding: 24px 16px;
+  padding: var(--section-padding);
+}
+
+#page-container .services {
+  margin: 0 calc(var(--section-padding) * -1);
 }
 
 #page-container .header-extras {
-  -webkit-margin-end: 16px;
+  -webkit-margin-end: var(--section-padding);
   -webkit-margin-start: var(--sidebar-width);
   align-items: flex-end;
   display: flex;
   height: var(--header-height);
   justify-content: flex-end;
   left: 0;
   position: fixed;
   right: 0;
   top: 0;
 }
@@ skipping 74 matching lines @@
   margin: 0;
   padding: 21px 0 18px 23px;
 }
 
 .sidebar-content ul {
   list-style-type: none;
   padding: 0;
 }
 
 .sidebar-content button {
-  -webkit-padding-start: 16px;
+  -webkit-padding-start: var(--section-padding);
   background-color: transparent;
   border: 0;
   color: #999;
   cursor: pointer;
   font: inherit;
   height: 40px;
   text-align: start;
   width: 100%;
 }
 
@@ skipping 45 matching lines @@
   width: 100%;
 }
 
 table a {
   font-size: 10pt;
   padding: 6px;
 }
 
 table th,
 table td {
-  border: 1px solid #d9d9d9;
+  border: var(--divider-border);
   padding: 7px;
 }
 
 table th {
   background-color: #f0f0f0;
   font-weight: normal;
 }
 
 table .removed {
-  background-color: #bdbdbd;
+  background-color: #e0e0e0;
 }
 
 @media screen and (max-width: 600px) {
+  table {
+    border-collapse: separate;
+    border-spacing: 0 var(--section-padding);
+  }
+
   table thead {
     display: none;
   }
 
   table td {
     display: block;
     text-align: end;
   }
 
   table td::before {
     content: attr(data-label);
     float: left;
     font-weight: bold;
   }
+
+  table th,
+  table td {
+    border-bottom: 0;
+  }
+
+  table td:last-child {
+    border-bottom: var(--divider-border);
+  }
 }
 
 /* Snackbar */
 .snackbar {
   background-color: #323232;
   border-radius: 2px;
   bottom: 0;
   color: #f1f1f1;
   display: flex;
   font-size: 1.5em;
@@ skipping 92 matching lines @@
   .flex {
     display: flex;
   }
 }
 
 /* Device Details Page */
 .device-details-page section,
 .info-container fieldset {
   -webkit-margin-start: 1em;
 }