| <style> | |
| :host { | |
| align-items: center; | |
| color: #fff; | |
| direction: ltr; | |
| display: flex; | |
| font-size: 0.81rem; | |
| text-align: center; | |
| --page-selector-spacing: 4px; | |
| } | |
| #pageselector::selection { | |
| background-color: var(--viewer-text-input-selection-color); | |
| } | |
| input, | |
| #pagelength { | |
| /* --page-length-digits is set through JavaScript. 1px is added because | |
| * the unit 'ch' does not provide exact whole number pixels, and | |
| * therefore seems to have 1px-off bugginess. */ | |
| width: calc(max(2, var(--page-length-digits)) * 1ch + 1px); | |
| } | |
| input { | |
| background: rgba(0, 0, 0, 0.5); | |
| border: none; | |
| color: white; | |
| font-family: inherit; | |
| line-height: inherit; | |
| outline: none; | |
| padding: 0 var(--page-selector-spacing); | |
| text-align: center; | |
| } | |
| #divider { | |
| margin: 0 var(--page-selector-spacing); | |
| } | |
| </style> | |
| <input part="input" type="text" id="pageselector" value="[[pageNo]]" | |
| on-pointerup="select" on-input="onInput_" on-change="pageNoCommitted" | |
| aria-label="$i18n{labelPageNumber}"> | |
| <span id="divider">/</span> | |
| <span id="pagelength">[[docLength]]</span> |