monocle-rails 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.DS_Store +0 -0
- data/.gitignore +17 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +29 -0
- data/Rakefile +1 -0
- data/lib/monocle/rails.rb +8 -0
- data/lib/monocle/rails/version.rb +5 -0
- data/monocle-rails.gemspec +23 -0
- data/vendor/.DS_Store +0 -0
- data/vendor/assets/.DS_Store +0 -0
- data/vendor/assets/javascripts/.DS_Store +0 -0
- data/vendor/assets/javascripts/compat/browser.js +120 -0
- data/vendor/assets/javascripts/compat/css.js +145 -0
- data/vendor/assets/javascripts/compat/env.js +463 -0
- data/vendor/assets/javascripts/compat/gala.js +469 -0
- data/vendor/assets/javascripts/compat/stubs.js +50 -0
- data/vendor/assets/javascripts/controls/contents.js +59 -0
- data/vendor/assets/javascripts/controls/magnifier.js +51 -0
- data/vendor/assets/javascripts/controls/panel.js +136 -0
- data/vendor/assets/javascripts/controls/placesaver.js +100 -0
- data/vendor/assets/javascripts/controls/scrubber.js +140 -0
- data/vendor/assets/javascripts/controls/spinner.js +99 -0
- data/vendor/assets/javascripts/controls/stencil.js +410 -0
- data/vendor/assets/javascripts/core/billboard.js +120 -0
- data/vendor/assets/javascripts/core/book.js +467 -0
- data/vendor/assets/javascripts/core/bookdata.js +59 -0
- data/vendor/assets/javascripts/core/component.js +413 -0
- data/vendor/assets/javascripts/core/events.js +56 -0
- data/vendor/assets/javascripts/core/factory.js +194 -0
- data/vendor/assets/javascripts/core/formatting.js +317 -0
- data/vendor/assets/javascripts/core/monocle.js +16 -0
- data/vendor/assets/javascripts/core/place.js +210 -0
- data/vendor/assets/javascripts/core/reader.js +683 -0
- data/vendor/assets/javascripts/core/selection.js +158 -0
- data/vendor/assets/javascripts/core/styles.js +155 -0
- data/vendor/assets/javascripts/dimensions/columns.js +218 -0
- data/vendor/assets/javascripts/flippers/instant.js +78 -0
- data/vendor/assets/javascripts/flippers/scroller.js +128 -0
- data/vendor/assets/javascripts/flippers/slider.js +469 -0
- data/vendor/assets/javascripts/monocore.js +27 -0
- data/vendor/assets/javascripts/monoctrl.js +1 -0
- data/vendor/assets/javascripts/panels/eink.js +61 -0
- data/vendor/assets/javascripts/panels/imode.js +180 -0
- data/vendor/assets/javascripts/panels/magic.js +297 -0
- data/vendor/assets/javascripts/panels/marginal.js +50 -0
- data/vendor/assets/javascripts/panels/twopane.js +34 -0
- data/vendor/assets/stylesheets/monocore.css +194 -0
- data/vendor/assets/stylesheets/monoctrl.css +168 -0
- metadata +129 -0
@@ -0,0 +1,50 @@
|
|
1
|
+
// Provides page-flipping panels only in the margins of the book. This is not
|
2
|
+
// entirely suited to small screens with razor-thin margins, but is an
|
3
|
+
// appropriate panel class for larger screens (like, say, an iPad).
|
4
|
+
//
|
5
|
+
// Since the flipper hit zones are only in the margins, the actual text content
|
6
|
+
// of the book is always selectable.
|
7
|
+
//
|
8
|
+
Monocle.Panels.Marginal = function (flipper, evtCallbacks) {
|
9
|
+
|
10
|
+
var API = { constructor: Monocle.Panels.Marginal }
|
11
|
+
var k = API.constants = API.constructor;
|
12
|
+
var p = API.properties = {}
|
13
|
+
|
14
|
+
|
15
|
+
function initialize() {
|
16
|
+
p.panels = {
|
17
|
+
forwards: new Monocle.Controls.Panel(),
|
18
|
+
backwards: new Monocle.Controls.Panel()
|
19
|
+
}
|
20
|
+
|
21
|
+
for (var dir in p.panels) {
|
22
|
+
flipper.properties.reader.addControl(p.panels[dir]);
|
23
|
+
p.panels[dir].listenTo(evtCallbacks);
|
24
|
+
p.panels[dir].setDirection(flipper.constants[dir.toUpperCase()]);
|
25
|
+
|
26
|
+
var prop = dir == "forwards" ? "right" : "left";
|
27
|
+
p.panels[dir].properties.div.style[prop] = 0
|
28
|
+
}
|
29
|
+
setWidths();
|
30
|
+
}
|
31
|
+
|
32
|
+
|
33
|
+
function setWidths() {
|
34
|
+
var page = flipper.properties.reader.dom.find('page');
|
35
|
+
var sheaf = page.m.sheafDiv;
|
36
|
+
var bw = sheaf.offsetLeft;
|
37
|
+
var fw = page.offsetWidth - (sheaf.offsetLeft + sheaf.offsetWidth);
|
38
|
+
bw = Math.floor(((bw - 2) / page.offsetWidth) * 10000 / 100) + "%";
|
39
|
+
fw = Math.floor(((fw - 2) / page.offsetWidth) * 10000 / 100) + "%";
|
40
|
+
p.panels.forwards.properties.div.style.width = fw;
|
41
|
+
p.panels.backwards.properties.div.style.width = bw;
|
42
|
+
}
|
43
|
+
|
44
|
+
|
45
|
+
API.setWidths = setWidths;
|
46
|
+
|
47
|
+
initialize();
|
48
|
+
|
49
|
+
return API;
|
50
|
+
}
|
@@ -0,0 +1,34 @@
|
|
1
|
+
// The simplest page-flipping interaction system: contact to the left half of
|
2
|
+
// the reader turns back one page, contact to the right half turns forward
|
3
|
+
// one page.
|
4
|
+
//
|
5
|
+
Monocle.Panels.TwoPane = function (flipper, evtCallbacks) {
|
6
|
+
|
7
|
+
var API = { constructor: Monocle.Panels.TwoPane }
|
8
|
+
var k = API.constants = API.constructor;
|
9
|
+
var p = API.properties = {}
|
10
|
+
|
11
|
+
|
12
|
+
function initialize() {
|
13
|
+
p.panels = {
|
14
|
+
forwards: new Monocle.Controls.Panel(),
|
15
|
+
backwards: new Monocle.Controls.Panel()
|
16
|
+
}
|
17
|
+
|
18
|
+
for (var dir in p.panels) {
|
19
|
+
flipper.properties.reader.addControl(p.panels[dir]);
|
20
|
+
p.panels[dir].listenTo(evtCallbacks);
|
21
|
+
p.panels[dir].setDirection(flipper.constants[dir.toUpperCase()]);
|
22
|
+
var style = { "width": k.WIDTH };
|
23
|
+
style[(dir == "forwards" ? "right" : "left")] = 0;
|
24
|
+
p.panels[dir].properties.div.dom.setStyles(style);
|
25
|
+
}
|
26
|
+
}
|
27
|
+
|
28
|
+
|
29
|
+
initialize();
|
30
|
+
|
31
|
+
return API;
|
32
|
+
}
|
33
|
+
|
34
|
+
Monocle.Panels.TwoPane.WIDTH = "50%";
|
@@ -0,0 +1,194 @@
|
|
1
|
+
/*===========================================================================
|
2
|
+
|
3
|
+
This is a base-level Monocle stylesheet. It assumes no class-prefix has been
|
4
|
+
given to the Reader during initialisation - if one has, you can copy and
|
5
|
+
modify this stylesheet accordingly.
|
6
|
+
|
7
|
+
---------------------------------------------------------------------------*/
|
8
|
+
|
9
|
+
/* The reader object that holds pretty much everything.
|
10
|
+
* (A direct child of the element passed to reader initialisation). */
|
11
|
+
div.monelem_container {
|
12
|
+
background-color: black;
|
13
|
+
}
|
14
|
+
|
15
|
+
|
16
|
+
/* The div that mimics a leaf of paper in a book. */
|
17
|
+
div.monelem_page {
|
18
|
+
background: white;
|
19
|
+
top: 0;
|
20
|
+
left: 0;
|
21
|
+
bottom: 3px;
|
22
|
+
right: 5px;
|
23
|
+
border-right: 1px solid #999;
|
24
|
+
}
|
25
|
+
|
26
|
+
|
27
|
+
/* The div within the page that determines page margins. */
|
28
|
+
div.monelem_sheaf {
|
29
|
+
top: 1em;
|
30
|
+
left: 1em;
|
31
|
+
bottom: 1em;
|
32
|
+
right: 1em;
|
33
|
+
}
|
34
|
+
|
35
|
+
|
36
|
+
/* The iframe within the page that loads the content of the book. */
|
37
|
+
div.monelem_component {
|
38
|
+
}
|
39
|
+
|
40
|
+
|
41
|
+
/* A panel that sits above the entire reader object, holding controls. */
|
42
|
+
div.monelem_overlay {
|
43
|
+
}
|
44
|
+
|
45
|
+
|
46
|
+
/* A full-size panel to display an announcement (iframe or div) */
|
47
|
+
div.monelem_billboard_container {
|
48
|
+
background: #FFF;
|
49
|
+
position: absolute;
|
50
|
+
top: 0;
|
51
|
+
left: 0;
|
52
|
+
height: 100%;
|
53
|
+
width: 100%;
|
54
|
+
z-index: 2000;
|
55
|
+
-webkit-transform: scale(0);
|
56
|
+
-moz-transform: scale(0);
|
57
|
+
transform: scale(0);
|
58
|
+
-webkit-transform-origin: -0 -0;
|
59
|
+
-moz-transform-origin: -0 -0;
|
60
|
+
transform-origin: -0 -0;
|
61
|
+
}
|
62
|
+
|
63
|
+
.monelem_billboard_inner {
|
64
|
+
height: 100%;
|
65
|
+
width: 100%;
|
66
|
+
border: none;
|
67
|
+
overflow: auto;
|
68
|
+
/*-webkit-overflow-scrolling: touch;*/ /* This is sexy, but crashy. */
|
69
|
+
}
|
70
|
+
|
71
|
+
div.monelem_billboard_inner {
|
72
|
+
min-width: 100%;
|
73
|
+
min-height: 100%;
|
74
|
+
text-align: center;
|
75
|
+
vertical-align: middle;
|
76
|
+
display: -webkit-box;
|
77
|
+
-webkit-box-pack: center;
|
78
|
+
-webkit-box-align: center;
|
79
|
+
}
|
80
|
+
|
81
|
+
|
82
|
+
div.monelem_billboard_close {
|
83
|
+
position: absolute;
|
84
|
+
top: 0;
|
85
|
+
right: 0;
|
86
|
+
width: 50px;
|
87
|
+
height: 30px;
|
88
|
+
color: white;
|
89
|
+
background: #C00;
|
90
|
+
cursor: pointer;
|
91
|
+
border-bottom-left-radius: 4px;
|
92
|
+
text-shadow: 1px 1px 1px #900;
|
93
|
+
font: 9pt Helvetica Neue, Helvetica, sans-serif;
|
94
|
+
}
|
95
|
+
|
96
|
+
div.monelem_billboard_close:after {
|
97
|
+
display: block;
|
98
|
+
content: 'Close';
|
99
|
+
width: 100%;
|
100
|
+
line-height: 30px;
|
101
|
+
text-align: center;
|
102
|
+
}
|
103
|
+
|
104
|
+
div.monelem_book_fatality {
|
105
|
+
font-family: Helvetica Neue, Helvetica, sans-serif;
|
106
|
+
margin: 0 auto;
|
107
|
+
max-width: 75%;
|
108
|
+
}
|
109
|
+
|
110
|
+
div.monelem_book_fatality p {
|
111
|
+
line-height: 1.4;
|
112
|
+
}
|
113
|
+
|
114
|
+
|
115
|
+
/*===========================================================================
|
116
|
+
PANELS
|
117
|
+
---------------------------------------------------------------------------*/
|
118
|
+
|
119
|
+
|
120
|
+
.monelem_panels_imode_panel {
|
121
|
+
background: rgba(255,255,255,0.7);
|
122
|
+
opacity: 0;
|
123
|
+
}
|
124
|
+
|
125
|
+
.monelem_panels_imode_backwardsPanel {
|
126
|
+
-webkit-box-shadow: 1px 1px 3px #777;
|
127
|
+
-moz-box-shadow: 1px 1px 3px #777;
|
128
|
+
box-shadow: 1px 1px 3px #777;
|
129
|
+
}
|
130
|
+
|
131
|
+
.monelem_panels_imode_forwardsPanel {
|
132
|
+
-webkit-box-shadow: -1px 1px 3px #777;
|
133
|
+
-moz-box-shadow: -1px 1px 3px #777;
|
134
|
+
box-shadow: -1px 1px 3px #777;
|
135
|
+
}
|
136
|
+
|
137
|
+
.monelem_panels_imode_centralPanel {
|
138
|
+
}
|
139
|
+
|
140
|
+
.monelem_panels_imode_toggleIcon {
|
141
|
+
position: absolute;
|
142
|
+
right: 0;
|
143
|
+
bottom: 0;
|
144
|
+
width: 50px;
|
145
|
+
height: 50px;
|
146
|
+
background-repeat: no-repeat;
|
147
|
+
background-position: center center;
|
148
|
+
}
|
149
|
+
|
150
|
+
/* If you modify this you could significantly change the way panels work. */
|
151
|
+
div.monelem_controls_panel_expanded {
|
152
|
+
left: 0 !important;
|
153
|
+
width: 100% !important;
|
154
|
+
z-index: 1001 !important;
|
155
|
+
}
|
156
|
+
|
157
|
+
/*===========================================================================
|
158
|
+
Flippers
|
159
|
+
---------------------------------------------------------------------------*/
|
160
|
+
|
161
|
+
div.monelem_flippers_slider_wait {
|
162
|
+
position: absolute;
|
163
|
+
right: 0px;
|
164
|
+
top: 0px;
|
165
|
+
width: 92px;
|
166
|
+
height: 112px;
|
167
|
+
background-repeat: no-repeat;
|
168
|
+
-webkit-background-size: 100%;
|
169
|
+
-moz-background-size: 100%;
|
170
|
+
background-size: 100%;
|
171
|
+
}
|
172
|
+
|
173
|
+
@media screen and (max-width: 640px) {
|
174
|
+
div.monelem_flippers_slider_wait {
|
175
|
+
width: 61px;
|
176
|
+
height: 75px;
|
177
|
+
}
|
178
|
+
}
|
179
|
+
|
180
|
+
|
181
|
+
/*===========================================================================
|
182
|
+
DATA URIs
|
183
|
+
|
184
|
+
These are data-uri packed images, inlined for loading speed and simplicity.
|
185
|
+
Placed at the end of this file because they're visually noisy...
|
186
|
+
---------------------------------------------------------------------------*/
|
187
|
+
|
188
|
+
div.monelem_panels_imode_toggleIcon {
|
189
|
+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAaCAYAAABPY4eKAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEgAACxIB0t1%2B%2FAAAABV0RVh0Q3JlYXRpb24gVGltZQAzMC82LzEwBMfmVwAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNXG14zYAAANYSURBVEiJtdZbiNVVFMfxj8cx85JkIGlqSESgOGA9WIQgGmTRUyRaYFJDnUWYGV2eyiCpkIbEKJI1UqYvUkmFDxFBgpghonajSDCM7hcxLSnt4ulh%2F2c4HufMTOH8Xs75%2F%2Ffa67v3%2Bu%2B91hphGJWZNUzCXJyKiHd6xxqNhhGDTB6NOViAyzARY3EaP%2BNL7MCBiPi9Ze4leBlTsR9jcCnuiYgDbeGZeV4F7EINe7EP3%2BJ49W4GrsZ8NPAGXouIk5k5F93YFhHPVT5H4kbcjaX1ev3kWfDMPB9P4ko8ERE7BopONWcOVmMc1uBRrG8Oc5Ptq1hdr9cPdrQMTMUWfBQRCweD9ioiPsQtmbkeu7G8P3ClsZSI98EzcxqeUsLXM1RwZs7ErRiJKXgQN2Tmzoj4qsV2Hn7BYcq369UaHIqI5yPizyGCx2MPfsRVOBoR6%2FA%2BNmXmqCbbm%2FAiMiJO9cEzcwEuwLODwMZk5oXVLYA6PouIF%2FC6cvBgI37D0mreStyJroh4r9df785XYGtEHG8Hfnjb1w08Xu2qq3regtOZuaka2whV5NZieWY%2BhkV4ICJ2N%2FusZeYMJQm8NdCuuxdPH4HENGzsXjx9REQcqRxvR2dEfNBrHxF7lHywGPXW7085cEvwZkScHAheaRz%2BwngcqyAnlEPan%2Fbh5oj4rr%2FBDlyOXUMA%2Fx%2F9oFytM5SZs3t6epbWlOtxeJjg%2BzEmMye3vF%2BCYx2YhdFnTTs3OoQT2JqZ3TiC2zETyzrwrnIwhkMTqwVsxW24GLsiYmWj0dCBo2gNy7nSRfgpIjZjM6WU1ut1lHt%2BGLOHCd6J79sN1pSkMSUzJwwD%2FBoD5I9aRHyiFIVFQ3D2j1KR%2Fh7MMDPnY1JE7GwLr3434N5BnI3GFRiFzuai0Ub34aWBDGr0pcKPM%2FPpqovpT11KoVinNAvXt1lkLTNXKFesXU1HUz3HI0plWqW0QGcoIjYoERpMy7AS17b2da06o43KzLF4RanRzwwx3%2FfOHYW7lL5ubUR83p9do9Ho%2B99fDzcZDynfdxPejog%2FBoCOxHW4AxOwKiK%2BaGc%2FILzJ6ULcXznciwM4qFSzCUob3Km0UCeU3W5v5%2B8%2FwZsWMQvzlN1Nq8C%2F4ht8qkRm72B%2B%2BoP%2FC0sEOftJmUbfAAAAAElFTkSuQmCC);
|
190
|
+
}
|
191
|
+
|
192
|
+
div.monelem_flippers_slider_wait {
|
193
|
+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAABwCAMAAACkX%2BcnAAAB0VBMVEUAAACDg4OEhISFhYWGhoaHh4eIiIiJiIiJiYmKioqLi4uMjIyNjY2Ojo6Pj4%2BQkJCRkZGSkpKTk5OUlJSVlZWWlpaXl5eYmJiZmZmampqbm5ucnJycnJ2dnZ2dnZ6dnZ%2Benp6enp%2Bfn5%2Bfn6CgoKCgoKGhoKChoaGioqKjo6OkpKSlpaWmpaWmpqaoqKiqqqqrq6usrKytra2urq6wsLCxsbGzs7O0tLS0tLW1tbW1tba1tbe2tri4uLi4uLm4uLq6ury7u7y8vLy8vL28vL%2B9vb2%2Bvr6%2Bvr%2B%2Fv7%2B%2Fv8HAwMDAwMLAwMPBwcPCwsPExMTExMXFxcXGxsbHx8fIyMjJycrOztDOztHPz9DPz9HR0dTS0tTT09TT09XU1NbU1NfV1dfW1tjW1tnX19fX19rY2Nra2tva2tzd3eDe3t7f39%2Fh4eHi4uLl5enn5%2Bnp6ezp6e3q6u3q6u7r6%2B7r6%2B%2Fs7O%2Fs7PDt7fDt7fHu7vHu7vLv7%2B%2Fv7%2FLv7%2FPw8PDw8PPw8PTx8fTx8fXy8vXy8vbz8%2Fbz8%2Ff09Pf09Pj19fj19fn29vn39%2Fn39%2Fr4%2BPr4%2BPv5%2Bfv6%2Bvv6%2Bvz7%2B%2Fz7%2B%2F38%2FP39%2Ff39%2Ff7%2B%2Fv7%2B%2Fv%2F%2F%2F%2F%2BHSJEZAAAAAXRSTlMAQObYZgAAA5dJREFUaN61lk1uE0EQhd%2BrsQlREAgkFkQKLJByteQU3IIdd2OBYIFASFmAFLurWPT0uOfXme6aWUXy6PNL9XPXR3z6DSI93wQ0GkHjzweapM%2B%2Btn8SMAERPzKQQKN7IDRhD2APgkbumucvXp24T3s%2BH47H7%2F9U1AxmpvaDzV5IUMBfD0CbQXYPly93K%2BEiwneqphpMVc3e7p492zciQhGKNN2bX%2F42shJOEQFIQgAKgfgdpvFz7d58%2FPO4Fn5PiggBAUkAYhoUMJipwU5vhsfjWjhESMTsBChQVVMDYICadfjD4VAAFyGYZVcN7Vzar4iP6frkd5RuLjG7WlCFwdSy4ICtPlBAKJLNhYBq6HKf8IHrx4J7IQX5maqFLHeC3yrWwyEiFACSzlTVVFNuzQZTAG%2BrLoQwVT1kubvGF4wlVj2vi2isuvWrbiXJIUISYKwL5qpuWgbvXQHxSCeqbiXwvOrpClC1QdXViuAQUnpXgE1U%2FSb%2BUwVVF7JfdTWN2G4uFyiaeZz6oOpB1drzTF0sSw6ySdc5Y%2FZe1SPeCpPfS6p6yq4arK16V5eyAwWEp6oTEKpqewXEygBW9iMabzsAZjqoOkuTL227tjJvSg8UaG%2FGhW33obSK8d4dVj1eAV3VrXQsuBtXvd12XdWteCxg2nbobbuU2xQsHst42zHe6lllypOnbcdUeZ62HUzNoOXJz4vdpZXDz4rde5TDz4rdsQ6%2BLHZNxVjOip3VJD8ndjVtOSt2rEp%2BRuxCHXxZ7G6tCr4sdhUX1xPETmvhC2KndWNZFjtUjmVR7KRyLItiF2qTL4ndtdXCF8Tuqhq%2BIHaonfmi2Ek1fEHsQjV8YdtVt2VR7DzgM2J36QCfFbsbB%2Fi82MEBPit2HvBZsfMYy6zYuSSfq7oLfE7sLpzgk2J37QKfETt1gc%2BJnQ98Rux84NNiJ07wSbELTvBpsXOCT4rdRz%2F4WOzMCz4pdl7wKbGDG3xC7NzGMiV2jvCx2PnNfELsbvzgY7FrHOFjsXOEj7YdHeFjsfOF96sePOFjsXOED8XutSt8sO2uXOFDsfOFD6ruCx9U3Rc%2BEDt3eC52zvC%2B2DnD%2B2LnDe9V3RveEzt3eC527vBc7NzhudhtAe%2BuAH94VnV%2FeCZ2G8BzscMmUxdgi5lnYrcF%2FCR2wCZHSvftP9x2m8DTttsEnsRuK7hs8%2FPPxG4beCt2G8HbbbcNPG67reAUEfwHRePBMkvuZ4wAAAAASUVORK5CYII%3D);
|
194
|
+
}
|
@@ -0,0 +1,168 @@
|
|
1
|
+
/*===========================================================================
|
2
|
+
CONTROLS
|
3
|
+
|
4
|
+
The standard Monocle stylesheet for the optional Monocle controls. See
|
5
|
+
comments for monocore.css, which apply here too.
|
6
|
+
---------------------------------------------------------------------------*/
|
7
|
+
|
8
|
+
/* Contents */
|
9
|
+
div.monelem_controls_contents_container {
|
10
|
+
position: absolute;
|
11
|
+
width: 75%;
|
12
|
+
height: 75%;
|
13
|
+
left: 12.5%;
|
14
|
+
top: 12.5%;
|
15
|
+
background: #EEE;
|
16
|
+
border: 2px solid #F7F7F7;
|
17
|
+
border-radius: 9px;
|
18
|
+
overflow-y: auto;
|
19
|
+
-webkit-overflow-scrolling: touch;
|
20
|
+
-moz-border-radius: 9px;
|
21
|
+
-webkit-border-radius: 9px;
|
22
|
+
box-shadow: 1px 2px 6px rgba(0,0,0,0.5);
|
23
|
+
-moz-box-shadow: 1px 2px 6px rgba(0,0,0,0.5);
|
24
|
+
-webkit-box-shadow: 1px 2px 6px rgba(0,0,0,0.5);
|
25
|
+
}
|
26
|
+
|
27
|
+
ol.monelem_controls_contents_list {
|
28
|
+
margin: 6px;
|
29
|
+
padding: 0;
|
30
|
+
}
|
31
|
+
|
32
|
+
li.monelem_controls_contents_chapter {
|
33
|
+
list-style: none;
|
34
|
+
line-height: 220%;
|
35
|
+
padding-left: 1em;
|
36
|
+
padding-right: 2em;
|
37
|
+
border-bottom: 2px groove #FEFEFE;
|
38
|
+
cursor: pointer;
|
39
|
+
}
|
40
|
+
|
41
|
+
li.monelem_controls_contents_chapter_active {
|
42
|
+
background: #999;
|
43
|
+
color: white;
|
44
|
+
}
|
45
|
+
|
46
|
+
/* Magnifier */
|
47
|
+
|
48
|
+
.monelem_controls_magnifier_button {
|
49
|
+
cursor: pointer;
|
50
|
+
color: #555;
|
51
|
+
position: absolute;
|
52
|
+
top: 2px;
|
53
|
+
right: 10px;
|
54
|
+
padding: 0 2px;
|
55
|
+
}
|
56
|
+
|
57
|
+
.monelem_controls_magnifier_a {
|
58
|
+
font-size: 11px;
|
59
|
+
}
|
60
|
+
|
61
|
+
.monelem_controls_magnifier_A {
|
62
|
+
font-size: 18px;
|
63
|
+
opacity: 0.3;
|
64
|
+
}
|
65
|
+
|
66
|
+
|
67
|
+
/* Spinner */
|
68
|
+
|
69
|
+
.monelem_controls_spinner_anim {
|
70
|
+
position: absolute;
|
71
|
+
width: 100%;
|
72
|
+
height: 100%;
|
73
|
+
background-color: white;
|
74
|
+
background-repeat: no-repeat;
|
75
|
+
background-position: center center;
|
76
|
+
}
|
77
|
+
.monelem_controls_spinner_anim.monelem_dormant {
|
78
|
+
width: 0;
|
79
|
+
height: 0;
|
80
|
+
}
|
81
|
+
|
82
|
+
|
83
|
+
/* Scrubber */
|
84
|
+
|
85
|
+
div.monelem_controls_scrubber_container {
|
86
|
+
position: absolute;
|
87
|
+
left: 1em;
|
88
|
+
right: 1em;
|
89
|
+
bottom: 4px;
|
90
|
+
height: 30px;
|
91
|
+
background: rgba(255,255,255,0.8);
|
92
|
+
}
|
93
|
+
|
94
|
+
div.monelem_controls_scrubber_track {
|
95
|
+
margin-top: 10px;
|
96
|
+
height: 5px;
|
97
|
+
border: 1px solid #999;
|
98
|
+
cursor: pointer;
|
99
|
+
}
|
100
|
+
|
101
|
+
div.monelem_controls_scrubber_needle {
|
102
|
+
position: absolute;
|
103
|
+
width: 14px;
|
104
|
+
height: 14px;
|
105
|
+
top: 5px;
|
106
|
+
background: #CCC;
|
107
|
+
border: 1px solid #999;
|
108
|
+
border-radius: 8px;
|
109
|
+
-moz-border-radius: 8px;
|
110
|
+
-webkit-border-radius: 8px;
|
111
|
+
}
|
112
|
+
|
113
|
+
div.monelem_controls_scrubber_trail {
|
114
|
+
position: absolute;
|
115
|
+
background: #DDD;
|
116
|
+
top: 11px;
|
117
|
+
left: 1px;
|
118
|
+
height: 5px;
|
119
|
+
}
|
120
|
+
|
121
|
+
div.monelem_controls_scrubber_bubble {
|
122
|
+
display: none;
|
123
|
+
position: absolute;
|
124
|
+
padding: 1em;
|
125
|
+
min-width: 20%;
|
126
|
+
max-width: 30%;
|
127
|
+
bottom: 2.5em;
|
128
|
+
background: rgba(0, 0, 0, 0.9);
|
129
|
+
color: #CCC;
|
130
|
+
font: bold 12px Lucida Grande, Tahoma, Helvetica, Arial, sans-serif;
|
131
|
+
white-space: nowrap;
|
132
|
+
text-overflow: ellipsis;
|
133
|
+
overflow: hidden;
|
134
|
+
border-radius: 10px;
|
135
|
+
-moz-border-radius: 10px;
|
136
|
+
-webkit-border-radius: 10px;
|
137
|
+
}
|
138
|
+
|
139
|
+
|
140
|
+
/* Stencil */
|
141
|
+
div.monelem_controls_stencil_container {
|
142
|
+
position: absolute;
|
143
|
+
top: 0;
|
144
|
+
left: 0;
|
145
|
+
width: 0;
|
146
|
+
height: 0;
|
147
|
+
}
|
148
|
+
|
149
|
+
.monelem_controls_stencil_mask {
|
150
|
+
display: block;
|
151
|
+
position: absolute;
|
152
|
+
}
|
153
|
+
|
154
|
+
div.monelem_controls_stencil_highlighted .monelem_controls_stencil_mask {
|
155
|
+
background: rgba(0,0,255,0.15);
|
156
|
+
}
|
157
|
+
|
158
|
+
|
159
|
+
/*===========================================================================
|
160
|
+
DATA URIs
|
161
|
+
|
162
|
+
These are data-uri packed images, inlined for loading speed and simplicity.
|
163
|
+
Placed at the end of this file because they're visually noisy...
|
164
|
+
---------------------------------------------------------------------------*/
|
165
|
+
|
166
|
+
div.monelem_controls_spinner_anim {
|
167
|
+
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA0CAMAAAANBM47AAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAsSAAALEgHS3X78AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M1cbXjNgAAABV0RVh0Q3JlYXRpb24gVGltZQAxNy81LzEwnOhoKAAAAE5QTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAxKKmWQAAABp0Uk5TAAECAwQFBgcICQoLDA0ODxAREhMUFRYXGBl0wLilAAAC8klEQVQYGZXBB2LjOAADQFCimtVFEoD//9HLbrJxipzoZoBToYptUwV8V/Xrsc8RP6i7aduPXHI69mWIAR9UY6Is5rnCuTBsWXeLkijbTFOLf7okW6R8zxEnwphskfIrifJdW4u/RtlpbGLsdjoHfDNkSZTSNg192w3jchSJEtcawCRzDvgjLPINX1SbSSvNXcC7eNuLXpQuTFbp8CZkH/isyS68H0PAF+0iUzxoNni33HPAR51UxDHgRLObslLEw3TPFT7oKPqIeOImURs+WJ0CHlqKXgLOxL4NgyRqxbuqeMNDXURPOBNWSokquRRP+GeVOzwcLlpwJmx3WVJuY2ZRi1ezfOBhdNGGU52ZhrloBzqSucKLerdLxLtIKlc4Nd9LA6wuNTC5aAbQZzs3eFhE9Tg3mw2wqkQgHCZrTJK3iIcoasMTvXX0E30EAK2k+Wbrho8mky2eCLslSz3+2ERKucVHIZsbnqp2WWXEX60ossMnrakeP+jGocabg9SGzyaXHHDRpOIO/zRjDWCTNlzVsLjFm4bODapE33BZoke8mVy8oqXY4rLNXvFmEnXDKJYaly3SjlchkSOwiCngstFMeDXLE4CVygGX3e6FawUgzFIKANbiHHDZ7U4qL7c5SWzxYqFywGXjvVD3F3Zu8ccs5gqXzeYx7CTTWOOvnmTEZZu0ItSxrvAmZrrHZYme8dkhLbiqLkUDPlvMA1cNIiM+613Y4KJNSviiprTgmrrQM75arVzhkllUxFetqBlXVEXa8d0hMeKCxVSH73rRG37XidpxZlXRiN9UhYUtztRFVI+fhUPFE851KlSHn4TNxTueGU2yx3PVbipVeGpxIaeAJ2IynRv8YHEp3iNOjRRdGvxotGjONb7pD7M4RfyiK6ZclhYf1bdDprRW+FW9SZSUlqGtq1BVTTftRaKce1zS7bIpWyW/oK0i38tU4apupWyRsijKVhoj/o+6W45cJEoqaR+bgP8txH5a1nUZ2gq/+Q/51T5MhuG3fQAAAABJRU5ErkJggg==);
|
168
|
+
}
|