Spaces:
Sleeping
Sleeping
File size: 5,047 Bytes
dd49e6b 8d21c18 dd49e6b 8d21c18 dd49e6b 8d21c18 dd49e6b 65e5904 dd49e6b 65e5904 8d21c18 65e5904 8dca6b4 65e5904 8d21c18 65e5904 8d21c18 65e5904 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 |
/* THEME-AWARE CUSTOM CSS
This CSS block has been refactored to use Streamlit's internal theme
variables. This ensures that all custom components will automatically adapt
to both light and dark themes selected by the user in the settings menu.
*/
/* ====== Font Imports (Optional but Recommended) ====== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Fira+Code:wght@400&display=swap');
/* ====== Base & Typography ====== */
.stApp,
section[data-testid="stSidebar"],
div[data-testid="stMetricValue"],
div[data-testid="stMetricLabel"] {
font-family: 'Inter', sans-serif;
/* Uses the main text color from the current theme (light or dark) */
color: var(--text-color);
}
.kv-val {
font-family: 'Fira Code', monospace;
}
/* ====== Custom Containers: Tabs & Info Boxes ====== */
div[data-testid="stTabs"]>div[role="tablist"]+div {
min-height: 400px;
/* Uses the secondary background color, which is different in light and dark modes */
background-color: var(--secondary-background-color);
/* Border color uses a semi-transparent version of the text color for a subtle effect that works on any background */
border: 10px solid rgba(128, 128, 128, 0.2);
border-radius: 10px;
padding: 24px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.info-box {
font-size: 0.9rem;
padding: 12px 16px;
border: 1px solid rgba(128, 128, 128, 0.2);
border-radius: 10px;
background-color: var(--secondary-background-color);
}
/* ====== Key-Value Pair Styling ====== */
.kv-row {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 8px 0;
border-bottom: 1px solid rgba(128, 128, 128, 0.2);
}
.kv-row:last-child {
border-bottom: none;
}
.kv-key {
opacity: 0.7;
font-size: 0.9rem;
white-space: nowrap;
}
.kv-val {
font-size: 0.9rem;
overflow-wrap: break-word;
text-align: right;
}
/* ====== Custom Expander Styling ====== */
div.stExpander>details>summary::-webkit-details-marker,
div.stExpander>details>summary::marker,
div[data-testid="stExpander"] summary svg {
display: none !important;
}
div.stExpander>details>summary::after {
content: '↓';
font-size: 0.75rem;
font-weight: 900;
letter-spacing: 0.5px;
padding: 4px 12px;
border-radius: 999px;
/* The primary color is set in config.toml and adapted by Streamlit */
background-color: var(--primary);
color: var(--text-color);
/* Text on the primary color needs high contrast. White works well for our chosen purple. */
transition: background-color 0.2s ease-in-out;
}
div.stExpander>details>summary:hover::after {
/* Using a fixed darker shade on hover. A more advanced solution could use color-mix() in CSS. */
filter: brightness(90%);
}
/* Specialized Expander Labels */
.expander-results div[data-testid="stExpander"] summary::after {
content: "RESULTS";
background-color: #16A34A;
/* Green is universal for success */
}
div[data-testid="stExpander"] details {
content: "RESULTS";
background-color: var(--primary);
border-radius: 10px;
padding: 10px
}
.expander-advanced div[data-testid="stExpander"] summary::after {
content: "ADVANCED";
background-color: #D97706;
/* Amber is universal for warning/technical */
}
[data-testid="stExpanderDetails"] {
padding: 16px 4px 4px 4px;
background-color: transparent;
border-top: 1px solid rgba(128, 128, 128, 0.2);
margin-top: 12px;
}
/* ====== Sidebar & Metrics ====== */
section[data-testid="stSidebar"]>div:first-child {
background-color: var(--secondary-background-color);
border-right: 1px solid rgba(128, 128, 128, 0.2);
}
div[data-testid="stMetricValue"] {
font-size: 1.1rem !important;
font-weight: 500;
}
div[data-testid="stMetricLabel"] {
font-size: 0.85rem !important;
opacity: 0.8;
}
/* ====== Interactivity & Accessibility ====== */
:focus-visible {
/* The focus outline now uses the theme's primary color */
outline: 20px solid var(--primary);
outline-offset: 2px;
border-radius: 8px;
}
.st-key-csv-button,
.st-key-json-button,
.st-key-clearall-button {
display: block;
border: 1px double #1a1a1a98;
max-width: 100%;
border-radius: 8px;
}
.st-key-page-link-container {
padding: 5px;
display: inline-block;
justify-items: center;
align-self: center;
align-content: center;
border: 1px double #1a1a1a98;
border-radius: 8px;
background-color: var(--secondary-background-color);
max-width: 100%;
}
.st-key-buttons-container {
display: flex;
max-width: 100%;
}
/* .st-key-csv-button:hover,
.st-key-json-button:hover,
.st-key-clearall-button:hover {
padding: .25px;
}
.st-key-page-link {
color: var(--text-color);
text-decoration: none;
}*/ |