UNPKG

2.73 kBCSSView Raw
1/*
2 * Copyright 2017 Trim-marks Inc.
3 *
4 * Vivliostyle.js is free software: you can redistribute it and/or modify
5 * it under the terms of the GNU Affero General Public License as published by
6 * the Free Software Foundation, either version 3 of the License, or
7 * (at your option) any later version.
8 *
9 * Vivliostyle.js is distributed in the hope that it will be useful,
10 * but WITHOUT ANY WARRANTY; without even the implied warranty of
11 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 * GNU Affero General Public License for more details.
13 *
14 * You should have received a copy of the GNU Affero General Public License
15 * along with Vivliostyle.js. If not, see <http://www.gnu.org/licenses/>.
16 *
17 */
18
19@media screen {
20 [data-vivliostyle-viewer-viewport] {
21 background: #aaaaaa;
22 }
23
24 [data-vivliostyle-page-container] {
25 background: white;
26 z-index: 0;
27 }
28
29 [data-vivliostyle-viewer-viewport] {
30 display: -webkit-flex;
31 display: flex;
32 overflow: auto;
33 position: relative;
34 }
35
36 [data-vivliostyle-outer-zoom-box] {
37 margin: auto;
38 overflow: hidden;
39 -webkit-flex: none;
40 flex: none;
41 }
42
43 [data-vivliostyle-viewer-viewport] [data-vivliostyle-spread-container] {
44 display: -webkit-flex;
45 display: flex;
46 -webkit-flex: none;
47 flex: none;
48 -webkit-justify-content: center;
49 justify-content: center;
50 -moz-transform-origin: left top;
51 -ms-transform-origin: left top;
52 -webkit-transform-origin: left top;
53 transform-origin: left top;
54 }
55
56 [data-vivliostyle-viewer-viewport][data-vivliostyle-page-progression="ltr"]
57 [data-vivliostyle-spread-container] {
58 -webkit-flex-direction: row;
59 flex-direction: row;
60 }
61
62 [data-vivliostyle-viewer-viewport][data-vivliostyle-page-progression="rtl"]
63 [data-vivliostyle-spread-container] {
64 -webkit-flex-direction: row-reverse;
65 flex-direction: row-reverse;
66 }
67
68 [data-vivliostyle-viewer-viewport] [data-vivliostyle-page-container] {
69 margin: 0 auto;
70 -webkit-flex: none;
71 flex: none;
72 transform-origin: center top;
73 }
74
75 [data-vivliostyle-viewer-viewport][data-vivliostyle-spread-view="true"]
76 [data-vivliostyle-page-container][data-vivliostyle-page-side="left"] {
77 margin-right: 1px;
78 transform-origin: right top;
79 }
80
81 [data-vivliostyle-viewer-viewport][data-vivliostyle-spread-view="true"]
82 [data-vivliostyle-page-container][data-vivliostyle-page-side="right"] {
83 margin-left: 1px;
84 transform-origin: left top;
85 }
86
87 [data-vivliostyle-viewer-viewport][data-vivliostyle-spread-view="true"]
88 [data-vivliostyle-page-container][data-vivliostyle-unpaired-page="true"] {
89 margin-left: auto;
90 margin-right: auto;
91 transform-origin: center top;
92 }
93}