1 files changed, 20 insertions, 21 deletions

diff --git a/electron/src/renderer/assets/style/simulator.css b/electron/src/renderer/assets/style/simulator.css
index 64047a7e..e938cbe3 100644
--- a/electron/src/renderer/assets/style/simulator.css
+++ b/electron/src/renderer/assets/style/simulator.css
@@ -5,11 +5,10 @@
  * Licensed under the GNU GPL version 3.0 or later.  See the file LICENSE for details.
  *
  */
-
-* {
-  box-sizing: border-box;
+ * {
+    padding: 1px;
+    margin: 1px;
 }
-
 .loading-icon {
   text-align: center;
   margin-bottom: 1rem;
@@ -32,7 +31,7 @@ button {
   align-items: flex-start;
   text-align: center;
   cursor: default;
-  background-color: buttonface;
+  background: linear-gradient(0deg, rgba(169,169,169,1) 0%, rgba(255,255,255,1) 68%, rgba(227,227,227,1) 100%);
   box-sizing: border-box;
   padding: 2px 6px 3px;
   border-width: 2px;
@@ -183,7 +182,7 @@ button.pressed {
 }
 
 .vue-slider {
-  height: 25px !important;
+  height: 10px !important;
   margin-bottom: 14px;
 }
 
@@ -203,7 +202,7 @@ button.pressed {
   margin-right: 10px;
 }
 
-.slider-container::v-deep .vue-slider-mark-step {
+.slider-container :deep(.vue-slider-mark-step) {
   width: 2px;
   height: 20px;
   border-radius: 2px;
@@ -212,26 +211,26 @@ button.pressed {
   box-shadow: inset 1px 0 1px #ffffffbd, inset -1px 0 1px black;
 }
 
-.slider-container::v-deep .vue-slider-mark:first-child .vue-slider-mark-step,
-.slider-container::v-deep .vue-slider-mark:last-child .vue-slider-mark-step {
+.slider-container :deep(.vue-slider-mark:first-child .vue-slider-mark-step),
+.slider-container :deep(.vue-slider-mark:last-child .vue-slider-mark-step) {
   display: block;
 }
 
-.slider-container::v-deep .vue-slider-rail {
+.slider-container :deep(.vue-slider-rail) {
   border: 1px solid #dedede;
 }
 
-.slider-container::v-deep .vue-slider-process {
+.slider-container  :deep(.vue-slider-process) {
   border-radius: 0;
   box-shadow: inset 0px 2px 2px #ffffff80, inset 0px -2px 2px #0000002e;
 }
 
-.slider-container::v-deep .vue-slider-process:first-child {
+.slider-container  :deep(.vue-slider-process:first-child) {
   border-top-left-radius: 15px;
   border-bottom-left-radius: 15px;
 }
 
-.slider-container::v-deep .vue-slider-process:nth-last-child(3) {
+.slider-container  :deep(.vue-slider-process:nth-last-child(3)) {
   border-top-right-radius: 15px;
   border-bottom-right-radius: 15px;
 }
@@ -247,20 +246,20 @@ button.pressed {
 }
 
 .slider-label-trim {
-  transform: scale(1, 0.75) translate(-50%, -9px);
+  transform: scale(1, 0.75) translate(-50%, -9px) !important;;
 }
 
 .slider-label-stop {
   font-size: 1.2rem;
-  transform: translate(-50%, 12px);
+  transform: translate(-50%, 12px) !important;;
 }
 
 .slider-label-jump {
-  transform: translate(-50%, -50px);
+  transform: translate(-50%, -50px) !important;;
 }
 
 .slider-label-color-change {
-  transform: translate(-50%, 10px);
+  transform: translate(-50%, 10px) !important;;
 }
 
 .current-stitch-input {
@@ -286,23 +285,23 @@ button.pressed {
 /* we need ::v-deep here because the svg tag is added by svg.js and so Vue
    can't add the data-v-* attribute
  */
-div.simulator::v-deep svg.simulation {
+div.simulator  :deep(svg.simulation) {
   flex-grow: 1;
   flex-shrink: 1;
   order: -2;
   margin-bottom: -48px;
 }
 
-div.simulator::v-deep svg.simulation-scale {
+div.simulator :deep(svg.simulation-scale) {
   height: 50px;
   order: -1;
   margin-left: 5px;
 }
 
-div.simulator::v-deep .simulation-scale-label {
+div.simulator  :deep(.simulation-scale-label) {
   font-size: 14px;
 }
 
-div.simulator::v-deep .cursor {
+div.simulator  :deep(.cursor) {
   /* not sure what to add here to make it more visible */
 }