summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--style.css71
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;
}