- Active tab: use CSS mask for corner effects instead of box-shadow
- Hover tab: add pseudo-element overlay with proper z-index layering
- Increase tab hover background opacity from 0.045 to 0.075
- Add --ml-tab-corner-size variable for corner radius control
- Fix tab separator color to use active bg color instead of inset shadow
- Update header border in linker-shell.css for better contrast
- Replace unicode text ('⛶', '×') with SVG icons for fullscreen/close buttons
- Add new SVG icons (windowMaximize, windowRestore, x) to icon_utils.js
- Update CSS selectors to scope window button styles under #model-linker-modal
- Remove border/box-shadow from buttons, add hover states
- Increase button size to 46x40px with full height
- Add aria-label attributes for accessibility
- Adjust dialog controls layout with stretch alignment
- Move tab elements before dialog controls in DOM order
- Update tab styling: smaller min-height, rounded corners, subtle backgrounds
- Add ml-dialog-brand and ml-dialog-controls flex classes
- Adjust active tab border and background opacity
Remove ~8000 lines of inline JavaScript styles from linker.js and organize
them into two focused stylesheets:
- linker-shell.css: modal shell, backdrop, window controls, layout structure
- linker-main.css: main content area (cards, buttons, forms, dialogs, tabs)
Simplify and clean up css-variables.css variable definitions.
Update css-loader.js to load both new stylesheet files.
Significantly improves code maintainability and separation of concerns.
Dariusz L