EZPPFarm/EZPPLauncher
2
0
Fork 0
Code Issues 1 Pull Requests Projects 1 Releases 14 Activity

add proper dark/light mode

Browse Source
This commit is contained in:
HorizonCode 2024-01-09 14:49:22 +01:00
parent 800a424b67
commit a4faa9dd1a
3 changed files with 76 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
public/index.html
View File

@ -1,20 +1,22 @@
<!DOCTYPE html>
<html lang="en" data-theme="dark" class="dark">
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>EZPPLauncher</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel='icon' type='image/png' href='/favicon.png'>
<link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet"
/>
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="stylesheet" href="/global.css" />
<link rel="stylesheet" href="/build/bundle.css" />
<script defer src='/build/bundle.js'></script>
<script defer src="/build/bundle.js"></script>
</head>
<body class="bg-gray-900">
</body>
<body class="bg-gray-100 dark:bg-gray-900"></body>
</html>

60
src/App.svelte
View File

@ -5,18 +5,28 @@
DropdownItem,
DropdownHeader,
DropdownDivider,
Button,
Checkbox,
DarkMode,
Progressbar,
} from "flowbite-svelte";
import ezppLogo from "../public/favicon.png";
let patch = true;
let rand = 0;
</script>
<div class="p-2 flex flex-row justify-between items-center">
<div class="flex flex-row items-center">
<img src={ezppLogo} class="w-12 h-12 mr-2" />
<span class="text-gray-100 text-xl font-extralight">EZPPLauncher</span>
<img src={ezppLogo} alt="EZPPFarm Logo" class="w-12 h-12 mr-2" />
<span class="text-gray-700 dark:text-gray-100 text-xl font-extralight"
>EZPPLauncher</span
>
</div>
<div class="w-fill cursor-pointer flex md:order-2">
<div class="flex flex-row gap-2 w-fill cursor-pointer md:order-2">
<DarkMode class="dark:border-gray-700"></DarkMode>
<Avatar
class="rounded-lg hover:ring hover:ring-4 hover:ring-gray-800"
class="rounded-lg border dark:border-gray-700 hover:ring-4 hover:ring-gray-200 dark:hover:ring-gray-800"
src="https://a.ez-pp.farm/1001"
id="avatar-menu"
/>
@ -29,23 +39,41 @@
>
</DropdownHeader>
<DropdownItem
class="border-0 !bg-gray-700 active:!bg-gray-600 hover:!bg-gray-800 transition-colors"
class="border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
>Profile</DropdownItem
>
<DropdownItem
class="border-0 !bg-gray-700 active:!bg-gray-600 hover:!bg-gray-800 transition-colors"
class="border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
>Settings</DropdownItem
>
<DropdownDivider />
<DropdownItem
class="border-0 !bg-gray-700 active:!bg-gray-600 hover:!bg-gray-800 transition-colors"
class="border-0 dark:!bg-gray-700 dark:active:!bg-gray-900 dark:hover:!bg-gray-800 transition-colors"
>Sign out</DropdownItem
>
</Dropdown>
</div>
<main class="p-1">
<div class="container border border-gray-700 rounded-lg"></div>
<main class="p-5">
<div
class="container flex flex-col items-center justify-center gap-5 border border-gray-300 dark:border-gray-700 rounded-lg"
>
<Button
color="light"
size="xl"
on:click={() => (rand = Math.random() * 100)}>Launch</Button
>
<Checkbox color="primary" bind:checked={patch}>
Patching {patch ? "enabled" : "disabled"}
</Checkbox>
<Progressbar
animate={true}
progress={rand}
labelInside={true}
size="h-6"
labelInsideClass="bg-primary-600 drop-shadow-xl text-gray-100 text-base font-medium text-center p-1 leading-none rounded-full"
/>
</div>
</main>
<style>
@ -54,18 +82,4 @@
padding: 1em;
margin: 0 auto;
}
h1 {
font-size: 2rem;
margin: 0;
font-weight: 300;
font-style: normal;
color: #ccc;
text-transform: uppercase;
letter-spacing: 0.1em;
text-shadow: 0 0 1px #000;
text-align: center;
padding: 0.5em 0;
border-bottom: 1px solid #353535;
margin-bottom: 1.5rem;
}
</style>

22
src/app.pcss
View File

@ -6,3 +6,25 @@
* {
font-family: "Prompt";
}
html .cet-titlebar {
background-color: #ececec !important;
color: #202020 !important;
}
html.dark .cet-titlebar {
background-color: #202020 !important;
color: #ececec !important;
}
html .cet-titlebar .cet-control-icon svg {
fill: #000;
}
html.dark .cet-titlebar .cet-control-icon svg {
fill: #fff;
}
.cet-titlebar .cet-icon {
display: none;
}