markury/shark
1
0
Fork 0
mirror of https://github.com/markuryy/shark.git synced 2025-12-12 11:41:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

ui: add 98.css dark theme

Browse Source
This commit is contained in:
Markury
2025-09-30 11:27:54 -04:00
parent 7b8c83c96d
commit 21135bea95
9 changed files with 76 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/app.css Normal file
View File

@@ -0,0 +1,15 @@
@import '/98.css';
:root {
height: 100vh;
overflow: hidden;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}

3
src/app.html
View File

@@ -1,9 +1,10 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" data-dark>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.png" /> <link rel="icon" href="%sveltekit.assets%/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="%sveltekit.assets%/app.css" />
<title>Tauri + SvelteKit + Typescript App</title> <title>Tauri + SvelteKit + Typescript App</title>
%sveltekit.head% %sveltekit.head%
</head> </head>

134
src/routes/+page.svelte
View File

@@ -11,7 +11,7 @@
} }
</script> </script>
<main class="container"> <main>
<h1>Welcome to Tauri + Svelte</h1> <h1>Welcome to Tauri + Svelte</h1>
<div class="row"> <div class="row">
@@ -27,14 +27,36 @@
</div> </div>
<p>Click on the Tauri, Vite, and SvelteKit logos to learn more.</p> <p>Click on the Tauri, Vite, and SvelteKit logos to learn more.</p>
<form class="row" onsubmit={greet}> <fieldset>
<input id="greet-input" placeholder="Enter a name..." bind:value={name} /> <legend>Greet</legend>
<form class="field-row" onsubmit={greet}>
<label for="greet-input">Name:</label>
<input id="greet-input" type="text" placeholder="Enter a name..." bind:value={name} />
<button type="submit">Greet</button> <button type="submit">Greet</button>
</form> </form>
<p>{greetMsg}</p> </fieldset>
{#if greetMsg}
<div class="status-bar">
<p class="status-bar-field">{greetMsg}</p>
</div>
{/if}
</main> </main>
<style> <style>
main {
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
.logo {
height: 4em;
padding: 1em;
will-change: filter;
transition: 0.75s;
}
.logo.vite:hover { .logo.vite:hover {
filter: drop-shadow(0 0 2em #747bff); filter: drop-shadow(0 0 2em #747bff);
} }
@@ -43,38 +65,6 @@
filter: drop-shadow(0 0 2em #ff3e00); filter: drop-shadow(0 0 2em #ff3e00);
} }
:root {
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
color: #0f0f0f;
background-color: #f6f6f6;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-text-size-adjust: 100%;
}
.container {
margin: 0;
padding-top: 10vh;
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: 0.75s;
}
.logo.tauri:hover { .logo.tauri:hover {
filter: drop-shadow(0 0 2em #24c8db); filter: drop-shadow(0 0 2em #24c8db);
} }
@@ -82,75 +72,31 @@
.row { .row {
display: flex; display: flex;
justify-content: center; justify-content: center;
} align-items: center;
gap: 1em;
a { margin: 1em 0;
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
} }
h1 { h1 {
text-align: center; text-align: center;
font-size: 2rem;
margin: 1em 0;
} }
input, p {
button { text-align: center;
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
color: #0f0f0f;
background-color: #ffffff;
transition: border-color 0.25s;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
} }
button { .field-row {
cursor: pointer; align-items: center;
gap: 8px;
} }
button:hover { fieldset {
border-color: #396cd8; margin: 20px 0;
}
button:active {
border-color: #396cd8;
background-color: #e8e8e8;
} }
input, .status-bar {
button { margin-top: 20px;
outline: none;
} }
#greet-input {
margin-right: 5px;
}
@media (prefers-color-scheme: dark) {
:root {
color: #f6f6f6;
background-color: #2f2f2f;
}
a:hover {
color: #24c8db;
}
input,
button {
color: #ffffff;
background-color: #0f0f0f98;
}
button:active {
background-color: #0f0f0f69;
}
}
</style> </style>

2
static/98.css Normal file
View File

File diff suppressed because one or more lines are too long

15
static/app.css Normal file
View File

@@ -0,0 +1,15 @@
@import '/98.css';
:root {
height: 100vh;
overflow: hidden;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}

BIN
static/fonts/converted/ms_sans_serif.woff Normal file
View File

Binary file not shown.

BIN
static/fonts/converted/ms_sans_serif.woff2 Normal file
View File

Binary file not shown.

BIN
static/fonts/converted/ms_sans_serif_bold.woff Normal file
View File

Binary file not shown.

BIN
static/fonts/converted/ms_sans_serif_bold.woff2 Normal file
View File

Binary file not shown.