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