major rework

- modified chartjs for better zoom on touchpad
- flexible number of charts
- handle bool as checkbox
- handle enum as select (pull down menu)
- disable swiper where not needed
and many more

client/cssFiles/SEAWebClientGraphics.css

@@ -87,7 +87,9 @@
     flex-direction: column;
     flex-wrap: wrap;
     position: absolute;
-    background-color: rgb(255,255,255,0.8);
+    /* background-color: rgb(255,255,255,0.7); */
+    background-color: white;
+    opacity: 0.7;
     color: #000000;
     padding: 0.3em;
     /*transition: left 0.5s, top 0.5s;*/
@@ -96,22 +98,39 @@
     user-select: none;
     -webkit-user-select: none;
     cursor: grab;
-    border: 1px solid black;
+    border: 1px solid #777777;
 }
 
 .legend:active{
     cursor: grabbing;
 }
+.legend:hover {
+    opacity: 1;
+}
+
+.legendanchor {
+  border: solid black;
+  border-width: 0 1px 1px 0;
+  display: none;
+  position: absolute;
+  padding: 7px;
+  transform: rotate(-45deg) translate(-7px, -3px);
+  -webkit-transform: rotate(-45deg) translateX(-7px, -3px);
+}
+
 
 body.black .legend{
-    background-color: rgb(0,0,0,0.8);
+    /*background-color: rgb(0,0,0,0.8);*/
+    background-color: black;
+    opacity: 0.7;
     border: none;
     color: white;
 }
 
 
 .legend .controls{
-
+    display: inline-block;
+    float: left;
 }
 
 .legend .control{
@@ -119,32 +138,53 @@ body.black .legend{
     display: inline-block;
 }
 
+/*
 .legend .vcontrol{
     clear: both;
     float: left;
-    border-bottom: 1px solid black;
     padding-bottom: 0.1em;
     padding-top: 0.1em;
 }
+*/
 
-.legend .subcontrol{
+.legend .spacer {
+    width: 0.5em;
+    display: inline-block;
+}
+
+.hidebox{
+    display: inline-block;
     cursor: pointer;
-    display: inline-block;
-    padding-bottom: 0.1em;
-    padding-top: 0.1em;
-    color: #777777;
+    float: right;
 }
 
-.legend .subcontrol:hover{
-    color: #000000;
+.dselect{
+    /*display: flex; */
+    cursor: pointer;
+    float: right;
+    background-color: #dddddd;
+    padding: 2px;
+    /*z-index: 10; */
+    position: absolute;
+    top: 3px;
+    right: 3px;
 }
 
-.legend .subspacer{
-    display: inline-block;
-    width: 0.2em;
+.dselect:hover{
+     opacity: 0.5;
 }
 
-.legend .vcontrol:hover{
+.cursorline{
+    display: none;
+    background-color: black;
+    position: absolute;
+    top: 0px;
+    left: 100px;
+    width: 2px;
+    height: 1000px;
+}
+
+.legend .control:hover{
     color: #777777;
 }
 
@@ -153,33 +193,32 @@ body.black .legend{
     padding-bottom: 0.3em;
 }
 
-.legendel{
+.legendrow{
     cursor: pointer;
-    display: flex;
-    position: relative;
-
 }
 
-.legendel:hover{
+.legendrow:hover{
     color: #777777;
 }
 
-.legendel .color{
+.legendrow .colorline{
     width: 2em;
-    height: 0.1em;
-    margin-top: 0.45em;
+    height: 2px;
+    margin-bootom: 0.45em;
     margin-right: 1em;
 }
 
-.legendel .value{
+.value{
     margin-left: 1em;
+    min-width: 3em
 }
 
-.legendel.hidden .value{
+/*
+.legendrow.hidden .value{
     display: none;
 }
 
-/*.legendel.hidden:before{
+.legendel.hidden:before{
     content: '';
     width: 100%;
     height: 0.05em;
@@ -187,12 +226,13 @@ body.black .legend{
     margin-top: -0.025em;
     background-color: #FFF;
     position: absolute;
-}*/
+}
 
 .legendel.hidden{
     opacity: 0.5;
 }
 
-.legendel.hidden .color{
+.legendel.hidden .colorline{
     opacity: 0;
 }
+*/

client/cssFiles/SEAWebClientSwiper.css

@@ -14,6 +14,10 @@
 	padding-bottom: 30px;
 }
 
+.swiper-button-prev.swiper-button-disabled,
+.swiper-button-next.swiper-button-disabled {
+  opacity: 0;
+}
 /* %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */
 /* PANEL */
 .panel {