Merge pull request #2117 from unraid/fix/css-refactor-issues

fix: 7.1.0 css refactor tweaks for testing feedback
This commit is contained in:
tom mortensen
2025-04-04 09:35:44 -07:00
committed by GitHub
31 changed files with 304 additions and 580 deletions

View File

@@ -81,6 +81,7 @@
"libvirt-php"
],
"search.exclude": {
"emhttp/webGui/**/*": true,
}
"emhttp/webGui/**/*": true
},
"php-cs-fixer.executablePath": "${extensionPath}/php-cs-fixer.phar"
}

View File

@@ -66,12 +66,7 @@ div#configLocation dt {
--add-container-file-tree-background: var(--gray-100);
}
.fileTree {
/* .fileTree {
width: 240px;
max-height: 200px;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
display: none;
background: var(--add-container-file-tree-background);
}
} */

View File

@@ -75,16 +75,10 @@ span.nonexist {
margin-left: 20px;
}
.fileTree {
background: var(--docker-settings-file-tree-background);
/* .fileTree {
width: 300px;
max-height: 150px;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
z-index: 100;
display: none;
}
} */
span.disabled {
color: var(--docker-settings-span-disabled-color);
}

View File

@@ -66,12 +66,7 @@ div#configLocation dt {
margin-top: -0.18rem !important;
}
.fileTree {
/* .fileTree {
width: 240px;
max-height: 200px;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
display: none;
background: var(--update-container-file-tree-background);
}
} */

View File

@@ -16,6 +16,14 @@ Markdown="false"
* all copies or substantial portions of the Software.
*/
?>
<link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.switchbutton.css')?>">
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/jquery.filetree.css")?>">
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/jquery.ui.css")?>">
<script src="<?autov('/webGui/javascript/jquery.switchbutton.js')?>"></script>
<script src="<?autov('/plugins/dynamix.vm.manager/javascript/dynamix.vm.manager.js')?>"></script>
<script src="<?autov('/plugins/dynamix.vm.manager/javascript/vmmanager.js')?>"></script>
<script src="<?autov('/webGui/javascript/jquery.filetree.js')?>" charset="utf-8"></script>
<?
$docroot ??= ($_SERVER['DOCUMENT_ROOT'] ?: '/usr/local/emhttp');
require_once "$docroot/plugins/dynamix.vm.manager/include/libvirt_helpers.php";
@@ -37,16 +45,6 @@ Markdown="false"
}
if (strpos($strName,"User-") === false) $user = ""; else $user = ' class="user"';
?>
<link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.switchbutton.css')?>">
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/jquery.filetree.css")?>">
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/jquery.ui.css")?>">
<script src="<?autov('/webGui/javascript/jquery.switchbutton.js')?>"></script>
<script src="<?autov('/plugins/dynamix.vm.manager/javascript/dynamix.vm.manager.js')?>"></script>
<script src="<?autov('/plugins/dynamix.vm.manager/javascript/vmmanager.js')?>"></script>
<script src="<?autov('/webGui/javascript/jquery.filetree.js')?>" charset="utf-8"></script>
<div class="vmtemplate">
<a href="/VMs/AddVM?template=<?=htmlspecialchars(urlencode($strName))?>">
<span name="<?=htmlspecialchars($strName)?>" <?=$user?>><img src="/plugins/dynamix.vm.manager/templates/images/<?=htmlspecialchars($arrTemplate['icon'])?>" title="<?=htmlspecialchars($strName)?>"></span>

View File

@@ -100,9 +100,10 @@ if (strpos($strSelectedTemplate,"User-") !== false) {
$usertemplate = 1;
}
?>
<link type="text/css" rel="stylesheet" href="<?autov('/plugins/dynamix.vm.manager/styles/dynamix.vm.manager.css')?>">
<link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.filetree.css')?>">
<link type="text/css" rel="stylesheet" href="<?autov('/webGui/styles/jquery.switchbutton.css')?>">
<link type="text/css" rel="stylesheet" href="<?autov('/plugins/dynamix.vm.manager/styles/dynamix.vm.manager.css')?>">
<link type="text/css" rel="stylesheet" href="<?autov('/plugins/dynamix.vm.manager/styles/edit.css')?>">
<span class="status advancedview_panel" style="margin-top:<?=$top?>px;"><input type="checkbox" class="inlineview"><input type="checkbox" class="advancedview"></span>
<div class="domain">

View File

@@ -1,296 +0,0 @@
:root {
--add-vm-background: var(--black);
}
.Theme--azure:root,
.Theme--white:root {
--add-vm-background: var(--gray-100);
}
body {
-webkit-overflow-scrolling: touch;
}
#vmform table {
margin-top: 0;
table-layout: fixed;
}
#vmform div.title + table {
margin-top: 0;
}
#vmform table tr {
vertical-align: top;
line-height: 4rem;
height: 4rem;
}
#vmform table tr td:nth-child(1) {
width: 25%;
text-align: right;
padding-right: 10px;
}
#vmform table tr td:nth-child(2) {
width: 800px;
}
@media (max-width: 1280px) {
#vmform table tr td:first-child {
width: 35%;
padding-right: 4rem;
}
}
@media (min-width: 1281px) {
#vmform table tr td:first-child {
width: 30%;
padding-right: 4rem;
}
}
@media (min-width: 1921px) {
#vmform table tr td:first-child {
width: 25%;
padding-right: 4rem;
}
}
#vmform table tr td:last-child {
width: inherit;
}
#vmform textarea{
max-width:500px;
scrollbar-width:4px;
}
#vmform textarea::-webkit-scrollbar{
height:4px;
width:4px;
}
#vmform .multiple {
position: relative;
}
#vmform .sectionbutton {
position: absolute;
left: 2px;
cursor: pointer;
opacity: 0.4;
font-size: 1.4rem;
line-height: 17px;
z-index: 10;
transition-property: opacity, left;
transition-duration: 0.1s;
transition-timing-function: linear;
}
#vmform .sectionbutton.remove {
top: 0;
opacity: 0.3;
}
#vmform .sectionbutton.add {
bottom: 0;
}
#vmform .sectionbutton:hover {
opacity: 1;
}
#vmform .sectiontab {
position: absolute;
top: 2px;
bottom: 2px;
left: 0;
width: 6px;
border-radius: 3px;
background-color: var(--gray-200); /* Condensed from: #dddddd */
transition-property: background, width;
transition-duration: 0.1s;
transition-timing-function: linear;
}
#vmform .multiple:hover .sectionbutton {
opacity: 0.7;
left: 4px;
}
#vmform .multiple:hover .sectionbutton.remove {
opacity: 0.6;
}
#vmform .multiple:hover .sectiontab {
background-color: var(--gray-300);
width: 8px;
}
#vmform table.multiple:hover {
background-position: 0 0;
}
#vmform table.multiple td {
padding: 5px 0;
}
span.advancedview_panel {
display: none;
line-height: 16px;
margin-top: 1px;
}
.basic {
display: none;
}
.advanced {
/*Empty placeholder*/
}
.switch-button-label.off {
color: inherit;
}
#template_img {
cursor: pointer;
}
#template_img:hover {
opacity: 0.5;
}
#template_img:hover i {
opacity: 1;
}
.template_img_chooser_inner {
display: inline-block;
width: 80px;
margin-bottom: 15px;
margin-right: 10px;
text-align: center;
}
.template_img_chooser_inner img {
width: 48px;
height: 48px;
}
.template_img_chooser_inner p {
text-align: center;
line-height: 8px;
}
#template_img_chooser {
width: 560px;
height: 300px;
overflow-y: scroll;
position: relative;
display:grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
}
#template_img_chooser div:hover {
background-color: var(--gray-150); /* Condensed from: #eee */
cursor: pointer;
}
#form_content {
display: none;
}
#vmform .four {
overflow: hidden;
}
#vmform .four label {
float: left;
display: table-cell;
width: 15%;
}
#vmform .four label:nth-child(4n + 4) {
}
#vmform .four label.cpu1 {
width: 28%;
height: 16px;
line-height: 16px;
}
#vmform .four label.cpu2 {
width: 3%;
height: 16px;
line-height: 16px;
}
#vmform .mac_generate {
cursor: pointer;
margin-left: -5px;
color: var(--blue-700); /* Condensed from: #08c */
font-size: 1.3rem;
transform: translate(0px, 2px);
}
#vmform .disk {
display: none;
}
#vmform .disk_preview {
display: inline-block;
color: var(--gray-300); /* Condensed from: #bbb */
transform: translate(0px, 1px);
}
i.fa-plus-circle,
i.fa-minus-circle {
margin-left: 8px;
}
input[type="checkbox"] {
margin-left: 0;
}
span.width {
display: inline-block;
width: 280px;
}
span.column1 {
display: inline-block;
width: 140px;
}
span.column2 {
display: inline-block;
width: 220px;
}
input#btnvCPUSelect,
input.wlan0_info {
font-size: 1rem;
padding: 5px 10px;
margin: 0 0 0 10px;
}
span.space {
display: inline-block;
width: 60px;
}
span.label {
display: inline-block;
width: 110px;
text-align: right;
overflow: hidden;
text-overflow: ellipsis;
}
span.ipvtap {
margin-left: 25px;
font-family: bitstream;
}
select.narrow {
min-width: 90px !important;
}
select.second {
margin-left: 12px;
max-width: 90px;
margin-right: 0;
}
div.wlan0 {
text-align: left;
}
input.trim {
width: 98px;
min-width: 98px;
}
input.second {
margin-left: 8px;
}
.autostart ~ .switch-button-background {
margin-top: 8px !important;
margin-left: 0 !important;
}
.hidden {
display: none !important;
}
.CodeMirror {
border: 1px solid var(--gray-150);
cursor: text;
margin-top: 15px;
margin-bottom: 10px;
}
.CodeMirror pre.CodeMirror-placeholder {
color: var(--gray-400);
}

View File

@@ -128,13 +128,7 @@ span.vmgraphics {
text-align: left;
}
.fileTree {
background: var(--vm-machines-file-tree-background);
/* .fileTree {
width: 500px;
max-height: 320px;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
z-index: 100;
display: none;
}
} */

View File

@@ -57,13 +57,7 @@ body {
font-family: clear-sans;
}
.fileTree {
background: var(--vm-machines-file-tree-background);
/* .fileTree {
width: 300px;
max-height: 150px;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
z-index: 100;
display: none;
}
} */

View File

@@ -33,7 +33,6 @@
.vmtemplate p {
text-align: center;
margin-top: 8px;
line-height: 12px;
}
div.template,
@@ -42,13 +41,7 @@ input#upload {
display: none;
}
.fileTree {
background: var(--filetree-background);
/* .fileTree {
width: 300px;
max-height: 150px;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
z-index: 100;
display: none;
}
} */

View File

@@ -1,5 +1,6 @@
:root {
--add-vm-background: var(--black);
--add-vm-border: var(--gray-150);
}
.Theme--azure:root,
@@ -52,14 +53,14 @@ body {
width: inherit;
}
#vmform textarea{
max-width:500px;
scrollbar-width:4px;
#vmform textarea {
max-width: 500px;
scrollbar-width: 4px;
}
#vmform textarea::-webkit-scrollbar{
height:4px;
width:4px;
#vmform textarea::-webkit-scrollbar {
height: 4px;
width: 4px;
}
#vmform .multiple {
@@ -142,29 +143,39 @@ span.advancedview_panel {
.template_img_chooser_inner {
display: inline-block;
width: 80px;
margin-bottom: 15px;
margin-right: 10px;
text-align: center;
}
.template_img_chooser_inner:hover {
color: var(--orange-400);
cursor: pointer;
}
.template_img_chooser_inner img {
width: 48px;
height: 48px;
}
.template_img_chooser_inner p {
text-align: center;
line-height: 8px;
margin: 0;
}
.template_img_parent {
position: relative;
}
#template_img_chooser_outer {
position: absolute;
display: none;
border-radius: 5px;
border: 1px solid var(--add-vm-border);
background: var(--add-vm-background);
z-index: 10;
}
#template_img_chooser {
width: 560px;
height: 300px;
overflow-y: scroll;
position: relative;
display:grid;
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
}
#template_img_chooser div:hover {
background-color: var(--gray-150); /* Condensed from: #eee */
cursor: pointer;
gap: 1rem;
}
#form_content {
display: none;
@@ -294,3 +305,7 @@ input.second {
.CodeMirror pre.CodeMirror-placeholder {
color: var(--gray-400);
}
.fileTree {
position: relative;
}

View File

@@ -558,7 +558,7 @@ function networkInfo(port, vlan) {
</script>
<div class="title nocontrol shift">&nbsp;</div>
<div class="shade-<?=$display['theme']?> uplift">
<div class="shade uplift">
<form name="dns_settings" onchange="signalRun(this,1)">
<div markdown="1" id="dns4" class="hide">
_(IPv4 DNS server assignment)_:
@@ -787,7 +787,7 @@ _(Enable VLANs)_:
<div id="index-eth0-0"></div>
<div id="vlan-list-eth0" class="hide">
<?foreach ($vlan_eth0 as $i):?>
<div markdown="1" id="index-eth0-<?=$i?>" class="access-eth0 shade-<?=$display['theme']?> hide">
<div markdown="1" id="index-eth0-<?=$i?>" class="access-eth0 shade hide">
_(Interface description)_:
: <input type="text" name="DESCRIPTION:<?=$i?>" maxlength="80" autocomplete="off" spellcheck="false" value="<?=htmlspecialchars(_var($eth0,"DESCRIPTION:$i"))?>">
<input type="button" class="form" value="_(Info)_" onclick="networkInfo('eth0',<?=_var($eth0,"VLANID:$i")?>)">
@@ -889,7 +889,7 @@ _(IPv6 privacy extensions)_:
</form>
<script markdown="1" type="text/html" id="network-template-eth0">
<div markdown="1" id="index-eth0-INDEX" class="access-eth0 shade-<?=$display['theme']?>">
<div markdown="1" id="index-eth0-INDEX" class="access-eth0 shade">
_(Interface description)_:
: <input type="text" name="DESCRIPTION:INDEX" maxlength="80" autocomplete="off" spellcheck="false" value="<?=htmlspecialchars(_var($eth0,"DESCRIPTION:INDEX"))?>">

View File

@@ -249,7 +249,7 @@ _(Enable VLANs)_:
<div id='index-ethX-0'></div>
<div id="vlan-list-ethX" class="hide">
<?foreach ($vlan_ethX as $i):?>
<div markdown="1" id="index-ethX-<?=$i?>" class="access-ethX shade-<?=$display['theme']?> hide">
<div markdown="1" id="index-ethX-<?=$i?>" class="access-ethX shade hide">
_(Interface description)_:
: <input type="text" name="DESCRIPTION:<?=$i?>" maxlength="80" autocomplete="off" spellcheck="false" value="<?=htmlspecialchars(_var($ethX,"DESCRIPTION:$i"))?>">
<input type="button" class="form" value="_(Info)_" onclick="networkInfo('eth0',<?=_var($ethX,"VLANID:$i")?>)">
@@ -350,7 +350,7 @@ _(IPv6 privacy extensions)_:
</form>
<script markdown="1" type="text/html" id="network-template-ethX">
<div markdown="1" id="index-ethX-INDEX" class="access-ethX shade-<?=$display['theme']?>">
<div markdown="1" id="index-ethX-INDEX" class="access-ethX shade">
_(Interface description)_:
: <input type="text" name="DESCRIPTION:INDEX" maxlength="80" autocomplete="off" spellcheck="false" value="<?=htmlspecialchars(_var($ethX,"DESCRIPTION:INDEX"))?>">

View File

@@ -57,7 +57,7 @@ $(function(){
<tbody id="route_list"></tbody>
</table>
<div class="shade-<?=$display['theme']?>" style="margin-top:12px;padding:12px 4px;">
<div class="shade" style="margin-top:12px;padding:12px 4px;">
<form markdown="1" name="add_routes" method="POST" action="/webGui/include/RoutingTable.php" target="progressFrame" onsubmit="setTimeout(resetTable,500)">
_(Enter route + gateway + metric)_:
: <input type="text" name="route" maxlength="39" value="" class="fixed" placeholder="_(IPv4/nn or IPv6/nn route)_" required>

View File

@@ -366,7 +366,7 @@ foreach ($rows as $row) echo $row;
<input type="hidden" name="shareInclude" value="">
<input type="hidden" name="shareExclude" value="">
<div markdown="1" class="shade-<?=$display['theme']?>">
<div markdown="1" class="shade">
_(Share name)_:
: <input type="text" id="shareName" name="shareName" maxlength="40" autocomplete="off" spellcheck="false" value="<?=htmlspecialchars($name)?>" oninput="checkName(this.value)" title="_(Hidden share names are not allowed)_" pattern="^[^\.].*"><span id="zfs-name" class="orange-text"><i class="fa fa-warning"></i> _(Share name contains invalid characters for ZFS use)_</span>
@@ -417,7 +417,7 @@ _(Exclusive access)_:
<?endif;?>
</div>
<div markdown="1" class="shade-<?=$display['theme']?>">
<div markdown="1" class="shade">
_(Primary storage (for new files and folders))_:
: <select id="primary" name="shareCachePool" onchange="form.shareFloor.value='';updateScreen(z(4),'slow')">
<?=mk_option(primary(), '', _('Array'), $poolsOnly ? 'disabled' : '')?>
@@ -486,7 +486,7 @@ _(Excluded disk(s))_:
</div>
</div>
<div markdown="1" id="secondaryStorage" class="shade-<?=$display['theme']?>">
<div markdown="1" id="secondaryStorage" class="shade">
_(Secondary storage)_:
: <select id="secondary" onchange="updateScreen(z(4),'slow')">
<?=mk_option(secondary(),'0',_('None'))?>
@@ -545,7 +545,7 @@ _(Excluded disk(s))_:
</div>
</div>
<div markdown="1" id="moverAction" class="shade-<?=$display['theme']?>">
<div markdown="1" id="moverAction" class="shade">
<div markdown="1" id="moverDirection1">
_(Mover action)_:
: <span class="input"><select id="direction" onchange="updateScreen(z(3),'slow')">

View File

@@ -1385,7 +1385,7 @@ _(DNS servers)_:
<div id="peers-list-wg0" style="display:none"></div>
<?foreach ($peer_wg0 as $i):?>
<div markdown="1" id="index-wg0-<?=$i?>" class="shade-<?=$display['theme']?>">
<div markdown="1" id="index-wg0-<?=$i?>" class="shade">
_(Peer name)_:
: <span class="input"><input type="text" name="Name:<?=$i?>" class="wide" maxlength="99" value="<?=_var($wg0,"Name:$i")?>" onchange="quickValidate(this);" pattern="<?=$validname?>" title="_(Use only letters A-Z, digits or space,dash,underscore)_" placeholder="(_(optional)_)"></span>
<input type="button" class="form" value="_(Delete Peer)_" onclick="delPeer($(document.wg0),'#index-wg0-<?=$i?>')">
@@ -1482,7 +1482,7 @@ _(Persistent keepalive)_:
<small style="position:absolute;left:10px;top:30px">"WireGuard" and the "WireGuard" logo are registered trademarks of Jason A. Donenfeld</small>
<script markdown="1" type="text/html" id="peer-template-wg0">
<div markdown="1" id="index-wg0-INDEX" class="shade-<?=$display['theme']?>">
<div markdown="1" id="index-wg0-INDEX" class="shade">
_(Peer name)_:
: <span class="input"><input type="text" name="Name:INDEX" class="wide" maxlength="99" value="" onchange="quickValidate(this);" pattern="<?=$validname?>" title="_(Use only letters A-Z, digits or space,dash,underscore)_" placeholder="(_(optional)_)"></span>
<span class="pin"><i class="fa fa-fw fa-eye eyeINDEX key-off" title="_(Show Peer Config)_"></i>

View File

@@ -283,7 +283,7 @@ _(DNS servers)_:
<div id="peers-list-wgX" style="display:none"></div>
<?foreach ($peer_wgX as $i):?>
<div markdown="1" id="index-wgX-<?=$i?>" class="shade-<?=$display['theme']?>">
<div markdown="1" id="index-wgX-<?=$i?>" class="shade">
_(Peer name)_:
: <span class="input"><input type="text" name="Name:<?=$i?>" class="wide" maxlength="99" value="<?=_var($wgX,"Name:$i")?>" onchange="quickValidate(this);" pattern="<?=$validname?>" title="_(Use only letters A-Z, digits or space,dash,underscore)_" placeholder="(_(optional)_)"></span>
<input type="button" class="form" value="_(Delete Peer)_" onclick="delPeer($(document.wgX),'#index-wgX-<?=$i?>')">
@@ -378,7 +378,7 @@ _(Persistent keepalive)_:
</form>
<script markdown="1" type="text/html" id="peer-template-wgX">
<div markdown="1" id="index-wgX-INDEX" class="shade-<?=$display['theme']?>">
<div markdown="1" id="index-wgX-INDEX" class="shade">
_(Peer name)_:
: <span class="input"><input type="text" name="Name:INDEX" class="wide" maxlength="99" value="" onchange="quickValidate(this);" pattern="<?=$validname?>" title="_(Use only letters A-Z, digits or space,dash,underscore)_" placeholder="(_(optional)_)"></span>
<span class="pin"><i class="fa fa-fw fa-eye eyeINDEX key-off" title="_(Show Peer Config)_"></i>

View File

@@ -49,23 +49,23 @@ _(Regulatory region)_:
</form>
<div id="wifi" class="hide">
<div markdown="1" id="connected" class="shade-<?=$display['theme']?>">
<div markdown="1" id="connected" class="shade">
_(Connected)_:
: <i class="fa fa-spin fa-circle-o-notch"></i>
</div>
<div markdown="1" id="my_networks" class="shade-<?=$display['theme']?>">
<div markdown="1" id="my_networks" class="shade">
_(My networks)_:
: <i class="fa fa-spin fa-circle-o-notch"></i>
</div>
<div markdown="1" id="other_networks" class="shade-<?=$display['theme']?>">
<div markdown="1" id="other_networks" class="shade">
_(Other networks)_:
: <i class="fa fa-spin fa-circle-o-notch"></i>
</div>
<div markdown="1" class="shade-<?=$display['theme']?>">
<div markdown="1" class="shade">
_(Add network)_:
: <span class="wifi"><input name="CUSTOM" type="text" class="narrow" maxlength="32" autocomplete="off" spellcheck="false" value=""></span><i class="fa fa-wifi hand grey-text" onclick="manage_wifi(encodeURIComponent($('input[name=CUSTOM]').val()),3)" title="<?=$title?>"></i>

View File

@@ -20,9 +20,20 @@ $_SERVER['REQUEST_URI'] = '';
require_once "$docroot/webGui/include/Translations.php";
$var = parse_ini_file("/var/local/emhttp/var.ini");
/**
* Just like DefaultPageLayout.php
*/
$theme = strtok($display['theme'],'-');
$themes1 = in_array($theme,['black','white']);
$themes2 = in_array($theme,['gray','azure']);
$themeHtmlClass = "Theme--$theme";
if ($themes2) {
$themeHtmlClass .= " Theme--sidebar";
}
?>
<!DOCTYPE HTML>
<html <?=$display['rtl']?>lang="<?=strtok($locale,'_')?:'en'?>">
<html <?=$display['rtl']?>lang="<?=strtok($locale,'_')?:'en'?>" class="<?= $themeHtmlClass ?>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -35,11 +46,22 @@ $var = parse_ini_file("/var/local/emhttp/var.ini");
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-color-palette.css")?>">
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-base.css")?>">
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/default-{$display['theme']}.css")?>">
<link type="text/css" rel="stylesheet" href="<?autov("/webGui/styles/themes/{$display['theme']}.css")?>">
<style>
.notice{background-image:none;color:#e68a00;font-size:6rem;text-transform:uppercase;text-align:center;padding:4rem 0}
.sub1,.sub2{margin:6rem 0;text-align:center;font-size:3rem}
.boot-title {
background-image: none;
color: var(--orange-300);
font-size: 6rem;
text-transform: uppercase;
text-align: center;
padding: 4rem 0;
}
.boot-subtext {
margin: 6rem 0;
text-align: center;
font-size: 3rem;
}
</style>
<script src="<?autov('/webGui/javascript/dynamix.js')?>"></script>
@@ -65,7 +87,7 @@ boot.on('message', function(msg) {
default : var status = "<span class='orange'>"+_('Array '+ini['fsState'])+"</span>";
}
status += ini['fsProgress'] ? "<br><span class='blue'>"+_(ini['fsProgress'])+"</span>" : "<br>&nbsp;";
$('.sub1').html(status);
$('.js-arrayStatus').html(status);
});
function parseINI(msg) {
@@ -102,19 +124,19 @@ function timer() {
return Math.round((now.getTime()-start.getTime())/1000);
}
function reboot_now() {
$('.notice').html("<?=_('Reboot')?> - <?=gethostname()?>");
$('.js-bootTitle').html("<?=_('Reboot')?> - <?=gethostname()?>");
boot.start();
reboot_online();
}
function shutdown_now() {
$('.notice').html("<?=_('Shutdown')?> - <?=gethostname()?>");
$('.js-bootTitle').html("<?=_('Shutdown')?> - <?=gethostname()?>");
boot.start();
shutdown_online();
}
function reboot_online() {
$.ajax({url:'/webGui/include/ProcessStatus.php',type:'POST',data:{name:'emhttpd',update:true},timeout:500})
.done(function(){
$('.sub2').html("<?=_('System is going down')?>... "+timer());
$('.js-powerStatus').html("<?=_('System is going down')?>... "+timer());
setTimeout(reboot_online,500);
})
.fail(function(){start=new Date(); setTimeout(reboot_offline,500);});
@@ -123,14 +145,14 @@ function reboot_offline() {
$.ajax({url:'/webGui/include/ProcessStatus.php',type:'POST',data:{name:'emhttpd',update:true},timeout:500})
.done(function(){location = '/Main';})
.fail(function(){
$('.sub2').html("<?=_('System is rebooting')?>... "+timer());
$('.js-powerStatus').html("<?=_('System is rebooting')?>... "+timer());
setTimeout(reboot_offline,500);
});
}
function shutdown_online() {
$.ajax({url:'/webGui/include/ProcessStatus.php',type:'POST',data:{name:'emhttpd',update:true},timeout:500})
.done(function(){
$('.sub2').html("<?=_('System is going down')?>... "+timer());
$('.js-powerStatus').html("<?=_('System is going down')?>... "+timer());
setTimeout(shutdown_online,500);
})
.fail(function(){start=new Date(); setTimeout(shutdown_offline,500);});
@@ -138,10 +160,10 @@ function shutdown_online() {
function shutdown_offline() {
var time = timer();
if (time < 30) {
$('.sub2').html("<?=_('System is offline')?>... "+time);
$('.js-powerStatus').html("<?=_('System is offline')?>... "+time);
setTimeout(shutdown_offline,500);
} else {
$('.sub2').html("<?=_('System is powered off')?>...");
$('.js-powerStatus').html("<?=_('System is powered off')?>...");
setTimeout(power_on,500);
}
}
@@ -177,8 +199,8 @@ case 'shutdown':
exec('/sbin/poweroff -n');
break;
}
echo '<div class="notice"></div>';
echo '<div class="sub1">';
echo '<div class="js-bootTitle boot-title"></div>';
echo '<div class="js-arrayStatus boot-subtext">';
switch (_var($var,'fsState')) {
case 'Stopped':
echo "<span class='red'>",_('Array Stopped'),"</span>$progress"; break;
@@ -190,7 +212,7 @@ default:
echo "<span class='green'>",_('Array Started'),"</span>$progress"; break;
}
echo '</div>';
echo '<div class="sub2"></div>';
echo '<div class="js-powerStatus boot-subtext"></div>';
echo '</body>';
}else{
?>

View File

@@ -1,5 +1,5 @@
#!/usr/bin/php -q
<?PHP
<?php
/* Copyright 2005-2024, Lime Technology
* Copyright 2012-2024, Bergware International.
*
@@ -13,7 +13,7 @@
$docroot ??= ($_SERVER['DOCUMENT_ROOT'] ?: '/usr/local/emhttp');
require_once "$docroot/webGui/include/Helpers.php";
extract(parse_plugin_cfg('dynamix',true));
extract(parse_plugin_cfg('dynamix', true));
// add translations
$_SERVER['REQUEST_URI'] = '';
@@ -22,8 +22,7 @@ require_once "$docroot/webGui/include/Translations.php";
$var = parse_ini_file('state/var.ini');
$unraid = parse_ini_file('/etc/unraid-version');
$keyfile = !empty(_var($var,'regFILE')) ? trim(base64_encode(@file_get_contents($var['regFILE']))) : '';
$width = in_array($display['theme'], ['azure','gray']) ? '98.8%' : '100%';
$keyfile = !empty(_var($var, 'regFILE')) ? trim(base64_encode(@file_get_contents($var['regFILE']))) : '';
$feedback = '/webGui/images/feedback_';
$diagn = _('Unable to generate system diagnostics');
@@ -31,61 +30,132 @@ $sorry = _('Sorry, an error occurred');
$again = _('Please try again later');
?>
<style>
div.spinner.fixed{z-index:100000}
div#control_panel{position:absolute;left:0;right:0;top:0;padding-top:8px;line-height:24px;white-space:nowrap}
div.divide{text-align:center;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
div.divide label{margin-right:30px}
div.allpanels{display:none;position:absolute;left:0;right:0;top:40px;bottom:0;overflow:auto}
div#footer_panel{position:absolute;left:0;right:0;bottom:0;text-align:right}
textarea.feedback{width:<?=$width?>;height:530px;margin:0;resize:none}
@media(max-width:960px){textarea.feedback{height:330px}}
@media(max-height:768px){textarea.feedback{height:330px}}
input#email{float:left;padding-left:4px}
p.note,label.note{font-size:1.1rem!important}
span.spacer{margin:0 4px}
img{display:inline-block;margin-bottom:30px}
.center{text-align:center!important}
.green-text{color:#4f8a10!important}
.red-text{color:#f0000c!important}
div.spinner.fixed {
z-index: 100000;
}
.feedback-control-panel {
padding-top: 8px;
line-height: 24px;
white-space: nowrap;
text-align: center;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
label {
margin-right: 30px;
}
}
.feedback-panel {
display: none;
}
.feedback-panel-textarea {
width: 100%;
height: 530px;
margin: 0;
resize: none;
box-sizing: border-box;
}
@media (max-width: 960px) {
.feedback-panel-textarea {
height: 330px;
}
}
@media (max-height: 768px) {
.feedback-panel-textarea {
height: 330px;
}
}
.feedback-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 1rem;
gap: 1rem;
}
.feedback-footer-nav {
display: flex;
align-items: center;
gap: 1rem;
}
.feedback-email-input {
padding-left: 4px;
}
.note {
font-size: 1.1rem !important;
}
.feedback-submission-img {
display: inline-block;
margin-bottom: 30px;
}
.center {
text-align: center !important;
}
.green-text {
color: var(--green-800) !important;
}
.red-text {
color: var(--red-600) !important;
}
</style>
<div>
<div id="control_panel" class="divide">
<label for="opt_featurerequest"><input type="radio" name="mode" id="opt_featurerequest" value="featurerequest" checked="checked"><?=_('Product Suggestion')?></label>
<label for="opt_bugreport"><input type="radio" name="mode" id="opt_bugreport" value="bugreport"><?=_('Bug Report')?></label>
<label for="opt_troubleshoot"><input type="radio" name="mode" id="opt_troubleshoot" value="troubleshoot"><?=_('Troubleshoot')?></label>
<label for="opt_comment"><input type="radio" name="mode" id="opt_comment" value="comment"><?=_('Other Comment')?></label>
<hr>
</div>
<div class="feedback-control-panel">
<label for="opt_featurerequest">
<input type="radio" name="mode" id="opt_featurerequest" value="featurerequest" checked="checked">
<?=_('Product Suggestion')?>
</label>
<label for="opt_bugreport">
<input type="radio" name="mode" id="opt_bugreport" value="bugreport">
<?=_('Bug Report')?>
</label>
<label for="opt_troubleshoot">
<input type="radio" name="mode" id="opt_troubleshoot" value="troubleshoot">
<?=_('Troubleshoot')?>
</label>
<label for="opt_comment">
<input type="radio" name="mode" id="opt_comment" value="comment">
<?=_('Other Comment')?>
</label>
<hr>
</div>
<div id="result_panel" class="allpanels"></div>
<div id="result_panel" class="feedback-panel"></div>
<div id="featurerequest_panel" class="allpanels">
<textarea id="featurerequest" class="feedback"></textarea>
</div>
<div id="featurerequest_panel" class="feedback-panel">
<textarea id="featurerequest" class="feedback-panel-textarea"></textarea>
</div>
<div id="bugreport_panel" class="allpanels">
<textarea id="bugreport" class="feedback"></textarea>
<label class="note" for="anonymize_bugreport"><input type="checkbox" id="anonymize_bugreport" class="anonymize" value="1"> <?=_('Anonymize diagnostics (may make troubleshooting more difficult)')?></label>
<p class="note"><b><?=_('NOTE')?>:</b> <i><?=_('Submission of this bug report will automatically send your system diagnostics to Lime Technology')?>.</i></p>
</div>
<div id="bugreport_panel" class="feedback-panel">
<textarea id="bugreport" class="feedback-panel-textarea"></textarea>
<label class="note" for="anonymize_bugreport">
<input type="checkbox" id="anonymize_bugreport" class="anonymize" value="1">
<?=_('Anonymize diagnostics (may make troubleshooting more difficult)')?>
</label>
<p class="note"><b><?=_('NOTE')?>:</b> <i><?=_('Submission of this bug report will automatically send your system diagnostics to Lime Technology')?>.</i></p>
</div>
<div id="troubleshoot_panel" class="allpanels">
<textarea id="troubleshoot" class="feedback"></textarea>
<label class="note" for="anonymize_troubleshoot"><input type="checkbox" id="anonymize_troubleshoot" class="anonymize" value="1"><?=_('Anonymize diagnostics (may make troubleshooting more difficult)')?></label>
<p class="note"><b><?=_('NOTE')?>:</b> <i><?=_('Submission of this troubleshooting request will automatically send your system diagnostics to Lime Technology')?>.</i></p>
</div>
<div id="troubleshoot_panel" class="feedback-panel">
<textarea id="troubleshoot" class="feedback-panel-textarea"></textarea>
<label class="note" for="anonymize_troubleshoot">
<input type="checkbox" id="anonymize_troubleshoot" class="anonymize" value="1">
<?=_('Anonymize diagnostics (may make troubleshooting more difficult)')?>
</label>
<p class="note"><b><?=_('NOTE')?>:</b> <i><?=_('Submission of this troubleshooting request will automatically send your system diagnostics to Lime Technology')?>.</i></p>
</div>
<div id="comment_panel" class="allpanels">
<textarea id="comment" class="feedback"></textarea>
</div>
<div id="comment_panel" class="feedback-panel">
<textarea id="comment" class="feedback-panel-textarea"></textarea>
</div>
<div id="footer_panel">
<input type="email" id="email" autocomplete="off" spellcheck="false">
<a href="https://unraid.net" target="_blank"><?=_('Website')?></a><span class="spacer blue-text">|</span>
<a href="https://forums.unraid.net" target="_blank"><?=_('Forum')?></a><span class="spacer blue-text">|</span>
<a href="https://docs.unraid.net/" target="_blank"><?=_('Docs')?></a>
</div>
<div class="feedback-footer">
<input class="feedback-email-input" type="email" autocomplete="off" spellcheck="false">
<nav class="feedback-footer-nav">
<a href="https://unraid.net" target="_blank"><?=_('Website')?></a>
<a href="https://forums.unraid.net" target="_blank"><?=_('Forum')?></a>
<a href="https://docs.unraid.net/" target="_blank"><?=_('Docs')?></a>
</nav>
</div>
</div>
<script>
@@ -136,7 +206,7 @@ String.prototype.md5 = function(){
function validInput(input) {
var validRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
var email = $('input#email');
var email = $('.feedback-email-input');
return input.val().md5() == md5[input.prop('id')] || !(email.prop('required')===false || email.val().match(validRegex));
}
@@ -167,13 +237,13 @@ function form_submit(url, params, tab, diagnostics) {
}).fail(function(){
$('div.spinner.fixed').hide();
panel.fadeOut('fast').find('textarea').prop('disabled',false);
var reply = "<h2 class='center red-text'><?=_('Error')?></h2><p class='center'><img src='<?=$feedback?>error.png'><br><?="$diagn. $again"?>.</p>";
var reply = "<h2 class='center red-text'><?=_('Error')?></h2><p class='center'><img class='feedback-submission-img' src='<?=$feedback?>error.png'><br><?="$diagn. $again"?>.</p>";
$('#result_panel').html(reply).fadeIn('fast');
});
return;
}
params.description = $(tab).val();
params.email = $('input#email').val();
params.email = $('.feedback-email-input').val();
params.timestamp = "<?=time()?>";
params.osversion = "<?=$unraid['version']?>";
params.keyfile = "<?=$keyfile?>";
@@ -181,18 +251,18 @@ function form_submit(url, params, tab, diagnostics) {
$.post(url, params, function(data){
$('div.spinner.fixed').hide();
if (data.error) {
var reply = "<h2 class='center red-text'><?=_('Error')?></h2><p class='center'><img src='<?=$feedback?>error.png'><br><?="$sorry. $again"?>.</p>";
var reply = "<h2 class='center red-text'><?=_('Error')?></h2><p class='center'><img class='feedback-submission-img' src='<?=$feedback?>error.png'><br><?="$sorry. $again"?>.</p>";
$('#result_panel').html(reply).fadeIn('fast');
} else {
var name = tab.substr(1).toLowerCase();
var reply = "<h2 class='center green-text'><?=_('Thank You')?></h2><p class='center'><img src='<?=$feedback?>"+name+".png'><br>"+(data.message||'')+"</p>";
var reply = "<h2 class='center green-text'><?=_('Thank You')?></h2><p class='center'><img class='feedback-submission-img' src='<?=$feedback?>"+name+".png'><br>"+(data.message||'')+"</p>";
$('#result_panel').html(reply).fadeIn('fast');
}
}).fail(function(jqXHR, textStatus, errorThrown){
if (jqXHR.responseJSON && jqXHR.responseJSON.error) {
errorThrown = jqXHR.responseJSON.error;
}
var reply = "<h2 class='center red-text'><?=_('Error')?></h2><p class='center'><img src='<?=$feedback?>error.png'><br><?="$sorry. $again"?>.</p>";
var reply = "<h2 class='center red-text'><?=_('Error')?></h2><p class='center'><img class='feedback-submission-img' src='<?=$feedback?>error.png'><br><?="$sorry. $again"?>.</p>";
$('#result_panel').html(reply).fadeIn('fast');
}).always(function(){
$('#spinner_image').fadeOut('fast');
@@ -209,9 +279,9 @@ $(function(){
var panel = tab+'_panel';
var enter = ['#troubleshoot'].includes(tab);
var email = "<?=_('Contact Email Address')?> ("+"<?=_('required')?>"+")";
$('input#email').prop('placeholder',email).prop('required','true');
$('.feedback-email-input').prop('placeholder',email).prop('required','true');
$('#submit_button').prop('disabled',validInput($(tab)));
$('.allpanels').not(panel).fadeOut('fast');
$('.feedback-panel').not(panel).fadeOut('fast');
$(panel).fadeIn('fast');
});
@@ -219,7 +289,7 @@ $(function(){
$('#submit_button').prop('disabled',validInput($(this)));
});
$('input#email').on('input change',function(){
$('.feedback-email-input').on('input change',function(){
var tab = '#'+$('input[name=mode]:checked').val();
$('#submit_button').prop('disabled',validInput($(tab)));
});

View File

@@ -200,16 +200,10 @@ input#dfm_target {
color: var(--input-dfm-target-text-color);
width: 500px;
}
input#dfm_target + .fileTree {
background: var(--input-dfm-target-filetree-bg-color);
/* .fileTree {
width: 500px;
max-height: 320px;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
z-index: 100;
display: none;
}
} */
i.dfm_filter {
margin-top: -2px;
}

View File

@@ -1,10 +1,4 @@
:root {
/* Theme-specific shades */
--eth0-shade-azure: var(--theme-azure--gray-150);
--eth0-shade-gray: var(--theme-gray--black-alt);
--eth0-shade-white: var(--gray-150);
--eth0-shade-black: var(--gray-800);
/* Input styles - default values (for azure/gray themes) */
--eth0-narrow-input-width: 188px;
--eth0-narrow-input-padding: 5px 6px;
@@ -47,25 +41,6 @@ input.form {
margin-left: 10px;
}
/* Theme-specific background shades - consolidated margin/padding */
div[class^="shade-"] {
margin-top: 10px;
padding: 8px 0 3px 0;
}
div.shade-white {
background-color: var(--eth0-shade-white);
}
div.shade-black {
background-color: var(--eth0-shade-black);
}
div.shade-azure {
background-color: var(--eth0-shade-azure);
}
div.shade-gray {
background-color: var(--eth0-shade-gray);
}
/* Utility classes */
select.slim {
min-width: 47px;

View File

@@ -1,30 +1,3 @@
:root {
--share-edit-shade-azure: #edeaef;
--share-edit-shade-gray: #121510;
--share-edit-shade-white: var(--gray-150);
--share-edit-shade-black: var(--gray-800);
}
div.shade-white {
background-color: var(--share-edit-shade-white); /* Condensed from: #ededed */
margin-top: 10px;
padding: 8px 0 3px 0;
}
div.shade-black {
background-color: var(--share-edit-shade-black);
margin-top: 10px;
padding: 8px 0 3px 0;
}
div.shade-azure {
background-color: var(--share-edit-shade-azure);
margin-top: 10px;
padding: 8px 0 3px 0;
}
div.shade-gray {
background-color: var(--share-edit-shade-gray);
margin-top: 10px;
padding: 8px 0 3px 0;
}
#s1,
#s2,
#s3,

View File

@@ -1,11 +1,6 @@
:root {
--wg0-span-hshift-margin-right: -7px;
--wg0-span-label-margin-left: -12px;
--wg0-shade-azure: #edeaef;
--wg0-shade-gray: #121510;
--wg0-shade-white: var(--gray-150);
--wg0-shade-black: var(--gray-800);
}
.Theme--sidebar:root {
@@ -67,27 +62,6 @@ span.label {
letter-spacing: 1px;
margin-left: var(--wg0-span-label-margin-left);
}
div.shade-white {
background-color: var(--wg0-shade-white); /* Condensed from: #ededed */
margin-top: 10px;
padding: 8px 0 3px 0;
}
div.shade-black {
background-color: var(--wg0-shade-black);
margin-top: 10px;
padding: 8px 0 3px 0;
}
div.shade-azure {
background-color: var(--wg0-shade-azure);
margin-top: 10px;
padding: 8px 0 3px 0;
}
div.shade-gray {
background-color: var(--wg0-shade-gray);
margin-top: 10px;
padding: 8px 0 3px 0;
}
div.title {
margin-bottom: 10px !important;
}

View File

@@ -1260,9 +1260,6 @@ div .unraid_mark_8 {
div.spinner .unraid_mark_7 {
animation: mark_7 1.5s ease infinite;
}
div.domain {
margin-top: -20px;
}
@keyframes mark_2 {
50% {
transform: translateY(-40px);
@@ -1510,6 +1507,12 @@ span#wlan0 {
cursor: pointer;
}
.shade {
margin-top: 1rem;
padding: 1rem 0;
background-color: var(--shade-bg-color);
}
/*
* Using CSS Nesting, to narrow down the scope of the styles to the .Theme--sidebar class.
* This allows us to have default-azure & default-gray set css variables
@@ -2160,14 +2163,14 @@ span#wlan0 {
display: block;
clear: both;
}
div.vmtemplate:hover {
background-color: var(--opac-background-color);
}
div.vmtemplate {
height: 12rem;
width: 12rem;
border: 1px solid var(--table-alt-border-color);
}
div.vmtemplate:hover {
background-color: var(--opac-background-color);
}
div.vmtemplate img {
margin-top: 20px;
}

View File

@@ -1,3 +1,7 @@
/*
* Naming convention inspired by Tailwind CSS
* @see https://tailwindcss.com/docs/customizing-colors
*/
:root {
--font-sans: clear-sans, sans-serif;
--font-bitstream: bitstream;
@@ -36,8 +40,8 @@
--orange-200: #ff9900;
--orange-300: #e68a00;
--orange-400: #ce7c10;
--orange-500: #ff8c2f;
--orange-800: #f15a2c;
--orange-500: #ff8c2f; /* Unraid Brand Orange */
--orange-800: #f15a2c; /* Unraid Brand Orange Dark */
--orange-900: #d63301;
--red-100: #ffddd1;
@@ -45,7 +49,7 @@
--red-500: #ff3300;
--red-600: #f0000c; /* Condensed from: #ff0000 red */
--red-700: #de1100;
--red-800: #e22828; /* Condensed from: #e80000 #ef3d47 */
--red-800: #e22828; /* Unraid Brand Red, Condensed from: #e80000 #ef3d47 */
--red-900: #941c00;
--green-100: #dff2bf;

View File

@@ -119,26 +119,6 @@
margin-left: auto;
margin-right: auto;
}
.jGrowl-notification.alert {
color: var(--dynamix-jgrowl-alert-text-color);
background-color: var(--dynamix-jgrowl-alert-bg-color);
border: 1px solid var(--dynamix-jgrowl-alert-border-color);
}
.jGrowl-notification.warning {
color: var(--dynamix-jgrowl-warning-text-color);
background-color: var(--dynamix-jgrowl-warning-bg-color);
border: 1px solid var(--dynamix-jgrowl-warning-border-color);
}
.jGrowl-notification.normal {
color: var(--dynamix-jgrowl-normal-text-color);
background-color: var(--dynamix-jgrowl-normal-bg-color);
border: 1px solid var(--dynamix-jgrowl-normal-border-color);
}
.jGrowl-notification.default {
color: var(--dynamix-jgrowl-text-color);
background-color: var(--dynamix-jgrowl-bg-color);
border: 1px solid var(--dynamix-jgrowl-border-color);
}
.jGrowl-notification {
opacity: 0.96;
min-height: 1.2rem;
@@ -147,7 +127,34 @@
margin: 5px 0;
text-align: left;
border-radius: 6px;
box-shadow: 2px 2px 1px var(--dynamix-jgrowl-shadow-color);
&.alert {
color: var(--dynamix-jgrowl-alert-text-color);
background-color: var(--dynamix-jgrowl-alert-bg-color);
border: 1px solid var(--dynamix-jgrowl-alert-border-color);
box-shadow: 2px 2px 1px var(--dynamix-jgrowl-shadow-color);
}
&.warning {
color: var(--dynamix-jgrowl-warning-text-color);
background-color: var(--dynamix-jgrowl-warning-bg-color);
border: 1px solid var(--dynamix-jgrowl-warning-border-color);
box-shadow: 2px 2px 1px var(--dynamix-jgrowl-shadow-color);
}
&.normal {
color: var(--dynamix-jgrowl-normal-text-color);
background-color: var(--dynamix-jgrowl-normal-bg-color);
border: 1px solid var(--dynamix-jgrowl-normal-border-color);
box-shadow: 2px 2px 1px var(--dynamix-jgrowl-shadow-color);
}
&.default {
color: var(--dynamix-jgrowl-text-color);
background-color: var(--dynamix-jgrowl-bg-color);
border: 1px solid var(--dynamix-jgrowl-border-color);
box-shadow: 2px 2px 1px var(--dynamix-jgrowl-shadow-color);
}
}
.jGrowl-notification .jGrowl-header {
font-weight: bold;
@@ -1450,6 +1457,13 @@ div.icon-zip {
border-left: 3px solid var(--dynamix-tooltipster-sidetip-box-border-color);
}
.fileTree {
display: none;
width: 300px;
max-height: 300px;
position: absolute;
z-index: 100;
overflow-y: scroll;
overflow-x: hidden;
background-color: var(--dynamix-filetree-bg-color);
}
#guiSearchBox:placeholder-shown {

View File

@@ -24,7 +24,7 @@
--background-color: var(--gray-150); /* Originally #e4e2e4 */
--alt-background-color: var(--gray-700); /* Originally #383a34 */
--opac-background-color: var(--gray-895);
--opac-background-color: var(--white-opacity-80);
--mild-background-color: var(--theme-azure--gray-150);
--usage-bar-background-color: var(--theme-azure--cyan-400);
--usage-disk-background-color: var(--theme-azure--gray-150);
@@ -85,6 +85,8 @@
--input-bg-color: var(--mild-background-color);
--focus-input-bg-color: var(--theme-azure--gray-150);
--shade-bg-color: var(--theme-azure--gray-150);
/* /End vars used in default-base */
/* Set vars for default-dynamix */

View File

@@ -70,7 +70,10 @@
--input-bg-color: transparent;
--focus-input-bg-color: var(--mild-background-color);
--shade-bg-color: var(--gray-800);
/* /End vars used in default-base */
/* dynamix CSS var values set in base-dynamix.css */
/* dynamix CSS var values set in default-dynamix.css */
--dynamix-filetree-bg-color: var(--gray-900);
}

View File

@@ -81,9 +81,13 @@
--input-bg-color: var(--theme-gray--black-alt);
--focus-input-border-color: var(--blue-700);
--focus-input-background-color: var(--mild-background-color);
--shade-bg-color: var(--theme-gray--black-alt);
/* /End vars used in default-base */
/* Set vars for default-dynamix */
--dynamix-filetree-bg-color: var(--gray-900);
--dynamix-ui-dropdownchecklist-color: var(--theme-gray--cyan-300);
--dynamix-ui-dropdownchecklist-color-alt1: var(--gray-900);
--dynamix-ui-dropdownchecklist-dropcontainer-border-color: var(--blue-700);

View File

@@ -71,6 +71,8 @@
--input-bg-color: transparent;
--focus-input-bg-color: var(--gray-150);
--shade-bg-color: var(--gray-150);
/* /End vars used in default-base */
/* Set vars for default-dynamix */