1div.dokuwiki .layeranimation_disabled { 2 3 background-color: #654321; 4 5 & ~ .layeranimation { 6 background-color: #123456; 7 } 8} 9 10div.dokuwiki .layeranimation { 11 12 position: relative; 13 /* padding-right: 20px; */ 14 15 &.noscripting { 16 17 &, div.layer { 18 height: auto !important; 19 } 20 21 /* div.layer:not(:nth-last-child(2)) { */ 22 div.layer { 23 24 &:after { 25 content: ''; 26 clear: both; 27 display: block; 28 } 29 30 &:not(.fixed):not(div:last-of-type):after { 31 border-bottom: 1px solid __lightgray__; 32 } 33 34 &.fixed { 35 display: none !important; 36 } 37 } 38 } 39 40 div.layer, div.layer div.item { 41/* 42 clear: both; 43 float: left; 44*/ 45 width: 100%; 46 } 47 48 div.layer { 49 position: relative; 50 clear: both; 51 52 opacity: 1; 53 -webkit-transition-property: opacity; 54 -webkit-transition-duration: 2s; 55 56 div.item { 57 box-sizing: border-box; 58 -moz-box-sizing: border-box; 59 60 display: inline; 61 position: relative; 62 63 & > * { 64 display: inline-block; 65 } 66 67 &:after { 68 clear: both; 69 } 70 } 71 } 72 73 &.scripting { 74 overflow: hidden; 75 border-bottom: 1px solid __lightgray__; 76 77 position: relative; 78 79 padding: 0px; 80 margin-left: auto; 81 margin-right: auto; 82 83 div.layer, div.layer div.item { 84 top: 0; 85 position: absolute; 86 height: 100%; 87 88 overflow: hidden; 89 left: 0px; 90 91 margin: 0px; 92 padding: 0px; 93 } 94 95 div.layer div.item { 96 left: -100%; 97 position: absolute; 98 99 &.first { 100 background-color: __background__; 101 } 102 } 103 104 div.layer div.item.right { 105 left: 100%; 106 } 107 108 div.layer.fixed div.item { 109 left: 0px; 110 } 111 112 ul.layeranimation_layer { 113 display: block; 114 position: absolute; 115 bottom: 0px; 116 left: 0px; 117 118 padding: 0px; 119 margin: 0px; 120 z-index: 200; 121 } 122 } 123 124/* 125 div.box { 126 margin: 20px 0; 127 } 128 129 div.box:last-child *:last-child, 130 div.layer:last-child div.box, &.scripting div.box { 131 margin-bottom : 0px !important; 132 } 133*/ 134 div.layer.fixed, &.scripting div.layer, div.item.fixed { 135 display: none; 136 } 137 138 ul.layeranimation_layer { 139 display: none; 140 141 li { 142 143 float: left; 144 background: #49473E; 145 color: #fff; 146 147 width: 1.3em; 148 height: 1.3em; 149 150 font-size: 0.8em; 151 text-align: center; 152 153 padding: 0px; 154 margin: 0px; 155 156 list-style: none; 157 158 cursor: pointer; 159 160 line-height: 1.3em; 161 162 &:hover { 163 background-color: #577B5D; 164 } 165 166 &.active { 167 background: #716D60; 168 } 169 170 &.play-pause, &.play-pause.active:hover { 171 background-image: url('images/play-pause.gif'); 172 background-position: 0 0; 173 background-size: 1.3em auto; 174 } 175 176 &.play-pause:hover, &.play-pause.active { 177 background-position: 0 100%; 178 } 179 180 .layeranimation ul.layeranimation_layer li.play-pause.active { 181 background-color: #7B5857; 182 } 183 } 184 } 185 186 div.skip { 187 position: absolute; 188 bottom: 5%; 189 padding: 10px 20px; 190 191 background: #fff; 192 opacity: 0; 193 194 border-radius: 5px; 195 box-shadow: 0px 0px 5px #000; 196 197 z-index: 300; 198 199 transition: all 0.15s ease-in-out; 200 -moz-transition: all 0.15s ease-in-out; /* Firefox 4 */ 201 -webkit-transition: all 0.15s ease-in-out; /* Safari and Chrome */ 202 -o-transition: all 0.15s ease-in-out; /* Opera */ 203 204 cursor: pointer; 205 206 &.previous { 207 left: 2%; 208 } 209 210 &.next { 211 right: 2%; 212 } 213 } 214 215 &:hover div.skip { 216 opacity: 0.3; 217 } 218} 219