Changes for page Presentation Test Page

Summary

• Objects (1 modified, 0 added, 0 removed)
  • XWiki.StyleSheetExtension[0]

Details

XWiki.StyleSheetExtension[0]

Code

...	...	@@ -1,68 +1,87 @@
1		-/* Styling the area of the slides */
2		-#slideshow {
3		- overflow: hidden;
4		- height: 1240px;
5		- width: 860px;
6		- margin: 0 auto;
	1	+
	2	+
	3	+/* Slideshow container */
	4	+.slideshow-container {
	5	+ max-width: 1000px;
	6	+ position: relative;
	7	+ margin: auto;
7	7	}
8		-
9		-/* Style each of the sides
10		- with a fixed width and height */
11		-.slide {
12		- float: left;
13		- height: 1240px;
14		- width: 860px;
	9	+
	10	+/* Hide the images by default */
	11	+.mySlides {
	12	+ display: none;
15	15	}
16		-
17		-/* Add animation to the slides */
18		-.slide-wrapper {
19		-
20		- /* Calculate the total width on the
21		- basis of number of slides */
22		- width: calc(860px * 4);
23		-
24		- /* Specify the animation with the
25		- duration and speed */
26		- animation: slide 10s ease infinite;
	14	+
	15	+/* Next & previous buttons */
	16	+.prev, .next {
	17	+ cursor: pointer;
	18	+ position: absolute;
	19	+ top: 50%;
	20	+ width: auto;
	21	+ margin-top: -22px;
	22	+ padding: 16px;
	23	+ color: white;
	24	+ font-weight: bold;
	25	+ font-size: 18px;
	26	+ transition: 0.6s ease;
	27	+ border-radius: 0 3px 3px 0;
	28	+ user-select: none;
27	27	}
28		-
29		-/* Set the background color
30		- of each of the slides */
31		-.slide:nth-child(1) {
32		- background: green;
	30	+
	31	+/* Position the "next button" to the right */
	32	+.next {
	33	+ right: 0;
	34	+ border-radius: 3px 0 0 3px;
33	33	}
34		-
35		-.slide:nth-child(2) {
36		- background: pink;
	36	+
	37	+/* On hover, add a black background color with a little bit see-through */
	38	+.prev:hover, .next:hover {
	39	+ background-color: rgba(0,0,0,0.8);
37	37	}
38		-
39		-.slide:nth-child(3) {
40		- background: red;
	41	+
	42	+/* Caption text */
	43	+.text {
	44	+ color: #f2f2f2;
	45	+ font-size: 15px;
	46	+ padding: 8px 12px;
	47	+ position: absolute;
	48	+ bottom: 8px;
	49	+ width: 100%;
	50	+ text-align: center;
41	41	}
42		-
43		-.slide:nth-child(4) {
44		- background: yellow;
	52	+
	53	+/* Number text (1/3 etc) */
	54	+.numbertext {
	55	+ color: #f2f2f2;
	56	+ font-size: 12px;
	57	+ padding: 8px 12px;
	58	+ position: absolute;
	59	+ top: 0;
45	45	}
46		-
47		-/* Define the animation
48		- for the slideshow */
49		-@keyframes slide {
50		-
51		- /* Calculate the margin-left for
52		- each of the slides */
53		- 20% {
54		- margin-left: 0px;
55		- }
56		-
57		- 40% {
58		- margin-left: calc(-860px * 1);
59		- }
60		-
61		- 60% {
62		- margin-left: calc(-860px * 2);
63		- }
64		-
65		- 80% {
66		- margin-left: calc(-860px * 3);
67		- }
	61	+
	62	+/* The dots/bullets/indicators */
	63	+.dot {
	64	+ cursor: pointer;
	65	+ height: 15px;
	66	+ width: 15px;
	67	+ margin: 0 2px;
	68	+ background-color: #bbb;
	69	+ border-radius: 50%;
	70	+ display: inline-block;
	71	+ transition: background-color 0.6s ease;
68	68	}
	73	+
	74	+.active, .dot:hover {
	75	+ background-color: #717171;
	76	+}
	77	+
	78	+/* Fading animation */
	79	+.fade {
	80	+ animation-name: fade;
	81	+ animation-duration: 1.5s;
	82	+}
	83	+
	84	+@keyframes fade {
	85	+ from {opacity: .4}
	86	+ to {opacity: 1}
	87	+}