markury/shark
1
0
Fork 0
mirror of https://github.com/markuryy/shark.git synced 2025-12-12 19:51:01 +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>