inking controls changes

1 files changed, 133 insertions, 127 deletions

diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss
index 71c7e9ce0..d132504fc 100644
--- a/src/client/views/InkingCanvas.scss
+++ b/src/client/views/InkingCanvas.scss
@@ -1,141 +1,147 @@
 @import "global_variables";
 .inking-canvas {
-    position: fixed;
-    top: -50000px;
-    left: -50000px; // z-index: 99; //overlays ink on top of everything
-    svg {
-        width: 100000px;
-        height: 100000px;
-        .highlight {
-            mix-blend-mode: multiply;
-        }
+  position: fixed;
+  top: -50000px;
+  left: -50000px; // z-index: 99; //overlays ink on top of everything
+  svg {
+    width: 100000px;
+    height: 100000px;
+    .highlight {
+      mix-blend-mode: multiply;
     }
+  }
 }
 
 .inking-control {
-    position: absolute;
-    left: 70px;
-    bottom: 70px;
-    margin: 0;
-    padding: 0;
+  position: absolute;
+  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;
+    margin-top: 8px;
+    &:focus {
+      outline: none;
+    }
+    &::-webkit-slider-runnable-track {
+      width: 100%;
+      height: 3px;
+      border-radius: 1.5px;
+      cursor: pointer;
+      background: $intermediate-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;
+    background: transparent;
+    color: $light-color;
+  }
+  .ink-panel {
+    margin: 6px 12px 6px 0;
+    height: 30px;
+    vertical-align: middle;
+    line-height: 36px;
+    padding: 0 10px;
+    color: $intermediate-color;
+    &:first {
+      margin-top: 0;
+    }
+  }
+  .ink-tools {
     display: flex;
-    label,
-    input,
-    option {
-        font-size: 12px;
+    background-color: transparent;
+    border-radius: 0;
+    padding: 0;
+    button {
+      height: 36px;
+      padding: 0px;
+      padding-bottom: 3px;
+      margin-left: 10px;
+      background-color: transparent;
+      color: $intermediate-color;
     }
-    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;
-        }
+    button:hover {
+      transform: scale(1.15);
     }
-    input[type=text] {
-        border: none;
-        padding: 0 3px;
+  }
+  .ink-size {
+    display: flex;
+    justify-content: space-between;
+    input[type="text"] {
+      width: 42px;
     }
-    .ink-panel {
-        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;
-        }
+    > * {
+      margin-right: 6px;
+      &:last-child {
+        margin-right: 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-color {
+    display: flex;
+    position: relative;
+    padding-right: 0;
+    label {
+      margin-right: 6px;
     }
-    .ink-size {
-        display: flex;
-        justify-content: space-between;
-        input[type=text] {
-            width: 42px;
-        }
-        >* {
-            margin-right: 6px;
-            &:last-child {
-                margin-right: 0;
-            }
-        }
+    .ink-color-display {
+      border-radius: 11px;
+      width: 22px;
+      height: 22px;
+      margin-top: 6px;
+      cursor: pointer;
+      text-align: center;
+      //   span {
+      //     color: $light-color;
+      //     font-size: 8px;
+      //     user-select: none;
+      //   }
     }
-    .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;
-        }
+    .ink-color-picker {
+      background-color: $light-color;
+      border-radius: 5px;
+      padding: 12px;
+      position: absolute;
+      bottom: 36px;
+      left: -3px;
+      box-shadow: $intermediate-color 0.2vw 0.2vw 0.8vw;
     }
-}
\ No newline at end of file
+  }
+}