Skip to content

Commit 57080c5

Browse files
new-sankakunew-sankaku
committed
draft
1 parent 0b2636e commit 57080c5

13 files changed

+3518
-1634
lines changed

‎css/comfyui-components.min.css‎

Lines changed: 664 additions & 1 deletion
Large diffs are not rendered by default.

‎css/comfyui-layout.min.css‎

Lines changed: 195 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,195 @@
1-
*{margin:0;padding:0;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#555 transparent}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent;border-radius:4px}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#4a4a4a,#3a3a3a);border-radius:4px;border:2px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#5a5a5a,#4a4a4a);border:2px solid transparent;background-clip:padding-box}::-webkit-scrollbar-corner{background:transparent}html,body{font-family:Arial,sans-serif;background-color:#1a1a1a;color:#e0e0e0;overflow:hidden;min-height:100%}.root-container{display:flex;height:100vh;gap:8px;padding:8px;background-color:#1a1a1a}.sidebar{width:11%;background-color:#2a2a2a;border:1px solid #404040;border-radius:8px;padding:16px;overflow-y:auto;display:flex;flex-direction:column}.mode-config-panel{width:24%;background-color:#2a2a2a;border:1px solid #404040;border-radius:8px;padding:16px;overflow-y:auto;display:flex;flex-direction:column}.sidebar-title{font-size:18px;font-weight:bold;color:#00bcd4;margin-bottom:16px;border-bottom:2px solid #00bcd4;padding-bottom:8px}.mode-config-title{font-size:16px;font-weight:bold;color:#00bcd4;margin-bottom:16px;border-bottom:1px solid #404040;padding-bottom:8px}.mode-config-content{display:none;flex-direction:column;flex:1;min-height:0}.mode-config-content.active{display:flex}.center-container{flex:1;background-color:#2a2a2a;border:1px solid #404040;border-radius:8px;padding:20px;overflow-y:auto;display:flex;flex-direction:column}.center-tabs{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid #404040;padding-bottom:8px;position:sticky;top:-20px;z-index:10;background-color:inherit;margin-left:-20px;margin-right:-20px;padding:20px 20px 8px 20px}.center-tab{padding:8px 16px;background-color:#3a3a3a;border:1px solid #404040;border-radius:4px 4px 0 0;color:#e0e0e0;cursor:pointer;font-size:14px;transition:all 0.2s}.center-tab:hover{background-color:#4a4a4a;border-color:#00bcd4}.center-tab.active{background-color:#00bcd4;color:#1a1a1a;border-color:#00bcd4}.tab-content{display:none}.tab-content.active{display:block}.right-sidebar{width:20%;background-color:#2a2a2a;border:1px solid #404040;border-radius:8px;padding:12px;display:flex;flex-direction:column;min-width:0;min-height:0}.right-sidebar-title{font-size:14px;font-weight:bold;color:#00bcd4;margin-bottom:12px}.menu-section{margin-bottom:20px}.menu-section-title{font-size:14px;font-weight:bold;color:#90caf9;margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}.loop-textarea-group{flex:1;display:flex;flex-direction:column;min-height:0}.loop-textarea-group textarea{flex:1;width:100%;min-height:100px;resize:none!important}textarea{resize:none!important}.loop-textarea-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.loop-textarea-label span{font-size:14px;color:#b0bec5}.loop-line-count{font-size:12px;color:#00bcd4}
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
scrollbar-width: thin;
6+
scrollbar-color: #555 transparent;
7+
}
8+
::-webkit-scrollbar {
9+
width: 8px;
10+
height: 8px;
11+
}
12+
::-webkit-scrollbar-track {
13+
background: transparent;
14+
border-radius: 4px;
15+
}
16+
::-webkit-scrollbar-thumb {
17+
background: linear-gradient(180deg, #4a4a4a, #3a3a3a);
18+
border-radius: 4px;
19+
border: 2px solid transparent;
20+
background-clip: padding-box;
21+
}
22+
::-webkit-scrollbar-thumb:hover {
23+
background: linear-gradient(180deg, #5a5a5a, #4a4a4a);
24+
border: 2px solid transparent;
25+
background-clip: padding-box;
26+
}
27+
::-webkit-scrollbar-corner {
28+
background: transparent;
29+
}
30+
html,
31+
body {
32+
font-family: Arial, sans-serif;
33+
background-color: #1a1a1a;
34+
color: #e0e0e0;
35+
overflow: hidden;
36+
min-height: 100%;
37+
}
38+
.root-container {
39+
display: flex;
40+
height: 100vh;
41+
gap: 8px;
42+
padding: 8px;
43+
background-color: #1a1a1a;
44+
}
45+
.sidebar {
46+
width: 11%;
47+
background-color: #2a2a2a;
48+
border: 1px solid #404040;
49+
border-radius: 8px;
50+
padding: 16px;
51+
overflow-y: auto;
52+
display: flex;
53+
flex-direction: column;
54+
}
55+
.mode-config-panel {
56+
width: 24%;
57+
background-color: #2a2a2a;
58+
border: 1px solid #404040;
59+
border-radius: 8px;
60+
padding: 16px;
61+
overflow-y: auto;
62+
display: flex;
63+
flex-direction: column;
64+
}
65+
.sidebar-title {
66+
font-size: 18px;
67+
font-weight: bold;
68+
color: #00bcd4;
69+
margin-bottom: 16px;
70+
border-bottom: 2px solid #00bcd4;
71+
padding-bottom: 8px;
72+
}
73+
.mode-config-title {
74+
font-size: 16px;
75+
font-weight: bold;
76+
color: #00bcd4;
77+
margin-bottom: 16px;
78+
border-bottom: 1px solid #404040;
79+
padding-bottom: 8px;
80+
}
81+
.mode-config-content {
82+
display: none;
83+
flex-direction: column;
84+
flex: 1;
85+
min-height: 0;
86+
}
87+
.mode-config-content.active {
88+
display: flex;
89+
}
90+
.center-container {
91+
flex: 1;
92+
background-color: #2a2a2a;
93+
border: 1px solid #404040;
94+
border-radius: 8px;
95+
padding: 20px;
96+
overflow-y: auto;
97+
display: flex;
98+
flex-direction: column;
99+
}
100+
.center-tabs {
101+
display: flex;
102+
gap: 4px;
103+
margin-bottom: 16px;
104+
border-bottom: 1px solid #404040;
105+
padding-bottom: 8px;
106+
position: sticky;
107+
top: -20px;
108+
z-index: 10;
109+
background-color: inherit;
110+
margin-left: -20px;
111+
margin-right: -20px;
112+
padding: 20px 20px 8px 20px;
113+
}
114+
.center-tab {
115+
padding: 8px 16px;
116+
background-color: #3a3a3a;
117+
border: 1px solid #404040;
118+
border-radius: 4px 4px 0 0;
119+
color: #e0e0e0;
120+
cursor: pointer;
121+
font-size: 14px;
122+
transition: all 0.2s;
123+
}
124+
.center-tab:hover {
125+
background-color: #4a4a4a;
126+
border-color: #00bcd4;
127+
}
128+
.center-tab.active {
129+
background-color: #00bcd4;
130+
color: #1a1a1a;
131+
border-color: #00bcd4;
132+
}
133+
.tab-content {
134+
display: none;
135+
}
136+
.tab-content.active {
137+
display: block;
138+
}
139+
.right-sidebar {
140+
width: 20%;
141+
background-color: #2a2a2a;
142+
border: 1px solid #404040;
143+
border-radius: 8px;
144+
padding: 12px;
145+
display: flex;
146+
flex-direction: column;
147+
min-width: 0;
148+
min-height: 0;
149+
}
150+
.right-sidebar-title {
151+
font-size: 14px;
152+
font-weight: bold;
153+
color: #00bcd4;
154+
margin-bottom: 12px;
155+
}
156+
.menu-section {
157+
margin-bottom: 20px;
158+
}
159+
.menu-section-title {
160+
font-size: 14px;
161+
font-weight: bold;
162+
color: #90caf9;
163+
margin-bottom: 8px;
164+
text-transform: uppercase;
165+
letter-spacing: 1px;
166+
}
167+
.loop-textarea-group {
168+
flex: 1;
169+
display: flex;
170+
flex-direction: column;
171+
min-height: 0;
172+
}
173+
.loop-textarea-group textarea {
174+
flex: 1;
175+
width: 100%;
176+
min-height: 100px;
177+
resize: none !important;
178+
}
179+
textarea {
180+
resize: none !important;
181+
}
182+
.loop-textarea-label {
183+
display: flex;
184+
justify-content: space-between;
185+
align-items: center;
186+
margin-bottom: 6px;
187+
}
188+
.loop-textarea-label span {
189+
font-size: 14px;
190+
color: #b0bec5;
191+
}
192+
.loop-line-count {
193+
font-size: 12px;
194+
color: #00bcd4;
195+
}

‎css/comfyui-modal.min.css‎

Lines changed: 199 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,199 @@
1-
.modal{display:none;position:fixed;z-index:2000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.8)}.modal.active{display:flex;align-items:center;justify-content:center}.modal-content{background-color:#2a2a2a;padding:20px;border-radius:8px;border:1px solid #404040;max-width:90vw;max-height:90vh;overflow:auto;min-width:600px}.modal-header{font-size:18px;font-weight:bold;color:#00bcd4;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #404040}.modal-close{float:right;font-size:28px;font-weight:bold;color:#00bcd4;cursor:pointer;line-height:20px}.modal-close:hover{color:#00e5ff}.settings-modal-content{min-width:500px;max-width:700px}.settings-section{margin-bottom:24px}.settings-section-title{font-size:14px;font-weight:bold;color:#90caf9;margin-bottom:12px;text-transform:uppercase}.settings-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #333}.settings-row label{color:#b0bec5}.settings-row input,.settings-row select{width:200px;padding:8px;background-color:#1a1a1a;border:1px solid #404040;border-radius:4px;color:#e0e0e0}.generated-image-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;flex-shrink:0}.generated-image-header span{font-size:13px;color:#90caf9}.generated-image-container{flex:1;background-color:#1a1a1a;border:1px solid #404040;border-radius:4px;overflow-y:auto;padding:6px;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:min-content;gap:6px;min-height:0;align-content:start}.generated-image-item{position:relative;border:1px solid #404040;border-radius:4px;overflow:hidden;background-color:#2a2a2a;cursor:pointer;aspect-ratio:1/1}.generated-image-item img{width:100%;height:100%;object-fit:contain;display:block}.download-button{position:absolute;bottom:4px;right:4px;padding:4px 8px;background-color:rgba(0,188,212,0.9);border:none;color:#1a1a1a;border-radius:4px;cursor:pointer;font-size:11px;font-weight:bold;transition:all 0.2s;opacity:0}.generated-image-item:hover .download-button{opacity:1}.download-button:hover{background-color:#00e5ff}.generated-image-info{padding:3px 6px;font-size:10px;color:#888;background-color:#1a1a1a}.image-modal{display:none;position:fixed;z-index:3000;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.95)}.image-modal.active{display:block}.image-modal-inner{width:100%;height:100%;overflow:auto}.image-modal-inner:not(.zoomed){display:flex;align-items:center;justify-content:center;cursor:zoom-in}.image-modal-inner.zoomed{cursor:grab}.image-modal-inner.zoomed:active{cursor:grabbing}.image-modal img{max-width:95vw;max-height:95vh;object-fit:contain;border-radius:4px;display:block;transform-origin:0 0}.image-modal-inner.zoomed img{max-width:none;max-height:none}.image-modal-close{position:fixed;top:20px;right:30px;font-size:40px;color:#fff;cursor:pointer;transition:color 0.2s;z-index:3001}.image-modal-close:hover{color:#00bcd4}
1+
.modal {
2+
display: none;
3+
position: fixed;
4+
z-index: 2000;
5+
left: 0;
6+
top: 0;
7+
width: 100%;
8+
height: 100%;
9+
background-color: rgba(0, 0, 0, 0.8);
10+
}
11+
.modal.active {
12+
display: flex;
13+
align-items: center;
14+
justify-content: center;
15+
}
16+
.modal-content {
17+
background-color: #2a2a2a;
18+
padding: 20px;
19+
border-radius: 8px;
20+
border: 1px solid #404040;
21+
max-width: 90vw;
22+
max-height: 90vh;
23+
overflow: auto;
24+
min-width: 600px;
25+
}
26+
.modal-header {
27+
font-size: 18px;
28+
font-weight: bold;
29+
color: #00bcd4;
30+
margin-bottom: 16px;
31+
padding-bottom: 12px;
32+
border-bottom: 1px solid #404040;
33+
}
34+
.modal-close {
35+
float: right;
36+
font-size: 28px;
37+
font-weight: bold;
38+
color: #00bcd4;
39+
cursor: pointer;
40+
line-height: 20px;
41+
}
42+
.modal-close:hover {
43+
color: #00e5ff;
44+
}
45+
.settings-modal-content {
46+
min-width: 500px;
47+
max-width: 700px;
48+
}
49+
.settings-section {
50+
margin-bottom: 24px;
51+
}
52+
.settings-section-title {
53+
font-size: 14px;
54+
font-weight: bold;
55+
color: #90caf9;
56+
margin-bottom: 12px;
57+
text-transform: uppercase;
58+
}
59+
.settings-row {
60+
display: flex;
61+
justify-content: space-between;
62+
align-items: center;
63+
padding: 8px 0;
64+
border-bottom: 1px solid #333;
65+
}
66+
.settings-row label {
67+
color: #b0bec5;
68+
}
69+
.settings-row input,
70+
.settings-row select {
71+
width: 200px;
72+
padding: 8px;
73+
background-color: #1a1a1a;
74+
border: 1px solid #404040;
75+
border-radius: 4px;
76+
color: #e0e0e0;
77+
}
78+
.generated-image-header {
79+
display: flex;
80+
justify-content: space-between;
81+
align-items: center;
82+
margin-bottom: 8px;
83+
flex-shrink: 0;
84+
}
85+
.generated-image-header span {
86+
font-size: 13px;
87+
color: #90caf9;
88+
}
89+
.generated-image-container {
90+
flex: 1;
91+
background-color: #1a1a1a;
92+
border: 1px solid #404040;
93+
border-radius: 4px;
94+
overflow-y: auto;
95+
padding: 6px;
96+
display: grid;
97+
grid-template-columns: repeat(3, 1fr);
98+
grid-auto-rows: min-content;
99+
gap: 6px;
100+
min-height: 0;
101+
align-content: start;
102+
}
103+
.generated-image-item {
104+
position: relative;
105+
border: 1px solid #404040;
106+
border-radius: 4px;
107+
overflow: hidden;
108+
background-color: #2a2a2a;
109+
cursor: pointer;
110+
aspect-ratio: 1/1;
111+
}
112+
.generated-image-item img {
113+
width: 100%;
114+
height: 100%;
115+
object-fit: contain;
116+
display: block;
117+
}
118+
.download-button {
119+
position: absolute;
120+
bottom: 4px;
121+
right: 4px;
122+
padding: 4px 8px;
123+
background-color: rgba(0, 188, 212, 0.9);
124+
border: none;
125+
color: #1a1a1a;
126+
border-radius: 4px;
127+
cursor: pointer;
128+
font-size: 11px;
129+
font-weight: bold;
130+
transition: all 0.2s;
131+
opacity: 0;
132+
}
133+
.generated-image-item:hover .download-button {
134+
opacity: 1;
135+
}
136+
.download-button:hover {
137+
background-color: #00e5ff;
138+
}
139+
.generated-image-info {
140+
padding: 3px 6px;
141+
font-size: 10px;
142+
color: #888;
143+
background-color: #1a1a1a;
144+
}
145+
.image-modal {
146+
display: none;
147+
position: fixed;
148+
z-index: 3000;
149+
left: 0;
150+
top: 0;
151+
width: 100%;
152+
height: 100%;
153+
background-color: rgba(0, 0, 0, 0.95);
154+
}
155+
.image-modal.active {
156+
display: block;
157+
}
158+
.image-modal-inner {
159+
width: 100%;
160+
height: 100%;
161+
overflow: auto;
162+
}
163+
.image-modal-inner:not(.zoomed) {
164+
display: flex;
165+
align-items: center;
166+
justify-content: center;
167+
cursor: zoom-in;
168+
}
169+
.image-modal-inner.zoomed {
170+
cursor: grab;
171+
}
172+
.image-modal-inner.zoomed:active {
173+
cursor: grabbing;
174+
}
175+
.image-modal img {
176+
max-width: 95vw;
177+
max-height: 95vh;
178+
object-fit: contain;
179+
border-radius: 4px;
180+
display: block;
181+
transform-origin: 0 0;
182+
}
183+
.image-modal-inner.zoomed img {
184+
max-width: none;
185+
max-height: none;
186+
}
187+
.image-modal-close {
188+
position: fixed;
189+
top: 20px;
190+
right: 30px;
191+
font-size: 40px;
192+
color: #fff;
193+
cursor: pointer;
194+
transition: color 0.2s;
195+
z-index: 3001;
196+
}
197+
.image-modal-close:hover {
198+
color: #00bcd4;
199+
}

0 commit comments

Comments
 (0)