Function makeTopIcon

public/js/filePreview.js:528–562

(name, title)

// Topbar icon (theme-aware) used for image tools + video actions
function makeTopIcon(name, title) {
  const b = document.createElement('button');
  b.className = 'material-icons';
  b.textContent = name;
  b.title = title;

  const dark = document.documentElement.classList.contains('dark-mode');

  Object.assign(b.style, {
    width: '32px',
    height: '32px',
    borderRadius: '8px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    border: dark ? '1px solid rgba(255,255,255,.25)' : '1px solid rgba(0,0,0,.15)',
    background: dark ? 'rgba(255,255,255,.14)' : 'rgba(0,0,0,.08)',
    cursor: 'pointer',
    fontSize: '20px',
    lineHeight: '1',
    color: dark ? '#f5f5f5' : '#111',
    boxShadow: dark ? '0 1px 2px rgba(0,0,0,.6)' : '0 1px 1px rgba(0,0,0,.08)'
  });

  b.addEventListener('mouseenter', () => {
    const darkNow = document.documentElement.classList.contains('dark-mode');
    b.style.background = darkNow ? 'rgba(255,255,255,.22)' : 'rgba(0,0,0,.14)';
  });
  b.addEventListener('mouseleave', () => {
    const darkNow = document.documentElement.classList.contains('dark-mode');
    b.style.background = darkNow ? 'rgba(255,255,255,.14)' : 'rgba(0,0,0,.08)';
  });

  return b;
}

function setNavVisibility(overlay, showPrev, showNext) {
  const prev = overlay.querySelector('.nav-left');