Merge branch 'features/web'

Author: Paweł Kędzia

llm_router_web/web/static/style.css

@@ -589,7 +589,7 @@ summary.clickable:hover {
 /* ----- Menu ----- */
 .menu {
  display: flex;
- gap: var(--space-2);
+ gap: var(--space-3);
  align-items: stretch;
  flex-wrap: wrap;
 }
@@ -602,33 +602,298 @@ summary.clickable:hover {
  display: flex;
  align-items: center;
  justify-content: center;
- height: 48px;
- padding: 0 var(--space-4);
- border-radius: 0;
- background: var(--card);
+ min-height: 56px;
+ padding: var(--space-3) var(--space-4);
+ border-radius: var(--radius-md);
+ background: linear-gradient(145deg, var(--card), rgba(0, 0, 0, .15));
  color: var(--fg);
  text-decoration: none;
- transition: background .15s, color .15s;
- border-bottom: 2px solid transparent;
- font-weight: 500;
+ transition: all .2s ease;
+ border: 1px solid var(--border);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, .15),
+ 0 4px 12px rgba(0, 0, 0, .08),
+ inset 0 1px 0 rgba(255, 255, 255, .05);
+ font-weight: 600;
+ cursor: pointer;
+ position: relative;
+ overflow: hidden;
 }
 
-.menu a:hover, .menu a.active {
- background: var(--accent);
+.menu a::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 2px;
+ background: linear-gradient(90deg, transparent, var(--accent), transparent);
+ opacity: 0;
+ transition: opacity .2s ease;
+}
+
+.menu a:hover {
+ background: linear-gradient(145deg, var(--accent), var(--accent-600));
+ color: #fff;
+ border-color: var(--accent);
+ transform: translateY(-2px);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, .2),
+ 0 8px 20px rgba(0, 0, 0, .15),
+ inset 0 1px 0 rgba(255, 255, 255, .1);
+}
+
+.menu a:hover::before {
+ opacity: 1;
+}
+
+.menu a.active {
+ background: linear-gradient(145deg, var(--accent), var(--accent-700));
  color: #fff;
- border-bottom-color: #fff;
+ border-color: var(--accent-600);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, .2),
+ inset 0 2px 4px rgba(0, 0, 0, .15),
+ inset 0 -1px 0 rgba(255, 255, 255, .1);
+}
+
+.menu a.active::before {
+ opacity: 1;
+ background: rgba(255, 255, 255, .3);
+}
+
+.menu a:active {
+ transform: translateY(0);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, .2),
+ inset 0 2px 6px rgba(0, 0, 0, .2);
 }
 
 .menu a.danger {
- background: var(--danger-soft);
+ background: linear-gradient(145deg, var(--danger-soft), rgba(220, 38, 38, .8));
  color: #fff;
+ border-color: var(--danger);
 }
 
 .menu a.danger:hover, .menu a.danger.active {
- background: var(--danger);
+ background: linear-gradient(145deg, var(--danger), #b91c1c);
+ color: #fff;
+ border-color: #991b1b;
+}
+
+/* ----- Dropdown buttons in topbar ----- */
+.dropdown {
+ position: relative;
+}
+
+.dropdown .btn-tile {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-height: 48px;
+ padding: var(--space-2) var(--space-4);
+ border-radius: var(--radius-md);
+ background: linear-gradient(145deg, var(--card), rgba(0, 0, 0, .2));
+ color: var(--fg);
+ border: 1px solid var(--border);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, .15),
+ 0 4px 12px rgba(0, 0, 0, .08),
+ inset 0 1px 0 rgba(255, 255, 255, .05);
+ font-weight: 600;
+ font-size: 0.95rem;
+ cursor: pointer;
+ transition: all .2s ease;
+ position: relative;
+ overflow: hidden;
+ font-family: inherit;
+}
+
+.dropdown .btn-tile::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 2px;
+ background: linear-gradient(90deg, transparent, var(--accent), transparent);
+ opacity: 0;
+ transition: opacity .2s ease;
+}
+
+.dropdown .btn-tile:hover {
+ background: linear-gradient(145deg, var(--accent), var(--accent-600));
+ color: #fff;
+ border-color: var(--accent);
+ transform: translateY(-2px);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, .2),
+ 0 8px 20px rgba(0, 0, 0, .15),
+ inset 0 1px 0 rgba(255, 255, 255, .1);
+}
+
+.dropdown .btn-tile:hover::before {
+ opacity: 1;
+}
+
+.dropdown .btn-tile.active {
+ background: linear-gradient(145deg, var(--accent), var(--accent-700));
+ color: #fff;
+ border-color: var(--accent-600);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, .2),
+ inset 0 2px 4px rgba(0, 0, 0, .15),
+ inset 0 -1px 0 rgba(255, 255, 255, .1);
+}
+
+.dropdown .btn-tile.active::before {
+ opacity: 1;
+ background: rgba(255, 255, 255, .3);
+}
+
+.dropdown .btn-tile:active {
+ transform: translateY(0);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, .2),
+ inset 0 2px 6px rgba(0, 0, 0, .2);
+}
+
+.dropdown-content {
+ position: absolute;
+ right: 0;
+ top: calc(100% + 8px);
+ background: var(--card);
+ border: 1px solid var(--border);
+ border-radius: var(--radius-md);
+ padding: var(--space-3);
+ min-width: 220px;
+ z-index: 1000;
+ box-shadow: 0 8px 24px rgba(0, 0, 0, .3),
+ 0 4px 12px rgba(0, 0, 0, .2);
+}
+
+.dropdown-content .panel {
+ margin-bottom: var(--space-3);
+ padding: 0;
+ background: transparent;
+ border: none;
+ box-shadow: none;
+}
+
+.dropdown-content .panel:last-child {
+ margin-bottom: 0;
+}
+
+.dropdown-content .label {
+ display: block;
+ font-weight: 700;
+ font-size: 0.75rem;
+ color: var(--muted);
+ margin-bottom: var(--space-2);
+ text-transform: uppercase;
+ letter-spacing: 0.8px;
+ padding-left: var(--space-1);
+}
+
+/* Dropdown items styling */
+.dropdown-content .btn-small,
+.dropdown-content a.btn-small,
+.dropdown-content button.btn-small {
+ display: block;
+ width: 100%;
+ text-align: left;
+ margin-bottom: var(--space-2);
+ padding: var(--space-2) var(--space-3);
+ border-radius: var(--radius-sm);
+ background: linear-gradient(145deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .1));
+ border: 1px solid var(--border);
+ color: var(--fg);
+ font-weight: 500;
+ font-size: 0.9rem;
+ transition: all .15s ease;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+ cursor: pointer;
+}
+
+.dropdown-content .btn-small:last-child {
+ margin-bottom: 0;
+}
+
+.dropdown-content .btn-small:hover {
+ background: linear-gradient(145deg, var(--accent), var(--accent-600));
+ color: #fff;
+ border-color: var(--accent);
+ transform: translateX(4px);
+ box-shadow: 0 2px 6px rgba(0, 0, 0, .2),
+ inset 0 1px 0 rgba(255, 255, 255, .1);
+}
+
+.dropdown-content .btn-small.active {
+ background: linear-gradient(145deg, var(--accent-700), var(--accent-600));
+ color: #fff;
+ border-color: var(--accent-600);
+ box-shadow: inset 0 2px 4px rgba(0, 0, 0, .2);
+ position: relative;
+}
+
+.dropdown-content .btn-small.active::after {
+ content: '✓';
+ position: absolute;
+ right: var(--space-3);
+ top: 50%;
+ transform: translateY(-50%);
+ font-weight: 700;
+ font-size: 1rem;
+}
+
+.dropdown-content .btn-small.danger {
+ background: linear-gradient(145deg, rgba(239, 68, 68, .15), rgba(220, 38, 38, .1));
+ border-color: rgba(239, 68, 68, .3);
+ color: var(--danger-soft);
+}
+
+.dropdown-content .btn-small.danger:hover {
+ background: linear-gradient(145deg, var(--danger), #b91c1c);
+ border-color: var(--danger);
  color: #fff;
 }
 
+/* Special styling for buttons with background override */
+.dropdown-content .btn-small[style*="background"] {
+ box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
+}
+
+.dropdown-content .btn-small[style*="background"]:hover {
+ filter: brightness(1.1);
+ transform: translateX(4px);
+}
+
+/* Theme select in dropdown */
+.dropdown-content #theme-select {
+ width: 100%;
+ margin-bottom: var(--space-2);
+ padding: var(--space-2);
+ background: rgba(0, 0, 0, .2);
+ border: 1px solid var(--border);
+ border-radius: var(--radius-sm);
+ color: var(--fg);
+ font-size: 0.9rem;
+ cursor: pointer;
+ transition: all .15s ease;
+}
+
+.dropdown-content #theme-select:hover {
+ border-color: var(--accent);
+ background: rgba(0, 0, 0, .3);
+}
+
+.dropdown-content #theme-select:focus {
+ outline: none;
+ border-color: var(--accent);
+ box-shadow: 0 0 0 2px rgba(90, 169, 255, .2);
+}
+
+/* Label styling in dropdown */
+.dropdown-content label {
+ display: block;
+ font-weight: 600;
+ font-size: 0.85rem;
+ color: var(--muted);
+ margin-bottom: var(--space-2);
+}
+
 /* ----- Theme Selector ----- */
 #theme-select {
  width: auto;