inking ui improvements

1 files changed, 115 insertions, 6 deletions

diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss
index f654b194b..71c7e9ce0 100644
--- a/src/client/views/InkingCanvas.scss
+++ b/src/client/views/InkingCanvas.scss
@@ -1,3 +1,4 @@
+@import "global_variables";
 .inking-canvas {
     position: fixed;
     top: -50000px;
@@ -13,20 +14,128 @@
 
 .inking-control {
     position: absolute;
-    right: 0;
-    bottom: 75px;
-    text-align: right;
+    left: 70px;
+    bottom: 70px;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    label,
+    input,
+    option {
+        font-size: 12px;
+    }
+    input[type=range] {
+        -webkit-appearance: none;
+        background-color: transparent;
+        vertical-align: middle;
+        &:focus {
+            outline: none;
+        }
+        &::-webkit-slider-runnable-track {
+            width: 100%;
+            height: 3px;
+            border-radius: 1.5px;
+            cursor: pointer;
+            background: $light-color;
+        }
+        &::-webkit-slider-thumb {
+            height: 12px;
+            width: 12px;
+            border: 1px solid $intermediate-color;
+            border-radius: 6px;
+            background: $light-color;
+            cursor: pointer;
+            -webkit-appearance: none;
+            margin-top: -4px;
+        }
+        &::-moz-range-track {
+            width: 100%;
+            height: 3px;
+            border-radius: 1.5px;
+            cursor: pointer;
+            background: $light-color;
+        }
+        &::-moz-range-thumb {
+            height: 12px;
+            width: 12px;
+            border: 1px solid $intermediate-color;
+            border-radius: 6px;
+            background: $light-color;
+            cursor: pointer;
+            -webkit-appearance: none;
+            margin-top: -4px;
+        }
+    }
+    input[type=text] {
+        border: none;
+        padding: 0 3px;
+    }
     .ink-panel {
-        margin-top: 12px;
+        margin: 12px 18px 0 0;
+        height: 36px;
+        vertical-align: middle;
+        line-height: 36px;
+        padding: 0 10px;
+        background-color: $dark-color;
+        color: $light-color;
+        border-radius: 18px;
         &:first {
             margin-top: 0;
         }
     }
+    .ink-tools {
+        display: flex;
+        background-color: transparent;
+        border-radius: 0;
+        padding: 0;
+        button {
+            height: 36px;
+            border-radius: 18px;
+            margin-right: 6px;
+            padding: 0 16px;
+            font-size: 50%;
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
     .ink-size {
         display: flex;
         justify-content: space-between;
-        input {
-            width: 85%;
+        input[type=text] {
+            width: 42px;
+        }
+        >* {
+            margin-right: 6px;
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+    .ink-color {
+        display: flex;
+        position: relative;
+        padding-right: 0;
+        .ink-color-display {
+            width: 60px;
+            height: 100%;
+            border-radius: 0 18px 18px 0;
+            margin-left: 6px;
+            cursor: pointer;
+            text-align: center;
+            span {
+                color: $light-color;
+                font-size: 8px;
+                user-select: none;
+            }
+        }
+        .ink-color-picker {
+            background-color: $dark-color;
+            border-radius: 5px;
+            padding: 6px;
+            position: absolute;
+            bottom: 42px;
+            left: 0;
         }
     }
 }
\ No newline at end of file