90 lines
1.9 KiB
CSS
90 lines
1.9 KiB
CSS
/* Video Compare BMO - Enhanced Styles */
|
|
|
|
.video-compare-node {
|
|
background: #2b2b2b;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Video preview widget embedded in node */
|
|
.video-compare-preview {
|
|
border: 2px solid #444;
|
|
transition: border-color 0.3s ease;
|
|
user-select: none;
|
|
}
|
|
|
|
.video-compare-preview:hover {
|
|
border-color: #007acc;
|
|
}
|
|
|
|
.video-compare-preview:active {
|
|
border-color: #005a9e;
|
|
}
|
|
|
|
/* Canvas styling */
|
|
.video-compare-preview canvas {
|
|
display: block;
|
|
image-rendering: pixelated;
|
|
image-rendering: -moz-crisp-edges;
|
|
image-rendering: crisp-edges;
|
|
}
|
|
|
|
/* Slider line in preview */
|
|
.video-compare-preview div[style*="position: absolute"][style*="width: 2px"] {
|
|
background: linear-gradient(to bottom,
|
|
rgba(255, 255, 255, 0.9) 0%,
|
|
rgba(255, 255, 255, 1) 50%,
|
|
rgba(255, 255, 255, 0.9) 100%
|
|
) !important;
|
|
transition: box-shadow 0.2s ease;
|
|
}
|
|
|
|
.video-compare-preview:hover div[style*="position: absolute"][style*="width: 2px"] {
|
|
box-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;
|
|
width: 3px !important;
|
|
}
|
|
|
|
/* Info text styling */
|
|
.video-compare-preview div[style*="transform: translate(-50%, -50%)"] {
|
|
background: rgba(0, 0, 0, 0.7);
|
|
padding: 8px 12px;
|
|
border-radius: 4px;
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
|
|
/* Basic button styling */
|
|
.comfy-widget button {
|
|
background: #333;
|
|
color: #fff;
|
|
border: 1px solid #555;
|
|
border-radius: 3px;
|
|
padding: 4px 8px;
|
|
margin: 2px;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.comfy-widget button:hover {
|
|
background: #007acc;
|
|
border-color: #005a9e;
|
|
}
|
|
|
|
.comfy-widget button:active {
|
|
background: #005a9e;
|
|
}
|
|
|
|
/* Node widget integration */
|
|
.comfy-widget-video_preview {
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.comfy-widget-video_preview .video-compare-preview {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Responsive preview */
|
|
@media (max-width: 768px) {
|
|
.video-compare-preview {
|
|
height: 120px;
|
|
}
|
|
} |