🔨 Convert nextcloud setting modal to bootstrap

This commit is contained in:
Sebastien Clement 2021-01-08 16:54:31 +01:00
parent da37e6ecaf
commit 7d4b796950
10 changed files with 286 additions and 217 deletions

View File

@ -572,6 +572,7 @@ progress {
background-color: #222222;
border: 1px solid #dee2e6;
border-radius: 0.25rem;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
max-width: 100%;
height: auto;
}
@ -2152,12 +2153,13 @@ progress {
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
color: #b58e51;
background-color: #343a40;
background-clip: padding-box;
border: 1px solid #ced4da;
border: 1px solid #343a40;
appearance: none;
border-radius: 0.25rem;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
@ -2172,11 +2174,11 @@ progress {
cursor: pointer;
}
.form-control:focus {
color: #212529;
background-color: #fff;
border-color: #86b7fe;
color: #b58e51;
background-color: #343a40;
border-color: #dac7a8;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(181, 142, 81, 0.25);
}
.form-control::-webkit-date-and-time-value {
height: 1.5em;
@ -2193,7 +2195,7 @@ progress {
padding: 0.375rem 0.75rem;
margin: -0.375rem -0.75rem;
margin-inline-end: 0.75rem;
color: #212529;
color: #b58e51;
background-color: #e9ecef;
pointer-events: none;
border-color: inherit;
@ -2215,7 +2217,7 @@ progress {
padding: 0.375rem 0.75rem;
margin: -0.375rem -0.75rem;
margin-inline-end: 0.75rem;
color: #212529;
color: #b58e51;
background-color: #e9ecef;
pointer-events: none;
border-color: inherit;
@ -2318,21 +2320,22 @@ textarea.form-control-lg {
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
color: #b58e51;
vertical-align: middle;
background-color: #fff;
background-color: #343a40;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 16px 12px;
border: 1px solid #ced4da;
border: 1px solid #343a40;
border-radius: 0.25rem;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
appearance: none;
}
.form-select:focus {
border-color: #86b7fe;
border-color: #dac7a8;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(181, 142, 81, 0.25);
}
.form-select[multiple], .form-select[size]:not([size="1"]) {
padding-right: 0.75rem;
@ -2344,7 +2347,7 @@ textarea.form-control-lg {
}
.form-select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #212529;
text-shadow: 0 0 0 #b58e51;
}
.form-select-sm {
@ -2381,7 +2384,7 @@ textarea.form-control-lg {
background-repeat: no-repeat;
background-position: center;
background-size: contain;
border: 1px solid rgba(0, 0, 0, 0.25);
border: 1px solid #b58e51;
appearance: none;
color-adjust: exact;
transition: background-color 0.15s ease-in-out, background-position 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
@ -2401,13 +2404,13 @@ textarea.form-control-lg {
filter: brightness(90%);
}
.form-check-input:focus {
border-color: #86b7fe;
border-color: #dac7a8;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
box-shadow: 0 0 0 0.25rem rgba(181, 142, 81, 0.25);
}
.form-check-input:checked {
background-color: #0d6efd;
border-color: #0d6efd;
background-color: #b58e51;
border-color: #b58e51;
}
.form-check-input:checked[type=checkbox] {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
@ -2416,8 +2419,8 @@ textarea.form-control-lg {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input[type=checkbox]:indeterminate {
background-color: #0d6efd;
border-color: #0d6efd;
background-color: #b58e51;
border-color: #b58e51;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
.form-check-input:disabled {
@ -2435,12 +2438,12 @@ textarea.form-control-lg {
.form-switch .form-check-input {
width: 2em;
margin-left: -2.5em;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23b58e51'/%3e%3c/svg%3e");
background-position: left center;
border-radius: 2em;
}
.form-switch .form-check-input:focus {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2386b7fe'/%3e%3c/svg%3e");
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23dac7a8'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
background-position: right center;
@ -2474,10 +2477,10 @@ textarea.form-control-lg {
outline: none;
}
.form-range:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 1px #222222, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
box-shadow: 0 0 0 1px #222222, 0 0 0 0.25rem rgba(181, 142, 81, 0.25);
}
.form-range:focus::-moz-range-thumb {
box-shadow: 0 0 0 1px #222222, 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
box-shadow: 0 0 0 1px #222222, 0 0 0 0.25rem rgba(181, 142, 81, 0.25);
}
.form-range::-moz-focus-outer {
border: 0;
@ -2486,9 +2489,10 @@ textarea.form-control-lg {
width: 1rem;
height: 1rem;
margin-top: -0.25rem;
background-color: #0d6efd;
background-color: #b58e51;
border: 0;
border-radius: 1rem;
box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1);
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
appearance: none;
}
@ -2498,7 +2502,7 @@ textarea.form-control-lg {
}
}
.form-range::-webkit-slider-thumb:active {
background-color: #b6d4fe;
background-color: #e9ddcb;
}
.form-range::-webkit-slider-runnable-track {
width: 100%;
@ -2508,13 +2512,15 @@ textarea.form-control-lg {
background-color: #dee2e6;
border-color: transparent;
border-radius: 1rem;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
}
.form-range::-moz-range-thumb {
width: 1rem;
height: 1rem;
background-color: #0d6efd;
background-color: #b58e51;
border: 0;
border-radius: 1rem;
box-shadow: 0 0.1rem 0.25rem rgba(0, 0, 0, 0.1);
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
appearance: none;
}
@ -2524,7 +2530,7 @@ textarea.form-control-lg {
}
}
.form-range::-moz-range-thumb:active {
background-color: #b6d4fe;
background-color: #e9ddcb;
}
.form-range::-moz-range-track {
width: 100%;
@ -2534,6 +2540,7 @@ textarea.form-control-lg {
background-color: #dee2e6;
border-color: transparent;
border-radius: 1rem;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
}
.form-range:disabled {
pointer-events: none;
@ -2628,11 +2635,11 @@ textarea.form-control-lg {
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
color: #b58e51;
text-align: center;
white-space: nowrap;
background-color: #e9ecef;
border: 1px solid #ced4da;
border: 1px solid #343a40;
border-radius: 0.25rem;
}
@ -2854,17 +2861,25 @@ textarea.form-control-lg {
}
.btn-check:focus + .btn, .btn:focus {
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
box-shadow: 0 0 0 0.25rem rgba(181, 142, 81, 0.25);
}
.btn-check:checked + .btn, .btn-check:active + .btn, .btn:active, .btn.active {
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn-check:checked + .btn:focus, .btn-check:active + .btn:focus, .btn:active:focus, .btn.active:focus {
box-shadow: 0 0 0 0.25rem rgba(181, 142, 81, 0.25), inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
pointer-events: none;
opacity: 0.65;
box-shadow: none;
}
.btn-primary {
color: #fff;
background-color: #0d6efd;
border-color: #0d6efd;
box-shadow: none;
}
.btn-primary:hover {
color: #fff;
@ -2875,7 +2890,7 @@ textarea.form-control-lg {
color: #fff;
background-color: #0b5ed7;
border-color: #0a58ca;
box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
box-shadow: none, 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
color: #fff;
@ -2883,7 +2898,7 @@ textarea.form-control-lg {
border-color: #0a53be;
}
.btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.25rem rgba(49, 132, 253, 0.5);
}
.btn-primary:disabled, .btn-primary.disabled {
color: #fff;
@ -2895,6 +2910,7 @@ textarea.form-control-lg {
color: #fff;
background-color: #343a40;
border-color: #343a40;
box-shadow: none;
}
.btn-secondary:hover {
color: #fff;
@ -2905,7 +2921,7 @@ textarea.form-control-lg {
color: #fff;
background-color: #2c3136;
border-color: #2a2e33;
box-shadow: 0 0 0 0.25rem rgba(82, 88, 93, 0.5);
box-shadow: none, 0 0 0 0.25rem rgba(82, 88, 93, 0.5);
}
.btn-check:checked + .btn-secondary, .btn-check:active + .btn-secondary, .btn-secondary:active, .btn-secondary.active, .show > .btn-secondary.dropdown-toggle {
color: #fff;
@ -2913,7 +2929,7 @@ textarea.form-control-lg {
border-color: #272c30;
}
.btn-check:checked + .btn-secondary:focus, .btn-check:active + .btn-secondary:focus, .btn-secondary:active:focus, .btn-secondary.active:focus, .show > .btn-secondary.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(82, 88, 93, 0.5);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.25rem rgba(82, 88, 93, 0.5);
}
.btn-secondary:disabled, .btn-secondary.disabled {
color: #fff;
@ -2925,6 +2941,7 @@ textarea.form-control-lg {
color: #fff;
background-color: #198754;
border-color: #198754;
box-shadow: none;
}
.btn-success:hover {
color: #fff;
@ -2935,7 +2952,7 @@ textarea.form-control-lg {
color: #fff;
background-color: #157347;
border-color: #146c43;
box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5);
box-shadow: none, 0 0 0 0.25rem rgba(60, 153, 110, 0.5);
}
.btn-check:checked + .btn-success, .btn-check:active + .btn-success, .btn-success:active, .btn-success.active, .show > .btn-success.dropdown-toggle {
color: #fff;
@ -2943,7 +2960,7 @@ textarea.form-control-lg {
border-color: #13653f;
}
.btn-check:checked + .btn-success:focus, .btn-check:active + .btn-success:focus, .btn-success:active:focus, .btn-success.active:focus, .show > .btn-success.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(60, 153, 110, 0.5);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.25rem rgba(60, 153, 110, 0.5);
}
.btn-success:disabled, .btn-success.disabled {
color: #fff;
@ -2955,6 +2972,7 @@ textarea.form-control-lg {
color: #000;
background-color: #0dcaf0;
border-color: #0dcaf0;
box-shadow: none;
}
.btn-info:hover {
color: #000;
@ -2965,7 +2983,7 @@ textarea.form-control-lg {
color: #000;
background-color: #31d2f2;
border-color: #25cff2;
box-shadow: 0 0 0 0.25rem rgba(11, 172, 204, 0.5);
box-shadow: none, 0 0 0 0.25rem rgba(11, 172, 204, 0.5);
}
.btn-check:checked + .btn-info, .btn-check:active + .btn-info, .btn-info:active, .btn-info.active, .show > .btn-info.dropdown-toggle {
color: #000;
@ -2973,7 +2991,7 @@ textarea.form-control-lg {
border-color: #25cff2;
}
.btn-check:checked + .btn-info:focus, .btn-check:active + .btn-info:focus, .btn-info:active:focus, .btn-info.active:focus, .show > .btn-info.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(11, 172, 204, 0.5);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.25rem rgba(11, 172, 204, 0.5);
}
.btn-info:disabled, .btn-info.disabled {
color: #000;
@ -2985,6 +3003,7 @@ textarea.form-control-lg {
color: #000;
background-color: #ffc107;
border-color: #ffc107;
box-shadow: none;
}
.btn-warning:hover {
color: #000;
@ -2995,7 +3014,7 @@ textarea.form-control-lg {
color: #000;
background-color: #ffca2c;
border-color: #ffc720;
box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5);
box-shadow: none, 0 0 0 0.25rem rgba(217, 164, 6, 0.5);
}
.btn-check:checked + .btn-warning, .btn-check:active + .btn-warning, .btn-warning:active, .btn-warning.active, .show > .btn-warning.dropdown-toggle {
color: #000;
@ -3003,7 +3022,7 @@ textarea.form-control-lg {
border-color: #ffc720;
}
.btn-check:checked + .btn-warning:focus, .btn-check:active + .btn-warning:focus, .btn-warning:active:focus, .btn-warning.active:focus, .show > .btn-warning.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(217, 164, 6, 0.5);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.25rem rgba(217, 164, 6, 0.5);
}
.btn-warning:disabled, .btn-warning.disabled {
color: #000;
@ -3015,6 +3034,7 @@ textarea.form-control-lg {
color: #fff;
background-color: #dc3545;
border-color: #dc3545;
box-shadow: none;
}
.btn-danger:hover {
color: #fff;
@ -3025,7 +3045,7 @@ textarea.form-control-lg {
color: #fff;
background-color: #bb2d3b;
border-color: #b02a37;
box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5);
box-shadow: none, 0 0 0 0.25rem rgba(225, 83, 97, 0.5);
}
.btn-check:checked + .btn-danger, .btn-check:active + .btn-danger, .btn-danger:active, .btn-danger.active, .show > .btn-danger.dropdown-toggle {
color: #fff;
@ -3033,7 +3053,7 @@ textarea.form-control-lg {
border-color: #a52834;
}
.btn-check:checked + .btn-danger:focus, .btn-check:active + .btn-danger:focus, .btn-danger:active:focus, .btn-danger.active:focus, .show > .btn-danger.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(225, 83, 97, 0.5);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.25rem rgba(225, 83, 97, 0.5);
}
.btn-danger:disabled, .btn-danger.disabled {
color: #fff;
@ -3045,6 +3065,7 @@ textarea.form-control-lg {
color: #000;
background-color: #f8f9fa;
border-color: #f8f9fa;
box-shadow: none;
}
.btn-light:hover {
color: #000;
@ -3055,7 +3076,7 @@ textarea.form-control-lg {
color: #000;
background-color: #f9fafb;
border-color: #f9fafb;
box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
box-shadow: none, 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
}
.btn-check:checked + .btn-light, .btn-check:active + .btn-light, .btn-light:active, .btn-light.active, .show > .btn-light.dropdown-toggle {
color: #000;
@ -3063,7 +3084,7 @@ textarea.form-control-lg {
border-color: #f9fafb;
}
.btn-check:checked + .btn-light:focus, .btn-check:active + .btn-light:focus, .btn-light:active:focus, .btn-light.active:focus, .show > .btn-light.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.25rem rgba(211, 212, 213, 0.5);
}
.btn-light:disabled, .btn-light.disabled {
color: #000;
@ -3075,6 +3096,7 @@ textarea.form-control-lg {
color: #fff;
background-color: #292929;
border-color: #292929;
box-shadow: none;
}
.btn-dark:hover {
color: #fff;
@ -3085,7 +3107,7 @@ textarea.form-control-lg {
color: #fff;
background-color: #232323;
border-color: #212121;
box-shadow: 0 0 0 0.25rem rgba(73, 73, 73, 0.5);
box-shadow: none, 0 0 0 0.25rem rgba(73, 73, 73, 0.5);
}
.btn-check:checked + .btn-dark, .btn-check:active + .btn-dark, .btn-dark:active, .btn-dark.active, .show > .btn-dark.dropdown-toggle {
color: #fff;
@ -3093,7 +3115,7 @@ textarea.form-control-lg {
border-color: #1f1f1f;
}
.btn-check:checked + .btn-dark:focus, .btn-check:active + .btn-dark:focus, .btn-dark:active:focus, .btn-dark.active:focus, .show > .btn-dark.dropdown-toggle:focus {
box-shadow: 0 0 0 0.25rem rgba(73, 73, 73, 0.5);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.25rem rgba(73, 73, 73, 0.5);
}
.btn-dark:disabled, .btn-dark.disabled {
color: #fff;
@ -3119,7 +3141,7 @@ textarea.form-control-lg {
border-color: #0d6efd;
}
.btn-check:checked + .btn-outline-primary:focus, .btn-check:active + .btn-outline-primary:focus, .btn-outline-primary:active:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus {
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.25rem rgba(13, 110, 253, 0.5);
}
.btn-outline-primary:disabled, .btn-outline-primary.disabled {
color: #0d6efd;
@ -3144,7 +3166,7 @@ textarea.form-control-lg {
border-color: #343a40;
}
.btn-check:checked + .btn-outline-secondary:focus, .btn-check:active + .btn-outline-secondary:focus, .btn-outline-secondary:active:focus, .btn-outline-secondary.active:focus, .btn-outline-secondary.dropdown-toggle.show:focus {
box-shadow: 0 0 0 0.25rem rgba(52, 58, 64, 0.5);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.25rem rgba(52, 58, 64, 0.5);
}
.btn-outline-secondary:disabled, .btn-outline-secondary.disabled {
color: #343a40;
@ -3169,7 +3191,7 @@ textarea.form-control-lg {
border-color: #198754;
}
.btn-check:checked + .btn-outline-success:focus, .btn-check:active + .btn-outline-success:focus, .btn-outline-success:active:focus, .btn-outline-success.active:focus, .btn-outline-success.dropdown-toggle.show:focus {
box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.5);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.25rem rgba(25, 135, 84, 0.5);
}
.btn-outline-success:disabled, .btn-outline-success.disabled {
color: #198754;
@ -3194,7 +3216,7 @@ textarea.form-control-lg {
border-color: #0dcaf0;
}
.btn-check:checked + .btn-outline-info:focus, .btn-check:active + .btn-outline-info:focus, .btn-outline-info:active:focus, .btn-outline-info.active:focus, .btn-outline-info.dropdown-toggle.show:focus {
box-shadow: 0 0 0 0.25rem rgba(13, 202, 240, 0.5);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.25rem rgba(13, 202, 240, 0.5);
}
.btn-outline-info:disabled, .btn-outline-info.disabled {
color: #0dcaf0;
@ -3219,7 +3241,7 @@ textarea.form-control-lg {
border-color: #ffc107;
}
.btn-check:checked + .btn-outline-warning:focus, .btn-check:active + .btn-outline-warning:focus, .btn-outline-warning:active:focus, .btn-outline-warning.active:focus, .btn-outline-warning.dropdown-toggle.show:focus {
box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.5);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.25rem rgba(255, 193, 7, 0.5);
}
.btn-outline-warning:disabled, .btn-outline-warning.disabled {
color: #ffc107;
@ -3244,7 +3266,7 @@ textarea.form-control-lg {
border-color: #dc3545;
}
.btn-check:checked + .btn-outline-danger:focus, .btn-check:active + .btn-outline-danger:focus, .btn-outline-danger:active:focus, .btn-outline-danger.active:focus, .btn-outline-danger.dropdown-toggle.show:focus {
box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.5);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.25rem rgba(220, 53, 69, 0.5);
}
.btn-outline-danger:disabled, .btn-outline-danger.disabled {
color: #dc3545;
@ -3269,7 +3291,7 @@ textarea.form-control-lg {
border-color: #f8f9fa;
}
.btn-check:checked + .btn-outline-light:focus, .btn-check:active + .btn-outline-light:focus, .btn-outline-light:active:focus, .btn-outline-light.active:focus, .btn-outline-light.dropdown-toggle.show:focus {
box-shadow: 0 0 0 0.25rem rgba(248, 249, 250, 0.5);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.25rem rgba(248, 249, 250, 0.5);
}
.btn-outline-light:disabled, .btn-outline-light.disabled {
color: #f8f9fa;
@ -3294,7 +3316,7 @@ textarea.form-control-lg {
border-color: #292929;
}
.btn-check:checked + .btn-outline-dark:focus, .btn-check:active + .btn-outline-dark:focus, .btn-outline-dark:active:focus, .btn-outline-dark.active:focus, .btn-outline-dark.dropdown-toggle.show:focus {
box-shadow: 0 0 0 0.25rem rgba(41, 41, 41, 0.5);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.25rem rgba(41, 41, 41, 0.5);
}
.btn-outline-dark:disabled, .btn-outline-dark.disabled {
color: #292929;
@ -3393,6 +3415,7 @@ textarea.form-control-lg {
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.dropdown-menu[style] {
right: auto !important;
@ -3578,7 +3601,7 @@ textarea.form-control-lg {
.dropdown-item.active, .dropdown-item:active {
color: #fff;
text-decoration: none;
background-color: #0d6efd;
background-color: #b58e51;
}
.dropdown-item.disabled, .dropdown-item:disabled {
color: #6c757d;
@ -3619,7 +3642,7 @@ textarea.form-control-lg {
}
.dropdown-menu-dark .dropdown-item.active, .dropdown-menu-dark .dropdown-item:active {
color: #fff;
background-color: #0d6efd;
background-color: #b58e51;
}
.dropdown-menu-dark .dropdown-item.disabled, .dropdown-menu-dark .dropdown-item:disabled {
color: #adb5bd;
@ -3706,6 +3729,13 @@ textarea.form-control-lg {
padding-left: 0.75rem;
}
.btn-group.show .dropdown-toggle {
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn-group.show .dropdown-toggle.btn-link {
box-shadow: none;
}
.btn-group-vertical {
flex-direction: column;
align-items: flex-start;
@ -3790,7 +3820,7 @@ textarea.form-control-lg {
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
color: #fff;
background-color: #0d6efd;
background-color: #b58e51;
}
.nav-fill > .nav-link,
@ -4289,7 +4319,7 @@ textarea.form-control-lg {
}
.accordion-button:not(.collapsed) {
color: #0c63e4;
background-color: #e7f1ff;
background-color: #f8f4ee;
}
.accordion-button:not(.collapsed)::after {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
@ -4316,9 +4346,9 @@ textarea.form-control-lg {
}
.accordion-button:focus {
z-index: 3;
border-color: #86b7fe;
border-color: #dac7a8;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
box-shadow: 0 0 0 0.25rem rgba(181, 142, 81, 0.25);
}
.accordion-header {
@ -4420,7 +4450,7 @@ textarea.form-control-lg {
color: #0a58ca;
background-color: #e9ecef;
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
box-shadow: 0 0 0 0.25rem rgba(181, 142, 81, 0.25);
}
.page-item:not(:first-child) .page-link {
@ -4429,8 +4459,8 @@ textarea.form-control-lg {
.page-item.active .page-link {
z-index: 3;
color: #fff;
background-color: #0d6efd;
border-color: #0d6efd;
background-color: #b58e51;
border-color: #b58e51;
}
.page-item.disabled .page-link {
color: #6c757d;
@ -4527,75 +4557,75 @@ textarea.form-control-lg {
}
.alert-primary {
color: #084298;
background-color: #cfe2ff;
border-color: #b6d4fe;
color: white;
background-color: #0d6efd;
border-color: #257dfd;
}
.alert-primary .alert-link {
color: #06357a;
color: #cccccc;
}
.alert-secondary {
color: #1f2326;
background-color: #d6d8d9;
border-color: #c2c4c6;
color: white;
background-color: #343a40;
border-color: #484e53;
}
.alert-secondary .alert-link {
color: #191c1e;
color: #cccccc;
}
.alert-success {
color: #0f5132;
background-color: #d1e7dd;
border-color: #badbcc;
color: white;
background-color: #198754;
border-color: #309365;
}
.alert-success .alert-link {
color: #0c4128;
color: #cccccc;
}
.alert-info {
color: #055160;
background-color: #cff4fc;
border-color: #b6effb;
color: #0dcaf0;
background-color: #0dcaf0;
border-color: #25cff2;
}
.alert-info .alert-link {
color: #04414d;
color: #0aa2c0;
}
.alert-warning {
color: #664d03;
background-color: #fff3cd;
border-color: #ffecb5;
color: #ffc107;
background-color: #ffc107;
border-color: #ffc720;
}
.alert-warning .alert-link {
color: #523e02;
color: #cc9a06;
}
.alert-danger {
color: #842029;
background-color: #f8d7da;
border-color: #f5c2c7;
color: white;
background-color: #dc3545;
border-color: #e04958;
}
.alert-danger .alert-link {
color: #6a1a21;
color: #cccccc;
}
.alert-light {
color: #636464;
background-color: #fefefe;
border-color: #fdfdfe;
color: #f8f9fa;
background-color: #f8f9fa;
border-color: #f9fafb;
}
.alert-light .alert-link {
color: #4f5050;
color: #c6c7c8;
}
.alert-dark {
color: #191919;
background-color: #d4d4d4;
border-color: #bfbfbf;
color: white;
background-color: #292929;
border-color: #3e3e3e;
}
.alert-dark .alert-link {
color: #141414;
color: #cccccc;
}
@keyframes progress-bar-stripes {
@ -4610,6 +4640,7 @@ textarea.form-control-lg {
font-size: 0.75rem;
background-color: #e9ecef;
border-radius: 0.25rem;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
}
.progress-bar {
@ -4653,14 +4684,14 @@ textarea.form-control-lg {
.list-group-item-action {
width: 100%;
color: #495057;
color: #b58e51;
text-align: inherit;
}
.list-group-item-action:hover, .list-group-item-action:focus {
z-index: 1;
color: #495057;
color: #adb5bd;
text-decoration: none;
background-color: #f8f9fa;
background-color: #343a40;
}
.list-group-item-action:active {
color: #212529;
@ -4672,7 +4703,7 @@ textarea.form-control-lg {
display: block;
padding: 0.5rem 1rem;
text-decoration: none;
background-color: #fff;
background-color: #343a40;
border: 1px solid rgba(0, 0, 0, 0.125);
}
.list-group-item:first-child {
@ -4686,13 +4717,13 @@ textarea.form-control-lg {
.list-group-item.disabled, .list-group-item:disabled {
color: #6c757d;
pointer-events: none;
background-color: #fff;
background-color: #343a40;
}
.list-group-item.active {
z-index: 2;
color: #fff;
background-color: #0d6efd;
border-color: #0d6efd;
background-color: #b58e51;
border-color: #b58e51;
}
.list-group-item + .list-group-item {
border-top-width: 0;
@ -4898,31 +4929,31 @@ textarea.form-control-lg {
}
.list-group-item-info {
color: #055160;
color: #0dcaf0;
background-color: #cff4fc;
}
.list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus {
color: #055160;
color: #0dcaf0;
background-color: #badce3;
}
.list-group-item-info.list-group-item-action.active {
color: #fff;
background-color: #055160;
border-color: #055160;
background-color: #0dcaf0;
border-color: #0dcaf0;
}
.list-group-item-warning {
color: #664d03;
color: #ffc107;
background-color: #fff3cd;
}
.list-group-item-warning.list-group-item-action:hover, .list-group-item-warning.list-group-item-action:focus {
color: #664d03;
color: #ffc107;
background-color: #e6dbb9;
}
.list-group-item-warning.list-group-item-action.active {
color: #fff;
background-color: #664d03;
border-color: #664d03;
background-color: #ffc107;
border-color: #ffc107;
}
.list-group-item-danger {
@ -4940,17 +4971,17 @@ textarea.form-control-lg {
}
.list-group-item-light {
color: #636464;
color: #f8f9fa;
background-color: #fefefe;
}
.list-group-item-light.list-group-item-action:hover, .list-group-item-light.list-group-item-action:focus {
color: #636464;
color: #f8f9fa;
background-color: #e5e5e5;
}
.list-group-item-light.list-group-item-action.active {
color: #fff;
background-color: #636464;
border-color: #636464;
background-color: #f8f9fa;
border-color: #f8f9fa;
}
.list-group-item-dark {
@ -4985,7 +5016,7 @@ textarea.form-control-lg {
}
.btn-close:focus {
outline: none;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
box-shadow: 0 0 0 0.25rem rgba(181, 142, 81, 0.25);
opacity: 1;
}
.btn-close:disabled, .btn-close.disabled {
@ -5114,6 +5145,7 @@ textarea.form-control-lg {
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.3rem;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
outline: 0;
}
@ -5196,6 +5228,10 @@ textarea.form-control-lg {
min-height: calc(100% - 3.5rem);
}
.modal-content {
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.modal-sm {
max-width: 300px;
}
@ -5469,6 +5505,7 @@ textarea.form-control-lg {
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 0.3rem;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.popover .popover-arrow {
position: absolute;

File diff suppressed because one or more lines are too long

View File

@ -4,7 +4,8 @@ var last_manu_back = "";
var last_auto_back = "";
const default_toast_timeout = 10000;
var loadingModal = null;
let loadingModal = null;
let nextcloud_setting_modal;
document.addEventListener('DOMContentLoaded', function () {
$.ajaxSetup({ traditional: true });
updateLocalSnaps();
@ -13,6 +14,7 @@ document.addEventListener('DOMContentLoaded', function () {
keyboard: false,
backdrop: 'static'
});
nextcloud_setting_modal = new bootstrap.Modal(document.getElementById('modal-settings-nextcloud'));
setInterval(update_status, 500);
setInterval(updateLocalSnaps, 5000);
@ -185,12 +187,12 @@ function listeners() {
});
$('#ssl').change(function () {
let div = $('#self_signed').parent().parent().parent();
let div = $('#self_signed').parent().parent();
if ($('#ssl').is(':checked'))
div.removeClass("hide")
div.removeClass("invisible")
else
div.addClass("hide");
div.addClass("invisible");
});
$('#confirm-restore').click(function () {
@ -216,6 +218,7 @@ function restore(id) {
function sendNextcloudSettings() {
loadingModal.show();
nextcloud_setting_modal.hide();
let ssl = $('#ssl').is(':checked')
let self_signed = $('#self_signed').is(':checked')
let hostname = $('#hostname').val();
@ -232,13 +235,10 @@ function sendNextcloudSettings() {
})
.done((data) => {
console.log('Saved');
$('#nextcloud_settings_message').parent().addClass("hide");
create_toast("success", "Nextcloud settings saved !", default_toast_timeout);
M.Modal.getInstance(document.querySelector('#modal-settings-nextcloud')).close();
$('#nextcloud_settings_message').parent().addClass("d-none");
create_toast("success", "Nextcloud settings saved !", default_toast_timeout);0
})
.fail((data) => {
debugger;
if (data.status == 406) {
console.log(data.responseJSON.message);
$('#nextcloud_settings_message').html(data.responseJSON.message);
@ -247,7 +247,8 @@ function sendNextcloudSettings() {
$('#nextcloud_settings_message').html("Invalid Settings.");
}
$('#nextcloud_settings_message').parent().removeClass("hide");
$('#nextcloud_settings_message').parent().removeClass("d-none");
nextcloud_setting_modal.show();
create_toast("error", "Invalid Nextcloud settings !", default_toast_timeout);
console.log('Fail');
}).always(() => {
@ -274,23 +275,16 @@ function getNextcloudSettings() {
$.get('./api/nextcloud-settings', (data) => {
$('#ssl').prop("checked", data.ssl == "true");
if (data.ssl == "true") {
let div = $('#self_signed').parent().parent().parent();
div.removeClass("hide");
let div = $('#self_signed').parent().parent();
div.removeClass("invisible");
}
$('#self_signed').prop('checked', data.self_signed == "true")
$('#hostname').val(data.host);
$('#hostname + label').removeClass("active");
$('#hostname + label').addClass("active");
$('#username').val(data.username);
$('#username + label').removeClass("active");
$('#username + label').addClass("active");
$('#password').val(data.password);
$('#password + label').removeClass("active");
$('#password + label').addClass("active");
$('#back-dir').val(data.back_dir);
$('#back-dir + label').removeClass("active");
$('#back-dir + label').addClass("active");
loadingModal.hide();
nextcloud_setting_modal.show();
});
}

View File

@ -9,11 +9,11 @@ function create_toast(type, message, delay) {
default:
toast_class = `bg-${type}`
icon_class = 'fa-check'
icon_class = 'fa-check-square'
}
let toast_id = Date.now().toString();
let toast_html = `<div id="${toast_id}" class="toast d-flex align-items-center text-white ${toast_class}" role="alert" aria-live="assertive" aria-atomic="true">`
toast_html += `<div class="toast-body h5 mb-0"><i class="fas ${icon_class} me-2"></i> ${message}</div>`
toast_html += `<div class="toast-body h6 mb-0 align-middle"><i class="fas ${icon_class} me-2 h5 mb-0"></i><span>${message}</span></div>`
toast_html += `<button type="button" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button></div>`
$('#toast-container').prepend(toast_html);
let toast_dom = document.getElementById(toast_id)

View File

@ -30,6 +30,7 @@ router.get("/formated-local-snap", function (req, res, next) {
return -1;
}
});
res.render("localSnaps", { snaps: snaps, moment: moment });
},
(err) => {
@ -68,6 +69,10 @@ router.get("/formated-local-snap", function (req, res, next) {
if (moment(a.lastmod).isBefore(moment(b.lastmod))) return 1;
else return -1;
});
//TODO Remove this when bug is fixed, etag contain '&quot;' at start and end ?
for(let backup of contents){
backup.etag = backup.etag.replace(/&quot;/g, '');
}
res.render("backupSnaps", { backups: contents, moment: moment, humanFileSize: humanFileSize });
})
.catch(() => {

View File

@ -4,6 +4,29 @@ $dark: #292929;
$secondary: #343a40;
$accent: #b58e51;
$enable-shadows: true;
$btn-box-shadow: none;
$component-active-bg: $accent;
$input-color: $accent;
$input-bg: $secondary;
$input-border-color: $secondary;
$form-switch-color: $accent;
$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>");
$form-check-input-border: 1px solid $accent !default;
$list-group-action-color: $accent;
$list-group-bg: $secondary;
$list-group-hover-bg: $secondary;
$list-group-action-hover-color : #adb5bd;
$alert-bg-scale: 0%;
$alert-border-scale: -10%;
$alert-color-scale: -100%;
@import "../node_modules/bootstrap/scss/bootstrap";
@ -13,4 +36,14 @@ $accent: #b58e51;
.text-accent{
color: $accent;
}
//.form-switch .form-check-input{
// //background-color: $white;
// border-color: $white;
// color: $white;
//}
//
//.form-check-input:checked{
// background-color: $accent;
// border-color: $accent;
//}

View File

@ -1,7 +1,7 @@
<% if (locals.backups) { %>
<div class="list-group ">
<% for(const index in backups) { %>
<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center bg-secondary text-accent"
<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
href="#"
data-id="<%= backups[index].etag %>"
data-bs-toggle="modal"

View File

@ -88,7 +88,7 @@
</a>
<ul class="navbar-nav">
<li class="nav-item dropdown" id="setting-trigger">
<a class="btn btn-outline-light bg-transparent nav-link active px-2" href="#" id="dropdown-settings"
<a class="btn btn-outline-light bg-transparent nav-link px-2 text-white" href="#" id="dropdown-settings"
role="button"
data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-cogs"></i>
@ -109,7 +109,7 @@
<div class="container">
<div class="row mt-3 mb-3" id="header-box">
<div class="col-12 col-md-3 mb-3 mb-md-0">
<div class="card text-white bg-dark h-100 shadow border-secondary">
<div class="card text-white bg-dark h-100 shadow-sm border-secondary">
<div class="card-header fw-bold h5 border-secondary border-bottom">Status</div>
<div class="card-body">
<h6 id="status" class="white-text"></h6>
@ -123,7 +123,7 @@
</div>
<div class="col-12 col-md-3 mb-3 mb-md-0">
<div class="card text-white bg-dark h-100 shadow border-secondary">
<div class="card text-white bg-dark h-100 shadow-sm border-secondary">
<div class="card-header fw-bold h5 border-secondary border-bottom">Last Backup</div>
<div class="card-body">
<h6 class="white-text" id="last_back_status"></h6>
@ -131,7 +131,7 @@
</div>
</div>
<div class="col-12 col-md-3 mb-3 mb-md-0">
<div class="card text-white bg-dark h-100 shadow border-secondary">
<div class="card text-white bg-dark h-100 shadow-sm border-secondary">
<div class="card-header fw-bold h5 border-secondary border-bottom">Next Backup</div>
<div class="card-body">
<h6 class="white-text" id="next_back_status"></h6>
@ -139,7 +139,7 @@
</div>
</div>
<div class="col-12 col-md-3">
<div class="card text-white bg-dark h-100 shadow border-secondary">
<div class="card text-white bg-dark h-100 shadow-sm border-secondary">
<div class="card-header fw-bold h5 border-secondary border-bottom">Manual</div>
<div class="card-body">
<div class="w-100">
@ -159,7 +159,7 @@
<div class="row">
<div class="col-12 col-md-12 col-lg-6 mb-3 mb-lg-0">
<div class="card text-white bg-dark h-100 shadow border-secondary">
<div class="card text-white bg-dark h-100 shadow-sm border-secondary">
<div class="card-header fw-bold h4 text-center border-secondary border-bottom">Local Snapshots</div>
<div class="card-body">
<div id="local_snaps"></div>
@ -167,7 +167,7 @@
</div>
</div>
<div class="col-12 col-md-12 col-lg-6 ">
<div class="card text-white bg-dark h-100 shadow border-secondary">
<div class="card text-white bg-dark h-100 shadow-sm border-secondary">
<div class="card-header fw-bold h4 text-center border-secondary border-bottom">Snapshots in Nextcloud
</div>
<div class="card-body">

View File

@ -1,7 +1,7 @@
<% if (locals.snaps) { %>
<div class="list-group">
<% for(const index in snaps) { %>
<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center bg-secondary text-accent"
<a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
href="#"
data-id="<%= snaps[index].slug %>"
data-bs-toggle="modal"

View File

@ -1,73 +1,73 @@
<div id="modal-settings-nextcloud" class="modal modal-fixed-footer blue-grey darken-4 white-text">
<div class="modal-content">
<div class="row">
<div class="col s12 center">
<h4>Nextcloud Settings</h4>
</div>
</div>
<div class="row">
<div class="col s12 center divider">
</div>
</div>
<div class="row hide">
<div class="col s12 center red-text" id="nextcloud_settings_message">
<div id="modal-settings-nextcloud" class="modal fade" xmlns="http://www.w3.org/1999/html">
<div class="modal-dialog modal-lg">
<div class="modal-content bg-dark text-white">
<div class="modal-header border-secondary">
<h5 class="modal-title" id="exampleModalLabel">Nextcloud Settings</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row d-none">
<div class="col-12 col-md-10 offset-md-1 text-center alert alert-danger" role="alert" id="nextcloud_settings_message">
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-4">
<div class="form-check form-switch">
<input class="form-check-input" id="ssl" type="checkbox">
<label class="form-check-label" for="ssl">SSL</label>
</div>
</div>
<div class="col-sm-12 col-md-8 invisible">
<div class="form-check form-switch">
<input class="form-check-input" id="self_signed" type="checkbox">
<label class="form-check-label" for="ssl">Accept Self-signed certificate</label>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<label for="hostname" class="form-label">Hostname</label>
<input id="hostname" type="text" class="form-control" aria-describedby="hostname-help">
<div id="hostname-help" class="form-text">exemple.com:8080</span>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-12 col-md-6">
<label for="username" class="form-label">Username</label>
<input id="username" type="text" class="form-control">
</div>
<div class="col-12 col-md-6">
<label for="password" class="form-label">Password</label>
<input id="password" type="password" class="form-control" aria-describedby="password-help">
<div id="password-help" class="form-text">
!!! Use App Password !!! See
<a target="_blank"
href="https://github.com/Sebclem/hassio-nextcloud-backup#nextcloud-config">
doc
</a>
for more information.
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-12">
<label for="back-dir" class="form-label">Backup Directory</label>
<input id="back-dir" type="text" class="form-control" aria-describedby="dir-help">
<div id="dir-help" class="form-text">Default: /Hassio Backup/</div>
</div>
</div>
</div>
<div class="modal-footer border-secondary">
<button data-bs-dismiss="modal" class="btn btn-danger"><b>Cancel</b></button>
<button class="btn btn-success" id="save-nextcloud-settings"><b>Save</b></button>
</div>
</div>
</div>
<div class="row" style="margin-bottom: 10px;">
<div class="col m4 s12 " style="margin-bottom: 10px;">
<div style="color: #9e9e9e; display: inline;">SSL</div>
<div class="switch" style="display: inline;">
<label>
<input id="ssl" type="checkbox">
<span class="lever"></span>
</label>
</div>
</div>
<div class="col m8 s12 hide" style="margin-bottom: 10px;">
<div style="color: #9e9e9e; display: inline;">Accept Self-signed certificate</div>
<div class="switch" style="display: inline;">
<label>
<input id="self_signed" type="checkbox">
<span class="lever"></span>
</label>
</div>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="hostname" type="text" class="white-text">
<label for="hostname">Hostname</label>
<span class="helper-text">exemple.com:8080</span>
</div>
</div>
<div class="row">
<div class="input-field col m6 s12">
<input id="username" type="text" class="white-text">
<label for="username">Username</label>
</div>
<div class="input-field col m6 s12">
<input id="password" type="password" class="white-text">
<label for="password">Password</label>
<span class="helper-text">!!! Use App Password !!! See <a target="_blank"
href="https://github.com/Sebclem/hassio-nextcloud-backup#nextcloud-config">doc</a> for more
information.</span>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="back-dir" type="text" class="white-text">
<label for="back-dir">Backup Directory</label>
<span class="helper-text">Default: /Hassio Backup/</span>
</div>
</div>
</div>
<div class="modal-footer blue-grey darken-4">
<a href="#" class="modal-close waves-effect btn red"><b>Cancel</b></a>
<a href="#" class="btn green waves-effect" style="margin-left: 5px;" id="save-nextcloud-settings"><b>Save</b></a>
</div>
</div>
</div>