From 2908f1381dc7307ff3568cbbcfdbe17674284f9a Mon Sep 17 00:00:00 2001 From: Beatrycze Volk Date: Wed, 1 Feb 2023 12:03:50 +0100 Subject: [PATCH] Update css and template of 3DView plugin --- .../Plugins/Kitodo/Templates/View3D/Main.html | 9 +- Resources/Public/Css/3DViewer/main.css | 232 ++++++++++++++---- 2 files changed, 185 insertions(+), 56 deletions(-) diff --git a/Resources/Private/Plugins/Kitodo/Templates/View3D/Main.html b/Resources/Private/Plugins/Kitodo/Templates/View3D/Main.html index 00d7a7486..e7e6fff3a 100644 --- a/Resources/Private/Plugins/Kitodo/Templates/View3D/Main.html +++ b/Resources/Private/Plugins/Kitodo/Templates/View3D/Main.html @@ -13,10 +13,11 @@ xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true"> -

+

+ - - - + + + diff --git a/Resources/Public/Css/3DViewer/main.css b/Resources/Public/Css/3DViewer/main.css index 49bd2a520..aee0b1255 100644 --- a/Resources/Public/Css/3DViewer/main.css +++ b/Resources/Public/Css/3DViewer/main.css @@ -1,100 +1,228 @@ .tx-dlf-view-3d { - width: 100% !important; - height: 100% !important; - background-color: #a0a0a0; + width: 100% !important; + height: 100% !important; + background-color: #a0a0a0; } #cboxLoadedContent.iipmooviewer { - position: absolute; - overflow: hidden !important; + position: absolute; + overflow: hidden !important; } #cboxLoadedContent.iipmooviewer > .cboxPhoto { - visibility: hidden; + visibility: hidden; } .iipmooviewer .navcontainer .navbuttons { - z-index: 100; + z-index: 100; } .iipmooviewer .canvas { - width: 100% !important; - height: 100% !important; + width: 100% !important; + height: 100% !important; } a.colorbox { - position: relative; - display: block; + position: relative; + display: block; } a.wisski-inline-iip > div#wisski-iip-cont { - position: relative; - display: block; + position: relative; + display: block; } a.wisski-inline-iip > div#wisski-iip-cont > img { - visibility: hidden; + visibility: hidden; } canvas { - width: 100% !important; - height: 100% !important; - display: block; + display: block; + z-index: 0; + position: absolute; +} + +#guiContainer { + z-index: 10; } .toastify { - padding: 12px 20px; - color: #ffffff; - display: inline-block; - box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3); - background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5); - background: linear-gradient(135deg, #73a5ff, #5477f5); - position: fixed; - bottom: -150px; - right: 15px; - opacity: 0; - transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); - border-radius: 2px; - cursor: pointer; - z-index: 10; -} - -.toastify.on { opacity: 1; } + padding: 12px 20px; + color: #ffffff; + display: inline-block; + box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(77, 96, 232, 0.3); + background: -webkit-linear-gradient(315deg, #73a5ff, #5477f5); + background: linear-gradient(135deg, #73a5ff, #5477f5); + position: fixed; + right: 15px; + opacity: 0; + transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); + border-radius: 2px; + cursor: pointer; + z-index: 10; +} + +.toastify.on { + opacity: 1; +} .toast-close { - border: none; - background: none; - padding-left: 8px; + border: none; + background: none; + padding-left: 8px; } .hierarchy { - max-height: 500px; - overflow-x: hidden; - overflow-y: scroll; + max-height: 500px; + overflow-x: hidden; + overflow-y: scroll; } .hierarchy::-webkit-scrollbar-track { - -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3); - box-shadow: inset 0 0 5px rgba(0,0,0,.3); - border-radius: 6px; - background-color: #F5F5F5; + -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3); + box-shadow: inset 0 0 5px rgba(0,0,0,.3); + border-radius: 6px; + background-color: #F5F5F5; } .hierarchy::-webkit-scrollbar { - width: 6px; - background-color: #F5F5F5; + width: 6px; + background-color: #F5F5F5; } .hierarchy::-webkit-scrollbar-thumb { - border-radius: 6px; - -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.3); - box-shadow: inset 0 0 5px rgba(0,0,0,.3); - background-color: #555; + border-radius: 6px; + -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,.3); + box-shadow: inset 0 0 5px rgba(0,0,0,.3); + background-color: #555; } .closed { - overflow: hidden; -} \ No newline at end of file + overflow: hidden; +} + +#TextCanvas { + position: absolute; + z-index: 8; + pointer-events: none; + --font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; + --font-family-mono: Menlo,Monaco,Consolas,"Droid Sans Mono",monospace; + color: #000000; + font-family: var(--font-family); + font-size: 14px; + font-style: normal; + font-weight: 350; + line-height: 21px; + padding: 10px 0 0 15px; + max-width: 70%; + width: 70%; +} + +#metadata-collapse { + width: 45%; + pointer-events: auto; + font-weight: 500; + cursor: pointer; + margin-bottom: 5px; +} + +#metadata-collapse:hover { + font-weight: 600; +} + +#metadata-collapse:after { + content: "\21B4"; +} + +#metadata-collapse.metadata-collapsed:after { + content: "\21B5"; +} + +#metadata-container { + width: 100%; + position: absolute; + text-align: left; +} + +#metadata-content { + display: none; + overflow: hidden; + margin-top: -100%; + transition: all 2s; +} + +#metadata-content.expanded { + margin-top: 0; + display: contents; + overflow: visible; +} + +@keyframes zoom { + from {transform:scale(0)} + to {transform:scale(1)} +} + +#downloadModel { + z-index: 1; + position: relative; + right: -74%; + top: 5px; + width: 25px; + height: 25px; + background-size: 25px; + cursor: pointer; +} + +#viewEntity { + z-index: 1; + position: relative; + right: -77%; + top: 10px; + width: 22px; + height: 22px; + background-size: 22px; + cursor: pointer; +} + +#fullscreenMode { + z-index: 1; + position: absolute; + right: 1%; + bottom: 1%; + width: 20px; + height: 20px; + background-size: 25px; + cursor: pointer; + margin-bottom: 25px; +} + +.field--type-image { + width: 100%; + height: 100%; + transition: all 500ms linear; + box-sizing: border-box; + display: inline-block; + margin: 5em 0 5em 0; +} + +.field--type-image:hover { + transition: all 500ms linear; + width: 175%; + height: 175%; + box-sizing: border-box; + display: inline-block; + z-index: 999; + margin: -1em 0 -1em 0; +} + +.widget>select { + color: #000; +} + +.metadataSeparator { + width: 100px; + margin: 5px 0px; +}