Christoph
7ee02e8652
Introduce semantic theme variables (e.g. --color-success, --color-danger, --color-warning, --color-info) and a set of overlay/tint/shadow variables (--app-hover-tint, --app-raise-tint, --app-soft-tint, --app-overlay-shadow, --app-menu-shadow, --app-float-shadow, etc.) and use them throughout app.css in place of many hard-coded color, background and shadow values. This change: - replaces literal color tokens used for badges, pills, buttons, menus, toasts, borders and file icons with the new semantic variables - switches several box-shadow and overlay usages to the new shadow vars - harmonizes light-theme surface, border and scrollbar values to explicit variables for easier maintenance No structural or behavioral changes; this is purely a visual/theming refactor to make future theme adjustments and dark/light parity simpler.
31 lines
3.8 KiB
Svelte
31 lines
3.8 KiB
Svelte
<script lang="ts">
|
|
import { Check, ChevronRight, GitMerge, X } from "@lucide/svelte";
|
|
let { conflictCount, isBusy, language, onResolve, onContinue, onAbort }: {
|
|
conflictCount: number; isBusy: boolean; language: "de" | "en";
|
|
onResolve: () => void; onContinue: () => void; onAbort: () => void;
|
|
} = $props();
|
|
const de = $derived(language === "de");
|
|
const hasConflicts = $derived(conflictCount > 0);
|
|
</script>
|
|
|
|
<section class="merge-progress" class:ready={!hasConflicts} role="status">
|
|
<span class="status-icon">{#if hasConflicts}<GitMerge size={18} />{:else}<Check size={18} />{/if}</span>
|
|
<div class="status-copy">
|
|
<strong>{hasConflicts ? (de ? "Merge läuft" : "Merge in progress") : (de ? "Bereit zum Abschließen" : "Ready to complete")}</strong>
|
|
<span>{hasConflicts ? `${conflictCount} ${de ? (conflictCount === 1 ? "Datei mit Konflikten" : "Dateien mit Konflikten") : (conflictCount === 1 ? "file with conflicts" : "files with conflicts")}` : (de ? "Alle Konflikte sind gelöst." : "All conflicts are resolved.")}</span>
|
|
</div>
|
|
<div class="merge-actions">
|
|
{#if hasConflicts}<button class="resolve-action" type="button" onclick={onResolve} disabled={isBusy}><GitMerge size={14} />{de ? "Konflikte lösen" : "Resolve conflicts"}</button>{/if}
|
|
<button class="continue-action" type="button" onclick={onContinue} disabled={isBusy || hasConflicts} title={hasConflicts ? (de ? "Zuerst alle Konflikte lösen" : "Resolve all conflicts first") : undefined}>{de ? "Fortsetzen" : "Continue"}<ChevronRight size={14} /></button>
|
|
<span class="action-divider" aria-hidden="true"></span>
|
|
<button class="abort-action" type="button" onclick={onAbort} disabled={isBusy}><X size={14} />{de ? "Abbrechen" : "Abort"}</button>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.merge-progress{--status-color:var(--color-sync-ahead);display:flex;align-items:center;gap:12px;flex-shrink:0;min-height:50px;padding:8px 14px;border-bottom:1px solid var(--color-border);border-left:3px solid var(--status-color);background:color-mix(in srgb,var(--status-color) 5%,var(--app-bg));color:var(--color-ink);font-size:13px}
|
|
.merge-progress.ready{--status-color:var(--color-success)}.status-icon{display:flex;align-items:center;color:var(--status-color)}.status-copy{display:flex;align-items:center;gap:14px;min-width:0;flex-wrap:wrap}.status-copy strong{font-size:13px;font-weight:600;white-space:nowrap}.status-copy>span{color:var(--color-ink-muted);font-size:12px}
|
|
.merge-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}.merge-actions button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:30px;padding:5px 10px;border:1px solid var(--color-border-input);background:transparent;color:var(--color-ink-muted);font-size:12px;font-weight:500;white-space:nowrap}.merge-actions button:hover:not(:disabled){background:var(--color-surface-hover);color:var(--color-ink)}.merge-actions button:disabled{opacity:.4}.merge-actions .resolve-action{border-color:color-mix(in srgb,var(--status-color) 45%,var(--color-border));background:color-mix(in srgb,var(--status-color) 10%,transparent);color:var(--status-color)}.ready .continue-action{color:var(--status-color);border-color:color-mix(in srgb,var(--status-color) 45%,var(--color-border));background:color-mix(in srgb,var(--status-color) 10%,transparent)}.action-divider{height:20px;width:1px;background:var(--color-border);margin:0 3px}.merge-actions .abort-action{border-color:transparent}.merge-actions .abort-action:hover:not(:disabled){color:var(--color-danger);background:color-mix(in srgb,var(--color-danger) 8%,transparent)}
|
|
@media(max-width:700px){.merge-progress{flex-wrap:wrap;gap:8px}.status-copy{gap:8px}.merge-actions{width:100%;justify-content:flex-end}.merge-actions button{font-size:11px;padding:5px 8px}}
|
|
</style>
|