532c91c605
- app.css: Komplett neues Farbschema basierend auf AWL Dark / KDE Breeze Dark - tauri.conf.json: Shell-Plugin scope entfernt (Tauri 2 inkompatibel) - capabilities/default.json: Tauri 2 Berechtigungen für Shell-Plugin - StopButton + Layout: Hardcoded Farben durch CSS-Variablen ersetzt Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
86 lines
1.8 KiB
Svelte
86 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import { createEventDispatcher } from 'svelte';
|
|
|
|
export let disabled = false;
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
function handleClick() {
|
|
if (!disabled) {
|
|
dispatch('click');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<button
|
|
class="stop-button"
|
|
class:disabled
|
|
on:click={handleClick}
|
|
{disabled}
|
|
aria-label="Alle Agents sofort stoppen"
|
|
>
|
|
<span class="stop-icon">⏹</span>
|
|
<span class="stop-text">STOPP — Alles sofort abbrechen</span>
|
|
<span class="stop-hint">(Escape)</span>
|
|
</button>
|
|
|
|
<style>
|
|
.stop-button {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--spacing-md);
|
|
padding: var(--spacing-md) var(--spacing-lg);
|
|
background: linear-gradient(135deg, var(--error), #c0392b);
|
|
color: white;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
border-radius: var(--radius-md);
|
|
border: 2px solid var(--error);
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
box-shadow: 0 4px 15px rgba(218, 68, 83, 0.3);
|
|
}
|
|
|
|
.stop-button:not(.disabled):hover {
|
|
background: linear-gradient(135deg, #e74c3c, var(--error));
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 6px 20px rgba(218, 68, 83, 0.4);
|
|
}
|
|
|
|
.stop-button:not(.disabled):active {
|
|
transform: translateY(0);
|
|
box-shadow: 0 2px 10px rgba(218, 68, 83, 0.3);
|
|
}
|
|
|
|
.stop-button.disabled {
|
|
background: var(--bg-tertiary);
|
|
border-color: var(--bg-tertiary);
|
|
color: var(--text-secondary);
|
|
cursor: not-allowed;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.stop-icon {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.stop-hint {
|
|
font-size: 0.75rem;
|
|
font-weight: 400;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Animierter Rand wenn aktiv */
|
|
.stop-button:not(.disabled) {
|
|
animation: border-pulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes border-pulse {
|
|
0%, 100% { border-color: var(--error); }
|
|
50% { border-color: #e88; }
|
|
}
|
|
</style>
|