vielle.dev
[WIP] A simple wake-on-lan service
1<script lang="ts">
2 import { config } from "./api";
3
4 const rgb = ([r, g, b]: [number, number, number]) => `rgb(${r}, ${g}, ${b})`;
5
6 const custom = {
7 "--theme-background": rgb(config.theme.background),
8 "--theme-background-main": rgb(config.theme.background_main),
9 "--theme-background-server": rgb(config.theme.background_server),
10 "--theme-background-button": rgb(config.theme.background_button),
11 "--theme-text": rgb(config.theme.text),
12 "--theme-text-secondary": rgb(config.theme.text_secondary),
13 "--theme-accent-success": rgb(config.theme.accent_success),
14 "--theme-accent-fail": rgb(config.theme.accent_fail),
15 "--theme-link": rgb(config.theme.link),
16 "--theme-link-visited": rgb(config.theme.link_visited),
17 "--theme-highlight": rgb(config.theme.highlight),
18 "--theme-highlight-opacity": `${config.theme.highlight_opacity / 100}`,
19 "--theme-fonts": `${config.theme.fonts.map((x) => `'${x}'`).join(", ")}`,
20 };
21
22 for (const [k, v] of Object.entries(custom))
23 document.body.style.setProperty(k, v);
24</script>
25
26<style>
27 :global {
28 @layer reset {
29 * {
30 margin: 0;
31 padding: 0;
32 box-sizing: border-box;
33 font-family: inherit;
34 }
35 }
36
37 body {
38 background-color: var(--theme-background);
39 font-family: var(--theme-fonts);
40 }
41
42 a {
43 color: var(--theme-link);
44
45 &:visited {
46 color: var(--theme-link-visited);
47 }
48
49 &:hover {
50 text-decoration-style: dotted;
51 }
52
53 &:active {
54 text-decoration: none;
55 }
56 }
57
58 ::selection {
59 background-color: rgb(
60 from var(--theme-highlight) r g b / var(--theme-highlight-opacity)
61 );
62 }
63 }
64</style>