| <style include="cr-hidden-style"> | |
| :host { | |
| --button-position-offset: 24px; | |
| bottom: 0; | |
| left: 0; | |
| padding: 48px 0; | |
| position: fixed; | |
| right: auto; | |
| user-select: none; | |
| z-index: 3; | |
| } | |
| :host-context([dir='rtl']) { | |
| left: auto; | |
| right: 0; | |
| } | |
| #zoom-buttons { | |
| left: var(--button-position-offset); | |
| opacity: 1; | |
| position: relative; | |
| right: auto; | |
| transition: opacity 250ms; | |
| transition-timing-function: cubic-bezier(0, 0, 0.2, 1); | |
| } | |
| :host-context([dir='rtl']) #zoom-buttons { | |
| left: auto; | |
| right: var(--button-position-offset); | |
| } | |
| :host(:not([visible_])) #zoom-buttons { | |
| opacity: 0; | |
| transition-timing-function: cubic-bezier(0.4, 0, 1, 1); | |
| } | |
| viewer-zoom-button { | |
| display: block; | |
| } | |
| /* A larger gap between the fit button and the bottom two zoom buttons. */ | |
| #zoom-in-button { | |
| margin-top: 24px; | |
| } | |
| /* A small gap between the zoom in/zoom out buttons. */ | |
| #zoom-out-button { | |
| margin-top: 10px; | |
| } | |
| </style> | |
| <div id="zoom-buttons"> | |
| <viewer-zoom-button id="fitButton" on-fabclick="fitToggle" | |
| tooltips="$i18n{tooltipFitToPage},$i18n{tooltipFitToWidth}" | |
| keyboard-navigation-active="[[keyboardNavigationActive_]]" | |
| icons="pdf:fullscreen-exit cr:fullscreen"> | |
| </viewer-zoom-button> | |
| <viewer-zoom-button id="zoom-in-button" icons="pdf:add" | |
| tooltips="$i18n{tooltipZoomIn}" | |
| keyboard-navigation-active="[[keyboardNavigationActive_]]" | |
| on-fabclick="zoomIn"></viewer-zoom-button> | |
| <viewer-zoom-button id="zoom-out-button" icons="pdf:remove" | |
| tooltips="$i18n{tooltipZoomOut}" | |
| keyboard-navigation-active="[[keyboardNavigationActive_]]" | |
| on-fabclick="zoomOut"></viewer-zoom-button> | |
| </div> |