Ku6epXBOCTuK/easy-png-tools2
1
0
Fork 0
mirror of https://github.com/Ku6epXBOCTuK/easy-png-tools.git synced 2026-09-14 21:46:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: resolve style issues

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-08-31 03:25:42 +05:00
parent 6cefd5c0a1
commit bbd5532529
5 changed files with 13 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/kit/FieldGrid.svelte
+2 -3
View File
@@ -21,9 +21,8 @@
} }
.controls.compact { .controls.compact {
display: grid; display: grid;
grid-auto-flow: column; grid-template-columns: 1fr 1fr;
grid-auto-columns: minmax(0, 1fr); gap: 16px;
gap: 0 16px;
} }
@media (max-width: 800px) { @media (max-width: 800px) {
web/src/lib/components/kit/Footer.svelte
+7 -3
View File
@@ -8,14 +8,18 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 1rem; padding: 16px clamp(20px, 4vw, 72px);
padding: 16px clamp(20px, 4vw, 64px);
border-top: 1px solid var(--line); border-top: 1px solid var(--line);
font: 10px var(--font-mono); font: 10px var(--font-mono);
letter-spacing: 0.08em;
color: var(--muted); color: var(--muted);
& span {
display: flex;
align-items: center;
gap: 7px;
}
} }
.preview-footer .version { .preview-footer .version {
font-weight: 400;
color: var(--blue); color: var(--blue);
} }
</style> </style>
web/src/lib/components/kit/SectionLabel.svelte
+1 -1
View File
@@ -37,7 +37,7 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
padding-bottom: 15px; padding-bottom: 12px;
} }
.section-text strong { .section-text strong {
display: block; display: block;
web/src/lib/components/kit/Toggle.svelte
+3 -10
View File
@@ -21,14 +21,14 @@
aria-label={label} aria-label={label}
onclick={handle} onclick={handle}
> >
<i class="toggle-knob"></i> <i class="toggle-knob"></i>
</button> </button>
<style> <style>
.toggle { .toggle {
position: relative; position: relative;
width: 2.4rem; width: 32px;
height: 1.3rem; height: 18px;
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 999px; border-radius: 999px;
background: var(--background); background: var(--background);
@@ -40,17 +40,10 @@
border-color: var(--blue); border-color: var(--blue);
} }
.toggle-knob { .toggle-knob {
position: absolute;
top: 1px;
left: 1px;
width: calc(1.3rem - 4px);
height: calc(1.3rem - 4px);
border-radius: 50%; border-radius: 50%;
background: var(--foreground); background: var(--foreground);
transition: transform 0.12s ease; transition: transform 0.12s ease;
} }
.toggle.on .toggle-knob { .toggle.on .toggle-knob {
transform: translateX(1.1rem);
background: #fff;
} }
</style> </style>
web/src/lib/components/kit/ToggleRow.svelte
-5
View File
@@ -17,12 +17,7 @@
<style> <style>
.toggle-row { .toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
color: var(--foreground); color: var(--foreground);
font-size: 0.85rem;
cursor: pointer; cursor: pointer;
} }
</style> </style>