RamAnanth1 commited on
Commit
a71488b
β€’
1 Parent(s): c1fcf29

Create style.css

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