Difference between revisions of "Team:Tec-Monterrey/Templates/Tec-Monterrey General Format"

m
m
Line 796: Line 796:
 
     display: none !important;
 
     display: none !important;
 
   }
 
   }
 +
}
 +
/**********************************************************************************************************************/
 +
/******************************************************* SLIDESHOW ***************************************************/
 +
/**********************************************************************************************************************/
 +
.slideshow {
 +
position: relative;
 +
width: 80vw;
 +
height: 45vw;
 +
        margin: 0 10%;
 +
        overflow-y: hidden;
 
}
 
}
 +
 +
.slideshow .right-arrow-pane, .slideshow .left-arrow-pane{
 +
position:absolute;
 +
right:0;
 +
top:0;
 +
height:100%;
 +
width:10%;
 +
background: rgba(0,0,0,0.3);
 +
-webkit-transition: all 0.3s;
 +
    -moz-transition: all 0.3s;
 +
    -ms-transition: all 0.3s;
 +
    -o-transition: all 0.3s;
 +
    transition: all 0.3s;
 +
    z-index:75;
 +
    cursor:pointer;
 +
}
 +
 +
.slideshow .left-arrow-pane {
 +
left:0;
 +
}
 +
 +
.slideshow .right-arrow-pane .arrow, .slideshow .left-arrow-pane .arrow {
 +
position:absolute;
 +
top:50%;
 +
left:30%;
 +
transform:translate(-50%, -50%);
 +
-webkit-transition: all 0.3s;
 +
    -moz-transition: all 0.3s;
 +
    -ms-transition: all 0.3s;
 +
    -o-transition: all 0.3s;
 +
    transition: all 0.3s;
 +
    /*z-index:50;*/
 +
}
 +
 +
.slideshow .left-arrow-pane .arrow {
 +
right:30%;
 +
left:auto;
 +
transform: translate(50%, -50%);
 +
}
 +
 +
.slideshow .right-arrow-pane .arrow div, .slideshow .left-arrow-pane .arrow div{
 +
height:5vw;
 +
width:5vw;
 +
transform:rotate(45deg);
 +
border-style: solid;
 +
border-color: rgba(255, 255, 255, .5);
 +
border-width:5px 5px 0 0;
 +
-webkit-transition: all 0.3s;
 +
    -moz-transition: all 0.3s;
 +
    -ms-transition: all 0.3s;
 +
    -o-transition: all 0.3s;
 +
    transition: all 0.3s;
 +
}
 +
 +
.slideshow .left-arrow-pane .arrow div{
 +
transform:rotate(-135deg);
 +
}
 +
 +
.slideshow .right-arrow-pane:hover, .slideshow .left-arrow-pane:hover {
 +
background:rgba(0,0,0,.25);
 +
}
 +
 +
.slideshow .right-arrow-pane:hover .arrow {
 +
left:35%;
 +
}
 +
 +
.slideshow .left-arrow-pane:hover .arrow {
 +
right:35%;
 +
}
 +
 +
.slideshow .right-arrow-pane:hover .arrow div, .slideshow .left-arrow-pane:hover .arrow div{
 +
border-color:rgb(255,255,255);
 +
}
 +
 +
.slideshow .bubbles {
 +
position:absolute;
 +
width:100%;
 +
height:10%;
 +
bottom:0;
 +
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%);
 +
display:flex;
 +
justify-content: center;
 +
z-index:50;
 +
}
 +
 +
.slideshow .bubbles div {
 +
height:3vw;
 +
width:3vw;
 +
border-radius:5px;
 +
border:solid white 3px;
 +
margin:0 20px 0 0;
 +
cursor:pointer;
 +
}
 +
 +
.slideshow .bubbles div:last-child {
 +
margin-right: 0;
 +
}
 +
 +
.slideshow .bubbles div:hover {
 +
background-color: white;
 +
}
 +
 +
.slideshow .bubbles div.active {
 +
background-color:white;
 +
}
 +
 +
.slideshow .pauseBtn {
 +
position:absolute;
 +
height:5vw;
 +
width:5vw;
 +
bottom:1%;
 +
right:12%;
 +
background:rgba(0,0,0,.7);
 +
border-radius:10px;
 +
z-index:60;
 +
}
 +
 +
.slideshow .pauseBtn .bars {
 +
visibility: hidden;
 +
position:absolute;
 +
top:50%;
 +
left:50%;
 +
transform:translate(-50%, -50%);
 +
width:3vw;
 +
height:3vw;
 +
}
 +
 +
.slideshow .pauseBtn .bars > div{
 +
float:right;
 +
width:40%;
 +
height:100%;
 +
background:rgba(255,255,255,.8);
 +
}
 +
 +
.slideshow .pauseBtn .bars > div:first-child {
 +
float:left;
 +
}
 +
 +
.slideshow .pauseBtn:hover {
 +
background: rgba(34,34,34,1);
 +
cursor: pointer;
 +
}
 +
 +
.slideshow .pauseBtn:hover .bars > div {
 +
background: rgba(255,255,255,1);
 +
}
 +
 +
.slideshow .pauseBtn .tri {
 +
visibility: hidden;
 +
position: absolute;
 +
top:50%;
 +
left:50%;
 +
transform: translate(-50%, -50%);
 +
}
 +
 +
.slideshow .pauseBtn .tri > div {
 +
width: 0;
 +
height: 0;
 +
border-top: 2vw solid transparent;
 +
border-left-style: solid;
 +
border-left-width: 3vw;
 +
border-left-color:rgba(255,255,255,.75);
 +
border-bottom: 2vw solid transparent;
 +
}
 +
 +
.slideshow .pauseBtn:hover .tri > div{
 +
border-left-color:rgba(255,255,255,1);
 +
}
 +
 +
.slideshow .pauseBtn .tri.active, .slideshow .pauseBtn .bars.active {
 +
visibility: visible;
 +
}
 +
 +
.slideshow .content {
 +
position:absolute;
 +
top:0;
 +
left:0;
 +
width:100%;
 +
height:100%;
 +
        overflow: hidden;
 +
}
 +
 +
.slideshow .content .slide {
 +
visibility:hidden;
 +
position:absolute;
 +
top:0;
 +
left:0;
 +
height:100%;
 +
width:100%;
 +
overflow-y: hidden;
 +
-webkit-transition: left 1s;
 +
    -moz-transition: left 1s;
 +
    -ms-transition: left 1s;
 +
    -o-transition: left 1s;
 +
    transition: left 1s;
 +
}
 +
.slideshow .content .slide video, .slideshow .content .slide img {
 +
  width: 100%;
 +
  height: 100%;
 +
}
 +
 +
.slideshow .content .slide:first-child {
 +
visibility:visible;
 +
left:0;
 +
z-index: 1;
 +
        width: 100%;
 +
}
 +
 +
.slideshow .content .slide > img:first-child {
 +
height:auto;
 +
        width: 100%;
 +
        overflow: hidden;
 +
}
 +
 +
.slideshow .content .slide.active {
 +
left:0 !important;
 +
}
 +
 +
.slideshow .content .slide.left {
 +
left:-100vw !important;
 +
}
 +
 +
.slideshow .content .slide.right {
 +
left:100vw !important;
 +
}
 +
 +
.splash .slideshow .title {
 +
top:65%;
 +
left:200px;
 +
}
 +
 +
#HQ_page .slideshow .title p {
 +
font-size:7em;
 +
}
 +
 +
.notransition {
 +
-webkit-transition: none !important;
 +
    -moz-transition: none !important;
 +
    -ms-transition: none !important;
 +
    -o-transition: none !important;
 +
    transition: none !important;
 +
}
 +
/**********************************************************************************************************************/
 +
/**********************************************************************************************************************/
 +
/******************************************************* SLIDESHOW ENDS*************************************************/
  
 
/********************************************************Loader**************************************************/
 
/********************************************************Loader**************************************************/

Revision as of 06:57, 14 October 2018