Use css vars for colour themes
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
affe4a5541
commit
db8ed96b71
|
@ -0,0 +1,3 @@
|
|||
VITE_API_URL=https://api.example.com
|
||||
VITE_TITLE=Title
|
||||
VITE_CSS_VAR=https://example.com/path/to/vars.css
|
|
@ -15,6 +15,10 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<link rel="stylesheet" href={import.meta.env.VITE_CSS_VAR} />
|
||||
</svelte:head>
|
||||
|
||||
<div id="app">
|
||||
<Router primary={false}>
|
||||
<header>
|
||||
|
@ -70,7 +74,7 @@
|
|||
height: 80px;
|
||||
min-height: 80px;
|
||||
max-height: 80px;
|
||||
background-color: #25662854;
|
||||
background-color: var(--primary);
|
||||
border-radius: 0 0 16px 16px;
|
||||
}
|
||||
|
||||
|
|
12
src/app.css
12
src/app.css
|
@ -5,8 +5,8 @@
|
|||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
color: var(--primary-text);
|
||||
background-color: var(--primary-bg);
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
|
@ -17,12 +17,12 @@
|
|||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #64dd6caa;
|
||||
color: var(--primary-component);
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #53f25bee;
|
||||
color: var(--primary-hover);
|
||||
}
|
||||
|
||||
body {
|
||||
|
@ -36,13 +36,13 @@ button {
|
|||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
background-color: var(--primary-component);
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
border-color: #64dd6caa;
|
||||
border-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
button:focus,
|
||||
|
|
|
@ -3,11 +3,13 @@
|
|||
import { navigate, useLocation } from "svelte-navigator";
|
||||
import { getUser } from "~/api/login";
|
||||
import { getOAuthApp } from "~/api/oauth";
|
||||
import LazyComponent from "~/lib/LazyComponent.svelte";
|
||||
import LazyDelay from "~/lib/LazyDelay.svelte";
|
||||
|
||||
let location = useLocation();
|
||||
let app;
|
||||
let app: {
|
||||
app_name: string;
|
||||
app_desc: string;
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
|
@ -26,13 +28,35 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div class="page">
|
||||
{#if app}
|
||||
<div>
|
||||
<h2>{app.app_name}</h2>
|
||||
<div>{app.app_desc}</div>
|
||||
<div class="main">
|
||||
<h2 class="oauth-title">{app.app_name}</h2>
|
||||
<div class="oauth-desc">{app.app_desc}</div>
|
||||
</div>
|
||||
{:else}
|
||||
<LazyDelay delayMs={500} />
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.page {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.main {
|
||||
margin: auto;
|
||||
background: var(--bg-panel);
|
||||
padding: 32px;
|
||||
border-radius: 32px;
|
||||
}
|
||||
|
||||
.main > .oauth-title {
|
||||
line-height: normal;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.main > .oauth-desc {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -4,6 +4,7 @@
|
|||
interface ImportMetaEnv {
|
||||
readonly VITE_API_URL: string;
|
||||
readonly VITE_TITLE: string;
|
||||
readonly VITE_CSS_VAR: string;
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
|
|
Reference in New Issue