From 9df0400faee84237ecb1f0a8f5886b11f09b5ee7 Mon Sep 17 00:00:00 2001
From: Dariusz L <dl122@wp.pl>
Date: Fri, 29 May 2026 16:34:40 +0200
Subject: [PATCH] Refactor button styling to use CSS variables and add support
 for model linker modal

---
 web/css/linker-main.css | 224 +++++++++++++++++++++++++++-------------
 1 file changed, 151 insertions(+), 73 deletions(-)

diff --git a/web/css/linker-main.css b/web/css/linker-main.css
index 3f65c37..11ce58c 100644
--- a/web/css/linker-main.css
+++ b/web/css/linker-main.css
@@ -81,28 +81,60 @@
 .ml-loaded-filter-row {
     display: flex;
     gap: var(--ml-spacing-8);
+    flex-wrap: wrap;
     margin-bottom: var(--ml-spacing-16);
 }
 
-.ml-btn-filter {
-    padding: var(--ml-spacing-6) var(--ml-spacing-12);
-    font-size: var(--ml-font-md);
-    background: var(--ml-color-gray-900);
-    border: 1px solid var(--ml-color-gray-800);
-    color: var(--ml-color-gray-300);
+.ml-btn-filter,
+#model-linker-modal .ml-btn-filter {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--ml-spacing-5);
+    min-height: var(--ml-missing-search-button-height, 34px);
+    height: var(--ml-missing-search-button-height, 34px);
+    padding: 0 12px;
+    color: var(--ml-text);
+    background: var(--ml-missing-control-bg, rgba(255,255,255,0.035));
+    border: 1px solid var(--ml-missing-control-border, rgba(255,255,255,0.105));
+    border-radius: var(--ml-missing-control-radius, 7px);
+    box-shadow: var(--ml-missing-control-shadow, none);
+    box-sizing: border-box;
     cursor: pointer;
-    border-radius: var(--ml-radius-md);
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 1;
+    text-decoration: none;
+    transition: var(--ml-missing-control-transition, background 0.15s ease, border-color 0.15s ease, color 0.15s ease);
+    white-space: nowrap;
 }
 
-.ml-btn-filter:hover {
-    background: var(--ml-color-gray-800);
-    color: var(--ml-color-white);
+.ml-btn-filter:hover:not(:disabled),
+#model-linker-modal .ml-btn-filter:hover:not(:disabled) {
+    color: var(--ml-text);
+    background: var(--ml-missing-control-bg-hover, rgba(255,255,255,0.06));
+    border-color: var(--ml-missing-control-border-hover, rgba(255,255,255,0.17));
+    transform: none;
 }
 
-.ml-btn-filter.active {
-    background: #4caf50;
-    border-color: #4caf50;
-    color: var(--ml-color-white);
+.ml-btn-filter:focus-visible,
+#model-linker-modal .ml-btn-filter:focus-visible {
+    outline: none;
+    border-color: var(--ml-missing-control-focus-border, rgba(114,211,138,0.30));
+    box-shadow: 0 0 0 2px var(--ml-missing-control-focus-ring, rgba(114,211,138,0.08));
+}
+
+.ml-btn-filter.active,
+#model-linker-modal .ml-btn-filter.active {
+    color: #dffbe5;
+    background: rgba(114,211,138,0.13);
+    border-color: rgba(114,211,138,0.32);
+}
+
+.ml-btn-filter.active:hover:not(:disabled),
+#model-linker-modal .ml-btn-filter.active:hover:not(:disabled) {
+    background: rgba(114,211,138,0.17);
+    border-color: rgba(114,211,138,0.42);
 }
 
 .ml-models-list-pad {
@@ -1275,94 +1307,134 @@
 }
 
 /* Buttons */
-.ml-btn {
+.ml-btn,
+#model-linker-modal .ml-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: var(--ml-spacing-5);
-    min-height: 30px;
-    padding: var(--ml-spacing-6) 11px;
-    border: 1px solid transparent;
-    border-radius: var(--ml-ui-radius-sm);
-    font-size: var(--ml-font-sm);
-    font-weight: 600;
+    min-height: var(--ml-missing-search-button-height, 34px);
+    height: var(--ml-missing-search-button-height, 34px);
+    padding: 0 12px;
+    color: var(--ml-text);
+    background: var(--ml-missing-control-bg, rgba(255,255,255,0.035));
+    border: 1px solid var(--ml-missing-control-border, rgba(255,255,255,0.105));
+    border-radius: var(--ml-missing-control-radius, 7px);
+    box-shadow: var(--ml-missing-control-shadow, none);
+    box-sizing: border-box;
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 1;
     cursor: pointer;
-    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
+    appearance: none;
+    -webkit-appearance: none;
+    transition: var(--ml-missing-control-transition, background 0.15s ease, border-color 0.15s ease, color 0.15s ease);
     white-space: nowrap;
     text-decoration: none;
-    box-sizing: border-box;
 }
-.ml-missing-browser .ml-btn {
+.ml-btn:hover:not(:disabled),
+#model-linker-modal .ml-btn:hover:not(:disabled) {
+    color: var(--ml-text);
+    background: var(--ml-missing-control-bg-hover, rgba(255,255,255,0.06));
+    border-color: var(--ml-missing-control-border-hover, rgba(255,255,255,0.17));
+    transform: none;
+}
+.ml-missing-browser .ml-btn,
+#model-linker-modal .ml-missing-browser .ml-btn {
     border-radius: var(--ml-missing-control-radius, var(--ml-ui-radius-sm));
     box-shadow: var(--ml-missing-control-shadow, none);
 }
-.ml-missing-browser .ml-btn:hover:not(:disabled) {
+.ml-missing-browser .ml-btn:hover:not(:disabled),
+#model-linker-modal .ml-missing-browser .ml-btn:hover:not(:disabled) {
     transform: none;
 }
-.ml-btn:disabled {
+.ml-btn:disabled,
+#model-linker-modal .ml-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
 }
-.ml-btn-primary {
+.ml-btn:focus-visible,
+#model-linker-modal .ml-btn:focus-visible {
+    outline: none;
+    border-color: var(--ml-missing-control-focus-border, rgba(114,211,138,0.30));
+    box-shadow: 0 0 0 2px var(--ml-missing-control-focus-ring, rgba(114,211,138,0.08));
+}
+.ml-btn-primary,
+#model-linker-modal .ml-btn-primary {
     background: var(--ml-accent);
+    border-color: rgba(114,211,138,0.42);
     color: white;
 }
-.ml-btn-primary:hover:not(:disabled) {
+.ml-btn-primary:hover:not(:disabled),
+#model-linker-modal .ml-btn-primary:hover:not(:disabled) {
     background: var(--ml-accent-hover);
+    border-color: rgba(114,211,138,0.55);
+    color: white;
 }
-.ml-btn-secondary {
-    background: rgba(255,255,255,0.03);
+.ml-btn-secondary,
+.ml-btn-link,
+#model-linker-modal .ml-btn-secondary,
+#model-linker-modal .ml-btn-link {
+    background: var(--ml-missing-control-bg, rgba(255,255,255,0.035));
     color: var(--ml-text);
-    border-color: rgba(255,255,255,0.1);
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
+    border-color: var(--ml-missing-control-border, rgba(255,255,255,0.105));
+    box-shadow: var(--ml-missing-control-shadow, none);
 }
-.ml-missing-browser .ml-btn-secondary {
+.ml-missing-browser .ml-btn-secondary,
+#model-linker-modal .ml-missing-browser .ml-btn-secondary {
     background: var(--ml-missing-control-bg, rgba(255,255,255,0.035));
     border-color: var(--ml-missing-control-border, var(--ml-missing-line-strong, rgba(255,255,255,0.12)));
 }
-.ml-btn-secondary:hover:not(:disabled) {
-    background: rgba(255,255,255,0.05);
-    border-color: rgba(255,255,255,0.16);
-    transform: translateY(-1px);
+.ml-btn-secondary:hover:not(:disabled),
+.ml-btn-link:hover:not(:disabled),
+#model-linker-modal .ml-btn-secondary:hover:not(:disabled),
+#model-linker-modal .ml-btn-link:hover:not(:disabled) {
+    background: var(--ml-missing-control-bg-hover, rgba(255,255,255,0.06));
+    color: var(--ml-text);
+    border-color: var(--ml-missing-control-border-hover, rgba(255,255,255,0.17));
+    transform: none;
 }
-.ml-missing-browser .ml-btn-secondary:hover:not(:disabled) {
+.ml-missing-browser .ml-btn-secondary:hover:not(:disabled),
+#model-linker-modal .ml-missing-browser .ml-btn-secondary:hover:not(:disabled) {
     background: var(--ml-missing-control-bg-hover, rgba(255,255,255,0.055));
     border-color: var(--ml-missing-control-border-hover, rgba(255,255,255,0.18));
     transform: none;
 }
-.ml-btn-link {
-    background: rgba(255,255,255,0.03);
-    color: var(--ml-text);
-    border-color: rgba(255,255,255,0.1);
-    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
-}
-.ml-btn-link:hover:not(:disabled) {
-    background: rgba(255,255,255,0.05);
-    color: var(--ml-text);
-    border-color: rgba(255,255,255,0.16);
-    transform: translateY(-1px);
-}
-.ml-btn-download {
+.ml-btn-download,
+#model-linker-modal .ml-btn-download {
     background: var(--ml-accent);
+    border-color: rgba(114,211,138,0.42);
     color: #101010;
     box-shadow: 0 8px 18px rgba(114,211,138,0.18);
 }
-.ml-btn-download:hover:not(:disabled) {
+.ml-btn-download:hover:not(:disabled),
+#model-linker-modal .ml-btn-download:hover:not(:disabled) {
     background: var(--ml-accent-hover);
-    transform: translateY(-1px);
+    border-color: rgba(114,211,138,0.55);
+    color: #101010;
+    transform: none;
 }
-.ml-btn-danger {
+.ml-btn-danger,
+#model-linker-modal .ml-btn-danger {
     background: #f44336;
+    border-color: rgba(244,67,54,0.52);
     color: white;
 }
-.ml-btn-danger:hover:not(:disabled) {
+.ml-btn-danger:hover:not(:disabled),
+#model-linker-modal .ml-btn-danger:hover:not(:disabled) {
     background: #d32f2f;
+    border-color: rgba(211,47,47,0.62);
+    color: white;
 }
-.ml-btn-sm {
-    min-height: 24px;
-    padding: var(--ml-spacing-2) var(--ml-spacing-7);
-    font-size: 9px;
-    border-radius: var(--ml-radius-xl);
+.ml-btn-sm,
+#model-linker-modal .ml-btn-sm {
+    min-height: var(--ml-missing-search-button-height, 34px);
+    height: var(--ml-missing-search-button-height, 34px);
+    padding: 0 12px;
+    border-radius: var(--ml-missing-control-radius, 7px);
+    font-size: 12px;
+    font-weight: 700;
+    line-height: 1;
 }
 .ml-btn-ghost {
     background: rgba(255,255,255,0.018);
@@ -1444,16 +1516,21 @@
     width: 14px;
     height: 14px;
 }
-.ml-btn-icon-only {
-    width: var(--ml-spacing-24);
-    min-width: var(--ml-spacing-24);
+.ml-btn-icon-only,
+#model-linker-modal .ml-btn-icon-only {
+    width: var(--ml-missing-search-button-height, 34px);
+    min-width: var(--ml-missing-search-button-height, 34px);
+    height: var(--ml-missing-search-button-height, 34px);
+    min-height: var(--ml-missing-search-button-height, 34px);
     padding: 0;
     aspect-ratio: 1;
 }
-.ml-btn-icon {
+.ml-btn-icon,
+#model-linker-modal .ml-btn-icon {
     font-size: var(--ml-font-md);
 }
-.ml-btn-icon svg {
+.ml-btn-icon svg,
+#model-linker-modal .ml-btn-icon svg {
     width: var(--ml-font-base);
     height: var(--ml-font-base);
     display: block;
@@ -1461,7 +1538,7 @@
 .ml-card-actions .ml-btn,
 .ml-match-row .ml-btn,
 .ml-combo-row .ml-btn {
-    min-height: 24px;
+    min-height: 28px;
 }
 .ml-search-source-btn {
     border-radius: 999px;
@@ -3779,20 +3856,21 @@
     white-space: nowrap;
 }
 #model-linker-modal .ml-missing-detail-pane .model-linker-selected .ml-btn {
-    min-height: 28px;
-    height: 28px;
-    padding: 0 10px;
+    min-height: var(--ml-missing-search-button-height, 34px);
+    height: var(--ml-missing-search-button-height, 34px);
+    padding: 0 12px;
     margin-left: auto;
     background: var(--ml-missing-control-bg, rgba(255,255,255,0.035));
-    border-color: var(--ml-missing-control-border, rgba(255,255,255,0.12));
+    border-color: var(--ml-missing-control-border, rgba(255,255,255,0.105));
     border-radius: var(--ml-missing-control-radius, 7px);
-    color: var(--ml-text-muted);
+    color: var(--ml-text);
     box-shadow: var(--ml-missing-control-shadow, none) !important;
-    font-size: 11px;
+    font-size: 12px;
+    font-weight: 700;
 }
 #model-linker-modal .ml-missing-detail-pane .model-linker-selected .ml-btn:hover:not(:disabled) {
     background: var(--ml-missing-control-bg-hover, rgba(255,255,255,0.06));
-    border-color: var(--ml-missing-control-border-hover, rgba(255,255,255,0.18));
+    border-color: var(--ml-missing-control-border-hover, rgba(255,255,255,0.17));
     color: var(--ml-text);
 }
 #model-linker-modal .ml-missing-detail-pane .ml-search-progress-list-compact {