| <style include="scanning-shared scanning-fonts"> |
| /* Styles part of the string returned by getHelperTextHtml_(). */ |
| #boldHelperText { |
| font-weight: var(--scanning-medium-font-weight); |
| } |
| |
| #helperText { |
| @apply --scanning-helper-text-font; |
| color: var(--scanning-helper-text-color); |
| margin: auto; |
| text-align: center; |
| width: 60%; |
| } |
| |
| #helpOrProgress { |
| display: flex; |
| /* Calculate a height that results in a Letter aspect ratio (1:1.2941). */ |
| height: calc(1.2941 * var(--left-panel-width)); |
| } |
| |
| #progressText, |
| #cancelingText { |
| @apply --scanning-progress-text-font; |
| color: var(--scanning-progress-text-color); |
| } |
| |
| #scanProgress, |
| #cancelingProgress { |
| margin: auto; |
| text-align: center; |
| width: 70%; |
| } |
| |
| .preview { |
| border-radius: 4px; |
| max-height: calc(100vh - var(--panel-container-margin-top)); |
| outline: none; |
| overflow-y: auto; |
| } |
| |
| .preview:focus { |
| box-shadow: 0 0 0 2px rgba(var(--google-blue-600-rgb), .4); |
| } |
| |
| .preview::-webkit-scrollbar { |
| -webkit-appearance: none; |
| width: 4px; |
| } |
| |
| .preview::-webkit-scrollbar-thumb { |
| background-color: rgba(0, 0, 0, 0.5); |
| } |
| |
| .preview-item { |
| border: 1px solid var(--google-grey-300); |
| border-radius: 4px; |
| /* Subtract 2px for the border. */ |
| width: calc(100% - 2px); |
| } |
| |
| .scanned-image { |
| display: block; |
| } |
| |
| /* Add top margin to all but the first scanned image. */ |
| .scanned-image:nth-of-type(n+2) { |
| margin-top: 8px; |
| } |
| |
| paper-progress { |
| border-radius: 4px; |
| height: 4px; |
| margin-top: 12px; |
| width: 100%; |
| } |
| |
| #scanProgressBar { |
| --paper-progress-active-color: var(--google-blue-600); |
| --paper-progress-container-color: var(--google-blue-200); |
| } |
| |
| #cancelingProgressBar { |
| --paper-progress-active-color: var(--google-grey-refresh-500); |
| --paper-progress-container-color: var(--google-grey-200); |
| } |
| </style> |
| <div id="previewDiv" class="preview" aria-label="[[previewAriaLabel_]]" |
| tabindex="0"> |
| <div id="helpOrProgress" class="preview-item" hidden$="[[showScannedImages_]]" |
| aria-hidden="true"> |
| <div id="helperText" hidden$="[[!showHelperText_]]"> |
| <span inner-h-t-m-l="[[getHelperTextHtml_()]]"></span> |
| </div> |
| <div id="scanProgress" hidden$="[[!showScanProgress_]]"> |
| <span id="progressText">[[progressTextString_]]</span> |
| <paper-progress id="scanProgressBar" value="[[progressPercent]]"> |
| </paper-progress> |
| </div> |
| <div id="cancelingProgress" hidden$="[[!showCancelingProgress_]]"> |
| <span id="cancelingText">[[i18n('cancelingScanningText')]]</span> |
| <paper-progress id="cancelingProgressBar" indeterminate></paper-progress> |
| </div> |
| </div> |
| <div id="scannedImages" hidden$="[[!showScannedImages_]]" aria-hidden="true"> |
| <template is="dom-repeat" items="[[objectUrls]]" as="url"> |
| <img class="preview-item scanned-image" src="[[url]]"> |
| </template> |
| </div> |
| </div> |