ui: Stop using element IDs for styling

ui/src/main.css

@@ -84,7 +84,7 @@ a.button {
 
 /** APP */
 
-#app {
+.app {
   display: grid;
   justify-content: center;
   grid-gap: 20px;
@@ -96,7 +96,7 @@ a.button {
 }
 
 @media (max-width: 999px) {
-  #app {
+  .app {
     grid-template:
       "head head head" auto
       "lpad page rpad" 1fr
@@ -113,7 +113,7 @@ header {
   grid-area: head;
 }
 
-#page {
+.page {
   grid-area: page;
 }
 
@@ -124,7 +124,7 @@ footer {
   grid-area: foot;
 }
 
-#footer {
+.footer {
   margin: 10px auto;
 }
 
@@ -164,7 +164,7 @@ h1 {
 /** NAV BAR */
 
 .navbar,
-#navbg {
+.navbar-bg {
   height: 50px;
 }
 
@@ -176,6 +176,15 @@ h1 {
   text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
 }
 
+.navbar-bg {
+  background-color: #222;
+  background-image: linear-gradient(to bottom, #3c3c3c 0, #222 100%);
+  grid-column: 1 / 4;
+  grid-row: 1;
+  width: 100%;
+  z-index: -1;
+}
+
 .navbar li {
   color: #9d9d9d;
 }
@@ -198,20 +207,20 @@ li.navbar-active span,
   color: #ffffff;
 }
 
-#navbar-brand {
+.navbar-brand {
   font-size: 18px;
   margin-left: -15px;
 }
 
-#navbar-recent {
+.navbar-recent {
   margin: 0 auto;
 }
 
-#navbar-mailbox {
+.navbar-mailbox {
   padding: 8px 0 !important;
 }
 
-#navbar-mailbox input {
+.navbar-mailbox input {
   border: 1px solid var(--border-color);
   border-radius: 4px;
   padding: 5px 10px;
@@ -245,15 +254,6 @@ li.navbar-active span,
   background-color: var(--selected-color);
 }
 
-#navbg {
-  background-color: #222;
-  background-image: linear-gradient(to bottom, #3c3c3c 0, #222 100%);
-  grid-column: 1 / 4;
-  grid-row: 1;
-  width: 100%;
-  z-index: -1;
-}
-
 /** BUTTONS */
 
 .button-bar button {
@@ -302,7 +302,7 @@ li.navbar-active span,
   }
 }
 
-#message-list {
+.message-list {
   grid-area: list;
 }
 
@@ -339,11 +339,11 @@ li.navbar-active span,
 
 /** MESSAGE */
 
-#message {
+.message {
   grid-area: mesg;
 }
 
-#message-header {
+.message-header {
   border: 1px solid var(--border-color);
   border-radius: 4px;
   box-shadow: 0 1px 2px rgba(0,0,0,.05);
@@ -351,28 +351,28 @@ li.navbar-active span,
   margin: 10px 0;
 }
 
-#message-header dt {
+.message-header dt {
   color: var(--low-color);
   font-weight: bold;
 }
 
-#message-header dd {
+.message-header dd {
   color: var(--low-color);
   padding-left: 10px;
 }
 
 @media (min-width: 1000px) {
-  #message-header {
+  .message-header {
     display: grid;
     grid-template: auto / 5em 1fr;
   }
 
-  #message-header dt {
+  .message-header dt {
     grid-column: 1;
     text-align: right;
   }
 
-  #message-header dd {
+  .message-header dd {
     grid-column: 2;
   }
 }
@@ -427,7 +427,7 @@ nav.tab-bar a.active:hover {
 }
 
 .metric-panel h2 {
-  background-image: linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);
+  background-image: linear-gradient(to bottom, #f5f5f5 0, #e8e8e8 100%);
   font-size: 16px;
   font-weight: 500;
   padding: 10px;
@@ -458,24 +458,24 @@ nav.tab-bar a.active:hover {
 
 /** MONITOR **/
 
-#monitor {
+.monitor {
   border-collapse: collapse;
   width: 100%;
 }
 
-#monitor th {
+.monitor th {
   border-bottom: 2px solid var(--border-color);
   text-align: left;
   padding: 5px;
 }
 
-#monitor td {
+.monitor td {
   border-bottom: 1px solid var(--border-color);
   font-size: 12px;
   padding: 5px;
 }
 
-#monitor tr:hover {
+.monitor tr:hover {
   background-color: var(--selected-color);
   cursor: pointer;
 }