diff --git a/emhttp/plugins/dynamix/styles/default-dynamix.css b/emhttp/plugins/dynamix/styles/default-dynamix.css index 9138a146a..846934683 100644 --- a/emhttp/plugins/dynamix/styles/default-dynamix.css +++ b/emhttp/plugins/dynamix/styles/default-dynamix.css @@ -214,67 +214,7 @@ display: none; } } -.ui-dropdownchecklist { - background-color: transparent; - background-image: linear-gradient(66.6deg, transparent 60%, var(--dynamix-ui-dropdownchecklist-color) 40%), - linear-gradient(113.4deg, var(--dynamix-ui-dropdownchecklist-color) 40%, transparent 60%); - background-position: calc(100% - 4px), 100%; - background-size: - 4px 6px, - 4px 6px; - background-repeat: no-repeat; - border: none; - box-shadow: 0 1px 0 var(--dynamix-ui-dropdownchecklist-color); - outline: none; - height: 2.5rem; - line-height: 2.5rem; - cursor: pointer; -} -.ui-dropdownchecklist-selector { - border: none; - border-bottom: 1px solid var(--dynamix-ui-dropdownchecklist-color); - outline: none; - display: inline-block; - cursor: pointer; - padding: 1px 0; -} -.ui-dropdownchecklist-group { - font-weight: normal; - font-style: italic; - padding: 1px 0; -} -.ui-dropdownchecklist-selector-wrapper { - vertical-align: middle; - font-size: 0; -} -.ui-state-active { - background: transparent; -} -.ui-dropdownchecklist-dropcontainer { - color: var(--dynamix-ui-dropdownchecklist-color); - background-color: var(--dynamix-ui-dropdownchecklist-color-alt1); -} -.ui-state-disabled { - color: var(--dynamix-ui-dropdownchecklist-color); - border-bottom-color: var(--dynamix-ui-dropdownchecklist-color-alt2); - opacity: 0.5; - cursor: default; -} -.ui-dropdownchecklist-indent { - padding-left: 7px; -} -.ui-dropdownchecklist-text { - font-family: clear-sans; - font-size: 1.3rem; - color: var(--dynamix-ui-dropdownchecklist-color); -} -.ui-dropdownchecklist-item { - height: 2.2rem; - line-height: 2.2rem; -} -.ui-dropdownchecklist-item input { - vertical-align: top; -} + #sb-info-inner, #sb-loading-inner, div.sb-message { @@ -1566,7 +1506,7 @@ div.icon-zip { * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector * @see https://caniuse.com/?search=nesting */ - .Theme--sidebar { +.Theme--sidebar { .jGrowl.top-left { top: 90px; } @@ -1579,28 +1519,6 @@ div.icon-zip { .jGrowl-notification { min-height: 4rem; } - .ui-dropdownchecklist { - height: 3rem; - line-height: 3rem; - } - .ui-dropdownchecklist-selector { - padding: 1px 14px 1px 6px; - } - .ui-dropdownchecklist-group { - padding: 1px 14px 1px 6px; - } - .ui-dropdownchecklist-dropcontainer { - border: 1px solid var(--dynamix-ui-dropdownchecklist-dropcontainer-border-color); - } - .ui-state-disabled { - opacity: 0.3; - } - .ui-dropdownchecklist-indent { - padding-left: 9px; - } - .ui-dropdownchecklist-text { - font-size: 1.2rem; - } table.tablesorter thead tr th { font-size: 1.3rem; padding: 5px 20px 5px 6px; diff --git a/emhttp/plugins/dynamix/styles/dynamix-jquery-ui.css b/emhttp/plugins/dynamix/styles/dynamix-jquery-ui.css index 5492d8387..ff810a63b 100644 --- a/emhttp/plugins/dynamix/styles/dynamix-jquery-ui.css +++ b/emhttp/plugins/dynamix/styles/dynamix-jquery-ui.css @@ -42,84 +42,118 @@ --dynamix-jquery-ui-text-color: var(--gray-100); } -.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button { - font-family: clear-sans; - font-size: 1.1rem; - font-weight: bold; - letter-spacing: 2px; - text-transform: uppercase; - margin: 10px 12px 10px 0; - padding: 9px 18px; - text-decoration: none; - white-space: nowrap; - cursor: pointer; - outline: none; - border-radius: 4px; - border: 0; - color: var(--dynamix-jquery-ui-button-text-color); - background: - -webkit-gradient( - linear, - left top, - right top, - from(var(--dynamix-jquery-ui-button-background-start)), - to(var(--dynamix-jquery-ui-button-background-end)) - ) - 0 0 no-repeat, - -webkit-gradient( - linear, - left top, - right top, - from(var(--dynamix-jquery-ui-button-background-start)), - to(var(--dynamix-jquery-ui-button-background-end)) - ) 0 100% no-repeat, - -webkit-gradient( - linear, - left bottom, - left top, - from(var(--dynamix-jquery-ui-button-background-start)), - to(var(--dynamix-jquery-ui-button-background-start)) - ) 0 100% no-repeat, - -webkit-gradient( - linear, - left bottom, - left top, - from(var(--dynamix-jquery-ui-button-background-end)), - to(var(--dynamix-jquery-ui-button-background-end)) - ) 100% 100% no-repeat; - background: - linear-gradient(90deg, var(--dynamix-jquery-ui-button-background-start) 0, var(--dynamix-jquery-ui-button-background-end)) 0 0 no-repeat, - linear-gradient(90deg, var(--dynamix-jquery-ui-button-background-start) 0, var(--dynamix-jquery-ui-button-background-end)) 0 100% no-repeat, - linear-gradient(0deg, var(--dynamix-jquery-ui-button-background-start) 0, var(--dynamix-jquery-ui-button-background-start)) 0 100% no-repeat, - linear-gradient(0deg, var(--dynamix-jquery-ui-button-background-end) 0, var(--dynamix-jquery-ui-button-background-end)) 100% 100% no-repeat; +.ui-dialog { + .ui-dialog-buttonpane { + .ui-dialog-buttonset { + button { + font-family: clear-sans; + font-size: 1.1rem; + font-weight: bold; + letter-spacing: 2px; + text-transform: uppercase; + margin: 10px 12px 10px 0; + padding: 9px 18px; + text-decoration: none; + white-space: nowrap; + cursor: pointer; + outline: none; + border-radius: 4px; + border: 0; + color: var(--dynamix-jquery-ui-button-text-color); + background: + -webkit-gradient( + linear, + left top, + right top, + from(var(--dynamix-jquery-ui-button-background-start)), + to(var(--dynamix-jquery-ui-button-background-end)) + ) + 0 0 no-repeat, + -webkit-gradient( + linear, + left top, + right top, + from(var(--dynamix-jquery-ui-button-background-start)), + to(var(--dynamix-jquery-ui-button-background-end)) + ) 0 100% no-repeat, + -webkit-gradient( + linear, + left bottom, + left top, + from(var(--dynamix-jquery-ui-button-background-start)), + to(var(--dynamix-jquery-ui-button-background-start)) + ) 0 100% no-repeat, + -webkit-gradient( + linear, + left bottom, + left top, + from(var(--dynamix-jquery-ui-button-background-end)), + to(var(--dynamix-jquery-ui-button-background-end)) + ) 100% 100% no-repeat; + background: + linear-gradient(90deg, var(--dynamix-jquery-ui-button-background-start) 0, var(--dynamix-jquery-ui-button-background-end)) 0 0 no-repeat, + linear-gradient(90deg, var(--dynamix-jquery-ui-button-background-start) 0, var(--dynamix-jquery-ui-button-background-end)) 0 100% no-repeat, + linear-gradient(0deg, var(--dynamix-jquery-ui-button-background-start) 0, var(--dynamix-jquery-ui-button-background-start)) 0 100% no-repeat, + linear-gradient(0deg, var(--dynamix-jquery-ui-button-background-end) 0, var(--dynamix-jquery-ui-button-background-end)) 100% 100% no-repeat; + background-size: + 100% 2px, + 100% 2px, + 2px 100%, + 2px 100%; + + &:hover { + color: var(--dynamix-jquery-ui-button-hover-color); + background: -webkit-gradient( + linear, + left top, + right top, + from(var(--dynamix-jquery-ui-button-background-start)), + to(var(--dynamix-jquery-ui-button-background-end)) + ); + background: linear-gradient(90deg, var(--dynamix-jquery-ui-button-background-start) 0, var(--dynamix-jquery-ui-button-background-end)); + } + } + } + } +} + +/* Consolidated .ui-dropdownchecklist styles */ +.ui-dropdownchecklist { + background-color: transparent; + background-image: linear-gradient(66.6deg, transparent 60%, var(--input-border-color) 40%), + linear-gradient(113.4deg, var(--input-border-color) 40%, transparent 60%); + background-position: calc(100% - 4px), 100%; background-size: - 100% 2px, - 100% 2px, - 2px 100%, - 2px 100%; -} - -.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button:hover { - color: var(--dynamix-jquery-ui-button-hover-color); - background: -webkit-gradient( - linear, - left top, - right top, - from(var(--dynamix-jquery-ui-button-background-start)), - to(var(--dynamix-jquery-ui-button-background-end)) - ); - background: linear-gradient(90deg, var(--dynamix-jquery-ui-button-background-start) 0, var(--dynamix-jquery-ui-button-background-end)); -} - -.ui-dropdownchecklist .ui-state-default { - background: var(--dynamix-jquery-ui-default-background); + 4px 6px, + 4px 6px; + background-repeat: no-repeat; border: none; - box-shadow: none; + border-bottom: 1px solid var(--input-border-color); outline: none; + height: 2.5rem; + line-height: 2.5rem; cursor: pointer; - height: 2.2rem; - line-height: 2.2rem; - padding: 0; + + .ui-state-default { + background: var(--dynamix-jquery-ui-default-background); + border: none; + box-shadow: none; + outline: none; + cursor: pointer; + height: 2.2rem; + line-height: 2.2rem; + padding: 0; + } + + .ui-widget-content { + .ui-state-default { + background: var(--dynamix-jquery-ui-default-background); + } + } +} + +.ui-dropdownchecklist-dropcontainer-wrapper { + transform: translateY(-1px); } .ui-dropdownchecklist-group { @@ -129,10 +163,12 @@ } .ui-dropdownchecklist-selector { - border: 1px solid var(--dynamix-jquery-ui-border-color); + border: none; + border-bottom: 1px solid var(--dynamix-ui-dropdownchecklist-color); + outline: none; display: inline-block; cursor: pointer; - padding: 1px 9px 1px 8px; + padding: 1px 0; } .ui-dropdownchecklist-selector-wrapper { @@ -140,6 +176,68 @@ font-size: 0; } +.ui-dropdownchecklist-dropcontainer { + color: var(--dynamix-ui-dropdownchecklist-color); + background-color: var(--dynamix-ui-dropdownchecklist-color-alt1); + border: 1px solid var(--dynamix-jquery-ui-border-color); +} + +.ui-state-disabled { + color: var(--dynamix-ui-dropdownchecklist-color); + border-bottom-color: var(--dynamix-ui-dropdownchecklist-color-alt2); + opacity: 0.5; + cursor: default; +} + +.ui-dropdownchecklist-indent { + padding-left: 7px; +} + +.ui-dropdownchecklist-text { + font-family: clear-sans; + font-size: 1.3rem; + color: var(--dynamix-ui-dropdownchecklist-color); +} + +.ui-dropdownchecklist-item { + height: 2.2rem; + line-height: 2.2rem; + + input { + vertical-align: top; + } +} + +/* Theme-specific styles for sidebar */ +.Theme--sidebar { + .ui-dropdownchecklist { + height: 3rem; + line-height: 3rem; + border: 1px solid var(--border-color); + background-position: calc(100% - 7px), 99%; + } + + .ui-dropdownchecklist-selector { + padding: 4px 6px 1px 6px; + } + + .ui-dropdownchecklist-group { + padding: 1px 6px; + } + + .ui-dropdownchecklist-dropcontainer { + border: 1px solid var(--dynamix-ui-dropdownchecklist-dropcontainer-border-color); + } + + .ui-state-disabled { + opacity: 0.3; + } + + .ui-dropdownchecklist-indent { + padding-left: 9px; + } +} + .ui-widget-header { border: none; background: var(--dynamix-jquery-ui-header-background); @@ -157,44 +255,21 @@ background: var(--dynamix-jquery-ui-active-background); } -.ui-dropdownchecklist-dropcontainer { - background: var(--dynamix-jquery-ui-dropcontainer-background); - border: 1px solid var(--dynamix-jquery-ui-border-color); -} +.ui-tailscale { + &-row { + display: flex; + justify-content: space-between; + min-width: 300px; + width: 100%; + flex-wrap: nowrap; + overflow-x: auto; + } -.ui-state-disabled { - color: var(--dynamix-jquery-ui-disabled-color); - border-color: var(--dynamix-jquery-ui-disabled-border-color); - background: var(--dynamix-jquery-ui-disabled-background); - opacity: 0.5; -} + &-label { + flex: 1; + } -.ui-dropdownchecklist-indent { - padding-left: 7px; -} - -.ui-dropdownchecklist-text { - color: var(--dynamix-jquery-ui-text-color); - font-size: 1.3rem; -} - -.ui-dropdownchecklist .ui-widget-content .ui-state-default { - background: var(--dynamix-jquery-ui-default-background); -} - -.ui-tailscale-row { - display: flex; - justify-content: space-between; - min-width: 300px; - width: 100%; - flex-wrap: nowrap; - overflow-x: auto; -} - -.ui-tailscale-label { - flex: 1; -} - -.ui-tailscale-value { - flex: 3; + &-value { + flex: 3; + } }