Merge pull request #191 from IncognitoTGT/main
Themes and css improvements
This commit is contained in:
commit
6c46bea1bd
15 changed files with 132 additions and 19 deletions
|
|
@ -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
|
||||
|
||||
|
|
|
|||
29
public/themes/catppuccinFrappe.css
Normal file
29
public/themes/catppuccinFrappe.css
Normal 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";
|
||||
}
|
||||
30
public/themes/catppuccinLatte.css
Normal file
30
public/themes/catppuccinLatte.css
Normal 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
|
||||
}
|
||||
29
public/themes/catppuccinMacchiato.css
Normal file
29
public/themes/catppuccinMacchiato.css
Normal 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";
|
||||
}
|
||||
|
|
@ -16,6 +16,7 @@
|
|||
--input-border-size: 1.3px;
|
||||
--navbar-logo-filter: none;
|
||||
--dropdown-option-hover-color: #11111b;
|
||||
--tab-color: #313244;
|
||||
}
|
||||
|
||||
.font-inter {
|
||||
|
|
@ -16,6 +16,7 @@
|
|||
--input-border-size: 1.3px;
|
||||
--navbar-logo-filter: none;
|
||||
--dropdown-option-hover-color: #312a49;
|
||||
--tab-color: var(--black);
|
||||
}
|
||||
|
||||
.font-inter {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -66,6 +66,9 @@
|
|||
"comingsoon": "近日公開",
|
||||
"themes": {
|
||||
"main": "デフォルト",
|
||||
"catppuccinMocha": "Catppuccin Mocha"
|
||||
"catppuccinMocha": "Catppuccin Mocha",
|
||||
"catppuccinMacchiato": "Catppuccin Macchiato",
|
||||
"catppuccinFrappe": "Catppuccin Frappe",
|
||||
"catppuccinLatte": "Catppuccin Latte"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue