Hugging Face's logo

Spaces:
Sebastiankay
/
controlnet-preprocessors-only
Running

App Files Community
Sebastiankay commited on
Commit
a13431b
·
1 Parent(s): 65bb020

3. Okt. 2024, 04:08

Browse files
Files changed (1) hide show
  1. _res/_custom.css +220 -225
_res/_custom.css CHANGED
@@ -1,246 +1,241 @@
1
  body {
2
- position: relative;
3
-
4
- & #resolution_modal_wrapper {
5
- position: abolute;
6
- inset: 0;
7
- display: flex;
8
- justify-content: center;
9
- align-items: center;
10
- backdrop-filter: blur(12px);
11
-
12
-
13
- & #alertModal {
14
- position: absolute;
15
- top: 250px;
16
- left: 50%;
17
- width: 400px;
18
- max-width: 80vw !important;
19
- min-height: 140px;
20
- transform: translate(-50%, -50%);
21
- padding: var(--size-4) var(--size-8);
22
- background-color: var(--neutral-900) !important;
23
-
24
- border-top-width: 8px;
25
- border-right-width: 1px;
26
- border-bottom-width: 1px;
27
- border-left-width: 1px;
28
- border-top-style: solid;
29
- border-right-style: solid;
30
- border-bottom-style: solid;
31
- border-left-style: solid;
32
- border-top-color: var(--primary-600);
33
- border-right-color: var(--primary-600);
34
- border-bottom-color: var(--primary-600);
35
- border-left-color: var(--primary-600);
36
-
37
- border-radius: var(--container-radius);
38
-
39
- & #alertModalP {
40
- display: flex;
41
- justify-content: center;
42
-
43
- & span {
44
- color: var(--neutral-50);
45
- margin-top: 0rem;
46
- line-height: 1.4;
47
- }
48
-
49
- & svg {
50
- font-size: 4rem;
51
- margin-right: 1rem;
52
- color: var(--cat-red);
53
- fill: var(--cat-red);
54
- }
55
- }
56
-
57
- & button {
58
- color: var(--text-color-by-luminance) !important;
59
- }
60
- }
61
- }
62
  }
63
 
64
- body>gradio-app {
65
- /* background: var(--primary-950);
66
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-950), transparent 50%) 0%, color-mix(in srgb, var(--primary-950), transparent 50%) 28%, var(--neutral-950) 28%, var(--neutral-950) 100%) !important; */
67
- padding-top: 30px;
68
- position: relative;
69
  }
70
 
71
- body>gradio-app::before {
72
- position: absolute;
73
- content: "";
74
- background: var(--primary-900);
75
- background: linear-gradient(6deg, var(--primary-900)0%, var(--primary-700) 100%);
76
- width: 100%;
77
- height: 355px;
78
- top: 0;
79
- z-index: 0;
80
- transition: filter 0.4s ease-out;
81
- filter: blur(var(--blur-value));
82
  }
83
 
84
- div.tabs>div.tab-nav {
85
- border-bottom: none !important;
86
- padding: 0 0.25rem 0 0.25rem !important;
87
- flex-wrap: nowrap;
88
- overflow-x: scroll;
89
- overflow-y: hidden;
90
  }
91
 
92
- div.tabs>div.tab-nav>button {
93
- color: var(--neutral-800);
94
- background: var(--primary-800) !important;
95
- opacity: 0.7 !important;
96
- min-width: 145px !important;
97
  }
98
 
99
- div.tabs>div.tab-nav>button.selected {
100
- border-width: 0 !important;
101
- background: var(--primary-600) !important;
102
- color: var(--neutral-950) !important;
103
- font-weight: 600;
104
  }
105
 
106
  div.tabs div.tabitem {
107
- background-color: var(--neutral-900) !important;
108
- border-top: 8px solid var(--primary-600) !important;
109
- border-radius: var(--container-radius) !important;
110
  }
111
 
112
- #input_column div.tabs>div.tab-nav>button {
113
- color: var(--neutral-50) !important;
114
- background: var(--neutral-800) !important;
115
- opacity: 0.7 !important;
116
- min-width: 145px !important;
117
  }
118
 
119
- #input_column div.tabs>div.tab-nav>button.selected {
120
- border-width: 0 !important;
121
- background: var(--primary-600) !important;
122
- color: var(--neutral-950) !important;
123
- font-weight: 600;
124
  }
125
 
126
  #input_column {
127
-
128
- & div.tabs div.tabitem {
129
- background-color: var(--neutral-800) !important;
130
- border: 0 solid var(--neutral-800) !important;
131
- border-top: 8px solid var(--primary-600) !important;
132
- border-right: 0 solid var(--neutral-800) !important;
133
- border-bottom: 0 solid var(--neutral-800) !important;
134
- border-left: 0 solid var(--neutral-800) !important;
135
- border-radius: var(--container-radius) !important;
136
- padding: 0 !important;
137
- }
138
  }
139
 
140
  .radio-btn-group {
141
-
142
- & label {
143
- font-weight: bold !important;
144
- }
145
-
146
- & label:has(input[type="radio"]:checked),
147
- label:has(input[type="radio"]:not(:checked)):hover {
148
- transition: color 0.4s ease-out, background 0.4s ease-out;
149
- color: var(--neutral-900) !important;
150
- }
151
  }
152
 
153
  .top-description h1 {
154
- color: var(--neutral-400);
155
- font-size: 2rem;
156
  }
157
 
158
  /* MARK: Toggle Button Checkbox */
159
  /* INFO: gr.Checkbox elem_classes".toggle-btn" */
160
 
161
  .toggle-btn {
162
- display: flex;
163
- flex-direction: column-reverse;
164
-
165
- &>div.wrap {
166
- display: none;
167
- }
168
-
169
- &>div:not(.wrap) {
170
- margin-top: var(--spacing-lg);
171
- margin-bottom: 0;
172
- }
173
-
174
- &>label {
175
- position: relative;
176
- width: 57px;
177
- height: 27px;
178
- display: inline-block;
179
- border-radius: 13px;
180
- background: var(--neutral-700);
181
- box-shadow: var(--shadow-inset);
182
- transition: background-color .3s, cursor .3s;
183
- border: solid .4px var(--border-color-primary);
184
- cursor: pointer;
185
-
186
- &>input[type="checkbox"] {
187
- width: 0;
188
- height: 0;
189
- opacity: 0;
190
- }
191
-
192
- &>span {
193
- position: absolute;
194
- left: 60px;
195
- height: 27px;
196
- min-width: 140px;
197
- line-height: 27px;
198
- }
199
- }
200
-
201
- &>label:has(input[type="checkbox"])::after {
202
- content: "";
203
- position: absolute;
204
- top: 3px;
205
- left: 3px;
206
- width: 20px;
207
- height: 20px;
208
- border-radius: 50%;
209
- background: var(--neutral-900);
210
- box-shadow: var(--shadow-inset);
211
- transition: left .2s ease-in-out, background .2s ease-in-out;
212
-
213
- }
214
-
215
- &>label:has(input[type="checkbox"]:checked)::after {
216
- content: "";
217
- position: absolute;
218
- background: var(--neutral-900);
219
- opacity: 0.8;
220
- left: 32px;
221
- }
222
-
223
- &>label:has(input[type="checkbox"]:checked) {
224
- background: var(--primary-600);
225
- }
226
  }
227
 
228
-
229
  /* MARK: Range Input */
230
- input[type=range].svelte-pc1gm4 {
231
- accent-color: var(--slider-color);
232
- background: var(--neutral-700) !important;
233
- background-image: linear-gradient(var(--slider-color), var(--slider-color)) !important;
234
- background-size: 0% 100%;
235
  }
236
 
237
- input[type=range].svelte-pc1gm4::-webkit-slider-thumb {
238
- background-color: var(--primary-600);
239
- border-width: 0;
240
  }
241
 
242
- input[type=range].svelte-pc1gm4::-webkit-slider-thumb:hover {
243
- background-color: var(--primary-500);
244
  }
245
 
246
  /* MARK: Text-Color Override */
@@ -250,29 +245,29 @@ span.svelte-1gfkn6j,
250
  span.svelte-1gfkn6j,
251
  .primary.svelte-cmf5ev,
252
  label.selected.svelte-1k4wjf2.svelte-1k4wjf2.svelte-1k4wjf2 {
253
- color: var(--text-color-by-luminance) !important;
254
  }
255
 
256
  .md-header {
257
- & h1 {
258
- color: var(--primary-950) !important;
259
- }
260
-
261
- & p {
262
- color: var(--neutral-800) !important;
263
- line-height: 1.5 !important;
264
- font-size: 1.1rem !important;
265
-
266
- & i {
267
- display: inline-flex;
268
- align-items: center;
269
- justify-content: center;
270
-
271
- & svg {
272
- font-size: inherit !important;
273
- width: 16px !important;
274
- height: 16px !important;
275
- }
276
- }
277
- }
278
- }
 
1
  body {
2
+ position: relative !important;
3
+
4
+ & #resolution_modal_wrapper {
5
+ position: abolute !important;
6
+ inset: 0;
7
+ display: flex;
8
+ justify-content: center;
9
+ align-items: center;
10
+ backdrop-filter: blur(12px);
11
+
12
+ & #alertModal {
13
+ position: absolute !important;
14
+ top: 250px;
15
+ left: 50%;
16
+ width: 400px;
17
+ max-width: 80vw !important;
18
+ min-height: 140px;
19
+ transform: translate(-50%, -50%);
20
+ padding: var(--size-4) var(--size-8);
21
+ background-color: var(--neutral-900) !important;
22
+
23
+ border-top-width: 8px;
24
+ border-right-width: 1px;
25
+ border-bottom-width: 1px;
26
+ border-left-width: 1px;
27
+ border-top-style: solid;
28
+ border-right-style: solid;
29
+ border-bottom-style: solid;
30
+ border-left-style: solid;
31
+ border-top-color: var(--primary-600);
32
+ border-right-color: var(--primary-600);
33
+ border-bottom-color: var(--primary-600);
34
+ border-left-color: var(--primary-600);
35
+
36
+ border-radius: var(--container-radius);
37
+
38
+ & #alertModalP {
39
+ display: flex;
40
+ justify-content: center;
41
+
42
+ & span {
43
+ color: var(--neutral-50);
44
+ margin-top: 0rem;
45
+ line-height: 1.4;
46
+ }
47
+
48
+ & svg {
49
+ font-size: 4rem;
50
+ margin-right: 1rem;
51
+ color: var(--cat-red);
52
+ fill: var(--cat-red);
53
+ }
54
+ }
55
+
56
+ & button {
57
+ color: var(--text-color-by-luminance) !important;
58
+ }
59
+ }
60
+ }
 
61
  }
62
 
63
+ body > gradio-app {
64
+ /* background: var(--primary-950);
65
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-950), transparent 50%) 0%, color-mix(in srgb, var(--primary-950), transparent 50%) 28%, var(--neutral-950) 28%, var(--neutral-950) 100%) !important; */
66
+ padding-top: 30px;
67
+ position: relative;
68
  }
69
 
70
+ body > gradio-app::before {
71
+ position: absolute;
72
+ content: "";
73
+ background: var(--primary-900);
74
+ background: linear-gradient(6deg, var(--primary-900) 0%, var(--primary-700) 100%);
75
+ width: 100%;
76
+ height: 355px;
77
+ top: 0;
78
+ z-index: 0;
79
+ transition: filter 0.4s ease-out;
80
+ filter: blur(var(--blur-value));
81
  }
82
 
83
+ div.tabs > div.tab-nav {
84
+ border-bottom: none !important;
85
+ padding: 0 0.25rem 0 0.25rem !important;
86
+ flex-wrap: nowrap;
87
+ overflow-x: scroll;
88
+ overflow-y: hidden;
89
  }
90
 
91
+ div.tabs > div.tab-nav > button {
92
+ color: var(--neutral-800);
93
+ background: var(--primary-800) !important;
94
+ opacity: 0.7 !important;
95
+ min-width: 145px !important;
96
  }
97
 
98
+ div.tabs > div.tab-nav > button.selected {
99
+ border-width: 0 !important;
100
+ background: var(--primary-600) !important;
101
+ color: var(--neutral-950) !important;
102
+ font-weight: 600;
103
  }
104
 
105
  div.tabs div.tabitem {
106
+ background-color: var(--neutral-900) !important;
107
+ border-top: 8px solid var(--primary-600) !important;
108
+ border-radius: var(--container-radius) !important;
109
  }
110
 
111
+ #input_column div.tabs > div.tab-nav > button {
112
+ color: var(--neutral-50) !important;
113
+ background: var(--neutral-800) !important;
114
+ opacity: 0.7 !important;
115
+ min-width: 145px !important;
116
  }
117
 
118
+ #input_column div.tabs > div.tab-nav > button.selected {
119
+ border-width: 0 !important;
120
+ background: var(--primary-600) !important;
121
+ color: var(--neutral-950) !important;
122
+ font-weight: 600;
123
  }
124
 
125
  #input_column {
126
+ & div.tabs div.tabitem {
127
+ background-color: var(--neutral-800) !important;
128
+ border: 0 solid var(--neutral-800) !important;
129
+ border-top: 8px solid var(--primary-600) !important;
130
+ border-right: 0 solid var(--neutral-800) !important;
131
+ border-bottom: 0 solid var(--neutral-800) !important;
132
+ border-left: 0 solid var(--neutral-800) !important;
133
+ border-radius: var(--container-radius) !important;
134
+ padding: 0 !important;
135
+ }
 
136
  }
137
 
138
  .radio-btn-group {
139
+ & label {
140
+ font-weight: bold !important;
141
+ }
142
+
143
+ & label:has(input[type="radio"]:checked),
144
+ label:has(input[type="radio"]:not(:checked)):hover {
145
+ transition: color 0.4s ease-out, background 0.4s ease-out;
146
+ color: var(--neutral-900) !important;
147
+ }
 
148
  }
149
 
150
  .top-description h1 {
151
+ color: var(--neutral-400);
152
+ font-size: 2rem;
153
  }
154
 
155
  /* MARK: Toggle Button Checkbox */
156
  /* INFO: gr.Checkbox elem_classes".toggle-btn" */
157
 
158
  .toggle-btn {
159
+ display: flex;
160
+ flex-direction: column-reverse;
161
+
162
+ & > div.wrap {
163
+ display: none;
164
+ }
165
+
166
+ & > div:not(.wrap) {
167
+ margin-top: var(--spacing-lg);
168
+ margin-bottom: 0;
169
+ }
170
+
171
+ & > label {
172
+ position: relative;
173
+ width: 57px;
174
+ height: 27px;
175
+ display: inline-block;
176
+ border-radius: 13px;
177
+ background: var(--neutral-700);
178
+ box-shadow: var(--shadow-inset);
179
+ transition: background-color 0.3s, cursor 0.3s;
180
+ border: solid 0.4px var(--border-color-primary);
181
+ cursor: pointer;
182
+
183
+ & > input[type="checkbox"] {
184
+ width: 0;
185
+ height: 0;
186
+ opacity: 0;
187
+ }
188
+
189
+ & > span {
190
+ position: absolute;
191
+ left: 60px;
192
+ height: 27px;
193
+ min-width: 140px;
194
+ line-height: 27px;
195
+ }
196
+ }
197
+
198
+ & > label:has(input[type="checkbox"])::after {
199
+ content: "";
200
+ position: absolute;
201
+ top: 3px;
202
+ left: 3px;
203
+ width: 20px;
204
+ height: 20px;
205
+ border-radius: 50%;
206
+ background: var(--neutral-900);
207
+ box-shadow: var(--shadow-inset);
208
+ transition: left 0.2s ease-in-out, background 0.2s ease-in-out;
209
+ }
210
+
211
+ & > label:has(input[type="checkbox"]:checked)::after {
212
+ content: "";
213
+ position: absolute;
214
+ background: var(--neutral-900);
215
+ opacity: 0.8;
216
+ left: 32px;
217
+ }
218
+
219
+ & > label:has(input[type="checkbox"]:checked) {
220
+ background: var(--primary-600);
221
+ }
 
222
  }
223
 
 
224
  /* MARK: Range Input */
225
+ input[type="range"].svelte-pc1gm4 {
226
+ accent-color: var(--slider-color);
227
+ background: var(--neutral-700) !important;
228
+ background-image: linear-gradient(var(--slider-color), var(--slider-color)) !important;
229
+ background-size: 0% 100%;
230
  }
231
 
232
+ input[type="range"].svelte-pc1gm4::-webkit-slider-thumb {
233
+ background-color: var(--primary-600);
234
+ border-width: 0;
235
  }
236
 
237
+ input[type="range"].svelte-pc1gm4::-webkit-slider-thumb:hover {
238
+ background-color: var(--primary-500);
239
  }
240
 
241
  /* MARK: Text-Color Override */
 
245
  span.svelte-1gfkn6j,
246
  .primary.svelte-cmf5ev,
247
  label.selected.svelte-1k4wjf2.svelte-1k4wjf2.svelte-1k4wjf2 {
248
+ color: var(--text-color-by-luminance) !important;
249
  }
250
 
251
  .md-header {
252
+ & h1 {
253
+ color: var(--primary-950) !important;
254
+ }
255
+
256
+ & p {
257
+ color: var(--neutral-800) !important;
258
+ line-height: 1.5 !important;
259
+ font-size: 1.1rem !important;
260
+
261
+ & i {
262
+ display: inline-flex;
263
+ align-items: center;
264
+ justify-content: center;
265
+
266
+ & svg {
267
+ font-size: inherit !important;
268
+ width: 16px !important;
269
+ height: 16px !important;
270
+ }
271
+ }
272
+ }
273
+ }