pdf.js/web/xfa_layer_builder.css
Brendan Dahl bb47128864 XFA - Support text search in XFA documents.
Moves the logic out of TextLayerBuilder to handle
highlighting matches into a new separate class `TextHighlighter`
that can be used with regular PDFs and XFA PDFs.

To mimic the current find functionality in XFA, two arrays
from the XFA rendering are created to get the text content
and map those to DOM nodes.

Fixes #13878
2021-08-23 08:44:20 -07:00

325 lines
5.1 KiB
CSS

/* Copyright 2021 Mozilla Foundation
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
:root {
--unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
}
.xfaLayer .highlight {
margin: -1px;
padding: 1px;
background-color: rgba(239, 203, 237, 1);
border-radius: 4px;
}
.xfaLayer .highlight.appended {
position: initial;
}
.xfaLayer .highlight.begin {
border-radius: 4px 0 0 4px;
}
.xfaLayer .highlight.end {
border-radius: 0 4px 4px 0;
}
.xfaLayer .highlight.middle {
border-radius: 0;
}
.xfaLayer .highlight.selected {
background-color: rgba(203, 223, 203, 1);
}
.xfaLayer ::selection {
background: rgba(0, 0, 255, 1);
}
.xfaPage {
overflow: hidden;
position: relative;
}
.xfaContentarea {
position: absolute;
}
.xfaPrintOnly {
display: none;
}
.xfaLayer {
position: absolute;
text-align: initial;
top: 0;
left: 0;
transform-origin: 0 0;
line-height: 1.2;
}
.xfaLayer * {
color: inherit;
font: inherit;
font-style: inherit;
font-weight: inherit;
font-kerning: inherit;
letter-spacing: -0.01px;
text-align: inherit;
text-decoration: inherit;
box-sizing: border-box;
background-color: transparent;
padding: 0;
margin: 0;
pointer-events: auto;
line-height: inherit;
}
.xfaLayer div {
pointer-events: none;
}
.xfaLayer svg {
pointer-events: none;
}
.xfaLayer svg * {
pointer-events: none;
}
.xfaLayer a {
color: blue;
}
.xfaRich li {
margin-left: 3em;
}
.xfaFont {
color: black;
font-weight: normal;
font-kerning: none;
font-size: 10px;
font-style: normal;
letter-spacing: 0;
text-decoration: none;
vertical-align: 0;
}
.xfaCaption {
overflow: hidden;
flex: 0 0 auto;
}
.xfaCaptionForCheckButton {
overflow: hidden;
flex: 1 1 auto;
}
.xfaLabel {
height: 100%;
width: 100%;
}
.xfaLeft {
display: flex;
flex-direction: row;
align-items: center;
}
.xfaRight {
display: flex;
flex-direction: row-reverse;
align-items: center;
}
.xfaLeft > .xfaCaption,
.xfaLeft > .xfaCaptionForCheckButton,
.xfaRight > .xfaCaption,
.xfaRight > .xfaCaptionForCheckButton {
max-height: 100%;
}
.xfaTop {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.xfaBottom {
display: flex;
flex-direction: column-reverse;
align-items: flex-start;
}
.xfaTop > .xfaCaption,
.xfaTop > .xfaCaptionForCheckButton,
.xfaBottom > .xfaCaption,
.xfaBottom > .xfaCaptionForCheckButton {
width: 100%;
}
.xfaBorder {
background-color: transparent;
position: absolute;
pointer-events: none;
}
.xfaWrapped {
width: 100%;
height: 100%;
}
.xfaTextfield:focus,
.xfaSelect:focus {
background-image: none;
background-color: transparent;
outline: auto;
outline-offset: -1px;
}
.xfaCheckbox:focus,
.xfaRadio:focus {
outline: auto;
}
.xfaTextfield,
.xfaSelect {
height: 100%;
width: 100%;
flex: 1 1 auto;
border: none;
resize: none;
background-image: var(--unfocused-field-background);
}
.xfaTop > .xfaTextfield,
.xfaTop > .xfaSelect,
.xfaBottom > .xfaTextfield,
.xfaBottom > .xfaSelect {
flex: 0 1 auto;
}
.xfaButton {
cursor: pointer;
width: 100%;
height: 100%;
border: none;
text-align: center;
}
.xfaCheckbox,
.xfaRadio {
width: 100%;
height: 100%;
flex: 0 0 auto;
border: none;
}
.xfaRich {
white-space: pre-wrap;
width: 100%;
height: 100%;
}
.xfaImage {
object-position: left top;
object-fit: contain;
width: 100%;
height: 100%;
}
.xfaLrTb,
.xfaRlTb,
.xfaTb {
display: flex;
flex-direction: column;
align-items: stretch;
}
.xfaLr {
display: flex;
flex-direction: row;
align-items: stretch;
}
.xfaRl {
display: flex;
flex-direction: row-reverse;
align-items: stretch;
}
.xfaTb > div {
justify-content: left;
}
.xfaPosition {
position: relative;
}
.xfaArea {
position: relative;
}
.xfaValignMiddle {
display: flex;
align-items: center;
}
.xfaTable {
display: flex;
flex-direction: column;
align-items: stretch;
}
.xfaTable .xfaRow {
display: flex;
flex-direction: row;
align-items: stretch;
}
.xfaTable .xfaRlRow {
display: flex;
flex-direction: row-reverse;
align-items: stretch;
flex: 1;
}
.xfaTable .xfaRlRow > div {
flex: 1;
}
.xfaNonInteractive input,
.xfaNonInteractive textarea,
.xfaDisabled input,
.xfaDisabled textarea,
.xfaReadOnly input,
.xfaReadOnly textarea {
background: initial;
}
@media print {
.xfaTextfield,
.xfaSelect {
background: transparent;
}
.xfaSelect {
appearance: none;
text-indent: 1px;
text-overflow: "";
}
}