diff options
| -rw-r--r-- | src/assets/javascripts/helpers/common.js | 11 | ||||
| -rw-r--r-- | src/manifest.json | 2 | ||||
| -rw-r--r-- | src/pages/background/background.js | 9 | ||||
| -rw-r--r-- | src/pages/options/options.html | 529 | ||||
| -rw-r--r-- | src/pages/options/options.js | 26 | ||||
| -rw-r--r-- | src/pages/popup/popup.html | 7 | ||||
| -rw-r--r-- | src/pages/popup/style.css | 5 | ||||
| -rw-r--r-- | src/pages/stylesheets/styles.css | 305 |
8 files changed, 345 insertions, 549 deletions
diff --git a/src/assets/javascripts/helpers/common.js b/src/assets/javascripts/helpers/common.js index ff043816..14abbe27 100644 --- a/src/assets/javascripts/helpers/common.js +++ b/src/assets/javascripts/helpers/common.js @@ -22,8 +22,15 @@ function getInstances() { const nitterRandomPool = addHttps(filterInstances(instances.nitter)).join(','); const invidiousRandomPool = addHttps(filterInstances(instances.invidious)).join(','); const bibliogramRandomPool = addHttps(filterInstances(instances.bibliogram)).join(','); - const scribeRandomPool = addHttps(filterInstances(instances.wikiless)).join(',') - browser.storage.sync.set({ nitterRandomPool, invidiousRandomPool, bibliogramRandomPool, scribeRandomPool}); + const wikilessRandomPool = addHttps(filterInstances(instances.wikiless)).join(',') + const scribeRandomPool = addHttps(filterInstances(instances.scribe)).join(',') + browser.storage.sync.set({ + nitterRandomPool, + invidiousRandomPool, + bibliogramRandomPool, + wikilessRandomPool, + scribeRandomPool + }); return true; } return false; diff --git a/src/manifest.json b/src/manifest.json index 419edeb8..68f85935 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -88,7 +88,7 @@ ], "options_ui": { "page": "pages/options/options.html", - "open_in_tab": false + "open_in_tab": true }, "web_accessible_resources": [ "assets/javascripts/helpers/*" diff --git a/src/pages/background/background.js b/src/pages/background/background.js index c94b61dc..9ae50dd3 100644 --- a/src/pages/background/background.js +++ b/src/pages/background/background.js @@ -110,6 +110,7 @@ browser.storage.sync.get( "invidiousRandomPool", "bibliogramRandomPool", "scribeRandomPool", + "wikilessRandomPool", "exceptions", ], (result) => { @@ -670,7 +671,12 @@ browser.webRequest.onBeforeRequest.addListener( ); browser.tabs.onUpdated.addListener((tabId, changeInfo, _) => { - const url = new URL(changeInfo.url); + let url; + try { + url = new URL(changeInfo.url) + } catch (_) { + return; + } var protocolHost = `${url.protocol}//${url.host}`; var mightyList = []; mightyList.push(...invidiousInstances); @@ -684,7 +690,6 @@ browser.tabs.onUpdated.addListener((tabId, changeInfo, _) => { if (mightyList.includes(protocolHost)) browser.pageAction.show(tabId); - }); diff --git a/src/pages/options/options.html b/src/pages/options/options.html index 286cef51..f1934ff1 100644 --- a/src/pages/options/options.html +++ b/src/pages/options/options.html @@ -9,312 +9,285 @@ <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> +<body class="option"> + + <div class="some-block option-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 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 /> + <hr> + + <div class="some-block option-block"> + <h1>Youtube (Invidious)</h1> + <input id="disable-invidious" type="checkbox" checked /> + </div> + + <div class="some-block option-block"> + <h4>Instance</h4> + <div class="autocomplete"> + <input id="invidious-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__" + placeholder="Random instance (none selected)" /> </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"> + <h4>Random Instance Pool (comma-separated)</h4> + <textarea type="textarea" id="invidious-random-pool" name="invidious-random-pool" type="text"></textarea> + </section> + + <div class="some-block option-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 option-block"> + <h4 data-localise="__MSG_alwaysProxy__">Always proxy videos through Invidious</h4> + <input id="always-proxy" type="checkbox" checked /> + </div> + + <div class="some-block option-block"> + <h4 data-localise="__MSG_onlyEmbeddedVideo__">Only redirect embedded video to Invidious</h4> + <input id="only-embed" type="checkbox" checked /> + </div> + + <div class="some-block option-block"> + <h4>Video Quality</h4> + <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> + </div> + + <div class="some-block option-block"> + <h4>Dark mode</h4> + <input id="invidious-dark-mode" type="checkbox" checked /> + </div> + + <div class="some-block"> + <h4>Volume: <span id="volume-value">50%</span></h4> + <input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1" /> + </div> + + <div class="some-block option-block"> + <h4>Player Style</h4> + <select id="invidious-player-style"> + <option value="">Invidious</option> + <option value="youtube">YouTube</option> + </select> + </div> + + <div class="some-block option-block"> + <h4>Subtitles - language codes</h4> + <input id="invidious-subtitles" placeholder="en, ar, es" name="invidious-subtitles" type="text" /> + </div> + + <div class="some-block option-block"> + <h4>Automatically play video on load</h4> + <input id="invidious-autoplay" type="checkbox" checked /> + </div> + + <div class="some-block option-block"> + <h4>Persist preferences (as cookie)</h4> + <input id="persist-invidious-prefs" type="checkbox" checked /> + </div> + + <hr> + + <div class="some-block option-block"> + <h1>Twitter (Nitter)</h1> + <input id="disable-nitter" type="checkbox" checked /> + </div> + <div class="some-block option-block"> + <h4>Instance</h4> + <div class="autocomplete"> + <input id="nitter-instance" type="url" name="nitter-instance" + data-localise-placeholder="__MSG_randomInstancePlaceholder__" placeholder="Random instance (none selected)" /> </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"> + <h4>Random instance pool (comma-separated)</h4> + <textarea id="nitter-random-pool" name="nitter-random-pool" type="text"></textarea> + </section> + <div class="some-block option-block"> + <h4 data-localise="__MSG_removeTwitterSW__">Proactively remove Twitter service worker</h4> + <input id="remove-twitter-sw" type="checkbox" checked /> + </div> + + <hr> + + <div class="some-block option-block"> + <h1>Instagram (Bibliogram)</h1> + <input id="disable-bibliogram" type="checkbox" checked /> + </div> + <div class="some-block option-block"> + <h4>Instance</h4> + <div class="autocomplete"> + <input id="bibliogram-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__" + placeholder="Random instance (none selected)" /> </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> + + <section class="settings-block"> + <h4>Random instance pool (comma-separated)</h4> + <textarea id="bibliogram-random-pool" name="bibliogram-random-pool" type="text"></textarea> + </section> + + <hr> + + <div class="some-block option-block"> + <h1>Reddit (LibReddit)</h1> + <input id="disable-reddit" type="checkbox" checked /> + </div> + <div class="some-block option-block"> + <h4>Instance</h4> + <div class="autocomplete"> + <input id="reddit-instance" type="url" placeholder="https://libredd.it" /> </div> + </div> + <section class="settings-block"> + <h4>Random instance pool (comma-separated)</h4> + <textarea id="scribe-random-pool" name="scribe-random-pool" type="text"></textarea> + </section> + + <hr> + <div class="some-block option-block"> + <h1>Search</h1> + <input id="disable-searchEngine" type="checkbox" checked /> + </div> + <div class="some-block option-block"> + <h4>Instance</h4> + <div class="autocomplete"> + <input id="searchEngine-instance" type="url" data-localise-placeholder="__MSG_randomInstancePlaceholder__" + placeholder="Random instance (none selected)" /> + </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_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_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_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_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> + <hr> + + <div class="some-block option-block"> + <h1>Translate (SimplyTranslate)</h1> + <input id="disable-simplyTranslate" type="checkbox" checked /> + </div> + <div class="some-block option-block"> + <h4>Instance</h4> + <div class="autocomplete"> + <input id="simplyTranslate-instance" type="url" placeholder="https://translate.metalune.xyz" /> </div> - <button type="button" class="collapsible"> - Twitter (Nitter) - </button> - <div class="collapsible-content"> - <section class="settings-block"> - <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> + + <hr> + + <div class="some-block option-block"> + <h1>Maps (OpenStreetMap)</h1> + <input id="disable-osm" type="checkbox" checked /> + </div> + <div class="some-block option-block"> + <h4>Instance</h4> + <div class="autocomplete"> + <input id="osm-instance" type="url" placeholder="https://openstreetmap.org" /> </div> - <button type="button" class="collapsible"> - Instagram (Bibliogram) - </button> - <div class="collapsible-content"> - <section class="settings-block"> - <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> + + <hr> + <div class="some-block option-block"> + <h1>Wikipedia (Wikiless)</h1> + <input id="disable-wikipedia" type="checkbox" checked /> + </div> + <div class="some-block option-block"> + <h4>Instance</h4> + <div class="autocomplete"> + <input id="wikipedia-instance" type="url" placeholder="https://wikiless.org" /> </div> - <button type="button" class="collapsible"> - Medium (Scribe) - </button> - <div class="collapsible-content"> - <section class="settings-block"> - <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> + + <hr> + + <div class="some-block option-block"> + <h1>Medium (Scribe)</h1> + <input id="disable-scribe" type="checkbox" checked /> + </div> + <div class="some-block option-block"> + <h4>Instance</h4> + <div class="autocomplete"> + <input id="scribe-instance" type="url" name="scribe-instance" + data-localise-placeholder="__MSG_randomInstancePlaceholder__" placeholder="Random instance (none selected)" /> </div> </div> + <div class="buttons"> + <a class="button" id="update-instances"> + <span data-localise="__MSG_updateInstances__">Update Instances</span> + </a> + </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=" + <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> <script type="module" src="./options.js"></script> <script src="../../assets/javascripts/localise.js"></script> diff --git a/src/pages/options/options.js b/src/pages/options/options.js index e0fd03e1..eb38d2a5 100644 --- a/src/pages/options/options.js +++ b/src/pages/options/options.js @@ -194,32 +194,6 @@ browser.storage.sync.get( } ); -function openTab(tab, event) { - let i, tabcontent, tablinks; - tabcontent = document.getElementsByClassName("tabcontent"); - for (i = 0; i < tabcontent.length; i++) { - tabcontent[i].style.display = "none"; - } - tablinks = document.getElementsByClassName("tablinks"); - for (i = 0; i < tablinks.length; i++) { - tablinks[i].className = tablinks[i].className.replace(" active", ""); - } - document.getElementById(tab).style.display = "block"; - event.currentTarget.className += " active"; -} - -document - .getElementById("general-tab") - .addEventListener("click", openTab.bind(null, "general")); -document - .getElementById("advanced-tab") - .addEventListener("click", openTab.bind(null, "advanced")); -document - .getElementById("exceptions-tab") - .addEventListener("click", openTab.bind(null, "exceptions")); - -document.getElementById("general-tab").click(); - function addToExceptions() { const input = document.getElementById("new-exceptions-item"); const type = document.querySelector('input[name="type"]:checked').value; diff --git a/src/pages/popup/popup.html b/src/pages/popup/popup.html index 900f6256..4c90b258 100644 --- a/src/pages/popup/popup.html +++ b/src/pages/popup/popup.html @@ -4,14 +4,11 @@ <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> - <title></title> <link href="../stylesheets/styles.css" rel="stylesheet" /> + <link href="./style.css" rel="stylesheet" /> </head> -<body class="popup"> - - - +<body> <div class="some-block"> <h4>Youtube</h4> <input id="disable-invidious" type="checkbox" checked /> diff --git a/src/pages/popup/style.css b/src/pages/popup/style.css new file mode 100644 index 00000000..098e6728 --- /dev/null +++ b/src/pages/popup/style.css @@ -0,0 +1,5 @@ +body { + width: 200px; + min-height: auto; + background-color: var(--bg-main); +} \ No newline at end of file diff --git a/src/pages/stylesheets/styles.css b/src/pages/stylesheets/styles.css index 363bdf3c..23b53c3d 100644 --- a/src/pages/stylesheets/styles.css +++ b/src/pages/stylesheets/styles.css @@ -17,16 +17,15 @@ body.light-theme { } body { - width: 400px; margin: auto; padding: 0; min-height: 572px; font-family: Sans-Serif; - background-color: var(--bg-secondary); + background-color: var(--bg-main); color: var(--text); } -input { +div.some-block input[type="checkbox"] { appearance: none; -moz-appearance: none; -webkit-appearance: none; @@ -37,10 +36,6 @@ h1 { margin: 7px auto; } -i { - font-size: 12px; -} - h2 { clear: both; font-size: 12px; @@ -48,24 +43,16 @@ h2 { margin: 0; } -h3 { - font-size: 16px; -} - h1, h2 { color: var(--text); } -footer { - width: 100%; -} - - input[type="url"], input[type="text"], select { - width: 100%; + padding: 5px 10px; + width: 400px; margin: auto; border-radius: 3px; box-sizing: border-box; @@ -73,18 +60,22 @@ select { background-color: var(--bg-main); border-style: solid; border-color: #767676; + color: var(--text); } -select{ +select { + font-size: 16px; + font-weight: bold; + padding: 8px; + background-color: var(--bg-secondary); + border: none; + ; margin: 0; width: auto; border-radius: 3px; } -input[type="url"] { - padding: 5px; -} input[type="radio"] { appearance: radio; @@ -96,33 +87,6 @@ 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); } @@ -134,29 +98,10 @@ input:checked+label:after { .settings-block { display: block; + margin: 30px 0; 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; } @@ -183,52 +128,6 @@ input:invalid { 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; } @@ -334,60 +233,9 @@ li { 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; +input[type="range"] { + width: 50%; } ::placeholder { @@ -395,32 +243,13 @@ input[type="range"]::-moz-range-thumb { opacity: 0.7; } +input[type="text"]:focus, 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; + color: var(--active); } .collapsible { @@ -437,38 +266,15 @@ input[type="url"]:focus { font-weight: bold; } -.collapsible:after { - content: "\25BE"; - color: var(--active); - font-weight: bold; - float: right; - margin-left: 5px; -} +/* \25BE */ -.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); + margin: 0 15px; + background-color: rgb(77, 77, 77); border: none; } @@ -494,9 +300,6 @@ hr { font-weight: bold; } - - - .light-theme.popup, .light-theme .popup { background-color: var(--bg-secondary); @@ -508,10 +311,15 @@ body.light-theme { --bg-secondary: #fff; } -body.popup { - width: 200px; - min-height: auto; - background-color: var(--bg-main); +textarea { + resize: vertical; + width: 100%; + height: 200px; +} + +body.option { + width: 600px; + float: left; } div.some-block { @@ -524,15 +332,32 @@ div.some-block { } +div.option-block { + margin: 30px 0; +} + +h4 { + margin: 10px 0; + font-size: 18px; +} + div.some-block h4 { margin: 0; width: 70%; } -textarea { - resize: vertical; - width: 100%; - height: 200px; +div.option-block h4 { + margin-right: 5px; + width: 80%; + font-size: 18px; +} + +div.option-block h1 { + margin: 0; + margin-right: 5px; + width: 80%; + font-size: 20px; + color: var(--active); } div.some-block input[type="checkbox"] { @@ -546,7 +371,6 @@ div.some-block input[type="checkbox"] { div.some-block input[type="checkbox"]:checked { background-color: var(--active); - } div.some-block input[type="checkbox"]:focus { @@ -576,12 +400,13 @@ div.buttons { margin-bottom: 15px; } + a.button { + stroke: var(--text); + display: block; 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; @@ -592,10 +417,6 @@ a.button { transition-duration: 0.1s; } -a.button * { - vertical-align: middle; -} - a.button:hover { background-color: var(--active); color: var(--text); @@ -608,8 +429,22 @@ a.button:active { transform: translateY(1px); } +@media (prefers-color-scheme: light) { + body { + --text: #000; + --text-secondary: #fff; + --bg-main: #e3e7ea; + --bg-secondary: #fff; + } -a.button svg { - height: 18px; - width: 18px; + body.dark-theme { + --text: #fff; + --text-secondary: #000; + --bg-main: #3c4043; + --bg-secondary: #292a2d; + } + + .popup { + background-color: var(--bg-secondary); + } } \ No newline at end of file |