refactor(css): extract inline styles to dedicated CSS files
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.
This commit is contained in:
Dariusz L
+136
-149
@@ -1,151 +1,138 @@
|
||||
/**
|
||||
* CSS Custom Properties (Variables)
|
||||
* Central definitions for the entire project
|
||||
*/
|
||||
:root {
|
||||
--ml-color-primary: #5af;
|
||||
--ml-color-primary-light: #7cf;
|
||||
--ml-color-primary-lighter: #7bf;
|
||||
--ml-color-success: #5f5;
|
||||
--ml-color-error: #f00;
|
||||
--ml-color-error-light: #f55;
|
||||
--ml-color-error-lighter: #f77;
|
||||
--ml-color-warning: #fa0;
|
||||
--ml-color-white: #fff;
|
||||
--ml-color-black: #000;
|
||||
--ml-color-gray-100: #ddd;
|
||||
--ml-color-gray-200: #ccc;
|
||||
--ml-color-gray-300: #aaa;
|
||||
--ml-color-gray-400: #999;
|
||||
--ml-color-gray-500: #888;
|
||||
--ml-color-gray-600: #666;
|
||||
--ml-color-gray-700: #555;
|
||||
--ml-color-gray-800: #444;
|
||||
--ml-color-gray-900: #333;
|
||||
--ml-color-bg-dark-1: #2a2a2a;
|
||||
--ml-color-bg-dark-2: #1e1e1e;
|
||||
--ml-color-bg-dark-3: #1a1a1a;
|
||||
--ml-color-bg-dark-4: #0d0d0d;
|
||||
--ml-color-bg-hover: #3a3a3a;
|
||||
--ml-overlay-dark-20: rgba(0, 0, 0, 0.2);
|
||||
--ml-overlay-dark-50: rgba(0, 0, 0, 0.5);
|
||||
--ml-overlay-dark-70: rgba(0, 0, 0, 0.7);
|
||||
--ml-overlay-dark-80: rgba(0, 0, 0, 0.8);
|
||||
--ml-overlay-light-05: rgba(255, 255, 255, 0.05);
|
||||
--ml-overlay-light-08: rgba(255, 255, 255, 0.08);
|
||||
--ml-overlay-light-10: rgba(255, 255, 255, 0.1);
|
||||
--ml-overlay-light-15: rgba(255, 255, 255, 0.15);
|
||||
--ml-overlay-light-20: rgba(255, 255, 255, 0.2);
|
||||
--ml-bg-primary-10: rgba(90, 170, 255, 0.1);
|
||||
--ml-bg-primary-20: rgba(90, 170, 255, 0.2);
|
||||
--ml-bg-primary-30: rgba(90, 170, 255, 0.3);
|
||||
--ml-bg-primary-40: rgba(90, 170, 255, 0.4);
|
||||
--ml-bg-primary-50: rgba(90, 170, 255, 0.5);
|
||||
--ml-bg-success-10: rgba(80, 255, 80, 0.1);
|
||||
--ml-bg-success-50: rgba(80, 255, 80, 0.5);
|
||||
--ml-bg-error-10: rgba(255, 0, 0, 0.1);
|
||||
--ml-bg-error-20: rgba(255, 0, 0, 0.2);
|
||||
--ml-bg-gray-30: rgba(100, 100, 100, 0.3);
|
||||
--ml-bg-gray-40: rgba(120, 120, 120, 0.4);
|
||||
--ml-line-height-tight: 1.3;
|
||||
--ml-line-height-normal: 1.5;
|
||||
--ml-line-height-relaxed: 1.6;
|
||||
--ml-line-height-editor: 19.5px;
|
||||
--ml-width-dropdown-min: 250px;
|
||||
--ml-width-dropdown-max: 400px;
|
||||
--ml-width-input-inline-sm: 120px;
|
||||
--ml-width-input-inline-md: 200px;
|
||||
--ml-width-dialog-sm: 320px;
|
||||
--ml-width-dialog-md: 800px;
|
||||
--ml-z-dropdown: 9998;
|
||||
--ml-z-dialog: 9999;
|
||||
--ml-z-rename-dialog: 10000;
|
||||
--ml-z-json-editor: 10001;
|
||||
--ml-z-floating-button: 10000;
|
||||
--ml-z-notification: 100000;
|
||||
--ml-z-context-menu: 100001;
|
||||
--ml-z-tooltip: 100002;
|
||||
--ml-spacing-1: 1px;
|
||||
--ml-spacing-2: 2px;
|
||||
--ml-spacing-3: 3px;
|
||||
--ml-spacing-4: 4px;
|
||||
--ml-spacing-5: 5px;
|
||||
--ml-spacing-6: 6px;
|
||||
--ml-spacing-8: 8px;
|
||||
--ml-spacing-10: 10px;
|
||||
--ml-spacing-12: 12px;
|
||||
--ml-spacing-15: 15px;
|
||||
--ml-spacing-16: 16px;
|
||||
--ml-spacing-20: 20px;
|
||||
--ml-spacing-24: 24px;
|
||||
--ml-spacing-32: 32px;
|
||||
--ml-spacing-40: 40px;
|
||||
--ml-spacing-48: 48px;
|
||||
--ml-radius-sm: 2px;
|
||||
--ml-radius-md: 4px;
|
||||
--ml-radius-lg: 6px;
|
||||
--ml-radius-xl: 8px;
|
||||
--ml-radius-2xl: 12px;
|
||||
--ml-radius-3xl: 16px;
|
||||
--ml-font-xs: 10px;
|
||||
--ml-font-sm: 11px;
|
||||
--ml-font-md: 12px;
|
||||
--ml-font-base: 13px;
|
||||
--ml-font-lg: 14px;
|
||||
--ml-font-xl: 16px;
|
||||
--ml-font-2xl: 18px;
|
||||
--ml-font-3xl: 20px;
|
||||
--ml-font-4xl: 24px;
|
||||
--ml-font-5xl: 48px;
|
||||
--ml-transition-fast: 0.1s;
|
||||
--ml-transition-normal: 0.2s;
|
||||
--ml-transition-all-fast: all 0.1s;
|
||||
--ml-transition-all: all 0.2s;
|
||||
--ml-transition-bg-fast: background 0.1s;
|
||||
--ml-transition-bg: background 0.2s;
|
||||
--ml-transition-color: color 0.2s;
|
||||
--ml-transition-border: border-color 0.2s;
|
||||
--ml-transition-opacity: opacity 0.2s;
|
||||
--ml-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);
|
||||
--ml-gradient-dark: linear-gradient(135deg, var(--ml-color-bg-dark-1) 0%, var(--ml-color-bg-dark-2) 100%);
|
||||
--ml-drag-color-reorder: var(--ml-color-primary);
|
||||
--ml-drag-color-move: var(--ml-color-warning);
|
||||
--ml-drag-color-error: var(--ml-color-error);
|
||||
--ml-drag-color-clone: var(--ml-color-success);
|
||||
|
||||
.model-linker-container,
|
||||
[class*="model-linker-"]{
|
||||
/* ===== COLORS - PRIMARY ===== */
|
||||
--color-primary: #5af; /* Main blue */
|
||||
--color-primary-light: #7cf; /* Lighter blue (hover) */
|
||||
--color-primary-lighter: #7bf; /* Lightest blue */
|
||||
|
||||
/* ===== COLORS - STATES ===== */
|
||||
--color-success: #5f5; /* Green success */
|
||||
--color-error: #f00; /* Red error */
|
||||
--color-error-light: #f55; /* Lighter red */
|
||||
--color-error-lighter: #f77; /* Lightest red */
|
||||
--color-warning: #fa0; /* Orange warning */
|
||||
|
||||
/* ===== COLORS - GRAYSCALE ===== */
|
||||
--color-white: #fff;
|
||||
--color-black: #000;
|
||||
--color-gray-100: #ddd; /* Very light */
|
||||
--color-gray-200: #ccc; /* Light */
|
||||
--color-gray-300: #aaa; /* Medium light */
|
||||
--color-gray-400: #999; /* Disabled text */
|
||||
--color-gray-500: #888; /* Medium */
|
||||
--color-gray-600: #666; /* Medium dark */
|
||||
--color-gray-700: #555; /* Dark */
|
||||
--color-gray-800: #444; /* Very dark */
|
||||
--color-gray-900: #333; /* Darkest */
|
||||
|
||||
/* ===== COLORS - BACKGROUND ===== */
|
||||
--color-bg-dark-1: #2a2a2a; /* Gradient start */
|
||||
--color-bg-dark-2: #1e1e1e; /* Gradient end */
|
||||
--color-bg-dark-3: #1a1a1a; /* JSON editor container */
|
||||
--color-bg-dark-4: #0d0d0d; /* JSON editor line numbers */
|
||||
--color-bg-hover: #3a3a3a; /* Generic hover background */
|
||||
|
||||
/* ===== RGBA - OVERLAYS (Dark) ===== */
|
||||
--overlay-dark-20: rgba(0, 0, 0, 0.2);
|
||||
--overlay-dark-50: rgba(0, 0, 0, 0.5);
|
||||
--overlay-dark-70: rgba(0, 0, 0, 0.7);
|
||||
--overlay-dark-80: rgba(0, 0, 0, 0.8);
|
||||
|
||||
/* ===== RGBA - OVERLAYS (Light) ===== */
|
||||
--overlay-light-05: rgba(255, 255, 255, 0.05);
|
||||
--overlay-light-08: rgba(255, 255, 255, 0.08);
|
||||
--overlay-light-10: rgba(255, 255, 255, 0.1);
|
||||
--overlay-light-15: rgba(255, 255, 255, 0.15);
|
||||
--overlay-light-20: rgba(255, 255, 255, 0.2);
|
||||
|
||||
/* ===== RGBA - PRIMARY BACKGROUNDS ===== */
|
||||
--bg-primary-10: rgba(90, 170, 255, 0.1);
|
||||
--bg-primary-20: rgba(90, 170, 255, 0.2);
|
||||
--bg-primary-30: rgba(90, 170, 255, 0.3);
|
||||
--bg-primary-40: rgba(90, 170, 255, 0.4);
|
||||
--bg-primary-50: rgba(90, 170, 255, 0.5);
|
||||
|
||||
/* ===== RGBA - SUCCESS BACKGROUNDS ===== */
|
||||
--bg-success-10: rgba(80, 255, 80, 0.1);
|
||||
--bg-success-50: rgba(80, 255, 80, 0.5);
|
||||
|
||||
/* ===== RGBA - ERROR BACKGROUNDS ===== */
|
||||
--bg-error-10: rgba(255, 0, 0, 0.1);
|
||||
--bg-error-20: rgba(255, 0, 0, 0.2);
|
||||
|
||||
/* ===== RGBA - GRAY BACKGROUNDS ===== */
|
||||
--bg-gray-30: rgba(100, 100, 100, 0.3);
|
||||
--bg-gray-40: rgba(120, 120, 120, 0.4);
|
||||
|
||||
/* ===== LINE HEIGHTS ===== */
|
||||
--line-height-tight: 1.3;
|
||||
--line-height-normal: 1.5;
|
||||
--line-height-relaxed: 1.6;
|
||||
--line-height-editor: 19.5px; /* JSON editor specific */
|
||||
|
||||
/* ===== COMMON WIDTHS ===== */
|
||||
--width-dropdown-min: 250px;
|
||||
--width-dropdown-max: 400px;
|
||||
--width-input-inline-sm: 120px;
|
||||
--width-input-inline-md: 200px;
|
||||
--width-dialog-sm: 320px;
|
||||
--width-dialog-md: 800px;
|
||||
|
||||
/* ===== Z-INDEX SCALE ===== */
|
||||
--z-dropdown: 9998;
|
||||
--z-dialog: 9999;
|
||||
--z-rename-dialog: 10000;
|
||||
--z-json-editor: 10001;
|
||||
|
||||
/* ===== SPACING ===== */
|
||||
--spacing-1: 1px;
|
||||
--spacing-2: 2px;
|
||||
--spacing-3: 3px;
|
||||
--spacing-4: 4px;
|
||||
--spacing-5: 5px;
|
||||
--spacing-6: 6px;
|
||||
--spacing-8: 8px;
|
||||
--spacing-10: 10px;
|
||||
--spacing-12: 12px;
|
||||
--spacing-15: 15px;
|
||||
--spacing-16: 16px;
|
||||
--spacing-20: 20px;
|
||||
--spacing-24: 24px;
|
||||
--spacing-32: 32px;
|
||||
--spacing-40: 40px;
|
||||
--spacing-48: 48px;
|
||||
|
||||
/* ===== BORDER RADIUS ===== */
|
||||
--radius-sm: 2px;
|
||||
--radius-md: 4px;
|
||||
--radius-lg: 6px;
|
||||
--radius-xl: 8px;
|
||||
--radius-2xl: 12px;
|
||||
|
||||
/* ===== FONT SIZES ===== */
|
||||
--font-xs: 10px;
|
||||
--font-sm: 11px;
|
||||
--font-md: 12px;
|
||||
--font-base: 13px;
|
||||
--font-lg: 14px;
|
||||
--font-xl: 16px;
|
||||
--font-2xl: 18px;
|
||||
--font-3xl: 20px;
|
||||
--font-4xl: 24px;
|
||||
--font-5xl: 48px;
|
||||
|
||||
/* ===== TRANSITIONS ===== */
|
||||
--transition-fast: 0.1s;
|
||||
--transition-normal: 0.2s;
|
||||
--transition-all-fast: all 0.1s;
|
||||
--transition-all: all 0.2s;
|
||||
--transition-bg-fast: background 0.1s;
|
||||
--transition-bg: background 0.2s;
|
||||
--transition-color: color 0.2s;
|
||||
--transition-border: border-color 0.2s;
|
||||
--transition-opacity: opacity 0.2s;
|
||||
|
||||
/* ===== SHADOWS ===== */
|
||||
--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);
|
||||
|
||||
/* ===== GRADIENTS ===== */
|
||||
--gradient-dark: linear-gradient(135deg, var(--color-bg-dark-1) 0%, var(--color-bg-dark-2) 100%);
|
||||
|
||||
/* ===== DRAG & DROP ===== */
|
||||
--drag-color-reorder: var(--color-primary);
|
||||
--drag-color-move: var(--color-warning);
|
||||
--drag-color-error: var(--color-error);
|
||||
--drag-color-clone: var(--color-success);
|
||||
--ml-bg: #121212;
|
||||
--ml-bg-soft: #171717;
|
||||
--ml-surface-elevated: #232323;
|
||||
--ml-card-bg: #1a1a1a;
|
||||
--ml-card-bg-alt: #1d1d1d;
|
||||
--ml-panel-bg: #202020;
|
||||
--ml-panel-bg-strong: #262626;
|
||||
--ml-border: rgba(255, 255, 255, 0.08);
|
||||
--ml-border-strong: rgba(255, 255, 255, 0.14);
|
||||
--ml-divider: rgba(255, 255, 255, 0.08);
|
||||
--ml-text: #f3f3f3;
|
||||
--ml-text-muted: #b1b1b1;
|
||||
--ml-text-dim: #7b7b7b;
|
||||
--ml-text-soft: #dfdfdf;
|
||||
--ml-accent: #72d38a;
|
||||
--ml-accent-hover: #88de9e;
|
||||
--ml-accent-blue: #72d38a;
|
||||
--ml-warning: #e1b24d;
|
||||
--ml-confidence-high: #72d38a;
|
||||
--ml-confidence-medium: #e1b24d;
|
||||
--ml-confidence-low: #e06a6a;
|
||||
--ml-link-color: #d8d8d8;
|
||||
--ml-shadow-elevated: 0 18px 42px rgba(0, 0, 0, 0.28);
|
||||
--ml-ui-radius-sm: var(--ml-radius-xl);
|
||||
--ml-ui-radius-md: var(--ml-radius-2xl);
|
||||
--ml-ui-radius-lg: var(--ml-radius-3xl);
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,409 @@
|
||||
.model-linker-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: transparent;
|
||||
z-index: var(--ml-z-dropdown);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.model-linker-modal {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 1100px;
|
||||
height: 700px;
|
||||
max-width: 95vw;
|
||||
max-height: 95vh;
|
||||
min-width: 640px;
|
||||
min-height: 420px;
|
||||
padding: 0;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
resize: both;
|
||||
z-index: var(--ml-z-dialog);
|
||||
color: var(--input-text, #fff);
|
||||
background: var(--comfy-menu-bg, #202020);
|
||||
border: 2px solid var(--border-color, #555);
|
||||
border-radius: var(--ml-ui-radius-sm);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.ml-context-menu {
|
||||
position: fixed;
|
||||
display: none;
|
||||
z-index: var(--ml-z-context-menu);
|
||||
}
|
||||
|
||||
.ml-context-menu-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ml-global-tooltip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ml-dialog-shell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.ml-dialog-topbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--ml-spacing-5);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
background: var(--comfy-menu-bg, #202020);
|
||||
}
|
||||
|
||||
.ml-dialog-brand,
|
||||
.ml-dialog-controls,
|
||||
.ml-dialog-control-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--ml-spacing-8);
|
||||
}
|
||||
|
||||
#model-linker-drag-handle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: var(--ml-spacing-24);
|
||||
padding: 0 var(--ml-spacing-6);
|
||||
opacity: 0.9;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--ml-radius-md);
|
||||
}
|
||||
|
||||
.ml-dialog-title {
|
||||
margin: 0;
|
||||
color: var(--input-text);
|
||||
font-size: var(--ml-font-2xl);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ml-window-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--input-text);
|
||||
cursor: pointer;
|
||||
border-radius: var(--ml-radius-md);
|
||||
}
|
||||
|
||||
.ml-window-btn--fullscreen {
|
||||
min-width: var(--ml-spacing-32);
|
||||
height: 30px;
|
||||
padding: var(--ml-spacing-2) var(--ml-spacing-8);
|
||||
font-size: var(--ml-font-xl);
|
||||
background: none;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.ml-window-btn--close {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
padding: 0;
|
||||
font-size: var(--ml-font-4xl);
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#model-linker-body {
|
||||
display: flex;
|
||||
gap: var(--ml-spacing-12);
|
||||
padding: var(--ml-spacing-10) var(--ml-spacing-5) var(--ml-spacing-5);
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
align-items: stretch;
|
||||
position: relative;
|
||||
background: var(--ml-bg, #222);
|
||||
}
|
||||
|
||||
#model-linker-content {
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
background: var(--ml-bg, #222);
|
||||
}
|
||||
|
||||
#model-linker-queue {
|
||||
width: 320px;
|
||||
min-width: 240px;
|
||||
max-width: 70%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: var(--ml-spacing-12);
|
||||
border-left: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
#model-linker-splitter {
|
||||
width: var(--ml-spacing-6);
|
||||
min-width: var(--ml-spacing-6);
|
||||
opacity: 0.4;
|
||||
cursor: col-resize;
|
||||
background: var(--border-color);
|
||||
border-radius: var(--ml-spacing-3);
|
||||
}
|
||||
|
||||
#queue-toggle-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: var(--ml-spacing-6);
|
||||
z-index: 1000;
|
||||
padding: var(--ml-spacing-2) var(--ml-spacing-6);
|
||||
transform: translateY(-50%);
|
||||
opacity: 0.9;
|
||||
cursor: pointer;
|
||||
background: var(--comfy-input-bg, #2f2f2f);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--ml-radius-md);
|
||||
}
|
||||
|
||||
.ml-queue-panel,
|
||||
.ml-queue-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.ml-queue-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--ml-spacing-8);
|
||||
}
|
||||
|
||||
.ml-queue-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ml-queue-actions {
|
||||
display: flex;
|
||||
gap: var(--ml-spacing-6);
|
||||
}
|
||||
|
||||
.ml-queue-list {
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
padding: var(--ml-spacing-8);
|
||||
background: var(--comfy-input-bg, #2f2f2f);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--ml-radius-md);
|
||||
}
|
||||
|
||||
.ml-queue-empty {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.ml-queue-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--ml-spacing-6);
|
||||
}
|
||||
|
||||
.ml-queue-item {
|
||||
padding: var(--ml-spacing-6);
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--ml-radius-md);
|
||||
}
|
||||
|
||||
.ml-queue-item-title,
|
||||
.ml-selected-label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ml-queue-item-meta,
|
||||
.ml-queue-item-selection {
|
||||
font-size: var(--ml-font-md);
|
||||
}
|
||||
|
||||
.ml-queue-item-meta {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.ml-queue-item-actions,
|
||||
.ml-selected-bar-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--ml-spacing-8);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ml-queue-item-actions {
|
||||
margin-top: var(--ml-spacing-6);
|
||||
}
|
||||
|
||||
.model-linker-selected {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.ml-selected-label {
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
.ml-selected-code {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.ml-inline-note-link {
|
||||
cursor: pointer;
|
||||
color: var(--ml-accent-blue);
|
||||
}
|
||||
|
||||
.ml-footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
background: var(--ml-bg, #222);
|
||||
backdrop-filter: blur(8px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.ml-notification {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--ml-spacing-12);
|
||||
min-width: 300px;
|
||||
max-width: 600px;
|
||||
padding: var(--ml-spacing-12) var(--ml-spacing-24);
|
||||
color: #fff;
|
||||
font-size: var(--ml-font-lg);
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
transform: translateX(-50%);
|
||||
border-radius: 0 0 var(--ml-ui-radius-sm) var(--ml-ui-radius-sm);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
z-index: var(--ml-z-notification);
|
||||
animation: ml-slide-down 0.3s ease;
|
||||
}
|
||||
|
||||
.ml-notification--success {
|
||||
background: #28a745;
|
||||
}
|
||||
|
||||
.ml-notification--error {
|
||||
background: #dc3545;
|
||||
}
|
||||
|
||||
.ml-notification--info {
|
||||
background: #007acc;
|
||||
}
|
||||
|
||||
.ml-notification-icon {
|
||||
font-size: var(--ml-font-2xl);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.ml-notification-close {
|
||||
width: var(--ml-spacing-24);
|
||||
height: var(--ml-spacing-24);
|
||||
margin-left: auto;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0.8;
|
||||
color: #fff;
|
||||
font-size: var(--ml-font-3xl);
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: none;
|
||||
border-radius: var(--ml-radius-md);
|
||||
}
|
||||
|
||||
.ml-popup-auto-resolve-btn,
|
||||
.model-linker-floating-button {
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ml-popup-auto-resolve-btn {
|
||||
padding: var(--ml-spacing-6) var(--ml-spacing-12);
|
||||
color: #fff;
|
||||
font-size: var(--ml-font-md);
|
||||
background: #4caf50;
|
||||
border: none;
|
||||
border-radius: var(--ml-radius-lg);
|
||||
}
|
||||
|
||||
.ml-popup-auto-resolve-btn:hover {
|
||||
background: #45a049;
|
||||
}
|
||||
|
||||
.ml-popup-inline-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--ml-spacing-16);
|
||||
padding: 0 var(--ml-spacing-16);
|
||||
margin-bottom: var(--ml-spacing-8);
|
||||
}
|
||||
|
||||
.ml-popup-actions-wrap {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 0 var(--ml-spacing-16);
|
||||
margin-bottom: var(--ml-spacing-8);
|
||||
}
|
||||
|
||||
.ml-resolved-entry {
|
||||
transition: all 0.3s ease;
|
||||
background: rgba(76, 175, 80, 0.2);
|
||||
border: 1px solid #4caf50;
|
||||
border-radius: var(--ml-radius-lg);
|
||||
}
|
||||
|
||||
.ml-resolved-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--ml-spacing-4) var(--ml-spacing-12);
|
||||
color: #fff;
|
||||
font-size: var(--ml-font-md);
|
||||
font-weight: 600;
|
||||
background: #4caf50;
|
||||
border-radius: var(--ml-radius-md);
|
||||
}
|
||||
|
||||
.model-linker-floating-button {
|
||||
position: fixed;
|
||||
top: var(--ml-spacing-10);
|
||||
right: var(--ml-spacing-10);
|
||||
z-index: var(--ml-z-floating-button);
|
||||
padding: var(--ml-spacing-8) var(--ml-spacing-16);
|
||||
color: var(--input-text, #fff);
|
||||
font-size: var(--ml-font-lg);
|
||||
background: var(--comfy-input-bg, #353535);
|
||||
border: 2px solid var(--primary-color, #007acc);
|
||||
border-radius: var(--ml-radius-lg);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.model-linker-floating-button:hover {
|
||||
background: var(--primary-color, #007acc);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
@keyframes ml-slide-down {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(-100%);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
}
|
||||
+5533
-7904
File diff suppressed because it is too large
Load Diff
@@ -17,7 +17,9 @@ export function loadAllStyles() {
|
||||
|
||||
// Load all CSS files using getUrl for proper path resolution
|
||||
const cssFiles = [
|
||||
'./css/css-variables.css', // CSS Custom Properties - MUST BE FIRST!
|
||||
'./css/css-variables.css',
|
||||
'./css/linker-shell.css',
|
||||
'./css/linker-main.css',
|
||||
];
|
||||
|
||||
cssFiles.forEach(file => {
|
||||
|
||||
Reference in New Issue
Block a user