huchukato
7537396f89
- Golden/orange gradient background (vs Civicomfy blue)
- Added 🤗 emoji icon for instant recognition
- Hover effects with smooth transitions
- Clear visual distinction from Civicomfy button
- Updated tooltip text for clarity
Button now stands out and is easily identifiable!
754 lines
20 KiB
CSS
754 lines
20 KiB
CSS
/* HuggingFace Button Styling - Distinct from Civicomfy */
|
||
#huggingface-downloader-button {
|
||
background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
|
||
color: #000 !important;
|
||
border: 2px solid #FF8C00 !important;
|
||
font-weight: bold !important;
|
||
padding: 4px 12px !important;
|
||
border-radius: 6px !important;
|
||
transition: all 0.3s ease !important;
|
||
}
|
||
|
||
#huggingface-downloader-button:hover {
|
||
background: linear-gradient(135deg, #FFA500 0%, #FF8C00 100%) !important;
|
||
transform: translateY(-1px) !important;
|
||
box-shadow: 0 4px 8px rgba(255, 140, 0, 0.3) !important;
|
||
}
|
||
|
||
#huggingface-downloader-button:active {
|
||
transform: translateY(0) !important;
|
||
box-shadow: 0 2px 4px rgba(255, 140, 0, 0.3) !important;
|
||
}
|
||
|
||
.huggingface-downloader-modal {
|
||
position: fixed;
|
||
z-index: 1001; /* Above ComfyUI elements */
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden; /* Prevent body scroll */
|
||
background-color: rgba(0, 0, 0, 0.6);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
|
||
}
|
||
|
||
.huggingface-downloader-modal.open {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
transition: opacity 0.3s ease, visibility 0s linear 0s;
|
||
}
|
||
|
||
.huggingface-downloader-modal-content {
|
||
background-color: var(--comfy-menu-bg);
|
||
color: var(--comfy-text-color);
|
||
margin: auto;
|
||
padding: 0; /* Remove padding, handle internally */
|
||
border-radius: 8px;
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||
width: 900px;
|
||
max-width: 95%;
|
||
height: 700px; /* Fixed height */
|
||
max-height: 90vh;
|
||
display: flex; /* Use flexbox for layout */
|
||
flex-direction: column; /* Stack header, tabs, content */
|
||
overflow: hidden; /* Prevent content overflow */
|
||
}
|
||
|
||
.huggingface-downloader-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 15px 20px;
|
||
border-bottom: 1px solid var(--border-color, #444);
|
||
flex-shrink: 0; /* Prevent header from shrinking */
|
||
}
|
||
|
||
.huggingface-downloader-header h2 {
|
||
margin: 0;
|
||
font-size: 1.3em;
|
||
}
|
||
|
||
.huggingface-close-button {
|
||
background: none;
|
||
border: none;
|
||
color: var(--comfy-text-color);
|
||
font-size: 28px;
|
||
cursor: pointer;
|
||
padding: 0 5px;
|
||
line-height: 1;
|
||
}
|
||
.huggingface-close-button:hover {
|
||
color: #aaa;
|
||
}
|
||
|
||
.huggingface-downloader-body {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex-grow: 1; /* Allow body to take remaining space */
|
||
overflow: hidden; /* Manage internal scrolling */
|
||
}
|
||
|
||
.huggingface-downloader-tabs {
|
||
display: flex;
|
||
border-bottom: 1px solid var(--border-color, #444);
|
||
padding: 0 15px;
|
||
flex-shrink: 0; /* Prevent tabs from shrinking */
|
||
}
|
||
|
||
.huggingface-downloader-tab {
|
||
padding: 10px 18px;
|
||
cursor: pointer;
|
||
border: none;
|
||
background: none;
|
||
color: var(--comfy-text-color);
|
||
opacity: 0.7;
|
||
position: relative;
|
||
top: 1px; /* Align with bottom border */
|
||
margin-bottom: -1px; /* Overlap border */
|
||
}
|
||
|
||
.huggingface-downloader-tab.active {
|
||
opacity: 1;
|
||
border-bottom: 3px solid var(--accent-color, #5c8aff);
|
||
font-weight: bold;
|
||
}
|
||
.huggingface-downloader-tab:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
.huggingface-downloader-tab-content {
|
||
display: none;
|
||
padding: 20px;
|
||
flex-grow: 1; /* Allow content to take space */
|
||
overflow-y: auto; /* Enable scrolling ONLY for the content area */
|
||
}
|
||
|
||
.huggingface-downloader-tab-content.active {
|
||
display: block; /* Show active tab */
|
||
}
|
||
|
||
.huggingface-form-group {
|
||
margin-bottom: 18px;
|
||
}
|
||
.huggingface-form-group:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.huggingface-form-group label {
|
||
display: block;
|
||
margin-bottom: 6px;
|
||
font-weight: bold;
|
||
font-size: 0.95em;
|
||
}
|
||
|
||
.huggingface-input,
|
||
.huggingface-select {
|
||
width: 100%;
|
||
padding: 10px;
|
||
background-color: var(--comfy-input-bg);
|
||
color: var(--comfy-text-color);
|
||
border: 1px solid var(--border-color, #555);
|
||
border-radius: 4px;
|
||
box-sizing: border-box; /* Include padding/border in width */
|
||
}
|
||
.huggingface-input:focus,
|
||
.huggingface-select:focus {
|
||
outline: none;
|
||
border-color: var(--accent-color, #5c8aff);
|
||
box-shadow: 0 0 0 2px rgba(92, 138, 255, 0.3);
|
||
}
|
||
|
||
.huggingface-form-row {
|
||
display: flex;
|
||
gap: 15px;
|
||
flex-wrap: wrap; /* Allow wrapping on smaller screens */
|
||
}
|
||
.huggingface-form-row > .huggingface-form-group {
|
||
flex: 1; /* Distribute space */
|
||
min-width: 180px; /* Minimum width before wrapping */
|
||
}
|
||
/* Adjust for checkbox/inline elements */
|
||
.huggingface-form-group.inline {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-bottom: 10px; /* Less margin for checkboxes */
|
||
}
|
||
.huggingface-form-group.inline label {
|
||
margin-bottom: 0; /* Remove default bottom margin */
|
||
order: 1; /* Put label after checkbox */
|
||
}
|
||
.huggingface-checkbox {
|
||
width: auto;
|
||
order: 0; /* Put checkbox before label */
|
||
accent-color: var(--accent-color, #5c8aff);
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.huggingface-button {
|
||
background-color: var(--comfy-input-bg);
|
||
color: var(--comfy-text-color);
|
||
border: 1px solid var(--border-color, #555);
|
||
padding: 10px 18px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 1em;
|
||
transition: background-color 0.2s ease, border-color 0.2s ease;
|
||
}
|
||
.huggingface-button:hover {
|
||
background-color: var(--comfy-input-bg-hover);
|
||
border-color: #777;
|
||
}
|
||
.huggingface-button:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.huggingface-button.primary {
|
||
background-color: var(--accent-color, #5c8aff);
|
||
border-color: var(--accent-color, #5c8aff);
|
||
color: white;
|
||
}
|
||
.huggingface-button.primary:hover {
|
||
background-color: #4a7ee0; /* Slightly darker blue */
|
||
border-color: #4a7ee0;
|
||
}
|
||
.huggingface-button.primary:disabled {
|
||
background-color: var(--accent-color, #5c8aff); /* Keep color but lower opacity */
|
||
border-color: var(--accent-color, #5c8aff);
|
||
}
|
||
|
||
.huggingface-button.danger {
|
||
background-color: #e64b4b;
|
||
border-color: #e64b4b;
|
||
color: white;
|
||
}
|
||
.huggingface-button.danger:hover {
|
||
background-color: #d93a3a;
|
||
border-color: #d93a3a;
|
||
}
|
||
.huggingface-button.small {
|
||
padding: 5px 10px;
|
||
font-size: 0.85em;
|
||
}
|
||
|
||
/* Status Tab Styling */
|
||
.huggingface-status-section {
|
||
margin-bottom: 25px;
|
||
}
|
||
.huggingface-status-section h3 {
|
||
margin-top: 0;
|
||
margin-bottom: 15px;
|
||
border-bottom: 1px solid var(--border-color, #444);
|
||
padding-bottom: 8px;
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
.huggingface-download-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
}
|
||
|
||
.huggingface-download-item {
|
||
display: flex;
|
||
gap: 15px;
|
||
align-items: flex-start; /* Align items top */
|
||
padding: 15px;
|
||
border-radius: 6px;
|
||
background-color: var(--comfy-input-bg); /* Slightly different bg for items */
|
||
border: 1px solid var(--border-color, #555);
|
||
}
|
||
|
||
.huggingface-download-thumbnail {
|
||
width: 80px;
|
||
height: 80px;
|
||
object-fit: cover;
|
||
border-radius: 4px;
|
||
background-color: #333; /* Placeholder color */
|
||
flex-shrink: 0; /* Don't shrink thumbnail */
|
||
margin-top: 3px; /* Align better with text */
|
||
}
|
||
|
||
.huggingface-download-info {
|
||
flex-grow: 1; /* Allow info to take available space */
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
overflow: hidden; /* Prevent long text overflow */
|
||
}
|
||
.huggingface-download-info strong {
|
||
font-size: 1.05em;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.huggingface-download-info p {
|
||
margin: 0;
|
||
font-size: 0.9em;
|
||
color: #ccc;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.huggingface-download-info .filename {
|
||
font-style: italic;
|
||
color: #bbb;
|
||
}
|
||
.huggingface-download-info .error-message {
|
||
color: #ff6b6b;
|
||
font-size: 0.85em;
|
||
white-space: normal; /* Allow error message to wrap */
|
||
word-break: break-word;
|
||
}
|
||
|
||
.huggingface-download-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-left: auto; /* Push actions to the right */
|
||
flex-shrink: 0; /* Don't shrink action buttons */
|
||
}
|
||
|
||
.huggingface-progress-container {
|
||
margin-top: 8px;
|
||
width: 100%;
|
||
background-color: var(--comfy-menu-bg); /* Darker background for contrast */
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
height: 20px;
|
||
border: 1px solid var(--border-color, #555);
|
||
}
|
||
|
||
.huggingface-progress-bar {
|
||
height: 100%;
|
||
background-color: var(--accent-color, #5c8aff);
|
||
text-align: center;
|
||
color: white;
|
||
line-height: 20px; /* Center text vertically */
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
transition: width 0.3s ease-out;
|
||
min-width: 20px; /* Show something even for 0% */
|
||
width: 0%; /* Start at 0 */
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
}
|
||
.huggingface-progress-bar.completed {
|
||
background-color: #4caf50; /* Green for completed */
|
||
}
|
||
.huggingface-progress-bar.failed {
|
||
background-color: #f44336; /* Red for failed */
|
||
}
|
||
.huggingface-progress-bar.cancelled {
|
||
background-color: #9e9e9e; /* Grey for cancelled */
|
||
}
|
||
|
||
.huggingface-speed-indicator {
|
||
font-size: 0.85em;
|
||
color: #ccc;
|
||
margin-top: 4px;
|
||
text-align: right;
|
||
}
|
||
|
||
/* Search Tab Styling */
|
||
.huggingface-search-controls {
|
||
display: flex;
|
||
gap: 15px;
|
||
margin-bottom: 20px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.huggingface-search-controls .huggingface-input {
|
||
flex-grow: 1; /* Let search input take more space */
|
||
}
|
||
.huggingface-search-controls .huggingface-select {
|
||
min-width: 150px; /* Min width for dropdowns */
|
||
}
|
||
.huggingface-search-controls .huggingface-button {
|
||
align-self: flex-end; /* Align button with bottom of inputs */
|
||
}
|
||
|
||
.huggingface-search-results {
|
||
margin-top: 20px;
|
||
}
|
||
.huggingface-search-item {
|
||
display: flex;
|
||
gap: 15px;
|
||
align-items: flex-start;
|
||
margin-bottom: 15px;
|
||
padding: 15px;
|
||
border-radius: 6px;
|
||
background-color: var(--comfy-input-bg);
|
||
border: 1px solid var(--border-color, #555);
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
|
||
.huggingface-thumbnail-container {
|
||
position: relative; /* Required for absolute positioning of the child badge */
|
||
display: block;
|
||
line-height: 0;
|
||
width: 120px;
|
||
height: 170px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.huggingface-search-thumbnail {
|
||
width: 120px; /* Slightly larger for search */
|
||
height: 170px;
|
||
object-fit: cover;
|
||
border-radius: 4px;
|
||
background-color: #333;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.huggingface-search-meta-info {
|
||
font-size: 0.85em;
|
||
color: #aaa;
|
||
margin-bottom: 5px;
|
||
display: flex;
|
||
gap: 15px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.huggingface-search-meta-info span {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
|
||
.huggingface-search-meta-info i {
|
||
color: #ccc;
|
||
}
|
||
.huggingface-type-badge {
|
||
position: absolute;
|
||
bottom: 5px; /* Adjust spacing from bottom */
|
||
left: 5px; /* Adjust spacing from left */
|
||
background-color: rgb(48, 94, 70); /* Black background with transparency */
|
||
color: white;
|
||
padding: 10px 8px; /* Adjust padding (top/bottom, left/right) */
|
||
border-radius: 10px; /* Adjust for desired roundness */
|
||
font-size: 0.75em; /* Adjust font size */
|
||
font-weight: bold;
|
||
z-index: 2; /* Ensure it's above the image */
|
||
white-space: nowrap; /* Prevent text wrapping */
|
||
}
|
||
|
||
.huggingface-search-info {
|
||
flex-grow: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
overflow: hidden;
|
||
}
|
||
.huggingface-search-info h4 {
|
||
margin: 0;
|
||
font-size: 1.1em;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
.huggingface-search-info p {
|
||
margin: 0;
|
||
font-size: 0.9em;
|
||
color: #ccc;
|
||
}
|
||
.huggingface-search-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 5px;
|
||
margin-top: 8px;
|
||
}
|
||
.huggingface-search-tag {
|
||
background-color: rgba(255, 255, 255, 0.1);
|
||
color: #eee;
|
||
padding: 3px 8px;
|
||
border-radius: 10px;
|
||
font-size: 0.8em;
|
||
}
|
||
.huggingface-search-stats span {
|
||
margin-right: 15px;
|
||
font-size: 0.85em;
|
||
color: #bbb;
|
||
}
|
||
.huggingface-search-stats i { /* If using icons */
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.huggingface-search-actions {
|
||
display: flex;
|
||
flex-direction: column; /* Stack buttons vertically */
|
||
gap: 8px;
|
||
align-items: flex-end; /* Align buttons to the right */
|
||
margin-left: auto;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.version-buttons-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
gap: 5px;
|
||
}
|
||
|
||
.all-versions-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
padding-bottom: 5px;
|
||
white-space: nowrap; /* Prevent wrapping */
|
||
max-width: 100%; /* Prevent excessive width */
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.show-all-versions-button {
|
||
align-self: flex-end; /* Align button to left */
|
||
margin-top: auto; /* Push to the bottom */
|
||
}
|
||
.base-model-badge {
|
||
display: inline-block; /* Allows padding and background */
|
||
background-color: #3a3a3a; /* Or a specific purple hex code like #800080 */
|
||
color: white;
|
||
font-weight: bold;
|
||
padding: 2px 6px; /* Adjust padding for desired size (vertical horizontal) */
|
||
border-radius: 3px; /* Adjust for desired roundness */
|
||
margin-right: 4px; /* Optional: Adds some space between badge and hyphen */
|
||
line-height: 1; /* Optional: Can help contain the background better */
|
||
vertical-align: middle; /* Optional: Helps align the badge nicely with text */
|
||
}
|
||
|
||
|
||
/* Settings Tab Styling */
|
||
.huggingface-settings-container {
|
||
display: grid;
|
||
grid-template-columns: 1fr; /* Single column */
|
||
gap: 20px;
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.huggingface-settings-container {
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */
|
||
}
|
||
}
|
||
|
||
.huggingface-settings-section {
|
||
background-color: var(--comfy-input-bg);
|
||
padding: 15px;
|
||
border-radius: 6px;
|
||
border: 1px solid var(--border-color, #555);
|
||
}
|
||
.huggingface-settings-section h4 {
|
||
margin-top: 0;
|
||
margin-bottom: 15px;
|
||
border-bottom: 1px solid var(--border-color, #444);
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
.huggingface-toast {
|
||
position: fixed;
|
||
bottom: 20px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
color: white;
|
||
padding: 12px 20px;
|
||
border-radius: 6px;
|
||
z-index: 1005; /* Above modal */
|
||
font-size: 0.95em;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease, bottom 0.3s ease;
|
||
pointer-events: none; /* Don't block clicks */
|
||
}
|
||
|
||
.huggingface-toast.show {
|
||
opacity: 1;
|
||
bottom: 30px;
|
||
}
|
||
|
||
.huggingface-toast.success {
|
||
background-color: rgba(76, 175, 80, 0.9); /* Green */
|
||
}
|
||
|
||
.huggingface-toast.error {
|
||
background-color: rgba(244, 67, 54, 0.9); /* Red */
|
||
}
|
||
|
||
.huggingface-toast.info {
|
||
background-color: rgba(33, 150, 243, 0.9); /* Blue */
|
||
}
|
||
|
||
/* Tooltip Styles */
|
||
[data-tooltip] {
|
||
position: relative;
|
||
cursor: help;
|
||
}
|
||
[data-tooltip]::after {
|
||
content: attr(data-tooltip);
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
bottom: 100%;
|
||
margin-bottom: 5px;
|
||
background-color: rgba(0, 0, 0, 0.85);
|
||
color: white;
|
||
padding: 5px 10px;
|
||
border-radius: 4px;
|
||
font-size: 0.85em;
|
||
white-space: nowrap;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transition: opacity 0.2s ease, visibility 0.2s ease;
|
||
z-index: 1010; /* Ensure tooltip is on top */
|
||
}
|
||
[data-tooltip]:hover::after {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
}
|
||
|
||
.huggingface-download-preview-area {
|
||
/* Add specific margins/padding if needed */
|
||
min-height: 50px; /* Ensure it has some height for the loading spinner */
|
||
}
|
||
|
||
/* Style for the description box */
|
||
.model-description-content {
|
||
max-height: 200px; /* Limit height */
|
||
overflow-y: auto; /* Allow scrolling */
|
||
background-color: var(--comfy-input-bg); /* Match input background */
|
||
padding: 10px;
|
||
border-radius: 4px;
|
||
font-size: 0.9em; /* Slightly smaller text */
|
||
border: 1px solid var(--border-color, #555);
|
||
color: var(--comfy-text-color); /* Ensure text color matches */
|
||
line-height: 1.5; /* Improve readability */
|
||
}
|
||
|
||
/* Style links within the description */
|
||
.model-description-content a {
|
||
color: var(--accent-color, #5c8aff); /* Make links stand out */
|
||
text-decoration: underline;
|
||
}
|
||
.model-description-content a:hover {
|
||
color: #8bb0ff; /* Lighter color on hover */
|
||
}
|
||
|
||
/* Ensure reused search item styles look okay in this context */
|
||
.huggingface-download-preview-area .huggingface-search-item {
|
||
margin-bottom: 15px; /* Add space below the item */
|
||
background-color: var(--comfy-input-bg); /* Explicitly set background */
|
||
}
|
||
|
||
/* --- Confirmation Modal Styles --- */
|
||
.huggingface-confirmation-modal {
|
||
display: none; /* Hidden by default */
|
||
position: fixed; /* Stay in place */
|
||
z-index: 1001; /* Ensure it's above the main modal */
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: auto; /* Enable scroll if needed */
|
||
background-color: rgba(0,0,0,0.6); /* Dim background */
|
||
/* Use flexbox for easy centering */
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.huggingface-confirmation-modal-content {
|
||
background-color: var(--comfy-menu-bg, #282828);
|
||
margin: auto;
|
||
padding: 25px;
|
||
border: 1px solid var(--border-color, #444);
|
||
border-radius: 8px;
|
||
width: 80%;
|
||
max-width: 450px; /* Limit width */
|
||
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
|
||
color: var(--input-text, #ddd);
|
||
}
|
||
|
||
.huggingface-confirmation-modal-content h4 {
|
||
margin-top: 0;
|
||
margin-bottom: 15px;
|
||
color: var(--desc-text, #eee);
|
||
border-bottom: 1px solid var(--border-color, #444);
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.huggingface-confirmation-modal-content p {
|
||
margin-bottom: 25px;
|
||
line-height: 1.5;
|
||
font-size: 0.95em;
|
||
}
|
||
|
||
.huggingface-confirmation-modal-actions {
|
||
display: flex;
|
||
justify-content: flex-end; /* Align buttons to the right */
|
||
gap: 10px; /* Space between buttons */
|
||
}
|
||
|
||
/* Style buttons within the confirmation modal */
|
||
.huggingface-confirmation-modal-actions .huggingface-button {
|
||
padding: 8px 15px; /* Adjust padding */
|
||
min-width: 80px; /* Ensure minimum width */
|
||
}
|
||
|
||
/* Ensure both img and video within the thumbnail container behave similarly */
|
||
.huggingface-thumbnail-container img.huggingface-search-thumbnail,
|
||
.huggingface-thumbnail-container video.huggingface-search-thumbnail,
|
||
.huggingface-thumbnail-container img.huggingface-download-thumbnail,
|
||
.huggingface-thumbnail-container video.huggingface-download-thumbnail {
|
||
display: block; /* Prevent extra space below */
|
||
width: 100%; /* Fill the container width */
|
||
height: 100%; /* Fill the container height */
|
||
object-fit: cover; /* Scale while maintaining aspect ratio, cropping if needed */
|
||
background-color: #333; /* Background for loading/error states */
|
||
}
|
||
|
||
/* You might already have rules for the container itself, ensure they define a size */
|
||
.huggingface-thumbnail-container {
|
||
width: 100px; /* Example size */
|
||
height: 140px; /* Example size */
|
||
overflow: hidden; /* Hide parts of the video/image outside the cover area */
|
||
position: relative; /* For positioning badges etc. */
|
||
flex-shrink: 0; /* Prevent shrinking in flex layouts */
|
||
border-radius: 4px; /* Match styling */
|
||
}
|
||
|
||
/* Blur/Hide for R-rated thumbnails */
|
||
.huggingface-thumbnail-container.blurred img.huggingface-search-thumbnail,
|
||
.huggingface-thumbnail-container.blurred video.huggingface-search-thumbnail,
|
||
.huggingface-thumbnail-container.blurred img.huggingface-download-thumbnail,
|
||
.huggingface-thumbnail-container.blurred video.huggingface-download-thumbnail {
|
||
filter: blur(14px) brightness(0.6) saturate(0.6);
|
||
pointer-events: none; /* Let clicks hit the container */
|
||
}
|
||
.huggingface-thumbnail-container .huggingface-nsfw-overlay {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
font-weight: 800;
|
||
font-size: 20px;
|
||
letter-spacing: 1px;
|
||
background: rgba(0,0,0,0.35);
|
||
z-index: 3;
|
||
user-select: none;
|
||
}
|
||
/* Make it obvious it’s clickable */
|
||
.huggingface-thumbnail-container.blurred { cursor: pointer; }
|
||
|
||
/* Style for the type badge (likely exists) */
|
||
.huggingface-type-badge {
|
||
/* ... existing styles ... */
|
||
position: absolute;
|
||
bottom: 5px;
|
||
right: 5px;
|
||
/* ... */
|
||
}
|