Difference between revisions of "Template:Judd UK/Stylesheets/BSS"

(Created page with ".bss-slides{ position: relative; display: block; line-height: 0;→‎removes the gap if you put a border on the slideshow div: } figcaption { line-height: 1.5; /* re...")
 
 
(9 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
.bss-slides{
+
/*https://www.sitepoint.com/make-a-simple-javascript-slideshow-without-jquery*/
−
  position: relative;
+
#slides{
−
  display: block;  
+
position: relative;
−
  line-height: 0;/*removes the gap if you put a border on the slideshow div*/ 
+
padding: 0px;
 +
margin: 0px !important;
 +
list-style-type: none;
 +
height: 100%;
 +
width: 100%;
 
}
 
}
−
figcaption {
+
 
−
  line-height: 1.5; /* restores line-height to the child element*/
+
.slide{
−
}
+
    position: absolute;
−
.bss-slides:focus{
+
    left: 0px;
−
outline: 0;
+
margin:0px!important;
−
}
+
    top: 0px;
−
.bss-slides figure{
+
    width: 100%;
−
  position: absolute;
+
padding:0px!important;
−
  top: 0;
+
    height: auto!important;
−
  width: 100%;
+
    opacity: 0;
−
}
+
    z-index: 1;
−
.bss-slides figure:first-child{
+
    -webkit-transition: opacity 1s;
−
  position: relative;
+
    -moz-transition: opacity 1s;
−
}
+
    -o-transition: opacity 1s;
−
.bss-slides figure img{
+
    transition: opacity 1s;
−
  opacity: 0;
+
−
  -webkit-transition: opacity 1.2s;
+
−
  transition: opacity 1.2s;
+
−
  -webkit-backface-visibility: hidden;
+
−
  backface-visibility: hidden;
+
−
}
+
−
.bss-slides .bss-show{
+
−
  z-index: 2;
+
−
}
+
−
.bss-slides .bss-show img{
+
−
  opacity: 1;
+
−
  -webkit-backface-visibility: hidden;
+
−
  backface-visibility: hidden;
+
−
  position: relative;  
+
 
}
 
}
  
−
.bss-slides figcaption{
+
.showing{
−
  position: absolute;
+
    opacity: 1;
−
  font-family: sans-serif;
+
    z-index: 2;
−
  font-size: .8em;
+
−
  bottom: .75em;
+
−
  right: .35em;
+
−
  padding: .25em;
+
−
  color: #fff;
+
−
  background: #000;
+
−
  background: rgba(0,0,0, .25);
+
−
  border-radius: 2px;
+
−
  opacity: 0;
+
−
  -webkit-transition: opacity 1.2s;
+
−
  transition: opacity 1.2s;
+
−
}
+
−
.bss-slides .bss-show figcaption{
+
−
  z-index: 3;
+
−
  opacity: 1;
+
−
}
+
−
.bss-slides figcaption a{
+
−
  color: #fff;   
+
−
}
+
−
.bss-next, .bss-prev{
+
−
  color: #fff;
+
−
  position: absolute;
+
−
  background: #000;
+
−
  background: rgba(0,0,0, .6);
+
−
  top: 50%;
+
−
  z-index: 4;
+
−
  font-size: 2em;
+
−
  margin-top: -1.2em;
+
−
  opacity: .3;
+
−
  -webkit-user-select: none;
+
−
  -moz-user-select: none;
+
−
  -ms-user-select: none;
+
−
  user-select: none;
+
−
}
+
−
.bss-next:hover, .bss-prev:hover{
+
−
  cursor: pointer;
+
−
  opacity: 1;
+
−
}
+
−
.bss-next{
+
−
  right: -1px;
+
−
  padding: 10px 5px 15px 10px;
+
−
  border-top-left-radius: 3px;
+
−
  border-bottom-left-radius: 3px;
+
−
}
+
−
.bss-prev{
+
−
  left: 0;
+
−
  padding: 10px 10px 15px 5px;
+
−
  border-top-right-radius: 3px;
+
−
  border-bottom-right-radius: 3px;
+
−
}
+
−
.bss-fullscreen{
+
−
  display: block;
+
−
  width: 32px;
+
−
  height: 32px;   
+
−
  background: rgba(0,0,0,.4) url(../img/arrows-alt_ffffff_64.png);
+
−
  -webkit-background-size: contain;
+
−
  background-size: contain;
+
−
  position: absolute;
+
−
  top: 5px;
+
−
  left: 5px; 
+
−
  cursor: pointer;   
+
−
  opacity: .3;
+
−
}
+
−
.bss-fullscreen:hover{
+
−
  opacity: .8; 
+
−
}
+
−
:-webkit-full-screen .bss-fullscreen{
+
−
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
+
−
    -webkit-background-size: contain;
+
−
    background-size: contain;
+
−
}
+
−
:-moz-full-screen .bss-fullscreen{
+
−
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
+
−
    background-size: contain;
+
−
}
+
−
:-ms-fullscreen .bss-fullscreen{
+
−
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
+
−
    background-size: contain;
+
−
}
+
−
:full-screen .bss-fullscreen{
+
−
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
+
−
    -webkit-background-size: contain;
+
−
    background-size: contain;
+
−
}
+
−
:-webkit-full-screen .bss-fullscreen{
+
−
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
+
−
    -webkit-background-size: contain;
+
−
    background-size: contain;
+
−
}
+
−
:-moz-full-screen .bss-fullscreen{
+
−
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
+
−
    background-size: contain;
+
−
}
+
−
:-ms-fullscreen .bss-fullscreen{
+
−
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
+
−
    background-size: contain;
+
−
}
+
−
:fullscreen .bss-fullscreen{
+
−
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
+
−
    -webkit-background-size: contain;
+
−
    background-size: contain;
+
 
}
 
}

Latest revision as of 18:21, 1 November 2017

/*https://www.sitepoint.com/make-a-simple-javascript-slideshow-without-jquery*/

  1. slides{

position: relative; padding: 0px; margin: 0px !important; list-style-type: none; height: 100%; width: 100%; }

.slide{ 

   position: absolute;
   left: 0px;

margin:0px!important; 

   top: 0px;
   width: 100%;

padding:0px!important; 

   height: auto!important;
   opacity: 0;
   z-index: 1;
   -webkit-transition: opacity 1s;
   -moz-transition: opacity 1s;
   -o-transition: opacity 1s;
   transition: opacity 1s;

}

.showing{ 

   opacity: 1;
   z-index: 2;

}