- overriding of vuetify's v-switch styles to fulfill general design r…

…equirements

frontend/src/components/malltalk/setup/EnterNameAndVisibility.vue

@@ -13,7 +13,7 @@
     />
     <!-- todo: manage values as maxlength globally? -->
 
-    <v-switch v-model="tableSettings.isPrivate" label="Privat" color="#4caf50" inset hide-details />
+    <v-switch v-model="tableSettings.isPrivate" label="Privat" color="#4caf50" hide-details />
 
     <SimpleButton type="submit" class="mt-12" :label="submitText" />
   </form>
@@ -43,4 +43,56 @@ const onNext = () => {
 .flat-text-field .v-field--variant-solo-filled {
   box-shadow: none !important;
 }
+
+.v-switch {
+  --switch-color: #1976d2; // Test blue color
+  --switch-color-active: #ff0000; // Test Red color for active state
+
+  // Overriding of track style and size
+  :deep(.v-switch__track) {
+    border: 3px solid var(--switch-color);
+    background-color: transparent !important;
+    height: 22px !important;
+    width: 54px !important;
+  }
+  :deep(.v-switch__thumb-container) {
+    &::before {
+      background-color: transparent !important;
+    }
+  }
+
+  // Overriding of thumb's general style
+  :deep(.v-switch__thumb) {
+    background-color: var(--switch-color) !important;
+    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1); // todo: ist das wirklich notwenidg?
+    width: 12px !important;
+    height: 12px !important;
+
+    box-shadow: none !important;
+
+    //&::before {
+    //  opacity: 0 !important;
+    //}
+  }
+
+  // Correction of the thumb's positions
+  :deep(.v-selection-control__input) {
+    transform: translateX(-8px) !important;
+  }
+  &:deep(.v-selection-control--dirty .v-selection-control__input) {
+    transform: translateX(8px) !important;
+  }
+
+  // Overriding of thumb's hover colors and opacity
+  :deep(.v-selection-control__input:hover::before) {
+    background-color: var(--switch-color) !important;
+    color: var(--switch-color) !important;
+    caret-color: var(--switch-color) !important;
+    opacity: 0.1;
+  }
+  :deep(.v-ripple__container) {
+    opacity: 0 !important;
+  }
+}
+
 </style>