diff --git a/web/viewer.css b/web/viewer.css
index 630d54b78..135379d12 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -135,32 +135,6 @@ select {
cursor: default;
}
-/* outer/inner center provides horizontal center */
-.outerCenter {
- pointer-events: none;
- position: relative;
-}
-html[dir='ltr'] .outerCenter {
- float: right;
- right: 50%;
-}
-html[dir='rtl'] .outerCenter {
- float: left;
- left: 50%;
-}
-.innerCenter {
- pointer-events: auto;
- position: relative;
-}
-html[dir='ltr'] .innerCenter {
- float: right;
- right: -50%;
-}
-html[dir='rtl'] .innerCenter {
- float: left;
- left: -50%;
-}
-
#outerContainer {
width: 100%;
height: 100%;
@@ -494,24 +468,19 @@ html[dir='ltr'] .doorHangerRight:before {
background-color: rgb(255, 102, 102);
}
-html[dir='ltr'] #toolbarViewerLeft {
- margin-left: -1px;
-}
-html[dir='rtl'] #toolbarViewerRight {
- margin-right: -1px;
+#toolbarViewerMiddle {
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
}
html[dir='ltr'] #toolbarViewerLeft,
html[dir='rtl'] #toolbarViewerRight {
- position: absolute;
- top: 0;
- left: 0;
+ float: left;
}
html[dir='ltr'] #toolbarViewerRight,
html[dir='rtl'] #toolbarViewerLeft {
- position: absolute;
- top: 0;
- right: 0;
+ float: right;
}
html[dir='ltr'] #toolbarViewerLeft > *,
html[dir='ltr'] #toolbarViewerMiddle > *,
@@ -1828,38 +1797,47 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
display: none;
}
-@media all and (max-width: 960px) {
- html[dir='ltr'] #outerContainer.sidebarMoving .outerCenter,
- html[dir='ltr'] #outerContainer.sidebarOpen .outerCenter {
- float: left;
- left: 205px;
- }
- html[dir='rtl'] #outerContainer.sidebarMoving .outerCenter,
- html[dir='rtl'] #outerContainer.sidebarOpen .outerCenter {
- float: right;
- right: 205px;
+@media all and (max-width: 1040px) {
+ #outerContainer.sidebarMoving #toolbarViewerMiddle,
+ #outerContainer.sidebarOpen #toolbarViewerMiddle {
+ display: table;
+ margin: auto;
+ left: auto;
+ position: inherit;
+ transform: none;
}
}
-@media all and (max-width: 900px) {
+@media all and (max-width: 980px) {
+ .sidebarMoving .hiddenLargeView,
.sidebarOpen .hiddenLargeView {
display: none;
}
+ .sidebarMoving .visibleLargeView,
.sidebarOpen .visibleLargeView {
display: inherit;
}
}
-@media all and (max-width: 860px) {
+@media all and (max-width: 900px) {
+ #toolbarViewerMiddle {
+ display: table;
+ margin: auto;
+ left: auto;
+ position: inherit;
+ transform: none;
+ }
+ .sidebarMoving .hiddenMediumView,
.sidebarOpen .hiddenMediumView {
display: none;
}
+ .sidebarMoving .visibleMediumView,
.sidebarOpen .visibleMediumView {
display: inherit;
}
}
-@media all and (max-width: 770px) {
+@media all and (max-width: 840px) {
#sidebarContainer {
top: 32px;
z-index: 100;
@@ -1879,15 +1857,6 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
right: 0px;
}
- html[dir='ltr'] .outerCenter {
- float: left;
- left: 205px;
- }
- html[dir='rtl'] .outerCenter {
- float: right;
- right: 205px;
- }
-
#outerContainer .hiddenLargeView,
#outerContainer .hiddenMediumView {
display: inherit;
@@ -1898,7 +1867,7 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
}
}
-@media all and (max-width: 700px) {
+@media all and (max-width: 770px) {
#outerContainer .hiddenLargeView {
display: none;
}
@@ -1907,7 +1876,7 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
}
}
-@media all and (max-width: 660px) {
+@media all and (max-width: 700px) {
#outerContainer .hiddenMediumView {
display: none;
}
@@ -1916,29 +1885,19 @@ html[dir='rtl'] #documentPropertiesOverlay .row > * {
}
}
-@media all and (max-width: 600px) {
+@media all and (max-width: 640px) {
.hiddenSmallView {
display: none;
}
.visibleSmallView {
display: inherit;
}
- html[dir='ltr'] #outerContainer.sidebarMoving .outerCenter,
- html[dir='ltr'] #outerContainer.sidebarOpen .outerCenter,
- html[dir='ltr'] .outerCenter {
- left: 156px;
- }
- html[dir='rtl'] #outerContainer.sidebarMoving .outerCenter,
- html[dir='rtl'] #outerContainer.sidebarOpen .outerCenter,
- html[dir='rtl'] .outerCenter {
- right: 156px;
- }
.toolbarButtonSpacer {
width: 0;
}
}
-@media all and (max-width: 510px) {
+@media all and (max-width: 535px) {
#scaleSelectContainer {
display: none;
}
diff --git a/web/viewer.html b/web/viewer.html
index 50df35d5a..c5195fdcf 100644
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -223,35 +223,33 @@ See https://github.com/adobe-type-tools/cmap-resources
Tools
-