From 63135b62970b508a0d7d3a92fe920ca30dc0702f Mon Sep 17 00:00:00 2001 From: Zack Spear Date: Mon, 11 Aug 2025 15:27:49 -0700 Subject: [PATCH] style: update dialog and filter input styling in Browse.page, BrowseButton.css, and default-dynamix.css --- emhttp/plugins/dynamix/Browse.page | 5 +- .../plugins/dynamix/sheets/BrowseButton.css | 27 +--- .../dynamix/styles/default-dynamix.css | 144 +++++++++--------- 3 files changed, 83 insertions(+), 93 deletions(-) diff --git a/emhttp/plugins/dynamix/Browse.page b/emhttp/plugins/dynamix/Browse.page index a745e1b96..d67495468 100644 --- a/emhttp/plugins/dynamix/Browse.page +++ b/emhttp/plugins/dynamix/Browse.page @@ -271,6 +271,8 @@ function fileEdit(id) { } function fullWindow() { + // this class is used to determine if the dialog is sized via the default CSS in default-dynamix.css or by JS when the user clicks the "expand" button. + $('.ui-dialog').toggleClass('ui-dialog-content-full'); if ($('.ui-dfm .ui-dialog-titlebar-close').html().indexOf('expand')>=0) { dfm.window.dialog('option','height',window.innerHeight-40); dfm.window.dialog('option','width',window.innerWidth); @@ -999,7 +1001,8 @@ $(function(){ } else { url.push(''); } - $('span.left').html(url.join('')).append(''); + $('.title .left').html(url.join('')); + $('.title .right').append(''); table = $('table.indexer'); thead = table.find('thead'); table.bind('sortEnd',function(e,t){ diff --git a/emhttp/plugins/dynamix/sheets/BrowseButton.css b/emhttp/plugins/dynamix/sheets/BrowseButton.css index 5742c5fb6..1a99c5ddd 100644 --- a/emhttp/plugins/dynamix/sheets/BrowseButton.css +++ b/emhttp/plugins/dynamix/sheets/BrowseButton.css @@ -165,21 +165,19 @@ i.job { span.dfm_filter { position: relative; - margin-left: 12px; - top: -2px; } span.dfm_filter i { position: absolute; left: 10px; - top: 4px; + top: 6px; font-size: 1.4rem; } input.dfm_filter { border: none; width: 100px; background-color: var(--input-dfm-filter-bg-color); - margin: -8px 0 0 0; padding-left: 30px; + line-height: normal; } input.dfm_filter:focus { background-color: var(--input-dfm-filter-bg-color); @@ -187,29 +185,10 @@ input.dfm_filter:focus { input#dfm_target { color: var(--input-dfm-target-text-color); } -/* .fileTree { - width: 500px; - max-height: 320px; -} */ -i.dfm_filter { - margin-top: -2px; -} div.autoheight { width: 100%; overflow-y: auto; } #dfm_jobs { padding: 2rem 0; -} -.Theme--sidebar { - span.dfm_filter { - margin-left: 0; - top: -8px; - } - span.dfm_filter i { - top: 8px; - } - i.dfm_filter { - margin-top: -4px; - } -} +} \ No newline at end of file diff --git a/emhttp/plugins/dynamix/styles/default-dynamix.css b/emhttp/plugins/dynamix/styles/default-dynamix.css index 756ee368f..a2aae6037 100644 --- a/emhttp/plugins/dynamix/styles/default-dynamix.css +++ b/emhttp/plugins/dynamix/styles/default-dynamix.css @@ -1460,7 +1460,18 @@ div.icon-zip { } .ui-dialog { - /* Center the dialog no matter what */ + box-sizing: border-box; + + * { + box-sizing: border-box; + } +} + +.ui-dialog:not(.ui-dialog-content-full) { + /* + - If there is no .ui-dialog-content-full class, then we need to center the dialog no matter what the library JS sets on the element. + - Otherwise, if we do have .ui-dialog-content-full on the element, then we need to use the library JS to position the dialog at "full screen" size. + */ top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; @@ -1468,10 +1479,6 @@ div.icon-zip { width: 100% !important; max-width: 100rem; - * { - box-sizing: border-box; - } - .ui-dialog-content { display: flex; flex-direction: column; @@ -1492,75 +1499,76 @@ div.icon-zip { margin-top: auto; } - .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( +.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)) - ); - background: linear-gradient(90deg, var(--dynamix-jquery-ui-button-background-start) 0, 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)); } } }