diff options
22 files changed, 570 insertions, 1042 deletions
diff --git a/src/_locales/de/messages.json b/src/_locales/de/messages.json index 431ed1d4..4a63b5f4 100644 --- a/src/_locales/de/messages.json +++ b/src/_locales/de/messages.json @@ -1,6 +1,6 @@ { "extensionName": { - "message": "Privacy Redirect", + "message": "LibRedirect", "description": "Name of the extension." }, "extensionDescription": { diff --git a/src/_locales/es/messages.json b/src/_locales/es/messages.json index 128ee823..68da2d1e 100644 --- a/src/_locales/es/messages.json +++ b/src/_locales/es/messages.json @@ -1,6 +1,6 @@ { "extensionName": { - "message": "Privacy Redirect", + "message": "LibRedirect", "description": "Nombre de la extensión." }, "extensionDescription": { diff --git a/src/_locales/fr/messages.json b/src/_locales/fr/messages.json index 7b66ab42..8ff43ae5 100644 --- a/src/_locales/fr/messages.json +++ b/src/_locales/fr/messages.json @@ -1,6 +1,6 @@ { "extensionName": { - "message": "Privacy Redirect", + "message": "LibRedirect", "description": "Nom du module complémentaire." }, "extensionDescription": { diff --git a/src/_locales/it/messages.json b/src/_locales/it/messages.json index 69996c5a..46bbb084 100644 --- a/src/_locales/it/messages.json +++ b/src/_locales/it/messages.json @@ -1,6 +1,6 @@ { "extensionName": { - "message": "Privacy Redirect", + "message": "LibRedirect", "description": "Name of the extension." }, "extensionDescription": { diff --git a/src/_locales/pl/messages.json b/src/_locales/pl/messages.json index 85877663..e2a59069 100644 --- a/src/_locales/pl/messages.json +++ b/src/_locales/pl/messages.json @@ -1,6 +1,6 @@ { "extensionName": { - "message": "Privacy Redirect", + "message": "LibRedirect", "description": "Nazwa rozszerzenia." }, "extensionDescription": { diff --git a/src/_locales/ru/messages.json b/src/_locales/ru/messages.json index c371532e..6a80c555 100644 --- a/src/_locales/ru/messages.json +++ b/src/_locales/ru/messages.json @@ -1,6 +1,6 @@ { "extensionName": { - "message": "Privacy Redirect", + "message": "LibRedirect", "description": "Название расширения." }, "extensionDescription": { diff --git a/src/_locales/tr/messages.json b/src/_locales/tr/messages.json index fdf07ac7..15ecad27 100644 --- a/src/_locales/tr/messages.json +++ b/src/_locales/tr/messages.json @@ -1,6 +1,6 @@ { "extensionName": { - "message": "Privacy Redirect", + "message": "LibRedirect", "description": "Uzantı ismi." }, "extensionDescription": { diff --git a/src/_locales/zh_CN/messages.json b/src/_locales/zh_CN/messages.json index 8c19e2de..72e480a2 100644 --- a/src/_locales/zh_CN/messages.json +++ b/src/_locales/zh_CN/messages.json @@ -1,6 +1,6 @@ { "extensionName": { - "message": "Privacy Redirect", + "message": "LibRedirect", "description": "Name of the extension." }, "extensionDescription": { diff --git a/src/assets/images/chevron-down.svg b/src/assets/images/chevron-down.svg index 7679f267..4b093598 100644 --- a/src/assets/images/chevron-down.svg +++ b/src/assets/images/chevron-down.svg @@ -1,3 +1,3 @@ <svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'> - <polyline points='112 184 256 328 400 184' style='fill:none;stroke:#FF5B56;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px'/> + <polyline points='112 184 256 328 400 184' style='fill:none;stroke:#FFFFFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px'/> </svg> \ No newline at end of file diff --git a/src/assets/images/icon128.png b/src/assets/images/icon128.png deleted file mode 100644 index cd16befd..00000000 --- a/src/assets/images/icon128.png +++ /dev/null Binary files differdiff --git a/src/assets/images/icon16.png b/src/assets/images/icon16.png deleted file mode 100644 index f896608b..00000000 --- a/src/assets/images/icon16.png +++ /dev/null Binary files differdiff --git a/src/assets/images/icon32.png b/src/assets/images/icon32.png deleted file mode 100644 index c5b417cf..00000000 --- a/src/assets/images/icon32.png +++ /dev/null Binary files differdiff --git a/src/assets/images/icon48.png b/src/assets/images/icon48.png deleted file mode 100644 index 24dd5af7..00000000 --- a/src/assets/images/icon48.png +++ /dev/null Binary files differdiff --git a/src/assets/images/logo-small.png b/src/assets/images/logo-small.png deleted file mode 100644 index 27ca660a..00000000 --- a/src/assets/images/logo-small.png +++ /dev/null Binary files differdiff --git a/src/assets/images/logo-store.png b/src/assets/images/logo-store.png deleted file mode 100644 index f321de43..00000000 --- a/src/assets/images/logo-store.png +++ /dev/null Binary files differdiff --git a/src/assets/images/logo-tile.png b/src/assets/images/logo-tile.png deleted file mode 100644 index 101c6b3a..00000000 --- a/src/assets/images/logo-tile.png +++ /dev/null Binary files differdiff --git a/src/assets/images/logo.png b/src/assets/images/logo.png deleted file mode 100644 index ad854aaa..00000000 --- a/src/assets/images/logo.png +++ /dev/null Binary files differdiff --git a/src/pages/options/options.html b/src/pages/options/options.html index 5b68ed10..286cef51 100644 --- a/src/pages/options/options.html +++ b/src/pages/options/options.html @@ -1,692 +1,323 @@ <!DOCTYPE html> <html> - <head> - <meta charset="utf-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1" /> - <title></title> - <link href="../../assets/stylesheets/styles.css" rel="stylesheet" /> - <title>Privacy Redirect Options</title> - </head> - - <body> - <div class="tab"> - <button - class="tablinks" - id="general-tab" - data-localise="__MSG_generalTab__" - > - General - </button> - <button - class="tablinks" - id="advanced-tab" - data-localise="__MSG_advancedTab__" - > - Advanced - </button> - <button - class="tablinks" - id="exceptions-tab" - data-localise="__MSG_exceptionsTab__" - > - Exceptions - </button> + +<head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <title></title> + <link href="../stylesheets/styles.css" rel="stylesheet" /> + <title>LibRedirect Options</title> +</head> + +<body> + <div class="tab"> + <button class="tablinks left" id="general-tab" data-localise="__MSG_generalTab__"> + General + </button> + <button class="tablinks" id="advanced-tab" data-localise="__MSG_advancedTab__"> + Advanced + </button> + <button class="tablinks right" id="exceptions-tab" data-localise="__MSG_exceptionsTab__"> + Exceptions + </button> + </div> + + <div id="general" class="tabcontent"> + + <div class="some-block"> + <h4 data-localise="__MSG_theme__">Theme</h4> + <select id="theme"> + <option value="">System</option> + <option value="light-theme">Light</option> + <option value="dark-theme">Dark</option> + </select> </div> - <div id="general" class="tabcontent"> - <section class="settings-block"> - <table class="option" aria-label="Toggle Nitter redirects"> - <tbody> - <tr> - <td> - <h1 data-localise="__MSG_disableNitter__">Nitter Redirects</h1> - </td> - <td> - <input - aria-hidden="true" - id="disable-nitter" - type="checkbox" - checked - /> - <label for="disable-nitter" class="checkbox-label"></label> - </td> - </tr> - </tbody> - </table> - </section> - <section class="settings-block"> - <table class="option" aria-label="Toggle Invidious redirects"> - <tbody> - <tr> - <td> - <h1 data-localise="__MSG_disableInvidious__"> - Invidious Redirects - </h1> - </td> - <td> - <input - aria-hidden="true" - id="disable-invidious" - type="checkbox" - checked - /> - <label for="disable-invidious" class="checkbox-label"> </label> - </td> - </tr> - </tbody> - </table> - </section> - <section class="settings-block"> - <table class="option" aria-label="Toggle Bibliogram redirects"> - <tbody> - <tr> - <td> - <h1 data-localise="__MSG_disableBibliogram__"> - Bibliogram Redirects - </h1> - </td> - <td> - <input - aria-hidden="true" - id="disable-bibliogram" - type="checkbox" - checked - /> - <label for="disable-bibliogram" class="checkbox-label"> </label> - </td> - </tr> - </tbody> - </table> - </section> - <section class="settings-block"> - <table class="option" aria-label="Toggle OpenStreetMap redirects"> - <tbody> - <tr> - <td> - <h1 data-localise="__MSG_disableOsm__"> - OpenStreetMap Redirects - </h1> - </td> - <td> - <input - aria-hidden="true" - id="disable-osm" - type="checkbox" - checked - /> - <label for="disable-osm" class="checkbox-label"> </label> - </td> - </tr> - </tbody> - </table> - </section> - <section class="settings-block"> - <table class="option" aria-label="Toggle Reddit redirects"> - <tbody> - <tr> - <td> - <h1 data-localise="__MSG_disableReddit__"> - Reddit Redirects - </h1> - </td> - <td> - <input - aria-hidden="true" - id="disable-reddit" - type="checkbox" - checked - /> - <label for="disable-reddit" class="checkbox-label"> </label> - </td> - </tr> - </tbody> - </table> - </section> - <section class="settings-block"> - <table class="option" aria-label="Toggle Scribe redirects"> - <tbody> - <tr> - <td> - <h1 data-localise="__MSG_disableScribe__"> - Scribe Redirects - </h1> - </td> - <td> - <input - aria-hidden="true" - id="disable-scribe" - type="checkbox" - checked - /> - <label for="disable-scribe" class="checkbox-label"> </label> - </td> - </tr> - </tbody> - </table> - </section> - <section class="settings-block"> - <table class="option" aria-label="Toggle Search Engine redirects"> - <tbody> - <tr> - <td> - <h1 data-localise="__MSG_disableSearchEngine__"> - Search Engine Redirects - </h1> - </td> - <td> - <input - aria-hidden="true" - id="disable-search-engine" - type="checkbox" - checked - /> - <label for="disable-search-engine" class="checkbox-label"> </label> - </td> - </tr> - </tbody> - </table> - </section> - <section class="settings-block"> - <table class="option" aria-label="Toggle SimplyTranslate redirects"> - <tbody> - <tr> - <td> - <h1 data-localise="__MSG_disableSimplyTranslate__">SimplyTranslate Redirects</h1> - </td> - <td> - <input - aria-hidden="true" - id="disable-simply-translate" - type="checkbox" - /> - <label for="disable-simply-translate" class="checkbox-label"></label> - </td> - </tr> - </tbody> - </table> - </section> - <section class="settings-block"> - <table class="option" aria-label="Toggle Wikipedia redirects"> - <tbody> - <tr> - <td> - <h1 data-localise="__MSG_disableWikipedia__">Wikipedia Redirects</h1> - </td> - <td> - <input - aria-hidden="true" - id="disable-wikipedia" - type="checkbox" - /> - <label for="disable-wikipedia" class="checkbox-label"></label> - </td> - </tr> - </tbody> - </table> - </section> - <section class="settings-block"> - <h1 data-localise="__MSG_nitterInstance__">Nitter Instance</h1> - <div class="autocomplete"> - <input - id="nitter-instance" - type="url" - name="nitter-instance" - data-localise-placeholder="__MSG_randomInstancePlaceholder__" - placeholder="Random instance (none selected)" - /> - </div> - </section> - <section class="settings-block"> - <h1 data-localise="__MSG_invidiousInstance__">Invidious Instance</h1> - <div class="autocomplete"> - <input - id="invidious-instance" - type="url" - data-localise-placeholder="__MSG_randomInstancePlaceholder__" - placeholder="Random instance (none selected)" - /> - </div> - </section> - <section class="settings-block"> - <h1 data-localise="__MSG_bibliogramInstance__">Bibliogram Instance</h1> - <div class="autocomplete"> - <input - id="bibliogram-instance" - type="url" - data-localise-placeholder="__MSG_randomInstancePlaceholder__" - placeholder="Random instance (none selected)" - /> - </div> - </section> + <div class="some-block"> + <h4>Youtube (Invidious)</h4> + <input id="disable-invidious" type="checkbox" checked /> + </div> + <section class="settings-block"> + <div class="autocomplete"> + <input id="invidious-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__" + placeholder="Random instance (none selected)" /> + </div> + </section> + + <div class="some-block"> + <h4>Twitter (Nitter)</h4> + <input id="disable-nitter" type="checkbox" checked /> + </div> + <section class="settings-block"> + <div class="autocomplete"> + <input id="nitter-instance" type="url" name="nitter-instance" + data-localise-placeholder="__MSG_randomInstancePlaceholder__" placeholder="Random instance (none selected)" /> + </div> + </section> + + <div class="some-block"> + <h4>Instagram (Bibliogram)</h4> + <input id="disable-bibliogram" type="checkbox" checked /> + </div> + <section class="settings-block"> + <div class="autocomplete"> + <input id="bibliogram-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__" + placeholder="Random instance (none selected)" /> + </div> + </section> + + <div class="some-block"> + <h4>Reddit (LibReddit)</h4> + <input id="disable-reddit" type="checkbox" checked /> + </div> + <section class="settings-block"> + <div class="autocomplete"> + <input id="reddit-instance" type="url" placeholder="https://libredd.it" /> + </div> + </section> + + <div class="some-block"> + <h4>Search</h4> + <input id="disable-searchEngine" type="checkbox" checked /> + </div> + <section class="settings-block"> + <div class="autocomplete"> + <input id="searchEngine-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__" + placeholder="Random instance (none selected)" /> + </div> + </section> + + <div class="some-block"> + <h4>Translate (SimplyTranslate)</h4> + <input id="disable-simplyTranslate" type="checkbox" checked /> + </div> + <section class="settings-block"> + <div class="autocomplete"> + <input id="simplyTranslate-instance" type="url" placeholder="https://translate.metalune.xyz" /> + </div> + </section> + + <div class="some-block"> + <h4>Maps (OpenStreetMaps)</h4> + <input id="disable-osm" type="checkbox" checked /> + </div> + <section class="settings-block"> + <div class="autocomplete"> + <input id="osm-instance" type="url" placeholder="https://openstreetmap.org" /> + </div> + </section> + + <div class="some-block"> + <h4>Wikipedia (Wikiless)</h4> + <input id="disable-wikipedia" type="checkbox" checked /> + </div> + <section class="settings-block"> + <div class="autocomplete"> + <input id="wikipedia-instance" type="url" placeholder="https://wikiless.org" /> + </div> + </section> + + <div class="some-block"> + <h4>Medium (Scribe)</h4> + <input id="disable-scribe" type="checkbox" checked /> + </div> + <section class="settings-block"> + <div class="autocomplete"> + <input id="scribe-instance" type="url" name="scribe-instance" + data-localise-placeholder="__MSG_randomInstancePlaceholder__" placeholder="Random instance (none selected)" /> + </div> + </section> + <div class="buttons"> + <a class="button" id="update-instances"> + <span data-localise="__MSG_updateInstances__">Update Instances</span> + </a> + </div> + + </div> + + <div id="advanced" class="tabcontent"> + + <button type="button" class="collapsible"> + Youtube (Invidious) + </button> + <div class="collapsible-content"> <section class="settings-block"> - <h1 data-localise="__MSG_osmInstance__">OpenStreetMap Instance</h1> - <div class="autocomplete"> - <input - id="osm-instance" - type="url" - placeholder="https://openstreetmap.org" - /> - </div> + <h1 data-localise="__MSG_invidiousRandomPool__"> + Invidious random instance pool (comma-separated) + </h1> + <textarea type="textarea" id="invidious-random-pool" name="invidious-random-pool" type="text"></textarea> </section> + + <div class="some-block"> + <h4 data-localise="__MSG_useFreeTube__">Use FreeTube over Invidious when possible</h4> + <input id="use-freetube" type="checkbox" checked /> + </div> + + <div class="some-block"> + <h4 data-localise="__MSG_alwaysProxy__">Always proxy videos through Invidious</h4> + <input id="always-proxy" type="checkbox" checked /> + </div> + + <div class="some-block"> + <h4 data-localise="__MSG_onlyEmbeddedVideo__">Only redirect embedded video to Invidious</h4> + <input id="only-embed" type="checkbox" checked /> + </div> + <section class="settings-block"> - <h1 data-localise="__MSG_redditInstance__">Reddit Instance</h1> - <div class="autocomplete"> - <input - id="reddit-instance" - type="url" - placeholder="https://libredd.it" - /> - </div> + <h1 data-localise="__MSG_videoQuality__">Invidious Video Quality</h1> + <select id="video-quality"> + <option value="">Default</option> + <option value="hd720">720p</option> + <option value="medium">480p</option> + <option value="dash">DASH (Dynamic Adaptive Streaming over HTTP)</option> + </option> + </select> </section> + + + <div class="some-block"> + <h4 data-localise="__MSG_invidiousDarkMode__">Invidious dark mode always on</h4> + <input id="invidious-dark-mode" type="checkbox" checked /> + </div> + <section class="settings-block"> - <h1 data-localise="__MSG_scribeInstance__" - class="new-badge" data-new-badge>Scribe Instance</h1> - <div class="autocomplete"> - <input - id="scribe-instance" - type="url" - name="scribe-instance" - data-localise-placeholder="__MSG_randomInstancePlaceholder__" - placeholder="Random instance (none selected)" - /> - </div> + <h1 data-localise="__MSG_invidiousVolume__"> + Invidious Volume: <span id="volume-value"></span> + </h1> + + <input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1" /> </section> + + <br> + + <div class="some-block"> + <h4 data-localise="__MSG_invidiousPlayerStyle__">Invidious Player Style</h4> + <select id="invidious-player-style"> + <option value="">Invidious</option> + <option value="youtube">YouTube</option> + </select> + </div> + + <section class="settings-block"> - <h1 data-localise="__MSG_searchEngineInstance__">Search Engine Instance</h1> - <div class="autocomplete"> - <input - id="search-engine-instance" - type="url" - data-localise-placeholder="__MSG_randomInstancePlaceholder__" - placeholder="Random instance (none selected)" - /> - </div> + <h1 data-localise="__MSG_invidiousSubtitles__"> + Invidious Subtitles - language codes (comma-separated) + </h1> + <input id="invidious-subtitles" name="invidious-subtitles" type="text" /> </section> + + <div class="some-block"> + <h4 data-localise="__MSG_invidiousAutoplay__">Invidious automatically play video on load</h4> + <input id="invidious-autoplay" type="checkbox" checked /> + </div> + + <div class="some-block"> + <h4 data-localise="__MSG_persistInvidiousPrefs__">Persist Invidious preferences (as cookie)</h4> + <input id="persist-invidious-prefs" type="checkbox" checked /> + </div> + </div> + <button type="button" class="collapsible"> + Twitter (Nitter) + </button> + <div class="collapsible-content"> <section class="settings-block"> - <h1 data-localise="__MSG_simplyTranslateInstance__">SimplyTranslate Instance</h1> - <div class="autocomplete"> - <input - id="simply-translate-instance" - type="url" - placeholder="https://translate.metalune.xyz" - /> - </div> + <h1 data-localise="__MSG_nitterRandomPool__"> + Nitter random instance pool (comma-separated) + </h1> + <textarea id="nitter-random-pool" name="nitter-random-pool" type="text"></textarea> </section> + <div class="some-block"> + <h4 data-localise="__MSG_removeTwitterSW__">Proactively remove Twitter service worker</h4> + <input id="remove-twitter-sw" type="checkbox" checked /> + </div> + </div> + <button type="button" class="collapsible"> + Instagram (Bibliogram) + </button> + <div class="collapsible-content"> <section class="settings-block"> - <h1 data-localise="__MSG_wikipediaInstance__">Wikipedia Instance</h1> - <div class="autocomplete"> - <input - id="wikipedia-instance" - type="url" - placeholder="https://wikiless.org" - /> - </div> + <h1 data-localise="__MSG_bibliogramRandomPool__"> + Bibliogram random instance pool (comma-separated) + </h1> + <textarea id="bibliogram-random-pool" name="bibliogram-random-pool" type="text"></textarea> </section> + + </div> + <button type="button" class="collapsible"> + Medium (Scribe) + </button> + <div class="collapsible-content"> <section class="settings-block"> - <h1 data-localise="__MSG_theme__">Theme</h1> - <select id="theme"> - <option value="">System</option> - <option value="light-theme">Light</option> - <option value="dark-theme">Dark</option> - </select> + <h1 data-localise="__MSG_scribeRandomPool__"> + Scribe random instance pool (comma-separated) + </h1> + <textarea id="scribe-random-pool" name="scribe-random-pool" type="text"></textarea> </section> </div> + </div> - <div id="advanced" class="tabcontent"> - <button type="button" class="collapsible"> - Invidious - </button> - <div class="collapsible-content"> - <section class="settings-block"> - <h1 data-localise="__MSG_invidiousRandomPool__"> - Invidious random instance pool (comma-separated) - </h1> - <input - id="invidious-random-pool" - name="invidious-random-pool" - type="text" - /> - </section> - <section class="settings-block"> - <table - class="option" - aria-label="Redirect YouTube to FreeTube where possible" - > - <tbody> - <tr> - <td> - <h1 data-localise="__MSG_useFreeTube__"> - Use FreeTube over Invidious when possible - </h1> - </td> - <td> - <input - aria-hidden="true" - id="use-freetube" - type="checkbox" - checked - /> - <label for="use-freetube" class="checkbox-label"> </label> - </td> - </tr> - </tbody> - </table> - </section> - <section class="settings-block"> - <table - class="option" - aria-label="Always proxy videos through Invidious" - > - <tbody> - <tr> - <td> - <h1 data-localise="__MSG_alwaysProxy__"> - Always proxy videos through Invidious - </h1> - </td> - <td> - <input - aria-hidden="true" - id="always-proxy" - type="checkbox" - checked - /> - <label for="always-proxy" class="checkbox-label"> </label> - </td> - </tr> - </tbody> - </table> - </section> - <section class="settings-block"> - <table - class="option" - aria-label="Only redirect embedded video to Invidious" - > - <tbody> - <tr> - <td> - <h1 data-localise="__MSG_onlyEmbeddedVideo__"> - Only redirect embedded video to Invidious - </h1> - </td> - <td> - <input - aria-hidden="true" - id="only-embed" - type="checkbox" - checked - /> - <label for="only-embed" class="checkbox-label"> </label> - </td> - </tr> - </tbody> - </table> - </section> - <section class="settings-block"> - <h1 data-localise="__MSG_videoQuality__">Invidious Video Quality</h1> - <select id="video-quality"> - <option value="">Default</option> - <option value="hd720">720p</option> - <option value="medium">480p</option> - <option value="dash">DASH (Dynamic Adaptive Streaming over HTTP)</option> - </option> - </select> - </section> - <section class="settings-block"> - <table class="option" aria-label="Invidious dark mode aways on"> - <tbody> - <tr> - <td> - <h1 data-localise="__MSG_invidiousDarkMode__"> - Invidious dark mode always on - </h1> - </td> - <td> - <input - aria-hidden="true" - id="invidious-dark-mode" - type="checkbox" - checked - /> - <label for="invidious-dark-mode" class="checkbox-label"> - </label> - </td> - </tr> - </tbody> - </table> - </section> - <section class="settings-block"> - <h1 data-localise="__MSG_invidiousVolume__"> - Invidious Volume - </h1> - <input - id="invidious-volume" - name="invidious-volume" - type="range" - min="0" - max="100" - step="1" - /><span id="volume-value"></span> - </section> - <section class="settings-block"> - <h1 data-localise="__MSG_invidiousPlayerStyle__"> - Invidious Player Style - </h1> - <select id="invidious-player-style"> - <option value="">Invidious</option> - <option value="youtube">YouTube</option> - </select> - </section> - <section class="settings-block"> - <h1 data-localise="__MSG_invidiousSubtitles__"> - Invidious Subtitles - language codes (comma-separated) - </h1> - <input - id="invidious-subtitles" - name="invidious-subtitles" - type="text" - /> - </section> - <section class="settings-block"> - <table - class="option" - aria-label="Invidious automatically play video on load" - > - <tbody> - <tr> - <td> - <h1 data-localise="__MSG_invidiousAutoplay__"> - Invidious automatically play video on load - </h1> - </td> - <td> - <input - aria-hidden="true" - id="invidious-autoplay" - type="checkbox" - checked - /> - <label for="invidious-autoplay" class="checkbox-label"> </label> - </td> - </tr> - </tbody> - </table> - </section> - <section class="settings-block"> - <table class="option" aria-label="Persist Invidious preferences"> - <tbody> - <tr> - <td> - <h1 data-localise="__MSG_persistInvidiousPrefs__"> - Persist Invidious preferences (as cookie) - </h1> - </td> - <td> - <input - aria-hidden="true" - id="persist-invidious-prefs" - type="checkbox" - checked - /> - <label for="persist-invidious-prefs" class="checkbox-label"> - </label> - </td> - </tr> - </tbody> - </table> - </section> - <hr> - </div> - <button type="button" class="collapsible"> - Nitter - </button> - <div class="collapsible-content"> - <section class="settings-block"> - <h1 data-localise="__MSG_nitterRandomPool__"> - Nitter random instance pool (comma-separated) - </h1> - <input - id="nitter-random-pool" - name="nitter-random-pool" - type="text" - /> - </section> - <section class="settings-block"> - <table - class="option" - aria-label="Proactively remove Twitter service worker" - > - <tbody> - <tr> - <td> - <h1 data-localise="__MSG_removeTwitterSW__"> - Proactively remove Twitter service worker - </h1> - </td> - <td> - <input - aria-hidden="true" - id="remove-twitter-sw" - type="checkbox" - checked - /> - <label for="remove-twitter-sw" class="checkbox-label"> </label> - </td> - </tr> - </tbody> - </table> - </section> - <hr> - </div> - <button type="button" class="collapsible"> - Bibliogram - </button> - <div class="collapsible-content"> - <section class="settings-block"> - <h1 data-localise="__MSG_bibliogramRandomPool__"> - Bibliogram random instance pool (comma-separated) - </h1> - <input - id="bibliogram-random-pool" - name="bibliogram-random-pool" - type="text" - /> - </section> - <section class="settings-block"> - <h1 data-localise="__MSG_scribeRandomPool__"> - Scribe random instance pool (comma-separated) - </h1> - <input - id="scribe-random-pool" - name="scribe-random-pool" - type="text" - /> - </section> - <hr> - </div> - </div> - <div id="exceptions" class="tabcontent"> - <section class="settings-block"> - <p data-localise="__MSG_exceptionsDescriptionP1__"> - Enter a URL or Regular Expression to be excluded from redirects. - </p> - <p data-localise="__MSG_exceptionsDescriptionP2__"> - All requests for or initiating from a URL that matches your exception - will be excluded from redirects. - </p> - <p data-localise="__MSG_exceptionsDescriptionP3__"> - Note - Supports JavaScript regular expressions, excluding the - enclosing forward slashes. - </p> - </section> - <section class="settings-block"> - <table class="exceptions option"> - <tbody> - <tr> - <td> - <h1 data-localise="__MSG_addException__">Add Exception</h1> - </td> - </tr> - <tr> - <td> - <input - id="new-exceptions-item" - type="text" - placeholder="URL or RegExp" - /> - </td> - <td> - <input type="radio" id="url" name="type" value="URL" checked /> - <label class="radio" for="url">URL</label> - <input type="radio" id="regExp" name="type" value="RegExp" /> - <label class="radio" for="regExp">RegExp</label> - </td> - <td> - <button id="add-to-exceptions"> - <svg - xmlns="http://www.w3.org/2000/svg" - width="512" - height="512" - viewBox="0 0 512 512" - > - <line - x1="256" - y1="112" - x2="256" - y2="400" - style=" + <div id="exceptions" class="tabcontent"> + <section class="settings-block"> + <p data-localise="__MSG_exceptionsDescriptionP1__"> + Enter a URL or Regular Expression to be excluded from redirects. + </p> + <p data-localise="__MSG_exceptionsDescriptionP2__"> + All requests for or initiating from a URL that matches your exception + will be excluded from redirects. + </p> + <p data-localise="__MSG_exceptionsDescriptionP3__"> + Note - Supports JavaScript regular expressions, excluding the + enclosing forward slashes. + </p> + </section> + <section class="settings-block"> + <table class="exceptions option"> + <tbody> + <tr> + <td> + <h1 data-localise="__MSG_addException__">Add Exception</h1> + </td> + </tr> + <tr> + <td> + <input id="new-exceptions-item" type="text" placeholder="URL or RegExp" /> + </td> + <td> + <input type="radio" id="url" name="type" value="URL" checked /> + <label class="radio" for="url">URL</label> + <input type="radio" id="regExp" name="type" value="RegExp" /> + <label class="radio" for="regExp">RegExp</label> + </td> + <td> + <button id="add-to-exceptions"> + <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"> + <line x1="256" y1="112" x2="256" y2="400" style=" fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px; - " - /> - <line - x1="400" - y1="256" - x2="112" - y2="256" - style=" + " /> + <line x1="400" y1="256" x2="112" y2="256" style=" fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 32px; - " - /> - </svg> - </button> - </td> - </tr> - </tbody> - </table> - </section> - <ul id="exceptions-items"></ul> - </div> + " /> + </svg> + </button> + </td> + </tr> + </tbody> + </table> + </section> + <ul id="exceptions-items"></ul> + </div> + + <script type="module" src="./options.js"></script> + <script src="../../assets/javascripts/localise.js"></script> +</body> - <script type="module" src="./options.js"></script> - <script src="../../assets/javascripts/localise.js"></script> - </body> -</html> +</html> \ No newline at end of file diff --git a/src/pages/options/options.js b/src/pages/options/options.js index fea94110..639d351b 100644 --- a/src/pages/options/options.js +++ b/src/pages/options/options.js @@ -29,10 +29,8 @@ let bibliogramInstance = document.getElementById("bibliogram-instance"); let osmInstance = document.getElementById("osm-instance"); let redditInstance = document.getElementById("reddit-instance"); let scribeInstance = document.getElementById("scribe-instance"); -let searchEngineInstance = document.getElementById("search-engine-instance"); -let simplyTranslateInstance = document.getElementById( - "simply-translate-instance" -); +let searchEngineInstance = document.getElementById("searchEngine-instance"); +let simplyTranslateInstance = document.getElementById("simplyTranslate-instance"); let wikipediaInstance = document.getElementById("wikipedia-instance"); let disableNitter = document.getElementById("disable-nitter"); let disableInvidious = document.getElementById("disable-invidious"); @@ -40,9 +38,9 @@ let disableBibliogram = document.getElementById("disable-bibliogram"); let disableOsm = document.getElementById("disable-osm"); let disableReddit = document.getElementById("disable-reddit"); let disableScribe = document.getElementById("disable-scribe"); -let disableSearchEngine = document.getElementById("disable-search-engine"); +let disableSearchEngine = document.getElementById("disable-searchEngine"); let disableSimplyTranslate = document.getElementById( - "disable-simply-translate" + "disable-simplyTranslate" ); let disableWikipedia = document.getElementById("disable-wikipedia"); let alwaysProxy = document.getElementById("always-proxy"); @@ -177,22 +175,22 @@ browser.storage.sync.get( result.scribeRandomPool || commonHelper.filterInstances(scribeInstances); autocompletes = [ - { id: "nitter-instance", instances: nitterRandomPool.value.split(',') }, - { id: "invidious-instance", instances: invidiousRandomPool.value.split(',') }, - { id: "bibliogram-instance", instances: bibliogramRandomPool.value.split(',') }, - { id: "scribe-instance", instances: scribeRandomPool.value.split(',') }, - { id: "reddit-instance", instances: redditInstances }, - { id: "osm-instance", instances: osmInstances }, - { - id: "search-engine-instance", - instances: searchEngineInstances.map((instance) => instance.link), - }, - { id: "simply-translate-instance", instances: simplyTranslateInstances }, - { id: "wikipedia-instance", instances: wikipediaInstances }, - ]; + { id: "nitter-instance", instances: nitterRandomPool.value.split(',') }, + { id: "invidious-instance", instances: invidiousRandomPool.value.split(',') }, + { id: "bibliogram-instance", instances: bibliogramRandomPool.value.split(',') }, + { id: "scribe-instance", instances: scribeRandomPool.value.split(',') }, + { id: "reddit-instance", instances: redditInstances }, + { id: "osm-instance", instances: osmInstances }, + { + id: "searchEngine-instance", + instances: searchEngineInstances.map((instance) => instance.link), + }, + { id: "simplyTranslate-instance", instances: simplyTranslateInstances }, + { id: "wikipedia-instance", instances: wikipediaInstances }, + ]; autocompletes.forEach((value) => { autocomplete(document.getElementById(value.id), value.instances); - }); + }); } ); @@ -449,7 +447,7 @@ const invidiousVolumeChange = debounce(() => { browser.storage.sync.set({ invidiousVolume: invidiousVolume.value, }); -}, 500); +}, 1); invidiousVolume.addEventListener("input", invidiousVolumeChange); invidiousPlayerStyle.addEventListener("change", (event) => { @@ -604,7 +602,6 @@ function autocomplete(input, list) { var coll = document.getElementsByClassName("collapsible"); var i; - for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function () { this.classList.toggle("collapsible-active"); @@ -616,3 +613,20 @@ for (i = 0; i < coll.length; i++) { } }); } + +const apiEndpoint = 'https://raw.githubusercontent.com/libredirect/instances/main/data.json'; +document.querySelector("#update-instances").addEventListener("click", () => { + document.querySelector("#update-instances").innerHTML = '...'; + let request = new XMLHttpRequest(); + request.open('GET', apiEndpoint, false); + request.send(null); + + if (request.status === 200) { + const instances = JSON.parse(request.responseText); + const nitterRandomPool = instances.twitter.join(','); + const invidiousRandomPool = instances.youtube.join(','); + const bibliogramRandomPool = instances.instagram.join(','); + browser.storage.sync.set({ nitterRandomPool, invidiousRandomPool, bibliogramRandomPool }); + document.querySelector("#update-instances").innerHTML = 'Done!'; + } +}); \ No newline at end of file diff --git a/src/pages/popup/popup.html b/src/pages/popup/popup.html index 5ab3378b..900f6256 100644 --- a/src/pages/popup/popup.html +++ b/src/pages/popup/popup.html @@ -1,287 +1,97 @@ <!DOCTYPE html> <html> - <head> - <meta charset="utf-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1" /> - <title></title> - <link href="../../assets/stylesheets/styles.css" rel="stylesheet" /> - </head> - <body class="popup"> - <header class="popup"> - <div class="logo-container"> - <img - src="../../assets/images/libredirect.svg" - alt="Privacy Redirect logo" - /> - <h1> - <span data-localise="__MSG_extensionName__" class="extensionName">LibRedirect</span> - </h1> - </div> - <div class="version"> - <span data-localise="__MSG_version__">Version</span>: <span - id="version" - ></span> - </div> - </header> +<head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <title></title> + <link href="../stylesheets/styles.css" rel="stylesheet" /> +</head> - <section class="settings-block"> - <table class="option" aria-label="Toggle Nitter redirects"> - <tbody> - <tr> - <td> - <h1 data-localise="__MSG_disableNitter__">Twitter Redirects</h1> - </td> - <td> - <input - aria-hidden="true" - id="disable-nitter" - type="checkbox" - checked - /> - <label for="disable-nitter" class="checkbox-label"></label> - </td> - </tr> - </tbody> - </table> - </section> +<body class="popup"> - <section class="settings-block"> - <table class="option" aria-label="Toggle Invidious redirects"> - <tbody> - <tr> - <td> - <h1 data-localise="__MSG_disableInvidious__"> - YouTube Redirects - </h1> - </td> - <td> - <input - aria-hidden="true" - id="disable-invidious" - type="checkbox" - checked - /> - <label for="disable-invidious" class="checkbox-label"> </label> - </td> - </tr> - </tbody> - </table> - </section> - <section class="settings-block"> - <table class="option" aria-label="Toggle Bibliogram redirects"> - <tbody> - <tr> - <td> - <h1 data-localise="__MSG_disableBibliogram__"> - Instagram Redirects - </h1> - </td> - <td> - <input - aria-hidden="true" - id="disable-bibliogram" - type="checkbox" - checked - /> - <label for="disable-bibliogram" class="checkbox-label"> </label> - </td> - </tr> - </tbody> - </table> - </section> - <section class="settings-block"> - <table class="option" aria-label="Toggle OpenStreetMap redirects"> - <tbody> - <tr> - <td> - <h1 data-localise="__MSG_disableOsm__"> - GoogleMap Redirects - </h1> - </td> - <td> - <input - aria-hidden="true" - id="disable-osm" - type="checkbox" - checked - /> - <label for="disable-osm" class="checkbox-label"> </label> - </td> - </tr> - </tbody> - </table> - </section> + <div class="some-block"> + <h4>Youtube</h4> + <input id="disable-invidious" type="checkbox" checked /> + </div> - <section class="settings-block"> - <table class="option" aria-label="Toggle old Reddit redirects"> - <tbody> - <tr> - <td> - <h1 data-localise="__MSG_disableReddit__">Reddit Redirects</h1> - </td> - <td> - <input - aria-hidden="true" - id="disable-reddit" - type="checkbox" - checked - /> - <label for="disable-reddit" class="checkbox-label"> </label> - </td> - </tr> - </tbody> - </table> - </section> + <div class="some-block"> + <h4>Twitter</h4> + <input id="disable-nitter" type="checkbox" checked /> + </div> - <section class="settings-block"> - <table class="option" aria-label="Toggle Search Engine redirects"> - <tbody> - <tr> - <td> - <h1 data-localise="__MSG_disableSearchEngine__"> - Search Engine Redirects - </h1> - </td> - <td> - <input - aria-hidden="true" - id="disable-searchEngine" - type="checkbox" - checked - /> - <label for="disable-searchEngine" class="checkbox-label"></label> - </td> - </tr> - </tbody> - </table> - </section> + <div class="some-block"> + <h4>Instagram</h4> + <input id="disable-bibliogram" type="checkbox" checked /> + </div> - <section class="settings-block"> - <table class="option" aria-label="Toggle SimplyTranslate redirects"> - <tbody> - <tr> - <td> - <h1 data-localise="__MSG_disableSimplyTranslate__"> - SimplyTranslate Redirects - </h1> - </td> - <td> - <input - aria-hidden="true" - id="disable-simplyTranslate" - type="checkbox" - /> - <label - for="disable-simplyTranslate" - class="checkbox-label" - ></label> - </td> - </tr> - </tbody> - </table> - </section> + <div class="some-block"> + <h4>Reddit</h4> + <input id="disable-reddit" type="checkbox" checked /> + </div> - <section class="settings-block"> - <table class="option" aria-label="Toggle Wikipedia redirects"> - <tbody> - <tr> - <td> - <h1 data-localise="__MSG_disableWikipedia__"> - Wikipedia Redirects - </h1> - </td> - <td> - <input - aria-hidden="true" - id="disable-wikipedia" - type="checkbox" - /> - <label for="disable-wikipedia" class="checkbox-label"></label> - </td> - </tr> - </tbody> - </table> - </section> + <div class="some-block"> + <h4>Search</h4> + <input id="disable-searchEngine" type="checkbox" checked /> + </div> - <section class="settings-block"> - <table class="option" aria-label="Toggle Scribe redirects"> - <tbody> - <tr> - <td> - <h1 - data-localise="__MSG_disableScribe__" - class="new-badge" - data-new-badge - > - Scribe Redirects - </h1> - </td> - <td> - <input - aria-hidden="true" - id="disable-scribe" - type="checkbox" - /> - <label for="disable-scribe" class="checkbox-label"></label> - </td> - </tr> - </tbody> - </table> - </section> + <div class="some-block"> + <h4>Translate</h4> + <input id="disable-simplyTranslate" type="checkbox" checked /> + </div> - <footer> - <a class="button" id="update-instances"> - <span data-localise="__MSG_updateInstances__">Update Instances </span> - </a> - <a class="button" id="more-options"> - <span data-localise="__MSG_moreOptions__">More Options </span> - <svg - xmlns="http://www.w3.org/2000/svg" - width="512" - height="512" - viewBox="0 0 512 512" - > - <path - d="M384,224V408a40,40,0,0,1-40,40H104a40,40,0,0,1-40-40V168a40,40,0,0,1,40-40H271.48" - style=" - fill: none; - stroke: inherit; - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 32px; - " - /> - <polyline - points="336 64 448 64 448 176" - style=" - fill: none; - stroke: inherit; - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 32px; - " - /> - <line - x1="224" - y1="288" - x2="440" - y2="72" - style=" - fill: none; - stroke: inherit; - stroke-linecap: round; - stroke-linejoin: round; - stroke-width: 32px; - " - /> - </svg> - </a> - </footer> + <div class="some-block"> + <h4>Maps</h4> + <input id="disable-osm" type="checkbox" checked /> + </div> - <script type="module" src="./popup.js"></script> - <script src="../../assets/javascripts/localise.js"></script> - </body> -</html> + <div class="some-block"> + <h4>Wikipedia</h4> + <input id="disable-wikipedia" type="checkbox" checked /> + </div> + + <div class="some-block"> + <h4>Medium</h4> + <input id="disable-scribe" type="checkbox" checked /> + </div> + + <div class="buttons"> + <a class="button" id="update-instances"> + <span data-localise="__MSG_updateInstances__">Update Instances </span> + </a> + <a class="button" id="more-options"> + <span data-localise="__MSG_moreOptions__">More Options </span> + <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"> + <path d="M384,224V408a40,40,0,0,1-40,40H104a40,40,0,0,1-40-40V168a40,40,0,0,1,40-40H271.48" style=" + fill: none; + stroke: inherit; + stroke-linecap: round; + stroke-linejoin: round; + stroke-width: 32px; + " /> + <polyline points="336 64 448 64 448 176" style=" + fill: none; + stroke: inherit; + stroke-linecap: round; + stroke-linejoin: round; + stroke-width: 32px; + " /> + <line x1="224" y1="288" x2="440" y2="72" style=" + fill: none; + stroke: inherit; + stroke-linecap: round; + stroke-linejoin: round; + stroke-width: 32px; + " /> + </svg> + </a> + </div> + + + <script type="module" src="./popup.js"></script> + <script src="../../assets/javascripts/localise.js"></script> +</body> + +</html> \ No newline at end of file diff --git a/src/pages/popup/popup.js b/src/pages/popup/popup.js index d2b33b6a..01497cad 100644 --- a/src/pages/popup/popup.js +++ b/src/pages/popup/popup.js @@ -9,7 +9,6 @@ let disableSearchEngine = document.querySelector("#disable-searchEngine"); let disableSimplyTranslate = document.querySelector("#disable-simplyTranslate"); let disableWikipedia = document.querySelector("#disable-wikipedia"); let disableScribe = document.querySelector("#disable-scribe"); -let version = document.querySelector("#version"); window.browser = window.browser || window.chrome; @@ -40,8 +39,6 @@ browser.storage.sync.get( } ); -version.textContent = browser.runtime.getManifest().version; - disableNitter.addEventListener("change", (event) => { browser.storage.sync.set({ disableNitter: !event.target.checked }); }); @@ -79,14 +76,13 @@ disableScribe.addEventListener("change", (event) => { }); const apiEndpoint = 'https://raw.githubusercontent.com/libredirect/instances/main/data.json'; - document.querySelector("#update-instances").addEventListener("click", () => { let request = new XMLHttpRequest(); request.open('GET', apiEndpoint, false); request.send(null); if (request.status === 200) { - document.querySelector("#update-instances").innerHTML = 'gav'; + document.querySelector("#update-instances").innerHTML = 'gav'; const instances = JSON.parse(request.responseText); const nitterRandomPool = instances.twitter.join(','); const invidiousRandomPool = instances.youtube.join(','); diff --git a/src/assets/stylesheets/styles.css b/src/pages/stylesheets/styles.css index a86cfa2b..363bdf3c 100644 --- a/src/assets/stylesheets/styles.css +++ b/src/pages/stylesheets/styles.css @@ -1,8 +1,8 @@ body { --text: #fff; - --bg-main: #3c4043; - --bg-secondary: #292a2d; - --active: #ff5b56; + --bg-main: #121212; + --bg-secondary: #202020; + --active: #fbc117; --space: 5px; --danger: #f04141; --danger-light: #f9d0d5; @@ -16,73 +16,22 @@ body.light-theme { --bg-secondary: #fff; } -.light-theme.popup, -.light-theme .popup { - background-color: var(--bg-secondary); -} - body { - margin: 0; width: 400px; margin: auto; + padding: 0; min-height: 572px; font-family: Sans-Serif; background-color: var(--bg-secondary); color: var(--text); } -.popup { - width: 300px; - min-height: auto; - overflow: hidden; - background-color: var(--bg-main); -} - input { appearance: none; -moz-appearance: none; -webkit-appearance: none; } -header { - background-color: var(--bg-main); - color: var(--text); - display: flex; - padding: var(--space); -} - -header .logo-container { - width: 100%; - margin: var(--space) 0 var(--space) 0; - display: flex; - align-items: center; -} - -header .logo-container img { - height: 30px; - float: left; -} - -header .logo-container h1 { - font-size: 14px; - float: left; - margin-left: 15px; - text-transform: uppercase; - font-weight: normal; -} - -header .privacy { - letter-spacing: 0.13em; -} - -header .version { - font-size: 8.5px; - font-weight: bold; - position: absolute; - top: var(--space); - right: var(--space); -} - h1 { font-size: 14px; margin: 7px auto; @@ -112,27 +61,29 @@ footer { width: 100%; } -footer a.button { - margin: var(--space); -} input[type="url"], input[type="text"], select { width: 100%; + margin: auto; + border-radius: 3px; box-sizing: border-box; margin-bottom: var(--space); background-color: var(--bg-main); - border-style: inset; + border-style: solid; + border-color: #767676; color: var(--text); } -input[type="url"] { - padding: 1px 2px; +select{ + margin: 0; + width: auto; + border-radius: 3px; } -input[type="checkbox"] { - opacity: 0; +input[type="url"] { + padding: 5px; } input[type="radio"] { @@ -141,7 +92,7 @@ input[type="radio"] { -webkit-appearance: radio; } -input[type="radio"]:checked + label { +input[type="radio"]:checked+label { background: transparent; } @@ -172,18 +123,18 @@ input[type="radio"]:checked + label { width: 20px; } -input:checked + label { +input:checked+label { background: var(--active); } -input:checked + label:after { +input:checked+label:after { left: calc(100% - var(--space)); transform: translateX(-100%); } .settings-block { display: block; - padding: 5px 10px 5px 10px; + padding: 5px 15px; } .settings-block h1 { @@ -242,8 +193,6 @@ input:invalid { } .tab button { - border-top-left-radius: 10px; - border-top-right-radius: 10px; color: var(--text); background-color: inherit; float: left; @@ -257,6 +206,14 @@ input:invalid { font-size: 14px; } +.tab button.left { + border-top-left-radius: 7px; +} + +.tab button.right { + border-top-right-radius: 7px; +} + .tab button:hover { background-color: var(--active); } @@ -276,7 +233,7 @@ div.exceptions { clear: left; } -div.exceptions > input { +div.exceptions>input { width: 240px; float: left; } @@ -334,7 +291,7 @@ li { } .autocomplete input { - background: url(../images/chevron-down.svg) right no-repeat; + background: url(../../assets/images/chevron-down.svg) right no-repeat; } .autocomplete-items { @@ -438,8 +395,8 @@ input[type="range"]::-moz-range-thumb { opacity: 0.7; } -*:focus { - outline: var(--active) solid 2px; +input[type="url"]:focus { + outline: none; } @media (prefers-color-scheme: light) { @@ -536,3 +493,123 @@ hr { box-shadow: 0 0 1px var(--bg-secondary); font-weight: bold; } + + + + +.light-theme.popup, +.light-theme .popup { + background-color: var(--bg-secondary); +} + +body.light-theme { + --text: #000; + --bg-main: #e3e7ea; + --bg-secondary: #fff; +} + +body.popup { + width: 200px; + min-height: auto; + background-color: var(--bg-main); +} + +div.some-block { + padding: 0 15px; + justify-content: space-between; + display: flex; + align-items: center; + margin-top: 10px; + margin-bottom: 10px; + +} + +div.some-block h4 { + margin: 0; + width: 70%; +} + +textarea { + resize: vertical; + width: 100%; + height: 200px; +} + +div.some-block input[type="checkbox"] { + width: 48px; + height: 25px; + background-color: var(--light-grey); + border-radius: 50px; + transition: .4s; + cursor: pointer; +} + +div.some-block input[type="checkbox"]:checked { + background-color: var(--active); + +} + +div.some-block input[type="checkbox"]:focus { + outline: none; +} + +div.some-block input[type="checkbox"]::before { + content: ""; + display: inline-block; + width: 20px; + height: 20px; + box-sizing: border-box; + position: relative; + top: 2.5px; + left: 4px; + height: 20px; + background-color: white; + border-radius: 50%; + transition: .4s; +} + +div.some-block input[type="checkbox"]:checked::before { + left: 24px; +} + +div.buttons { + margin-bottom: 15px; +} + +a.button { + border-radius: 5px; + border: var(--active) solid 1px; + color: var(--text); + stroke: var(--text); + display: block; + font-size: 12px; + font-weight: bold; + margin: 7.5px 15px; + padding: 10px; + text-align: center; + text-decoration: none; + cursor: pointer; + transition-duration: 0.1s; +} + +a.button * { + vertical-align: middle; +} + +a.button:hover { + background-color: var(--active); + color: var(--text); + stroke: var(--text); +} + +a.button:active { + background-color: var(--active); + box-shadow: 0 var(--space) var(--bg-main); + transform: translateY(1px); +} + + +a.button svg { + height: 18px; + width: 18px; +} \ No newline at end of file |
