Partially working

app/ptmvision/static/css/dual-mode-button-style.css

@@ -0,0 +1,41 @@
+/* Buttons in the sidebar menu */
+
+/* Container for the view select buttons */
+#ViewSelector{
+    background-color: gray;
+    font-size: 0px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+#LeftViewSelButton{
+    border-top-left-radius: 50%;
+    border-bottom-left-radius: 50%;
+    width: 10%;
+}
+
+#RightViewSelButton{
+    border-top-right-radius: 50%;
+    border-bottom-right-radius: 50%;
+    width: 10%;
+}
+
+#MiddleViewSelButton{
+    width: 15%;
+}
+
+
+.ViewSelButtons{
+    background-color: rgb(129, 131, 155);
+    margin-left: -1px;
+    margin-right: -1px;
+    border-style: solid;
+    border-color: black;
+    color: black;
+    font-size: large;
+}
+
+.ViewSelButtons:hover{
+    background-color: rgb(159, 162, 196);
+}

app/ptmvision/static/css/molview-style.css

@@ -0,0 +1,19 @@
+/*
+Styling of molecule view window (kekulejs)
+(window opens when pressing on supported ptms in PTMCounts)
+*/
+body {
+    background-color: rgb(126, 149, 153);
+}
+
+.Centered {
+
+    color: #1d1d1d;
+}
+
+#molDisplay{
+    border: 2px solid black;
+    height: 300px;
+    width: 400px;
+    background-color: #FFFFFF;
+}

app/ptmvision/static/css/nav-style.css

@@ -3,6 +3,11 @@ Stylesheet specific for the navigation bar
 */
 
 
+#Navigation img{
+    margin-top: 0.5%;
+}
+
+
 /*The button (image) for opening the navigation menu*/
 #NavOpenButton{
     position: fixed;
@@ -15,12 +20,13 @@ Stylesheet specific for the navigation bar
     position: fixed;
     z-index: 2;
     width: 0;
-    background-color: #fca75d;
+    background-color: gray;
     overflow-x: hidden;
     height: 50%;
     width: 0%;
     transition: 0.1s;
     border-radius: 5px;
+    margin-top: 0.5%;
 }
 
 
@@ -30,7 +36,7 @@ Stylesheet specific for the navigation bar
     text-indent: 5%; /*indent for text, looks nicer*/
 }
 
-#NavBlock p{
+#NavBlock h3{
     text-indent: 5%; /*indent for text, looks nicer*/
 }
 
@@ -53,6 +59,16 @@ Stylesheet specific for the navigation bar
     list-style-type: none;
 }
 
+/*"Select Mode heading, default hidden because of default disabled dual mode"*/
+#NavBlock #ViewSelectorHeading{
+    display: none;
+}
+
+/*View selector buttons, default hidden*/
+#NavBlock #ViewSelector{
+    display: none;
+}
+
 /*Button to close the navigation menu*/
 #NavCloseButton{
     color: white;

app/ptmvision/static/css/ptmvision-header.css

@@ -0,0 +1,73 @@
+header{
+    background-color: gray;
+    height: 60px;
+    display: flex;
+    flex-wrap: nowrap;
+    position: sticky;
+    z-index: 1000;
+    top: 0;
+}
+
+.headerSec {
+    display: flex;  
+    height: 60px;
+    align-self: center;
+
+    /*text setting: */
+    font-family: 'Courier New', Courier, monospace;
+    color: white;
+    font-weight: bold;
+
+}
+
+#HeaderSecLogo {
+    width: 15%;
+    justify-content: center;
+    align-items: stretch;
+}
+
+#HeaderSecError {
+
+    color: #FFFFFF;
+    /*Settings for the positioning of the error msg*/
+    justify-content: center;
+    align-items: center;
+}
+
+
+#HeaderSecSpace {
+    width: 450%;
+}
+
+#HeaderSecDataset {
+    justify-content: flex-end;
+
+    /*Settings for the positioning of the dataset display*/
+    justify-content: center;
+    align-items: center;
+}
+
+#HeaderSecDSTextContainer{
+    display: none;
+}
+
+#HeaderSecDualStatus {
+    /*container settings: */
+    display: flex;
+    flex-direction: column;
+
+}
+
+#HeaderSecDualStatus p{
+    /*alignment settings: */
+    align-self: center;
+    justify-content: center;
+}
+
+#DualModeStatusDot{
+    height: 15px;
+    width: 80%;
+    background-color: #FF3636; /*turn this green or red depending if dual mode is enabled or disabled*/
+    align-self: center;
+
+}

app/ptmvision/static/css/style.css → app/ptmvision/static/css/ptmvision-mainstyle.css

@@ -9,7 +9,7 @@ section{
     width: 95%;
 }
 
-/*TODO: Buttons for changing datasets/comparative view*/
+/*TODO: Buttons for changing datasets/comparative view -> in dual-mode-button-style.css */
 #ModeSelector{
     border: 1px solid black;
 }
@@ -23,10 +23,6 @@ section{
     background-color: #bdbdbd;
 }
 
-#input-data-set-2{
-    display: none;
-}
-
 
 #OverviewSection{
     background-color: #bdbdbd;
@@ -43,7 +39,7 @@ section{
     display: none;
 }
 
-#ModificationDetailsSection{
+#DashboardSection{
     background-color: #bdbdbd;
     display: none;
 }
@@ -52,6 +48,18 @@ section{
     display: flex;
 }
 
+#input-data-set-1{
+    width: 45%;
+}
+
+#input-data-set-2{
+    display: none;
+    width: 45%;
+}
+
+#input-data-y-line{
+    display: none;
+}
 
 /*
 Important for correct select 2 multi select display:

app/ptmvision/static/css/ptmvision-overview.css

@@ -0,0 +1,14 @@
+#Overview{
+    /*Main Overview Chart*/
+    height: 600px;
+    border-style: solid;
+    border-color: black;
+    border-width: 1px;
+}
+
+#PTMCountMolView{
+    /*PTM Count with click interaction*/
+    border-style: solid;
+    border-color: black;
+    border-width: 1px;
+}

app/ptmvision/static/css/ptmvision-protein.css

@@ -0,0 +1,15 @@
+/*
+Style of the proteinview table
+*/
+
+#ProtTable{
+    height: 500px;
+    overflow: hidden;
+}
+
+#ProteinTreemap{
+    height: 800px;
+    border-style: solid;
+    border-color: black;
+    border-width: 1px;
+}