update CSS template

1 files changed, 99 insertions, 65 deletions

diff --git a/id/server/data/deploy/conf/moa-id/htmlTemplates/css_template.css b/id/server/data/deploy/conf/moa-id/htmlTemplates/css_template.css
index 3fc7f934c..86428fa06 100644
--- a/id/server/data/deploy/conf/moa-id/htmlTemplates/css_template.css
+++ b/id/server/data/deploy/conf/moa-id/htmlTemplates/css_template.css
@@ -1,7 +1,5 @@
 @charset "utf-8";
     body {
-        margin:0;
-        padding:0;
         color : #000;
         background-color : #fff;
         text-align: left;
@@ -15,14 +13,16 @@
     
     #page {
         display: block;
-        margin: auto;
+        margin:auto;
         margin-top: 5%;
+        margin-bottom: 5%;
         position: relative;
         background: rgb(255,255,255);
+        height: 400px;
     }
 			  
     #page1 {
-        text-align: center;
+        text-align: center;           
     }
 			  
     #main {
@@ -45,7 +45,6 @@
     }
     
     #mandateLogin {
-        display:flex;
         flex-direction: row;
         padding-bottom: 1%;
         padding-top: 2%;
@@ -56,7 +55,7 @@
 
    .unvisible {
        display:none;
-      }
+    }
 
     .OA_header {
         font-size: 2.1em;
@@ -65,11 +64,26 @@
         margin-top: 1%;
     }
 
+    .bkuimage {
+        width:70px;
+        height:70px; 
+        padding-right: 4%;
+        padding-top: 4%;
+        padding-bottom: 4%; 
+    }
+
+    #metroDetected {
+        font-size: 0.8em;
+        margin-left: 2%;
+        margin-top: 1%;
+        margin-right:2%;
+    }
+
     #ssoSessionTransferBlock {
         font-size: 0.8em;
         margin-left: 1%;
         margin-bottom: 1%;
-      }
+    }
 
     #processInfoArea {
         margin-bottom: 4%;
@@ -77,9 +91,10 @@
     }
 
     #processSelectionArea {
-        float:left;
-        width: 100%;
+        display:flex;
+        flex-direction: column;
     }
+    
 
     .processSelectionButtonArea {
         width:100%;
@@ -98,44 +113,62 @@
     #bkuselectionarea {
         display:flex; 
         flex-direction: row;
-        margin-top: 2%;
-        text-align:center;
+        justify-content:center;
+        text-align: center;
+    }
+
+    #bkukarte {
+        flex-direction: column;
+        align-items: center;
     }
+    
+    #bkuhandy {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    #bkueulogin {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    #metroDetected {
+        flex-direction: column;    
+    }
+	
 
     .buttonDescription {
-        width: 62%;
-        margin-left: 1%;
-        text-align: left;
+        text-align: center;
+        width: 200px;
     }
     
+    
     #processContent {
         margin-top: 10%;
-      }
+    }
 
     #eIDASSelection {
         width: 120px; 
         margin-right: 5px;        
-      }
-
-    .bkuimage {
-        width: 50%;
     }
 
     input {
         cursor: pointer;  
     }
 
+    input[type=button],input[type=submit] {
+        width: 140px;
+        padding-bottom:6%;
+        align-content: center;
+    }
+      
+
     #bkuselectionarea input[type=button],#bkuselectionarea input[type=submit]{
         font-size: 0.85em;
-        width:65%;
         border:none;
         background-color: transparent;
     }
 
-    #localBKU input {
-        display: inline-block;
-
-    }
 			
     #localBKU input:hover, #localBKU input:focus, #localBKU input:active {
         /*text-decoration: underline;*/
@@ -160,13 +193,6 @@
         font-size: 1.3em;
     }
       
-         
-    #localBKU {
-        padding-bottom: 4%;
-        position: relative;
-        clear: both;     
-        text-align: center;
-    }
     
     #selectArea {
         float:left;
@@ -183,11 +209,8 @@
     }
 
     #leftcontent {
-        width: 70%;
         margin-bottom: 4%;
         text-align: left;
-        border: 1px solid rgb(0,0,0);
-        margin:auto;
     }
 
     .hell {
@@ -201,11 +224,14 @@
     }
 
 @media screen and (min-width: 650px) {
-			        
+   
     #page {
-        width: 660px;
-        height: 460px;
+        width: 500px;
+        height: 400px;
     }
+   .unvisible {
+       display:none;
+      }
         
     #localBKU p {
         font-size: 0.7em;
@@ -238,11 +264,19 @@
         bottom: 0px;
         margin-left: 270px;
         padding-bottom: 10px;
-    }			
+    }	
+        input[type=button],input[type=submit] {
+        width: 150px;
+        align-content: center;
+    }
+        .buttonDescription {
+        width: 70%;
+    }
+      
 }
 
 
-@media screen and (max-width: 649px) {
+@media all and (max-width: 480px) {
 				
     body {
         background-color:#fff;
@@ -250,7 +284,6 @@
                 	  
     #page {
         visibility: hidden;
-        margin-top: 0%;
     }
 			  
     #page1 {
@@ -264,6 +297,31 @@
     #validation {
         visibility: hidden;
         display: none;
+    } 
+    
+    .bkuimage {
+        width:50px;
+        height:50px;
+        padding-right: 2%;
+        padding-bottom: 2%;
+    }
+    
+    #bkukarte {
+        flex-direction: column;
+        justify-content: center;
+        text-align: center;
+    }
+    
+    #bkuhandy {
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+    }
+    
+    #bkueulogin {
+        flex-direction: column;
+        justify-content: center;
+        text-align: center;
     }
 			  
     .OA_header {
@@ -299,9 +357,6 @@
         margin-bottom: 2%;
     }
     
-    .bkuimage {
-        width: 40%;
-    }
     		        
     .setAssertionButton_full {
         background: #efefef;
@@ -312,30 +367,9 @@
     }
        
     input[type=button],input[type=submit] {
-        width:65%;
-    }
-      
-    #processInfoArea {
-        margin-bottom: 4%;
-        margin-top: 4%;
+        width: 80px;
     }
 
-    #processSelectionArea {
-        flaot:left;
-        width: 100%;
-    }
-
-    .processSelectionButton {
-        flaot:left;
-        height: 10%;
-        width: 2%;
-    }
-
-    .buttonDescription {
-        float: left;
-        width: 70%;
-        text-align: left;
-    }
     
     #processContent {
         margin-top: 10%;