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; }

.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: 100%;
   height: 95vh; 
   border:none;
   
   margin-top: 5vh;
   

}

.content_nav_top{

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

}

.content_nav_top>img{

   width: 100%;

}

.content_nav_top .content_nav_logo{

   position: absolute;
   top: 60%;
   right: 13%;
   width: 5vw;
   height: auto;

}

.content_nav_top .content_nav_logo img{

   width: 100%;

}

.content_nav_middle{

   width: 100%;
   height: auto;
   background-image: url("");
   background-size: contain;
   background-repeat:repeat-y;

}

.content_nav_bottom{

   width: 100%;
   height: auto;
   

}

.content_nav_bottom img{

   width: 100%;

}

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

.content_nav_item_list{

   padding: 4vw 0 0 8vw !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{

   font-size: 1.6vw;
   color: black;

}

.conent h2, .content h2 a{

   font-size: 1.4vw;
   color: black;

}

.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:2vw;
   padding-bottom:1vw;

} .text p{

   word-break: normal;
   padding:5px;
   line-height: 2vw;

}

.text table{

   font-size: 1.2vw;
   line-height: 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;
   padding:10px;
   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: 80%;
   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;
   line-height: 2vw;
   border:4px solid yellow;
   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: 10vh;
   background-image: url("");
   background-size:100%;
   background-repeat: no-repeat;
   width:4vw;
   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: 9990;
   

}

.zoom_out_album{

   background-color: rgba(255,255,255,1);
   padding:15px;
   border-radius: 10px;
   z-index: 9999991;

   cursor: zoom-out;

}