<style> | |
/* A separate div is used because if the direction CSS property is applied | |
* to the host element, any margins or paddings set by the parent will be | |
* affected and be reversed. */ | |
#content { | |
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> | |
<div id="content"> | |
<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> | |
</div> |