diff --git a/manage.html b/manage.html index d9fa2f40..78f2e6d8 100644 --- a/manage.html +++ b/manage.html @@ -93,9 +93,7 @@ @@ -356,6 +354,10 @@ + + + + diff --git a/manage/config-dialog.css b/manage/config-dialog.css index 639cc856..84849efb 100644 --- a/manage/config-dialog.css +++ b/manage/config-dialog.css @@ -1,4 +1,16 @@ -/* config dialog */ +#stylus-popup #message-box-contents { + padding: .25rem .75rem; +} + +#stylus-popup .config-body label { + padding: .5em 0; +} + +#stylus-popup .config-body label > :first-child { + max-width: 140px; + min-width: 140px; +} + .config-heading { float: right; margin: -1.25rem 0 0 0; @@ -36,11 +48,6 @@ cursor: default; } -.config-body label:not([disabled]):hover > :first-child { - text-shadow: 0 0 0.01px rgba(0, 0, 0, .25); - cursor: pointer; -} - .config-dialog .dirty:after { content: "*"; position: absolute; @@ -56,11 +63,12 @@ .config-body .onoffswitch { width: var(--onoffswitch-width); margin: 0; - height: 2em; + height: 22px; box-sizing: border-box; vertical-align: middle; } +.config-body input[type="text"], .config-body .select-resizer, .config-body select { width: auto; diff --git a/manage/config-dialog.js b/manage/config-dialog.js index 53043e20..ec38aaab 100644 --- a/manage/config-dialog.js +++ b/manage/config-dialog.js @@ -75,7 +75,7 @@ function configDialog(style) { if (va) { va.dirty = varsInitial[va.name] !== (isDefault(va) ? va.default : va.value); if (prefs.get('config.autosave')) { - debounce(save, 100); + debounce(save); } else { target.closest('label').classList.toggle('dirty', va.dirty); updateButtons(); @@ -272,10 +272,10 @@ function configDialog(style) { } function adjustSizeForPopup(box) { - box.style = 'white-space: nowrap !important'; - box.firstElementChild.style = 'max-width: none; max-height: none;'.replace(/;/g, '!important;'); - const {offsetWidth, offsetHeight} = box.firstElementChild; - box.style = box.firstElementChild.style = ''; + const contents = box.firstElementChild; + contents.style = 'max-width: none; max-height: none;'.replace(/;/g, '!important;'); + let {offsetWidth: width, offsetHeight: height} = contents; + contents.style = ''; const colorpicker = document.body.appendChild( $create('.colorpicker-popup', {style: 'display: none!important'})); @@ -283,8 +283,8 @@ function configDialog(style) { const MIN_HEIGHT = 250; colorpicker.remove(); - const width = Math.max(Math.min(offsetWidth / 0.9 + 2, 800), MIN_WIDTH); - const height = Math.max(Math.min(offsetHeight / 0.9 + 2, 600), MIN_HEIGHT); + width = Math.max(Math.min(width / 0.9 + 2, 800), MIN_WIDTH); + height = Math.max(Math.min(height / 0.9 + 2, 600), MIN_HEIGHT); document.body.style.setProperty('min-width', width + 'px', 'important'); document.body.style.setProperty('min-height', height + 'px', 'important'); } diff --git a/manage/manage.css b/manage/manage.css index a93295f3..1e32f78c 100644 --- a/manage/manage.css +++ b/manage/manage.css @@ -139,7 +139,7 @@ select { margin-left: .5ex; } -.svg-icon.configure { +.svg-icon.config { width: 16px; height: 16px; } diff --git a/popup.html b/popup.html index c1c725b9..9a735188 100644 --- a/popup.html +++ b/popup.html @@ -33,9 +33,7 @@ - - - + @@ -156,6 +154,18 @@ + + + + + + + + + + + + diff --git a/popup/popup.js b/popup/popup.js index ef3c8e1b..3041696f 100644 --- a/popup/popup.js +++ b/popup/popup.js @@ -282,6 +282,7 @@ function createStyleElement({ if (!style.usercssData && style.updateUrl && style.updateUrl.includes('?') && style.url) { config.href = style.url; config.target = '_blank'; + $('use', config).attributes['xlink:href'].nodeValue = '#svg-icon-config-uso'; } else if (!style.usercssData || !Object.keys(style.usercssData.vars || {}).length) { config.style.display = 'none'; }