style.css 4.24 KB
Newer Older
pythongosssss's avatar
pythongosssss committed
1
2
3
4
5
6
7
8
9
10
11
12
:root {
	--fg-color: #000;
	--bg-color: #fff;
}

@media (prefers-color-scheme: dark) {
	:root {
		--fg-color: #fff;
		--bg-color: #202020;
	}
}

pythongosssss's avatar
pythongosssss committed
13
14
15
16
17
body {
	width: 100vw;
	height: 100vh;
	margin: 0;
	overflow: hidden;
pythongosssss's avatar
pythongosssss committed
18
19
	background-color: var(--bg-color);
	color: var(--fg-color);
pythongosssss's avatar
pythongosssss committed
20
21
22
23
24
25
26
27
}

#graph-canvas {
	width: 100%;
	height: 100%;
}

.comfy-multiline-input {
pythongosssss's avatar
pythongosssss committed
28
29
	background-color: var(--bg-color);
	color: var(--fg-color);
pythongosssss's avatar
pythongosssss committed
30
31
32
33
34
35
36
37
38
39
40
41
	overflow: hidden;
	overflow-y: auto;
	padding: 2px;
	resize: none;
	border: none;
}

.comfy-modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 100; /* Sit on top */
	padding: 30px 30px 10px 30px;
42
43
	background-color: #353535; /* Modal background */
	color: #ff4444;
pythongosssss's avatar
pythongosssss committed
44
45
46
47
48
49
50
51
	box-shadow: 0px 0px 20px #888888;
	border-radius: 10px;
	top: 50%;
	left: 50%;
	max-width: 80vw;
	max-height: 80vh;
	transform: translate(-50%, -50%);
	overflow: hidden;
pythongosssss's avatar
pythongosssss committed
52
	justify-content: center;
53
54
	font-family: monospace;
	font-size: 15px;
pythongosssss's avatar
pythongosssss committed
55
56
57
58
59
60
61
62
63
64
65
66
67
}

.comfy-modal-content {
	display: flex;
	flex-direction: column;
}

.comfy-modal p {
	overflow: auto;
	white-space: pre-line; /* This will respect line breaks */
	margin-bottom: 20px; /* Add some margin between the text and the close button*/
}

Jairo Correa's avatar
Jairo Correa committed
68
69
70
71
72
73
.comfy-modal select,
.comfy-modal input[type=button],
.comfy-modal input[type=checkbox] {
	margin: 3px 3px 3px 4px;
}

pythongosssss's avatar
pythongosssss committed
74
75
76
77
78
79
80
.comfy-menu {
	width: 200px;
	font-size: 15px;
	position: absolute;
	top: 50%;
	right: 0%;
	background-color: white;
pythongosssss's avatar
pythongosssss committed
81
	color: #000;
pythongosssss's avatar
pythongosssss committed
82
83
84
85
86
87
	text-align: center;
	z-index: 100;
	width: 170px;
	display: flex;
	flex-direction: column;
	align-items: center;
City's avatar
City committed
88
89
90
91
92
93
	color: #999;
	background-color: #353535;
	font-family: sans-serif;
	padding: 10px;
	border-radius: 0 8px 8px 8px;
	box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.4);
pythongosssss's avatar
pythongosssss committed
94
95
}

96
97
.comfy-menu button,
.comfy-modal button {
pythongosssss's avatar
pythongosssss committed
98
99
100
	font-size: 20px;
}

pythongosssss's avatar
pythongosssss committed
101
102
.comfy-menu-btns {
	margin-bottom: 10px;
pythongosssss's avatar
pythongosssss committed
103
	width: 100%;
pythongosssss's avatar
pythongosssss committed
104
105
}

pythongosssss's avatar
pythongosssss committed
106
.comfy-menu-btns button {
pythongosssss's avatar
pythongosssss committed
107
108
	font-size: 10px;
	width: 50%;
City's avatar
City committed
109
110
111
112
113
114
115
116
117
	color: #999 !important;
}

.comfy-menu > button {
	width: 100%;
}

.comfy-menu > button,
.comfy-menu-btns button,
118
119
.comfy-menu .comfy-list button,
.comfy-modal button{
City's avatar
City committed
120
121
122
123
124
125
	color: #ddd;
	background-color: #222;
	border-radius: 8px;
	border-color: #4e4e4e;
	border-style: solid;
	margin-top: 2px;
pythongosssss's avatar
pythongosssss committed
126
127
}

Jairo Correa's avatar
Jairo Correa committed
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
.comfy-menu span.drag-handle {
	width: 10px;
	height: 20px;
	display: inline-block;
	overflow: hidden;
	line-height: 5px;
	padding: 3px 4px;
	cursor: move;
	vertical-align: middle;
	margin-top: -.4em;
	margin-left: -.2em;
	font-size: 12px;
	font-family: sans-serif;
	letter-spacing: 2px;
	color: #cccccc;
	text-shadow: 1px 0 1px black;
	position: absolute;
	top: 0;
	left: 0;
}

.comfy-menu span.drag-handle::after {
	content: '.. .. ..';
}

pythongosssss's avatar
pythongosssss committed
153
154
.comfy-queue-btn {
	width: 100%;
pythongosssss's avatar
pythongosssss committed
155
156
}

pythongosssss's avatar
pythongosssss committed
157
.comfy-list {
City's avatar
City committed
158
159
	color: #999;
	background-color: #333;
pythongosssss's avatar
pythongosssss committed
160
	margin-bottom: 10px;
City's avatar
City committed
161
162
	border-color: #4e4e4e;
	border-style: solid;
pythongosssss's avatar
pythongosssss committed
163
164
165
166
167
}

.comfy-list-items {
	overflow-y: scroll;
	max-height: 100px;
City's avatar
City committed
168
169
	min-height: 25px;
	background-color: #222;
pythongosssss's avatar
pythongosssss committed
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
	padding: 5px;
}

.comfy-list h4 {
	min-width: 160px;
	margin: 0;
	padding: 3px;
	font-weight: normal;
}

.comfy-list-items button {
	font-size: 10px;
}

.comfy-list-actions {
	margin: 5px;
	display: flex;
	gap: 5px;
	justify-content: center;
}

.comfy-list-actions button {
	font-size: 12px;
pythongosssss's avatar
pythongosssss committed
193
194
}

pythongosssss's avatar
pythongosssss committed
195
button.comfy-settings-btn {
City's avatar
City committed
196
	background-color: rgba(0, 0, 0, 0);
pythongosssss's avatar
pythongosssss committed
197
198
199
200
201
202
203
	font-size: 12px;
	padding: 0;
	position: absolute;
	right: 0;
	border: none;
}

City's avatar
City committed
204
205
206
207
button.comfy-queue-btn {
	margin: 6px 0 !important;
}

pythongosssss's avatar
pythongosssss committed
208
.comfy-modal.comfy-settings {
209
210
211
	text-align: center;
	font-family: sans-serif;
	color: #999;
pythongosssss's avatar
pythongosssss committed
212
	z-index: 99;
pythongosssss's avatar
pythongosssss committed
213
214
}

215
216
217
218
219
220
221
222
223
224
.comfy-modal input,
.comfy-modal select {
	color: #ddd;
	background-color: #222;
	border-radius: 8px;
	border-color: #4e4e4e;
	border-style: solid;
	font-size: inherit;
}

pythongosssss's avatar
pythongosssss committed
225
@media only screen and (max-height: 850px) {
pythongosssss's avatar
pythongosssss committed
226
	.comfy-menu {
227
228
229
230
231
232
233
234
		top: 0 !important;
		bottom: 0 !important;
		left: auto !important;
		right: 0 !important;
		border-radius: 0px;
	}
	.comfy-menu span.drag-handle {
		visibility:hidden
pythongosssss's avatar
pythongosssss committed
235
236
	}
}
missionfloyd's avatar
missionfloyd committed
237
238

.graphdialog {
239
	min-height: 1em;
missionfloyd's avatar
missionfloyd committed
240
241
242
}

.graphdialog .name {
243
244
245
	font-size: 14px;
	font-family: sans-serif;
	color: #999999;
missionfloyd's avatar
missionfloyd committed
246
247
248
}

.graphdialog button {
249
250
251
252
	margin-top: unset;
	vertical-align: unset;
	height: 1.6em;
	padding-right: 8px;
missionfloyd's avatar
missionfloyd committed
253
254
255
}

.graphdialog input, .graphdialog textarea, .graphdialog select {
256
257
258
259
260
	background-color: #222;
	border: 2px solid;
	border-color: #444444;
	color: #ddd;
	border-radius: 12px 0 0 12px;
missionfloyd's avatar
missionfloyd committed
261
}