/* ============================================================================ OFFICE-KLAS — MOBILE-RESPONSIVE PASS 1 Gedeeld door alle templates. Link in : ============================================================================ */ /* ---------- Mission-panel onder op smaller scherm ---------- */ @media (max-width: 1100px) { body.lesson-mode { padding-right: 0 !important; padding-bottom: 320px !important; } .mission-panel { top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 320px !important; border-left: none !important; border-top: 1px solid #e1dfdd; z-index: 100; transition: transform 0.3s ease; } .mission-panel.is-collapsed { transform: translateY(calc(100% - 56px)); } .mission-panel.is-collapsed .mission-body { pointer-events: none; } /* In/uitklap-knop wordt door JS toegevoegd; valt terug op CSS-only ::before */ .mission-panel-toggle { position: absolute; top: 8px; right: 12px; background: #2b579a; color: white; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 20px; z-index: 5; box-shadow: 0 2px 6px rgba(0,0,0,0.18); display: flex; align-items: center; justify-content: center; } .mission-panel.is-collapsed .mission-panel-toggle::after { content: '▲'; } .mission-panel:not(.is-collapsed) .mission-panel-toggle::after { content: '▼'; } .mission-panel-toggle:not(:empty)::after { content: ''; } } /* ---------- Onder 720px: ribbon scrollt + labels weg ---------- */ @media (max-width: 720px) { .ribbon, .ribbon-content, .rib-tabs, .ribbon-section { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .rib-btn .label, .rib-btn .label-2line, .rib-btn span:not(.icon) { display: none; } .rib-btn { min-width: 40px; padding: 6px; } /* Topbar compacter */ .m365-topbar, .top-bar, .ttl-bar { padding: 0 8px; } /* Outlook drie-koloms naar één */ .outlook-grid, .mail-grid { grid-template-columns: 1fr !important; } .folders-col, .mailbox-col { display: none; } .reading-col { width: 100%; } } /* ---------- Touch-targets: minimum 36×36 ---------- */ @media (pointer: coarse), (hover: none) { button:not(.fb-icon), .nav-item, .rail-item, .quick-btn, .rib-btn, .m365-side-icon, .backstage-menu-item, [role="button"], .mb-btn { min-height: 36px; min-width: 36px; } /* Dropdown-items + listitem in mailbox/files-lijst groter */ .rib-menu-item, .mail-row, .file-row, .channel-item { min-height: 40px; padding-top: 8px; padding-bottom: 8px; } } /* ---------- Hint + voorlees-button extra duidelijk op touch ---------- */ @media (pointer: coarse) { #hint-btn { padding: 12px 16px; font-size: 13px; } #voorlees-btn { width: 36px !important; height: 36px !important; } } /* ---------- Print: portfolio-print mode ---------- */ @media print { .mission-panel, .ribbon, .quick-btn, .rib-btn, .backstage-menu, .top-bar, .m365-topbar { display: none !important; } body.lesson-mode { padding: 0 !important; } .page, .pages-wrapper, .slide { box-shadow: none !important; margin: 0 !important; } }