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

Revision as of 14:21, 7 October 2018 (view source) QingweiFang (Talk | contribs) ← Older edit		Revision as of 17:44, 7 October 2018 (view source) QingweiFang (Talk | contribs) Newer edit →
Line 1:		Line 1:
−	/******************This is the css code for Interlab page********************************/	+	/******************This is the css code for content template********************************/
	.content{		.content{
	width: 100%;		width: 100%;
	height:auto !important;		height:auto !important;
	overflow: hidden;		overflow: hidden;
−	padding-top:100px;	+	padding-top:10px;
	}		}
Line 12:		Line 12:
	/*****************************content nav**********************************/		/*****************************content nav**********************************/
	.content_nav{		.content_nav{
−	position: fixed;	+	position: fixed;
−	padding-left:12%;	+	width: 22vw;
−	padding-top:3vh;	+	height: 100vh;
−	width: 18vw;	+	z-index: 999998;
−		+
−	z-index: 1;	+
	}		}
	.content_nav ul{		.content_nav ul{
	list-style: none;		list-style: none;
−	margin:0 !important;
	}		}
Line 28:		Line 25:
	text-decoration: none;		text-decoration: none;
	color:black;		color:black;
−	pointer:cursor;	+	cursor:pointer;
	}		}
−	.logo_above_content_nav{	+
		+	.container_of_content_nav_item{
	width: 100%;		width: 100%;
−	height:15vh;	+	height: 95vh;
		+	border:none;
−	margin-bottom: 2vh;	+	margin-top: 5vh;
	}		}
		+	.content_nav_top{
		+	width: 100%;
		+	height: auto;
		+	position: relative;
		+	}
−	.logo_above_content_nav img{	+	.content_nav_top>img{
−		+	width: 100%;
−		+
−	padding-left:2vh;	+
−	clear: both;	+
−	height: 100%;	+
	}		}
−	#your_position{	+	.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%;		width: 100%;
−		+	}
−	height: 30px;	+
−	line-height: 30px;	+	.content_nav_middle{
−	display: flex;	+	width: 100%;
−	flex-direction: row;	+	height: auto;
−	justify-content:flex-start;	+	background-image: url("https://static.igem.org/mediawiki/2018/7/7b/T--SJTU-BioX-Shanghai--content_nav_bac1.png");
−	align-items: center;	+	background-size: contain;
−	display: none;	+	background-repeat:repeat-y;
		+	}
		+
		+
		+
		+	.content_nav_bottom{
		+	width: 100%;
		+	height: auto;
	}		}
−	.container_of_content_nav_item{	+	.content_nav_bottom img{
	width: 100%;		width: 100%;
−	border:none;
−	border-radius: 2vw;
−	background-color: blueviolet;
	}		}
		+
		+
		+	/*** content nav_item list & item *******/
	.content_nav_item_list{		.content_nav_item_list{
−		+	padding: 4vw 0 0 8vw;
	width: 100%;		width: 100%;
−	padding: 0.6vw 0 !important;	+
	}		}
Line 78:		Line 93:
	.content_nav_item {		.content_nav_item {
−	height: 3vw;	+	height: 2vw;
−	line-height: 3vw;	+	line-height: 1.5vw;
−	padding: 5px 1vw 5px 1vw;	+	padding: 5px 0.5vw 5px 0.5vw;
Line 107:		Line 122:
	font-size:1.2vw;		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 text**********************************/
−	.content p, .content a{	+	.content p, .content a{
	font-size: 1.2vw;		font-size: 1.2vw;
	}		}
Line 125:		Line 151:
	font-size: 1.4vw;		font-size: 1.4vw;
	color: black;		color: black;
−	}
−
−	.content h3{
−	font-size: 1.3vw;
	}		}
	.content_text{		.content_text{
−	padding-left:30%;	+	padding-left:25vw;
	padding-top:3vh;		padding-top:3vh;
		+	padding-bottom: 9vw;
	width:58%;		width:58%;
Line 173:		Line 196:
	p.table_illustration{		p.table_illustration{
−	font-size: 1.2vw;
	font-weight: bold;		font-weight: bold;
	text-align: center;		text-align: center;
Line 183:		Line 205:
	position:absolute;		position:absolute;
	width: 30%;		width: 30%;
−	height: 69.8px;	+	height: 50px;
−	top:-69.8px;	+	top:-50px;
	display: block;		display: block;
	}		}
Line 203:		Line 225:
	}		}
−	.zoom_out_able{
−	cursor: zoom-in;
−	}
	.text img{		.text img{
Line 227:		Line 246:
	list-style: disc;		list-style: disc;
	font-size: 1.2vw;		font-size: 1.2vw;
−	padding:1.5vw 1.5vw 1.5vw 3vw !important;	+	padding:1.5vw 1.5vw 1.5vw 3vw;
	line-height: 2vw;		line-height: 2vw;
	border:4px solid yellow;		border:4px solid yellow;
	margin: 0 !important;		margin: 0 !important;
	}		}
		+
	#return_to_top_column{		#return_to_top_column{
Line 299:		Line 319:
	border-radius: 10px;		border-radius: 10px;
	z-index: 9991;		z-index: 9991;
−	}
−
−	.zoom_out_album{
−	cursor:zoom-out;
	}		}

---

Revision as of 17:44, 7 October 2018

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

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

}

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

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

}

.content_nav ul{

   list-style: none;

}

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

}

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("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;

}