Added Piped, cleaned code
Signed-off-by: ManeraKai <manerakai@protonmail.com>
This commit is contained in:
ManeraKai
parent
eb6e58af52
commit
b4fcdf26ea
|
|
@ -21,39 +21,57 @@ const targets = [
|
|||
when updating this list:
|
||||
*/
|
||||
let redirects = {
|
||||
"normal": [
|
||||
"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",
|
||||
"https://invidious.tube",
|
||||
"https://invidious.silkky.cloud",
|
||||
"https://invidious.himiko.cloud",
|
||||
"https://inv.skyn3t.in",
|
||||
"https://tube.incognet.io",
|
||||
"https://invidious.tinfoil-hat.net",
|
||||
"https://invidious.namazso.eu",
|
||||
"https://vid.puffyan.us",
|
||||
"https://dev.viewtube.io",
|
||||
"https://invidious.048596.xyz",
|
||||
],
|
||||
"onion": [
|
||||
"http://fz253lmuao3strwbfbmx46yu7acac2jz27iwtorgmbqlkurlclmancad.onion",
|
||||
"http://qklhadlycap4cnod.onion",
|
||||
"http://c7hqkpkpemu6e7emz5b4vyz7idjgdvgaaa3dyimmeojqbgpea3xqjoid.onion",
|
||||
"http://w6ijuptxiku4xpnnaetxvnkc5vqcdu7mgns2u77qefoixi63vbvnpnqd.onion",
|
||||
]
|
||||
"invidious": {
|
||||
"normal": [
|
||||
"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",
|
||||
"https://invidious.tube",
|
||||
"https://invidious.silkky.cloud",
|
||||
"https://invidious.himiko.cloud",
|
||||
"https://inv.skyn3t.in",
|
||||
"https://tube.incognet.io",
|
||||
"https://invidious.tinfoil-hat.net",
|
||||
"https://invidious.namazso.eu",
|
||||
"https://vid.puffyan.us",
|
||||
"https://dev.viewtube.io",
|
||||
"https://invidious.048596.xyz",
|
||||
],
|
||||
"onion": [
|
||||
"http://fz253lmuao3strwbfbmx46yu7acac2jz27iwtorgmbqlkurlclmancad.onion",
|
||||
"http://qklhadlycap4cnod.onion",
|
||||
"http://c7hqkpkpemu6e7emz5b4vyz7idjgdvgaaa3dyimmeojqbgpea3xqjoid.onion",
|
||||
"http://w6ijuptxiku4xpnnaetxvnkc5vqcdu7mgns2u77qefoixi63vbvnpnqd.onion",
|
||||
]
|
||||
},
|
||||
"piped": {
|
||||
"normal": [
|
||||
"https://piped.kavin.rocks",
|
||||
"https://piped.silkky.cloud",
|
||||
"https://piped.tokhmi.xyz",
|
||||
"https://piped.mint.lgbt",
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
const getRedirects = () => redirects;
|
||||
function setRedirects(val) {
|
||||
redirects = val;
|
||||
browser.storage.sync.set({ youtubeRedirects: val })
|
||||
console.log("youtubeRedirects: ", val)
|
||||
|
||||
function setInvidiousRedirects(val) {
|
||||
redirects.invidious = val;
|
||||
browser.storage.sync.set({ youtubeRedirects: redirects })
|
||||
console.log("invidiousRedirects: ", val)
|
||||
}
|
||||
|
||||
function setPipedRedirects(val) {
|
||||
redirects.piped = val;
|
||||
browser.storage.sync.set({ youtubeRedirects: redirects })
|
||||
console.log("pipedRedirects: ", val)
|
||||
}
|
||||
|
||||
let disableYoutube;
|
||||
|
|
@ -136,6 +154,15 @@ function setInvidiousAutoplay(val) {
|
|||
console.log("invidiousAutoplay: ", invidiousAutoplay)
|
||||
}
|
||||
|
||||
|
||||
let frontend;
|
||||
const getFrontend = () => frontend;
|
||||
function setFrontend(val) {
|
||||
frontend = val;
|
||||
browser.storage.sync.set({ youtubeFrontend: val })
|
||||
console.log("youtubeFrontend: ", val)
|
||||
}
|
||||
|
||||
let useFreeTube;
|
||||
function setUseFreeTube(val) {
|
||||
useFreeTube = val;
|
||||
|
|
@ -153,49 +180,6 @@ function setPersistInvidiousPrefs(val) {
|
|||
}
|
||||
const getPersistInvidiousPrefs = () => persistInvidiousPrefs;
|
||||
|
||||
function redirect(url, initiator, type) {
|
||||
if (disableYoutube)
|
||||
return null;
|
||||
|
||||
if (
|
||||
initiator &&
|
||||
(
|
||||
initiator.origin === invidiousInstance ||
|
||||
redirects.normal.includes(initiator.origin) ||
|
||||
targets.includes(initiator.host)
|
||||
)
|
||||
)
|
||||
return null;
|
||||
|
||||
if (url.pathname.match(/iframe_api/) || url.pathname.match(/www-widgetapi/)) return null; // Don't redirect YouTube Player API.
|
||||
|
||||
if (url.host.split(".")[0] === "studio") return null; // Avoid redirecting `studio.youtube.com`
|
||||
|
||||
if (invidiousOnlyEmbeddedVideo && type !== "sub_frame") return null;
|
||||
|
||||
if (useFreeTube && type === "main_frame")
|
||||
return `freetube://${url}`;
|
||||
|
||||
// Apply settings
|
||||
if (invidiousAlwaysProxy) url.searchParams.append("local", true);
|
||||
|
||||
if (invidiousVideoQuality) url.searchParams.append("quality", invidiousVideoQuality);
|
||||
|
||||
if (invidiousDarkMode) url.searchParams.append("dark_mode", invidiousDarkMode);
|
||||
|
||||
if (invidiousVolume) url.searchParams.append("volume", invidiousVolume);
|
||||
|
||||
if (invidiousPlayerStyle) url.searchParams.append("player_style", invidiousPlayerStyle);
|
||||
|
||||
if (invidiousSubtitles) url.searchParams.append("subtitles", invidiousSubtitles);
|
||||
|
||||
if (invidiousAutoplay) url.searchParams.append("autoplay", 1);
|
||||
|
||||
let randomInstance = commonHelper.getRandomInstance(redirects.normal)
|
||||
|
||||
return `${randomInstance}${url.pathname.replace("/shorts", "")}${url.search}`;
|
||||
}
|
||||
|
||||
function isYoutube(url) {
|
||||
return targets.includes(url.host);
|
||||
}
|
||||
|
|
@ -239,7 +223,8 @@ async function init() {
|
|||
"invidiousSubtitles",
|
||||
"invidiousAutoplay",
|
||||
"useFreeTube",
|
||||
"youtubeRedirects"
|
||||
"youtubeRedirects",
|
||||
"youtubeFrontend",
|
||||
]);
|
||||
disableYoutube = result.disableYoutube ?? false;
|
||||
invidiousInstance = result.invidiousInstance;
|
||||
|
|
@ -257,11 +242,75 @@ async function init() {
|
|||
redirects = result.youtubeRedirects
|
||||
|
||||
if (result.persistInvidiousPrefs) initInvidiousCookie();
|
||||
|
||||
frontend = result.youtubeFrontend ?? 'piped';
|
||||
}
|
||||
|
||||
function redirect(url, initiator, type) {
|
||||
if (disableYoutube)
|
||||
return null;
|
||||
|
||||
if (
|
||||
initiator &&
|
||||
(
|
||||
initiator.origin === invidiousInstance ||
|
||||
redirects.invidious.normal.includes(initiator.origin) ||
|
||||
redirects.piped.normal.includes(initiator.origin) ||
|
||||
targets.includes(initiator.host)
|
||||
)
|
||||
)
|
||||
return null;
|
||||
|
||||
if (frontend == 'invidious') {
|
||||
|
||||
if (url.pathname.match(/iframe_api/) || url.pathname.match(/www-widgetapi/)) return null; // Don't redirect YouTube Player API.
|
||||
|
||||
if (url.host.split(".")[0] === "studio") return null; // Avoid redirecting `studio.youtube.com`
|
||||
|
||||
if (invidiousOnlyEmbeddedVideo && type !== "sub_frame") return null;
|
||||
|
||||
if (useFreeTube && type === "main_frame")
|
||||
return `freetube://${url}`;
|
||||
|
||||
// Apply settings
|
||||
if (invidiousAlwaysProxy) url.searchParams.append("local", true);
|
||||
|
||||
if (invidiousVideoQuality) url.searchParams.append("quality", invidiousVideoQuality);
|
||||
|
||||
if (invidiousDarkMode) url.searchParams.append("dark_mode", invidiousDarkMode);
|
||||
|
||||
if (invidiousVolume) url.searchParams.append("volume", invidiousVolume);
|
||||
|
||||
if (invidiousPlayerStyle) url.searchParams.append("player_style", invidiousPlayerStyle);
|
||||
|
||||
if (invidiousSubtitles) url.searchParams.append("subtitles", invidiousSubtitles);
|
||||
|
||||
if (invidiousAutoplay) url.searchParams.append("autoplay", 1);
|
||||
|
||||
let randomInstance = commonHelper.getRandomInstance(redirects.invidious.normal)
|
||||
|
||||
return `${randomInstance}${url.pathname.replace("/shorts", "")}${url.search}`;
|
||||
|
||||
} else if (frontend == 'piped') {
|
||||
let randomInstance = commonHelper.getRandomInstance(redirects.piped.normal);
|
||||
if (url.hostname.endsWith("youtube.com") || url.hostname.endsWith("youtube-nocookie.com"))
|
||||
return `${randomInstance}${url.pathname}${url.search}`;
|
||||
|
||||
if (url.hostname.endsWith("youtu.be") && url.pathname.length > 1)
|
||||
return `${randomInstance}/watch?v=${url.pathname.substring(1)}`;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default {
|
||||
getFrontend,
|
||||
setFrontend,
|
||||
|
||||
getRedirects,
|
||||
setRedirects,
|
||||
setInvidiousRedirects,
|
||||
setPipedRedirects,
|
||||
|
||||
redirect,
|
||||
isYoutube,
|
||||
|
||||
|
|
|
|||
|
|
@ -77,7 +77,8 @@ browser.tabs.onUpdated.addListener((tabId, changeInfo, _) => {
|
|||
var protocolHost = `${url.protocol}//${url.host}`;
|
||||
var mightyList = [];
|
||||
mightyList.push(
|
||||
...youtubeHelper.getRedirects().normal,
|
||||
...youtubeHelper.getRedirects().invidious.normal,
|
||||
...youtubeHelper.getRedirects().piped.normal,
|
||||
...twitterHelper.getRedirects().normal,
|
||||
...instagramHelper.getRedirects().normal,
|
||||
...redditHelper.getRedirects().libreddit.normal,
|
||||
|
|
@ -101,7 +102,11 @@ browser.pageAction.onClicked.addListener((tab) => {
|
|||
var protocolHost = `${tabUrl.protocol}//${tabUrl.host}`;
|
||||
var newUrl;
|
||||
|
||||
if (youtubeHelper.getRedirects().normal.includes(protocolHost)) newUrl = 'https://youtube.com';
|
||||
if (
|
||||
youtubeHelper.getRedirects().invidious.normal.includes(protocolHost) ||
|
||||
youtubeHelper.getRedirects().piped.normal.includes(protocolHost)
|
||||
)
|
||||
newUrl = 'https://youtube.com';
|
||||
|
||||
if (twitterHelper.getRedirects().normal.includes(protocolHost)) newUrl = 'https://twitter.com';
|
||||
|
||||
|
|
@ -131,4 +136,5 @@ browser.pageAction.onClicked.addListener((tab) => {
|
|||
if (wikipediaHelper.getRedirects().normal.includes(protocolHost)) newUrl = 'https://wikipedia.com';
|
||||
|
||||
if (newUrl) browser.tabs.update({ url: tabUrl.href.replace(protocolHost, newUrl) });
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
|
||||
<section class="option-block">
|
||||
<div class="some-block option-block">
|
||||
<h1>Enable</h1>
|
||||
<h4>Enable</h4>
|
||||
<input id="disable-invidious" type="checkbox" checked />
|
||||
</div>
|
||||
|
||||
|
|
@ -48,64 +48,77 @@
|
|||
</section> -->
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h4>Player Style</h4>
|
||||
<select id="invidious-player-style">
|
||||
<h4>Frontend</h4>
|
||||
<select id="youtube-frontend">
|
||||
<option value="piped">Piped</option>
|
||||
<option value="invidious">Invidious</option>
|
||||
<option value="youtube">YouTube</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h4>Dark mode</h4>
|
||||
<input id="invidious-dark-mode" type="checkbox" checked />
|
||||
</div>
|
||||
|
||||
<div class="some-block">
|
||||
<h4>Volume: <span id="volume-value">50%</span></h4>
|
||||
<input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1" />
|
||||
</div>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h4 data-localise="__MSG_useFreeTube__">Use FreeTube over Invidious when possible</h4>
|
||||
<input id="use-freetube" type="checkbox" checked />
|
||||
</div>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h4 data-localise="__MSG_invidiousAlwaysProxy__">Always proxy videos through Invidious</h4>
|
||||
<input id="always-proxy" type="checkbox" checked />
|
||||
</div>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h4 data-localise="__MSG_invidiousOnlyEmbeddedVideo__">Only redirect embedded video to Invidious</h4>
|
||||
<input id="only-embed" type="checkbox" checked />
|
||||
</div>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h4>Video Quality</h4>
|
||||
<select id="video-quality">
|
||||
<option value="">Default</option>
|
||||
<option value="hd720">720p</option>
|
||||
<option value="medium">480p</option>
|
||||
<option value="dash">DASH (Dynamic Adaptive Streaming over HTTP)</option>
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h4>Subtitles - language codes</h4>
|
||||
<input id="invidious-subtitles" placeholder="en, ar, es" name="invidious-subtitles" type="text" />
|
||||
</div>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h4>Automatically play video on load</h4>
|
||||
<input id="invidious-autoplay" type="checkbox" checked />
|
||||
</div>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h4>Persist preferences (as cookie)</h4>
|
||||
<input id="persist-invidious-prefs" type="checkbox" checked />
|
||||
<hr>
|
||||
|
||||
<div id="invidious">
|
||||
<div class="some-block option-block">
|
||||
<h4>Player Style</h4>
|
||||
<select id="invidious-player-style">
|
||||
<option value="invidious">Invidious</option>
|
||||
<option value="youtube">YouTube</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h4>Dark mode</h4>
|
||||
<input id="invidious-dark-mode" type="checkbox" checked />
|
||||
</div>
|
||||
|
||||
<div class="some-block">
|
||||
<h4>Volume: <span id="volume-value">50%</span></h4>
|
||||
<input id="invidious-volume" name="invidious-volume" type="range" min="0" max="100" step="1" />
|
||||
</div>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h4 data-localise="__MSG_useFreeTube__">Use FreeTube over Invidious when possible</h4>
|
||||
<input id="use-freetube" type="checkbox" checked />
|
||||
</div>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h4 data-localise="__MSG_invidiousAlwaysProxy__">Always proxy videos through Invidious</h4>
|
||||
<input id="always-proxy" type="checkbox" checked />
|
||||
</div>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h4 data-localise="__MSG_invidiousOnlyEmbeddedVideo__">Only redirect embedded video to Invidious</h4>
|
||||
<input id="only-embed" type="checkbox" checked />
|
||||
</div>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h4>Video Quality</h4>
|
||||
<select id="video-quality">
|
||||
<option value="">Default</option>
|
||||
<option value="hd720">720p</option>
|
||||
<option value="medium">480p</option>
|
||||
<option value="dash">DASH (Dynamic Adaptive Streaming over HTTP)</option>
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h4>Subtitles - language codes</h4>
|
||||
<input id="invidious-subtitles" placeholder="en, ar, es" name="invidious-subtitles" type="text" />
|
||||
</div>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h4>Automatically play video on load</h4>
|
||||
<input id="invidious-autoplay" type="checkbox" checked />
|
||||
</div>
|
||||
|
||||
<div class="some-block option-block">
|
||||
<h4>Persist preferences (as cookie)</h4>
|
||||
<input id="persist-invidious-prefs" type="checkbox" checked />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="piped"></div>
|
||||
|
||||
</section>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import youtubeHelper from "../../assets/javascripts/helpers/youtube.js";
|
|||
import commonHelper from "../../assets/javascripts/helpers/common.js";
|
||||
|
||||
let disableYoutubeElement = document.getElementById("disable-invidious");
|
||||
let youtubeFrontendElement = document.getElementById("youtube-frontend");
|
||||
let invidiousDarkModeElement = document.getElementById("invidious-dark-mode");
|
||||
let persistInvidiousPrefsElement = document.getElementById("persist-invidious-prefs");
|
||||
let invidiousVolumeElement = document.getElementById("invidious-volume");
|
||||
|
|
@ -14,6 +15,20 @@ let invidiousOnlyEmbeddedVideoElement = document.getElementById("only-embed");
|
|||
let invidiousVideoQualityElement = document.getElementById("video-quality");
|
||||
let invidiousVolumeValueElement = document.querySelector("#volume-value");
|
||||
|
||||
let invidiousDivElement = document.getElementById("invidious")
|
||||
let pipedDivElement = document.getElementById("piped")
|
||||
|
||||
function changeFrontendsSettings(frontend) {
|
||||
if (frontend == 'piped') {
|
||||
pipedDivElement.style.display = 'block';
|
||||
invidiousDivElement.style.display = 'none';
|
||||
}
|
||||
else if (frontend == 'invidious') {
|
||||
pipedDivElement.style.display = 'none';
|
||||
invidiousDivElement.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
youtubeHelper.init().then(() => {
|
||||
disableYoutubeElement.checked = !youtubeHelper.getDisableYoutube();
|
||||
invidiousDarkModeElement.checked = youtubeHelper.getInvidiousDarkMode();
|
||||
|
|
@ -27,6 +42,9 @@ youtubeHelper.init().then(() => {
|
|||
invidiousAlwaysProxyElement.checked = youtubeHelper.getInvidiousAlwaysProxy();
|
||||
invidiousVideoQualityElement.value = youtubeHelper.getInvidiousVideoQuality();
|
||||
invidiousAutoplayElement.checked = youtubeHelper.getInvidiousAutoplay();
|
||||
let frontend = youtubeHelper.getFrontend()
|
||||
youtubeFrontendElement.value = frontend;
|
||||
changeFrontendsSettings(frontend);
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -63,7 +81,6 @@ invidiousAutoplayElement.addEventListener("change",
|
|||
(event) => youtubeHelper.setInvidiousAutoplay(event.target.checked)
|
||||
);
|
||||
|
||||
|
||||
useFreeTubeElement.addEventListener("change",
|
||||
(event) => youtubeHelper.setUseFreeTube(event.target.checked)
|
||||
);
|
||||
|
|
@ -79,3 +96,11 @@ invidiousOnlyEmbeddedVideoElement.addEventListener("change",
|
|||
invidiousVideoQualityElement.addEventListener("change",
|
||||
(event) => youtubeHelper.setInvidiousVideoQuality(event.target.options[invidiousVideoQualityElement.selectedIndex].value)
|
||||
);
|
||||
|
||||
youtubeFrontendElement.addEventListener("change",
|
||||
(event) => {
|
||||
let frontend = event.target.options[youtubeFrontendElement.selectedIndex].value
|
||||
youtubeHelper.setFrontend(frontend);
|
||||
changeFrontendsSettings(frontend);
|
||||
}
|
||||
);
|
||||
|
|
@ -31,11 +31,6 @@ div.some-block input[type="checkbox"] {
|
|||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 14px;
|
||||
margin: 7px auto;
|
||||
}
|
||||
|
||||
h2 {
|
||||
clear: both;
|
||||
font-size: 12px;
|
||||
|
|
@ -60,7 +55,6 @@ select {
|
|||
background-color: var(--bg-main);
|
||||
border-style: solid;
|
||||
border-color: #767676;
|
||||
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
|
|
@ -76,7 +70,6 @@ select {
|
|||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
||||
input[type="radio"] {
|
||||
appearance: radio;
|
||||
-moz-appearance: radio;
|
||||
|
|
@ -237,7 +230,6 @@ body.option {
|
|||
padding: 40px;
|
||||
}
|
||||
|
||||
|
||||
section.links {
|
||||
margin: 00px 0;
|
||||
}
|
||||
|
|
@ -265,7 +257,6 @@ section.links a.selected {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
input[type="range"] {
|
||||
width: 50%;
|
||||
}
|
||||
|
|
@ -284,23 +275,8 @@ input[type="url"]:focus {
|
|||
color: var(--active);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* \25BE */
|
||||
|
||||
|
||||
hr {
|
||||
height: 2px;
|
||||
margin: 0 15px;
|
||||
|
|
@ -308,28 +284,6 @@ hr {
|
|||
border: none;
|
||||
}
|
||||
|
||||
.new-badge {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.new-badge[data-new-badge]:after {
|
||||
content: "New!";
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -42px;
|
||||
font-size: 0.9em;
|
||||
background: var(--active);
|
||||
color: white;
|
||||
width: 35px;
|
||||
height: 18px;
|
||||
text-align: center;
|
||||
line-height: 18px;
|
||||
border-radius: 25px;
|
||||
padding: 2px;
|
||||
box-shadow: 0 0 1px var(--bg-secondary);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.light-theme.popup,
|
||||
.light-theme .popup {
|
||||
background-color: var(--bg-secondary);
|
||||
|
|
@ -354,51 +308,6 @@ body.light-theme a{
|
|||
color: black;
|
||||
}
|
||||
|
||||
section {
|
||||
background-color: var(--bg-main);
|
||||
}
|
||||
|
||||
section.youtube {
|
||||
grid-area: youtube;
|
||||
}
|
||||
|
||||
section.twitter {
|
||||
grid-area: twitter;
|
||||
}
|
||||
|
||||
section.instagram {
|
||||
grid-area: instagram;
|
||||
}
|
||||
|
||||
section.reddit {
|
||||
grid-area: reddit;
|
||||
}
|
||||
|
||||
section.search {
|
||||
grid-area: search;
|
||||
}
|
||||
|
||||
section.translate {
|
||||
grid-area: translate;
|
||||
}
|
||||
|
||||
section.maps {
|
||||
grid-area: maps;
|
||||
}
|
||||
|
||||
section.wikipedia {
|
||||
grid-area: wikipedia;
|
||||
}
|
||||
|
||||
section.medium {
|
||||
grid-area: medium;
|
||||
}
|
||||
|
||||
section.exception {
|
||||
grid-area: general;
|
||||
}
|
||||
|
||||
|
||||
div.some-block {
|
||||
padding: 0 15px;
|
||||
justify-content: space-between;
|
||||
|
|
@ -431,9 +340,7 @@ div.option-block h4 {
|
|||
|
||||
div.option-block h1 {
|
||||
margin: 0;
|
||||
margin-right: 5px;
|
||||
width: 80%;
|
||||
font-size: 20px;
|
||||
font-size: 28px;
|
||||
color: var(--active);
|
||||
}
|
||||
|
||||
|
|
@ -516,39 +423,6 @@ a.button:active {
|
|||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
div.option {
|
||||
box-sizing: border-box;
|
||||
margin: auto;
|
||||
max-width: 1800px;
|
||||
display: grid;
|
||||
grid-template-columns: 33.3% 33.3% 33.3%;
|
||||
gap: 2px;
|
||||
/* border: 3px solid var(--active); */
|
||||
background-color: rgb(58, 58, 58);
|
||||
grid-template-areas:
|
||||
"general twitter instagram"
|
||||
"youtube reddit search"
|
||||
"youtube maps wikipedia"
|
||||
"translate medium wikipedia"
|
||||
}
|
||||
|
||||
div.random-pool {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
div.random-pool ul {
|
||||
list-style: disc;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
div.random-pool li {
|
||||
border: none;
|
||||
padding: 10px 0;
|
||||
font-size: 15px;
|
||||
line-height: 1px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
line-height: 21px;
|
||||
background-color: var(--bg-secondary);
|
||||
|
|
@ -558,38 +432,6 @@ textarea {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 1590px) {
|
||||
div.option {
|
||||
max-width: 1200px;
|
||||
grid-template-columns: 50% 50%;
|
||||
grid-template-areas:
|
||||
"general twitter"
|
||||
"youtube instagram"
|
||||
"youtube reddit"
|
||||
"search maps"
|
||||
"translate wikipedia"
|
||||
"medium wikipedia"
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1090px) {
|
||||
div.option {
|
||||
max-width: 600px;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-areas:
|
||||
"general"
|
||||
"youtube"
|
||||
"twitter"
|
||||
"instagram"
|
||||
"search"
|
||||
"reddit"
|
||||
"maps"
|
||||
"translate"
|
||||
"wikipedia"
|
||||
"medium"
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
body {
|
||||
--text: #000;
|
||||
|
|
|
|||
Loading…
Reference in New Issue