Pi-Hole/web
1
0
Fork 0
mirror of https://github.com/pi-hole/web.git synced 2025-12-20 02:38:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Settings Pages - small adjustments (#3000)

Browse Source 
- Fix buttons in high contrast themes
- consistent indentation and widths for fields and labels
- use class `form-control` to format every form field
- add some line breaks to improve readability
- use colors in "Currently active sessions" table
This commit is contained in:
RD WebDesign
2024-04-03 16:27:35 -03:00
committed by GitHub
parent 92cf92b40b 172e4ea3c4
commit f842c72236
9 changed files with 68 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
scripts/pi-hole/js/settings-api.js
View File

@@ -15,9 +15,9 @@ var TOTPdata = null;
function renderBool(data, type) { function renderBool(data, type) {
// Display and search content // Display and search content
if (type === "display" || type === "filter") { if (type === "display" || type === "filter") {
var icon = "fa-xmark"; var icon = "fa-xmark text-danger";
if (data === true) { if (data === true) {
icon = "fa-check"; icon = "fa-check text-success";
} }
return '<i class="fa-solid ' + icon + '"></i>'; return '<i class="fa-solid ' + icon + '"></i>';
@@ -88,7 +88,7 @@ $(function () {
$("td:eq(9)", row).html(button); $("td:eq(9)", row).html(button);
if (data.current_session) { if (data.current_session) {
ownSessionID = data.id; ownSessionID = data.id;
$(row).addClass("text-bold"); $(row).addClass("text-bold allowed-row");
$(row).attr("title", "This is the session you are currently using for the web interface"); $(row).attr("title", "This is the session you are currently using for the web interface");
} }
@@ -96,13 +96,13 @@ $(function () {
let title = ""; let title = "";
if (data.tls.mixed) { if (data.tls.mixed) {
title = "Session is PARTIALLY end-to-end encrypted"; title = "Session is PARTIALLY end-to-end encrypted";
icon = "fa-triangle-exclamation"; icon = "fa-triangle-exclamation text-warning";
} else if (data.tls.login) { } else if (data.tls.login) {
title = "Session is end-to-end encrypted (TLS/SSL)"; title = "Session is end-to-end encrypted (TLS/SSL)";
icon = "fa-check"; icon = "fa-check text-success";
} else { } else {
title = "Session is NOT end-to-end encrypted (TLS/SSL)"; title = "Session is NOT end-to-end encrypted (TLS/SSL)";
icon = "fa-xmark"; icon = "fa-xmark text-danger";
} }
$("td:eq(3)", row).html('<i class="fa-solid ' + icon + '" title="' + title + '"></i>'); $("td:eq(3)", row).html('<i class="fa-solid ' + icon + '" title="' + title + '"></i>');

18
settings-api.lp
View File

@@ -36,7 +36,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<p><strong>Important:</strong> Those input fields accept regex entries only. Please refer to <a href="https://docs.pi-hole.net/regex/tutorial/" rel="noopener" target="_blank">our guide</a> how to construct valid regex entries. <p><strong>Important</strong>:<br>Those input fields accept regex entries only.<br>Please refer to <a href="https://docs.pi-hole.net/regex/tutorial/" rel="noopener" target="_blank">our guide</a> how to construct valid regex entries.
</div> </div>
</div> </div>
</div> </div>
@@ -50,7 +50,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
<div class="box-body"> <div class="box-body">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<div class="row"> <div class="row form-group">
<div class="col-lg-3"> <div class="col-lg-3">
<label for="webserver.interface.theme">Used theme:</label> <label for="webserver.interface.theme">Used theme:</label>
</div> </div>
@@ -123,19 +123,19 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
</div> </div>
</div> </div>
<div class="col-lg-12"> <div class="col-lg-12">
<div class="row"> <div class="row form-group">
<div class="col-md-6"> <div class="col-sm-6">
<label for="webserver.api.temp.limit"><strong>Temperature limit for "hot":</strong></label> <label for="webserver.api.temp.limit"><strong>Temperature limit for "hot":</strong></label>
</div> </div>
<div class="col-md-6"> <div class="col-sm-6">
<input type="number" data-type="integer" id="webserver.api.temp.limit" data-key="webserver.api.temp.limit"> <input class="form-control" type="number" data-type="integer" id="webserver.api.temp.limit" data-key="webserver.api.temp.limit">
</div> </div>
</div> </div>
<div class="row"> <div class="row form-group">
<div class="col-lg-6"> <div class="col-sm-6">
<label for="webserver.api.temp.unit">Temperature unit:</label> <label for="webserver.api.temp.unit">Temperature unit:</label>
</div> </div>
<div class="col-md-6"> <div class="col-sm-6">
<select id="webserver.api.temp.unit" data-key="webserver.api.temp.unit" class="form-control" placeholder=""> <select id="webserver.api.temp.unit" data-key="webserver.api.temp.unit" class="form-control" placeholder="">
<option disabled selected>Loading...</option> <option disabled selected>Loading...</option>
</select> </select>

28
settings-dhcp.lp
View File

@@ -23,8 +23,10 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
<div class="box-body"> <div class="box-body">
<div class="row"> <div class="row">
<div class="col-md-12"> <div class="col-md-12">
<div><input type="checkbox" id="dhcp.active" data-key="dhcp.active"><label for="dhcp.active"><strong>DHCP server enabled</strong></label></div> <div>
<p id="dhcpnotice" lookatme-text="Make sure your router's DHCP server is disabled when using the Pi-hole DHCP server!">Make sure your router's DHCP server is disabled when using the Pi-hole DHCP server!</p> <input type="checkbox" id="dhcp.active" data-key="dhcp.active"><label for="dhcp.active"><strong>DHCP server enabled</strong></label>
<p class="help-block" id="dhcpnotice" lookatme-text="Make sure your router's DHCP server is disabled when using the Pi-hole DHCP server!">Make sure your router's DHCP server is disabled when using the Pi-hole DHCP server!</p>
</div>
</div> </div>
<div class="col-xs-12"> <div class="col-xs-12">
<label style="margin-top: 10px">Range of IP addresses to hand out</label> <label style="margin-top: 10px">Range of IP addresses to hand out</label>
@@ -75,8 +77,10 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
<p>Leave the netmask field empty to have Pi-hole infer it from the configured IP address of your device. If you want to specify a netmask, you can use the format <code>255.255.255.0</code>.</p> <p>Leave the netmask field empty to have Pi-hole infer it from the configured IP address of your device. If you want to specify a netmask, you can use the format <code>255.255.255.0</code>.</p>
</div> </div>
<div class="col-md-12"> <div class="col-md-12">
<div><input type="checkbox" id="dhcp.ipv6" data-key="dhcp.ipv6" class="DHCPgroup">&nbsp;<label for="dhcp.ipv6"><strong>Enable additional IPv6 support (SLAAC + RA)</strong></label></div> <div>
<p>Enable this option to enable IPv6 support for the Pi-hole DHCP server. This will allow the Pi-hole to hand out IPv6 addresses to clients and also provide IPv6 router advertisements (RA) to clients. This option is only useful if the Pi-hole is configured with an IPv6 address.</p> <input type="checkbox" id="dhcp.ipv6" data-key="dhcp.ipv6" class="DHCPgroup">&nbsp;<label for="dhcp.ipv6"><strong>Enable additional IPv6 support (SLAAC + RA)</strong></label>
<p class="help-block">Enable this option to enable IPv6 support for the Pi-hole DHCP server. This will allow the Pi-hole to hand out IPv6 addresses to clients and also provide IPv6 router advertisements (RA) to clients. This option is only useful if the Pi-hole is configured with an IPv6 address.</p>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -103,13 +107,17 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-sm-12">
<div><input type="checkbox" id="dhcp.rapidCommit" data-key="dhcp.rapidCommit" class="DHCPgroup">&nbsp;<label for="dhcp.rapidCommit"><strong>Enable DHCPv4 rapid commit (fast address assignment)</strong></label></div> <div>
<p>The DHCPv4 rapid commit option allows the Pi-hole DHCP server to assign an IP address to a client right away. This can notably speed up the address assignment process and you will notice, e.g., faster WiFi joins in your network. This option should only be enabled if the Pi-hole DHCP server is the only DHCP server in your network.</p> <input type="checkbox" id="dhcp.rapidCommit" data-key="dhcp.rapidCommit" class="DHCPgroup">&nbsp;<label for="dhcp.rapidCommit"><strong>Enable DHCPv4 rapid commit (fast address assignment)</strong></label>
<p class="help-block">The DHCPv4 rapid commit option allows the Pi-hole DHCP server to assign an IP address to a client right away. This can notably speed up the address assignment process and you will notice, e.g., faster WiFi joins in your network. This option should only be enabled if the Pi-hole DHCP server is the only DHCP server in your network.</p>
</div>
</div> </div>
<div class="col-md-6"> <div class="col-sm-12">
<div><input type="checkbox" id="dhcp.multiDNS" data-key="dhcp.multiDNS" class="DHCPgroup">&nbsp;<label for="dhcp.multiDNS"><strong>Advertise DNS server multiple times</strong></label></div> <div>
<p>Advertise DNS server multiple times to clients. Some devices will add their own proprietary DNS servers to the list of DNS servers, which can cause issues with Pi-hole. This option will advertise the Pi-hole DNS server multiple times to clients, which should prevent this from happening.</p> <input type="checkbox" id="dhcp.multiDNS" data-key="dhcp.multiDNS" class="DHCPgroup">&nbsp;<label for="dhcp.multiDNS"><strong>Advertise DNS server multiple times</strong></label>
<p class="help-block">Advertise DNS server multiple times to clients. Some devices will add their own proprietary DNS servers to the list of DNS servers, which can cause issues with Pi-hole. This option will advertise the Pi-hole DNS server multiple times to clients, which should prevent this from happening.</p>
</div>
</div> </div>
</div> </div>
</div> </div>

17
settings-dns.lp
View File

@@ -37,7 +37,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
</div> </div>
<div class="col-sm-12"> <div class="col-sm-12">
<div class="box collapsed-box"> <div class="box collapsed-box">
<div class="box-header with-border pointer no-user-select" data-widget="collapse"> <div class="box-header with-border pointer" data-widget="collapse">
<h3 class="box-title">Custom DNS servers <span id="custom-servers-title"></span></h3> <h3 class="box-title">Custom DNS servers <span id="custom-servers-title"></span></h3>
<div class="box-tools pull-right"> <div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool"> <button type="button" class="btn btn-box-tool">
@@ -75,7 +75,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
<div> <div>
<input type="checkbox" id="dns.expandHosts" data-key="dns.expandHosts" title="domain-needed"> <input type="checkbox" id="dns.expandHosts" data-key="dns.expandHosts" title="domain-needed">
<label for="dns.expandHosts"><strong>Expand hostnames</strong></label> <label for="dns.expandHosts"><strong>Expand hostnames</strong></label>
<p>If set, the domain is added to simple names (without a period) in /etc/hosts in the same way as for DHCP-derived names.</p> <p class="help-block">If set, the domain is added to simple names (without a period) in /etc/hosts in the same way as for DHCP-derived names.</p>
</div> </div>
</div> </div>
</div> </div>
@@ -119,7 +119,8 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
<h4>Recommended setting</h4> <h4>Recommended setting</h4>
<div> <div>
<input type="radio" name="DNSinterface" id="dns.listeningMode-LOCAL" data-key="dns.listeningMode" value="local"> <input type="radio" name="DNSinterface" id="dns.listeningMode-LOCAL" data-key="dns.listeningMode" value="local">
<label for="dns.listeningMode-LOCAL"><strong>Allow only local requests</strong><br>Allows only queries from devices that are at most one hop away (local devices)</label> <label for="dns.listeningMode-LOCAL"><strong>Allow only local requests</strong>
<p class="help-block">Allows only queries from devices that are at most one hop away (local devices)</p>
</div> </div>
</div> </div>
<div class="danger-area"> <div class="danger-area">
@@ -136,7 +137,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
<input type="radio" name="DNSinterface" id="dns.listeningMode-ALL" data-key="dns.listeningMode" value="all"> <input type="radio" name="DNSinterface" id="dns.listeningMode-ALL" data-key="dns.listeningMode" value="all">
<label for="dns.listeningMode-ALL"><strong>Permit all origins</strong></label> <label for="dns.listeningMode-ALL"><strong>Permit all origins</strong></label>
</div> </div>
<p>These options are dangerous on devices <p class="help-block">These options are dangerous on devices
directly connected to the Internet such as cloud instances and are only safe if your directly connected to the Internet such as cloud instances and are only safe if your
Pi-hole is properly firewalled. In a typical at-home setup where your Pi-hole is Pi-hole is properly firewalled. In a typical at-home setup where your Pi-hole is
located within your local network (and you have <strong>not</strong> forwarded port 53 located within your local network (and you have <strong>not</strong> forwarded port 53
@@ -158,7 +159,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
<div> <div>
<input type="checkbox" id="dns.domainNeeded" data-key="dns.domainNeeded" title="domain-needed"> <input type="checkbox" id="dns.domainNeeded" data-key="dns.domainNeeded" title="domain-needed">
<label for="dns.domainNeeded"><strong>Never forward non-FQDN <code>A</code> and <code>AAAA</code> queries</strong></label> <label for="dns.domainNeeded"><strong>Never forward non-FQDN <code>A</code> and <code>AAAA</code> queries</strong></label>
<p>Tells Pi-hole to never forward A or AAAA queries for plain <p class="help-block">Tells Pi-hole to never forward A or AAAA queries for plain
names, without dots or domain parts, to upstream nameservers. If names, without dots or domain parts, to upstream nameservers. If
the name is not known from <code>/etc/hosts</code> or DHCP then a "not found" the name is not known from <code>/etc/hosts</code> or DHCP then a "not found"
answer is returned.<br> answer is returned.<br>
@@ -169,18 +170,18 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
<div> <div>
<input type="checkbox" id="dns.bogusPriv" data-key="dns.bogusPriv" title="bogus-priv"> <input type="checkbox" id="dns.bogusPriv" data-key="dns.bogusPriv" title="bogus-priv">
<label for="dns.bogusPriv"><strong>Never forward reverse lookups for private IP ranges</strong></label> <label for="dns.bogusPriv"><strong>Never forward reverse lookups for private IP ranges</strong></label>
<p>All reverse lookups for private IP ranges (i.e., <code>192.168.0.x/24</code>, etc.) <p class="help-block">All reverse lookups for private IP ranges (i.e., <code>192.168.0.x/24</code>, etc.)
which are not found in <code>/etc/hosts</code> or the DHCP leases are answered which are not found in <code>/etc/hosts</code> or the DHCP leases are answered
with "no such domain" rather than being forwarded upstream. The set with "no such domain" rather than being forwarded upstream. The set
of prefixes affected is the list given in <a href="https://tools.ietf.org/html/rfc6303">RFC6303</a>.</p> of prefixes affected is the list given in <a href="https://tools.ietf.org/html/rfc6303">RFC6303</a>.</p>
<p><strong>Important</strong>: Enabling these two options may increase your privacy, <p><strong>Important:</strong><br>Enabling these two options may increase your privacy,
but may also prevent you from being able to access. Make sure you have set up conditional forwarding in this case.</p> but may also prevent you from being able to access. Make sure you have set up conditional forwarding in this case.</p>
</div> </div>
<br> <br>
<div> <div>
<input type="checkbox" id="dns.dnssec" data-key="dns.dnssec"> <input type="checkbox" id="dns.dnssec" data-key="dns.dnssec">
<label for="dns.dnssec"><strong>Use DNSSEC</strong></label> <label for="dns.dnssec"><strong>Use DNSSEC</strong></label>
<p>Validate DNS replies and cache DNSSEC data. When forwarding DNS <p class="help-block">Validate DNS replies and cache DNSSEC data. When forwarding DNS
queries, Pi-hole requests the DNSSEC records needed to validate queries, Pi-hole requests the DNSSEC records needed to validate
the replies. If a domain fails validation or the upstream does not the replies. If a domain fails validation or the upstream does not
support DNSSEC, this setting can cause issues resolving domains. support DNSSEC, this setting can cause issues resolving domains.

12
settings-privacy.lp
View File

@@ -53,11 +53,11 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
</div> </div>
<br> <br>
<div class="row-flex"> <div class="row-flex">
<input type="number" id="database.maxDBdays" data-key="database.maxDBdays" data-type="integer" value="" min="0" step="10" style="width: 5em;"> <input class="form-control" type="number" id="database.maxDBdays" data-key="database.maxDBdays" data-type="integer" value="" min="0" step="10">
<label for="database.maxDBdays"><strong>Maximum number of days to keep queries in the database</strong></label> <label for="database.maxDBdays"><strong>Maximum number of days to keep queries in the database</strong></label>
</div> </div>
<div class="row-flex"> <div class="row-flex">
<input type="number" id="database.network.expire" data-key="database.network.expire" data-type="integer" value="" min="0" step="10" style="width: 5em;"> <input class="form-control" type="number" id="database.network.expire" data-key="database.network.expire" data-type="integer" value="" min="0" step="10">
<label for="database.network.expire"><strong>How long should IP addresses be kept in the network_addresses table [days]?</strong></label> <label for="database.network.expire"><strong>How long should IP addresses be kept in the network_addresses table [days]?</strong></label>
</div> </div>
<p>IP addresses (and associated host names) older than the specified number of days are removed to avoid dead entries in the network overview table.</p> <p>IP addresses (and associated host names) older than the specified number of days are removed to avoid dead entries in the network overview table.</p>
@@ -80,22 +80,22 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
<div> <div>
<input type="radio" id="misc.privacylevel-0" name="misc.privacylevel" data-key="misc.privacylevel" data-type="integer" value="0"> <input type="radio" id="misc.privacylevel-0" name="misc.privacylevel" data-key="misc.privacylevel" data-type="integer" value="0">
<label for="misc.privacylevel-0"><strong>Show everything and record everything</strong></label> <label for="misc.privacylevel-0"><strong>Show everything and record everything</strong></label>
<p>Gives maximum amount of statistics</p> <p class="help-block">Gives maximum amount of statistics</p>
</div> </div>
<div> <div>
<input type="radio" id="misc.privacylevel-1" name="misc.privacylevel" data-key="misc.privacylevel" data-type="integer" value="1"> <input type="radio" id="misc.privacylevel-1" name="misc.privacylevel" data-key="misc.privacylevel" data-type="integer" value="1">
<label for="misc.privacylevel-1"><strong>Hide domains: Display and store all domains as <code>hidden</code></strong></label> <label for="misc.privacylevel-1"><strong>Hide domains: Display and store all domains as <code>hidden</code></strong></label>
<p>This disables the Top Permitted Domains and Top Blocked Domains tables on the dashboard</p> <p class="help-block">This disables the Top Permitted Domains and Top Blocked Domains tables on the dashboard</p>
</div> </div>
<div> <div>
<input type="radio" id="misc.privacylevel-2" name="misc.privacylevel" data-key="misc.privacylevel" data-type="integer" value="2"> <input type="radio" id="misc.privacylevel-2" name="misc.privacylevel" data-key="misc.privacylevel" data-type="integer" value="2">
<label for="misc.privacylevel-2"><strong> Hide domains and clients: Display and store all domains as <code>hidden</code> and all clients as <code>0.0.0.0</code> </strong></label> <label for="misc.privacylevel-2"><strong> Hide domains and clients: Display and store all domains as <code>hidden</code> and all clients as <code>0.0.0.0</code> </strong></label>
<p>This disables all tables on the dashboard</p> <p class="help-block">This disables all tables on the dashboard</p>
</div> </div>
<div> <div>
<input type="radio" id="misc.privacylevel-3" name="misc.privacylevel" data-key="misc.privacylevel" data-type="integer" value="3"> <input type="radio" id="misc.privacylevel-3" name="misc.privacylevel" data-key="misc.privacylevel" data-type="integer" value="3">
<label for="misc.privacylevel-3"><strong> Anonymous mode: This disables basically everything except the live anonymous statistics</strong></label> <label for="misc.privacylevel-3"><strong> Anonymous mode: This disables basically everything except the live anonymous statistics</strong></label>
<p>No history is saved at all to the database, and nothing is shown in the query log. Also, there are no top item lists. Note that this also largely disabled regex capabilities.</p> <p class="help-block">No history is saved at all to the database, and nothing is shown in the query log. Also, there are no top item lists. Note that this also largely disabled regex capabilities.</p>
</div> </div>
<p>The privacy level may be increased at any time without having to restart the DNS resolver. However, note that the DNS resolver needs to be restarted when lowering the privacy level. This restarting is automatically done when saving.</p> <p>The privacy level may be increased at any time without having to restart the DNS resolver. However, note that the DNS resolver needs to be restarted when lowering the privacy level. This restarting is automatically done when saving.</p>
</div> </div>

9
settings-teleporter.lp
View File

@@ -20,11 +20,11 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
<h3 class="box-title">Export your Pi-hole's configuration</h3> <h3 class="box-title">Export your Pi-hole's configuration</h3>
</div> </div>
<div class="box-body"> <div class="box-body">
<p>Warning: This archive contains sensitive information about your Pi-hole installation, e.g. your 2FA-TOTP secret (if enabled). Please be careful with this file and do not share it with anyone even if they claim to help you.</p> <p><strong>Warning:</strong><br>This archive contains sensitive information about your Pi-hole installation, e.g. your 2FA-TOTP secret (if enabled). Please be careful with this file and do not share it with anyone even if they claim to help you.</p>
<? if not is_secure then ?><p class='text-danger'>Warning: You are currently not using an end-to-end encryption. This means that secrets like your 2FA-TOTP secret will be transmitted in plain text. We recommend to use HTTPS when exporting your configuration.</p><? end ?> <? if not is_secure then ?><p class='text-danger'><strong>Warning:</strong><br>You are currently not using an end-to-end encryption. This means that secrets like your 2FA-TOTP secret will be transmitted in plain text. We recommend to use HTTPS when exporting your configuration.</p><? end ?>
<div class="pull-right"> <div class="pull-right">
<a class="btn btn-app btn-success" id="GETTeleporter" target="_blank"> <a class="btn btn-app btn-success" id="GETTeleporter" target="_blank">
<i class="fa fa-save"></i><br>Export <i class="fa fa-save fa-xl"></i><br>Export
</a> </a>
</div> </div>
</div> </div>
@@ -39,11 +39,12 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
<div class="form-group"> <div class="form-group">
<label for="file">File input</label> <label for="file">File input</label>
<input type="file" name="file" id="file" accept="application/gzip,application/zip"> <input type="file" name="file" id="file" accept="application/gzip,application/zip">
<br>
<p class="help-block">When importing settings from a <em>newer</em> version of Pi-hole, not yet existing settings will be ignored. When importing from an <em>older</em> version of Pi-hole, settings for newer features will be initialized with their default values.</p> <p class="help-block">When importing settings from a <em>newer</em> version of Pi-hole, not yet existing settings will be ignored. When importing from an <em>older</em> version of Pi-hole, settings for newer features will be initialized with their default values.</p>
</div> </div>
<div class="pull-right"> <div class="pull-right">
<a class="btn btn-app btn-success" id="submit-import"> <a class="btn btn-app btn-success" id="submit-import">
<i class="fa fa-upload"></i><br>Import <i class="fa fa-upload fa-xl"></i><br>Import
</a> </a>
</div> </div>
</div> </div>

3
style/pi-hole.css
View File

@@ -1444,6 +1444,9 @@ table.dataTable tbody > tr > .selected {
margin: 0.5em 0; margin: 0.5em 0;
align-items: start; align-items: start;
} }
.row-flex .form-control {
width: auto;
}
.log-entry { .log-entry {
padding-left: 0.5em; padding-left: 0.5em;

8
style/themes/high-contrast-dark.css
View File

@@ -494,6 +494,10 @@ kbd {
color: #f54; color: #f54;
} }
.help-block {
color: #999;
}
.warning-count { .warning-count {
color: #000; color: #000;
background: #f94; background: #f94;
@@ -535,18 +539,22 @@ kbd {
.btn-info { .btn-info {
background: var(--info-color); background: var(--info-color);
border-color: var(--info-color) !important; border-color: var(--info-color) !important;
color: #fff;
} }
.btn-danger { .btn-danger {
background: var(--danger-color); background: var(--danger-color);
border-color: var(--danger-color) !important; border-color: var(--danger-color) !important;
color: #fff;
} }
.btn-warning { .btn-warning {
background: var(--warning-color); background: var(--warning-color);
border-color: var(--warning-color) !important; border-color: var(--warning-color) !important;
color: #fff;
} }
.btn-success { .btn-success {
background: var(--success-color); background: var(--success-color);
border-color: var(--success-color) !important; border-color: var(--success-color) !important;
color: #fff;
} }
.btn-info:hover { .btn-info:hover {

4
style/themes/high-contrast.css
View File

@@ -500,18 +500,22 @@ table.dataTable thead th:hover.sorting_desc_disabled::after {
.btn-info { .btn-info {
background: var(--info-color); background: var(--info-color);
border-color: var(--info-color) !important; border-color: var(--info-color) !important;
color: #fff;
} }
.btn-danger { .btn-danger {
background: var(--danger-color); background: var(--danger-color);
border-color: var(--danger-color) !important; border-color: var(--danger-color) !important;
color: #fff;
} }
.btn-warning { .btn-warning {
background: var(--warning-color); background: var(--warning-color);
border-color: var(--warning-color) !important; border-color: var(--warning-color) !important;
color: #fff;
} }
.btn-success { .btn-success {
background: var(--success-color); background: var(--success-color);
border-color: var(--success-color) !important; border-color: var(--success-color) !important;
color: #fff;
} }
.btn-default:hover { .btn-default:hover {