HTML and CSS files reworked

This commit is contained in:
nobody 2020-06-28 07:43:08 +02:00
parent 58acfbfdaf
commit fbf96cdb38
No known key found for this signature in database
GPG Key ID: 8F6DE3D614FCFD7A
15 changed files with 624 additions and 367 deletions

View File

@ -11,3 +11,7 @@ CC0
info-dark.svg, info-light.svg (edited)
https://www.svgrepo.com/svg/274204/information
CC0
link-dark.svg, link-light.svg (edited)
https://www.svgrepo.com/svg/35710/external
CC0

100
icons/link-dark.svg Normal file
View File

@ -0,0 +1,100 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Capa_1"
x="0px"
y="0px"
viewBox="0 0 194.818 194.818"
style="enable-background:new 0 0 194.818 194.818;"
xml:space="preserve"
sodipodi:docname="link-dark.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
id="metadata937"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs935" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1680"
inkscape:window-height="997"
id="namedview933"
showgrid="false"
inkscape:zoom="4.1936578"
inkscape:cx="97.408997"
inkscape:cy="97.408997"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="1"
inkscape:current-layer="g900" />
<g
id="g900">
<path
d="M185.818,2.161h-57.04c-4.971,0-9,4.029-9,9s4.029,9,9,9h35.312l-86.3,86.3c-3.515,3.515-3.515,9.213,0,12.728 c1.758,1.757,4.061,2.636,6.364,2.636s4.606-0.879,6.364-2.636l86.3-86.3v35.313c0,4.971,4.029,9,9,9s9-4.029,9-9v-57.04 C194.818,6.19,190.789,2.161,185.818,2.161z"
id="path896"
style="fill:#777777;fill-opacity:1" />
<path
d="M149,77.201c-4.971,0-9,4.029-9,9v88.456H18v-122h93.778c4.971,0,9-4.029,9-9s-4.029-9-9-9H9c-4.971,0-9,4.029-9,9v140 c0,4.971,4.029,9,9,9h140c4.971,0,9-4.029,9-9V86.201C158,81.23,153.971,77.201,149,77.201z"
id="path898"
style="fill:#777777;fill-opacity:1" />
</g>
<g
id="g902">
</g>
<g
id="g904">
</g>
<g
id="g906">
</g>
<g
id="g908">
</g>
<g
id="g910">
</g>
<g
id="g912">
</g>
<g
id="g914">
</g>
<g
id="g916">
</g>
<g
id="g918">
</g>
<g
id="g920">
</g>
<g
id="g922">
</g>
<g
id="g924">
</g>
<g
id="g926">
</g>
<g
id="g928">
</g>
<g
id="g930">
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

100
icons/link-light.svg Normal file
View File

@ -0,0 +1,100 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Capa_1"
x="0px"
y="0px"
viewBox="0 0 194.818 194.818"
style="enable-background:new 0 0 194.818 194.818;"
xml:space="preserve"
sodipodi:docname="link-light.svg"
inkscape:version="0.92.3 (2405546, 2018-03-11)"><metadata
id="metadata937"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs935" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1680"
inkscape:window-height="997"
id="namedview933"
showgrid="false"
inkscape:zoom="4.1936578"
inkscape:cx="97.408997"
inkscape:cy="97.408997"
inkscape:window-x="0"
inkscape:window-y="25"
inkscape:window-maximized="1"
inkscape:current-layer="g900" />
<g
id="g900">
<path
d="M185.818,2.161h-57.04c-4.971,0-9,4.029-9,9s4.029,9,9,9h35.312l-86.3,86.3c-3.515,3.515-3.515,9.213,0,12.728 c1.758,1.757,4.061,2.636,6.364,2.636s4.606-0.879,6.364-2.636l86.3-86.3v35.313c0,4.971,4.029,9,9,9s9-4.029,9-9v-57.04 C194.818,6.19,190.789,2.161,185.818,2.161z"
id="path896"
style="fill:#f2f2f2;fill-opacity:1" />
<path
d="M149,77.201c-4.971,0-9,4.029-9,9v88.456H18v-122h93.778c4.971,0,9-4.029,9-9s-4.029-9-9-9H9c-4.971,0-9,4.029-9,9v140 c0,4.971,4.029,9,9,9h140c4.971,0,9-4.029,9-9V86.201C158,81.23,153.971,77.201,149,77.201z"
id="path898"
style="fill:#f2f2f2;fill-opacity:1" />
</g>
<g
id="g902">
</g>
<g
id="g904">
</g>
<g
id="g906">
</g>
<g
id="g908">
</g>
<g
id="g910">
</g>
<g
id="g912">
</g>
<g
id="g914">
</g>
<g
id="g916">
</g>
<g
id="g918">
</g>
<g
id="g920">
</g>
<g
id="g922">
</g>
<g
id="g924">
</g>
<g
id="g926">
</g>
<g
id="g928">
</g>
<g
id="g930">
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@ -1,19 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>LocalCDN Background</title>
<meta charset="utf-8" />
</head>
<body>
<script src="../../modules/internal/wrappers.js"></script>
<script src="../../modules/internal/helpers.js"></script>
<script src="../../core/constants.js"></script>
<script src="../../core/resources.js"></script>
<script src="../../core/mappings.js"></script>
@ -26,7 +19,5 @@
<script src="../../core/interceptor.js"></script>
<script src="../../core/manipulate-dom.js"></script>
<script src="../../core/main.js"></script>
</body>
</html>

235
pages/base.css Normal file
View File

@ -0,0 +1,235 @@
a {
color: #555;
font-weight: bold;
background: url('../../icons/link-dark.svg') no-repeat right center;
background-size: 10px 10px;
padding-right:13px;
text-decoration: underline;
}
a:hover {
color: #777;
text-decoration: none;
cursor: pointer;
}
#button-copy-rule-set, #generated-rules {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
border: 1px solid #aeaeae;
}
#button-copy-rule-set {
display: none;
padding: 5px;
font-size: 1.3em;
line-height: 2;
background-color: #fff;
}
#button-copy-rule-set:hover {
cursor: pointer;
background-color: #ddd;
}
#generated-rules {
display: none;
}
/**
* Checkboxes, Radiobuttons
*/
.b-contain *, .b-contain *::before, .b-contain *::after {
box-sizing: content-box !important;
}
.b-contain input {
position: absolute;
z-index: -1;
opacity: 0;
}
.b-contain span {
line-height: 1.54;
font-size: 1rem;
font-family: inherit;
}
.b-contain {
display: table;
position: relative;
padding-left: 1.8rem;
cursor: pointer;
}
.b-contain input[type="checkbox"] ~ .b-input {
position: absolute;
top: 0;
left: 0;
height: 1.25rem;
width: 1.25rem;
background: rgba(241, 245, 248, 1);
transition: background 250ms;
border: 1px solid rgba(184, 194, 204, 1);
border-radius: 0.125rem;
}
.b-contain input[type="radio"] ~ .b-input {
position: absolute;
top: 0;
left: 0;
height: 1.25rem;
width: 1.25rem;
background: rgba(241, 245, 248, 1);
transition: background 250ms;
border: 1px solid rgba(184, 194, 204, 1);
border-radius: 2.0rem;
}
.b-contain input[type="checkbox"] ~ .b-input::after {
content: '';
position: absolute;
display: none;
left: .45rem;
top: .18rem;
width: .25rem;
height: .6rem;
border: solid rgba(255, 255, 255, 1);
border-width: 0 2px 2px 0;
transition: background 250ms;
transform: rotate(45deg);
}
.b-contain input[type="radio"] ~ .b-input::after {
content: '';
position: absolute;
display: none;
left: .25rem;
top: .25rem;
width: .75rem;
height: .75rem;
border-radius: 2.0rem;
background: rgba(255, 255, 255, 1);
transition: background 250ms;
}
.b-contain input:disabled ~ .b-input::after {
border-color: rgba(135, 149, 161, 1);
}
.b-contain input:checked ~ .b-input::after {
display: block;
}
.b-contain:hover input ~ .b-input,
.b-contain input:focus ~ .b-input {
background: rgb(231, 238, 243);
}
.b-contain input:focus ~ .b-input {
box-shadow: 0 0 0 2px rgba(52,144,220,0.5);
}
.b-contain input:checked ~ .b-input {
background: rgba(0, 130, 243, 1);
border-color: rgba(0, 130, 243, 1);
}
.b-contain input[type="checkbox"]:disabled ~ .b-input {
background: rgba(241, 245, 248, 1);
border-color: rgba(184, 194, 204, 1);
opacity: 0.6;
cursor: not-allowed;
}
.b-contain input[type="radio"]:disabled ~ .b-input {
background: rgba(241, 245, 248, 1);
border-color: rgba(184, 194, 204, 1);
opacity: 0.6;
cursor: not-allowed;
}
.b-contain input[type="radio"]:disabled ~ .b-input::after {
background: rgba(135, 149, 161, 1);
}
.b-contain input:checked:focus ~ .b-input, .b-contain:hover input:not([disabled]):checked ~ .b-input {
background: rgba(13, 143, 255, 1);
border-color: rgba(13, 143, 255, 1);
}
.b-contain .b-input::before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
width: 3rem;
height: 3rem;
margin-left: -0.85rem;
margin-top: -0.85rem;
background: rgba(0, 130, 243, 1);
border-radius: 2rem;
opacity: .6;
z-index: 99999;
transform: scale(0);
}
.b-contain input + .b-input::before {
animation: b-ripple 250ms ease-out;
}
.b-contain input:checked + .b-input::before {
animation-name: b-ripple-duplicate;
}
.b-contain .b-input::before {
visibility: hidden;
}
.b-contain input:focus + .b-input::before {
visibility: visible;
}
.b-contain:first-child .b-input::before {
visibility: hidden;
}
@media (prefers-color-scheme: dark) {
a {
color: #f2f2f2;
font-weight: bold;
background: url('../../icons/link-light.svg') no-repeat right center;
background-size: 10px 10px;
padding-right:13px;
}
a:hover{
background: url('../../icons/link-dark.svg') no-repeat right center;
background-size: 10px 10px;
}
.subtle-hint, body, h3, p {
color: #aeaeae !important;
}
#button-copy-rule-set, #generated-rules {
border: 1px solid #222;
}
#generated-rules{
background-color: #434343;
color: #aeaeae !important;
}
#button-copy-rule-set {
background-color: #333;
color: #aeaeae;
}
#button-copy-rule-set:hover {
background-color: #2d2d2d;
}
}

View File

@ -18,7 +18,7 @@
</div>
</div>
<div class="notice">
<div class="subtle-hint"><div class="topic-label color-purple">FAQ: What is "Filters HTML source code"?</div>
<div class="subtle-hint"><div class="topic-label color-purple">FAQ: What is <span data-i18n-content="labelManipulateDOM">Filter HTML source code</span>?</div>
<p>In most cases LocalCDN can easily replace embedded frameworks and improves privacy. In some cases the website may try to prevent this by setting certain options in the HTML source code. LocalCDN reads the HTML source code before it is displayed in the browser and removes these options.</p>
<p>Unfortunately, it sometimes happens that special characters are then displayed incorrectly. In this case you can deactivate the setting again, to display the umlauts correctly.</p>
</div>

View File

@ -6,7 +6,7 @@ body {
color: #555;
cursor: default;
font-family: 'Noto Sans', Arial, sans-serif !important;
font-size: 12px;
font-size: 14px;
margin-top: -15px;
padding: 10px !important;
}
@ -14,8 +14,7 @@ body {
.option {
display: flex;
flex-direction: column;
margin-top: 15px;
padding: 5px;
padding-bottom: 20px;
}
.html-filter-section {
@ -92,6 +91,7 @@ body {
align-items: center;
display: flex;
font-weight: 600;
font-size: 1rem;
}
/**
@ -104,10 +104,10 @@ body {
}
.input-text {
max-width: 320px;
border-radius: 3px;
border: 1px solid darkgrey;
padding: 5px !important;
margin-top: 10px !important;
color: #555;
}
@ -168,12 +168,6 @@ body {
padding: 5px 9px;
}
#button-copy-rule-set {
display: none;
padding: 5px;
font-size: 1.3em;
}
#html-filter-domains-title-exclude {
display: none;
}
@ -193,7 +187,7 @@ body {
.description-option {
color: #777;
font-style: italic;
padding-left: 20px;
padding-left: 1.8rem;
}
.badge {
@ -223,9 +217,7 @@ body {
}
#negate-html-filter-list-warning {
text-decoration: underline;
cursor: pointer;
text-transform: none;
margin: 10px 0px 30px 0px;
}
.hidden {
@ -296,12 +288,14 @@ body[dir="rtl"] .input-text {
margin-right: 29px;
}
/**
* Compatibility
*/
.option-group {
background-color: #e1e1e1;
margin-top: 2rem;
padding: .7rem;
border-radius: 3px;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #202023;
}
@ -315,6 +309,15 @@ body[dir="rtl"] .input-text {
}
.notice-head > span, #last-mapping-update, .badge-warning, .notice-message, .button-warning {
color: #4b3000;
color: #4b3000 !important;
}
.option-group {
background-color: #1d1d1d;
}
.input-text {
background-color: #434343;
color: #aeaeae !important;
}
}

View File

@ -1,221 +1,158 @@
<!DOCTYPE html>
<html>
<head>
<title>LocalCDN Options</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="options.css">
<link rel="stylesheet" type="text/css" href="../base.css">
</head>
<body>
<script src="../../core/constants.js"></script>
<script src="../../modules/internal/helpers.js"></script>
<script defer src="../../core/resources.js"></script>
<script defer src="../../core/mappings.js"></script>
<script src="options.js"></script>
<section class="notice notice-warning hidden" id="notice-block-missing">
<div class="notice-head">
<span data-i18n-content="blockMissingTitle"></span>
</div>
<div class="notice-body" dir="ltr">
<div class="notice-message" data-i18n-content="featureBreaksWebsitesDescription">
This feature breaks websites. Do not leave it enabled, unless you are prepared to manually whitelist any affected domains.
</div>
<div class="button button-notice button-warning" id="button-block-missing" data-i18n-content="featureBreaksWebsitesButton">
Disable
</div>
</div>
</section>
<section class="option">
<div class="title-option">
<label class="label-checkbox">
<input class="input-checkbox" data-option="showIconBadge" type="checkbox">
<span data-i18n-content="showIconBadgeTitle"></span>
</label>
</div>
<div class="description-option" data-i18n-content="showIconBadgeDescription"></div>
</section>
<section class="option">
<div class="title-option">
<label class="label-checkbox">
<input class="input-checkbox" data-option="blockMissing" type="checkbox">
<span data-i18n-content="blockMissingTitle"></span>
</label>
<span class="badge badge-warning" data-i18n-content="advancedLabel"></span>
</div>
<div class="description-option" data-i18n-content="blockMissingDescription"></div>
</section>
<section class="option">
<div class="title-option">
<label class="label-checkbox">
<input class="input-checkbox" data-option="disablePrefetch" type="checkbox">
<span data-i18n-content="disablePrefetchTitle"></span>
</label>
<span class="badge badge-warning" data-i18n-content="advancedLabel"></span>
</div>
<div class="description-option" data-i18n-content="disablePrefetchDescription"></div>
</section>
<section class="option">
<div class="title-option">
<label class="label-checkbox">
<input class="input-checkbox" data-option="stripMetadata" type="checkbox">
<span data-i18n-content="stripMetadataTitle"></span>
</label>
<span class="badge badge-warning" data-i18n-content="advancedLabel"></span>
</div>
<div class="description-option" data-i18n-content="stripMetadataDescription"></div>
</section>
<section class="option">
<div class="title-option">
<label class="label-checkbox">
<input class="input-checkbox" data-option="enableLogging" type="checkbox">
<span data-i18n-content="loggingTitle">Enable logging in browser console</span>
</label>
</div>
<div class="description-option" data-i18n-content="loggingDescription">Open "Browser Console" ( CTRL + SHIFT + J ) to show missing resources</div>
</section>
<section class="option">
<div class="title-option">
<label class="label-checkbox">
<input class="input-checkbox" data-option="hideReleaseNotes" type="checkbox">
<span data-i18n-content="hideReleaseNotesTitle">Disable release notes</span>
</label>
<span class="badge badge-warning" data-i18n-content="advancedLabel"></span>
</div>
<div class="description-option" data-i18n-content="hideReleaseNotesDescription">If enabled, you wont receive any information about new features in LocalCDN. This includes information about new uBlock/uMatrix rules.</div>
</section>
<section class="option">
<div class="title-option without-checkbox" data-i18n-content="whitelistedDomainsTitle"></div>
<input class="input-text without-checkbox" data-option="whitelistedDomains" type="text">
<div class="description-option without-checkbox" data-i18n-content="whitelistedDomainsDescription"></div>
</section>
<div class="html-filter-section">
<div class="option-group">
<section class="option">
<div class="title-option">
<label class="b-contain">
<input data-option="showIconBadge" type="checkbox">
<span data-i18n-content="showIconBadgeTitle"></span>
<div class="b-input"></div>
</label>
</div>
<div class="description-option" data-i18n-content="showIconBadgeDescription"></div>
</section>
<section class="option">
<div class="title-option">
<label class="b-contain">
<input data-option="blockMissing" type="checkbox">
<span data-i18n-content="blockMissingTitle"></span>
<div class="b-input"></div>
</label>
<span class="badge badge-warning" data-i18n-content="advancedLabel"></span>
</div>
<div class="description-option" data-i18n-content="blockMissingDescription"></div>
</section>
<section class="option">
<div class="title-option">
<label class="b-contain">
<input data-option="disablePrefetch" type="checkbox">
<span data-i18n-content="disablePrefetchTitle"></span>
<div class="b-input"></div>
</label>
<span class="badge badge-warning" data-i18n-content="advancedLabel"></span>
</div>
<div class="description-option" data-i18n-content="disablePrefetchDescription"></div>
</section>
<section class="option">
<div class="title-option">
<label class="b-contain">
<input data-option="stripMetadata" type="checkbox">
<span data-i18n-content="stripMetadataTitle"></span>
<div class="b-input"></div>
</label>
<span class="badge badge-warning" data-i18n-content="advancedLabel"></span>
</div>
<div class="description-option" data-i18n-content="stripMetadataDescription"></div>
</section>
<section class="option">
<div class="title-option">
<label class="b-contain">
<input data-option="enableLogging" type="checkbox">
<span data-i18n-content="loggingTitle">Enable logging in browser console</span>
<div class="b-input"></div>
</label>
</div>
<div class="description-option" data-i18n-content="loggingDescription">Open "Browser Console" ( CTRL + SHIFT + J ) to show missing resources</div>
</section>
<section class="option">
<div class="title-option">
<label class="b-contain">
<input data-option="hideReleaseNotes" type="checkbox">
<span data-i18n-content="hideReleaseNotesTitle">Disable release notes</span>
<div class="b-input"></div>
</label>
<span class="badge badge-warning" data-i18n-content="advancedLabel"></span>
</div>
<div class="description-option" data-i18n-content="hideReleaseNotesDescription">If enabled, you wont receive any information about new features in LocalCDN. This includes information about new uBlock/uMatrix rules.</div>
</section>
</div>
<div class="option-group">
<section class="option">
<div class="title-option without-checkbox" data-i18n-content="whitelistedDomainsTitle"></div>
<input class="input-text without-checkbox" data-option="whitelistedDomains" type="text">
<div class="description-option without-checkbox" data-i18n-content="whitelistedDomainsDescription"></div>
</section>
</div>
<div class="option-group">
<section class="option">
<div id="html-filter-domains-title-exclude" class="title-option without-checkbox" data-i18n-content="htmlFilterDomainsTitleExclude">Do not apply HTML-Filter to these domains:</div>
<div id="html-filter-domains-title-include" class="title-option without-checkbox" data-i18n-content="htmlFilterDomainsTitleInclude">Apply HTML-Filter for these domains:</div>
<input class="input-text without-checkbox" data-option="domainsManipulateDOM" type="text">
<div class="description-option without-checkbox" data-i18n-content="htmlFilterDomainsDescription">Enter the domains to be handled or ignored by the HTML-Filter. Separate multiple entries with semi-colons (;). Default: Apply HTML-Filters only for these domains.</div>
</section>
<span id="negate-html-filter-list-warning" class="badge badge-warning warning-red" data-i18n-content="negateHtmlFilterListWarning">This function can break websites. Please note the information on the Wiki page.</span>
<section class="option">
<div class="title-option">
<label class="label-checkbox">
<input class="input-checkbox" data-option="negateHtmlFilterList" type="checkbox">
<label class="b-contain">
<input data-option="negateHtmlFilterList" type="checkbox">
<span data-i18n-content="negateHtmlFilterListTitle">Invert HTML-Filter</span>
<div class="b-input"></div>
</label>
<span class="badge badge-warning" data-i18n-content="advancedLabel"></span>
</div>
<div class="description-option" data-i18n-content="negateHtmlFilterListDescription">Enable this option to always apply the HTML filter. The domains in the list will be ignored then. If this option is disabled, the HTML filter is only applied to domains in the list.</div>
</section>
<a id="negate-html-filter-list-warning" data-i18n-content="negateHtmlFilterListWarning">This function can break websites. Please note the information on the Wiki page.</a>
</div>
<div class="option-group">
<section class="option">
<div class="title-option without-checkbox" data-i18n-content="generateRuleSetTitle"></div>
<div class="description-option without-checkbox">
<p class="without-checkbox" data-i18n-content="generateRuleSetDescription"></p>
</div>
<div class="ruleset-generator">
<p id="last-mapping-update" class="description-option last-update without-checkbox" data-i18n-content="lastUpdate">Last update:</p>
</div>
<div class="ruleset-generator">
<label class="b-contain" for="generate-ublock-rules">uBlock
<input id="generate-ublock-rules" name="rule-sets" data-option="uBlock" type="radio" value="uBlock">
<div class="b-input"></div>
</label>
</div>
<div class="ruleset-generator">
<label class="b-contain" for="generate-umatrix-rules">uMatrix
<input id="generate-umatrix-rules" name="rule-sets" data-option="uMatrix" type="radio" value="uMatrix">
<div class="b-input"></div>
</label>
</div>
<textarea rows="12" cols="15" id="generated-rules" readonly></textarea>
<input id="button-copy-rule-set" type="button" data-i18n-content="copyRuleSet" value="Copy">
</section>
</div>
<section class="option">
<div class="title-option without-checkbox" data-i18n-content="generateRuleSetTitle"></div>
<div class="description-option without-checkbox">
<p class="without-checkbox" data-i18n-content="generateRuleSetDescription"></p>
</div>
<div class="ruleset-generator">
<p id="last-mapping-update" class="description-option last-update without-checkbox" data-i18n-content="lastUpdate">Last update:</p>
</div>
<div class="ruleset-generator">
<input id="generate-ublock-rules" name="rule-sets" data-option="uBlock" type="radio" value="uBlock">
<label for="generate-ublock-rules">uBlock</label>
</div>
<div class="ruleset-generator">
<input id="generate-umatrix-rules" name="rule-sets" data-option="uMatrix" type="radio" value="uMatrix">
<label for="generate-umatrix-rules">uMatrix</label>
</div>
<textarea rows="12" cols="15" id="generated-rules" readonly></textarea>
<input id="button-copy-rule-set" type="button" data-i18n-content="copyRuleSet" value="Copy">
</section>
<section class="notice notice-default hidden" id="notice-locale">
<div class="notice-body" dir="ltr">
<div class="notice-message">
Your preferred language is not yet fully supported. Please help out by translating this add-on on Weblate.
</div>
<a class="button button-notice button-warning" href="https://hosted.weblate.org/projects/localcdn/" target="_blank">
Translate
</a>
</div>
</section>
</body>
</html>

View File

@ -323,24 +323,6 @@ input:checked + .slider:before {
margin-left: 5px;
}
/**
* Links
*/
.link-text {
color: #bdbdbd;
cursor: pointer;
float: left;
font-size: 13px;
padding-left: 4px;
padding-top: 5px;
text-decoration: none;
}
.link-text:hover {
color: #777;
text-decoration: underline;
}
/**
* Miscellaneous
@ -527,18 +509,6 @@ input:checked + .slider:before {
text-decoration: underline;
}
/**
* Links
*/
.link-text {
color: #7d7d7d;
}
.link-text:hover {
color: #dadada;
}
/**
* Miscellaneous
*/

View File

@ -1,55 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<title>LocalCDN Popup</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="popup.css">
<link rel="stylesheet" type="text/css" href="../base.css">
</head>
<body>
<script src="../../core/constants.js"></script>
<script src="../../modules/internal/helpers.js"></script>
<script src="popup.js"></script>
<header>
<img class="icon-logo" src="../../icons/icon.svg" alt="Extension Icon">
<div class="heading"><span id="name-label"></span> <sup id="version-label" class="label-version"></sup></div>
<div id="donate-button">
<p id="label-donate" data-i18n-content="labelDonate">Donate</p>
<div id="donate-button-svg"></div>
</div>
</header>
<section class="content">
<div id="website-context" class="panel hidden">
<div class="subpanel">
<div id="protection-toggle">
<label class="switch">
<input type="checkbox" id="protection-toggle-switch">
<span id="toggle-switch-domain" class="slider"></span>
</label>
</div>
<div class="label-domain">
<span id="domain-indicator"></span>
</div>
</div>
<div class="subpanel" id="div-manipulateDOM">
<div id="manipulateDOM-toggle">
<label class="switch">
@ -57,40 +39,24 @@
<span id="toggle-switch-manipulateDOM" class="slider"></span>
</label>
</div>
<div id="label-manipulateDOM" class="label-domain">
<span id="manipulateDOM-indicator" data-i18n-content="labelManipulateDOM">Filter HTML source code</span>
</div>
</div>
</div>
<div id="more-injections-section"></div>
<div id="extension-context" class="panel">
<div id="injection-counter" class="counter">0</div>
<div class="subheading" data-i18n-content="amountInjectedTitle"></div>
<div class="description" data-i18n-content="amountInjectedDescription"></div>
</div>
</section>
<footer>
<span id="testing-utility-link" class="link-text">localcdn.de/test</span>
<a id="testing-utility-link" class="link-text">localcdn.de/test</a>
<div id="options-button" class="button" data-i18n-title="optionsTitle">
<div id="options-button-svg"></div>
</div>
</footer>
<div id="popup-incomplete-translation"></div>
</body>
</html>

View File

@ -1,46 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<title>LocalCDN | Statistics</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="statistics.css">
<link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon">
<link rel="icon" href="../images/favicon.ico" type="image/x-icon">
</head>
<body>
<script src="../../core/constants.js"></script>
<script src="../../modules/internal/helpers.js"></script>
<script src="statistics.js"></script>
<header>
<img class="icon-logo" src="../../icons/icon.svg" alt="Extension Icon">
<div class="heading">LocalCDN <sup id="version-label" class="label-version"></sup></div>
<div id="donate-button">
<p id="label-donate" data-i18n-content="labelDonate">Donate</p>
<div id="donate-button-svg"></div>
</div>
</header>
<section class="content">
<div id="website-context" class="panel hidden"></div>
</section>
<footer></footer>
</body>
</html>

View File

@ -1,7 +1,3 @@
/**
* Sections
*/
html {
background-color: #4e4e4e;
box-sizing: border-box;
@ -32,10 +28,6 @@ h1 {
text-align: center;
}
a {
color: #777;
}
hr {
display: block;
height: 1px;
@ -74,38 +66,27 @@ hr {
margin-right: 0;
}
/**
* Fonts
*/
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
src: url('../../modules/noto-sans/noto-sans.woff2')
format('woff2');
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
src: url(../../modules/noto-sans/noto-sans.woff2) format('woff2');
}
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 600;
src: url('../../modules/noto-sans/noto-sans-bold.woff2')
format('woff2');
font-family: 'Noto Sans';
font-style: normal;
font-weight: 600;
src: url(../../modules/noto-sans/noto-sans-bold.woff2) format('woff2');
}
@font-face {
font-family: 'Noto Sans';
font-style: italic;
font-weight: 400;
src: url('../../modules/noto-sans/noto-sans-italic.woff2')
format('woff2');
font-family: 'Noto Sans';
font-style: italic;
font-weight: 400;
src: url(../../modules/noto-sans/noto-sans-italic.woff2) format('woff2');
}
/**
* Buttons
*/
.btn {
color: #fff !important;
font-weight: 600;
@ -117,8 +98,13 @@ hr {
border-radius: 4px;
border-style: solid;
border-width: 1px;
-webkit-box-shadow: 0px 5px 30px -5px rgba(0,0,0,0.5), 0px 5px 5px -5px #000000;
box-shadow: 0px 5px 30px -5px rgba(0,0,0,0.5), 0px 5px 5px -5px #000000;
-webkit-box-shadow: 0 5px 30px -5px rgba(0, 0, 0, 0.5), 0 5px 5px -5px #000;
box-shadow: 0 5px 30px -5px rgba(0, 0, 0, 0.5), 0 5px 5px -5px #000;
background: 0 0;
}
.btn:hover {
background: none;
}
.btn-text {
@ -155,10 +141,6 @@ hr {
background-color: #f58700;
}
/**
* Miscellaneous
*/
.notice {
align-items: center;
font-family: 'Noto Sans', Arial, sans-serif;
@ -181,28 +163,21 @@ hr {
padding: 8px 11px;
}
.inherit {
background-color: transparent;
border: none;
margin-bottom: 0px;
}
.topic-label {
color: #5a8f79;
font-style: normal;
font-weight: bold;
font-weight: 700;
}
.color-purple {
color: #9e608e;
}
.uncle-sam,
.we-need-you-title {
margin-left: auto;
margin-right: auto;
.uncle-sam, .we-need-you-title {
margin-left: auto;
margin-right: auto;
text-align: center;
display: block;
display: block;
}
.uncle-sam {
@ -211,38 +186,27 @@ hr {
.we-need-you-declaration {
color: #777;
font-weight: normal;
font-weight: 400;
text-align: center;
}
#p-donate {
.p-donate {
text-decoration: underline;
}
#p-donate:hover {
.p-donate:hover {
cursor: pointer;
}
/**
* Media Queries
*/
@media screen and (max-width: 982px) {
body {
box-shadow: none;
}
}
@media screen and (max-width: 500px) {
.btn-grid {
grid-template-columns: repeat(1,1fr);
}
.btn-panel {
flex-wrap: wrap;
}
.btn {
@ -257,17 +221,13 @@ hr {
min-height: unset;
}
}
@media (prefers-color-scheme: dark) {
/**
* Sections
*/
body {
background-color: #404040;
}
body, p, h3, .subtle-hint {
.subtle-hint, body, h3, p {
color: #aeaeae !important;
}
}

View File

@ -21,19 +21,19 @@ ul {
}
input[type=radio] {
margin: 10px 10px 10px 0px;
margin: 0px;
}
#button-copy-rule-set {
display: none;
padding: 5px;
margin-left: 29px;
width: calc(100% - 29px);
font-size: 1.3em;
label {
margin-left: 10px;
}
#generated-rules {
display: none;
margin-left: 29px;
width: calc(100% - 29px);
input[type=radio], label {
display: inline-flex;
}
.ruleset-generator {
margin-top: 10px;
display: inline-flex;
width: 100%;
}

View File

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../style.css">
<link rel="stylesheet" type="text/css" href="../base.css">
<link rel="stylesheet" type="text/css" href="../updates/updates.css">
<script src="../../core/constants.js"></script>
<script defer src="../../core/resources.js"></script>
@ -43,20 +44,27 @@
<li>Added: Chart.js (JS-Bundle & CSS) v2.9.3 (reported by email)</li>
<li>Improved: Option to enable HTML-Filter by default (<a href="https://codeberg.org/nobody/LocalCDN/issues/33">#33</a>)</li>
<li>Added: Google Material Icons v3.0.1 (<a href="https://codeberg.org/nobody/LocalCDN/issues/41">#41</a>)</li>
<li>Improved: Dark-Mode (reported by email)</li>
</ul>
<div class="topic-label">
Generate rule sets for uBlock or uMatrix
</div>
<div class="ruleset-generator">
<input id="generate-ublock-rules" name="rule-sets" data-option="uBlock" type="radio" value="uBlock">
<label for="generate-ublock-rules">uBlock</label>
<label class="b-contain" for="generate-ublock-rules">uBlock
<input id="generate-ublock-rules" name="rule-sets" data-option="uBlock" type="radio" value="uBlock">
<div class="b-input"></div>
</label>
</div>
<div class="ruleset-generator">
<input id="generate-umatrix-rules" name="rule-sets" data-option="uMatrix" type="radio" value="uMatrix">
<label for="generate-umatrix-rules">uMatrix</label>
<label class="b-contain" for="generate-umatrix-rules">uMatrix
<input id="generate-umatrix-rules" name="rule-sets" data-option="uMatrix" type="radio" value="uMatrix">
<div class="b-input"></div>
</label>
</div>
<div>
<textarea rows="12" cols="15" id="generated-rules" readonly></textarea>
<input id="button-copy-rule-set" type="button" value="Copy">
</div>
<textarea rows="12" cols="15" id="generated-rules" readonly></textarea>
<input id="button-copy-rule-set" type="button" value="Copy">
<hr/>
<h2>History</h2>
<p class='release-date'>2020-06-21 (v2.2.9)</p>

View File

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../style.css">
<link rel="stylesheet" type="text/css" href="../base.css">
<script defer src="../../modules/internal/icons.js"></script>
<link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon">
<link rel="icon" href="../images/favicon.ico" type="image/x-icon">
@ -25,7 +26,7 @@
<li>AngularJS, AngularJS-Animate, AngularJS-Sanitize, AngularJS-Cookies and AngularJS-Touch</li>
<li>Generator to create uBlock/uMatrix rules</li>
</ul>
<p id="p-donate">If you like LocalCDN, I would be happy about a small donation.</p>
<a class="p-donate">If you like LocalCDN, I would be happy about a small donation.</a>
</div>
</div>
<div class="notice">