Updating and Cleaning UI #9

author: ManeraKai <manerakai@protonmail.com> 2022-01-27 14:58:10 +0300
committer: GitHub <noreply@github.com> 2022-01-27 14:58:10 +0300
commit: 155eddbf07d73f12639ed6470497f925a33e32f2 (patch)
tree: 89e7a3ede5fd043d6511666a88aa77a042296491 /src/pages
parent: Update FUNDING.yml (diff)
download: libredirect-155eddbf07d73f12639ed6470497f925a33e32f2.zip
5 files changed, 1026 insertions, 960 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
-                />&nbsp;
-                <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
-                />&nbsp;
-                <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
-                />&nbsp;
-                <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
-                />&nbsp;
-                <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
-                />&nbsp;
-                <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
-                />&nbsp;
-                <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
-                />&nbsp;
-                <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"
-                />&nbsp;
-                <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"
-                />&nbsp;
-                <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:&nbsp;<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
-                  />&nbsp;
-                  <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
-                  />&nbsp;
-                  <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
-                  />&nbsp;
-                  <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
-                  />&nbsp;
-                  <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
-                  />&nbsp;
-                  <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
-                  />&nbsp;
-                  <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
-                  />&nbsp;
-                  <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>:&nbsp;<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
-              />&nbsp;
-              <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
-              />&nbsp;
-              <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
-              />&nbsp;
-              <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
-              />&nbsp;
-              <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
-              />&nbsp;
-              <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
-              />&nbsp;
-              <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"
-              />&nbsp;
-              <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"
-              />&nbsp;
-              <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"
-              />&nbsp;
-              <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&nbsp;</span>
-      </a>
-      <a class="button" id="more-options">
-        <span data-localise="__MSG_moreOptions__">More Options&nbsp;</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&nbsp;</span>
+    </a>
+    <a class="button" id="more-options">
+      <span data-localise="__MSG_moreOptions__">More Options&nbsp;</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
author	ManeraKai <manerakai@protonmail.com>	2022-01-27 14:58:10 +0300
committer	GitHub <noreply@github.com>	2022-01-27 14:58:10 +0300
commit	155eddbf07d73f12639ed6470497f925a33e32f2 (patch)
tree	89e7a3ede5fd043d6511666a88aa77a042296491 /src/pages
parent	Update FUNDING.yml (diff)
download	libredirect-155eddbf07d73f12639ed6470497f925a33e32f2.zip