/* NTU SPMS FOP Gallery customizations (injected post-build by update-gallery.ps1) Theme: dark by default, light via toggle (data-theme="light" on ). */ :root { --bg: #0f1115; --surface: #1a1d23; --surface-2: #23262d; --line: #2a2d34; --text: #d6d8dc; --muted: #9aa0a8; --accent: #e8484d; /* SPMS red */ } :root[data-theme="light"] { --bg: #ffffff; --surface: #f2f3f5; --surface-2: #ffffff; --line: #dddddd; --text: #333333; --muted: #666666; } body { background: var(--bg); color: var(--text); } a, h1 a, header h1 a { color: var(--text); } nav.breadcrumbs { border-bottom-color: var(--line); } nav.breadcrumbs a, footer { color: var(--muted); } footer a { color: var(--accent); } /* Theme toggle (injected into header on every page) */ .theme-toggle { background: var(--surface); border: 1px solid var(--line); border-radius: 50%; cursor: pointer; float: right; font-size: 17px; height: 38px; line-height: 1; width: 38px; } /* ---- Justified gallery layout (no-crop, Flickr algorithm) ---------------- */ /* JS partitions items into rows and sets inline width/height on each li so every photo keeps its EXACT aspect ratio - nothing is ever cropped. */ #media { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; } #media li { background: var(--surface); /* placeholder tone while image loads */ border-radius: 8px; contain-intrinsic-size: 320px 320px; content-visibility: auto; cursor: zoom-in; flex: 0 0 auto; /* sizes come from JS inline width/height only */ float: none; margin: 0; max-width: 100%; overflow: hidden; position: relative; } #media a { display: block; height: 100%; width: 100%; } #media img { border-radius: 0; display: block; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; width: 100%; } #media img.loaded { opacity: 1; } @media (hover: hover) { #media li:hover img { transform: scale(1.03); } } #media li:active img { transform: scale(0.98); } /* ---- Control bar --------------------------------------------------------- */ .gallery-controls { align-items: center; color: var(--muted); display: flex; flex-wrap: wrap; font-size: 0.95em; gap: 0.6em 1.8em; margin-bottom: 1.2em; } .gallery-controls .ctl { align-items: center; display: flex; gap: 0.55em; } .gallery-controls input[type="range"] { accent-color: var(--accent); cursor: pointer; width: 150px; } .gallery-controls select { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; color: var(--text); font: inherit; padding: 0.25em 0.4em; } .gallery-controls .val { color: var(--text); font-variant-numeric: tabular-nums; min-width: 4.2em; } /* ---- Back to top ---------------------------------------------------------- */ .back-top { background: var(--accent); border: none; border-radius: 24px; bottom: 18px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4); color: #fff; cursor: pointer; display: none; font-size: 14px; padding: 10px 16px; position: fixed; right: 16px; z-index: 50; } .back-top.show { display: block; } /* ---- Reactions (grid) ---------------------------------------------------- */ .reaction-badge { background: rgba(0, 0, 0, 0.65); border-radius: 10px; bottom: 6px; color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; left: 6px; line-height: 1; padding: 4px 7px; pointer-events: none; position: absolute; white-space: nowrap; z-index: 3; } .react-btn { background: rgba(0, 0, 0, 0.5); border: none; border-radius: 50%; bottom: 8px; color: #fff; cursor: pointer; font-size: 17px; height: 34px; line-height: 1; opacity: 0.65; position: absolute; right: 8px; transition: opacity 0.15s ease, transform 0.15s ease; width: 34px; z-index: 4; } #media li:hover .react-btn, .react-btn:focus, .react-btn.open { opacity: 1; transform: scale(1.1); } @media (hover: none) { .react-btn { font-size: 20px; height: 44px; opacity: 1; width: 44px; } .reaction-picker { bottom: 58px; } .reaction-picker button { min-height: 40px; min-width: 40px; } } .reaction-picker { background: var(--surface-2); border-radius: 22px; bottom: 48px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); display: flex; gap: 2px; padding: 5px 8px; position: absolute; right: 0; z-index: 10; } .reaction-picker button { background: none; border: none; border-radius: 50%; cursor: pointer; font-size: 20px; line-height: 1; padding: 4px; transition: transform 0.12s ease; } .reaction-picker button:hover { transform: scale(1.35); } .reaction-picker button:disabled { cursor: default; filter: grayscale(1); opacity: 0.45; transform: none; } /* ---- Viewer additions ----------------------------------------------------- */ .lg-react-bar { align-items: center; display: flex; gap: 2px; height: 47px; left: 8px; position: absolute; top: 0; z-index: 1084; } .lg-react-bar button { background: none; border: none; cursor: pointer; font-size: 21px; line-height: 1; padding: 4px 6px; transition: transform 0.12s ease; } .lg-react-bar button:hover { transform: scale(1.3); } .lg-react-bar button:disabled { cursor: default; filter: grayscale(1); opacity: 0.45; transform: none; } .lg-outer .lg-counter { margin-left: 275px; } @media (max-width: 560px) { .lg-react-bar { background: rgba(0, 0, 0, 0.5); border-radius: 24px; bottom: 16px; height: auto; left: 50%; padding: 5px 10px; top: auto; transform: translateX(-50%); } .lg-outer.lg-thumb-open .lg-react-bar { bottom: 116px; } .lg-outer .lg-counter { margin-left: 0; } } .lg-speed-ctl { align-items: center; background: rgba(0, 0, 0, 0.5); border-radius: 16px; color: #ddd; display: none; font-size: 12px; gap: 6px; padding: 5px 12px; position: absolute; right: 10px; top: 52px; z-index: 1084; } .lg-outer.lg-show-autoplay .lg-speed-ctl { display: flex; } .lg-speed-ctl input[type="range"] { accent-color: var(--accent); cursor: pointer; width: 110px; } .lg-speed-ctl .val { font-variant-numeric: tabular-nums; min-width: 2.2em; } /* Zoom-style floating emoji */ .float-emoji { animation: floatUp 1.6s ease-out forwards; font-size: 30px; pointer-events: none; position: fixed; z-index: 9999; } @keyframes floatUp { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 20% { transform: translate(var(--driftx, 8px), -12vh) scale(1.35); } 100% { opacity: 0; transform: translate(calc(var(--driftx, 8px) * -1), -45vh) scale(1.75); } } @media (prefers-reduced-motion: reduce) { .float-emoji { animation-duration: 0.01s; } .reaction-picker button, .react-btn, .lg-react-bar button, #media img { transition: none; } }