ross/penracourses
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add series block styling with dark theme support and enhance highlight effects

Browse Source
This commit is contained in:
Ross
2026-03-09 12:02:41 +00:00
parent 42bffc0c07
commit 4788d56dec
1 changed files with 41 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
atlas/templates/atlas/case_display_block.html
+41 -11
View File
@@ -137,6 +137,31 @@
.section-icon.history { background:#198754; }
.section-icon.discussion { background:#fd7e14; }
.section-icon.report { background:#dc3545; }
/* Series block base (Bootstrap-like card appearance) */
.series-block {
display: inline-block;
vertical-align: top;
min-width: 180px;
max-width: 320px;
margin: .25rem;
padding: .5rem;
border-radius: .375rem;
background: #f8f9fa;
border: 1px solid rgba(0,0,0,0.06);
text-align: left;
}
/* Also support dark theme when site sets a theme attribute/class */
.atlas[data-bs-theme="dark"] .series-block,
[data-bs-theme="dark"] .series-block,
body[data-bs-theme="dark"] .series-block,
body.bg-dark .series-block,
.bg-dark .series-block,
.dark .series-block,
.theme-dark .series-block {
background: #071018 !important;
border-color: rgba(255,255,255,0.03) !important;
color: #e6eef8 !important;
}
.case-metadata { border-left: 1px solid #eee; padding-left: 1rem; text-align:left; }
.case-meta-item { margin-bottom: .5rem; }
.case-meta-label { font-weight:600; font-size:0.9rem; display:block; }
@@ -173,6 +198,17 @@
color: #9ec5ff !important;
border: 1px solid rgba(255,255,255,0.06);
}
/* Series block dark theme adjustments */
.series-block {
background: #071018;
border-color: rgba(255,255,255,0.03);
color: #e6eef8;
box-shadow: none;
}
.series-block a { color: inherit; }
.series-block .series-block-series-number { color: #cfe6ff; }
.series-block .series-block-popup-link a { color: #9ec5ff; }
#case-series-row { gap: .5rem; }
}
</style>
@@ -1096,18 +1132,12 @@
</script>
<style>
/* Highlight style for the series-block */
/* Highlight style for the series-block (subtle Bootstrap-like accent) */
.highlight-series {
background-color: blue;
transition: background-color 0.3s ease, border 0.3s ease;
}
/* Make series blocks act as flex items and wrap neatly on small screens */
.series-block {
display: inline-block;
vertical-align: top;
min-width: 180px;
max-width: 320px;
margin-right: 0.5rem;
background-color: rgba(13,110,253,0.04);
border: 1px solid rgba(13,110,253,0.12);
transition: box-shadow 0.18s ease, transform 0.12s ease;
box-shadow: 0 4px 12px rgba(13,110,253,0.04);
}
#series-reorder-list .dragging {
opacity: 0.5;