mirror of
https://github.com/unraid/webgui.git
synced 2026-05-05 20:00:52 -05:00
style: update dialog and filter input styling in Browse.page, BrowseButton.css, and default-dynamix.css
This commit is contained in:
Zack Spear
@@ -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('<i class="fa fa-home red-text"></i>');
|
||||
}
|
||||
$('span.left').html(url.join('<i class="fa fa-chevron-right"></i>')).append('<span class="right"><span class="dfm_filter"><input type="text" class="dfm_filter" oninput="filter(this.value)" autocomplete="off" spellcheck="false" placeholder="_(file type)_"><i class="fa fa-filter dfm_filter"></i></span><i class="fa fa-toggle-off" onclick="toggleTime()" style="cursor:pointer;margin-left:20px" title="_(Toggle Time/Age display)_"></i></span>');
|
||||
$('.title .left').html(url.join('<i class="fa fa-chevron-right"></i>'));
|
||||
$('.title .right').append('<span class="dfm_filter"><input type="text" id="dfm_filter" class="dfm_filter" oninput="filter(this.value)" autocomplete="off" spellcheck="false" placeholder="_(file type)_"><i class="fa fa-filter dfm_filter"></i></span><i class="fa fa-toggle-off" onclick="toggleTime()" style="cursor:pointer;" title="_(Toggle Time/Age display)_"></i>');
|
||||
table = $('table.indexer');
|
||||
thead = table.find('thead');
|
||||
table.bind('sortEnd',function(e,t){
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user