diff options
| -rw-r--r-- | pages/editor.tsx | 5 | ||||
| -rw-r--r-- | styles/editor.css | 23 |
2 files changed, 27 insertions, 1 deletions
diff --git a/pages/editor.tsx b/pages/editor.tsx index ee41a27..c550eac 100644 --- a/pages/editor.tsx +++ b/pages/editor.tsx @@ -21,7 +21,10 @@ export default function Index() { </AppBar> <div className='settings'></div> <div className='viewer'> - <div className='player'></div> + <div className='player posrel'> + <div className='outer posabs abscenter'> + </div> + </div> <div className='controls'> <div className='posabs abscenter'> <Fab size='small' children={<SkipPreviousRoundedIcon />} /> diff --git a/styles/editor.css b/styles/editor.css index 5b9c7b6..a25108d 100644 --- a/styles/editor.css +++ b/styles/editor.css @@ -8,6 +8,7 @@ display: grid; grid-template-columns: 240px 1fr; grid-template-rows: auto 1fr 210px; + overflow: hidden; } .appGrid header { @@ -44,6 +45,28 @@ grid-template-rows: 1fr 80px; } +.appGrid .viewer .player { + margin: 16px; + margin-bottom: 0px; +} + +.appGrid .viewer .player .outer { + border: 8px solid var(--piss); + border-radius: 8px; +} + +.appGrid .viewer .player { + --aspect-ratio-h: 16; + --aspect-ratio-v: 9; +} + +.appGrid .viewer .player .outer { + aspect-ratio: 16 / 9; + max-width: 100%; + max-height: 100%; + width: 100%; +} + .appGrid .viewer .controls { position: relative; } |