diff options
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/options/options.html | 949 | ||||
| -rw-r--r-- | src/pages/options/options.js | 58 | ||||
| -rw-r--r-- | src/pages/popup/popup.html | 356 | ||||
| -rw-r--r-- | src/pages/popup/popup.js | 6 | ||||
| -rw-r--r-- | src/pages/stylesheets/styles.css | 615 |
5 files changed, 1025 insertions, 959 deletions
diff --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/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css new file mode 100644 index 00000000..363bdf3c --- /dev/null +++ b/src/pages/stylesheets/styles.css @@ -0,0 +1,615 @@ +body { + --text: #fff; + --bg-main: #121212; + --bg-secondary: #202020; + --active: #fbc117; + --space: 5px; + --danger: #f04141; + --danger-light: #f9d0d5; + --dark-grey: #767676; + --light-grey: #c3c3c3; +} + +body.light-theme { + --text: #000; + --bg-main: #e3e7ea; + --bg-secondary: #fff; +} + +body { + width: 400px; + margin: auto; + padding: 0; + min-height: 572px; + font-family: Sans-Serif; + background-color: var(--bg-secondary); + color: var(--text); +} + +input { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +} + +h1 { + font-size: 14px; + margin: 7px auto; +} + +i { + font-size: 12px; +} + +h2 { + clear: both; + font-size: 12px; + font-weight: normal; + margin: 0; +} + +h3 { + font-size: 16px; +} + +h1, +h2 { + color: var(--text); +} + +footer { + width: 100%; +} + + +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: solid; + border-color: #767676; + color: var(--text); +} + +select{ + margin: 0; + width: auto; + border-radius: 3px; +} + +input[type="url"] { + padding: 5px; +} + +input[type="radio"] { + appearance: radio; + -moz-appearance: radio; + -webkit-appearance: radio; +} + +input[type="radio"]:checked+label { + background: transparent; +} + +.checkbox-label { + margin-left: 5px; + background: grey; + border-radius: 25px; + color: var(--text); + cursor: pointer; + display: block; + float: right; + font-weight: bold; + height: 30px; + position: relative; + text-indent: -400px; + width: 50px; +} + +.checkbox-label:after { + background: white; + border-radius: 90px; + content: ""; + height: 20px; + left: var(--space); + position: absolute; + top: var(--space); + transition: 0.3s; + width: 20px; +} + +input:checked+label { + background: var(--active); +} + +input:checked+label:after { + left: calc(100% - var(--space)); + transform: translateX(-100%); +} + +.settings-block { + display: block; + padding: 5px 15px; +} + +.settings-block h1 { + float: left; +} + +.button { + border: var(--active) solid 1px; + color: var(--text); + stroke: var(--text); + display: block; + font-size: 12px; + font-weight: bold; + margin: var(--space) auto; + padding: 10px; + text-align: center; + text-decoration: none; + cursor: pointer; + -webkit-transition-duration: 0.4s; + transition-duration: 0.4s; +} + +.button * { + vertical-align: middle; +} + +.button:hover { + background-color: var(--active); + color: var(--text); + stroke: var(--text); +} + +.button:active { + background-color: var(--active); + box-shadow: 0 var(--space) var(--bg-main); + transform: translateY(4px); +} + +input:invalid { + color: var(--danger); + border-color: var(--danger); + background-color: var(--danger-light); +} + +.margin-bottom { + margin-bottom: 20px; +} + +.tab { + overflow: hidden; + background-color: var(--bg-secondary); + position: fixed; + top: 0; + width: 400px; + z-index: 2; +} + +.tab button { + color: var(--text); + background-color: inherit; + float: left; + border: none; + outline: none; + cursor: pointer; + padding: 14px 16px; + transition: 0.3s; + border: solid 1px var(--bg-main); + width: 33.333%; + 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); +} + +.tab button.active { + background-color: var(--bg-main); +} + +.tabcontent { + padding-top: 50px; + display: none; + background-color: var(--bg-main); + min-height: 510px; +} + +div.exceptions { + clear: left; +} + +div.exceptions>input { + width: 240px; + float: left; +} + +#add-to-exceptions { + float: right; + border: var(--active) solid 1px; + background-color: var(--active); + color: var(--text); + font-weight: bold; + cursor: pointer; + border-radius: 50%; + padding: 1px 1px 0px 1px; + margin-right: 5px; +} + +#add-to-exceptions svg { + height: 20px; + width: 20px; +} + +ul { + padding: 0; + list-style-type: none; + color: var(--text); + margin: 20px 20px 0 20px; +} + +li { + border-bottom: solid 0.5px var(--bg-secondary); + padding: 20px 0px 20px 20px; +} + +#exceptions-items button { + float: right; + margin-right: -5px; + border: var(--active) solid 1px; + background-color: var(--active); + color: var(--text); + font-weight: bold; + cursor: pointer; + border-radius: 50%; + padding: 2px 2px 0px 2px; +} + +.button svg { + height: 18px; + width: 18px; +} + +.autocomplete { + position: relative; + display: inline-block; + width: 100%; +} + +.autocomplete input { + background: url(../../assets/images/chevron-down.svg) right no-repeat; +} + +.autocomplete-items { + position: absolute; + border: 1px solid var(--bg-main); + border-bottom: none; + border-top: none; + z-index: 99; + top: 85%; + left: 0; + right: 0; + overflow-y: auto; + max-height: 175px; + color: var(--text); + overflow-x: hidden; + max-width: 380px; +} + +.autocomplete-items div { + padding: 10px; + cursor: pointer; + background-color: var(--bg-secondary); + border-bottom: 1px solid var(--bg-main); +} + +.autocomplete-items div:hover { + background-color: var(--active); +} + +.autocomplete-active { + background-color: var(--active); + color: var(--text); +} + +.option { + width: 100%; +} + +.option td { + vertical-align: middle; +} + +input[type="range"] { + -webkit-appearance: none; + margin: 18px 0; + width: 100%; +} + +input[type="range"]:focus { + outline: none; +} + +input[type="range"]::-webkit-slider-runnable-track { + width: 100%; + height: 8.4px; + cursor: pointer; + border-color: var(--dark-grey), var(--light-grey); + background: var(--bg-main); + border-radius: 1.3px; + border: 0.2px inset var(--dark-grey); +} + +input[type="range"]::-webkit-slider-thumb { + border-color: var(--active); + border: 1px solid var(--dark-grey); + height: 36px; + width: 16px; + border-radius: 3px; + background: var(--active); + cursor: pointer; + -webkit-appearance: none; + margin-top: -14px; +} + +input[type="range"]:focus::-webkit-slider-runnable-track { + background: var(--bg-main); +} + +input[type="range"]::-moz-range-track { + width: 100%; + height: 8.4px; + cursor: pointer; + border-color: var(--dark-grey), var(--light-grey); + background: var(--bg-main); + border-radius: 1.3px; + border: 0.2px inset var(--dark-grey); +} + +input[type="range"]::-moz-range-thumb { + border-color: var(--active); + border: 1px solid var(--dark-grey); + height: 36px; + width: 16px; + border-radius: 3px; + background: var(--active); + cursor: pointer; +} + +::placeholder { + color: var(--text); + opacity: 0.7; +} + +input[type="url"]:focus { + outline: none; +} + +@media (prefers-color-scheme: light) { + body { + --text: #000; + --text-secondary: #fff; + --bg-main: #e3e7ea; + --bg-secondary: #fff; + } + + body.dark-theme { + --text: #fff; + --text-secondary: #000; + --bg-main: #3c4043; + --bg-secondary: #292a2d; + } + + .popup { + background-color: var(--bg-secondary); + } +} + +#volume-value { + float: right; +} + +.collapsible { + background-color: var(--bg-main); + cursor: pointer; + color: var(--active); + padding: 18px; + width: 100%; + border: none; + text-align: left; + outline: none; + font-size: 15px; + border-bottom: solid var(--active); + font-weight: bold; +} + +.collapsible:after { + content: "\25BE"; + color: var(--active); + font-weight: bold; + float: right; + margin-left: 5px; +} + +.collapsible-active, +.collapsible:hover, +.collapsible:hover::after { + background-color: var(--active); + color: var(--text-secondary); +} + +.collapsible-active:after { + content: "\25B4"; + color: var(--text-secondary); + font-weight: bold; + float: right; + margin-left: 5px; +} + +.collapsible-content { + padding: 0 18px; + display: none; + overflow: hidden; +} + +hr { + height: 2px; + background-color: var(--active); + border: none; +} + +.new-badge { + position: relative; +} + +.new-badge[data-new-badge]:after { + content: "New!"; + position: absolute; + top: -10px; + right: -42px; + font-size: 0.9em; + background: var(--active); + color: white; + width: 35px; + height: 18px; + text-align: center; + line-height: 18px; + border-radius: 25px; + padding: 2px; + 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 |