From aeef1b7778c52697ec26502c253c020d5b2803bd Mon Sep 17 00:00:00 2001 From: ManeraKai Date: Sun, 30 Jan 2022 01:34:33 +0300 Subject: Updating options.html design --- src/assets/javascripts/helpers/common.js | 17 +- src/manifest.json | 2 +- src/pages/background/background.js | 9 +- src/pages/options/options.html | 529 +++++++++++++++---------------- src/pages/options/options.js | 26 -- src/pages/popup/popup.html | 7 +- src/pages/popup/style.css | 5 + src/pages/stylesheets/styles.css | 305 ++++-------------- 8 files changed, 348 insertions(+), 552 deletions(-) create mode 100644 src/pages/popup/style.css (limited to 'src') diff --git a/src/assets/javascripts/helpers/common.js b/src/assets/javascripts/helpers/common.js index ee9a66db..14abbe27 100644 --- a/src/assets/javascripts/helpers/common.js +++ b/src/assets/javascripts/helpers/common.js @@ -19,11 +19,18 @@ function getInstances() { if (request.status === 200) { const instances = JSON.parse(request.responseText); - const nitterRandomPool = addHttps(filterInstances(instances.twitter)).join(','); - const invidiousRandomPool = addHttps(filterInstances(instances.youtube)).join(','); - const bibliogramRandomPool = addHttps(filterInstances(instances.instagram)).join(','); - const scribeRandomPool = addHttps(filterInstances(instances.wikipedia)).join(',') - browser.storage.sync.set({ nitterRandomPool, invidiousRandomPool, bibliogramRandomPool, scribeRandomPool}); + const nitterRandomPool = addHttps(filterInstances(instances.nitter)).join(','); + const invidiousRandomPool = addHttps(filterInstances(instances.invidious)).join(','); + const bibliogramRandomPool = addHttps(filterInstances(instances.bibliogram)).join(','); + 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 @@ LibRedirect Options - -
- - - -
- -
- -
-

Theme

- -
+ + +
+

Theme

+ +
-
-

Youtube (Invidious)

- -
-
-
- -
-
- -
-

Twitter (Nitter)

- -
-
-
- -
-
- -
-

Instagram (Bibliogram)

- -
-
-
- -
-
- -
-

Reddit (LibReddit)

- -
-
-
- -
-
- -
-

Search

- -
-
-
- -
-
- -
-

Translate (SimplyTranslate)

- -
-
-
- -
-
- -
-

Maps (OpenStreetMaps)

- +
+ +
+

Youtube (Invidious)

+ +
+ +
+

Instance

+
+
-
-
- -
-
- -
-

Wikipedia (Wikiless)

- +
+ +
+

Random Instance Pool (comma-separated)

+ +
+ +
+

Use FreeTube over Invidious when possible

+ +
+ +
+

Always proxy videos through Invidious

+ +
+ +
+

Only redirect embedded video to Invidious

+ +
+ +
+

Video Quality

+ +
+ +
+

Dark mode

+ +
+ +
+

Volume: 50%

+ +
+ +
+

Player Style

+ +
+ +
+

Subtitles - language codes

+ +
+ +
+

Automatically play video on load

+ +
+ +
+

Persist preferences (as cookie)

+ +
+ +
+ +
+

Twitter (Nitter)

+ +
+
+

Instance

+
+
-
-
- -
-
- -
-

Medium (Scribe)

- +
+ +
+

Random instance pool (comma-separated)

+ +
+
+

Proactively remove Twitter service worker

+ +
+ +
+ +
+

Instagram (Bibliogram)

+ +
+
+

Instance

+
+
-
-
- -
-
-
- - Update Instances - +
+ +
+

Random instance pool (comma-separated)

+ +
+ +
+ +
+

Reddit (LibReddit)

+ +
+
+

Instance

+
+
+
+
+

Random instance pool (comma-separated)

+ +
+ +
+
+

Search

+ +
+
+

Instance

+
+ +
-
- - -
-
-

- Invidious random instance pool (comma-separated) -

- -
- -
-

Use FreeTube over Invidious when possible

- -
- -
-

Always proxy videos through Invidious

- -
- -
-

Only redirect embedded video to Invidious

- -
- -
-

Invidious Video Quality

- -
- - -
-

Invidious dark mode always on

- -
- -
-

- Invidious Volume:  -

- - -
- -
- -
-

Invidious Player Style

- -
- - -
-

- Invidious Subtitles - language codes (comma-separated) -

- -
- -
-

Invidious automatically play video on load

- -
- -
-

Persist Invidious preferences (as cookie)

- -
+
+ +
+

Translate (SimplyTranslate)

+ +
+
+

Instance

+
+
- -
-
-

- Nitter random instance pool (comma-separated) -

- -
-
-

Proactively remove Twitter service worker

- -
+
+ +
+ +
+

Maps (OpenStreetMap)

+ +
+
+

Instance

+
+
- -
-
-

- Bibliogram random instance pool (comma-separated) -

- -
+
+ +
+
+

Wikipedia (Wikiless)

+ +
+
+

Instance

+
+
- -
-
-

- Scribe random instance pool (comma-separated) -

- -
+
+ +
+ +
+

Medium (Scribe)

+ +
+
+

Instance

+
+
+
+ + Update Instances + +
+
-
-
-

- Enter a URL or Regular Expression to be excluded from redirects. -

-

- All requests for or initiating from a URL that matches your exception - will be excluded from redirects. -

-

- Note - Supports JavaScript regular expressions, excluding the - enclosing forward slashes. -

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

Add Exception

-
- - - - - - - - +
+
+
    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 @@ - + - - - - +

    Youtube

    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 -- cgit 1.4.1