Merge pull request #191 from IncognitoTGT/main

Themes and css improvements
This commit is contained in:
rift 2023-12-31 13:53:43 -06:00 committed by GitHub
commit 6c46bea1bd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 132 additions and 19 deletions

View file

@ -57,6 +57,7 @@ For support, join our discord: discord.gg/unblocker
- [Dynamic (one of the proxies we use)](https://github.com/NebulaServices/Dynamic)
- [Rammerhead (one of the proxies we use)](https://github.com/binary-person/rammerhead)
- [Bare Server Node](https://github.com/tomphttp/bare-server-node)
- [Catppuccin (for the themes)](https://github.com/catppuccin/catppuccin)
## License

View file

@ -0,0 +1,29 @@
@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
:root {
--background-primary: #303446;
--background-lighter: #232634;
--navbar-color: #232634;
--navbar-height: 60px;
--navbar-text-color: #ca9ee6;
--navbar-link-color: #8caaee;
--navbar-link-hover-color: #ca9ee6;
--navbar-font: "Roboto";
--input-text-color: #c6d0f5;
--input-placeholder-color: #b5bfe2;
--input-background-color: #292c3c;
--input-border-color: #ca9ee6;
--input-border-size: 1.3px;
--navbar-logo-filter: none;
--dropdown-option-hover-color: #232634;
--tab-color: #414559;
}
.font-inter {
font-family: "Inter", sans-serif;
font-weight: 300;
}
.font-roboto {
font-family: "Roboto";
}

View file

@ -0,0 +1,30 @@
@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
:root {
--background-primary: #eff1f5;
--background-lighter: #dce0e8;
--navbar-color: #dce0e8;
--navbar-height: 60px;
--navbar-text-color: #8839ef;
--navbar-link-color: #1e66f5;
--navbar-link-hover-color: #8839ef;
--navbar-font: "Roboto";
--input-text-color: #4c4f69;
--input-placeholder-color: #5c5f77;
--input-background-color: #e6e9ef;
--input-border-color: #8839ef;
--input-border-size: 1.3px;
--navbar-logo-filter: none;
--dropdown-option-hover-color: #dce0e8;
--tab-color: #ccd0da;
}
.font-inter {
font-family: "Inter", sans-serif;
font-weight: 300;
}
.font-roboto {
font-family: "Roboto";
color: #4c4f69
}

View file

@ -0,0 +1,29 @@
@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap");
:root {
--background-primary: #24273a;
--background-lighter: #181926;
--navbar-color: #181926;
--navbar-height: 60px;
--navbar-text-color: #c6a0f6;
--navbar-link-color: #8aadf4;
--navbar-link-hover-color: #c6a0f6;
--navbar-font: "Roboto";
--input-text-color: #cad3f5;
--input-placeholder-color: #b8c0e0;
--input-background-color: #1e2030;
--input-border-color: #c6a0f6;
--input-border-size: 1.3px;
--navbar-logo-filter: none;
--dropdown-option-hover-color: #181926;
--tab-color: #363a4f;
}
.font-inter {
font-family: "Inter", sans-serif;
font-weight: 300;
}
.font-roboto {
font-family: "Roboto";
}

View file

@ -16,6 +16,7 @@
--input-border-size: 1.3px;
--navbar-logo-filter: none;
--dropdown-option-hover-color: #11111b;
--tab-color: #313244;
}
.font-inter {

View file

@ -16,6 +16,7 @@
--input-border-size: 1.3px;
--navbar-logo-filter: none;
--dropdown-option-hover-color: #312a49;
--tab-color: var(--black);
}
.font-inter {

View file

@ -97,7 +97,12 @@ export function IframeHeader(props: { url: string }) {
script.src = "https://cdn.jsdelivr.net/npm/eruda";
script.onload = function () {
if (!proxyWindow) return;
proxyWindow.eruda.init();
proxyWindow.eruda.init({
defaults: {
displaySize: 45,
theme: 'Material Palenight'
}
});
proxyWindow.eruda.show();
};
proxyDocument.head.appendChild(script);

View file

@ -66,6 +66,9 @@
"comingsoon": "Coming soon!",
"themes": {
"main": "Main",
"catppuccinMocha": "Catppuccin Mocha"
"catppuccinMocha": "Catppuccin Mocha",
"catppuccinMacchiato": "Catppuccin Macchiato",
"catppuccinFrappe": "Catppuccin Frappe",
"catppuccinLatte": "Catppuccin Latte"
}
}

View file

@ -66,6 +66,9 @@
"comingsoon": "¡Próximamente!",
"themes": {
"main": "Por defecto",
"catppuccinMocha": "Catppuccin Mocha"
"catppuccinMocha": "Catppuccin Mocha",
"catppuccinMacchiato": "Catppuccin Macchiato",
"catppuccinFrappe": "Catppuccin Frappe",
"catppuccinLatte": "Catppuccin Latte"
}
}

View file

@ -66,6 +66,9 @@
"comingsoon": "近日公開",
"themes": {
"main": "デフォルト",
"catppuccinMocha": "Catppuccin Mocha"
"catppuccinMocha": "Catppuccin Mocha",
"catppuccinMacchiato": "Catppuccin Macchiato",
"catppuccinFrappe": "Catppuccin Frappe",
"catppuccinLatte": "Catppuccin Latte"
}
}

View file

@ -9,7 +9,10 @@ function Customization({ id, active }) {
const themes = [
{ id: "main", label: t("themes.main") },
{ id: "catppucinMocha", label: t("themes.catppuccinMocha") }
{ id: "catppuccinMocha", label: t("themes.catppuccinMocha") },
{ id: "catppuccinMacchiato", label: t("themes.catppuccinMacchiato") },
{ id: "catppuccinFrappe", label: t("themes.catppuccinFrappe") },
{ id: "catppuccinLatte", label: t("themes.catppuccinLatte") }
];
return (
@ -26,8 +29,8 @@ function Customization({ id, active }) {
className="content-card flex w-full flex-col items-center justify-center text-center"
>
<div class="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
<div class="p-2 text-3xl">{t("settings.theme.title")}</div>
<div class="text-md p-4">{t("settings.theme.subtitle")}</div>
<div class="p-2 text-3xl font-bold text-input-text">{t("settings.theme.title")}</div>
<div class="text-md p-4 font-bold text-input-text">{t("settings.theme.subtitle")}</div>
<Dropdown storageKey="theme" options={themes} refresh={true} />
</div>
</motion.div>

View file

@ -26,8 +26,8 @@ const Misc = ({ id, active }) => {
className="content-card flex w-full flex-row flex-wrap justify-center gap-4"
>
<div class="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
<div class="text-3xl">{t("settings.languages.title")}</div>
<div class="text-md">{t("settings.languages.subtitle")}</div>
<div class="text-3xl font-bold text-input-text">{t("settings.languages.title")}</div>
<div class="text-md font-bold text-input-text">{t("settings.languages.subtitle")}</div>
<Dropdown
storageKey="i18nextLng"
options={languages}

View file

@ -39,13 +39,13 @@ const Proxy = ({ id, active }) => {
className="content-card flex w-full flex-row flex-wrap justify-center gap-4"
>
<div class="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
<div class="p-2 text-3xl">{t("settings.proxy.title")}</div>
<div class="text-md p-4">{t("settings.proxy.subtitle")}</div>
<div class="p-2 text-3xl font-bold text-input-text">{t("settings.proxy.title")}</div>
<div class="text-md p-4 font-bold text-input-text">{t("settings.proxy.subtitle")}</div>
<Dropdown storageKey="proxy" options={engines} refresh={false} />
</div>
<div class="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
<div class="p-2 text-3xl">{t("settings.proxymodes.title")}</div>
<div class="text-md p-4">{t("settings.proxymodes.subtitle")}</div>
<div class="p-2 text-3xl font-bold text-input-text">{t("settings.proxymodes.title")}</div>
<div class="text-md p-4 font-bold text-input-text">{t("settings.proxymodes.subtitle")}</div>
<Dropdown
storageKey="proxyMode"
options={proxyModes}
@ -53,8 +53,8 @@ const Proxy = ({ id, active }) => {
/>
</div>
<div class="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
<div class="p-2 text-3xl">{t("settings.search.title")}</div>
<div class="text-md p-4">{t("settings.search.subtitle")}</div>
<div class="p-2 text-3xl font-bold text-input-text">{t("settings.search.title")}</div>
<div class="text-md p-4 font-bold text-input-text">{t("settings.search.subtitle")}</div>
<Dropdown
storageKey="searchEngine"
options={searchEngines}

View file

@ -19,8 +19,8 @@ const TabSettings = ({ id, active }) => {
variants={settingsPageVariant}
className="content-card flex w-full flex-col items-center justify-center text-center"
>
<div class="text-3xl">{t("settings.cloaking.title")}</div>
<div class="text-md pb-5">{t("settings.cloaking.subtitle")}</div>
<div class="text-3xl font-bold text-input-text">{t("settings.cloaking.title")}</div>
<div class="text-md font-bold pb-5 text-input-text">{t("settings.cloaking.subtitle")}</div>
<div class="flex flex-row space-x-4">
<CloakPreset faviconUrl="none" title="none" />
<CloakPreset
@ -39,6 +39,10 @@ const TabSettings = ({ id, active }) => {
faviconUrl="https://ssl.gstatic.com/classroom/ic_product_classroom_144.png"
title="Home"
/>
<CloakPreset
faviconUrl="https://asset-cdn.schoology.com/sites/all/themes/schoology_theme/favicon.ico"
title="Schoology"
/>
</div>
</motion.div>
</motion.div>

View file

@ -1,3 +1,4 @@
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap");
* {
box-sizing: border-box;
}
@ -11,7 +12,7 @@
body {
-webkit-font-smoothing: antialiased;
font-family: Arial, Helvetica, sans-serif;
font-family: Roboto;
background: var(--active-color);
transition: background 1.5s ease;
}
@ -62,7 +63,7 @@ img {
height: 30px;
width: 30px;
min-width: 30px;
fill: var(--black);
fill: var(--tab-color);
transition: fill 0.5s ease;
}