Update input labeling

This commit is contained in:
amcmanu3 2024-06-23 20:17:34 -04:00
parent 0156988d23
commit 54cc2faa45
2 changed files with 69 additions and 47 deletions

View File

@ -277,4 +277,23 @@ div.warnings div.wssError a:hover {
font-family: 'Sarabun', 'roboto', sans-serif; font-family: 'Sarabun', 'roboto', sans-serif;
} }
/**************************************************************/ /**************************************************************/
.custom-control-input:checked~.custom-control-label::before {
color: black !important;
background-color: blueviolet !important;
border-color: var(--outline) !important;
}
.custom-control-label::before {
background-color: white !important;
top: calc(-0.2rem);
}
.custom-switch .custom-control-label::after {
top: calc(-0.125rem + 1px);
}
.hidden-input {
margin-left: -40px;
}

View File

@ -96,58 +96,61 @@
placeholder="{{ translate('serverBackups', 'maxBackups', data['lang']) }}"> placeholder="{{ translate('serverBackups', 'maxBackups', data['lang']) }}">
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="compress" class="form-check-label ml-4 mb-4"></label> <div class="custom-control custom-switch">
{% if data['backup_config']['compress'] %} {% if data['backup_config']['compress'] %}
<input type="checkbox" class="form-check-input" id="compress" name="compress" checked="" <input type="checkbox" class="custom-control-input" id="compress" name="compress" checked=""
value="True">{{ translate('serverBackups', 'compress', data['lang']) }} value="True">
{% else %} {% else %}
<input type="checkbox" class="form-check-input" id="compress" name="compress" value="True">{{ <input type="checkbox" class="custom-control-input" id="compress" name="compress" value="True">
translate('serverBackups', 'compress', data['lang']) }} {% end %}
{% end %} <label for="compress" class="custom-control-label">{{ translate('serverBackups', 'compress',
data['lang']) }}</label>
</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="shutdown" class="form-check-label ml-4 mb-4"></label> <div class="custom-control custom-switch">
{% if data['backup_config']['shutdown'] %} {% if data['backup_config']['shutdown']%}
<input type="checkbox" class="form-check-input" id="shutdown" name="shutdown" checked="" <input type="checkbox" class="custom-control-input" id="shutdown" name="shutdown" checked=""
value="True">{{ translate('serverBackups', 'shutdown', data['lang']) }} value="True">
{% else %} {% else %}
<input type="checkbox" class="form-check-input" id="shutdown" name="shutdown" value="True">{{ <input type="checkbox" class="custom-control-input" id="shutdown" name="shutdown" value="True">
translate('serverBackups', 'shutdown', data['lang']) }} {% end %}
{% end %} <label for="shutdown" class="custom-control-label">{{ translate('serverBackups', 'shutdown',
data['lang']) }}</label>
</div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="command-check" class="form-check-label ml-4 mb-4"></label> <div class="custom-control custom-switch">
{% if data['backup_config']['before'] %} {% if data['backup_config']['before'] %}
<input type="checkbox" class="form-check-input" id="before-check" name="before-check" checked>{{ <input type="checkbox" class="custom-control-input" id="before-check" name="before-check" checked>
translate('serverBackups', 'before', data['lang']) }} <input type="text" class="form-control hidden-input" name="before" id="backup_before"
<br> value="{{ data['backup_config']['before'] }}" placeholder="We enter the / for you"
<input type="text" class="form-control" name="before" id="backup_before" style="display: inline-block;">
value="{{ data['backup_config']['before'] }}" placeholder="We enter the / for you" {% else %}
style="display: inline-block;"> <input type="checkbox" class="custom-control-input" id="before-check" name="before-check">
{% else %} <input type="text" class="form-control hidden-input" name="before" id="backup_before" value=""
<input type="checkbox" class="form-check-input" id="before-check" name="before-check">{{ placeholder="We enter the / for you." style="display: none;">
translate('serverBackups', 'before', data['lang']) }} {% end %}
<br> <label for="before-check" class="custom-control-label">{{
<input type="text" class="form-control" name="before" id="backup_before" value="" translate('serverBackups', 'before', data['lang']) }}</label>
placeholder="We enter the / for you." style="display: none;"> </div>
{% end %}
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="command-check" class="form-check-label ml-4 mb-4"></label> <div class="custom-control custom-switch">
{% if data['backup_config']['after'] %} {% if data['backup_config']['after'] %}
<input type="checkbox" class="form-check-input" id="after-check" name="after-check" checked>{{ <input type="checkbox" class="custom-control-input" id="after-check" name="after-check" checked>
translate('serverBackups', 'after', data['lang']) }} <input type="text" class="form-control hidden-input" name="after" id="backup_after"
<br> value="{{ data['backup_config']['after'] }}" placeholder="We enter the / for you"
<input type="text" class="form-control" name="after" id="backup_after" style="display: inline-block;">
value="{{ data['backup_config']['after'] }}" placeholder="We enter the / for you" <br>
style="display: inline-block;"> {% else %}
{% else %} <input type="checkbox" class="custom-control-input" id="after-check" name="after-check">
<input type="checkbox" class="form-check-input" id="after-check" name="after-check">{{ <input type="text" class="form-control hidden-input" name="after" id="backup_after" value=""
translate('serverBackups', 'after', data['lang']) }} placeholder="We enter the / for you." style="display: none;">
<br> {% end %}
<input type="text" class="form-control" name="after" id="backup_after" value="" <label for="after-check" class="custom-control-label">{{
placeholder="We enter the / for you." style="display: none;"> translate('serverBackups', 'after', data['lang']) }}</label>
{% end %} </div>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="server">{{ translate('serverBackups', 'exclusionsTitle', data['lang']) }} <small> - {{ <label for="server">{{ translate('serverBackups', 'exclusionsTitle', data['lang']) }} <small> - {{