Spaces:
Running on Zero
Running on Zero
fix(ui): move drawer dismisser to gr.Blocks head= + opaque scrim
Browse files
app.py
CHANGED
|
@@ -251,9 +251,9 @@ _CUSTOM_CSS = """
|
|
| 251 |
.aio-shell.drawer-open .aio-drawer { left: 0; }
|
| 252 |
.aio-shell.drawer-open::before {
|
| 253 |
content: ""; position: fixed; inset: 0;
|
| 254 |
-
background: rgba(0,0,0,0.
|
| 255 |
-
backdrop-filter: blur(
|
| 256 |
-
-webkit-backdrop-filter: blur(
|
| 257 |
}
|
| 258 |
|
| 259 |
/* Mobile sub-tweaks */
|
|
@@ -312,11 +312,33 @@ _TOPAZ_THEME = gr.themes.Base(
|
|
| 312 |
)
|
| 313 |
|
| 314 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 315 |
def build_app() -> gr.Blocks:
|
| 316 |
-
with gr.Blocks(theme=_TOPAZ_THEME, title="LTX 2.3 Studio", css=_CUSTOM_CSS) as app:
|
| 317 |
# Header: hamburger button toggles `.drawer-open` on `.aio-shell`.
|
| 318 |
-
# The
|
| 319 |
-
#
|
|
|
|
| 320 |
gr.HTML(
|
| 321 |
'<div class="aio-header">'
|
| 322 |
' <button type="button" class="aio-ham-label" '
|
|
@@ -328,15 +350,6 @@ def build_app() -> gr.Blocks:
|
|
| 328 |
' <span class="aio-title">LTX 2.3 <span class="accent">Studio</span></span>'
|
| 329 |
' <span class="aio-mode-tag" id="aio-mode-tag">T2V</span>'
|
| 330 |
'</div>'
|
| 331 |
-
'<script>(function(){if(window._aioDismiss)return;window._aioDismiss=true;'
|
| 332 |
-
'document.addEventListener("click",function(e){'
|
| 333 |
-
'var s=document.querySelector(".aio-shell");'
|
| 334 |
-
'if(!s||!s.classList.contains("drawer-open"))return;'
|
| 335 |
-
'if(e.target.closest(".aio-drawer")||e.target.closest(".aio-ham-label"))return;'
|
| 336 |
-
's.classList.remove("drawer-open");'
|
| 337 |
-
'var b=document.querySelector(".aio-ham-label");'
|
| 338 |
-
'if(b){b.textContent="\\u2261";b.setAttribute("aria-expanded","false");}'
|
| 339 |
-
'});})();</script>'
|
| 340 |
)
|
| 341 |
|
| 342 |
with gr.Row(elem_classes=["aio-shell"]):
|
|
|
|
| 251 |
.aio-shell.drawer-open .aio-drawer { left: 0; }
|
| 252 |
.aio-shell.drawer-open::before {
|
| 253 |
content: ""; position: fixed; inset: 0;
|
| 254 |
+
background: rgba(0,0,0,0.92); z-index: 9;
|
| 255 |
+
backdrop-filter: blur(10px);
|
| 256 |
+
-webkit-backdrop-filter: blur(10px);
|
| 257 |
}
|
| 258 |
|
| 259 |
/* Mobile sub-tweaks */
|
|
|
|
| 312 |
)
|
| 313 |
|
| 314 |
|
| 315 |
+
_HEAD_HTML = """
|
| 316 |
+
<script>
|
| 317 |
+
(function(){
|
| 318 |
+
if (window._aioDismissInstalled) return;
|
| 319 |
+
window._aioDismissInstalled = true;
|
| 320 |
+
document.addEventListener("click", function(e) {
|
| 321 |
+
var s = document.querySelector(".aio-shell");
|
| 322 |
+
if (!s || !s.classList.contains("drawer-open")) return;
|
| 323 |
+
if (e.target.closest(".aio-drawer") || e.target.closest(".aio-ham-label")) return;
|
| 324 |
+
s.classList.remove("drawer-open");
|
| 325 |
+
var b = document.querySelector(".aio-ham-label");
|
| 326 |
+
if (b) {
|
| 327 |
+
b.textContent = "≡";
|
| 328 |
+
b.setAttribute("aria-expanded", "false");
|
| 329 |
+
}
|
| 330 |
+
});
|
| 331 |
+
})();
|
| 332 |
+
</script>
|
| 333 |
+
"""
|
| 334 |
+
|
| 335 |
+
|
| 336 |
def build_app() -> gr.Blocks:
|
| 337 |
+
with gr.Blocks(theme=_TOPAZ_THEME, title="LTX 2.3 Studio", css=_CUSTOM_CSS, head=_HEAD_HTML) as app:
|
| 338 |
# Header: hamburger button toggles `.drawer-open` on `.aio-shell`.
|
| 339 |
+
# The click-outside dismisser is registered via gr.Blocks(head=...)
|
| 340 |
+
# below — Gradio strips <script> tags inside gr.HTML so it has to
|
| 341 |
+
# live in <head> to actually run.
|
| 342 |
gr.HTML(
|
| 343 |
'<div class="aio-header">'
|
| 344 |
' <button type="button" class="aio-ham-label" '
|
|
|
|
| 350 |
' <span class="aio-title">LTX 2.3 <span class="accent">Studio</span></span>'
|
| 351 |
' <span class="aio-mode-tag" id="aio-mode-tag">T2V</span>'
|
| 352 |
'</div>'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 353 |
)
|
| 354 |
|
| 355 |
with gr.Row(elem_classes=["aio-shell"]):
|