UNPKG

r2-navigator-js

Version:

Readium 2 'navigator' for NodeJS (TypeScript)

github.com/readium/r2-navigator-js

readium/r2-navigator-js

107 lines (106 loc) • 43.6 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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
107
export declare const ENABLE_EXTRA_COLUMN_SHIFT_METHOD = false; export declare enum WebViewSlotEnum { center = "center", left = "left", right = "right" } export declare const EXTRA_COLUMN_PAD_ID = "r2-extra-column-pad"; export declare const CLASS_VWM = "r2-class-VWM"; export declare const CLASS_PAGINATED = "r2-css-paginated"; export declare const HIDE_CURSOR_CLASS = "r2-hideCursor"; export declare const ZERO_TRANSFORM_CLASS = "r2-zeroTransform"; export declare const ENABLE_SKIP_LINK = false; export declare const SKIP_LINK_ID = "r2-skip-link"; export declare const LINK_TARGET_CLASS = "r2-link-target"; export declare const LINK_TARGET_ALT_CLASS = "r2-link-target-alt"; export declare const DISABLE_TEMPORARY_NAV_TARGET_OUTLINE_CLASS = "r2-no-link-target-temp-highlight"; export declare const ROOT_CLASS_REDUCE_MOTION = "r2-reduce-motion"; export declare const ROOT_CLASS_MATHJAX = "r2-mathjax"; export declare const ROOT_CLASS_FIXED_LAYOUT = "r2-fixed-layout"; export declare const ROOT_CLASS_NO_FOOTNOTES = "r2-no-popup-foonotes"; export declare const ROOT_CLASS_NO_RUBY = "r2-no-ruby"; export declare const FOOTNOTES_CONTAINER_CLASS = "r2-footnote-container"; export declare const FOOTNOTES_CLOSE_BUTTON_CLASS = "r2-footnote-close"; export declare const FOOTNOTE_FORCE_SHOW = "r2-footnote-force-show"; export declare const POPOUTIMAGE_CONTAINER_ID = "r2-popoutimage-container-id"; export declare const POPOUTIMAGE_CLOSE_ID = "r2-popoutimage-close-id"; export declare const POPOUTIMAGE_CONTROLS_ID = "r2-popoutimage-controls-id"; export declare const POPOUTIMAGE_MINUS_ID = "r2-popoutimage-minus-id"; export declare const POPOUTIMAGE_PLUS_ID = "r2-popoutimage-plus-id"; export declare const POPOUTIMAGE_RESET_ID = "r2-popoutimage-reset-id"; export declare const POPUP_DIALOG_CLASS = "r2-popup-dialog"; export declare const POPUP_DIALOG_CLASS_COLLAPSE = "r2-popup-dialog-collapse"; export declare const ROOT_CLASS_KEYBOARD_INTERACT = "r2-keyboard-interact"; export declare const CSS_CLASS_NO_FOCUS_OUTLINE = "r2-no-focus-outline"; export declare const footnotesCssStyles = "\n@namespace epub \"http://www.idpf.org/2007/ops\";\n\n/* TODO: allowlist for DIV etc. ... or blocklist for SPAN etc. ?*/\ndiv[epub|type~=\"pagebreak\"]:empty {\n line-height: 0 !important;\n}\ndiv[role~=\"doc-pagebreak\"]:empty {\n line-height: 0 !important;\n}\n*[epub|type~=\"pagebreak\"]:empty::before {\n display: contents;\n /*display: inline-block;*/\n content: \"\\feff\" /* zero width nbsp, instead of     */\n}\n*[role~=\"doc-pagebreak\"]:empty::before {\n display: contents;\n /*display: inline-block;*/\n content: \"\\feff\" /* zero width nbsp, instead of     */\n}\n\n:root:not(.r2-no-popup-foonotes) aside[epub|type~=\"footnote\"]:not(.r2-footnote-force-show),\n:root:not(.r2-no-popup-foonotes) aside[epub|type~=\"note\"]:not(.r2-footnote-force-show),\n:root:not(.r2-no-popup-foonotes) aside[epub|type~=\"endnote\"]:not(.r2-footnote-force-show),\n:root:not(.r2-no-popup-foonotes) aside[epub|type~=\"rearnote\"]:not(.r2-footnote-force-show) {\n display: none;\n}\n\n/*\n:root.r2-popup-dialog {\n overflow: hidden !important;\n}\n*/\n\n:root[style] dialog#r2-popup-dialog:not(.r2-popup-dialog-collapse)::backdrop,\n:root dialog#r2-popup-dialog:not(.r2-popup-dialog-collapse)::backdrop {\n background: rgba(0, 0, 0, 0.3) !important;\n}\n:root[style*=\"readium-night-on\"] dialog#r2-popup-dialog:not(.r2-popup-dialog-collapse)::backdrop {\n background: rgba(0, 0, 0, 0.65) !important;\n}\n:root[style] dialog#r2-popup-dialog.r2-popup-dialog-collapse::backdrop,\n:root dialog#r2-popup-dialog.r2-popup-dialog-collapse::backdrop {\n background: transparent !important;\n}\n\n:root[style] dialog#r2-popup-dialog,\n:root dialog#r2-popup-dialog {\n -webkit-writing-mode: horizontal-tb;\n\n z-index: 3;\n\n position: fixed;\n\n width: 90%;\n max-width: 40em;\n\n top: auto;\n bottom: 1em;\n height: 7em;\n\n margin: 0 auto;\n padding: 0;\n\n border-radius: 0.3em;\n border-width: 1px;\n\n background: white !important;\n border-color: black !important;\n\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n\n display: grid;\n grid-column-gap: 0px;\n grid-row-gap: 0px;\n\n grid-template-columns: 1.5em auto 1.5em;\n grid-template-rows: auto 1.5em;\n}\n:root[style*=\"readium-night-on\"] dialog#r2-popup-dialog {\n background: #333333 !important;\n border-color: white !important;\n}\n:root[style*=\"readium-sepia-on\"] dialog#r2-popup-dialog {\n background: var(--RS__backgroundColor) !important;\n}\n:root[style*=\"--USER__backgroundColor\"] dialog#r2-popup-dialog {\n background: var(--USER__backgroundColor) !important;\n}\n\n:root[style] dialog#r2-popup-dialog.r2-popup-dialog-collapse,\n:root dialog#r2-popup-dialog.r2-popup-dialog-collapse {\n top: auto;\n height: 1px;\n}\n\n:root[style] div#r2-popoutimage-container-id,\n:root div#r2-popoutimage-container-id,\n:root[style].r2-keyboard-interact div#r2-popoutimage-container-id,\n:root.r2-keyboard-interact div#r2-popoutimage-container-id {\n grid-column-start: 1;\n grid-column-end: 4;\n grid-row-start: 1;\n grid-row-end: 3;\n\n /*\n outline-color: magenta !important;\n outline-style: dotted !important;\n outline-width: 4px !important;\n outline-offset: -4px !important;\n */\n\n padding: 0;\n margin: 0;\n\n box-sizing: border-box;\n\n cursor: pointer;\n\n /* position: relative; */\n\n display: flex;\n /* no need for vertical / horizontal control, as we use margin:auto\n justify-content: center;\n align-items: center;\n */\n\n /* FXL, just in case the top-level transform scale isn't applied */\n overflow-y: auto;\n overflow-x: auto;\n}\n\n@keyframes readium2ElectronAnimation_IMG_OUTLINE {\n 0% {\n outline-offset: -0.4em;\n }\n 25% {\n outline-offset: 0em;\n }\n 50% {\n outline-offset: 0.8em;\n }\n 75% {\n outline-offset: 0em;\n }\n 100% {\n outline-offset: -0.4em;\n }\n}\n\n/*\n:root[style].r2-keyboard-interact img[data-r2-popoutimage-container-id],\n:root.r2-keyboard-interact img[data-r2-popoutimage-container-id],\n:root[style].r2-keyboard-interact image[data-r2-popoutimage-container-id],\n:root.r2-keyboard-interact image[data-r2-popoutimage-container-id],\n:root[style].r2-keyboard-interact svg[data-r2-popoutimage-container-id],\n:root.r2-keyboard-interact svg[data-r2-popoutimage-container-id]\n*/\n\n:root[style] img[data-r2-popoutimage-container-id],\n:root img[data-r2-popoutimage-container-id],\n:root[style] image[data-r2-popoutimage-container-id],\n:root image[data-r2-popoutimage-container-id],\n:root[style] svg[data-r2-popoutimage-container-id],\n:root svg[data-r2-popoutimage-container-id]\n{\n outline-color: magenta !important;\n outline-style: solid !important;\n outline-width: 0.2em !important;\n /* outline-offset: 2px !important; */\n\n cursor: pointer !important;\n\n animation-name: readium2ElectronAnimation_IMG_OUTLINE;\n animation-iteration-count: infinite;\n animation-duration: 1s;\n animation-delay: 0s;\n animation-fill-mode: forwards;\n animation-timing-function: linear;\n}\n\n/*\n:root[style*=\"readium-night-on\"]\n*/\n:root[style] div#r2-popoutimage-container-id #r2-popoutimage-controls-id,\n:root div#r2-popoutimage-container-id #r2-popoutimage-controls-id {\n border: 1px solid var(--RS__backgroundColor) !important;\n background: transparent !important;\n color: var(--RS__textColor) !important;\n padding: 4px;\n margin: 0;\n border-radius: 16px;\n position: absolute;\n top: 8px;\n left: 8px;\n width: auto;\n height: auto;\n}\n:root[style]:not([style*=\"--USER__\"]) div#r2-popoutimage-container-id #r2-popoutimage-controls-id,\n:root:not([style]) div#r2-popoutimage-container-id #r2-popoutimage-controls-id {\n border: 1px solid black !important;\n background: white !important;\n color: black !important;\n}\n\n:root[style] div#r2-popoutimage-container-id #r2-popoutimage-close-id,\n:root div#r2-popoutimage-container-id #r2-popoutimage-close-id {\n position: absolute;\n top: 8px;\n right: 8px;\n}\n:root[style] div#r2-popoutimage-container-id button,\n:root div#r2-popoutimage-container-id button {\n border: 2px solid var(--RS__textColor) !important;\n background: var(--RS__backgroundColor) !important;\n color: var(--RS__textColor) !important;\n font-family: Arial !important;\n font-size: 20px !important;\n font-weight: bold;\n user-select: none;\n padding: 8px;\n margin: 0;\n border-radius: 16px;\n width: 36px;\n display: inline-block;\n cursor: pointer !important;\n}\n:root[style]:not([style*=\"--USER__\"]) div#r2-popoutimage-container-id button,\n:root:not([style]) div#r2-popoutimage-container-id button {\n border: 2px solid black !important;\n background: white !important;\n color: black !important;\n}\n\n:root[style] div#r2-popoutimage-container-id > img,\n:root div#r2-popoutimage-container-id > img {\n\n /*\n outline-color: red !important;\n outline-style: dashed !important;\n outline-width: 2px !important;\n outline-offset: -2px !important;\n */\n\n transform-origin: 0px 0px;\n\n box-sizing: border-box;\n /* border: 2px solid #333333; */\n\n cursor: move !important;\n\n margin: 0 !important;\n object-fit: contain !important;\n position: relative !important;\n max-height: 100% !important;\n max-width: 100% !important;\n width: 100% !important;\n height: 100% !important;\n\n /*\n margin: auto !important;\n object-fit: cover !important;\n position: relative !important;\n max-height: 100% !important;\n max-width: 100% !important;\n width: auto !important;\n height: auto !important;\n */\n\n /* vertical centering breaks image height\n margin: auto !important;\n position: absolute !important;\n max-height: none !important;\n max-width: 100% !important;\n width: 100% !important;\n height: auto !important;\n\n top: 0 !important;\n bottom: 0 !important;\n */\n\n /* this works with position:relative in the parent (no need for flex)\n max-height: 100% !important;\n max-width: 100% !important;\n width: auto !important;\n height: auto !important;\n\n position: absolute !important;\n top: 0 !important;\n bottom: 0 !important;\n left: 0 !important;\n right: 0 !important;\n margin: auto !important;\n */\n}\n\n:root[style] .r2-footnote-container,\n:root .r2-footnote-container {\n overflow: auto;\n\n grid-column-start: 1;\n grid-column-end: 4;\n grid-row-start: 1;\n grid-row-end: 3;\n\n padding: 0.3em;\n margin: 0.2em;\n}\n\n:root[style] .r2-footnote-container > *,\n:root .r2-footnote-container > * {\n margin: 0 !important;\n padding: 0 !important;\n width: 100%;\n}\n\n/*\nhttps://github.com/edrlab/thorium-reader/issues/2478#issuecomment-2304782942\n:root[style] .r2-footnote-container a[epub|type~=\"backlink\"],\n:root .r2-footnote-container a[epub|type~=\"backlink\"],\n:root[style] .r2-footnote-container a[role~=\"doc-backlink\"],\n:root .r2-footnote-container a[role~=\"doc-backlink\"] {\n display: none !important;\n}\n*/\n\n/*\n:root[style] .r2-footnote-close,\n:root .r2-footnote-close {\n border: 1px solid black;\n background: white !important;\n color: black !important;\n\n border-radius: 0.8em;\n position: absolute;\n top: -0.9em;\n left: -0.9em;\n width: 1.8em;\n height: 1.8em;\n font-size: 1em !important;\n font-family: Arial !important;\n cursor: pointer;\n}\n:root[style*=\"readium-night-on\"] .r2-footnote-close {\n border: 1px solid white !important;\n background: black !important;\n color: white !important;\n}\n*/\n"; export declare const R2_MO_CLASS_ACTIVE = "r2-mo-active"; export declare const R2_MO_CLASS_ACTIVE_PLAYBACK = "r2-mo-active-playback"; export declare const R2_MO_CLASS_PLAYING = "r2-mo-playing"; export declare const R2_MO_CLASS_PAUSED = "r2-mo-paused"; export declare const R2_MO_CLASS_STOPPED = "r2-mo-stopped"; export declare const mediaOverlaysCssStyles = "\n:root[style] .r2-mo-active,\n:root .r2-mo-active {\n background-color: yellow !important;\n color: black !important;\n}\n:root[style*=\"readium-night-on\"] .r2-mo-active {\n background-color: #333333 !important;\n color: white !important;\n}\n:root[style*=\"readium-sepia-on\"] .r2-mo-active {\n background-color: silver !important;\n color: black !important;\n}\n"; export declare const TTS_CLASS_THEME1 = "r2-tts-theme1"; export declare const TTS_CLASS_IS_ACTIVE = "r2-tts-isPlaying"; export declare const TTS_CLASS_PAUSED = "r2-tts-paused"; export declare const TTS_CLASS_PLAYING = "r2-tts-playing"; export declare const TTS_CLASS_STOPPED = "r2-tts-stopped"; export declare const TTS_ID_PREVIOUS = "r2-tts-previous"; export declare const TTS_ID_NEXT = "r2-tts-next"; export declare const TTS_ID_SLIDER = "r2-tts-slider"; export declare const TTS_ID_ACTIVE_WORD = "r2-tts-active-word"; export declare const TTS_ID_ACTIVE_UTTERANCE = "r2-tts-active-utterance"; export declare const TTS_CLASS_UTTERANCE = "r2-tts-utterance"; export declare const TTS_CLASS_UTTERANCE_HEADING1 = "r2-tts-utterance-h1"; export declare const TTS_CLASS_UTTERANCE_HEADING2 = "r2-tts-utterance-h2"; export declare const TTS_CLASS_UTTERANCE_HEADING3 = "r2-tts-utterance-h3"; export declare const TTS_CLASS_UTTERANCE_HEADING4 = "r2-tts-utterance-h4"; export declare const TTS_CLASS_UTTERANCE_HEADING5 = "r2-tts-utterance-h5"; export declare const TTS_ID_CONTAINER = "r2-tts-txt"; export declare const TTS_NAV_BUTTON_CLASS = "r2-tts-button"; export declare const TTS_ID_SPEAKING_DOC_ELEMENT = "r2-tts-speaking-el"; export declare const TTS_POPUP_DIALOG_CLASS = "r2-tts-popup-dialog"; export declare const ttsCssStyles = "\n\n:root[style] dialog#r2-popup-dialog.r2-tts-popup-dialog,\n:root dialog#r2-popup-dialog.r2-tts-popup-dialog {\n width: auto;\n max-width: 100%;\n\n height: auto;\n max-height: 100%;\n\n top: 0px;\n bottom: 0px;\n left: 0px;\n right: 0px;\n\n margin: 0;\n padding: 0;\n\n box-shadow: none;\n\n border-radius: 0;\n border-style: solid;\n border-width: 1px;\n border-color: #777777 !important;\n border-left: 0;\n border-right: 0;\n border-top: 0;\n border-bottom: 0;\n}\n\n:root[style] div#r2-tts-txt,\n:root div#r2-tts-txt {\n overflow: auto;\n overflow-x: hidden;\n\n grid-column-start: 1;\n grid-column-end: 4;\n grid-row-start: 1;\n grid-row-end: 2;\n\n padding: 0;\n margin: 0;\n\n max-width: 800px;\n margin-right: auto;\n margin-left: auto;\n\n hyphens: none !important;\n word-break: keep-all !important;\n word-wrap: break-word !important;\n\n line-height: initial !important;\n\n color: #444444 !important;\n\n border-radius: 0;\n border-style: solid;\n border-width: 1px;\n border-color: #777777 !important;\n border-left: 0;\n border-right: 0;\n border-top: 0;\n}\n\n:root[style] div#r2-tts-txt > div,\n:root div#r2-tts-txt > div {\n font-size: 1.2rem !important;\n}\n:root[style] div#r2-tts-txt > img,\n:root div#r2-tts-txt > img,\n:root[style] div#r2-tts-txt > svg,\n:root div#r2-tts-txt > svg {\n display: block;\n border: 3px solid transparent;\n max-width: 50%;\n margin-left: auto;\n margin-right: auto;\n}\n:root[style] div#r2-tts-txt > img + div,\n:root div#r2-tts-txt > img + div,\n:root[style] div#r2-tts-txt > svg + div,\n:root div#r2-tts-txt > svg + div {\n text-align: center;\n text-decoration: underline;\n}\n\n:root[style*=\"--USER__lineHeight\"] div#r2-tts-txt {\n line-height: calc(var(--USER__lineHeight) * 1) !important;\n}\n:root[style*=\"readium-night-on\"] div#r2-tts-txt {\n color: #bbbbbb !important;\n}\n:root[style*=\"readium-sepia-on\"] div#r2-tts-txt {\n background: var(--RS__backgroundColor) !important;\n color: var(--RS__textColor) !important;\n}\n:root[style*=\"--USER__backgroundColor\"] div#r2-tts-txt {\n background: var(--USER__backgroundColor) !important;\n}\n:root[style*=\"--USER__textColor\"] div#r2-tts-txt {\n color: var(--USER__textColor) !important;\n}\n\n:root[style] #r2-tts-slider,\n:root #r2-tts-slider {\n padding: 0;\n margin: 0;\n margin-left: 6px;\n margin-right: 6px;\n margin-top: 6px;\n margin-bottom: 6px;\n\n grid-column-start: 2;\n grid-column-end: 3;\n grid-row-start: 2;\n grid-row-end: 3;\n\n cursor: pointer;\n -webkit-appearance: none;\n\n background: transparent !important;\n}\n:root #r2-tts-slider::-webkit-slider-runnable-track {\n cursor: pointer;\n\n width: 100%;\n height: 0.5em;\n\n background: #999999;\n\n padding: 0;\n margin: 0;\n}\n:root[style*=\"readium-night-on\"] #r2-tts-slider::-webkit-slider-runnable-track {\n background: #545454;\n}\n:root #r2-tts-slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n\n cursor: pointer;\n\n width: 0.8em;\n height: 1.5em;\n\n padding: 0;\n margin: 0;\n margin-top: -0.5em;\n\n border: none;\n border-radius: 0.2em;\n\n background: #333333;\n}\n:root[style*=\"readium-night-on\"] #r2-tts-slider::-webkit-slider-thumb {\n background: white;\n}\n:root[style] button.r2-tts-button > span,\n:root button.r2-tts-button > span {\n vertical-align: baseline;\n}\n:root[style] button.r2-tts-button,\n:root button.r2-tts-button {\n border: none;\n\n font-size: 100% !important;\n font-family: Arial !important;\n cursor: pointer;\n\n padding: 0;\n margin-top: 0.2em;\n margin-bottom: 0.2em;\n\n background: transparent !important;\n color: black !important;\n}\n:root[style*=\"readium-night-on\"] button.r2-tts-button {\n color: white !important;\n}\n/*\n:root[style*=\"readium-sepia-on\"] button.r2-tts-button {\n background: var(--RS__backgroundColor) !important;\n}\n:root[style*=\"--USER__backgroundColor\"] button.r2-tts-button {\n background: var(--USER__backgroundColor) !important;\n}\n*/\n:root[style] #r2-tts-previous,\n:root #r2-tts-previous {\n margin-left: 0.2em;\n\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 2;\n grid-row-end: 3;\n}\n:root[style] #r2-tts-next,\n:root #r2-tts-next {\n margin-right: 0.2em;\n\n grid-column-start: 3;\n grid-column-end: 4;\n grid-row-start: 2;\n grid-row-end: 3;\n}\n\n:root[style] .r2-tts-speaking-el,\n:root .r2-tts-speaking-el {\n outline-color: magenta;\n outline-style: solid;\n outline-width: 2px;\n outline-offset: 1px;\n}\n\n:root[style] .r2-tts-utterance,\n:root .r2-tts-utterance {\n margin-bottom: 0.1em;\n padding-top: 0.3em;\n padding-bottom: 0.3em;\n padding-left: 1em;\n padding-right: 1em;\n display: block;\n\n box-sizing: border-box;\n border: 1px solid transparent !important;\n\n line-height: 1.5 !important;\n}\n\n:root[style] div#r2-tts-txt .r2-tts-utterance-h1,\n:root div#r2-tts-txt .r2-tts-utterance-h1 {\n font-weight: bolder !important;\n font-size: 1.5rem !important;\n}\n:root[style] div#r2-tts-txt .r2-tts-utterance-h2,\n:root div#r2-tts-txt .r2-tts-utterance-h2 {\n font-weight: bolder !important;\n font-size: 1.4rem !important;\n}\n:root[style] div#r2-tts-txt .r2-tts-utterance-h3,\n:root div#r2-tts-txt .r2-tts-utterance-h3 {\n font-weight: bold !important;\n font-size: 1.3rem !important;\n}\n:root[style] div#r2-tts-txt .r2-tts-utterance-h4,\n:root div#r2-tts-txt .r2-tts-utterance-h4 {\n font-weight: bold !important;\n font-size: 1.2rem !important;\n}\n:root[style] div#r2-tts-txt .r2-tts-utterance-h5,\n:root div#r2-tts-txt .r2-tts-utterance-h5 {\n font-weight: bold !important;\n font-size: 1.1rem !important;\n}\n\n:root[style] div#r2-tts-active-utterance,\n:root div#r2-tts-active-utterance {\n /* background-color: yellow !important; */\n\n border: 1px solid #777777 !important;\n border-radius: 0.4em !important;\n\n color: black !important;\n}\n:root[style*=\"readium-night-on\"] div#r2-tts-active-utterance {\n color: white !important;\n}\n:root[style*=\"readium-sepia-on\"] div#r2-tts-active-utterance {\n color: black !important;\n}\n:root[style*=\"--USER__textColor\"] div#r2-tts-active-utterance {\n color: var(--USER__textColor) !important;\n}\n\n:root[style] span#r2-tts-active-word,\n:root span#r2-tts-active-word {\n color: black !important;\n\n text-decoration: underline;\n text-decoration-color: #777777 !important;\n text-underline-position: under;\n /*\n outline-color: #777777;\n outline-offset: 2px;\n outline-style: solid;\n outline-width: 1px;\n */\n\n padding: 0;\n margin: 0;\n}\n:root[style*=\"readium-night-on\"] span#r2-tts-active-word {\n color: white !important;\n outline-color: white;\n}\n:root[style*=\"readium-sepia-on\"] span#r2-tts-active-word {\n color: black !important;\n outline-color: black;\n}\n:root[style*=\"--USER__textColor\"] span#r2-tts-active-word {\n color: var(--USER__textColor) !important;\n outline-color: var(--USER__textColor);\n}\n\n:root div#r2-tts-txt.r2-tts-theme1,\n:root[style] div#r2-tts-txt.r2-tts-theme1 {\n\n background-color: #f7f9f9 !important;\n color: #333333 !important;\n}\n:root[style*=\"readium-night-on\"] div#r2-tts-txt.r2-tts-theme1 {\n background: #111111 !important;\n color: #888888 !important;\n}\n:root[style*=\"readium-sepia-on\"] div#r2-tts-txt.r2-tts-theme1 {\n background: #fdf2e9 !important;\n color: #333333 !important;\n}\n\n:root[style] div#r2-tts-txt.r2-tts-theme1 .r2-tts-utterance,\n:root div#r2-tts-txt.r2-tts-theme1 .r2-tts-utterance {\n background-color: transparent !important;\n}\n\n:root[style] div#r2-tts-txt.r2-tts-theme1 div#r2-tts-active-utterance,\n:root div#r2-tts-txt.r2-tts-theme1 div#r2-tts-active-utterance {\n\n border: 0 !important;\n border-radius: 0px !important;\n\n background-color: #ecf0f1 !important;\n color: black !important;\n\n /* box-shadow: 0px 0px 10px 0px #f2f3f4; */\n}\n:root[style*=\"readium-night-on\"] div#r2-tts-txt.r2-tts-theme1 div#r2-tts-active-utterance {\n background-color: #222222 !important;\n color: white !important;\n /* box-shadow: 0px 0px 10px 0px #111100; */\n}\n:root[style*=\"readium-sepia-on\"] div#r2-tts-txt.r2-tts-theme1 div#r2-tts-active-utterance {\n background-color: #fef9e7 !important;\n color: black !important;\n /* box-shadow: 0px 0px 10px 0px #fdebd0; */\n}\n\n:root[style] div#r2-tts-txt.r2-tts-theme1 div#r2-tts-active-utterance span#r2-tts-active-word,\n:root div#r2-tts-txt.r2-tts-theme1 div#r2-tts-active-utterance span#r2-tts-active-word {\n background-color: #f7dc6f !important;\n color: black !important;\n\n outline-color: #f7dc6f;\n outline-style: solid;\n outline-offset: unset;\n outline-width: 4px;\n\n text-decoration: none;\n}\n:root[style*=\"readium-night-on\"] div#r2-tts-txt.r2-tts-theme1 div#r2-tts-active-utterance span#r2-tts-active-word {\n background-color: #d4ac0d !important;\n color: black !important;\n\n outline-color: #d4ac0d;\n}\n:root[style*=\"readium-sepia-on\"] div#r2-tts-txt.r2-tts-theme1 div#r2-tts-active-utterance span#r2-tts-active-word {\n background-color: #f9e79f !important;\n color: black !important;\n\n outline-color: #f9e79f;\n}\n"; export declare const ID_HIGHLIGHTS_CONTAINER = "R2_ID_HIGHLIGHTS_CONTAINER"; export declare const ID_HIGHLIGHTS_FLOATING = "R2_ID_HIGHLIGHTS_FLOATING"; export declare const CLASS_HIGHLIGHT_COMMON = "R2_CLASS_HIGHLIGHT_COMMON"; export declare const CLASS_HIGHLIGHT_COMMON_SVG = "R2_CLASS_HIGHLIGHT_COMMON_SVG"; export declare const CLASS_HIGHLIGHT_SVG = "R2_CLASS_HIGHLIGHT_SVG"; export declare const CLASS_HIGHLIGHT_CONTOUR = "R2_CLASS_HIGHLIGHT_CONTOUR"; export declare const CLASS_HIGHLIGHT_CONTOUR_MARGIN = "R2_CLASS_HIGHLIGHT_CONTOUR_MARGIN"; export declare const CLASS_HIGHLIGHT_CONTAINER = "R2_CLASS_HIGHLIGHT_CONTAINER"; export declare const CLASS_HIGHLIGHT_MARGIN = "R2_CLASS_HIGHLIGHT_MARGIN"; export declare const CLASS_HIGHLIGHT_BEHIND = "R2_CLASS_HIGHLIGHT_BEHIND"; export declare const CLASS_HIGHLIGHT_MASK = "R2_CLASS_HIGHLIGHT_MASK"; export declare const CLASS_HIGHLIGHT_HOVER = "R2_CLASS_HIGHLIGHT_HOVER"; export declare const CLASS_HIGHLIGHT_CURSOR2 = "R2_CLASS_HIGHLIGHT_CURSOR2"; export declare const ENABLE_VISIBILITY_MASK = false; export declare const ROOT_CLASS_INVISIBLE_MASK = "r2-visibility-mask-class"; export declare const ROOT_CLASS_INVISIBLE_MASK_REMOVED = "r2-visibility-mask-removed-class"; export declare const visibilityMaskCssStyles: string; export declare const focusCssStyles = "\n\n#r2-skip-link {\n display: flex !important;\n overflow: hidden !important;\n visibility: visible !important;\n opacity: 1 !important;\n position: absolute !important;\n left: 0px !important;\n top: 0px !important;\n width: 1px !important;\n height: 1px !important;\n background-color: transparent !important;\n color: transparent !important;\n padding: 0 !important;\n margin: 0 !important;\n border: 0 !important;\n outline: 0 !important;\n}\n/*\n#r2-skip-link:focus {\n width: auto;\n height: auto;\n}\n*/\n:root[style] *:focus,\n:root *:focus {\n outline: none;\n}\n:root[style].r2-keyboard-interact *.r2-no-focus-outline:focus:not(:target):not(.r2-link-target):not([data-r2-popoutimage-container-id]),\n:root.r2-keyboard-interact *.r2-no-focus-outline:focus:not(:target):not(.r2-link-target):not([data-r2-popoutimage-container-id]) {\n outline: none !important;\n}\n:root[style].r2-keyboard-interact *:focus:not(:target):not(.r2-link-target),\n:root.r2-keyboard-interact *:focus:not(:target):not(.r2-link-target) {\n outline-color: blue !important;\n outline-style: solid !important;\n outline-width: 2px !important;\n outline-offset: 2px !important;\n}\n/*\n@keyframes readium2ElectronAnimation_FOCUS {\n 0% {\n }\n 100% {\n outline: inherit !important;\n }\n}\n:root[style]:not(.r2-keyboard-interact) *:focus,\n:root:not(.r2-keyboard-interact) *:focus {\n animation-name: readium2ElectronAnimation_FOCUS;\n animation-duration: 3s;\n animation-delay: 1s;\n animation-fill-mode: forwards;\n animation-timing-function: linear;\n}\n*/\n"; export declare const targetCssStyles = "\n/*\n@keyframes readium2ElectronAnimation_TARGET {\n 0% {\n }\n 100% {\n outline: inherit !important;\n }\n}\n:root[style] *:target,\n:root *:target,\n*/\n:root[style] *.r2-link-target:not(.r2-link-target-alt),\n:root *.r2-link-target:not(.r2-link-target-alt)\n{\n outline-color: gray !important;\n outline-style: solid !important;\n outline-width: 1px !important;\n outline-offset: 2px !important;\n\n /*\n animation-name: readium2ElectronAnimation_TARGET;\n animation-duration: 3s;\n animation-delay: 1s;\n animation-fill-mode: forwards;\n animation-timing-function: linear;\n */\n}\n:root[style] *.r2-link-target.r2-link-target-alt,\n:root *.r2-link-target.r2-link-target-alt\n{\n outline-color: gray !important;\n outline-style: dotted !important;\n outline-width: 1px !important;\n outline-offset: 2px !important;\n\n /*\n animation-name: readium2ElectronAnimation_TARGET;\n animation-duration: 3s;\n animation-delay: 1s;\n animation-fill-mode: forwards;\n animation-timing-function: linear;\n */\n}\n/*\n:root[style] *.r2-no-target-outline:target,\n:root *.r2-no-target-outline:target,\n*/\n:root[style] *.r2-no-target-outline.r2-link-target,\n:root *.r2-no-target-outline.r2-link-target {\n outline: inherit !important;\n}\n"; export declare const selectionCssStyles = "\n\n:root[style].r2-hideCursor,\n:root.r2-hideCursor,\n:root[style].r2-hideCursor *,\n:root.r2-hideCursor * {\n cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=), none !important;\n}\n\n.r2-zeroTransform {\n will-change: scroll-position;\n transform: translateX(0px);\n}\n/*\n:root[style] ::selection,\n:root ::selection {\nbackground: rgb(155, 179, 240) !important;\ncolor: black !important;\n}\n\n:root[style*=\"readium-night-on\"] ::selection {\nbackground: rgb(100, 122, 177) !important;\ncolor: white !important;\n}\n*/\n"; export declare const scrollBarCssStyles = "\n::-webkit-scrollbar-button {\nheight: 0px !important;\nwidth: 0px !important;\n}\n\n::-webkit-scrollbar-corner {\nbackground: transparent !important;\n}\n\n/*::-webkit-scrollbar-track-piece {\nbackground: red;\n} */\n\n::-webkit-scrollbar {\nwidth: 14px;\nheight: 14px;\n}\n\nhtml.r2-popup-dialog.r2-tts-isPlaying ::-webkit-scrollbar {\n display: none;\n /* visibility: hidden; */\n}\n\n::-webkit-scrollbar-thumb {\nbackground: #727272;\nbackground-clip: padding-box !important;\nborder: 3px solid transparent !important;\nborder-radius: 30px;\n}\n\n::-webkit-scrollbar-thumb:hover {\nbackground: #4d4d4d;\n}\n\n::-webkit-scrollbar-track {\nbox-shadow: inset 0 0 3px rgba(40, 40, 40, 0.2);\nbackground: #dddddd;\nbox-sizing: content-box;\n}\n\n::-webkit-scrollbar-track:horizontal {\nborder-top: 1px solid silver;\n}\n::-webkit-scrollbar-track:vertical {\nborder-left: 1px solid silver;\n}\n\n:root[style*=\"readium-night-on\"] ::-webkit-scrollbar-thumb {\nbackground: #a4a4a4;\nborder: 3px solid #545454;\n}\n\n:root[style*=\"readium-night-on\"] ::-webkit-scrollbar-thumb:hover {\nbackground: #dedede;\n}\n\n:root[style*=\"readium-night-on\"] ::-webkit-scrollbar-track {\nbackground: #545454;\n}\n\n:root[style*=\"readium-night-on\"] ::-webkit-scrollbar-track:horizontal {\nborder-top: 1px solid black;\n}\n:root[style*=\"readium-night-on\"] ::-webkit-scrollbar-track:vertical {\nborder-left: 1px solid black;\n}"; export declare const readPosCssStylesAttr1 = "data-readium2-read-pos1"; export declare const readPosCssStylesAttr2 = "data-readium2-read-pos2"; export declare const readPosCssStylesAttr3 = "data-readium2-read-pos3"; export declare const readPosCssStylesAttr4 = "data-readium2-read-pos4"; export declare const readPosCssStyles = "\n:root[style*=\"readium-sepia-on\"] *[data-readium2-read-pos1],\n:root[style*=\"readium-night-on\"] *[data-readium2-read-pos1],\n:root[style] *[data-readium2-read-pos1],\n:root *[data-readium2-read-pos1] {\n color: black !important;\n background: magenta !important;\n\n outline-color: magenta !important;\n outline-style: solid !important;\n outline-width: 6px !important;\n outline-offset: 0px !important;\n}\n:root[style*=\"readium-sepia-on\"] *[data-readium2-read-pos2],\n:root[style*=\"readium-night-on\"] *[data-readium2-read-pos2],\n:root[style] *[data-readium2-read-pos2],\n:root *[data-readium2-read-pos2] {\n color: black !important;\n background: yellow !important;\n\n outline-color: yellow !important;\n outline-style: solid !important;\n outline-width: 4px !important;\n outline-offset: 0px !important;\n}\n:root[style*=\"readium-sepia-on\"] *[data-readium2-read-pos3],\n:root[style*=\"readium-night-on\"] *[data-readium2-read-pos3],\n:root[style] *[data-readium2-read-pos3],\n:root *[data-readium2-read-pos3] {\n color: black !important;\n background: green !important;\n\n outline-color: green !important;\n outline-style: solid !important;\n outline-width: 2px !important;\n outline-offset: 0px !important;\n}\n:root[style*=\"readium-sepia-on\"] *[data-readium2-read-pos4],\n:root[style*=\"readium-night-on\"] *[data-readium2-read-pos4],\n:root[style] *[data-readium2-read-pos4],\n:root *[data-readium2-read-pos4] {\n color: black !important;\n background: silver !important;\n\n outline-color: silver !important;\n outline-style: solid !important;\n outline-width: 1px !important;\n outline-offset: 0px !important;\n}"; export declare const AUDIO_BUFFER_CANVAS_ID = "r2-audio-buffer-canvas"; export declare const AUDIO_PROGRESS_CLASS = "r2-audio-progress"; export declare const AUDIO_ID = "r2-audio"; export declare const AUDIO_BODY_ID = "r2-audio-body"; export declare const AUDIO_SECTION_ID = "r2-audio-section"; export declare const AUDIO_CONTROLS_ID = "r2-audio-controls"; export declare const AUDIO_COVER_ID = "r2-audio-cover"; export declare const AUDIO_TITLE_ID = "r2-audio-title"; export declare const AUDIO_SLIDER_ID = "r2-audio-slider"; export declare const AUDIO_TIME_ID = "r2-audio-time"; export declare const AUDIO_PERCENT_ID = "r2-audio-percent"; export declare const AUDIO_RATE_ID = "r2-audio-rate"; export declare const AUDIO_PLAYPAUSE_ID = "r2-audio-playPause"; export declare const AUDIO_PREVIOUS_ID = "r2-audio-previous"; export declare const AUDIO_NEXT_ID = "r2-audio-next"; export declare const AUDIO_REWIND_ID = "r2-audio-rewind"; export declare const AUDIO_FORWARD_ID = "r2-audio-forward"; export declare const audioCssStyles = "\n\n#r2-audio-controls select#r2-audio-rate option {\n color: var(--RS__textColor) !important;\n background: var(--RS__backgroundColor) !important;\n}\n\n#r2-audio-body {\n padding: 0 !important;\n margin-top: 0 !important;\n margin-bottom: 0 !important;\n height: 100vh !important;\n display: flex !important;\n align-items: center;\n justify-content: center;\n user-select: none;\n}\n\n#r2-audio-section {\n margin: 0;\n padding: 0;\n min-width: 500px;\n}\n\n#r2-audio-title {\n margin-top: 1em;\n margin-bottom: 0;\n display: block;\n margin-left: auto;\n margin-right: auto;\n max-width: 800px;\n width: 80%;\n text-align: center;\n}\n\n#r2-audio-cover {\n display: block;\n margin-left: auto;\n margin-right: auto;\n max-width: 500px !important;\n max-height: 250px !important;\n margin-top: 0.4em;\n margin-bottom: 0.6em;\n cursor: pointer;\n}\n\n:root.r2-audio-progress #r2-audio-cover {\n cursor: wait;\n}\n\n#r2-audio-buffer-canvas {\n width: 500px;\n height: 20px;\n\n margin-left: auto;\n margin-right: auto;\n\n margin-bottom: 1em;\n\n display: block;\n}\n\n#r2-audio {\n display: block;\n margin-left: auto;\n margin-right: auto;\n max-width: 800px;\n height: 2.5em;\n width: 80%;\n}\n\n#r2-audio-controls {\n display: block;\n padding: 0;\n margin: 0;\n margin-left: auto;\n margin-right: auto;\n\n max-width: 500px;\n min-width: 500px;\n width: 500px;\n height: auto;\n\n display: grid;\n grid-column-gap: 0px;\n grid-row-gap: 0px;\n\n grid-template-columns: auto 3em 7em 3em auto;\n grid-template-rows: auto 1.5em auto;\n}\n\n#r2-audio-controls button {\n border: 0 !important;\n background-color: transparent !important;\n background: transparent !important;\n text-align: center;\n padding: 0;\n margin: 0;\n display: block;\n cursor: pointer;\n position: relative;\n}\n\n#r2-audio-controls #r2-audio-playPause {\n grid-column-start: 3;\n grid-column-end: 4;\n grid-row-start: 1;\n grid-row-end: 2;\n\n box-sizing: border-box;\n\n justify-self: center;\n\n width: 60px;\n height: 60px;\n}\n\n:root #r2-audio-controls svg,\n:root[style] #r2-audio-controls svg {\n fill: #202020;\n}\n:root[style*=\"readium-night-on\"] #r2-audio-controls svg {\n fill: #999999;\n}\n\n:root:not(.r2-audio-progress) #r2-audio-controls #r2-audio-playPause #r2-audio-playPause_0,\n:root[style]:not(.r2-audio-progress) #r2-audio-controls #r2-audio-playPause #r2-audio-playPause_0 {\n\n display: none;\n}\n\n:root:not(.r2-audio-progress) #r2-audio-controls #r2-audio-playPause.pause #r2-audio-playPause_1 {\n display: none;\n}\n\n:root:not(.r2-audio-progress) #r2-audio-controls #r2-audio-playPause.pause #r2-audio-playPause_0 {\n display: block;\n}\n\n:root.r2-audio-progress #r2-audio-controls #r2-audio-playPause svg {\n display: none;\n}\n:root.r2-audio-progress #r2-audio-controls #r2-audio-playPause {\n cursor: wait;\n}\n:root[style].r2-audio-progress #r2-audio-controls #r2-audio-playPause:after {\n content: \"\";\n border-radius: 50%;\n\n position: absolute;\n width: 60px;\n height: 60px;\n left: 0px;\n top: 0px;\n\n transform: translateZ(0);\n animation: readium2ElectronAnimation_audioLoad-spin 1.1s infinite linear;\n\n border-top: 3px solid #999999;\n border-right: 3px solid #999999;\n border-bottom: 3px solid #999999;\n border-left: 3px solid #333333;\n}\n:root[style*=\"readium-night-on\"].r2-audio-progress #r2-audio-controls #r2-audio-playPause:after {\n\n border-top: 3px solid #202020;\n border-right: 3px solid #202020;\n border-bottom: 3px solid #202020;\n border-left: 3px solid white;\n}\n@keyframes readium2ElectronAnimation_audioLoad-spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n\n#r2-audio-controls #r2-audio-next,\n#r2-audio-controls #r2-audio-previous,\n#r2-audio-controls #r2-audio-rewind,\n#r2-audio-controls #r2-audio-forward {\n width: 48px;\n height: 48px;\n position: relative;\n align-self: center;\n}\n\n#r2-audio-controls #r2-audio-previous {\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 1;\n grid-row-end: 2;\n\n justify-self: left;\n}\n\n#r2-audio-controls #r2-audio-next {\n grid-column-start: 5;\n grid-column-end: 6;\n grid-row-start: 1;\n grid-row-end: 2;\n\n justify-self: right;\n}\n#r2-audio-controls #r2-audio-rewind {\n grid-column-start: 2;\n grid-column-end: 3;\n grid-row-start: 1;\n grid-row-end: 2;\n\n justify-self: right;\n}\n#r2-audio-controls #r2-audio-forward {\n grid-column-start: 4;\n grid-column-end: 5;\n grid-row-start: 1;\n grid-row-end: 2;\n\n justify-self: left;\n}\n:root.r2-audio-progress #r2-audio-forward,\n:root.r2-audio-progress #r2-audio-rewind {\n display: none;\n}\n\n#r2-audio-percent, #r2-audio-time, #r2-audio-rate {\n font-size: 0.9em !important;\n font-family: sans-serif !important;\n}\n#r2-audio-percent, #r2-audio-time {\n margin-top: -0.5em;\n}\n#r2-audio-rate {\n grid-column-start: 3;\n grid-column-end: 4;\n grid-row-start: 3;\n grid-row-end: 4;\n\n font-size: 0.8em !important;\n width: 4em;\n\n justify-self: center;\n\n text-align: center !important;\n\n margin-top: -0.2em;\n\n -webkit-appearance: none;\n border: 1px solid #aaa;\n border-radius: .4em;\n box-sizing: border-box;\n padding: .15em .15em .15em .3em;\n background-color: transparent;\n\n background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23aaa%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');\n background-repeat: no-repeat, repeat;\n background-position: right .3em top 50%, 0 0;\n background-size: .7em auto, 100%;\n}\n#r2-audio-time {\n grid-column-start: 1;\n grid-column-end: 2;\n grid-row-start: 3;\n grid-row-end: 4;\n\n text-align: left !important;\n}\n#r2-audio-percent {\n grid-column-start: 5;\n grid-column-end: 6;\n grid-row-start: 3;\n grid-row-end: 4;\n\n text-align: right !important;\n}\n\n:root.r2-audio-progress #r2-audio-rate,\n:root.r2-audio-progress #r2-audio-percent,\n:root.r2-audio-progress #r2-audio-time {\n visibility: hidden;\n}\n\n:root[style] #r2-audio-slider,\n:root #r2-audio-slider {\npadding: 0;\nmargin: 0;\n\ndisplay: block;\n\ngrid-column-start: 1;\ngrid-column-end: 6;\ngrid-row-start: 2;\ngrid-row-end: 3;\n\ncursor: pointer;\n\nbackground: transparent !important;\n\nbackground-clip: padding-box;\nborder-radius: 2px;\noverflow: hidden;\n\nposition: relative;\n\n-webkit-appearance: none;\n\n--audiopercent: 50%;\n--range-color-left: #545454;\n--range-color-right: #999999;\n--track-background: linear-gradient(to right, var(--range-color-left) var(--audiopercent), var(--range-color-right) 0) no-repeat 0 100% / 100% 100%;\n}\n:root[style*=\"readium-night-on\"] #r2-audio-slider {\n --range-color-right: #545454;\n --range-color-left: #999999;\n}\n\n:root[style].r2-audio-progress #r2-audio-slider,\n:root.r2-audio-progress #r2-audio-slider {\n\ncursor: wait;\n}\n\n:root[style].r2-audio-progress #r2-audio-slider:before,\n:root.r2-audio-progress #r2-audio-slider:before {\n content: '';\n position: absolute;\n background-color: #999999;\n left: 0;\n top: 1em;\n height: 0.4em;\n transform: translateZ(0);\n will-change: left, right;\n animation: readium2ElectronAnimation_audioLoad 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;\n}\n\n:root[style].r2-audio-progress #r2-audio-slider:after,\n:root.r2-audio-progress #r2-audio-slider:after {\n content: '';\n position: absolute;\n background-color: #999999;\n left: 0;\n top: 1em;\n height: 0.4em;\n transform: translateZ(0);\n will-change: left, right;\n animation: readium2ElectronAnimation_audioLoad-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;\n animation-delay: 1.15s;\n}\n\n:root[style*=\"readium-night-on\"].r2-audio-progress #r2-audio-slider:after {\n background: #545454;\n}\n\n@keyframes readium2ElectronAnimation_audioLoad {\n0% {\nleft: -35%;\nright: 100%; }\n60% {\nleft: 100%;\nright: -90%; }\n100% {\nleft: 100%;\nright: -90%; } }\n\n@keyframes readium2ElectronAnimation_audioLoad-short {\n0% {\nleft: -200%;\nright: 100%; }\n60% {\nleft: 107%;\nright: -8%; }\n100% {\nleft: 107%;\nright: -8%; } }\n\n:root #r2-audio-slider::-webkit-slider-runnable-track,\n:root[style] #r2-audio-slider::-webkit-slider-runnable-track {\n cursor: pointer;\n\n width: 100%;\n height: 0.5em;\n\n background: #999999;\n background: var(--track-background);\n\n padding: 0;\n margin: 0;\n\n border: none;\n border-radius: 0.2em;\n}\n:root[style*=\"readium-night-on\"] #r2-audio-slider::-webkit-slider-runnable-track {\n\n background: #545454;\n background: var(--track-background);\n}\n\n:root.r2-audio-progress #r2-audio-slider::-webkit-slider-runnable-track,\n:root[style].r2-audio-progress #r2-audio-slider::-webkit-slider-runnable-track {\n background: transparent !important;\n cursor: wait;\n}\n:root[style*=\"readium-night-on\"].r2-audio-progress #r2-audio-slider::-webkit-slider-runnable-track {\n background: transparent !important;\n}\n\n:root #r2-audio-slider::-webkit-slider-thumb,\n:root[style] #r2-audio-slider::-webkit-slider-thumb {\n -webkit-appearance: none;\n\n cursor: pointer;\n\n width: 0.5em;\n height: 0.7em;\n\n padding: 0;\n margin: 0;\n margin-top: -0.1em;\n\n border: none;\n border-radius: 0.2em;\n\n background: #333333;\n}\n:root[style*=\"readium-night-on\"] #r2-audio-slider::-webkit-slider-thumb {\n background: white;\n}\n\n:root.r2-audio-progress #r2-audio-slider::-webkit-slider-thumb,\n:root[style].r2-audio-progress #r2-audio-slider::-webkit-slider-thumb {\n background: transparent !important;\n cursor: wait;\n}\n:root[style*=\"readium-night-on\"].r2-audio-progress #r2-audio-slider::-webkit-slider-thumb {\n background: transparent !important;\n}\n";