diff options
Diffstat (limited to 'screenshots.css')
| -rw-r--r-- | screenshots.css | 82 |
1 files changed, 75 insertions, 7 deletions
diff --git a/screenshots.css b/screenshots.css index 52c8ed5..a9e90be 100644 --- a/screenshots.css +++ b/screenshots.css @@ -1,7 +1,75 @@ - .sc_img_holder {float: left; - margin: 5px 5px 5px 0px; - padding: 5px 5px 5px 0px;} - .sc_img {clear: both; - margin-bottom: 5px;} - .sc_txt {display: inline; - text-align: center;}
\ No newline at end of file +/* Rounded screenshot images */ +img +{ + border-radius: 8px; +} + +/* Slideshow container */ +.slideshow-container { + max-width: 90%; + position: relative; + margin: auto; +} + +/* Hide the images by default */ +.mySlides { + border-radius: 8px; +} + +/* Next & previous buttons */ +.prev, .next { + cursor: pointer; + position: absolute; + top: 50%; + width: auto; + margin-top: -22px; + padding: 16px; + color: white; + font-weight: bold; + font-size: 18px; + transition: 0.6s ease; + border-radius: 0 10px 10px 0; + user-select: none; + background-color: rgba(0,0,0,0.0); +} + +/* Position the "next button" to the right */ +.next { + right: 0; + border-radius: 10px 0 0 10px; +} + +/* On hover, add a black background color with a little bit see-through */ +.prev:hover, .next:hover { + color: white; + background-color: rgba(0,0,0,0.25); + text-decoration: none; +} + +/* The dots/bullets/indicators */ +.dot { + cursor: pointer; + height: 15px; + width: 15px; + margin: 0 2px; + background-color: #AAC4E3; + border-radius: 50%; + display: inline-block; + transition: background-color 0.6s ease; +} + +.active, .dot:hover { + background-color: #01306F; +} + +/* Fading animation */ +.fade { + animation-name: fade; + animation-duration: 1.5s; + border-radius: 20px; +} + +@keyframes fade { + from {opacity: .4} + to {opacity: 1} +} |