Reworked toolbar in view page

1 files changed, 49 insertions, 22 deletions

diff --git a/style.css b/style.css
index 2011038..8d42cd7 100644
--- a/style.css
+++ b/style.css
@@ -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;
 }