added color picker (bit buggy)

1 files changed, 60 insertions, 1 deletions

diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss
index f600ff637..2641cdfd2 100644
--- a/src/mobile/MobileMenu.scss
+++ b/src/mobile/MobileMenu.scss
@@ -237,7 +237,7 @@ body {
     border-style: solid;
     border-radius: 50px;
     border-width: medium;
-    margin: 10px;
+    margin: 20px;
     z-index: 100;
 }
 
@@ -295,4 +295,63 @@ body {
     text-align: center;
     user-select: none;
     z-index: 99;
+}
+
+.toolbar {
+    left: 50%;
+    transform: translate(-50%);
+    position: absolute;
+    height: max-content;
+    top: 0px;
+    border-radius: 20px;
+    background-color: lightgrey;
+    opacity: 0;
+    transition: all 400ms ease 50ms;
+}
+
+.toolbar.active {
+    display: inline-block;
+    width: fit-content;
+    padding: 5px;
+    opacity: 1;
+    height: max-content;
+    top: -450px;
+}
+
+.toolbar .colorSelector {
+    display: inline-flex;
+    width: fit-content;
+    padding: 5px;
+    height: max-content;
+    pointer-events: all;
+}
+
+.widthSelector {
+    display: inline-flex;
+    width: 90%;
+    height: 100px;
+    padding: 5px;
+}
+
+.slider {
+    -webkit-appearance: none;
+    /* Override default CSS styles */
+    appearance: none;
+    width: 100%;
+    /* Full-width */
+    height: 25px;
+    /* Specified height */
+    background: #d3d3d3;
+    /* Grey background */
+    outline: none;
+    /* Remove outline */
+}
+
+.colorButton {
+    width: 70px;
+    margin: 10px;
+    height: 70px;
+    border-style: solid;
+    border-width: 3px;
+    border-radius: 100%;
 }
\ No newline at end of file