div.dokuwiki .layeranimation_disabled { background-color: #654321; & ~ .layeranimation { background-color: #123456; } } div.dokuwiki .layeranimation { position: relative; /* padding-right: 20px; */ &.noscripting { &, div.layer { height: auto !important; } /* div.layer:not(:nth-last-child(2)) { */ div.layer { &:after { content: ''; clear: both; display: block; } &:not(.fixed):not(div:last-of-type):after { border-bottom: 1px solid __lightgray__; } &.fixed { display: none !important; } } } div.layer, div.layer div.item { /* clear: both; float: left; */ width: 100%; } div.layer { position: relative; clear: both; opacity: 1; -webkit-transition-property: opacity; -webkit-transition-duration: 2s; div.item { box-sizing: border-box; -moz-box-sizing: border-box; display: inline; position: relative; & > * { display: inline-block; } &:after { clear: both; } } } &.scripting { overflow: hidden; border-bottom: 1px solid __lightgray__; position: relative; padding: 0px; margin-left: auto; margin-right: auto; div.layer, div.layer div.item { top: 0; position: absolute; height: 100%; overflow: hidden; left: 0px; margin: 0px; padding: 0px; } div.layer div.item { left: -100%; position: absolute; &.first { background-color: __background__; } } div.layer div.item.right { left: 100%; } div.layer.fixed div.item { left: 0px; } ul.layeranimation_layer { display: block; position: absolute; bottom: 0px; left: 0px; padding: 0px; margin: 0px; z-index: 200; } } /* div.box { margin: 20px 0; } div.box:last-child *:last-child, div.layer:last-child div.box, &.scripting div.box { margin-bottom : 0px !important; } */ div.layer.fixed, &.scripting div.layer, div.item.fixed { display: none; } ul.layeranimation_layer { display: none; li { float: left; background: #49473E; color: #fff; width: 1.3em; height: 1.3em; font-size: 0.8em; text-align: center; padding: 0px; margin: 0px; list-style: none; cursor: pointer; line-height: 1.3em; &:hover { background-color: #577B5D; } &.active { background: #716D60; } &.play-pause, &.play-pause.active:hover { background-image: url('images/play-pause.gif'); background-position: 0 0; background-size: 1.3em auto; } &.play-pause:hover, &.play-pause.active { background-position: 0 100%; } .layeranimation ul.layeranimation_layer li.play-pause.active { background-color: #7B5857; } } } div.skip { position: absolute; bottom: 5%; padding: 10px 20px; background: #fff; opacity: 0; border-radius: 5px; box-shadow: 0px 0px 5px #000; z-index: 300; transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; /* Firefox 4 */ -webkit-transition: all 0.15s ease-in-out; /* Safari and Chrome */ -o-transition: all 0.15s ease-in-out; /* Opera */ cursor: pointer; &.previous { left: 2%; } &.next { right: 2%; } } &:hover div.skip { opacity: 0.3; } }