Import PoC4 MCP test UI source snapshot
This commit is contained in:
devmrko
7252
poc4_active_source_20260714/apps/poc4/mcp_discovery_ui.py
Normal file
7252
poc4_active_source_20260714/apps/poc4/mcp_discovery_ui.py
Normal file
File diff suppressed because it is too large
Load Diff
226
poc4_active_source_20260714/apps/poc4/ui_theme.py
Normal file
226
poc4_active_source_20260714/apps/poc4/ui_theme.py
Normal file
@@ -0,0 +1,226 @@
|
||||
"""Cross-browser light theme primitives shared by the PoC_4 Streamlit UIs.
|
||||
|
||||
This module is presentation-only. It does not import or call runtime adapters,
|
||||
MCP clients, databases, retrieval code, or model providers.
|
||||
"""
|
||||
|
||||
from __future__ import annotations
|
||||
|
||||
|
||||
POC4_LIGHT_THEME_CSS = """
|
||||
<style id="poc4-cross-browser-light-theme">
|
||||
:root,
|
||||
html,
|
||||
body,
|
||||
#root,
|
||||
.stApp,
|
||||
[data-testid="stAppViewContainer"],
|
||||
[data-testid="stMain"] {
|
||||
color-scheme: light !important;
|
||||
background-color: #f7f8fa !important;
|
||||
color: #172033 !important;
|
||||
}
|
||||
|
||||
/* Keep native form controls independent of the browser/OS dark-mode palette. */
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
[data-baseweb="input"] input,
|
||||
[data-baseweb="textarea"] textarea {
|
||||
color-scheme: light !important;
|
||||
background-color: #ffffff !important;
|
||||
color: #172033 !important;
|
||||
-webkit-text-fill-color: #172033 !important;
|
||||
caret-color: #172033 !important;
|
||||
border-color: #aab3c2 !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder,
|
||||
[data-baseweb="input"] input::placeholder,
|
||||
[data-baseweb="textarea"] textarea::placeholder {
|
||||
color: #687386 !important;
|
||||
-webkit-text-fill-color: #687386 !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus,
|
||||
textarea:-webkit-autofill,
|
||||
textarea:-webkit-autofill:hover,
|
||||
textarea:-webkit-autofill:focus {
|
||||
-webkit-text-fill-color: #172033 !important;
|
||||
-webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
|
||||
caret-color: #172033 !important;
|
||||
}
|
||||
|
||||
select,
|
||||
select option,
|
||||
option {
|
||||
background-color: #ffffff !important;
|
||||
color: #172033 !important;
|
||||
-webkit-text-fill-color: #172033 !important;
|
||||
}
|
||||
|
||||
/* Streamlit selectbox is rendered by BaseWeb; its menu is portaled to body. */
|
||||
[data-baseweb="select"],
|
||||
[data-baseweb="select"] > div {
|
||||
color-scheme: light !important;
|
||||
background-color: #ffffff !important;
|
||||
color: #172033 !important;
|
||||
border-color: #aab3c2 !important;
|
||||
}
|
||||
|
||||
[data-baseweb="select"] input,
|
||||
[data-baseweb="select"] span,
|
||||
[data-baseweb="select"] [aria-selected] {
|
||||
color: #172033 !important;
|
||||
-webkit-text-fill-color: #172033 !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
[data-baseweb="select"] input::placeholder,
|
||||
[data-baseweb="select"] [aria-placeholder="true"],
|
||||
[data-baseweb="select"] [data-baseweb="placeholder"] {
|
||||
color: #687386 !important;
|
||||
-webkit-text-fill-color: #687386 !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
[data-baseweb="select"] svg {
|
||||
fill: #526075 !important;
|
||||
color: #526075 !important;
|
||||
}
|
||||
|
||||
[data-baseweb="popover"],
|
||||
[data-baseweb="menu"],
|
||||
[role="listbox"] {
|
||||
color-scheme: light !important;
|
||||
background-color: #ffffff !important;
|
||||
color: #172033 !important;
|
||||
border-color: #aab3c2 !important;
|
||||
}
|
||||
|
||||
[role="option"],
|
||||
[role="option"] *,
|
||||
[data-baseweb="menu"] li,
|
||||
[data-baseweb="menu"] li * {
|
||||
background-color: #ffffff !important;
|
||||
color: #172033 !important;
|
||||
-webkit-text-fill-color: #172033 !important;
|
||||
}
|
||||
|
||||
[role="option"]:hover,
|
||||
[role="option"][aria-selected="true"],
|
||||
[role="option"]:hover *,
|
||||
[role="option"][aria-selected="true"] * {
|
||||
background-color: #ffffff !important;
|
||||
color: #172033 !important;
|
||||
-webkit-text-fill-color: #172033 !important;
|
||||
}
|
||||
|
||||
input:disabled,
|
||||
textarea:disabled,
|
||||
select:disabled,
|
||||
[data-baseweb="select"][aria-disabled="true"],
|
||||
[data-baseweb="select"] > div[aria-disabled="true"],
|
||||
[data-baseweb="select"] [aria-disabled="true"] {
|
||||
background-color: #f1f3f6 !important;
|
||||
color: #5f6b7a !important;
|
||||
-webkit-text-fill-color: #5f6b7a !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
div[data-testid="stButton"] > button,
|
||||
button[data-testid="stBaseButton-primary"],
|
||||
button[kind="primary"] {
|
||||
color-scheme: light !important;
|
||||
background-color: #2256c7 !important;
|
||||
border-color: #2256c7 !important;
|
||||
color: #ffffff !important;
|
||||
-webkit-text-fill-color: #ffffff !important;
|
||||
}
|
||||
|
||||
div[data-testid="stButton"] > button *,
|
||||
button[data-testid="stBaseButton-primary"] *,
|
||||
button[kind="primary"] * {
|
||||
color: #ffffff !important;
|
||||
-webkit-text-fill-color: #ffffff !important;
|
||||
}
|
||||
|
||||
div[data-testid="stButton"] > button:hover,
|
||||
button[data-testid="stBaseButton-primary"]:hover,
|
||||
button[kind="primary"]:hover {
|
||||
background-color: #1746a2 !important;
|
||||
border-color: #1746a2 !important;
|
||||
}
|
||||
|
||||
div[data-testid="stButton"] > button:disabled,
|
||||
button[data-testid="stBaseButton-primary"]:disabled,
|
||||
button[kind="primary"]:disabled {
|
||||
background-color: #e4e8ee !important;
|
||||
border-color: #c3cad4 !important;
|
||||
color: #5f6b7a !important;
|
||||
-webkit-text-fill-color: #5f6b7a !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
div[data-testid="stButton"] > button:disabled *,
|
||||
button[data-testid="stBaseButton-primary"]:disabled *,
|
||||
button[kind="primary"]:disabled * {
|
||||
color: #5f6b7a !important;
|
||||
-webkit-text-fill-color: #5f6b7a !important;
|
||||
}
|
||||
|
||||
/* Outrank the legacy primary-label selector for non-WebKit engines too. */
|
||||
div[data-testid="stButton"]
|
||||
> button[data-testid="stBaseButton-primary"]:disabled
|
||||
[data-testid="stMarkdownContainer"],
|
||||
div[data-testid="stButton"]
|
||||
> button[data-testid="stBaseButton-primary"]:disabled
|
||||
[data-testid="stMarkdownContainer"] p,
|
||||
div[data-testid="stButton"]
|
||||
> button[data-testid="stBaseButton-primary"]:disabled
|
||||
[data-testid="stMarkdownContainer"] span {
|
||||
color: #5f6b7a !important;
|
||||
-webkit-text-fill-color: #5f6b7a !important;
|
||||
}
|
||||
|
||||
label,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
p,
|
||||
[data-testid="stMarkdownContainer"],
|
||||
[data-testid="stWidgetLabel"],
|
||||
[data-testid="stExpander"] summary,
|
||||
[data-testid="stExpander"] summary *,
|
||||
[data-testid="stExpanderDetails"],
|
||||
[data-testid="stExpanderDetails"] * {
|
||||
color: #172033;
|
||||
}
|
||||
|
||||
[data-testid="stExpander"],
|
||||
[data-testid="stVerticalBlockBorderWrapper"] {
|
||||
color-scheme: light !important;
|
||||
background-color: #ffffff !important;
|
||||
color: #172033 !important;
|
||||
border-color: #dce1e8 !important;
|
||||
}
|
||||
</style>
|
||||
"""
|
||||
|
||||
|
||||
def apply_poc4_light_theme(st: object, *, additional_css: str = "") -> None:
|
||||
"""Inject optional layout CSS followed by the authoritative light theme."""
|
||||
|
||||
st.markdown(
|
||||
additional_css + POC4_LIGHT_THEME_CSS,
|
||||
unsafe_allow_html=True,
|
||||
)
|
||||
|
||||
|
||||
__all__ = ["POC4_LIGHT_THEME_CSS", "apply_poc4_light_theme"]
|
||||
Reference in New Issue
Block a user