@charset "UTF-8"; /** * SCSS Variables for Super LoRA Loader */ /** * Main styles for Super LoRA Loader */ .super-lora-node { background: #2d2d2d; border: 1px solid #555555; border-radius: 5px; } .super-lora-node:hover { border-color: #777777; } .super-lora-node.selected { border-color: #4a9eff; box-shadow: 0 0 8px rgba(74, 158, 255, 0.3); } .super-lora-header { display: flex; align-items: center; justify-content: space-between; padding: 8px; background: #3a3a3a; border-bottom: 1px solid #555555; border-radius: 5px 5px 0 0; } .super-lora-header .header-title { color: #ffffff; font-size: 16px; font-weight: 600; } .super-lora-header .header-controls { display: flex; gap: 4px; } .super-lora-tag-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; background: #454545; border-bottom: 1px solid #555555; cursor: pointer; transition: background-color 0.1s ease; } .super-lora-tag-header:hover { background: #4a4a4a; } .super-lora-tag-header .tag-info { display: flex; align-items: center; gap: 4px; } .super-lora-tag-header .tag-info .tag-icon { font-size: 14px; } .super-lora-tag-header .tag-info .tag-name { color: #ffffff; font-weight: 500; } .super-lora-tag-header .tag-info .tag-count { color: #999999; font-size: 12px; } .super-lora-tag-header .tag-controls { display: flex; align-items: center; gap: 4px; } .super-lora-tag-header .tag-controls .collapse-icon { color: #cccccc; transition: transform 0.1s ease; } .super-lora-tag-header .tag-controls .collapse-icon.collapsed { transform: rotate(-90deg); } .super-lora-tag-header.tag-general { border-left: 3px solid #6c757d; } .super-lora-tag-header.tag-character { border-left: 3px solid #e83e8c; } .super-lora-tag-header.tag-style { border-left: 3px solid #6f42c1; } .super-lora-tag-header.tag-quality { border-left: 3px solid #20c997; } .super-lora-tag-header.tag-effect { border-left: 3px solid #fd7e14; } .super-lora-tag-header.tag-custom { border-left: 3px solid #17a2b8; } .super-lora-widget { display: flex; align-items: center; padding: 4px 8px; border-bottom: 1px solid rgba(85, 85, 85, 0.5); transition: background-color 0.1s ease; } .super-lora-widget:hover { background: rgba(74, 74, 74, 0.5); } .super-lora-widget.disabled { opacity: 0.6; } .super-lora-widget .lora-toggle { margin-right: 8px; } .super-lora-widget .lora-toggle input[type=checkbox] { width: 16px; height: 16px; accent-color: #4a9eff; } .super-lora-widget .lora-info { flex: 1; display: flex; flex-direction: column; gap: 2px; } .super-lora-widget .lora-info .lora-name { color: #ffffff; font-size: 12px; font-weight: 500; } .super-lora-widget .lora-info .lora-trigger { color: #cccccc; font-size: 10px; } .super-lora-widget .lora-info .lora-trigger.auto-populated { color: #28a745; } .super-lora-widget .lora-info .lora-trigger.auto-populated::before { content: "●"; margin-right: 2px; } .super-lora-widget .lora-controls { display: flex; align-items: center; gap: 4px; } .super-lora-widget .lora-controls .strength-control { display: flex; align-items: center; gap: 2px; } .super-lora-widget .lora-controls .strength-control label { color: #999999; font-size: 10px; min-width: 20px; } .super-lora-widget .lora-controls .strength-control input[type=number] { width: 50px; height: 22px; background: #2d2d2d; border: 1px solid #555555; border-radius: 3px; color: #ffffff; font-size: 10px; text-align: center; } .super-lora-widget .lora-controls .strength-control input[type=number]:focus { border-color: #4a9eff; outline: none; } .super-lora-widget .lora-controls .tag-button { padding: 2px 4px; background: transparent; border: 1px solid #555555; border-radius: 3px; color: #cccccc; font-size: 10px; cursor: pointer; transition: all 0.1s ease; } .super-lora-widget .lora-controls .tag-button:hover { background: #4a4a4a; border-color: #777777; } .super-lora-widget .lora-controls .delete-button { padding: 2px; background: transparent; border: none; color: #dc3545; cursor: pointer; border-radius: 3px; transition: background-color 0.1s ease; } .super-lora-widget .lora-controls .delete-button:hover { background: rgba(220, 53, 69, 0.1); } .super-lora-footer { padding: 8px; background: #3a3a3a; border-radius: 0 0 5px 5px; } .super-lora-footer .footer-buttons { display: flex; gap: 4px; flex-wrap: wrap; } .super-lora-button { padding: 4px 8px; background: #454545; border: 1px solid #555555; border-radius: 3px; color: #ffffff; font-size: 12px; cursor: pointer; transition: all 0.1s ease; } .super-lora-button:hover { background: #4a4a4a; border-color: #777777; } .super-lora-button:active { transform: translateY(1px); } .super-lora-button.primary { background: #4a9eff; border-color: #4a9eff; } .super-lora-button.primary:hover { background: #3a8eef; border-color: #3a8eef; } .super-lora-button.danger { background: #dc3545; border-color: #dc3545; } .super-lora-button.danger:hover { background: rgb(209.4151898734, 36.2848101266, 52.8721518987); border-color: rgb(209.4151898734, 36.2848101266, 52.8721518987); } .super-lora-settings .setting-group { margin-bottom: 12px; } .super-lora-settings .setting-group .setting-label { color: #ffffff; font-size: 14px; font-weight: 500; margin-bottom: 4px; } .super-lora-settings .setting-group .setting-control { display: flex; align-items: center; gap: 4px; } .super-lora-settings .setting-group .setting-control input[type=checkbox] { width: 18px; height: 18px; accent-color: #4a9eff; } .super-lora-settings .setting-group .setting-control label { color: #cccccc; font-size: 12px; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideDown { from { height: 0; opacity: 0; } to { height: auto; opacity: 1; } } .fade-in { animation: fadeIn 0.2s ease; } .slide-down { animation: slideDown 0.2s ease; }