/* Wrapper anchor added at runtime by lightbox-init.js. Kept block-level and full width so the theme's img.center / .left / .right (margin: auto) alignment keeps working inside the wrapper. */ #post-content a.glightbox { display: block; width: 100%; cursor: zoom-in; } #post-content a.glightbox img { transition: opacity 0.15s ease-in-out; } #post-content a.glightbox:hover img { opacity: 0.85; } @media (prefers-reduced-motion: reduce) { #post-content a.glightbox img { transition: none; } } /* --------------------------------------------------------------------------- Theme the GLightbox overlay to the blog surface (bg-primary in themes/toha/assets/styles/variables.scss), at 97% so the page shows through. Selectors are prefixed with html / html[data-theme='dark'] purely for specificity: GLightbox redeclares these in .glightbox-mobile (class on ) and inside @media blocks, which our prefixed selectors outrank without needing !important. --------------------------------------------------------------------------- */ /* Light mode -------------------------------------------------------------- */ html .goverlay, html .glightbox-mobile .goverlay { background: rgba(248, 250, 252, 0.97); } html .glightbox-clean .gprev path, html .glightbox-clean .gnext path, html .glightbox-clean .gclose path { fill: #334155; } html .glightbox-clean .gprev, html .glightbox-clean .gnext, html .glightbox-clean .gclose { background-color: rgba(15, 23, 42, 0.08); } html .glightbox-clean .gprev:hover, html .glightbox-clean .gnext:hover, html .glightbox-clean .gclose:hover { background-color: rgba(15, 23, 42, 0.18); } html .gloader { border: 2px solid #0891b2; border-right-color: transparent; } html .glightbox-clean .gslide-media { box-shadow: 0 8px 56px rgba(15, 80, 100, 0.16); } html .glightbox-clean .gslide-description { background: transparent; } html .glightbox-clean .gslide-title, html .glightbox-mobile .glightbox-container .gslide-title { font-family: inherit; color: #334155; text-align: center; } /* Dark mode --------------------------------------------------------------- */ html[data-theme='dark'] .goverlay, html[data-theme='dark'] .glightbox-mobile .goverlay { background: rgba(31, 41, 55, 0.97); } html[data-theme='dark'] .glightbox-clean .gprev path, html[data-theme='dark'] .glightbox-clean .gnext path, html[data-theme='dark'] .glightbox-clean .gclose path { fill: #f1f5f9; } html[data-theme='dark'] .glightbox-clean .gprev, html[data-theme='dark'] .glightbox-clean .gnext, html[data-theme='dark'] .glightbox-clean .gclose { background-color: rgba(255, 255, 255, 0.12); } html[data-theme='dark'] .glightbox-clean .gprev:hover, html[data-theme='dark'] .glightbox-clean .gnext:hover, html[data-theme='dark'] .glightbox-clean .gclose:hover { background-color: rgba(255, 255, 255, 0.22); } html[data-theme='dark'] .glightbox-clean .gslide-media { box-shadow: 0 8px 56px rgba(0, 0, 0, 0.45); } html[data-theme='dark'] .glightbox-clean .gslide-title, html[data-theme='dark'] .glightbox-mobile .glightbox-container .gslide-title { color: #f1f5f9; }