From 5df7c970742f16c809c2543858e9290a00832aa1 Mon Sep 17 00:00:00 2001 From: Jonas Jenwald Date: Sat, 18 Nov 2023 22:05:21 +0100 Subject: [PATCH] Move the editor-buttons in the main toolbar By introducing a CSS variable for the editor-toolbars we're able to handle resizing of the viewer without complicating the code too much. --- web/viewer.css | 10 +++++++--- web/viewer.html | 28 ++++++++++++++-------------- 2 files changed, 21 insertions(+), 17 deletions(-) diff --git a/web/viewer.css b/web/viewer.css index b271e9802..8fbaae955 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -28,6 +28,7 @@ --toolbar-icon-opacity: 0.7; --doorhanger-icon-opacity: 0.9; + --editor-toolbar-base-offset: 105px; --main-color: rgb(12 12 13); --body-bg-color: rgb(212 212 215); @@ -572,15 +573,15 @@ body { } #editorStampParamsToolbar { - inset-inline-end: 40px; + inset-inline-end: calc(var(--editor-toolbar-base-offset) + 0px); } #editorInkParamsToolbar { - inset-inline-end: 68px; + inset-inline-end: calc(var(--editor-toolbar-base-offset) + 28px); } #editorFreeTextParamsToolbar { - inset-inline-end: 96px; + inset-inline-end: calc(var(--editor-toolbar-base-offset) + 56px); } #editorStampAddImage::before { @@ -1469,6 +1470,9 @@ dialog :link { } @media all and (max-width: 750px) { + :root { + --editor-toolbar-base-offset: 40px; + } #outerContainer .hiddenMediumView { display: none; } diff --git a/web/viewer.html b/web/viewer.html index c9acfd416..a10b570cf 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -333,31 +333,31 @@ See https://github.com/adobe-type-tools/cmap-resources
- - - - -
-
- - -
- + + + +
+ +