From 8598b71a739dfbed470c135a82f515aa0a616621 Mon Sep 17 00:00:00 2001 From: narcolepticinsomniac Date: Fri, 23 Oct 2020 09:51:46 -0400 Subject: [PATCH] Options tweaks (#1077) * Options tweaks * account for last-child change --- options.html | 466 ++++++++++++++++++++++---------------------- options/options.css | 44 ++++- options/options.js | 6 +- 3 files changed, 273 insertions(+), 243 deletions(-) diff --git a/options.html b/options.html index 00f8c8b4..c7459a43 100644 --- a/options.html +++ b/options.html @@ -41,243 +41,247 @@
-
-

-
- -
-
+
-
-

-
- - -
-
- -
-

-
- - - -
-
- -
-

-
- - - - - - -
-
- -
-

-
- - - - -
-
- -
-

-
- -
-
- -
-

-
-
- -
- - +
+

+
+
+
-
- - - - +
+ +
+

+
+ + +
+
+ +
+

+
+ + + +
+
+ +
+

+
+ + + + + + +
+
+ +
+

+
+ + + + +
+
+ +
+

+
+ +
+
+ +
+

+
+
+ +
+ + +
+
+
+ + + + +
+
+
+ +
+
+

+ + + + + + +

+
+
+ + +
-
-
-
-

- - - - - - -

-
-
- - - -
diff --git a/options/options.css b/options/options.css index 9cd7032e..ff199c6a 100644 --- a/options/options.css +++ b/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 { diff --git a/options/options.js b/options/options.js index 2fc0dd81..d3d3ab01 100644 --- a/options/options.js +++ b/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; } }