NVIDIAGameWorks-ComfyUI-RTX-Remix/web/resources/styles/buttons.css

/*
 * SPDX-FileCopyrightText: Copyright (c) 2025 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 * SPDX-License-Identifier: Apache-2.0
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* RTX Remix Button Styles */

.rtx-remix-btn {
  padding: 10px var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--font-md);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--rtx-animation-normal) ease;
  outline: none;
  border: var(--border-width-medium) solid;
}

.rtx-remix-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.rtx-remix-btn-cancel {
  background: transparent;
  border-color: var(--border-light);
  color: var(--text-muted);
}

.rtx-remix-btn-cancel:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--border-lighter);
  color: var(--text-primary);
}

.rtx-remix-btn-secondary {
  padding: var(--space-2) 14px;
  font-size: var(--font-base);
  font-weight: var(--font-medium);
  background: transparent;
  border-color: var(--border-light);
  color: var(--text-muted);
}

.rtx-remix-btn-secondary:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--border-lighter);
  color: var(--text-primary);
}

/* Muted button with subtle red tint (for discard/destructive secondary actions) */
.rtx-remix-btn-muted {
  padding: var(--space-2) 14px;
  font-size: var(--font-base);
  font-weight: var(--font-medium);
  background: rgba(255, 100, 100, 0.1);
  border-color: rgba(255, 100, 100, 0.3);
  color: rgba(255, 150, 150, 0.9);
}

.rtx-remix-btn-muted:hover:not(:disabled) {
  background: rgba(255, 100, 100, 0.2);
  border-color: rgba(255, 100, 100, 0.5);
  color: #ff9999;
}

/* Subtle primary button with green tint (for save/positive secondary actions) */
.rtx-remix-btn-subtle-primary {
  padding: 10px 14px;
  font-size: var(--font-base);
  font-weight: var(--font-semibold);
  background: rgba(118, 185, 0, 0.15);
  border-color: rgba(118, 185, 0, 0.4);
  color: var(--text-primary);
}

.rtx-remix-btn-subtle-primary:hover:not(:disabled) {
  background: rgba(118, 185, 0, 0.25);
  border-color: rgba(118, 185, 0, 0.6);
  color: var(--text-primary);
}

.rtx-remix-btn-primary {
  padding: 10px 28px;
  background: var(--remix-color);
  border-color: var(--remix-color);
  color: var(--text-primary);
  font-weight: var(--font-semibold);
}

.rtx-remix-btn-primary:hover:not(:disabled) {
  background: var(--remix-color-hover);
  border-color: var(--remix-color-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-btn-primary-hover);
}

.rtx-remix-btn-outline-primary {
  background: transparent;
  border-color: var(--remix-color);
  color: var(--remix-color);
  font-weight: var(--font-semibold);
}

.rtx-remix-btn-outline-primary:hover:not(:disabled) {
  background: var(--remix-color);
  color: var(--text-black);
}

.rtx-remix-btn-danger {
  padding: var(--space-2) var(--space-5);
  background: var(--status-danger);
  border: var(--border-width-medium) solid var(--status-danger);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: var(--font-md);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition: all var(--rtx-animation-normal) ease;
}

.rtx-remix-btn-danger:hover {
  background: var(--status-danger-hover);
  border-color: var(--status-danger-hover);
}

/* Details Button */
.rtx-remix-details-btn {
  background: transparent;
  border: var(--border-width-thin) solid var(--border-base);
  color: var(--text-subtle);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-md);
  transition: all var(--rtx-animation-normal) ease;
  outline: none;
}

.rtx-remix-details-btn:hover {
  background: var(--bg-base);
  border-color: var(--border-light);
  color: var(--remix-color);
}

.rtx-remix-details-btn.expanded {
  transform: rotate(180deg);
  color: var(--remix-color);
  border-color: var(--remix-color);
}

/* Split Button - joins two buttons flush with visible separator */
.rtx-remix-split-btn {
  display: inline-flex;
}

.rtx-remix-split-btn > .rtx-remix-btn:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

.rtx-remix-split-btn > .rtx-remix-btn:last-child {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: var(--border-width-thin) solid var(--split-btn-separator);
  padding: var(--space-1);
}

/* Disable individual hover effects on split buttons to keep them unified */
.rtx-remix-split-btn > .rtx-remix-btn:hover:not(:disabled) {
  transform: none;
  box-shadow: none;
}

/* Apply hover effects to entire split button container */
.rtx-remix-split-btn:hover:has(.rtx-remix-btn:not(:disabled)) {
  filter: brightness(1.1);
}