diff --git a/icons/credits b/icons/credits index 4436aac7..9de6964a 100644 --- a/icons/credits +++ b/icons/credits @@ -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 diff --git a/icons/link-dark.svg b/icons/link-dark.svg new file mode 100644 index 00000000..d863211f --- /dev/null +++ b/icons/link-dark.svg @@ -0,0 +1,100 @@ + + + +image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/icons/link-light.svg b/icons/link-light.svg new file mode 100644 index 00000000..d56749a6 --- /dev/null +++ b/icons/link-light.svg @@ -0,0 +1,100 @@ + + + +image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/pages/background/background.html b/pages/background/background.html index d7cfc85d..5ab3537b 100644 --- a/pages/background/background.html +++ b/pages/background/background.html @@ -1,19 +1,12 @@ - - - LocalCDN Background - - - - @@ -26,7 +19,5 @@ - - diff --git a/pages/base.css b/pages/base.css new file mode 100644 index 00000000..1609877f --- /dev/null +++ b/pages/base.css @@ -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; + } +} diff --git a/pages/help/help.html b/pages/help/help.html index 0bf9a10e..db46aa4b 100644 --- a/pages/help/help.html +++ b/pages/help/help.html @@ -18,7 +18,7 @@
-
FAQ: What is "Filters HTML source code"?
+
FAQ: What is Filter HTML source code?

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.

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.

diff --git a/pages/options/options.css b/pages/options/options.css index c62cd0dc..5fdabaae 100644 --- a/pages/options/options.css +++ b/pages/options/options.css @@ -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; } } diff --git a/pages/options/options.html b/pages/options/options.html index 2f4c9d57..f3ae87b4 100644 --- a/pages/options/options.html +++ b/pages/options/options.html @@ -1,221 +1,158 @@ - - - LocalCDN Options - - - + - - - - - -
- -
- - - -
- -
- -
- -
- -
- - - - - -
- -
- -
- -
- -
- - - - - -
- -
- -
- -
- -
- - - - - -
- -
- -
- -
- -
- - - -
- -
Open "Browser Console" ( CTRL + SHIFT + J ) to show missing resources
- -
- -
- -
- - - - - -
- -
If enabled, you wont receive any information about new features in LocalCDN. This includes information about new uBlock/uMatrix rules.
- -
- -
-
- -
-
- -
+
+
+
+ +
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+ +
+
Open "Browser Console" ( CTRL + SHIFT + J ) to show missing resources
+
+
+
+ + +
+
If enabled, you wont receive any information about new features in LocalCDN. This includes information about new uBlock/uMatrix rules.
+
+
+
+
+
+ +
+
+
+
Do not apply HTML-Filter to these domains:
Apply HTML-Filter for these domains:
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.
- This function can break websites. Please note the information on the Wiki page.
-
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.
+ This function can break websites. Please note the information on the Wiki page. +
+
+
+
+
+

+
+
+

Last update:

+
+
+ +
+
+ +
+ + +
- -
-
-
-

-
-
-

Last update:

-
-
- - -
-
- - -
- - -
- - - diff --git a/pages/popup/popup.css b/pages/popup/popup.css index be966071..f8f6dbe2 100644 --- a/pages/popup/popup.css +++ b/pages/popup/popup.css @@ -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 */ diff --git a/pages/popup/popup.html b/pages/popup/popup.html index bfa5dce9..e28d85a8 100644 --- a/pages/popup/popup.html +++ b/pages/popup/popup.html @@ -1,55 +1,37 @@ - - - LocalCDN Popup - - - + - - - -
-
- -
-
- -
-
-
0
-
-
-
- - - - diff --git a/pages/statistics/statistics.html b/pages/statistics/statistics.html index ef23bb51..e0826601 100644 --- a/pages/statistics/statistics.html +++ b/pages/statistics/statistics.html @@ -1,46 +1,28 @@ - - - LocalCDN | Statistics - - - - - -
-
LocalCDN
- -
-
- -
-
- - diff --git a/pages/style.css b/pages/style.css index 07ed5c59..6852e011 100644 --- a/pages/style.css +++ b/pages/style.css @@ -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; } } diff --git a/pages/updates/updates.css b/pages/updates/updates.css index 725379d5..0caa49f9 100644 --- a/pages/updates/updates.css +++ b/pages/updates/updates.css @@ -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%; } diff --git a/pages/updates/updates.html b/pages/updates/updates.html index 934c6424..747c86e4 100644 --- a/pages/updates/updates.html +++ b/pages/updates/updates.html @@ -5,6 +5,7 @@ + @@ -43,20 +44,27 @@
  • Added: Chart.js (JS-Bundle & CSS) v2.9.3 (reported by email)
  • Improved: Option to enable HTML-Filter by default (#33)
  • Added: Google Material Icons v3.0.1 (#41)
    • +
  • Improved: Dark-Mode (reported by email)
    • Generate rule sets for uBlock or uMatrix
    - - +
    - - + +
    +
    + +
    - -

    History

    2020-06-21 (v2.2.9)

    diff --git a/pages/welcome/welcome.html b/pages/welcome/welcome.html index bdd1a3ff..98f2a82d 100644 --- a/pages/welcome/welcome.html +++ b/pages/welcome/welcome.html @@ -5,6 +5,7 @@ + @@ -25,7 +26,7 @@
  • AngularJS, AngularJS-Animate, AngularJS-Sanitize, AngularJS-Cookies and AngularJS-Touch
  • Generator to create uBlock/uMatrix rules
    • -

    If you like LocalCDN, I would be happy about a small donation.

    + If you like LocalCDN, I would be happy about a small donation.