diff options
Diffstat (limited to 'src/assets')
34 files changed, 860 insertions, 0 deletions
diff --git a/src/assets/images/Screen Shot Chrome 1.png b/src/assets/images/Screen Shot Chrome 1.png new file mode 100644 index 00000000..1628b509 --- /dev/null +++ b/src/assets/images/Screen Shot Chrome 1.png Binary files differdiff --git a/src/assets/images/Screen Shot Chrome 2.png b/src/assets/images/Screen Shot Chrome 2.png new file mode 100644 index 00000000..61eed643 --- /dev/null +++ b/src/assets/images/Screen Shot Chrome 2.png Binary files differdiff --git a/src/assets/images/Screen Shot Chrome 3.png b/src/assets/images/Screen Shot Chrome 3.png new file mode 100644 index 00000000..42c92014 --- /dev/null +++ b/src/assets/images/Screen Shot Chrome 3.png Binary files differdiff --git a/src/assets/images/Screen Shot Chrome 4.png b/src/assets/images/Screen Shot Chrome 4.png new file mode 100644 index 00000000..8bae0410 --- /dev/null +++ b/src/assets/images/Screen Shot Chrome 4.png Binary files differdiff --git a/src/assets/images/Screen Shot Chrome 5.png b/src/assets/images/Screen Shot Chrome 5.png new file mode 100644 index 00000000..d3f54841 --- /dev/null +++ b/src/assets/images/Screen Shot Chrome 5.png Binary files differdiff --git a/src/assets/images/Screen Shot FF 1.png b/src/assets/images/Screen Shot FF 1.png new file mode 100644 index 00000000..7ae2e614 --- /dev/null +++ b/src/assets/images/Screen Shot FF 1.png Binary files differdiff --git a/src/assets/images/Screen Shot FF 2.png b/src/assets/images/Screen Shot FF 2.png new file mode 100644 index 00000000..a995478a --- /dev/null +++ b/src/assets/images/Screen Shot FF 2.png Binary files differdiff --git a/src/assets/images/Screen Shot FF 3.png b/src/assets/images/Screen Shot FF 3.png new file mode 100644 index 00000000..fc3232b6 --- /dev/null +++ b/src/assets/images/Screen Shot FF 3.png Binary files differdiff --git a/src/assets/images/Screen Shot FF 4.png b/src/assets/images/Screen Shot FF 4.png new file mode 100644 index 00000000..f230fed2 --- /dev/null +++ b/src/assets/images/Screen Shot FF 4.png Binary files differdiff --git a/src/assets/images/Screen Shot FF 5.png b/src/assets/images/Screen Shot FF 5.png new file mode 100644 index 00000000..420838d9 --- /dev/null +++ b/src/assets/images/Screen Shot FF 5.png Binary files differdiff --git a/src/assets/images/badge-amo.png b/src/assets/images/badge-amo.png new file mode 100644 index 00000000..9dbb7e46 --- /dev/null +++ b/src/assets/images/badge-amo.png Binary files differdiff --git a/src/assets/images/badge-chrome.png b/src/assets/images/badge-chrome.png new file mode 100644 index 00000000..afd2c6b2 --- /dev/null +++ b/src/assets/images/badge-chrome.png Binary files differdiff --git a/src/assets/images/badge-ms.png b/src/assets/images/badge-ms.png new file mode 100644 index 00000000..1b1dcbc9 --- /dev/null +++ b/src/assets/images/badge-ms.png Binary files differdiff --git a/src/assets/images/buy-me-a-coffee.png b/src/assets/images/buy-me-a-coffee.png new file mode 100644 index 00000000..8d9ea893 --- /dev/null +++ b/src/assets/images/buy-me-a-coffee.png Binary files differdiff --git a/src/assets/images/chevron-down.svg b/src/assets/images/chevron-down.svg new file mode 100644 index 00000000..7679f267 --- /dev/null +++ b/src/assets/images/chevron-down.svg @@ -0,0 +1,3 @@ +<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512'> + <polyline points='112 184 256 328 400 184' style='fill:none;stroke:#FF5B56;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px'/> +</svg> \ No newline at end of file diff --git a/src/assets/images/icon128.png b/src/assets/images/icon128.png new file mode 100644 index 00000000..cd16befd --- /dev/null +++ b/src/assets/images/icon128.png Binary files differdiff --git a/src/assets/images/icon16.png b/src/assets/images/icon16.png new file mode 100644 index 00000000..f896608b --- /dev/null +++ b/src/assets/images/icon16.png Binary files differdiff --git a/src/assets/images/icon32.png b/src/assets/images/icon32.png new file mode 100644 index 00000000..c5b417cf --- /dev/null +++ b/src/assets/images/icon32.png Binary files differdiff --git a/src/assets/images/icon48.png b/src/assets/images/icon48.png new file mode 100644 index 00000000..24dd5af7 --- /dev/null +++ b/src/assets/images/icon48.png Binary files differdiff --git a/src/assets/images/logo-small.png b/src/assets/images/logo-small.png new file mode 100644 index 00000000..27ca660a --- /dev/null +++ b/src/assets/images/logo-small.png Binary files differdiff --git a/src/assets/images/logo-store.png b/src/assets/images/logo-store.png new file mode 100644 index 00000000..f321de43 --- /dev/null +++ b/src/assets/images/logo-store.png Binary files differdiff --git a/src/assets/images/logo-tile.png b/src/assets/images/logo-tile.png new file mode 100644 index 00000000..101c6b3a --- /dev/null +++ b/src/assets/images/logo-tile.png Binary files differdiff --git a/src/assets/images/logo.png b/src/assets/images/logo.png new file mode 100644 index 00000000..ad854aaa --- /dev/null +++ b/src/assets/images/logo.png Binary files differdiff --git a/src/assets/javascripts/helpers/common.js b/src/assets/javascripts/helpers/common.js new file mode 100644 index 00000000..6edd3d3c --- /dev/null +++ b/src/assets/javascripts/helpers/common.js @@ -0,0 +1,9 @@ +export default class { + static filterInstances(instances) { + return instances.filter((instance) => !instance.includes(".onion")); + } + + static getRandomInstance(instances) { + return instances[~~(instances.length * Math.random())]; + } +} diff --git a/src/assets/javascripts/helpers/google-maps.js b/src/assets/javascripts/helpers/google-maps.js new file mode 100644 index 00000000..3a041c67 --- /dev/null +++ b/src/assets/javascripts/helpers/google-maps.js @@ -0,0 +1,43 @@ +export default class { + static targets = /https?:\/\/(((www|maps)\.)?(google\.).*(\/maps)|maps\.(google\.).*)/; + static redirects = ["https://openstreetmap.org"]; + static mapCentreRegex = /@(-?\d[0-9.]*),(-?\d[0-9.]*),(\d{1,2})[.z]/; + static dataLatLngRegex = /(!3d|!4d)(-?[0-9]{1,10}.[0-9]{1,10})/g; + static placeRegex = /\/place\/(.*)\//; + static travelModes = { + driving: "fossgis_osrm_car", + walking: "fossgis_osrm_foot", + bicycling: "fossgis_osrm_bike", + transit: "fossgis_osrm_car", // not implemented on OSM, default to car. + }; + static layers = { + none: "S", + transit: "T", + traffic: "S", // not implemented on OSM, default to standard. + bicycling: "C", + }; + static addressToLatLng(address, callback) { + const xmlhttp = new XMLHttpRequest(); + xmlhttp.onreadystatechange = () => { + if (xmlhttp.readyState === XMLHttpRequest.DONE) { + if (xmlhttp.status === 200) { + const json = JSON.parse(xmlhttp.responseText)[0]; + if (json) { + callback( + `${json.lat}%2C${json.lon}`, + `${json.boundingbox[2]},${json.boundingbox[1]},${json.boundingbox[3]},${json.boundingbox[0]}` + ); + } + } else { + console.info("Error: Status is " + xmlhttp.status); + } + } + }; + xmlhttp.open( + "GET", + `https://nominatim.openstreetmap.org/search/${address}?format=json&limit=1`, + false + ); + xmlhttp.send(); + } +} diff --git a/src/assets/javascripts/helpers/google-search.js b/src/assets/javascripts/helpers/google-search.js new file mode 100644 index 00000000..dc12042f --- /dev/null +++ b/src/assets/javascripts/helpers/google-search.js @@ -0,0 +1,9 @@ +export default class { + static targets = /https?:\/\/(((www|maps)\.)?(google\.).*(\/search)|search\.(google\.).*)/; + static redirects = [ + { link: "https://duckduckgo.com", q: "/" }, + { link: "https://startpage.com", q: "/search/" }, + { link: "https://www.qwant.com", q: "/" }, + { link: "https://www.mojeek.com", q: "/search" }, + ]; +} diff --git a/src/assets/javascripts/helpers/instagram.js b/src/assets/javascripts/helpers/instagram.js new file mode 100644 index 00000000..bd0ad9f5 --- /dev/null +++ b/src/assets/javascripts/helpers/instagram.js @@ -0,0 +1,47 @@ +export default class { + static targets = [ + "instagram.com", + "www.instagram.com", + "help.instagram.com", + "about.instagram.com", + ]; + static redirects = [ + "https://bibliogram.art", + "https://bibliogram.snopyta.org", + "https://bibliogram.pussthecat.org", + "https://bibliogram.nixnet.services", + "https://bg.endl.site", + "https://bibliogram.13ad.de", + "https://bibliogram.pixelfed.uno", + "https://bibliogram.ethibox.fr", + "https://bibliogram.hamster.dance", + "https://bibliogram.kavin.rocks", + "https://bibliogram.ggc-project.de", + ]; + static reservedPaths = [ + "about", + "explore", + "support", + "press", + "api", + "privacy", + "safety", + "admin", + "graphql", + "accounts", + "help", + "terms", + "contact", + "blog", + "igtv", + "u", + "p", + "fragment", + "imageproxy", + "videoproxy", + ".well-known", + "tv", + "reel", + ]; + static bypassPaths = /\/(accounts\/|embeds?.js)/; +} diff --git a/src/assets/javascripts/helpers/reddit.js b/src/assets/javascripts/helpers/reddit.js new file mode 100644 index 00000000..46fff4cf --- /dev/null +++ b/src/assets/javascripts/helpers/reddit.js @@ -0,0 +1,24 @@ +export default class { + static targets = [ + "www.reddit.com", + "np.reddit.com", + "new.reddit.com", + "amp.reddit.com", + ]; + static redirects = [ + "https://old.reddit.com", // desktop + "https://i.reddit.com", // mobile + // teddit: privacy w/ old UI + "https://teddit.net", + "https://teddit.ggc-project.de", + "https://teddit.kavin.rocks", + "https://snew.notabug.io", // anti-censorship + // libreddit: privacy w/ modern UI + "https://libredd.it", + "https://libreddit.spike.codes", + "https://libreddit.kavin.rocks", + "https://libreddit.insanity.wtf", + "https://libreddit.dothq.co", + ]; + static bypassPaths = /\/(gallery\/poll\/rpan\/settings\/topics)/; +} diff --git a/src/assets/javascripts/helpers/twitter.js b/src/assets/javascripts/helpers/twitter.js new file mode 100644 index 00000000..1ebc025b --- /dev/null +++ b/src/assets/javascripts/helpers/twitter.js @@ -0,0 +1,38 @@ +export default class { + /* + Please remember to also update the manifest.json file + (content_scripts > matches, 'remove-twitter-sw.js') + when updating this list: + */ + static targets = [ + "twitter.com", + "www.twitter.com", + "mobile.twitter.com", + "pbs.twimg.com", + "video.twimg.com", + ]; + static redirects = [ + "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://nitter.cattube.org", + "https://nitter.fdn.fr", + "https://nitter.1d4.us", + "https://nitter.kavin.rocks", + "https://tweet.lambda.dance", + "https://nitter.cc", + "https://nitter.weaponizedhumiliation.com", + "https://nitter.vxempire.xyz", + "https://nitter.unixfox.eu", + "http://3nzoldnxplag42gqjs23xvghtzf6t6yzssrtytnntc6ppc7xxuoneoad.onion", + "http://nitter.l4qlywnpwqsluw65ts7md3khrivpirse744un3x7mlskqauz5pyuzgqd.onion", + "http://nitterlgj3n5fgwesu3vxc5h67ruku33nqaoeoocae2mvlzhsu6k7fqd.onion", + "http://npf37k3mtzwxreiw52ccs5ay4e6qt2fkcs2ndieurdyn2cuzzsfyfvid.onion", + ]; +} diff --git a/src/assets/javascripts/helpers/youtube.js b/src/assets/javascripts/helpers/youtube.js new file mode 100644 index 00000000..3d1fcd27 --- /dev/null +++ b/src/assets/javascripts/helpers/youtube.js @@ -0,0 +1,33 @@ +export default class { + static targets = [ + "m.youtube.com", + "youtube.com", + "img.youtube.com", + "www.youtube.com", + "youtube-nocookie.com", + "www.youtube-nocookie.com", + "youtu.be", + "s.ytimg.com", + "music.youtube.com", + ]; + /* + Please remember to also update the manifest.json file + (content_scripts > matches, 'persist-invidious-prefs.js') + when updating this list: + */ + static redirects = [ + "https://invidious.snopyta.org", + "https://invidious.xyz", + "https://invidious.kavin.rocks", + "https://tube.connect.cafe", + "https://invidious.zapashcanon.fr", + "https://invidiou.site", + "https://vid.mint.lgbt", + "https://invidious.site", + "https://yewtu.be", + "http://fz253lmuao3strwbfbmx46yu7acac2jz27iwtorgmbqlkurlclmancad.onion", + "http://qklhadlycap4cnod.onion", + "http://c7hqkpkpemu6e7emz5b4vyz7idjgdvgaaa3dyimmeojqbgpea3xqjoid.onion", + "http://w6ijuptxiku4xpnnaetxvnkc5vqcdu7mgns2u77qefoixi63vbvnpnqd.onion", + ]; +} diff --git a/src/assets/javascripts/localise.js b/src/assets/javascripts/localise.js new file mode 100644 index 00000000..cbe5c191 --- /dev/null +++ b/src/assets/javascripts/localise.js @@ -0,0 +1,19 @@ +window.browser = window.browser || window.chrome; + +function localisePage() { + var data = document.querySelectorAll("[data-localise]"); + + for (var i in data) + if (data.hasOwnProperty(i)) { + var obj = data[i]; + var tag = obj.getAttribute("data-localise").toString(); + + var msg = tag.replace(/__MSG_(\w+)__/g, function (_match, v1) { + return v1 ? browser.i18n.getMessage(v1) : null; + }); + + if (msg && msg !== tag) obj.textContent = msg; + } +} + +localisePage(); diff --git a/src/assets/javascripts/persist-invidious-prefs.js b/src/assets/javascripts/persist-invidious-prefs.js new file mode 100644 index 00000000..4c13a310 --- /dev/null +++ b/src/assets/javascripts/persist-invidious-prefs.js @@ -0,0 +1,30 @@ +'use strict'; + +window.browser = window.browser || window.chrome; + +function getCookie() { + let ca = document.cookie.split(';'); + for (let i = 0; i < ca.length; i++) { + let c = ca[i]; + while (c.charAt(0) == ' ') c = c.substring(1, c.length); + if (c.indexOf('PREFS=') == 0) { + return JSON.parse( + decodeURIComponent(c.substring('PREFS='.length, c.length)) + ) + }; + } + return {}; +} + +browser.storage.sync.get( + ['alwaysProxy', 'videoQuality', 'invidiousDarkMode', 'persistInvidiousPrefs'], + (result) => { + if (result.persistInvidiousPrefs) { + const prefs = getCookie(); + prefs.local = result.alwaysProxy; + prefs.quality = result.videoQuality; + prefs.dark_mode = result.invidiousDarkMode; + document.cookie = `PREFS=${encodeURIComponent(JSON.stringify(prefs))}`; + } + } +); \ No newline at end of file diff --git a/src/assets/javascripts/remove-twitter-sw.js b/src/assets/javascripts/remove-twitter-sw.js new file mode 100644 index 00000000..c39b4c9e --- /dev/null +++ b/src/assets/javascripts/remove-twitter-sw.js @@ -0,0 +1,89 @@ +"use strict"; + +let disableNitter; +let nitterInstance; +let redirectBypassFlag; +let exceptions; + +window.browser = window.browser || window.chrome; + +Promise.all([ + import(browser.extension.getURL("src/assets/javascripts/helpers/common.js")), + import(browser.extension.getURL("src/assets/javascripts/helpers/twitter.js")), +]).then( + (helpers) => { + let commonHelper; + let twitterHelper; + [commonHelper, twitterHelper] = helpers; + + function isNotException(url) { + return !exceptions.some((regex) => regex.test(url.href)); + } + + function shouldRedirect(url) { + return ( + !redirectBypassFlag && + isNotException(url) && + !disableNitter && + url.host !== nitterInstance && + !url.pathname.includes("/home") + ); + } + + function redirectTwitter(url) { + if (url.host.split(".")[0] === "pbs") { + return `${nitterInstance}/pic/${encodeURIComponent(url.href)}`; + } else if (url.host.split(".")[0] === "video") { + return `${nitterInstance}/gif/${encodeURIComponent(url.href)}`; + } else { + return `${nitterInstance}${url.pathname}${url.search}`; + } + } + + browser.storage.sync.get( + [ + "nitterInstance", + "disableNitter", + "removeTwitterSW", + "redirectBypassFlag", + "exceptions", + ], + (result) => { + redirectBypassFlag = result.redirectBypassFlag; + browser.storage.sync.set({ + redirectBypassFlag: false, + }); + if (!result.removeTwitterSW) { + disableNitter = result.disableNitter; + nitterInstance = + result.nitterInstance || + commonHelper.default.getRandomInstance( + twitterHelper.default.redirects + ); + exceptions = result.exceptions + ? result.exceptions.map((e) => { + return new RegExp(e); + }) + : []; + navigator.serviceWorker.getRegistrations().then((registrations) => { + for (let registration of registrations) { + if (registration.scope === "https://twitter.com/") { + registration.unregister(); + console.log("Unregistered Twitter SW", registration); + } + } + }); + const url = new URL(window.location); + if (shouldRedirect(url)) { + const redirect = redirectTwitter(url); + console.info("Redirecting", `"${url.href}"`, "=>", `"${redirect}"`); + window.location = redirect; + } + } + } + ); + }, + (error) => { + console.error(error); + } +); diff --git a/src/assets/stylesheets/styles.css b/src/assets/stylesheets/styles.css new file mode 100644 index 00000000..e11f313b --- /dev/null +++ b/src/assets/stylesheets/styles.css @@ -0,0 +1,516 @@ +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 { + margin: 0; + width: 400px; + margin: auto; + min-height: 572px; + font-family: Sans-Serif; + background-color: var(--bg-secondary); + color: var(--text); +} + +.popup { + width: 300px; + min-height: auto; + overflow: hidden; + background-color: var(--bg-main); +} + +input { + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; +} + +header { + background-color: var(--bg-main); + color: var(--text); + display: flex; + padding: var(--space); +} + +header .logo-container { + width: 100%; + margin: var(--space) 0 var(--space) 0; + display: flex; + align-items: center; +} + +header .logo-container img { + height: 85px; + float: left; +} + +header .logo-container h1 { + font-size: 25px; + float: left; + margin-left: 15px; + text-transform: uppercase; + font-weight: normal; +} + +header .privacy { + letter-spacing: 0.13em; +} + +header .version { + font-size: 8.5px; + font-weight: bold; + position: absolute; + top: var(--space); + right: var(--space); +} + +h1 { + font-size: 14px; + margin: 7px auto; +} + +i { + font-size: 12px; +} + +h2 { + clear: both; + font-size: 12px; + font-weight: normal; + margin: 0; +} + +h3 { + font-size: 16px; +} + +h1, +h2 { + color: var(--text); +} + +footer { + width: 100%; +} + +footer a.button { + margin: var(--space); +} + +input[type="url"], +input[type="text"], +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"] { + padding: 1px 2px; +} + +input[type="checkbox"] { + opacity: 0; +} + +input[type="radio"] { + appearance: radio; + -moz-appearance: radio; + -webkit-appearance: radio; +} + +input[type="radio"]:checked + label { + background: transparent; +} + +.checkbox-label { + margin-left: 5px; + background: grey; + border-radius: 25px; + color: var(--text); + cursor: pointer; + display: block; + float: right; + font-weight: bold; + height: 30px; + position: relative; + text-indent: -400px; + width: 50px; +} + +.checkbox-label:after { + background: white; + border-radius: 90px; + content: ""; + height: 20px; + left: var(--space); + position: absolute; + top: var(--space); + transition: 0.3s; + width: 20px; +} + +input:checked + label { + background: var(--active); +} + +input:checked + label:after { + left: calc(100% - var(--space)); + transform: translateX(-100%); +} + +.settings-block { + display: block; + padding: 5px 10px 5px 10px; +} + +.settings-block h1 { + float: left; +} + +.button { + border: var(--active) solid 1px; + color: var(--text); + stroke: var(--text); + display: block; + font-size: 12px; + font-weight: bold; + margin: var(--space) auto; + padding: 10px; + text-align: center; + text-decoration: none; + cursor: pointer; + -webkit-transition-duration: 0.4s; + transition-duration: 0.4s; +} + +.button * { + vertical-align: middle; +} + +.button:hover { + background-color: var(--active); + color: var(--text); + stroke: var(--text); +} + +.button:active { + background-color: var(--active); + box-shadow: 0 var(--space) var(--bg-main); + transform: translateY(4px); +} + +input:invalid { + color: var(--danger); + border-color: var(--danger); + background-color: var(--danger-light); +} + +.margin-bottom { + margin-bottom: 20px; +} + +.tab { + overflow: hidden; + background-color: var(--bg-secondary); + position: fixed; + top: 0; + width: 400px; + z-index: 2; +} + +.tab button { + border-top-left-radius: 10px; + border-top-right-radius: 10px; + 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:hover { + background-color: var(--active); +} + +.tab button.active { + background-color: var(--bg-main); +} + +.tabcontent { + padding-top: 50px; + display: none; + background-color: var(--bg-main); + min-height: 510px; +} + +div.exceptions { + clear: left; +} + +div.exceptions > input { + width: 240px; + float: left; +} + +#add-to-exceptions { + float: right; + border: var(--active) solid 1px; + background-color: var(--active); + color: var(--text); + font-weight: bold; + cursor: pointer; + border-radius: 50%; + padding: 1px 1px 0px 1px; + margin-right: 5px; +} + +#add-to-exceptions svg { + height: 20px; + width: 20px; +} + +ul { + padding: 0; + list-style-type: none; + color: var(--text); + margin: 20px 20px 0 20px; +} + +li { + border-bottom: solid 0.5px var(--bg-secondary); + padding: 20px 0px 20px 20px; +} + +#exceptions-items button { + float: right; + margin-right: -5px; + border: var(--active) solid 1px; + background-color: var(--active); + color: var(--text); + font-weight: bold; + cursor: pointer; + border-radius: 50%; + padding: 2px 2px 0px 2px; +} + +.button svg { + height: 18px; + width: 18px; +} + +.autocomplete { + position: relative; + display: inline-block; + width: 100%; +} + +.autocomplete input { + background: url(../images/chevron-down.svg) right no-repeat; +} + +.autocomplete-items { + position: absolute; + border: 1px solid var(--bg-main); + border-bottom: none; + border-top: none; + z-index: 99; + top: 85%; + left: 0; + right: 0; + overflow-y: auto; + max-height: 175px; + color: var(--text); + overflow-x: hidden; + max-width: 380px; +} + +.autocomplete-items div { + padding: 10px; + cursor: pointer; + background-color: var(--bg-secondary); + border-bottom: 1px solid var(--bg-main); +} + +.autocomplete-items div:hover { + background-color: var(--active); +} + +.autocomplete-active { + background-color: var(--active); + color: var(--text); +} + +.option { + width: 100%; +} + +.option td { + vertical-align: middle; +} + +input[type="range"] { + -webkit-appearance: none; + margin: 18px 0; + width: 100%; +} + +input[type="range"]:focus { + outline: none; +} + +input[type="range"]::-webkit-slider-runnable-track { + width: 100%; + height: 8.4px; + cursor: pointer; + border-color: var(--dark-grey), var(--light-grey); + background: var(--bg-main); + border-radius: 1.3px; + border: 0.2px inset var(--dark-grey); +} + +input[type="range"]::-webkit-slider-thumb { + border-color: var(--active); + border: 1px solid var(--dark-grey); + height: 36px; + width: 16px; + border-radius: 3px; + background: var(--active); + cursor: pointer; + -webkit-appearance: none; + margin-top: -14px; +} + +input[type="range"]:focus::-webkit-slider-runnable-track { + background: var(--bg-main); +} + +input[type="range"]::-moz-range-track { + width: 100%; + height: 8.4px; + cursor: pointer; + border-color: var(--dark-grey), var(--light-grey); + background: var(--bg-main); + border-radius: 1.3px; + border: 0.2px inset var(--dark-grey); +} + +input[type="range"]::-moz-range-thumb { + border-color: var(--active); + border: 1px solid var(--dark-grey); + height: 36px; + width: 16px; + border-radius: 3px; + background: var(--active); + cursor: pointer; +} + +::placeholder { + color: var(--text); + opacity: 0.7; +} + +*:focus { + outline: var(--active) solid 2px; +} + +@media (prefers-color-scheme: light) { + body { + --text: #000; + --text-secondary: #fff; + --bg-main: #e3e7ea; + --bg-secondary: #fff; + } + + body.dark-theme { + --text: #fff; + --text-secondary: #000; + --bg-main: #3c4043; + --bg-secondary: #292a2d; + } + + .popup { + background-color: var(--bg-secondary); + } +} + +#volume-value { + float: right; +} + +.collapsible { + background-color: var(--bg-main); + cursor: pointer; + color: var(--active); + padding: 18px; + width: 100%; + border: none; + text-align: left; + outline: none; + font-size: 15px; + border-bottom: solid var(--active); + font-weight: bold; +} + +.collapsible:after { + content: "\002B"; + color: var(--active); + font-weight: bold; + float: right; + margin-left: 5px; +} + +.collapsible-active, +.collapsible:hover, +.collapsible:hover::after { + background-color: var(--active); + color: var(--text-secondary); +} + +.collapsible-active:after { + content: "\002D"; + color: var(--text-secondary); + font-weight: bold; + float: right; + margin-left: 5px; +} + +.collapsible-content { + padding: 0 18px; + display: none; + overflow: hidden; +} + +hr { + height: 2px; + background-color: var(--active); + border: none; +} |
