Initial commit

client/cssFiles/SEAWebClientGraphics.css

@@ -0,0 +1,198 @@
+.swiper-pagination{
+    pointer-events: none;
+}
+
+.panel.graphics{
+    display: flex;
+    justify-content: flex-end;
+}
+
+.panel.graphics span{
+    margin: 0 1em;
+    display: flex;
+    user-select: none;
+    -webkit-user-select: none;
+}
+
+.panel.graphics div{
+    margin-left: 1em;
+    cursor: pointer;
+}
+
+/*********************/
+.graphs-container{
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-flow: column;
+    margin-top: 30px;
+}
+
+.graph{
+    height: 20%;
+    width: 100%;
+}
+
+.graph-0 {
+    height: 40%;
+}
+
+.selection{
+    display: flex;
+    flex-direction: column;
+    overflow-x: hidden;
+    height: 100%;
+    /*align-items: center;*/
+    width: 100%;
+}
+
+.selection .select{
+    margin: 0.2em;
+    padding: 0.3em;
+    cursor: pointer;
+    display: flex;
+    border-bottom: 1px dashed black;
+}
+
+.selection .select:last-of-type{
+    border-bottom: none;
+}
+
+.selection .select:hover{
+    background-color: #eaeaea;
+}
+
+.selection .select .title{
+    font-weight: 900;
+}
+
+.selection .params{
+    display: flex;
+}
+
+.selection .param{
+    white-space: nowrap;
+    margin: 0 0.4em;
+}
+
+.chart-container{
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+
+.legend{
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    position: absolute;
+    background-color: rgb(255,255,255,0.8);
+    color: #000000;
+    padding: 0.3em;
+    /*transition: left 0.5s, top 0.5s;*/
+    top: 0px;
+    left: 0px;
+    user-select: none;
+    -webkit-user-select: none;
+    cursor: grab;
+    border: 1px solid black;
+}
+
+.legend:active{
+    cursor: grabbing;
+}
+
+body.black .legend{
+    background-color: rgb(0,0,0,0.8);
+    border: none;
+    color: white;
+}
+
+
+.legend .controls{
+
+}
+
+.legend .control{
+    cursor: pointer;
+    display: inline-block;
+}
+
+.legend .vcontrol{
+    clear: both;
+    float: left;
+    border-bottom: 1px solid black;
+    padding-bottom: 0.1em;
+    padding-top: 0.1em;
+}
+
+.legend .subcontrol{
+    cursor: pointer;
+    display: inline-block;
+    padding-bottom: 0.1em;
+    padding-top: 0.1em;
+    color: #777777;
+}
+
+.legend .subcontrol:hover{
+    color: #000000;
+}
+
+.legend .subspacer{
+    display: inline-block;
+    width: 0.2em;
+}
+
+.legend .vcontrol:hover{
+    color: #777777;
+}
+
+.legend .control:last-of-type{
+    border-bottom: none;
+    padding-bottom: 0.3em;
+}
+
+.legendel{
+    cursor: pointer;
+    display: flex;
+    position: relative;
+
+}
+
+.legendel:hover{
+    color: #777777;
+}
+
+.legendel .color{
+    width: 2em;
+    height: 0.1em;
+    margin-top: 0.45em;
+    margin-right: 1em;
+}
+
+.legendel .value{
+    margin-left: 1em;
+}
+
+.legendel.hidden .value{
+    display: none;
+}
+
+/*.legendel.hidden:before{
+    content: '';
+    width: 100%;
+    height: 0.05em;
+    top: 50%;
+    margin-top: -0.025em;
+    background-color: #FFF;
+    position: absolute;
+}*/
+
+.legendel.hidden{
+    opacity: 0.5;
+}
+
+.legendel.hidden .color{
+    opacity: 0;
+}