|
77
|
1 /* IDRViewer - v1.8.2 */
|
|
|
2
|
|
|
3 /* Layout Styles */
|
|
|
4 .page {
|
|
|
5 display:block;
|
|
|
6 overflow: hidden;
|
|
|
7 background-color: white;
|
|
|
8 }
|
|
|
9
|
|
|
10 .page-inner {
|
|
|
11 -webkit-transform-origin: top left;
|
|
|
12 -ms-transform-origin: top left;
|
|
|
13 transform-origin: top left;
|
|
|
14 }
|
|
|
15
|
|
|
16 #idrviewer {
|
|
|
17 overflow: auto;
|
|
|
18 line-height: 0;
|
|
|
19 margin: 0;
|
|
|
20 padding: 0;
|
|
|
21 -webkit-overflow-scrolling: touch;
|
|
|
22 }
|
|
|
23
|
|
|
24 #overlay {
|
|
|
25 width: 100%;
|
|
|
26 height: 100%;
|
|
|
27 position: absolute;
|
|
|
28 z-index: 10;
|
|
|
29 visibility: hidden;
|
|
|
30 }
|
|
|
31
|
|
|
32 #overlay.panning {
|
|
|
33 visibility: visible;
|
|
|
34 cursor: all-scroll;
|
|
|
35 cursor: -moz-grab;
|
|
|
36 cursor: -webkit-grab;
|
|
|
37 cursor: grab;
|
|
|
38 }
|
|
|
39
|
|
|
40 #overlay.panning.mousedown {
|
|
|
41 cursor: all-scroll;
|
|
|
42 cursor: -moz-grabbing;
|
|
|
43 cursor: -webkit-grabbing;
|
|
|
44 cursor: grabbing;
|
|
|
45 }
|
|
|
46
|
|
|
47 /* Presentation Layout */
|
|
|
48 .layout-presentation .page {
|
|
|
49 visibility: hidden;
|
|
|
50 position: absolute;
|
|
|
51 }
|
|
|
52 .layout-presentation .page.current {
|
|
|
53 visibility: visible !important;
|
|
|
54 z-index: 1; /* Fix selection in IE/Edge */
|
|
|
55 }
|
|
|
56
|
|
|
57 /* Continuous Layout */
|
|
|
58 .layout-continuous .page {
|
|
|
59 margin: 0 auto 10px;
|
|
|
60 }
|
|
|
61 .layout-continuous .page:last-child {
|
|
|
62 margin: 0 auto 0;
|
|
|
63 }
|
|
|
64
|
|
|
65 /* Continuous_Horizontal Layout */
|
|
|
66 #idrviewer.layout-continuous_horizontal {
|
|
|
67 overflow: hidden;
|
|
|
68
|
|
|
69 /*-webkit-scroll-snap-type: mandatory;*/
|
|
|
70 /*-webkit-scroll-snap-points-x: repeat(100%);*/
|
|
|
71 }
|
|
|
72
|
|
|
73 .layout-continuous_horizontal .page {
|
|
|
74 display: inline-block;
|
|
|
75 transform: translate3d(0, 0, 0);
|
|
|
76 }
|
|
|
77
|
|
|
78 /* Magazine Layout */
|
|
|
79 .layout-magazine .page {
|
|
|
80 visibility: hidden;
|
|
|
81 position: absolute;
|
|
|
82 }
|
|
|
83 .layout-magazine .page.current {
|
|
|
84 visibility: visible !important;
|
|
|
85 z-index: 1; /* Fix selection in IE/Edge */
|
|
|
86 }
|
|
|
87
|
|
|
88
|
|
|
89
|
|
|
90 /* Slide Transition */
|
|
|
91 .layout-presentation.transition-slide .page {
|
|
|
92 -webkit-transition: opacity 0.2s, -webkit-transform 0.4s;
|
|
|
93 transition: opacity 0.2s, transform 0.4s;
|
|
|
94 opacity: 0;
|
|
|
95 visibility: visible !important;
|
|
|
96 }
|
|
|
97 .layout-presentation.transition-slide .page.current {
|
|
|
98 visibility: visible !important;
|
|
|
99 opacity: 1;
|
|
|
100 }
|
|
|
101 .layout-presentation.transition-slide .page.after {
|
|
|
102 visibility: visible !important;
|
|
|
103 -webkit-transform: translateX(130%);
|
|
|
104 transform: translateX(130%);
|
|
|
105 -webkit-transition-delay: 0.1s, 0s;
|
|
|
106 transition-delay: 0.1s, 0s;
|
|
|
107 }
|
|
|
108 .layout-presentation.transition-slide .page.before {
|
|
|
109 visibility: visible !important;
|
|
|
110 -webkit-transform: translateX(-130%);
|
|
|
111 transform: translateX(-130%);
|
|
|
112 -webkit-transition-delay: 0.1s, 0s;
|
|
|
113 transition-delay: 0.1s, 0s;
|
|
|
114 }
|
|
|
115
|
|
|
116 /* Fade Transition */
|
|
|
117 .layout-presentation.transition-fade .page {
|
|
|
118 -webkit-transition: visibility 0.5s, opacity 0.5s;
|
|
|
119 transition: visibility 0.5s, opacity 0.5s;
|
|
|
120 opacity: 1;
|
|
|
121 }
|
|
|
122 .layout-presentation.transition-fade .page.prev,
|
|
|
123 .layout-presentation.transition-fade .page.next {
|
|
|
124 opacity: 0;
|
|
|
125 z-index: 2;
|
|
|
126 }
|
|
|
127
|
|
|
128 /* Flip Transition */
|
|
|
129 .layout-presentation.transition-flip > div > div {
|
|
|
130 -webkit-transform-style: preserve-3d;
|
|
|
131 transform-style: preserve-3d;
|
|
|
132 -webkit-perspective: 1000px;
|
|
|
133 perspective: 1000px;
|
|
|
134 }
|
|
|
135 .layout-presentation.transition-flip .page {
|
|
|
136 -webkit-transition: -webkit-transform 0.5s;
|
|
|
137 transition: transform 0.5s;
|
|
|
138 -webkit-backface-visibility: hidden;
|
|
|
139 backface-visibility: hidden;
|
|
|
140 }
|
|
|
141 .layout-presentation.transition-flip .page.before {
|
|
|
142 -webkit-transform: rotateY(-180deg);
|
|
|
143 transform: rotateY(-180deg);
|
|
|
144 }
|
|
|
145 .layout-presentation.transition-flip .page.after {
|
|
|
146 -webkit-transform: rotateY(180deg);
|
|
|
147 transform: rotateY(180deg);
|
|
|
148 }
|
|
|
149 .layout-presentation.transition-flip .next,
|
|
|
150 .layout-presentation.transition-flip .prev {
|
|
|
151 visibility: visible;
|
|
|
152 }
|
|
|
153
|
|
|
154 /* Throw Transition */
|
|
|
155 .layout-presentation.transition-throw .page {
|
|
|
156 opacity: 0;
|
|
|
157 -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
|
|
|
158 transition: transform 0.5s, opacity 0.5s;
|
|
|
159 -webkit-transition-timing-function: ease-out;
|
|
|
160 transition-timing-function: ease-out;
|
|
|
161 }
|
|
|
162 .layout-presentation.transition-throw .page.current {
|
|
|
163 visibility: visible !important;
|
|
|
164 z-index: 3;
|
|
|
165 opacity: 1;
|
|
|
166 }
|
|
|
167 .layout-presentation.transition-throw .page.prev {
|
|
|
168 visibility: visible !important;
|
|
|
169 opacity: 0;
|
|
|
170 z-index: 4;
|
|
|
171 }
|
|
|
172 .layout-presentation.transition-throw .page.prev:nth-child(even) {
|
|
|
173 -webkit-transform: translate(100%, -100%) rotate(240deg);
|
|
|
174 transform: translate(100%, -100%) rotate(240deg);
|
|
|
175 }
|
|
|
176 .layout-presentation.transition-throw .page.prev:nth-child(odd) {
|
|
|
177 -webkit-transform: translate(-100%, -100%) rotate(-240deg);
|
|
|
178 transform: translate(-100%, -100%) rotate(-240deg);
|
|
|
179 }
|
|
|
180 .layout-presentation.transition-throw .page.next {
|
|
|
181 visibility: visible !important;
|
|
|
182 -webkit-transform: none;
|
|
|
183 transform: none;
|
|
|
184 opacity: 1;
|
|
|
185 z-index: 2;
|
|
|
186 }
|
|
|
187
|
|
|
188 /* Magazine Transition */
|
|
|
189 .layout-magazine.transition-magazine > div > div {
|
|
|
190 -webkit-transform-style: preserve-3d;
|
|
|
191 transform-style: preserve-3d;
|
|
|
192 -webkit-perspective: 3000px;
|
|
|
193 perspective: 3000px;
|
|
|
194 }
|
|
|
195 .layout-magazine.transition-magazine .page {
|
|
|
196 -webkit-transition: -webkit-transform 0.5s;
|
|
|
197 transition: transform 0.5s;
|
|
|
198 -webkit-backface-visibility: hidden;
|
|
|
199 backface-visibility: hidden;
|
|
|
200 }
|
|
|
201 .layout-magazine.transition-magazine .page:nth-child(odd) {
|
|
|
202 -webkit-transform-origin: left top 0;
|
|
|
203 transform-origin: left top 0;
|
|
|
204 }
|
|
|
205 .layout-magazine.transition-magazine .page:nth-child(even) {
|
|
|
206 -webkit-transform-origin: right top 0;
|
|
|
207 transform-origin: right top 0;
|
|
|
208 }
|
|
|
209 .layout-magazine.transition-magazine .page.current,
|
|
|
210 .layout-magazine.transition-magazine .page.prev:nth-child(even),
|
|
|
211 .layout-magazine.transition-magazine .page.next:nth-child(odd),
|
|
|
212 .layout-magazine.transition-magazine .page.before:nth-child(even),
|
|
|
213 .layout-magazine.transition-magazine .page.after:nth-child(odd) {
|
|
|
214 -webkit-transform: none !important;
|
|
|
215 transform: none !important;
|
|
|
216 }
|
|
|
217
|
|
|
218 .layout-magazine.transition-magazine .page.before:nth-child(odd),
|
|
|
219 .layout-magazine.transition-magazine .page.prev:nth-child(odd) {
|
|
|
220 -webkit-transform: rotateY(-180deg);
|
|
|
221 transform: rotateY(-180deg);
|
|
|
222 z-index: 3;
|
|
|
223 }
|
|
|
224
|
|
|
225 .layout-magazine.transition-magazine .page.after:nth-child(even),
|
|
|
226 .layout-magazine.transition-magazine .page.next:nth-child(even) {
|
|
|
227 -webkit-transform: rotateY(180deg);
|
|
|
228 transform: rotateY(180deg);
|
|
|
229 z-index: 3;
|
|
|
230 }
|
|
|
231
|
|
|
232 .layout-magazine.transition-magazine .page.prev,
|
|
|
233 .layout-magazine.transition-magazine .page.next {
|
|
|
234 visibility: visible;
|
|
|
235 }
|
|
|
236 .layout-magazine.transition-magazine .page.current {
|
|
|
237 z-index: 2;
|
|
|
238 } |
