1
0
mirror of https://codeberg.org/nobody/LocalCDN.git synced 2025-02-08 16:18:37 +01:00

Improved options page

This commit is contained in:
nobody 2020-07-05 06:44:53 +02:00
parent abc91996c3
commit 0b132643a5
No known key found for this signature in database
GPG Key ID: 8F6DE3D614FCFD7A
4 changed files with 32 additions and 21 deletions

View File

@ -62,7 +62,7 @@ a:hover {
.b-contain span { .b-contain span {
line-height: 1.54; line-height: 1.54;
font-size: 1rem; font-size: 0.9rem;
font-family: inherit; font-family: inherit;
} }

View File

@ -6,7 +6,7 @@ body {
color: #555; color: #555;
cursor: default; cursor: default;
font-family: 'Noto Sans', Arial, sans-serif !important; font-family: 'Noto Sans', Arial, sans-serif !important;
font-size: 14px; font-size: 0.9rem;
margin-top: -15px; margin-top: -15px;
padding: 10px !important; padding: 10px !important;
} }
@ -91,7 +91,6 @@ body {
align-items: center; align-items: center;
display: flex; display: flex;
font-weight: 600; font-weight: 600;
font-size: 1rem;
} }
/** /**
@ -190,6 +189,7 @@ body {
color: #777; color: #777;
font-style: italic; font-style: italic;
padding-left: 1.8rem; padding-left: 1.8rem;
font-size: 0.8rem;
} }
.badge { .badge {
@ -269,20 +269,31 @@ body {
#block-google-fonts { #block-google-fonts {
padding-left: 1.8rem; padding-left: 1.8rem;
padding-bottom: 0px;
padding-top: 0.5rem;
} }
.bgf-slideup, .bgf-slidedown { #block-google-fonts-desc {
max-height: 0px; padding-left: 0px;
overflow-y: hidden;
padding-bottom: 0px;
-webkit-transition: max-height 0.8s ease-in-out;
-moz-transition: max-height 0.8s ease-in-out;
-o-transition: max-height 0.8s ease-in-out;
transition: max-height 0.8s ease-in-out;
} }
.bgf-slidedown {
padding-top: .5rem; .option-disabled > .title-option > .b-contain,
max-height: 100px; .b-contain input[type="checkbox"]:disabled ~ .b-input {
cursor: default !important;
}
.option-disabled {
color: gray !important;
}
.option-disabled > .title-option > .b-contain > .b-input {
background: gray !important;
cursor: default;
}
.option-disabled > .title-option > .b-contain input:checked ~ .b-input {
background: gray !important;
border-color: gray !important;
} }
/** /**

View File

@ -47,15 +47,15 @@
<span class="badge badge-warning" data-i18n-content="advancedLabel"></span> <span class="badge badge-warning" data-i18n-content="advancedLabel"></span>
</div> </div>
<div class="description-option" data-i18n-content="blockMissingDescription"></div> <div class="description-option" data-i18n-content="blockMissingDescription"></div>
<div id="block-google-fonts" class="option bgf-slideup"> <div id="block-google-fonts" class="option option-disabled">
<div class="title-option"> <div class="title-option">
<label class="b-contain"> <label class="b-contain">
<input data-option="blockGoogleFonts" type="checkbox"> <input id="block-google-fonts-chk" data-option="blockGoogleFonts" type="checkbox">
<span data-i18n-content="blockGoogleFontsTitle">Block Google Fonts</span> <span data-i18n-content="blockGoogleFontsTitle">Block Google Fonts</span>
<div class="b-input"></div> <div class="b-input"></div>
</label> </label>
</div> </div>
<div class="description-option" data-i18n-content="blockGoogleFontsDescription">If you use the rules of the rule generator, requests to "fonts.googleapis.com" are allowed to substitute "Google Material Icons" automatically. If you want to block the other requests, enable this option.</div> <div id="block-google-fonts-desc" class="description-option" data-i18n-content="blockGoogleFontsDescription">If you use the rules of the rule generator, requests to "fonts.googleapis.com" are allowed to substitute "Google Material Icons" automatically. If you want to block the other requests, enable this option.</div>
</div> </div>
</section> </section>
<section class="option"> <section class="option">

View File

@ -370,11 +370,11 @@ options._updatesDomainLists = function(changes) {
options._displayBlockGoogleFonts = function(value) { options._displayBlockGoogleFonts = function(value) {
if (value === true) { if (value === true) {
document.getElementById('block-google-fonts').classList.add('bgf-slideup'); document.getElementById('block-google-fonts').classList.add('option-disabled');
document.getElementById('block-google-fonts').classList.remove('bgf-slidedown'); document.getElementById('block-google-fonts-chk').disabled = true;
} else { } else {
document.getElementById('block-google-fonts').classList.add('bgf-slidedown'); document.getElementById('block-google-fonts').classList.remove('option-disabled');
document.getElementById('block-google-fonts').classList.remove('bgf-slideup'); document.getElementById('block-google-fonts-chk').disabled = false;
} }
}; };