zydx-plus 1.35.596 → 1.35.598

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zydx-plus",
-  "version": "1.35.596",
+  "version": "1.35.598",
   "description": "Vue.js",
   "main": "src/index.js",
   "files": [

package/src/components/buttonGroup/src/buttonGroup.vue

@@ -24,6 +24,10 @@ export default defineComponent({
       type: String,
       default: '#00ff00'
     },
+    isHide: {// 按钮能否收起 true能 false 否
+      type: Boolean,
+      default: true
+    }
   },
   data() {
     return {
@@ -38,10 +42,18 @@ export default defineComponent({
     trackClick(idx) {
       if (this.accordian) {
         this.active_state = this.active_state.map((_, i) => {
-          if (i === idx) {
-            return this.active_state[i] = !this.active_state[i]
+          if (this.isHide) {
+            if (i === idx) {
+              return this.active_state[i] = !this.active_state[i]
+            } else {
+              return false
+            }
           } else {
-            return false
+            if (i === idx) {
+              return this.active_state[i] = true
+            } else {
+              return false
+            }
           }
         })
       } else {

package/src/components/data_table/src/table_head.vue

@@ -47,7 +47,7 @@ export default defineComponent({
   methods: {
     sticky: function ({ level, column, row, idx }) {
       const left = row.slice(0, idx).reduce((acc, cur) => (cur.column.width + acc), 0)
-      return `  background: white;
+      return `  background: transparent;
   position: sticky;
   z-index: 5;
   min-width: ${column.width}px;
@@ -82,7 +82,7 @@ export default defineComponent({
 .table_head {
   position: relative;
   z-index: 5;
-  background: white
+  background: transparent;
 }
 
 th,
@@ -105,7 +105,7 @@ td {
 }
 
 th {
-  background: white;
+  background: transparent;
   position: sticky;
   z-index: 5;
   top: 0;

package/src/components/dragPopup/src/dragPopup.vue

@@ -319,6 +319,7 @@ export default {
         this.draggableState = interact(`#draggable${that.id}`)
         this.draggableState.draggable({
           enabled: true,
+          touch: true,
           listeners: {
             start (event) {
               that.draggableMove = true
@@ -606,7 +607,7 @@ export default {
 .drag-head {
   height: 30px;
   line-height: 30px;
-  padding: 0 10px;
+  padding: 0 5px;
   color: #fff;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;

package/src/components/dragPopup2/src/dragPopup.vue

@@ -328,6 +328,7 @@ export default {
         this.draggableState = interact(`#draggable${that.id}`)
         this.draggableState.draggable({
           enabled: true,
+          touch: true,
           listeners: {
             start (event) {
               that.draggableMove = true
@@ -612,7 +613,7 @@ export default {
 .drag-head {
   height: 30px;
   line-height: 30px;
-  padding: 0 10px;
+  padding: 0 5px;
   color: #fff;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;

package/src/components/editor/src/editor.vue

@@ -4415,7 +4415,9 @@ export default {
   margin-bottom: 10px;
   /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);*/
 }
-
+.read-only-page :deep(img) {
+  padding: 3px;
+}
 .read-only-page:last-child {
   margin-bottom: 0;
 }

package/src/components/editor2/src/editor.vue

@@ -10,21 +10,22 @@
         <slot name='titleSuffix'></slot>
       </div>
       <div class="ed-but" v-if="readOnly">
+        <slot name='leftToolBtn'></slot>
         <div class="ed-head-but" v-for="(item,index) in toolbars" :key="index">
-          <button v-if="item.key === 'but'" class="buts" @click="item.onClick(item,info)"
-                  :style="{color: (item.active)? '#4B0C77' :'#000'}">{{ item.title }}
+          <button v-if="item.key === 'but'" class="buts" @click="item.onClick(item,info)" :disabled="disabled"
+                  :style="{color: (disabled) ? '#ccc' : (item.active)? '#4B0C77' :'#000'}">{{ item.title }}
           </button>
           <label v-else-if="item.key === 'upImg' || item.key === 'uploadAtt'">
-            <input type="file" @change="upload($event,item.key)"
-                   :accept="(item.key === 'upImg')?'image/*':'.docx,.pptx,.pdf,.xlsx,.mp3,.mp4'" style="display: none;">
-            <span class="buts">{{ item.title }}</span>
-          </label>
-          <button v-else-if="item.key === 'paint'" class="buts" @click="toolTap('paint')">{{ item.title }}</button>
-          <button v-else-if="item.key === 'voice'" class="buts" @mousedown.stop="speechDown" @click="voice()"
-                  :style="{color: (voiceStatus)? '#4B0C77' :'#000'}">{{ voiceStatus ? '关闭语音' : '语音输入' }}
+            <input type="file" @change="upload($event,item.key)" :disabled="disabled"
+                   :accept="(item.key === 'upImg')?'image/*':'.docx,.pptx,.pdf,.xlsx,.mp3,.mp4'" style="display: none;"/>
+            <span class="buts" :style="{color: ( disabled) ? '#ccc':'#000'}">{{ item.title }}</span>
+          </label >
+          <button v-else-if="item.key === 'paint'" class="buts" @click="toolTap('paint')" :disabled="disabled">{{ item.title }}</button>
+          <button v-else-if="item.key === 'voice'" class="buts" @mousedown.stop="speechDown" :disabled="disabled" @click="voice()"
+                  :style="{color:  (disabled) ? '#ccc' : (voiceStatus)? '#4B0C77' :'#000'}">{{ voiceStatus ? '关闭语音' : '语音输入' }}
           </button>
-          <button v-else-if="item.key === 'ai'" class="buts" @click="showAi">AI助手</button>
-          <button v-else class="buts" @click="toolTap(item.key)">{{ item.title }}</button>
+          <button v-else-if="item.key === 'ai'" class="buts" :disabled="disabled" @click="showAi">AI助手</button>
+          <button v-else class="buts" @click="toolTap(item.key)" :disabled="disabled">{{ item.title }}</button>
         </div>
         <slot name='toolBtn'></slot>
         <button v-if="butText !== '' && readOnly" class="buts" @click="complete">{{ butText }}</button>
@@ -86,9 +87,9 @@
           <svg style="cursor: pointer" @click="close" t="1698630749910" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4415" width="20" height="20"><path d="M726.976 274.432a16 16 0 0 0-22.656 0L512 466.752l-192.32-192.32a16 16 0 0 0-22.624 0l-22.656 22.624a16 16 0 0 0 0 22.624l192.32 192.32-192.32 192.32a16 16 0 0 0 0 22.656l22.656 22.624a16 16 0 0 0 22.624 0l192.32-192.32 192.32 192.32a16 16 0 0 0 22.656 0l22.624-22.624a16 16 0 0 0 0-22.624L557.28 512l192.32-192.352a16 16 0 0 0 0-22.624l-22.624-22.624z" fill="#fff" p-id="4416"></path></svg>
         </div>
       </div>
-<!--      <div class="editor-but" v-if="butText !== '' && readOnly">-->
-<!--        <button class="buts" @click="complete">{{ butText }}</button>-->
-<!--      </div>-->
+      <!--      <div class="editor-but" v-if="butText !== '' && readOnly">-->
+      <!--        <button class="buts" @click="complete">{{ butText }}</button>-->
+      <!--      </div>-->
       <div class="enclosure" v-if="uploadAttData.length > 0 && enclosureShow">
         <p :style="enclosureStyle">{{ enclosureText }}</p>
         <div class="enclosure-list" v-for="(item,index) in uploadAttData">
@@ -104,9 +105,9 @@
           </div>
           <div class="enclosure-item en-but">
             <div style="display: inline-block; height: 21px;">
-              <button class="buts but-f" v-if="!item.name" @click="see(index)">{{downName[0] || '查看附件'}}</button>
-              <button class="buts but-f" v-if="!item.name&&downloadShow" @click="download(index)">{{downName[1] || '下载附件'}}</button>
-              <button class="buts but-f" v-if="delShow" @click="del(index)">
+              <button class="buts but-f" v-if="!item.name" :disabled="disabled" @click="see(index)">{{downName[0] || '查看附件'}}</button>
+              <button class="buts but-f" v-if="!item.name&&downloadShow" :disabled="disabled" @click="download(index)">{{downName[1] || '下载附件'}}</button>
+              <button class="buts but-f" v-if="delShow" @click="del(index)" :disabled="disabled">
                 <span v-if="item.active">{{downName[2] || '删除附件'}}</span>
                 <svg v-else xmlns="http://www.w3.org/2000/svg"
                      width="14"
@@ -141,7 +142,8 @@
                   </g>
                 </svg>
               </button>
-              <button class="buts but-f" v-if="Object.keys(enclosureButton).length > 0" @click="enclosureButton.onClick(item,index)">{{ enclosureButton.name }}</button>
+              <button class="buts but-f" :disabled="disabled" v-if="Object.keys(enclosureButton).length > 0"
+                      @click="enclosureButton.onClick(item,index)">{{ enclosureButton.name }}</button>
             </div>
           </div>
         </div>
@@ -346,6 +348,10 @@ export default {
       type: Boolean,
       default: false
     },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
     enclosureButton: {
       type: Object,
       default: {}
@@ -366,8 +372,8 @@ export default {
       handler: function (e, oldVal) {
         if(this.updateInit) return
         if(this.updateStatus) this.updateInit = true
-        this.editor?.commands.setContent(json2html({node: "root", child: (e.html === undefined || e.html === null || e.html === 'null') ? [] : e.html}))
-        this.uploadAttData = (e.enclosure === undefined || e.enclosure === null || e.html === 'null') ? [] : this.enclosureAction(e.enclosure)
+        this.editor?.commands.setContent(json2html({node: "root", child: this.dataChange(e).html}))
+        this.uploadAttData = this.dataChange(e).enclosure
       },
       deep: true
     },
@@ -382,31 +388,43 @@ export default {
     toolbar: {
       handler: function (e, oldVal) {
         let status = null
+        let upload = null
         this.toolbars = []
         e.forEach(x => {
           if(x.key === 'but') {
             status = x
+          } if (x.key === 'uploadAtt') {
+            upload = x
           }else {
             this.toolbars.push(x)
           }
         })
-        if(this.isShowWhiteboarde) this.toolbars.push({key: 'paint', title: '插入手写'})
+        if(this.isShowWhiteboarde) this.toolbars.push({key: 'paint',disabled:true,  title: '插入手写'})
+        if(upload) this.toolbars.push(upload) // 上传附件
         if(this.voiceShow) this.toolbars.push({key: 'voice', title: '语音输入'})
-        if(status) this.toolbars.push(status)
+        if(status) this.toolbars.push(status) // 之定义按钮
         if(this.isShowAiTool) this.toolbars.push({key: 'ai', title: 'AI助手'})
       },
       immediate: true
+    },
+    disabled: {
+      handler: function (e, oldVal) {
+        this.editor.setOptions({
+          editable: this.readOnly ?(!e):this.readOnly
+        })
+      },
+      deep: true
     }
   },
   mounted() {
     let _this = this
-    this.uploadAttData = (this.data.enclosure === undefined || this.data.enclosure === null || this.data.enclosure === 'null') ? [] : this.enclosureAction(this.data.enclosure)
+    this.uploadAttData = this.dataChange(this.data).enclosure
     this.heightStyle = (this.height === '100%') ? {height: '100%'} : {'min-height': this.height}
     const height = this.height.split('px')[0] - 44
     this.heightStyleCont = (this.height === '100%') ? {height: 'calc(100% - 44px)'} : {'min-height': `${height}px`}
     this.editor = new Editor({
-      content: json2html({node: "root", child: (this.data.html === undefined || this.data.html === null || this.data.html.html === 'null') ? [] : this.data.html}),
-      editable: this.readOnly,
+      content: json2html({node: "root", child: this.dataChange(this.data).html }),
+      editable: this.readOnly ?(!this.disabled):this.readOnly ,
       enablePasteRules: true,
       extensions: [
         sid,
@@ -451,7 +469,7 @@ export default {
       },
       // 获取焦点
       onFocus: (e) => {
-          this.limits = true
+        this.limits = true
       },
     })
     document.addEventListener('keydown', function (e) {
@@ -486,6 +504,12 @@ export default {
     })
   },
   methods: {
+    dataChange(e) {
+      if(!e) return {html: [], enclosure: []}
+      const html = e.html === undefined || e.html === null || e.html === 'null' ? [] : e.html
+      const enclosure = (e.enclosure === undefined || e.enclosure === null || e.enclosure === 'null') ? [] : this.enclosureAction(e.enclosure)
+      return {html: html, enclosure: enclosure}
+    },
     getSelectedText(e) {
       const selection = window.getSelection();
       const selectedText = selection.toString()
@@ -493,7 +517,6 @@ export default {
       const clientX = e.clientX
       const clientY = e.clientX
       this.lastSelectedText = selectedText
-      console.log('selectedText', selectedText)
     },
     showAssets() {
       this.$emit('assets')
@@ -514,36 +537,36 @@ export default {
       this.paintShow = false
     },
     changeAlign(tag) {
-        // 图片对齐方式
-        this.editor.chain().setTextAlign(tag).run()
+      // 图片对齐方式
+      this.editor.chain().setTextAlign(tag).run()
     },
     changePercent(e) {
-        // 改变图片百分比
-        if(parseInt(e.target.value) > 100) {
-            this.imgSizeVal = 100
-            this.editor.chain().setImageWidth('100%').focus().run()
-        } else if(parseInt(e.target.value) < 10) {
-        } else {
-            if(this.lock) {
-                this.lock = false
-                setTimeout(() => {
-                    this.editor.chain().setImageWidth(e.target.value + '%').focus().run()
-                    this.lock = true
-                }, 500)
-            }
+      // 改变图片百分比
+      if(parseInt(e.target.value) > 100) {
+        this.imgSizeVal = 100
+        this.editor.chain().setImageWidth('100%').focus().run()
+      } else if(parseInt(e.target.value) < 10) {
+      } else {
+        if(this.lock) {
+          this.lock = false
+          setTimeout(() => {
+            this.editor.chain().setImageWidth(e.target.value + '%').focus().run()
+            this.lock = true
+          }, 500)
         }
+      }
     },
     shouldShowFn({ editor, view, state, oldState, from, to }) {
-        // BubbleMenu是否显示
-        this.$nextTick(() => {
-            this.showBubble =  editor.isActive('image')
-            if(editor.isActive('image')) {
-                this.imgSizeVal = parseInt(this.editor.getAttributes('image').width)
-            } else {
-                this.imgSizeVal = ''
-            }
-        })
-        return editor.isActive('image')
+      // BubbleMenu是否显示
+      this.$nextTick(() => {
+        this.showBubble =  editor.isActive('image')
+        if(editor.isActive('image')) {
+          this.imgSizeVal = parseInt(this.editor.getAttributes('image').width)
+        } else {
+          this.imgSizeVal = ''
+        }
+      })
+      return editor.isActive('image')
     },
     speechDown(e) {
       this.speech = {
@@ -750,11 +773,11 @@ export default {
     },
     del(index) {
       let that = this
-      // that.data.html = html2json(that.editor.getHTML()).child
-      if (this.uploadAttData[index].name === undefined) {
+      that.data.html = html2json(that.editor.getHTML()).child
+      if (!this.uploadAttData[index].name) {
         that.uploadAttData[index].active = false
         that.$emit('del', that.uploadAttData[index], (e) => {
-          if (e === undefined) {
+          if (!e) {
             that.uploadAttData.splice(index, 1)
           } else {
             if (e) {
@@ -806,7 +829,7 @@ export default {
       })
     },
     upload(e, v) { // 上传文件
-        const file = e.target.files[0]
+      const file = e.target.files[0]
       if (this.uploadType) {
         if (v === 'uploadAtt') {
           file.active = true
@@ -858,7 +881,7 @@ export default {
         this.editor.chain().focus().insertContentAt(this.selection(), html).run()
         if (this.selection() <= 6 && this.selection() > 2) this.selectionClass2(cla)
         if (this.selectionClass(cla)) {
-            this.editor.chain().focus().insertContentAt(this.selection(), '<p></p>').run()
+          this.editor.chain().focus().insertContentAt(this.selection(), '<p></p>').run()
         }
       }, 100)
     },
@@ -1008,18 +1031,18 @@ export default {
 
 <style scoped>
 
-  :deep(.w_100) {
-    width: 100% !important;
-  }
-  :deep(.w_75 ){
-    width: 75% !important;
-  }
-  :deep(.w_50 ){
-    width: 50% !important;
-  }
-  :deep(.w_25 ){
-    width: 25% !important;
-  }
+:deep(.w_100) {
+  width: 100% !important;
+}
+:deep(.w_75 ){
+  width: 75% !important;
+}
+:deep(.w_50 ){
+  width: 50% !important;
+}
+:deep(.w_25 ){
+  width: 25% !important;
+}
 :deep(p[data-sid="prohibit"]) {
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -1235,11 +1258,10 @@ export default {
   padding: 2px 5px;
   cursor: pointer;
   min-width: 60px;
-  height: 20px;
+  height: 21px;
   display: inline-block;
   line-height: 16px;
   box-sizing: border-box;
-  font-family: Arial;
   -moz-text-align-last: justify;
   text-align-last: justify;
   word-break: break-all;
@@ -1272,68 +1294,68 @@ export default {
     line-height: 14px !important;
   }
 }
-  .bubbleMenu {
-    position: relative;
-    padding: 15px;
-    background-color: #fff;
-    border-radius: 5px;
-    box-shadow: 0 1px 6px #d2d2d2;
-  }
-  .line {
-    display: flex;
-    align-items: center;
-    padding-bottom: 10px;
-  }
-  .line:last-child {
-    padding-bottom: 0
-  }
-  .percent {
-    position: relative;
-  }
-  .percent input{
-    border-radius: 4px;
-    width: 68px;
-  }
-  .percent input::-webkit-outer-spin-button,
-  .percent input::-webkit-inner-spin-button {
-    -webkit-appearance: none !important;
-  }
-  .percent input[type='number']{
-    -moz-appearance: textfield;
-    box-shadow: none;
-    border: 1px solid #8c939d;
-    padding: 5px 15px 5px 5px;
-  }
-  .symbol {
-    position: absolute;
-    right: 5px;
-    top: 5px
-  }
+.bubbleMenu {
+  position: relative;
+  padding: 15px;
+  background-color: #fff;
+  border-radius: 5px;
+  box-shadow: 0 1px 6px #d2d2d2;
+}
+.line {
+  display: flex;
+  align-items: center;
+  padding-bottom: 10px;
+}
+.line:last-child {
+  padding-bottom: 0
+}
+.percent {
+  position: relative;
+}
+.percent input{
+  border-radius: 4px;
+  width: 68px;
+}
+.percent input::-webkit-outer-spin-button,
+.percent input::-webkit-inner-spin-button {
+  -webkit-appearance: none !important;
+}
+.percent input[type='number']{
+  -moz-appearance: textfield;
+  box-shadow: none;
+  border: 1px solid #8c939d;
+  padding: 5px 15px 5px 5px;
+}
+.symbol {
+  position: absolute;
+  right: 5px;
+  top: 5px
+}
 
-  .alignmentMode {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  .segmentation {
-    height: 13px;
-    width: 1px;
-    margin: 0 5px;
-    background-color: #565656;
-  }
-  .imgBgc {
-    border-radius: 3px;
-    width: 20px;
-    height: 20px;
-    background-color: #CCCCCC;
-  }
-  .imgBgcAction {
-    background-color: #2A82E4;
-  }
-  .imgBgc > img {
-    padding: 1px;
-    width: 100%;
-    height: 100%;
-  }
+.alignmentMode {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.segmentation {
+  height: 13px;
+  width: 1px;
+  margin: 0 5px;
+  background-color: #565656;
+}
+.imgBgc {
+  border-radius: 3px;
+  width: 20px;
+  height: 20px;
+  background-color: #CCCCCC;
+}
+.imgBgcAction {
+  background-color: #2A82E4;
+}
+.imgBgc > img {
+  padding: 1px;
+  width: 100%;
+  height: 100%;
+}
 
 </style>

package/src/components/flip/src/annotationLayer.css

@@ -0,0 +1 @@
+[data-main-rotation="90"]{transform:rotate(90deg) translateY(-100%)}[data-main-rotation="180"]{transform:rotate(180deg) translate(-100%,-100%)}[data-main-rotation="270"]{transform:rotate(270deg) translateX(-100%)}.annotationLayer{--annotation-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>");--input-focus-border-color:Highlight;--input-focus-outline:1px solid Canvas;--input-unfocused-border-color:transparent;--input-disabled-border-color:transparent;--input-hover-border-color:black;--link-outline:none}@media screen and (forced-colors:active){.annotationLayer{--input-focus-border-color:CanvasText;--input-unfocused-border-color:ActiveText;--input-disabled-border-color:GrayText;--input-hover-border-color:Highlight;--link-outline:1.5px solid LinkText}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .textWidgetAnnotation :is(input,textarea):required{outline:1.5px solid selectedItem}.annotationLayer .linkAnnotation{outline:var(--link-outline)}:is(.annotationLayer .linkAnnotation):hover{-webkit-backdrop-filter:var(--hcm-highlight-filter);backdrop-filter:var(--hcm-highlight-filter)}:is(.annotationLayer .linkAnnotation)>a:hover{opacity:0!important;background:0 0!important;box-shadow:none}.annotationLayer .popupAnnotation .popup{outline:calc(1.5px * var(--scale-factor)) solid CanvasText!important;background-color:ButtonFace!important;color:ButtonText!important}.annotationLayer .highlightArea:hover::after{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-backdrop-filter:var(--hcm-highlight-filter);backdrop-filter:var(--hcm-highlight-filter);content:"";pointer-events:none}.annotationLayer .popupAnnotation.focused .popup{outline:calc(3px * var(--scale-factor)) solid Highlight!important}}.annotationLayer{position:absolute;top:0;left:0;pointer-events:none;transform-origin:0 0}.annotationLayer[data-main-rotation="90"] .norotate{transform:rotate(270deg) translateX(-100%)}.annotationLayer[data-main-rotation="180"] .norotate{transform:rotate(180deg) translate(-100%,-100%)}.annotationLayer[data-main-rotation="270"] .norotate{transform:rotate(90deg) translateY(-100%)}.annotationLayer.disabled .popup,.annotationLayer.disabled section{pointer-events:none}.annotationLayer .annotationContent{position:absolute;width:100%;height:100%;pointer-events:none}.freetext:is(.annotationLayer .annotationContent){background:0 0;border:none;inset:0;overflow:visible;white-space:nowrap;font:10px sans-serif;line-height:1.35;-webkit-user-select:none;-moz-user-select:none;user-select:none}.annotationLayer section{position:absolute;text-align:initial;pointer-events:auto;box-sizing:border-box;transform-origin:0 0}:is(.annotationLayer section):has(div.annotationContent) canvas.annotationContent{display:none}.textLayer.selecting~.annotationLayer section{pointer-events:none}.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton)>a{position:absolute;font-size:1em;top:0;left:0;width:100%;height:100%}.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton):not(.hasBorder)>a:hover{opacity:.2;background-color:rgb(255 255 0);box-shadow:0 2px 10px rgb(255 255 0)}.annotationLayer .linkAnnotation.hasBorder:hover{background-color:rgb(255 255 0 / .2)}.annotationLayer .hasBorder{background-size:100% 100%}.annotationLayer .textAnnotation img{position:absolute;cursor:pointer;width:100%;height:100%;top:0;left:0}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input,.annotationLayer .choiceWidgetAnnotation select,.annotationLayer .textWidgetAnnotation :is(input,textarea){background-image:var(--annotation-unfocused-field-background);border:2px solid var(--input-unfocused-border-color);box-sizing:border-box;font:calc(9px * var(--scale-factor)) sans-serif;height:100%;margin:0;vertical-align:top;width:100%}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .textWidgetAnnotation :is(input,textarea):required{outline:1.5px solid red}.annotationLayer .choiceWidgetAnnotation select option{padding:0}.annotationLayer .buttonWidgetAnnotation.radioButton input{border-radius:50%}.annotationLayer .textWidgetAnnotation textarea{resize:none}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input[disabled],.annotationLayer .choiceWidgetAnnotation select[disabled],.annotationLayer .textWidgetAnnotation [disabled]:is(input,textarea){background:0 0;border:2px solid var(--input-disabled-border-color);cursor:not-allowed}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .textWidgetAnnotation :is(input,textarea):hover{border:2px solid var(--input-hover-border-color)}.annotationLayer .buttonWidgetAnnotation.checkBox input:hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .textWidgetAnnotation :is(input,textarea):hover{border-radius:2px}.annotationLayer .choiceWidgetAnnotation select:focus,.annotationLayer .textWidgetAnnotation :is(input,textarea):focus{background:0 0;border:2px solid var(--input-focus-border-color);border-radius:2px;outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) :focus{background-image:none;background-color:transparent}.annotationLayer .buttonWidgetAnnotation.checkBox :focus{border:2px solid var(--input-focus-border-color);border-radius:2px;outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation.radioButton :focus{border:2px solid var(--input-focus-border-color);outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before{background-color:CanvasText;content:"";display:block;position:absolute}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before{height:80%;left:45%;width:1px}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before{transform:rotate(45deg)}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after{transform:rotate(-45deg)}.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before{border-radius:50%;height:50%;left:25%;top:25%;width:50%}.annotationLayer .textWidgetAnnotation input.comb{font-family:monospace;padding-left:2px;padding-right:0}.annotationLayer .textWidgetAnnotation input.comb:focus{width:103%}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{-webkit-appearance:none;-moz-appearance:none;appearance:none}.annotationLayer .fileAttachmentAnnotation .popupTriggerArea{height:100%;width:100%}.annotationLayer .popupAnnotation{position:absolute;font-size:calc(9px * var(--scale-factor));pointer-events:none;width:-moz-max-content;width:max-content;max-width:45%;height:auto}.annotationLayer .popup{background-color:rgb(255 255 153);box-shadow:0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor)) rgb(136 136 136);border-radius:calc(2px * var(--scale-factor));outline:1.5px solid rgb(255 255 74);padding:calc(6px * var(--scale-factor));cursor:pointer;font:message-box;white-space:normal;word-wrap:break-word;pointer-events:auto}.annotationLayer .popupAnnotation.focused .popup{outline-width:3px}.annotationLayer .popup *{font-size:calc(9px * var(--scale-factor))}.annotationLayer .popup>.header{display:inline-block}.annotationLayer .popup>.header h1{display:inline}.annotationLayer .popup>.header .popupDate{display:inline-block;margin-left:calc(5px * var(--scale-factor));width:-moz-fit-content;width:fit-content}.annotationLayer .popupContent{border-top:1px solid rgb(51 51 51);margin-top:calc(2px * var(--scale-factor));padding-top:calc(2px * var(--scale-factor))}.annotationLayer .richText>*{white-space:pre-wrap;font-size:calc(9px * var(--scale-factor))}.annotationLayer .popupTriggerArea{cursor:pointer}.annotationLayer section svg{position:absolute;width:100%;height:100%;top:0;left:0}.annotationLayer .annotationTextContent{position:absolute;width:100%;height:100%;opacity:0;color:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}:is(.annotationLayer .annotationTextContent) span{width:100%;display:inline-block}.annotationLayer svg.quadrilateralsContainer{contain:strict;width:0;height:0;position:absolute;top:0;left:0;z-index:-1}