diff --git a/css/apple2.css b/css/apple2.css index 4bf9f06..97891d0 100644 --- a/css/apple2.css +++ b/css/apple2.css @@ -77,7 +77,11 @@ body { border-radius: 10px; } -.zoomwindow { +.full-page { + background: black; +} + +.full-page #display { width: 100vw; height: 68.5714vw; /* 384px / 560px * 100% */ max-height: 100vh; @@ -94,28 +98,28 @@ body { margin: auto !important; } -.maxhw { - width: 100%; - height: 100%; -} - -.flexbox-centering { +.full-page .overscan { + margin: initial; + padding: 0; + width: initial; + height: 384px; + border: 0; + border-radius: 0; height: 100%; display: flex; justify-content: center; align-items: center; - background: green; } -.hidden { - display: none !important; -} - -.fillparent { +.full-page #screen { width: 100%; height: 100%; } +.full-page #header, .full-page .inset, .full-page #reset { + display: none; +} + #power { padding: 2px; border: 1px inset #888; diff --git a/js/ui/apple2.js b/js/ui/apple2.js index c399d08..efa8ec4 100644 --- a/js/ui/apple2.js +++ b/js/ui/apple2.js @@ -531,13 +531,7 @@ function _keydown(evt) { } else if (evt.keyCode === 113) { // F2 - Full Screen var elem = document.getElementById('screen'); if (evt.shiftKey) { // Full window, but not full screen - document.querySelector('#display').classList.toggle('zoomwindow'); - document.querySelector('#display > div').classList.toggle('overscan'); - document.querySelector('#display > div').classList.toggle('flexbox-centering'); - document.querySelector('#screen').classList.toggle('maxhw'); - document.querySelector('#header').classList.toggle('hidden'); - document.querySelectorAll('.inset').forEach(function(el) { el.classList.toggle('hidden'); }); - document.querySelector('#reset').classList.toggle('hidden'); + document.body.classList.toggle('full-page'); } else if (document.webkitCancelFullScreen) { if (document.webkitIsFullScreen) { document.webkitCancelFullScreen();