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

Revision as of 23:03, 31 October 2017 (view source) Alex74743 (Talk | contribs) (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...")		Revision as of 13:51, 1 November 2017 (view source) Alex74743 (Talk | contribs) Newer edit →
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*/	+	height: 150px;
		+	padding: 0px;
		+	margin: 0px;
		+	list-style-type: none;
	}		}
−	figcaption {	+
−	line-height: 1.5; /* restores line-height to the child element*/	+	.slide{
		+	position: absolute;
		+	left: 0px;
		+	top: 0px;
		+	width: 100%;
		+	height: 100%;
		+	opacity: 0;
		+	z-index: 1;
		+
		+	-webkit-transition: opacity 1s;
		+	-moz-transition: opacity 1s;
		+	-o-transition: opacity 1s;
		+	transition: opacity 1s;
	}		}
−	.bss-slides:focus{	+
−	outline: 0;	+	.showing{
		+	opacity: 1;
		+	z-index: 2;
	}		}
−	.bss-slides figure{	+
−	position: absolute;	+
−	top: 0;	+
−	width: 100%;	+	/*
−	}	+	non-essential styles:
−	.bss-slides figure:first-child{	+	just for appearance; change whatever you want
−	position: relative;	+	*/
−	}	+
−	.bss-slides figure img{	+	.slide{
−	opacity: 0;	+	font-size: 40px;
−	-webkit-transition: opacity 1.2s;	+	padding: 40px;
−	transition: opacity 1.2s;	+	box-sizing: border-box;
−	-webkit-backface-visibility: hidden;	+	background: #333;
−	backface-visibility: hidden;	+	color: #fff;
−	}	+
−	.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{	+	.slide:nth-of-type(1){
−	position: absolute;	+	background: red;
−	font-family: sans-serif;	+
−	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{	+	.slide:nth-of-type(2){
−	background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);	+	background: orange;
−	-webkit-background-size: contain;	+
−	background-size: contain;	+
	}		}
−	:-moz-full-screen .bss-fullscreen{	+	.slide:nth-of-type(3){
−	background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);	+	background: green;
−	background-size: contain;	+
	}		}
−	:-ms-fullscreen .bss-fullscreen{	+	.slide:nth-of-type(4){
−	background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);	+	background: blue;
−	background-size: contain;	+
	}		}
−	:fullscreen .bss-fullscreen{	+	.slide:nth-of-type(5){
−	background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);	+	background: purple;
−	-webkit-background-size: contain;	+
−	background-size: contain;	+
	}		}

---

Revision as of 13:51, 1 November 2017

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

1. slides{

   position: relative;
   height: 150px;
   padding: 0px;
   margin: 0px;
   list-style-type: none;

}

.slide{

   position: absolute;
   left: 0px;
   top: 0px;
   width: 100%;
   height: 100%;
   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;

}

/* non-essential styles: just for appearance; change whatever you want

• /

.slide{

   font-size: 40px;
   padding: 40px;
   box-sizing: border-box;
   background: #333;
   color: #fff;

}

.slide:nth-of-type(1){

   background: red;

} .slide:nth-of-type(2){

   background: orange;

} .slide:nth-of-type(3){

   background: green;

} .slide:nth-of-type(4){

   background: blue;

} .slide:nth-of-type(5){

   background: purple;

}