Delete style.css

style.css

@@ -1,430 +0,0 @@
-/* =========================
-   GLOBAL BACKGROUND (NYC)
-   ========================= */
-
-gradio-app,
-.gradio-app,
-.main,
-#app,
-[data-testid="app"],
-html,
-body {
-  background: url("https://huggingface.co/spaces/teomello/FinalProjectAPP/resolve/main/Z2kAxe.jpg") no-repeat center center fixed !important;
-  background-size: cover !important;
-  min-height: 100vh !important;
-  margin: 0 !important;
-  padding: 0 !important;
-}
-
-/* Overlay for readability */
-gradio-app::before,
-.gradio-app::before,
-.main::before,
-#app::before,
-[data-testid="app"]::before {
-  content: "" !important;
-  position: fixed !important;
-  inset: 0 !important;
-  background: rgba(0, 0, 0, 0.30) !important;
-  pointer-events: none !important;
-  z-index: 0 !important;
-}
-
-/* Remove any previous bottom banner */
-body::after {
-  content: none !important;
-}
-
-/* =========================
-   MAIN CONTAINER
-   ========================= */
-
-.gradio-container {
-  position: relative !important;
-  z-index: 1 !important;
-  max-width: 1400px !important;
-  width: 94vw !important;
-  margin: 0 auto !important;
-  padding-top: 180px !important;
-  padding-bottom: 120px !important;
-  background: transparent !important;
-}
-
-/* =========================
-   TITLE / HERO
-   ========================= */
-
-/* Optional: add a dark panel behind title/subtitle for readability */
-#escp_title {
-  background: rgba(0, 0, 0, 0.45) !important;
-  padding: 20px !important;
-  border-radius: 12px !important;
-  max-width: 1100px !important;
-  margin: 0 auto 18px auto !important;
-}
-
-#escp_title h1 {
-  color: rgb(242,198,55) !important;
-  font-size: 3rem !important;
-  font-weight: 800 !important;
-  text-align: center !important;
-  margin: 0 0 12px 0 !important;
-}
-
-/* Subtitle more visible */
-#escp_title p,
-#escp_title em {
-  color: rgba(255,255,255,0.98) !important;
-  font-size: 1.1rem !important;
-  font-weight: 500 !important;
-  text-align: center !important;
-  max-width: 900px !important;
-  margin: 0 auto 6px auto !important;
-  line-height: 1.5 !important;
-}
-
-/* =========================
-   TABS
-   ========================= */
-
-.tabs > .tab-nav,
-.tab-nav,
-div[role="tablist"],
-.svelte-tabs > .tab-nav {
-  background: rgba(0, 0, 0, 0.45) !important;
-  border-radius: 10px 10px 0 0 !important;
-  padding: 4px !important;
-}
-
-/* ALL tab buttons */
-.tabs > .tab-nav button,
-.tab-nav button,
-div[role="tablist"] button,
-button[role="tab"],
-.svelte-tabs button,
-.tab-nav > button,
-.tabs button {
-  color: #ffffff !important;
-  font-weight: 600 !important;
-  border: none !important;
-  background: transparent !important;
-  padding: 10px 20px !important;
-  border-radius: 8px 8px 0 0 !important;
-  opacity: 1 !important;
-}
-
-/* Selected tab */
-.tabs > .tab-nav button.selected,
-.tab-nav button.selected,
-button[role="tab"][aria-selected="true"],
-button[role="tab"].selected,
-div[role="tablist"] button[aria-selected="true"],
-.svelte-tabs button.selected {
-  color: rgb(242, 198, 55) !important;
-  background: rgba(255, 255, 255, 0.15) !important;
-}
-
-/* Unselected tabs visibility */
-.tabs > .tab-nav button:not(.selected),
-.tab-nav button:not(.selected),
-button[role="tab"][aria-selected="false"],
-button[role="tab"]:not(.selected),
-div[role="tablist"] button:not([aria-selected="true"]) {
-  color: #ffffff !important;
-  opacity: 1 !important;
-}
-
-/* =========================
-   PANELS / CARDS
-   ========================= */
-
-.gradio-container .gr-block,
-.gradio-container .gr-box,
-.gradio-container .gr-panel,
-.gradio-container .gr-group {
-  background: rgba(255, 255, 255, 0.96) !important;
-  border-radius: 12px !important;
-}
-
-/* Tab content */
-.tabitem {
-  background: rgba(255, 255, 255, 0.95) !important;
-  border-radius: 0 0 12px 12px !important;
-  padding: 16px !important;
-}
-
-/* =========================
-   INPUTS
-   ========================= */
-
-.gradio-container input,
-.gradio-container textarea,
-.gradio-container select {
-  background: #ffffff !important;
-  border: 1px solid #d1d5db !important;
-  border-radius: 8px !important;
-}
-
-/* =========================
-   EXECUTION LOG (terminal style)
-   Force black background + white text
-   ========================= */
-
-/* Keep normal inputs white, but log textarea black:
-   target Gradio textbox/textarea more specifically */
-.gradio-container textarea,
-.gradio-container .gr-textbox textarea,
-.gradio-container [data-testid="textbox"] textarea {
-  background-color: #111111 !important;
-  color: #eaeaea !important;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
-  font-size: 0.85rem !important;
-  border-radius: 10px !important;
-  padding: 12px !important;
-  border: 1px solid rgba(255,255,255,0.18) !important;
-}
-
-/* Ensure placeholder is visible if any */
-.gradio-container textarea::placeholder {
-  color: rgba(255,255,255,0.55) !important;
-}
-
-/* =========================
-   BUTTONS
-   ========================= */
-
-/* Only style "real" action buttons, not icon toolbar buttons or thumbnails */
-.gradio-container button:not([role="tab"]):not(.icon-button):not(.thumbnail-item):not([class*="thumbnail"]) {
-  font-weight: 600 !important;
-  padding: 10px 16px !important;
-  border-radius: 10px !important;
-}
-
-button.primary {
-  background-color: rgb(40, 9, 109) !important;
-  color: #ffffff !important;
-  border: none !important;
-}
-
-button.primary:hover {
-  background-color: rgb(60, 20, 140) !important;
-}
-
-button.secondary {
-  background-color: #ffffff !important;
-  color: rgb(40, 9, 109) !important;
-  border: 2px solid rgb(40, 9, 109) !important;
-}
-
-button.secondary:hover {
-  background-color: rgb(240, 238, 250) !important;
-}
-
-/* =========================
-   DATAFRAMES / TABLES
-   ========================= */
-
-[data-testid="dataframe"] {
-  background-color: #ffffff !important;
-  border-radius: 10px !important;
-}
-
-table {
-  font-size: 0.85rem !important;
-}
-
-/* =========================
-   CHATBOT (AI Dashboard)
-   ========================= */
-
-.gr-chatbot {
-  min-height: 380px !important;
-  background-color: #ffffff !important;
-  border-radius: 12px !important;
-}
-
-.gr-chatbot .message.user {
-  background-color: rgb(232, 225, 250) !important;
-  border-radius: 12px !important;
-}
-
-.gr-chatbot .message.bot {
-  background-color: #f3f4f6 !important;
-  border-radius: 12px !important;
-}
-
-/* =========================
-   GALLERY
-   ========================= */
-
-.gallery {
-  background: #ffffff !important;
-  border-radius: 10px !important;
-}
-
-/* =========================
-   MARKDOWN HEADINGS
-   ========================= */
-
-.tabitem h3 {
-  color: rgb(40, 9, 109) !important;
-  font-weight: 700 !important;
-}
-
-.tabitem h4 {
-  color: #374151 !important;
-}
-
-/* =========================
-   EXAMPLES ROW (AI Dashboard)
-   ========================= */
-
-.examples-row button {
-  background: rgb(240, 238, 250) !important;
-  color: rgb(40, 9, 109) !important;
-  border: 1px solid rgb(40, 9, 109) !important;
-  border-radius: 8px !important;
-  font-size: 0.85rem !important;
-}
-
-.examples-row button:hover {
-  background: rgb(232, 225, 250) !important;
-}
-
-/* =========================
-   HEADER / FOOTER CLEANUP
-   ========================= */
-
-header,
-footer,
-header *,
-footer * {
-  background: transparent !important;
-  box-shadow: none !important;
-}
-
-/* Hover state */
-.gradio-container .gr-modal button:hover,
-.gradio-container .gallery button:hover {
-  background: rgb(240, 238, 250) !important;
-}
-
-/* =========================
-   FIX: Image viewer icon-button toolbar (Download/Fullscreen/Share/Close)
-   These use SVG with fill/stroke="currentColor", so we must set a visible color.
-   Targets .icon-button class directly — works for gr.Image AND gallery lightbox.
-   ========================= */
-
-.gradio-container button.icon-button,
-.gradio-container .icon-button,
-button.icon-button,
-.icon-button {
-  color: #374151 !important;          /* dark gray — visible on white bg */
-  background: rgba(255,255,255,0.90) !important;
-  border-radius: 8px !important;
-  padding: 4px !important;            /* keep compact — these are icon-only buttons */
-}
-
-.gradio-container button.icon-button:hover,
-.gradio-container .icon-button:hover,
-button.icon-button:hover,
-.icon-button:hover {
-  background: rgba(232, 225, 250, 0.95) !important;
-  color: rgb(40, 9, 109) !important;
-}
-
-/* Ensure SVGs inside icon-buttons inherit the visible color */
-.gradio-container button.icon-button svg,
-.gradio-container .icon-button svg,
-button.icon-button svg,
-.icon-button svg {
-  color: inherit !important;
-  stroke: currentColor;
-}
-
-/* Also cover any toolbar buttons wrapped in [role=dialog] (older Gradio) */
-
-.gradio-container [role="dialog"] button[aria-label]:not(.icon-button),
-.gradio-container [role="dialog"] button[title]:not(.icon-button) {
-  background: rgba(255,255,255,0.95) !important;
-  border: 1px solid rgba(40, 9, 109, 0.40) !important;
-  border-radius: 10px !important;
-  color: rgb(40, 9, 109) !important;
-}
-
-.gradio-container [role="dialog"] button[aria-label]:not(.icon-button) svg,
-.gradio-container [role="dialog"] button[title]:not(.icon-button) svg {
-  color: rgb(40, 9, 109) !important;
-}
-
-/* =========================
-   FIX: Gallery bottom strip — thumbnail-item buttons
-   ========================= */
-
-.gradio-container button.thumbnail-item,
-.gradio-container [class*="thumbnail-item"] {
-  background: transparent !important;
-  border: 2px solid transparent !important;
-  border-radius: 6px !important;
-  padding: 2px !important;           /* remove the 10px 16px from the general rule */
-  overflow: hidden !important;
-  min-width: 52px !important;
-  min-height: 52px !important;
-}
-
-.gradio-container button.thumbnail-item.selected,
-.gradio-container [class*="thumbnail-item"].selected {
-  border-color: rgb(40, 9, 109) !important;
-}
-
-.gradio-container button.thumbnail-item img,
-.gradio-container [class*="thumbnail-item"] img {
-  display: block !important;
-  width: 100% !important;
-  height: 100% !important;
-  object-fit: cover !important;
-  opacity: 1 !important;
-  visibility: visible !important;
-  filter: none !important;
-}
-
-/* =========================
-   FIX: Gallery grid thumbnails
-   ========================= */
-
-.gradio-container .gallery,
-.gradio-container [data-testid="gallery"] {
-  background: #ffffff !important;
-}
-
-.gradio-container .gallery button:not(.icon-button):not(.thumbnail-item),
-.gradio-container [data-testid="gallery"] button:not(.icon-button):not(.thumbnail-item) {
-  background: transparent !important;
-  overflow: hidden !important;
-  min-width: 56px !important;
-  min-height: 56px !important;
-  padding: 0 !important;
-}
-
-.gradio-container .gallery img,
-.gradio-container [data-testid="gallery"] img {
-  display: block !important;
-  opacity: 1 !important;
-  visibility: visible !important;
-  filter: none !important;
-  mix-blend-mode: normal !important;
-  width: 100% !important;
-  height: 100% !important;
-  object-fit: cover !important;
-}
-
-.gradio-container .gallery canvas,
-.gradio-container [data-testid="gallery"] canvas {
-  display: block !important;
-  opacity: 1 !important;
-  visibility: visible !important;
-  filter: none !important;
-  width: 100% !important;
-  height: 100% !important;
-}
-