custom_styles.css

/* ---------------------------------- */
/* --- Styles for Injected Popup --- */
/* ---------------------------------- */

/* 

  Target the main popup container by its ID.

  This ensures these styles only apply to your specific popup.

*/
#my-floating-popup {
    /* Font styles for better readability */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: var(--body-text-color); /* Use Gradio's theme variable for text color */
}

/* Style the h2 tag specifically inside the popup */
#my-floating-popup h2 {
    margin-top: 0;
    margin-bottom: 16px;
    color: var(--body-text-color-strong); /* Use a stronger text color for the title */
    border-bottom: 1px solid var(--border-color-primary);
    padding-bottom: 8px;
}

/* Style the paragraph tag inside the popup */
#my-floating-popup p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 20px;
}