Remove SettingsTablist and move it to settings.astro
This commit is contained in:
wearrrrr
parent
2391cf2cfe
commit
118469caa2
4 changed files with 544 additions and 555 deletions
|
|
@ -1,544 +0,0 @@
|
||||||
---
|
|
||||||
import ProxyTab from "./SettingsContent/ProxyTab.astro";
|
|
||||||
import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
|
|
||||||
import CloakingTab from "./SettingsContent/CloakingTab.astro";
|
|
||||||
import CreditsTab from "./SettingsContent/CreditsTab.astro";
|
|
||||||
|
|
||||||
import { i18n } from "@i18n/utils";
|
|
||||||
const lang = i18n.getLangFromUrl(Astro.url);
|
|
||||||
const t = i18n.useTranslations(lang);
|
|
||||||
---
|
|
||||||
|
|
||||||
<div class="content-hidden">
|
|
||||||
<div id="content-setting-tab-proxy">
|
|
||||||
<h1 class="content-setting-header">{t("settings.proxy")}</h1>
|
|
||||||
<ProxyTab />
|
|
||||||
</div>
|
|
||||||
<div id="content-setting-tab-customization">
|
|
||||||
<h1 class="content-setting-header">{t("settings.customization")}</h1>
|
|
||||||
<CustomizationTab />
|
|
||||||
</div>
|
|
||||||
<div id="content-setting-tab-cloaking">
|
|
||||||
<h1 class="content-setting-header">{t("settings.cloaking")}</h1>
|
|
||||||
<p class="content-setting-subtext">{t("settings.cloaking.subtext")}</p>
|
|
||||||
<CloakingTab />
|
|
||||||
</div>
|
|
||||||
<div id="content-setting-tab-credits">
|
|
||||||
<h1 class="content-setting-header">{t("settings.credits")}</h1>
|
|
||||||
<CreditsTab />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="popup">
|
|
||||||
<div class="tabs">
|
|
||||||
<input type="radio" id="setting-tab-proxy" class="setting-tab" name="tab" checked="true" />
|
|
||||||
<label for="setting-tab-proxy">Proxy</label>
|
|
||||||
<input type="radio" id="setting-tab-customization" class="setting-tab" name="tab" />
|
|
||||||
<label for="setting-tab-customization">Customization</label>
|
|
||||||
<input type="radio" id="setting-tab-cloaking" class="setting-tab" name="tab" />
|
|
||||||
<label for="setting-tab-cloaking">Cloaking</label>
|
|
||||||
<input type="radio" id="setting-tab-credits" class="setting-tab" name="tab" />
|
|
||||||
<label for="setting-tab-credits">Credits</label>
|
|
||||||
<div class="marker">
|
|
||||||
<div id="top"></div>
|
|
||||||
<div id="bottom"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="current-content"></div>
|
|
||||||
</div>
|
|
||||||
<script is:inline>
|
|
||||||
window.loadedContentStorage = {};
|
|
||||||
window.currentlySelectedTab;
|
|
||||||
function settingsLoad() {
|
|
||||||
document.addEventListener("astro:before-swap", () => {
|
|
||||||
// Cleanup event, this should remove all added event listeners to prepare for if the page is visited again.
|
|
||||||
window.currentlySelectedTab = "";
|
|
||||||
document.removeEventListener("setting-tabChange", determineListener);
|
|
||||||
});
|
|
||||||
Array.from(document.getElementsByClassName("setting-tab")).forEach((tab) => {
|
|
||||||
let contentToLoad = document.getElementById("content-" + tab.id);
|
|
||||||
if (contentToLoad) {
|
|
||||||
window.loadedContentStorage[tab.id] = contentToLoad.innerHTML;
|
|
||||||
contentToLoad.remove();
|
|
||||||
}
|
|
||||||
|
|
||||||
tab.addEventListener("click", (event) => {
|
|
||||||
loadContent(event.target.id);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
function loadContent(tabID) {
|
|
||||||
if (window.currentlySelectedTab == tabID) return;
|
|
||||||
else window.currentlySelectedTab = tabID;
|
|
||||||
let currentContent = document.getElementById("current-content");
|
|
||||||
if (currentContent) {
|
|
||||||
currentContent.style.opacity = "0";
|
|
||||||
setTimeout(() => {
|
|
||||||
currentContent.innerHTML = window.loadedContentStorage[tabID];
|
|
||||||
currentContent.style.opacity = "1";
|
|
||||||
document.dispatchEvent(new CustomEvent("setting-tabChange", { detail: tabID }));
|
|
||||||
document.dispatchEvent(new CustomEvent("setting-tabLoad", { detail: tabID }));
|
|
||||||
}, 250);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function addDropdownListener() {
|
|
||||||
let dropdown_toggles = document.getElementsByClassName("dropdown-toggle");
|
|
||||||
Array.from(dropdown_toggles).forEach((toggle) => {
|
|
||||||
toggle.onclick = function () {
|
|
||||||
closeOtherDropdowns(toggle.id);
|
|
||||||
toggleDropdown(toggle);
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function toggleDropdown(toggle) {
|
|
||||||
let dropdown = document.getElementById(toggle.id + "-menu");
|
|
||||||
if (dropdown.style.maxHeight == "0px" || dropdown.style.maxHeight == "") {
|
|
||||||
dropdown.style.maxHeight = dropdown.scrollHeight + "px";
|
|
||||||
toggle.style.borderRadius = "10px 10px 0 0";
|
|
||||||
} else {
|
|
||||||
dropdown.style.maxHeight = "0px";
|
|
||||||
setTimeout(() => {
|
|
||||||
toggle.style.borderRadius = "10px";
|
|
||||||
}, 300);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function determineListener(event) {
|
|
||||||
if (event.detail == "setting-tab-proxy") {
|
|
||||||
addDropdownListener();
|
|
||||||
} else if (event.detail == "setting-tab-customization") {
|
|
||||||
addDropdownListener();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeOtherDropdowns(dropdownIDToExclude) {
|
|
||||||
let dropdowns = document.getElementsByClassName("dropdown-menu");
|
|
||||||
Array.from(dropdowns).forEach((dropdown) => {
|
|
||||||
dropdown.style.maxHeight = "0px";
|
|
||||||
setTimeout(() => {
|
|
||||||
if (dropdown.id != dropdownIDToExclude + "-menu") {
|
|
||||||
let dropdown_toggle = document.getElementById(dropdown.id.replace("-menu", ""));
|
|
||||||
dropdown_toggle.style.borderRadius = "10px";
|
|
||||||
}
|
|
||||||
}, 300);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeDropdown(dropdownID) {
|
|
||||||
let dropdown = document.getElementById(dropdownID);
|
|
||||||
if (dropdown) {
|
|
||||||
dropdown.style.maxHeight = "0px";
|
|
||||||
setTimeout(() => {
|
|
||||||
let dropdown_toggle = document.getElementById(dropdownID.replace("-menu", ""));
|
|
||||||
dropdown_toggle.style.borderRadius = "10px";
|
|
||||||
}, 300);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function getLocalStorageValue(localStorageItem, dropdownID) {
|
|
||||||
// I was kinda dumb for not doing this earlier.
|
|
||||||
let dropdown = document.getElementById(dropdownID);
|
|
||||||
let dropdownMenu = document.getElementById(dropdownID + "-menu");
|
|
||||||
|
|
||||||
if (dropdown && dropdownMenu) {
|
|
||||||
// Now we find the child that matches localStorageItem.value.
|
|
||||||
let dropdownItem = Array.from(dropdownMenu.children).find((item) => {
|
|
||||||
return JSON.parse(localStorage.getItem(localStorageItem)).value == item.dataset.setting;
|
|
||||||
});
|
|
||||||
// Now set the inner text to the name in the dropdownItem.
|
|
||||||
return dropdownItem.innerText;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function applySavedLocalStorage(localStorageItem, dropdownID) {
|
|
||||||
if (localStorage.getItem(localStorageItem)) {
|
|
||||||
let dropdown_toggle = document.getElementById(dropdownID);
|
|
||||||
if (dropdown_toggle) {
|
|
||||||
dropdown_toggle.innerText = getLocalStorageValue(localStorageItem, dropdownID);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function applyDropdownEventListeners(item, dropdownID, localStorageItem, optionalCallback) {
|
|
||||||
Array.from(item.children).forEach((item) => {
|
|
||||||
item.onclick = () => {
|
|
||||||
let localStorageItemContent = {
|
|
||||||
name: item.innerText,
|
|
||||||
value: item.dataset.setting,
|
|
||||||
};
|
|
||||||
localStorage.setItem(localStorageItem, JSON.stringify(localStorageItemContent));
|
|
||||||
applySavedLocalStorage(localStorageItem, dropdownID);
|
|
||||||
closeDropdown(item.parentElement.id);
|
|
||||||
if (typeof optionalCallback == "function") {
|
|
||||||
optionalCallback();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function applyInputListeners(item, localStorageItem) {
|
|
||||||
item.addEventListener("input", () => {
|
|
||||||
localStorage.setItem(localStorageItem, item.value);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener("setting-tabChange", determineListener);
|
|
||||||
|
|
||||||
loadContent("setting-tab-proxy");
|
|
||||||
|
|
||||||
function setupCustomizationSettings() {
|
|
||||||
applySavedLocalStorage("alu__selectedTheme", "dropdown__selected-theme");
|
|
||||||
applySavedLocalStorage("alu__selectedLanguage", "dropdown__selected-language");
|
|
||||||
let themeDropdown = document.getElementById("dropdown__selected-theme-menu");
|
|
||||||
let languageDropdown = document.getElementById("dropdown__selected-language-menu");
|
|
||||||
applyDropdownEventListeners(
|
|
||||||
themeDropdown,
|
|
||||||
"dropdown__selected-theme",
|
|
||||||
"alu__selectedTheme",
|
|
||||||
changeTheme
|
|
||||||
);
|
|
||||||
applyDropdownEventListeners(
|
|
||||||
languageDropdown,
|
|
||||||
"dropdown__selected-language",
|
|
||||||
"alu__selectedLanguage",
|
|
||||||
navigateToNewLangaugePage
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function setupCloakingSettings() {
|
|
||||||
Array.from(document.getElementById("cloak-list").children).forEach((cloak) => {
|
|
||||||
cloak.addEventListener("click", () => {
|
|
||||||
let cloakName = cloak.dataset.cloakName;
|
|
||||||
let cloakIcon = cloak.dataset.cloakIcon;
|
|
||||||
|
|
||||||
let localStorageItem = {
|
|
||||||
name: cloakName,
|
|
||||||
icon: cloakIcon,
|
|
||||||
isCustom: false,
|
|
||||||
};
|
|
||||||
localStorage.setItem("alu__selectedCloak", JSON.stringify(localStorageItem));
|
|
||||||
|
|
||||||
if (cloakName == "None") {
|
|
||||||
localStorage.removeItem("alu__selectedCloak");
|
|
||||||
cloakName = "Settings | Alu";
|
|
||||||
cloakIcon = "/favicon.svg";
|
|
||||||
}
|
|
||||||
let link = document.querySelector("link[rel~='icon']");
|
|
||||||
if (!link) {
|
|
||||||
link = document.createElement("link");
|
|
||||||
link.rel = "icon";
|
|
||||||
document.head.appendChild(link);
|
|
||||||
}
|
|
||||||
link.href = cloakIcon;
|
|
||||||
document.title = cloakName;
|
|
||||||
|
|
||||||
if (!cloak.classList.contains("selected")) {
|
|
||||||
Array.from(document.getElementById("cloak-list").children).forEach((cloak2) => {
|
|
||||||
cloak2.classList.remove("selected");
|
|
||||||
});
|
|
||||||
cloak.classList.add("selected");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
let customNameInput = document.getElementById("cloak-custom-name-input");
|
|
||||||
let customFaviconInput = document.getElementById("cloak-custom-favicon-input");
|
|
||||||
if (localStorage.getItem("alu__selectedCloak")) {
|
|
||||||
let selectedCloak = JSON.parse(localStorage.getItem("alu__selectedCloak"));
|
|
||||||
if (selectedCloak.isCustom) {
|
|
||||||
customNameInput.value = selectedCloak.name;
|
|
||||||
customFaviconInput.value = selectedCloak.icon;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById("cloak-custom-button").addEventListener("click", () => {
|
|
||||||
let cloakName = document.getElementById("cloak-custom-name-input").value;
|
|
||||||
let cloakIcon = document.getElementById("cloak-custom-favicon-input").value;
|
|
||||||
let localStorageItem = {
|
|
||||||
name: cloakName,
|
|
||||||
icon: cloakIcon,
|
|
||||||
isCustom: true,
|
|
||||||
};
|
|
||||||
localStorage.setItem("alu__selectedCloak", JSON.stringify(localStorageItem));
|
|
||||||
if (cloakName == "None") {
|
|
||||||
localStorage.removeItem("alu__selectedCloak");
|
|
||||||
cloakName = "Settings | Alu";
|
|
||||||
cloakIcon = "/favicon.svg";
|
|
||||||
}
|
|
||||||
let link = document.querySelector("link[rel~='icon']");
|
|
||||||
if (!link) {
|
|
||||||
link = document.createElement("link");
|
|
||||||
link.rel = "icon";
|
|
||||||
document.head.appendChild(link);
|
|
||||||
}
|
|
||||||
link.href = cloakIcon;
|
|
||||||
document.title = cloakName;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function changeTheme() {
|
|
||||||
let theme = JSON.parse(localStorage.getItem("alu__selectedTheme")).value;
|
|
||||||
if (theme) {
|
|
||||||
document.documentElement.setAttribute("data-theme", theme.toLowerCase());
|
|
||||||
let footer = document.getElementById("footer");
|
|
||||||
if (footer) {
|
|
||||||
footer.dataset.theme = theme.toLowerCase();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function setupSettings(event) {
|
|
||||||
if (event.detail == "setting-tab-proxy") {
|
|
||||||
applySavedLocalStorage("alu__selectedProxy", "dropdown__selected-proxy");
|
|
||||||
applySavedLocalStorage("alu__search_engine", "dropdown__search-engine");
|
|
||||||
applySavedLocalStorage("alu__selectedOpenWith", "dropdown__open-with");
|
|
||||||
applySavedLocalStorage("alu__selectedTransport", "dropdown__transport");
|
|
||||||
let selectedProxyDropdown = document.getElementById("dropdown__selected-proxy-menu");
|
|
||||||
let searchEngineDropdown = document.getElementById("dropdown__search-engine-menu");
|
|
||||||
let openWithDropdown = document.getElementById("dropdown__open-with-menu");
|
|
||||||
let currentTransportDropdown = document.getElementById("dropdown__transport-menu");
|
|
||||||
let searxngUrlInput = document.getElementById("searxng-url-input");
|
|
||||||
let wispURLInput = document.getElementById("wisp-url-input");
|
|
||||||
let bareURLInput = document.getElementById("bare-url-input");
|
|
||||||
let savedSearxngUrl = localStorage.getItem("alu__searxngUrl");
|
|
||||||
if (savedSearxngUrl != null) {
|
|
||||||
if (savedSearxngUrl == "")
|
|
||||||
localStorage.setItem("alu__searxngUrl", "https://searxng.site/");
|
|
||||||
searxngUrlInput.value = localStorage.getItem("alu__searxngUrl");
|
|
||||||
}
|
|
||||||
const useWss = location.protocol == "https:";
|
|
||||||
const webSocketProtocol = useWss ? "wss://" : "ws://";
|
|
||||||
let savedWispUrl = localStorage.getItem("alu__wispUrl");
|
|
||||||
if (savedWispUrl == null || savedWispUrl == "")
|
|
||||||
localStorage.setItem("alu__wispUrl", webSocketProtocol + location.host + "/wisp/");
|
|
||||||
let savedBareUrl = localStorage.getItem("alu__bareUrl");
|
|
||||||
if (savedBareUrl == null || savedBareUrl == "") localStorage.setItem("alu__bareUrl", location.origin + "/bare/");
|
|
||||||
wispURLInput.value = localStorage.getItem("alu__wispUrl");
|
|
||||||
bareURLInput.value = localStorage.getItem("alu__bareUrl");
|
|
||||||
// Proxy settings
|
|
||||||
applyInputListeners(searxngUrlInput, "alu__searxngUrl");
|
|
||||||
applyInputListeners(wispURLInput, "alu__wispUrl");
|
|
||||||
applyInputListeners(bareURLInput, "alu__bareUrl");
|
|
||||||
|
|
||||||
[selectedProxyDropdown, openWithDropdown, currentTransportDropdown].forEach((dropdown) => {
|
|
||||||
let dropdownButton = document.getElementById(dropdown.id.replace("-menu", ""));
|
|
||||||
applyDropdownEventListeners(
|
|
||||||
dropdown,
|
|
||||||
dropdownButton.id,
|
|
||||||
dropdownButton.dataset.localStorageKey
|
|
||||||
);
|
|
||||||
});
|
|
||||||
applyDropdownEventListeners(
|
|
||||||
searchEngineDropdown,
|
|
||||||
"dropdown__search-engine",
|
|
||||||
"alu__search_engine",
|
|
||||||
checkSearxng
|
|
||||||
);
|
|
||||||
checkSearxng();
|
|
||||||
} else if (event.detail == "setting-tab-customization") {
|
|
||||||
setupCustomizationSettings();
|
|
||||||
} else if (event.detail == "setting-tab-cloaking") {
|
|
||||||
setupCloakingSettings();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function checkSearxng() {
|
|
||||||
// This function checks if the "searxng" option was clicked, display an additional option if so.
|
|
||||||
let search_engine = JSON.parse(localStorage.getItem("alu__search_engine"));
|
|
||||||
if (search_engine) {
|
|
||||||
if (search_engine.value.toLowerCase() == "searx") {
|
|
||||||
document.getElementsByClassName("setting__searxng-url")[0].style.opacity = "1";
|
|
||||||
} else {
|
|
||||||
document.getElementsByClassName("setting__searxng-url")[0].style.opacity = "0";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener("setting-tabLoad", setupSettings);
|
|
||||||
|
|
||||||
function navigateToNewLangaugePage() {
|
|
||||||
let value = JSON.parse(localStorage.getItem("alu__selectedLanguage")).value;
|
|
||||||
let currentLanguage = window.location.pathname.split("/")[1];
|
|
||||||
// Do nothing.. because we're already on the page.
|
|
||||||
if (value == currentLanguage) return;
|
|
||||||
switch (value) {
|
|
||||||
case "en":
|
|
||||||
window.location.href = "/en/settings/";
|
|
||||||
break;
|
|
||||||
case "jp":
|
|
||||||
window.location.href = "/jp/settings/";
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
document.addEventListener("astro:after-swap", () => {
|
|
||||||
setTimeout(() => {
|
|
||||||
settingsLoad();
|
|
||||||
}, 300);
|
|
||||||
});
|
|
||||||
settingsLoad();
|
|
||||||
</script>
|
|
||||||
<style is:global>
|
|
||||||
.content-hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#current-content {
|
|
||||||
transition: opacity 250ms ease-in-out;
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
.settings-container {
|
|
||||||
display: flex;
|
|
||||||
gap: 20px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 2;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
row-gap: 5px;
|
|
||||||
}
|
|
||||||
.content-setting-header {
|
|
||||||
color: var(--text-color);
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
.content-setting-subtext {
|
|
||||||
font-size: 20px;
|
|
||||||
color: var(--text-color-accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting-label {
|
|
||||||
color: var(--text-color);
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 400;
|
|
||||||
/* annoying stuff with label elements. */
|
|
||||||
display: block;
|
|
||||||
opacity: 1;
|
|
||||||
margin-block: 1em;
|
|
||||||
margin-inline: 0;
|
|
||||||
user-select: none;
|
|
||||||
width: 100%;
|
|
||||||
cursor: auto;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.setting__searxng-url {
|
|
||||||
margin-top: 10px;
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 250ms ease-in-out;
|
|
||||||
}
|
|
||||||
label {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 700;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #d8d8d8;
|
|
||||||
opacity: 0.6;
|
|
||||||
transition: opacity 0.4s ease-in-out;
|
|
||||||
display: block;
|
|
||||||
width: calc(100% - 48px);
|
|
||||||
text-align: right;
|
|
||||||
z-index: 100;
|
|
||||||
user-select: none;
|
|
||||||
text-align: start;
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
input[type="radio"] {
|
|
||||||
display: none;
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
label:hover,
|
|
||||||
input[type="radio"]:checked + label {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
.popup {
|
|
||||||
width: 98%;
|
|
||||||
height: 80%;
|
|
||||||
margin: 0 auto;
|
|
||||||
min-height: 400px;
|
|
||||||
max-height: 400px;
|
|
||||||
border-radius: 48px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
background-color: var(--background-color);
|
|
||||||
overflow: hidden;
|
|
||||||
display: flex;
|
|
||||||
align-self: center;
|
|
||||||
}
|
|
||||||
.tabs {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 240px;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-around;
|
|
||||||
position: relative;
|
|
||||||
gap: 25px;
|
|
||||||
}
|
|
||||||
@media (max-width: 1116px) {
|
|
||||||
.popup {
|
|
||||||
flex-direction: column;
|
|
||||||
min-height: 80%;
|
|
||||||
max-height: 80%;
|
|
||||||
}
|
|
||||||
.tabs {
|
|
||||||
flex-direction: row;
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 70px;
|
|
||||||
min-height: 70px;
|
|
||||||
gap: 0;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
label {
|
|
||||||
width: auto;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
label {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 375px) {
|
|
||||||
label {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.setting {
|
|
||||||
width: 140px;
|
|
||||||
}
|
|
||||||
.marker {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 200%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
top: calc(-100%);
|
|
||||||
left: 0;
|
|
||||||
transition: transform 0.2s ease-in-out;
|
|
||||||
background-color: var(--accent-color);
|
|
||||||
}
|
|
||||||
.marker #bottom,
|
|
||||||
.marker #top {
|
|
||||||
background-color: var(--background-highlight);
|
|
||||||
}
|
|
||||||
.marker #top {
|
|
||||||
height: calc(50%);
|
|
||||||
margin-bottom: auto;
|
|
||||||
border-radius: 0 0 32px 0;
|
|
||||||
}
|
|
||||||
.marker #bottom {
|
|
||||||
height: calc(50% - 72px);
|
|
||||||
border-radius: 0 32px 0 0;
|
|
||||||
}
|
|
||||||
@media (min-width: 1116px) {
|
|
||||||
#setting-tab-proxy:checked ~ .marker {
|
|
||||||
transform: translateY(0%);
|
|
||||||
}
|
|
||||||
#setting-tab-customization:checked ~ .marker {
|
|
||||||
transform: translateY(13.5%);
|
|
||||||
}
|
|
||||||
#setting-tab-cloaking:checked ~ .marker {
|
|
||||||
transform: translateY(27%);
|
|
||||||
}
|
|
||||||
#setting-tab-credits:checked ~ .marker {
|
|
||||||
transform: translateY(41%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -140,6 +140,7 @@ const { title, optionalPreloads } = Astro.props;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
font-size: 40px;
|
||||||
}
|
}
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
|
||||||
|
|
@ -136,7 +136,7 @@ export function getStaticPaths() {
|
||||||
}
|
}
|
||||||
|
|
||||||
urlInput.addEventListener("keyup", async () => {
|
urlInput.addEventListener("keyup", async () => {
|
||||||
const search = debounce(async () => {
|
debounce(async () => {
|
||||||
return await sendAPIRequest(urlInput, searchSuggestions);
|
return await sendAPIRequest(urlInput, searchSuggestions);
|
||||||
}, 500)();
|
}, 500)();
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,13 @@
|
||||||
---
|
---
|
||||||
import SettingsTablist from "@components/SettingsTablist.astro";
|
import ProxyTab from "@components/SettingsContent/ProxyTab.astro";
|
||||||
import Layout from "../../layouts/Layout.astro";
|
import CustomizationTab from "@components/SettingsContent/CustomizationTab.astro";
|
||||||
|
import CloakingTab from "@components/SettingsContent/CloakingTab.astro";
|
||||||
|
import CreditsTab from "@components/SettingsContent/CreditsTab.astro";
|
||||||
|
import Layout from "src/layouts/Layout.astro";
|
||||||
|
|
||||||
import { STATIC_PATHS, i18n } from "@i18n/utils";
|
import { STATIC_PATHS, i18n } from "@i18n/utils";
|
||||||
const t = i18n.inferLangUseTranslations(Astro.url);
|
const lang = i18n.getLangFromUrl(Astro.url);
|
||||||
|
const t = i18n.useTranslations(lang);
|
||||||
|
|
||||||
export function getStaticPaths() {
|
export function getStaticPaths() {
|
||||||
return STATIC_PATHS;
|
return STATIC_PATHS;
|
||||||
|
|
@ -11,12 +15,540 @@ export function getStaticPaths() {
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title={t("pages.settings")}>
|
<Layout title={t("pages.settings")}>
|
||||||
<h1 class="title-text">Settings</h1>
|
<h1 class="title-text">{t("settings.title")}</h1>
|
||||||
<SettingsTablist />
|
<div class="content-hidden">
|
||||||
|
<div id="content-setting-tab-proxy">
|
||||||
|
<h1 class="content-setting-header">{t("settings.proxy")}</h1>
|
||||||
|
<ProxyTab />
|
||||||
|
</div>
|
||||||
|
<div id="content-setting-tab-customization">
|
||||||
|
<h1 class="content-setting-header">{t("settings.customization")}</h1>
|
||||||
|
<CustomizationTab />
|
||||||
|
</div>
|
||||||
|
<div id="content-setting-tab-cloaking">
|
||||||
|
<h1 class="content-setting-header">{t("settings.cloaking")}</h1>
|
||||||
|
<p class="content-setting-subtext">{t("settings.cloaking.subtext")}</p>
|
||||||
|
<CloakingTab />
|
||||||
|
</div>
|
||||||
|
<div id="content-setting-tab-credits">
|
||||||
|
<h1 class="content-setting-header">{t("settings.credits")}</h1>
|
||||||
|
<CreditsTab />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="popup">
|
||||||
|
<div class="tabs">
|
||||||
|
<input type="radio" id="setting-tab-proxy" class="setting-tab" name="tab" checked="true" />
|
||||||
|
<label for="setting-tab-proxy">Proxy</label>
|
||||||
|
<input type="radio" id="setting-tab-customization" class="setting-tab" name="tab" />
|
||||||
|
<label for="setting-tab-customization">Customization</label>
|
||||||
|
<input type="radio" id="setting-tab-cloaking" class="setting-tab" name="tab" />
|
||||||
|
<label for="setting-tab-cloaking">Cloaking</label>
|
||||||
|
<input type="radio" id="setting-tab-credits" class="setting-tab" name="tab" />
|
||||||
|
<label for="setting-tab-credits">Credits</label>
|
||||||
|
<div class="marker">
|
||||||
|
<div id="top"></div>
|
||||||
|
<div id="bottom"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="current-content"></div>
|
||||||
|
</div>
|
||||||
|
<script is:inline>
|
||||||
|
window.loadedContentStorage = {};
|
||||||
|
window.currentlySelectedTab;
|
||||||
|
function settingsLoad() {
|
||||||
|
document.addEventListener("astro:before-swap", () => {
|
||||||
|
// Cleanup event, this should remove all added event listeners to prepare for if the page is visited again.
|
||||||
|
window.currentlySelectedTab = "";
|
||||||
|
document.removeEventListener("setting-tabChange", determineListener);
|
||||||
|
});
|
||||||
|
Array.from(document.getElementsByClassName("setting-tab")).forEach((tab) => {
|
||||||
|
let contentToLoad = document.getElementById("content-" + tab.id);
|
||||||
|
if (contentToLoad) {
|
||||||
|
window.loadedContentStorage[tab.id] = contentToLoad.innerHTML;
|
||||||
|
contentToLoad.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
tab.addEventListener("click", (event) => {
|
||||||
|
loadContent(event.target.id);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function loadContent(tabID) {
|
||||||
|
if (window.currentlySelectedTab == tabID) return;
|
||||||
|
else window.currentlySelectedTab = tabID;
|
||||||
|
let currentContent = document.getElementById("current-content");
|
||||||
|
if (currentContent) {
|
||||||
|
currentContent.style.opacity = "0";
|
||||||
|
setTimeout(() => {
|
||||||
|
currentContent.innerHTML = window.loadedContentStorage[tabID];
|
||||||
|
currentContent.style.opacity = "1";
|
||||||
|
document.dispatchEvent(new CustomEvent("setting-tabChange", { detail: tabID }));
|
||||||
|
document.dispatchEvent(new CustomEvent("setting-tabLoad", { detail: tabID }));
|
||||||
|
}, 250);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function addDropdownListener() {
|
||||||
|
let dropdown_toggles = document.getElementsByClassName("dropdown-toggle");
|
||||||
|
Array.from(dropdown_toggles).forEach((toggle) => {
|
||||||
|
toggle.onclick = function () {
|
||||||
|
closeOtherDropdowns(toggle.id);
|
||||||
|
toggleDropdown(toggle);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleDropdown(toggle) {
|
||||||
|
let dropdown = document.getElementById(toggle.id + "-menu");
|
||||||
|
if (dropdown.style.maxHeight == "0px" || dropdown.style.maxHeight == "") {
|
||||||
|
dropdown.style.maxHeight = dropdown.scrollHeight + "px";
|
||||||
|
toggle.style.borderRadius = "10px 10px 0 0";
|
||||||
|
} else {
|
||||||
|
dropdown.style.maxHeight = "0px";
|
||||||
|
setTimeout(() => {
|
||||||
|
toggle.style.borderRadius = "10px";
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function determineListener(event) {
|
||||||
|
if (event.detail == "setting-tab-proxy") {
|
||||||
|
addDropdownListener();
|
||||||
|
} else if (event.detail == "setting-tab-customization") {
|
||||||
|
addDropdownListener();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeOtherDropdowns(dropdownIDToExclude) {
|
||||||
|
let dropdowns = document.getElementsByClassName("dropdown-menu");
|
||||||
|
Array.from(dropdowns).forEach((dropdown) => {
|
||||||
|
dropdown.style.maxHeight = "0px";
|
||||||
|
setTimeout(() => {
|
||||||
|
if (dropdown.id != dropdownIDToExclude + "-menu") {
|
||||||
|
let dropdown_toggle = document.getElementById(dropdown.id.replace("-menu", ""));
|
||||||
|
dropdown_toggle.style.borderRadius = "10px";
|
||||||
|
}
|
||||||
|
}, 300);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeDropdown(dropdownID) {
|
||||||
|
let dropdown = document.getElementById(dropdownID);
|
||||||
|
if (dropdown) {
|
||||||
|
dropdown.style.maxHeight = "0px";
|
||||||
|
setTimeout(() => {
|
||||||
|
let dropdown_toggle = document.getElementById(dropdownID.replace("-menu", ""));
|
||||||
|
dropdown_toggle.style.borderRadius = "10px";
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getLocalStorageValue(localStorageItem, dropdownID) {
|
||||||
|
// I was kinda dumb for not doing this earlier.
|
||||||
|
let dropdown = document.getElementById(dropdownID);
|
||||||
|
let dropdownMenu = document.getElementById(dropdownID + "-menu");
|
||||||
|
|
||||||
|
if (dropdown && dropdownMenu) {
|
||||||
|
// Now we find the child that matches localStorageItem.value.
|
||||||
|
let dropdownItem = Array.from(dropdownMenu.children).find((item) => {
|
||||||
|
return JSON.parse(localStorage.getItem(localStorageItem)).value == item.dataset.setting;
|
||||||
|
});
|
||||||
|
// Now set the inner text to the name in the dropdownItem.
|
||||||
|
return dropdownItem.innerText;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function applySavedLocalStorage(localStorageItem, dropdownID) {
|
||||||
|
if (localStorage.getItem(localStorageItem)) {
|
||||||
|
let dropdown_toggle = document.getElementById(dropdownID);
|
||||||
|
if (dropdown_toggle) {
|
||||||
|
dropdown_toggle.innerText = getLocalStorageValue(localStorageItem, dropdownID);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyDropdownEventListeners(item, dropdownID, localStorageItem, optionalCallback) {
|
||||||
|
Array.from(item.children).forEach((item) => {
|
||||||
|
item.onclick = () => {
|
||||||
|
let localStorageItemContent = {
|
||||||
|
name: item.innerText,
|
||||||
|
value: item.dataset.setting,
|
||||||
|
};
|
||||||
|
localStorage.setItem(localStorageItem, JSON.stringify(localStorageItemContent));
|
||||||
|
applySavedLocalStorage(localStorageItem, dropdownID);
|
||||||
|
closeDropdown(item.parentElement.id);
|
||||||
|
if (typeof optionalCallback == "function") {
|
||||||
|
optionalCallback();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyInputListeners(item, localStorageItem) {
|
||||||
|
item.addEventListener("input", () => {
|
||||||
|
localStorage.setItem(localStorageItem, item.value);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("setting-tabChange", determineListener);
|
||||||
|
|
||||||
|
loadContent("setting-tab-proxy");
|
||||||
|
|
||||||
|
function setupCustomizationSettings() {
|
||||||
|
applySavedLocalStorage("alu__selectedTheme", "dropdown__selected-theme");
|
||||||
|
applySavedLocalStorage("alu__selectedLanguage", "dropdown__selected-language");
|
||||||
|
let themeDropdown = document.getElementById("dropdown__selected-theme-menu");
|
||||||
|
let languageDropdown = document.getElementById("dropdown__selected-language-menu");
|
||||||
|
applyDropdownEventListeners(
|
||||||
|
themeDropdown,
|
||||||
|
"dropdown__selected-theme",
|
||||||
|
"alu__selectedTheme",
|
||||||
|
changeTheme
|
||||||
|
);
|
||||||
|
applyDropdownEventListeners(
|
||||||
|
languageDropdown,
|
||||||
|
"dropdown__selected-language",
|
||||||
|
"alu__selectedLanguage",
|
||||||
|
navigateToNewLangaugePage
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupCloakingSettings() {
|
||||||
|
Array.from(document.getElementById("cloak-list").children).forEach((cloak) => {
|
||||||
|
cloak.addEventListener("click", () => {
|
||||||
|
let cloakName = cloak.dataset.cloakName;
|
||||||
|
let cloakIcon = cloak.dataset.cloakIcon;
|
||||||
|
|
||||||
|
let localStorageItem = {
|
||||||
|
name: cloakName,
|
||||||
|
icon: cloakIcon,
|
||||||
|
isCustom: false,
|
||||||
|
};
|
||||||
|
localStorage.setItem("alu__selectedCloak", JSON.stringify(localStorageItem));
|
||||||
|
|
||||||
|
if (cloakName == "None") {
|
||||||
|
localStorage.removeItem("alu__selectedCloak");
|
||||||
|
cloakName = "Settings | Alu";
|
||||||
|
cloakIcon = "/favicon.svg";
|
||||||
|
}
|
||||||
|
let link = document.querySelector("link[rel~='icon']");
|
||||||
|
if (!link) {
|
||||||
|
link = document.createElement("link");
|
||||||
|
link.rel = "icon";
|
||||||
|
document.head.appendChild(link);
|
||||||
|
}
|
||||||
|
link.href = cloakIcon;
|
||||||
|
document.title = cloakName;
|
||||||
|
|
||||||
|
if (!cloak.classList.contains("selected")) {
|
||||||
|
Array.from(document.getElementById("cloak-list").children).forEach((cloak2) => {
|
||||||
|
cloak2.classList.remove("selected");
|
||||||
|
});
|
||||||
|
cloak.classList.add("selected");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
let customNameInput = document.getElementById("cloak-custom-name-input");
|
||||||
|
let customFaviconInput = document.getElementById("cloak-custom-favicon-input");
|
||||||
|
if (localStorage.getItem("alu__selectedCloak")) {
|
||||||
|
let selectedCloak = JSON.parse(localStorage.getItem("alu__selectedCloak"));
|
||||||
|
if (selectedCloak.isCustom) {
|
||||||
|
customNameInput.value = selectedCloak.name;
|
||||||
|
customFaviconInput.value = selectedCloak.icon;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("cloak-custom-button").addEventListener("click", () => {
|
||||||
|
let cloakName = document.getElementById("cloak-custom-name-input").value;
|
||||||
|
let cloakIcon = document.getElementById("cloak-custom-favicon-input").value;
|
||||||
|
let localStorageItem = {
|
||||||
|
name: cloakName,
|
||||||
|
icon: cloakIcon,
|
||||||
|
isCustom: true,
|
||||||
|
};
|
||||||
|
localStorage.setItem("alu__selectedCloak", JSON.stringify(localStorageItem));
|
||||||
|
if (cloakName == "None") {
|
||||||
|
localStorage.removeItem("alu__selectedCloak");
|
||||||
|
cloakName = "Settings | Alu";
|
||||||
|
cloakIcon = "/favicon.svg";
|
||||||
|
}
|
||||||
|
let link = document.querySelector("link[rel~='icon']");
|
||||||
|
if (!link) {
|
||||||
|
link = document.createElement("link");
|
||||||
|
link.rel = "icon";
|
||||||
|
document.head.appendChild(link);
|
||||||
|
}
|
||||||
|
link.href = cloakIcon;
|
||||||
|
document.title = cloakName;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function changeTheme() {
|
||||||
|
let theme = JSON.parse(localStorage.getItem("alu__selectedTheme")).value;
|
||||||
|
if (theme) {
|
||||||
|
document.documentElement.setAttribute("data-theme", theme.toLowerCase());
|
||||||
|
let footer = document.getElementById("footer");
|
||||||
|
if (footer) {
|
||||||
|
footer.dataset.theme = theme.toLowerCase();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupSettings(event) {
|
||||||
|
if (event.detail == "setting-tab-proxy") {
|
||||||
|
applySavedLocalStorage("alu__selectedProxy", "dropdown__selected-proxy");
|
||||||
|
applySavedLocalStorage("alu__search_engine", "dropdown__search-engine");
|
||||||
|
applySavedLocalStorage("alu__selectedOpenWith", "dropdown__open-with");
|
||||||
|
applySavedLocalStorage("alu__selectedTransport", "dropdown__transport");
|
||||||
|
let selectedProxyDropdown = document.getElementById("dropdown__selected-proxy-menu");
|
||||||
|
let searchEngineDropdown = document.getElementById("dropdown__search-engine-menu");
|
||||||
|
let openWithDropdown = document.getElementById("dropdown__open-with-menu");
|
||||||
|
let currentTransportDropdown = document.getElementById("dropdown__transport-menu");
|
||||||
|
let searxngUrlInput = document.getElementById("searxng-url-input");
|
||||||
|
let wispURLInput = document.getElementById("wisp-url-input");
|
||||||
|
let bareURLInput = document.getElementById("bare-url-input");
|
||||||
|
let savedSearxngUrl = localStorage.getItem("alu__searxngUrl");
|
||||||
|
if (savedSearxngUrl != null) {
|
||||||
|
if (savedSearxngUrl == "")
|
||||||
|
localStorage.setItem("alu__searxngUrl", "https://searxng.site/");
|
||||||
|
searxngUrlInput.value = localStorage.getItem("alu__searxngUrl");
|
||||||
|
}
|
||||||
|
const useWss = location.protocol == "https:";
|
||||||
|
const webSocketProtocol = useWss ? "wss://" : "ws://";
|
||||||
|
let savedWispUrl = localStorage.getItem("alu__wispUrl");
|
||||||
|
if (savedWispUrl == null || savedWispUrl == "")
|
||||||
|
localStorage.setItem("alu__wispUrl", webSocketProtocol + location.host + "/wisp/");
|
||||||
|
let savedBareUrl = localStorage.getItem("alu__bareUrl");
|
||||||
|
if (savedBareUrl == null || savedBareUrl == "") localStorage.setItem("alu__bareUrl", location.origin + "/bare/");
|
||||||
|
wispURLInput.value = localStorage.getItem("alu__wispUrl");
|
||||||
|
bareURLInput.value = localStorage.getItem("alu__bareUrl");
|
||||||
|
// Proxy settings
|
||||||
|
applyInputListeners(searxngUrlInput, "alu__searxngUrl");
|
||||||
|
applyInputListeners(wispURLInput, "alu__wispUrl");
|
||||||
|
applyInputListeners(bareURLInput, "alu__bareUrl");
|
||||||
|
|
||||||
|
[selectedProxyDropdown, openWithDropdown, currentTransportDropdown].forEach((dropdown) => {
|
||||||
|
let dropdownButton = document.getElementById(dropdown.id.replace("-menu", ""));
|
||||||
|
applyDropdownEventListeners(
|
||||||
|
dropdown,
|
||||||
|
dropdownButton.id,
|
||||||
|
dropdownButton.dataset.localStorageKey
|
||||||
|
);
|
||||||
|
});
|
||||||
|
applyDropdownEventListeners(
|
||||||
|
searchEngineDropdown,
|
||||||
|
"dropdown__search-engine",
|
||||||
|
"alu__search_engine",
|
||||||
|
checkSearxng
|
||||||
|
);
|
||||||
|
checkSearxng();
|
||||||
|
} else if (event.detail == "setting-tab-customization") {
|
||||||
|
setupCustomizationSettings();
|
||||||
|
} else if (event.detail == "setting-tab-cloaking") {
|
||||||
|
setupCloakingSettings();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkSearxng() {
|
||||||
|
// This function checks if the "searxng" option was clicked, display an additional option if so.
|
||||||
|
let search_engine = JSON.parse(localStorage.getItem("alu__search_engine"));
|
||||||
|
if (search_engine) {
|
||||||
|
if (search_engine.value.toLowerCase() == "searx") {
|
||||||
|
document.getElementsByClassName("setting__searxng-url")[0].style.opacity = "1";
|
||||||
|
} else {
|
||||||
|
document.getElementsByClassName("setting__searxng-url")[0].style.opacity = "0";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("setting-tabLoad", setupSettings);
|
||||||
|
|
||||||
|
function navigateToNewLangaugePage() {
|
||||||
|
let value = JSON.parse(localStorage.getItem("alu__selectedLanguage")).value;
|
||||||
|
let currentLanguage = window.location.pathname.split("/")[1];
|
||||||
|
// Do nothing.. because we're already on the page.
|
||||||
|
if (value == currentLanguage) return;
|
||||||
|
switch (value) {
|
||||||
|
case "en":
|
||||||
|
window.location.href = "/en/settings/";
|
||||||
|
break;
|
||||||
|
case "jp":
|
||||||
|
window.location.href = "/jp/settings/";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
document.addEventListener("astro:after-swap", () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
settingsLoad();
|
||||||
|
}, 300);
|
||||||
|
});
|
||||||
|
settingsLoad();
|
||||||
|
</script>
|
||||||
|
<style is:global>
|
||||||
|
.content-hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#current-content {
|
||||||
|
transition: opacity 250ms ease-in-out;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
.settings-container {
|
||||||
|
display: flex;
|
||||||
|
gap: 20px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
row-gap: 5px;
|
||||||
|
}
|
||||||
|
.content-setting-header {
|
||||||
|
color: var(--text-color);
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.content-setting-subtext {
|
||||||
|
font-size: 20px;
|
||||||
|
color: var(--text-color-accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting-label {
|
||||||
|
color: var(--text-color);
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 400;
|
||||||
|
/* annoying stuff with label elements. */
|
||||||
|
display: block;
|
||||||
|
opacity: 1;
|
||||||
|
margin-block: 1em;
|
||||||
|
margin-inline: 0;
|
||||||
|
user-select: none;
|
||||||
|
width: 100%;
|
||||||
|
cursor: auto;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.setting__searxng-url {
|
||||||
|
margin-top: 10px;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 250ms ease-in-out;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #d8d8d8;
|
||||||
|
opacity: 0.6;
|
||||||
|
transition: opacity 0.4s ease-in-out;
|
||||||
|
display: block;
|
||||||
|
width: calc(100% - 48px);
|
||||||
|
text-align: right;
|
||||||
|
z-index: 100;
|
||||||
|
user-select: none;
|
||||||
|
text-align: start;
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
input[type="radio"] {
|
||||||
|
display: none;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
label:hover,
|
||||||
|
input[type="radio"]:checked + label {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.popup {
|
||||||
|
width: 98%;
|
||||||
|
height: 80%;
|
||||||
|
margin: 0 auto;
|
||||||
|
min-height: 400px;
|
||||||
|
max-height: 400px;
|
||||||
|
border-radius: 48px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: var(--background-color);
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
.tabs {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 240px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
position: relative;
|
||||||
|
gap: 25px;
|
||||||
|
}
|
||||||
|
@media (max-width: 1116px) {
|
||||||
|
.popup {
|
||||||
|
flex-direction: column;
|
||||||
|
min-height: 80%;
|
||||||
|
max-height: 80%;
|
||||||
|
}
|
||||||
|
.tabs {
|
||||||
|
flex-direction: row;
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 70px;
|
||||||
|
min-height: 70px;
|
||||||
|
gap: 0;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
label {
|
||||||
|
width: auto;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
label {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 375px) {
|
||||||
|
label {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.setting {
|
||||||
|
width: 140px;
|
||||||
|
}
|
||||||
|
.marker {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 200%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
top: calc(-100%);
|
||||||
|
left: 0;
|
||||||
|
transition: transform 0.2s ease-in-out;
|
||||||
|
background-color: var(--accent-color);
|
||||||
|
}
|
||||||
|
.marker #bottom,
|
||||||
|
.marker #top {
|
||||||
|
background-color: var(--background-highlight);
|
||||||
|
}
|
||||||
|
.marker #top {
|
||||||
|
height: calc(50%);
|
||||||
|
margin-bottom: auto;
|
||||||
|
border-radius: 0 0 32px 0;
|
||||||
|
}
|
||||||
|
.marker #bottom {
|
||||||
|
height: calc(50% - 72px);
|
||||||
|
border-radius: 0 32px 0 0;
|
||||||
|
}
|
||||||
|
@media (min-width: 1116px) {
|
||||||
|
#setting-tab-proxy:checked ~ .marker {
|
||||||
|
transform: translateY(0%);
|
||||||
|
}
|
||||||
|
#setting-tab-customization:checked ~ .marker {
|
||||||
|
transform: translateY(13.5%);
|
||||||
|
}
|
||||||
|
#setting-tab-cloaking:checked ~ .marker {
|
||||||
|
transform: translateY(27%);
|
||||||
|
}
|
||||||
|
#setting-tab-credits:checked ~ .marker {
|
||||||
|
transform: translateY(41%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
<style>
|
|
||||||
h1 {
|
|
||||||
font-size: 40px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue