| css_pipeline = """ | |
| :root { | |
| color-scheme: light !important; | |
| --block-border-width: 0; | |
| --section-header-text-weight: 600; | |
| --section-header-text-size: 14px; | |
| --mono-font-family: "Roboto Mono", monospace; | |
| --body-text-size: 14px !important; | |
| --card-bg-color: #fcecd4; | |
| --card-btn-color: #D4E4FC; | |
| --card-btn-color-hover: #7DAEF6; | |
| --answer-bg-color: #f0f8ff; | |
| --hover-border-color: #121212; | |
| } | |
| .dark { | |
| --block-border-width: 0; | |
| --card-bg-color: #383127; | |
| --answer-bg-color: #1a2b3c; | |
| --hover-border-color: #ffffff; | |
| } | |
| .gradio-app { | |
| // font-family: Arial, sans-serif; | |
| } | |
| .form { | |
| box-shadow: 0 0 0 0 !important; | |
| } | |
| .head { | |
| margin-bottom: 0px; | |
| } | |
| .gradio-container { | |
| max-width: 1500px; | |
| margin: 0 auto; | |
| padding: 0 8px; | |
| } | |
| .html-container { | |
| padding: 0px 0px; | |
| margin: 4px 0px; | |
| border-radius: 12px; | |
| gap: 0px | |
| } | |
| .step-container { | |
| background-color: var(--card-bg-color); | |
| padding: 0px 0px; | |
| margin: 4px 0px; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | |
| border-radius: 12px; | |
| gap: 0px | |
| } | |
| .step-container:hover { | |
| border-color: var(--hover-border-color); | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); | |
| } | |
| .step-accordion { | |
| background-color: var(--card-bg-color); | |
| border: 0px solid #e0e0e0 !important; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| // transition: box-shadow 0.3s ease, border-color 0.3s ease; | |
| padding: 8px 8px; | |
| font-size: 12px; | |
| } | |
| .output-fields-panel { | |
| background-color: var(--card-bg-color); | |
| border: 0px solid #e0e0e0 !important; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| transition: box-shadow 0.3s ease, border-color 0.3s ease; | |
| padding: 8px 8px; | |
| font-size: 12px; | |
| } | |
| .model-submission-accordion { | |
| background-color: var(--card-bg-color); | |
| border: 0px solid #e0e0e0 !important; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| transition: box-shadow 0.3s ease, border-color 0.3s ease; | |
| font-size: 14px; | |
| } | |
| .model-submission-accordion > label-wrap { | |
| font-size: 16px; | |
| font-weight: bold !important; | |
| } | |
| .step-accordion:hover .step-name-input input { | |
| font-weight: bold; | |
| } | |
| .step-accordion > label-wrap { | |
| font-size: 14px; | |
| font-weight: bold !important; | |
| } | |
| .step-header-row { | |
| margin: 0px 0px; | |
| padding: 0px 0px; | |
| border: 0px !important; | |
| } | |
| .step-header-row form { | |
| margin: 0px 0px; | |
| padding: 0px 0px; | |
| border: 0px !important; | |
| } | |
| .step-name { | |
| margin: 0px | |
| padding: 0px 0px; | |
| // border-radius: 8px; | |
| border: 0px !important | |
| } | |
| .model-dropdown { | |
| margin: 0px | |
| padding: 0px 8px; | |
| } | |
| .model-dropdown input { | |
| font-size: 14px; | |
| padding-bottom: 2px; | |
| padding-top: 2px; | |
| } | |
| .step-name input { | |
| font-size: 14px; | |
| font-weight: bold; | |
| padding-bottom: 8px; | |
| margin-bottom: 4px; | |
| border-radius: 12px !important; | |
| } | |
| .step-controls { | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 12px; | |
| background-color: var(--card-bg-color); | |
| border-radius: 12px; | |
| padding: 0px | |
| border: 1px solid black; | |
| } | |
| .step-control-btn { | |
| background-color: var(--card-btn-color); | |
| font-size: 12px !important; | |
| color: var(--body-text-color); | |
| min-width: 36px !important; | |
| min-height: 24px !important; | |
| padding: 4px !important; | |
| margin: 8px !important; | |
| border-radius: 12px; | |
| } | |
| .step-control-btn:hover { | |
| background-color: var(--card-btn-color-hover); | |
| } | |
| .step-tabs { | |
| margin-top: 0px; | |
| padding: 0px 0px; | |
| border-radius: 0px; | |
| border: 0px | |
| background-color: transparent; | |
| } | |
| .tab-content { | |
| padding: 0px 0px; | |
| margin-bottom: 0px; | |
| border-radius: 4px; | |
| border: 0px solid #eee; | |
| background-color: transparent !important; | |
| } | |
| .fields-panel { | |
| background-color: transparent !important; | |
| gap: 5px !important; | |
| border-radius: 4px; | |
| padding: 2px; | |
| } | |
| .field-row { | |
| margin-bottom: 1px; | |
| margin-top: 1px; | |
| padding: 2px; | |
| border-radius: 8px; | |
| background-color: var(--block-background-fill) !important; | |
| border: 0px solid #eee; | |
| gap: 0px !important; | |
| } | |
| .output-field-row { | |
| margin-bottom: 1px; | |
| margin-top: 1px; | |
| padding: 2px; | |
| border-radius: 4px; | |
| background-color: var(--block-background-fill) !important; | |
| border: 0px solid #eee; | |
| gap: 0px !important; | |
| } | |
| .output-fields-header { | |
| padding: 0px 8px; | |
| } | |
| .output-fields-panel { | |
| background-color: var(--block-background-fill) !important; | |
| padding: 8px 8px; | |
| } | |
| .output-field-variable { | |
| font-family: var(--mono-font-family) !important; | |
| font-weight: 300 !important; | |
| font-size: 12px !important; | |
| padding: 8px 8px; | |
| border-radius: 4px; | |
| border: 0px solid #eee !important; | |
| } | |
| .output-field-variable span { | |
| font-size: 12px !important; | |
| } | |
| .field-type { | |
| min-width: 100px !important; | |
| } | |
| .field-name > label, .field-variable > label, .field-description > label, .field-type > label { | |
| font-size: 12px !important; | |
| } | |
| .field-name input, .field-description input, .field-type input { | |
| font-family: var(--mono-font-family) !important; | |
| font-size: 12px !important; | |
| } | |
| .field-variable input, .field-type input, .output-field-variable input { | |
| font-family: var(--mono-font-family) !important; | |
| font-size: 12px !important; | |
| padding-top: 3px; | |
| padding-bottom: 3px; | |
| } | |
| .field-name listbox, .field-variable listbox, .field-type listbox { | |
| font-family: var(--mono-font-family) !important; | |
| padding-top: 2px; | |
| padding-bottom: 2px; | |
| font-size: 12px !important; | |
| } | |
| .field-description { | |
| font-size: 12px !important; | |
| } | |
| /* Accordion button labels */ | |
| .step-accordion button.label-wrap { | |
| font-size: 14px; | |
| font-weight: bold !important; | |
| font-family: var(--mono-font-family) !important; | |
| } | |
| .step-accordion button.label-wrap.open { | |
| font-size: 14px; | |
| font-weight: bold !important; | |
| font-family: var(--mono-font-family) !important; | |
| } | |
| .button-column { | |
| margin-top: 2px; | |
| margin-bottom: 2px; | |
| padding-top: 2px; | |
| padding-bottom: 2px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 4x !important; | |
| height: 100%; | |
| } | |
| .icon-button { | |
| min-width: 28px !important; | |
| max-width: 42px !important; | |
| height: 28px !important; | |
| max-height: 42px !important; | |
| padding: 0 !important; | |
| border-radius: 4px !important; | |
| transition: background-color 0.2s ease, color 0.2s ease; | |
| } | |
| .delete-button { | |
| background-color: #ffebee !important; | |
| color: #d32f2f !important; | |
| } | |
| .delete-button:hover { | |
| background-color: #ffcdd2 !important; | |
| } | |
| .up-button, .down-button { | |
| background-color: #e3f2fd !important; | |
| color: #1976d2 !important; | |
| } | |
| .up-button:hover, .down-button:hover { | |
| background-color: #bbdefb !important; | |
| } | |
| .add-field-button { | |
| background-color: #e8f5e9 !important; | |
| color: #2e7d32 !important; | |
| } | |
| .add-field-button:hover, .add-step-button:hover { | |
| background-color: #c8e6c9 !important; | |
| } | |
| .pipeline-controls { | |
| border-top: 1px solid #eee; | |
| padding-top: 8px; | |
| } | |
| .pipeline-header { | |
| border-bottom: 1px solid #eee; | |
| padding: 8px 0px; | |
| } | |
| .pipeline-footer { | |
| border-top: 1px solid #eee; | |
| padding: 8px 0px; | |
| } | |
| .add-step-button { | |
| background-color: #e8f5e9 !important; | |
| color: #2e7d32 !important; | |
| border-radius: 12px; | |
| } | |
| .export-button { | |
| background-color: #e0f7f5 !important; | |
| color: #00796b !important; | |
| border-radius: 12px; | |
| } | |
| .export-button:hover { | |
| background-color: #b2dfdb !important; | |
| } | |
| .pipeline-preview { | |
| background-color: var(--card-bg-color); | |
| border-radius: 12px; | |
| box-shadow: 0 0 0 0 !important; | |
| } | |
| """ | |
| css_tossup = """ | |
| .token { | |
| display: inline-block; | |
| padding: 1px 3px; | |
| margin: 1px; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: background-color 0.2s; | |
| } | |
| .answer-header { | |
| font-weight: 900; | |
| font-size: 16px; | |
| padding: 8px; | |
| border-radius: 8px; | |
| background-color: var(--answer-bg-color) !important; | |
| } | |
| .answer-box textarea { | |
| font-size: 16px; | |
| padding: 8px; | |
| border-radius: 8px; | |
| background-color: var(--answer-bg-color) !important; | |
| } | |
| .token:hover, .token.highlighted { | |
| background-color: #ffcc00; | |
| } | |
| .token.guess-point { | |
| border-bottom: 3px solid; | |
| } | |
| .token.no-buzz { | |
| border-color: #6b96b3; | |
| } | |
| .token.buzz-0 { | |
| border-color: #ff4444; | |
| } | |
| .token.buzz-1 { | |
| border-color: #228b22; /* Darker and slightly muted green */ | |
| } | |
| .token-container { | |
| line-height: 1.7; | |
| padding: 5px; | |
| margin-left: 4px; | |
| margin-right: 4px; | |
| background-color: var(--answer-bg-color) !important; | |
| border-radius: 8px; | |
| margin-bottom: 10px; | |
| } | |
| """ | |