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 toolbar component and adjust body styling

Browse Source
This commit is contained in:
Markury
2025-09-30 14:20:55 -04:00
parent ec11b18d32
commit 1769faa3a6
20 changed files with 141 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/lib/ToolBar.svelte Normal file
View File

@@ -0,0 +1,97 @@
<script lang="ts">
const icons = {
back: '/icons/leftarrow.png',
forward: '/icons/rightarrow.png',
play: '/icons/speaker.png',
search: '/icons/internet.png',
globe: '/icons/github.svg'
};
</script>
<div class="toolbar">
<button class="toolbar-button" disabled title="Back">
<img src={icons.back} alt="Back" />
</button>
<button class="toolbar-button" disabled title="Forward">
<img src={icons.forward} alt="Forward" />
</button>
<div class="toolbar-separator"></div>
<button class="toolbar-button" disabled title="Now Playing">
<img src={icons.play} alt="Play" />
<span>Now Playing</span>
</button>
<button class="toolbar-button" disabled title="Search">
<img src={icons.search} alt="Search" />
<span>Search</span>
</button>
<div class="toolbar-separator"></div>
<button class="toolbar-button" disabled title="GitHub">
<img src={icons.globe} alt="Globe" />
<span>GitHub</span>
</button>
</div>
<style>
.toolbar {
display: flex;
align-items: center;
padding: 4px 6px;
gap: 1px;
user-select: none;
}
.toolbar-button {
display: flex;
align-items: center;
gap: 4px;
background: transparent;
border: none;
box-shadow: none;
padding: 3px 5px;
min-width: auto;
min-height: auto;
font-family: "Pixelated MS Sans Serif", Arial;
font-size: 11px;
cursor: pointer;
color: light-dark(#222, #ddd);
text-shadow: none;
}
.toolbar-button:hover {
background: light-dark(silver, #2b2b2b);
box-shadow: inset -1px -1px light-dark(#0a0a0a, #000),
inset 1px 1px light-dark(#fff, #525252),
inset -2px -2px light-dark(grey, #232323),
inset 2px 2px light-dark(#dfdfdf, #363636);
}
.toolbar-button:active {
box-shadow: inset -1px -1px light-dark(#fff, #525252),
inset 1px 1px light-dark(#0a0a0a, #000),
inset -2px -2px light-dark(#dfdfdf, #363636),
inset 2px 2px light-dark(grey, #232323);
}
.toolbar-button span {
word-spacing: 2px;
}
.toolbar-button img {
width: 20px;
height: 20px;
display: block;
}
.toolbar-separator {
width: 2px;
height: 20px;
background: light-dark(grey, #232323);
border-right: 1px solid light-dark(#fff, #525252);
margin: 0 2px;
}
</style>

2
src/routes/+layout.svelte
View File

@@ -1,8 +1,10 @@
<script lang="ts">
import TitleBar from "$lib/TitleBar.svelte";
import MenuBar from "$lib/MenuBar.svelte";
import ToolBar from "$lib/ToolBar.svelte";
</script>
<TitleBar />
<MenuBar />
<ToolBar />
<slot />

2
static/app.css
View File

@@ -12,4 +12,6 @@ html {
body {
height: 100%;
margin: 0;
padding: 2px;
box-sizing: border-box;
}

BIN
static/icons/cd.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

13
static/icons/github.svg Normal file
View File

@@ -0,0 +1,13 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 2H9V4H7V6H5V2Z" fill="black"/>
<path d="M5 12H3V6H5V12Z" fill="black"/>
<path d="M7 14H5V12H7V14Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 16V14H7V16H3V14H1V16H3V18H7V22H9V18H11V16H9ZM9 16V18H7V16H9Z" fill="black"/>
<path d="M15 4V6H9V4H15Z" fill="black"/>
<path d="M19 6H17V4H15V2H19V6Z" fill="black"/>
<path d="M19 12V6H21V12H19Z" fill="black"/>
<path d="M17 14V12H19V14H17Z" fill="black"/>
<path d="M15 16V14H17V16H15Z" fill="black"/>
<path d="M15 18H13V16H15V18Z" fill="black"/>
<path d="M15 18H17V22H15V18Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 670 B

3
static/icons/headphone.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M19 4H5V6H3V12V14V18V20H5H8H10V18V14V12H8H5V6H19V12H16H14V14V18V20H16H19H21V18V14V12V6H19V4ZM16 14H19V18H16V14ZM8 14V18H5V14H8Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 296 B

BIN
static/icons/internet.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

BIN
static/icons/leftarrow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 891 B

BIN
static/icons/musicnote.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.7 KiB

3
static/icons/next.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 4H8V6H10V8H12V10H14V14H12V16H10V18H8V20H6V4ZM18 4H16V20H18V4Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 233 B

3
static/icons/play.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 20H8V4H10V6H12V9H14V11H16V13H14V15H12V18H10V20Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 220 B

3
static/icons/prev.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 4H8V20H6V4ZM18 4H16V6H14V9H12V11H10V13H12V16H14V18H16V20H18V4Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 234 B

BIN
static/icons/rightarrow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

3
static/icons/search.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 2H14V4H6V2ZM4 6V4H6V6H4ZM4 14H2V6H4V14ZM6 16H4V14H6V16ZM14 16V18H6V16H14ZM16 14H14V16H16V18H18V20H20V22H22V20H20V18H18V16H16V14ZM16 6H18V14H16V6ZM16 6V4H14V6H16Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 333 B

BIN
static/icons/searchinternet.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
static/icons/speaker.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

3
static/icons/volume-1.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 2H13V4H11V6H9V8H7H5V10V14V16H7H9V18H11V20H13V22H15V2ZM11 18V16H9V14H7V10H9V8H11V6H13V18H11ZM17 10H19V14H17V10Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 283 B

3
static/icons/volume-2.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H13V22H11V20H9V18H11V6H9V4H11V2ZM7 8V6H9V8H7ZM7 16H5H3V14V10V8H5H7V10H5V14H7V16ZM7 16V18H9V16H7ZM17 10H15V14H17V10ZM19 8H21V16H19V8ZM19 16V18H15V16H19ZM19 6V8H15V6H19Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 341 B

3
static/icons/volume-3.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2H9V4H7V6H5V8H3H1V10V14V16H3H5V18H7V20H9V22H11V2ZM7 18V16H5V14H3V10H5V8H7V6H9V18H7ZM13 10H15V14H13V10ZM21 4H19V2H13V4H19V6H21V18H19V20H13V22H19V20H21V18H23V6H21V4ZM19 8H17V6H13V8H17V16H13V18H17V16H19V8Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 375 B

3
static/icons/volume.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15 2H17V22H15V20H13V18H15V6H13V4H15V2ZM11 8V6H13V8H11ZM9 10H11V8H9H7V10V14V16H9H11V18H13V16H11V14H9V10Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 273 B