Updating for .gradio_wrapper

app.py

@@ -134,7 +134,7 @@ def prompt_to_layout(user_prompt, intensity, fpath=None):
 
 custom_css="""
 @import url("https://use.typekit.net/nid3pfr.css");
-.gradio_page {
+.gradio_wrapper .gradio_bg[is_embedded=false] .gradio_page {
   display: flex;
   width: 100vw;
   min-height: 50vh;
@@ -149,16 +149,16 @@ custom_css="""
   width: 100vw;
   max-width: 1500px;
 }
-.gradio_bg[theme=default] .panel_buttons {
+.gradio_wrapper .gradio_bg[theme=default] .panel_buttons {
   justify-content: flex-end;
 }
 
-.gradio_bg[theme=default] .panel_button {
+.gradio_wrapper .gradio_bg[theme=default] .panel_button {
   flex: 0 0 0;
   min-width: 150px;
 }
 
-.gradio_bg[theme=default] .gradio_interface .panel_button.submit { 
+.gradio_wrapper .gradio_bg[theme=default] .gradio_interface .panel_button.submit { 
   background: #11213A;
   border-radius: 5px;
   color: #FFFFFF;
@@ -168,15 +168,15 @@ custom_css="""
   letter-spacing: 0.15em;
   flex: 0 0 0;
 }
-.gradio_bg[theme=default] .gradio_interface .panel_button.submit:hover { 
+.gradio_wrapper .gradio_bg[theme=default] .gradio_interface .panel_button.submit:hover { 
   background: #000000;
 }
 
 .input_text:focus {
   border-color: #FA7880;
 }
-.gradio_bg[theme=default] .gradio_interface .input_text input, 
-.gradio_bg[theme=default] .gradio_interface .input_text textarea {
+.gradio_wrapper .gradio_bg[theme=default] .gradio_interface .input_text input, 
+.gradio_wrapper .gradio_bg[theme=default] .gradio_interface .input_text textarea {
   font: 200 45px garamond-premier-pro-display, serif;
   line-height: 110%;
   color: #11213A;
@@ -188,18 +188,18 @@ custom_css="""
 .input_text textarea:focus-visible { 
   outline: none;
 }
-.gradio_bg[theme=default] .gradio_interface .input_radio .radio_item.selected {
+.gradio_wrapper .gradio_bg[theme=default] .gradio_interface .input_radio .radio_item.selected {
     background-color: #11213A;
 }
-.gradio_bg[theme=default] .gradio_interface .input_radio .selected .radio_circle {
+.gradio_wrapper .gradio_bg[theme=default] .gradio_interface .input_radio .selected .radio_circle {
     border-color: #4365c4;
 }
-.gradio_bg[theme=default] .gradio_interface .output_image {
+.gradio_wrapper .gradio_bg[theme=default] .gradio_interface .output_image {
     width: 100%;
     height: 40vw;
     max-height: 630px;
 }
-.gradio_bg[theme=default] .gradio_interface .output_image .image_preview_holder {
+.gradio_wrapper .gradio_bg[theme=default] .gradio_interface .output_image .image_preview_holder {
     background: transparent;
 }
 .panel:nth-child(1) {
@@ -211,10 +211,10 @@ custom_css="""
 .panel {
   background: transparent;
 }
-.gradio_bg[theme=default] .gradio_interface .component_set {
+.gradio_wrapper .gradio_bg[theme=default] .gradio_interface .component_set {
   background: transparent;
 }
-.panel:nth-child(2) .gradio_bg[theme=default] .gradio_interface .panel_header {
+.panel:nth-child(2) .gradio_wrapper .gradio_bg[theme=default] .gradio_interface .panel_header {
   display: none;
 }
 .labels {
@@ -227,7 +227,7 @@ custom_css="""
         margin-left: 0px;
         margin-right: 0px;
     }
-    .gradio_bg[theme=default] .gradio_interface .output_image {
+    .gradio_wrapper .gradio_bg[theme=default] .gradio_interface .output_image {
         height: auto;
     }
 }