Options tweaks (#1077)

* Options tweaks

* account for last-child change

options.html

@@ -41,13 +41,15 @@
 
   <div id="options">
 
+    <div class="options-wrapper">
+
       <div class="block">
         <h1 i18n-text="cm_theme"></h1>
         <div class="items">
-        <label>
+          <div class="label">
             <a i18n-text="optionsStylusThemes" target="_blank"
                href="https://33kk.github.io/uso-archive/?category=chrome-extension&search=Stylus"></a>
-        </label>
+          </div>
         </div>
       </div>
       
@@ -280,6 +282,8 @@
         </div>
       </div>
 
+    </div>
+
     <div class="block" id="actions">
       <button data-cmd="reset" i18n-text="optionsResetButton" i18n-title="optionsReset"></button>
       <button data-cmd="open-manage" i18n-text="styleCancelEditLabel"></button>

options/options.css

@@ -27,9 +27,38 @@ body.scaleout {
 
 #options {
   background: #fff;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.options-wrapper {
   overflow-y: auto;
 }
 
+a {
+  color: #000;
+  transition: color .5s;
+}
+
+a:hover {
+  color: #666;
+}
+
+.svg-icon {
+  fill: #666;
+  transition: fill .5s;
+}
+
+a:hover .svg-icon,
+.svg-icon:hover {
+  fill: #000;
+}
+
+.svg-inline-wrapper .svg-icon {
+  pointer-events: none;
+}
+
 #options-close-icon .svg-icon {
   fill: #666;
   transition: fill .5s;
@@ -91,13 +120,9 @@ body.scaleout {
   position: relative;
 }
 
-.block:nth-last-child(2) {
+.options-wrapper .block:last-child {
   margin-bottom: 0;
-}
-
-.block:last-child {
   border-bottom: none;
-  padding-bottom: 0;
 }
 
 .collapsed, .collapsible h1 {
@@ -139,15 +164,16 @@ label,
 label > :first-child {
   margin-right: 8px;
   flex-grow: 1;
+  transition: text-shadow: .1s;
 }
 
-label:not([disabled]) > :first-child {
-  cursor: default;
+label:not([disabled]),
+label:not([disabled]) :not([type="number"]) {
+  cursor: pointer;
 }
 
 label:not([disabled]):hover > :first-child {
   text-shadow: 0 0 0.01px rgba(0, 0, 0, .25);
-  cursor: pointer;
 }
 
 input[type=number],
@@ -201,6 +227,8 @@ input[type="color"] {
   white-space: nowrap;
   background-color: rgba(0, 0, 0, .05);
   margin: 0;
+  border-top: 1px solid #999;
+  border-bottom: none;
 }
 
 #actions button {

options/options.js

@@ -245,6 +245,7 @@ function setupRadioButtons() {
 
 function splitLongTooltips() {
   for (const el of $$('[title]')) {
+    el.dataset.title = el.title;
     if (el.title.length < 50) {
       continue;
     }
@@ -253,10 +254,7 @@ function splitLongTooltips() {
       .map(s => s.replace(/([^.][.。?!]|.{50,60},)\s+/g, '$1\n'))
       .map(s => s.replace(/(.{50,80}(?=.{40,}))\s+/g, '$1\n'))
       .join('\n');
-    if (newTitle !== el.title) {
-      el.dataset.title = el.title;
-      el.title = newTitle;
-    }
+    if (newTitle !== el.title) el.title = newTitle;
   }
 }