Spaces:
Sleeping
Sleeping
Commit ·
b2a7efc
1
Parent(s): 7d8bf38
Change theme colors from blue-dark to hot pink
Browse filesCo-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- static/app.css +89 -89
static/app.css
CHANGED
|
@@ -1,10 +1,10 @@
|
|
| 1 |
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
|
| 2 |
*{box-sizing:border-box;margin:0;padding:0}
|
| 3 |
body,.gradio-container{
|
| 4 |
-
background:#
|
| 5 |
font-size:14px!important;color:#e4e4e7!important;min-height:100vh;
|
| 6 |
}
|
| 7 |
-
.dark body,.dark .gradio-container{background:#
|
| 8 |
footer{display:none!important}
|
| 9 |
.hidden-input{display:none!important;height:0!important;overflow:hidden!important;margin:0!important;padding:0!important}
|
| 10 |
|
|
@@ -19,19 +19,19 @@ footer{display:none!important}
|
|
| 19 |
}
|
| 20 |
|
| 21 |
.app-shell{
|
| 22 |
-
background:#
|
| 23 |
margin:12px auto;max-width:1400px;overflow:hidden;
|
| 24 |
box-shadow:0 25px 50px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03);
|
| 25 |
}
|
| 26 |
.app-header{
|
| 27 |
-
background:linear-gradient(135deg,#
|
| 28 |
padding:14px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
|
| 29 |
}
|
| 30 |
.app-header-left{display:flex;align-items:center;gap:12px}
|
| 31 |
.app-logo{
|
| 32 |
-
width:36px;height:36px;background:linear-gradient(135deg,#
|
| 33 |
border-radius:10px;display:flex;align-items:center;justify-content:center;
|
| 34 |
-
box-shadow:0 4px 12px rgba(
|
| 35 |
}
|
| 36 |
.app-logo svg{width:20px;height:20px;fill:#fff;flex-shrink:0}
|
| 37 |
.app-title{
|
|
@@ -40,15 +40,15 @@ footer{display:none!important}
|
|
| 40 |
}
|
| 41 |
.app-badge{
|
| 42 |
font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;
|
| 43 |
-
background:rgba(
|
| 44 |
}
|
| 45 |
.app-badge.fast{background:rgba(34,197,94,.12);color:#4ade80;border:1px solid rgba(34,197,94,.25)}
|
| 46 |
|
| 47 |
.app-toolbar{
|
| 48 |
-
background:#
|
| 49 |
display:flex;gap:4px;align-items:center;flex-wrap:wrap;
|
| 50 |
}
|
| 51 |
-
.tb-sep{width:1px;height:28px;background:#
|
| 52 |
.modern-tb-btn{
|
| 53 |
display:inline-flex;align-items:center;justify-content:center;gap:6px;
|
| 54 |
min-width:32px;height:34px;background:transparent;border:1px solid transparent;
|
|
@@ -56,8 +56,8 @@ footer{display:none!important}
|
|
| 56 |
font-family:'Inter',sans-serif;color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
|
| 57 |
transition:all .15s ease;
|
| 58 |
}
|
| 59 |
-
.modern-tb-btn:hover{background:rgba(
|
| 60 |
-
.modern-tb-btn:active,.modern-tb-btn.active{background:rgba(
|
| 61 |
.modern-tb-btn .tb-label{font-size:13px;color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;font-weight:600}
|
| 62 |
.modern-tb-btn .tb-svg{width:15px;height:15px;flex-shrink:0;color:#ffffff!important}
|
| 63 |
.modern-tb-btn .tb-svg,
|
|
@@ -72,20 +72,20 @@ body:not(.dark) .modern-tb-btn .tb-svg,body:not(.dark) .modern-tb-btn .tb-svg *{
|
|
| 72 |
.gradio-container .modern-tb-btn .tb-svg,.gradio-container .modern-tb-btn .tb-svg *{stroke:#ffffff!important}
|
| 73 |
|
| 74 |
.app-main-row{display:flex;gap:0;flex:1;overflow:hidden}
|
| 75 |
-
.app-main-left{flex:1;display:flex;flex-direction:column;min-width:0;border-right:1px solid #
|
| 76 |
-
.app-main-right{width:420px;display:flex;flex-direction:column;flex-shrink:0;background:#
|
| 77 |
|
| 78 |
-
#gallery-drop-zone{position:relative;background:#
|
| 79 |
-
#gallery-drop-zone.drag-over{outline:2px solid #
|
| 80 |
|
| 81 |
.upload-prompt-modern{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20}
|
| 82 |
.upload-click-area{
|
| 83 |
display:flex;flex-direction:column;align-items:center;justify-content:center;
|
| 84 |
-
cursor:pointer;padding:36px 52px;border:2px dashed #
|
| 85 |
-
background:rgba(
|
| 86 |
}
|
| 87 |
-
.upload-click-area:hover{background:rgba(
|
| 88 |
-
.upload-click-area:active{background:rgba(
|
| 89 |
.upload-click-area svg{width:80px;height:80px}
|
| 90 |
.upload-main-text{color:#71717a;font-size:14px;font-weight:500;margin-top:4px}
|
| 91 |
.upload-sub-text{color:#52525b;font-size:12px}
|
|
@@ -96,13 +96,13 @@ body:not(.dark) .modern-tb-btn .tb-svg,body:not(.dark) .modern-tb-btn .tb-svg *{
|
|
| 96 |
}
|
| 97 |
.gallery-thumb{
|
| 98 |
position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;
|
| 99 |
-
cursor:pointer;border:2px solid #
|
| 100 |
}
|
| 101 |
-
.gallery-thumb:hover{border-color:#
|
| 102 |
-
.gallery-thumb.selected{border-color:#
|
| 103 |
.gallery-thumb img{width:100%;height:100%;object-fit:cover}
|
| 104 |
.thumb-badge{
|
| 105 |
-
position:absolute;top:6px;left:6px;background:#
|
| 106 |
padding:2px 8px;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;
|
| 107 |
}
|
| 108 |
.thumb-remove{
|
|
@@ -111,27 +111,27 @@ body:not(.dark) .modern-tb-btn .tb-svg,body:not(.dark) .modern-tb-btn .tb-svg *{
|
|
| 111 |
display:none;align-items:center;justify-content:center;font-size:12px;transition:all .15s;line-height:1;
|
| 112 |
}
|
| 113 |
.gallery-thumb:hover .thumb-remove{display:flex}
|
| 114 |
-
.thumb-remove:hover{background:#
|
| 115 |
.gallery-add-card{
|
| 116 |
-
aspect-ratio:1;border-radius:10px;border:2px dashed #
|
| 117 |
display:flex;flex-direction:column;align-items:center;justify-content:center;
|
| 118 |
-
cursor:pointer;transition:all .2s ease;background:rgba(
|
| 119 |
}
|
| 120 |
-
.gallery-add-card:hover{border-color:#
|
| 121 |
.gallery-add-card .add-icon{font-size:28px;color:#71717a;font-weight:300}
|
| 122 |
.gallery-add-card .add-text{font-size:12px;color:#71717a;font-weight:500}
|
| 123 |
|
| 124 |
.hint-bar{
|
| 125 |
-
background:rgba(
|
| 126 |
padding:10px 20px;font-size:13px;color:#a1a1aa;line-height:1.7;
|
| 127 |
}
|
| 128 |
-
.hint-bar b{color:#
|
| 129 |
.hint-bar kbd{
|
| 130 |
-
display:inline-block;padding:1px 6px;background:#
|
| 131 |
border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:11px;color:#a1a1aa;
|
| 132 |
}
|
| 133 |
|
| 134 |
-
.suggestions-section{border-top:1px solid #
|
| 135 |
.suggestions-title,.examples-title{
|
| 136 |
font-size:12px;font-weight:600;color:#71717a;text-transform:uppercase;
|
| 137 |
letter-spacing:.8px;margin-bottom:10px;
|
|
@@ -139,54 +139,54 @@ body:not(.dark) .modern-tb-btn .tb-svg,body:not(.dark) .modern-tb-btn .tb-svg *{
|
|
| 139 |
.suggestions-wrap{display:flex;flex-wrap:wrap;gap:6px}
|
| 140 |
.suggestion-chip{
|
| 141 |
display:inline-flex;align-items:center;gap:4px;padding:5px 12px;
|
| 142 |
-
background:rgba(
|
| 143 |
-
color:#
|
| 144 |
cursor:pointer;transition:all .15s;white-space:nowrap;
|
| 145 |
}
|
| 146 |
-
.suggestion-chip:hover{background:rgba(
|
| 147 |
|
| 148 |
-
.examples-section{border-top:1px solid #
|
| 149 |
.examples-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px}
|
| 150 |
.examples-scroll::-webkit-scrollbar{height:6px}
|
| 151 |
-
.examples-scroll::-webkit-scrollbar-track{background:#
|
| 152 |
-
.examples-scroll::-webkit-scrollbar-thumb{background:#
|
| 153 |
-
.examples-scroll::-webkit-scrollbar-thumb:hover{background:#
|
| 154 |
.example-card{
|
| 155 |
-
flex-shrink:0;width:210px;background:#
|
| 156 |
border-radius:10px;overflow:hidden;cursor:pointer;transition:all .2s ease;
|
| 157 |
}
|
| 158 |
-
.example-card:hover{border-color:#
|
| 159 |
.example-card.loading{opacity:.5;pointer-events:none}
|
| 160 |
-
.example-thumbs{display:flex;height:110px;overflow:hidden;background:#
|
| 161 |
-
.example-thumbs img{flex:1;object-fit:cover;min-width:0;border-bottom:1px solid #
|
| 162 |
.example-thumb-placeholder{
|
| 163 |
flex:1;display:flex;align-items:center;justify-content:center;
|
| 164 |
-
background:#
|
| 165 |
}
|
| 166 |
.example-meta{padding:6px 10px;display:flex;align-items:center;gap:6px}
|
| 167 |
.example-badge{
|
| 168 |
-
display:inline-flex;padding:2px 7px;background:rgba(
|
| 169 |
-
font-size:10px;font-weight:600;color:#
|
| 170 |
}
|
| 171 |
.example-prompt-text{
|
| 172 |
padding:0 10px 8px;font-size:11px;color:#a1a1aa;line-height:1.4;
|
| 173 |
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
|
| 174 |
}
|
| 175 |
|
| 176 |
-
.panel-card{border-bottom:1px solid #
|
| 177 |
.panel-card-title{
|
| 178 |
padding:12px 20px;font-size:12px;font-weight:600;color:#71717a;
|
| 179 |
-
text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid rgba(
|
| 180 |
}
|
| 181 |
.panel-card-body{padding:16px 20px;display:flex;flex-direction:column;gap:8px}
|
| 182 |
.modern-label{font-size:13px;font-weight:500;color:#a1a1aa;margin-bottom:4px;display:block}
|
| 183 |
.modern-textarea{
|
| 184 |
-
width:100%;background:#
|
| 185 |
padding:10px 14px;font-family:'Inter',sans-serif;font-size:14px;color:#e4e4e7;
|
| 186 |
resize:vertical;outline:none;min-height:42px;transition:border-color .2s;
|
| 187 |
}
|
| 188 |
-
.modern-textarea:focus{border-color:#
|
| 189 |
-
.modern-textarea::placeholder{color:#
|
| 190 |
.modern-textarea.error-flash{
|
| 191 |
border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.2)!important;animation:shake .4s ease;
|
| 192 |
}
|
|
@@ -208,16 +208,16 @@ body:not(.dark) .modern-tb-btn .tb-svg,body:not(.dark) .modern-tb-btn .tb-svg *{
|
|
| 208 |
|
| 209 |
.btn-run{
|
| 210 |
display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
|
| 211 |
-
background:linear-gradient(135deg,#
|
| 212 |
padding:12px 24px;cursor:pointer;font-size:15px;font-weight:600;font-family:'Inter',sans-serif;
|
| 213 |
color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;transition:all .2s ease;letter-spacing:-.2px;
|
| 214 |
-
box-shadow:0 4px 16px rgba(
|
| 215 |
}
|
| 216 |
.btn-run:hover{
|
| 217 |
-
background:linear-gradient(135deg,#
|
| 218 |
-
box-shadow:0 6px 24px rgba(
|
| 219 |
}
|
| 220 |
-
.btn-run:active{transform:translateY(0);box-shadow:0 2px 8px rgba(
|
| 221 |
.btn-run svg{width:18px;height:18px;fill:#ffffff!important}
|
| 222 |
.btn-run svg path{fill:#ffffff!important}
|
| 223 |
#custom-run-btn,#custom-run-btn *,#custom-run-btn span,#custom-run-btn svg,
|
|
@@ -232,78 +232,78 @@ body:not(.dark) #custom-run-btn *{color:#ffffff!important;-webkit-text-fill-colo
|
|
| 232 |
.gradio-container .btn-run,.gradio-container .btn-run *,.gradio-container #custom-run-btn,
|
| 233 |
.gradio-container #custom-run-btn *{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;fill:#ffffff!important}
|
| 234 |
|
| 235 |
-
.output-frame{border-bottom:1px solid #
|
| 236 |
.output-frame .out-title{
|
| 237 |
padding:10px 20px;font-size:13px;font-weight:700;color:#ffffff!important;
|
| 238 |
-webkit-text-fill-color:#ffffff!important;text-transform:uppercase;letter-spacing:.8px;
|
| 239 |
-
border-bottom:1px solid rgba(
|
| 240 |
}
|
| 241 |
.output-frame .out-title span{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important}
|
| 242 |
.output-frame .out-body{
|
| 243 |
-
flex:1;background:#
|
| 244 |
overflow:hidden;min-height:240px;position:relative;
|
| 245 |
}
|
| 246 |
.output-frame .out-body img{max-width:100%;max-height:460px;image-rendering:auto}
|
| 247 |
-
.output-frame .out-placeholder{color:#
|
| 248 |
.out-download-btn{
|
| 249 |
-
display:none;align-items:center;justify-content:center;background:rgba(
|
| 250 |
-
border:1px solid rgba(
|
| 251 |
-
font-size:11px;font-weight:500;color:#
|
| 252 |
}
|
| 253 |
-
.out-download-btn:hover{background:rgba(
|
| 254 |
.out-download-btn.visible{display:inline-flex}
|
| 255 |
-
.out-download-btn svg{width:12px;height:12px;fill:#
|
| 256 |
|
| 257 |
.modern-loader{
|
| 258 |
-
display:none;position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(
|
| 259 |
z-index:15;flex-direction:column;align-items:center;justify-content:center;gap:16px;backdrop-filter:blur(4px);
|
| 260 |
}
|
| 261 |
.modern-loader.active{display:flex}
|
| 262 |
.modern-loader .loader-spinner{
|
| 263 |
-
width:36px;height:36px;border:3px solid #
|
| 264 |
border-radius:50%;animation:spin .8s linear infinite;
|
| 265 |
}
|
| 266 |
@keyframes spin{to{transform:rotate(360deg)}}
|
| 267 |
.modern-loader .loader-text{font-size:13px;color:#a1a1aa;font-weight:500}
|
| 268 |
-
.loader-bar-track{width:200px;height:4px;background:#
|
| 269 |
.loader-bar-fill{
|
| 270 |
-
height:100%;background:linear-gradient(90deg,#
|
| 271 |
background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:2px;
|
| 272 |
}
|
| 273 |
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
|
| 274 |
|
| 275 |
-
.settings-group{border:1px solid #
|
| 276 |
.settings-group-title{
|
| 277 |
font-size:12px;font-weight:600;color:#71717a;text-transform:uppercase;letter-spacing:.8px;
|
| 278 |
-
padding:10px 16px;border-bottom:1px solid #
|
| 279 |
}
|
| 280 |
.settings-group-body{padding:14px 16px;display:flex;flex-direction:column;gap:12px}
|
| 281 |
.slider-row{display:flex;align-items:center;gap:10px;min-height:28px}
|
| 282 |
.slider-row label{font-size:13px;font-weight:500;color:#a1a1aa;min-width:72px;flex-shrink:0}
|
| 283 |
.slider-row input[type="range"]{
|
| 284 |
-
flex:1;-webkit-appearance:none;appearance:none;height:6px;background:#
|
| 285 |
border-radius:3px;outline:none;min-width:0;
|
| 286 |
}
|
| 287 |
.slider-row input[type="range"]::-webkit-slider-thumb{
|
| 288 |
-
-webkit-appearance:none;width:16px;height:16px;background:linear-gradient(135deg,#
|
| 289 |
-
border-radius:50%;cursor:pointer;box-shadow:0 2px 6px rgba(
|
| 290 |
}
|
| 291 |
.slider-row input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.2)}
|
| 292 |
.slider-row input[type="range"]::-moz-range-thumb{
|
| 293 |
-
width:16px;height:16px;background:linear-gradient(135deg,#
|
| 294 |
-
border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px rgba(
|
| 295 |
}
|
| 296 |
.slider-row .slider-val{
|
| 297 |
min-width:52px;text-align:right;font-family:'JetBrains Mono',monospace;font-size:12px;
|
| 298 |
-
font-weight:500;padding:3px 8px;background:#
|
| 299 |
border-radius:6px;color:#a1a1aa;flex-shrink:0;
|
| 300 |
}
|
| 301 |
.checkbox-row{display:flex;align-items:center;gap:8px;font-size:13px;color:#a1a1aa}
|
| 302 |
-
.checkbox-row input[type="checkbox"]{accent-color:#
|
| 303 |
.checkbox-row label{color:#a1a1aa;font-size:13px;cursor:pointer}
|
| 304 |
|
| 305 |
.app-statusbar{
|
| 306 |
-
background:#
|
| 307 |
display:flex;gap:12px;height:34px;align-items:center;font-size:12px;
|
| 308 |
}
|
| 309 |
.app-statusbar .sb-section{
|
|
@@ -312,32 +312,32 @@ body:not(.dark) #custom-run-btn *{color:#ffffff!important;-webkit-text-fill-colo
|
|
| 312 |
}
|
| 313 |
.app-statusbar .sb-section.sb-fixed{
|
| 314 |
flex:0 0 auto;min-width:90px;text-align:center;justify-content:center;
|
| 315 |
-
padding:3px 12px;background:rgba(
|
| 316 |
}
|
| 317 |
|
| 318 |
-
.app-notice{padding:10px 24px;font-size:11px;color:#d4d4d8!important;border-bottom:1px solid #
|
| 319 |
-
.app-notice a{color:#
|
| 320 |
.app-notice a:hover{text-decoration:underline}
|
| 321 |
.notice-list{list-style:none;display:flex;flex-direction:column;gap:3px;margin:0;padding:0}
|
| 322 |
.notice-list li{padding-left:14px;position:relative;line-height:1.6;color:#d4d4d8!important}
|
| 323 |
.notice-list li::before{content:"·";position:absolute;left:0;color:#d4d4d8!important;font-weight:700}
|
| 324 |
|
| 325 |
-
.dark .app-shell{background:#
|
| 326 |
.dark .upload-prompt-modern{background:transparent}
|
| 327 |
-
.dark .panel-card{background:#
|
| 328 |
-
.dark .settings-group{background:#
|
| 329 |
.dark .output-frame .out-title{color:#ffffff!important}
|
| 330 |
.dark .output-frame .out-title span{color:#ffffff!important}
|
| 331 |
-
.dark .out-download-btn{color:#
|
| 332 |
.dark .out-download-btn:hover{color:#ffffff!important}
|
| 333 |
|
| 334 |
::-webkit-scrollbar{width:8px;height:8px}
|
| 335 |
-
::-webkit-scrollbar-track{background:#
|
| 336 |
-
::-webkit-scrollbar-thumb{background:#
|
| 337 |
-
::-webkit-scrollbar-thumb:hover{background:#
|
| 338 |
|
| 339 |
@media(max-width:840px){
|
| 340 |
.app-main-row{flex-direction:column}
|
| 341 |
.app-main-right{width:100%}
|
| 342 |
-
.app-main-left{border-right:none;border-bottom:1px solid #
|
| 343 |
}
|
|
|
|
| 1 |
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
|
| 2 |
*{box-sizing:border-box;margin:0;padding:0}
|
| 3 |
body,.gradio-container{
|
| 4 |
+
background:#1a0011!important;font-family:'Inter',system-ui,-apple-system,sans-serif!important;
|
| 5 |
font-size:14px!important;color:#e4e4e7!important;min-height:100vh;
|
| 6 |
}
|
| 7 |
+
.dark body,.dark .gradio-container{background:#1a0011!important;color:#e4e4e7!important}
|
| 8 |
footer{display:none!important}
|
| 9 |
.hidden-input{display:none!important;height:0!important;overflow:hidden!important;margin:0!important;padding:0!important}
|
| 10 |
|
|
|
|
| 19 |
}
|
| 20 |
|
| 21 |
.app-shell{
|
| 22 |
+
background:#280018;border:1px solid #4d0030;border-radius:16px;
|
| 23 |
margin:12px auto;max-width:1400px;overflow:hidden;
|
| 24 |
box-shadow:0 25px 50px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.03);
|
| 25 |
}
|
| 26 |
.app-header{
|
| 27 |
+
background:linear-gradient(135deg,#280018,#300020);border-bottom:1px solid #4d0030;
|
| 28 |
padding:14px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
|
| 29 |
}
|
| 30 |
.app-header-left{display:flex;align-items:center;gap:12px}
|
| 31 |
.app-logo{
|
| 32 |
+
width:36px;height:36px;background:linear-gradient(135deg,#ff0080,#ff4da6,#ff80c0);
|
| 33 |
border-radius:10px;display:flex;align-items:center;justify-content:center;
|
| 34 |
+
box-shadow:0 4px 12px rgba(255,0,128,.35);
|
| 35 |
}
|
| 36 |
.app-logo svg{width:20px;height:20px;fill:#fff;flex-shrink:0}
|
| 37 |
.app-title{
|
|
|
|
| 40 |
}
|
| 41 |
.app-badge{
|
| 42 |
font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;
|
| 43 |
+
background:rgba(255,0,128,.15);color:#ff4da6;border:1px solid rgba(255,0,128,.25);letter-spacing:.3px;
|
| 44 |
}
|
| 45 |
.app-badge.fast{background:rgba(34,197,94,.12);color:#4ade80;border:1px solid rgba(34,197,94,.25)}
|
| 46 |
|
| 47 |
.app-toolbar{
|
| 48 |
+
background:#280018;border-bottom:1px solid #4d0030;padding:8px 16px;
|
| 49 |
display:flex;gap:4px;align-items:center;flex-wrap:wrap;
|
| 50 |
}
|
| 51 |
+
.tb-sep{width:1px;height:28px;background:#4d0030;margin:0 8px}
|
| 52 |
.modern-tb-btn{
|
| 53 |
display:inline-flex;align-items:center;justify-content:center;gap:6px;
|
| 54 |
min-width:32px;height:34px;background:transparent;border:1px solid transparent;
|
|
|
|
| 56 |
font-family:'Inter',sans-serif;color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
|
| 57 |
transition:all .15s ease;
|
| 58 |
}
|
| 59 |
+
.modern-tb-btn:hover{background:rgba(255,0,128,.15);border-color:rgba(255,0,128,.3)}
|
| 60 |
+
.modern-tb-btn:active,.modern-tb-btn.active{background:rgba(255,0,128,.25);border-color:rgba(255,0,128,.45)}
|
| 61 |
.modern-tb-btn .tb-label{font-size:13px;color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;font-weight:600}
|
| 62 |
.modern-tb-btn .tb-svg{width:15px;height:15px;flex-shrink:0;color:#ffffff!important}
|
| 63 |
.modern-tb-btn .tb-svg,
|
|
|
|
| 72 |
.gradio-container .modern-tb-btn .tb-svg,.gradio-container .modern-tb-btn .tb-svg *{stroke:#ffffff!important}
|
| 73 |
|
| 74 |
.app-main-row{display:flex;gap:0;flex:1;overflow:hidden}
|
| 75 |
+
.app-main-left{flex:1;display:flex;flex-direction:column;min-width:0;border-right:1px solid #4d0030}
|
| 76 |
+
.app-main-right{width:420px;display:flex;flex-direction:column;flex-shrink:0;background:#280018}
|
| 77 |
|
| 78 |
+
#gallery-drop-zone{position:relative;background:#120009;min-height:440px;overflow:auto}
|
| 79 |
+
#gallery-drop-zone.drag-over{outline:2px solid #ff0080;outline-offset:-2px;background:rgba(255,0,128,.04)}
|
| 80 |
|
| 81 |
.upload-prompt-modern{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20}
|
| 82 |
.upload-click-area{
|
| 83 |
display:flex;flex-direction:column;align-items:center;justify-content:center;
|
| 84 |
+
cursor:pointer;padding:36px 52px;border:2px dashed #6b0042;border-radius:16px;
|
| 85 |
+
background:rgba(255,0,128,.03);transition:all .2s ease;gap:8px;
|
| 86 |
}
|
| 87 |
+
.upload-click-area:hover{background:rgba(255,0,128,.08);border-color:#ff0080;transform:scale(1.03)}
|
| 88 |
+
.upload-click-area:active{background:rgba(255,0,128,.12);transform:scale(.98)}
|
| 89 |
.upload-click-area svg{width:80px;height:80px}
|
| 90 |
.upload-main-text{color:#71717a;font-size:14px;font-weight:500;margin-top:4px}
|
| 91 |
.upload-sub-text{color:#52525b;font-size:12px}
|
|
|
|
| 96 |
}
|
| 97 |
.gallery-thumb{
|
| 98 |
position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;
|
| 99 |
+
cursor:pointer;border:2px solid #4d0030;transition:all .2s ease;background:#280018;
|
| 100 |
}
|
| 101 |
+
.gallery-thumb:hover{border-color:#6b0042;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.4)}
|
| 102 |
+
.gallery-thumb.selected{border-color:#ff0080!important;box-shadow:0 0 0 3px rgba(255,0,128,.2)}
|
| 103 |
.gallery-thumb img{width:100%;height:100%;object-fit:cover}
|
| 104 |
.thumb-badge{
|
| 105 |
+
position:absolute;top:6px;left:6px;background:#ff0080;color:#fff;
|
| 106 |
padding:2px 8px;border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;
|
| 107 |
}
|
| 108 |
.thumb-remove{
|
|
|
|
| 111 |
display:none;align-items:center;justify-content:center;font-size:12px;transition:all .15s;line-height:1;
|
| 112 |
}
|
| 113 |
.gallery-thumb:hover .thumb-remove{display:flex}
|
| 114 |
+
.thumb-remove:hover{background:#ff0080;border-color:#ff0080}
|
| 115 |
.gallery-add-card{
|
| 116 |
+
aspect-ratio:1;border-radius:10px;border:2px dashed #6b0042;
|
| 117 |
display:flex;flex-direction:column;align-items:center;justify-content:center;
|
| 118 |
+
cursor:pointer;transition:all .2s ease;background:rgba(255,0,128,.03);gap:4px;
|
| 119 |
}
|
| 120 |
+
.gallery-add-card:hover{border-color:#ff0080;background:rgba(255,0,128,.08)}
|
| 121 |
.gallery-add-card .add-icon{font-size:28px;color:#71717a;font-weight:300}
|
| 122 |
.gallery-add-card .add-text{font-size:12px;color:#71717a;font-weight:500}
|
| 123 |
|
| 124 |
.hint-bar{
|
| 125 |
+
background:rgba(255,0,128,.06);border-top:1px solid #4d0030;border-bottom:1px solid #4d0030;
|
| 126 |
padding:10px 20px;font-size:13px;color:#a1a1aa;line-height:1.7;
|
| 127 |
}
|
| 128 |
+
.hint-bar b{color:#ff80c0;font-weight:600}
|
| 129 |
.hint-bar kbd{
|
| 130 |
+
display:inline-block;padding:1px 6px;background:#4d0030;border:1px solid #6b0042;
|
| 131 |
border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:11px;color:#a1a1aa;
|
| 132 |
}
|
| 133 |
|
| 134 |
+
.suggestions-section{border-top:1px solid #4d0030;padding:12px 16px}
|
| 135 |
.suggestions-title,.examples-title{
|
| 136 |
font-size:12px;font-weight:600;color:#71717a;text-transform:uppercase;
|
| 137 |
letter-spacing:.8px;margin-bottom:10px;
|
|
|
|
| 139 |
.suggestions-wrap{display:flex;flex-wrap:wrap;gap:6px}
|
| 140 |
.suggestion-chip{
|
| 141 |
display:inline-flex;align-items:center;gap:4px;padding:5px 12px;
|
| 142 |
+
background:rgba(255,0,128,.08);border:1px solid rgba(255,0,128,.2);border-radius:20px;
|
| 143 |
+
color:#ff80c0;font-size:12px;font-weight:500;font-family:'Inter',sans-serif;
|
| 144 |
cursor:pointer;transition:all .15s;white-space:nowrap;
|
| 145 |
}
|
| 146 |
+
.suggestion-chip:hover{background:rgba(255,0,128,.15);border-color:rgba(255,0,128,.35);color:#ff4da6;transform:translateY(-1px)}
|
| 147 |
|
| 148 |
+
.examples-section{border-top:1px solid #4d0030;padding:12px 16px}
|
| 149 |
.examples-scroll{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px}
|
| 150 |
.examples-scroll::-webkit-scrollbar{height:6px}
|
| 151 |
+
.examples-scroll::-webkit-scrollbar-track{background:#120009;border-radius:3px}
|
| 152 |
+
.examples-scroll::-webkit-scrollbar-thumb{background:#4d0030;border-radius:3px}
|
| 153 |
+
.examples-scroll::-webkit-scrollbar-thumb:hover{background:#6b0042}
|
| 154 |
.example-card{
|
| 155 |
+
flex-shrink:0;width:210px;background:#120009;border:1px solid #4d0030;
|
| 156 |
border-radius:10px;overflow:hidden;cursor:pointer;transition:all .2s ease;
|
| 157 |
}
|
| 158 |
+
.example-card:hover{border-color:#ff0080;transform:translateY(-2px);box-shadow:0 4px 12px rgba(255,0,128,.15)}
|
| 159 |
.example-card.loading{opacity:.5;pointer-events:none}
|
| 160 |
+
.example-thumbs{display:flex;height:110px;overflow:hidden;background:#280018}
|
| 161 |
+
.example-thumbs img{flex:1;object-fit:cover;min-width:0;border-bottom:1px solid #4d0030}
|
| 162 |
.example-thumb-placeholder{
|
| 163 |
flex:1;display:flex;align-items:center;justify-content:center;
|
| 164 |
+
background:#280018;color:#6b0042;font-size:11px;min-width:0;
|
| 165 |
}
|
| 166 |
.example-meta{padding:6px 10px;display:flex;align-items:center;gap:6px}
|
| 167 |
.example-badge{
|
| 168 |
+
display:inline-flex;padding:2px 7px;background:rgba(255,0,128,.1);border-radius:4px;
|
| 169 |
+
font-size:10px;font-weight:600;color:#ff4da6;font-family:'JetBrains Mono',monospace;white-space:nowrap;
|
| 170 |
}
|
| 171 |
.example-prompt-text{
|
| 172 |
padding:0 10px 8px;font-size:11px;color:#a1a1aa;line-height:1.4;
|
| 173 |
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
|
| 174 |
}
|
| 175 |
|
| 176 |
+
.panel-card{border-bottom:1px solid #4d0030}
|
| 177 |
.panel-card-title{
|
| 178 |
padding:12px 20px;font-size:12px;font-weight:600;color:#71717a;
|
| 179 |
+
text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid rgba(77,0,48,.6);
|
| 180 |
}
|
| 181 |
.panel-card-body{padding:16px 20px;display:flex;flex-direction:column;gap:8px}
|
| 182 |
.modern-label{font-size:13px;font-weight:500;color:#a1a1aa;margin-bottom:4px;display:block}
|
| 183 |
.modern-textarea{
|
| 184 |
+
width:100%;background:#120009;border:1px solid #4d0030;border-radius:8px;
|
| 185 |
padding:10px 14px;font-family:'Inter',sans-serif;font-size:14px;color:#e4e4e7;
|
| 186 |
resize:vertical;outline:none;min-height:42px;transition:border-color .2s;
|
| 187 |
}
|
| 188 |
+
.modern-textarea:focus{border-color:#ff0080;box-shadow:0 0 0 3px rgba(255,0,128,.15)}
|
| 189 |
+
.modern-textarea::placeholder{color:#6b0042}
|
| 190 |
.modern-textarea.error-flash{
|
| 191 |
border-color:#ef4444!important;box-shadow:0 0 0 3px rgba(239,68,68,.2)!important;animation:shake .4s ease;
|
| 192 |
}
|
|
|
|
| 208 |
|
| 209 |
.btn-run{
|
| 210 |
display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
|
| 211 |
+
background:linear-gradient(135deg,#ff0080,#cc0066);border:none;border-radius:10px;
|
| 212 |
padding:12px 24px;cursor:pointer;font-size:15px;font-weight:600;font-family:'Inter',sans-serif;
|
| 213 |
color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;transition:all .2s ease;letter-spacing:-.2px;
|
| 214 |
+
box-shadow:0 4px 16px rgba(255,0,128,.3),inset 0 1px 0 rgba(255,255,255,.1);
|
| 215 |
}
|
| 216 |
.btn-run:hover{
|
| 217 |
+
background:linear-gradient(135deg,#ff4da6,#ff0080);transform:translateY(-1px);
|
| 218 |
+
box-shadow:0 6px 24px rgba(255,0,128,.45),inset 0 1px 0 rgba(255,255,255,.15);
|
| 219 |
}
|
| 220 |
+
.btn-run:active{transform:translateY(0);box-shadow:0 2px 8px rgba(255,0,128,.3)}
|
| 221 |
.btn-run svg{width:18px;height:18px;fill:#ffffff!important}
|
| 222 |
.btn-run svg path{fill:#ffffff!important}
|
| 223 |
#custom-run-btn,#custom-run-btn *,#custom-run-btn span,#custom-run-btn svg,
|
|
|
|
| 232 |
.gradio-container .btn-run,.gradio-container .btn-run *,.gradio-container #custom-run-btn,
|
| 233 |
.gradio-container #custom-run-btn *{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;fill:#ffffff!important}
|
| 234 |
|
| 235 |
+
.output-frame{border-bottom:1px solid #4d0030;display:flex;flex-direction:column;position:relative}
|
| 236 |
.output-frame .out-title{
|
| 237 |
padding:10px 20px;font-size:13px;font-weight:700;color:#ffffff!important;
|
| 238 |
-webkit-text-fill-color:#ffffff!important;text-transform:uppercase;letter-spacing:.8px;
|
| 239 |
+
border-bottom:1px solid rgba(77,0,48,.6);display:flex;align-items:center;justify-content:space-between;
|
| 240 |
}
|
| 241 |
.output-frame .out-title span{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important}
|
| 242 |
.output-frame .out-body{
|
| 243 |
+
flex:1;background:#120009;display:flex;align-items:center;justify-content:center;
|
| 244 |
overflow:hidden;min-height:240px;position:relative;
|
| 245 |
}
|
| 246 |
.output-frame .out-body img{max-width:100%;max-height:460px;image-rendering:auto}
|
| 247 |
+
.output-frame .out-placeholder{color:#6b0042;font-size:13px;text-align:center;padding:20px}
|
| 248 |
.out-download-btn{
|
| 249 |
+
display:none;align-items:center;justify-content:center;background:rgba(255,0,128,.1);
|
| 250 |
+
border:1px solid rgba(255,0,128,.2);border-radius:6px;cursor:pointer;padding:3px 10px;
|
| 251 |
+
font-size:11px;font-weight:500;color:#ff80c0!important;gap:4px;height:24px;transition:all .15s;
|
| 252 |
}
|
| 253 |
+
.out-download-btn:hover{background:rgba(255,0,128,.2);border-color:rgba(255,0,128,.35);color:#ffffff!important}
|
| 254 |
.out-download-btn.visible{display:inline-flex}
|
| 255 |
+
.out-download-btn svg{width:12px;height:12px;fill:#ff80c0}
|
| 256 |
|
| 257 |
.modern-loader{
|
| 258 |
+
display:none;position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(18,0,9,.92);
|
| 259 |
z-index:15;flex-direction:column;align-items:center;justify-content:center;gap:16px;backdrop-filter:blur(4px);
|
| 260 |
}
|
| 261 |
.modern-loader.active{display:flex}
|
| 262 |
.modern-loader .loader-spinner{
|
| 263 |
+
width:36px;height:36px;border:3px solid #4d0030;border-top-color:#ff0080;
|
| 264 |
border-radius:50%;animation:spin .8s linear infinite;
|
| 265 |
}
|
| 266 |
@keyframes spin{to{transform:rotate(360deg)}}
|
| 267 |
.modern-loader .loader-text{font-size:13px;color:#a1a1aa;font-weight:500}
|
| 268 |
+
.loader-bar-track{width:200px;height:4px;background:#4d0030;border-radius:2px;overflow:hidden}
|
| 269 |
.loader-bar-fill{
|
| 270 |
+
height:100%;background:linear-gradient(90deg,#ff0080,#ff4da6,#ff0080);
|
| 271 |
background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite;border-radius:2px;
|
| 272 |
}
|
| 273 |
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
|
| 274 |
|
| 275 |
+
.settings-group{border:1px solid #4d0030;border-radius:10px;margin:12px 16px;padding:0;overflow:hidden}
|
| 276 |
.settings-group-title{
|
| 277 |
font-size:12px;font-weight:600;color:#71717a;text-transform:uppercase;letter-spacing:.8px;
|
| 278 |
+
padding:10px 16px;border-bottom:1px solid #4d0030;background:rgba(40,0,24,.5);
|
| 279 |
}
|
| 280 |
.settings-group-body{padding:14px 16px;display:flex;flex-direction:column;gap:12px}
|
| 281 |
.slider-row{display:flex;align-items:center;gap:10px;min-height:28px}
|
| 282 |
.slider-row label{font-size:13px;font-weight:500;color:#a1a1aa;min-width:72px;flex-shrink:0}
|
| 283 |
.slider-row input[type="range"]{
|
| 284 |
+
flex:1;-webkit-appearance:none;appearance:none;height:6px;background:#4d0030;
|
| 285 |
border-radius:3px;outline:none;min-width:0;
|
| 286 |
}
|
| 287 |
.slider-row input[type="range"]::-webkit-slider-thumb{
|
| 288 |
+
-webkit-appearance:none;width:16px;height:16px;background:linear-gradient(135deg,#ff0080,#cc0066);
|
| 289 |
+
border-radius:50%;cursor:pointer;box-shadow:0 2px 6px rgba(255,0,128,.4);transition:transform .15s;
|
| 290 |
}
|
| 291 |
.slider-row input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.2)}
|
| 292 |
.slider-row input[type="range"]::-moz-range-thumb{
|
| 293 |
+
width:16px;height:16px;background:linear-gradient(135deg,#ff0080,#cc0066);
|
| 294 |
+
border-radius:50%;cursor:pointer;border:none;box-shadow:0 2px 6px rgba(255,0,128,.4);
|
| 295 |
}
|
| 296 |
.slider-row .slider-val{
|
| 297 |
min-width:52px;text-align:right;font-family:'JetBrains Mono',monospace;font-size:12px;
|
| 298 |
+
font-weight:500;padding:3px 8px;background:#120009;border:1px solid #4d0030;
|
| 299 |
border-radius:6px;color:#a1a1aa;flex-shrink:0;
|
| 300 |
}
|
| 301 |
.checkbox-row{display:flex;align-items:center;gap:8px;font-size:13px;color:#a1a1aa}
|
| 302 |
+
.checkbox-row input[type="checkbox"]{accent-color:#ff0080;width:16px;height:16px;cursor:pointer}
|
| 303 |
.checkbox-row label{color:#a1a1aa;font-size:13px;cursor:pointer}
|
| 304 |
|
| 305 |
.app-statusbar{
|
| 306 |
+
background:#280018;border-top:1px solid #4d0030;padding:6px 20px;
|
| 307 |
display:flex;gap:12px;height:34px;align-items:center;font-size:12px;
|
| 308 |
}
|
| 309 |
.app-statusbar .sb-section{
|
|
|
|
| 312 |
}
|
| 313 |
.app-statusbar .sb-section.sb-fixed{
|
| 314 |
flex:0 0 auto;min-width:90px;text-align:center;justify-content:center;
|
| 315 |
+
padding:3px 12px;background:rgba(255,0,128,.08);border-radius:6px;color:#ff4da6;font-weight:500;
|
| 316 |
}
|
| 317 |
|
| 318 |
+
.app-notice{padding:10px 24px;font-size:11px;color:#d4d4d8!important;border-bottom:1px solid #4d0030;background:rgba(255,255,255,.015)}
|
| 319 |
+
.app-notice a{color:#ff4da6;text-decoration:none}
|
| 320 |
.app-notice a:hover{text-decoration:underline}
|
| 321 |
.notice-list{list-style:none;display:flex;flex-direction:column;gap:3px;margin:0;padding:0}
|
| 322 |
.notice-list li{padding-left:14px;position:relative;line-height:1.6;color:#d4d4d8!important}
|
| 323 |
.notice-list li::before{content:"·";position:absolute;left:0;color:#d4d4d8!important;font-weight:700}
|
| 324 |
|
| 325 |
+
.dark .app-shell{background:#280018}
|
| 326 |
.dark .upload-prompt-modern{background:transparent}
|
| 327 |
+
.dark .panel-card{background:#280018}
|
| 328 |
+
.dark .settings-group{background:#280018}
|
| 329 |
.dark .output-frame .out-title{color:#ffffff!important}
|
| 330 |
.dark .output-frame .out-title span{color:#ffffff!important}
|
| 331 |
+
.dark .out-download-btn{color:#ff80c0!important}
|
| 332 |
.dark .out-download-btn:hover{color:#ffffff!important}
|
| 333 |
|
| 334 |
::-webkit-scrollbar{width:8px;height:8px}
|
| 335 |
+
::-webkit-scrollbar-track{background:#120009}
|
| 336 |
+
::-webkit-scrollbar-thumb{background:#4d0030;border-radius:4px}
|
| 337 |
+
::-webkit-scrollbar-thumb:hover{background:#6b0042}
|
| 338 |
|
| 339 |
@media(max-width:840px){
|
| 340 |
.app-main-row{flex-direction:column}
|
| 341 |
.app-main-right{width:100%}
|
| 342 |
+
.app-main-left{border-right:none;border-bottom:1px solid #4d0030}
|
| 343 |
}
|