Globale .icon-btn Klasse für alle Icon-only Buttons, Hover-Filter, Theme-Anpassungen

wwwroot/css/base.css

@@ -61,6 +61,7 @@ button:not(:disabled) {
 
 button:not(:disabled):hover, select:hover, input:hover, textarea:hover {
   border-color: var(--primary);
+  filter: var(--hover-filter);
 }
 
 button:disabled {
@@ -71,6 +72,20 @@ input {
   min-width: 0;
 }
 
+.icon-btn {
+  width: 2em;
+  aspect-ratio: 1;
+  padding: 0;
+  line-height: 1;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+button.icon-btn,
+button.icon-btn:hover {
+  border-color: transparent;
+}
+
 textarea, code, pre, .tool-input, .tool-diff, .tool-result, .fe-line-numbers {
   font-family: var(--mono);
   font-size: var(--mono-size);

wwwroot/css/chat.css

@@ -242,13 +242,7 @@
   gap: var(--badge-spacing);
 }
 
-.input-area button {
-  width: 2em;
-  aspect-ratio: 1;
-  padding: 0;
-  line-height: 1;
-  overflow: hidden;
-}
+
 
 .input-area textarea {
   flex: 1;
@@ -441,12 +435,7 @@
   flex-shrink: 0;
 }
 
-.sp-close {
-  width: 2em;
-  aspect-ratio: 1;
-  padding: 0;
-  line-height: 1;
-}
+
 
 .sp-body {
   padding: var(--page-padding);

wwwroot/css/dashboard.css

@@ -35,6 +35,7 @@
 
 .card.clickable:hover {
   border-color: var(--primary);
+  filter: var(--hover-filter);
 }
 
 .card-image {

wwwroot/css/form.css

@@ -48,9 +48,7 @@
   flex: 1;
 }
 
-.input-addon-btn {
-  flex-shrink: 0;
-}
+
 
 .form-actions {
   display: flex;
@@ -87,7 +85,7 @@
 .custom-command-item .remove-cmd-btn {
   margin-left: var(--badge-spacing);
   color: var(--dangerous);
-  border-color: var(--dangerous);
+  align-self: center;
 }
 
 .custom-command-item .remove-cmd-btn:hover {

wwwroot/css/theme.css

@@ -1,7 +1,7 @@
 :root {
   --text: #ddd;
   --text-accent: #fff;
-  --primary: #b41;
+  --primary: #a41;
   --secondary: #4a1;
   --dangerous: #f66;
   --warning: #fa0;
@@ -29,4 +29,5 @@
   --badge-spacing: .5em;
   --menu-item-padding: .5em .75em;
   --page-width: 900px;
+  --hover-filter: contrast(.9);
 }

wwwroot/index.html

@@ -61,7 +61,7 @@
 <template id="tpl-session">
   <div class="page form-page">
     <header>
-      <button class="back-btn" data-page="dashboard"><i class="fa fa-arrow-left"></i></button>
+      <button class="back-btn icon-btn" data-page="dashboard"><i class="fa fa-arrow-left"></i></button>
       <h1 id="sessionPageTitle">Neue Session</h1>
       <button id="openChatBtn" disabled>Chat öffnen</button>
     </header>
@@ -82,7 +82,7 @@
         <label>Workspace</label>
         <div class="input-with-btn">
           <input type="text" id="sessionWorkspace" placeholder="Absoluter Pfad zum Arbeitsverzeichnis (optional)">
-          <button type="button" id="sessionWorkspaceBrowse" class="input-addon-btn"><i class="fa fa-folder"></i></button>
+          <button type="button" id="sessionWorkspaceBrowse" class="icon-btn"><i class="fa fa-folder"></i></button>
         </div>
         <label>Kontext</label>
         <textarea id="sessionContext" rows="4" placeholder="Zusätzlicher Kontext für den System-Prompt (optional)"></textarea>
@@ -102,7 +102,7 @@
 <template id="tpl-agent">
   <div class="page form-page">
     <header>
-      <button class="back-btn" data-page="dashboard"><i class="fa fa-arrow-left"></i></button>
+      <button class="back-btn icon-btn" data-page="dashboard"><i class="fa fa-arrow-left"></i></button>
       <h1 id="agentPageTitle">Neuer Agent</h1>
     </header>
     <div class="page-content">
@@ -143,11 +143,11 @@
 <template id="tpl-chat">
   <div class="page chat-page">
     <header>
-      <button class="back-btn" id="chatBackBtn"><i class="fa fa-arrow-left"></i></button>
+      <button class="back-btn icon-btn" id="chatBackBtn"><i class="fa fa-arrow-left"></i></button>
       <h1 id="sessionTitle">-</h1>
       <div class="custom-cmd-bar" id="customCmdBar"></div>
       <div class="header-menu">
-        <button class="header-menu-trigger" id="chatMenuBtn"><i class="fa fa-ellipsis-v"></i></button>
+        <button class="header-menu-trigger icon-btn" id="chatMenuBtn"><i class="fa fa-ellipsis-v"></i></button>
         <div class="header-menu-dropdown" id="chatMenuDropdown" hidden>
           <button class="header-menu-item" id="systemPromptBtn">System-Prompt anzeigen</button>
           <button class="header-menu-item" id="archiveBtn">Archivieren</button>
@@ -162,10 +162,10 @@
       <div id="refPreview" class="ref-preview" hidden></div>
       <div class="input-area">
         <input type="file" id="fileInput" accept="image/jpeg,image/png,image/gif,image/webp,application/pdf" multiple hidden>
-        <button id="fileBtn" class="file-btn" title="Datei anhängen"><i class="fa fa-paperclip"></i></button>
-        <button id="explorerBtn" class="file-btn" title="Workspace durchsuchen"><i class="fa fa-folder"></i></button>
+        <button id="fileBtn" class="icon-btn" title="Datei anhängen"><i class="fa fa-paperclip"></i></button>
+        <button id="explorerBtn" class="icon-btn" title="Workspace durchsuchen"><i class="fa fa-folder"></i></button>
         <textarea id="input" placeholder="Nachricht..." rows="1"></textarea>
-        <button id="send"><i class="fa fa-paper-plane"></i></button>
+        <button id="send" class="icon-btn"><i class="fa fa-paper-plane"></i></button>
       </div>
     </div>
   </div>
@@ -174,7 +174,7 @@
 <template id="tpl-settings">
   <div class="page settings-page">
     <header>
-      <button class="back-btn" data-page="dashboard"><i class="fa fa-arrow-left"></i></button>
+      <button class="back-btn icon-btn" data-page="dashboard"><i class="fa fa-arrow-left"></i></button>
       <h1>Einstellungen</h1>
     </header>
     <div class="page-content placeholder">

wwwroot/js/file-explorer.js

@@ -26,10 +26,10 @@ function openFileExplorer(opts = {}) {
   modal.innerHTML = `
     <div class="fe-header">
       <div class="fe-nav">
-        <button class="fe-btn" id="feBack" title="Zurück" disabled><i class="fa fa-arrow-left"></i></button>
+        <button class="fe-btn icon-btn" id="feBack" title="Zurück" disabled><i class="fa fa-arrow-left"></i></button>
         <span class="fe-path" id="fePath">/</span>
       </div>
-      <button class="fe-btn" id="feClose"><i class="fa fa-times"></i></button>
+      <button class="fe-btn icon-btn" id="feClose"><i class="fa fa-times"></i></button>
     </div>
     <div class="fe-body">
       <div class="fe-sidebar" id="feSidebar">
@@ -485,10 +485,10 @@ function openFolderBrowser(opts = {}) {
   modal.innerHTML = `
     <div class="fe-header">
       <div class="fe-nav">
-        <button class="fe-btn" id="feBack" title="Zurück" disabled><i class="fa fa-arrow-left"></i></button>
+        <button class="fe-btn icon-btn" id="feBack" title="Zurück" disabled><i class="fa fa-arrow-left"></i></button>
         <span class="fe-path" id="fePath">/</span>
       </div>
-      <button class="fe-btn" id="feClose"><i class="fa fa-times"></i></button>
+      <button class="fe-btn icon-btn" id="feClose"><i class="fa fa-times"></i></button>
     </div>
     <div class="fe-body">
       <div class="fe-sidebar fe-sidebar-full" id="feSidebar">

wwwroot/js/pages/session-page.js

@@ -11,7 +11,7 @@ function _createCommandRow(container, name = '', command = '') {
       <input type="text" class="cmd-name" placeholder="Name (z.B. Deploy)" value="${_escAttr(name)}">
       <input type="text" class="cmd-command" placeholder="Befehl (z.B. ./deploy.sh)" value="${_escAttr(command)}">
     </div>
-    <button type="button" class="remove-cmd-btn"><i class="fa fa-times"></i></button>
+    <button type="button" class="remove-cmd-btn icon-btn"><i class="fa fa-times"></i></button>
   `;
   item.querySelector('.remove-cmd-btn').addEventListener('click', () => item.remove());
   container.appendChild(item);

wwwroot/js/ui.js

@@ -427,7 +427,7 @@ async function showSystemPromptModal(sessionId) {
   title.textContent = 'System-Prompt';
   const closeBtn = document.createElement('button');
   closeBtn.innerHTML = '<i class="fa fa-times"></i>';
-  closeBtn.className = 'sp-close';
+  closeBtn.className = 'sp-close icon-btn';
   header.appendChild(title);
   header.appendChild(closeBtn);