@edrlab/thorium-web 1.0.8 → 1.1.0
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/README.md +2 -0
- package/dist/{StatefulReader-BuuUEuKC.d.mts → StatefulReader-BjH7bkU1.d.mts} +2 -26
- package/dist/{ThPreferencesAdapter-CbAb0Vth.d.mts → ThPreferencesAdapter-x_D4c7wI.d.mts} +5 -0
- package/dist/chunk-7CGMWOZN.mjs +20 -0
- package/dist/chunk-7CGMWOZN.mjs.map +1 -0
- package/dist/{chunk-TA2ZMJMK.mjs → chunk-D24O64OP.mjs} +375 -278
- package/dist/chunk-D24O64OP.mjs.map +1 -0
- package/dist/{chunk-4M7DDKAT.mjs → chunk-FG6BJGVE.mjs} +5 -25
- package/dist/chunk-FG6BJGVE.mjs.map +1 -0
- package/dist/{chunk-SQHOOSST.mjs → chunk-HE3WFPGE.mjs} +84 -85
- package/dist/chunk-HE3WFPGE.mjs.map +1 -0
- package/dist/chunk-KKJA56IZ.mjs +27 -0
- package/dist/chunk-KKJA56IZ.mjs.map +1 -0
- package/dist/{chunk-7PJ2GDZA.mjs → chunk-SPAC7T57.mjs} +36 -21
- package/dist/chunk-SPAC7T57.mjs.map +1 -0
- package/dist/components/Epub/index.css +1282 -0
- package/dist/components/Epub/index.css.map +1 -0
- package/dist/components/Epub/index.d.mts +3 -3
- package/dist/components/Epub/index.mjs +49 -45
- package/dist/components/Epub/index.mjs.map +1 -1
- package/dist/components/Misc/index.css +102 -0
- package/dist/components/Misc/index.css.map +1 -0
- package/dist/components/Misc/index.d.mts +28 -0
- package/dist/components/Misc/index.mjs +110 -0
- package/dist/components/Misc/index.mjs.map +1 -0
- package/dist/components/WebPub/index.css +1214 -0
- package/dist/components/WebPub/index.css.map +1 -0
- package/dist/components/WebPub/index.d.mts +5 -5
- package/dist/components/WebPub/index.mjs +33 -27
- package/dist/components/WebPub/index.mjs.map +1 -1
- package/dist/core/Components/index.mjs +0 -1
- package/dist/core/Helpers/index.d.mts +12 -2
- package/dist/core/Helpers/index.mjs +1 -2
- package/dist/core/Hooks/index.mjs +0 -1
- package/dist/i18n/index.mjs +5 -5
- package/dist/lib/index.d.mts +2 -1
- package/dist/lib/index.mjs +2 -3
- package/dist/locales/et/thorium-web.json +1 -0
- package/dist/locales/it/thorium-web.json +1 -0
- package/dist/locales/pl/thorium-web.json +26 -13
- package/dist/locales/sv/thorium-web.json +37 -37
- package/dist/next-lib/index.mjs +0 -2
- package/dist/next-lib/index.mjs.map +1 -1
- package/dist/preferences/index.d.mts +4 -3
- package/dist/preferences/index.mjs +3 -4
- package/dist/{usePreferences-iJ5426UA.d.mts → usePreferences-CRjFlZvF.d.mts} +1 -1
- package/package.json +44 -40
- package/dist/backLink.module-QFOMD4RA.module.css +0 -36
- package/dist/chunk-3QS3WKRC.mjs +0 -29
- package/dist/chunk-3QS3WKRC.mjs.map +0 -1
- package/dist/chunk-4M7DDKAT.mjs.map +0 -1
- package/dist/chunk-7PJ2GDZA.mjs.map +0 -1
- package/dist/chunk-SQHOOSST.mjs.map +0 -1
- package/dist/chunk-TA2ZMJMK.mjs.map +0 -1
- package/dist/chunk-TTGURRX3.mjs +0 -19
- package/dist/chunk-TTGURRX3.mjs.map +0 -1
- package/dist/docking.module-TDNYZX4H.module.css +0 -40
- package/dist/jumpToPosition.module-4C47UYPE.module.css +0 -41
- package/dist/overflowMenu.module-QL32ISXF.module.css +0 -68
- package/dist/publicationGrid.module-T6ISNRGM.module.css +0 -70
- package/dist/reader-NGCQJKLX.css +0 -261
- package/dist/readerArrowButton.module-EFLOIADG.module.css +0 -77
- package/dist/readerHeader.module-RNGQFLVS.module.css +0 -35
- package/dist/readerLoader.module-KDBPCQZJ.module.css +0 -40
- package/dist/readerPagination.module-DYBZAQ7H.module.css +0 -76
- package/dist/readerProgression.module-7PU7L74S.module.css +0 -5
- package/dist/readerSharedUI.module-Y2VDWFS5.module.css +0 -98
- package/dist/settings.module-H5MUDFJO.module.css +0 -437
- package/dist/sheets.module-LJOLY4MK.module.css +0 -195
- package/dist/toc.module-F47C5CDS.module.css +0 -153
package/dist/chunk-TTGURRX3.mjs
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
// src/core/Helpers/propsToCSSVars.ts
|
|
2
|
-
var propsToCSSVars = (props, prefix) => {
|
|
3
|
-
return Object.entries(props).reduce((acc, [key, value]) => {
|
|
4
|
-
const cssVar = prefix ? `--${prefix}-${key}` : `--${key}`;
|
|
5
|
-
if (typeof props[key] === "object" && props[key] !== null) {
|
|
6
|
-
Object.assign(acc, propsToCSSVars(props[key], `${key}`));
|
|
7
|
-
} else {
|
|
8
|
-
if (value) {
|
|
9
|
-
const cssValue = typeof value === "number" ? `${value}px` : value;
|
|
10
|
-
acc[cssVar] = cssValue;
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
return acc;
|
|
14
|
-
}, {});
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
export { propsToCSSVars };
|
|
18
|
-
//# sourceMappingURL=chunk-TTGURRX3.mjs.map
|
|
19
|
-
//# sourceMappingURL=chunk-TTGURRX3.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/core/Helpers/propsToCSSVars.ts"],"names":[],"mappings":";AAGO,IAAM,cAAA,GAAiB,CAAC,KAAA,EAA8B,MAAA,KAAoB;AAC/E,EAAA,OAAO,MAAA,CAAO,OAAA,CAAQ,KAAK,CAAA,CAClB,MAAA,CAAO,CAAC,GAAA,EAA6B,CAAC,GAAA,EAAK,KAAK,CAAA,KAAM;AACrD,IAAA,MAAM,MAAA,GAAS,SAAS,CAAA,EAAA,EAAK,MAAM,IAAI,GAAG,CAAA,CAAA,GAAK,KAAK,GAAG,CAAA,CAAA;AACvD,IAAA,IAAI,OAAO,MAAM,GAAG,CAAA,KAAM,YAAY,KAAA,CAAM,GAAG,MAAM,IAAA,EAAM;AACzD,MAAA,MAAA,CAAO,MAAA,CAAO,KAAK,cAAA,CAAe,KAAA,CAAM,GAAG,CAAA,EAAG,CAAA,EAAG,GAAG,CAAA,CAAE,CAAC,CAAA;AAAA,IACzD,CAAA,MAAO;AACL,MAAA,IAAI,KAAA,EAAO;AACT,QAAA,MAAM,WAAW,OAAO,KAAA,KAAU,QAAA,GAAW,CAAA,EAAG,KAAK,CAAA,EAAA,CAAA,GAAO,KAAA;AAC5D,QAAA,GAAA,CAAI,MAAM,CAAA,GAAI,QAAA;AAAA,MAChB;AAAA,IACF;AACA,IAAA,OAAO,GAAA;AAAA,EACT,CAAA,EAAG,EAAE,CAAA;AACf","file":"chunk-TTGURRX3.mjs","sourcesContent":["\"use client\";\n\n/** Converts Object properties to CSSProperties, recursively. If recursive, the prefix will be ignored for objects */\nexport const propsToCSSVars = (props: { [x: string]: any; }, prefix?: string) => {\n return Object.entries(props)\n .reduce((acc: { [key: string]: any }, [key, value]) => {\n const cssVar = prefix ? `--${prefix}-${key}` : `--${key}`;\n if (typeof props[key] === \"object\" && props[key] !== null) {\n Object.assign(acc, propsToCSSVars(props[key], `${key}`));\n } else {\n if (value) {\n const cssValue = typeof value === \"number\" ? `${value}px` : value;\n acc[cssVar] = cssValue;\n }\n } \n return acc;\n }, {})\n}"]}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
.dockerWrapper {
|
|
2
|
-
margin-inline-start: auto;
|
|
3
|
-
margin-inline-end: calc(var(--icon-size, 24px) * (1 / 4) * -1); /* Optical alingment */
|
|
4
|
-
display: flex;
|
|
5
|
-
gap: 2px;
|
|
6
|
-
padding-inline-start: var(--layout-spacing);
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.docker {
|
|
10
|
-
display: flex;
|
|
11
|
-
gap: 2px;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.dockResizeHandle {
|
|
15
|
-
position: relative;
|
|
16
|
-
width: 0;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.dockResizeHandle:focus-visible {
|
|
20
|
-
outline: 2px solid var(--theme-focus);
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.dockResizeHandleGrab {
|
|
24
|
-
position: absolute;
|
|
25
|
-
z-index: 1000;
|
|
26
|
-
top: 50%;
|
|
27
|
-
transform: translateY(-50%);
|
|
28
|
-
width: 5px;
|
|
29
|
-
height: 50px;
|
|
30
|
-
border-radius: 5px;
|
|
31
|
-
background-color: var(--theme-subdue);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.dockResizeHandleGrabLeft {
|
|
35
|
-
left: 0;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.dockResizeHandleGrabRight {
|
|
39
|
-
left: -5px;
|
|
40
|
-
}
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
.jumpToPositionForm {
|
|
2
|
-
display: flex;
|
|
3
|
-
gap: calc(var(--layout-spacing) / 2);
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
.jumpToPositionLabel {
|
|
7
|
-
margin-block: var(--layout-spacing);
|
|
8
|
-
display: block;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.jumpToPositionInput {
|
|
12
|
-
display: block;
|
|
13
|
-
font-weight: bold;
|
|
14
|
-
padding: calc(var(--icon-size, 24px) * (1/4)) calc(var(--layout-spacing) / 2);
|
|
15
|
-
border-radius: var(--layout-radius);
|
|
16
|
-
border: 2px solid var(--theme-subdue);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.jumpToPositionButton {
|
|
20
|
-
box-sizing: content-box;
|
|
21
|
-
border: 2px solid var(--theme-subdue);
|
|
22
|
-
padding: calc(var(--icon-size, 24px) * (1/4)) calc(var(--icon-size, 24px) * (1/2));
|
|
23
|
-
text-align: center;
|
|
24
|
-
border-radius: var(--layout-radius);
|
|
25
|
-
margin-inline-start: auto;
|
|
26
|
-
align-self: flex-end;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.jumpToPositionButton[data-hovered] {
|
|
30
|
-
background-color: var(--theme-hover);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.jumpToPositionInput[data-focus-visible],
|
|
34
|
-
.jumpToPositionButton[data-focus-visible] {
|
|
35
|
-
outline: 2px solid var(--theme-focus);
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.jumpToPositionNumberField[data-disabled],
|
|
39
|
-
.jumpToPositionButton[data-disabled] {
|
|
40
|
-
color: var(--theme-disable);
|
|
41
|
-
}
|
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
:global(.layered-ui.isImmersive:not(.isHovering)) .hintButton {
|
|
2
|
-
transform: translateY(calc(var(--icon-size, 24px) * 2.5));
|
|
3
|
-
transition-property: transform;
|
|
4
|
-
transition-duration: 200ms;
|
|
5
|
-
transition-timing-function: ease-in-out;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
:global(.layered-ui.isReflow.isScroll.isImmersive:not(.isHovering)) .hintButton {
|
|
9
|
-
outline: 1px solid var(--theme-subdue);
|
|
10
|
-
background-color: var(--theme-background);
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
.overflowPopover {
|
|
14
|
-
background-color: var(--theme-background);
|
|
15
|
-
color: var(--theme-text);
|
|
16
|
-
padding: calc(var(--layout-spacing) / 2);
|
|
17
|
-
border-radius: var(--layout-radius);
|
|
18
|
-
border: 1px solid var(--theme-subdue);
|
|
19
|
-
filter: drop-shadow(var(--theme-elevate));
|
|
20
|
-
box-sizing: border-box;
|
|
21
|
-
max-width: var(--constraints-popover, 500px);
|
|
22
|
-
width: max-content;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.overflowMenu {
|
|
26
|
-
outline: none;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.menuItem {
|
|
30
|
-
display: flex;
|
|
31
|
-
align-items: center;
|
|
32
|
-
gap: calc(var(--layout-spacing) / 2);
|
|
33
|
-
padding: calc(var(--layout-spacing) / 2);
|
|
34
|
-
border-radius: var(--layout-radius);
|
|
35
|
-
outline: none;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.menuItem[data-hovered] {
|
|
39
|
-
background-color: var(--theme-hover);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.menuItem[data-focus-visible] {
|
|
43
|
-
outline: 2px solid var(--theme-focus);
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
.menuItem[data-disabled] {
|
|
47
|
-
color: var(--theme-disable);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
.menuItem > svg {
|
|
51
|
-
width: calc(var(--icon-size, 24px) / 1.5);
|
|
52
|
-
height: calc(var(--icon-size, 24px) / 1.5);
|
|
53
|
-
fill: currentColor;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.menuItemLabel {
|
|
57
|
-
font-size: 1rem;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.menuItemKbdShortcut {
|
|
61
|
-
font-family: monospace;
|
|
62
|
-
font-weight: bold;
|
|
63
|
-
color: var(--theme-subdue);
|
|
64
|
-
padding: 5px;
|
|
65
|
-
margin-inline-start: auto;
|
|
66
|
-
border-radius: var(--layout-radius);
|
|
67
|
-
border: 1px solid var(--theme-subdue);
|
|
68
|
-
}
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
.publicationGrid {
|
|
2
|
-
--color-text: #333;
|
|
3
|
-
--color-text-secondary: #666;
|
|
4
|
-
--color-background: #fff;
|
|
5
|
-
--color-primary: #e0e0e0;
|
|
6
|
-
|
|
7
|
-
padding: 1rem;
|
|
8
|
-
width: 100%;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.publicationCard {
|
|
12
|
-
display: flex;
|
|
13
|
-
text-decoration: none;
|
|
14
|
-
color: inherit;
|
|
15
|
-
border: 1px solid var(--color-primary);
|
|
16
|
-
border-radius: 8px;
|
|
17
|
-
overflow: hidden;
|
|
18
|
-
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
19
|
-
background: white;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.publicationCard:hover {
|
|
23
|
-
transform: translateY(-2px);
|
|
24
|
-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.publicationCover {
|
|
28
|
-
width: 120px;
|
|
29
|
-
height: 180px;
|
|
30
|
-
flex-shrink: 0;
|
|
31
|
-
margin: 0;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.publicationImage {
|
|
35
|
-
width: 120px;
|
|
36
|
-
height: 180px;
|
|
37
|
-
object-fit: cover;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.publicationInfo {
|
|
41
|
-
padding: 1rem;
|
|
42
|
-
display: flex;
|
|
43
|
-
flex-direction: column;
|
|
44
|
-
flex-grow: 1;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.publicationTitle {
|
|
48
|
-
margin: 0 0 0.5rem;
|
|
49
|
-
font-weight: 600;
|
|
50
|
-
font-size: 1.25rem;
|
|
51
|
-
color: var(--color-text);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
.publicationAuthor {
|
|
55
|
-
margin: 0 0 0.75rem;
|
|
56
|
-
color: var(--color-text-secondary);
|
|
57
|
-
font-size: 1rem;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.publicationRendition {
|
|
61
|
-
background: var(--color-primary);
|
|
62
|
-
color: var(--color-text);
|
|
63
|
-
padding: 0.25rem 0.75rem;
|
|
64
|
-
margin: 0;
|
|
65
|
-
border-radius: 20px;
|
|
66
|
-
font-size: 0.875rem;
|
|
67
|
-
font-weight: 500;
|
|
68
|
-
margin-top: auto;
|
|
69
|
-
align-self: flex-start;
|
|
70
|
-
}
|
package/dist/reader-NGCQJKLX.css
DELETED
|
@@ -1,261 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
--theme-text: ;
|
|
3
|
-
--theme-background: ;
|
|
4
|
-
--theme-link: ;
|
|
5
|
-
--theme-visited: ;
|
|
6
|
-
--theme-subdue: ;
|
|
7
|
-
--theme-disable: ;
|
|
8
|
-
--theme-hover: ;
|
|
9
|
-
--theme-onHover: ;
|
|
10
|
-
--theme-select: ;
|
|
11
|
-
--theme-onSelect: ;
|
|
12
|
-
--theme-focus: ;
|
|
13
|
-
--theme-elevate: ;
|
|
14
|
-
--theme-immerse: ;
|
|
15
|
-
|
|
16
|
-
--layout-radius: ;
|
|
17
|
-
--layout-spacing: ;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
/* Reset */
|
|
21
|
-
|
|
22
|
-
button {
|
|
23
|
-
-webkit-appearance: none;
|
|
24
|
-
appearance: none;
|
|
25
|
-
border-radius: 0;
|
|
26
|
-
text-align: inherit;
|
|
27
|
-
background: none;
|
|
28
|
-
box-shadow: none;
|
|
29
|
-
padding: 0;
|
|
30
|
-
cursor: pointer;
|
|
31
|
-
border: none;
|
|
32
|
-
color: inherit;
|
|
33
|
-
font: inherit;
|
|
34
|
-
|
|
35
|
-
/* Focus no outline */
|
|
36
|
-
outline: none;
|
|
37
|
-
/* No tap highlight on mobile */
|
|
38
|
-
-webkit-tap-highlight-color: transparent;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
input {
|
|
42
|
-
font-size: 1rem;
|
|
43
|
-
border-radius: 0;
|
|
44
|
-
text-align: inherit;
|
|
45
|
-
background: none;
|
|
46
|
-
box-shadow: none;
|
|
47
|
-
padding: 0;
|
|
48
|
-
cursor: text;
|
|
49
|
-
border: none;
|
|
50
|
-
color: inherit;
|
|
51
|
-
font: inherit;
|
|
52
|
-
/* Focus no outline */
|
|
53
|
-
outline: none;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
::selection {
|
|
57
|
-
background-color: var(--theme-select);
|
|
58
|
-
color: var(--theme-onSelect);
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
/* Layout */
|
|
62
|
-
|
|
63
|
-
html,
|
|
64
|
-
body {
|
|
65
|
-
min-height: 100%;
|
|
66
|
-
margin: 0;
|
|
67
|
-
overflow: hidden;
|
|
68
|
-
touch-action: pan-x pan-y;
|
|
69
|
-
overscroll-behavior-x: none;
|
|
70
|
-
overscroll-behavior-y: none;
|
|
71
|
-
background-color: var(--theme-background);
|
|
72
|
-
color: var(--theme-text);
|
|
73
|
-
position: relative;
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
#wrapper {
|
|
77
|
-
height: 100%;
|
|
78
|
-
width: 100%;
|
|
79
|
-
margin: 0;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
#reader-main {
|
|
83
|
-
width: 100%;
|
|
84
|
-
height: 100%;
|
|
85
|
-
margin: 0;
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
#reader-shell {
|
|
89
|
-
width: 100%;
|
|
90
|
-
height: 100%;
|
|
91
|
-
margin: 0;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.left-dock {
|
|
95
|
-
height: 100vh;
|
|
96
|
-
height: 100dvh;
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
.right-dock {
|
|
100
|
-
height: 100vh;
|
|
101
|
-
height: 100dvh;
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
/* Top and bottom bars */
|
|
105
|
-
|
|
106
|
-
#bottom-bar,
|
|
107
|
-
#top-bar {
|
|
108
|
-
box-sizing: border-box;
|
|
109
|
-
gap: 2px;
|
|
110
|
-
touch-action: manipulation;
|
|
111
|
-
background-color: var(--theme-background);
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
#bottom-bar {
|
|
115
|
-
display: flex;
|
|
116
|
-
justify-content: center;
|
|
117
|
-
align-items: center;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
/* Stacked UI */
|
|
121
|
-
|
|
122
|
-
.stacked-ui {
|
|
123
|
-
position: relative;
|
|
124
|
-
display: flex;
|
|
125
|
-
flex-direction: column;
|
|
126
|
-
flex: 1 1 0;
|
|
127
|
-
height: 100vh;
|
|
128
|
-
height: 100dvh;
|
|
129
|
-
background-color: var(--theme-background);
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
.stacked-ui #top-bar,
|
|
133
|
-
.stacked-ui #bottom-bar {
|
|
134
|
-
/* Need both. Otherwise it will shrink/grow when switching from stacked/layered */
|
|
135
|
-
flex: 0 0 calc(var(--icon-size, 24px) * 2.5);
|
|
136
|
-
height: calc(var(--icon-size, 24px) * 2.5);
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
.stacked-ui.isImmersive:not(.isHovering) #top-bar,
|
|
140
|
-
.stacked-ui.isImmersive:not(.isHovering) #bottom-bar {
|
|
141
|
-
opacity: var(--theme-immerse);
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
/* Layered UI */
|
|
145
|
-
|
|
146
|
-
.layered-ui {
|
|
147
|
-
position: relative;
|
|
148
|
-
top: 0;
|
|
149
|
-
bottom: 0;
|
|
150
|
-
left: 0;
|
|
151
|
-
right: 0;
|
|
152
|
-
height: 100vh;
|
|
153
|
-
height: 100dvh;
|
|
154
|
-
background-color: var(--theme-background);
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
.layered-ui #top-bar,
|
|
158
|
-
.layered-ui #bottom-bar {
|
|
159
|
-
position: absolute;
|
|
160
|
-
left: 0;
|
|
161
|
-
right: 0;
|
|
162
|
-
height: calc(var(--icon-size, 24px) * 2.5);
|
|
163
|
-
z-index: 2;
|
|
164
|
-
box-shadow: var(--theme-elevate);
|
|
165
|
-
overflow: hidden;
|
|
166
|
-
transition-property: transform, box-shadow;
|
|
167
|
-
transition-duration: 200ms;
|
|
168
|
-
transition-timing-function: ease-in-out;
|
|
169
|
-
transform: translateY(0);
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
.layered-ui #top-bar {
|
|
173
|
-
top: 0;
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
.layered-ui #bottom-bar {
|
|
177
|
-
bottom: 0;
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
.layered-ui.isImmersive:not(.isHovering) #top-bar {
|
|
181
|
-
transform: translateY(calc(var(--icon-size, 24px) * -2.5));
|
|
182
|
-
box-shadow: none;
|
|
183
|
-
/* For overflow button to be visible due to transforms being applied */
|
|
184
|
-
overflow: unset;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
.layered-ui.isImmersive:not(.isHovering) #bottom-bar {
|
|
188
|
-
transform: translateY(calc(var(--icon-size, 24px) * 2.5));
|
|
189
|
-
box-shadow: none;
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
.layered-ui .bar-overlay {
|
|
193
|
-
position: absolute;
|
|
194
|
-
left: 0;
|
|
195
|
-
right: 0;
|
|
196
|
-
height: calc(var(--icon-size, 24px) * 2.5);
|
|
197
|
-
pointer-events: auto;
|
|
198
|
-
opacity: 0;
|
|
199
|
-
z-index: 1000;
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
.layered-ui #reader-header-overlay {
|
|
203
|
-
top: 0;
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
.layered-ui #reader-footer-overlay {
|
|
207
|
-
bottom: 0;
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
/* iFrame + its container */
|
|
211
|
-
|
|
212
|
-
#container {
|
|
213
|
-
contain: content;
|
|
214
|
-
width: 100%;
|
|
215
|
-
height: 100%;
|
|
216
|
-
margin: 0 auto;
|
|
217
|
-
}
|
|
218
|
-
|
|
219
|
-
.readium-navigator-iframe {
|
|
220
|
-
width: 100%;
|
|
221
|
-
height: 100%;
|
|
222
|
-
border-width: 0;
|
|
223
|
-
}
|
|
224
|
-
|
|
225
|
-
/* FXL: Loading spinner for resources */
|
|
226
|
-
|
|
227
|
-
@keyframes loading {
|
|
228
|
-
0% {
|
|
229
|
-
transform: rotate(0deg);
|
|
230
|
-
}
|
|
231
|
-
100% {
|
|
232
|
-
transform: rotate(360deg);
|
|
233
|
-
}
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
div:has(> .readium-navigator-iframe.blank)::after {
|
|
237
|
-
content: "";
|
|
238
|
-
position: absolute;
|
|
239
|
-
top: 50%;
|
|
240
|
-
left: 50%;
|
|
241
|
-
margin-top: -30px;
|
|
242
|
-
margin-left: -30px;
|
|
243
|
-
width: 50px;
|
|
244
|
-
height: 50px;
|
|
245
|
-
border-radius: 50px;
|
|
246
|
-
border: 5px solid grey;
|
|
247
|
-
border-top-color: black;
|
|
248
|
-
animation: loading 2s linear infinite;
|
|
249
|
-
}
|
|
250
|
-
|
|
251
|
-
/* Utils */
|
|
252
|
-
|
|
253
|
-
.sr-only {
|
|
254
|
-
clip: rect(0 0 0 0);
|
|
255
|
-
clip-path: inset(50%);
|
|
256
|
-
height: 1px;
|
|
257
|
-
overflow: hidden;
|
|
258
|
-
position: absolute;
|
|
259
|
-
white-space: nowrap;
|
|
260
|
-
width: 1px;
|
|
261
|
-
}
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
.container {
|
|
2
|
-
position: absolute;
|
|
3
|
-
z-index: 2;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
#left {
|
|
7
|
-
top: 50vh;
|
|
8
|
-
top: 50dvh;
|
|
9
|
-
transform: translateY(-50%);
|
|
10
|
-
left: 0;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
#left button {
|
|
14
|
-
margin-left: var(--arrow-offset, 0);
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
#right {
|
|
18
|
-
top: 50vh;
|
|
19
|
-
top: 50dvh;
|
|
20
|
-
transform: translateY(-50%);
|
|
21
|
-
right: 0;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
#right button {
|
|
25
|
-
margin-right: var(--arrow-offset, 0);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.container button {
|
|
29
|
-
width: var(--arrow-size, 40px);
|
|
30
|
-
/* height: var(--arrow-size, 40px); */
|
|
31
|
-
height: 40vh;
|
|
32
|
-
height: 40dvh;
|
|
33
|
-
border-radius: var(--layout-radius);
|
|
34
|
-
pointer-events: auto;
|
|
35
|
-
box-sizing: border-box;
|
|
36
|
-
padding: 5px;
|
|
37
|
-
|
|
38
|
-
background-color: var(--theme-background);
|
|
39
|
-
border: 1px solid var(--theme-text);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.container .viewportLarge {
|
|
43
|
-
background-color: transparent;
|
|
44
|
-
border: none;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.container button:disabled {
|
|
48
|
-
pointer-events: none;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.container .visuallyHidden {
|
|
52
|
-
opacity: 0;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.container button[data-focused] {
|
|
56
|
-
outline: 2px solid var(--theme-focus);
|
|
57
|
-
opacity: 1;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.container button[data-disabled] {
|
|
61
|
-
opacity: 0;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
/* Exclude taps as they will eventually apply hover state */
|
|
65
|
-
@media (hover: hover) and (pointer: fine) {
|
|
66
|
-
.container button:not(:disabled):hover {
|
|
67
|
-
opacity: 1;
|
|
68
|
-
transition: all 200ms;
|
|
69
|
-
}
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.container button svg {
|
|
73
|
-
fill: var(--theme-text);
|
|
74
|
-
stroke: var(--theme-text);
|
|
75
|
-
width: 100%;
|
|
76
|
-
height: 100%;
|
|
77
|
-
}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
.header {
|
|
2
|
-
box-sizing: border-box;
|
|
3
|
-
display: grid;
|
|
4
|
-
grid-template-areas: "header-start header-center header-end";
|
|
5
|
-
grid-template-columns: 1fr 3fr 1fr;
|
|
6
|
-
padding: 0.25rem 0.5rem 0;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.backLinkWrapper {
|
|
10
|
-
grid-area: header-start;
|
|
11
|
-
justify-self: start;
|
|
12
|
-
align-self: center;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.header h1 {
|
|
16
|
-
font-size: 1rem;
|
|
17
|
-
color: var(--theme-text);
|
|
18
|
-
font-weight: normal;
|
|
19
|
-
grid-area: header-center;
|
|
20
|
-
justify-self: center;
|
|
21
|
-
align-self: center;
|
|
22
|
-
max-width: 100%;
|
|
23
|
-
white-space: nowrap;
|
|
24
|
-
overflow: hidden;
|
|
25
|
-
text-overflow: ellipsis;
|
|
26
|
-
transition: opacity 200ms ease-in-out;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.actionsWrapper {
|
|
30
|
-
grid-area: header-end;
|
|
31
|
-
justify-self: end;
|
|
32
|
-
display: flex;
|
|
33
|
-
align-items: center;
|
|
34
|
-
gap: 2px;
|
|
35
|
-
}
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
.readerLoaderWrapper {
|
|
2
|
-
width: 100%;
|
|
3
|
-
height: 100%;
|
|
4
|
-
}
|
|
5
|
-
|
|
6
|
-
.readerLoader {
|
|
7
|
-
display: flex;
|
|
8
|
-
justify-content: center;
|
|
9
|
-
align-items: center;
|
|
10
|
-
width: 100%;
|
|
11
|
-
height: 100%;
|
|
12
|
-
color: var(--theme-text);
|
|
13
|
-
background-color: var(--theme-background);
|
|
14
|
-
font-weight: bold;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.readerLoader::after {
|
|
18
|
-
content: "...";
|
|
19
|
-
overflow: hidden;
|
|
20
|
-
display: inline-block;
|
|
21
|
-
vertical-align: bottom;
|
|
22
|
-
animation: ellipsis-dot 1s infinite 300ms;
|
|
23
|
-
animation-fill-mode: forwards;
|
|
24
|
-
width: 3ch;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
@keyframes ellipsis-dot {
|
|
28
|
-
25% {
|
|
29
|
-
content: "";
|
|
30
|
-
}
|
|
31
|
-
50% {
|
|
32
|
-
content: ".";
|
|
33
|
-
}
|
|
34
|
-
75% {
|
|
35
|
-
content: "..";
|
|
36
|
-
}
|
|
37
|
-
100% {
|
|
38
|
-
content: "...";
|
|
39
|
-
}
|
|
40
|
-
}
|