diff --git a/manage/manage.css b/manage/manage.css index c48c1604..c6e56c8c 100644 --- a/manage/manage.css +++ b/manage/manage.css @@ -79,7 +79,6 @@ select { #header h1 { margin-top: 0; - margin-bottom: .3em; } #header a[href^="edit"] { @@ -91,16 +90,25 @@ select { margin-bottom: .25em; } -#add-style-as-usercss-wrapper { - display: inline-flex; -} - -#add-style-as-usercss-wrapper:not(:hover) input:not(:checked) ~ a svg { +#newStyleAsUsercss-wrapper:not(:hover) input:not(:checked) ~ a svg { fill: #aaa; } #usercss-wiki svg { - margin-top: -4px; + margin-top: -2px; +} + +.nobreak { + white-space: nowrap; +} + +label.nobreak input { + vertical-align: sub; + margin: 0; +} + +.firefox .chromium-only { + display: none; } #installed { @@ -139,7 +147,7 @@ select { margin-left: .5ex; } -.svg-icon.config { +.svg-icon.configure { width: 16px; height: 16px; } @@ -256,24 +264,9 @@ select { } /* collapsibles */ -#header details:not(#filters), -#add-style-wrapper { - padding-bottom: .7em; -} -#add-style-wrapper, -#options :last-child, -#backup :last-child { - margin-bottom: 0; -} - -#header details:not([open]), #header details:not([open]) h2 { - padding-bottom: 0; -} - -#header details[open] summary { - padding-bottom: .5em; + margin-bottom: -.25em; } #header summary { @@ -281,6 +274,7 @@ select { margin-left: -13px; cursor: pointer; outline: none; + margin-bottom: 8px; } #header summary h2 { @@ -332,7 +326,6 @@ select { .filter-selection { position: relative; - left: -9px; } #header label { @@ -353,6 +346,10 @@ select { margin-top: -2px; } +.firefox #header .filter-selection label .checkmate { + margin: 0; +} + .newUI #newUIoptions > label { padding-left: 0; } @@ -364,7 +361,10 @@ select { max-width: 100%; padding-left: 4px; padding-right: 14px; - margin-left: 4px; +} + +.firefox .filter-selection select { + padding-left: 0; } .filter-selection .select-arrow { @@ -382,23 +382,20 @@ select { left: 16px; } -#filters label, -#filters .filter-selection { +.firefox .select-resizer { + left: 16px; +} + +fieldset > label, +fieldset > .filter-selection { transition: background-color .25s; } -#filters label:hover, -#filters .filter-selection:hover { +fieldset > label:hover, +fieldset > .filter-selection:hover { background-color: hsla(0, 0%, 50%, .2); } -#only-updates { - position: relative; - left: -5px; - margin-top: 2px; - margin-bottom: 2px; -} - .checkmate { position: relative; height: 12px; @@ -649,7 +646,6 @@ select { align-items: center; margin-bottom: auto; flex-wrap: wrap; - position: relative; } #newUIoptions input[type="number"] { @@ -657,18 +653,6 @@ select { margin-right: .5em; } -#newUIoptions [data-toggle-on-click] { - transform: rotate(-90deg); - cursor: pointer; - right: -16px; - top: 0; - pointer-events: auto; -} - -#newUIoptions [data-toggle-on-click][open] { - transform: none; -} - input[id^="manage.newUI"] { margin-left: 0; } @@ -767,14 +751,26 @@ input[id^="manage.newUI"] { display: none !important; } -#filters label { +fieldset { + border-width: 1px; + border-radius: 6px; + margin: 1em 0; + min-width: 0; + max-width: 250px; +} + +fieldset > input, +fieldset > label { display: flex; align-items: center; +} + +#header fieldset > label { padding-left: 20px; } -#filters label input[type="checkbox"]:not(.slider), -#filters label input[type="checkbox"]:not(.slider):checked + .svg-icon.checked{ +#header fieldset > label input[type="checkbox"]:not(.slider), +#header fieldset > label input[type="checkbox"]:not(.slider):checked + .svg-icon.checked{ left: 4px; } @@ -782,80 +778,34 @@ input[id^="manage.newUI"] { border: 1px solid transparent; } -#filters summary h2 { - margin-left: -4px; -} - -.active #filters-stats { +#filters.active { background-color: darkcyan; border-color: darkcyan; color: white; - font-size: 0.7rem; - font-weight: normal; - padding: 2px 5px; - position: relative; - top: -2px; } -#reset-filters { - position: absolute; - margin-top: 2px; - fill: hsla(180, 50%, 27%, .5); - width: 24px; /* widen the click area a bit */ - height: 20px; - padding: 2px; - box-sizing: border-box; -} - -#reset-filters:hover { - fill: hsla(180, 50%, 27%, 1); -} - -#filters summary:not(.active) #reset-filters, -#filters summary:not(.active) #filters-stats { +#filters:not(.active) #filters-stats { display: none; } -#search-wrapper { - display: flex; - align-items: center; - flex-wrap: wrap; +#filters-stats::before { + content: ": "; } #search { - flex-grow: 1; - margin: 0.25rem 0 0; - padding-left: 0.25rem; - border-width: 1px; -} - -#search-wrapper .info { - margin: 4px -5px 0 8px; -} - -#message-box.help-text > div { - max-width: 26rem; -} -.help-text li:not(:last-child) { - margin-bottom: 1em; -} - -.help-text mark { - background-color: rgba(128, 128, 128, .15); - color: currentColor; - padding: 2px 6px; - font-weight: bold; - font-family: monospace; - border: 1px solid rgba(128, 128, 128, .25); - display: inline-block; - margin: 2px; -} - -.help-text mark.last { - display: block; - width: -moz-min-content; - width: min-content; - white-space: nowrap; + -webkit-appearance: none; + -moz-appearance: none; + background: #fff; + position: relative; + height: 19px; + box-sizing: border-box; + padding: 2px 3px 3px 4px; + font: 400 13.3333px Arial; + color: #000; + border: 1px solid hsl(0, 0%, 66%); + width: calc(100% - 4px); + margin: 0.25rem 4px 0; + border-radius: 0.25rem; } #import ul { @@ -918,6 +868,109 @@ input[id^="manage.newUI"] { text-overflow: ellipsis; } +/* config dialog */ +.config-dialog .config-heading { + float: right; + margin: -1.25rem 0 0 0; + font-size: 0.9em; +} + +.config-dialog label { + display: flex; + padding: .75em 0; + align-items: center; +} + +.config-dialog .select-resizer { + position: static; +} + +.config-dialog label:first-child { + padding-top: 0; +} + +.config-dialog label:last-child { + padding-bottom: 0; +} + +.config-dialog label:not(:first-child) { + border-top: 1px dotted #ccc; +} + +.config-dialog label > :first-child { + margin-right: 8px; + flex-grow: 1; +} + +.config-dialog label:not([disabled]) > :first-child { + cursor: default; +} + +.config-dialog label:not([disabled]):hover > :first-child { + text-shadow: 0 0 0.01px rgba(0, 0, 0, .25); + cursor: pointer; +} + +.config-dialog input, +.config-dialog select, +.config-dialog .onoffswitch { + width: var(--onoffswitch-width); + margin: 0; + height: 2em; + box-sizing: border-box; + vertical-align: middle; +} + +.config-dialog .select-resizer, +.config-dialog select { + width: auto; + min-width: var(--onoffswitch-width); + max-width: 124px; + left: auto; + position: relative; +} + +.config-dialog .onoffswitch { + height: auto; + margin: calc((2em - 12px) / 2) 0; +} + +.config-dialog input[type="text"] { + padding-left: 0.25em; +} + +.config-dialog label > :last-child { + box-sizing: border-box; + flex-shrink: 0; +} + +.config-dialog label > :last-child:not(.onoffswitch):not(.select-resizer) > :not(:last-child) { + margin-right: 4px; +} + +.cm-colorview::before, +.color-swatch { + width: var(--onoffswitch-width) !important; + height: 20px !important; +} + +.cm-colorview::before { + margin: 1px !important; +} + +.color-swatch { + position: absolute; + border: 1px solid gray; + margin-top: -22px; + cursor: pointer; +} + +.colorpicker-popup { + z-index: 2147483647 !important; + border: none !important; + box-shadow: 3px 3px 50px rgba(0,0,0,.5) !important; +} + @keyframes fadein { from { opacity: 0; @@ -965,7 +1018,8 @@ input[id^="manage.newUI"] { margin-right: 1em; } - #backup p { + #backup p, + #header fieldset { margin: 0; } @@ -1006,6 +1060,12 @@ input[id^="manage.newUI"] { padding-left: 0; } + fieldset { + max-width: none; + margin-top: 0; + margin-right: 2em; + } + #header h1, #header h2, #header h3, @@ -1035,10 +1095,21 @@ input[id^="manage.newUI"] { .newUI #header > *:not(h1), .newUI #newUIoptions, - #newUIoptions > * { + #newUIoptions > *, + fieldset label { display: inline; } + fieldset { + border: none; + margin: 0; + padding: 0 0 1em; + } + + fieldset legend { + display: none; + } + #header label { white-space: nowrap; } @@ -1047,29 +1118,3 @@ input[id^="manage.newUI"] { word-break: break-all; } } - -@supports (-moz-appearance: none) { - .chromium-only { - display: none; - } - - #header .filter-selection label .checkmate { - margin: 0; - } - - .filter-selection select { - padding-left: 0; - } - - .select-resizer { - left: 16px; - } - - #reset-filters { - margin-top: 4px; - } - - #filters summary h2 { - margin-left: -2px; - } -}