sammykumar-ComfyUI-SwissArmyKnife/web/css/lora_manager/style.css

@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;
}