diff options
Diffstat (limited to 'src/client/views/nodes/PDFBox.scss')
| -rw-r--r-- | src/client/views/nodes/PDFBox.scss | 340 |
1 files changed, 242 insertions, 98 deletions
diff --git a/src/client/views/nodes/PDFBox.scss b/src/client/views/nodes/PDFBox.scss index 3e09fe519..974ddecdf 100644 --- a/src/client/views/nodes/PDFBox.scss +++ b/src/client/views/nodes/PDFBox.scss @@ -5,12 +5,13 @@ height: 100%; width: 100%; overflow: hidden; - cursor:auto; + cursor: auto; transform-origin: top left; z-index: 0; + .pdfBox-ui { position: absolute; - width: 100%; + width: 100%; height: 100%; z-index: 1; pointer-events: none; @@ -22,7 +23,7 @@ position: absolute; left: 5px; top: 5px; - .pdfBox-overlayButton-fwd, + .pdfBox-overlayButton-fwd, .pdfBox-overlayButton-back { background: #121721; height: 25px; @@ -46,7 +47,7 @@ padding: 0; position: absolute; pointer-events: all; - + .pdfBox-overlayButton-arrow { width: 0; height: 0; @@ -66,11 +67,11 @@ justify-content: center; border-radius: 3px; pointer-events: all; - } + } } - .pdfBox-nextIcon, - .pdfBox-prevIcon { + .pdfBox-nextIcon, + .pdfBox-prevIcon { background: #121721; height: 20px; width: 25px; @@ -81,96 +82,97 @@ border-radius: 3px; pointer-events: all; padding: 0px; - } - - .pdfBox-overlayButton:hover { - background: none; - } - + } - .pdfBox-settingsCont { - position: absolute; - right: 0; - top: 3; - pointer-events: all; - - .pdfBox-settingsButton { - border-bottom-left-radius: 50%; - display: flex; - justify-content: space-evenly; - align-items: center; - height: 20px; - background: none; - padding: 0; - - .pdfBox-settingsButton-arrow { - width: 0; - height: 0; - border-top: 10px solid transparent; - border-bottom: 10px solid transparent; - border-right: 15px solid #121721; - transition: all 0.5s; - } - - .pdfBox-settingsButton-iconCont { - background: #121721; - height: 20px; - width: 25px; - display: flex; - justify-content: center; - align-items: center; - margin-left: -2px; - border-radius: 3px; - } - } - - .pdfBox-settingsButton:hover { - background: none; - } - - .pdfBox-settingsFlyout { - position: absolute; - background: #323232; - box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); - right: 20px; - border-radius: 7px; - padding: 20px; - display: flex; - flex-direction: column; - font-size: 14px; - transition: all 0.5s; - - .pdfBox-settingsFlyout-title { - color: white; - } - - .pdfBox-settingsFlyout-kvpInput { - margin-top: 20px; - display: grid; - grid-template-columns: 47.5% 5% 47.5%; - } - } - } - - .pdfBox-overlayCont { - position: absolute; - width: calc(100% - 40px); - height: 20px; - background: #121721; - bottom: 0; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - transition: left .5s; - pointer-events: all; - - .pdfBox-searchBar { - width: 70%; - font-size: 14px; - } - } + .pdfBox-overlayButton:hover { + background: none; + } + + + .pdfBox-settingsCont { + position: absolute; + right: 0; + top: 3; + pointer-events: all; + + .pdfBox-settingsButton { + border-bottom-left-radius: 50%; + display: flex; + justify-content: space-evenly; + align-items: center; + height: 20px; + background: none; + padding: 0; + + .pdfBox-settingsButton-arrow { + width: 0; + height: 0; + border-top: 10px solid transparent; + border-bottom: 10px solid transparent; + border-right: 15px solid #121721; + transition: all 0.5s; + } + + .pdfBox-settingsButton-iconCont { + background: #121721; + height: 20px; + width: 25px; + display: flex; + justify-content: center; + align-items: center; + margin-left: -2px; + border-radius: 3px; + } + } + + .pdfBox-settingsButton:hover { + background: none; + } + + .pdfBox-settingsFlyout { + position: absolute; + background: #323232; + box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); + right: 20px; + border-radius: 7px; + padding: 20px; + display: flex; + flex-direction: column; + font-size: 14px; + transition: all 0.5s; + + .pdfBox-settingsFlyout-title { + color: white; + } + + .pdfBox-settingsFlyout-kvpInput { + margin-top: 20px; + display: grid; + grid-template-columns: 47.5% 5% 47.5%; + } + } + } + + .pdfBox-overlayCont { + position: absolute; + width: calc(100% - 40px); + height: 20px; + background: #121721; + bottom: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + transition: left .5s; + pointer-events: all; + + .pdfBox-searchBar { + width: 70%; + font-size: 14px; + } + } } + .pdfBox-title-outer { width: 150%; height: 100%; @@ -179,9 +181,9 @@ z-index: 0; background: lightslategray; transform-origin: top left; - + .pdfBox-title { - color:lightgray; + color: lightgray; margin-top: auto; margin-bottom: auto; transform-origin: 42% 15%; @@ -210,6 +212,7 @@ .pdfBox-interactive { pointer-events: all; + .pdfViewer-text { .textLayer { span { @@ -217,4 +220,145 @@ } } } -}
\ No newline at end of file +} + +@media only screen and (max-device-width: 480px) { + + .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton, + .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton { + border-bottom-left-radius: 50%; + display: flex; + justify-content: space-evenly; + align-items: center; + height: 60px; + background: none; + padding: 0; + } + + .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton .pdfBox-settingsButton-iconCont, + .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton .pdfBox-settingsButton-iconCont { + background: #121721; + height: 60px; + width: 75px; + font-size: 30px; + display: flex; + justify-content: center; + align-items: center; + margin-left: -2px; + border-radius: 3px; + } + + .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsFlyout, + .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsFlyout { + position: absolute; + background: #323232; + box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25); + right: 20px; + border-radius: 7px; + padding: 20px; + display: flex; + flex-direction: column; + font-size: 30px; + transition: all 0.5s; + } + + .pdfBox .pdfBox-ui .pdfBox-settingsCont, + .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont { + position: absolute; + right: 0; + top: 3; + pointer-events: all; + } + + .pdfBox .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton .pdfBox-settingsButton-arrow, + .pdfBox-interactive .pdfBox-ui .pdfBox-settingsCont .pdfBox-settingsButton .pdfBox-settingsButton-arrow { + width: 0; + height: 60; + border-top: 30px solid transparent; + border-bottom: 30px solid transparent; + border-right: 30px solid #121721; + transition: all 0.5s; + } + + .pdfBox .pdfBox-ui .pdfBox-overlayButton .pdfBox-overlayButton-iconCont, + .pdfBox-interactive .pdfBox-ui .pdfBox-overlayButton .pdfBox-overlayButton-iconCont { + background: #121721; + height: 60px; + width: 75px; + display: flex; + font-size: 30; + position: relative; + align-items: center; + justify-content: center; + border-radius: 3px; + pointer-events: all; + } + + .pdfBox .pdfBox-ui .pdfBox-overlayButton .pdfBox-overlayButton-arrow, + .pdfBox-interactive .pdfBox-ui .pdfBox-overlayButton .pdfBox-overlayButton-arrow { + width: 0; + height: 0; + border-top: 30px solid transparent; + border-bottom: 30px solid transparent; + border-right: 30px solid #121721; + transition: all 0.5s; + } + + .pdfBox .pdfBox-ui .pdfBox-overlayCont, + .pdfBox-interactive .pdfBox-ui .pdfBox-overlayCont { + position: absolute; + width: calc(100% - 40px); + height: 60px; + background: #121721; + bottom: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + transition: left .5s; + pointer-events: all; + } + + .pdfBox .pdfBox-ui .pdfBox-overlayButton, + .pdfBox-interactive .pdfBox-ui .pdfBox-overlayButton { + border-bottom-left-radius: 50%; + display: flex; + justify-content: space-evenly; + align-items: center; + height: 60px; + background: none; + padding: 0; + position: absolute; + pointer-events: all; + } + + .pdfBox .pdfBox-ui .pdfBox-overlayCont .pdfBox-searchBar, + .pdfBox-interactive .pdfBox-ui .pdfBox-overlayCont .pdfBox-searchBar { + width: 70%; + font-size: 40px; + } + + button.pdfBox-search { + font-size: 30px; + width: 50px; + height: 50px; + } + + .pdfBox .pdfBox-ui .pdfBox-nextIcon, + .pdfBox .pdfBox-ui .pdfBox-prevIcon, + .pdfBox-interactive .pdfBox-ui .pdfBox-nextIcon, + .pdfBox-interactive .pdfBox-ui .pdfBox-prevIcon { + background: #121721; + height: 50px; + width: 50px; + font-size: 30px; + display: flex; + position: relative; + align-items: center; + justify-content: center; + border-radius: 3px; + pointer-events: all; + padding: 0px; + } + +} |
