← All changes | modules/shortcodes/css/slideshow-shortcode.css +162 -0 16.2-beta → 16.3 View file →

		@@ -1,0 +1,162 @@
	1	+.jetpack-slideshow-window {
	2	+ background-color: #222;
	3	+ border: 20px solid #222;
	4	+ border-radius: 10px;
	5	+ height: 0;
	6	+ margin-bottom: 20px;
	7	+ overflow: hidden;
	8	+ padding-top: 30px !important;
	9	+ padding-bottom: 56.25% !important;
	10	+ position: relative;
	11	+ z-index: 1;
	12	+}
	13	+
	14	+.jetpack-slideshow-window.jetpack-slideshow-white {
	15	+ background-color: #fff;
	16	+ border-color: #fff;
	17	+}
	18	+
	19	+.jetpack-slideshow-window,
	20	+.jetpack-slideshow-window * {
	21	+ box-sizing: content-box;
	22	+}
	23	+
	24	+.jetpack-slideshow-loading {
	25	+ height: 100%;
	26	+ text-align: center;
	27	+ margin: auto;
	28	+}
	29	+
	30	+body div.jetpack-slideshow-window * img {
	31	+
	32	+ /* Override any styles that might be present in the page stylesheet */
	33	+ background-color: transparent !important;
	34	+ background-image: none !important;
	35	+ border-width: 0 !important;
	36	+ display: block;
	37	+ margin: 0 auto;
	38	+ max-width: 100%;
	39	+ max-height: 100%;
	40	+ padding: 0 !important;
	41	+ position: relative;
	42	+ transform: translateY(-50%);
	43	+ top: 50%;
	44	+}
	45	+
	46	+.jetpack-slideshow-loading img {
	47	+ vertical-align: middle;
	48	+}
	49	+
	50	+.jetpack-slideshow-slide {
	51	+ display: none;
	52	+ height: 100% !important;
	53	+ left: 0;
	54	+ margin: auto;
	55	+ position: absolute;
	56	+ text-align: center;
	57	+ top: 0;
	58	+ width: 100% !important;
	59	+}
	60	+
	61	+.jetpack-slideshow-slide img {
	62	+ vertical-align: middle;
	63	+ margin: 0 auto;
	64	+}
	65	+
	66	+.jetpack-slideshow-line-height-hack {
	67	+ overflow: hidden;
	68	+ width: 0;
	69	+ font-size: 0;
	70	+}
	71	+
	72	+.jetpack-slideshow-slide-caption {
	73	+ font-size: 13px;
	74	+ font-family: "Helvetica Neue", sans-serif;
	75	+ color: #f6f7f7;
	76	+ text-shadow: #222 1px 1px 2px;
	77	+ line-height: 25px;
	78	+ height: 25px;
	79	+ position: absolute;
	80	+ bottom: 5px;
	81	+ left: 0;
	82	+ z-index: 100;
	83	+ width: 100%;
	84	+ text-align: center;
	85	+}
	86	+
	87	+.jetpack-slideshow-controls {
	88	+ z-index: 1000;
	89	+ position: absolute;
	90	+ bottom: 30px;
	91	+ margin: auto;
	92	+ text-align: center;
	93	+ width: 100%;
	94	+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
	95	+ opacity: 0.5;
	96	+
	97	+ /*rtl:ignore*/
	98	+ direction: ltr;
	99	+ transition: 300ms opacity ease-out;
	100	+}
	101	+
	102	+.jetpack-slideshow-window:hover .jetpack-slideshow-controls {
	103	+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	104	+ opacity: 1;
	105	+}
	106	+
	107	+body div div.jetpack-slideshow-controls a,
	108	+body div div.jetpack-slideshow-controls a:hover {
	109	+ border: 2px solid rgba(255, 255, 255, 0.1) !important;
	110	+ background-color: rgba(0, 0, 0, 0.6) !important;
	111	+ background-image: url(../img/slideshow-controls.png) !important;
	112	+ background-repeat: no-repeat;
	113	+ background-size: 142px 16px !important;
	114	+ background-position: -34px 8px !important;
	115	+ color: #222 !important;
	116	+ margin: 0 5px !important;
	117	+ padding: 0 !important;
	118	+ display: inline-block !important;
	119	+ zoom: 1;
	120	+ height: 32px !important;
	121	+ width: 32px !important;
	122	+ line-height: 32px !important;
	123	+ text-align: center !important;
	124	+ border-radius: 10em !important;
	125	+ transition: 300ms border-color ease-out;
	126	+}
	127	+
	128	+@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
	129	+
	130	+ body div div.jetpack-slideshow-controls a,
	131	+ body div div.jetpack-slideshow-controls a:hover {
	132	+ background-image: url(../img/slideshow-controls-2x.png) !important;
	133	+ }
	134	+}
	135	+
	136	+body div div.jetpack-slideshow-controls a:hover {
	137	+ border-color: rgba(255, 255, 255, 1) !important;
	138	+}
	139	+
	140	+body div div.jetpack-slideshow-controls a:first-child {
	141	+ background-position: -76px 8px !important;
	142	+}
	143	+
	144	+body div div.jetpack-slideshow-controls a:last-child {
	145	+ background-position: -117px 8px !important;
	146	+}
	147	+
	148	+body div div.jetpack-slideshow-controls a:nth-child(2) {
	149	+ background-position: -34px 8px !important;
	150	+}
	151	+
	152	+body div div.jetpack-slideshow-controls a.running {
	153	+ background-position: -34px 8px !important;
	154	+}
	155	+
	156	+body div div.jetpack-slideshow-controls a.paused {
	157	+ background-position: 9px 8px !important;
	158	+}
	159	+
	160	+.jetpack-slideshow-controls a img {
	161	+ border: 50px dotted #f0f;
	162	+}