/* Minimal Comindware-like theme for Gradio UI (local, no external imports) */ :root { /* Tokens approximating CMW Platform variables */ --cmw-primary: #0575bd; --cmw-primary-fade: #0694EF; --cmw-primary-fadest: #2FAAF9; --cmw-primary-dark: #04568B; --cmw-primary-strongest: #02375A; --cmw-primary-text: #ffffff; --cmw-brand: #3697d4; /* HSL for alpha-based utilities */ --cmw-primary-hsl: 203, 95%, 38%; --cmw-secondary: #f5f5f5; --cmw-secondary-fade: #FFFFFF; --cmw-secondary-fadest: #FFFFFF; --cmw-secondary-strong: #DCDCDC; --cmw-secondary-strongest: #C2C2C2; --cmw-secondary-text: #5a5a5a; --cmw-main: #ffffff; --cmw-main-fade: #FFFFFF; --cmw-main-fadest: #FFFFFF; --cmw-main-strong: #E6E6E6; --cmw-main-strongest: #CCCCCC; --cmw-text: #5a5a5a; --cmw-text-fade: #747474; --cmw-text-fadest: #8D8D8D; --cmw-text-strong: #404040; --cmw-surface: #ffffff; --cmw-surface-alt: #f5f8fc; --cmw-border: #dce2ea; --cmw-border-strong: #b8c3d1; /* Links */ --cmw-link: var(--cmw-primary); --cmw-link-fade: var(--cmw-primary-fade); --cmw-link-fadest: var(--cmw-primary-fadest); --cmw-link-strong: var(--cmw-primary-dark); /* Status */ --cmw-success: #74c365; --cmw-success-text: #ffffff; --cmw-error: #e1462c; --cmw-error-text: #ffffff; --cmw-warning: #F79437; --cmw-warning-text: #5a5a5a; --cmw-highlight: #e8f6ff; --cmw-highlight-text: #5a5a5a; /* Radii, spacing, shadows */ --cmw-radius-sm: 3px; --cmw-radius-md: 4px; --cmw-radius-lg: 6px; --cmw-space-1: 4px; --cmw-space-2: 8px; --cmw-space-3: 12px; --cmw-space-4: 16px; --cmw-space-5: 20px; /* Component-specific spacing */ --cmw-chat-hints-padding-x: var(--cmw-space-5); --cmw-chat-hints-padding-y: var(--cmw-space-4); --cmw-shadow-soft: 0 2px 6px rgba(0,0,0,0.06); --cmw-shadow-focus: 0 0 0 2px rgba(5,117,189,0.2); /* Typography */ --cmw-font-family: OpenSans, Arial, sans-serif; --cmw-font-weight-normal: 400; --cmw-font-size: 14px; --cmw-line-height: 1.6; /* Buttons */ --cmw-button-radius: var(--cmw-radius-md); --cmw-button-padding-x: 16px; --cmw-button-padding-y: 8px; --cmw-button-height-lg: 38px; --cmw-button-font-weight: 500; /* Toolbar button (compact CMW style) */ --cmw-toolbar-btn-height: 26px; --cmw-toolbar-btn-padding-x: 10px; --cmw-toolbar-btn-radius: 4px; --cmw-toolbar-btn-font-weight: 400; --cmw-toolbar-btn-hover-bg: hsla(var(--cmw-primary-hsl), 0.08); --cmw-toolbar-btn-hover-border: var(--cmw-primary); /* Tabs */ --cmw-tab-height: 34px; --cmw-tab-gap: 6px; --cmw-tab-padding-x: 12px; --cmw-tab-font-weight: 500; --cmw-tab-radius: 16px; /* Misc */ --cmw-white: #ffffff; /* Assets (optional; set to your local resources if available) */ --cmw-logo-url: url('/gradio_api/file=resources/img/comindware_logo.svg'); --cmw-logo-height: 1.8em; --cmw-logo-gap: var(--cmw-space-3); --cmw-logo-shadow: drop-shadow(0 1px 0 rgba(0,0,0,0.06)); } /* Extended color scales with sRGB fallbacks */ :root { /* Blue scale */ --blue-1: #f7fbff; --blue-2: #eff7ff; --blue-3: #e1f0ff; --blue-4: #cde7ff; --blue-5: #b5dcff; --blue-6: #97cdff; --blue-7: #6fb7ff; --blue-8: #3a99f8; --blue-9: #0575bd; --blue-10: #045f98; --blue-11: #044e7e; --blue-12: #033960; /* Slate/gray scale */ --slate-1: #fcfdfe; --slate-2: #f7f9fb; --slate-3: #f0f3f7; --slate-4: #e7edf3; --slate-5: #dfe6ee; --slate-6: #d2dbe6; --slate-7: #bcc8d6; --slate-8: #9fb0c2; --slate-9: #7a8ca3; --slate-10: #5e6f84; --slate-11: #485768; --slate-12: #2d3742; /* Semantic scales */ --green-9: #74c365; --red-9: #e1462c; --amber-9: #ffda44; } /* Platform token compatibility: map platform variables to our theme tokens */ :root, .js-theme-content-region { --theme-colors__primary: var(--cmw-primary); --theme-colors__primary_fade: var(--cmw-primary-fade); --theme-colors__primary_fadest: var(--cmw-primary-fadest); --theme-colors__primary_strong: var(--cmw-primary-dark); --theme-colors__primary_strongest: var(--cmw-primary-strongest, var(--cmw-primary-dark)); --theme-colors__primary-hsl: var(--cmw-primary-hsl); --theme-colors__primary-txt: var(--cmw-white); --theme-colors__secondary: var(--cmw-secondary, #f5f5f5); --theme-colors__secondary_fade: var(--cmw-secondary-fade, #fff); --theme-colors__secondary_fadest: var(--cmw-secondary-fadest, #fff); --theme-colors__secondary_strong: var(--cmw-secondary-strong, #dcdcdc); --theme-colors__secondary_strongest: var(--cmw-secondary-strongest, #c2c2c2); --theme-colors__secondary-txt: var(--cmw-text); --theme-colors__secondary-txt_hover: var(--cmw-primary); --theme-colors__text: var(--cmw-text); --theme-colors__text_fade: var(--cmw-text-fade); --theme-colors__text_fadest: var(--cmw-text-fadest); --theme-colors__text_strong: var(--cmw-text-strong); --theme-colors__link: var(--cmw-link); --theme-colors__link_fade: var(--cmw-link-fade); --theme-colors__link_fadest: var(--cmw-link-fadest); --theme-colors__link_strong: var(--cmw-link-strong); --theme-colors__highlight: var(--cmw-highlight); --theme-colors__highlight-txt: var(--cmw-highlight-text); --theme-colors__background: var(--cmw-surface-alt); --theme-colors__background-txt: var(--cmw-primary); --theme-colors__main: var(--cmw-main); --theme-colors__main_fade: var(--cmw-main-fade, #efefef); --theme-colors__main_fadest: var(--cmw-main-fadest, #f5f5f5); --theme-colors__main_strong: var(--cmw-main-strong, #e6e6e6); --theme-colors__main_strongest: var(--cmw-main-strongest, #c1c1c1); --theme-colors__warning: var(--cmw-warning); --theme-colors__warning-txt: var(--cmw-warning-text); --theme-colors__error: var(--cmw-error); --theme-colors__error-txt: var(--cmw-error-text, var(--cmw-white)); --theme-colors__success: var(--cmw-success); --theme-colors__success-txt: var(--cmw-success-text, var(--cmw-white)); --link-color: var(--theme-colors__primary); --link-hover-color: var(--theme-colors__primary_fade); } /* P3 gamut overrides when supported */ @supports (color: color(display-p3 1 1 1)) { :root { --blue-9: color(display-p3 0.023 0.47 0.75); --blue-10: color(display-p3 0.02 0.39 0.59); --slate-9: color(display-p3 0.47 0.55 0.64); --slate-12: color(display-p3 0.18 0.21 0.26); --green-9: color(display-p3 0.44 0.72 0.39); --red-9: color(display-p3 0.86 0.36 0.22); --amber-9: color(display-p3 0.98 0.85 0.27); } } /* Map core tokens (brand) */ :root { /* Brand blue */ --cmw-primary: #3698D4; --cmw-primary-dark: #2B7DB1; --cmw-primary-fade: #5EB1EF; --cmw-primary-fadest: #8ECFF6; --cmw-primary-hsl: 203, 65%, 52%; /* Text and surfaces (keep from scale) */ --cmw-text: var(--slate-9); --cmw-text-strong: var(--slate-12); --cmw-border: var(--slate-4); --cmw-border-strong: var(--slate-6); --cmw-surface-alt: var(--slate-1); /* Semantics */ --cmw-success: var(--green-9); --cmw-error: var(--red-9); --cmw-warning: #F79437; } /* Optional: font-face declarations matching platform (paths must exist to take effect) */ @font-face { font-family: OpenSans; src: local('Open Sans'), url('/gradio_api/file=resources/fonts/OpenSans/OpenSans-Regular.ttf') format('truetype'); font-weight: 400; font-display: fallback; } @font-face { font-family: OpenSans; src: local('Open Sans Italic'), url('/gradio_api/file=resources/fonts/OpenSans/OpenSans-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: fallback; } @font-face { font-family: OpenSans; src: local('Open Sans Medium'), url('/gradio_api/file=resources/fonts/OpenSans/OpenSans-Medium.ttf') format('truetype'); font-weight: 500; font-display: fallback; } @font-face { font-family: OpenSans; src: local('Open Sans Light'), url('/gradio_api/file=resources/fonts/OpenSans/OpenSans-Light.ttf') format('truetype'); font-weight: 300; font-display: fallback; } @font-face { font-family: OpenSans; src: local('Open Sans Bold'), url('/gradio_api/file=resources/fonts/OpenSans/OpenSans-Bold.ttf') format('truetype'); font-weight: 600; font-display: fallback; } /* App container */ .gradio-container, body { background: var(--cmw-surface) !important; color: var(--cmw-text) !important; font-weight: var(--cmw-font-weight-normal); font-family: var(--cmw-font-family); font-size: var(--cmw-font-size); } /* Headings */ .gradio-container h1, .gradio-container h2, .gradio-container h3, .gradio-container h4, .gradio-container h5, .gradio-container h6 { color: var(--cmw-text-strong) !important; font-weight: 600; line-height: 1.25; border: none !important; background: transparent !important; } .gradio-container .prose, .gradio-container .prose .md, .gradio-container [data-testid="markdown"], .gradio-container .md { border: none !important; box-shadow: none !important; background: transparent !important; } /* Ensure hero title block has no border/shadow/background */ .gradio-container .block.padded.hero-title, .gradio-container .hero-title { border: none !important; box-shadow: none !important; background: transparent !important; } .gradio-container .prose h1 { font-size: 28px; } .gradio-container .prose h2 { font-size: 22px; } .gradio-container .prose h3 { font-size: 18px; } /* Logo + title alignment (matches platform header look) */ .gradio-container .prose h1:first-of-type, .gradio-container h1:first-of-type { display: flex; align-items: center; gap: var(--cmw-logo-gap); color: var(--cmw-primary) !important; font-weight: 500; border: none !important; box-shadow: none !important; } .gradio-container h1:first-of-type::before { content: ''; display: inline-block; width: auto; height: var(--cmw-logo-height); aspect-ratio: 7 / 2; background-image: var(--cmw-logo-url); background-repeat: no-repeat; background-size: contain; background-position: left center; border: none !important; } @media (max-width: 640px) { .gradio-container h1:first-of-type::before { height: 22px; } } /* Tabs: active tab filled primary, others bordered */ .gradio-container .tab-nav { border-bottom: 1px solid var(--cmw-border) !important; gap: var(--cmw-tab-gap) !important; justify-content: flex-start !important; padding: var(--cmw-space-2) !important; } /* Tab button styling for Gradio tabs */ .gradio-container .tab-nav button { border: 1px solid var(--cmw-border) !important; /* passive tabs: no fill */ background: transparent !important; color: var(--cmw-text) !important; border-radius: var(--cmw-tab-radius) !important; padding: var(--cmw-tab-padding-x) !important; height: var(--cmw-tab-height) !important; line-height: calc(var(--cmw-tab-height) - 2px) !important; font-weight: var(--cmw-tab-font-weight) !important; margin-bottom: -1px !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; text-decoration: none !important; transition: all 0.2s ease-in-out !important; cursor: pointer !important; } /* Active tab state */ .gradio-container .tab-nav button[aria-selected="true"] { background: var(--cmw-primary) !important; /* active tabs: fill only, no border */ border-color: transparent !important; color: var(--cmw-white) !important; } /* Hover state for inactive tabs */ .gradio-container .tab-nav button[aria-selected="false"]:hover { background: var(--cmw-primary-fade) !important; color: var(--cmw-white) !important; } /* Tab panel content */ .gradio-container .tab-panel, .gradio-container [role="tabpanel"], .gradio-container .tab-content { padding: var(--cmw-space-4) !important; background: var(--cmw-surface) !important; border: 1px solid var(--cmw-border) !important; border-top: none !important; border-radius: 0 0 var(--cmw-radius-md) var(--cmw-radius-md) !important; } /* Remove inner padding for tab items explicitly when needed */ .gradio-container .tabitem[role="tabpanel"] { padding: 0 !important; } /* Chat hints master block: remove inner padding via class */ .gradio-container chat-hints, .gradio-container chat-hints.padded { padding: 0 !important; } .gradio-container .prose.chat-hints, .gradio-container .md.chat-hints, .gradio-container [data-testid="markdown"].chat-hints { margin: 0 !important; padding: 0 !important; } /* Inner padding for chat hints content (theme-driven) */ .gradio-container .prose.chat-hints > .md, .gradio-container [data-testid="markdown"].chat-hints > .md { display: block; padding: var(--cmw-chat-hints-padding-y) var(--cmw-chat-hints-padding-x) !important; } /* Two-column helper for chat hints block */ .gradio-container .prose.chat-hints .two-col, .gradio-container [data-testid="markdown"].chat-hints .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cmw-space-4); } .gradio-container .prose.chat-hints .two-col .card, .gradio-container [data-testid="markdown"].chat-hints .two-col .card { border: 1px solid var(--cmw-border); border-radius: var(--cmw-radius-md); background: var(--cmw-surface); padding: var(--cmw-space-4); box-shadow: var(--cmw-shadow-soft); } @media (max-width: 900px) { .gradio-container .prose.chat-hints .two-col, .gradio-container [data-testid="markdown"].chat-hints .two-col { grid-template-columns: 1fr; } } /* Buttons - compact toolbar-like look (CMW style) */ /* .gradio-container button:not(.tab-nav button), */ .gradio-container .btn, .gradio-container .cmw-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; /* min-width: var(--cmw-toolbar-btn-height) !important; */ /* height: var(--cmw-toolbar-btn-height) !important; */ padding: var(--cmw-toolbar-btn-padding-x) !important; /* Default: subtle fill, no visible border */ background: var(--cmw-toolbar-btn-hover-bg) !important; color: var(--cmw-primary) !important; border: 1px solid transparent !important; border-radius: var(--cmw-toolbar-btn-radius) !important; font-family: var(--cmw-font-family) !important; font-size: var(--cmw-font-size) !important; font-weight: var(--cmw-toolbar-btn-font-weight) !important; line-height: 1.3 !important; white-space: nowrap !important; text-decoration: none !important; transition: all 0.3s ease-in-out !important; } .gradio-container button.primary:not(.tab-nav button), .gradio-container button[variant="primary"]:not(.tab-nav button), .gradio-container button.secondary:not(.tab-nav button), .gradio-container button[variant="secondary"]:not(.tab-nav button), .gradio-container .cmw-button.primary, .gradio-container .cmw-button.secondary { color: var(--cmw-primary) !important; background: transparent !important; border-color: var(--cmw-border) !important; color: var(--cmw-primary) !important; } .gradio-container button:hover:not(.tab-nav button), .gradio-container .btn:hover, .gradio-container .cmw-button:hover { /* Hover colors aligned to platform tokens */ border-color: var(--theme-colors__primary) !important; background: var(--theme-colors__highlight) !important; color: var(--theme-colors__primary_strong) !important; } .gradio-container button:focus-visible:not(.tab-nav button), .gradio-container .cmw-button:focus-visible { outline: none !important; } /* Inputs */ .gradio-container input, .gradio-container textarea, .gradio-container select, .gradio-container .wrap.svelte-1y9cslw input, .gradio-container .wrap.svelte-1y9cslw textarea { border: 1px solid var(--cmw-border) !important; background: var(--cmw-surface) !important; color: var(--cmw-text-strong) !important; } .gradio-container input:focus, .gradio-container textarea:focus, .gradio-container select:focus { outline: none !important; border-color: var(--cmw-primary) !important; } /* Cards and panels */ .gradio-container .panel, .gradio-container .form, .gradio-container .block.padded, .gradio-container .box, .gradio-container .component, .gradio-container .container { background: var(--cmw-surface) !important; border: 1px solid var(--cmw-border) !important; border-radius: var(--cmw-radius-md) !important; } /* Chatbot */ .gradio-container .chatbot { background: var(--cmw-surface-alt) !important; border: 1px solid var(--cmw-border) !important; border-radius: var(--cmw-radius-md) !important; } .gradio-container .message.user { background: rgba(5,117,189,0.08) !important; } .gradio-container .message.bot { background: var(--cmw-surface) !important; } /* Links */ .gradio-container a { color: var(--cmw-link) !important; } .gradio-container a:hover { color: var(--cmw-link-strong) !important; } /* Tables */ .gradio-container table { border-color: var(--cmw-border) !important; } .gradio-container th { background: var(--cmw-surface-alt) !important; } /* Misc spacing tweaks */ .gradio-container .markdown { line-height: var(--cmw-line-height); border: none !important; background: transparent !important; } /* Model and quick-actions cards: one common border, padded; inner blocks borderless */ .gradio-container .model-card, .gradio-container .quick-actions-card, .gradio-container .hint-column { border: 1px solid var(--cmw-border) !important; border-radius: var(--cmw-radius-md) !important; background: var(--cmw-surface) !important; padding: var(--cmw-space-4) !important; gap: var(--cmw-space-3) !important; } .gradio-container .model-card > .block, .gradio-container .quick-actions-card > .block { border: none !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; } /* (Quick actions uses same styling as model-card; no extra overrides required) */ /* Removed platform alias button classes (.toolbar-btn, .btn-strong, .btn-pale) */ /* Removed tab count/overflow helpers for minimalism */ /* --- Dark theme support (Gradio toggles data-theme="dark") --- */ html[data-theme='dark'] .gradio-container, body[data-theme='dark'] .gradio-container, .dark .gradio-container { --cmw-text: #cfd6e4; --cmw-text-strong: #eef3fb; --cmw-surface: #151a21; --cmw-surface-alt: #0f141a; --cmw-main: #151a21; --cmw-border: #2a3340; --cmw-border-strong: #3a4554; --cmw-highlight: rgba(5,117,189,0.18); --cmw-highlight-text: #d8e6f5; } /* Keep primary-filled active tabs readable in dark */ html[data-theme='dark'] .gradio-container .tab-nav button[aria-selected="true"], body[data-theme='dark'] .gradio-container .tab-nav button[aria-selected="true"], .dark .gradio-container .tab-nav button[aria-selected="true"] { color: var(--cmw-white) !important; } /* --- Gradio footer (buttons + links) styled with CMW theme --- */ .gradio-container footer { display: flex !important; align-items: center !important; gap: var(--cmw-space-2) !important; padding: var(--cmw-space-3) var(--cmw-space-4) !important; border-top: 1px solid var(--cmw-border) !important; background: transparent !important; color: var(--cmw-text-fade) !important; font-size: 13px !important; } .gradio-container footer .divider { opacity: 1 !important; color: var(--cmw-border-strong) !important; margin: 0 var(--cmw-space-2) !important; user-select: none !important; } .gradio-container footer .divider.hidden, .gradio-container footer .record.hidden { display: none !important; } /* Footer actions: unify as compact toolbar-like buttons */ .gradio-container footer button, .gradio-container footer a.built-with, .gradio-container footer .show-api, .gradio-container footer .settings, .gradio-container footer .record { display: inline-flex !important; align-items: center !important; gap: var(--cmw-space-2) !important; height: var(--cmw-toolbar-btn-height) !important; padding: 0 var(--cmw-toolbar-btn-padding-x) !important; border-radius: var(--cmw-toolbar-btn-radius) !important; border: 1px solid var(--cmw-border) !important; background: transparent !important; color: var(--cmw-text) !important; text-decoration: none !important; line-height: 1 !important; cursor: pointer !important; transition: all .2s ease-in-out !important; } .gradio-container footer button:hover, .gradio-container footer a.built-with:hover, .gradio-container footer .show-api:hover, .gradio-container footer .settings:hover, .gradio-container footer .record:hover { background: var(--cmw-toolbar-btn-hover-bg) !important; border-color: var(--theme-colors__primary) !important; color: var(--theme-colors__primary_strong) !important; } .gradio-container footer button:focus-visible, .gradio-container footer a.built-with:focus-visible { outline: none !important; box-shadow: var(--cmw-shadow-focus) !important; border-color: var(--theme-colors__primary) !important; } /* Icons in footer buttons */ .gradio-container footer img { height: 1em !important; width: auto !important; margin-left: var(--cmw-space-1) !important; filter: var(--cmw-logo-shadow); } /* Specific accents */ .gradio-container footer .show-api { color: var(--cmw-primary) !important; } .gradio-container footer a.built-with { color: var(--cmw-text-fade) !important; } .gradio-container footer a.built-with:hover { color: var(--cmw-primary) !important; } /* Dark theme adjustments for footer */ html[data-theme='dark'] .gradio-container footer, body[data-theme='dark'] .gradio-container footer, .dark .gradio-container footer { border-top-color: var(--cmw-border) !important; color: var(--cmw-text) !important; } html[data-theme='dark'] .gradio-container footer button, body[data-theme='dark'] .gradio-container footer button, .dark .gradio-container footer button, html[data-theme='dark'] .gradio-container footer a.built-with, body[data-theme='dark'] .gradio-container footer a.built-with, .dark .gradio-container footer a.built-with { border-color: var(--cmw-border) !important; } /* Terminal-like styling for INIT chat (theme-aware) */ .gradio-container .terminal-chat .wrap { /* Follow theme background/border; do not override */ } .gradio-container .terminal-chat .message, .gradio-container .terminal-chat .message .text, .gradio-container .terminal-chat [data-testid="bot_message"], .gradio-container .terminal-chat [data-testid="user_message"] { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; white-space: pre-wrap !important; } /* Do not override colors/backgrounds so theme applies */ .gradio-container .terminal-chat .message.bot, .gradio-container .terminal-chat .message.user { border: none !important; } /* Reset markdown headings inside init chat to avoid huge H1/H2 */ .gradio-container .terminal-chat .prose h1, .gradio-container .terminal-chat .prose h2, .gradio-container .terminal-chat .prose h3, .gradio-container .terminal-chat .prose p, .gradio-container .terminal-chat [data-testid="markdown"] { all: unset !important; font: inherit !important; color: inherit !important; }