Difference between revisions of "Template:Wageningen UR"

Line 347: Line 347:
 
.highlight {padding:15px 5px;}
 
.highlight {padding:15px 5px;}
 
}
 
}
 +
/*======================== Slideshow =========================*/
 +
.sp-slideshow {
 +
    position: relative;
 +
margin-left: -10px;
 +
width: 100%;
 +
max-width: 1000px;
 +
min-width: 260px;
 +
height: 385px;
 +
border: 10px solid #fff;
 +
border: 10px solid rgba(255,255,255,0.9);
 +
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
 +
}
 +
 +
 +
.sp-slideshow_S{
 +
position: relative;
 +
margin-left: 100px;
 +
width: 100%;
 +
max-width: 650px;
 +
min-width: 260px;
 +
height: 385px;
 +
border: 10px solid #fff;
 +
border: 10px solid rgba(255,255,255,0.9);
 +
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
 +
 +
}
 +
 +
 +
.sp-content {
 +
    background:none;
 +
position: relative;
 +
width: 100%;
 +
height: 100%;
 +
overflow: hidden;
 +
}
 +
 +
.sp-parallax-bg {
 +
    background: url('https://static.igem.org/mediawiki/2014/c/c0/Wageningen_UR_slide_background.png') repeat-x scroll 0 0;
 +
    -webkit-background-size: cover;
 +
    -moz-background-size: cover;
 +
    background-size: cover;
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
width: 100%;
 +
height: 100%;
 +
overflow: hidden;
 +
}
 +
 +
.sp-slideshow input, .sp-slideshow_S input {
 +
    position: absolute;
 +
bottom: 15px;
 +
left: 50%;
 +
width: 9px;
 +
height: 9px;
 +
z-index: 1001;
 +
cursor: pointer;
 +
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 +
    filter: alpha(opacity=0);
 +
    opacity: 0;
 +
}
 +
 +
.sp-slideshow input + label, .sp-slideshow_S input + label {
 +
    position: absolute;
 +
    bottom: 15px;
 +
left: 50%;
 +
    width: 6px;
 +
height: 6px;
 +
display: block;
 +
z-index: 1000;
 +
border: 3px solid #fff;
 +
border: 3px solid rgba(255,255,255,0.9);
 +
    -webkit-border-radius: 50%;
 +
    -moz-border-radius: 50%;
 +
    border-radius: 50%;
 +
    -webkit-transition: background-color linear 0.1s;
 +
    -moz-transition: background-color linear 0.1s;
 +
    -o-transition: background-color linear 0.1s;
 +
    -ms-transition: background-color linear 0.1s;
 +
    transition: background-color linear 0.1s;
 +
}
 +
.sp-slideshow input:checked + label, .sp-slideshow_S input:checked + label {
 +
background-color: #fff;
 +
    background-color: rgba(255,255,255,0.9);
 +
}
 +
 +
.sp-selector-1, .button-label-1 {
 +
    margin-left: -54px;
 +
}
 +
.sp-selector-2, .button-label-2 {
 +
    margin-left: -36px;
 +
}
 +
.sp-selector-3, .button-label-3 {
 +
    margin-left: -18px;
 +
}
 +
.sp-selector-4, .button-label-4 {
 +
    margin-left: 0px;
 +
}
 +
.sp-selector-5, .button-label-5 {
 +
    margin-left: 18px;
 +
}
 +
.sp-selector-6, .button-label-6 {
 +
    margin-left: 36px;
 +
}
 +
.sp-selector-7, .button-label-7 {
 +
    margin-left: 54px;
 +
}
 +
.sp-selector-8, .button-label-8 {
 +
    margin-left: 72px;
 +
}
 +
 +
.sp-arrow {
 +
    position: absolute;
 +
top: 50%;
 +
width: 28px;
 +
height: 38px;
 +
margin-top: -19px;
 +
display: none;
 +
opacity: 0.8;
 +
cursor: pointer;
 +
z-index: 1000;
 +
background: transparent url('https://static.igem.org/mediawiki/2014/4/4b/Wageningen_UR_arrows.png') no-repeat;
 +
-webkit-transition: opacity linear 0.3s;
 +
    -moz-transition: opacity linear 0.3s;
 +
    -o-transition: opacity linear 0.3s;
 +
    -ms-transition: opacity linear 0.3s;
 +
    transition: opacity linear 0.3s;
 +
}
 +
.sp-arrow:hover{
 +
opacity: 1;
 +
}
 +
.sp-arrow:active{
 +
margin-top: -18px;
 +
}
 +
.sp-selector-1:checked ~ .sp-arrow.sp-a2,
 +
.sp-selector-2:checked ~ .sp-arrow.sp-a3,
 +
.sp-selector-3:checked ~ .sp-arrow.sp-a4,
 +
.sp-selector-4:checked ~ .sp-arrow.sp-a5,
 +
.sp-selector-5:checked ~ .sp-arrow.sp-a6,
 +
.sp-selector-6:checked ~ .sp-arrow.sp-a7,
 +
.sp-selector-7:checked ~ .sp-arrow.sp-a8 {
 +
    right: 15px;
 +
display: block;
 +
background-position: top right;
 +
}
 +
.sp-selector-2:checked ~ .sp-arrow.sp-a1,
 +
.sp-selector-3:checked ~ .sp-arrow.sp-a2,
 +
.sp-selector-4:checked ~ .sp-arrow.sp-a3,
 +
.sp-selector-5:checked ~ .sp-arrow.sp-a4,
 +
.sp-selector-6:checked ~ .sp-arrow.sp-a5,
 +
.sp-selector-7:checked ~ .sp-arrow.sp-a6,
 +
.sp-selector-8:checked ~ .sp-arrow.sp-a7 {
 +
    left: 15px;
 +
display: block;
 +
background-position: top left;
 +
}
 +
 +
.sp-slideshow input:checked ~ .sp-content, .sp-slideshow_S input:checked ~ .sp-content {
 +
    -webkit-transition: background-position linear 0.6s, background-color linear 0.8s;
 +
    -moz-transition: background-position linear 0.6s, background-color linear 0.8s;
 +
    -o-transition: background-position linear 0.6s, background-color linear 0.8s;
 +
    -ms-transition: background-position linear 0.6s, background-color linear 0.8s;
 +
    transition: background-position linear 0.6s, background-color linear 0.8s;
 +
}
 +
 +
.sp-slideshow input:checked ~ .sp-content .sp-parallax-bg, .sp-slideshow_S input:checked ~ .sp-content .sp-parallax-bg {
 +
    -webkit-transition: background-position linear 0.7s;
 +
    -moz-transition: background-position linear 0.7s;
 +
    -o-transition: background-position linear 0.7s;
 +
    -ms-transition: background-position linear 0.7s;
 +
    transition: background-position linear 0.7s;
 +
}
 +
 +
input.sp-selector-1:checked ~ .sp-content {
 +
    background-position: 0 0;
 +
background-color: #727b7f;
 +
}
 +
input.sp-selector-2:checked ~ .sp-content {
 +
    background-position: -100px 0;
 +
background-color: #7f7276;
 +
}
 +
input.sp-selector-3:checked ~ .sp-content {
 +
    background-position: -200px 0;
 +
background-color: #737f72;
 +
}
 +
input.sp-selector-4:checked ~ .sp-content {
 +
    background-position: -300px 0;
 +
background-color: #79727f;
 +
}
 +
input.sp-selector-5:checked ~ .sp-content {
 +
    background-position: -400px 0;
 +
background-color: #7d7f72;
 +
}
 +
input.sp-selector-6:checked ~ .sp-content {
 +
    background-position: -500px 0;
 +
background-color: #7d7f72;
 +
}
 +
input.sp-selector-7:checked ~ .sp-content {
 +
    background-position: -600px 0;
 +
background-color: #7d7f72;
 +
}
 +
input.sp-selector-8:checked ~ .sp-content {
 +
    background-position: -700px 0;
 +
background-color: #7d7f72;
 +
}
 +
 +
input.sp-selector-1:checked ~ .sp-content .sp-parallax-bg {
 +
    background-position: 0 0;
 +
}
 +
input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg {
 +
    background-position: -200px 0;
 +
}
 +
input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg {
 +
    background-position: -400px 0;
 +
}
 +
input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg {
 +
    background-position: -600px 0;
 +
}
 +
input.sp-selector-5:checked ~ .sp-content .sp-parallax-bg {
 +
    background-position: -800px 0;
 +
}
 +
input.sp-selector-6:checked ~ .sp-content .sp-parallax-bg {
 +
    background-position: -1000px 0;
 +
}
 +
input.sp-selector-7:checked ~ .sp-content .sp-parallax-bg {
 +
    background-position: -1200px 0;
 +
}
 +
input.sp-selector-8:checked ~ .sp-content .sp-parallax-bg {
 +
    background-position: -1400px 0;
 +
}
 +
 +
.sp-slider {
 +
    position: relative;
 +
left: 0;
 +
    width: 800%;
 +
height: 100%;
 +
list-style: none;
 +
    margin: 0;
 +
padding: 0;
 +
    -webkit-transition: left ease-in 0.8s;
 +
    -moz-transition: left ease-in 0.8s;
 +
    -o-transition: left ease-in 0.8s;
 +
    -ms-transition: left ease-in 0.8s;
 +
    transition: left ease-in 0.8s;
 +
}
 +
 +
.sp-slider > li {
 +
color: #fff;
 +
width: 12.5%;
 +
list-style:none;
 +
-webkit-box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
-o-box-sizing: border-box;
 +
-ms-box-sizing: border-box;
 +
box-sizing: border-box;
 +
 +
padding: 0 1% 0 0;
 +
 +
height: 100%;
 +
 +
    float: left;
 +
text-align: center;
 +
opacity: 0.4;
 +
    -webkit-transition: opacity ease-in 0.4s 0.8s;
 +
    -moz-transition: opacity ease-in 0.4s 0.8s;
 +
    -o-transition: opacity ease-in 0.4s 0.8s;
 +
    -ms-transition: opacity ease-in 0.4s 0.8s;
 +
    transition: opacity ease-in 0.4s 0.8s;
 +
}
 +
 +
.sp-slider > li img{
 +
-webkit-box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
-o-box-sizing: border-box;
 +
-ms-box-sizing: border-box;
 +
box-sizing: border-box;
 +
display: block;
 +
 +
}
 +
 +
.big li img{
 +
margin: 0 55px;
 +
    padding: 40px 0 50px 0;
 +
width:790px;
 +
max-height:100%;
 +
}
 +
 +
.small li img {
 +
margin: 0 70px;
 +
padding: 20px 0 60px 0;
 +
max-height: 100%;
 +
max-width: 100%;
 +
}
 +
input.sp-selector-1:checked ~ .sp-content .sp-slider {
 +
    left: 0;
 +
}
 +
input.sp-selector-2:checked ~ .sp-content .sp-slider {
 +
    left: -100%;
 +
}
 +
input.sp-selector-3:checked ~ .sp-content .sp-slider {
 +
    left: -200%;
 +
}
 +
input.sp-selector-4:checked ~ .sp-content .sp-slider {
 +
    left: -300%;
 +
}
 +
input.sp-selector-5:checked ~ .sp-content .sp-slider {
 +
    left: -400%;
 +
}
 +
input.sp-selector-6:checked ~ .sp-content .sp-slider {
 +
    left: -500%;
 +
}
 +
input.sp-selector-7:checked ~ .sp-content .sp-slider {
 +
    left: -600%;
 +
}
 +
input.sp-selector-8:checked ~ .sp-content .sp-slider {
 +
    left: -700%;
 +
}
 +
 +
input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child,
 +
input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),
 +
input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),
 +
input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4),
 +
input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5),
 +
input.sp-selector-6:checked ~ .sp-content .sp-slider > li:nth-child(6),
 +
input.sp-selector-7:checked ~ .sp-content .sp-slider > li:nth-child(7),
 +
input.sp-selector-8:checked ~ .sp-content .sp-slider > li:nth-child(8){
 +
opacity: 1;
 +
}
 +
@media screen and (max-width: 840px){
 +
.sp-slideshow { height: 345px; }
 +
}
 +
@media screen and (max-width: 680px){
 +
.sp-slideshow { height: 285px; }
 +
}
 +
@media screen and (max-width: 560px){
 +
.sp-slideshow { height: 235px; }
 +
}
 +
@media screen and (max-width: 320px){
 +
.sp-slideshow { height: 158px; }
 +
}
  
 
</style>
 
</style>

Revision as of 14:16, 20 September 2016

MENU ▤