Changes for page Presentation Test Page

Summary

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

Details

XWiki.StyleSheetExtension[0]

Code

...	...	@@ -1,82 +1,68 @@
1		-* {box-sizing:border-box}
2		-
3		-/* Slideshow container */
4		-.slideshow-container {
5		- max-width: 1000px;
6		- position: relative;
7		- margin: auto;
	1	+/* Styling the area of the slides */
	2	+#slideshow {
	3	+ overflow: hidden;
	4	+ height: 1240px;
	5	+ width: 860px;
	6	+ margin: 0 auto;
8	8	}
9		-
10		-/* Hide the images by default */
11		-.mySlides {
12		- display: none;
	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;
13	13	}
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;
	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;
29	29	}
30		-
31		-/* Position the "next button" to the right */
32		-.next {
33		- right: 0;
34		- border-radius: 3px 0 0 3px;
	28	+
	29	+/* Set the background color
	30	+ of each of the slides */
	31	+.slide:nth-child(1) {
	32	+ background: green;
35	35	}
36		-
37		-/* Caption text */
38		-.text {
39		- color: #f2f2f2;
40		- font-size: 15px;
41		- padding: 8px 12px;
42		- position: absolute;
43		- bottom: 8px;
44		- width: 100%;
45		- text-align: center;
	34	+
	35	+.slide:nth-child(2) {
	36	+ background: pink;
46	46	}
47		-
48		-/* Number text (1/3 etc) */
49		-.numbertext {
50		- color: #f2f2f2;
51		- font-size: 12px;
52		- padding: 8px 12px;
53		- position: absolute;
54		- top: 0;
	38	+
	39	+.slide:nth-child(3) {
	40	+ background: red;
55	55	}
56		-
57		-/* The dots/bullets/indicators */
58		-.dot {
59		- cursor: pointer;
60		- height: 15px;
61		- width: 15px;
62		- margin: 0 2px;
63		- background-color: #bbb;
64		- border-radius: 50%;
65		- display: inline-block;
66		- transition: background-color 0.6s ease;
	42	+
	43	+.slide:nth-child(4) {
	44	+ background: yellow;
67	67	}
68		-
69		-.active, .dot:hover {
70		- background-color: #717171;
	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	+ }
71	71	}
72		-
73		-/* Fading animation */
74		-.fade {
75		- animation-name: fade;
76		- animation-duration: 1.5s;
77		-}
78		-
79		-@keyframes fade {
80		- from {opacity: .4}
81		- to {opacity: 1}
82		-}