Template:SJTU-BioX-Shanghai/interlab CSS

/******************This is the css code for content template********************************/

/* basic settings */

  1. home_logo, #sideMenu { display:none; }

#sideMenu, #top_title, .patrollink {display:none;} #content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;} body {background-color:white; } #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } 

       #bodyContent a[href ^="https://"], .link-https{padding:0;}

.content{ 

   width: 100%;
   height:auto !important;
   overflow: hidden;
   padding-top:10px;
   background-color: rgba(241,240,225, 0.7);

}


/*****************************content nav**********************************/ .content_nav{ 

   position: fixed;   
   width: 22vw;
   height: 100vh;
   z-index: 99;

}

.content_nav ul{ 

   list-style: none;
   padding: 0;
   margin:0;

}

.content_nav li{ 

   padding: 0;
   margin:0;

}

.content_nav a{ 

   text-decoration: none;
   color:black;
   cursor:pointer;

}


.container_of_content_nav_item{ 

   width: 125%;
   
   height: 100vh; 
   border:none;
   margin-left: -1vw;
   
   z-index: 99997;

}

.content_nav_top{ 

   width: 100%;
   height: auto;
   position: relative;

}

.content_nav_top>img{ 

   width: 100%;

}

.content_nav_top .content_nav_logo{ 

   position: absolute;
   top: 70%;
   right: 18.5%;
   width: 5vw;
   height: auto;
   
   transition: transform 0.1s;

}

.content_nav_top .content_nav_logo:hover{ 

   transform: scale(1.1,1.1) ;
   -ms-transform: scale(1.1,1.1); 	/* IE 9 */
   -moz-transform:scale(1.1,1.1); 	/* Firefox */
   -webkit-transform:scale(1.1,1.1); /* Safari 和 Chrome */
   -webkit-transform:scale(1.1,1.1); /* Safari 和 Chrome */
   -o-transform:scale(1.1,1.1); 	/* Opera */

}

.content_nav_top .content_nav_logo img{ 

   width: 100%;

}

.content_nav_middle{ 

   width: 100%;
   height: auto;
   background-image: url("T--SJTU-BioX-Shanghai--content_nav_middle.png");
   background-size: contain;
   background-repeat:repeat-y;

}



.content_nav_bottom{ 

   width: 100%;
   height: auto;
   
  
   position: relative;

}

.content_nav_bottom .content_nav_b_bac{ 

   width: 100%;

}

.content_nav_bottom .content_nav_b_story_badge { 

   position: absolute;
   width: 29%;
   bottom: 30%;
   left: 12%;
   
   transition: transform 0.1s;

}

.content_nav_bottom .content_nav_b_story_badge:hover { 

   transform: scale(1.1,1.1) ;
   -ms-transform: scale(1.1,1.1); 	/* IE 9 */
   -moz-transform:scale(1.1,1.1); 	/* Firefox */
   -webkit-transform:scale(1.1,1.1); /* Safari 和 Chrome */
   -webkit-transform:scale(1.1,1.1); /* Safari 和 Chrome */
   -o-transform:scale(1.1,1.1); 	/* Opera */

}


/*** content nav_item list & item *******/

.content_nav_item_list{ 

   padding: 4vw 0 2vh 12vw !important;
   margin: 0 !important;
   width: 100%;

}


.content_nav_item { 

   height: 2vw;
   line-height: 1.5vw;



   padding: 5px 0.5vw 5px 0.5vw;
   
   
   
   text-decoration: none;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;

}

.content_nav_item img{ 

   width: 2.5vw;
   
   transition: transform 0.5s;
   -moz-transition: transform 0.5s; /* Firefox 4 */
   -webkit-transition: transform 0.5s; /* Safari 和 Chrome */
   -o-transition: transform 0.5s; /* Opera */

}

.content_nav_item a{ 

   padding-left: 1vw;
   text-align: left;
   
   font-size:1.2vw;

}

.content_nav_item a::before{ 

   content: "";
   width: 1vw;
   height: 2vw;
   background-color: red;

}

.content_nav_item a:hover{ 

   font-weight: bold;
   color: rgb(143,43,40);

}


/*****************************content text**********************************/ .content p, .content a{ 

   font-size: 1.2vw;

}

.content h1, h2, h3, h4, h5, h6{ 

   font-family: Lora !important;

}

.content h1{ 

   font-size: 1.6vw;
   color: black;

}

.content h2, .content h2 a{ 

   font-size: 1.4vw;
   color: black;
   padding: 6px 0 6px 10px;
   
   background-color: rgba(220,220,220,1);
   border-radius: 5px;

}

.content h2 a:hover{ 

   text-decoration: none;

}

.content h3, .content h3 a{ 

   font-size: 1.3vw;
   color: black;
   padding: 10px 0;

}

.content h3 a:hover{ 

   text-decoration: none;

}


.content_text{ 

   padding-left:25vw;
   padding-top:3vh;
   padding-bottom: 9vw;
   
   width:58%;

}



.text{ 

   width:100%;
   
   position: relative;
   padding:10px;

} .text h1,.text h2{ 

   padding-top:1vw;
   padding-bottom:1vw;
   margin-top: 1vw;

} .text p{ 

   word-break: normal;
   padding:5px;
   line-height: 2.2vw;
   letter-spacing:0.002vw;
   /*text-align:justify;
   text-justify:inter-ideograph;/*IE*/*/

}

.text table{ 

   font-size: 1.2vw;

}

p.fig_illustration{ 

   font-weight: bold;
   text-align: center;
   padding-top:10px;
   padding-bottom: 20px;

}

p.table_illustration{ 

   font-weight: bold;
   text-align: center;
   padding-top:20px;
   padding-bottom: 10px;

}

.place_holder{ 

   position:absolute;
   width: 30%;
   height: 50px;
   top:-50px;
   display: block;

}

.text a{ 

   text-decoration-line: none;
   
   position: relative;

}

div.img_in_text{ 

   width:100%;
   height: auto;
   margin: 0 auto;
   display: inline-block;
   text-align: center;
   padding-top:10px;

}


.text img{ 

   width: 70%;
   margin:0 auto;

}

.zoom_out_able{ 

   cursor: zoom-in;

}

div.table_in_text{ 

   width: 100%;
   height: auto;
   text-align: center;

}

.table_in_text table{ 

   width:80%; 
   text-align: center;
   margin: 0 auto;

}

.list-elements{ 

   list-style: disc; 
   font-size: 1.2vw; 
   padding:1.5vw 1.5vw 1.5vw 3vw !important;
   line-height: 2vw;
   
   margin: 0 !important;

}


  1. return_to_top_column{


   width:12%;
   height: auto;
   
   display: block;

}

  1. return_to_top_button{
   display: none;
   position: fixed;
   right: 3vw;
   bottom: 20vh;
   background-image: url("T--SJTU-BioX-Shanghai--return_to_top_Ecoli1.png");
   background-size:100%;
   background-repeat: no-repeat;
   width:8vw;
   height: 10vw;
   line-height: 60px;
   text-align: center;
   cursor:pointer;
   z-index: 2;

}

  1. return_to_top_button::after{
   content:"";
   position: absolute;
   top:0;
   left:0;
   right:0;
   bottom: 0;
   z-index: -1;
   background-color: none;
   transform:rotate(45deg);
   transform-origin: 50% 50%;
   -moz-transform:rotate(45deg);
   -webkit-transform: rotate(45deg);

}


/********************************* zoom out box **************************/ .zoom_out_box{ 

   display: none;
   position: fixed;
   width: 100%;
   height: 100%;
   top:0;
   bottom:0;
   left:0;
   right: 0;
   margin: 0;
   border: 0;
   background-color: rgba(0,0,0,0.7);
   z-index: 999999999;

}

.zoom_out_album{ 

   background-color: rgba(255,255,255,1);
   padding:15px;
   border-radius: 10px;
   display: flex;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
       
   
   
   z-index: 999999999;
   
   max-width: 65%;
   
   cursor: zoom-out;

}

.zoom_out_album img{ 

   max-width: 65%;

}

.zoom_out_album p{ 

   padding: 10px;

}

/******************************* storage box ***************************/ .storage_box{ 

   width: 94%;
   height: auto;
   padding: 10px 3%;

}

.storage_box_list{ 

   width: 100%;
   
   list-style: none;
   margin: 0!important;
   padding: 0 !important;
   display: flex;
   display: -webkit-flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;

}

.storage_box_ele{ 

   width: 100%;
   height: auto;

   margin: 10px 0;

}

.storage_header{ 

   width: 100%;
   height: 40px;
   padding: 0;
   
   background-color: #FDE3CA;

}

.storage_header>p{ 

   float: left;
   padding: 0;
   padding-left: 10px;
   margin: 0;
   height: 40px;
   
   
   line-height: 40px;

}

.storage_header>img{ 

   float: right;
   padding: 5px 10px;
   height: 30px;
   width: 30px;
   
   transition: transform 0.5s;
   -moz-transition: transform 0.5s; /* Firefox 4 */
   -webkit-transition: transform 0.5s; /* Safari 和 Chrome */
   -o-transition: transform 0.5s; /* Opera */

}

.storage_text{ 

   display: none;
   width:90%;
   padding-left: 5%;
   padding-right: 5%;
   
   background-color: rgba(241,240,240, 1);
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;

}

/************************ arrow link *******************/ .arrow_link{ 

   color: black;

}

.arrow_link::after{ 

   content: "\27a4";
   color: #004bd8;
   padding-left: 5px;

}

/*********************** image atlas **********************/ .image_atlas{ 

   width: 100%;
   height: auto;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   
   flex-direction: column;
   justify-content: center;
   align-content: center;

}

.atlas_filter{ 

   width: 100%;
   height: 30px;
   padding: 5px 0;
   border-top-left-radius: 10px;
   border-top-right-radius: 10px;
   background-color:#FDE3CA; 
   
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: center;

}

.one_filter{ 

   width: auto;
   height: 100%;
   padding: 0 1vw;
   
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;

}

.one_filter p{ 

   padding: 0 1vw;

}

.one_filter select{ 

   height: 20px;
   min-width: 10vw;

}


.atlas_imgDisplay{ 

   width: 100%;
   height: auto;
   background-color: rgba(241,240,240, 1);
   
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;

}

.atlas_imgDisplay img{ 

   padding: 5%;
   width: 90%;

}

/****************** badge boxes ************************/ .badge_boxes{ 

   width: 100%;
   height: auto;
   margin-top: 5vw;
   
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: center;

}

.badge_box{ 

   width: 25vw;
   height: auto;
   position: relative;
   
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   flex-direction: row;
   justify-content: center;
   align-items: center;   
   
   background-color: rgba(230,230,230,0.95);
   border-radius: 2vw;

}

.badge_box_txt{ 

   padding: 1vw;
   padding-top: 4vw;

}

.badge_box_txt h3{ 

   text-align: center;

}


.badge_box>img{ 

   width: 8vw;
   height: 8vw;
   border-radius: 4vw;
   
   position: absolute;
   top: -4vw;
   left: 8.5vw;

}


.check_icon{ width: 2vw !important; display:inline-block; }