pen tools styling and tooltips

1 files changed, 133 insertions, 132 deletions

diff --git a/src/client/views/InkingCanvas.scss b/src/client/views/InkingCanvas.scss
index d132504fc..d76861be1 100644
--- a/src/client/views/InkingCanvas.scss
+++ b/src/client/views/InkingCanvas.scss
@@ -1,147 +1,148 @@
 @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;
-  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;
-    background-color: transparent;
-    border-radius: 0;
+    position: absolute;
+    left: 70px;
+    bottom: 70px;
+    margin: 0;
     padding: 0;
-    button {
-      height: 36px;
-      padding: 0px;
-      padding-bottom: 3px;
-      margin-left: 10px;
-      background-color: transparent;
-      color: $intermediate-color;
+    display: flex;
+    label,
+    input,
+    option {
+        font-size: 12px;
     }
-    button:hover {
-      transform: scale(1.15);
+    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;
+        }
     }
-  }
-  .ink-size {
-    display: flex;
-    justify-content: space-between;
     input[type="text"] {
-      width: 42px;
+        border: none;
+        padding: 0 0px;
+        background: transparent;
+        color: $dark-color;
+        font-size: 12px;
+        margin-top: 4px;
     }
-    > * {
-      margin-right: 6px;
-      &:last-child {
-        margin-right: 0;
-      }
+    .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-color {
-    display: flex;
-    position: relative;
-    padding-right: 0;
-    label {
-      margin-right: 6px;
+    .ink-tools {
+        display: flex;
+        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;
+        }
+        button:hover {
+            transform: scale(1.15);
+        }
     }
-    .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-size {
+        display: flex;
+        justify-content: space-between;
+        input[type="text"] {
+            width: 42px;
+        }
+        >* {
+            margin-right: 6px;
+            &:last-child {
+                margin-right: 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;
+    .ink-color {
+        display: flex;
+        position: relative;
+        padding-right: 0;
+        label {
+            margin-right: 6px;
+        }
+        .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-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