Merge pull request #382 from markusweigelt/adjust-viewer-controls

[IMPROVEMENT] Document functions and 3D viewer

Author: beatrycze-volk

Resources/Private/Less/components/controls.less

@@ -25,17 +25,13 @@
                 height: 40px;
                 .text-hide();
                 border-radius: 20px;
-                margin: 0 5px;
                 background: #fff url(../Images/controlIcons.svg) no-repeat 0 0;
                 background-size: auto 120px;
             }
             > span {
                 opacity: 0.5;
             }
             @media screen and (min-width: @tabletLandscapeViewportWidth) {
-                > a, > span {
-                    margin: 0 2px;
-                }
                 a {
                     .no-touchevents & {
                         .transition();
@@ -47,8 +43,31 @@
                 }
             }
             @media screen and (min-width: @desktopViewportWidth) {
-                > a, > span {
-                    margin: 0 4px;
+            }
+        }
+    }
+
+    form {
+        select {
+            color: desaturate(lighten(@base-blue,20%),20%);
+            background: #fff url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDIwIDEyIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDpub25lO3N0cm9rZTojNjg4N0EzO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9PC9zdHlsZT48ZyBpZD0iWE1MSURfMV8iPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMy40IDMuMmwtNi40IDYuNC02LjQtNi40Ii8+PC9nPjwvc3ZnPg==') no-repeat right center;
+            background-size: 20px 12px;
+            font-size: 16px;
+            font-weight: 700;
+            line-height: 1.2;
+            width: auto;
+            padding: 10px 20px 10px 14px;
+            margin: 0 2px;
+            outline: none;
+            border-radius: 20px;
+            border: 1px solid desaturate(lighten(@light-blue,10%),20%);
+            cursor: pointer;
+            appearance: none;
+            .no-touchevents & {
+                .transition();
+                &:hover {
+                    border: 1px solid lighten(@light-blue,12%);
+                    background-color: lighten(@light-blue,20%);
                 }
             }
         }
@@ -58,6 +77,9 @@
 /* ==============[ document functions for downloads, doublepage eg. ]===================== */
 .document-functions {
     > ul {
+        display: flex;
+        justify-content: center;
+        gap: 10px;
         bottom: 15px;
         left: 15px;
         right: 15px;
@@ -356,7 +378,6 @@
 }
 
 /* ==============[ view functions for zoom, rotate and other view related functions ]===== */
-.viewer-selection,
 .view-functions {
     ul {
         position: relative;
@@ -386,7 +407,6 @@
                     background-position: -720px 0;
                 }
             }
-            &.viewers,
             &.pages {
                 position: relative;
                 top: auto;
@@ -396,29 +416,6 @@
                     position: absolute;
                     top: 0;
                     right: 0;
-                    select {
-                        color: desaturate(lighten(@base-blue,20%),20%);
-                        background: #fff url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDIwIDEyIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDpub25lO3N0cm9rZTojNjg4N0EzO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1saW5lY2FwOnJvdW5kO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDt9PC9zdHlsZT48ZyBpZD0iWE1MSURfMV8iPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMy40IDMuMmwtNi40IDYuNC02LjQtNi40Ii8+PC9nPjwvc3ZnPg==') no-repeat right center;
-                        background-size: 20px 12px;
-                        font-size: 16px;
-                        font-weight: 700;
-                        line-height: 1.2;
-                        width: auto;
-                        padding: 10px 20px 10px 14px;
-                        margin: 0 2px;
-                        outline: none;
-                        border-radius: 20px;
-                        border: 1px solid desaturate(lighten(@light-blue,10%),20%);
-                        cursor: pointer;
-                        appearance: none;
-                        .no-touchevents & {
-                            .transition();
-                            &:hover {
-                                border: 1px solid lighten(@light-blue,12%);
-                                background-color: lighten(@light-blue,20%);
-                            }
-                        }
-                    }
                 }
             }
             &.fullscreen {
@@ -552,14 +549,6 @@
     }
 }
 
-/* ==============[ the viewer selection tools ]========================================= */
-.viewer-selection {
-    > ul {
-        top: 0;
-        right: -254px;
-    }
-}
-
 /* ==============[ the image manipulation tools ]========================================= */
 .image-manipulation {
     position: absolute;

Resources/Private/Less/structure.less

@@ -308,6 +308,9 @@ a {
         top: 0;
         left: 33%;
         padding: 0;
+        .tx-dlf-embedded3dviewer {
+            margin-top: 80px;
+        }
         .tx-dlf-map {
             top: 0;
             .tx-dlf-score-visible & {