xfa_layer_builder.css 5.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
  1. /* Copyright 2021 Mozilla Foundation
  2. *
  3. * Licensed under the Apache License, Version 2.0 (the "License");
  4. * you may not use this file except in compliance with the License.
  5. * You may obtain a copy of the License at
  6. *
  7. * http://www.apache.org/licenses/LICENSE-2.0
  8. *
  9. * Unless required by applicable law or agreed to in writing, software
  10. * distributed under the License is distributed on an "AS IS" BASIS,
  11. * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12. * See the License for the specific language governing permissions and
  13. * limitations under the License.
  14. */
  15. :root {
  16. --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>");
  17. --xfa-focus-outline: auto;
  18. }
  19. @media (forced-colors: active) {
  20. :root {
  21. --xfa-focus-outline: 2px solid CanvasText;
  22. }
  23. .xfaLayer *:required {
  24. outline: 1.5px solid selectedItem;
  25. }
  26. }
  27. .xfaLayer {
  28. background-color: transparent;
  29. }
  30. .xfaLayer .highlight {
  31. margin: -1px;
  32. padding: 1px;
  33. background-color: rgba(239, 203, 237, 1);
  34. border-radius: 4px;
  35. }
  36. .xfaLayer .highlight.appended {
  37. position: initial;
  38. }
  39. .xfaLayer .highlight.begin {
  40. border-radius: 4px 0 0 4px;
  41. }
  42. .xfaLayer .highlight.end {
  43. border-radius: 0 4px 4px 0;
  44. }
  45. .xfaLayer .highlight.middle {
  46. border-radius: 0;
  47. }
  48. .xfaLayer .highlight.selected {
  49. background-color: rgba(203, 223, 203, 1);
  50. }
  51. .xfaPage {
  52. overflow: hidden;
  53. position: relative;
  54. }
  55. .xfaContentarea {
  56. position: absolute;
  57. }
  58. .xfaPrintOnly {
  59. display: none;
  60. }
  61. .xfaLayer {
  62. position: absolute;
  63. text-align: initial;
  64. top: 0;
  65. left: 0;
  66. transform-origin: 0 0;
  67. line-height: 1.2;
  68. }
  69. .xfaLayer * {
  70. color: inherit;
  71. font: inherit;
  72. font-style: inherit;
  73. font-weight: inherit;
  74. font-kerning: inherit;
  75. letter-spacing: -0.01px;
  76. text-align: inherit;
  77. text-decoration: inherit;
  78. box-sizing: border-box;
  79. background-color: transparent;
  80. padding: 0;
  81. margin: 0;
  82. pointer-events: auto;
  83. line-height: inherit;
  84. }
  85. .xfaLayer *:required {
  86. outline: 1.5px solid red;
  87. }
  88. .xfaLayer div {
  89. pointer-events: none;
  90. }
  91. .xfaLayer svg {
  92. pointer-events: none;
  93. }
  94. .xfaLayer svg * {
  95. pointer-events: none;
  96. }
  97. .xfaLayer a {
  98. color: blue;
  99. }
  100. .xfaRich li {
  101. margin-left: 3em;
  102. }
  103. .xfaFont {
  104. color: black;
  105. font-weight: normal;
  106. font-kerning: none;
  107. font-size: 10px;
  108. font-style: normal;
  109. letter-spacing: 0;
  110. text-decoration: none;
  111. vertical-align: 0;
  112. }
  113. .xfaCaption {
  114. overflow: hidden;
  115. flex: 0 0 auto;
  116. }
  117. .xfaCaptionForCheckButton {
  118. overflow: hidden;
  119. flex: 1 1 auto;
  120. }
  121. .xfaLabel {
  122. height: 100%;
  123. width: 100%;
  124. }
  125. .xfaLeft {
  126. display: flex;
  127. flex-direction: row;
  128. align-items: center;
  129. }
  130. .xfaRight {
  131. display: flex;
  132. flex-direction: row-reverse;
  133. align-items: center;
  134. }
  135. .xfaLeft > .xfaCaption,
  136. .xfaLeft > .xfaCaptionForCheckButton,
  137. .xfaRight > .xfaCaption,
  138. .xfaRight > .xfaCaptionForCheckButton {
  139. max-height: 100%;
  140. }
  141. .xfaTop {
  142. display: flex;
  143. flex-direction: column;
  144. align-items: flex-start;
  145. }
  146. .xfaBottom {
  147. display: flex;
  148. flex-direction: column-reverse;
  149. align-items: flex-start;
  150. }
  151. .xfaTop > .xfaCaption,
  152. .xfaTop > .xfaCaptionForCheckButton,
  153. .xfaBottom > .xfaCaption,
  154. .xfaBottom > .xfaCaptionForCheckButton {
  155. width: 100%;
  156. }
  157. .xfaBorder {
  158. background-color: transparent;
  159. position: absolute;
  160. pointer-events: none;
  161. }
  162. .xfaWrapped {
  163. width: 100%;
  164. height: 100%;
  165. }
  166. .xfaTextfield:focus,
  167. .xfaSelect:focus {
  168. background-image: none;
  169. background-color: transparent;
  170. outline: var(--xfa-focus-outline);
  171. outline-offset: -1px;
  172. }
  173. .xfaCheckbox:focus,
  174. .xfaRadio:focus {
  175. outline: var(--xfa-focus-outline);
  176. }
  177. .xfaTextfield,
  178. .xfaSelect {
  179. height: 100%;
  180. width: 100%;
  181. flex: 1 1 auto;
  182. border: none;
  183. resize: none;
  184. background-image: var(--xfa-unfocused-field-background);
  185. }
  186. .xfaSelect {
  187. padding-inline: 2px;
  188. }
  189. .xfaTop > .xfaTextfield,
  190. .xfaTop > .xfaSelect,
  191. .xfaBottom > .xfaTextfield,
  192. .xfaBottom > .xfaSelect {
  193. flex: 0 1 auto;
  194. }
  195. .xfaButton {
  196. cursor: pointer;
  197. width: 100%;
  198. height: 100%;
  199. border: none;
  200. text-align: center;
  201. }
  202. .xfaLink {
  203. width: 100%;
  204. height: 100%;
  205. position: absolute;
  206. top: 0;
  207. left: 0;
  208. }
  209. .xfaCheckbox,
  210. .xfaRadio {
  211. width: 100%;
  212. height: 100%;
  213. flex: 0 0 auto;
  214. border: none;
  215. }
  216. .xfaRich {
  217. white-space: pre-wrap;
  218. width: 100%;
  219. height: 100%;
  220. }
  221. .xfaImage {
  222. object-position: left top;
  223. object-fit: contain;
  224. width: 100%;
  225. height: 100%;
  226. }
  227. .xfaLrTb,
  228. .xfaRlTb,
  229. .xfaTb {
  230. display: flex;
  231. flex-direction: column;
  232. align-items: stretch;
  233. }
  234. .xfaLr {
  235. display: flex;
  236. flex-direction: row;
  237. align-items: stretch;
  238. }
  239. .xfaRl {
  240. display: flex;
  241. flex-direction: row-reverse;
  242. align-items: stretch;
  243. }
  244. .xfaTb > div {
  245. justify-content: left;
  246. }
  247. .xfaPosition {
  248. position: relative;
  249. }
  250. .xfaArea {
  251. position: relative;
  252. }
  253. .xfaValignMiddle {
  254. display: flex;
  255. align-items: center;
  256. }
  257. .xfaTable {
  258. display: flex;
  259. flex-direction: column;
  260. align-items: stretch;
  261. }
  262. .xfaTable .xfaRow {
  263. display: flex;
  264. flex-direction: row;
  265. align-items: stretch;
  266. }
  267. .xfaTable .xfaRlRow {
  268. display: flex;
  269. flex-direction: row-reverse;
  270. align-items: stretch;
  271. flex: 1;
  272. }
  273. .xfaTable .xfaRlRow > div {
  274. flex: 1;
  275. }
  276. .xfaNonInteractive input,
  277. .xfaNonInteractive textarea,
  278. .xfaDisabled input,
  279. .xfaDisabled textarea,
  280. .xfaReadOnly input,
  281. .xfaReadOnly textarea {
  282. background: initial;
  283. }
  284. @media print {
  285. .xfaTextfield,
  286. .xfaSelect {
  287. background: transparent;
  288. }
  289. .xfaSelect {
  290. appearance: none;
  291. text-indent: 1px;
  292. text-overflow: "";
  293. }
  294. }