diff options
| -rw-r--r-- | pages/editor.tsx | 22 | ||||
| -rw-r--r-- | styles/editor.css | 31 |
2 files changed, 52 insertions, 1 deletions
diff --git a/pages/editor.tsx b/pages/editor.tsx index 3377149..ee41a27 100644 --- a/pages/editor.tsx +++ b/pages/editor.tsx @@ -1,8 +1,15 @@ import AppBar from '@material-ui/core/AppBar'; +import Fab from '@material-ui/core/Fab'; import Toolbar from '@material-ui/core/Toolbar'; import { PressureIcon } from '../components/icons'; +import FullscreenRoundedIcon from '@material-ui/icons/FullscreenRounded'; +import NavigateBeforeRoundedIcon from '@material-ui/icons/NavigateBeforeRounded'; +import NavigateNextRoundedIcon from '@material-ui/icons/NavigateNextRounded'; +import PauseRoundedIcon from '@material-ui/icons/PauseRounded'; +import SkipPreviousRoundedIcon from '@material-ui/icons/SkipPreviousRounded'; + export default function Index() { return <> <div className='appGrid posabs a0'> @@ -13,7 +20,20 @@ export default function Index() { </Toolbar> </AppBar> <div className='settings'></div> - <div className='viewer'></div> + <div className='viewer'> + <div className='player'></div> + <div className='controls'> + <div className='posabs abscenter'> + <Fab size='small' children={<SkipPreviousRoundedIcon />} /> + <Fab className='playPause' size='medium' children={<PauseRoundedIcon />} /> + <Fab size='small' children={<NavigateBeforeRoundedIcon />} /> + <Fab size='small' children={<NavigateNextRoundedIcon />} /> + </div> + <div className='posabs abscenterv r0'> + <Fab size='small' children={<FullscreenRoundedIcon />} /> + </div> + </div> + </div> <div className='tools'></div> <div className='timeline'></div> </div> diff --git a/styles/editor.css b/styles/editor.css index cfffb71..5b9c7b6 100644 --- a/styles/editor.css +++ b/styles/editor.css @@ -38,3 +38,34 @@ grid-row: 3; background-color: var(--c100); } + +.appGrid .viewer { + display: grid; + grid-template-rows: 1fr 80px; +} + +.appGrid .viewer .controls { + position: relative; +} + +.appGrid .viewer .controls .abscenter { + margin-left: 24px; +} + +.appGrid .viewer .controls .r0 { + margin-right: 16px; +} + +.appGrid .viewer .controls .MuiFab-root.playPause { + background-color: var(--blue); +} + +.appGrid .viewer .controls .MuiFab-root { + color: var(--fg); +} + +.appGrid .viewer .controls .MuiFab-root:not(.playPause) { + background-color: var(--transparent); + box-shadow: none; + margin: 4px; +} |