TBNilles/ComfyUI-Model-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f1c802164ffbb2bd8ede71654c65c5773490c80f
ComfyUI-Model-Manager/web/model-manager.css
Christian Bastian acc15298bc Added "View Model Info" and "Delete Model" functionality. 
NOTE: Some small (but important) changes under the hood that may have broken things. "Quality control" tests were done, but may be have missed things.

- View model info in Model Tab.
- Delete model in Model Info view. (Uses Co
- Reduced model path (search path) in models request and added system separator request.
- Reworked "system path" "search path", "system separator" and "search separator" (a bit messy, maybe needs another rework).
- Updated REST uri structure to be more consistent.
2024-02-17 13:30:58 -05:00

497 lines
8.8 KiB
CSS
Raw Blame History

/* comfy table */
.comfy-table {
width: 100%;
table-layout: auto;
border-collapse: separate;
border-spacing: 0;
}
.comfy-table .table-head tr {
background-color: var(--tr-even-bg-color);
}
/* comfy tabs */
.comfy-tabs {
color: var(--fg-color);
}
.comfy-tabs-head {
display: flex;
gap: 8px;
flex-wrap: wrap;
border-bottom: 2px solid var(--border-color);
}
.comfy-tabs-head .head-item {
padding: 8px 12px;
border: 2px solid var(--border-color);
border-bottom: none;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background-color: var(--comfy-menu-bg);
cursor: pointer;
margin-bottom: 0px;
z-index: 1;
}
.comfy-tabs-head .head-item.active {
background-color: var(--comfy-input-bg);
cursor: default;
position: relative;
z-index: 1;
}
.comfy-tabs-body {
background-color: var(--comfy-input-bg);
border: 2px solid var(--border-color);
border-top: none;
padding: 16px 0px;
}
/* comfy grid */
.comfy-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.model-manager .item {
position: relative;
width: 230px;
height: 345px;
text-align: center;
overflow: hidden;
border-radius: 8px;
}
.model-manager .item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.model-manager .model-preview-button-left,
.model-manager .model-preview-button-right {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
border-radius: 20px;
}
.model-manager .model-preview-button-right {
right: 4px;
}
.model-manager .model-preview-button-left {
left: 4px;
}
.comfy-grid .model-label {
background-color: #000a;
width: 100%;
height: 2.2rem;
position: absolute;
bottom: 0;
text-align: center;
line-height: 2.2rem;
}
.comfy-grid .model-label > p {
width: calc(100% - 2rem);
overflow-x: scroll;
white-space: nowrap;
display: inline-block;
vertical-align: middle;
margin: 0;
}
.comfy-grid .model-label {
scrollbar-width: none;
-ms-overflow-style: none;
}
.comfy-grid .model-label ::-webkit-scrollbar {
width: 0;
height: 0;
}
.model-manager .item .model-preview-overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0);
}
.comfy-grid .model-preview-top-right,
.comfy-grid .model-preview-top-left {
position: absolute;
display: flex;
flex-direction: column;
gap: 8px;
top: 8px;
}
.comfy-grid .model-preview-top-right {
right: 8px;
}
.comfy-grid .model-preview-top-left {
left: 8px;
}
.comfy-grid .model-button {
opacity: 0.65;
}
.comfy-grid .model-button:hover {
opacity: 1;
}
.comfy-grid .model-label {
user-select: text;
}
/* comfy radio group */
.comfy-radio-group {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.comfy-radio {
display: flex;
gap: 4px;
padding: 4px 16px;
color: var(--input-text);
border: 2px solid var(--border-color);
border-radius: 16px;
background-color: var(--comfy-input-bg);
font-size: 18px;
}
.comfy-radio:has(> input[type="radio"]:checked) {
border-color: var(--border-color);
background-color: var(--comfy-menu-bg);
}
.comfy-radio input[type="radio"]:checked + label {
color: var(--fg-color);
}
.radio-input {
opacity: 0;
position: absolute;
}
/* model manager */
.model-manager {
box-sizing: border-box;
width: 100%;
height: 100%;
max-width: unset;
max-height: unset;
padding: 10px;
color: var(--bg-color);
z-index: 2000;
}
.model-manager.sidebar-left {
width: 50%;
left: 25%;
}
.model-manager.sidebar-top {
height: 50%;
top: 25%;
}
.model-manager.sidebar-bottom {
height: 50%;
top: 75%;
}
.model-manager.sidebar-right {
width: 50%;
left: 75%;
}
.model-manager .comfy-modal-content {
width: 100%;
gap: 16px;
}
/* model manager common */
.model-manager button,
.model-manager select,
.model-manager input {
padding: 4px 8px;
margin: 0;
border: 2px solid var(--border-color);
}
.model-manager button:disabled,
.model-manager select:disabled,
.model-manager input:disabled {
background-color: var(--comfy-menu-bg);
filter: brightness(1.2);
cursor: not-allowed;
}
.model-manager button.block {
width: 100%;
}
.comfy-table a {
color: #007acc;
text-decoration: none;
}
.model-manager ::-webkit-scrollbar {
width: 16px;
}
.model-manager ::-webkit-scrollbar-track {
background-color: #353535;
border-right: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.model-manager ::-webkit-scrollbar-thumb {
background-color: #a1a1a1;
border-radius: 3px;
}
.model-manager .search-text-area::-webkit-input-placeholder {
font-style: italic;
}
.model-manager .search-text-area:-moz-placeholder {
font-style: italic;
}
.model-manager .search-text-area::-moz-placeholder {
font-style: italic;
}
.model-manager .search-text-area:-ms-input-placeholder {
font-style: italic;
}
.icon-button {
height: 40px;
width: 40px;
line-height: 1.15;
}
/* model manager row */
.model-manager .row {
display: flex;
min-width: 0;
gap: 8px;
}
/* comfy tabs */
.model-manager .comfy-tabs {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.model-manager .comfy-tabs-body {
flex: 1;
overflow: hidden;
}
.model-manager .comfy-tabs-body > div {
position: relative;
height: 100%;
width: auto;
padding: 0 16px;
overflow-x: auto;
}
/* model manager special */
.model-manager .topbar-buttons {
position: absolute;
display: flex;
top: 10px;
right: 10px;
}
.model-manager .topbar-buttons button {
width: 33px;
height: 33px;
padding: 1px 6px;
}
.model-manager .sidebar-buttons {
overflow: hidden;
padding-right: 10px;
color: var(--input-text);
}
.model-manager .row {
position: relative;
padding-top: 2px;
margin-top: -2px;
padding-bottom: 18px;
margin-bottom: 1px;
top: -1px;
background-color: var(--comfy-input-bg);
}
.model-manager [data-name="Install"] .row,
.model-manager [data-name="Models"] .row {
position: sticky;
z-index: 1;
}
.model-manager [data-name="Install"] input {
flex-grow: 1;
overflow-x: clip;
}
.model-manager .table-head {
position: sticky;
top: 116px;
z-index: 1;
}
.model-manager .tab-header {
display: block;
}
.model-manager .tab-header-flex-block {
width: 100%;
}
.model-manager .search-models {
display: flex;
flex-direction: row;
flex: 1;
}
.model-manager .model-select-dropdown {
min-width: 0;
overflow: auto;
}
.model-manager .search-text-area,
.model-manager .plain-text-area,
.model-manager .model-select-dropdown {
flex: 1;
min-height: 36px;
padding-block: 0;
}
.model-manager .model-select-dropdown {
min-height: 40px;
}
.model-manager .search-dropdown {
position: absolute;
background-color: var(--bg-color);
border: 2px var(--border-color) solid;
max-height: 30vh;
overflow: auto;
border-radius: 10px;
z-index: 1;
}
.search-dropdown:empty {
display: none;
}
.model-manager .search-dropdown > p {
margin: 0;
padding-left: 20px;
padding-top: 0.85em;
padding-bottom: 0.85em;
}
.model-manager .search-dropdown > p.search-dropdown-selected {
background-color: var(--border-color);
}
.model-manager .button-success {
color: green;
border-color: green;
}
.model-manager .button-failure {
color: darkred;
border-color: darkred;
}
/* model manager settings */
.model-manager .model-manager-settings > div {
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
.model-manager .model-manager-settings button {
height: 40px;
width: 120px;
}
.model-manager .model-manager-settings input[type="number"] {
width: 50px;
}
.search-settings-text {
width: 100%;
}
.model-manager .model-manager-settings textarea {
width: 100%;
font-size: 1.2em;
border: solid 2px var(--border-color);
border-radius: 8px;
}
.model-preview-select-radio-container img {
position: relative;
width: 230px;
height: 345px;
text-align: center;
overflow: hidden;
border-radius: 8px;
object-fit: cover;
}
.model-manager [data-name="Download"] summary {
padding: 16px;
}
.model-manager [data-name="Download"] .download-settings {
flex: 1;
}
.model-manager .model-info-view {
background-color: var(--comfy-menu-bg);
display: none;
height: 100%;
overflow-wrap: break-word;
width: 100%;
}
.model-manager .model-info-container {
background-color: var(--bg-color);
border-radius: 16px;
color: var(--fg-color);
margin-top: 8px;
max-height: 90%;
padding: 16px;
overflow: auto;
width: auto;
}
.model-manager .no-select {
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
Reference in New Issue View Git Blame Copy Permalink