Difference between revisions of "Template:SJTU-BioX-Shanghai/interlab CSS"

Line 1: Line 1:
−
 
+
/******************This is the css code for Interlab page********************************/
 
.content{
 
.content{
 
     width: 100%;
 
     width: 100%;
Line 5: Line 5:
 
     overflow: hidden;
 
     overflow: hidden;
 
     padding-top:100px;
 
     padding-top:100px;
−
     position:relative;
+
      
 
}
 
}
  
  
  
−
 
+
/*****************************content nav**********************************/
 
.content_nav{
 
.content_nav{
 
     position: fixed;
 
     position: fixed;
Line 40: Line 40:
  
 
.logo_above_content_nav img{
 
.logo_above_content_nav img{
 +
   
 
      
 
      
 
     padding-left:2vh;
 
     padding-left:2vh;
Line 78: Line 79:
 
     height: 3vw;
 
     height: 3vw;
 
     line-height: 3vw;
 
     line-height: 3vw;
 +
 +
   
 
     padding: 5px 2vw 5px 2vw;
 
     padding: 5px 2vw 5px 2vw;
 +
   
 +
   
 
      
 
      
 
     text-decoration: none;
 
     text-decoration: none;
Line 106: Line 111:
  
  
 +
/*****************************content text**********************************/
 +
p,a{
 +
    font-size: 1.2vw;
 +
}
  
 +
h1{
 +
    font-size: 1.6vw;
 +
}
  
−
 
+
h2, h2 a{
−
 
+
    font-size: 1.4vw;
 +
}
  
 
.content_text{
 
.content_text{
Line 116: Line 129:
 
      
 
      
 
     width:58%;   
 
     width:58%;   
−
     position:relative;
+
      
 
      
 
      
 
      
 
      
Line 127: Line 140:
 
     width:100%;
 
     width:100%;
 
      
 
      
−
 
+
    position: relative;
 
     padding:10px;
 
     padding:10px;
 
}
 
}
−
 
 
.text h1,.text h2{
 
.text h1,.text h2{
 
     padding-top:10px;
 
     padding-top:10px;
 
     padding-bottom:10px;
 
     padding-bottom:10px;
 
}
 
}
−
 
−
.text h1{
 
−
    font-size: 1.6vw !important;
 
−
    color: black;
 
−
}
 
−
 
−
.text h2, .text h2 a {
 
−
    font-size: 1.4vw !important;
 
−
    color: black;
 
−
}
 
−
 
−
.text a{
 
−
    font-size: 1.2vw !important;
 
−
   
 
−
}
 
−
 
 
.text p{
 
.text p{
 
     word-break: normal;
 
     word-break: normal;
Line 161: Line 157:
 
     line-height: 2vw;
 
     line-height: 2vw;
 
}
 
}
−
 
  
 
p.fig_illustration{
 
p.fig_illustration{
 
     font-weight: bold;
 
     font-weight: bold;
−
     text-align: center !important;
+
     text-align: center;
 
     padding-top:10px;
 
     padding-top:10px;
 
     padding-bottom: 20px;
 
     padding-bottom: 20px;
Line 172: Line 167:
 
p.table_illustration{
 
p.table_illustration{
 
     font-weight: bold;
 
     font-weight: bold;
−
     text-align: center !important;
+
     text-align: center;
 
     padding-top:20px;
 
     padding-top:20px;
 
     padding-bottom: 10px;
 
     padding-bottom: 10px;
Line 180: Line 175:
 
     position:absolute;
 
     position:absolute;
 
     width: 30%;
 
     width: 30%;
−
     height: 69.8px;
+
     height: 50px;
−
     top:-69.8px;
+
     top:-50px;
 
     display: block;
 
     display: block;
 
}
 
}
Line 215: Line 210:
 
     width:80%;  
 
     width:80%;  
 
     text-align: center;
 
     text-align: center;
−
     margin: 0 auto !important;
+
     margin: 0 auto;
 
}
 
}
  
Line 234: Line 229:
 
     right: 3vw;
 
     right: 3vw;
 
     bottom: 10vh;
 
     bottom: 10vh;
−
     background-image: url(https://static.igem.org/mediawiki/2018/0/05/T--SJTU-BioX-Shanghai--return_to_top.png);
+
     background-image: url("return_to_top.png");
 
     background-size:100%;
 
     background-size:100%;
 
     background-repeat: no-repeat;
 
     background-repeat: no-repeat;
Line 262: Line 257:
  
  
−
 
+
/********************************* zoom out box **************************/
 
.zoom_out_box{
 
.zoom_out_box{
 
     display: none;
 
     display: none;

Revision as of 03:44, 24 September 2018

/******************This is the css code for Interlab page********************************/ .content{ 

   width: 100%;
   height:auto !important;
   overflow: hidden;
   padding-top:100px;

}


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

   position: fixed;
   padding-left:12%;
   padding-top:3vh;
   width: 18vw;
   
   z-index: 1;

}

.content_nav ul{ 

   list-style: none;

}

.content_nav a{ 

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

}

.logo_above_content_nav{ 

   width: 100%;
   height:15vh;
   
   margin-bottom: 2vh;

}


.logo_above_content_nav img{ 


   padding-left:2vh;
   clear: both;
   height: 100%;

}

  1. your_position{
   width: 100%;
   
   height: 30px;
   line-height: 30px;
   display: flex;
   flex-direction: row;
   justify-content:flex-start;
   align-items: center;
   display: none;

}

.container_of_content_nav_item{ 

   width: 100%;
   border:none;
   border-radius: 2vw;
   background-color: blueviolet;

}

.content_nav_item_list{ 


   width: 100%;

}


.content_nav_item { 

   height: 3vw;
   line-height: 3vw;



   padding: 5px 2vw 5px 2vw;
   
   
   
   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: 2vw;
   text-align: left;
   width: 10vw;
   font-size:1.2vw;

}



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

   font-size: 1.2vw;

}

h1{ 

   font-size: 1.6vw;

}

h2, h2 a{ 

   font-size: 1.4vw;

}

.content_text{ 

   padding-left:30%;
   padding-top:3vh;
   
   width:58%;

}



.text{ 

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

} .text h1,.text h2{ 

   padding-top:10px;
   padding-bottom:10px;

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

}

div.table_in_text{ 

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

}

.table_in_text table{ 

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

}

  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("return_to_top.png");
   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: 9991;

}