diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 7e4ca834..de700493 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -1087,10 +1087,7 @@ "message": "Popup width (in pixels)" }, "optionsUpdateInterval": { - "message": "Automatically check for and install all available userstyle updates (in hrs)" - }, - "optionsUpdateIntervalNote": { - "message": "To disable the automatic userstyle update checks, set interval to 0" + "message": "Userstyle autoupdate interval in hours (specify 0 to disable)" }, "optionsUpdateImportNote": { "message": "When importing style backups from old version or from Stylish, do a one-time check for updates manually in the styles manager to ensure all styles are updated." diff --git a/options.html b/options.html index 3863bb90..8b00b659 100644 --- a/options.html +++ b/options.html @@ -105,11 +105,11 @@ -
+

-
@@ -128,7 +128,8 @@
-
-
    -
  1. -

    -

    -
  2. -
  3. -
-
- diff --git a/options/options.css b/options/options.css index f14b8e1b..82584316 100644 --- a/options/options.css +++ b/options/options.css @@ -13,17 +13,12 @@ html.firefox .block { padding-left: 6px; } -html.firefox #notes { - padding-left: calc(6px + 2ex); -} - body { background: #fff; margin: 0; font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 12px; - width: 480px; - min-width: 400px; + min-width: 480px; max-width: 800px; } @@ -145,11 +140,22 @@ input[type="color"] { #actions { justify-content: space-around; align-items: stretch; - padding-right: 8px; + padding: 1em; + white-space: nowrap; + background-color: hsl(0, 0%, 94%); + margin: 0; +} + +.firefox #actions, +.opera #actions { + background-color: transparent; } #actions button { width: auto; +} + +#actions button:not(:last-child) { margin-right: 8px; } @@ -190,13 +196,21 @@ input[type="color"] { } #advanced.collapsible.collapsed { - height: 40px; + height: 30px; padding: 0; margin: 0; justify-content: center; } -html:not(.firefox):not(.opera) #options > .block:nth-last-of-type(3) { +#updates span { + white-space: pre-wrap; +} + +html:not(.firefox):not(.opera) #updates { + margin-bottom: 0; +} + +#advanced.collapsible:not(.collapsed) { margin-bottom: 0; } @@ -264,45 +278,19 @@ html:not(.firefox):not(.opera) #options > .block:nth-last-of-type(3) { display: none; } -#notes { - background-color: #f4f4f4; - padding: 1.5ex 16px 1ex calc(16px + 2ex); - font-size: 90%; - color: #777; -} - -#notes ol { - margin: 0; - padding: 0; -} - -#notes li:not(last-child) { - margin-bottom: 1ex; -} - -#notes a { - color: inherit; -} - -#notes a:hover { - color: black; -} - -#notes p { - line-height: 1.25; - margin-top: 1ex; - margin-bottom: 1ex; -} - -sup { - vertical-align: baseline; - position: relative; - top: -0.4em; -} - @keyframes fadeinout { 0% { opacity: 0 } 10% { opacity: 1 } 25% { opacity: 1 } 100% { opacity: 0 } } + +@media (hover: none) { + .expanded-note { + font-size: 90%; + white-space: normal; + color: #666; + margin-top: .5em; + hyphens: auto; + } +} diff --git a/options/options.js b/options/options.js index aec49a12..42e2d03e 100644 --- a/options/options.js +++ b/options/options.js @@ -3,6 +3,7 @@ setupLivePrefs(); setupRadioButtons(); enforceInputRange($('#popupWidth')); +setTimeout(splitLongTooltips); if (!FIREFOX && !OPERA) { const block = $('#advanced'); @@ -42,6 +43,14 @@ document.onclick = e => { .filter(input => input.id in prefs.readOnlyValues) .forEach(input => prefs.reset(input.id)); break; + + case 'note': { + const tooltip = (target.closest('[title]') || {}).title; + if (tooltip && 'ontouchstart' in document) { + e.preventDefault(); + target.parentNode.replaceChild($create('.expanded-note', tooltip), target); + } + } } }; @@ -95,3 +104,19 @@ function setupRadioButtons() { sets[key][value].checked = true; }); } + +function splitLongTooltips() { + for (const el of $$('[title]')) { + if (el.title.length < 50) { + continue; + } + const newTitle = el.title + .split('\n') + .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.title = newTitle; + } + } +}