from __future__ import annotations from collections.abc import Iterable from gradio.themes.base import Base from gradio.themes.utils import colors, fonts, sizes # Custom CSS to style the Gradio footer as a Windows 95 taskbar WINDOWS_95_CSS = """ /* Remove transforms from parent containers that break fixed positioning */ .gradio-container, .gradio-container > *, .main, .wrap, .app, gradio-app, gradio-app > *, body > * { transform: none !important; filter: none !important; perspective: none !important; contain: none !important; will-change: auto !important; } /* Windows 95 Taskbar Footer */ footer { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important; margin: 0 !important; padding: 4px 8px !important; background: #C0C0C0 !important; border-top: 2px solid #FFFFFF !important; box-shadow: inset 0 1px 0 0 #DFDFDF, inset 0 -1px 0 0 #808080, 0 -1px 0 0 #404040 !important; justify-content: flex-start !important; gap: 8px !important; z-index: 2147483647 !important; font-family: "MS Sans Serif", Tahoma, Arial, sans-serif !important; height: auto !important; min-height: 32px !important; transform: none !important; width: 100vw !important; max-width: 100vw !important; } /* Style footer buttons like Windows 95 taskbar buttons */ footer button, footer a { background: #C0C0C0 !important; color: #000000 !important; border: none !important; padding: 4px 12px !important; margin: 0 2px !important; box-shadow: inset -1px -1px 0px 0px #808080, inset 1px 1px 0px 0px #FFFFFF, inset -2px -2px 0px 0px #404040, inset 2px 2px 0px 0px #DFDFDF !important; font-family: "MS Sans Serif", Tahoma, Arial, sans-serif !important; font-size: 12px !important; } footer button:hover, footer a:hover { color: #000000 !important; } footer button:active, footer a:active { box-shadow: inset 1px 1px 0px 0px #808080, inset -1px -1px 0px 0px #DFDFDF !important; } /* Hide the dividers */ footer .divider { display: none !important; } /* Style the images/icons */ footer img { filter: none !important; } /* Add padding to main content to account for fixed footer */ .gradio-container { padding-bottom: 50px !important; } /* Ensure footer stays fixed even in flex/grid containers */ .main, .wrap, .app { padding-bottom: 50px !important; } /* Start button style for the first button (if desired) */ footer button:first-of-type, footer a:first-of-type { font-weight: bold !important; } /* System tray style for the last elements - sunken appearance */ footer button:last-of-type, footer .settings { margin-left: auto !important; box-shadow: inset 1px 1px 0px 0px #808080, inset -1px -1px 0px 0px #FFFFFF, inset 2px 2px 0px 0px #404040, inset -2px -2px 0px 0px #DFDFDF !important; } /* API docs panel styling - gray background like Windows 95 */ .api-docs-wrap, #api-recorder-container { background: #C0C0C0 !important; } /* API name badges - navy background needs white text */ .post, h3 .post, span.post { background: #000080 !important; color: #FFFFFF !important; border-color: #000080 !important; } /* Parameter type badges in API docs - the highlight class */ .highlight, span.highlight, .code.highlight { background: #000080 !important; color: #FFFFFF !important; padding: 2px 6px !important; } /* Parameter type badges in API docs */ .type, .param-type, .parameter-type { color: #FFFFFF !important; background: #000080 !important; padding: 2px 6px !important; } /* Required/Optional badges */ span[class*="required"], span[class*="optional"], .required, .optional { color: #FFFFFF !important; } /* ===== Windows 95 Copy Button ===== */ .copy-button, button[class*="copy"], [class*="copy-button"] { background: #C0C0C0 !important; color: #000000 !important; border: none !important; border-radius: 0 !important; padding: 4px 12px !important; font-family: "MS Sans Serif", Tahoma, Arial, sans-serif !important; font-size: 12px !important; box-shadow: inset -1px -1px 0px 0px #808080, inset 1px 1px 0px 0px #FFFFFF, inset -2px -2px 0px 0px #404040, inset 2px 2px 0px 0px #DFDFDF !important; } .copy-button:hover, button[class*="copy"]:hover, [class*="copy-button"]:hover { background: #C0C0C0 !important; } .copy-button:active, button[class*="copy"]:active, [class*="copy-button"]:active { box-shadow: inset 1px 1px 0px 0px #808080, inset -1px -1px 0px 0px #DFDFDF !important; } /* Copy button icons */ .copy-button svg, button[class*="copy"] svg { color: #000000 !important; fill: #000000 !important; } /* The "Copy Page" dropdown button - be specific to avoid breaking footer */ .api-docs-wrap [class*="dropdown"] button, .api-docs-wrap .dropdown-toggle, .api-docs-wrap button[aria-haspopup="true"] { background: #C0C0C0 !important; color: #000000 !important; border: none !important; border-radius: 0 !important; box-shadow: inset -1px -1px 0px 0px #808080, inset 1px 1px 0px 0px #FFFFFF, inset -2px -2px 0px 0px #404040, inset 2px 2px 0px 0px #DFDFDF !important; } /* ===== Windows 95 Dropdown Menus ===== */ [role="menu"], [role="listbox"], .dropdown-menu, div[class*="dropdown"] > div, ul[class*="menu"], div[class*="menu"]:not(.overflow-menu) { background: #C0C0C0 !important; border: none !important; border-radius: 0 !important; padding: 2px !important; box-shadow: inset -1px -1px 0px 0px #808080, inset 1px 1px 0px 0px #FFFFFF, inset -2px -2px 0px 0px #404040, inset 2px 2px 0px 0px #DFDFDF, 4px 4px 0px 0px rgba(0,0,0,0.3) !important; } /* Dropdown menu items */ [role="menu"] button, [role="menu"] a, [role="menuitem"], .dropdown-menu button, .dropdown-menu a, div[class*="dropdown"] button, div[class*="dropdown"] a { background: #C0C0C0 !important; color: #000000 !important; border: none !important; border-radius: 0 !important; padding: 4px 24px 4px 8px !important; margin: 0 !important; box-shadow: none !important; text-align: left !important; display: block !important; width: 100% !important; } [role="menu"] button:hover, [role="menu"] a:hover, [role="menuitem"]:hover, .dropdown-menu button:hover, .dropdown-menu a:hover, div[class*="dropdown"] button:hover, div[class*="dropdown"] a:hover { background: #000080 !important; color: #FFFFFF !important; } /* Menu item descriptions/subtitles */ [role="menu"] span, [role="menu"] p, .dropdown-menu span, .dropdown-menu p { color: inherit !important; } /* Menu icons */ [role="menu"] svg, .dropdown-menu svg { color: inherit !important; fill: currentColor !important; } /* Any element using color-accent-soft as background needs white text */ [style*="color-accent-soft"], [style*="accent"] { color: #FFFFFF !important; } /* Code blocks - keep readable with white background */ pre { background: #FFFFFF !important; color: #000000 !important; box-shadow: inset 1px 1px 0px 0px #808080, inset -1px -1px 0px 0px #FFFFFF, inset 2px 2px 0px 0px #404040, inset -2px -2px 0px 0px #DFDFDF !important; } pre code, code { background: transparent !important; color: #000000 !important; } /* API name in code snippets - keep the accent color visible */ pre .api-name, code .api-name { color: #000080 !important; } /* Highlighted text in code - navy background needs white text */ pre .highlight, pre span.highlight, code .highlight, code span.highlight { background: #000080 !important; color: #FFFFFF !important; } /* String literals in code */ pre .token.string, .token.string { color: #008000 !important; } /* Syntax highlighting keywords with navy background need white text */ pre span[style*="background"], code span[style*="background"], pre .keyword, pre .builtin, pre .function-name, code .keyword, code .builtin { color: #FFFFFF !important; } /* ===== Windows 95 Style Tabs ===== */ /* Remove gap between tabs and content */ .tabs { gap: 0 !important; } /* Tab container - remove the modern underline */ .tab-container::after { display: none !important; } .tab-wrapper { padding-bottom: 0 !important; margin-bottom: -2px !important; border-bottom: none !important; background: transparent !important; z-index: 1 !important; position: relative !important; } /* Individual tab buttons - raised 3D folder tab style */ .tab-container button, .tabs button[role="tab"] { background: #C0C0C0 !important; color: #000000 !important; border: none !important; border-radius: 0 !important; padding: 4px 16px !important; margin: 0 !important; margin-right: -1px !important; position: relative !important; bottom: -2px !important; font-weight: 400 !important; /* 3D raised effect for inactive tabs */ box-shadow: inset 1px 1px 0px 0px #FFFFFF, inset -1px 0px 0px 0px #808080, inset 2px 2px 0px 0px #DFDFDF, inset -2px 0px 0px 0px #404040, 0px -1px 0px 0px #FFFFFF !important; /* Clip the bottom to show connection */ border-bottom: 2px solid #C0C0C0 !important; } /* Inactive tabs - slightly darker/recessed look */ .tab-container button:not(.selected), .tabs button[role="tab"]:not(.selected) { background: #C0C0C0 !important; border-bottom: 2px solid #808080 !important; margin-bottom: 0 !important; } /* Hover state for non-selected tabs */ .tab-container button:hover:not(.selected), .tabs button[role="tab"]:hover:not(.selected) { background: #C0C0C0 !important; } /* Selected tab - connected to content below */ .tab-container button.selected, .tabs button[role="tab"].selected, .tabs button[role="tab"][aria-selected="true"] { background: #C0C0C0 !important; color: #000000 !important; border-bottom: 2px solid #C0C0C0 !important; z-index: 2 !important; /* Full raised 3D effect */ box-shadow: inset 1px 1px 0px 0px #FFFFFF, inset -1px 0px 0px 0px #808080, inset 2px 2px 0px 0px #DFDFDF, inset -2px 0px 0px 0px #404040 !important; } /* Remove the modern accent underline from selected tab */ .tab-container button.selected::after, .tabs button[role="tab"].selected::after, .tabs button[role="tab"][aria-selected="true"]::after { display: none !important; } /* Tab content panel */ .tabs > :not(.tab-wrapper):not(style) { background: #C0C0C0 !important; border: none !important; border-top: 2px solid #808080 !important; box-shadow: inset -1px -1px 0px 0px #808080, inset 1px 0px 0px 0px #FFFFFF, inset 0px 1px 0px 0px #FFFFFF, -2px -2px 0px 0px #404040, 2px 2px 0px 0px #DFDFDF !important; padding: 8px !important; margin-top: 0 !important; } /* Overflow menu button */ .overflow-menu > button { background: #C0C0C0 !important; border: none !important; border-radius: 0 !important; box-shadow: inset -1px -1px 0px 0px #808080, inset 1px 1px 0px 0px #FFFFFF, inset -2px -2px 0px 0px #404040, inset 2px 2px 0px 0px #DFDFDF !important; } /* Overflow dropdown */ .overflow-dropdown { background: #C0C0C0 !important; border: none !important; border-radius: 0 !important; box-shadow: inset -1px -1px 0px 0px #808080, inset 1px 1px 0px 0px #FFFFFF, inset -2px -2px 0px 0px #404040, inset 2px 2px 0px 0px #DFDFDF, 2px 2px 4px rgba(0,0,0,0.3) !important; } .overflow-dropdown button { background: #C0C0C0 !important; color: #000000 !important; } .overflow-dropdown button:hover { background: #000080 !important; color: #FFFFFF !important; } .overflow-dropdown button.selected { background: #000080 !important; color: #FFFFFF !important; } /* ===== Windows 95 Scrollbars ===== */ * { scrollbar-width: auto; scrollbar-color: #C0C0C0 #DFDFDF; } *::-webkit-scrollbar { width: 16px !important; height: 16px !important; } *::-webkit-scrollbar-track { background: #DFDFDF !important; background-image: url("data:image/svg+xml,%3Csvg width='2' height='2' viewBox='0 0 2 2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h1v1H0zM1 1h1v1H1z' fill='%23C0C0C0'/%3E%3C/svg%3E") !important; background-size: 2px 2px !important; } *::-webkit-scrollbar-thumb { background: #C0C0C0 !important; border: none !important; box-shadow: inset -1px -1px 0px 0px #808080, inset 1px 1px 0px 0px #FFFFFF, inset -2px -2px 0px 0px #404040, inset 2px 2px 0px 0px #DFDFDF !important; } *::-webkit-scrollbar-button { background: #C0C0C0 !important; border: none !important; box-shadow: inset -1px -1px 0px 0px #808080, inset 1px 1px 0px 0px #FFFFFF, inset -2px -2px 0px 0px #404040, inset 2px 2px 0px 0px #DFDFDF !important; display: block !important; height: 16px !important; width: 16px !important; } /* ===== Windows 95 Tooltips ===== */ [data-tooltip], [title], .tooltip, [role="tooltip"] { --tooltip-bg: #FFFFE1 !important; --tooltip-color: #000000 !important; } /* ===== Windows 95 Selection ===== */ ::selection { background: #000080 !important; color: #FFFFFF !important; } ::-moz-selection { background: #000080 !important; color: #FFFFFF !important; } /* ===== Windows 95 Focus Ring ===== */ *:focus { outline: 1px dotted #000000 !important; outline-offset: -4px !important; } button:focus, input:focus, textarea:focus, select:focus { outline: 1px dotted #000000 !important; outline-offset: 2px !important; } /* ===== Windows 95 Disabled State ===== */ button:disabled, input:disabled, textarea:disabled, select:disabled, [disabled] { color: #808080 !important; text-shadow: 1px 1px 0px #FFFFFF !important; cursor: not-allowed !important; } /* ===== Windows 95 Progress Bar ===== */ progress, .progress-bar, [role="progressbar"] { background: #C0C0C0 !important; border: none !important; box-shadow: inset 1px 1px 0px 0px #808080, inset -1px -1px 0px 0px #FFFFFF, inset 2px 2px 0px 0px #404040, inset -2px -2px 0px 0px #DFDFDF !important; height: 20px !important; border-radius: 0 !important; } progress::-webkit-progress-bar { background: #C0C0C0 !important; border-radius: 0 !important; } progress::-webkit-progress-value { background: repeating-linear-gradient( 90deg, #000080 0px, #000080 8px, #C0C0C0 8px, #C0C0C0 10px ) !important; border-radius: 0 !important; } progress::-moz-progress-bar { background: repeating-linear-gradient( 90deg, #000080 0px, #000080 8px, #C0C0C0 8px, #C0C0C0 10px ) !important; border-radius: 0 !important; } /* ===== Windows 95 Accordion/Group Box ===== */ .accordion, details, fieldset, .group { border: none !important; box-shadow: inset 1px 1px 0px 0px #FFFFFF, inset -1px -1px 0px 0px #808080 !important; background: #C0C0C0 !important; padding: 8px !important; margin: 4px 0 !important; } /* ===== Windows 95 Dropdown/Select ===== */ select, .dropdown, [role="listbox"] { background: #FFFFFF !important; border: none !important; box-shadow: inset 1px 1px 0px 0px #808080, inset -1px -1px 0px 0px #FFFFFF, inset 2px 2px 0px 0px #404040, inset -2px -2px 0px 0px #DFDFDF !important; border-radius: 0 !important; padding: 2px 4px !important; } /* ===== Windows 95 Slider/Range ===== */ input[type="range"] { -webkit-appearance: none !important; background: transparent !important; height: 24px !important; } input[type="range"]::-webkit-slider-track { background: #C0C0C0 !important; height: 4px !important; box-shadow: inset 1px 1px 0px 0px #808080, inset -1px -1px 0px 0px #FFFFFF !important; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none !important; width: 12px !important; height: 20px !important; background: #C0C0C0 !important; border: none !important; box-shadow: inset -1px -1px 0px 0px #808080, inset 1px 1px 0px 0px #FFFFFF, inset -2px -2px 0px 0px #404040, inset 2px 2px 0px 0px #DFDFDF !important; cursor: pointer !important; margin-top: -8px !important; } /* ===== Windows 95 Labels with Icons ===== */ .label-wrap label::before, .block-label span::before { /* Could add a small icon here */ } /* ===== Windows 95 Image/Media containers ===== */ .image-container, .video-container, .gallery { box-shadow: inset 1px 1px 0px 0px #808080, inset -1px -1px 0px 0px #FFFFFF, inset 2px 2px 0px 0px #404040, inset -2px -2px 0px 0px #DFDFDF !important; } /* Exclude small icons from bezel effect */ footer img, button img, a img, svg { box-shadow: none !important; } /* ===== Windows 95 File Upload ===== */ .upload-container, .file-upload, [type="file"] { background: #C0C0C0 !important; border: 2px dashed #808080 !important; border-radius: 0 !important; } /* ===== Windows 95 Loading/Hourglass Cursor ===== */ .pending, .loading, [aria-busy="true"] { cursor: wait !important; } /* ===== Windows 95 Markdown/Prose ===== */ .prose h1, .prose h2, .prose h3, .markdown h1, .markdown h2, .markdown h3, h1, h2, h3 { color: #000000 !important; font-weight: bold !important; border-bottom: none !important; } /* ===== Windows 95 Horizontal Rule ===== */ hr { border: none !important; height: 2px !important; background: linear-gradient(to bottom, #808080 0%, #808080 50%, #FFFFFF 50%, #FFFFFF 100%) !important; margin: 8px 0 !important; } /* ===== Windows 95 Blockquote ===== */ blockquote { background: #FFFFFF !important; border-left: 4px solid #000080 !important; padding: 8px !important; margin: 8px 0 !important; box-shadow: inset 1px 1px 0px 0px #808080, inset -1px -1px 0px 0px #FFFFFF !important; } /* ===== Windows 95 Chatbot Messages ===== */ .message, .chat-message, [class*="message"] { border-radius: 0 !important; } .user-message, [class*="user"] { background: #FFFFFF !important; box-shadow: inset -1px -1px 0px 0px #808080, inset 1px 1px 0px 0px #DFDFDF !important; } .bot-message, [class*="bot"], [class*="assistant"] { background: #FFFFC0 !important; box-shadow: inset -1px -1px 0px 0px #808080, inset 1px 1px 0px 0px #DFDFDF !important; } /* ===== Windows 95 Loading Animation ===== */ @keyframes win95-loading { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } } .loading-indicator, .loader { background: repeating-linear-gradient( 90deg, #000080 0px, #000080 16px, transparent 16px, transparent 20px ) !important; background-size: 200% 100% !important; animation: win95-loading 1s linear infinite !important; } """ class Windows95Gray(colors.Color): """Custom color palette matching Windows 95 system colors.""" def __init__(self): super().__init__( c50="#FFFFFF", # Window background / highlight c100="#DFDFDF", # Light gray c200="#C0C0C0", # Button face / 3D objects (classic silver) c300="#A0A0A0", # Disabled text / inactive elements c400="#808080", # Button shadow / 3D dark shadow c500="#606060", # Dark elements c600="#404040", # Darker elements c700="#303030", # Very dark c800="#202020", # Near black c900="#000000", # Window text (black) c950="#000000", # Pure black name="win95gray", ) class Windows95Blue(colors.Color): """Windows 95 navy blue for title bars and selections.""" def __init__(self): super().__init__( c50="#E6E6FF", # Lightest blue c100="#CCCCFF", # Light blue c200="#9999FF", # Medium light blue c300="#6666FF", # Medium blue c400="#3333CC", # Blue c500="#000080", # Navy blue (active title bar) c600="#000066", # Dark navy c700="#000055", # Darker navy c800="#000044", # Very dark navy c900="#000033", # Nearly black navy c950="#000022", # Darkest navy name="win95blue", ) class Windows95Teal(colors.Color): """Windows 95 teal accent color.""" def __init__(self): super().__init__( c50="#E0FFFF", # Lightest teal c100="#B0FFFF", # Light teal c200="#80FFFF", # Medium light teal c300="#40E0E0", # Medium teal c400="#20C0C0", # Teal c500="#008080", # Classic teal (desktop default) c600="#006666", # Dark teal c700="#005555", # Darker teal c800="#004444", # Very dark teal c900="#003333", # Nearly black teal c950="#002222", # Darkest teal name="win95teal", ) # Windows 95 3D border shadow effects WIN95_SHADOW_RAISED = "inset -1px -1px 0px 0px #808080, inset 1px 1px 0px 0px #FFFFFF, inset -2px -2px 0px 0px #404040, inset 2px 2px 0px 0px #DFDFDF" WIN95_SHADOW_SUNKEN = "inset 1px 1px 0px 0px #808080, inset -1px -1px 0px 0px #FFFFFF, inset 2px 2px 0px 0px #404040, inset -2px -2px 0px 0px #DFDFDF" WIN95_SHADOW_PRESSED = "inset 1px 1px 0px 0px #808080, inset -1px -1px 0px 0px #DFDFDF" WIN95_SHADOW_ETCHED = "inset 1px 1px 0px 0px #808080, inset -1px -1px 0px 0px #FFFFFF" class Windows95(Base): """ A nostalgic theme inspired by Microsoft Windows 95. Features the classic gray interface, 3D beveled buttons, sunken input fields, and the iconic system font styling. """ def __init__( self, *, primary_hue: colors.Color | str = None, secondary_hue: colors.Color | str = None, neutral_hue: colors.Color | str = None, spacing_size: sizes.Size | str = sizes.spacing_md, radius_size: sizes.Size | str = sizes.radius_none, text_size: sizes.Size | str = sizes.text_md, font: fonts.Font | str | Iterable[fonts.Font | str] = ( "MS Sans Serif", "Tahoma", "Segoe UI", "Arial", "sans-serif", ), font_mono: fonts.Font | str | Iterable[fonts.Font | str] = ( "Fixedsys", "Consolas", "Courier New", "monospace", ), ): # Use our custom Windows 95 color palettes if primary_hue is None: primary_hue = Windows95Blue() if secondary_hue is None: secondary_hue = Windows95Teal() if neutral_hue is None: neutral_hue = Windows95Gray() super().__init__( primary_hue=primary_hue, secondary_hue=secondary_hue, neutral_hue=neutral_hue, spacing_size=spacing_size, radius_size=radius_size, text_size=text_size, font=font, font_mono=font_mono ) self.name = "windows95" super().set( # ===== Body / Background ===== # Classic gray desktop background body_background_fill="#008080", # Teal desktop body_background_fill_dark="#008080", body_text_color="#000000", body_text_color_dark="#000000", body_text_color_subdued="#808080", body_text_color_subdued_dark="#808080", body_text_weight="400", # ===== Core Element Colors ===== # Window/panel backgrounds background_fill_primary="#C0C0C0", # Silver gray background_fill_primary_dark="#C0C0C0", background_fill_secondary="#C0C0C0", background_fill_secondary_dark="#C0C0C0", # Border colors border_color_primary="#808080", border_color_primary_dark="#808080", border_color_accent="#000080", # Navy blue accent border_color_accent_dark="#000080", # Accent colors (selection, highlights) color_accent="#000080", # Navy blue color_accent_soft="#000080", # Navy blue for badges/tags color_accent_soft_dark="#000080", # ===== Links ===== link_text_color="#0000FF", # Classic blue links link_text_color_dark="#0000FF", link_text_color_hover="#0000FF", link_text_color_hover_dark="#0000FF", link_text_color_active="#800080", # Purple when active link_text_color_active_dark="#800080", link_text_color_visited="#800080", # Purple visited link_text_color_visited_dark="#800080", # ===== Text Styling ===== prose_text_size="*text_md", prose_text_weight="400", prose_header_text_weight="700", code_background_fill="#FFFFFF", code_background_fill_dark="#FFFFFF", # ===== Shadows (3D Beveled Effects) ===== shadow_drop="none", shadow_drop_lg="none", shadow_inset=WIN95_SHADOW_SUNKEN, shadow_spread="0px", shadow_spread_dark="0px", # ===== Block/Container Styling ===== # Main content blocks with raised 3D effect block_background_fill="#C0C0C0", block_background_fill_dark="#C0C0C0", block_border_color="#808080", block_border_color_dark="#808080", block_border_width="2px", block_border_width_dark="2px", block_padding="*spacing_md", block_radius="0px", block_shadow=WIN95_SHADOW_RAISED, block_shadow_dark=WIN95_SHADOW_RAISED, # Block labels (like window title bars) block_label_background_fill="#000080", # Navy title bar block_label_background_fill_dark="#000080", block_label_text_color="#FFFFFF", # White text on title bar block_label_text_color_dark="#FFFFFF", block_label_border_color="#000080", block_label_border_color_dark="#000080", block_label_border_width="0px", block_label_border_width_dark="0px", block_label_padding="*spacing_xs *spacing_sm", block_label_margin="0", block_label_radius="0px", block_label_text_size="*text_sm", block_label_text_weight="700", block_label_shadow="none", block_label_right_radius="0px", # Block titles block_title_background_fill="transparent", block_title_background_fill_dark="transparent", block_title_text_color="#000000", block_title_text_color_dark="#000000", block_title_border_color="transparent", block_title_border_color_dark="transparent", block_title_border_width="0px", block_title_border_width_dark="0px", block_title_padding="*spacing_xs 0", block_title_radius="0px", block_title_text_size="*text_sm", block_title_text_weight="700", # Block info block_info_text_color="#000000", block_info_text_color_dark="#000000", block_info_text_size="*text_sm", block_info_text_weight="400", # ===== Panel Styling ===== panel_background_fill="#C0C0C0", panel_background_fill_dark="#C0C0C0", panel_border_color="#808080", panel_border_color_dark="#808080", panel_border_width="2px", panel_border_width_dark="2px", # ===== Layout ===== container_radius="0px", form_gap_width="1px", layout_gap="*spacing_md", section_header_text_size="*text_md", section_header_text_weight="700", embed_radius="0px", # ===== Input Fields (Sunken 3D Effect) ===== input_background_fill="#FFFFFF", # White input fields input_background_fill_dark="#FFFFFF", input_background_fill_focus="#FFFFFF", input_background_fill_focus_dark="#FFFFFF", input_background_fill_hover="#FFFFFF", input_background_fill_hover_dark="#FFFFFF", input_border_color="#808080", input_border_color_dark="#808080", input_border_color_focus="#000080", # Navy when focused input_border_color_focus_dark="#000080", input_border_color_hover="#808080", input_border_color_hover_dark="#808080", input_border_width="2px", input_border_width_dark="2px", input_padding="*spacing_sm", input_radius="0px", input_shadow=WIN95_SHADOW_SUNKEN, input_shadow_dark=WIN95_SHADOW_SUNKEN, input_shadow_focus=WIN95_SHADOW_SUNKEN, input_shadow_focus_dark=WIN95_SHADOW_SUNKEN, input_text_size="*text_md", input_text_weight="400", input_placeholder_color="#808080", input_placeholder_color_dark="#808080", # ===== Buttons (Raised 3D Effect) ===== button_border_width="2px", button_border_width_dark="2px", button_transition="none", button_transform_hover="none", button_transform_active="none", # Large buttons button_large_padding="*spacing_sm *spacing_lg", button_large_radius="0px", button_large_text_size="*text_md", button_large_text_weight="400", # Medium buttons button_medium_padding="*spacing_xs *spacing_md", button_medium_radius="0px", button_medium_text_size="*text_md", button_medium_text_weight="400", # Small buttons button_small_padding="*spacing_xs *spacing_sm", button_small_radius="0px", button_small_text_size="*text_sm", button_small_text_weight="400", # Primary button (like OK button) button_primary_background_fill="#C0C0C0", button_primary_background_fill_dark="#C0C0C0", button_primary_background_fill_hover="#C0C0C0", button_primary_background_fill_hover_dark="#C0C0C0", button_primary_border_color="#000000", button_primary_border_color_dark="#000000", button_primary_border_color_hover="#000000", button_primary_border_color_hover_dark="#000000", button_primary_text_color="#000000", button_primary_text_color_dark="#000000", button_primary_text_color_hover="#000000", button_primary_text_color_hover_dark="#000000", button_primary_shadow=WIN95_SHADOW_RAISED, button_primary_shadow_dark=WIN95_SHADOW_RAISED, button_primary_shadow_hover=WIN95_SHADOW_RAISED, button_primary_shadow_hover_dark=WIN95_SHADOW_RAISED, button_primary_shadow_active=WIN95_SHADOW_PRESSED, button_primary_shadow_active_dark=WIN95_SHADOW_PRESSED, # Secondary button button_secondary_background_fill="#C0C0C0", button_secondary_background_fill_dark="#C0C0C0", button_secondary_background_fill_hover="#C0C0C0", button_secondary_background_fill_hover_dark="#C0C0C0", button_secondary_border_color="#808080", button_secondary_border_color_dark="#808080", button_secondary_border_color_hover="#808080", button_secondary_border_color_hover_dark="#808080", button_secondary_text_color="#000000", button_secondary_text_color_dark="#000000", button_secondary_text_color_hover="#000000", button_secondary_text_color_hover_dark="#000000", button_secondary_shadow=WIN95_SHADOW_RAISED, button_secondary_shadow_dark=WIN95_SHADOW_RAISED, button_secondary_shadow_hover=WIN95_SHADOW_RAISED, button_secondary_shadow_hover_dark=WIN95_SHADOW_RAISED, button_secondary_shadow_active=WIN95_SHADOW_PRESSED, button_secondary_shadow_active_dark=WIN95_SHADOW_PRESSED, # Cancel button button_cancel_background_fill="#C0C0C0", button_cancel_background_fill_dark="#C0C0C0", button_cancel_background_fill_hover="#C0C0C0", button_cancel_background_fill_hover_dark="#C0C0C0", button_cancel_border_color="#808080", button_cancel_border_color_dark="#808080", button_cancel_border_color_hover="#808080", button_cancel_border_color_hover_dark="#808080", button_cancel_text_color="#000000", button_cancel_text_color_dark="#000000", button_cancel_text_color_hover="#000000", button_cancel_text_color_hover_dark="#000000", button_cancel_shadow=WIN95_SHADOW_RAISED, button_cancel_shadow_dark=WIN95_SHADOW_RAISED, button_cancel_shadow_hover=WIN95_SHADOW_RAISED, button_cancel_shadow_hover_dark=WIN95_SHADOW_RAISED, button_cancel_shadow_active=WIN95_SHADOW_PRESSED, button_cancel_shadow_active_dark=WIN95_SHADOW_PRESSED, # ===== Checkboxes and Radio Buttons ===== checkbox_background_color="#FFFFFF", checkbox_background_color_dark="#FFFFFF", checkbox_background_color_focus="#FFFFFF", checkbox_background_color_focus_dark="#FFFFFF", checkbox_background_color_hover="#FFFFFF", checkbox_background_color_hover_dark="#FFFFFF", checkbox_background_color_selected="#FFFFFF", checkbox_background_color_selected_dark="#FFFFFF", checkbox_border_color="#808080", checkbox_border_color_dark="#808080", checkbox_border_color_focus="#000080", checkbox_border_color_focus_dark="#000080", checkbox_border_color_hover="#808080", checkbox_border_color_hover_dark="#808080", checkbox_border_color_selected="#808080", checkbox_border_color_selected_dark="#808080", checkbox_border_radius="0px", checkbox_border_width="2px", checkbox_border_width_dark="2px", checkbox_shadow=WIN95_SHADOW_SUNKEN, # Checkbox check mark (black check) checkbox_check="url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e\")", # Radio button circle (black dot) radio_circle="url(\"data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='4'/%3e%3c/svg%3e\")", # Checkbox labels (button-like appearance) checkbox_label_background_fill="#C0C0C0", checkbox_label_background_fill_dark="#C0C0C0", checkbox_label_background_fill_hover="#C0C0C0", checkbox_label_background_fill_hover_dark="#C0C0C0", checkbox_label_background_fill_selected="#000080", # Navy when selected checkbox_label_background_fill_selected_dark="#000080", checkbox_label_border_color="#808080", checkbox_label_border_color_dark="#808080", checkbox_label_border_color_hover="#808080", checkbox_label_border_color_hover_dark="#808080", checkbox_label_border_color_selected="#000080", checkbox_label_border_color_selected_dark="#000080", checkbox_label_border_width="2px", checkbox_label_border_width_dark="2px", checkbox_label_padding="*spacing_xs *spacing_sm", checkbox_label_gap="*spacing_sm", checkbox_label_shadow=WIN95_SHADOW_RAISED, checkbox_label_text_size="*text_md", checkbox_label_text_weight="400", checkbox_label_text_color="#000000", checkbox_label_text_color_dark="#000000", checkbox_label_text_color_selected="#FFFFFF", # White on navy checkbox_label_text_color_selected_dark="#FFFFFF", # ===== Tables ===== table_border_color="#808080", table_border_color_dark="#808080", table_even_background_fill="#FFFFFF", table_even_background_fill_dark="#FFFFFF", table_odd_background_fill="#C0C0C0", table_odd_background_fill_dark="#C0C0C0", table_radius="0px", table_row_focus="#000080", table_row_focus_dark="#000080", table_text_color="#000000", table_text_color_dark="#000000", # ===== Accordion ===== accordion_text_color="#000000", accordion_text_color_dark="#000000", # ===== Slider ===== slider_color="#000080", # Navy slider slider_color_dark="#000080", # ===== Loader ===== loader_color="#000080", # Navy loading indicator loader_color_dark="#000080", # ===== Chatbot ===== chatbot_text_size="*text_md", # ===== Errors ===== error_background_fill="#FFFFFF", error_background_fill_dark="#FFFFFF", error_border_color="#FF0000", # Red error border error_border_color_dark="#FF0000", error_border_width="2px", error_border_width_dark="2px", error_text_color="#FF0000", # Red error text error_text_color_dark="#FF0000", error_icon_color="#FF0000", error_icon_color_dark="#FF0000", # ===== Stats ===== stat_background_fill="#000080", # Navy stat bars stat_background_fill_dark="#000080", )