paginar 0.1.5 → 0.1.7
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.
- package/demo/slot/slot-chapter1.html +179 -177
- package/dist/index.es.js +34 -21
- package/dist/index.es.js.map +1 -1
- package/package.json +1 -1
- package/src/App.ce.vue +14 -4
- package/src/assets/main.css +2 -2
- package/src/components/HeaderSlot/OptionsButton/OptionsColumns.vue +6 -6
- package/src/components/ReaderWrapper.vue +1 -1
- package/src/composables/useReaderSettings.js +1 -1
- package/src/composables/useStyles.js +10 -5
|
@@ -1,177 +1,179 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="UTF-8" />
|
|
6
|
-
<link rel="icon" href="/favicon.ico" />
|
|
7
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
8
|
-
<title>Slot - Paginar</title>
|
|
9
|
-
</head>
|
|
10
|
-
|
|
11
|
-
<body>
|
|
12
|
-
|
|
13
|
-
<style>
|
|
14
|
-
#app {
|
|
15
|
-
height: 100vh;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
html {
|
|
19
|
-
--bg-light-mode: #fff7e0;
|
|
20
|
-
--bg-dark-mode: rgb(45,45,45);
|
|
21
|
-
--theme-primary: rgb(45,45,45);
|
|
22
|
-
--theme-primary-extralight: rgb(243 244 246);
|
|
23
|
-
--theme-secondary: #cd2800;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
#pagination-el *::selection {
|
|
27
|
-
color: var(--theme-primary-extralight, #690000);
|
|
28
|
-
background: var(--theme-secondary, #ffa03c);
|
|
29
|
-
}
|
|
30
|
-
</style>
|
|
31
|
-
|
|
32
|
-
<div id="app">
|
|
33
|
-
<paginate-content id="pagination-el" book-title="A Tale of Two Cities"
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
the
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
shot
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
the
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
the
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
{ title: 'Chapter
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
</
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<link rel="icon" href="/favicon.ico" />
|
|
7
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
8
|
+
<title>Slot - Paginar</title>
|
|
9
|
+
</head>
|
|
10
|
+
|
|
11
|
+
<body>
|
|
12
|
+
|
|
13
|
+
<style>
|
|
14
|
+
#app {
|
|
15
|
+
height: 100vh;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
html {
|
|
19
|
+
--bg-light-mode: #fff7e0;
|
|
20
|
+
--bg-dark-mode: rgb(45,45,45);
|
|
21
|
+
--theme-primary: rgb(45,45,45);
|
|
22
|
+
--theme-primary-extralight: rgb(243 244 246);
|
|
23
|
+
--theme-secondary: #cd2800;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
#pagination-el *::selection {
|
|
27
|
+
color: var(--theme-primary-extralight, #690000);
|
|
28
|
+
background: var(--theme-secondary, #ffa03c);
|
|
29
|
+
}
|
|
30
|
+
</style>
|
|
31
|
+
|
|
32
|
+
<div id="app">
|
|
33
|
+
<paginate-content id="pagination-el" book-title="A Tale of Two Cities"
|
|
34
|
+
css-string="#rootComponent.currentPage-1{background-color: red !important; transition: background-color 200ms linear;}"
|
|
35
|
+
>
|
|
36
|
+
<div slot="header">
|
|
37
|
+
<img src="https://sabia.pub/images/logo-mobile-dark.svg" style="height: 40px">
|
|
38
|
+
</div>
|
|
39
|
+
<div slot="content">
|
|
40
|
+
<h2>
|
|
41
|
+
CHAPTER I.<br>The Period
|
|
42
|
+
</h2>
|
|
43
|
+
<p>
|
|
44
|
+
It was the (LUGONES, 1978) best of times, it was the worst of times, it was the age of
|
|
45
|
+
wisdom, it was the age of foolishness, it was the epoch of belief, it was
|
|
46
|
+
the epoch of incredulity, it was the season of Light, it was the season
|
|
47
|
+
of Darkness, it was the spring of hope (GAMA, 2019), it was the winter of despair, we
|
|
48
|
+
had everything before us, we had nothing before us, we were all going
|
|
49
|
+
direct to Heaven, we were all going direct the other way—in short,
|
|
50
|
+
the period was so far like the present period (GAMA, 2019), that some of its noisiest
|
|
51
|
+
authorities insisted on its being received, for good or for evil, in the
|
|
52
|
+
superlative degree of comparison only.
|
|
53
|
+
</p>
|
|
54
|
+
<p>
|
|
55
|
+
There were a king with a large jaw and a queen with a plain face, on the
|
|
56
|
+
throne of England; there were a king with (LEON, 2006) a large jaw and a queen with a
|
|
57
|
+
fair face (LEON, 2006), on the throne of France (LUGONES, 1978). In both countries it was clearer than
|
|
58
|
+
crystal to the lords of the State preserves of loaves and fishes, that
|
|
59
|
+
things in general were settled for ever.
|
|
60
|
+
</p>
|
|
61
|
+
<p>
|
|
62
|
+
It was the year of Our Lord one thousand seven hundred and seventy-five.
|
|
63
|
+
Spiritual revelations were conceded to England at that favoured period, as
|
|
64
|
+
at this. Mrs. Southcott had recently attained her five-and-twentieth
|
|
65
|
+
blessed birthday, of whom a prophetic private in the Life Guards had
|
|
66
|
+
heralded the sublime appearance by announcing that arrangements were made
|
|
67
|
+
for the swallowing up of London and Westminster. Even the Cock-lane ghost
|
|
68
|
+
had been laid only a round dozen of years, after rapping out its messages,
|
|
69
|
+
as the spirits of this very year last past (supernaturally deficient in
|
|
70
|
+
originality) rapped out theirs. Mere messages in the earthly order of
|
|
71
|
+
events had lately come to the English Crown and People, from a congress of
|
|
72
|
+
British subjects in America: which, strange to relate, have proved more
|
|
73
|
+
important to the human race than any communications yet received through
|
|
74
|
+
any of the chickens of the Cock-lane brood.
|
|
75
|
+
</p>
|
|
76
|
+
<p>
|
|
77
|
+
France, less favoured on the whole as to matters spiritual than her sister
|
|
78
|
+
of the shield and trident, rolled with exceeding smoothness down hill,
|
|
79
|
+
making paper money and spending it. Under the guidance of her Christian
|
|
80
|
+
pastors, she entertained herself, besides, with such humane achievements
|
|
81
|
+
as sentencing a youth to have his hands cut off, his tongue torn out with
|
|
82
|
+
pincers, and his body burned alive, because he had not kneeled down in the
|
|
83
|
+
rain to do honour to a dirty procession of monks which passed within his
|
|
84
|
+
view, at a distance of some fifty or sixty yards. It is likely enough
|
|
85
|
+
that, rooted in the woods of France and Norway, there were growing trees,
|
|
86
|
+
when that sufferer was put to death, already marked by the Woodman, Fate,
|
|
87
|
+
to come down and be sawn into boards, to make a certain movable framework
|
|
88
|
+
with a sack and a knife in it, terrible in history. It is likely enough
|
|
89
|
+
that in the rough outhouses of some tillers of the heavy lands adjacent to
|
|
90
|
+
Paris, there were sheltered from the weather that very day, rude carts,
|
|
91
|
+
bespattered with rustic mire, snuffed about by pigs, and roosted in by
|
|
92
|
+
poultry, which the Farmer, Death, had already set apart to be his tumbrils
|
|
93
|
+
of the Revolution. But that Woodman and that Farmer, though they work
|
|
94
|
+
unceasingly, work silently, and no one heard them as they went about with
|
|
95
|
+
muffled tread: the rather, forasmuch as to entertain any suspicion that
|
|
96
|
+
they were awake, was to be atheistical and traitorous.
|
|
97
|
+
</p>
|
|
98
|
+
<p>
|
|
99
|
+
In England, there was scarcely an amount of order and protection to
|
|
100
|
+
justify much national boasting. Daring burglaries by armed men, and
|
|
101
|
+
highway robberies, took place in the capital itself every night; families
|
|
102
|
+
were publicly cautioned not to go out of town without removing their
|
|
103
|
+
furniture to upholsterers’ warehouses for security; the highwayman in the
|
|
104
|
+
dark was a City tradesman in the light, and, being recognised and
|
|
105
|
+
challenged by his fellow-tradesman whom he stopped in his character of
|
|
106
|
+
“the Captain,” gallantly shot him through the head and rode away; the mail
|
|
107
|
+
was waylaid by seven robbers, and the guard shot three dead, and then got
|
|
108
|
+
shot dead himself by the other four, “in consequence of the failure of his
|
|
109
|
+
ammunition:” after which the mail was robbed in peace; that magnificent
|
|
110
|
+
potentate, the Lord Mayor of London, was made to stand and deliver on
|
|
111
|
+
Turnham Green, by one highwayman, who despoiled the illustrious creature
|
|
112
|
+
in sight of all his retinue; prisoners in London gaols fought battles with
|
|
113
|
+
their turnkeys, and the majesty of the law fired blunderbusses in among
|
|
114
|
+
them, loaded with rounds of shot and ball; thieves snipped off diamond
|
|
115
|
+
crosses from the necks of noble lords at Court drawing-rooms; musketeers
|
|
116
|
+
went into St. Giles’s, to search for contraband goods, and the mob fired
|
|
117
|
+
on the musketeers, and the musketeers fired on the mob, and nobody thought
|
|
118
|
+
any of these occurrences much out of the common way. In the midst of them,
|
|
119
|
+
the hangman, ever busy and ever worse than useless, was in constant
|
|
120
|
+
requisition; now, stringing up long rows of miscellaneous criminals; now,
|
|
121
|
+
hanging a housebreaker on Saturday who had been taken on Tuesday; now,
|
|
122
|
+
burning people in the hand at Newgate by the dozen, and now burning
|
|
123
|
+
pamphlets at the door of Westminster Hall; to-day, taking the life of an
|
|
124
|
+
atrocious murderer, and to-morrow of a wretched pilferer who had robbed a
|
|
125
|
+
farmer’s boy of sixpence.
|
|
126
|
+
</p>
|
|
127
|
+
<p>
|
|
128
|
+
All these things, and a thousand like them, came to pass in and close upon
|
|
129
|
+
the dear old year one thousand seven hundred and seventy-five. Environed
|
|
130
|
+
by them, while the Woodman and the Farmer worked unheeded, those two of
|
|
131
|
+
the large jaws, and those other two of the plain and the fair faces, trod
|
|
132
|
+
with stir enough, and carried their divine rights with a high hand. Thus
|
|
133
|
+
did the year one thousand seven hundred and seventy-five conduct their
|
|
134
|
+
Greatnesses, and myriads of small creatures—the creatures of this
|
|
135
|
+
chronicle among the rest—along the roads that lay before them.
|
|
136
|
+
</p>
|
|
137
|
+
|
|
138
|
+
</div>
|
|
139
|
+
</paginate-content>
|
|
140
|
+
</div>
|
|
141
|
+
<script>
|
|
142
|
+
const settings = {
|
|
143
|
+
baseFont: 'Verdana, sans-serif',
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
const content = {
|
|
147
|
+
summary: [
|
|
148
|
+
{ title: 'Chapter 1', link: '/demo/slot/slot-chapter1.html' },
|
|
149
|
+
{ title: 'Chapter 2', link: '/demo/slot/slot-chapter2.html' },
|
|
150
|
+
{ title: 'Chapter 3', link: '/demo/slot/slot-chapter3.html' }
|
|
151
|
+
],
|
|
152
|
+
|
|
153
|
+
references: [
|
|
154
|
+
{
|
|
155
|
+
"cit": "GAMA, 2019",
|
|
156
|
+
"ref": "GAMA, Mara. <strong>As três rotas que trouxeram a centenária Bauhaus ao Brasil</strong>. Folha de São Paulo, São Paulo, 1 abr. 2019. Disponível em: https://www1.folha.uol.com.br/ilustrissima/2019/03/as-tres-rotas-que-trouxeram-a-centenaria-bauhaus-ao-brasil.shtml. Acesso em: 4 abr. 2019"
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
"cit": "LEON, 2006",
|
|
160
|
+
"ref": "LEON, Ethel. <strong>O Instituto de Arte Contemporânea do Museu de Arte Moderna (MAM) de São Paulo dos anos 1950</strong>. São Paulo, 2006."
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
"cit": "LUGONES, 1978",
|
|
164
|
+
"ref": "LUGONES, Maria. <strong>Colonialidad y género</strong>. Tábula Rasa, Bogotá, Colômbia, n. 9, p. 73-101, julho-dezembro de 1978."
|
|
165
|
+
}
|
|
166
|
+
]
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
const paginationEl = document.getElementById('pagination-el')
|
|
170
|
+
if (paginationEl) {
|
|
171
|
+
paginationEl.setAttribute("reader-settings", JSON.stringify(settings))
|
|
172
|
+
paginationEl.setAttribute("book-content", JSON.stringify(content))
|
|
173
|
+
}
|
|
174
|
+
</script>
|
|
175
|
+
<script type="module" src="/src/main.js"></script>
|
|
176
|
+
|
|
177
|
+
</body>
|
|
178
|
+
|
|
179
|
+
</html>
|
package/dist/index.es.js
CHANGED
|
@@ -9656,10 +9656,7 @@ async function stylesheetLoader(stylesheet, ref) {
|
|
|
9656
9656
|
const dataRef = await fetch(stylesheet);
|
|
9657
9657
|
const cssText = await dataRef.text();
|
|
9658
9658
|
|
|
9659
|
-
|
|
9660
|
-
ref.value.appendChild(style);
|
|
9661
|
-
style.type = 'text/css';
|
|
9662
|
-
style.appendChild(document.createTextNode(cssText));
|
|
9659
|
+
applyStylesheet(cssText, ref);
|
|
9663
9660
|
|
|
9664
9661
|
} catch (err) {
|
|
9665
9662
|
console.log({ err });
|
|
@@ -9667,9 +9664,17 @@ async function stylesheetLoader(stylesheet, ref) {
|
|
|
9667
9664
|
}
|
|
9668
9665
|
}
|
|
9669
9666
|
|
|
9667
|
+
async function applyStylesheet(stylesheet, ref) {
|
|
9668
|
+
const style = document.createElement('style');
|
|
9669
|
+
ref.value.appendChild(style);
|
|
9670
|
+
style.type = 'text/css';
|
|
9671
|
+
style.appendChild(document.createTextNode(stylesheet));
|
|
9672
|
+
}
|
|
9673
|
+
|
|
9670
9674
|
const useStyles = {
|
|
9671
9675
|
fontLoader,
|
|
9672
|
-
stylesheetLoader
|
|
9676
|
+
stylesheetLoader,
|
|
9677
|
+
applyStylesheet
|
|
9673
9678
|
};
|
|
9674
9679
|
|
|
9675
9680
|
const state = reactive({
|
|
@@ -9682,7 +9687,7 @@ const state = reactive({
|
|
|
9682
9687
|
{ name: 'Verdana, sans-serif' },
|
|
9683
9688
|
],
|
|
9684
9689
|
fontSize: 16,
|
|
9685
|
-
columns: '
|
|
9690
|
+
columns: 'single',
|
|
9686
9691
|
mode: 'light'
|
|
9687
9692
|
});
|
|
9688
9693
|
|
|
@@ -9829,10 +9834,10 @@ return (_ctx, _cache) => {
|
|
|
9829
9834
|
return (openBlock(), createElementBlock("div", _hoisted_1$d, [
|
|
9830
9835
|
createBaseVNode("button", {
|
|
9831
9836
|
class: normalizeClass(["col-span-1 text-primary text-center cursor-pointer py-3 rounded-sm border", {
|
|
9832
|
-
'border-gray-300': unref(columns) !== '
|
|
9833
|
-
'bg-primary-extralight border-2 border-primary': unref(columns) === '
|
|
9837
|
+
'border-gray-300': unref(columns) !== 'single',
|
|
9838
|
+
'bg-primary-extralight border-2 border-primary': unref(columns) === 'single'
|
|
9834
9839
|
}]),
|
|
9835
|
-
onClick: _cache[0] || (_cache[0] = withModifiers($event => (unref(setColumns)('
|
|
9840
|
+
onClick: _cache[0] || (_cache[0] = withModifiers($event => (unref(setColumns)('single')), ["prevent"])),
|
|
9836
9841
|
"aria-label": "Coluna única",
|
|
9837
9842
|
title: "Coluna única"
|
|
9838
9843
|
}, [
|
|
@@ -9840,11 +9845,11 @@ return (_ctx, _cache) => {
|
|
|
9840
9845
|
], 2),
|
|
9841
9846
|
createBaseVNode("button", {
|
|
9842
9847
|
class: normalizeClass(["col-span-2 text-primary text-center cursor-pointer py-3 rounded-sm border", {
|
|
9843
|
-
'border-gray-300': unref(columns) !== '
|
|
9844
|
-
'bg-primary-extralight border-2 border-primary': unref(columns) === '
|
|
9848
|
+
'border-gray-300': unref(columns) !== 'double',
|
|
9849
|
+
'bg-primary-extralight border-2 border-primary': unref(columns) === 'double',
|
|
9845
9850
|
'opacity-30': unref(width) < 1024
|
|
9846
9851
|
}]),
|
|
9847
|
-
onClick: _cache[1] || (_cache[1] = withModifiers($event => (unref(width) >= 1024 && unref(setColumns)('
|
|
9852
|
+
onClick: _cache[1] || (_cache[1] = withModifiers($event => (unref(width) >= 1024 && unref(setColumns)('double')), ["prevent"])),
|
|
9848
9853
|
"aria-label": "Coluna dupla",
|
|
9849
9854
|
title: "Coluna dupla"
|
|
9850
9855
|
}, [
|
|
@@ -10280,8 +10285,6 @@ const _hoisted_1$3 = { class: "[ typeArea ] h-full relative transition-opacity d
|
|
|
10280
10285
|
const _sfc_main$3 = {
|
|
10281
10286
|
__name: 'ReaderWrapper',
|
|
10282
10287
|
setup(__props) {
|
|
10283
|
-
|
|
10284
|
-
const { columns } = useReaderSettings;
|
|
10285
10288
|
const { currentPage } = usePagination;
|
|
10286
10289
|
|
|
10287
10290
|
const el = ref(null);
|
|
@@ -10305,13 +10308,13 @@ return (_ctx, _cache) => {
|
|
|
10305
10308
|
return (openBlock(), createElementBlock("div", {
|
|
10306
10309
|
ref_key: "el",
|
|
10307
10310
|
ref: el,
|
|
10308
|
-
class:
|
|
10311
|
+
class: "columnsArea",
|
|
10309
10312
|
style: normalizeStyle(`margin-left: -${100 * (unref(currentPage) - 1)}%`)
|
|
10310
10313
|
}, [
|
|
10311
10314
|
createBaseVNode("div", _hoisted_1$3, [
|
|
10312
10315
|
renderSlot(_ctx.$slots, "default")
|
|
10313
10316
|
])
|
|
10314
|
-
],
|
|
10317
|
+
], 4))
|
|
10315
10318
|
}
|
|
10316
10319
|
}
|
|
10317
10320
|
|
|
@@ -10410,7 +10413,7 @@ return (_ctx, _cache) => {
|
|
|
10410
10413
|
|
|
10411
10414
|
};
|
|
10412
10415
|
|
|
10413
|
-
const _style_0 = ".border-primary { border-color: var(--theme-primary, #690000);\n}\n.text-primary { color: var(--theme-primary, #690000);\n}\n.bg-primary { background-color: var(--theme-primary, #690000);\n}\n.border-primary-extralight { border-color: var(--theme-primary-extralight, #f3f4f6);\n}\n.text-primary-extralight { color: var(--theme-primary-extralight, #f3f4f6);\n}\n.bg-primary-extralight { background-color: var(--theme-primary-extralight, #f3f4f6);\n}\n.border-secondary { border-color: var(--theme-secondary, #ffa03c);\n}\n.text-secondary { color: var(--theme-secondary, #ffa03c);\n}\n.bg-secondary { background-color: var(--theme-secondary, #ffa03c);\n}\n.rootWrapper {\n\tmax-height: 100%;\n height: 100%;\n}\nmain#rootComponent {\n\theight: 100%;\n\tmax-height: 100%;\n}\nmain#rootComponent.light {\n\t\tbackground-color: var(--bg-light-mode, #fff7e0)\n}\nmain#rootComponent.dark {\n\t\tbackground-color: var(--bg-dark-mode, #2d2d2d);\n}\nmain#rootComponent.dark #content-area {\n\t\t\tcolor: #fff\n}\nheader.wrapper {\n\twidth: 200px;\n\tmargin: 0 auto;\n}\n#engine {\n\theight: calc(100% - 8.4rem);\n\tposition: relative;\n right: 0;\n left: 0;\n bottom: 0;\n width: 100%;\n}\n#reader-component {\n\twidth: 100%;\n}\n.typeArea {\n\twidth: 100%;\n}\n.engineWrapper {\n\theight: 100%;\n display: flex;\n justify-content: space-between;\n\tposition: relative;\n right: 0;\n left: 0;\n bottom: 0;\n width: 100%;\n}\n.doubleColumns {\n\t-moz-column-count: 2;\n column-count: 2;\n grid-column-gap: 0;\n -moz-column-gap: 0;\n column-gap: 0;\n height: 100%;\n padding: 0;\n width: 100%;\n}\n@media only screen and (max-width: 1020px) {\n.doubleColumns {\n\t\t-moz-column-count: 1;\n \tcolumn-count: 1\n}\n}\n.singleColumns {\n\t-moz-column-count: 1;\n\t column-count: 1;\n\t-moz-column-gap: 0;\n\t column-gap: 0;\n\theight: 100%;\n padding: 0;\n width: 100%;\n}\n.singleColumns #content-area {\n\t\tmax-width: 37em;\n\t\tmargin: 0 auto;\n}\n.nav-prev { left: 0px;\n}\n.nav-next { right: 0px;\n}\n.viewer-nav {\n\theight: 100%;\n\tposition: relative;\n\ttop: 0px;\n\tbottom: 0px;\n\tz-index: 10;\n\twidth: 2.5rem;\n\tflex-shrink: 0;\n\tcursor: pointer;\n\talign-self: center;\n\ttransition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\n\ttransition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n\ttransition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\n\ttransition-duration: 500ms;\n\ttransition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.viewer-nav:focus,\n\t.viewer-nav:active {\n\t\tborder: none !important;\n\t\tbox-shadow: none !important;\n\t\toutline-color: transparent !important;\n}\n#content-area *::-moz-selection {\n\tcolor: var(--theme-primary-extralight, #690000);\n\tbackground: var(--theme-secondary, #ffa03c);\n}\n#content-area *::selection {\n\tcolor: var(--theme-primary-extralight, #690000);\n\tbackground: var(--theme-secondary, #ffa03c);\n}\n.viewer-nav-icon { opacity: 0;\n}\n@media (min-width: 768px) {\n.viewer-nav-icon { opacity: 0.8;\n}\n}\n@media only screen and (max-width: 600px) {\n.columnsArea {\n\t\ttransition: margin 100ms\n}\n}\n\n/* slider */\n.slider-target,.slider-target *{\n -webkit-touch-callout:none;\n -webkit-tap-highlight-color:rgba(0,0,0,0);\n box-sizing:border-box;\n touch-action:none;\n -webkit-user-select:none;\n -moz-user-select:none;\n user-select:none\n}\n.slider-target{\n position:relative\n}\n.slider-base,.slider-connects{\n height:100%;\n position:relative;\n width:100%;\n z-index:1\n}\n.slider-connects{\n overflow:hidden;\n z-index:0\n}\n.slider-connect,.slider-origin{\n height:100%;\n position:absolute;\n right:0;\n top:0;\n transform-origin:0 0;\n transform-style:flat;\n width:100%;\n will-change:transform;\n z-index:1\n}\n.slider-txt-dir-rtl.slider-horizontal .slider-origin{\n left:0;\n right:auto\n}\n.slider-vertical .slider-origin{\n top:-100%;\n width:0\n}\n.slider-horizontal .slider-origin{\n height:0\n}\n.slider-handle{\n -webkit-backface-visibility:hidden;\n backface-visibility:hidden;\n position:absolute\n}\n.slider-touch-area{\n height:100%;\n width:100%\n}\n.slider-state-tap .slider-connect,.slider-state-tap .slider-origin{\n transition:transform .3s\n}\n.slider-state-drag *{\n cursor:inherit!important\n}\n.slider-tooltip-drag .slider-tooltip,.slider-tooltip-focus .slider-tooltip{\n display:none!important\n}\n.slider-tooltip-drag .slider-active .slider-tooltip,.slider-tooltip-drag.slider-state-drag .slider-tooltip:not(.slider-tooltip-hidden),.slider-tooltip-focus.slider-focused .slider-tooltip:not(.slider-tooltip-hidden){\n display:block!important\n}\n.slider-horizontal{\n height:var(--slider-height,6px)\n}\n.slider-horizontal .slider-handle{\n height:var(--slider-handle-height,16px);\n right:calc(var(--slider-handle-width, 16px)/2*-1);\n top:calc((var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2*-1 + -1px);\n width:var(--slider-handle-width,16px)\n}\n.slider-vertical{\n height:var(--slider-vertical-height,300px);\n width:var(--slider-height,6px)\n}\n.slider-vertical .slider-handle{\n bottom:calc(var(--slider-handle-width, 16px)/2*-1);\n height:var(--slider-handle-width,16px);\n right:calc((var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2*-1 + -1px);\n width:var(--slider-handle-height,16px)\n}\n.slider-txt-dir-rtl.slider-horizontal .slider-handle{\n left:calc(var(--slider-handle-width, 16px)/2*-1);\n right:auto\n}\n.slider-base{\n background-color:var(--slider-bg,#d1d5db)\n}\n.slider-base,.slider-connects{\n border-radius:var(--slider-radius,9999px)\n}\n.slider-connect{\n background:var(--theme-secondary, #690000);\n cursor:pointer\n}\n.slider-draggable{\n cursor:ew-resize\n}\n.slider-vertical .slider-draggable{\n cursor:ns-resize\n}\n.slider-handle{\n background:var(--slider-handle-bg,#fff);\n border:var(--slider-handle-border,0);\n border-radius:var(--slider-handle-radius,9999px);\n box-shadow:var(--slider-handle-shadow,.5px .5px 2px 1px rgba(0,0,0,.32));\n cursor:-webkit-grab;\n cursor:grab;\n height:var(--slider-handle-height,16px);\n width:var(--slider-handle-width,16px)\n}\n.slider-handle:focus{\n box-shadow:0 0 0 var(--slider-handle-ring-width,3px) var(--slider-handle-ring-color,rgba(16,185,129,.188)),var(--slider-handle-shadow,.5px .5px 2px 1px rgba(0,0,0,.32));\n outline:none\n}\n.slider-active{\n box-shadow:var(--slider-handle-shadow-active,.5px .5px 2px 1px rgba(0,0,0,.42));\n cursor:-webkit-grabbing;\n cursor:grabbing\n}\n[disabled] .slider-connect{\n background:var(--slider-connect-bg-disabled,#9ca3af)\n}\n[disabled] .slider-handle,[disabled].slider-handle,[disabled].slider-target{\n cursor:not-allowed\n}\n[disabled] .slider-tooltip{\n background:var(--theme-secondary, #690000);\n border-color:var(--theme-secondary, #690000);\n\topacity: 0.5;\n}\n.slider-tooltip{\n background:var(--theme-secondary, #690000);\n border:1px solid var(--theme-secondary, #690000);\n border-radius:var(--slider-tooltip-radius,5px);\n color:var(--slider-tooltip-color,#fff);\n display:block;\n font-size:var(--slider-tooltip-font-size,.875rem);\n font-weight:var(--slider-tooltip-font-weight,600);\n line-height:var(--slider-tooltip-line-height,1.25rem);\n min-width:var(--slider-tooltip-min-width,20px);\n padding:var(--slider-tooltip-py,2px) var(--slider-tooltip-px,6px);\n position:absolute;\n text-align:center;\n white-space:nowrap\n}\n.slider-horizontal .slider-tooltip-top{\n bottom:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));\n left:50%;\n transform:translate(-50%)\n}\n.slider-horizontal .slider-tooltip-top:before{\n border:var(--slider-tooltip-arrow-size,5px) solid transparent;\n border-top-color:inherit;\n bottom:calc(var(--slider-tooltip-arrow-size, 5px)*-2);\n content:\"\";\n height:0;\n left:50%;\n position:absolute;\n transform:translate(-50%);\n width:0\n}\n.slider-horizontal .slider-tooltip-bottom{\n left:50%;\n top:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));\n transform:translate(-50%)\n}\n.slider-horizontal .slider-tooltip-bottom:before{\n border:var(--slider-tooltip-arrow-size,5px) solid transparent;\n border-bottom-color:inherit;\n content:\"\";\n height:0;\n left:50%;\n position:absolute;\n top:calc(var(--slider-tooltip-arrow-size, 5px)*-2);\n transform:translate(-50%);\n width:0\n}\n.slider-vertical .slider-tooltip-left{\n right:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));\n top:50%;\n transform:translateY(-50%)\n}\n.slider-vertical .slider-tooltip-left:before{\n border:var(--slider-tooltip-arrow-size,5px) solid transparent;\n border-left-color:inherit;\n content:\"\";\n height:0;\n position:absolute;\n right:calc(var(--slider-tooltip-arrow-size, 5px)*-2);\n top:50%;\n transform:translateY(-50%);\n width:0\n}\n.slider-vertical .slider-tooltip-right{\n left:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));\n top:50%;\n transform:translateY(-50%)\n}\n.slider-vertical .slider-tooltip-right:before{\n border:var(--slider-tooltip-arrow-size,5px) solid transparent;\n border-right-color:inherit;\n content:\"\";\n height:0;\n left:calc(var(--slider-tooltip-arrow-size, 5px)*-2);\n position:absolute;\n top:50%;\n transform:translateY(-50%);\n width:0\n}\n.slider-horizontal .slider-origin>.slider-tooltip{\n left:auto;\n transform:translate(50%)\n}\n.slider-horizontal .slider-origin>.slider-tooltip-top{\n bottom:calc(var(--slider-tooltip-arrow-size, 5px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) + 1px)\n}\n.slider-horizontal .slider-origin>.slider-tooltip-bottom{\n top:calc(var(--slider-tooltip-arrow-size, 5px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) + var(--slider-height, 6px) - 1px)\n}\n.slider-vertical .slider-origin>.slider-tooltip{\n top:auto;\n transform:translateY(calc((var(--slider-tooltip-line-height, 1.25rem) - var(--slider-tooltip-py, 2px))*-1 + 1px))\n}\n.slider-vertical .slider-origin>.slider-tooltip-left{\n right:calc(var(--slider-tooltip-arrow-size, 5px) + var(--slider-height, 6px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) - 1px)\n}\n.slider-vertical .slider-origin>.slider-tooltip-right{\n left:calc(var(--slider-tooltip-arrow-size, 5px) + var(--slider-height, 6px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) - var(--slider-height, 6px) + 1px)\n}\n\n";
|
|
10416
|
+
const _style_0 = ".border-primary { border-color: var(--theme-primary, #690000);\n}\n.text-primary { color: var(--theme-primary, #690000);\n}\n.bg-primary { background-color: var(--theme-primary, #690000);\n}\n.border-primary-extralight { border-color: var(--theme-primary-extralight, #f3f4f6);\n}\n.text-primary-extralight { color: var(--theme-primary-extralight, #f3f4f6);\n}\n.bg-primary-extralight { background-color: var(--theme-primary-extralight, #f3f4f6);\n}\n.border-secondary { border-color: var(--theme-secondary, #ffa03c);\n}\n.text-secondary { color: var(--theme-secondary, #ffa03c);\n}\n.bg-secondary { background-color: var(--theme-secondary, #ffa03c);\n}\n.rootWrapper {\n\tmax-height: 100%;\n height: 100%;\n}\nmain#rootComponent {\n\theight: 100%;\n\tmax-height: 100%;\n}\nmain#rootComponent.light {\n\t\tbackground-color: var(--bg-light-mode, #fff7e0)\n}\nmain#rootComponent.dark {\n\t\tbackground-color: var(--bg-dark-mode, #2d2d2d);\n}\nmain#rootComponent.dark #content-area {\n\t\t\tcolor: #fff\n}\nheader.wrapper {\n\twidth: 200px;\n\tmargin: 0 auto;\n}\n#engine {\n\theight: calc(100% - 8.4rem);\n\tposition: relative;\n right: 0;\n left: 0;\n bottom: 0;\n width: 100%;\n}\n#reader-component {\n\twidth: 100%;\n}\n.typeArea {\n\twidth: 100%;\n}\n.engineWrapper {\n\theight: 100%;\n display: flex;\n justify-content: space-between;\n\tposition: relative;\n right: 0;\n left: 0;\n bottom: 0;\n width: 100%;\n}\n.columns-double .columnsArea {\n\t-moz-column-count: 2;\n column-count: 2;\n grid-column-gap: 0;\n -moz-column-gap: 0;\n column-gap: 0;\n height: 100%;\n padding: 0;\n width: 100%;\n}\n@media only screen and (max-width: 1020px) {\n.columns-double .columnsArea {\n\t\t-moz-column-count: 1;\n \tcolumn-count: 1\n}\n}\n.columns-single .columnsArea {\n\t-moz-column-count: 1;\n\t column-count: 1;\n\t-moz-column-gap: 0;\n\t column-gap: 0;\n\theight: 100%;\n padding: 0;\n width: 100%;\n}\n.columns-single .columnsArea #content-area {\n\t\tmax-width: 37em;\n\t\tmargin: 0 auto;\n}\n.nav-prev { left: 0px;\n}\n.nav-next { right: 0px;\n}\n.viewer-nav {\n\theight: 100%;\n\tposition: relative;\n\ttop: 0px;\n\tbottom: 0px;\n\tz-index: 10;\n\twidth: 2.5rem;\n\tflex-shrink: 0;\n\tcursor: pointer;\n\talign-self: center;\n\ttransition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\n\ttransition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n\ttransition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;\n\ttransition-duration: 500ms;\n\ttransition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.viewer-nav:focus,\n\t.viewer-nav:active {\n\t\tborder: none !important;\n\t\tbox-shadow: none !important;\n\t\toutline-color: transparent !important;\n}\n#content-area *::-moz-selection {\n\tcolor: var(--theme-primary-extralight, #690000);\n\tbackground: var(--theme-secondary, #ffa03c);\n}\n#content-area *::selection {\n\tcolor: var(--theme-primary-extralight, #690000);\n\tbackground: var(--theme-secondary, #ffa03c);\n}\n.viewer-nav-icon { opacity: 0;\n}\n@media (min-width: 768px) {\n.viewer-nav-icon { opacity: 0.8;\n}\n}\n@media only screen and (max-width: 600px) {\n.columnsArea {\n\t\ttransition: margin 100ms\n}\n}\n\n/* slider */\n.slider-target,.slider-target *{\n -webkit-touch-callout:none;\n -webkit-tap-highlight-color:rgba(0,0,0,0);\n box-sizing:border-box;\n touch-action:none;\n -webkit-user-select:none;\n -moz-user-select:none;\n user-select:none\n}\n.slider-target{\n position:relative\n}\n.slider-base,.slider-connects{\n height:100%;\n position:relative;\n width:100%;\n z-index:1\n}\n.slider-connects{\n overflow:hidden;\n z-index:0\n}\n.slider-connect,.slider-origin{\n height:100%;\n position:absolute;\n right:0;\n top:0;\n transform-origin:0 0;\n transform-style:flat;\n width:100%;\n will-change:transform;\n z-index:1\n}\n.slider-txt-dir-rtl.slider-horizontal .slider-origin{\n left:0;\n right:auto\n}\n.slider-vertical .slider-origin{\n top:-100%;\n width:0\n}\n.slider-horizontal .slider-origin{\n height:0\n}\n.slider-handle{\n -webkit-backface-visibility:hidden;\n backface-visibility:hidden;\n position:absolute\n}\n.slider-touch-area{\n height:100%;\n width:100%\n}\n.slider-state-tap .slider-connect,.slider-state-tap .slider-origin{\n transition:transform .3s\n}\n.slider-state-drag *{\n cursor:inherit!important\n}\n.slider-tooltip-drag .slider-tooltip,.slider-tooltip-focus .slider-tooltip{\n display:none!important\n}\n.slider-tooltip-drag .slider-active .slider-tooltip,.slider-tooltip-drag.slider-state-drag .slider-tooltip:not(.slider-tooltip-hidden),.slider-tooltip-focus.slider-focused .slider-tooltip:not(.slider-tooltip-hidden){\n display:block!important\n}\n.slider-horizontal{\n height:var(--slider-height,6px)\n}\n.slider-horizontal .slider-handle{\n height:var(--slider-handle-height,16px);\n right:calc(var(--slider-handle-width, 16px)/2*-1);\n top:calc((var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2*-1 + -1px);\n width:var(--slider-handle-width,16px)\n}\n.slider-vertical{\n height:var(--slider-vertical-height,300px);\n width:var(--slider-height,6px)\n}\n.slider-vertical .slider-handle{\n bottom:calc(var(--slider-handle-width, 16px)/2*-1);\n height:var(--slider-handle-width,16px);\n right:calc((var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2*-1 + -1px);\n width:var(--slider-handle-height,16px)\n}\n.slider-txt-dir-rtl.slider-horizontal .slider-handle{\n left:calc(var(--slider-handle-width, 16px)/2*-1);\n right:auto\n}\n.slider-base{\n background-color:var(--slider-bg,#d1d5db)\n}\n.slider-base,.slider-connects{\n border-radius:var(--slider-radius,9999px)\n}\n.slider-connect{\n background:var(--theme-secondary, #690000);\n cursor:pointer\n}\n.slider-draggable{\n cursor:ew-resize\n}\n.slider-vertical .slider-draggable{\n cursor:ns-resize\n}\n.slider-handle{\n background:var(--slider-handle-bg,#fff);\n border:var(--slider-handle-border,0);\n border-radius:var(--slider-handle-radius,9999px);\n box-shadow:var(--slider-handle-shadow,.5px .5px 2px 1px rgba(0,0,0,.32));\n cursor:-webkit-grab;\n cursor:grab;\n height:var(--slider-handle-height,16px);\n width:var(--slider-handle-width,16px)\n}\n.slider-handle:focus{\n box-shadow:0 0 0 var(--slider-handle-ring-width,3px) var(--slider-handle-ring-color,rgba(16,185,129,.188)),var(--slider-handle-shadow,.5px .5px 2px 1px rgba(0,0,0,.32));\n outline:none\n}\n.slider-active{\n box-shadow:var(--slider-handle-shadow-active,.5px .5px 2px 1px rgba(0,0,0,.42));\n cursor:-webkit-grabbing;\n cursor:grabbing\n}\n[disabled] .slider-connect{\n background:var(--slider-connect-bg-disabled,#9ca3af)\n}\n[disabled] .slider-handle,[disabled].slider-handle,[disabled].slider-target{\n cursor:not-allowed\n}\n[disabled] .slider-tooltip{\n background:var(--theme-secondary, #690000);\n border-color:var(--theme-secondary, #690000);\n\topacity: 0.5;\n}\n.slider-tooltip{\n background:var(--theme-secondary, #690000);\n border:1px solid var(--theme-secondary, #690000);\n border-radius:var(--slider-tooltip-radius,5px);\n color:var(--slider-tooltip-color,#fff);\n display:block;\n font-size:var(--slider-tooltip-font-size,.875rem);\n font-weight:var(--slider-tooltip-font-weight,600);\n line-height:var(--slider-tooltip-line-height,1.25rem);\n min-width:var(--slider-tooltip-min-width,20px);\n padding:var(--slider-tooltip-py,2px) var(--slider-tooltip-px,6px);\n position:absolute;\n text-align:center;\n white-space:nowrap\n}\n.slider-horizontal .slider-tooltip-top{\n bottom:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));\n left:50%;\n transform:translate(-50%)\n}\n.slider-horizontal .slider-tooltip-top:before{\n border:var(--slider-tooltip-arrow-size,5px) solid transparent;\n border-top-color:inherit;\n bottom:calc(var(--slider-tooltip-arrow-size, 5px)*-2);\n content:\"\";\n height:0;\n left:50%;\n position:absolute;\n transform:translate(-50%);\n width:0\n}\n.slider-horizontal .slider-tooltip-bottom{\n left:50%;\n top:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));\n transform:translate(-50%)\n}\n.slider-horizontal .slider-tooltip-bottom:before{\n border:var(--slider-tooltip-arrow-size,5px) solid transparent;\n border-bottom-color:inherit;\n content:\"\";\n height:0;\n left:50%;\n position:absolute;\n top:calc(var(--slider-tooltip-arrow-size, 5px)*-2);\n transform:translate(-50%);\n width:0\n}\n.slider-vertical .slider-tooltip-left{\n right:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));\n top:50%;\n transform:translateY(-50%)\n}\n.slider-vertical .slider-tooltip-left:before{\n border:var(--slider-tooltip-arrow-size,5px) solid transparent;\n border-left-color:inherit;\n content:\"\";\n height:0;\n position:absolute;\n right:calc(var(--slider-tooltip-arrow-size, 5px)*-2);\n top:50%;\n transform:translateY(-50%);\n width:0\n}\n.slider-vertical .slider-tooltip-right{\n left:calc(var(--slider-handle-height, 16px) + var(--slider-tooltip-arrow-size, 5px) + var(--slider-tooltip-distance, 3px));\n top:50%;\n transform:translateY(-50%)\n}\n.slider-vertical .slider-tooltip-right:before{\n border:var(--slider-tooltip-arrow-size,5px) solid transparent;\n border-right-color:inherit;\n content:\"\";\n height:0;\n left:calc(var(--slider-tooltip-arrow-size, 5px)*-2);\n position:absolute;\n top:50%;\n transform:translateY(-50%);\n width:0\n}\n.slider-horizontal .slider-origin>.slider-tooltip{\n left:auto;\n transform:translate(50%)\n}\n.slider-horizontal .slider-origin>.slider-tooltip-top{\n bottom:calc(var(--slider-tooltip-arrow-size, 5px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) + 1px)\n}\n.slider-horizontal .slider-origin>.slider-tooltip-bottom{\n top:calc(var(--slider-tooltip-arrow-size, 5px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) + var(--slider-height, 6px) - 1px)\n}\n.slider-vertical .slider-origin>.slider-tooltip{\n top:auto;\n transform:translateY(calc((var(--slider-tooltip-line-height, 1.25rem) - var(--slider-tooltip-py, 2px))*-1 + 1px))\n}\n.slider-vertical .slider-origin>.slider-tooltip-left{\n right:calc(var(--slider-tooltip-arrow-size, 5px) + var(--slider-height, 6px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) - 1px)\n}\n.slider-vertical .slider-origin>.slider-tooltip-right{\n left:calc(var(--slider-tooltip-arrow-size, 5px) + var(--slider-height, 6px) + (var(--slider-handle-height, 16px) - var(--slider-height, 6px))/2 + var(--slider-tooltip-distance, 3px) - var(--slider-height, 6px) + 1px)\n}\n\n";
|
|
10414
10417
|
|
|
10415
10418
|
const _hoisted_1 = { class: "rootWrapper" };
|
|
10416
10419
|
const _hoisted_2 = { class: "text-white text-center text-xs" };
|
|
@@ -10426,7 +10429,8 @@ const _sfc_main = {
|
|
|
10426
10429
|
type: String,
|
|
10427
10430
|
default: ''
|
|
10428
10431
|
},
|
|
10429
|
-
cssFile: String
|
|
10432
|
+
cssFile: String,
|
|
10433
|
+
cssString: String
|
|
10430
10434
|
},
|
|
10431
10435
|
setup(__props) {
|
|
10432
10436
|
|
|
@@ -10451,13 +10455,17 @@ onMounted(async () => {
|
|
|
10451
10455
|
if (props.cssFile) {
|
|
10452
10456
|
useStyles.stylesheetLoader(props.cssFile, rootComponent);
|
|
10453
10457
|
}
|
|
10458
|
+
|
|
10459
|
+
if (props.cssString) {
|
|
10460
|
+
useStyles.applyStylesheet(props.cssString, rootComponent);
|
|
10461
|
+
}
|
|
10454
10462
|
});
|
|
10455
10463
|
|
|
10456
10464
|
watchDebounced(
|
|
10457
10465
|
[width, height, content, columns, fontSize, textFont],
|
|
10458
10466
|
() => {
|
|
10459
|
-
if (width.value < 1024 && columns.value === '
|
|
10460
|
-
setColumns('
|
|
10467
|
+
if (width.value < 1024 && columns.value === 'double')
|
|
10468
|
+
setColumns('single');
|
|
10461
10469
|
else
|
|
10462
10470
|
useEstimatePages.estimate(readerComponent, contentArea);
|
|
10463
10471
|
},
|
|
@@ -10476,7 +10484,12 @@ return (_ctx, _cache) => {
|
|
|
10476
10484
|
id: "rootComponent",
|
|
10477
10485
|
ref_key: "rootComponent",
|
|
10478
10486
|
ref: rootComponent,
|
|
10479
|
-
class: normalizeClass(
|
|
10487
|
+
class: normalizeClass(unref(mode)
|
|
10488
|
+
.concat(` ${props.rootClass}`)
|
|
10489
|
+
.concat(` currentPage-${unref(currentPage)}`)
|
|
10490
|
+
.concat(` totalPages-${unref(totalPages)}`)
|
|
10491
|
+
.concat(` columns-${unref(columns)}`)
|
|
10492
|
+
),
|
|
10480
10493
|
style: normalizeStyle(`font-family: ${unref(baseFont)}`)
|
|
10481
10494
|
}, [
|
|
10482
10495
|
createVNode(_sfc_main$7, null, {
|