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,82 @@
1		-/* Styling the area of the slides */
2		-#slideshow {
3		- overflow: hidden;
4		- height: 1240px;
5		- width: 860px;
6		- margin: 0 auto;
	1	+* {box-sizing:border-box}
	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	+/* 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;
37	37	}
38		-
39		-.slide:nth-child(3) {
40		- background: red;
	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;
41	41	}
42		-
43		-.slide:nth-child(4) {
44		- background: yellow;
	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;
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		- }
	68	+
	69	+.active, .dot:hover {
	70	+ background-color: #717171;
68	68	}
	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	+}