huchukato
190950ab68
- New backend endpoint /api/huggingface/repo_tree lists files/folders of a HF repo via HfApi.list_repo_tree (with list_repo_files fallback). - SearchModels now returns real creator (from org/repo), metrics, publishedAt and pipeline_tag-derived type, so cards show useful info. - New repoTreeRenderer modal: breadcrumb navigation, per-file Download (prefills Download tab with resolve URL) and Download repo button (snapshot_download, auto-selects diffusers folder). - searchRenderer rewritten: removed CivitAI-style version buttons; each card now has View / Browse / Repo actions. - eventListeners, UI, api client updated for the new buttons. - DownloadModel no longer blocks snapshot downloads when the target directory already exists (allows resume). - CSS: added repo tree modal styles, removed dead all-versions CSS.
844 lines
21 KiB
CSS
844 lines
21 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;
|
|
}
|
|
|
|
.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 */
|
|
}
|
|
|
|
/* Style for the type badge (likely exists) */
|
|
.huggingface-type-badge {
|
|
/* ... existing styles ... */
|
|
position: absolute;
|
|
bottom: 5px;
|
|
right: 5px;
|
|
/* ... */
|
|
}
|
|
|
|
/* ================================================
|
|
Repo file browser modal (Search -> Browse files)
|
|
================================================ */
|
|
.huggingface-repo-tree-modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.6);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 100000;
|
|
}
|
|
|
|
.huggingface-repo-tree-modal-content {
|
|
background: var(--bg-color, #2b2b2b);
|
|
color: var(--input-text, #ddd);
|
|
border: 1px solid var(--border-color, #444);
|
|
border-radius: 8px;
|
|
width: min(720px, 92vw);
|
|
max-height: 80vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.huggingface-repo-tree-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 12px 16px;
|
|
border-bottom: 1px solid var(--border-color, #444);
|
|
gap: 10px;
|
|
}
|
|
|
|
.huggingface-repo-tree-header h4 {
|
|
margin: 0;
|
|
font-size: 1rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.huggingface-repo-tree-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.huggingface-repo-tree-breadcrumb {
|
|
padding: 8px 16px;
|
|
border-bottom: 1px solid var(--border-color, #444);
|
|
font-size: 0.85rem;
|
|
overflow-x: auto;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.huggingface-repo-tree-breadcrumb button {
|
|
background: none;
|
|
border: none;
|
|
color: var(--link-color, #6ab4ff);
|
|
cursor: pointer;
|
|
padding: 0 2px;
|
|
font-size: inherit;
|
|
}
|
|
|
|
.huggingface-repo-tree-breadcrumb button:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.huggingface-repo-tree-content {
|
|
padding: 8px 16px 16px;
|
|
overflow-y: auto;
|
|
flex: 1;
|
|
}
|
|
|
|
.huggingface-repo-tree-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.huggingface-repo-tree-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 6px 8px;
|
|
border-radius: 4px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.huggingface-repo-tree-row + .huggingface-repo-tree-row {
|
|
border-top: 1px solid rgba(255,255,255,0.04);
|
|
}
|
|
|
|
.huggingface-repo-tree-row.directory {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.huggingface-repo-tree-row.directory:hover {
|
|
background: rgba(255,255,255,0.05);
|
|
}
|
|
|
|
.huggingface-repo-tree-icon {
|
|
width: 18px;
|
|
text-align: center;
|
|
color: var(--input-text, #ddd);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.huggingface-repo-tree-row.directory .huggingface-repo-tree-icon {
|
|
color: #f0c040;
|
|
}
|
|
|
|
.huggingface-repo-tree-label {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.huggingface-repo-tree-size {
|
|
color: var(--descrip-text, #999);
|
|
font-size: 0.8rem;
|
|
flex-shrink: 0;
|
|
min-width: 70px;
|
|
text-align: right;
|
|
}
|
|
|
|
.huggingface-repo-tree-row-actions {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.huggingface-button.tiny {
|
|
padding: 2px 8px;
|
|
font-size: 0.75rem;
|
|
}
|