Demo style fixes

Author: Edwin Hoksberg

App.vue

@@ -57,10 +57,13 @@ export default {
   left: 0;
   right: 0;
   min-height: 300px;
-  background: linear-gradient(90deg, #0359b5ff 0%, #f6ce01ff 100%);
-  opacity: 0.5;
+  background: v-bind(gradient);
   z-index: 0;
 }
+h1 {
+  position: relative;
+  z-index: 1;
+}
 .gpickr {
   margin: 30px 0;
 }

src/VueGpickr.vue

@@ -208,24 +208,22 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep {
-  .vc-sketch {
-    box-shadow: none;
-    padding: 10px;
-    .vc-sketch-presets {
-      display: none;
-    }
-    .vc-sketch-saturation-wrap {
-      overflow: visible;
-    }
-    .vc-saturation-pointer {
-      margin-top: -2px;
-    }
-    .vc-sketch-field {
-      input {
-        text-align: center;
-        padding: 4px 0 3px;
-      }
+:deep(.vc-sketch) {
+  box-shadow: none;
+  padding: 10px;
+  .vc-sketch-presets {
+    display: none;
+  }
+  .vc-sketch-saturation-wrap {
+    overflow: visible;
+  }
+  .vc-saturation-pointer {
+    margin-top: -2px;
+  }
+  .vc-sketch-field {
+    input {
+      text-align: center;
+      padding: 4px 0 3px;
     }
   }
 }