Search and search switches are functional

view-webapp/src/main/sass/tour.scss

@@ -48,6 +48,16 @@
   }
 
   /* registration section */
+
+  #player {
+    &.create .edition {
+      display: none;
+    }
+    &.edit .creation {
+      display: none;
+    }
+  }
+
   #player-form {
     &:not(.add) {
       #search-form, #search-result {
@@ -57,6 +67,42 @@
   }
   #search-form {
     position: relative;
+    .toggle {
+      cursor: pointer;
+      input {
+        display: none;
+      }
+      label {
+        display: block;
+        text-align: center;
+        cursor: pointer;
+      }
+      .checkbox {
+        width: 50px;
+        height: 26px;
+        border-radius: 18px;
+        background-color: #F7D6A3;
+        display: flex;
+        align-items: center;
+        padding-left: 5px;
+        padding-right: 5px;
+        cursor: pointer;
+        .circle {
+          background-color: #6B5E8A;
+          transform: translateX(0px);
+          border-radius: 50%;
+          width: 20px;
+          height: 20px;
+          transition: 300ms;
+        }
+      }
+      input:checked + .checkbox {
+        background-color: rgb(218, 114, 80);
+        .circle {
+          transform: translateX(20px);
+        }
+      }
+    }
   }
   #search-result {
     position: absolute;
@@ -66,9 +112,14 @@
     top: 100%;
     padding: 1em;
     overflow-y: auto;
-    &.hidden {
+    &:empty {
       display: none;
     }
+    .result-line {
+      cursor: pointer;
+      &:hover {
+        background-color: rgba(100,200,255,200);
+      }
+    }
   }
-
 }