Difference between revisions of "Template:Shanghaitech"

Line 1: Line 1:
 
<html>
 
<html>
  
−
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Shanghaitech/css/magnifiedcss?action=raw&ctype=text/css">
+
 
 
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Shanghaitech/css/fontawesomecss?action=raw&ctype=text/css">
 
<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:Shanghaitech/css/fontawesomecss?action=raw&ctype=text/css">
  
  
 +
<style type="text/css">/* Magnific Popup CSS
 +
====================================*/
 +
.mfp-bg {
 +
top: 0;
 +
left: 0;
 +
width: 100%;
 +
height: 100%;
 +
z-index:999999999;
 +
overflow: hidden;
 +
position: fixed;
 +
background: #000;
 +
opacity: 0.8;
 +
filter: alpha(opacity=80);
 +
}
 +
 +
.mfp-wrap {
 +
top: -10px;
 +
left: 0;
 +
width: 100%;
 +
height: 100%;
 +
z-index:999999999;
 +
position: fixed;
 +
outline: none !important;
 +
-webkit-backface-visibility: hidden;
 +
}
 +
 +
.mfp-container {
 +
height: 100%;
 +
text-align: center;
 +
position: absolute;
 +
width: 100%;
 +
height: 100%;
 +
left: 0;
 +
top: 0;
 +
padding: 0 18px;
 +
-webkit-box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
box-sizing: border-box;
 +
}
 +
 +
.mfp-container:before {
 +
content: '';
 +
display: inline-block;
 +
height: 100%;
 +
vertical-align: middle;
 +
}
 +
 +
.mfp-align-top .mfp-container:before {
 +
display: none;
 +
}
 +
 +
.mfp-content {
 +
position: relative;
 +
display: inline-block;
 +
vertical-align: middle;
 +
margin: 0 auto;
 +
text-align: left;
 +
z-index: 505;
 +
}
 +
 +
.mfp-inline-touchinger .mfp-content,
 +
.mfp-ajax-touchinger .mfp-content {
 +
width: 100%;
 +
cursor: auto;
 +
}
 +
 +
.mfp-ajax-cur {
 +
cursor: progress;
 +
}
 +
 +
.mfp-zoom-out-cur,
 +
.mfp-zoom-out-cur .mfp-figure .mfp-close {
 +
cursor: -moz-zoom-out;
 +
cursor: -webkit-zoom-out;
 +
cursor: zoom-out;
 +
}
 +
 +
.mfp-zoom {
 +
cursor: pointer;
 +
cursor: -webkit-zoom-in;
 +
cursor: -moz-zoom-in;
 +
cursor: zoom-in;
 +
}
 +
 +
.mfp-auto-cursor .mfp-content {
 +
cursor: auto;
 +
}
 +
 +
.mfp-close,
 +
.mfp-arrow,
 +
.mfp-preloader,
 +
.mfp-counter {
 +
-webkit-user-select: none;
 +
-moz-user-select: none;
 +
user-select: none;
 +
}
 +
 +
.mfp-loading.mfp-figure {
 +
display: none;
 +
}
 +
 +
.mfp-hide {
 +
display: none !important;
 +
}
 +
 +
.mfp-preloader {
 +
color: #aaa;
 +
position: absolute;
 +
top: 50%;
 +
width: auto;
 +
text-align: center;
 +
margin-top: -0.8em;
 +
left: 8px;
 +
right: 8px;
 +
z-index: 504;
 +
}
 +
 +
.mfp-preloader a {
 +
color: #cccccc;
 +
}
 +
 +
.mfp-preloader a:hover {
 +
color: #fff;
 +
}
 +
 +
.mfp-s-ready .mfp-preloader {
 +
display: none;
 +
}
 +
 +
.mfp-s-error .mfp-content {
 +
display: none;
 +
}
 +
 
 +
.mfp-s-loading .mfp-arrow {
 +
display: none;
 +
}
 +
 +
button.mfp-close,
 +
button.mfp-arrow {
 +
overflow: visible;
 +
cursor: pointer;
 +
background: transparent;
 +
border: 0;
 +
-webkit-appearance: none;
 +
display: block;
 +
padding: 0;
 +
z-index: 506;
 +
}
 +
 +
button::-moz-focus-inner {
 +
padding: 0;
 +
border: 0;
 +
}
 +
 +
.mfp-close {
 +
width: 44px;
 +
height: 44px;
 +
line-height: 44px;
 +
position: absolute;
 +
right: 0;
 +
top: 0;
 +
text-decoration: none;
 +
opacity: 1;
 +
padding: 0 0 18px 10px;
 +
text-indent: 99999;
 +
}
 +
 +
.mfp-figure .mfp-close, .mfp-iframe-touchinger .mfp-close {
 +
right: -13px;
 +
top: 20px;
 +
padding-right: 6px;
 +
width: 100%;
 +
background-image: url(../images/mfp-close.png);
 +
background-repeat: no-repeat;
 +
background-position: 100% 50%;
 +
text-indent: 9999;
 +
}
 +
 +
.mfp-counter {
 +
position: absolute;
 +
top: 0;
 +
right: 0;
 +
color: #aaa;
 +
font-size: 13px;
 +
line-height: 18px;
 +
}
 +
 +
.mfp-arrow {
 +
position: absolute;
 +
top: 0;
 +
opacity: 0;
 +
margin: 0;
 +
top: 50%;
 +
margin-top: -55px;
 +
padding: 0;
 +
width: 90px;
 +
height: 110px;
 +
-webkit-transition: all 0.15s ease-in-out;
 +
-moz-transition: all 0.15s ease-in-out;
 +
-o-transition: all 0.15s ease-in-out;
 +
-ms-transition: all 0.15s ease-in-out;
 +
transition: all 0.15s ease-in-out;
 +
}
 +
 +
.mfp-arrow .mfp-b,
 +
.mfp-arrow .mfp-a {
 +
content: '';
 +
display: block;
 +
width: 0;
 +
height: 0;
 +
position: absolute;
 +
left: 0;
 +
top: 0;
 +
margin-top: 35px;
 +
margin-left: 35px;
 +
border: solid transparent;
 +
}
 +
 +
.mfp-arrow.mfp-arrow-left {
 +
background-image: url(../images/mfp-left.png);
 +
background-repeat: no-repeat;
 +
background-position: 50%;
 +
}
 +
 +
.mfp-arrow.mfp-arrow-right {
 +
background-image: url(../images/mfp-right.png);
 +
background-repeat: no-repeat;
 +
background-position: 50%;
 +
right: 0;
 +
}
 +
 +
.mfp-content:hover .mfp-arrow {
 +
opacity: 1;
 +
}
 +
 +
.mfp-iframe-touchinger {
 +
padding-top: 40px;
 +
padding-bottom: 40px;
 +
}
 +
 +
.mfp-iframe-touchinger .mfp-content {
 +
line-height: 0;
 +
width: 100%;
 +
max-width: 900px;
 +
}
 +
 +
.mfp-iframe-scaler {
 +
width: 100%;
 +
height: 0;
 +
overflow: hidden;
 +
padding-top: 56.25%;
 +
}
 +
 +
.mfp-iframe-scaler iframe {
 +
position: absolute;
 +
display: block;
 +
top: 0;
 +
left: 0;
 +
width: 100%;
 +
height: 100%;
 +
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
 +
background: black;
 +
}
 +
 +
.mfp-iframe-touchinger .mfp-close {
 +
top: -40px;
 +
}
 +
 +
/* Main image in popup */
 +
img.mfp-img {
 +
width: auto;
 +
max-width: 100%;
 +
height: auto;
 +
display: block;
 +
line-height: 0;
 +
-webkit-box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
box-sizing: border-box;
 +
padding: 40px 0 40px;
 +
margin: 0 auto;
 +
}
 +
 +
/* The shadow behind the image */
 +
.mfp-figure:after {
 +
content: '';
 +
position: absolute;
 +
left: 0;
 +
top: 40px;
 +
bottom: 40px;
 +
display: block;
 +
right: 0;
 +
width: auto;
 +
height: auto;
 +
z-index: -1;
 +
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
 +
}
 +
 +
.mfp-figure {
 +
line-height: 0;
 +
}
 +
 +
.mfp-bottom-bar {
 +
margin-top: -30px;
 +
position: absolute;
 +
top: 100%;
 +
left: 0;
 +
width: 100%;
 +
cursor: auto;
 +
}
 +
 +
.mfp-title {
 +
text-align: left;
 +
line-height: 18px;
 +
color: #f3f3f3;
 +
word-break: break-word;
 +
padding-right: 36px;
 +
}
 +
 +
.mfp-figure small {
 +
color: #bdbdbd;
 +
display: block;
 +
font-size: 12px;
 +
line-height: 14px;
 +
}
 +
 +
.mfp-figure .mfp-content {
 +
max-width: 100%;
 +
}
  
 +
.mfp-gallery .mfp-figure .mfp-figure {
 +
cursor: pointer;
 +
}
 +
</style>
  
  

Revision as of 15:03, 14 August 2017