 |
index : Slideshow | |
| A simple image slideshow, written in CSS3 & JS (ECMAScript 6). | Thomas Lange |
| summaryrefslogtreecommitdiffstats |
diff options
| author | Thomas Lange <code@nerdmind.de> | 2019-01-25 16:20:22 +0100 |
|---|---|---|
| committer | Thomas Lange <code@nerdmind.de> | 2019-01-25 16:20:22 +0100 |
| commit | ecfec84e078f361872a903aeed93e83f8f84e18f (patch) | |
| tree | 0f23b44bed39bc9e7f6d4b57fecf84f4e3cf0bab | |
| parent | 17c4bccef5ad402e622767bd428bc7b91198289c (diff) | |
| download | slideshow-master.tar.gz slideshow-master.tar.xz slideshow-master.zip | |
| -rw-r--r-- | rsrc/main.css | 137 |
1 files changed, 84 insertions, 53 deletions
diff --git a/rsrc/main.css b/rsrc/main.css index fd1c116..2f54849 100644 --- a/rsrc/main.css +++ b/rsrc/main.css @@ -1,107 +1,138 @@ /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Main ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ -html{margin:0;padding:0;height:100%;font-size:1.25rem;background:#DDD;} -body{margin:0;padding:0;height:100%;font-size:1.00rem;display:flex;} +html { + margin: 0; + padding: 0; + height: 100%; + font-size: 1.25rem; + background: #DDD; +} + +body { + margin: 0; + padding: 0; + height: 100%; + font-size: 1.00rem; + display: flex; +} -main{margin:auto;padding:1rem;background:#FFF;width:60rem;border:0.05rem solid #AAA;} +main { + margin: auto; + padding: 1rem; + background: #FFF; + width: 60rem; + border: 0.05rem solid #AAA; +} /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Slideshow ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ .slideshow { - display:flex; - width:100%; - height:30rem; - border:0.05rem solid #AAA; + display: flex; + width: 100%; + height: 30rem; + border: 0.05rem solid #AAA; } .slideshow > ul, .slideshow > div { - display:flex; - box-sizing:border-box; - align-items:center; + display: flex; + box-sizing: border-box; + align-items: center; } .slideshow > div { - width:5%; - background:#DDD; - justify-content:center; - cursor:pointer; - font-weight:600; - padding:0.25rem; + width: 5%; + background: #DDD; + justify-content: center; + cursor: pointer; + font-weight: 600; + padding: 0.25rem; } .slideshow > ul { - list-style:none; - margin:0; - padding:0; - width:90%; - border:0.05rem solid #AAA; - border-top:none; - border-bottom:none; - box-sizing:border-box; - z-index:0; - position:relative; - overflow:hidden; + list-style: none; + margin: 0; + padding: 0; + width: 90%; + border: 0.05rem solid #AAA; + border-top: none; + border-bottom: none; + box-sizing: border-box; + z-index: 0; + position: relative; + overflow: hidden; } .slideshow > ul > li { - transition:visibility 0.5s linear, opacity 0.5s linear; - position:absolute; - top:0; - padding:0.5rem; - box-sizing:border-box; + transition: visibility 0.5s linear, opacity 0.5s linear; + position: absolute; + top: 0; + padding: 0.5rem; + box-sizing: border-box; } .slideshow > ul > li.show { - visibility:visible; - opacity:1; + visibility: visible; + opacity: 1; } .slideshow > ul > li.show img { - animation-name:animation; - animation-duration:0.5s; - animation-fill-mode:both; + animation-name: animation; + animation-duration: 0.5s; + animation-fill-mode: both; } -.slideshow > ul > li.show.next img{ - animation-name:nextAnimation; +.slideshow > ul > li.show.next img { + animation-name: nextAnimation; } -.slideshow > ul > li.show.prev img{ - animation-name:prevAnimation; +.slideshow > ul > li.show.prev img { + animation-name: prevAnimation; } .slideshow > ul > li.hide { - visibility:hidden; - opacity:0; + visibility: hidden; + opacity: 0; } /* The "object-fit" attribute is equivalent to "background-size". */ .slideshow > ul, .slideshow > ul > li, .slideshow > ul > li > img { - width:100%; - height:100%; - object-fit:contain; - background:#DDD; + width: 100%; + height: 100%; + object-fit: contain; + background: #DDD; } /*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ # Animation ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/ @keyframes animation { - 0% {transform:translateY(-50rem);} - 100%{transform:translateY(0);} + 0% { + transform: translateY(-50rem); + } + 100% { + transform: translateY(0); + } } @keyframes prevAnimation { - 0% {transform:translateX(-50rem);} - 100%{transform:translateX(0);} + 0% { + transform: translateX(-50rem); + } + 100% { + transform: translateX(0); + } } @keyframes nextAnimation { - 0% {transform:translateX(50rem);} - 100%{transform:translateX(0);} + 0% { + transform: translateX(50rem); + } + 100% { + transform: translateX(0); + } }
\ No newline at end of file |
generated by cgit v1.2.3 (git 2.46.0) at 2026-07-01 09:58:41 +0000