Nice! got DaisyUI themes to work!
This commit is contained in:
parent
b381426a05
commit
0b6c3ba827
|
|
@ -1,4 +1,7 @@
|
|||
@import '@fontsource/fira-mono';
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--font-body: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="en" data-theme="coffee">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
|
|
@ -9,8 +9,8 @@
|
|||
<!-- IMPORTANT: Remove before production!!! -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="src/lib/OpenBirchWasm/OpenBirchWrapper.js"></script>
|
||||
<script src="src/lib/OpenBirchWasm/OpenBirch.js"></script>
|
||||
<script src="./OpenBirchWasm/OpenBirchWrapper.js"></script>
|
||||
<script src="./OpenBirchWasm/OpenBirch.js"></script>
|
||||
|
||||
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -57,7 +57,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</ParallaxLayer>
|
||||
<ParallaxLayer rate={0.2} offset={0.6} span={1} class="bg-base-100">
|
||||
<ParallaxLayer rate={0.1} offset={0.575} span={1} class="bg-base-100">
|
||||
<div class="double_centered_boxes py-16">
|
||||
<div>
|
||||
<h1 class="text-neutral-content">
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@
|
|||
</script>
|
||||
|
||||
<header class="navbar bg-base-100">
|
||||
<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
|
||||
<a tabindex="0" role="button" href="/" class="btn btn-ghost btn-circle avatar">
|
||||
<div class="w-10 rounded-full">
|
||||
<img
|
||||
alt="Tailwind CSS Navbar component"
|
||||
src={goku} />
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<div class="flex-1"/>
|
||||
<div class="flex-none">
|
||||
<ul class="menu menu-horizontal px-1">
|
||||
|
|
|
|||
|
|
@ -7,39 +7,46 @@
|
|||
test = test.concat(test);
|
||||
test = test.concat(test);
|
||||
|
||||
let inputValue: string;
|
||||
let inputField: HTMLInputElement;
|
||||
async function handleKeydown(event: KeyboardEvent) {
|
||||
if (event.key === 'Enter') {
|
||||
OpenBirch.sendCommand(inputValue)
|
||||
inputValue = '';
|
||||
pushCommand();
|
||||
}
|
||||
}
|
||||
|
||||
// Locally start sending command
|
||||
function pushCommand(){
|
||||
OpenBirch.sendCommand(inputField.value)
|
||||
inputField.value = '';
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="consoleContainer p-4" style="height: 92vh;">
|
||||
<div class="overflow-auto p-4" style="background-color: #191724;">
|
||||
<ul>
|
||||
<div class="consoleContainer p-4">
|
||||
<div class="p-4 flex grow flex-col bg-primary-content rounded-xl overflow-auto">
|
||||
<div class="">
|
||||
<ul class="prose">
|
||||
{#each $OpenBirch as consoleEntry}
|
||||
{#if consoleEntry.sender == 0}
|
||||
<li>{consoleEntry.message}</li>
|
||||
<li class=""><b>></b> {" " + consoleEntry.message}</li>
|
||||
{:else}
|
||||
<li>>{" " + consoleEntry.message}</li>
|
||||
<li class="text-accent opacity-75"><b><i>{consoleEntry.message}</i></b></li>
|
||||
{/if}
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="input input-bordered flex items-center gap-2">
|
||||
<div class="pt-4 join">
|
||||
<div class="input join-item input-bordered flex grow items-center gap-2">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
class="h-8 w-8 opacity-70 block m-auto">
|
||||
class="h-8 w-8 opacity-70 block m-auto fill-primary">
|
||||
<path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/>
|
||||
</svg>
|
||||
<input type="text" class="grow" placeholder="Search" bind:value={inputValue} on:keydown={handleKeydown} />
|
||||
</label>
|
||||
<input autofocus type="text" class="grow text-primary" placeholder="" bind:this={inputField} on:keydown={handleKeydown} />
|
||||
</div>
|
||||
<button class="btn join-item btn-secondary" on:click={pushCommand}>Execute</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -49,6 +56,12 @@
|
|||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
top: 75px;
|
||||
|
||||
&:nth-child(1) {
|
||||
flex: 0 0 90%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,8 +6,7 @@ export default {
|
|||
},
|
||||
plugins: [require("@tailwindcss/typography"), require('daisyui')],
|
||||
daisyui: {
|
||||
themes: false, // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
|
||||
darkTheme: "dark", // name of one of the included themes for dark mode
|
||||
themes: ["coffee"], // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
|
||||
base: true, // applies background color and foreground color for root element by default
|
||||
styled: true, // include daisyUI colors and design decisions for all components
|
||||
utils: true, // adds responsive and modifier utility classes
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
"extends": "./.svelte-kit/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"checkJs": false,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
|
|
|
|||
Loading…
Reference in New Issue