Closes #74 - Option to manually override theme.
This commit is contained in:
SimonBrazell
parent
13b7f4b007
commit
7ba890045e
|
|
@ -1,12 +1,10 @@
|
|||
{
|
||||
"name": "__MSG_extensionName__",
|
||||
"description": "__MSG_extensionDescription__",
|
||||
"version": "1.1.36",
|
||||
"version": "1.1.37",
|
||||
"manifest_version": 2,
|
||||
"background": {
|
||||
"scripts": [
|
||||
"background.js"
|
||||
],
|
||||
"scripts": ["background.js"],
|
||||
"persistent": true
|
||||
},
|
||||
"default_locale": "en",
|
||||
|
|
@ -16,12 +14,7 @@
|
|||
"48": "assets/images/icon48.png",
|
||||
"128": "assets/images/icon128.png"
|
||||
},
|
||||
"permissions": [
|
||||
"storage",
|
||||
"webRequest",
|
||||
"webRequestBlocking",
|
||||
"<all_urls>"
|
||||
],
|
||||
"permissions": ["storage", "webRequest", "webRequestBlocking", "<all_urls>"],
|
||||
"browser_action": {
|
||||
"default_title": "Privacy Redirect",
|
||||
"default_popup": "pages/popup/popup.html",
|
||||
|
|
@ -41,9 +34,7 @@
|
|||
"*://pbs.twimg.com/*",
|
||||
"*://video.twimg.com/*"
|
||||
],
|
||||
"js": [
|
||||
"assets/javascript/remove-twitter-sw.js"
|
||||
],
|
||||
"js": ["assets/javascript/remove-twitter-sw.js"],
|
||||
"run_at": "document_start"
|
||||
},
|
||||
{
|
||||
|
|
@ -64,9 +55,7 @@
|
|||
"*://c7hqkpkpemu6e7emz5b4vyz7idjgdvgaaa3dyimmeojqbgpea3xqjoid.onion/*",
|
||||
"*://mfqczy4mysscub2s.onio/*n"
|
||||
],
|
||||
"js": [
|
||||
"assets/javascript/persist-invidious-prefs.js"
|
||||
],
|
||||
"js": ["assets/javascript/persist-invidious-prefs.js"],
|
||||
"run_at": "document_start"
|
||||
}
|
||||
],
|
||||
|
|
@ -79,4 +68,4 @@
|
|||
"id": "{b7f9d2cd-d772-4302-8c3f-eb941af36f76}"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,286 +1,450 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title></title>
|
||||
<link href="../styles.css" rel="stylesheet" />
|
||||
<title>Privacy Redirect Options</title>
|
||||
</head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title></title>
|
||||
<link href="../styles.css" rel="stylesheet">
|
||||
<title>Privacy Redirect Options</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="tab">
|
||||
<button
|
||||
class="tablinks"
|
||||
id="general-tab"
|
||||
data-localize="__MSG_generalTab__"
|
||||
>
|
||||
General
|
||||
</button>
|
||||
<button
|
||||
class="tablinks"
|
||||
id="advanced-tab"
|
||||
data-localize="__MSG_advancedTab__"
|
||||
>
|
||||
Advanced
|
||||
</button>
|
||||
<button
|
||||
class="tablinks"
|
||||
id="exceptions-tab"
|
||||
data-localize="__MSG_exceptionsTab__"
|
||||
>
|
||||
Exceptions
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<body>
|
||||
<div id="general" class="tabcontent">
|
||||
<section class="settings-block">
|
||||
<table class="option" aria-label="Toggle Nitter redirects">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 data-localize="__MSG_disableNitter__">Nitter Redirects</h1>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
aria-hidden="true"
|
||||
id="disable-nitter"
|
||||
type="checkbox"
|
||||
checked
|
||||
/>
|
||||
<label for="disable-nitter" class="checkbox-label"></label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<table class="option" aria-label="Toggle Invidious redirects">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 data-localize="__MSG_disableInvidious__">
|
||||
Invidious Redirects
|
||||
</h1>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
aria-hidden="true"
|
||||
id="disable-invidious"
|
||||
type="checkbox"
|
||||
checked
|
||||
/>
|
||||
<label for="disable-invidious" class="checkbox-label"> </label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<table class="option" aria-label="Toggle Bibliogram redirects">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 data-localize="__MSG_disableBibliogram__">
|
||||
Bibliogram Redirects
|
||||
</h1>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
aria-hidden="true"
|
||||
id="disable-bibliogram"
|
||||
type="checkbox"
|
||||
checked
|
||||
/>
|
||||
<label for="disable-bibliogram" class="checkbox-label"> </label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<table class="option" aria-label="Toggle OpenStreetMap redirects">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 data-localize="__MSG_disableOsm__">
|
||||
OpenStreetMap Redirects
|
||||
</h1>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
aria-hidden="true"
|
||||
id="disable-osm"
|
||||
type="checkbox"
|
||||
checked
|
||||
/>
|
||||
<label for="disable-osm" class="checkbox-label"> </label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<h1 data-localize="__MSG_nitterInstance__">Nitter Instance</h1>
|
||||
<div class="autocomplete">
|
||||
<input
|
||||
id="nitter-instance"
|
||||
type="url"
|
||||
name="nitter-instance"
|
||||
placeholder="https://nitter.net"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<h1 data-localize="__MSG_invidiousInstance__">Invidious Instance</h1>
|
||||
<div class="autocomplete">
|
||||
<input
|
||||
id="invidious-instance"
|
||||
type="url"
|
||||
placeholder="https://invidio.us"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<h1 data-localize="__MSG_bibliogramInstance__">Bibliogram Instance</h1>
|
||||
<div class="autocomplete">
|
||||
<input
|
||||
id="bibliogram-instance"
|
||||
type="url"
|
||||
placeholder="https://bibliogram.art"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<h1 data-localize="__MSG_osmInstance__">OpenStreetMap Instance</h1>
|
||||
<div class="autocomplete">
|
||||
<input
|
||||
id="osm-instance"
|
||||
type="url"
|
||||
placeholder="https://openstreetmap.org"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<h1 data-localize="__MSG_theme__">Theme</h1>
|
||||
<select id="theme">
|
||||
<option value="">System</option>
|
||||
<option value="light-theme">Light</option>
|
||||
<option value="dark-theme">Dark</option>
|
||||
</select>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="tab">
|
||||
<button class="tablinks" id="general-tab" data-localize="__MSG_generalTab__">General</button>
|
||||
<button class="tablinks" id="advanced-tab" data-localize="__MSG_advancedTab__">Advanced</button>
|
||||
<button class="tablinks" id="exceptions-tab" data-localize="__MSG_exceptionsTab__">Exceptions</button>
|
||||
</div>
|
||||
<div id="advanced" class="tabcontent">
|
||||
<section class="settings-block">
|
||||
<table
|
||||
class="option"
|
||||
aria-label="Always proxy videos through Invidious"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 data-localize="__MSG_alwaysProxy__">
|
||||
Always proxy videos through Invidious
|
||||
</h1>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
aria-hidden="true"
|
||||
id="always-proxy"
|
||||
type="checkbox"
|
||||
checked
|
||||
/>
|
||||
<label for="always-proxy" class="checkbox-label"> </label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<table
|
||||
class="option"
|
||||
aria-label="Only redirect embedded video to Invidious"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 data-localize="__MSG_onlyEmbeddedVideo__">
|
||||
Only redirect embedded video to Invidious
|
||||
</h1>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
aria-hidden="true"
|
||||
id="only-embed"
|
||||
type="checkbox"
|
||||
checked
|
||||
/>
|
||||
<label for="only-embed" class="checkbox-label"> </label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<h1 data-localize="__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
|
||||
>
|
||||
</select>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<table class="option" aria-label="Invidious dark mode aways on">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 data-localize="__MSG_invidiousDarkMode__">
|
||||
Invidious dark mode always on
|
||||
</h1>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
aria-hidden="true"
|
||||
id="invidious-dark-mode"
|
||||
type="checkbox"
|
||||
checked
|
||||
/>
|
||||
<label for="invidious-dark-mode" class="checkbox-label">
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<h1 data-localize="__MSG_invidiousVolume__">Invidious Volume</h1>
|
||||
<input
|
||||
id="invidious-volume"
|
||||
name="invidious-volume"
|
||||
type="range"
|
||||
min="0"
|
||||
max="100"
|
||||
step="1"
|
||||
/>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<h1 data-localize="__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-localize="__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-localize="__MSG_invidiousAutoplay__">
|
||||
Invidious automatically play video on load
|
||||
</h1>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
aria-hidden="true"
|
||||
id="invidious-autoplay"
|
||||
type="checkbox"
|
||||
checked
|
||||
/>
|
||||
<label for="invidious-autoplay" class="checkbox-label"> </label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<table class="option" aria-label="Persist Invidious preferences">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 data-localize="__MSG_persistInvidiousPrefs__">
|
||||
Persist Invidious preferences (as cookie)
|
||||
</h1>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
aria-hidden="true"
|
||||
id="persist-invidious-prefs"
|
||||
type="checkbox"
|
||||
checked
|
||||
/>
|
||||
<label for="persist-invidious-prefs" class="checkbox-label">
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<table
|
||||
class="option"
|
||||
aria-label="Proactively remove Twitter service worker"
|
||||
>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 data-localize="__MSG_removeTwitterSW__">
|
||||
Proactively remove Twitter service worker
|
||||
</h1>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
aria-hidden="true"
|
||||
id="remove-twitter-sw"
|
||||
type="checkbox"
|
||||
checked
|
||||
/>
|
||||
<label for="remove-twitter-sw" class="checkbox-label"> </label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="general" class="tabcontent">
|
||||
<section class="settings-block">
|
||||
<table class="option" aria-label="Toggle Nitter redirects">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 data-localize="__MSG_disableNitter__">Nitter Redirects</h1>
|
||||
</td>
|
||||
<td>
|
||||
<input aria-hidden="true" id="disable-nitter" type="checkbox" checked>
|
||||
<label for="disable-nitter" class="checkbox-label"></label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<table class="option" aria-label="Toggle Invidious redirects">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 data-localize="__MSG_disableInvidious__">Invidious Redirects</h1>
|
||||
</td>
|
||||
<td>
|
||||
<input aria-hidden="true" id="disable-invidious" type="checkbox" checked>
|
||||
<label for="disable-invidious" class="checkbox-label">
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<table class="option" aria-label="Toggle Bibliogram redirects">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 data-localize="__MSG_disableBibliogram__">Bibliogram Redirects</h1>
|
||||
</td>
|
||||
<td>
|
||||
<input aria-hidden="true" id="disable-bibliogram" type="checkbox" checked>
|
||||
<label for="disable-bibliogram" class="checkbox-label">
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<table class="option" aria-label="Toggle OpenStreetMap redirects">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 data-localize="__MSG_disableOsm__">OpenStreetMap Redirects</h1>
|
||||
</td>
|
||||
<td>
|
||||
<input aria-hidden="true" id="disable-osm" type="checkbox" checked>
|
||||
<label for="disable-osm" class="checkbox-label">
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<h1 data-localize="__MSG_nitterInstance__">Nitter Instance</h1>
|
||||
<div class="autocomplete">
|
||||
<input id="nitter-instance" type="url" name="nitter-instance" placeholder="https://nitter.net">
|
||||
</div>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<h1 data-localize="__MSG_invidiousInstance__">Invidious Instance</h1>
|
||||
<div class="autocomplete">
|
||||
<input id="invidious-instance" type="url" placeholder="https://invidio.us">
|
||||
</div>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<h1 data-localize="__MSG_bibliogramInstance__">Bibliogram Instance</h1>
|
||||
<div class="autocomplete">
|
||||
<input id="bibliogram-instance" type="url" placeholder="https://bibliogram.art">
|
||||
</div>
|
||||
</section>
|
||||
<sections class="settings-block">
|
||||
<h1 data-localize="__MSG_osmInstance__">OpenStreetMap Instance</h1>
|
||||
<div class="autocomplete">
|
||||
<input id="osm-instance" type="url" placeholder="https://openstreetmap.org">
|
||||
</div>
|
||||
</sections>
|
||||
</div>
|
||||
<div id="exceptions" class="tabcontent">
|
||||
<section
|
||||
class="settings-block"
|
||||
data-localize="__MSG_exceptionsDescription__"
|
||||
>
|
||||
<p>
|
||||
Enter a URL or Regular Expression to be excluded from redirects.
|
||||
</p>
|
||||
<p>
|
||||
All requests for or initiating from a URL that matches your exception
|
||||
will be excluded from redirects.
|
||||
</p>
|
||||
<p>
|
||||
<b>Note -</b> Supports JavaScript regular expressions, excluding the
|
||||
enclosing forward slashes.
|
||||
</p>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<table class="exceptions option">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 data-localize="__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="
|
||||
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>
|
||||
|
||||
<div id="advanced" class="tabcontent">
|
||||
<section class="settings-block">
|
||||
<table class="option" aria-label="Always proxy videos through Invidious">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 data-localize="__MSG_alwaysProxy__">Always proxy videos through Invidious</h1>
|
||||
</td>
|
||||
<td>
|
||||
<input aria-hidden="true" id="always-proxy" type="checkbox" checked>
|
||||
<label for="always-proxy" class="checkbox-label">
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<table class="option" aria-label="Only redirect embedded video to Invidious">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 data-localize="__MSG_onlyEmbeddedVideo__">Only redirect embedded video to Invidious</h1>
|
||||
</td>
|
||||
<td>
|
||||
<input aria-hidden="true" id="only-embed" type="checkbox" checked>
|
||||
<label for="only-embed" class="checkbox-label">
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<h1 data-localize="__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>
|
||||
</select>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<table class="option" aria-label="Invidious dark mode aways on">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 data-localize="__MSG_invidiousDarkMode__">Invidious dark mode always on</h1>
|
||||
</td>
|
||||
<td>
|
||||
<input aria-hidden="true" id="invidious-dark-mode" type="checkbox" checked>
|
||||
<label for="invidious-dark-mode" class="checkbox-label">
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<h1 data-localize="__MSG_invidiousVolume__">Invidious Volume</h1>
|
||||
<input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1">
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<h1 data-localize="__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-localize="__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-localize="__MSG_invidiousAutoplay__">Invidious automatically play video on load</h1>
|
||||
</td>
|
||||
<td>
|
||||
<input aria-hidden="true" id="invidious-autoplay" type="checkbox" checked>
|
||||
<label for="invidious-autoplay" class="checkbox-label">
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<table class="option" aria-label="Persist Invidious preferences">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 data-localize="__MSG_persistInvidiousPrefs__">Persist Invidious preferences (as cookie)</h1>
|
||||
</td>
|
||||
<td>
|
||||
<input aria-hidden="true" id="persist-invidious-prefs" type="checkbox" checked>
|
||||
<label for="persist-invidious-prefs" class="checkbox-label">
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<table class="option" aria-label="Proactively remove Twitter service worker">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 data-localize="__MSG_removeTwitterSW__">Proactively remove Twitter service worker</h1>
|
||||
</td>
|
||||
<td>
|
||||
<input aria-hidden="true" id="remove-twitter-sw" type="checkbox" checked>
|
||||
<label for="remove-twitter-sw" class="checkbox-label">
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div id="exceptions" class="tabcontent">
|
||||
<section class="settings-block" data-localize="__MSG_exceptionsDescription__">
|
||||
<p>
|
||||
Enter a URL or Regular Expression to be excluded from redirects.
|
||||
</p>
|
||||
<p>
|
||||
All requests for or initiating from a URL that matches your exception
|
||||
will be excluded from redirects.
|
||||
</p>
|
||||
<p>
|
||||
<b>Note -</b> Supports JavaScript regular expressions, excluding
|
||||
the enclosing forward slashes.
|
||||
</p>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<table class="exceptions option">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 data-localize="__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='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>
|
||||
|
||||
<script src="./options.js"></script>
|
||||
<script src="../../assets/javascript/localise.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<script src="./options.js"></script>
|
||||
<script src="../../assets/javascript/localise.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,95 +1,93 @@
|
|||
'use strict';
|
||||
"use strict";
|
||||
|
||||
const nitterInstances = [
|
||||
'https://nitter.net',
|
||||
'https://nitter.snopyta.org',
|
||||
'https://nitter.42l.fr',
|
||||
'https://nitter.nixnet.services',
|
||||
'https://nitter.13ad.de',
|
||||
'https://nitter.pussthecat.org',
|
||||
'https://nitter.mastodont.cat',
|
||||
'https://nitter.dark.fail',
|
||||
'https://nitter.tedomum.net',
|
||||
'https://t.maisputain.ovh',
|
||||
'http://3nzoldnxplag42gqjs23xvghtzf6t6yzssrtytnntc6ppc7xxuoneoad.onion',
|
||||
'http://nitter.l4qlywnpwqsluw65ts7md3khrivpirse744un3x7mlskqauz5pyuzgqd.onion'
|
||||
"https://nitter.net",
|
||||
"https://nitter.snopyta.org",
|
||||
"https://nitter.42l.fr",
|
||||
"https://nitter.nixnet.services",
|
||||
"https://nitter.13ad.de",
|
||||
"https://nitter.pussthecat.org",
|
||||
"https://nitter.mastodont.cat",
|
||||
"https://nitter.dark.fail",
|
||||
"https://nitter.tedomum.net",
|
||||
"https://t.maisputain.ovh",
|
||||
"http://3nzoldnxplag42gqjs23xvghtzf6t6yzssrtytnntc6ppc7xxuoneoad.onion",
|
||||
"http://nitter.l4qlywnpwqsluw65ts7md3khrivpirse744un3x7mlskqauz5pyuzgqd.onion",
|
||||
];
|
||||
const invidiousInstances = [
|
||||
'https://invidio.us',
|
||||
'https://invidious.snopyta.org',
|
||||
'https://invidious.fdn.fr',
|
||||
'https://invidious.13ad.de',
|
||||
'https://watch.nettohikari.com',
|
||||
'https://yewtu.be',
|
||||
'https://yt.maisputain.ovh',
|
||||
'https://invidious.toot.koeln',
|
||||
'https://invidious.ggc-project.de',
|
||||
'http://kgg2m7yk5aybusll.onion',
|
||||
'http://axqzx4s6s54s32yentfqojs3x5i7faxza6xo3ehd4bzzsg2ii4fv2iid.onion',
|
||||
'http://fz253lmuao3strwbfbmx46yu7acac2jz27iwtorgmbqlkurlclmancad.onion',
|
||||
'http://qklhadlycap4cnod.onion',
|
||||
'http://c7hqkpkpemu6e7emz5b4vyz7idjgdvgaaa3dyimmeojqbgpea3xqjoid.onion',
|
||||
'http://mfqczy4mysscub2s.onion'
|
||||
"https://invidio.us",
|
||||
"https://invidious.snopyta.org",
|
||||
"https://invidious.fdn.fr",
|
||||
"https://invidious.13ad.de",
|
||||
"https://watch.nettohikari.com",
|
||||
"https://yewtu.be",
|
||||
"https://yt.maisputain.ovh",
|
||||
"https://invidious.toot.koeln",
|
||||
"https://invidious.ggc-project.de",
|
||||
"http://kgg2m7yk5aybusll.onion",
|
||||
"http://axqzx4s6s54s32yentfqojs3x5i7faxza6xo3ehd4bzzsg2ii4fv2iid.onion",
|
||||
"http://fz253lmuao3strwbfbmx46yu7acac2jz27iwtorgmbqlkurlclmancad.onion",
|
||||
"http://qklhadlycap4cnod.onion",
|
||||
"http://c7hqkpkpemu6e7emz5b4vyz7idjgdvgaaa3dyimmeojqbgpea3xqjoid.onion",
|
||||
"http://mfqczy4mysscub2s.onion",
|
||||
];
|
||||
const bibliogramInstances = [
|
||||
'https://bibliogram.art',
|
||||
'https://bibliogram.snopyta.org',
|
||||
'https://bibliogram.pussthecat.org',
|
||||
'https://bibliogram.nixnet.services',
|
||||
'https://bibliogram.hamster.dance',
|
||||
'https://insta.maisputain.ovh',
|
||||
'https://bibliogram.ggc-project.de'
|
||||
];
|
||||
const osmInstances = [
|
||||
'https://openstreetmap.org'
|
||||
"https://bibliogram.art",
|
||||
"https://bibliogram.snopyta.org",
|
||||
"https://bibliogram.pussthecat.org",
|
||||
"https://bibliogram.nixnet.services",
|
||||
"https://bibliogram.hamster.dance",
|
||||
"https://insta.maisputain.ovh",
|
||||
"https://bibliogram.ggc-project.de",
|
||||
];
|
||||
const osmInstances = ["https://openstreetmap.org"];
|
||||
const autocompletes = [
|
||||
{ id: 'nitter-instance', instances: nitterInstances },
|
||||
{ id: 'invidious-instance', instances: invidiousInstances },
|
||||
{ id: 'bibliogram-instance', instances: bibliogramInstances },
|
||||
{ id: 'osm-instance', instances: osmInstances }
|
||||
{ id: "nitter-instance", instances: nitterInstances },
|
||||
{ id: "invidious-instance", instances: invidiousInstances },
|
||||
{ id: "bibliogram-instance", instances: bibliogramInstances },
|
||||
{ id: "osm-instance", instances: osmInstances },
|
||||
];
|
||||
|
||||
let nitterInstance = document.getElementById('nitter-instance');
|
||||
let invidiousInstance = document.getElementById('invidious-instance');
|
||||
let bibliogramInstance = document.getElementById('bibliogram-instance');
|
||||
let osmInstance = document.getElementById('osm-instance');
|
||||
let disableNitter = document.getElementById('disable-nitter');
|
||||
let disableInvidious = document.getElementById('disable-invidious');
|
||||
let disableBibliogram = document.getElementById('disable-bibliogram');
|
||||
let disableOsm = document.getElementById('disable-osm');
|
||||
let alwaysProxy = document.getElementById('always-proxy');
|
||||
let onlyEmbeddedVideo = document.getElementById('only-embed');
|
||||
let videoQuality = document.getElementById('video-quality');
|
||||
let removeTwitterSW = document.getElementById('remove-twitter-sw');
|
||||
let invidiousDarkMode = document.getElementById('invidious-dark-mode');
|
||||
let persistInvidiousPrefs = document.getElementById('persist-invidious-prefs');
|
||||
let invidiousVolume = document.getElementById('invidious-volume');
|
||||
let invidiousPlayerStyle = document.getElementById('invidious-player-style');
|
||||
let invidiousSubtitles = document.getElementById('invidious-subtitles');
|
||||
let invidiousAutoplay = document.getElementById('invidious-autoplay');
|
||||
let nitterInstance = document.getElementById("nitter-instance");
|
||||
let invidiousInstance = document.getElementById("invidious-instance");
|
||||
let bibliogramInstance = document.getElementById("bibliogram-instance");
|
||||
let osmInstance = document.getElementById("osm-instance");
|
||||
let disableNitter = document.getElementById("disable-nitter");
|
||||
let disableInvidious = document.getElementById("disable-invidious");
|
||||
let disableBibliogram = document.getElementById("disable-bibliogram");
|
||||
let disableOsm = document.getElementById("disable-osm");
|
||||
let alwaysProxy = document.getElementById("always-proxy");
|
||||
let onlyEmbeddedVideo = document.getElementById("only-embed");
|
||||
let videoQuality = document.getElementById("video-quality");
|
||||
let removeTwitterSW = document.getElementById("remove-twitter-sw");
|
||||
let invidiousDarkMode = document.getElementById("invidious-dark-mode");
|
||||
let persistInvidiousPrefs = document.getElementById("persist-invidious-prefs");
|
||||
let invidiousVolume = document.getElementById("invidious-volume");
|
||||
let invidiousPlayerStyle = document.getElementById("invidious-player-style");
|
||||
let invidiousSubtitles = document.getElementById("invidious-subtitles");
|
||||
let invidiousAutoplay = document.getElementById("invidious-autoplay");
|
||||
let theme = document.getElementById("theme");
|
||||
let exceptions;
|
||||
|
||||
window.browser = window.browser || window.chrome;
|
||||
|
||||
function prependExceptionsItem(item, index) {
|
||||
const li = document.createElement('li');
|
||||
const li = document.createElement("li");
|
||||
li.appendChild(document.createTextNode(item.toString()));
|
||||
const button = document.createElement('button');
|
||||
const button = document.createElement("button");
|
||||
li.appendChild(button);
|
||||
document.getElementById('exceptions-items').prepend(li);
|
||||
const svg =
|
||||
`<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'>
|
||||
document.getElementById("exceptions-items").prepend(li);
|
||||
const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'>
|
||||
<line x1='368' y1='368' x2='144' y2='144'
|
||||
style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
|
||||
<line x1='368' y1='144' x2='144' y2='368'
|
||||
style='fill:none;stroke:#FFF;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
|
||||
</svg>`;
|
||||
button.innerHTML = svg;
|
||||
button.addEventListener('click', () => {
|
||||
button.addEventListener("click", () => {
|
||||
exceptions.splice(index, 1);
|
||||
browser.storage.sync.set({
|
||||
exceptions: exceptions
|
||||
exceptions: exceptions,
|
||||
});
|
||||
li.remove();
|
||||
});
|
||||
|
|
@ -97,108 +95,112 @@ function prependExceptionsItem(item, index) {
|
|||
|
||||
browser.storage.sync.get(
|
||||
[
|
||||
'nitterInstance',
|
||||
'invidiousInstance',
|
||||
'bibliogramInstance',
|
||||
'osmInstance',
|
||||
'disableNitter',
|
||||
'disableInvidious',
|
||||
'disableBibliogram',
|
||||
'disableOsm',
|
||||
'alwaysProxy',
|
||||
'onlyEmbeddedVideo',
|
||||
'videoQuality',
|
||||
'removeTwitterSW',
|
||||
'invidiousDarkMode',
|
||||
'persistInvidiousPrefs',
|
||||
'invidiousVolume',
|
||||
'invidiousPlayerStyle',
|
||||
'invidiousSubtitles',
|
||||
'invidiousAutoplay',
|
||||
'exceptions'
|
||||
"nitterInstance",
|
||||
"invidiousInstance",
|
||||
"bibliogramInstance",
|
||||
"osmInstance",
|
||||
"disableNitter",
|
||||
"disableInvidious",
|
||||
"disableBibliogram",
|
||||
"disableOsm",
|
||||
"alwaysProxy",
|
||||
"onlyEmbeddedVideo",
|
||||
"videoQuality",
|
||||
"removeTwitterSW",
|
||||
"invidiousDarkMode",
|
||||
"persistInvidiousPrefs",
|
||||
"invidiousVolume",
|
||||
"invidiousPlayerStyle",
|
||||
"invidiousSubtitles",
|
||||
"invidiousAutoplay",
|
||||
"exceptions",
|
||||
"theme",
|
||||
],
|
||||
result => {
|
||||
nitterInstance.value = result.nitterInstance || '';
|
||||
invidiousInstance.value = result.invidiousInstance || '';
|
||||
bibliogramInstance.value = result.bibliogramInstance || '';
|
||||
osmInstance.value = result.osmInstance || '';
|
||||
(result) => {
|
||||
theme.value = result.theme || "";
|
||||
if (result.theme) document.body.classList.add(result.theme);
|
||||
nitterInstance.value = result.nitterInstance || "";
|
||||
invidiousInstance.value = result.invidiousInstance || "";
|
||||
bibliogramInstance.value = result.bibliogramInstance || "";
|
||||
osmInstance.value = result.osmInstance || "";
|
||||
disableNitter.checked = !result.disableNitter;
|
||||
disableInvidious.checked = !result.disableInvidious;
|
||||
disableBibliogram.checked = !result.disableBibliogram;
|
||||
disableOsm.checked = !result.disableOsm;
|
||||
alwaysProxy.checked = result.alwaysProxy;
|
||||
onlyEmbeddedVideo.checked = result.onlyEmbeddedVideo;
|
||||
videoQuality.value = result.videoQuality || '';
|
||||
videoQuality.value = result.videoQuality || "";
|
||||
removeTwitterSW.checked = !result.removeTwitterSW;
|
||||
invidiousDarkMode.checked = result.invidiousDarkMode;
|
||||
persistInvidiousPrefs.checked = result.persistInvidiousPrefs;
|
||||
exceptions = result.exceptions || [];
|
||||
exceptions.forEach(prependExceptionsItem);
|
||||
invidiousVolume.value = result.invidiousVolume;
|
||||
invidiousPlayerStyle.value = result.invidiousPlayerStyle;
|
||||
invidiousSubtitles.value = result.invidiousSubtitles || '';
|
||||
invidiousPlayerStyle.value = result.invidiousPlayerStyle || "";
|
||||
invidiousSubtitles.value = result.invidiousSubtitles || "";
|
||||
invidiousAutoplay.checked = !result.invidiousAutoplay;
|
||||
}
|
||||
);
|
||||
|
||||
function openTab(tab, event) {
|
||||
let i, tabcontent, tablinks;
|
||||
tabcontent = document.getElementsByClassName('tabcontent');
|
||||
tabcontent = document.getElementsByClassName("tabcontent");
|
||||
for (i = 0; i < tabcontent.length; i++) {
|
||||
tabcontent[i].style.display = 'none';
|
||||
tabcontent[i].style.display = "none";
|
||||
}
|
||||
tablinks = document.getElementsByClassName('tablinks');
|
||||
tablinks = document.getElementsByClassName("tablinks");
|
||||
for (i = 0; i < tablinks.length; i++) {
|
||||
tablinks[i].className = tablinks[i].className.replace(' active', '');
|
||||
tablinks[i].className = tablinks[i].className.replace(" active", "");
|
||||
}
|
||||
document.getElementById(tab).style.display = 'block';
|
||||
event.currentTarget.className += ' 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")
|
||||
.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();
|
||||
document.getElementById("general-tab").click();
|
||||
|
||||
function addToExceptions() {
|
||||
const input = document.getElementById('new-exceptions-item');
|
||||
const input = document.getElementById("new-exceptions-item");
|
||||
const type = document.querySelector('input[name="type"]:checked').value;
|
||||
if (input.value) {
|
||||
try {
|
||||
let value = input.value;
|
||||
new RegExp(input.value);
|
||||
if (type === 'URL') {
|
||||
value = value.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
|
||||
if (type === "URL") {
|
||||
value = value.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
|
||||
}
|
||||
exceptions.push(value);
|
||||
browser.storage.sync.set({
|
||||
exceptions: exceptions
|
||||
exceptions: exceptions,
|
||||
});
|
||||
prependExceptionsItem(value, exceptions.indexOf(value));
|
||||
input.value = '';
|
||||
input.value = "";
|
||||
} catch (error) {
|
||||
input.setCustomValidity('Invalid RegExp');
|
||||
input.setCustomValidity("Invalid RegExp");
|
||||
}
|
||||
} else {
|
||||
input.setCustomValidity('Invalid RegExp');
|
||||
input.setCustomValidity("Invalid RegExp");
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('add-to-exceptions').addEventListener(
|
||||
'click', addToExceptions
|
||||
);
|
||||
document
|
||||
.getElementById("add-to-exceptions")
|
||||
.addEventListener("click", addToExceptions);
|
||||
|
||||
function debounce(func, wait, immediate) {
|
||||
let timeout;
|
||||
return () => {
|
||||
let context = this, args = arguments;
|
||||
let context = this,
|
||||
args = arguments;
|
||||
let later = () => {
|
||||
timeout = null;
|
||||
if (!immediate) func.apply(context, args);
|
||||
|
|
@ -208,132 +210,152 @@ function debounce(func, wait, immediate) {
|
|||
timeout = setTimeout(later, wait);
|
||||
if (callNow) func.apply(context, args);
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
function parseURL(urlString) {
|
||||
if (urlString) {
|
||||
try {
|
||||
const url = new URL(urlString);
|
||||
if (url.username && url.password) {
|
||||
return `${url.protocol}//${url.username}:${url.password}@${url.host}`
|
||||
return `${url.protocol}//${url.username}:${url.password}@${url.host}`;
|
||||
} else {
|
||||
return url.origin;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
return '';
|
||||
return "";
|
||||
}
|
||||
} else {
|
||||
return '';
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
||||
let nitterInstanceChange = debounce(() => {
|
||||
if (nitterInstance.checkValidity()) {
|
||||
browser.storage.sync.set({
|
||||
nitterInstance: parseURL(nitterInstance.value)
|
||||
nitterInstance: parseURL(nitterInstance.value),
|
||||
});
|
||||
}
|
||||
}, 500);
|
||||
nitterInstance.addEventListener('input', nitterInstanceChange);
|
||||
nitterInstance.addEventListener("input", nitterInstanceChange);
|
||||
|
||||
let invidiousInstanceChange = debounce(() => {
|
||||
if (invidiousInstance.checkValidity()) {
|
||||
browser.storage.sync.set({
|
||||
invidiousInstance: parseURL(invidiousInstance.value)
|
||||
invidiousInstance: parseURL(invidiousInstance.value),
|
||||
});
|
||||
}
|
||||
}, 500);
|
||||
invidiousInstance.addEventListener('input', invidiousInstanceChange);
|
||||
invidiousInstance.addEventListener("input", invidiousInstanceChange);
|
||||
|
||||
let bibliogramInstanceChange = debounce(() => {
|
||||
if (bibliogramInstance.checkValidity()) {
|
||||
browser.storage.sync.set({
|
||||
bibliogramInstance: parseURL(bibliogramInstance.value)
|
||||
bibliogramInstance: parseURL(bibliogramInstance.value),
|
||||
});
|
||||
}
|
||||
}, 500);
|
||||
bibliogramInstance.addEventListener('input', bibliogramInstanceChange);
|
||||
bibliogramInstance.addEventListener("input", bibliogramInstanceChange);
|
||||
|
||||
let osmInstanceChange = debounce(() => {
|
||||
if (osmInstance.checkValidity()) {
|
||||
browser.storage.sync.set({
|
||||
osmInstance: parseURL(osmInstance.value)
|
||||
osmInstance: parseURL(osmInstance.value),
|
||||
});
|
||||
}
|
||||
}, 500);
|
||||
osmInstance.addEventListener('input', osmInstanceChange);
|
||||
osmInstance.addEventListener("input", osmInstanceChange);
|
||||
|
||||
disableNitter.addEventListener('change', event => {
|
||||
disableNitter.addEventListener("change", (event) => {
|
||||
browser.storage.sync.set({ disableNitter: !event.target.checked });
|
||||
});
|
||||
|
||||
disableInvidious.addEventListener('change', event => {
|
||||
disableInvidious.addEventListener("change", (event) => {
|
||||
browser.storage.sync.set({ disableInvidious: !event.target.checked });
|
||||
});
|
||||
|
||||
disableBibliogram.addEventListener('change', event => {
|
||||
disableBibliogram.addEventListener("change", (event) => {
|
||||
browser.storage.sync.set({ disableBibliogram: !event.target.checked });
|
||||
});
|
||||
|
||||
disableOsm.addEventListener('change', event => {
|
||||
disableOsm.addEventListener("change", (event) => {
|
||||
browser.storage.sync.set({ disableOsm: !event.target.checked });
|
||||
});
|
||||
|
||||
alwaysProxy.addEventListener('change', event => {
|
||||
alwaysProxy.addEventListener("change", (event) => {
|
||||
browser.storage.sync.set({ alwaysProxy: event.target.checked });
|
||||
});
|
||||
|
||||
onlyEmbeddedVideo.addEventListener('change', event => {
|
||||
onlyEmbeddedVideo.addEventListener("change", (event) => {
|
||||
browser.storage.sync.set({ onlyEmbeddedVideo: event.target.checked });
|
||||
});
|
||||
|
||||
videoQuality.addEventListener('change', event => {
|
||||
videoQuality.addEventListener("change", (event) => {
|
||||
browser.storage.sync.set({
|
||||
videoQuality: event.target.options[videoQuality.selectedIndex].value
|
||||
videoQuality: event.target.options[videoQuality.selectedIndex].value,
|
||||
});
|
||||
});
|
||||
|
||||
removeTwitterSW.addEventListener('change', event => {
|
||||
removeTwitterSW.addEventListener("change", (event) => {
|
||||
browser.storage.sync.set({ removeTwitterSW: !event.target.checked });
|
||||
});
|
||||
|
||||
invidiousDarkMode.addEventListener('change', event => {
|
||||
invidiousDarkMode.addEventListener("change", (event) => {
|
||||
browser.storage.sync.set({ invidiousDarkMode: event.target.checked });
|
||||
});
|
||||
|
||||
persistInvidiousPrefs.addEventListener('change', event => {
|
||||
persistInvidiousPrefs.addEventListener("change", (event) => {
|
||||
browser.storage.sync.set({ persistInvidiousPrefs: event.target.checked });
|
||||
});
|
||||
|
||||
let invidiousVolumeChange = debounce(() => {
|
||||
if (invidiousInstance.checkValidity()) {
|
||||
browser.storage.sync.set({
|
||||
invidiousVolume: invidiousVolume.value
|
||||
invidiousVolume: invidiousVolume.value,
|
||||
});
|
||||
}
|
||||
}, 500);
|
||||
invidiousVolume.addEventListener('input', invidiousVolumeChange);
|
||||
invidiousVolume.addEventListener("input", invidiousVolumeChange);
|
||||
|
||||
invidiousPlayerStyle.addEventListener('change', event => {
|
||||
invidiousPlayerStyle.addEventListener("change", (event) => {
|
||||
browser.storage.sync.set({
|
||||
invidiousPlayerStyle: event.target.options[invidiousPlayerStyle.selectedIndex].value
|
||||
invidiousPlayerStyle:
|
||||
event.target.options[invidiousPlayerStyle.selectedIndex].value,
|
||||
});
|
||||
});
|
||||
|
||||
let invidiousSubtitlesChange = debounce(() => {
|
||||
if (invidiousInstance.checkValidity()) {
|
||||
browser.storage.sync.set({
|
||||
invidiousSubtitles: invidiousSubtitles.value
|
||||
invidiousSubtitles: invidiousSubtitles.value,
|
||||
});
|
||||
}
|
||||
}, 500);
|
||||
invidiousSubtitles.addEventListener('input', invidiousSubtitlesChange);
|
||||
invidiousSubtitles.addEventListener("input", invidiousSubtitlesChange);
|
||||
|
||||
invidiousAutoplay.addEventListener('change', event => {
|
||||
invidiousAutoplay.addEventListener("change", (event) => {
|
||||
browser.storage.sync.set({ invidiousAutoplay: !event.target.checked });
|
||||
});
|
||||
|
||||
theme.addEventListener("change", (event) => {
|
||||
const value = event.target.options[theme.selectedIndex].value;
|
||||
switch (value) {
|
||||
case "dark-theme":
|
||||
document.body.classList.add("dark-theme");
|
||||
document.body.classList.remove("light-theme");
|
||||
break;
|
||||
case "light-theme":
|
||||
document.body.classList.add("light-theme");
|
||||
document.body.classList.remove("dark-theme");
|
||||
break;
|
||||
default:
|
||||
document.body.classList.remove("light-theme");
|
||||
document.body.classList.remove("dark-theme");
|
||||
}
|
||||
browser.storage.sync.set({
|
||||
theme: value,
|
||||
});
|
||||
});
|
||||
|
||||
function autocomplete(input, list) {
|
||||
let currentFocus;
|
||||
|
|
@ -342,7 +364,9 @@ function autocomplete(input, list) {
|
|||
});
|
||||
input.addEventListener("input", (e) => {
|
||||
const val = e.target.value;
|
||||
if (!val) { return false; }
|
||||
if (!val) {
|
||||
return false;
|
||||
}
|
||||
currentFocus = -1;
|
||||
showOptions(e);
|
||||
});
|
||||
|
|
@ -363,7 +387,10 @@ function autocomplete(input, list) {
|
|||
}
|
||||
});
|
||||
function showOptions(e) {
|
||||
let a, b, i, val = e.target.value;
|
||||
let a,
|
||||
b,
|
||||
i,
|
||||
val = e.target.value;
|
||||
closeAllLists();
|
||||
a = document.createElement("div");
|
||||
a.setAttribute("id", e.target.id + "autocomplete-list");
|
||||
|
|
@ -377,7 +404,7 @@ function autocomplete(input, list) {
|
|||
b.innerHTML += "<input type='hidden' value='" + list[i] + "'>";
|
||||
b.addEventListener("click", function (e) {
|
||||
input.value = e.target.getElementsByTagName("input")[0].value;
|
||||
input.dispatchEvent(new Event('input'));
|
||||
input.dispatchEvent(new Event("input"));
|
||||
closeAllLists();
|
||||
});
|
||||
a.appendChild(b);
|
||||
|
|
@ -388,7 +415,7 @@ function autocomplete(input, list) {
|
|||
if (!x) return false;
|
||||
removeActive(x);
|
||||
if (currentFocus >= x.length) currentFocus = 0;
|
||||
if (currentFocus < 0) currentFocus = (x.length - 1);
|
||||
if (currentFocus < 0) currentFocus = x.length - 1;
|
||||
x[currentFocus].classList.add("autocomplete-active");
|
||||
}
|
||||
function removeActive(x) {
|
||||
|
|
@ -405,7 +432,7 @@ function autocomplete(input, list) {
|
|||
}
|
||||
}
|
||||
document.addEventListener("click", (e) => {
|
||||
if (!autocompletes.find(element => element.id === e.target.id)) {
|
||||
if (!autocompletes.find((element) => element.id === e.target.id)) {
|
||||
closeAllLists(e.target);
|
||||
}
|
||||
});
|
||||
|
|
@ -413,4 +440,4 @@ function autocomplete(input, list) {
|
|||
|
||||
autocompletes.forEach((value) => {
|
||||
autocomplete(document.getElementById(value.id), value.instances);
|
||||
})
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,111 +1,168 @@
|
|||
<!doctype html>
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title></title>
|
||||
<link href="../styles.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title></title>
|
||||
<link href="../styles.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="popup">
|
||||
<header class="popup">
|
||||
<div class="logo-container">
|
||||
<img
|
||||
src="../../assets/images/icon128.png"
|
||||
alt="Privacy Redirect logo"
|
||||
/>
|
||||
<h1>
|
||||
<span data-localize="__MSG_privacy__" class="privacy">Privacy</span
|
||||
><br /><span data-localize="__MSG_redirect__">Redirect</span>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="version">
|
||||
<span>Version: <span id="version"></span></span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<body class="popup">
|
||||
<header>
|
||||
<div class="logo-container">
|
||||
<img src="../../assets/images/icon128.png" alt="Privacy Redirect logo">
|
||||
<h1><span data-localize="__MSG_privacy__" class="privacy">Privacy</span><br><span
|
||||
data-localize="__MSG_redirect__">Redirect</span></h1>
|
||||
</div>
|
||||
<div class="version">
|
||||
<span>Version: <span id="version"></span></span>
|
||||
</div>
|
||||
</header>
|
||||
<section class="settings-block">
|
||||
<table class="option" aria-label="Toggle Nitter redirects">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 data-localize="__MSG_disableNitter__">Nitter Redirects</h1>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
aria-hidden="true"
|
||||
id="disable-nitter"
|
||||
type="checkbox"
|
||||
checked
|
||||
/>
|
||||
<label for="disable-nitter" class="checkbox-label"></label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section class="settings-block">
|
||||
<table class="option" aria-label="Toggle Nitter redirects">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 data-localize="__MSG_disableNitter__">Nitter Redirects</h1>
|
||||
</td>
|
||||
<td>
|
||||
<input aria-hidden="true" id="disable-nitter" type="checkbox" checked>
|
||||
<label for="disable-nitter" class="checkbox-label"></label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<table class="option" aria-label="Toggle Invidious redirects">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 data-localize="__MSG_disableInvidious__">
|
||||
Invidious Redirects
|
||||
</h1>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
aria-hidden="true"
|
||||
id="disable-invidious"
|
||||
type="checkbox"
|
||||
checked
|
||||
/>
|
||||
<label for="disable-invidious" class="checkbox-label"> </label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section class="settings-block">
|
||||
<table class="option" aria-label="Toggle Invidious redirects">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 data-localize="__MSG_disableInvidious__">Invidious Redirects</h1>
|
||||
</td>
|
||||
<td>
|
||||
<input aria-hidden="true" id="disable-invidious" type="checkbox" checked>
|
||||
<label for="disable-invidious" class="checkbox-label">
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<table class="option" aria-label="Toggle Bibliogram redirects">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 data-localize="__MSG_disableBibliogram__">
|
||||
Bibliogram Redirects
|
||||
</h1>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
aria-hidden="true"
|
||||
id="disable-bibliogram"
|
||||
type="checkbox"
|
||||
checked
|
||||
/>
|
||||
<label for="disable-bibliogram" class="checkbox-label"> </label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section class="settings-block">
|
||||
<table class="option" aria-label="Toggle Bibliogram redirects">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 data-localize="__MSG_disableBibliogram__">Bibliogram Redirects</h1>
|
||||
</td>
|
||||
<td>
|
||||
<input aria-hidden="true" id="disable-bibliogram" type="checkbox" checked>
|
||||
<label for="disable-bibliogram" class="checkbox-label">
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section class="settings-block">
|
||||
<table class="option" aria-label="Toggle OpenStreetMap redirects">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 data-localize="__MSG_disableOsm__">
|
||||
OpenStreetMap Redirects
|
||||
</h1>
|
||||
</td>
|
||||
<td>
|
||||
<input
|
||||
aria-hidden="true"
|
||||
id="disable-osm"
|
||||
type="checkbox"
|
||||
checked
|
||||
/>
|
||||
<label for="disable-osm" class="checkbox-label"> </label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section class="settings-block">
|
||||
<table class="option" aria-label="Toggle OpenStreetMap redirects">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<h1 data-localize="__MSG_disableOsm__">OpenStreetMap Redirects</h1>
|
||||
</td>
|
||||
<td>
|
||||
<input aria-hidden="true" id="disable-osm" type="checkbox" checked>
|
||||
<label for="disable-osm" class="checkbox-label">
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
<section class="settings-block"></section>
|
||||
|
||||
<section class="settings-block">
|
||||
</section>
|
||||
<footer>
|
||||
<a class="button" id="more-options">
|
||||
<span data-localize="__MSG_moreOptions__">More Options </span>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="512"
|
||||
height="512"
|
||||
viewBox="0 0 512 512"
|
||||
>
|
||||
<path
|
||||
d="M384,224V408a40,40,0,0,1-40,40H104a40,40,0,0,1-40-40V168a40,40,0,0,1,40-40H271.48"
|
||||
style="
|
||||
fill: none;
|
||||
stroke: inherit;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
stroke-width: 32px;
|
||||
"
|
||||
/>
|
||||
<polyline
|
||||
points="336 64 448 64 448 176"
|
||||
style="
|
||||
fill: none;
|
||||
stroke: inherit;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
stroke-width: 32px;
|
||||
"
|
||||
/>
|
||||
<line
|
||||
x1="224"
|
||||
y1="288"
|
||||
x2="440"
|
||||
y2="72"
|
||||
style="
|
||||
fill: none;
|
||||
stroke: inherit;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
stroke-width: 32px;
|
||||
"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<footer>
|
||||
<a class="button" id="more-options">
|
||||
<span data-localize="__MSG_moreOptions__">More Options </span>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'>
|
||||
<path d='M384,224V408a40,40,0,0,1-40,40H104a40,40,0,0,1-40-40V168a40,40,0,0,1,40-40H271.48'
|
||||
style='fill:none;stroke:inherit;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
|
||||
<polyline points='336 64 448 64 448 176'
|
||||
style='fill:none;stroke:inherit;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
|
||||
<line x1='224' y1='288' x2='440' y2='72'
|
||||
style='fill:none;stroke:inherit;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px' />
|
||||
</svg>
|
||||
</a>
|
||||
</footer>
|
||||
|
||||
<script src="./popup.js"></script>
|
||||
<script src="../../assets/javascript/localise.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<script src="./popup.js"></script>
|
||||
<script src="../../assets/javascript/localise.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,23 @@
|
|||
'use strict';
|
||||
"use strict";
|
||||
|
||||
let disableNitter = document.querySelector('#disable-nitter');
|
||||
let disableInvidious = document.querySelector('#disable-invidious');
|
||||
let disableBibliogram = document.querySelector('#disable-bibliogram');
|
||||
let disableOsm = document.querySelector('#disable-osm');
|
||||
let version = document.querySelector('#version');
|
||||
let disableNitter = document.querySelector("#disable-nitter");
|
||||
let disableInvidious = document.querySelector("#disable-invidious");
|
||||
let disableBibliogram = document.querySelector("#disable-bibliogram");
|
||||
let disableOsm = document.querySelector("#disable-osm");
|
||||
let version = document.querySelector("#version");
|
||||
|
||||
window.browser = window.browser || window.chrome;
|
||||
|
||||
browser.storage.sync.get(
|
||||
[
|
||||
'disableNitter',
|
||||
'disableInvidious',
|
||||
'disableBibliogram',
|
||||
'disableOsm'
|
||||
"disableNitter",
|
||||
"disableInvidious",
|
||||
"disableBibliogram",
|
||||
"disableOsm",
|
||||
"theme",
|
||||
],
|
||||
result => {
|
||||
(result) => {
|
||||
document.body.classList.add(result.theme);
|
||||
disableNitter.checked = !result.disableNitter;
|
||||
disableInvidious.checked = !result.disableInvidious;
|
||||
disableBibliogram.checked = !result.disableBibliogram;
|
||||
|
|
@ -25,22 +27,22 @@ browser.storage.sync.get(
|
|||
|
||||
version.textContent = browser.runtime.getManifest().version;
|
||||
|
||||
disableNitter.addEventListener('change', event => {
|
||||
disableNitter.addEventListener("change", (event) => {
|
||||
browser.storage.sync.set({ disableNitter: !event.target.checked });
|
||||
});
|
||||
|
||||
disableInvidious.addEventListener('change', event => {
|
||||
disableInvidious.addEventListener("change", (event) => {
|
||||
browser.storage.sync.set({ disableInvidious: !event.target.checked });
|
||||
});
|
||||
|
||||
disableBibliogram.addEventListener('change', event => {
|
||||
disableBibliogram.addEventListener("change", (event) => {
|
||||
browser.storage.sync.set({ disableBibliogram: !event.target.checked });
|
||||
});
|
||||
|
||||
disableOsm.addEventListener('change', event => {
|
||||
disableOsm.addEventListener("change", (event) => {
|
||||
browser.storage.sync.set({ disableOsm: !event.target.checked });
|
||||
});
|
||||
|
||||
document.querySelector('#more-options').addEventListener('click', () => {
|
||||
document.querySelector("#more-options").addEventListener("click", () => {
|
||||
browser.runtime.openOptionsPage();
|
||||
});
|
||||
|
|
|
|||
182
pages/styles.css
182
pages/styles.css
|
|
@ -1,31 +1,41 @@
|
|||
:root {
|
||||
--text-main: #fff;
|
||||
--text-secondary: #000;
|
||||
--dark: #3c4043;
|
||||
--darker: #292a2d;
|
||||
--light: #e3e7ea;
|
||||
--lighter: #fff;
|
||||
body {
|
||||
--text: #fff;
|
||||
--bg-main: #3c4043;
|
||||
--bg-secondary: #292a2d;
|
||||
--active: #ff5b56;
|
||||
--space: 5px;
|
||||
--danger: #f04141;
|
||||
--danger-light: #f9d0d5;
|
||||
--dark-grey: #767676;
|
||||
--light-grey: #c3c3c3;
|
||||
}
|
||||
|
||||
body.light-theme {
|
||||
--text: #000;
|
||||
--bg-main: #e3e7ea;
|
||||
--bg-secondary: #fff;
|
||||
}
|
||||
|
||||
.light-theme.popup,
|
||||
.light-theme .popup {
|
||||
background-color: var(--bg-secondary);
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
max-width: 400px;
|
||||
margin: auto;
|
||||
min-height: 572px;
|
||||
font-family: Sans-Serif;
|
||||
background-color: var(--darker);
|
||||
background-color: var(--bg-secondary);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.popup {
|
||||
width: 300px;
|
||||
min-height: auto;
|
||||
overflow: hidden;
|
||||
background-color: var(--dark);
|
||||
background-color: var(--bg-main);
|
||||
}
|
||||
|
||||
input {
|
||||
|
|
@ -35,8 +45,8 @@ input {
|
|||
}
|
||||
|
||||
header {
|
||||
background-color: var(--lighter);
|
||||
color: var(--text-secondary);
|
||||
background-color: var(--bg-main);
|
||||
color: var(--text);
|
||||
display: flex;
|
||||
padding: var(--space);
|
||||
}
|
||||
|
|
@ -95,7 +105,7 @@ h3 {
|
|||
|
||||
h1,
|
||||
h2 {
|
||||
color: var(--text-main);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
footer {
|
||||
|
|
@ -112,6 +122,9 @@ select {
|
|||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: var(--space);
|
||||
background-color: var(--bg-main);
|
||||
border-style: inset;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
input[type="url"] {
|
||||
|
|
@ -136,7 +149,7 @@ input[type="radio"]:checked + label {
|
|||
margin-left: 5px;
|
||||
background: grey;
|
||||
border-radius: 25px;
|
||||
color: var(--text-main);
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
float: right;
|
||||
|
|
@ -148,7 +161,7 @@ input[type="radio"]:checked + label {
|
|||
}
|
||||
|
||||
.checkbox-label:after {
|
||||
background: var(--text-main);
|
||||
background: white;
|
||||
border-radius: 90px;
|
||||
content: "";
|
||||
height: 20px;
|
||||
|
|
@ -179,8 +192,8 @@ input:checked + label:after {
|
|||
|
||||
.button {
|
||||
border: var(--active) solid 1px;
|
||||
color: var(--text-main);
|
||||
stroke: var(--text-main);
|
||||
color: var(--text);
|
||||
stroke: var(--text);
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
|
|
@ -199,13 +212,13 @@ input:checked + label:after {
|
|||
|
||||
.button:hover {
|
||||
background-color: var(--active);
|
||||
color: var(--text-main);
|
||||
stroke: var(--text-main);
|
||||
color: var(--text);
|
||||
stroke: var(--text);
|
||||
}
|
||||
|
||||
.button:active {
|
||||
background-color: var(--active);
|
||||
box-shadow: 0 var(--space) var(--dark);
|
||||
box-shadow: 0 var(--space) var(--bg-main);
|
||||
transform: translateY(4px);
|
||||
}
|
||||
|
||||
|
|
@ -221,13 +234,13 @@ input:invalid {
|
|||
|
||||
.tab {
|
||||
overflow: hidden;
|
||||
background-color: var(--darker);
|
||||
background-color: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.tab button {
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
color: var(--text-main);
|
||||
color: var(--text);
|
||||
background-color: inherit;
|
||||
float: left;
|
||||
border: none;
|
||||
|
|
@ -235,7 +248,7 @@ input:invalid {
|
|||
cursor: pointer;
|
||||
padding: 14px 16px;
|
||||
transition: 0.3s;
|
||||
border: solid 1px var(--dark);
|
||||
border: solid 1px var(--bg-main);
|
||||
width: 33.333%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
@ -245,13 +258,13 @@ input:invalid {
|
|||
}
|
||||
|
||||
.tab button.active {
|
||||
background-color: var(--dark);
|
||||
background-color: var(--bg-main);
|
||||
}
|
||||
|
||||
.tabcontent {
|
||||
padding-top: 10px;
|
||||
display: none;
|
||||
background-color: var(--dark);
|
||||
background-color: var(--bg-main);
|
||||
min-height: 510px;
|
||||
}
|
||||
|
||||
|
|
@ -268,7 +281,7 @@ div.exceptions > input {
|
|||
float: right;
|
||||
border: var(--active) solid 1px;
|
||||
background-color: var(--active);
|
||||
color: var(--text-main);
|
||||
color: var(--text);
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
|
|
@ -284,12 +297,12 @@ div.exceptions > input {
|
|||
ul {
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
color: var(--text-main);
|
||||
color: var(--text);
|
||||
margin: 20px 20px 0 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
border-bottom: solid 0.5px var(--darker);
|
||||
border-bottom: solid 0.5px var(--bg-secondary);
|
||||
padding: 20px 0px 20px 20px;
|
||||
}
|
||||
|
||||
|
|
@ -298,7 +311,7 @@ li {
|
|||
margin-right: -5px;
|
||||
border: var(--active) solid 1px;
|
||||
background-color: var(--active);
|
||||
color: var(--text-main);
|
||||
color: var(--text);
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
|
|
@ -322,22 +335,25 @@ li {
|
|||
|
||||
.autocomplete-items {
|
||||
position: absolute;
|
||||
border: 1px solid var(--dark);
|
||||
border: 1px solid var(--bg-main);
|
||||
border-bottom: none;
|
||||
border-top: none;
|
||||
z-index: 99;
|
||||
top: 85%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: auto;
|
||||
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(--darker);
|
||||
border-bottom: 1px solid var(--dark);
|
||||
background-color: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--bg-main);
|
||||
}
|
||||
|
||||
.autocomplete-items div:hover {
|
||||
|
|
@ -346,7 +362,7 @@ li {
|
|||
|
||||
.autocomplete-active {
|
||||
background-color: var(--active);
|
||||
color: var(--lighter);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.option {
|
||||
|
|
@ -371,15 +387,15 @@ input[type="range"]::-webkit-slider-runnable-track {
|
|||
width: 100%;
|
||||
height: 8.4px;
|
||||
cursor: pointer;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
background: var(--light);
|
||||
border-color: var(--dark-grey), var(--light-grey);
|
||||
background: var(--bg-main);
|
||||
border-radius: 1.3px;
|
||||
border: 0.2px solid #010101;
|
||||
border: 0.2px inset var(--dark-grey);
|
||||
}
|
||||
|
||||
input[type="range"]::-webkit-slider-thumb {
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
border: 1px solid #000000;
|
||||
border-color: var(--active);
|
||||
border: 1px solid var(--dark-grey);
|
||||
height: 36px;
|
||||
width: 16px;
|
||||
border-radius: 3px;
|
||||
|
|
@ -390,22 +406,22 @@ input[type="range"]::-webkit-slider-thumb {
|
|||
}
|
||||
|
||||
input[type="range"]:focus::-webkit-slider-runnable-track {
|
||||
background: var(--light);
|
||||
background: var(--bg-main);
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-track {
|
||||
width: 100%;
|
||||
height: 8.4px;
|
||||
cursor: pointer;
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
background: var(--light);
|
||||
border-color: var(--dark-grey), var(--light-grey);
|
||||
background: var(--bg-main);
|
||||
border-radius: 1.3px;
|
||||
border: 0.2px solid #010101;
|
||||
border: 0.2px inset var(--dark-grey);
|
||||
}
|
||||
|
||||
input[type="range"]::-moz-range-thumb {
|
||||
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
|
||||
border: 1px solid #000000;
|
||||
border-color: var(--active);
|
||||
border: 1px solid var(--dark-grey);
|
||||
height: 36px;
|
||||
width: 16px;
|
||||
border-radius: 3px;
|
||||
|
|
@ -413,73 +429,31 @@ input[type="range"]::-moz-range-thumb {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body.popup,
|
||||
header,
|
||||
h1,
|
||||
input,
|
||||
select,
|
||||
div.tabcontent,
|
||||
button.tablinks.active {
|
||||
background-color: var(--dark);
|
||||
color: var(--text-main);
|
||||
}
|
||||
::placeholder {
|
||||
color: var(--text);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--darker);
|
||||
}
|
||||
|
||||
a.button {
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: var(--text-main);
|
||||
opacity: 0.7;
|
||||
}
|
||||
*:focus {
|
||||
outline: var(--active) solid 2px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
body.popup,
|
||||
header,
|
||||
h1,
|
||||
input,
|
||||
select,
|
||||
div.tabcontent,
|
||||
button.tablinks.active,
|
||||
ul {
|
||||
background-color: var(--lighter);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--light);
|
||||
--text: #000;
|
||||
--text-secondary: #fff;
|
||||
--bg-main: #e3e7ea;
|
||||
--bg-secondary: #fff;
|
||||
}
|
||||
|
||||
a.button {
|
||||
color: var(--text-secondary);
|
||||
stroke: var(--text-secondary);
|
||||
body.dark-theme {
|
||||
--text: #fff;
|
||||
--text-secondary: #000;
|
||||
--bg-main: #3c4043;
|
||||
--bg-secondary: #292a2d;
|
||||
}
|
||||
|
||||
button.tablinks {
|
||||
background-color: var(--light);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.tab button {
|
||||
border-bottom: solid 1px var(--light);
|
||||
}
|
||||
|
||||
button.tablinks.active {
|
||||
border-bottom: solid 1px var(--lighter);
|
||||
}
|
||||
|
||||
.autocomplete-items div {
|
||||
background-color: var(--light);
|
||||
.popup {
|
||||
background-color: var(--bg-secondary);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue