add proper dark/light mode
This commit is contained in:
parent
800a424b67
commit
a4faa9dd1a
|
@ -1,20 +1,22 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" data-theme="dark" class="dark">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset='utf-8'>
|
<meta charset="utf-8" />
|
||||||
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
|
|
||||||
<title>EZPPLauncher</title>
|
<title>EZPPLauncher</title>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<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
|
||||||
<link rel='icon' type='image/png' href='/favicon.png'>
|
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"
|
||||||
<link rel='stylesheet' href='/global.css'>
|
rel="stylesheet"
|
||||||
<link rel='stylesheet' href='/build/bundle.css'>
|
/>
|
||||||
|
<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>
|
</head>
|
||||||
|
|
||||||
<body class="bg-gray-900">
|
<body class="bg-gray-100 dark:bg-gray-900"></body>
|
||||||
</body>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -5,18 +5,28 @@
|
||||||
DropdownItem,
|
DropdownItem,
|
||||||
DropdownHeader,
|
DropdownHeader,
|
||||||
DropdownDivider,
|
DropdownDivider,
|
||||||
|
Button,
|
||||||
|
Checkbox,
|
||||||
|
DarkMode,
|
||||||
|
Progressbar,
|
||||||
} from "flowbite-svelte";
|
} from "flowbite-svelte";
|
||||||
import ezppLogo from "../public/favicon.png";
|
import ezppLogo from "../public/favicon.png";
|
||||||
|
|
||||||
|
let patch = true;
|
||||||
|
let rand = 0;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="p-2 flex flex-row justify-between items-center">
|
<div class="p-2 flex flex-row justify-between items-center">
|
||||||
<div class="flex flex-row items-center">
|
<div class="flex flex-row items-center">
|
||||||
<img src={ezppLogo} class="w-12 h-12 mr-2" />
|
<img src={ezppLogo} alt="EZPPFarm Logo" class="w-12 h-12 mr-2" />
|
||||||
<span class="text-gray-100 text-xl font-extralight">EZPPLauncher</span>
|
<span class="text-gray-700 dark:text-gray-100 text-xl font-extralight"
|
||||||
|
>EZPPLauncher</span
|
||||||
|
>
|
||||||
</div>
|
</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
|
<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"
|
src="https://a.ez-pp.farm/1001"
|
||||||
id="avatar-menu"
|
id="avatar-menu"
|
||||||
/>
|
/>
|
||||||
|
@ -29,23 +39,41 @@
|
||||||
>
|
>
|
||||||
</DropdownHeader>
|
</DropdownHeader>
|
||||||
<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"
|
||||||
>Profile</DropdownItem
|
>Profile</DropdownItem
|
||||||
>
|
>
|
||||||
<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
|
>Settings</DropdownItem
|
||||||
>
|
>
|
||||||
<DropdownDivider />
|
<DropdownDivider />
|
||||||
<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"
|
||||||
>Sign out</DropdownItem
|
>Sign out</DropdownItem
|
||||||
>
|
>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main class="p-1">
|
<main class="p-5">
|
||||||
<div class="container border border-gray-700 rounded-lg"></div>
|
<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>
|
</main>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
@ -54,18 +82,4 @@
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
margin: 0 auto;
|
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>
|
</style>
|
||||||
|
|
22
src/app.pcss
22
src/app.pcss
|
@ -6,3 +6,25 @@
|
||||||
* {
|
* {
|
||||||
font-family: "Prompt";
|
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;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user