mirror/webgui
1
0
Fork 0
mirror of https://github.com/unraid/webgui.git synced 2026-01-08 02:29:51 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2118 from unraid/chore/clean-up-shade-classes

Browse Source 
refactor: theme specific shade classes
This commit is contained in:
tom mortensen
2025-04-04 09:34:03 -07:00
committed by GitHub
parent 053116a047 d364973546
commit 36a899d0e6
15 changed files with 32 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
emhttp/plugins/dynamix/Eth0.page
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"))?>">

4
emhttp/plugins/dynamix/EthX.page
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"))?>">

2
emhttp/plugins/dynamix/RoutingTable.page
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>

8
emhttp/plugins/dynamix/ShareEdit.page
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')">

4
emhttp/plugins/dynamix/WG0.page
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>

4
emhttp/plugins/dynamix/WGX.page
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>

8
emhttp/plugins/dynamix/Wireless.page
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>

25
emhttp/plugins/dynamix/sheets/Eth0.css
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;

27
emhttp/plugins/dynamix/sheets/ShareEdit.css
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,

26
emhttp/plugins/dynamix/sheets/WG0.css
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;
}

6
emhttp/plugins/dynamix/styles/default-base.css
View File

@@ -1507,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

2
emhttp/plugins/dynamix/styles/themes/azure.css
View File

@@ -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 */

2
emhttp/plugins/dynamix/styles/themes/black.css
View File

@@ -70,6 +70,8 @@
--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 default-dynamix.css */

2
emhttp/plugins/dynamix/styles/themes/gray.css
View File

@@ -81,6 +81,8 @@
--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 */

2
emhttp/plugins/dynamix/styles/themes/white.css
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 */