Ku6epXBOCTuK/easy-png-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: update top bar styles

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-08-30 22:40:25 +05:00
parent b0f0b79ee0
commit 86b1c813e7
12 changed files with 33 additions and 18726 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/kit/IconButton.svelte
+3 -6
View File
@@ -33,16 +33,15 @@
<style>
.icon-btn {
display: inline-flex;
display: grid;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border: 1px solid var(--line);
border-radius: var(--radius);
background: transparent;
color: var(--muted);
cursor: pointer;
font-size: inherit;
line-height: inherit;
}
.icon-btn:hover:not(:disabled) {
color: var(--foreground);
@@ -59,8 +58,6 @@
border-color: var(--cyan);
}
.icon-btn--bare {
width: auto;
height: auto;
padding: 6px;
border: 0;
border-radius: 0;
web/src/lib/components/kit/StatusDot.svelte
+2 -3
View File
@@ -3,10 +3,9 @@
<style>
.status-dot {
display: inline-block;
width: 8px;
height: 8px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--success);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 25%, transparent);
}
</style>
web/src/lib/components/kit/TopBar.svelte
+25 -30
View File
@@ -1,8 +1,8 @@
<script lang="ts">
import { resolve } from "$app/paths";
import { CircleQuestionMark, Moon, Sun } from "@lucide/svelte";
import IconButton from "./IconButton.svelte";
import StatusDot from "./StatusDot.svelte";
import { resolve } from "$app/paths";
import { CircleHelp, Moon, Sun } from "@lucide/svelte";
interface Props {
theme: "light" | "dark";
@@ -16,22 +16,24 @@
let lang = $state("RU");
</script>
<header class="topbar">
<a class="brand" href={resolve("/")}>
<span class="brand-mark">EP</span>
<span>easy-png-tools</span>
{#if crumb}<span class="version">{crumb}</span>{/if}
</a>
<nav class="nav">
<a href={resolve("/preview/demo")}>Workspace</a>
<a href={resolve("/preview/list-tools")}>Catalog</a>
<a href={resolve("/preview/tools/linear-gradient-png")}>Gradient</a>
<a href={resolve("/preview/tools/remove-background-png")}>Background remover</a>
</nav>
<div class="top-actions">
<header class="topbar">
<a class="brand" href={resolve("/")}>
<span class="brand-mark">EP</span>
<span>easy-png-tools</span>
{#if crumb}<span class="version">{crumb}</span>{/if}
</a>
<nav class="nav">
<a href={resolve("/preview/demo")}>Workspace</a>
<a href={resolve("/preview/list-tools")}>Catalog</a>
<a href={resolve("/preview/tools/linear-gradient-png")}>Gradient</a>
<a href={resolve("/preview/tools/remove-background-png")}
>Background remover</a
>
</nav>
<div class="top-actions">
<span class="status"><StatusDot /> {status}</span>
<IconButton
icon={CircleHelp}
icon={CircleQuestionMark}
label="Help"
variant="bare"
onclick={() => {}}
@@ -61,9 +63,6 @@
<style>
.topbar {
position: sticky;
top: 0;
z-index: 20;
display: flex;
justify-content: space-between;
align-items: center;
@@ -96,13 +95,13 @@
.nav {
display: flex;
align-items: center;
gap: 18px;
margin-left: 24px;
gap: 22px;
margin-right: 28px;
margin-left: auto;
}
.nav a {
color: var(--muted);
font: 12px var(--font-mono);
letter-spacing: 0.04em;
text-decoration: none;
}
.nav a:hover {
@@ -122,7 +121,8 @@
letter-spacing: 0.08em;
}
.lang {
display: inline-flex;
display: flex;
align-items: center;
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
@@ -132,17 +132,12 @@
background: transparent;
color: var(--muted);
font: 10px var(--font-mono);
letter-spacing: 0.06em;
padding: 6px 9px;
cursor: pointer;
}
.lang-btn + .lang-btn {
border-left: 1px solid var(--line);
}
.lang-div {
color: var(--muted);
font: 10px var(--font-mono);
align-self: center;
color: var(--foreground);
font-family: var(--font-sans);
}
.lang-btn.active {
background: var(--foreground);