fred-dev/comfy_ui_ali

1.cn-manager {2	--grid-font: -apple-system, BlinkMacSystemFont, "Segue UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";3	z-index: 1099;4	width: 80%;5	height: 80%;6	display: flex;7	flex-direction: column;8	gap: 10px;9	color: var(--fg-color);10	font-family: arial, sans-serif;11	text-underline-offset: 3px;12	outline: none;13}14 15.cn-manager .cn-flex-auto {16	flex: auto;17}18 19.cn-manager button {20	font-size: 16px;21	color: var(--input-text);22	background-color: var(--comfy-input-bg);23	border-radius: 8px;24	border-color: var(--border-color);25	border-style: solid;26	margin: 0;27	padding: 4px 8px;28	min-width: 100px;29}30 31.cn-manager button:disabled,32.cn-manager input:disabled,33.cn-manager select:disabled {34	color: gray;35}36 37.cn-manager button:disabled {38	background-color: var(--comfy-input-bg);39}40 41.cn-manager .cn-manager-restart {42	display: none;43	background-color: #500000;44	color: white;45}46 47.cn-manager .cn-manager-stop {48	display: none;49	background-color: #500000;50	color: white;51}52 53.cn-manager .cn-manager-back {54	align-items: center;55	justify-content: center;56}57 58.arrow-icon {59	height: 1em;60	width: 1em;61	margin-right: 5px;62	transform: translateY(2px);63}64 65.cn-icon {66	display: block;67	width: 16px;68	height: 16px;69}70 71.cn-icon svg {72	display: block;73	margin: 0;74	pointer-events: none;75}76 77.cn-manager-header {78	display: flex;79	flex-wrap: wrap;80	gap: 5px;81	align-items: center;82	padding: 0 5px;83}84 85.cn-manager-header label {86	display: flex;87	gap: 5px;88	align-items: center;89}90 91.cn-manager-filter {92	height: 28px;93	line-height: 28px;94}95 96.cn-manager-keywords {97	height: 28px;98	line-height: 28px;99	padding: 0 5px 0 26px;100	background-size: 16px;101	background-position: 5px center;102	background-repeat: no-repeat;103	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20pointer-events%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23888%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m21%2021-4.486-4.494M19%2010.5a8.5%208.5%200%201%201-17%200%208.5%208.5%200%200%201%2017%200%22%2F%3E%3C%2Fsvg%3E");104}105 106.cn-manager-status {107	padding-left: 10px;108}109 110.cn-manager-grid {111	flex: auto;112	border: 1px solid var(--border-color);113	overflow: hidden;114	position: relative;115}116 117.cn-manager-selection {118	display: flex;119	flex-wrap: wrap;120	gap: 10px;121	align-items: center;122}123 124.cn-manager-message {125	position: relative;126}127 128.cn-manager-footer {129	display: flex;130	flex-wrap: wrap;131	gap: 10px;132	align-items: center;133}134 135.cn-manager-grid .tg-turbogrid {136	font-family: var(--grid-font);137	font-size: 15px;138	background: var(--bg-color);139}140 141.cn-manager-grid .tg-turbogrid .tg-highlight::after {142	position: absolute;143	top: 0;144	left: 0;145	content: "";146	display: block;147	width: 100%;148	height: 100%;149	box-sizing: border-box;150	background-color: #80bdff11;151	pointer-events: none;152}153 154.cn-manager-grid .cn-pack-name a {155	color: skyblue;156	text-decoration: none;157	word-break: break-word;158}159 160.cn-manager-grid .cn-pack-desc a {161	color: #5555FF;162	font-weight: bold;163	text-decoration: none;164}165 166.cn-manager-grid .tg-cell a:hover {167	text-decoration: underline;168}169 170.cn-manager-grid .cn-pack-version {171	line-height: 100%;172	display: flex;173	flex-direction: column;174	justify-content: center;175	height: 100%;176	gap: 5px;177}178 179.cn-manager-grid .cn-pack-nodes {180	line-height: 100%;181	display: flex;182	flex-direction: column;183	justify-content: center;184	gap: 5px;185	cursor: pointer;186	height: 100%;187}188 189.cn-manager-grid .cn-pack-nodes:hover {190	text-decoration: underline;191}192 193.cn-manager-grid .cn-pack-conflicts {194	color: orange;195}196 197.cn-popover {198	position: fixed;199	z-index: 10000;200	padding: 20px;201	color: #1e1e1e;202	filter: drop-shadow(1px 5px 5px rgb(0 0 0 / 30%));203	overflow: hidden;204}205 206.cn-flyover {207	position: absolute;208    top: 0;209	right: 0;210    z-index: 1000;211    display: none;212    width: 50%;213    height: 100%;214    background-color: var(--comfy-menu-bg);215    animation-duration: 0.2s;216    animation-fill-mode: both;217	flex-direction: column;218}219 220.cn-flyover::before {221    position: absolute;222    top: 0;223    content: "";224    z-index: 10;225    display: block;226    width: 10px;227    height: 100%;228    pointer-events: none;229	left: -10px;230    background-image: linear-gradient(to left, rgb(0 0 0 / 20%), rgb(0 0 0 / 0%));231}232 233.cn-flyover-header {234	height: 45px;235	display: flex;236	align-items: center;237	gap: 5px;238	border-bottom: 1px solid var(--border-color);239}240 241.cn-flyover-close {242	display: flex;243	align-items: center;244	padding: 0 10px;245	justify-content: center;246	cursor: pointer;247	opacity: 0.8;248	height: 100%;249}250 251.cn-flyover-close:hover {252	opacity: 1;253}254 255.cn-flyover-close svg {256	display: block;257	margin: 0;258	pointer-events: none;259	width: 20px;260	height: 20px;261}262 263.cn-flyover-title {264	display: flex;265	align-items: center;266	font-weight: bold;267	gap: 10px;268	flex: auto;269}270 271.cn-flyover-body {272	height: calc(100% - 45px);273	overflow-y: auto;274	position: relative;275	background-color: var(--comfy-menu-secondary-bg);276}277 278@keyframes cn-slide-in-right {279    from {280        visibility: visible;281        transform: translate3d(100%, 0, 0);282    }283 284    to {285        transform: translate3d(0, 0, 0);286    }287}288 289.cn-slide-in-right {290    animation-name: cn-slide-in-right;291}292 293@keyframes cn-slide-out-right {294    from {295        transform: translate3d(0, 0, 0);296    }297 298    to {299        visibility: hidden;300        transform: translate3d(100%, 0, 0);301    }302}303 304.cn-slide-out-right {305    animation-name: cn-slide-out-right;306}307 308.cn-nodes-list {309	width: 100%;310}311 312.cn-nodes-row {313	display: flex;314	align-items: center;315	gap: 10px;316}317 318.cn-nodes-row:nth-child(odd) {319	background-color: rgb(0 0 0 / 5%);320}321 322.cn-nodes-row:hover {323    background-color: rgb(0 0 0 / 10%);324}325 326.cn-nodes-sn {327	text-align: right;328	min-width: 35px;329	color: var(--drag-text);330	flex-shrink: 0;331	font-size: 12px;332	padding: 8px 5px;333}334 335.cn-nodes-name {336	cursor: pointer;337	white-space: nowrap;338	flex-shrink: 0;339	position: relative;340	padding: 8px 5px;341}342 343.cn-nodes-name::after {344	content: attr(action);345	position: absolute;346	pointer-events: none;347	top: 50%;348	left: 100%;349	transform: translate(5px, -50%);350	font-size: 12px;351	color: var(--drag-text);352	background-color: var(--comfy-input-bg);353	border-radius: 10px;354	border: 1px solid var(--border-color);355	padding: 3px 8px;356	display: none;357}358 359.cn-nodes-name.action::after {360	display: block;361}362 363.cn-nodes-name:hover {364	text-decoration: underline;365}366 367.cn-nodes-conflict .cn-nodes-name,368.cn-nodes-conflict .cn-icon {369	color: orange;370}371 372.cn-conflicts-list {373	display: flex;374	flex-wrap: wrap;375	gap: 5px;376	align-items: center;377	padding: 5px 0;378}379 380.cn-conflicts-list b {381	font-weight: normal;382	color: var(--descrip-text);383}384 385.cn-nodes-pack {386	cursor: pointer;387	color: skyblue;388}389 390.cn-nodes-pack:hover {391	text-decoration: underline;392}393 394.cn-pack-badge {395	font-size: 12px;396	font-weight: normal;397	background-color: var(--comfy-input-bg);398	border-radius: 10px;399	border: 1px solid var(--border-color);400	padding: 3px 8px;401	color: var(--error-text);402}403 404.cn-preview {405	min-width: 300px;406	max-width: 500px;407	min-height: 120px;408	overflow: hidden;409  	font-size: 12px;410	pointer-events: none;411	padding: 12px;412	color: var(--fg-color);413}414 415.cn-preview-header {416	display: flex;417	gap: 8px;418	align-items: center;419	border-bottom: 1px solid var(--comfy-input-bg);420	padding: 5px 10px;421}422 423.cn-preview-dot {424	width: 8px;425	height: 8px;426	border-radius: 50%;427	background-color: grey;428	position: relative;429	filter: drop-shadow(1px 2px 3px rgb(0 0 0 / 30%));430}431 432.cn-preview-dot.cn-preview-optional::after {433	content: "";434	position: absolute;435	pointer-events: none;436	top: 50%;437	left: 50%;438	transform: translate(-50%, -50%);439	background-color: var(--comfy-input-bg);440	border-radius: 50%;441	width: 3px;442  	height: 3px;443}444 445.cn-preview-dot.cn-preview-grid {446	border-radius: 0;447}448 449.cn-preview-dot.cn-preview-grid::before {450	content: '';451	position: absolute;452	border-left: 1px solid var(--comfy-input-bg);453	border-right: 1px solid var(--comfy-input-bg);454	width: 4px;455	height: 100%;456	left: 2px;457	top: 0;458	z-index: 1;459}460 461.cn-preview-dot.cn-preview-grid::after {462	content: '';463	position: absolute;464	border-top: 1px solid var(--comfy-input-bg);465	border-bottom: 1px solid var(--comfy-input-bg);466	width: 100%;467	height: 4px;468	left: 0;469	top: 2px;470	z-index: 1;471}472 473.cn-preview-name {474	flex: auto;475	font-size: 14px;476}477 478.cn-preview-io {479	display: flex;480	justify-content: space-between;481	padding: 10px 10px;482}483 484.cn-preview-column > div {485	display: flex;486	gap: 10px;487	align-items: center;488	height: 18px;489	overflow: hidden;490	white-space: nowrap;491	text-overflow: ellipsis;492}493 494.cn-preview-input {495	justify-content: flex-start;496}497 498.cn-preview-output {499	justify-content: flex-end;500}501 502.cn-preview-list {503	display: flex;504	flex-direction: column;505	gap: 3px;506	padding: 0 10px 10px 10px;507}508 509.cn-preview-switch {510	position: relative;511	display: flex;512	justify-content: space-between;513	align-items: center;514	background: var(--bg-color);515	border: 2px solid var(--border-color);516	border-radius: 10px;517	text-wrap: nowrap;518	padding: 2px 20px;519	gap: 10px;520}521 522.cn-preview-switch::before,523.cn-preview-switch::after {524	position: absolute;525	pointer-events: none;526	top: 50%;527	transform: translate(0, -50%);528	color: var(--fg-color);529	opacity: 0.8;530}531 532.cn-preview-switch::before {533	content: "◀";534	left: 5px;535}536 537.cn-preview-switch::after {538	content: "▶";539	right: 5px;540}541 542.cn-preview-value {543	color: var(--descrip-text);544}545 546.cn-preview-string {547	min-height: 30px;548	max-height: 300px;549	background: var(--bg-color);550	color: var(--descrip-text);551	border-radius: 3px;552	padding: 3px 5px;553	overflow-y: auto;554	overflow-x: hidden;555}556 557.cn-preview-description {558	margin: 0px 10px 10px 10px;559	padding: 6px;560	background: var(--border-color);561	color: var(--descrip-text);562	border-radius: 5px;563	font-style: italic;564	word-break: break-word;565}566 567.cn-tag-list {568	display: flex;569	flex-wrap: wrap;570	gap: 5px;571	align-items: center;572	margin-bottom: 5px;573}574 575.cn-tag-list > div {576	background-color: var(--border-color);577	border-radius: 5px;578	padding: 0 5px;579}580 581.cn-install-buttons {582	display: flex;583	flex-direction: column;584	gap: 3px;585	padding: 3px;586	align-items: center;587	justify-content: center;588	height: 100%;589}590 591.cn-selected-buttons {592	display: flex;593	gap: 5px;594	align-items: center;595	padding-right: 20px;596}597 598.cn-manager .cn-btn-enable {599	background-color: #333399;600	color: white;601}602 603.cn-manager .cn-btn-disable {604	background-color: #442277;605	color: white;606}607 608.cn-manager .cn-btn-update {609	background-color: #1155AA;610	color: white;611}612 613.cn-manager .cn-btn-try-update {614	background-color: Gray;615	color: white;616}617 618.cn-manager .cn-btn-try-fix {619	background-color: #6495ED;620	color: white;621}622 623.cn-manager .cn-btn-import-failed {624	background-color: #AA1111;625    font-size: 10px;626	font-weight: bold;627	color: white;628}629 630.cn-manager .cn-btn-install {631	background-color: black;632	color: white;633}634 635.cn-manager .cn-btn-try-install {636	background-color: Gray;637	color: white;638}639 640.cn-manager .cn-btn-uninstall {641	background-color: #993333;642	color: white;643}644 645.cn-manager .cn-btn-reinstall {646	background-color: #993333;647	color: white;648}649 650.cn-manager .cn-btn-switch {651	background-color: #448833;652	color: white;653 654}655 656@keyframes cn-btn-loading-bg {657	0% {658		left: 0;659	}660	100% {661		left: -105px;662	}663}664 665.cn-manager button.cn-btn-loading {666	position: relative;667	overflow: hidden;668	border-color: rgb(0 119 207 / 80%);669	background-color: var(--comfy-input-bg);670}671 672.cn-manager button.cn-btn-loading::after {673	position: absolute;674	top: 0;675	left: 0;676	content: "";677	width: 500px;678	height: 100%;679	background-image: repeating-linear-gradient(680		-45deg,681		rgb(0 119 207 / 30%),682		rgb(0 119 207 / 30%) 10px,683		transparent 10px,684		transparent 15px685	);686	animation: cn-btn-loading-bg 2s linear infinite;687}688 689.cn-manager-light .cn-pack-name a {690	color: blue;691}692 693.cn-manager-light .cm-warn-note {694	background-color: #ccc !important;695}696 697.cn-manager-light .cn-btn-install {698	background-color: #333;699}