Changes for page Presentation Test Page
Last modified by Erik Bakker on 2024/07/30 14:39
From version 51.1
edited by Erik Bakker
on 2024/07/30 14:37
on 2024/07/30 14:37
Change comment:
There is no comment for this version
To version 51.2
edited by Erik Bakker
on 2024/07/30 14:38
on 2024/07/30 14:38
Change comment:
There is no comment for this version
Summary
-
Objects (1 modified, 0 added, 0 removed)
Details
- XWiki.StyleSheetExtension[0]
-
- Code
-
... ... @@ -1,0 +1,87 @@ 1 +* {box-sizing:border-box} 2 + 3 +/* Slideshow container */ 4 +.slideshow-container { 5 + max-width: 1000px; 6 + position: relative; 7 + margin: auto; 8 +} 9 + 10 +/* Hide the images by default */ 11 +.mySlides { 12 + display: none; 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; 29 +} 30 + 31 +/* Position the "next button" to the right */ 32 +.next { 33 + right: 0; 34 + border-radius: 3px 0 0 3px; 35 +} 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); 40 +} 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; 51 +} 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; 60 +} 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; 72 +} 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 +}