annotation_editor_layer_builder.css 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. /* Copyright 2022 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. --focus-outline: solid 2px blue;
  17. --hover-outline: dashed 2px blue;
  18. --freetext-line-height: 1.35;
  19. --freetext-padding: 2px;
  20. --editorFreeText-editing-cursor: text;
  21. /*#if COMPONENTS*/
  22. --editorInk-editing-cursor: pointer;
  23. /*#else*/
  24. --editorInk-editing-cursor: url(images/cursor-editorInk.svg) 0 16, pointer;
  25. /*#endif*/
  26. }
  27. @media (min-resolution: 1.1dppx) {
  28. :root {
  29. /*#if !COMPONENTS*/
  30. --editorFreeText-editing-cursor: url(images/cursor-editorFreeText.svg) 0 16,
  31. text;
  32. /*#endif*/
  33. }
  34. }
  35. @media (forced-colors: active) {
  36. :root {
  37. --focus-outline: solid 3px ButtonText;
  38. --hover-outline: dashed 3px ButtonText;
  39. }
  40. }
  41. [data-editor-rotation="90"] {
  42. transform: rotate(90deg);
  43. }
  44. [data-editor-rotation="180"] {
  45. transform: rotate(180deg);
  46. }
  47. [data-editor-rotation="270"] {
  48. transform: rotate(270deg);
  49. }
  50. .annotationEditorLayer {
  51. background: transparent;
  52. position: absolute;
  53. top: 0;
  54. left: 0;
  55. font-size: calc(100px * var(--scale-factor));
  56. transform-origin: 0 0;
  57. cursor: auto;
  58. z-index: 4;
  59. }
  60. .annotationEditorLayer.freeTextEditing {
  61. cursor: var(--editorFreeText-editing-cursor);
  62. }
  63. .annotationEditorLayer.inkEditing {
  64. cursor: var(--editorInk-editing-cursor);
  65. }
  66. .annotationEditorLayer .selectedEditor {
  67. outline: var(--focus-outline);
  68. resize: none;
  69. }
  70. .annotationEditorLayer .freeTextEditor {
  71. position: absolute;
  72. background: transparent;
  73. border-radius: 3px;
  74. padding: calc(var(--freetext-padding) * var(--scale-factor));
  75. resize: none;
  76. width: auto;
  77. height: auto;
  78. z-index: 1;
  79. transform-origin: 0 0;
  80. touch-action: none;
  81. cursor: auto;
  82. }
  83. .annotationEditorLayer .freeTextEditor .internal {
  84. background: transparent;
  85. border: none;
  86. top: 0;
  87. left: 0;
  88. overflow: visible;
  89. white-space: nowrap;
  90. resize: none;
  91. font: 10px sans-serif;
  92. line-height: var(--freetext-line-height);
  93. }
  94. .annotationEditorLayer .freeTextEditor .overlay {
  95. position: absolute;
  96. display: none;
  97. background: transparent;
  98. top: 0;
  99. left: 0;
  100. width: 100%;
  101. height: 100%;
  102. }
  103. .annotationEditorLayer .freeTextEditor .overlay.enabled {
  104. display: block;
  105. }
  106. .annotationEditorLayer .freeTextEditor .internal:empty::before {
  107. content: attr(default-content);
  108. color: gray;
  109. }
  110. .annotationEditorLayer .freeTextEditor .internal:focus {
  111. outline: none;
  112. }
  113. .annotationEditorLayer .inkEditor.disabled {
  114. resize: none;
  115. }
  116. .annotationEditorLayer .inkEditor.disabled.selectedEditor {
  117. resize: horizontal;
  118. }
  119. .annotationEditorLayer .freeTextEditor:hover:not(.selectedEditor),
  120. .annotationEditorLayer .inkEditor:hover:not(.selectedEditor) {
  121. outline: var(--hover-outline);
  122. }
  123. .annotationEditorLayer .inkEditor {
  124. position: absolute;
  125. background: transparent;
  126. border-radius: 3px;
  127. overflow: auto;
  128. width: 100%;
  129. height: 100%;
  130. z-index: 1;
  131. transform-origin: 0 0;
  132. cursor: auto;
  133. }
  134. .annotationEditorLayer .inkEditor.editing {
  135. resize: none;
  136. cursor: inherit;
  137. }
  138. .annotationEditorLayer .inkEditor .inkEditorCanvas {
  139. position: absolute;
  140. top: 0;
  141. left: 0;
  142. width: 100%;
  143. height: 100%;
  144. touch-action: none;
  145. }