Spaces:
Running
Running
| """Light/dark palettes and layout CSS for the grading app.""" | |
| from __future__ import annotations | |
| # Paper & ink (light) and night clerk (dark). Pass/fail stay green/red in both. | |
| LIGHT = { | |
| "--bg": "#F5F3EE", | |
| "--bg-sidebar": "#EFECE6", | |
| "--surface": "#FFFcf7", | |
| "--surface-2": "#F3EFE7", | |
| "--text": "#1C1917", | |
| "--text-muted": "#57534E", | |
| "--border": "#D6D3CB", | |
| "--accent": "#1E3A5F", | |
| "--accent-soft": "#E4EAF1", | |
| "--start": "#C2D4E8", | |
| "--start-hover": "#B0C6DE", | |
| "--start-fg": "#1E3A5F", | |
| "--start-border": "#1E3A5F", | |
| "--pass": "#BFE8CE", | |
| "--pass-hover": "#A9DDC0", | |
| "--pass-fg": "#0F5132", | |
| "--pass-border": "#0F5132", | |
| "--fail": "#F5C4C1", | |
| "--fail-hover": "#EEB0AC", | |
| "--fail-fg": "#8A1C16", | |
| "--fail-icon": "#8A1C16", | |
| "--fail-border": "#8A1C16", | |
| "--ungraded": "#D4CFC6", | |
| "--shadow": "0 1px 2px rgba(28, 25, 23, 0.06), 0 8px 24px rgba(28, 25, 23, 0.06)", | |
| "--tip-bg": "#1C1917", | |
| "--tip-fg": "#FAFAF9", | |
| "--color-scheme": "light", | |
| } | |
| DARK = { | |
| "--bg": "#14171C", | |
| "--bg-sidebar": "#181C22", | |
| "--surface": "#1C2129", | |
| "--surface-2": "#242A33", | |
| "--text": "#E7E5E4", | |
| "--text-muted": "#A8A29E", | |
| "--border": "#2A3038", | |
| "--accent": "#9BB0C7", | |
| "--accent-soft": "#243044", | |
| "--start": "#2A4568", | |
| "--start-hover": "#355682", | |
| "--start-fg": "#E4EAF1", | |
| "--start-border": "transparent", | |
| "--pass": "#1B5E3B", | |
| "--pass-hover": "#237A4C", | |
| "--pass-fg": "#E8F8EE", | |
| "--pass-border": "transparent", | |
| "--fail": "#8F2A28", | |
| "--fail-hover": "#A43532", | |
| "--fail-fg": "#FDECEC", | |
| "--fail-icon": "#8F2A28", | |
| "--fail-border": "transparent", | |
| "--ungraded": "#3A414C", | |
| "--shadow": "0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.28)", | |
| "--tip-bg": "#0F1216", | |
| "--tip-fg": "#F5F5F4", | |
| "--color-scheme": "dark", | |
| } | |
| _LAYOUT_CSS = """ | |
| html, body, .stApp, [data-testid="stAppViewContainer"], [data-testid="stMain"], | |
| [data-testid="stHeader"], [data-testid="stToolbar"], section.main { | |
| background-color: var(--bg) !important; | |
| color: var(--text) !important; | |
| color-scheme: var(--color-scheme); | |
| } | |
| textarea, input, select { | |
| color-scheme: var(--color-scheme); | |
| } | |
| [data-testid="stHeader"] { | |
| background: var(--bg) !important; | |
| } | |
| [data-testid="stDecoration"] { | |
| background: var(--accent) !important; | |
| } | |
| [data-testid="stAppViewContainer"], | |
| [data-testid="stMain"], | |
| section.main { | |
| overflow-x: auto !important; | |
| } | |
| .block-container { | |
| padding-top: 1.6rem; | |
| padding-bottom: 3rem; | |
| max-width: calc(48.75rem + 8.25rem + 4rem); | |
| min-width: calc(48.75rem + 8.25rem + 2rem); | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .block-container:has(.grading-top-align) { | |
| padding-top: 4.1rem; | |
| } | |
| .block-container:has(.stats-page) { | |
| padding-top: 5.4rem; | |
| max-width: 70rem; | |
| min-width: 0; | |
| } | |
| [data-testid="stAppViewContainer"]:has(.stats-page) [data-testid="stHeader"] { | |
| background: transparent !important; | |
| } | |
| [data-testid="stAppViewContainer"]:has(.stats-page) [data-testid="stSidebar"], | |
| [data-testid="stAppViewContainer"]:has(.stats-page) [data-testid="stSidebarCollapsedControl"], | |
| [data-testid="stAppViewContainer"]:has(.stats-page) [data-testid="stExpandSidebarButton"], | |
| [data-testid="stAppViewContainer"]:has(.stats-page) [data-testid="collapsedControl"] { | |
| display: none !important; | |
| } | |
| [data-testid="stAppViewContainer"]:has(.stats-page) | |
| div[data-testid="stHorizontalBlock"]:has(.st-key-btn_stats_back), | |
| [data-testid="stAppViewContainer"]:has(.stats-page) | |
| div[data-testid="stHorizontalBlock"]:has(.st-key-btn_admin_back) { | |
| height: 0 !important; | |
| min-height: 0 !important; | |
| margin: 0 !important; | |
| overflow: visible !important; | |
| } | |
| .stApp iframe[height="0"], | |
| .stApp iframe[height="1"] { | |
| position: absolute !important; | |
| width: 0 !important; | |
| height: 0 !important; | |
| border: 0 !important; | |
| overflow: hidden !important; | |
| pointer-events: none !important; | |
| } | |
| [data-testid="stSidebar"] { | |
| background: var(--bg-sidebar) !important; | |
| border-right: 1px solid var(--border) !important; | |
| } | |
| [data-testid="stSidebar"] * { | |
| color: var(--text); | |
| } | |
| [data-testid="stSidebar"] .stMarkdown, | |
| [data-testid="stSidebar"] .stCaption, | |
| [data-testid="stSidebar"] label, | |
| [data-testid="stSidebar"] p, | |
| [data-testid="stSidebar"] span { | |
| color: var(--text) !important; | |
| } | |
| [data-testid="stSidebar"] .stCaption, | |
| [data-testid="stSidebar"] .stCaption p { | |
| color: var(--text-muted) !important; | |
| } | |
| [data-testid="stSidebarContent"] { | |
| padding-top: 0.75rem; | |
| } | |
| div[data-testid="stSidebarCollapseButton"], | |
| div[data-testid="stSidebarCollapsedControl"], | |
| div[data-testid="stExpandSidebarButton"], | |
| div[data-testid="collapsedControl"] { | |
| background: transparent !important; | |
| border: 0 !important; | |
| box-shadow: none !important; | |
| padding: 0 !important; | |
| } | |
| [data-testid="stSidebarCollapseButton"] button, | |
| [data-testid="stSidebarHeader"] button, | |
| [data-testid="stSidebarCollapsedControl"] button, | |
| [data-testid="stExpandSidebarButton"] button, | |
| [data-testid="collapsedControl"] button, | |
| button[data-testid="stSidebarCollapseButton"], | |
| button[data-testid="stSidebarCollapsedControl"], | |
| button[data-testid="stExpandSidebarButton"], | |
| button[data-testid="collapsedControl"] { | |
| opacity: 1 !important; | |
| visibility: visible !important; | |
| display: flex !important; | |
| width: 2.4rem !important; | |
| height: 2.4rem !important; | |
| min-height: 2.4rem !important; | |
| padding: 0 !important; | |
| border-radius: 50% !important; | |
| color: var(--text) !important; | |
| background: var(--surface) !important; | |
| background-color: var(--surface) !important; | |
| border: 1px solid var(--border) !important; | |
| box-shadow: var(--shadow) !important; | |
| } | |
| [data-testid="stSidebarCollapseButton"] button:hover, | |
| [data-testid="stSidebarHeader"] button:hover, | |
| [data-testid="stSidebarCollapsedControl"] button:hover, | |
| [data-testid="stExpandSidebarButton"] button:hover, | |
| [data-testid="collapsedControl"] button:hover, | |
| button[data-testid="stSidebarCollapseButton"]:hover, | |
| button[data-testid="stSidebarCollapsedControl"]:hover, | |
| button[data-testid="stExpandSidebarButton"]:hover, | |
| button[data-testid="collapsedControl"]:hover { | |
| color: var(--text) !important; | |
| background: var(--surface) !important; | |
| border-color: var(--accent) !important; | |
| } | |
| [data-testid="stSidebarCollapseButton"] button:focus-visible, | |
| [data-testid="stSidebarHeader"] button:focus-visible, | |
| [data-testid="stSidebarCollapsedControl"] button:focus-visible, | |
| [data-testid="stExpandSidebarButton"] button:focus-visible, | |
| [data-testid="collapsedControl"] button:focus-visible, | |
| button[data-testid="stSidebarCollapseButton"]:focus-visible, | |
| button[data-testid="stSidebarCollapsedControl"]:focus-visible, | |
| button[data-testid="stExpandSidebarButton"]:focus-visible, | |
| button[data-testid="collapsedControl"]:focus-visible { | |
| outline: 2px solid var(--accent) !important; | |
| outline-offset: 2px !important; | |
| } | |
| /* Material icons have their own Streamlit color; button color cannot override it. | |
| Share this rule across both controls, including the opener outside the sidebar. */ | |
| :is( | |
| [data-testid="stSidebarCollapseButton"], | |
| [data-testid="stSidebarHeader"] button, | |
| [data-testid="stSidebarCollapsedControl"], | |
| [data-testid="stExpandSidebarButton"], | |
| [data-testid="collapsedControl"] | |
| ) :is(svg, [data-testid="stIconMaterial"]) { | |
| fill: var(--text) !important; | |
| color: var(--text) !important; | |
| -webkit-text-fill-color: var(--text) !important; | |
| } | |
| .stApp p, .stApp li, .stApp label, .stApp .stMarkdown, .stApp .stCaption { | |
| color: var(--text); | |
| } | |
| .stApp .stCaption, .stApp .stCaption p { | |
| color: var(--text-muted) !important; | |
| } | |
| h1, h2, h3, h4, [data-testid="stHeading"] { | |
| color: var(--text) !important; | |
| letter-spacing: -0.02em; | |
| } | |
| [data-testid="stAlert"] { | |
| background: var(--surface) !important; | |
| color: var(--text) !important; | |
| border: 1px solid var(--border) !important; | |
| } | |
| [data-testid="stSidebar"] .stMarkdown p { | |
| font-size: 0.92rem; | |
| line-height: 1.5; | |
| max-width: 42ch; | |
| } | |
| hr, [data-testid="stDivider"] { | |
| border-color: var(--border) !important; | |
| } | |
| [data-testid="stTextInput"] input, | |
| [data-testid="stNumberInput"] input, | |
| [data-testid="stSelectbox"] div[data-baseweb="select"] > div, | |
| [data-testid="stSelectbox"] div[data-baseweb="select"] > div > div, | |
| [data-testid="stSelectbox"] [role="group"], | |
| [data-testid="stSelectbox"] input[role="combobox"] { | |
| background: var(--surface) !important; | |
| background-color: var(--surface) !important; | |
| color: var(--text) !important; | |
| border-color: var(--border) !important; | |
| } | |
| [data-testid="stSelectbox"] button[aria-haspopup="listbox"] { | |
| background: transparent !important; | |
| color: var(--text) !important; | |
| } | |
| [data-testid="stWidgetLabel"] p, | |
| [data-testid="stWidgetLabel"] label { | |
| color: var(--text-muted) !important; | |
| } | |
| .st-key-login_actions { | |
| display: grid !important; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1rem; | |
| align-items: stretch; | |
| } | |
| .st-key-login_fields { | |
| display: grid !important; | |
| grid-template-columns: 4fr 1fr; | |
| gap: 0.5rem 1rem; | |
| align-items: end; | |
| } | |
| .st-key-login_fields .st-key-login_username { | |
| grid-column: 1; | |
| grid-row: 1; | |
| } | |
| .st-key-login_fields .st-key-chk_test_user { | |
| grid-column: 2; | |
| grid-row: 1; | |
| padding-bottom: 0.35rem !important; | |
| } | |
| .st-key-login_fields .st-key-login_password { | |
| grid-column: 1 / -1; | |
| grid-row: 2; | |
| } | |
| .st-key-chk_test_user { | |
| padding-bottom: 0.35rem !important; | |
| } | |
| .st-key-chk_test_user label, | |
| .st-key-chk_test_user p, | |
| .st-key-chk_test_user span { | |
| font-size: 0.78rem !important; | |
| color: var(--text-muted) !important; | |
| font-weight: 500 !important; | |
| } | |
| .grading-progress { | |
| height: 0.55rem; | |
| background: var(--border); | |
| border-radius: 999px; | |
| overflow: hidden; | |
| } | |
| .grading-progress-fill { | |
| height: 100%; | |
| width: 0; | |
| background: var(--accent); | |
| border-radius: inherit; | |
| } | |
| .sidebar-gap { | |
| height: 1.35rem; | |
| } | |
| .sidebar-gap-sm { | |
| height: 0.85rem; | |
| } | |
| .sidebar-user { | |
| margin: 0; | |
| padding: 0; | |
| width: 100%; | |
| text-align: center; | |
| font-size: 0.92rem; | |
| line-height: 1.3; | |
| color: var(--text-muted); | |
| } | |
| [data-testid="stSidebar"] [data-testid="stElementContainer"]:has(.st-key-btn_signout), | |
| [data-testid="stSidebar"] [data-testid="stElementContainer"]:has(.st-key-btn_view_as_exit), | |
| [data-testid="stSidebar"] [data-testid="element-container"]:has(.st-key-btn_signout), | |
| [data-testid="stSidebar"] [data-testid="element-container"]:has(.st-key-btn_view_as_exit) { | |
| margin-bottom: 0 !important; | |
| } | |
| [data-testid="stSidebar"] [data-testid="stElementContainer"]:has(.sidebar-user), | |
| [data-testid="stSidebar"] [data-testid="element-container"]:has(.sidebar-user) { | |
| margin-top: -0.85rem !important; | |
| margin-bottom: 0 !important; | |
| width: 100% !important; | |
| } | |
| [data-testid="stSidebar"] [data-testid="stMarkdownContainer"]:has(.sidebar-user), | |
| [data-testid="stSidebar"] [data-testid="stMarkdownContainer"]:has(.sidebar-user) p { | |
| margin: 0 !important; | |
| padding: 0 !important; | |
| width: 100%; | |
| text-align: center !important; | |
| } | |
| .card-meta { | |
| margin: 0.85rem 0 2.35rem; | |
| padding: 0.75rem 0.85rem; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 0.55rem; | |
| font-size: 0.86rem; | |
| line-height: 1.45; | |
| color: var(--text-muted); | |
| } | |
| .st-key-card_meta_box { | |
| margin: 0.85rem 0 2.35rem; | |
| padding: 0; | |
| background: transparent; | |
| border: 0; | |
| } | |
| .card-meta-rest { | |
| box-sizing: border-box; | |
| padding: 0.75rem 0.85rem; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 0.55rem; | |
| font-size: 0.86rem; | |
| line-height: 1.45; | |
| color: var(--text-muted); | |
| } | |
| .card-meta-rest p { | |
| margin: 0 !important; | |
| } | |
| .card-meta div + div, | |
| .card-meta-rest div + div { | |
| margin-top: 0.2rem; | |
| } | |
| .card-meta strong, | |
| .card-meta-rest strong { | |
| color: var(--text); | |
| font-weight: 600; | |
| } | |
| .card-jump-label, | |
| .card-jump-of { | |
| font-size: 0.86rem; | |
| line-height: 1.25; | |
| color: var(--text-muted) !important; | |
| font-weight: 400; | |
| white-space: nowrap; | |
| } | |
| [data-testid="stSidebar"] [data-testid="stForm"]:has(.st-key-card_jump_to) | |
| [data-testid="stMarkdownContainer"], | |
| [data-testid="stSidebar"] [data-testid="stForm"]:has(.st-key-card_jump_to) | |
| [data-testid="stMarkdownContainer"] p { | |
| margin: 0 !important; | |
| padding: 0 !important; | |
| line-height: 1.25 !important; | |
| } | |
| .card-jump-error { | |
| background: var(--fail); | |
| color: var(--fail-fg); | |
| border: 1px solid var(--fail-border); | |
| border-radius: 0.45rem; | |
| padding: 0.4rem 0.6rem; | |
| margin-bottom: 0.45rem; | |
| font-size: 0.82rem; | |
| line-height: 1.35; | |
| } | |
| .card-jump-error-ts { | |
| display: none !important; | |
| } | |
| [data-testid="stSidebar"] [data-testid="stForm"]:has(.st-key-card_jump_to) { | |
| border: none !important; | |
| padding: 0 !important; | |
| background: transparent !important; | |
| margin-top: 0.45rem !important; | |
| width: 100% !important; | |
| } | |
| [data-testid="stSidebar"] [data-testid="stForm"]:has(.st-key-card_jump_to) | |
| [data-testid="stHorizontalBlock"] { | |
| display: flex !important; | |
| flex-wrap: nowrap !important; | |
| align-items: center !important; | |
| gap: 0.25em !important; | |
| justify-content: flex-start !important; | |
| width: 100% !important; | |
| } | |
| [data-testid="stSidebar"] [data-testid="stForm"]:has(.st-key-card_jump_to) | |
| [data-testid="stHorizontalBlock"] > [data-testid="stColumn"], | |
| [data-testid="stSidebar"] [data-testid="stForm"]:has(.st-key-card_jump_to) | |
| [data-testid="stHorizontalBlock"] > [data-testid="column"] { | |
| width: auto !important; | |
| min-width: 0 !important; | |
| max-width: none !important; | |
| flex: 0 0 auto !important; | |
| padding: 0 !important; | |
| } | |
| [data-testid="stSidebar"] [data-testid="stForm"]:has(.st-key-card_jump_to) | |
| [data-testid="stHorizontalBlock"] > [data-testid="stColumn"]:has(.st-key-btn_card_go), | |
| [data-testid="stSidebar"] [data-testid="stForm"]:has(.st-key-card_jump_to) | |
| [data-testid="stHorizontalBlock"] > [data-testid="column"]:has(.st-key-btn_card_go) { | |
| margin-left: auto !important; | |
| } | |
| [data-testid="stSidebar"] [data-testid="stForm"]:has(.st-key-card_jump_to):not(:focus-within) | |
| [data-testid="stColumn"]:has(.st-key-btn_card_go), | |
| [data-testid="stSidebar"] [data-testid="stForm"]:has(.st-key-card_jump_to):not(:focus-within) | |
| [data-testid="column"]:has(.st-key-btn_card_go) { | |
| display: none !important; | |
| } | |
| [data-testid="stSidebar"] [data-testid="stForm"]:has(.st-key-card_jump_to):not(:focus-within) .st-key-btn_card_go { | |
| display: none !important; | |
| } | |
| .st-key-card_jump_to [data-testid="stWidgetLabel"], | |
| .st-key-card_jump_to [data-testid="InputInstructions"] { | |
| display: none !important; | |
| } | |
| .st-key-card_jump_to, | |
| .st-key-card_jump_to [data-testid="stTextInput"], | |
| .st-key-card_jump_to [data-testid="stTextInputRootElement"], | |
| .st-key-card_jump_to [data-baseweb="input"], | |
| .st-key-card_jump_to [data-baseweb="base-input"] { | |
| width: fit-content !important; | |
| min-width: 0 !important; | |
| min-height: 0 !important; | |
| height: auto !important; | |
| margin: 0 !important; | |
| padding: 0 !important; | |
| } | |
| .st-key-card_jump_to [data-baseweb="input"] > div { | |
| padding: 0 !important; | |
| min-height: 0 !important; | |
| height: auto !important; | |
| } | |
| .st-key-card_jump_to input { | |
| box-sizing: content-box !important; | |
| font-size: 0.86rem !important; | |
| font-weight: 600 !important; | |
| font-variant-numeric: tabular-nums !important; | |
| color: var(--text) !important; | |
| text-align: center !important; | |
| line-height: 1.875em !important; | |
| min-height: 0 !important; | |
| height: 1.875em !important; | |
| min-width: 3ch !important; | |
| max-width: 6ch !important; | |
| width: 3ch !important; | |
| padding: 0.075em 0.18em !important; | |
| margin: 0 !important; | |
| background: var(--surface-2) !important; | |
| border: 1px solid var(--border) !important; | |
| border-radius: 0.2rem !important; | |
| field-sizing: content; | |
| } | |
| .st-key-btn_card_go button { | |
| min-height: 1.85rem !important; | |
| font-size: 0.86rem !important; | |
| font-weight: 650 !important; | |
| padding: 0.15rem 0.55rem !important; | |
| background: var(--pass) !important; | |
| color: var(--pass-fg) !important; | |
| border: 1px solid var(--pass-border) !important; | |
| } | |
| .st-key-btn_card_go button p, | |
| .st-key-btn_card_go button span { | |
| color: var(--pass-fg) !important; | |
| } | |
| .st-key-btn_card_go button:hover { | |
| background: var(--pass-hover) !important; | |
| border-color: var(--pass-border) !important; | |
| color: var(--pass-fg) !important; | |
| } | |
| .st-key-btn_card_go button:hover p, | |
| .st-key-btn_card_go button:hover span { | |
| color: var(--pass-fg) !important; | |
| } | |
| .sidebar-instructions-label { | |
| margin: 0.4rem 0 0.35rem; | |
| font-size: 0.78rem; | |
| font-weight: 650; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| color: var(--text-muted); | |
| } | |
| .sidebar-save-note { | |
| margin: 0.35rem 0 0.55rem; | |
| font-size: 0.9rem; | |
| font-style: italic; | |
| font-weight: 400; | |
| line-height: 1.5; | |
| color: var(--text); | |
| } | |
| .sidebar-instructions { | |
| font-size: 0.9rem; | |
| line-height: 1.5; | |
| color: var(--text); | |
| max-width: 42ch; | |
| } | |
| .grading-question { | |
| font-size: 1.08rem; | |
| font-weight: 400; | |
| line-height: 1.55; | |
| margin: 0; | |
| max-width: 48.75rem; | |
| box-sizing: border-box; | |
| padding: 1.15rem 1.25rem; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 0.65rem; | |
| box-shadow: var(--shadow); | |
| color: var(--text); | |
| } | |
| .grading-question strong { | |
| font-weight: 700; | |
| color: var(--text); | |
| } | |
| .grading-question em, | |
| .grading-answer em { | |
| font-style: italic; | |
| } | |
| .grading-header { | |
| margin: 0 0 1.15rem; | |
| padding-bottom: 0.85rem; | |
| max-width: 48.75rem; | |
| box-sizing: border-box; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .grading-header-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: baseline; | |
| gap: 1.25rem; | |
| flex-wrap: wrap; | |
| } | |
| .grading-term { | |
| font-family: "Source Serif 4", "Iowan Old Style", Palatino, Georgia, serif; | |
| font-style: italic; | |
| font-weight: 700; | |
| font-size: 2.15rem; | |
| letter-spacing: 0.01em; | |
| line-height: 1.15; | |
| color: var(--text); | |
| } | |
| .grading-fol { | |
| font-size: 1.85rem; | |
| font-weight: 650; | |
| letter-spacing: -0.03em; | |
| line-height: 1.2; | |
| color: var(--text); | |
| } | |
| .grading-concept { | |
| margin-top: 0.35rem; | |
| font-size: 1.55rem; | |
| font-weight: 600; | |
| letter-spacing: -0.02em; | |
| line-height: 1.25; | |
| text-align: right; | |
| color: var(--text); | |
| } | |
| .grading-answer { | |
| max-width: 48.75rem; | |
| box-sizing: border-box; | |
| padding: 1.15rem 1.25rem; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 0.65rem; | |
| box-shadow: var(--shadow); | |
| font-size: 1.0625rem; | |
| line-height: 1.65; | |
| color: var(--text); | |
| } | |
| .grading-answer strong { | |
| font-weight: 700; | |
| color: var(--text); | |
| } | |
| .grading-answer.is-unknown { | |
| font-style: italic; | |
| color: var(--text-muted); | |
| } | |
| .sidebar-fail-reasons { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.45rem; | |
| margin: 0.35rem 0 0.55rem; | |
| font-size: 0.92rem; | |
| line-height: 1.4; | |
| color: var(--text); | |
| } | |
| .sidebar-fail-reason { | |
| margin: 0; | |
| } | |
| .grading-verdict-gap { | |
| height: 1.1rem; | |
| } | |
| [data-testid="column"]:has(.grading-answer), | |
| [data-testid="stColumn"]:has(.grading-answer), | |
| [data-testid="column"]:has(.grading-verdict-anchor), | |
| [data-testid="stColumn"]:has(.grading-verdict-anchor) { | |
| max-width: 48.75rem !important; | |
| min-width: 48.75rem !important; | |
| flex: 0 0 48.75rem !important; | |
| } | |
| .grading-verdict-anchor { | |
| display: none; | |
| } | |
| div[data-testid="stHorizontalBlock"]:has(.st-key-btn_fail_completeness):has(> [data-testid="stColumn"]:nth-child(4)) { | |
| --verdict-row-gap: 1rem; | |
| display: grid !important; | |
| grid-template-columns: | |
| minmax(0, 1fr) | |
| var(--verdict-row-gap) | |
| minmax(0, 1fr) | |
| minmax(0, 0.25fr) | |
| minmax(0, 1fr) | |
| minmax(0, 0.25fr) | |
| minmax(0, 1fr); | |
| align-items: stretch !important; | |
| gap: 0 !important; | |
| flex-wrap: nowrap !important; | |
| max-width: 48.75rem; | |
| width: 100%; | |
| } | |
| div[data-testid="stHorizontalBlock"]:has(.st-key-btn_fail_completeness):has(> [data-testid="stColumn"]:nth-child(4)) | |
| > [data-testid="stColumn"], | |
| div[data-testid="stHorizontalBlock"]:has(.st-key-btn_fail_completeness):has(> [data-testid="stColumn"]:nth-child(4)) | |
| > [data-testid="column"] { | |
| width: auto !important; | |
| min-width: 0 !important; | |
| max-width: none !important; | |
| flex: none !important; | |
| } | |
| div[data-testid="stHorizontalBlock"]:has(.st-key-btn_fail_completeness):has(> [data-testid="stColumn"]:nth-child(4)) | |
| > [data-testid="stColumn"]:has(.st-key-btn_fail_completeness), | |
| div[data-testid="stHorizontalBlock"]:has(.st-key-btn_fail_completeness):has(> [data-testid="stColumn"]:nth-child(4)) | |
| > [data-testid="column"]:has(.st-key-btn_fail_completeness) { | |
| grid-column: 1 !important; | |
| } | |
| div[data-testid="stHorizontalBlock"]:has(.st-key-btn_fail_completeness):has(> [data-testid="stColumn"]:nth-child(4)) | |
| > [data-testid="stColumn"]:has(.st-key-btn_fail_relevance), | |
| div[data-testid="stHorizontalBlock"]:has(.st-key-btn_fail_completeness):has(> [data-testid="stColumn"]:nth-child(4)) | |
| > [data-testid="column"]:has(.st-key-btn_fail_relevance) { | |
| grid-column: 3 !important; | |
| } | |
| div[data-testid="stHorizontalBlock"]:has(.st-key-btn_fail_completeness):has(> [data-testid="stColumn"]:nth-child(4)) | |
| > [data-testid="stColumn"]:has(.st-key-btn_fail_other), | |
| div[data-testid="stHorizontalBlock"]:has(.st-key-btn_fail_completeness):has(> [data-testid="stColumn"]:nth-child(4)) | |
| > [data-testid="column"]:has(.st-key-btn_fail_other) { | |
| grid-column: 5 !important; | |
| } | |
| div[data-testid="stHorizontalBlock"]:has(.st-key-btn_fail_completeness):has(> [data-testid="stColumn"]:nth-child(4)) | |
| > [data-testid="stColumn"]:has(.st-key-btn_pass), | |
| div[data-testid="stHorizontalBlock"]:has(.st-key-btn_fail_completeness):has(> [data-testid="stColumn"]:nth-child(4)) | |
| > [data-testid="column"]:has(.st-key-btn_pass) { | |
| grid-column: 7 !important; | |
| } | |
| .st-key-btn_theme button, | |
| .st-key-btn_stats button { | |
| min-height: 3.4rem !important; | |
| height: 3.4rem !important; | |
| font-size: 1.05rem !important; | |
| font-weight: 650 !important; | |
| background: var(--surface) !important; | |
| color: var(--text) !important; | |
| border: 1px solid var(--border) !important; | |
| white-space: nowrap !important; | |
| } | |
| .st-key-btn_theme button:hover, | |
| .st-key-btn_stats button:hover, | |
| .st-key-btn_admin_console button:hover { | |
| background: var(--surface-2) !important; | |
| border-color: var(--accent) !important; | |
| } | |
| [data-testid="stSidebar"] div[data-testid="stHorizontalBlock"]:has(.st-key-btn_theme):has(.st-key-btn_stats) | |
| > [data-testid="stColumn"], | |
| [data-testid="stSidebar"] div[data-testid="stHorizontalBlock"]:has(.st-key-btn_theme):has(.st-key-btn_stats) | |
| > [data-testid="column"] { | |
| flex: 1 1 0 !important; | |
| width: 50% !important; | |
| min-width: 0 !important; | |
| } | |
| .st-key-btn_stats_back, | |
| .st-key-btn_stats_theme, | |
| .st-key-btn_admin_back, | |
| .st-key-btn_admin_theme { | |
| position: fixed !important; | |
| top: 1.05rem !important; | |
| z-index: 1000001 !important; | |
| width: 3.15rem !important; | |
| height: 3.15rem !important; | |
| } | |
| .st-key-btn_stats_back, | |
| .st-key-btn_admin_back { | |
| left: 1.1rem !important; | |
| } | |
| .st-key-btn_stats_theme, | |
| .st-key-btn_admin_theme { | |
| left: 4.55rem !important; | |
| } | |
| .st-key-btn_stats_back button, | |
| .st-key-btn_stats_theme button, | |
| .st-key-btn_admin_back button, | |
| .st-key-btn_admin_theme button { | |
| width: 3.15rem !important; | |
| height: 3.15rem !important; | |
| min-height: 3.15rem !important; | |
| padding: 0 !important; | |
| border-radius: 50% !important; | |
| background: var(--surface) !important; | |
| color: var(--text) !important; | |
| border: 1px solid var(--border) !important; | |
| box-shadow: var(--shadow) !important; | |
| overflow: hidden !important; | |
| display: flex !important; | |
| align-items: center !important; | |
| justify-content: center !important; | |
| gap: 0 !important; | |
| } | |
| .st-key-btn_stats_back button:hover, | |
| .st-key-btn_stats_theme button:hover, | |
| .st-key-btn_admin_back button:hover, | |
| .st-key-btn_admin_theme button:hover { | |
| background: var(--surface-2) !important; | |
| border-color: var(--accent) !important; | |
| } | |
| .st-key-btn_stats_back [data-testid="stMarkdownContainer"], | |
| .st-key-btn_stats_theme [data-testid="stMarkdownContainer"], | |
| .st-key-btn_admin_back [data-testid="stMarkdownContainer"], | |
| .st-key-btn_admin_theme [data-testid="stMarkdownContainer"] { | |
| display: none !important; | |
| } | |
| .st-key-btn_stats_back [data-testid="stIconMaterial"], | |
| .st-key-btn_stats_theme [data-testid="stIconMaterial"], | |
| .st-key-btn_admin_back [data-testid="stIconMaterial"], | |
| .st-key-btn_admin_theme [data-testid="stIconMaterial"] { | |
| font-size: 1.45rem !important; | |
| line-height: 1 !important; | |
| } | |
| .stats-page { | |
| color: var(--text); | |
| } | |
| .stats-hero { | |
| margin: 0 0 1.5rem; | |
| } | |
| .stats-hero-title { | |
| font-family: "Source Serif 4", Georgia, serif; | |
| font-style: italic; | |
| font-weight: 700; | |
| font-size: 2.15rem; | |
| letter-spacing: -0.03em; | |
| margin: 0 0 0.35rem; | |
| color: var(--text); | |
| } | |
| .stats-hero-kicker, | |
| .stats-muted, | |
| .stats-caption { | |
| margin: 0; | |
| color: var(--text-muted) !important; | |
| font-size: 0.95rem; | |
| line-height: 1.45; | |
| } | |
| .stats-caption { | |
| margin-top: 0.85rem; | |
| } | |
| .stats-panel { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 1.15rem; | |
| box-shadow: var(--shadow); | |
| padding: 1.35rem 1.45rem 1.5rem; | |
| margin-bottom: 1.15rem; | |
| } | |
| .stats-panel-you { | |
| border-color: var(--accent); | |
| background: var(--accent-soft); | |
| } | |
| .stats-panel-head { | |
| display: flex; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| gap: 1rem; | |
| margin-bottom: 1rem; | |
| } | |
| .stats-panel-head h2 { | |
| margin: 0; | |
| font-size: 1.15rem; | |
| font-weight: 700; | |
| letter-spacing: -0.02em; | |
| } | |
| .stats-kpi-row { | |
| display: grid; | |
| grid-template-columns: repeat(3, minmax(0, 1fr)); | |
| gap: 0.75rem; | |
| margin-bottom: 1rem; | |
| } | |
| .stats-kpi { | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 0.9rem; | |
| padding: 0.9rem 1rem 1rem; | |
| } | |
| .stats-panel-you .stats-kpi { | |
| background: var(--surface); | |
| } | |
| .stats-panel-you .stats-kpi-pass { | |
| background: var(--pass); | |
| } | |
| .stats-panel-you .stats-kpi-fail { | |
| background: var(--fail); | |
| } | |
| .stats-panel-you .stats-kpi-ungraded { | |
| background: var(--surface-2); | |
| } | |
| .stats-kpi-pass { | |
| border-color: var(--pass-border); | |
| background: var(--pass); | |
| } | |
| .stats-kpi-fail { | |
| border-color: var(--fail-border); | |
| background: var(--fail); | |
| } | |
| .stats-kpi-ungraded { | |
| background: var(--surface-2); | |
| } | |
| .stats-kpi-label { | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--text-muted); | |
| } | |
| .stats-kpi-pass .stats-kpi-label, | |
| .stats-kpi-pass .stats-kpi-value, | |
| .stats-kpi-pass .stats-kpi-pct { | |
| color: var(--pass-fg) !important; | |
| } | |
| .stats-kpi-fail .stats-kpi-label, | |
| .stats-kpi-fail .stats-kpi-value, | |
| .stats-kpi-fail .stats-kpi-pct { | |
| color: var(--fail-fg) !important; | |
| } | |
| .stats-kpi-value { | |
| font-size: 1.85rem; | |
| font-weight: 750; | |
| line-height: 1.15; | |
| margin: 0.2rem 0 0.15rem; | |
| color: var(--text); | |
| } | |
| .stats-kpi-pct { | |
| font-size: 0.82rem; | |
| color: var(--text-muted); | |
| } | |
| .stats-bar { | |
| display: flex; | |
| width: 100%; | |
| height: 0.95rem; | |
| border-radius: 999px; | |
| overflow: hidden; | |
| background: var(--border); | |
| } | |
| .stats-bar .seg { | |
| display: block; | |
| height: 100%; | |
| width: 0; | |
| } | |
| .stats-bar .seg-pass { | |
| background: var(--pass); | |
| } | |
| .stats-bar .seg-fail { | |
| background: var(--fail); | |
| } | |
| .stats-bar .seg-ungraded { | |
| background: var(--ungraded); | |
| } | |
| .stats-legend { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 0.85rem 1.15rem; | |
| margin: 0.65rem 0 0; | |
| } | |
| .stats-legend-chip { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| font-size: 0.82rem; | |
| color: var(--text-muted); | |
| } | |
| .stats-legend-swatch { | |
| width: 0.7rem; | |
| height: 0.7rem; | |
| border-radius: 999px; | |
| } | |
| .stats-legend-pass .stats-legend-swatch { | |
| background: var(--pass); | |
| } | |
| .stats-legend-fail .stats-legend-swatch { | |
| background: var(--fail); | |
| } | |
| .stats-legend-ungraded .stats-legend-swatch { | |
| background: var(--ungraded); | |
| } | |
| .stats-subhead { | |
| font-size: 0.78rem; | |
| font-weight: 700; | |
| letter-spacing: 0.06em; | |
| text-transform: uppercase; | |
| color: var(--text-muted); | |
| margin: 1.15rem 0 0.55rem; | |
| } | |
| .stats-reasons, | |
| .stats-juris { | |
| display: grid; | |
| gap: 0.45rem; | |
| } | |
| .stats-reason-row, | |
| .stats-juri-row { | |
| display: grid; | |
| grid-template-columns: 8.5rem minmax(0, 1fr) 3.2rem; | |
| gap: 0.65rem; | |
| align-items: center; | |
| } | |
| .stats-juri-row { | |
| grid-template-columns: minmax(8rem, 14rem) minmax(0, 1fr) 8.5rem; | |
| } | |
| .stats-reason-name, | |
| .stats-juri-name { | |
| font-size: 0.86rem; | |
| font-weight: 600; | |
| color: var(--text); | |
| } | |
| .stats-reason-n, | |
| .stats-juri-nums { | |
| font-size: 0.82rem; | |
| color: var(--text-muted); | |
| text-align: right; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .stats-reason-track { | |
| height: 0.45rem; | |
| background: var(--surface-2); | |
| border-radius: 999px; | |
| overflow: hidden; | |
| } | |
| .stats-reason-fill { | |
| height: 100%; | |
| width: 0; | |
| background: var(--fail); | |
| border-radius: inherit; | |
| } | |
| .stats-users { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); | |
| gap: 0.75rem; | |
| } | |
| .stats-user-card { | |
| background: var(--surface-2); | |
| border: 1px solid var(--border); | |
| border-radius: 0.9rem; | |
| padding: 0.85rem 0.9rem 0.95rem; | |
| cursor: pointer; | |
| transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; | |
| } | |
| .stats-user-card:hover { | |
| border-color: var(--accent); | |
| box-shadow: var(--shadow); | |
| } | |
| .stats-user-card-open { | |
| border-color: var(--accent); | |
| background: var(--accent-soft); | |
| } | |
| .stats-user-name { | |
| font-weight: 700; | |
| font-size: 0.95rem; | |
| margin-bottom: 0.55rem; | |
| color: var(--text); | |
| } | |
| .admin-user-head { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| gap: 0.35rem 0.65rem; | |
| margin-bottom: 0.65rem; | |
| } | |
| .admin-user-name { | |
| font-weight: 700; | |
| font-size: 0.95rem; | |
| color: var(--text); | |
| } | |
| .admin-user-activity { | |
| width: 100%; | |
| /* Cancel Streamlit's implicit inter-widget gap; the remaining visual gap | |
| equals the card's bottom padding and keeps this line vertically centered. */ | |
| margin: -0.27rem 0 0; | |
| font-size: 0.95rem; | |
| line-height: 1.35; | |
| color: var(--text-muted); | |
| font-style: italic; | |
| } | |
| .admin-user-trashed .admin-user-name { | |
| color: var(--text-muted); | |
| } | |
| .admin-user-badges { | |
| display: flex; | |
| gap: 0.35rem; | |
| flex-wrap: wrap; | |
| } | |
| .admin-badge { | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| letter-spacing: 0.04em; | |
| text-transform: uppercase; | |
| color: var(--text-muted); | |
| } | |
| .admin-badge-trashed { | |
| color: var(--fail-fg); | |
| } | |
| .st-key-admin_graders, | |
| .st-key-admin_testers { | |
| background: var(--surface) !important; | |
| border: 1px solid var(--border) !important; | |
| border-radius: 1.15rem !important; | |
| box-shadow: var(--shadow) !important; | |
| padding: 1.1rem 1.2rem 1.25rem !important; | |
| margin-bottom: 1.15rem !important; | |
| } | |
| [class*="st-key-admin_card_"] { | |
| background: var(--surface-2) !important; | |
| border: 1px solid var(--border) !important; | |
| border-radius: 0.9rem !important; | |
| padding: 0.85rem 0.9rem 1.67rem !important; | |
| margin-bottom: 0.15rem !important; | |
| } | |
| [class*="st-key-admin_card_"] | |
| div[data-testid="stHorizontalBlock"]:has([class*="st-key-admin_fab_"]) | |
| > [data-testid="stColumn"], | |
| [class*="st-key-admin_card_"] | |
| div[data-testid="stHorizontalBlock"]:has([class*="st-key-admin_fab_"]) | |
| > [data-testid="column"] { | |
| flex: 0 0 auto !important; | |
| width: auto !important; | |
| min-width: 3.15rem !important; | |
| } | |
| [class*="st-key-admin_fab_view_"], | |
| [class*="st-key-admin_fab_edit_"], | |
| [class*="st-key-admin_fab_trash_"] { | |
| width: 3.15rem !important; | |
| height: 3.15rem !important; | |
| } | |
| [class*="st-key-admin_fab_view_"] button, | |
| [class*="st-key-admin_fab_edit_"] button { | |
| width: 3.15rem !important; | |
| height: 3.15rem !important; | |
| min-height: 3.15rem !important; | |
| padding: 0 !important; | |
| border-radius: 50% !important; | |
| background: var(--surface) !important; | |
| color: var(--text) !important; | |
| border: 1px solid var(--border) !important; | |
| box-shadow: var(--shadow) !important; | |
| overflow: hidden !important; | |
| display: flex !important; | |
| align-items: center !important; | |
| justify-content: center !important; | |
| gap: 0 !important; | |
| } | |
| [class*="st-key-admin_fab_trash_"] button { | |
| width: 3.15rem !important; | |
| height: 3.15rem !important; | |
| min-height: 3.15rem !important; | |
| padding: 0 !important; | |
| border-radius: 50% !important; | |
| background: var(--surface) !important; | |
| color: var(--fail-icon) !important; | |
| border: 1px solid transparent !important; | |
| box-shadow: var(--shadow) !important; | |
| overflow: hidden !important; | |
| display: flex !important; | |
| align-items: center !important; | |
| justify-content: center !important; | |
| gap: 0 !important; | |
| } | |
| [class*="st-key-admin_fab_view_"] button:hover, | |
| [class*="st-key-admin_fab_edit_"] button:hover { | |
| background: var(--surface) !important; | |
| border-color: var(--accent) !important; | |
| color: var(--text) !important; | |
| } | |
| [class*="st-key-admin_fab_trash_"] button:hover { | |
| background: var(--surface) !important; | |
| border-color: transparent !important; | |
| box-shadow: var(--shadow) !important; | |
| color: var(--fail-hover) !important; | |
| } | |
| [class*="st-key-admin_fab_trash_"] button:focus-visible { | |
| outline: 2px solid var(--accent) !important; | |
| outline-offset: 2px !important; | |
| } | |
| [class*="st-key-admin_fab_view_"] [data-testid="stMarkdownContainer"], | |
| [class*="st-key-admin_fab_edit_"] [data-testid="stMarkdownContainer"], | |
| [class*="st-key-admin_fab_trash_"] [data-testid="stMarkdownContainer"] { | |
| display: none !important; | |
| } | |
| [class*="st-key-admin_fab_view_"] [data-testid="stIconMaterial"], | |
| [class*="st-key-admin_fab_edit_"] [data-testid="stIconMaterial"], | |
| [class*="st-key-admin_fab_trash_"] [data-testid="stIconMaterial"] { | |
| font-size: 1.45rem !important; | |
| line-height: 1 !important; | |
| color: inherit !important; | |
| } | |
| .st-key-admin_remove_cancel button { | |
| background: var(--surface) !important; | |
| color: var(--text) !important; | |
| border: 1px solid var(--border) !important; | |
| } | |
| .st-key-admin_remove_trash button { | |
| background: var(--surface) !important; | |
| color: var(--fail-icon) !important; | |
| border: 1px solid var(--fail-icon) !important; | |
| } | |
| .st-key-admin_remove_trash button:hover { | |
| background: var(--surface-2) !important; | |
| color: var(--fail-hover) !important; | |
| border-color: var(--fail-hover) !important; | |
| } | |
| .st-key-admin_remove_delete button { | |
| background: var(--fail) !important; | |
| color: var(--fail-fg) !important; | |
| border: 1px solid var(--fail) !important; | |
| } | |
| .st-key-admin_remove_delete button:hover { | |
| background: var(--fail-hover) !important; | |
| color: var(--fail-fg) !important; | |
| } | |
| .st-key-admin_edit_cancel button { | |
| background: var(--surface) !important; | |
| color: var(--text) !important; | |
| border: 1px solid var(--border) !important; | |
| } | |
| .st-key-admin_edit_save button { | |
| background: var(--start) !important; | |
| color: var(--start-fg) !important; | |
| border: 1px solid var(--start-border) !important; | |
| } | |
| .st-key-admin_edit_save button:disabled, | |
| .st-key-admin_edit_save button[disabled] { | |
| opacity: 0.45 !important; | |
| } | |
| [data-testid="stDialog"] > div, | |
| div[role="dialog"] { | |
| background: var(--surface) !important; | |
| color: var(--text) !important; | |
| border: 1px solid var(--border) !important; | |
| box-shadow: var(--shadow) !important; | |
| } | |
| [data-testid="stDialog"] h2, | |
| div[role="dialog"] h2, | |
| [data-testid="stDialog"] p, | |
| div[role="dialog"] p, | |
| [data-testid="stDialog"] label, | |
| div[role="dialog"] label { | |
| color: var(--text) !important; | |
| } | |
| [data-baseweb="popover"], | |
| [data-baseweb="menu"], | |
| ul[role="listbox"] { | |
| background: var(--surface) !important; | |
| color: var(--text) !important; | |
| border: 1px solid var(--border) !important; | |
| } | |
| li[role="option"] { | |
| background: var(--surface) !important; | |
| color: var(--text) !important; | |
| } | |
| li[role="option"][aria-selected="true"], | |
| li[role="option"]:hover { | |
| background: var(--surface-2) !important; | |
| } | |
| .st-key-admin_jurisdiction_select label, | |
| .st-key-admin_jurisdiction_select p, | |
| .st-key-admin_jurisdiction_select span { | |
| color: var(--text) !important; | |
| } | |
| .stats-user-card .stats-bar { | |
| height: 0.55rem; | |
| } | |
| .stats-user-nums { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-top: 0.5rem; | |
| font-size: 0.78rem; | |
| font-variant-numeric: tabular-nums; | |
| color: var(--text-muted); | |
| } | |
| .stats-num-pass { | |
| color: var(--pass-fg); | |
| } | |
| .stats-num-fail { | |
| color: var(--fail-fg); | |
| } | |
| .st-key-stats_grader_toggles { | |
| display: none !important; | |
| } | |
| .stats-panel-head .stats-muted { | |
| text-align: right; | |
| max-width: 16rem; | |
| } | |
| @media (max-width: 720px) { | |
| .stats-kpi-row { | |
| grid-template-columns: 1fr; | |
| } | |
| .stats-reason-row, | |
| .stats-juri-row { | |
| grid-template-columns: 1fr; | |
| gap: 0.25rem; | |
| } | |
| .stats-reason-n, | |
| .stats-juri-nums { | |
| text-align: left; | |
| } | |
| } | |
| .st-key-btn_jump_last_skipped button, | |
| .st-key-btn_jump_last_graded button, | |
| .st-key-btn_jump_last_viewed button, | |
| .st-key-btn_jump_furthest_viewed button { | |
| min-height: 4.6rem !important; | |
| width: 100% !important; | |
| white-space: pre-line !important; | |
| font-size: 0.82rem !important; | |
| font-weight: 650 !important; | |
| line-height: 1.2 !important; | |
| background: var(--surface) !important; | |
| color: var(--text) !important; | |
| border: 1px solid var(--border) !important; | |
| } | |
| .st-key-btn_jump_last_skipped button p, | |
| .st-key-btn_jump_last_skipped button span, | |
| .st-key-btn_jump_last_graded button p, | |
| .st-key-btn_jump_last_graded button span, | |
| .st-key-btn_jump_last_viewed button p, | |
| .st-key-btn_jump_last_viewed button span, | |
| .st-key-btn_jump_furthest_viewed button p, | |
| .st-key-btn_jump_furthest_viewed button span { | |
| white-space: pre-line !important; | |
| line-height: 1.2 !important; | |
| color: var(--text) !important; | |
| } | |
| .st-key-btn_jump_last_skipped button:hover, | |
| .st-key-btn_jump_last_graded button:hover, | |
| .st-key-btn_jump_last_viewed button:hover, | |
| .st-key-btn_jump_furthest_viewed button:hover { | |
| background: var(--surface-2) !important; | |
| border-color: var(--accent) !important; | |
| } | |
| .st-key-btn_signout button, | |
| .st-key-btn_view_as_exit button { | |
| background: transparent !important; | |
| color: var(--text-muted) !important; | |
| border: 1px solid var(--border) !important; | |
| } | |
| .st-key-btn_signout button:hover, | |
| .st-key-btn_view_as_exit button:hover { | |
| color: var(--text) !important; | |
| border-color: var(--text-muted) !important; | |
| } | |
| .st-key-btn_admin_console button { | |
| background: transparent !important; | |
| color: var(--text) !important; | |
| border: 1px solid var(--border) !important; | |
| } | |
| [data-testid="stToast"] { | |
| width: 12rem !important; | |
| max-width: 12rem !important; | |
| background: var(--surface) !important; | |
| color: var(--text) !important; | |
| border: 1px solid var(--border) !important; | |
| box-shadow: var(--shadow) !important; | |
| } | |
| [data-testid="stToast"] * { | |
| color: var(--text) !important; | |
| } | |
| button[data-testid="stBaseButton-primary"], | |
| .stButton button[kind="primary"] { | |
| background: var(--accent) !important; | |
| border-color: var(--accent) !important; | |
| color: #ffffff !important; | |
| } | |
| .st-key-btn_start, | |
| .st-key-btn_review, | |
| .st-key-btn_signin { | |
| max-width: 48.75rem; | |
| } | |
| .st-key-btn_start button, | |
| .st-key-btn_start button[kind="primary"], | |
| .st-key-btn_start button[data-testid="stBaseButton-primary"], | |
| .st-key-btn_review button, | |
| .st-key-btn_review button[kind="primary"], | |
| .st-key-btn_review button[data-testid="stBaseButton-primary"], | |
| .st-key-btn_signin button, | |
| .st-key-btn_signin button[kind="primary"], | |
| .st-key-btn_signin button[data-testid="stBaseButton-primary"], | |
| .st-key-btn_signin button[data-testid="stBaseButton-secondaryFormSubmit"], | |
| .st-key-btn_signin button[kind="primaryFormSubmit"] { | |
| min-height: 4.25rem !important; | |
| font-size: 1rem !important; | |
| font-weight: 700 !important; | |
| background-color: var(--start) !important; | |
| border: 1px solid var(--start-border) !important; | |
| color: var(--start-fg) !important; | |
| } | |
| .st-key-btn_start button p, | |
| .st-key-btn_start button span, | |
| .st-key-btn_review button p, | |
| .st-key-btn_review button span, | |
| .st-key-btn_signin button p, | |
| .st-key-btn_signin button span { | |
| color: var(--start-fg) !important; | |
| font-size: 1rem !important; | |
| font-weight: 700 !important; | |
| } | |
| .st-key-btn_start button:hover, | |
| .st-key-btn_review button:hover, | |
| .st-key-btn_signin button:hover { | |
| background-color: var(--start-hover) !important; | |
| border-color: var(--start-border) !important; | |
| color: var(--start-fg) !important; | |
| } | |
| .st-key-btn_start button:hover p, | |
| .st-key-btn_start button:hover span, | |
| .st-key-btn_review button:hover p, | |
| .st-key-btn_review button:hover span, | |
| .st-key-btn_signin button:hover p, | |
| .st-key-btn_signin button:hover span { | |
| color: var(--start-fg) !important; | |
| } | |
| .st-key-btn_register button { | |
| min-height: 4.25rem !important; | |
| font-size: 1rem !important; | |
| font-weight: 700 !important; | |
| background-color: var(--surface) !important; | |
| border: 1px solid var(--start-border) !important; | |
| color: var(--start-fg) !important; | |
| } | |
| .st-key-btn_register button p, | |
| .st-key-btn_register button span { | |
| color: var(--start-fg) !important; | |
| font-size: 1rem !important; | |
| font-weight: 700 !important; | |
| } | |
| .st-key-btn_register button:hover { | |
| background-color: var(--surface-2) !important; | |
| border-color: var(--start-border) !important; | |
| color: var(--start-fg) !important; | |
| } | |
| .st-key-btn_register button:hover p, | |
| .st-key-btn_register button:hover span { | |
| color: var(--start-fg) !important; | |
| } | |
| .st-key-btn_fail_completeness button, | |
| .st-key-btn_fail_relevance button, | |
| .st-key-btn_fail_clarity button, | |
| .st-key-btn_fail_correctness button, | |
| .st-key-btn_fail_other button { | |
| min-height: 4.25rem !important; | |
| font-size: 1rem !important; | |
| font-weight: 700 !important; | |
| border-radius: 0.45rem !important; | |
| background-color: var(--fail) !important; | |
| border: 1px solid var(--fail-border) !important; | |
| color: var(--fail-fg) !important; | |
| } | |
| .st-key-btn_fail_completeness button p, | |
| .st-key-btn_fail_completeness button span, | |
| .st-key-btn_fail_relevance button p, | |
| .st-key-btn_fail_relevance button span, | |
| .st-key-btn_fail_clarity button p, | |
| .st-key-btn_fail_clarity button span, | |
| .st-key-btn_fail_correctness button p, | |
| .st-key-btn_fail_correctness button span, | |
| .st-key-btn_fail_other button p, | |
| .st-key-btn_fail_other button span { | |
| color: var(--fail-fg) !important; | |
| font-size: 1rem !important; | |
| font-weight: 700 !important; | |
| } | |
| .st-key-btn_fail_completeness button kbd, | |
| .st-key-btn_fail_relevance button kbd, | |
| .st-key-btn_fail_clarity button kbd, | |
| .st-key-btn_fail_correctness button kbd, | |
| .st-key-btn_fail_other button kbd { | |
| font-size: 2rem !important; | |
| font-weight: 600 !important; | |
| line-height: 1 !important; | |
| } | |
| .st-key-btn_fail_completeness button:hover, | |
| .st-key-btn_fail_relevance button:hover, | |
| .st-key-btn_fail_clarity button:hover, | |
| .st-key-btn_fail_correctness button:hover, | |
| .st-key-btn_fail_other button:hover { | |
| background-color: var(--fail-hover) !important; | |
| border-color: var(--fail-border) !important; | |
| color: var(--fail-fg) !important; | |
| } | |
| .st-key-btn_fail_completeness button:hover p, | |
| .st-key-btn_fail_completeness button:hover span, | |
| .st-key-btn_fail_relevance button:hover p, | |
| .st-key-btn_fail_relevance button:hover span, | |
| .st-key-btn_fail_clarity button:hover p, | |
| .st-key-btn_fail_clarity button:hover span, | |
| .st-key-btn_fail_correctness button:hover p, | |
| .st-key-btn_fail_correctness button:hover span, | |
| .st-key-btn_fail_other button:hover p, | |
| .st-key-btn_fail_other button:hover span { | |
| color: var(--fail-fg) !important; | |
| } | |
| .st-key-btn_pass button, | |
| .st-key-btn_pass button[kind="primary"], | |
| .st-key-btn_pass button[kind="secondary"], | |
| .st-key-btn_pass button[data-testid="stBaseButton-primary"], | |
| .st-key-btn_pass button[data-testid="stBaseButton-secondary"] { | |
| min-height: 4.25rem !important; | |
| font-size: 1rem !important; | |
| font-weight: 700 !important; | |
| border-radius: 0.45rem !important; | |
| background-color: var(--pass) !important; | |
| border: 1px solid var(--pass-border) !important; | |
| color: var(--pass-fg) !important; | |
| } | |
| .st-key-btn_pass button p, | |
| .st-key-btn_pass button span { | |
| color: var(--pass-fg) !important; | |
| font-size: 1rem !important; | |
| font-weight: 700 !important; | |
| } | |
| .st-key-btn_pass button kbd { | |
| font-size: 2rem !important; | |
| font-weight: 600 !important; | |
| line-height: 1 !important; | |
| } | |
| .st-key-btn_pass button:hover { | |
| background-color: var(--pass-hover) !important; | |
| border-color: var(--pass-border) !important; | |
| color: var(--pass-fg) !important; | |
| } | |
| .st-key-btn_pass button:hover p, | |
| .st-key-btn_pass button:hover span { | |
| color: var(--pass-fg) !important; | |
| } | |
| .block-container:has(.view-as-readonly) .st-key-btn_fail_completeness button, | |
| .block-container:has(.view-as-readonly) .st-key-btn_fail_relevance button, | |
| .block-container:has(.view-as-readonly) .st-key-btn_fail_clarity button, | |
| .block-container:has(.view-as-readonly) .st-key-btn_fail_correctness button, | |
| .block-container:has(.view-as-readonly) .st-key-btn_fail_other button, | |
| .block-container:has(.view-as-readonly) .st-key-btn_pass button, | |
| .block-container:has(.view-as-readonly) .st-key-other_fail_text textarea { | |
| opacity: 0.45 !important; | |
| filter: grayscale(0.25); | |
| cursor: not-allowed !important; | |
| } | |
| .st-key-other_fail_text [data-testid="InputInstructions"], | |
| .st-key-other_fail_text [data-testid="stCaptionContainer"] { | |
| display: none !important; | |
| } | |
| .st-key-other_fail_text, | |
| .st-key-other_fail_text [data-testid="stTextArea"], | |
| .st-key-other_fail_text [data-testid="stTextAreaRootElement"], | |
| .st-key-other_fail_text [data-baseweb="textarea"] { | |
| min-height: 4.25rem !important; | |
| height: auto !important; | |
| } | |
| .st-key-other_fail_text textarea { | |
| min-height: 4.25rem !important; | |
| box-sizing: border-box !important; | |
| font-size: 1rem !important; | |
| line-height: 1.35 !important; | |
| border-radius: 0.45rem !important; | |
| resize: none !important; | |
| overflow-x: hidden !important; | |
| overflow-y: hidden !important; | |
| white-space: pre-wrap !important; | |
| word-break: break-word !important; | |
| color-scheme: var(--color-scheme) !important; | |
| background: var(--surface) !important; | |
| background-color: var(--surface) !important; | |
| color: var(--text) !important; | |
| -webkit-text-fill-color: var(--text) !important; | |
| caret-color: var(--text) !important; | |
| border: 1px solid var(--border) !important; | |
| } | |
| .st-key-other_fail_text [data-testid="stTextAreaRootElement"], | |
| .st-key-other_fail_text [data-baseweb="textarea"], | |
| .st-key-other_fail_text [data-baseweb="base-input"] { | |
| color-scheme: var(--color-scheme) !important; | |
| background: var(--surface) !important; | |
| background-color: var(--surface) !important; | |
| color: var(--text) !important; | |
| border-color: var(--border) !important; | |
| } | |
| .st-key-other_fail_text textarea::placeholder { | |
| color: var(--text-muted) !important; | |
| -webkit-text-fill-color: var(--text-muted) !important; | |
| opacity: 1 !important; | |
| } | |
| .grading-card-label { | |
| margin: 0 0 0.35rem; | |
| color: var(--text-muted); | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| font-style: italic; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| } | |
| [data-testid="column"]:has(.st-key-btn_fail_other) [data-testid="stVerticalBlock"], | |
| [data-testid="stColumn"]:has(.st-key-btn_fail_other) [data-testid="stVerticalBlock"], | |
| [data-testid="column"]:has(.st-key-btn_fail_completeness) [data-testid="stVerticalBlock"], | |
| [data-testid="stColumn"]:has(.st-key-btn_fail_completeness) [data-testid="stVerticalBlock"], | |
| [data-testid="column"]:has(.st-key-btn_fail_relevance) [data-testid="stVerticalBlock"], | |
| [data-testid="stColumn"]:has(.st-key-btn_fail_relevance) [data-testid="stVerticalBlock"] { | |
| gap: var(--verdict-row-gap, 1rem); | |
| height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| [data-testid="column"]:has(.st-key-btn_pass) [data-testid="stVerticalBlock"], | |
| [data-testid="stColumn"]:has(.st-key-btn_pass) [data-testid="stVerticalBlock"] { | |
| height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-end; | |
| } | |
| .grading-legend { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 0.35rem 0.85rem; | |
| border-radius: 0.45rem; | |
| font-size: 1rem; | |
| font-weight: 700; | |
| line-height: 1.35; | |
| } | |
| .grading-legend.is-pass { | |
| background: var(--pass); | |
| color: var(--pass-fg); | |
| border: 1px solid var(--pass-border); | |
| } | |
| .grading-legend.is-fail { | |
| background: var(--fail); | |
| color: var(--fail-fg); | |
| border: 1px solid var(--fail-border); | |
| } | |
| .grading-legend-caption { | |
| margin: 0.4rem 0 0.85rem; | |
| font-size: 1rem; | |
| line-height: 1.5; | |
| color: var(--text) !important; | |
| font-weight: 400; | |
| } | |
| .grading-graded { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.4rem; | |
| box-sizing: border-box; | |
| max-width: 48.75rem; | |
| margin-top: 0.65rem; | |
| padding: 0.35rem 0.9rem; | |
| border-radius: 0.45rem; | |
| font-size: 1rem; | |
| font-weight: 700; | |
| line-height: 1.35; | |
| text-align: center; | |
| } | |
| .grading-graded.is-pass { | |
| background: var(--pass); | |
| color: var(--pass-fg); | |
| border: 1px solid var(--pass-border); | |
| } | |
| .grading-graded.is-fail { | |
| background: var(--fail); | |
| color: var(--fail-fg); | |
| border: 1px solid var(--fail-border); | |
| } | |
| .grading-graded-icon { | |
| font-family: "Material Symbols Rounded", "Material Symbols Outlined", sans-serif; | |
| font-size: 1.15rem; | |
| font-weight: 400; | |
| font-style: normal; | |
| line-height: 1; | |
| letter-spacing: normal; | |
| font-feature-settings: "liga"; | |
| font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; | |
| color: inherit; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| div[data-testid="stHorizontalBlock"]:has(.grading-question):has(.st-key-btn_skip) { | |
| align-items: stretch !important; | |
| flex-wrap: nowrap !important; | |
| min-width: calc(48.75rem + 8.25rem + 1rem); | |
| } | |
| div[data-testid="stHorizontalBlock"]:has(.grading-question):has(.st-key-btn_skip) | |
| > [data-testid="stColumn"]:has(.grading-question), | |
| div[data-testid="stHorizontalBlock"]:has(.grading-question):has(.st-key-btn_skip) | |
| > [data-testid="column"]:has(.grading-question) { | |
| height: auto !important; | |
| min-height: auto !important; | |
| } | |
| div[data-testid="stHorizontalBlock"]:has(.grading-question):has(.st-key-btn_skip) | |
| > [data-testid="stColumn"]:has(.grading-question) | |
| [data-testid="stVerticalBlock"], | |
| div[data-testid="stHorizontalBlock"]:has(.grading-question):has(.st-key-btn_skip) | |
| > [data-testid="column"]:has(.grading-question) | |
| [data-testid="stVerticalBlock"] { | |
| height: auto !important; | |
| min-height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-start; | |
| } | |
| div[data-testid="stElementContainer"]:has(.grading-question), | |
| div[data-testid="element-container"]:has(.grading-question) { | |
| height: auto !important; | |
| flex-shrink: 0 !important; | |
| } | |
| div[data-testid="stElementContainer"]:has(.grading-answer), | |
| div[data-testid="element-container"]:has(.grading-answer) { | |
| height: auto !important; | |
| flex-shrink: 0 !important; | |
| margin-top: auto; | |
| } | |
| /* Streamlit's markdown inner flex sizes to unpadded text (~16px short of | |
| the question/answer boxes). Unwrap it so the column tracks the real boxes. */ | |
| div[data-testid="stMarkdown"]:has(.grading-question), | |
| div[data-testid="stMarkdown"]:has(.grading-answer), | |
| div[data-testid="stMarkdown"]:has(.grading-question) > div, | |
| div[data-testid="stMarkdown"]:has(.grading-answer) > div, | |
| div[data-testid="stMarkdownContainer"]:has(.grading-question), | |
| div[data-testid="stMarkdownContainer"]:has(.grading-answer) { | |
| display: contents !important; | |
| } | |
| [data-testid="column"]:has(.st-key-btn_skip), | |
| [data-testid="stColumn"]:has(.st-key-btn_skip) { | |
| flex: 0 0 8.25rem !important; | |
| max-width: 8.25rem !important; | |
| min-width: 8.25rem !important; | |
| } | |
| [data-testid="column"]:has(.st-key-btn_skip) > div, | |
| [data-testid="stColumn"]:has(.st-key-btn_skip) > div, | |
| [data-testid="column"]:has(.st-key-btn_skip) [data-testid="stVerticalBlock"], | |
| [data-testid="stColumn"]:has(.st-key-btn_skip) [data-testid="stVerticalBlock"] { | |
| height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-start; | |
| gap: 0.5rem; | |
| } | |
| .st-key-btn_undo { | |
| margin-top: auto; | |
| } | |
| .st-key-btn_undo, | |
| .st-key-btn_skip { | |
| flex: 0 0 7.75rem; | |
| width: 8.25rem; | |
| } | |
| .st-key-btn_undo button, | |
| .st-key-btn_skip button, | |
| .st-key-btn_undo button > div, | |
| .st-key-btn_skip button > div { | |
| display: flex !important; | |
| flex-direction: column !important; | |
| justify-content: center !important; | |
| align-items: center !important; | |
| } | |
| .st-key-btn_undo button, | |
| .st-key-btn_skip button { | |
| white-space: normal !important; | |
| box-sizing: border-box !important; | |
| min-height: 7.75rem !important; | |
| height: 7.75rem !important; | |
| max-width: 8.25rem !important; | |
| width: 8.25rem !important; | |
| padding: 0.55rem 0.5rem !important; | |
| font-size: 0.82rem !important; | |
| font-weight: 500 !important; | |
| line-height: 1.25 !important; | |
| text-align: center !important; | |
| background: var(--surface) !important; | |
| color: var(--text) !important; | |
| border: 1px solid var(--border) !important; | |
| } | |
| .st-key-btn_undo button *, | |
| .st-key-btn_skip button * { | |
| white-space: normal !important; | |
| } | |
| .st-key-btn_undo button p, | |
| .st-key-btn_skip button p { | |
| font-size: 0 !important; | |
| line-height: 0 !important; | |
| text-align: center !important; | |
| margin: 0 !important; | |
| } | |
| .st-key-btn_undo button p::before, | |
| .st-key-btn_skip button p::before { | |
| display: block; | |
| font-weight: 700; | |
| font-size: 1rem; | |
| line-height: 1.2; | |
| margin-bottom: 0.12rem; | |
| } | |
| .st-key-btn_undo button p::after, | |
| .st-key-btn_skip button p::after { | |
| display: block; | |
| white-space: pre-line !important; | |
| font-weight: 500; | |
| font-size: 0.82rem; | |
| line-height: 1.25; | |
| } | |
| .st-key-btn_undo button p::before { | |
| content: "Back"; | |
| } | |
| .st-key-btn_skip button p::before { | |
| content: "Skip"; | |
| } | |
| .st-key-btn_undo button p::after { | |
| content: "to previous\Aquestion"; | |
| } | |
| .st-key-btn_skip button p::after { | |
| content: "to next\Aquestion"; | |
| } | |
| .st-key-btn_undo button kbd, | |
| .st-key-btn_skip button kbd { | |
| font-size: 2rem !important; | |
| font-weight: 600 !important; | |
| line-height: 1 !important; | |
| margin-top: 0.2rem !important; | |
| } | |
| .st-key-btn_undo button:hover, | |
| .st-key-btn_skip button:hover { | |
| background: var(--surface-2) !important; | |
| border-color: var(--accent) !important; | |
| } | |
| .glossary-tip { | |
| position: relative; | |
| display: inline-block; | |
| margin: 0 0.12rem 0 0.02rem; | |
| padding: 0 0.18rem; | |
| border: 1px solid var(--border); | |
| border-radius: 999px; | |
| font-size: 0.55rem; | |
| font-weight: 600; | |
| line-height: 1.1; | |
| color: var(--text-muted); | |
| vertical-align: 0.55em; | |
| cursor: help; | |
| } | |
| .glossary-tip .glossary-bubble { | |
| visibility: hidden; | |
| opacity: 0; | |
| position: absolute; | |
| left: 0; | |
| bottom: calc(100% + 0.35rem); | |
| z-index: 1000; | |
| width: max-content; | |
| max-width: min(18rem, 70vw); | |
| padding: 0.85rem 1rem; | |
| border-radius: 0.45rem; | |
| background: var(--tip-bg); | |
| color: var(--tip-fg); | |
| font-size: 0.92rem; | |
| font-weight: 400; | |
| line-height: 1.45; | |
| text-align: left; | |
| white-space: normal; | |
| box-shadow: var(--shadow); | |
| pointer-events: none; | |
| } | |
| .glossary-tip:hover .glossary-bubble { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| /* Hide Streamlit shortcut/help portals; do not hide HoverTarget (wraps buttons). */ | |
| [data-testid="stTooltipContent"], | |
| [data-testid="stTooltipError"], | |
| [data-baseweb="tooltip"], | |
| div[role="tooltip"] { | |
| display: none !important; | |
| visibility: hidden !important; | |
| opacity: 0 !important; | |
| pointer-events: none !important; | |
| } | |
| """ | |
| # Applied only for light theme so dark placeholder contrast stays unchanged. | |
| _LIGHT_ONLY_CSS = """ | |
| [data-testid="stTextInput"] input::placeholder, | |
| [data-testid="stNumberInput"] input::placeholder, | |
| [data-testid="stTextArea"] textarea::placeholder { | |
| color: var(--text) !important; | |
| opacity: 1 !important; | |
| } | |
| """ | |
| def css_for(theme: str) -> str: | |
| """Return a full stylesheet for ``light`` or ``dark``.""" | |
| palette = DARK if theme == "dark" else LIGHT | |
| root = ";\n".join(f" {key}: {value}" for key, value in palette.items()) | |
| light_extra = _LIGHT_ONLY_CSS if theme != "dark" else "" | |
| return ( | |
| '@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,0&family=Source+Serif+4:ital,wght@1,600;1,700&display=swap");\n' | |
| f":root, .stApp, [data-testid='stSidebar'] {{\n{root};\n}}\n{_LAYOUT_CSS}{light_extra}" | |
| ) | |