summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorThomas Lange <code@nerdmind.de>2019-01-25 16:20:22 +0100
committerThomas Lange <code@nerdmind.de>2019-01-25 16:20:22 +0100
commitecfec84e078f361872a903aeed93e83f8f84e18f (patch)
tree0f23b44bed39bc9e7f6d4b57fecf84f4e3cf0bab
parent17c4bccef5ad402e622767bd428bc7b91198289c (diff)
downloadslideshow-master.tar.gz
slideshow-master.tar.xz
slideshow-master.zip
Reformat CSS codeHEADmaster
-rw-r--r--rsrc/main.css137
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