diff options
| -rw-r--r-- | style.css | 71 |
1 files changed, 49 insertions, 22 deletions
@@ -1,8 +1,5 @@ body { - color: #eee; margin: 0; - font-family: sans-serif; - font-size: 12px; } .wreck { @@ -22,6 +19,9 @@ body { border: 1px solid #444; pointer-events: none; width: max-content; + font-family: sans-serif; + font-size: 12px; + color: #eee; } .future { @@ -69,30 +69,57 @@ body { background: #14ea6a; } -#wrapper { - display: flex; - width: 100vw; +#container { + width: 100%; height: 100vh; - flex-direction: row; + overflow: hidden; + max-width: unset; } -#container { - position: relative; - overflow: hidden; - flex-grow: 1; +.toolbar-wrap { + max-width: unset; + position: absolute; + width: 26em; + left: -26em; + top: 0; + transition: left 0.3s; + z-index: 10000; } -#toolbar { - background: #222; - padding: 1em; - width: 20%; - max-width: 24em; - min-width: 12em; - border-left: 1px solid #444; - overflow: auto; +.toolbar-wrap.enabled { + left: 0; } -#toolbar a:link, -#toolbar a:visited { - color: #aaa; +.toolbar-wrap button { + position: absolute; + top: 1em; + left: calc(100% + 1em); + background: #282828; + border: 1px solid #504945; + color: #ebdbd2; + padding: 0.5em 0.8em; +} + +.toolbar-wrap button:hover { + background: #504945; +} + +.toolbar-wrap button:active { + background: #665c54; +} + +.toolbar-wrap button:focus, +.toolbar-wrap button:active { + outline: none; +} + +#toolbar { + background: #282828; + padding: 0em 1em; + width: 100%; + max-width: 100%; + border-right: 1px solid #504945; + overflow: auto; + height: 100vh; + box-sizing: border-box; } |