Hugging Face's logo

Spaces:
linoyts
/
edit_friendly_ddpm_inversion
Running on A10G

App Files Community
4
Linoy Tsaban commited on
Commit
82fe3cc
·
1 Parent(s): c3e4c77

Update style.css

Browse files
Files changed (1) hide show
  1. style.css +211 -0
style.css CHANGED
@@ -1,3 +1,8 @@
 
 
 
 
 
1
  h1 {
2
  text-align: center;
3
  }
@@ -24,4 +29,210 @@ input[type='range'] {
24
  max-width: 730px;
25
  margin: auto;
26
  padding-top: 1.5rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
27
  }
 
1
+ /*
2
+ This CSS file is modified from:
3
+ https://huggingface.co/spaces/DeepFloyd/IF/blob/main/style.css
4
+ */
5
+
6
  h1 {
7
  text-align: center;
8
  }
 
29
  max-width: 730px;
30
  margin: auto;
31
  padding-top: 1.5rem;
32
+ }
33
+
34
+ #gallery {
35
+ min-height: auto;
36
+ height: 185px;
37
+ margin-top: 15px;
38
+ margin-left: auto;
39
+ margin-right: auto;
40
+ border-bottom-right-radius: .5rem !important;
41
+ border-bottom-left-radius: .5rem !important;
42
+ }
43
+ #gallery .grid-wrap, #gallery .empty{
44
+ height: 185px;
45
+ min-height: 185px;
46
+ }
47
+ #gallery .preview{
48
+ height: 185px;
49
+ min-height: 185px!important;
50
+ }
51
+ #gallery>div>.h-full {
52
+ min-height: 20rem;
53
+ }
54
+
55
+ .details:hover {
56
+ text-decoration: underline;
57
+ }
58
+
59
+ .gr-button {
60
+ white-space: nowrap;
61
+ }
62
+
63
+ .gr-button:focus {
64
+ border-color: rgb(147 197 253 / var(--tw-border-opacity));
65
+ outline: none;
66
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
67
+ --tw-border-opacity: 1;
68
+ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
69
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px var(--tw-ring-offset-width)) var(--tw-ring-color);
70
+ --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity));
71
+ --tw-ring-opacity: .5;
72
+ }
73
+
74
+ #advanced-btn {
75
+ font-size: .7rem !important;
76
+ line-height: 19px;
77
+ margin-top: 12px;
78
+ margin-bottom: 12px;
79
+ padding: 2px 8px;
80
+ border-radius: 14px !important;
81
+ }
82
+
83
+ #advanced-options {
84
+ display: none;
85
+ margin-bottom: 20px;
86
+ }
87
+
88
+ .footer {
89
+ margin-bottom: 45px;
90
+ margin-top: 35px;
91
+ text-align: center;
92
+ border-bottom: 1px solid #e5e5e5;
93
+ }
94
+
95
+ .footer>p {
96
+ font-size: .8rem;
97
+ display: inline-block;
98
+ padding: 0 10px;
99
+ transform: translateY(10px);
100
+ background: white;
101
+ }
102
+
103
+ .dark .footer {
104
+ border-color: #303030;
105
+ }
106
+
107
+ .dark .footer>p {
108
+ background: #0b0f19;
109
+ }
110
+
111
+ .acknowledgments h4 {
112
+ margin: 1.25em 0 .25em 0;
113
+ font-weight: bold;
114
+ font-size: 115%;
115
+ }
116
+
117
+ .animate-spin {
118
+ animation: spin 1s linear infinite;
119
+ }
120
+
121
+ @keyframes spin {
122
+ from {
123
+ transform: rotate(0deg);
124
+ }
125
+
126
+ to {
127
+ transform: rotate(360deg);
128
+ }
129
+ }
130
+
131
+ #share-btn-container {
132
+ display: flex;
133
+ padding-left: 0.5rem !important;
134
+ padding-right: 0.5rem !important;
135
+ background-color: #000000;
136
+ justify-content: center;
137
+ align-items: center;
138
+ border-radius: 9999px !important;
139
+ width: 13rem;
140
+ margin-top: 10px;
141
+ margin-left: auto;
142
+ }
143
+
144
+ #share-btn {
145
+ all: initial;
146
+ color: #ffffff;
147
+ font-weight: 600;
148
+ cursor: pointer;
149
+ font-family: 'IBM Plex Sans', sans-serif;
150
+ margin-left: 0.5rem !important;
151
+ padding-top: 0.25rem !important;
152
+ padding-bottom: 0.25rem !important;
153
+ right: 0;
154
+ }
155
+
156
+ #share-btn * {
157
+ all: unset;
158
+ }
159
+
160
+ #share-btn-container div:nth-child(-n+2) {
161
+ width: auto !important;
162
+ min-height: 0px !important;
163
+ }
164
+
165
+ #share-btn-container .wrap {
166
+ display: none !important;
167
+ }
168
+
169
+ .gr-form {
170
+ flex: 1 1 50%;
171
+ border-top-right-radius: 0;
172
+ border-bottom-right-radius: 0;
173
+ }
174
+
175
+ #prompt-container {
176
+ gap: 0;
177
+ }
178
+
179
+ #prompt-text-input,
180
+ #negative-prompt-text-input {
181
+ padding: .45rem 0.625rem
182
+ }
183
+
184
+ #component-16 {
185
+ border-top-width: 1px !important;
186
+ margin-top: 1em
187
+ }
188
+
189
+ .image_duplication {
190
+ position: absolute;
191
+ width: 100px;
192
+ left: 50px
193
+ }
194
+
195
+ #component-0 {
196
+ max-width: 730px;
197
+ margin: auto;
198
+ padding-top: 1.5rem;
199
+ }
200
+
201
+ #upscaled-image img {
202
+ object-fit: scale-down;
203
+ }
204
+ /* share button */
205
+ #share-btn-container {
206
+ display: flex;
207
+ padding-left: 0.5rem !important;
208
+ padding-right: 0.5rem !important;
209
+ background-color: #000000;
210
+ justify-content: center;
211
+ align-items: center;
212
+ border-radius: 9999px !important;
213
+ width: 13rem;
214
+ margin-top: 10px;
215
+ margin-left: auto;
216
+ flex: unset !important;
217
+ }
218
+ #share-btn {
219
+ all: initial;
220
+ color: #ffffff;
221
+ font-weight: 600;
222
+ cursor: pointer;
223
+ font-family: 'IBM Plex Sans', sans-serif;
224
+ margin-left: 0.5rem !important;
225
+ padding-top: 0.25rem !important;
226
+ padding-bottom: 0.25rem !important;
227
+ right:0;
228
+ }
229
+ #share-btn * {
230
+ all: unset !important;
231
+ }
232
+ #share-btn-container div:nth-child(-n+2){
233
+ width: auto !important;
234
+ min-height: 0px !important;
235
+ }
236
+ #share-btn-container .wrap {
237
+ display: none !important;
238
  }