/* Custom theme variables */
:root {
--font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-family-body: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-size-base: 16px;
--line-height: 1.6;
--text-color: #333;
--bg-color: #fff;
--sidebar-bg: #f8f9fa;
--sidebar-width: 280px;
--sidebar-border: #e0e0e0;
--content-max-width: 1200px;
--link-color: #0066cc;
--link-hover: #0052a3;
--header-bg: #fff;
--header-border: #e0e0e0;
--theme-transition: 0.3s ease;
/* Standardized transition speed */
--charcoal-400: #6b7280;
}
[data-theme="dark"] {
--text-color: #e0e0e0;
--bg-color: #1e1e1e;
--sidebar-bg: #252525;
--sidebar-border: #404040;
--link-color: #66b3ff;
--link-hover: #99ccff;
--header-bg: #252525;
--header-border: #404040;
--charcoal-400: #9ca3af;
}
/* Base styles */
html {
background-color: var(--bg-color);
transition: background-color var(--theme-transition);
}
/* Theme transition targets (avoid blanket * selector) */
body,
.site-header,
.sidebar,
.sidebar *,
.bs-sidebar,
.bs-sidebar *,
.nav,
.nav *,
.navbar,
.navbar *,
.drawer-panel,
.drawer-panel *,
.card,
.card *,
.bg-body-tertiary,
pre,
code,
table,
th,
td,
blockquote,
hr,
a,
.nav-link,
.nav-top-level a,
.search-box,
.search-box * {
transition: background-color var(--theme-transition),
color var(--theme-transition),
border-color var(--theme-transition),
box-shadow var(--theme-transition);
}
body {
font-family: var(--font-family-body);
font-size: var(--font-size-base);
line-height: var(--line-height);
letter-spacing: 0.01em;
color: var(--text-color);
background-color: var(--bg-color);
background-image: url('../img/grid.png');
background-repeat: repeat-x;
background-position: 0 0;
margin: 0;
padding: 0;
overflow-x: hidden;
transition: background-color var(--theme-transition), color var(--theme-transition);
padding-top: 60px;
/* Space for header */
display: flex;
flex-direction: column;
min-height: 100vh;
/* Prevent horizontal overflow */
width: 100%;
max-width: 100vw;
box-sizing: border-box;
}
/* Headings and UI use the heading font */
h1,
h2,
h3,
h4,
h5,
h6,
.site-header,
.site-header *,
.sidebar,
.sidebar *,
.nav,
.navbar,
.nav *,
.bs-sidebar,
.bs-sidebar * {
font-family: var(--font-family);
}
/* Long-form text uses serif for readability */
main,
article,
[role="main"] {
font-family: var(--font-family-serif);
}
/* Headings and UI stay in Outfit */
h1,
h2,
h3,
h4,
h5,
h6,
.site-header,
.site-header *,
.sidebar,
.sidebar *,
.nav,
.navbar,
.nav *,
.bs-sidebar,
.bs-sidebar *,
.drawer-panel,
.drawer-panel * {
font-family: var(--font-family);
}
/* Dark mode - same grid image, it will appear more subtle on dark background */
[data-theme="dark"] body {
background-image: url('../img/grid.png');
background-repeat: repeat-x;
background-position: 0 0;
}
/* Site header - full width across viewport */
.site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background-color: var(--header-bg);
border-bottom: 1px solid var(--header-border);
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: background-color var(--theme-transition), border-color var(--theme-transition), box-shadow var(--theme-transition);
}
[data-theme="dark"] .site-header {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.site-header h1 {
margin: 0;
font-size: 1.2rem;
font-weight: 600;
color: var(--text-color);
transition: color var(--theme-transition);
flex: 1;
/* Allow h1 to take available space */
text-decoration: none;
border-bottom: none;
}
/* Remove underline from h1 on tablet and mobile */
@media (max-width: 1264px) {
.site-header h1,
.site-header h1 a {
text-decoration: none !important;
border-bottom: none !important;
}
}
.site-header .header-search {
width: 280px;
margin: 0 1rem;
position: relative;
flex-shrink: 0;
z-index: 1000;
/* Ensure dropdown appears above other content */
}
.site-header .header-search input {
width: 100%;
padding: 0.5rem 2.5rem 0.5rem 0.75rem;
border: 1px solid var(--sidebar-border);
border-radius: 4px;
background-color: var(--bg-color);
color: var(--text-color);
font-size: 0.9rem;
box-sizing: border-box;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color var(--theme-transition), color var(--theme-transition), border-color var(--theme-transition);
}
.site-header .header-search input:focus {
outline: none;
border-color: var(--link-color);
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}
.site-header .header-search input::placeholder {
color: var(--text-color);
opacity: 0.5;
transition: color var(--theme-transition);
}
/* Search icon in header search */
.site-header .header-search::after {
content: '\f002';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--text-color);
opacity: 0.5;
pointer-events: none;
}
.site-header .header-right {
display: flex;
align-items: center;
gap: 1rem;
}
/* Hide header search on mobile, show sidebar search */
@media (max-width: 767px) {
.site-header .header-search {
display: none !important;
}
/* Show sidebar search on mobile */
.sidebar .search-box {
display: block !important;
}
}
/* Hide sidebar search on tablet and above, show header search */
@media (min-width: 768px) {
.sidebar .search-box {
display: none !important;
}
.site-header .header-search {
display: block !important;
}
}
/* Mobile menu toggle - positioned on the left */
.site-header .mobile-menu-toggle {
margin-right: 1rem;
order: -1;
/* Ensure it appears before h1 */
}
/* Prevent content flicker - ensure content is visible */
body>.container {
opacity: 1 !important;
visibility: visible !important;
}
.col-md-9,
[role="main"] {
opacity: 1 !important;
visibility: visible !important;
}
/* Sidebar header - removed, now in site header */
.sidebar-header {
display: none !important;
}
/* Main layout */
.wrapper {
display: flex;
min-height: 100vh;
}
/* Sidebar */
.sidebar {
width: var(--sidebar-width);
background-color: var(--sidebar-bg);
border-right: 1px solid var(--sidebar-border);
position: fixed;
left: 0;
top: 60px;
/* Below header */
bottom: 0;
overflow-y: auto;
z-index: 50;
transition: background-color var(--theme-transition), border-color var(--theme-transition);
}
/* Search box - Material style */
.search-box {
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--sidebar-border);
margin-top: 2rem;
margin-bottom: 1.5rem;
position: relative;
}
.search-box input {
width: 100%;
padding: 0.75rem 2.5rem 0.75rem 0.75rem;
border: 1px solid var(--sidebar-border);
border-radius: 4px;
background-color: var(--bg-color);
color: var(--text-color);
font-size: 0.9rem;
box-sizing: border-box;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color var(--theme-transition), color var(--theme-transition), border-color var(--theme-transition);
}
.search-box input:focus {
outline: none;
border-color: var(--link-color);
box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.1);
}
.search-box input::placeholder {
color: var(--text-color);
opacity: 0.5;
transition: color var(--theme-transition);
}
/* Search icon */
.search-box::after {
content: '\f002';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
position: absolute;
right: 2rem;
top: 50%;
transform: translateY(-50%);
color: var(--text-color);
opacity: 0.5;
pointer-events: none;
}
/* Search results - Material style */
.search-results {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: var(--bg-color);
border: 1px solid var(--sidebar-border);
border-top: none;
border-radius: 0 0 4px 4px;
max-height: 500px;
overflow-y: auto;
z-index: 1000;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin: 0 1.5rem;
}
/* Header search dropdown - no side margins */
.header-search .search-results {
margin: 0;
margin-top: 4px;
}
[data-theme="dark"] .search-results {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}
.search-results-list {
list-style: none;
padding: 0;
margin: 0;
}
.search-results-list li {
margin: 0;
border-bottom: 1px solid var(--sidebar-border);
}
.search-results-list li:last-child {
border-bottom: none;
}
.search-results-list a {
display: block;
padding: 1rem;
color: var(--text-color);
text-decoration: none;
transition: background-color 0.2s ease;
}
.search-results-list a:hover,
.search-results-list a:focus {
background-color: rgba(0, 0, 0, 0.05);
outline: none;
}
[data-theme="dark"] .search-results-list a:hover,
[data-theme="dark"] .search-results-list a:focus {
background-color: rgba(255, 255, 255, 0.1);
}
.search-result-title {
font-weight: 600;
font-size: 0.95rem;
margin-bottom: 0.25rem;
color: var(--text-color);
}
.search-result-title mark {
background-color: rgba(0, 102, 204, 0.2);
color: var(--link-color);
padding: 0 2px;
border-radius: 2px;
}
[data-theme="dark"] .search-result-title mark {
background-color: rgba(102, 179, 255, 0.3);
}
.search-result-snippet {
font-size: 0.85rem;
color: var(--text-color);
opacity: 0.7;
line-height: 1.4;
margin-top: 0.25rem;
}
.search-result-snippet mark {
background-color: rgba(0, 102, 204, 0.2);
color: var(--link-color);
padding: 0 2px;
border-radius: 2px;
font-weight: 500;
}
[data-theme="dark"] .search-result-snippet mark {
background-color: rgba(102, 179, 255, 0.3);
}
.search-no-results {
padding: 2rem 1rem;
text-align: center;
color: var(--text-color);
opacity: 0.6;
font-size: 0.9rem;
}
/* Navigation */
.nav {
padding: 0 1rem;
display: flex;
flex-direction: column;
}
/* Add margin above first navigation item on desktop/tablet */
@media (min-width: 768px) {
.sidebar .nav>.nav-section:first-child,
.sidebar .nav>.nav-top-level:first-child {
margin-top: 1.5rem;
}
}
/* Category headers for grouping mini reports */
.nav-category-header {
padding: 0.75rem 0.8rem 0.5rem;
font-weight: 500;
font-size: 0.85rem;
color: var(--text-color);
text-align: left;
user-select: none;
pointer-events: none;
/* Non-clickable */
border-bottom: 1px solid var(--sidebar-border);
margin-bottom: 0.75rem;
margin-top: 1rem;
opacity: 0.8;
transition: color var(--theme-transition), border-color var(--theme-transition);
}
.nav-section-list>.nav-category-header:first-child {
margin-top: 0.5rem;
}
[data-theme="dark"] .nav-category-header {
opacity: 0.7;
}
.nav-section {
margin-bottom: 0.5rem;
display: block;
width: 100%;
}
.nav-section-header {
cursor: pointer;
user-select: none;
padding: 0.6rem 0.8rem;
font-weight: 400;
font-size: 0.8rem;
color: var(--text-color);
text-align: left;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 4px;
transition: background-color var(--theme-transition), color var(--theme-transition);
}
.nav-section-header:hover {
background-color: rgba(0, 0, 0, 0.05);
}
[data-theme="dark"] .nav-section-header:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.nav-section-header::after {
content: "▼";
font-size: 0.7rem;
transition: transform 0.2s;
opacity: 0.6;
}
.nav-section.expanded .nav-section-header::after {
content: "▲";
}
.nav-section-list {
display: none;
padding-left: 0.5rem;
margin-top: 0.25rem;
}
.nav-section.expanded .nav-section-list {
display: block;
}
.nav-link {
display: block;
padding: 0.5rem 0.8rem;
color: var(--text-color);
text-decoration: none;
border-radius: 4px;
font-size: 0.8rem;
font-weight: 400;
text-align: left;
transition: background-color var(--theme-transition), color var(--theme-transition);
}
.nav-link:hover {
background-color: rgba(0, 0, 0, 0.05);
color: var(--link-color);
}
[data-theme="dark"] .nav-link:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.nav-link.active {
font-weight: 400;
background-color: rgba(0, 102, 204, 0.1);
color: var(--link-color);
}
[data-theme="dark"] .nav-link.active {
background-color: rgba(102, 179, 255, 0.2);
}
/* Top-level nav items (not in sections) */
.nav-top-level {
padding: 0;
margin-bottom: 0.5rem;
display: block;
width: 100%;
}
.nav-top-level a {
display: block;
padding: 0.6rem 0.8rem;
color: var(--text-color);
text-decoration: none;
border-radius: 4px;
font-size: 0.9rem;
font-weight: 400;
text-align: left;
transition: background-color var(--theme-transition), color var(--theme-transition);
}
.nav-top-level a:hover {
background-color: rgba(0, 0, 0, 0.05);
color: var(--link-color);
}
[data-theme="dark"] .nav-top-level a:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.nav-top-level a.active {
font-weight: 400;
background-color: rgba(0, 102, 204, 0.1);
color: var(--link-color);
}
[data-theme="dark"] .nav-top-level a.active {
background-color: rgba(102, 179, 255, 0.2);
}
/* Hide the top navbar completely */
.navbar {
display: none !important;
}
/* Hide search, previous, next buttons from navbar */
.navbar .nav-link[data-bs-toggle="modal"],
.navbar .nav-link[rel="prev"],
.navbar .nav-link[rel="next"],
.navbar .nav-link[href="#"]:has(i.fa-search),
.navbar .nav-item:has(.fa-search),
.navbar .nav-item:has(.fa-arrow-left),
.navbar .nav-item:has(.fa-arrow-right) {
display: none !important;
}
/* Hide search/prev/next from sidebar if they appear */
.sidebar .nav-link[data-bs-toggle="modal"],
.sidebar .nav-link[rel="prev"],
.sidebar .nav-link[rel="next"] {
display: none !important;
}
/* TOC sidebar - show and position correctly */
.col-md-3 {
display: block !important;
margin-left: 0 !important;
position: relative !important;
z-index: 10 !important;
/* Higher z-index to overlay */
padding-left: 0 !important;
padding-right: 1rem !important;
width: 40px !important;
/* Only as wide as collapsed sidebar */
flex-shrink: 0;
pointer-events: auto !important;
/* Make container interactive for hover */
overflow: visible !important;
/* Allow expanded sidebar to overflow */
}
/* Make the collapsed sidebar and OUTLINE text interactive */
.col-md-3::before,
.col-md-3 .bs-sidebar {
pointer-events: auto !important;
/* Make these elements interactive */
}
/* Hide outline card on smaller screens - below 1265px */
@media (max-width: 1264px) {
.col-md-3 {
display: none !important;
}
/* Hide OUTLINE label when card is hidden */
.col-md-3::before {
display: none !important;
content: none !important;
}
/* Adjust content margin when outline is hidden */
body>.container {
margin-left: var(--sidebar-width) !important;
}
}
/* "OUTLINE" label - only visible when col-md-3 is visible */
.col-md-3::before {
content: "OUTLINE";
display: block;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-color);
opacity: 0.6;
margin-bottom: 0.5rem;
position: fixed;
/* Fixed position - doesn't move on scroll */
top: 82px;
/* Below header (60px) + padding (22px) */
left: calc(var(--sidebar-width) + 1rem);
/* Sidebar width + 1rem gap */
z-index: 11;
background-color: var(--bg-color);
padding-bottom: 0.5rem;
transition: color var(--theme-transition), background-color var(--theme-transition);
pointer-events: auto;
/* Make OUTLINE text hoverable */
width: 40px;
/* Match collapsed sidebar width */
}
/* Hide OUTLINE label when col-md-3 is hidden */
@media (max-width: 1264px) {
.col-md-3::before {
display: none !important;
}
}
/* TOC styling - Outline style with hover to expand */
.bs-sidebar {
position: fixed !important;
/* Fixed position - doesn't move on scroll */
top: 110px !important;
/* Below header (60px) + padding (22px) + OUTLINE text (~28px) */
left: calc(var(--sidebar-width) + 1rem) !important;
/* Sidebar width + 1rem gap */
/* Height unconstrained - no scrolling needed */
height: auto !important;
max-height: none !important;
overflow: hidden !important;
/* Hidden to prevent flicker, but height:auto means nothing is clipped */
padding: 0 !important;
background-color: var(--bg-color) !important;
/* Theme-aware background */
border: none !important;
width: 40px !important;
/* Collapsed width - just enough for the indicator lines */
transition: width 0.3s ease, box-shadow 0.3s ease, background-color var(--theme-transition), color var(--theme-transition);
padding-right: 1rem;
/* Add padding for the expanded state */
z-index: 100 !important;
/* High z-index to overlay content when expanded */
/* contain: layout style paint; - Removed for Brave compatibility */
/* Improve scroll performance and containment */
display: flex !important;
flex-direction: column !important;
}
/* Force dark mode background - override Bootstrap classes */
[data-theme="dark"] .bs-sidebar {
background-color: #1e1e1e !important;
}
[data-theme="dark"] .bs-sidebar.card,
[data-theme="dark"] .card.bg-body-tertiary,
[data-theme="dark"] #toc-collapse,
[data-theme="dark"] .bs-sidebar #toc-collapse {
background-color: #1e1e1e !important;
color: #e0e0e0 !important;
border-color: #404040 !important;
}
[data-theme="dark"] .bs-sidebar.bg-body-tertiary {
background-color: #1e1e1e !important;
}
/* Override Bootstrap bg-body-tertiary in dark mode */
[data-theme="dark"] .bg-body-tertiary {
background-color: #1e1e1e !important;
}
/* Override Bootstrap card class in dark mode */
[data-theme="dark"] .card {
background-color: #1e1e1e !important;
border-color: #404040 !important;
color: #e0e0e0 !important;
}
/* Specifically target the TOC collapse element */
[data-theme="dark"] .navbar-collapse.collapse.card.bg-body-tertiary {
background-color: #1e1e1e !important;
color: #e0e0e0 !important;
}
/* Expand on hover - when hovering the col-md-3 container, outline text, or sidebar */
/* Must come after base .bs-sidebar rule and be very specific */
.col-md-3:hover>.bs-sidebar,
.col-md-3:hover .bs-sidebar,
.col-md-3:hover .col-md-3 .bs-sidebar,
.bs-sidebar:hover,
.col-md-3::before:hover~.bs-sidebar {
width: 250px !important;
overflow-y: auto !important;
/* Allow scrolling on hover */
overflow-x: hidden !important;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1) !important;
background-color: var(--bg-color) !important;
position: fixed !important;
/* Fixed position - doesn't move on scroll */
top: 110px !important;
/* Below header + OUTLINE text */
left: calc(var(--sidebar-width) + 1rem) !important;
/* Sidebar width + 1rem gap */
z-index: 100 !important;
/* Higher than main content */
/* contain: layout style paint; - Removed for Brave compatibility */
/* Improve scroll performance and containment */
overscroll-behavior: contain !important;
/* Height unconstrained */
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
[data-theme="dark"] .col-md-3:hover>.bs-sidebar,
[data-theme="dark"] .col-md-3:hover .bs-sidebar,
[data-theme="dark"] .bs-sidebar:hover,
[data-theme="dark"] .col-md-3::before:hover~.bs-sidebar {
width: 250px !important;
overflow-y: auto !important;
/* Allow scrolling on hover */
overflow-x: hidden !important;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.5) !important;
background-color: var(--bg-color) !important;
position: fixed !important;
/* Fixed position - doesn't move on scroll */
top: 110px !important;
/* Below header + OUTLINE text */
left: calc(var(--sidebar-width) + 1rem) !important;
/* Sidebar width + 1rem gap */
z-index: 100 !important;
/* Higher than main content */
/* contain: layout style paint; - Removed for Brave compatibility */
/* Improve scroll performance and containment */
overscroll-behavior: contain !important;
/* Height unconstrained */
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
.bs-sidebar .navbar-header {
display: none !important;
/* Hide the header since we moved "OUTLINE" outside */
}
.bs-sidebar .navbar-toggler {
display: none !important;
}
.bs-sidebar .nav {
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
display: block !important;
height: auto !important;
max-height: none !important;
}
/* Ensure inner scrollable containers also extend naturally */
.bs-sidebar #toc-collapse,
.bs-sidebar .toc-scroll {
overflow: hidden !important;
height: auto !important;
max-height: none !important;
display: block !important;
}
/* Keep scroll always available on the inner container */
.bs-sidebar .nav-item {
margin-bottom: 0.1rem;
/* Reduced from 0.25rem */
position: relative;
}
/* Default collapsed state - hide text, show horizontal lines */
.bs-sidebar .nav-link {
font-size: 0.7rem;
font-weight: 400;
padding: 0.3rem 0.6rem 0.3rem 1.2rem !important;
/* Reduced from 0.5rem 0.75rem 0.5rem 1.5rem */
color: var(--text-color);
opacity: 0 !important;
/* Hide text when collapsed */
text-decoration: none;
display: block;
border-radius: 0;
text-align: left;
transition: opacity 0.3s ease, color var(--theme-transition);
position: relative;
line-height: 1.2;
/* Reduced from 1.4 */
white-space: normal;
/* Allow wrapping */
word-wrap: break-word;
overflow-wrap: break-word;
width: 250px;
/* Always 250px wide so wrapping is consistent */
box-sizing: border-box;
height: auto;
/* Natural height based on wrapped text */
}
/* Show text on hover - only when hovering the col-md-3 container */
.col-md-3:hover .bs-sidebar .nav-link,
.bs-sidebar:hover .nav-link {
opacity: 0.7 !important;
/* Show text when expanded */
}
/* Horizontal lines for collapsed state - represent structure */
.bs-sidebar .nav-item::after {
content: "";
position: absolute;
left: 8px;
top: 50%;
transform: translateY(-50%);
height: 1px;
background-color: var(--sidebar-border);
opacity: 0.4;
z-index: 2;
transition: opacity 0.3s ease, width 0.3s ease, background-color var(--theme-transition);
}
/* Different line lengths for different heading levels when collapsed */
.bs-sidebar .nav-item[data-bs-level="1"]::after {
width: 20px;
/* Longest line for H1 */
}
.bs-sidebar .nav-item[data-bs-level="2"]::after {
width: 15px;
/* Medium line for H2 */
}
.bs-sidebar .nav-item[data-bs-level="3"]::after {
width: 10px;
/* Shorter line for H3 */
}
.bs-sidebar .nav-item[data-bs-level="4"]::after,
.bs-sidebar .nav-item[data-bs-level="5"]::after,
.bs-sidebar .nav-item[data-bs-level="6"]::after {
width: 8px;
/* Shortest line for deeper levels */
}
/* Hide horizontal lines when expanded */
.col-md-3:hover .bs-sidebar .nav-item::after,
.bs-sidebar:hover .nav-item::after {
opacity: 0 !important;
/* Hide lines when showing content */
}
/* Vertical indicator line/bar - show when expanded */
.bs-sidebar .nav-item::before {
content: "";
position: absolute;
left: 8px;
top: 0.3rem;
/* Reduced from 0.5rem */
bottom: 0.3rem;
/* Reduced from 0.5rem */
width: 2px;
background-color: var(--sidebar-border);
opacity: 0;
/* Hidden when collapsed */
z-index: 1;
transition: opacity 0.3s ease, background-color var(--theme-transition), color var(--theme-transition);
}
/* Show vertical indicator lines when expanded */
.col-md-3:hover .bs-sidebar .nav-item::before,
.bs-sidebar:hover .nav-item::before {
opacity: 0.3;
/* Show vertical lines when expanded */
}
/* Active item indicator - thicker line */
.bs-sidebar .nav-item .nav-link.active {
position: relative;
color: var(--text-color) !important;
}
.bs-sidebar .nav-item .nav-link.active::before {
content: "";
position: absolute;
left: -1.5rem;
top: 0.3rem;
/* Reduced from 0.5rem */
bottom: 0.3rem;
/* Reduced from 0.5rem */
width: 3px;
background-color: var(--link-color);
opacity: 1;
z-index: 2;
transition: background-color var(--theme-transition);
}
.bs-sidebar .nav-item[data-bs-level="1"]>.nav-link.active::before {
left: -0.5rem;
}
/* Hide page title (first H1) text from outline card but keep its children visible */
.bs-sidebar .nav-item[data-bs-level="1"]:first-child>.nav-link {
display: none !important;
}
/* Also hide the indicator lines for the hidden H1 label */
.bs-sidebar .nav-item[data-bs-level="1"]:first-child::before,
.bs-sidebar .nav-item[data-bs-level="1"]:first-child::after {
display: none !important;
}
/* Add margin above first section in outline card */
.bs-sidebar .nav-item[data-bs-level="1"]:not(:first-child),
.bs-sidebar .nav-item[data-bs-level="2"]:first-child {
margin-top: 0.75rem !important;
}
/* Numbered list style for outline */
.bs-sidebar .nav-item[data-bs-level="1"]>.nav-link {
padding-left: 0.5rem !important;
font-weight: 400;
opacity: 0 !important;
/* Hide text when collapsed */
}
.col-md-3:hover .bs-sidebar .nav-item[data-bs-level="1"]>.nav-link,
.bs-sidebar:hover .nav-item[data-bs-level="1"]>.nav-link {
opacity: 0.7 !important;
/* Show text when expanded */
}
.bs-sidebar .nav-item[data-bs-level="2"]>.nav-link {
padding-left: 1.5rem !important;
}
.bs-sidebar .nav-item[data-bs-level="3"]>.nav-link {
padding-left: 3.5rem !important;
}
/* Active link - hide when collapsed, show when expanded */
.bs-sidebar .nav-link.active {
opacity: 0 !important;
/* Hide text when collapsed */
color: var(--text-color);
font-weight: 400;
background-color: transparent !important;
}
.col-md-3:hover .bs-sidebar .nav-link.active,
.bs-sidebar:hover .nav-link.active {
opacity: 0.7 !important;
/* Show text when expanded */
}
.bs-sidebar .nav-link:hover {
opacity: 1 !important;
color: var(--text-color);
background-color: rgba(0, 0, 0, 0.05);
transition: opacity 0.3s ease, color var(--theme-transition), background-color var(--theme-transition);
}
[data-theme="dark"] .bs-sidebar .nav-link:hover {
background-color: rgba(255, 255, 255, 0.05);
}
/* Nested nav items */
.bs-sidebar .nav-item .nav {
margin-left: 0;
padding-left: 0;
}
.bs-sidebar .nav-item .nav .nav-link {
font-size: 0.7rem;
font-weight: 400;
padding-top: 0.2rem;
/* Reduced from 0.35rem */
padding-bottom: 0.2rem;
/* Reduced from 0.35rem */
line-height: 1.2;
/* Reduced line height */
}
/* Content area - move main content */
body>.container {
margin-left: var(--sidebar-width) !important;
padding: 2rem !important;
max-width: none !important;
/* Allow content to center naturally */
margin-top: 0 !important;
margin-right: 0 !important;
padding-top: 2rem !important;
/* Space below header */
width: calc(100% - var(--sidebar-width)) !important;
box-sizing: border-box !important;
display: block !important;
transition: background-color var(--theme-transition), color var(--theme-transition);
flex: 1;
/* Take up available space, pushing footer down */
}
/* Prevent row from wrapping - keep outline and content side-by-side until outline hides */
body>.container>.row {
display: flex !important;
flex-wrap: nowrap !important;
/* Prevent wrapping */
margin: 0 !important;
}
/* Ensure columns stay side-by-side until outline hides */
@media (min-width: 1265px) {
body>.container>.row {
flex-wrap: nowrap !important;
}
.col-md-3 {
flex: 0 0 auto !important;
width: 40px !important;
/* Collapsed width - container only */
}
/* Ensure sidebar expands on hover within media query */
.col-md-3:hover .bs-sidebar {
width: 250px !important;
overflow-y: auto !important;
}
.col-md-9 {
flex: 1 1 auto !important;
min-width: 0 !important;
/* Allow flex shrinking */
}
}
/* Main content column - better width */
.col-md-9,
[role="main"] {
padding: 0 2rem !important;
margin: 0 auto !important;
/* Center the content */
opacity: 1 !important;
visibility: visible !important;
display: block !important;
max-width: 650px !important;
width: 100% !important;
position: relative;
z-index: 1;
box-sizing: border-box !important;
transition: background-color var(--theme-transition), color var(--theme-transition);
}
/* Ensure content is visible */
.col-md-9>*,
[role="main"]>* {
display: block;
visibility: visible;
opacity: 1;
}
/* Responsive content - adjust margins and padding (Material-style) */
@media (max-width: 1200px) {
body>.container {
padding: 1.5rem !important;
margin-left: var(--sidebar-width) !important;
}
.col-md-9,
[role="main"] {
padding: 0 1rem !important;
max-width: 100% !important;
margin: 0 auto !important;
/* Center the content */
}
.md-content__inner {
padding-left: 1rem;
padding-right: 1rem;
max-width: 650px;
}
}
@media (max-width: 992px) {
body>.container {
padding: 1.5rem !important;
margin-left: var(--sidebar-width) !important;
}
.col-md-9,
[role="main"] {
padding: 0 !important;
max-width: 100% !important;
margin-left: 0 !important;
/* No outline card space on tablet */
}
.md-content__inner {
padding-left: 1.25rem;
padding-right: 1.25rem;
max-width: 100%;
}
}
/* Fix content spacing */
.col-md-9 h1,
.col-md-9 h2,
.col-md-9 h3,
.col-md-9 p,
/* Unordered lists - bullets */
.col-md-9 ul,
[role="main"] ul,
.md-content__inner ul {
margin-top: 1rem;
margin-bottom: 1rem;
list-style-type: disc;
}
/* Ordered lists - numbers */
.col-md-9 ol,
[role="main"] ol,
.md-content__inner ol {
margin-top: 1rem;
margin-bottom: 1rem;
counter-reset: list-counter;
list-style-type: decimal;
}
.col-md-9 ol li,
[role="main"] ol li,
.md-content__inner ol li {
counter-increment: list-counter;
display: list-item;
list-style-position: outside;
}
/* Unordered list items */
.col-md-9 ul li,
[role="main"] ul li,
.md-content__inner ul li {
display: list-item;
list-style-position: outside;
}
/* Consistent H1 styling for all content pages */
.col-md-9 h1,
[role="main"] h1,
.md-content__inner h1 {
margin-top: 0;
font-size: 2.3rem;
font-weight: 300;
line-height: 1.3;
margin-bottom: 1.5rem;
color: var(--text-color);
text-decoration: none;
border-bottom: 0.5px solid currentColor;
padding-bottom: 0.1rem;
}
/* Page title class for H1 elements */
.page-title,
h1.page-title,
.col-md-9 h1.page-title,
[role="main"] h1.page-title,
.md-content__inner h1.page-title {
font-size: 2.5rem;
font-weight: 200;
border-bottom: none;
padding-bottom: 0;
margin-bottom: 2rem;
}
/* Consistent H2 styling for all content pages */
.col-md-9 h2,
[role="main"] h2,
.md-content__inner h2 {
font-size: 1.5rem;
line-height: 1.4;
margin-top: 1.5rem;
margin-bottom: 0.75rem;
color: var(--text-color);
}
/* Consistent H3 styling for all content pages */
.col-md-9 h3,
[role="main"] h3,
.md-content__inner h3 {
font-size: 1.2rem;
font-weight: 600;
line-height: 1.4;
margin-top: 1.25rem;
margin-bottom: 0.5rem;
color: var(--text-color);
}
/* List item spacing for main bullet points */
.col-md-9 li,
[role="main"] li,
.md-content__inner li {
margin-bottom: 0.7rem;
}
/* Nested/secondary bullet points - ensure consistent styling */
.col-md-9 ul ul,
[role="main"] ul ul,
.md-content__inner ul ul,
.col-md-9 ol ul,
[role="main"] ol ul,
.md-content__inner ol ul {
margin-left: 0.75rem;
padding-left: 0.75rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.col-md-9 ul ul li,
[role="main"] ul ul li,
.md-content__inner ul ul li,
.col-md-9 ol ul li,
[role="main"] ol ul li,
.md-content__inner ol ul li {
margin-bottom: 0.7rem;
list-style-type: disc;
}
/* Soft line breaks (shift+enter) - ensure
tags render correctly */
/* Apply to all content areas: paragraphs, list items, and general content */
/*
tags should always create a visible line break without paragraph spacing */
.col-md-9 br,
[role="main"] br,
.md-content__inner br,
.col-md-9 p br,
[role="main"] p br,
.md-content__inner p br,
.col-md-9 li br,
[role="main"] li br,
.md-content__inner li br {
/* Ensure
tags are always rendered and create line breaks */
display: inline;
line-height: inherit;
/* Prevent collapsing - ensure the break is always visible */
}
/* Ensure parent elements allow
tags to work correctly */
/* Don't collapse whitespace in a way that would merge
breaks */
.col-md-9 p,
[role="main"] p,
.md-content__inner p,
.col-md-9 li,
[role="main"] li,
.md-content__inner li {
white-space: normal;
/* Allow
tags to create line breaks without being collapsed */
word-wrap: break-word;
overflow-wrap: break-word;
/* Ensure
tags within these elements create visible line breaks */
}
/* Paragraphs that follow lists - ONLY indent continuations, not standalone paragraphs */
/* Strategy: Indent the first paragraph after a list ONLY if it's followed by other content */
/* (indicating it's a continuation, not a new section) */
/* Also indent subsequent paragraphs (ul + p ~ p) which are continuations */
.col-md-9 ul+p:has(+ p),
.col-md-9 ul+p:has(+ ul),
.col-md-9 ul+p:has(+ div.arithmatex),
.col-md-9 ul+p:has(+ p + p),
[role="main"] ul+p:has(+ p),
[role="main"] ul+p:has(+ ul),
[role="main"] ul+p:has(+ div.arithmatex),
[role="main"] ul+p:has(+ p + p),
.md-content__inner ul+p:has(+ p),
.md-content__inner ul+p:has(+ ul),
.md-content__inner ul+p:has(+ div.arithmatex),
.md-content__inner ul+p:has(+ p + p),
.col-md-9 ol+p:has(+ p),
.col-md-9 ol+p:has(+ ol),
.col-md-9 ol+p:has(+ div.arithmatex),
.col-md-9 ol+p:has(+ p + p),
[role="main"] ol+p:has(+ p),
[role="main"] ol+p:has(+ ol),
[role="main"] ol+p:has(+ div.arithmatex),
[role="main"] ol+p:has(+ p + p),
.md-content__inner ol+p:has(+ p),
.md-content__inner ol+p:has(+ ol),
.md-content__inner ol+p:has(+ div.arithmatex),
.md-content__inner ol+p:has(+ p + p) {
margin-top: 1rem;
margin-bottom: 1rem;
/* Align to the bullet point text - match the list's padding-left */
padding-left: 0 !important;
margin-left: 0;
display: block;
}
/* Style paragraphs that contain nested list items rendered as text with
tags */
/* These paragraphs should have additional left padding for the nested items */
.col-md-9 ul+p:has(br),
[role="main"] ul+p:has(br),
.md-content__inner ul+p:has(br),
.col-md-9 ol+p:has(br),
[role="main"] ol+p:has(br),
.md-content__inner ol+p:has(br) {
/* The paragraph itself is already indented by ul + p rule above */
/* But we need to add extra padding for nested list items that appear as text */
padding-left: 0 !important;
}
/* Style text-based nested list items (lines starting with " - ") within paragraphs */
/* These appear as text with
tags and should be styled to look like nested lists */
.col-md-9 p br,
[role="main"] p br,
.md-content__inner p br {
/* Ensure
tags create proper line breaks */
display: block;
line-height: 1.7;
}
/* Add left padding/margin to text content after
tags that looks like list items */
/* This targets text that starts with " - " pattern when rendered */
.col-md-9 p br+text,
[role="main"] p br+text,
.md-content__inner p br+text {
padding-left: 0;
display: block;
}
/* Subsequent paragraphs that follow a list (for multiple indented paragraphs) */
/* These are paragraphs that come after another paragraph that follows a list */
/* These are continuations, so they should be indented */
.col-md-9 ul+p+p,
[role="main"] ul+p+p,
.md-content__inner ul+p+p,
.col-md-9 ol+p+p,
[role="main"] ol+p+p,
.md-content__inner ol+p+p {
margin-top: 1rem;
margin-bottom: 1rem;
/* Align to the bullet point text - match the list's padding-left */
padding-left: 0 !important;
margin-left: 0;
display: block;
}
/* Continue for additional consecutive paragraphs */
.col-md-9 ul+p+p+p,
[role="main"] ul+p+p+p,
.md-content__inner ul+p+p+p,
.col-md-9 ol+p+p+p,
[role="main"] ol+p+p+p,
.md-content__inner ol+p+p+p {
margin-top: 1rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
margin-left: 0;
display: block;
}
/* Handle paragraphs that come after formula blocks that follow lists */
/* This covers cases where indented paragraphs are separated by formulas */
.col-md-9 ul+p+p+p+p,
[role="main"] ul+p+p+p+p,
.md-content__inner ul+p+p+p+p,
.col-md-9 ol+p+p+p+p,
[role="main"] ol+p+p+p+p,
.md-content__inner ol+p+p+p+p {
margin-top: 1rem;
margin-bottom: 1rem;
padding-left: 1.5rem;
margin-left: 0;
display: block;
}
/* Handle paragraphs that come after paragraphs following lists */
/* This uses the general sibling selector to catch all paragraphs after the first one */
/* These are continuations, so they should be indented */
/* BUT: Exclude paragraphs that start with bold text (likely section headers, not continuations) */
/* Also exclude paragraphs that come after headings or new lists (reset rules handle those) */
.col-md-9 ul+p~p:not(h1 ~ p):not(h2 ~ p):not(h3 ~ p):not(ul ~ ul ~ p):not(ol ~ ol ~ p):not(:has(> strong:first-child)),
[role="main"] ul+p~p:not(h1 ~ p):not(h2 ~ p):not(h3 ~ p):not(ul ~ ul ~ p):not(ol ~ ol ~ p):not(:has(> strong:first-child)),
.md-content__inner ul+p~p:not(h1 ~ p):not(h2 ~ p):not(h3 ~ p):not(ul ~ ul ~ p):not(ol ~ ol ~ p):not(:has(> strong:first-child)),
.col-md-9 ol+p~p:not(h1 ~ p):not(h2 ~ p):not(h3 ~ p):not(ul ~ ul ~ p):not(ol ~ ol ~ p):not(:has(> strong:first-child)),
[role="main"] ol+p~p:not(h1 ~ p):not(h2 ~ p):not(h3 ~ p):not(ul ~ ul ~ p):not(ol ~ ol ~ p):not(:has(> strong:first-child)),
.md-content__inner ol+p~p:not(h1 ~ p):not(h2 ~ p):not(h3 ~ p):not(ul ~ ul ~ p):not(ol ~ ol ~ p):not(:has(> strong:first-child)) {
margin-top: 1rem;
margin-bottom: 1rem;
padding-left: 0 !important;
margin-left: 0;
display: block;
}
/* Reset indentation for paragraphs that start with bold text (section headers) */
/* These are new sections, not continuations */
.col-md-9 p:has(> strong:first-child),
[role="main"] p:has(> strong:first-child),
.md-content__inner p:has(> strong:first-child) {
padding-left: 0 !important;
margin-left: 0;
}
/* Reset indentation for paragraphs that come after headings or new lists */
/* This prevents indenting paragraphs that belong to new sections */
.col-md-9 h1~p,
.col-md-9 h2~p,
.col-md-9 h3~p,
.col-md-9 ul~ul~p,
.col-md-9 ol~ol~p,
[role="main"] h1~p,
[role="main"] h2~p,
[role="main"] h3~p,
[role="main"] ul~ul~p,
[role="main"] ol~ol~p,
.md-content__inner h1~p,
.md-content__inner h2~p,
.md-content__inner h3~p,
.md-content__inner ul~ul~p,
.md-content__inner ol~ol~p {
padding-left: 0;
margin-left: 0;
}
/* Also handle paragraphs inside list items (for cases where markdown renders differently) */
.col-md-9 li p,
[role="main"] li p,
.md-content__inner li p {
margin-top: 1rem;
margin-bottom: 1rem;
/* Align to the bullet point text, not the bullet marker */
padding-left: 0;
margin-left: 0;
/* Ensure it's treated as a separate paragraph with proper spacing */
display: block;
}
/* Ensure strong/bold formatting works in indented paragraphs and list items */
.col-md-9 p strong,
.col-md-9 li p strong,
.col-md-9 ul+p strong,
.col-md-9 ul+p~p strong,
[role="main"] p strong,
[role="main"] li p strong,
[role="main"] ul+p strong,
[role="main"] ul+p~p strong,
.md-content__inner p strong,
.md-content__inner li p strong,
.md-content__inner ul+p strong,
.md-content__inner ul+p~p strong {
font-weight: 500 !important;
}
.md-content__inner {
max-width: 650px;
margin-left: auto;
margin-right: auto;
padding-left: 2rem;
padding-right: 2rem;
box-sizing: border-box;
width: 100%;
/* Prevent horizontal overflow */
overflow-x: hidden;
word-wrap: break-word;
overflow-wrap: break-word;
}
.md-main__inner {
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
/* Theme toggle button - moved to header */
.theme-toggle {
padding: 0.5rem;
background: transparent;
border: 1px solid var(--sidebar-border);
border-radius: 4px;
cursor: pointer;
color: var(--text-color) !important;
font-size: 1.2rem;
line-height: 1;
min-width: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.theme-toggle:hover {
background-color: rgba(0, 0, 0, 0.05);
}
[data-theme="dark"] .theme-toggle {
color: var(--text-color) !important;
}
[data-theme="dark"] .theme-toggle:hover {
background-color: rgba(255, 255, 255, 0.1);
}
/* Links */
a {
color: var(--link-color);
text-decoration: none;
}
a:hover {
color: var(--link-hover);
text-decoration: underline;
}
/* Mark/highlight styling for ==text== syntax */
mark {
background-color: #228B22 !important;
color: var(--text-color) !important;
padding: 0.15em 0.3em;
border-radius: 3px;
font-weight: inherit;
}
[data-theme="dark"] mark {
background-color: #2d5016 !important;
color: var(--text-color) !important;
}
/* Ensure mark elements are visible in all contexts */
.col-md-9 mark,
[role="main"] mark,
.md-content__inner mark,
p mark,
li mark {
background-color: #228B22 !important;
color: var(--text-color) !important;
}
[data-theme="dark"] .col-md-9 mark,
[data-theme="dark"] [role="main"] mark,
[data-theme="dark"] .md-content__inner mark,
/* Dark mode paragraph font weight */
[data-theme="dark"] .col-md-9 p,
[data-theme="dark"] [role="main"] p,
[data-theme="dark"] .md-content__inner p {
font-weight: 300;
}
[data-theme="dark"] p mark,
[data-theme="dark"] li mark {
background-color: #2d5016 !important;
color: var(--text-color) !important;
}
/* Code blocks */
pre {
background-color: rgba(0, 0, 0, 0.05);
border: 1px solid var(--sidebar-border);
border-radius: 4px;
padding: 1rem;
overflow-x: auto;
font-family: var(--font-family-mono);
}
[data-theme="dark"] pre {
background-color: rgba(255, 255, 255, 0.05);
}
code {
background-color: rgba(0, 0, 0, 0.05);
padding: 0.2em 0.4em;
border-radius: 3px;
font-size: 0.9em;
font-family: var(--font-family-mono);
}
[data-theme="dark"] code {
background-color: rgba(255, 255, 255, 0.1);
}
/* Lighter bold in body copy */
.col-md-9 strong,
[role="main"] strong,
.md-content__inner strong,
.col-md-9 b,
[role="main"] b,
.md-content__inner b {
font-weight: 500;
}
/* Remove borders and outlines from all images */
img,
img[src],
.md-content img,
.md-content__inner img,
.col-md-9 img,
[role="main"] img,
article img,
p img,
div img {
border: none !important;
outline: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
background-color: transparent !important;
background: transparent !important;
border-width: 0 !important;
border-style: none !important;
border-color: transparent !important;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
margin-top: 0.2rem;
margin-bottom: 0.2rem;
}
/* Diagram images and standalone images - full width */
.col-md-9>img,
.col-md-9 p>img,
.col-md-9>p>img,
[role="main"]>img,
[role="main"] p>img,
[role="main"]>p>img,
.md-content__inner>img,
.md-content__inner p>img,
.md-content__inner>p>img,
article>img,
article p>img,
article>p>img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
display: block !important;
}
/* Exclude images inside image grids */
.image-grid-2 img,
.image-grid-3 img,
.image-grid-4 img,
.image-grid-5 img {
width: auto !important;
max-width: 100% !important;
}
/* Remove top and bottom margins and padding for images in col-md-9 */
.col-md-9 img {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding: 0 !important;
}
/* Lightbox hover effect - grey overlay with magnifying glass */
img.lightbox-enabled,
img[src*="/files/"] {
position: relative !important;
cursor: pointer !important;
display: block !important;
}
img.lightbox-enabled::before,
img[src*="/files/"]::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: rgba(0, 0, 0, 0.5) !important;
opacity: 0 !important;
transition: opacity 0.2s ease !important;
border-radius: 4px !important;
z-index: 10 !important;
pointer-events: none !important;
}
img.lightbox-enabled::after,
img[src*="/files/"]::after {
content: '🔍' !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
font-size: 2.5rem !important;
line-height: 1 !important;
opacity: 0 !important;
transition: opacity 0.2s ease !important;
z-index: 11 !important;
pointer-events: none !important;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) !important;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.5) !important;
}
img.lightbox-enabled:hover::before,
img[src*="/files/"]:hover::before {
opacity: 1 !important;
}
img.lightbox-enabled:hover::after,
img[src*="/files/"]:hover::after {
opacity: 1 !important;
}
/* Ensure images in grids also get hover effect */
.image-grid-2 img.lightbox-enabled,
.image-grid-3 img.lightbox-enabled,
.image-grid-4 img.lightbox-enabled,
.image-grid-5 img.lightbox-enabled,
.image-grid-2 img[src*="/files/"],
.image-grid-3 img[src*="/files/"],
.image-grid-4 img[src*="/files/"],
.image-grid-5 img[src*="/files/"] {
position: relative !important;
display: block !important;
}
/* Hover effect for grid images - overlay */
.image-grid-2 img.lightbox-enabled::before,
.image-grid-3 img.lightbox-enabled::before,
.image-grid-4 img.lightbox-enabled::before,
.image-grid-5 img.lightbox-enabled::before,
.image-grid-2 img[src*="/files/"]::before,
.image-grid-3 img[src*="/files/"]::before,
.image-grid-4 img[src*="/files/"]::before,
.image-grid-5 img[src*="/files/"]::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: rgba(0, 0, 0, 0.5) !important;
opacity: 0 !important;
transition: opacity 0.2s ease !important;
border-radius: 4px !important;
z-index: 10 !important;
pointer-events: none !important;
}
/* Hover effect for grid images - magnifying glass */
.image-grid-2 img.lightbox-enabled::after,
.image-grid-3 img.lightbox-enabled::after,
.image-grid-4 img.lightbox-enabled::after,
.image-grid-5 img.lightbox-enabled::after,
.image-grid-2 img[src*="/files/"]::after,
.image-grid-3 img[src*="/files/"]::after,
.image-grid-4 img[src*="/files/"]::after,
.image-grid-5 img[src*="/files/"]::after {
content: '🔍' !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
font-size: 2.5rem !important;
line-height: 1 !important;
opacity: 0 !important;
transition: opacity 0.2s ease !important;
z-index: 11 !important;
pointer-events: none !important;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)) !important;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.5) !important;
}
/* Show overlay and icon on hover for grid images */
.image-grid-2 img.lightbox-enabled:hover::before,
.image-grid-3 img.lightbox-enabled:hover::before,
.image-grid-4 img.lightbox-enabled:hover::before,
.image-grid-5 img.lightbox-enabled:hover::before,
.image-grid-2 img[src*="/files/"]:hover::before,
.image-grid-3 img[src*="/files/"]:hover::before,
.image-grid-4 img[src*="/files/"]:hover::before,
.image-grid-5 img[src*="/files/"]:hover::before {
opacity: 1 !important;
}
.image-grid-2 img.lightbox-enabled:hover::after,
.image-grid-3 img.lightbox-enabled:hover::after,
.image-grid-4 img.lightbox-enabled:hover::after,
.image-grid-5 img.lightbox-enabled:hover::after,
.image-grid-2 img[src*="/files/"]:hover::after,
.image-grid-3 img[src*="/files/"]:hover::after,
.image-grid-4 img[src*="/files/"]:hover::after,
.image-grid-5 img[src*="/files/"]:hover::after {
opacity: 1 !important;
}
/* Image grid styles for side-by-side images */
.image-grid {
display: flex;
gap: 1rem;
margin: 1rem 0;
flex-wrap: wrap;
}
.image-grid-2,
.image-grid-3,
.image-grid-4,
.image-grid-5 {
display: flex;
flex-direction: row;
/* Default to side-by-side layout */
gap: 0.2rem;
margin: 0.2rem 0;
/* Remove auto margins, align with text content */
align-items: flex-start;
/* Align items to the top */
justify-content: flex-start;
width: 100%;
max-width: 100%;
/* Match text content width exactly */
box-sizing: border-box;
flex-wrap: nowrap;
/* Don't wrap by default - only wrap on mobile */
overflow: hidden;
/* Prevent overflow */
min-width: 0;
/* Allow flexbox to shrink below content size */
}
.image-grid-2 img,
.image-grid-3 img,
.image-grid-4 img,
.image-grid-5 img {
flex: 0 1 auto;
/* Allow images to shrink but maintain aspect ratio */
height: 400px;
/* Default height for 3 image grids */
width: auto;
max-width: 100% !important;
/* Ensure images don't overflow container */
min-width: 0;
/* Critical: allow flexbox to shrink images below their natural width */
object-fit: cover;
/* Fill the container, cropping if needed */
object-position: center;
display: block;
border-radius: 4px;
border: none !important;
/* Remove any default borders */
outline: none !important;
/* Remove any outlines */
background-color: transparent !important;
/* No background showing through */
background: transparent !important;
flex-shrink: 1;
/* Allow images to shrink on smaller screens */
/* Ensure rounded corners work properly */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
box-sizing: border-box;
}
.image-grid-2 img {
height: 350px;
/* Specific height for 2 image grids */
}
.image-grid-4 img {
height: 350px;
/* Specific height for 4 image grids */
}
.image-grid-5 img {
height: 300px;
/* Specific height for 5 image grids */
}
/* Image captions - unified style for all captions (grid and standalone) */
/* Use classes added by JavaScript for reliable targeting */
.image-caption,
.col-md-9 img+p,
[role="main"] img+p,
.md-content__inner img+p,
article img+p,
.image-grid-2+p,
.image-grid-3+p,
.image-grid-4+p,
.image-grid-5+p {
background-color: #f5f5f5 !important;
/* Light grey background */
color: #333333 !important;
/* Dark grey text */
padding: 0.75rem 1rem !important;
margin: 0.5rem auto 0 auto !important;
text-align: center !important;
font-size: 0.875rem !important;
font-style: italic !important;
line-height: 1.6 !important;
border-radius: 4px !important;
max-width: 100% !important;
box-sizing: border-box !important;
display: block !important;
}
[data-theme="dark"] .image-caption,
[data-theme="dark"] .col-md-9 img+p,
[data-theme="dark"] [role="main"] img+p,
[data-theme="dark"] .md-content__inner img+p,
[data-theme="dark"] article img+p,
[data-theme="dark"] .image-grid-2+p,
[data-theme="dark"] .image-grid-3+p,
[data-theme="dark"] .image-grid-4+p,
[data-theme="dark"] .image-grid-5+p {
background-color: #1a1a1a !important;
color: #c0c0c0 !important;
}
/* First caption line */
.image-caption-first {
padding: 0.75rem 1rem !important;
margin: 0.5rem auto 0 auto !important;
}
/* Second caption line - connects to first (unified for all captions) */
.image-caption-second,
.col-md-9 img+p+p,
[role="main"] img+p+p,
.md-content__inner img+p+p,
article img+p+p {
background-color: #f5f5f5 !important;
/* Light grey background */
color: #333333 !important;
/* Dark grey text */
padding: 0 1rem 0.75rem 1rem !important;
margin: 0 auto 1rem auto !important;
margin-top: -0.5rem !important;
text-align: center !important;
font-size: 0.875rem !important;
line-height: 1.6 !important;
border-radius: 4px !important;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
max-width: 100% !important;
box-sizing: border-box !important;
display: block !important;
}
[data-theme="dark"] .image-caption-second,
[data-theme="dark"] .col-md-9 img+p+p,
[data-theme="dark"] [role="main"] img+p+p,
[data-theme="dark"] .md-content__inner img+p+p,
[data-theme="dark"] article img+p+p {
background-color: #1a1a1a !important;
color: #c0c0c0 !important;
}
/* Photographer credit styling - same size as caption, italic, slightly greyer */
/* Note: When .image-caption-credit is applied, it should still show the caption background */
.image-caption.image-caption-credit {
font-size: 0.875rem !important;
/* Same size as base caption */
font-style: italic !important;
color: #666666 !important;
/* Darker grey for light mode */
opacity: 0.85 !important;
/* Keep the caption background */
background-color: #f5f5f5 !important;
}
[data-theme="dark"] .image-caption.image-caption-credit {
color: #c0c0c0 !important;
/* Match unified caption color */
background-color: #1a1a1a !important;
opacity: 0.9 !important;
/* Slightly reduced opacity for subtle difference */
}
.photo-credit {
font-size: 0.75rem !important;
color: #666666 !important;
/* Darker grey for light mode */
opacity: 0.85 !important;
display: inline-block;
}
[data-theme="dark"] .photo-credit {
color: #888888 !important;
/* Lighter grey for dark mode */
}
/* Style credit text in lightbox descriptions */
.glightbox .photo-credit,
.glightbox-clean .photo-credit {
font-size: 0.75rem !important;
color: #888888 !important;
opacity: 0.85 !important;
}
/* Note: Caption styles are now unified above - this section removed to avoid duplication */
/* Note: Second line caption styles are now unified above - this section removed to avoid duplication */
/* Mobile menu toggle - hidden by default on desktop */
.mobile-menu-toggle {
display: none !important;
}
/* Responsive: mobile and tablet styles */
@media (max-width: 768px) {
/* Show mobile menu toggle on mobile */
.mobile-menu-toggle {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Sidebar - hide by default, show as overlay when needed */
.sidebar {
transform: translateX(-100%);
transition: transform 0.3s ease;
width: 280px !important;
z-index: 1000;
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
}
.sidebar.open {
transform: translateX(0);
}
/* Sidebar overlay */
.sidebar-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 999;
}
/* Mobile menu toggle button - in header */
.mobile-menu-toggle {
position: relative !important;
top: auto !important;
left: auto !important;
z-index: 1001 !important;
padding: 0.5rem 0.75rem !important;
background: transparent !important;
border: 1px solid var(--sidebar-border) !important;
border-radius: 4px !important;
cursor: pointer !important;
font-size: 1.2rem !important;
color: var(--text-color) !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
/* Main content - full width on mobile */
body>.container {
margin-left: 0 !important;
padding: 1rem !important;
padding-top: 1rem !important;
/* Header already provides space */
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Header on mobile */
.site-header {
height: 50px;
padding: 0 0.75rem;
}
.site-header h1 {
font-size: 1rem;
margin-left: 0.5rem;
}
body {
padding-top: 50px;
/* Smaller header on mobile */
}
.sidebar {
top: 50px;
/* Below smaller header */
}
.col-md-9,
[role="main"] {
padding: 0 !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Content inner wrapper - proper padding on mobile (Material-style) */
.md-content__inner {
padding-left: 1rem !important;
padding-right: 1rem !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
/* Better spacing for readability */
padding-top: 0.5rem;
padding-bottom: 2rem;
}
/* Better spacing for content blocks */
.md-content__inner>*:first-child {
margin-top: 0;
}
.md-content__inner>*:last-child {
margin-bottom: 0;
}
/* Ensure images don't overflow - Material-style */
.col-md-9 img,
[role="main"] img,
.md-content__inner img {
max-width: 100% !important;
height: auto !important;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Prevent horizontal overflow on all content */
.col-md-9,
[role="main"],
.md-content__inner {
overflow-x: hidden;
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Ensure code blocks don't cause overflow */
pre {
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
code {
word-break: break-word;
overflow-wrap: break-word;
}
/* Fix content spacing on mobile */
.col-md-9 h1,
.col-md-9 h2,
.col-md-9 h3,
.col-md-9 p,
.col-md-9 ul,
.col-md-9 ol,
[role="main"] h1,
[role="main"] h2,
[role="main"] h3,
[role="main"] p,
[role="main"] ul,
[role="main"] ol {
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Tables responsive */
.col-md-9 table,
[role="main"] table {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Code blocks responsive */
.col-md-9 pre,
[role="main"] pre {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
word-wrap: normal;
white-space: pre;
}
/* TOC/Outline - already hidden via media query above */
/* Theme toggle - reposition for mobile */
.theme-toggle {
top: 0.5rem;
right: 0.5rem;
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
z-index: 1001;
}
/* Image grids - stay horizontal on all screen sizes including mobile */
.image-grid-2,
.image-grid-3,
.image-grid-4,
.image-grid-5 {
flex-direction: row !important;
/* Keep horizontal layout */
flex-wrap: nowrap !important;
/* Prevent wrapping */
align-items: flex-start !important;
gap: 0.5rem;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
box-sizing: border-box !important;
overflow: hidden !important;
/* Prevent overflow */
min-width: 0 !important;
}
/* Images on mobile - let JavaScript handle height matching and scaling */
.image-grid-2 img,
.image-grid-3 img,
.image-grid-4 img,
.image-grid-5 img {
max-width: 100% !important;
min-width: 0 !important;
/* Critical for flexbox shrinking */
width: auto !important;
/* Don't set height - let JavaScript handle it */
flex-shrink: 1 !important;
display: block;
box-sizing: border-box !important;
}
/* Navigation - adjust font sizes */
.nav-section-header {
font-size: 0.9rem;
padding: 0.5rem 0.6rem;
}
.nav-link {
font-size: 0.85rem;
padding: 0.4rem 0.6rem;
}
/* Sidebar header */
.sidebar-header h1 {
font-size: 1.1rem;
}
/* Search box */
.search-box {
padding: 0 1rem 0.75rem;
margin-top: 2rem;
margin-bottom: 1.5rem;
}
.search-box input {
font-size: 0.85rem;
}
/* Base font size adjustment - Material-style fluid typography */
body {
font-size: 16px;
line-height: 1.6;
}
/* Material-style heading scaling */
h1 {
font-size: clamp(1.8rem, 4.8vw, 2.3rem);
line-height: 1.3;
margin-bottom: 1rem;
font-weight: 300;
text-decoration: none;
border-bottom: 0.5px solid currentColor;
padding-bottom: 0.1rem;
}
/* Page title class for mobile */
.page-title,
h1.page-title {
font-size: clamp(2rem, 5.5vw, 2.5rem);
font-weight: 300;
border-bottom: none;
padding-bottom: 0;
margin-bottom: 2rem;
}
h2 {
font-size: clamp(1.2rem, 3.5vw, 1.5rem);
line-height: 1.4;
margin-top: 1.5rem;
margin-bottom: 0.75rem;
font-weight: 600;
}
h3 {
font-size: clamp(1rem, 2.8vw, 1.2rem);
line-height: 1.4;
margin-top: 1.25rem;
margin-bottom: 0.5rem;
font-weight: 600;
}
h4 {
font-size: clamp(1rem, 2.5vw, 1.1rem);
line-height: 1.4;
margin-top: 1rem;
margin-bottom: 0.5rem;
font-weight: 600;
}
/* Better paragraph spacing on mobile - Material-style */
p {
margin-bottom: 1rem;
line-height: 1.7;
font-size: 16px;
}
/* Better blockquote styling on mobile */
blockquote {
margin: 1.5rem 0;
padding: 1rem 1.25rem;
border-left: 4px solid var(--link-color);
background-color: rgba(0, 0, 0, 0.02);
border-radius: 4px;
font-size: 0.95em;
}
[data-theme="dark"] blockquote {
background-color: rgba(255, 255, 255, 0.02);
}
/* Better code block styling on mobile */
pre {
padding: 1rem;
border-radius: 4px;
font-size: 0.9em;
}
code {
padding: 0.2em 0.4em;
border-radius: 3px;
font-size: 0.9em;
}
/* Better list spacing */
ul,
ol {
margin-bottom: 1rem;
padding-left: 0;
}
/* Nested lists need additional indentation - override base padding and add margin */
ul ul,
ol ul,
ul ol,
ol ol {
margin-left: 0.75rem !important;
padding-left: 0.75rem !important;
}
li {
margin-bottom: 0.7rem;
line-height: 1.7;
}
/* Lists spacing */
ul,
ol {
margin-bottom: 1rem;
padding-left: 0;
}
/* Ensure nested lists in responsive sections also get proper indentation */
ul ul,
ol ul,
ul ol,
ol ol {
margin-left: 0.75rem !important;
padding-left: 0.75rem !important;
}
li {
margin-bottom: 0.7rem;
}
/* Blockquotes */
blockquote {
margin: 1rem 0;
padding-left: 1rem;
border-left: 3px solid var(--sidebar-border);
}
/* Prevent horizontal scroll */
html,
body {
overflow-x: hidden;
max-width: 100%;
}
* {
max-width: 100%;
}
}
/* Medium screens - adjust image grids for better scaling, maintain grid layout */
@media (min-width: 992px) and (max-width: 1200px) {
.image-grid-2,
.image-grid-3,
.image-grid-4,
.image-grid-5 {
max-width: 100%;
/* Match text content width */
margin-left: 0;
margin-right: 0;
flex-direction: row !important;
/* Maintain side-by-side layout */
flex-wrap: nowrap !important;
/* Keep images in a row */
overflow: hidden !important;
/* Prevent overflow */
min-width: 0 !important;
}
.image-grid-4 img,
.image-grid-5 img {
max-width: 100% !important;
min-width: 0 !important;
/* Critical for flexbox shrinking */
height: auto !important;
flex-shrink: 1 !important;
box-sizing: border-box !important;
}
/* 2 and 3-image grids: let JavaScript handle height matching */
.image-grid-2 img,
.image-grid-3 img {
max-width: 100% !important;
min-width: 0 !important;
/* Critical for flexbox shrinking */
/* Don't force height: auto - let JavaScript match heights */
flex-shrink: 1 !important;
box-sizing: border-box !important;
}
}
/* Tablet styles - outline hidden, sidebar visible */
@media (min-width: 769px) and (max-width: 1264px) {
/* Sidebar - slightly narrower */
.sidebar {
width: 240px;
}
/* Content - adjust margins */
body>.container {
margin-left: 240px !important;
padding: 1.5rem !important;
width: calc(100% - 240px) !important;
box-sizing: border-box !important;
max-width: 100% !important;
}
/* TOC hidden on tablet */
.col-md-3 {
display: none !important;
}
.col-md-9,
[role="main"] {
padding: 0 !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Content inner wrapper - proper padding on tablet (Material-style) */
.md-content__inner {
padding-left: 1rem !important;
padding-right: 1rem !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
padding-top: 0.5rem;
padding-bottom: 2rem;
}
/* Better typography on tablet */
body {
font-size: 16px;
}
h1 {
font-size: clamp(1.8rem, 3.8vw, 2.1rem);
font-weight: 300;
text-decoration: none;
border-bottom: 0.5px solid currentColor;
padding-bottom: 0.1rem;
}
/* Page title class for tablet */
.page-title,
h1.page-title {
font-size: clamp(2.2rem, 4.5vw, 2.5rem);
font-weight: 200;
border-bottom: none;
padding-bottom: 0;
margin-bottom: 2rem;
}
h2 {
font-size: clamp(1.3rem, 3vw, 1.5rem);
}
h3 {
font-size: clamp(1rem, 2.2vw, 1.2rem);
font-weight: 600;
}
/* Ensure images don't overflow on tablet - Material-style */
.col-md-9 img,
[role="main"] img,
.md-content__inner img {
max-width: 100% !important;
height: auto !important;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Prevent overflow on tablet */
.col-md-9,
[role="main"],
.md-content__inner {
overflow-x: hidden;
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Image grids on tablet - responsive but keep grid layout, match text width */
.image-grid-2,
.image-grid-3,
.image-grid-4,
.image-grid-5 {
flex-direction: row !important;
/* Maintain side-by-side layout */
flex-wrap: nowrap !important;
/* Keep images in a row, don't wrap */
gap: 0.5rem;
max-width: 100% !important;
/* Match text content width */
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
overflow: hidden !important;
/* Prevent overflow */
min-width: 0 !important;
}
.image-grid-4,
.image-grid-5 {
gap: 0.4rem;
}
/* 2 and 3-image grids: let JavaScript handle height matching */
.image-grid-2 img,
.image-grid-3 img {
max-width: 100% !important;
min-width: 0 !important;
/* Critical for flexbox shrinking */
/* Don't force height: auto - let JavaScript match heights */
width: auto !important;
flex-shrink: 1 !important;
box-sizing: border-box !important;
}
/* 4 and 5 image grids need more careful handling on tablet */
.image-grid-4 img,
.image-grid-5 img {
max-width: 100% !important;
min-width: 0 !important;
/* Critical for flexbox shrinking */
/* Don't force height: auto - let JavaScript handle scaling */
width: auto !important;
flex-shrink: 1 !important;
box-sizing: border-box !important;
}
/* Tables responsive on tablet */
.col-md-9 table,
[role="main"] table {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Code blocks responsive on tablet */
.col-md-9 pre,
[role="main"] pre {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Text readability on tablet */
}
/* GLightbox image size constraints - no rounded corners in popup */
.glightbox .gslide-image img {
max-width: 85vw !important;
max-height: 80vh !important;
width: auto !important;
height: auto !important;
object-fit: contain;
margin: auto;
border-radius: 0 !important;
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
}
.glightbox .gslide-media {
max-width: 85vw !important;
max-height: 80vh !important;
padding: 10px;
padding-top: 3rem;
box-sizing: border-box;
}
.glightbox .gslide {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
padding-top: 2rem;
}
/* Ensure lightbox container has padding */
.glightbox .gslide-container {
padding: 1rem;
padding-top: 2rem;
}
/* Hide the image title/caption in lightbox */
.glightbox .gslide-title {
display: none !important;
}
/* GLightbox description/caption styling - dark grey background, light grey text, left-aligned */
.glightbox .gslide-description,
.glightbox .gdesc,
.glightbox .gslide-description-inner,
.glightbox-clean .gslide-title,
.glightbox-clean .gslide-description,
.glightbox-clean .gdesc-inner {
background-color: #1a1a1a !important;
color: #d0d0d0 !important;
font-size: 0.875rem !important;
font-style: italic !important;
padding: 5px !important;
text-align: left !important;
}
[data-theme="dark"] .glightbox .gslide-description,
[data-theme="dark"] .glightbox .gdesc,
[data-theme="dark"] .glightbox .gslide-description-inner,
[data-theme="dark"] .glightbox-clean .gslide-title,
[data-theme="dark"] .glightbox-clean .gslide-description,
[data-theme="dark"] .glightbox-clean .gdesc-inner {
background-color: #1a1a1a !important;
color: #e0e0e0 !important;
}
/* Styling for lightbox image links in reference list */
a.lightbox-image-link {
color: #0066cc !important;
text-decoration: none !important;
cursor: pointer !important;
transition: color 0.2s ease !important;
}
a.lightbox-image-link:hover {
color: #0052a3 !important;
text-decoration: none !important;
}
[data-theme="dark"] a.lightbox-image-link {
color: #4a9eff !important;
}
[data-theme="dark"] a.lightbox-image-link:hover {
color: #6bb3ff !important;
}
/* Grey styling for ALL links on the reference list page (except lightbox-image-link) */
/* Target all external links (http/https) and markdown file links that are not lightbox links */
.col-md-9 a[href^="http"]:not(.lightbox-image-link),
[role="main"] a[href^="http"]:not(.lightbox-image-link),
.md-content__inner a[href^="http"]:not(.lightbox-image-link),
.col-md-9 a[href^="https"]:not(.lightbox-image-link),
[role="main"] a[href^="https"]:not(.lightbox-image-link),
.md-content__inner a[href^="https"]:not(.lightbox-image-link),
/* Also target markdown file links */
.col-md-9 a[href$=".md"]:not(.lightbox-image-link),
[role="main"] a[href$=".md"]:not(.lightbox-image-link),
.md-content__inner a[href$=".md"]:not(.lightbox-image-link) {
color: #888888 !important;
text-decoration: underline !important;
}
.col-md-9 a[href^="http"]:not(.lightbox-image-link):hover,
[role="main"] a[href^="http"]:not(.lightbox-image-link):hover,
.md-content__inner a[href^="http"]:not(.lightbox-image-link):hover,
.col-md-9 a[href^="https"]:not(.lightbox-image-link):hover,
[role="main"] a[href^="https"]:not(.lightbox-image-link):hover,
.md-content__inner a[href^="https"]:not(.lightbox-image-link):hover,
.col-md-9 a[href$=".md"]:not(.lightbox-image-link):hover,
[role="main"] a[href$=".md"]:not(.lightbox-image-link):hover,
.md-content__inner a[href$=".md"]:not(.lightbox-image-link):hover {
color: #666666 !important;
text-decoration: underline !important;
}
[data-theme="dark"] .col-md-9 a[href^="http"]:not(.lightbox-image-link),
[data-theme="dark"] [role="main"] a[href^="http"]:not(.lightbox-image-link),
[data-theme="dark"] .md-content__inner a[href^="http"]:not(.lightbox-image-link),
[data-theme="dark"] .col-md-9 a[href^="https"]:not(.lightbox-image-link),
[data-theme="dark"] [role="main"] a[href^="https"]:not(.lightbox-image-link),
[data-theme="dark"] .md-content__inner a[href^="https"]:not(.lightbox-image-link),
[data-theme="dark"] .col-md-9 a[href$=".md"]:not(.lightbox-image-link),
[data-theme="dark"] [role="main"] a[href$=".md"]:not(.lightbox-image-link),
[data-theme="dark"] .md-content__inner a[href$=".md"]:not(.lightbox-image-link) {
color: #a0a0a0 !important;
}
[data-theme="dark"] .col-md-9 a[href^="http"]:not(.lightbox-image-link):hover,
[data-theme="dark"] [role="main"] a[href^="http"]:not(.lightbox-image-link):hover,
[data-theme="dark"] .md-content__inner a[href^="http"]:not(.lightbox-image-link):hover,
[data-theme="dark"] .col-md-9 a[href^="https"]:not(.lightbox-image-link):hover,
[data-theme="dark"] [role="main"] a[href^="https"]:not(.lightbox-image-link):hover,
[data-theme="dark"] .md-content__inner a[href^="https"]:not(.lightbox-image-link):hover,
[data-theme="dark"] .col-md-9 a[href$=".md"]:not(.lightbox-image-link):hover,
[data-theme="dark"] [role="main"] a[href$=".md"]:not(.lightbox-image-link):hover,
[data-theme="dark"] .md-content__inner a[href$=".md"]:not(.lightbox-image-link):hover {
color: #c0c0c0 !important;
}
/* Grey styling for image URL links in reference list (only external image URLs, not reference section links) */
/* Target links that are image URLs (contain .jpg, .jpeg, .png, .gif, etc.) but exclude reference section links */
.col-md-9 a[href*=".jpg"]:not(.lightbox-image-link),
.col-md-9 a[href*=".jpeg"]:not(.lightbox-image-link),
.col-md-9 a[href*=".png"]:not(.lightbox-image-link),
.col-md-9 a[href*=".gif"]:not(.lightbox-image-link),
.col-md-9 a[href*=".JPG"]:not(.lightbox-image-link),
.col-md-9 a[href*=".JPEG"]:not(.lightbox-image-link),
.col-md-9 a[href*=".PNG"]:not(.lightbox-image-link),
[role="main"] a[href*=".jpg"]:not(.lightbox-image-link),
[role="main"] a[href*=".jpeg"]:not(.lightbox-image-link),
[role="main"] a[href*=".png"]:not(.lightbox-image-link),
[role="main"] a[href*=".gif"]:not(.lightbox-image-link),
[role="main"] a[href*=".JPG"]:not(.lightbox-image-link),
[role="main"] a[href*=".JPEG"]:not(.lightbox-image-link),
[role="main"] a[href*=".PNG"]:not(.lightbox-image-link) {
color: #888888 !important;
text-decoration: underline !important;
}
.col-md-9 a[href*=".jpg"]:not(.lightbox-image-link):hover,
.col-md-9 a[href*=".jpeg"]:not(.lightbox-image-link):hover,
.col-md-9 a[href*=".png"]:not(.lightbox-image-link):hover,
.col-md-9 a[href*=".gif"]:not(.lightbox-image-link):hover,
.col-md-9 a[href*=".JPG"]:not(.lightbox-image-link):hover,
.col-md-9 a[href*=".JPEG"]:not(.lightbox-image-link):hover,
.col-md-9 a[href*=".PNG"]:not(.lightbox-image-link):hover,
[role="main"] a[href*=".jpg"]:not(.lightbox-image-link):hover,
[role="main"] a[href*=".jpeg"]:not(.lightbox-image-link):hover,
[role="main"] a[href*=".png"]:not(.lightbox-image-link):hover,
[role="main"] a[href*=".gif"]:not(.lightbox-image-link):hover,
[role="main"] a[href*=".JPG"]:not(.lightbox-image-link):hover,
[role="main"] a[href*=".JPEG"]:not(.lightbox-image-link):hover,
[role="main"] a[href*=".PNG"]:not(.lightbox-image-link):hover {
color: #666666 !important;
}
[data-theme="dark"] .col-md-9 a[href*=".jpg"]:not(.lightbox-image-link),
[data-theme="dark"] .col-md-9 a[href*=".jpeg"]:not(.lightbox-image-link),
[data-theme="dark"] .col-md-9 a[href*=".png"]:not(.lightbox-image-link),
[data-theme="dark"] .col-md-9 a[href*=".gif"]:not(.lightbox-image-link),
[data-theme="dark"] .col-md-9 a[href*=".JPG"]:not(.lightbox-image-link),
[data-theme="dark"] .col-md-9 a[href*=".JPEG"]:not(.lightbox-image-link),
[data-theme="dark"] .col-md-9 a[href*=".PNG"]:not(.lightbox-image-link),
[data-theme="dark"] [role="main"] a[href*=".jpg"]:not(.lightbox-image-link),
[data-theme="dark"] [role="main"] a[href*=".jpeg"]:not(.lightbox-image-link),
[data-theme="dark"] [role="main"] a[href*=".png"]:not(.lightbox-image-link),
[data-theme="dark"] [role="main"] a[href*=".gif"]:not(.lightbox-image-link),
[data-theme="dark"] [role="main"] a[href*=".JPG"]:not(.lightbox-image-link),
[data-theme="dark"] [role="main"] a[href*=".JPEG"]:not(.lightbox-image-link),
[data-theme="dark"] [role="main"] a[href*=".PNG"]:not(.lightbox-image-link) {
color: #888888 !important;
}
[data-theme="dark"] .col-md-9 a[href*=".jpg"]:not(.lightbox-image-link):hover,
[data-theme="dark"] .col-md-9 a[href*=".jpeg"]:not(.lightbox-image-link):hover,
[data-theme="dark"] .col-md-9 a[href*=".png"]:not(.lightbox-image-link):hover,
[data-theme="dark"] .col-md-9 a[href*=".gif"]:not(.lightbox-image-link):hover,
[data-theme="dark"] .col-md-9 a[href*=".JPG"]:not(.lightbox-image-link):hover,
[data-theme="dark"] .col-md-9 a[href*=".JPEG"]:not(.lightbox-image-link):hover,
[data-theme="dark"] .col-md-9 a[href*=".PNG"]:not(.lightbox-image-link):hover,
[data-theme="dark"] [role="main"] a[href*=".jpg"]:not(.lightbox-image-link):hover,
[data-theme="dark"] [role="main"] a[href*=".jpeg"]:not(.lightbox-image-link):hover,
[data-theme="dark"] [role="main"] a[href*=".png"]:not(.lightbox-image-link):hover,
[data-theme="dark"] [role="main"] a[href*=".gif"]:not(.lightbox-image-link):hover,
[data-theme="dark"] [role="main"] a[href*=".JPG"]:not(.lightbox-image-link):hover,
[data-theme="dark"] [role="main"] a[href*=".JPEG"]:not(.lightbox-image-link):hover,
[data-theme="dark"] [role="main"] a[href*=".PNG"]:not(.lightbox-image-link):hover {
color: #aaaaaa !important;
}
/* Mobile adjustments for lightbox */
@media (max-width: 767px) {
.glightbox .gslide-image img {
max-width: 90vw !important;
max-height: 75vh !important;
border-radius: 0 !important;
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
}
.glightbox .gslide-media {
max-width: 90vw !important;
max-height: 75vh !important;
padding: 10px;
padding-top: 2rem;
}
.glightbox .gslide {
padding: 0.5rem;
padding-top: 1.5rem;
}
.glightbox .gslide-container {
padding-top: 1.5rem;
}
}
/* Mobile responsive styles */
@media (max-width: 767px) {
body {
font-size: 16px;
line-height: 1.6;
}
h1 {
font-size: 2.1rem;
line-height: 1.3;
font-weight: 300;
text-decoration: none;
border-bottom: 0.5px solid currentColor;
padding-bottom: 0.1rem;
}
/* Page title class for tablet (second instance) */
.page-title,
h1.page-title {
font-size: 2.5rem;
font-weight: 200;
border-bottom: none;
padding-bottom: 0;
margin-bottom: 2rem;
}
h2 {
font-size: 1.5rem;
line-height: 1.4;
}
h3 {
font-size: 1.2rem;
line-height: 1.4;
font-weight: 600;
}
/* Better blockquote styling on tablet */
blockquote {
margin: 1.5rem 0;
padding: 1rem 1.5rem;
border-left: 4px solid var(--link-color);
background-color: rgba(0, 0, 0, 0.02);
border-radius: 4px;
}
[data-theme="dark"] blockquote {
background-color: rgba(255, 255, 255, 0.02);
}
/* Prevent horizontal scroll on tablet */
html,
body {
overflow-x: hidden;
max-width: 100%;
}
}
/* Force remove all borders from images - highest priority */
img,
img[src],
img[src*="/files/"],
.md-content img,
.md-content__inner img,
.col-md-9 img,
[role="main"] img,
article img,
p img,
div img,
figure img,
.markdown img {
border: 0 !important;
border-width: 0 !important;
border-style: none !important;
border-color: transparent !important;
outline: 0 !important;
outline-width: 0 !important;
outline-style: none !important;
outline-color: transparent !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background-color: transparent !important;
background: transparent !important;
border-radius: 4px !important;
-webkit-border-radius: 4px !important;
-moz-border-radius: 4px !important;
}
/* Search term highlighting - temporary highlight on page navigation */
mark.search-highlight-temporary {
background-color: #2e7d32 !important;
/* Dark greenish color - Material theme style */
color: #ffffff !important;
padding: 0.1em 0.2em !important;
border-radius: 2px !important;
font-weight: 500 !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
transition: background-color 0.3s ease, opacity 0.3s ease !important;
animation: searchHighlightFade 2s ease-out forwards !important;
}
/* Dark mode search highlight */
[data-theme="dark"] mark.search-highlight-temporary {
background-color: #4caf50 !important;
/* Lighter green for dark mode */
color: #ffffff !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
/* Fade out animation */
@keyframes searchHighlightFade {
0% {
opacity: 1;
}
70% {
opacity: 1;
}
100% {
opacity: 0;
}
}
/* Large screens - outline visible */
@media (min-width: 1265px) {
.col-md-3 {
display: block !important;
}
}
/* Next page button container */
.next-page-button-container {
padding: 2rem 0;
margin-top: 2rem;
border-top: 1px solid var(--sidebar-border);
transition: border-color var(--theme-transition);
}
.next-page-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background-color: rgba(0, 102, 204, 0.1);
color: var(--link-color);
text-decoration: none;
border: none;
border-radius: 4px;
font-size: 1rem;
font-weight: 400;
transition: background-color var(--theme-transition), color var(--theme-transition);
}
.next-page-button:hover {
background-color: rgba(0, 0, 0, 0.05);
color: var(--link-color);
text-decoration: none;
}
.next-page-button:active {
background-color: rgba(0, 0, 0, 0.05);
}
.next-page-button i {
font-size: 0.9rem;
}
[data-theme="dark"] .next-page-button {
background-color: rgba(102, 179, 255, 0.2);
}
[data-theme="dark"] .next-page-button:hover {
background-color: rgba(255, 255, 255, 0.1);
color: var(--link-color);
}
/* Mobile styles for next page button */
@media (max-width: 768px) {
.next-page-button-container {
padding: 1.5rem 1rem;
margin-top: 1.5rem;
}
.next-page-button {
width: 100%;
justify-content: center;
}
}
/* Footer - at bottom of viewport when content is short, below content when long */
footer.col-md-12 {
background-color: var(--bg-color);
border-top: 1px solid var(--header-border);
padding: 1rem 2rem;
margin: 0;
margin-top: auto;
/* Push to bottom when content is short */
transition: background-color var(--theme-transition), border-color var(--theme-transition);
}
footer.col-md-12 hr {
display: none;
/* Hide hr since footer already has border-top */
}
footer.col-md-12 p {
margin: 0.5rem 0;
color: var(--text-color);
font-size: 0.875rem;
transition: color var(--theme-transition);
}
/* SCIE Logo sizing for medium/desktop screens */
@media (min-width: 768px) {
img[src*="scie-logo"] {
max-width: 300px !important;
}
}
/* SCIE Logo sizing for mobile screens */
@media (max-width: 767px) {
img[src*="scie-logo"] {
max-width: 200px !important;
}
}
/* Figure reference styling */
.figure-reference {
font-size: 0.875rem !important;
font-style: italic;
font-weight: 300 !important;
}
[data-theme="dark"] .figure-reference {
color: #c0c0c0 !important;
}
[data-theme="dark"] .figure-reference a {
color: #c0c0c0 !important;
}
/* Back to top button - mobile only */
.back-to-top {
position: fixed;
bottom: 2rem;
right: 1rem;
width: 3rem;
height: 3rem;
background-color: var(--link-color);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
font-size: 1.2rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
z-index: 1000;
transition: opacity 0.3s ease, transform 0.3s ease;
opacity: 0;
transform: scale(0.8);
}
.back-to-top.visible {
display: flex;
opacity: 1;
transform: scale(1);
}
.back-to-top:hover {
background-color: var(--link-hover);
transform: scale(1.1);
}
.back-to-top:active {
transform: scale(0.95);
}
[data-theme="dark"] .back-to-top {
background-color: var(--link-color);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .back-to-top:hover {
background-color: var(--link-hover);
}
/* Show back to top button only on mobile */
@media (max-width: 768px) {
.back-to-top.visible {
display: flex;
}
}
/* Hide on desktop */
@media (min-width: 769px) {
.back-to-top {
display: none !important;
}
}
/* Math equation font scaling */
.MathJax,
.MathJax_Display,
.mjx-container,
.mjx-math,
.katex,
.katex-display {
font-size: 1.1em !important;
}
/* Scale math display blocks ($$ ... $$) */
.MathJax_Display,
.mjx-container[display="true"],
.katex-display {
font-size: 1.1em !important;
}
/* ========================================
TOC SCROLL FIX - Ensure outline card scrolls
======================================== */
#toc-collapse {
max-height: calc(100vh - 150px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
#toc-collapse>.nav {
max-height: none !important;
height: auto !important;
overflow: visible !important;
}
/* Ensure scrolling works on hover state too */
.bs-sidebar:hover #toc-collapse,
.col-md-3:hover #toc-collapse {
max-height: calc(100vh - 150px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}