mirror of
https://github.com/mschuepbach/matrix-kernel-filter-calculator.git
synced 2026-01-15 21:12:14 +01:00
Add dark theme
This commit is contained in:
32
package-lock.json
generated
32
package-lock.json
generated
@@ -1,14 +1,14 @@
|
||||
{
|
||||
"name": "svelte-app",
|
||||
"version": "1.0.0",
|
||||
"name": "matrix-kernel-filter-calculator",
|
||||
"version": "0.0.1",
|
||||
"lockfileVersion": 2,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "svelte-app",
|
||||
"version": "1.0.0",
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"sirv-cli": "^2.0.0"
|
||||
"sirv-cli": "^2.0.0",
|
||||
"svelte-themer": "^0.5.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^17.0.0",
|
||||
@@ -981,11 +981,22 @@
|
||||
"version": "3.46.3",
|
||||
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.46.3.tgz",
|
||||
"integrity": "sha512-mTOXvv74CVQqJHqoIZDprVfRKVVmYNadXP0VKnOEA54223kLGCr1nMrifS4Zx29qMt/xRB38Eq1D7dDH/fM8fQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">= 8"
|
||||
}
|
||||
},
|
||||
"node_modules/svelte-themer": {
|
||||
"version": "0.5.5",
|
||||
"resolved": "https://registry.npmjs.org/svelte-themer/-/svelte-themer-0.5.5.tgz",
|
||||
"integrity": "sha512-mhW1Vth6WQgFGt9UYwjM9MsalNzSFhWoi7y1X7geQ5aELmKNGKR5CA6PlbD8uvOpbaqX09+487OZ/T6hxaMFlA==",
|
||||
"engines": {
|
||||
"node": ">=14",
|
||||
"pnpm": ">=3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"svelte": "^3.46.3"
|
||||
}
|
||||
},
|
||||
"node_modules/terser": {
|
||||
"version": "5.10.0",
|
||||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.10.0.tgz",
|
||||
@@ -1803,8 +1814,13 @@
|
||||
"svelte": {
|
||||
"version": "3.46.3",
|
||||
"resolved": "https://registry.npmjs.org/svelte/-/svelte-3.46.3.tgz",
|
||||
"integrity": "sha512-mTOXvv74CVQqJHqoIZDprVfRKVVmYNadXP0VKnOEA54223kLGCr1nMrifS4Zx29qMt/xRB38Eq1D7dDH/fM8fQ==",
|
||||
"dev": true
|
||||
"integrity": "sha512-mTOXvv74CVQqJHqoIZDprVfRKVVmYNadXP0VKnOEA54223kLGCr1nMrifS4Zx29qMt/xRB38Eq1D7dDH/fM8fQ=="
|
||||
},
|
||||
"svelte-themer": {
|
||||
"version": "0.5.5",
|
||||
"resolved": "https://registry.npmjs.org/svelte-themer/-/svelte-themer-0.5.5.tgz",
|
||||
"integrity": "sha512-mhW1Vth6WQgFGt9UYwjM9MsalNzSFhWoi7y1X7geQ5aELmKNGKR5CA6PlbD8uvOpbaqX09+487OZ/T6hxaMFlA==",
|
||||
"requires": {}
|
||||
},
|
||||
"terser": {
|
||||
"version": "5.10.0",
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
"svelte": "^3.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"sirv-cli": "^2.0.0"
|
||||
"sirv-cli": "^2.0.0",
|
||||
"svelte-themer": "^0.5.5"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,30 +5,12 @@ html, body {
|
||||
}
|
||||
|
||||
body {
|
||||
color: #333;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgb(0,100,200);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: rgb(0,80,160);
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
input, button, select, textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
@@ -36,14 +18,11 @@ input, button, select, textarea {
|
||||
padding: 0.4em;
|
||||
margin: 0.5em;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ccc;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
input:disabled {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* Chrome, Safari, Edge, Opera */
|
||||
input::-webkit-outer-spin-button,
|
||||
input::-webkit-inner-spin-button {
|
||||
@@ -55,21 +34,3 @@ input::-webkit-inner-spin-button {
|
||||
input[type=number] {
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
button {
|
||||
color: #333;
|
||||
background-color: #f4f4f4;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
button:not(:disabled):active {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
border-color: #666;
|
||||
}
|
||||
|
||||
125
src/App.svelte
125
src/App.svelte
@@ -1,6 +1,9 @@
|
||||
<script>
|
||||
import MatrixSizeInput from "./MatrixSizeInput.svelte";
|
||||
import ThemeWrapper from "./../node_modules/svelte-themer/components/ThemeWrapper.svelte";
|
||||
import Matrix from "./Matrix.svelte";
|
||||
import MatrixSizeInput from "./MatrixSizeInput.svelte";
|
||||
import { themes } from "./themes";
|
||||
import ThemeToggle from "./ThemeToggle.svelte";
|
||||
|
||||
let matrixWidth = 4;
|
||||
let matrixHeight = 4;
|
||||
@@ -58,54 +61,77 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<header><h1>Matrix Kernel Filter Calculator</h1></header>
|
||||
<main>
|
||||
<h5 style="grid-area: matrix-title">Matrix</h5>
|
||||
<h5 style="grid-area: kernel-title">Kernel</h5>
|
||||
<h5 style="grid-area: result-title">Result</h5>
|
||||
<div style="grid-area: matrix-size">
|
||||
<MatrixSizeInput bind:matrixWidth bind:matrixHeight />
|
||||
</div>
|
||||
<div style="grid-area: kernel-size">
|
||||
<MatrixSizeInput
|
||||
bind:matrixWidth={kernelWidth}
|
||||
bind:matrixHeight={kernelHeight}
|
||||
/>
|
||||
</div>
|
||||
<div style="grid-area: result-size">{result[0].length}x{result.length}</div>
|
||||
<div style="grid-area: matrix"><Matrix bind:matrix /></div>
|
||||
<div style="grid-area: kernel"><Matrix bind:matrix={kernel} /></div>
|
||||
<div style="grid-area: result">
|
||||
<Matrix matrix={result} readonly="true" />
|
||||
</div>
|
||||
<div style="grid-area: padding">
|
||||
<label>
|
||||
<input type="checkbox" bind:checked={addPadding} />
|
||||
Padding
|
||||
</label>
|
||||
<div>
|
||||
<input
|
||||
type="number"
|
||||
bind:value={padding}
|
||||
style="width: 3em;"
|
||||
onclick="select()"
|
||||
<ThemeWrapper {themes} key="kernel-filter-calculator__theme">
|
||||
<div class="container">
|
||||
<header><h1>Matrix Kernel Filter Calculator</h1></header>
|
||||
<main>
|
||||
<h5 style="grid-area: matrix-title">Matrix</h5>
|
||||
<h5 style="grid-area: kernel-title">Kernel</h5>
|
||||
<h5 style="grid-area: result-title">Result</h5>
|
||||
<div style="grid-area: matrix-size">
|
||||
<MatrixSizeInput bind:matrixWidth bind:matrixHeight />
|
||||
</div>
|
||||
<div style="grid-area: kernel-size">
|
||||
<MatrixSizeInput
|
||||
bind:matrixWidth={kernelWidth}
|
||||
bind:matrixHeight={kernelHeight}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<a
|
||||
href="https://github.com/mschuepbach/matrix-kernel-filter-calculator"
|
||||
target="_blank"
|
||||
title="GitHub Repository"
|
||||
>
|
||||
<img src="./GitHub-Mark.svg" alt="GitHub Repository" width="32px" />
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
<div style="grid-area: result-size">
|
||||
{result[0].length}x{result.length}
|
||||
</div>
|
||||
<div style="grid-area: matrix"><Matrix bind:matrix /></div>
|
||||
<div style="grid-area: kernel"><Matrix bind:matrix={kernel} /></div>
|
||||
<div style="grid-area: result">
|
||||
<Matrix matrix={result} readonly="true" />
|
||||
</div>
|
||||
<div style="grid-area: padding">
|
||||
<label>
|
||||
<input type="checkbox" bind:checked={addPadding} />
|
||||
Padding
|
||||
</label>
|
||||
<div>
|
||||
<input
|
||||
type="number"
|
||||
bind:value={padding}
|
||||
style="width: 3em;"
|
||||
onclick="select()"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="left"><ThemeToggle /></div>
|
||||
<div class="center">
|
||||
<a
|
||||
href="https://github.com/mschuepbach/matrix-kernel-filter-calculator"
|
||||
target="_blank"
|
||||
title="GitHub Repository"
|
||||
>
|
||||
<img src="./GitHub-Mark.svg" alt="GitHub Repository" width="32px" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="right" />
|
||||
</footer>
|
||||
</div>
|
||||
</ThemeWrapper>
|
||||
|
||||
<style>
|
||||
:global(html) {
|
||||
background-color: var(--theme-colors-background, initial);
|
||||
color: var(--theme-colors-text, initial);
|
||||
}
|
||||
|
||||
:global(input) {
|
||||
color: var(--theme-colors-text, initial);
|
||||
border-color: var(--theme-colors-input-border, initial);
|
||||
background-color: var(--theme-colors-input-background, initial);
|
||||
}
|
||||
|
||||
:global(button) {
|
||||
color: var(--theme-colors-text, initial);
|
||||
}
|
||||
|
||||
h5 {
|
||||
margin: 1em 0 0;
|
||||
}
|
||||
@@ -129,7 +155,7 @@
|
||||
"matrix-size kernel-size result-size"
|
||||
"matrix kernel result"
|
||||
"padding padding padding";
|
||||
grid-gap: .8em;
|
||||
grid-gap: 0.8em;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@@ -150,6 +176,13 @@
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
margin-top: 1em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.left,
|
||||
.right {
|
||||
flex: 1;
|
||||
}
|
||||
</style>
|
||||
|
||||
17
src/ThemeToggle.svelte
Normal file
17
src/ThemeToggle.svelte
Normal file
@@ -0,0 +1,17 @@
|
||||
<script>
|
||||
import { getContext } from "svelte";
|
||||
let { toggle, current } = getContext("theme");
|
||||
</script>
|
||||
|
||||
<button on:click={toggle} title="Toggle Theme">
|
||||
<slot>{$current}</slot>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
button {
|
||||
border: none;
|
||||
background: none;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
34
src/themes.js
Normal file
34
src/themes.js
Normal file
@@ -0,0 +1,34 @@
|
||||
export const themes = {
|
||||
light: {
|
||||
colors: {
|
||||
text: "#333",
|
||||
background: {
|
||||
_: "#fff",
|
||||
contrast: "#b1b1b1",
|
||||
},
|
||||
primary: "#0060df",
|
||||
primary_dark: "#0250bb",
|
||||
secondary: "#b000bf",
|
||||
input: {
|
||||
border: "#ccc",
|
||||
background: "#fff",
|
||||
},
|
||||
},
|
||||
},
|
||||
dark: {
|
||||
colors: {
|
||||
text: "#eee",
|
||||
background: {
|
||||
_: "#333",
|
||||
contrast: "#0d1215",
|
||||
},
|
||||
primary: "#0060df",
|
||||
primary_dark: "#0250bb",
|
||||
secondary: "#b000bf",
|
||||
input: {
|
||||
border: "#999",
|
||||
background: "#333",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user