fork from https://github.com/mozilla/pdf.js.git
This commit is contained in:
330
web/xfa_layer_builder.css
Normal file
330
web/xfa_layer_builder.css
Normal file
@@ -0,0 +1,330 @@
|
||||
/* 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 {
|
||||
--xfa-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>");
|
||||
--xfa-focus-outline: auto;
|
||||
}
|
||||
|
||||
@media screen and (forced-colors: active) {
|
||||
:root {
|
||||
--xfa-focus-outline: 2px solid CanvasText;
|
||||
}
|
||||
.xfaLayer *:required {
|
||||
outline: 1.5px solid selectedItem;
|
||||
}
|
||||
}
|
||||
|
||||
.xfaLayer {
|
||||
color-scheme: only light;
|
||||
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.xfaLayer .highlight {
|
||||
margin: -1px;
|
||||
padding: 1px;
|
||||
background-color: rgb(239 203 237);
|
||||
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: rgb(203 223 203);
|
||||
}
|
||||
|
||||
.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 *:required {
|
||||
outline: 1.5px solid red;
|
||||
}
|
||||
|
||||
.xfaLayer div,
|
||||
.xfaLayer svg,
|
||||
.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;
|
||||
}
|
||||
|
||||
:is(.xfaLeft, .xfaRight) > :is(.xfaCaption, .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;
|
||||
}
|
||||
|
||||
:is(.xfaTop, .xfaBottom) > :is(.xfaCaption, .xfaCaptionForCheckButton) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.xfaBorder {
|
||||
background-color: transparent;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.xfaWrapped {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:is(.xfaTextfield, .xfaSelect):focus {
|
||||
background-image: none;
|
||||
background-color: transparent;
|
||||
outline: var(--xfa-focus-outline);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
:is(.xfaCheckbox, .xfaRadio):focus {
|
||||
outline: var(--xfa-focus-outline);
|
||||
}
|
||||
|
||||
.xfaTextfield,
|
||||
.xfaSelect {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
flex: 1 1 auto;
|
||||
border: none;
|
||||
resize: none;
|
||||
background-image: var(--xfa-unfocused-field-background);
|
||||
}
|
||||
|
||||
.xfaSelect {
|
||||
padding-inline: 2px;
|
||||
}
|
||||
|
||||
:is(.xfaTop, .xfaBottom) > :is(.xfaTextfield, .xfaSelect) {
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.xfaButton {
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.xfaLink {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
:is(.xfaNonInteractive, .xfaDisabled, .xfaReadOnly) :is(input, textarea) {
|
||||
background: initial;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.xfaTextfield,
|
||||
.xfaSelect {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.xfaSelect {
|
||||
appearance: none;
|
||||
text-indent: 1px;
|
||||
text-overflow: "";
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user