From 0dfd6680f8b132e2bc61523bfd29a132928f8a4b Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sun, 27 Jan 2019 21:32:35 -0600
Subject: [PATCH] Fix a few style issues

---
 manage.html         | 120 ++++++++++++++++++++++----------------------
 manage/manage.css   |  36 ++++++++-----
 manage/tooltips.css |   1 +
 options.html        |  16 +++---
 4 files changed, 91 insertions(+), 82 deletions(-)

diff --git a/manage.html b/manage.html
index 54590405..0b002f61 100644
--- a/manage.html
+++ b/manage.html
@@ -411,68 +411,66 @@
   </div>
 
   <div id="bulk-actions" class="manage-row">
-    <div>
-      <label class="checkmate toggle-all" tabindex="0">
-        <input id="toggle-all-filters" type="checkbox">
-        <svg class="svg-icon checkbox"viewBox="0 0 10 10">
-          <path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
-          <path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
-          <path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
-          <path class="indeterminate" d="M2.5 4.5h5v1h-5v-1z"/>
-        </svg>
-      </label>
-      <span id="bulk-filter-count"></span>
-      <span i18n-text="bulkActions"></span>
-      <span class="select-resizer bulk-actions-select-wrapper">
-        <select id="bulk-actions-select">
-          <option i18n-text="bulkActionsSelect" value=""></option>
-          <option i18n-text="enableStyleLabel" value="enable"></option>
-          <option i18n-text="disableStyleLabel" value="disable"></option>
-          <option i18n-text="exportLabel" value="export"></option>
-          <option i18n-text="checkForUpdate" value="update"></option>
-          <!-- Plan: Reset UserCSS variables -->
-          <!-- <option i18n-text="genericResetLabel" value="reset"></option> -->
-          <option i18n-text="deleteStyleLabel" value="delete"></option>
-        </select>
-        <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
-      </span>
-      <button id="bulk-actions-apply" i18n-text="bulkActionsApply" class="tt-e" disabled>
-        <span id="update-progress"></span>
-      </button>
-      <span id="bulk-info">
-        <!-- Bulk update -->
-        <span data-bulk="update">
-          <button id="apply-all-updates" class="hidden" i18n-text="applyAllUpdates"></button>
-          <span id="update-all-no-updates" class="tt-e hidden" i18n-text="updateAllCheckSucceededNoUpdate"></span>
-          <button id="check-all-updates-force" class="hidden" i18n-text="checkAllUpdatesForce"></button>
-        </span>
-
-        <!-- Bulk export -->
-        <span data-bulk="export" class="dropdown export hidden">
-          Export to:
-          <span class="select-resizer">
-            <select id="manage.export.destination">
-              <option value="local" i18n-text="bckpInstStyles"></option>
-              <option value="dropbox" i18n-text="syncDropboxStyles"></option>
-            </select>
-            <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
-          </span>
-        </span>
-
-      </span>
-
-      <svg class="svg-icon busy hidden" viewBox="0 0 24 24">
-        <path d="M12 23h-1v-6.57A5.97 5.97 0 0 1 7 18c-3.25 0-6-2.75-6-6v-1h6.57A5.97 5.97 0 0 1 6
-          7c0-3.25 2.75-6 6-6h1v6.57A5.97 5.97 0 0 1 17 6c3.25 0 6 2.75 6 6v1h-6.57A5.97 5.97 0 0 1
-          18 17c0 3.25-2.75 6-6 6zm1-9.87v7.74c1.7-.46 3-2.04 3-3.87s-1.3-3.41-3-3.87zM3.13 13c.46
-          1.7 2.04 3 3.87 3s3.41-1.3 3.87-3H3.13zm10-2h7.74c-.46-1.7-2.05-3-3.87-3s-3.41 1.3-3.87
-          3zM11 3.13C9.3 3.59 8 5.18 8 7s1.3 3.41 3 3.87V3.13z"/>
-        <!-- supported everwhere?
-          <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 0 0"
-            to="360 0 0" dur="1s" repeatCount="indefinite"/>
-        -->
+    <label class="checkmate toggle-all" tabindex="0">
+      <input id="toggle-all-filters" type="checkbox">
+      <svg class="svg-icon checkbox"viewBox="0 0 10 10">
+        <path class="filled-circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86z"/>
+        <path class="circle" d="M5 .86a4.14 4.14 0 0 0 0 8.28A4.14 4.14 0 1 0 5 .86zm0 7.5a3.36 3.36 0 1 1 0-6.72 3.36 3.36 0 0 1 0 6.72z"/>
+        <path class="checkmark" d="M6.86 3.21L4.14 5.93 3.07 4.86l-.57.57 1.64 1.71L7.5 3.8l-.64-.58z"/>
+        <path class="indeterminate" d="M2.5 4.5h5v1h-5v-1z"/>
       </svg>
-    </div>
+    </label>
+    <span id="bulk-filter-count"></span>
+    <span i18n-text="bulkActions"></span>
+    <span class="select-resizer bulk-actions-select-wrapper">
+      <select id="bulk-actions-select">
+        <option i18n-text="bulkActionsSelect" value=""></option>
+        <option i18n-text="enableStyleLabel" value="enable"></option>
+        <option i18n-text="disableStyleLabel" value="disable"></option>
+        <option i18n-text="exportLabel" value="export"></option>
+        <option i18n-text="checkForUpdate" value="update"></option>
+        <!-- Plan: Reset UserCSS variables -->
+        <!-- <option i18n-text="genericResetLabel" value="reset"></option> -->
+        <option i18n-text="deleteStyleLabel" value="delete"></option>
+      </select>
+      <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+    </span>
+    <button id="bulk-actions-apply" i18n-text="bulkActionsApply" class="tt-e" disabled>
+      <span id="update-progress"></span>
+    </button>
+    <span id="bulk-info">
+      <!-- Bulk update -->
+      <span data-bulk="update">
+        <button id="apply-all-updates" class="hidden" i18n-text="applyAllUpdates"></button>
+        <span id="update-all-no-updates" class="tt-e hidden" i18n-text="updateAllCheckSucceededNoUpdate"></span>
+        <button id="check-all-updates-force" class="hidden" i18n-text="checkAllUpdatesForce"></button>
+      </span>
+
+      <!-- Bulk export -->
+      <span data-bulk="export" class="dropdown export hidden">
+        Export to:
+        <span class="select-resizer">
+          <select id="manage.export.destination">
+            <option value="local" i18n-text="bckpInstStyles"></option>
+            <option value="dropbox" i18n-text="syncDropboxStyles"></option>
+          </select>
+          <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
+        </span>
+      </span>
+
+    </span>
+
+    <svg class="svg-icon busy hidden" viewBox="0 0 24 24">
+      <path d="M12 23h-1v-6.57A5.97 5.97 0 0 1 7 18c-3.25 0-6-2.75-6-6v-1h6.57A5.97 5.97 0 0 1 6
+        7c0-3.25 2.75-6 6-6h1v6.57A5.97 5.97 0 0 1 17 6c3.25 0 6 2.75 6 6v1h-6.57A5.97 5.97 0 0 1
+        18 17c0 3.25-2.75 6-6 6zm1-9.87v7.74c1.7-.46 3-2.04 3-3.87s-1.3-3.41-3-3.87zM3.13 13c.46
+        1.7 2.04 3 3.87 3s3.41-1.3 3.87-3H3.13zm10-2h7.74c-.46-1.7-2.05-3-3.87-3s-3.41 1.3-3.87
+        3zM11 3.13C9.3 3.59 8 5.18 8 7s1.3 3.41 3 3.87V3.13z"/>
+      <!-- supported everwhere?
+        <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 0 0"
+          to="360 0 0" dur="1s" repeatCount="indefinite"/>
+      -->
+    </svg>
   </div>
 
 </div>
diff --git a/manage/manage.css b/manage/manage.css
index bfb0024f..c1670eb9 100644
--- a/manage/manage.css
+++ b/manage/manage.css
@@ -49,7 +49,7 @@ body.dark {
 
 a,
 .disabled a:hover {
-  color: #000;
+  color: #3c3c3c;
   transition: color .5s;
 }
 
@@ -58,7 +58,7 @@ a {
 }
 
 a:hover {
-  color: #666;
+  color: #000;
 }
 
 .invisible {
@@ -110,6 +110,17 @@ a:hover {
   margin-left: 2px;
 }
 
+#bulk-actions {
+  justify-content: flex-start;
+}
+
+#bulk-info > span,
+#bulk-info button {
+  display: flex;
+  align-items: center;
+  margin-left: 4px;
+}
+
 #bulk-actions .svg-icon.busy:not(.hidden) {
   -webkit-animation:spin 1s linear infinite;
   -moz-animation:spin 1s linear infinite;
@@ -186,7 +197,6 @@ a:hover {
 #installed .entry,
 #installed .entry-header {
   width: 100%;
-  line-height: var(--entry-height);
   display: flex;
   flex: 0 0 var(--narrow-column);
   flex-flow: row nowrap;
@@ -222,6 +232,7 @@ body.all-styles-hidden-by-filters #installed:after {
   padding-left: 4px;
   flex: 1;
   justify-content: space-evenly;
+  line-height: var(--entry-height);
 }
 
 .center-text,
@@ -237,7 +248,7 @@ body.all-styles-hidden-by-filters #installed:after {
 .header-last-update,
 .entry-last-update {
   /* inlcude update history link */
-  max-width: calc(var(--narrow-column) + 20px);
+  max-width: calc(var(--narrow-column) + 30px);
 }
 
 /* keep all icons on the same row */
@@ -272,8 +283,9 @@ body.all-styles-hidden-by-filters #installed:after {
   overflow-wrap: break-word;
   font-weight: 600;
   text-decoration: none;
-  margin-right: 8px;
-  padding: 8px 0;
+  margin: auto 8px auto 0;
+  padding: 0;
+  align-self: normal;
 }
 
 .entry-name-text {
@@ -346,7 +358,9 @@ body.all-styles-hidden-by-filters #installed:after {
 
 .applies-to-extra-expander {
   text-decoration: none;
-  font-size: 1.5em;
+  font-size: 1.3em;
+  font-weight: bold;
+  line-height: normal;
 }
 
 .targets .target img,
@@ -400,7 +414,7 @@ body.all-styles-hidden-by-filters #installed:after {
   padding: 2px 4px;
   margin-left: 2px;
   border-radius: 4px;
-  font-size: .8em;
+  font-size: .75em;
   text-transform: lowercase;
 }
 
@@ -640,10 +654,6 @@ a svg, .svg-icon.sort {
   opacity: .35;
 }
 
-#check-all-updates-force {
-  margin-top: 1ex;
-}
-
 #update-all-no-updates[data-skipped-edited="true"] {
   font-weight: bold;
 }
@@ -661,7 +671,7 @@ a svg, .svg-icon.sort {
   top: var(--header-height);
   left: 0;
   height: var(--toolbar-height);
-  padding: 4px 16px;
+  padding: 4px 0;
   z-index: 100;
 }
 
diff --git a/manage/tooltips.css b/manage/tooltips.css
index 1707d8c5..9f001fc1 100644
--- a/manage/tooltips.css
+++ b/manage/tooltips.css
@@ -19,6 +19,7 @@
   color: var(--tooltip-text);
   content: attr(data-title);
   font-size: 12px;
+  line-height: 1.5em;
   letter-spacing: normal;
   padding: .5em .75em;
   text-align: center;
diff --git a/options.html b/options.html
index 0a02e415..0d8dc55a 100644
--- a/options.html
+++ b/options.html
@@ -132,10 +132,10 @@
         <label>
           <span i18n-text="optionsUpdateInterval">
             <a data-cmd="note"
-               i18n-title="optionsUpdateImportNote"
-               href="#"
-               class="svg-inline-wrapper"
-               tabindex="0">
+              i18n-title="optionsUpdateImportNote"
+              href="#"
+              class="svg-inline-wrapper"
+              tabindex="0">
               <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
             </a>
           </span>
@@ -187,10 +187,10 @@
         <label>
           <span i18n-text="optionsAdvancedExposeIframes">
             <a data-cmd="note"
-               i18n-title="optionsAdvancedExposeIframesNote"
-               href="#"
-               class="svg-inline-wrapper"
-               tabindex="0">
+              i18n-title="optionsAdvancedExposeIframesNote"
+              href="#"
+              class="svg-inline-wrapper"
+              tabindex="0">
               <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
             </a>
           </span>