Styling improvements.

* RobotoDraft font is actually used if available.
* Header bar is thinner.
* Plugin card headers are thinner.

resources/report/css/overrides.css

@@ -78,13 +78,6 @@ html /deep/ paper-dropdown > div {
     transform-style: preserve-3d;
 }
 
-/* This makes paper-menu-button icons align like paper-icon-buttons do. */
-html /deep/ paper-menu-button > paper-icon-button,
-html /deep/ core-tooltip > paper-icon-button,
-html /deep/ core-tooltip > core-icon {
-    display: block;
-}
-
 /* Center paper-dropdown-menu text better. */
 html /deep/ paper-dropdown-menu {
     padding-top: 0;

resources/report/css/style.css

@@ -25,7 +25,7 @@
     background: inherit;
 }
 body {
-    font:10pt/1.5 Helvetica,sans-serif;
+    font: 10pt/1.5 RobotoDraft, Helvetica, sans-serif;
     margin:0;
     background:#f8f8f8;
     height: 100%;
@@ -34,13 +34,13 @@ body {
     background: #4285f4;
     color: white;
     width: 99.99vw;  /* Fix for scollbars when LOOT is run through Mod Organiser. */
+    height: 56px;
 }
 #mainToolbar paper-dropdown {
     color: black;
 }
 #sidebarTabs {
     width: calc(33% - 68px);
-    height: 64px;
 }
 
 div[drawer] > core-tooltip {
@@ -76,8 +76,8 @@ paper-item > a {
 }
 #container {
     position: fixed;
-    top: 64px;
-    height: calc(100% - 64px);
+    top: 56px;
+    height: calc(100% - 56px);
 }
 
 section {

resources/report/html/loot-plugin-card.html

@@ -58,9 +58,6 @@ loot-clear-metadata
         :host([data-edits=false]) #hasUserEdits {
             display: none;
         }
-        #front {
-            padding-bottom: 1em;
-        }
         #front, #editor {
             display: block;
         }
@@ -89,12 +86,14 @@ loot-clear-metadata
         }
 
         /* Content styling. */
-        ::content .tag.add, ::content .tag.remove, ::content ul {
-            padding: 0 1em;
+        ::content .tag, ::content ul {
+            padding: 0 1em 1em;
         }
         ::content h1, h1 {
+            display: inline-block;
             font-weight: normal;
             font-size: 1em;
+            margin: 0;
         }
         ::content .version, .version {
             display: inline-block;
@@ -112,7 +111,12 @@ loot-clear-metadata
 
         /* Misc Styling. */
         core-toolbar {
-            background: white;
+            background: inherit;
+            height: 56px;
+        }
+        core-toolbar > div {
+            position: relative;
+            top: -0.15em;
         }
         paper-item:first-child::shadow .button-content {
             padding: 0;
@@ -120,6 +124,9 @@ loot-clear-metadata
         paper-checkbox {
             padding: 0.9em 1em;
         }
+        core-icon {
+            vertical-align: inherit !important;
+        }
         </style>
         <div id="wrapper">
             <section id="front">
@@ -127,9 +134,11 @@ loot-clear-metadata
                     <core-tooltip id="activeTick" label="Active Plugin">
                         <core-icon icon="check"></core-icon>
                     </core-tooltip>
-                    <content select="h1"></content>
-                    <content select=".version"></content>
-                    <span flex><content select=".crc"></content></span>
+                    <div flex>
+                        <content select="h1"></content>
+                        <content select=".version"></content>
+                        <content select=".crc"></content>
+                    </div>
                     <core-tooltip id="dummyPlugin" label="Dummy Plugin">
                         <core-icon icon="visibility-off"></core-icon>
                     </core-tooltip>

resources/report/html/loot-plugin-editor.html

@@ -113,6 +113,11 @@ loot-editor-close
         /* Misc Styling. */
         core-toolbar {
             background: white;
+            height: 56px;
+        }
+        core-toolbar > h1, core-toolbar > span {
+            position: relative;
+            top: -0.15em;
         }
         #buttons {
             text-align: right;
@@ -123,6 +128,9 @@ loot-editor-close
         main > core-tooltip, main > paper-checkbox {
             display: table;
         }
+        core-icon {
+            vertical-align: inherit !important;
+        }
         </style>
         <core-toolbar>
             <core-tooltip id="activeTick" label="Active Plugin">

resources/report/html/loot-plugin-item.html

@@ -19,6 +19,9 @@
             margin: 0.25em;
             min-width: 24px;
         }
+        core-icon {
+            display: block;
+        }
         div {
             padding-left: 0.75em;
         }