diff --git a/src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj b/src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj index 7e752e89..c33275fe 100644 --- a/src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj +++ b/src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj @@ -1,7 +1,7 @@  - 10.0.4-beta03 + 10.0.4 diff --git a/src/components/BootstrapBlazor.PdfReader/wwwroot/css/pdf_viewer.css b/src/components/BootstrapBlazor.PdfReader/wwwroot/css/pdf_viewer.css index 85ea04d8..5a5b8cc0 100644 --- a/src/components/BootstrapBlazor.PdfReader/wwwroot/css/pdf_viewer.css +++ b/src/components/BootstrapBlazor.PdfReader/wwwroot/css/pdf_viewer.css @@ -13,14 +13,5279 @@ * limitations under the License. */ +.messageBar { + --closing-button-icon: url(images/messageBar_closingButton.svg); + --message-bar-close-button-color: var(--text-primary-color); + --message-bar-close-button-color-hover: var(--text-primary-color); + --message-bar-close-button-border-radius: 4px; + --message-bar-close-button-border: none; + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); + --message-bar-close-button-hover-bg-color: var(--csstools-light-dark-toggle--0, rgb(21 20 26 / 0.14)); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); + --message-bar-close-button-active-bg-color: var(--csstools-light-dark-toggle--1, rgb(21 20 26 / 0.21)); + --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); + --message-bar-close-button-focus-bg-color: var(--csstools-light-dark-toggle--2, rgb(21 20 26 / 0.07)); +} + +@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { + .messageBar { + --message-bar-close-button-hover-bg-color: light-dark( rgb(21 20 26 / 0.14), rgb(251 251 254 / 0.14) ); + --message-bar-close-button-active-bg-color: light-dark( rgb(21 20 26 / 0.21), rgb(251 251 254 / 0.21) ); + --message-bar-close-button-focus-bg-color: light-dark( rgb(21 20 26 / 0.07), rgb(251 251 254 / 0.07) ); + } +} + +@supports not (color: light-dark(tan, tan)) { + + .messageBar * { + --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); + --message-bar-close-button-hover-bg-color: var(--csstools-light-dark-toggle--0, rgb(21 20 26 / 0.14)); + --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); + --message-bar-close-button-active-bg-color: var(--csstools-light-dark-toggle--1, rgb(21 20 26 / 0.21)); + --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); + --message-bar-close-button-focus-bg-color: var(--csstools-light-dark-toggle--2, rgb(21 20 26 / 0.07)); + } +} + +@media screen and (forced-colors: active) { + + .messageBar { + --message-bar-close-button-color: ButtonText; + --message-bar-close-button-border: 1px solid ButtonText; + --message-bar-close-button-hover-bg-color: ButtonText; + --message-bar-close-button-active-bg-color: ButtonText; + --message-bar-close-button-focus-bg-color: ButtonText; + --message-bar-close-button-color-hover: HighlightText; + } +} + +.messageBar { + display: flex; + position: relative; + padding: 8px 8px 8px 16px; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 8px; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + border-radius: 4px; + border: 1px solid var(--message-bar-border-color); + background: var(--message-bar-bg-color); + color: var(--message-bar-fg-color); +} + + .messageBar > div { + display: flex; + align-items: flex-start; + gap: 8px; + align-self: stretch; + } + +:is(.messageBar > div)::before { + content: ""; + display: inline-block; + width: 16px; + height: 16px; + -webkit-mask-image: var(--message-bar-icon); + mask-image: var(--message-bar-icon); + -webkit-mask-size: cover; + mask-size: cover; + background-color: var(--message-bar-icon-color); + flex-shrink: 0; +} + +.messageBar button { + cursor: pointer; +} + +:is(.messageBar button):focus-visible { + outline: var(--focus-ring-outline); + outline-offset: 2px; +} + +.messageBar .closeButton { + width: 32px; + height: 32px; + background: none; + border-radius: var(--message-bar-close-button-border-radius); + border: var(--message-bar-close-button-border); + display: flex; + align-items: center; + justify-content: center; +} + +:is(.messageBar .closeButton)::before { + content: ""; + display: inline-block; + width: 16px; + height: 16px; + -webkit-mask-image: var(--closing-button-icon); + mask-image: var(--closing-button-icon); + -webkit-mask-size: cover; + mask-size: cover; + background-color: var(--message-bar-close-button-color); +} + +:is(.messageBar .closeButton):is(:hover,:active,:focus)::before { + background-color: var(--message-bar-close-button-color-hover); +} + +:is(.messageBar .closeButton):hover { + background-color: var(--message-bar-close-button-hover-bg-color); +} + +:is(.messageBar .closeButton):active { + background-color: var(--message-bar-close-button-active-bg-color); +} + +:is(.messageBar .closeButton):focus { + background-color: var(--message-bar-close-button-focus-bg-color); +} + +:is(.messageBar .closeButton) > span { + display: inline-block; + width: 0; + height: 0; + overflow: hidden; +} + +#editorUndoBar { + --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) #fbfbfe; + --text-primary-color: var(--csstools-light-dark-toggle--3, #15141a); + --message-bar-icon: url(images/messageBar_info.svg); + --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) #73a7f3; + --message-bar-icon-color: var(--csstools-light-dark-toggle--4, #0060df); + --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) #003070; + --message-bar-bg-color: var(--csstools-light-dark-toggle--5, #deeafc); + --message-bar-fg-color: var(--text-primary-color); + --csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); + --message-bar-border-color: var(--csstools-light-dark-toggle--6, rgb(0 0 0 / 0.08)); + --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); + --undo-button-bg-color: var(--csstools-light-dark-toggle--7, rgb(21 20 26 / 0.07)); + --csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.14); + --undo-button-bg-color-hover: var(--csstools-light-dark-toggle--8, rgb(21 20 26 / 0.14)); + --csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.21); + --undo-button-bg-color-active: var(--csstools-light-dark-toggle--9, rgb(21 20 26 / 0.21)); + --csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) #0df; + --undo-button-border: 1px solid var(--csstools-light-dark-toggle--10, #0060df); + --undo-button-fg-color: var(--message-bar-fg-color); + --undo-button-fg-color-hover: var(--undo-button-fg-color); + --undo-button-fg-color-active: var(--undo-button-fg-color); +} + +@supports (color: light-dark(red, red)) { + #editorUndoBar { + --text-primary-color: light-dark(#15141a, #fbfbfe); + --message-bar-icon-color: light-dark(#0060df, #73a7f3); + --message-bar-bg-color: light-dark(#deeafc, #003070); + } +} + +@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { + #editorUndoBar { + --message-bar-border-color: light-dark( rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.08) ); + --undo-button-bg-color: light-dark( rgb(21 20 26 / 0.07), rgb(255 255 255 / 0.08) ); + --undo-button-bg-color-hover: light-dark( rgb(21 20 26 / 0.14), rgb(255 255 255 / 0.14) ); + --undo-button-bg-color-active: light-dark( rgb(21 20 26 / 0.21), rgb(255 255 255 / 0.21) ); + } +} + +@supports (color: light-dark(red, red)) { + #editorUndoBar { + --undo-button-border: 1px solid light-dark(#0060df, #0df); + } +} + +@supports not (color: light-dark(tan, tan)) { + + #editorUndoBar * { + --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) #fbfbfe; + --text-primary-color: var(--csstools-light-dark-toggle--3, #15141a); + --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) #73a7f3; + --message-bar-icon-color: var(--csstools-light-dark-toggle--4, #0060df); + --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) #003070; + --message-bar-bg-color: var(--csstools-light-dark-toggle--5, #deeafc); + --csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); + --message-bar-border-color: var(--csstools-light-dark-toggle--6, rgb(0 0 0 / 0.08)); + --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); + --undo-button-bg-color: var(--csstools-light-dark-toggle--7, rgb(21 20 26 / 0.07)); + --csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.14); + --undo-button-bg-color-hover: var(--csstools-light-dark-toggle--8, rgb(21 20 26 / 0.14)); + --csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.21); + --undo-button-bg-color-active: var(--csstools-light-dark-toggle--9, rgb(21 20 26 / 0.21)); + --csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) #0df; + --undo-button-border: 1px solid var(--csstools-light-dark-toggle--10, #0060df); + } +} + +@media screen and (forced-colors: active) { + + #editorUndoBar { + --text-primary-color: CanvasText; + --message-bar-icon-color: CanvasText; + --message-bar-bg-color: Canvas; + --message-bar-border-color: CanvasText; + --undo-button-bg-color: ButtonText; + --undo-button-bg-color-hover: SelectedItem; + --undo-button-bg-color-active: SelectedItem; + --undo-button-fg-color: ButtonFace; + --undo-button-fg-color-hover: SelectedItemText; + --undo-button-fg-color-active: SelectedItemText; + --undo-button-border: none; + } +} + +#editorUndoBar { + position: fixed; + top: 50px; + left: 50%; + transform: translateX(-50%); + z-index: 10; + padding-block: 8px; + padding-inline: 16px 8px; + font: menu; + font-size: 15px; + cursor: default; +} + + #editorUndoBar button { + cursor: pointer; + } + + #editorUndoBar #editorUndoBarUndoButton { + border-radius: 4px; + font-weight: 590; + line-height: 19.5px; + color: var(--undo-button-fg-color); + border: var(--undo-button-border); + padding: 4px 16px; + margin-inline-start: 8px; + height: 32px; + background-color: var(--undo-button-bg-color); + } + +:is(#editorUndoBar #editorUndoBarUndoButton):hover { + background-color: var(--undo-button-bg-color-hover); + color: var(--undo-button-fg-color-hover); +} + +:is(#editorUndoBar #editorUndoBarUndoButton):active { + background-color: var(--undo-button-bg-color-active); + color: var(--undo-button-fg-color-active); +} + +#editorUndoBar > div { + align-items: center; +} + +.dialog { + --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) #1c1b22; + --dialog-bg-color: var(--csstools-light-dark-toggle--11, white); + --csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) #1c1b22; + --dialog-border-color: var(--csstools-light-dark-toggle--12, white); + --csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) #15141a; + --dialog-shadow: 0 2px 14px 0 var(--csstools-light-dark-toggle--13, rgb(58 57 68 / 0.2)); + --csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) #fbfbfe; + --text-primary-color: var(--csstools-light-dark-toggle--14, #15141a); + --csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) #cfcfd8; + --text-secondary-color: var(--csstools-light-dark-toggle--15, #5b5b66); + --hover-filter: brightness(0.9); + --csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) #0df; + --link-fg-color: var(--csstools-light-dark-toggle--16, #0060df); + --csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) #80ebff; + --link-hover-fg-color: var(--csstools-light-dark-toggle--17, #0250bb); + --csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) #52525e; + --separator-color: var(--csstools-light-dark-toggle--18, #f0f0f4); + --textarea-border-color: #8f8f9d; + --csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) #42414d; + --textarea-bg-color: var(--csstools-light-dark-toggle--19, white); + --textarea-fg-color: var(--text-secondary-color); + --csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) #2b2a33; + --radio-bg-color: var(--csstools-light-dark-toggle--20, #f0f0f4); + --csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) #15141a; + --radio-checked-bg-color: var(--csstools-light-dark-toggle--21, #fbfbfe); + --radio-border-color: #8f8f9d; + --csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) #0df; + --radio-checked-border-color: var(--csstools-light-dark-toggle--22, #0060df); + --csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); + --button-secondary-bg-color: var(--csstools-light-dark-toggle--23, rgb(21 20 26 / 0.07)); + --button-secondary-fg-color: var(--text-primary-color); + --button-secondary-border-color: var(--button-secondary-bg-color); + --csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); + --button-secondary-active-bg-color: var(--csstools-light-dark-toggle--24, rgb(21 20 26 / 0.21)); + --button-secondary-active-fg-color: var(--button-secondary-fg-color); + --button-secondary-active-border-color: var(--button-secondary-bg-color); + --csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); + --button-secondary-hover-bg-color: var(--csstools-light-dark-toggle--25, rgb(21 20 26 / 0.14)); + --button-secondary-hover-fg-color: var(--button-secondary-fg-color); + --button-secondary-hover-border-color: var(--button-secondary-hover-bg-color); + --button-secondary-disabled-bg-color: var(--button-secondary-bg-color); + --button-secondary-disabled-border-color: var( --button-secondary-border-color ); + --button-secondary-disabled-fg-color: var(--button-secondary-fg-color); + --csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) #0df; + --button-primary-bg-color: var(--csstools-light-dark-toggle--26, #0060df); + --csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) #15141a; + --button-primary-fg-color: var(--csstools-light-dark-toggle--27, #fbfbfe); + --button-primary-border-color: var(--button-primary-bg-color); + --csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) #aaf2ff; + --button-primary-active-bg-color: var(--csstools-light-dark-toggle--28, #054096); + --button-primary-active-fg-color: var(--button-primary-fg-color); + --button-primary-active-border-color: var(--button-primary-active-bg-color); + --csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) #80ebff; + --button-primary-hover-bg-color: var(--csstools-light-dark-toggle--29, #0250bb); + --button-primary-hover-fg-color: var(--button-primary-fg-color); + --button-primary-hover-border-color: var(--button-primary-hover-bg-color); + --button-primary-disabled-bg-color: var(--button-primary-bg-color); + --button-primary-disabled-border-color: var(--button-primary-border-color); + --button-primary-disabled-fg-color: var(--button-primary-fg-color); + --button-disabled-opacity: 0.4; + --csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) #42414d; + --input-text-bg-color: var(--csstools-light-dark-toggle--30, white); + --input-text-fg-color: var(--text-primary-color); +} + +@supports (color: light-dark(red, red)) { + .dialog { + --dialog-bg-color: light-dark(white, #1c1b22); + --dialog-border-color: light-dark(white, #1c1b22); + } +} + +@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { + .dialog { + --dialog-shadow: 0 2px 14px 0 light-dark(rgb(58 57 68 / 0.2), #15141a); + } +} + +@supports (color: light-dark(red, red)) { + .dialog { + --text-primary-color: light-dark(#15141a, #fbfbfe); + --text-secondary-color: light-dark(#5b5b66, #cfcfd8); + --link-fg-color: light-dark(#0060df, #0df); + --link-hover-fg-color: light-dark(#0250bb, #80ebff); + --separator-color: light-dark(#f0f0f4, #52525e); + --textarea-bg-color: light-dark(white, #42414d); + --radio-bg-color: light-dark(#f0f0f4, #2b2a33); + --radio-checked-bg-color: light-dark(#fbfbfe, #15141a); + --radio-checked-border-color: light-dark(#0060df, #0df); + } +} + +@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { + .dialog { + --button-secondary-bg-color: light-dark( rgb(21 20 26 / 0.07), rgb(251 251 254 / 0.07) ); + --button-secondary-active-bg-color: light-dark( rgb(21 20 26 / 0.21), rgb(251 251 254 / 0.21) ); + --button-secondary-hover-bg-color: light-dark( rgb(21 20 26 / 0.14), rgb(251 251 254 / 0.14) ); + } +} + +@supports (color: light-dark(red, red)) { + .dialog { + --button-primary-bg-color: light-dark(#0060df, #0df); + --button-primary-fg-color: light-dark(#fbfbfe, #15141a); + --button-primary-active-bg-color: light-dark(#054096, #aaf2ff); + --button-primary-hover-bg-color: light-dark(#0250bb, #80ebff); + --input-text-bg-color: light-dark(white, #42414d); + } +} + +@supports not (color: light-dark(tan, tan)) { + + .dialog * { + --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) #1c1b22; + --dialog-bg-color: var(--csstools-light-dark-toggle--11, white); + --csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) #1c1b22; + --dialog-border-color: var(--csstools-light-dark-toggle--12, white); + --csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) #15141a; + --dialog-shadow: 0 2px 14px 0 var(--csstools-light-dark-toggle--13, rgb(58 57 68 / 0.2)); + --csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) #fbfbfe; + --text-primary-color: var(--csstools-light-dark-toggle--14, #15141a); + --csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) #cfcfd8; + --text-secondary-color: var(--csstools-light-dark-toggle--15, #5b5b66); + --csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) #0df; + --link-fg-color: var(--csstools-light-dark-toggle--16, #0060df); + --csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) #80ebff; + --link-hover-fg-color: var(--csstools-light-dark-toggle--17, #0250bb); + --csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) #52525e; + --separator-color: var(--csstools-light-dark-toggle--18, #f0f0f4); + --csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) #42414d; + --textarea-bg-color: var(--csstools-light-dark-toggle--19, white); + --csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) #2b2a33; + --radio-bg-color: var(--csstools-light-dark-toggle--20, #f0f0f4); + --csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) #15141a; + --radio-checked-bg-color: var(--csstools-light-dark-toggle--21, #fbfbfe); + --csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) #0df; + --radio-checked-border-color: var(--csstools-light-dark-toggle--22, #0060df); + --csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); + --button-secondary-bg-color: var(--csstools-light-dark-toggle--23, rgb(21 20 26 / 0.07)); + --csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); + --button-secondary-active-bg-color: var(--csstools-light-dark-toggle--24, rgb(21 20 26 / 0.21)); + --csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); + --button-secondary-hover-bg-color: var(--csstools-light-dark-toggle--25, rgb(21 20 26 / 0.14)); + --csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) #0df; + --button-primary-bg-color: var(--csstools-light-dark-toggle--26, #0060df); + --csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) #15141a; + --button-primary-fg-color: var(--csstools-light-dark-toggle--27, #fbfbfe); + --csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) #aaf2ff; + --button-primary-active-bg-color: var(--csstools-light-dark-toggle--28, #054096); + --csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) #80ebff; + --button-primary-hover-bg-color: var(--csstools-light-dark-toggle--29, #0250bb); + --csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) #42414d; + --input-text-bg-color: var(--csstools-light-dark-toggle--30, white); + } +} + +@media (prefers-color-scheme: dark) { + + .dialog { + --hover-filter: brightness(1.4); + --button-disabled-opacity: 0.6; + } +} + +@media screen and (forced-colors: active) { + + .dialog { + --dialog-bg-color: Canvas; + --dialog-border-color: CanvasText; + --dialog-shadow: none; + --text-primary-color: CanvasText; + --text-secondary-color: CanvasText; + --hover-filter: none; + --link-fg-color: LinkText; + --link-hover-fg-color: LinkText; + --separator-color: CanvasText; + --textarea-border-color: ButtonBorder; + --textarea-bg-color: Field; + --textarea-fg-color: ButtonText; + --radio-bg-color: ButtonFace; + --radio-checked-bg-color: ButtonFace; + --radio-border-color: ButtonText; + --radio-checked-border-color: ButtonText; + --button-secondary-bg-color: ButtonFace; + --button-secondary-fg-color: ButtonText; + --button-secondary-border-color: ButtonText; + --button-secondary-active-bg-color: HighlightText; + --button-secondary-active-fg-color: SelectedItem; + --button-secondary-active-border-color: ButtonText; + --button-secondary-hover-bg-color: HighlightText; + --button-secondary-hover-fg-color: SelectedItem; + --button-secondary-hover-border-color: SelectedItem; + --button-secondary-disabled-fg-color: GrayText; + --button-secondary-disabled-border-color: GrayText; + --button-primary-bg-color: ButtonText; + --button-primary-fg-color: ButtonFace; + --button-primary-border-color: ButtonText; + --button-primary-active-bg-color: SelectedItem; + --button-primary-active-fg-color: HighlightText; + --button-primary-active-border-color: ButtonText; + --button-primary-hover-bg-color: SelectedItem; + --button-primary-hover-fg-color: HighlightText; + --button-primary-hover-border-color: SelectedItem; + --button-primary-disabled-bg-color: GrayText; + --button-primary-disabled-fg-color: ButtonFace; + --button-primary-disabled-border-color: GrayText; + --button-disabled-opacity: 1; + --input-text-bg-color: Field; + --input-text-fg-color: FieldText; + } +} + +.dialog { + font: message-box; + font-size: 13px; + font-weight: 400; + line-height: 150%; + border-radius: 4px; + padding: 12px 16px; + border: 1px solid var(--dialog-border-color); + background: var(--dialog-bg-color); + color: var(--text-primary-color); + box-shadow: var(--dialog-shadow); +} + +:is(.dialog .mainContainer) *:focus-visible { + outline: var(--focus-ring-outline); + outline-offset: 2px; +} + +:is(.dialog .mainContainer) .title { + display: flex; + width: auto; + flex-direction: column; + justify-content: flex-end; + align-items: flex-start; + gap: 12px; +} + +:is(:is(.dialog .mainContainer) .title) > span { + font-size: 13px; + font-style: normal; + font-weight: 590; + line-height: 150%; +} + +:is(.dialog .mainContainer) .dialogSeparator { + width: 100%; + height: 0; + margin-block: 4px; + border-top: 1px solid var(--separator-color); + border-bottom: none; +} + +:is(.dialog .mainContainer) .dialogButtonsGroup { + display: flex; + gap: 12px; + align-self: flex-end; +} + +:is(.dialog .mainContainer) .radio { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 4px; +} + +:is(:is(.dialog .mainContainer) .radio) > .radioButton { + display: flex; + gap: 8px; + align-self: stretch; + align-items: center; +} + +:is(:is(:is(.dialog .mainContainer) .radio) > .radioButton) input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + box-sizing: border-box; + width: 16px; + height: 16px; + border-radius: 50%; + background-color: var(--radio-bg-color); + border: 1px solid var(--radio-border-color); +} + +:is(:is(:is(:is(.dialog .mainContainer) .radio) > .radioButton) input):hover { + filter: var(--hover-filter); +} + +:is(:is(:is(:is(.dialog .mainContainer) .radio) > .radioButton) input):checked { + background-color: var(--radio-checked-bg-color); + border: 4px solid var(--radio-checked-border-color); +} + +:is(:is(.dialog .mainContainer) .radio) > .radioLabel { + display: flex; + padding-inline-start: 24px; + align-items: flex-start; + gap: 10px; + align-self: stretch; +} + +:is(:is(:is(.dialog .mainContainer) .radio) > .radioLabel) > span { + flex: 1 0 0; + font-size: 11px; + color: var(--text-secondary-color); +} + +:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton)) { + border-radius: 4px; + border: 1px solid; + font: menu; + font-weight: 590; + font-size: 13px; + padding: 4px 16px; + width: auto; + height: 32px; +} + +:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):hover { + cursor: pointer; + filter: var(--hover-filter); +} + +:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))) > span { + color: inherit; + font: inherit; +} + +.secondaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))) { + color: var(--button-secondary-fg-color); + background-color: var(--button-secondary-bg-color); + border-color: var(--button-secondary-border-color); +} + + .secondaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):hover { + color: var(--button-secondary-hover-fg-color); + background-color: var(--button-secondary-hover-bg-color); + border-color: var(--button-secondary-hover-border-color); + } + + .secondaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):active { + color: var(--button-secondary-active-fg-color); + background-color: var(--button-secondary-active-bg-color); + border-color: var(--button-secondary-active-border-color); + } + + .secondaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):disabled { + background-color: var(--button-secondary-disabled-bg-color); + border-color: var(--button-secondary-disabled-border-color); + color: var(--button-secondary-disabled-fg-color); + opacity: var(--button-disabled-opacity); + } + +.primaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))) { + color: var(--button-primary-fg-color); + background-color: var(--button-primary-bg-color); + border-color: var(--button-primary-border-color); + opacity: 1; +} + + .primaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):hover { + color: var(--button-primary-hover-fg-color); + background-color: var(--button-primary-hover-bg-color); + border-color: var(--button-primary-hover-border-color); + } + + .primaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):active { + color: var(--button-primary-active-fg-color); + background-color: var(--button-primary-active-bg-color); + border-color: var(--button-primary-active-border-color); + } + + .primaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):disabled { + background-color: var(--button-primary-disabled-bg-color); + border-color: var(--button-primary-disabled-border-color); + color: var(--button-primary-disabled-fg-color); + opacity: var(--button-disabled-opacity); + } + +:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):disabled { + pointer-events: none; +} + +:is(.dialog .mainContainer) a { + color: var(--link-fg-color); +} + +:is(:is(.dialog .mainContainer) a):hover { + color: var(--link-hover-fg-color); +} + +:is(.dialog .mainContainer) textarea { + font: inherit; + padding: 8px; + resize: none; + margin: 0; + box-sizing: border-box; + border-radius: 4px; + border: 1px solid var(--textarea-border-color); + background: var(--textarea-bg-color); + color: var(--textarea-fg-color); +} + +:is(:is(.dialog .mainContainer) textarea):focus { + outline-offset: 0; + border-color: transparent; +} + +:is(:is(.dialog .mainContainer) textarea):disabled { + pointer-events: none; + opacity: 0.4; +} + +:is(.dialog .mainContainer) input[type="text"] { + background-color: var(--input-text-bg-color); + color: var(--input-text-fg-color); +} + +:is(.dialog .mainContainer) .messageBar { + --csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) #5a3100; + --message-bar-bg-color: var(--csstools-light-dark-toggle--31, #ffebcd); + --csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) #fbfbfe; + --message-bar-fg-color: var(--csstools-light-dark-toggle--32, #15141a); + --csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); + --message-bar-border-color: var(--csstools-light-dark-toggle--33, rgb(0 0 0 / 0.08)); + --message-bar-icon: url(images/messageBar_warning.svg); + --csstools-light-dark-toggle--34: var(--csstools-color-scheme--light) #e49c49; + --message-bar-icon-color: var(--csstools-light-dark-toggle--34, #cd411e); +} + +@supports (color: light-dark(red, red)) { + :is(.dialog .mainContainer) .messageBar { + --message-bar-bg-color: light-dark(#ffebcd, #5a3100); + --message-bar-fg-color: light-dark(#15141a, #fbfbfe); + } +} + +@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { + :is(.dialog .mainContainer) .messageBar { + --message-bar-border-color: light-dark( rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.08) ); + } +} + +@supports (color: light-dark(red, red)) { + :is(.dialog .mainContainer) .messageBar { + --message-bar-icon-color: light-dark(#cd411e, #e49c49); + } +} + +@supports not (color: light-dark(tan, tan)) { + + :is(:is(.dialog .mainContainer) .messageBar) * { + --csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) #5a3100; + --message-bar-bg-color: var(--csstools-light-dark-toggle--31, #ffebcd); + --csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) #fbfbfe; + --message-bar-fg-color: var(--csstools-light-dark-toggle--32, #15141a); + --csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); + --message-bar-border-color: var(--csstools-light-dark-toggle--33, rgb(0 0 0 / 0.08)); + --csstools-light-dark-toggle--34: var(--csstools-color-scheme--light) #e49c49; + --message-bar-icon-color: var(--csstools-light-dark-toggle--34, #cd411e); + } +} + +@media screen and (forced-colors: active) { + + :is(.dialog .mainContainer) .messageBar { + --message-bar-bg-color: HighlightText; + --message-bar-fg-color: CanvasText; + --message-bar-border-color: CanvasText; + --message-bar-icon-color: CanvasText; + } +} + +:is(.dialog .mainContainer) .messageBar { + align-self: stretch; +} + +:is(:is(:is(.dialog .mainContainer) .messageBar) > div)::before, :is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div { + margin-block: 4px; +} + +:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 8px; + flex: 1 0 0; +} + +:is(:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div) .title { + font-size: 13px; + font-weight: 590; +} + +:is(:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div) .description { + font-size: 13px; +} + +:is(.dialog .mainContainer) .toggler { + display: flex; + align-items: center; + gap: 8px; + align-self: stretch; +} + +:is(:is(.dialog .mainContainer) .toggler) > .togglerLabel { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.textLayer { + position: absolute; + text-align: initial; + inset: 0; + overflow: clip; + opacity: 1; + line-height: 1; + -webkit-text-size-adjust: none; + -moz-text-size-adjust: none; + text-size-adjust: none; + forced-color-adjust: none; + transform-origin: 0 0; + caret-color: CanvasText; + z-index: 0; +} + + .textLayer.highlighting { + touch-action: none; + } + + .textLayer :is(span,br) { + color: transparent; + position: absolute; + white-space: pre; + cursor: text; + transform-origin: 0% 0%; + } + + .textLayer > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) { + z-index: 1; + } + + .textLayer span.markedContent { + top: 0; + height: 0; + } + + .textLayer span[role="img"] { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + cursor: default; + } + + .textLayer .highlight { + --highlight-bg-color: rgb(180 0 170 / 0.25); + --highlight-selected-bg-color: rgb(0 100 0 / 0.25); + --highlight-backdrop-filter: none; + --highlight-selected-backdrop-filter: none; + } + +@media screen and (forced-colors: active) { + + .textLayer .highlight { + --highlight-bg-color: transparent; + --highlight-selected-bg-color: transparent; + --highlight-backdrop-filter: var(--hcm-highlight-filter); + --highlight-selected-backdrop-filter: var( --hcm-highlight-selected-filter ); + } +} + +.textLayer .highlight { + margin: -1px; + padding: 1px; + background-color: var(--highlight-bg-color); + -webkit-backdrop-filter: var(--highlight-backdrop-filter); + backdrop-filter: var(--highlight-backdrop-filter); + border-radius: 4px; +} + +.appended:is(.textLayer .highlight) { + position: initial; +} + +.begin:is(.textLayer .highlight) { + border-radius: 4px 0 0 4px; +} + +.end:is(.textLayer .highlight) { + border-radius: 0 4px 4px 0; +} + +.middle:is(.textLayer .highlight) { + border-radius: 0; +} + +.selected:is(.textLayer .highlight) { + background-color: var(--highlight-selected-bg-color); + -webkit-backdrop-filter: var(--highlight-selected-backdrop-filter); + backdrop-filter: var(--highlight-selected-backdrop-filter); +} + +.textLayer ::-moz-selection { + background: rgba(0 0 255 / 0.25); + background: color-mix(in srgb, AccentColor, transparent 75%); +} + +.textLayer ::selection { + background: rgba(0 0 255 / 0.25); + background: color-mix(in srgb, AccentColor, transparent 75%); +} + +.textLayer br::-moz-selection { + background: transparent; +} + +.textLayer br::selection { + background: transparent; +} + +.textLayer .endOfContent { + display: block; + position: absolute; + inset: 100% 0 0; + z-index: 0; + cursor: default; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.textLayer.selecting .endOfContent { + top: 0; +} + +.annotationLayer { + --csstools-color-scheme--light: initial; + color-scheme: only light; + --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,"); + --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 .textWidgetAnnotation :is(input,textarea):required, .annotationLayer .choiceWidgetAnnotation select:required, .annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input: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: none !important; + box-shadow: none; + } + + .annotationLayer .popupAnnotation .popup { + outline: calc(1.5px * var(--total-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(--total-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 section, .annotationLayer.disabled .popup { + pointer-events: none; + } + + .annotationLayer .annotationContent { + position: absolute; + width: 100%; + height: 100%; + pointer-events: none; + } + +.freetext:is(.annotationLayer .annotationContent) { + background: transparent; + border: none; + inset: 0; + overflow: visible; + white-space: nowrap; + font: 10px sans-serif; + line-height: 1.35; +} + +.annotationLayer section { + position: absolute; + text-align: initial; + pointer-events: auto; + box-sizing: border-box; + transform-origin: 0 0; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +:is(.annotationLayer section):has(div.annotationContent) canvas.annotationContent { + display: none; +} + +:is(.annotationLayer section) .overlaidText { + position: absolute; + top: 0; + left: 0; + width: 0; + height: 0; + display: inline-block; + overflow: hidden; +} + +.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: 0.2; + background-color: rgb(255 255 0); +} + +.annotationLayer .linkAnnotation.hasBorder:hover { + background-color: rgb(255 255 0 / 0.2); +} + +.annotationLayer .hasBorder { + background-size: 100% 100%; +} + +.annotationLayer .textAnnotation img { + position: absolute; + cursor: pointer; + width: 100%; + height: 100%; + top: 0; + left: 0; +} + +.annotationLayer .textWidgetAnnotation :is(input,textarea), .annotationLayer .choiceWidgetAnnotation select, .annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input { + background-image: var(--annotation-unfocused-field-background); + border: 2px solid var(--input-unfocused-border-color); + box-sizing: border-box; + font: calc(9px * var(--total-scale-factor)) sans-serif; + height: 100%; + margin: 0; + vertical-align: top; + width: 100%; +} + + .annotationLayer .textWidgetAnnotation :is(input,textarea):required, .annotationLayer .choiceWidgetAnnotation select:required, .annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input: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 .textWidgetAnnotation [disabled]:is(input,textarea), .annotationLayer .choiceWidgetAnnotation select[disabled], .annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input[disabled] { + background: none; + border: 2px solid var(--input-disabled-border-color); + cursor: not-allowed; +} + +.annotationLayer .textWidgetAnnotation :is(input,textarea):hover, .annotationLayer .choiceWidgetAnnotation select:hover, .annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:hover { + border: 2px solid var(--input-hover-border-color); +} + +.annotationLayer .textWidgetAnnotation :is(input,textarea):hover, .annotationLayer .choiceWidgetAnnotation select:hover, .annotationLayer .buttonWidgetAnnotation.checkBox input:hover { + border-radius: 2px; +} + +.annotationLayer .textWidgetAnnotation :is(input,textarea):focus, .annotationLayer .choiceWidgetAnnotation select:focus { + background: none; + 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::before, .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after, .annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before { + background-color: CanvasText; + content: ""; + display: block; + position: absolute; +} + +.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before, .annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after { + 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(--total-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); + color: black; + box-shadow: 0 calc(2px * var(--total-scale-factor)) calc(5px * var(--total-scale-factor)) rgb(136 136 136); + border-radius: calc(2px * var(--total-scale-factor)); + outline: 1.5px solid rgb(255 255 74); + padding: calc(6px * var(--total-scale-factor)); + cursor: pointer; + font: message-box; + white-space: normal; + word-wrap: break-word; + pointer-events: auto; + -webkit-user-select: text; + -moz-user-select: text; + user-select: text; +} + +.annotationLayer .popupAnnotation.focused .popup { + outline-width: 3px; +} + +.annotationLayer .popup * { + font-size: calc(9px * var(--total-scale-factor)); +} + +.annotationLayer .popup > .header { + display: inline-block; +} + + .annotationLayer .popup > .header > .title { + display: inline; + font-weight: bold; + } + + .annotationLayer .popup > .header .popupDate { + display: inline-block; + margin-left: calc(5px * var(--total-scale-factor)); + width: -moz-fit-content; + width: fit-content; + } + +.annotationLayer .popupContent { + border-top: 1px solid rgb(51 51 51); + margin-top: calc(2px * var(--total-scale-factor)); + padding-top: calc(2px * var(--total-scale-factor)); +} + +.annotationLayer .richText > * { + white-space: pre-wrap; + font-size: calc(9px * var(--total-scale-factor)); +} + +.annotationLayer .popupTriggerArea { + cursor: pointer; +} + +:is(.annotationLayer .popupTriggerArea):hover { + -webkit-backdrop-filter: var(--hcm-highlight-filter); + backdrop-filter: var(--hcm-highlight-filter); +} + +.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; +} + +:root { + --xfa-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,"); + --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 { + --csstools-color-scheme--light: initial; + 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 { + -o-object-position: left top; + object-position: left top; + -o-object-fit: contain; + 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 { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + text-indent: 1px; + text-overflow: ""; + } +} + +.canvasWrapper svg { + transform: none; +} + +.moving:is(.canvasWrapper svg) { + z-index: 100000; +} + +[data-main-rotation="90"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) mask, [data-main-rotation="90"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) use:not(.clip,.mask) { + transform: matrix(0, 1, -1, 0, 1, 0); +} + +[data-main-rotation="180"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) mask, [data-main-rotation="180"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) use:not(.clip,.mask) { + transform: matrix(-1, 0, 0, -1, 1, 1); +} + +[data-main-rotation="270"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) mask, [data-main-rotation="270"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) use:not(.clip,.mask) { + transform: matrix(0, -1, 1, 0, 0, 1); +} + +.draw:is(.canvasWrapper svg) { + position: absolute; + mix-blend-mode: normal; +} + +.draw[data-draw-rotation="90"]:is(.canvasWrapper svg) { + transform: rotate(90deg); +} + +.draw[data-draw-rotation="180"]:is(.canvasWrapper svg) { + transform: rotate(180deg); +} + +.draw[data-draw-rotation="270"]:is(.canvasWrapper svg) { + transform: rotate(270deg); +} + +.highlight:is(.canvasWrapper svg) { + --blend-mode: multiply; +} + +@media screen and (forced-colors: active) { + + .highlight:is(.canvasWrapper svg) { + --blend-mode: difference; + } +} + +.highlight:is(.canvasWrapper svg) { + position: absolute; + mix-blend-mode: var(--blend-mode); +} + + .highlight:is(.canvasWrapper svg):not(.free) { + fill-rule: evenodd; + } + +.highlightOutline:is(.canvasWrapper svg) { + position: absolute; + mix-blend-mode: normal; + fill-rule: evenodd; + fill: none; +} + +.highlightOutline.hovered:is(.canvasWrapper svg):not(.free):not(.selected) { + stroke: var(--hover-outline-color); + stroke-width: var(--outline-width); +} + +.highlightOutline.selected:is(.canvasWrapper svg):not(.free) .mainOutline { + stroke: var(--outline-around-color); + stroke-width: calc( var(--outline-width) + 2 * var(--outline-around-width) ); +} + +.highlightOutline.selected:is(.canvasWrapper svg):not(.free) .secondaryOutline { + stroke: var(--outline-color); + stroke-width: var(--outline-width); +} + +.highlightOutline.free.hovered:is(.canvasWrapper svg):not(.selected) { + stroke: var(--hover-outline-color); + stroke-width: calc(2 * var(--outline-width)); +} + +.highlightOutline.free.selected:is(.canvasWrapper svg) .mainOutline { + stroke: var(--outline-around-color); + stroke-width: calc( 2 * (var(--outline-width) + var(--outline-around-width)) ); +} + +.highlightOutline.free.selected:is(.canvasWrapper svg) .secondaryOutline { + stroke: var(--outline-color); + stroke-width: calc(2 * var(--outline-width)); +} + +.toggle-button { + --button-background-color: color-mix(in srgb, currentColor 7%, transparent); + --button-background-color-hover: color-mix( in srgb, currentColor 14%, transparent ); + --button-background-color-active: color-mix( in srgb, currentColor 21%, transparent ); + --csstools-light-dark-toggle--35: var(--csstools-color-scheme--light) #0df; + --color-accent-primary: var(--csstools-light-dark-toggle--35, #0060df); + --csstools-light-dark-toggle--36: var(--csstools-color-scheme--light) #80ebff; + --color-accent-primary-hover: var(--csstools-light-dark-toggle--36, #0250bb); + --csstools-light-dark-toggle--37: var(--csstools-color-scheme--light) #aaf2ff; + --color-accent-primary-active: var(--csstools-light-dark-toggle--37, #054096); + --border-radius-circle: 9999px; + --border-width: 1px; + --size-item-small: 16px; + --size-item-large: 32px; + --csstools-light-dark-toggle--38: var(--csstools-color-scheme--light) #1c1b22; + --color-canvas: var(--csstools-light-dark-toggle--38, white); + --background-color-canvas: var(--color-canvas); + --csstools-light-dark-toggle--39: var(--csstools-color-scheme--light) #f9f9fa; + --border-color-interactive: var(--csstools-light-dark-toggle--39, #8f8f9d); + --border-color-interactive-hover: var(--border-color-interactive); + --border-color-interactive-active: var(--border-color-interactive); +} + +@supports (color: light-dark(red, red)) { + .toggle-button { + --color-accent-primary: light-dark(#0060df, #0df); + --color-accent-primary-hover: light-dark(#0250bb, #80ebff); + --color-accent-primary-active: light-dark(#054096, #aaf2ff); + --color-canvas: light-dark(white, #1c1b22); + --border-color-interactive: light-dark(#8f8f9d, #f9f9fa); + } +} + +@supports not (color: light-dark(tan, tan)) { + + .toggle-button * { + --csstools-light-dark-toggle--35: var(--csstools-color-scheme--light) #0df; + --color-accent-primary: var(--csstools-light-dark-toggle--35, #0060df); + --csstools-light-dark-toggle--36: var(--csstools-color-scheme--light) #80ebff; + --color-accent-primary-hover: var(--csstools-light-dark-toggle--36, #0250bb); + --csstools-light-dark-toggle--37: var(--csstools-color-scheme--light) #aaf2ff; + --color-accent-primary-active: var(--csstools-light-dark-toggle--37, #054096); + --csstools-light-dark-toggle--38: var(--csstools-color-scheme--light) #1c1b22; + --color-canvas: var(--csstools-light-dark-toggle--38, white); + --csstools-light-dark-toggle--39: var(--csstools-color-scheme--light) #f9f9fa; + --border-color-interactive: var(--csstools-light-dark-toggle--39, #8f8f9d); + } +} + +@media (forced-colors: active) { + + .toggle-button { + --color-accent-primary: ButtonText; + --color-accent-primary-hover: SelectedItem; + --color-accent-primary-active: SelectedItem; + --button-background-color: ButtonFace; + --border-color-interactive: ButtonText; + --border-color-interactive-hover: SelectedItem; + --border-color-interactive-active: ButtonText; + --color-canvas: ButtonText; + --background-color-canvas: Canvas; + } +} + +.toggle-button { + --toggle-background-color: var(--button-background-color); + --toggle-background-color-hover: var(--button-background-color-hover); + --toggle-background-color-active: var(--button-background-color-active); + --toggle-background-color-pressed: var(--color-accent-primary); + --toggle-background-color-pressed-hover: var(--color-accent-primary-hover); + --toggle-background-color-pressed-active: var(--color-accent-primary-active); + --toggle-border-color: var(--border-color-interactive); + --toggle-border-color-hover: var(--toggle-border-color); + --toggle-border-color-active: var(--toggle-border-color); + --toggle-border-radius: var(--border-radius-circle); + --toggle-border-width: var(--border-width); + --toggle-height: var(--size-item-small); + --toggle-width: var(--size-item-large); + --toggle-dot-background-color: var(--toggle-border-color); + --toggle-dot-background-color-hover: var(--toggle-dot-background-color); + --toggle-dot-background-color-active: var(--toggle-dot-background-color); + --toggle-dot-background-color-on-pressed: var(--background-color-canvas); + --toggle-dot-margin: 1px; + --toggle-dot-height: calc( var(--toggle-height) - 2 * var(--toggle-dot-margin) - 2 * var(--toggle-border-width) ); + --toggle-dot-width: var(--toggle-dot-height); + --toggle-dot-transform-x: calc( var(--toggle-width) - 4 * var(--toggle-dot-margin) - var(--toggle-dot-width) ); + --input-width: var(--toggle-width); + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + padding: 0; + border: var(--toggle-border-width) solid var(--toggle-border-color); + height: var(--toggle-height); + width: var(--toggle-width); + border-radius: var(--toggle-border-radius); + background-color: var(--toggle-background-color); + box-sizing: border-box; +} + + .toggle-button:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); + } + + .toggle-button:enabled:hover { + background-color: var(--toggle-background-color-hover); + border-color: var(--toggle-border-color); + } + + .toggle-button:enabled:hover:active { + background-color: var(--toggle-background-color-active); + border-color: var(--toggle-border-color); + } + + .toggle-button::before { + display: block; + content: ""; + background-color: var(--toggle-dot-background-color); + height: var(--toggle-dot-height); + width: var(--toggle-dot-width); + margin: var(--toggle-dot-margin); + border-radius: var(--toggle-border-radius); + translate: 0; + } + + .toggle-button[aria-pressed="true"] { + background-color: var(--toggle-background-color-pressed); + border-color: transparent; + } + + .toggle-button[aria-pressed="true"]:enabled:hover { + background-color: var(--toggle-background-color-pressed-hover); + border-color: transparent; + } + + .toggle-button[aria-pressed="true"]:enabled:hover:active { + background-color: var(--toggle-background-color-pressed-active); + border-color: transparent; + } + + .toggle-button[aria-pressed="true"]::before { + translate: var(--toggle-dot-transform-x); + background-color: var(--toggle-dot-background-color-on-pressed); + } + + .toggle-button[aria-pressed="true"]:enabled:hover::before, .toggle-button[aria-pressed="true"]:enabled:hover:active::before { + background-color: var(--toggle-dot-background-color-on-pressed); + } + + .toggle-button[aria-pressed="true"]:-moz-locale-dir(rtl)::before, [dir="rtl"] .toggle-button[aria-pressed="true"]::before { + translate: calc(-1 * var(--toggle-dot-transform-x)); + } + +@media (prefers-reduced-motion: no-preference) { + .toggle-button::before { + transition: translate 100ms; + } +} + +@media (prefers-contrast) { + .toggle-button:enabled:hover { + border-color: var(--toggle-border-color-hover); + } + + .toggle-button:enabled:hover:active { + border-color: var(--toggle-border-color-active); + } + + .toggle-button[aria-pressed="true"]:enabled { + border-color: var(--toggle-border-color); + position: relative; + } + + .toggle-button[aria-pressed="true"]:enabled:hover { + border-color: var(--toggle-border-color-hover); + } + + .toggle-button[aria-pressed="true"]:enabled:hover:active { + background-color: var(--toggle-dot-background-color-active); + border-color: var(--toggle-dot-background-color-hover); + } + + .toggle-button:enabled:hover::before, + .toggle-button:enabled:hover:active::before { + background-color: var(--toggle-dot-background-color-hover); + } +} + +@media (forced-colors) { + .toggle-button { + --toggle-dot-background-color: var(--color-accent-primary); + --toggle-dot-background-color-hover: var(--color-accent-primary-hover); + --toggle-dot-background-color-active: var(--color-accent-primary-active); + --toggle-dot-background-color-on-pressed: var(--button-background-color); + --toggle-border-color-hover: var(--border-color-interactive-hover); + --toggle-border-color-active: var(--border-color-interactive-active); + } + + .toggle-button[aria-pressed="true"]:enabled::after { + border: 1px solid var(--button-background-color); + content: ""; + position: absolute; + height: var(--toggle-height); + width: var(--toggle-width); + display: block; + border-radius: var(--toggle-border-radius); + inset: -2px; + } + + .toggle-button[aria-pressed="true"]:enabled:hover:active::after { + border-color: var(--toggle-border-color-active); + } +} + +:root { + --clear-signature-button-icon: url(images/editor-toolbar-delete.svg); + --csstools-light-dark-toggle--40: var(--csstools-color-scheme--light) #2b2a33; + --signature-bg: var(--csstools-light-dark-toggle--40, #f9f9fb); + --csstools-light-dark-toggle--41: var(--csstools-color-scheme--light) var(--signature-bg); + --signature-hover-bg: var(--csstools-light-dark-toggle--41, #f0f0f4); + --button-signature-bg: transparent; + --button-signature-color: var(--main-color); + --csstools-light-dark-toggle--42: var(--csstools-color-scheme--light) #5b5b66; + --button-signature-active-bg: var(--csstools-light-dark-toggle--42, #cfcfd8); + --button-signature-active-border: none; + --button-signature-active-color: var(--button-signature-color); + --button-signature-border: none; + --csstools-light-dark-toggle--43: var(--csstools-color-scheme--light) #52525e; + --button-signature-hover-bg: var(--csstools-light-dark-toggle--43, #e0e0e6); + --button-signature-hover-color: var(--button-signature-color); +} + +@supports (color: light-dark(red, red)) { + :root { + --signature-bg: light-dark(#f9f9fb, #2b2a33); + --signature-hover-bg: light-dark(#f0f0f4, var(--signature-bg)); + --button-signature-active-bg: light-dark(#cfcfd8, #5b5b66); + --button-signature-hover-bg: light-dark(#e0e0e6, #52525e); + } +} + +@supports not (color: light-dark(tan, tan)) { + + :root * { + --csstools-light-dark-toggle--40: var(--csstools-color-scheme--light) #2b2a33; + --signature-bg: var(--csstools-light-dark-toggle--40, #f9f9fb); + --csstools-light-dark-toggle--41: var(--csstools-color-scheme--light) var(--signature-bg); + --signature-hover-bg: var(--csstools-light-dark-toggle--41, #f0f0f4); + --csstools-light-dark-toggle--42: var(--csstools-color-scheme--light) #5b5b66; + --button-signature-active-bg: var(--csstools-light-dark-toggle--42, #cfcfd8); + --csstools-light-dark-toggle--43: var(--csstools-color-scheme--light) #52525e; + --button-signature-hover-bg: var(--csstools-light-dark-toggle--43, #e0e0e6); + } +} + +@media screen and (forced-colors: active) { + + :root { + --signature-bg: HighlightText; + --signature-hover-bg: var(--signature-bg); + --button-signature-bg: HighlightText; + --button-signature-color: ButtonText; + --button-signature-active-bg: ButtonText; + --button-signature-active-color: HighlightText; + --button-signature-border: 1px solid ButtonText; + --button-signature-hover-bg: Highlight; + --button-signature-hover-color: HighlightText; + } +} + +.signatureDialog { + --primary-color: var(--text-primary-color); + --border-color: #8f8f9d; + --open-link-fg: var(--link-fg-color); + --open-link-hover-fg: var(--link-hover-fg-color); +} + +@media screen and (forced-colors: active) { + + .signatureDialog { + --primary-color: ButtonText; + --border-color: ButtonText; + --open-link-fg: ButtonText; + --open-link-hover-fg: ButtonText; + } +} + +.signatureDialog { + width: 570px; + max-width: 100%; + min-width: 300px; + padding: 16px 0; +} + + .signatureDialog .mainContainer { + width: 100%; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 12px; + } + +:is(.signatureDialog .mainContainer) span:not([role="sectionhead"]) { + font-size: 13px; + font-style: normal; + font-weight: 400; + line-height: normal; +} + +:is(.signatureDialog .mainContainer) .title { + margin-inline-start: 16px; +} + +.signatureDialog .inputWithClearButton { + --button-dimension: 24px; + --clear-button-icon: url(images/messageBar_closingButton.svg); + width: 100%; + position: relative; + display: flex; + align-items: center; + justify-content: center; +} + +:is(.signatureDialog .inputWithClearButton) > input { + width: 100%; + height: 32px; + padding-inline: 8px calc(4px + var(--button-dimension)); + box-sizing: border-box; + border-radius: 4px; + border: 1px solid var(--border-color); +} + +:is(.signatureDialog .inputWithClearButton) .clearInputButton { + position: absolute; + inset-block-start: 4px; + inset-inline-end: 4px; + display: inline-block; + width: var(--button-dimension); + height: var(--button-dimension); + background-color: var(--input-text-fg-color); + -webkit-mask-size: cover; + mask-size: cover; + -webkit-mask-image: var(--clear-button-icon); + mask-image: var(--clear-button-icon); + padding: 0; + border: 0; +} + +#addSignatureDialog { + --secondary-color: var(--text-secondary-color); + --bg-hover: #e0e0e6; + --tab-top-line-active-color: #0060df; + --tab-top-line-active-hover-color: var(--tab-text-hover-color); + --tab-top-line-hover-color: #8f8f9d; + --tab-top-line-inactive-color: #cfcfd8; + --tab-bottom-line-active-color: var(--tab-top-line-inactive-color); + --tab-bottom-line-hover-color: var(--tab-top-line-inactive-color); + --tab-bottom-line-inactive-color: var(--tab-top-line-inactive-color); + --tab-bg: var(--dialog-bg-color); + --tab-bg-active-color: var(--tab-bg); + --tab-bg-active-hover-color: var(--bg-hover); + --tab-bg-hover: var(--bg-hover); + --tab-panel-border: none; + --tab-panel-border-radius: 4px; + --tab-text-color: var(--primary-color); + --tab-text-active-color: var(--tab-top-line-active-color); + --tab-text-active-hover-color: var(--tab-text-hover-color); + --tab-text-hover-color: var(--tab-text-color); + --signature-placeholder-color: var(--secondary-color); + --signature-draw-placeholder-color: var(--primary-color); + --signature-color: var(--primary-color); + --clear-signature-button-border-width: 0; + --clear-signature-button-border-style: solid; + --clear-signature-button-border-color: transparent; + --clear-signature-button-border-disabled-color: transparent; + --clear-signature-button-color: var(--primary-color); + --clear-signature-button-hover-color: var(--clear-signature-button-color); + --clear-signature-button-active-color: var(--clear-signature-button-color); + --clear-signature-button-disabled-color: var(--clear-signature-button-color); + --clear-signature-button-focus-color: var(--clear-signature-button-color); + --clear-signature-button-bg: var(--dialog-bg-color); + --clear-signature-button-bg-hover: var(--bg-hover); + --clear-signature-button-bg-active: #cfcfd8; + --clear-signature-button-bg-focus: #f0f0f4; + --clear-signature-button-bg-disabled: color-mix( in srgb, #f0f0f4, transparent 40% ); + --save-warning-color: var(--secondary-color); + --thickness-bg: var(--dialog-bg-color); + --thickness-label-color: var(--primary-color); + --thickness-slider-color: var(--primary-color); + --thickness-border: none; + --draw-cursor: url(images/cursor-editorInk.svg) 0 16, pointer; +} + +@media (prefers-color-scheme: dark) { + + #addSignatureDialog { + --dialog-bg-color: #42414d; + --bg-hover: #52525e; + --primary-color: #fbfbfe; + --secondary-color: #cfcfd8; + --tab-top-line-active-color: #0df; + --tab-top-line-inactive-color: #8f8f9d; + --clear-signature-button-bg-active: #5b5b66; + --clear-signature-button-bg-focus: #2b2a33; + --clear-signature-button-bg-disabled: color-mix( in srgb, #2b2a33, transparent 40% ); + } +} + +@media screen and (forced-colors: active) { + + #addSignatureDialog { + --secondary-color: ButtonText; + --bg: HighlightText; + --bg-hover: var(--bg); + --tab-top-line-active-color: ButtonText; + --tab-top-line-active-hover-color: HighlightText; + --tab-top-line-hover-color: SelectedItem; + --tab-top-line-inactive-color: ButtonText; + --tab-bottom-line-active-color: var(--tab-top-line-active-color); + --tab-bottom-line-hover-color: var(--tab-top-line-hover-color); + --tab-bg: var(--bg); + --tab-bg-active-color: SelectedItem; + --tab-bg-active-hover-color: SelectedItem; + --tab-panel-border: 1px solid ButtonText; + --tab-panel-border-radius: 8px; + --tab-text-color: ButtonText; + --tab-text-active-color: HighlightText; + --tab-text-active-hover-color: HighlightText; + --tab-text-hover-color: SelectedItem; + --signature-color: ButtonText; + --clear-signature-button-border-width: 1px; + --clear-signature-button-border-style: solid; + --clear-signature-button-border-color: ButtonText; + --clear-signature-button-border-disabled-color: GrayText; + --clear-signature-button-color: ButtonText; + --clear-signature-button-hover-color: HighlightText; + --clear-signature-button-active-color: SelectedItem; + --clear-signature-button-focus-color: CanvasText; + --clear-signature-button-disabled-color: GrayText; + --clear-signature-button-bg: var(--bg); + --clear-signature-button-bg-hover: SelectedItem; + --clear-signature-button-bg-active: var(--bg); + --clear-signature-button-bg-focus: var(--bg); + --clear-signature-button-bg-disabled: var(--bg); + --thickness-bg: Canvas; + --thickness-label-color: CanvasText; + --thickness-slider-color: ButtonText; + --thickness-border: 1px solid var(--border-color); + } +} + +#addSignatureDialog #addSignatureDialogLabel { + overflow: hidden; + position: absolute; + inset: 0; + width: 0; + height: 0; +} + +#addSignatureDialog.waiting::after { + content: ""; + cursor: wait; + position: absolute; + inset: 0; + width: 100%; + height: 100%; +} + +:is(#addSignatureDialog .mainContainer) [role="tablist"] { + width: 100%; + display: flex; + align-items: flex-start; + gap: 0; +} + +:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"] { + flex: 1 0 0; + align-self: stretch; + background-color: var(--tab-bg); + padding-inline: 0; + cursor: default; + border-inline: 0; + border-block-width: 1px; + border-block-style: solid; + border-block-start-color: var(--tab-top-line-inactive-color); + border-block-end-color: var(--tab-bottom-line-inactive-color); + border-radius: 0; + font: menu; + font-size: 13px; + font-style: normal; + line-height: normal; + font-weight: 400; + color: var(--tab-text-color); +} + +:is(:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]):hover { + border-block-start-width: 2px; + border-block-start-color: var(--tab-top-line-hover-color); + border-block-end-color: var(--tab-bottom-line-hover-color); + background-color: var(--tab-bg-hover); + color: var(--tab-text-hover-color); +} + +:is(:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]):focus-visible { + outline: 2px solid var(--tab-top-line-active-color); + outline-offset: -2px; +} + +[aria-selected="true"]:is(:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]) { + border-block-start-width: 2px; + border-block-start-color: var(--tab-top-line-active-color); + border-block-end-color: var(--tab-bottom-line-active-color); + background-color: var(--tab-bg-active-color); + font-weight: 590; + color: var(--tab-text-active-color); +} + + [aria-selected="true"]:is(:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]):hover { + border-block-start-color: var(--tab-top-line-active-hover-color); + background-color: var(--tab-bg-active-hover-color); + color: var(--tab-text-active-hover-color); + } + +:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer { + width: 100%; + height: auto; + display: flex; + flex-direction: column; + align-items: flex-end; + align-self: stretch; + gap: 12px; + padding-inline: 16px; + box-sizing: border-box; +} + +:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"] { + position: relative; + width: 100%; + height: 220px; + background-color: var(--signature-bg); + border: var(--tab-panel-border); + border-radius: var(--tab-panel-border-radius); +} + +:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > svg { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + background-color: transparent; +} + +#addSignatureTypeContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) { + display: none; +} + + #addSignatureTypeContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureTypeInput { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + border: 0; + padding: 0; + text-align: center; + color: var(--signature-color); + background-color: transparent; + border-radius: var(--tab-panel-border-radius); + font-family: "Brush script", "Apple Chancery", "Segoe script", "Freestyle Script", "Palace Script MT", "Brush Script MT", TK, cursive, serif; + font-size: 44px; + font-style: italic; + font-weight: 400; + } + +:is(#addSignatureTypeContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureTypeInput)::-moz-placeholder { + color: var(--signature-placeholder-color); + text-align: center; + font: menu; + font-style: normal; + font-weight: 274; + font-size: 44px; + line-height: normal; +} + +:is(#addSignatureTypeContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureTypeInput)::placeholder { + color: var(--signature-placeholder-color); + text-align: center; + font: menu; + font-style: normal; + font-weight: 274; + font-size: 44px; + line-height: normal; +} + +#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) { + display: none; +} + + #addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > span { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: grid; + align-items: center; + justify-content: center; + background-color: transparent; + color: var(--signature-placeholder-color); + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + } + + #addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > svg { + stroke: var(--signature-color); + fill: none; + stroke-opacity: 1; + stroke-linecap: round; + stroke-linejoin: round; + stroke-miterlimit: 10; + } + +:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > svg):hover { + cursor: var(--draw-cursor); +} + +#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness { + position: absolute; + width: 100%; + inset-block-end: 0; + display: grid; + align-items: center; + justify-content: center; + pointer-events: none; +} + +:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > span { + color: var(--signature-draw-placeholder-color); +} + +:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div { + width: auto; + height: auto; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + padding: 6px 8px 7px; + margin: 0; + background-color: var(--thickness-bg); + border-radius: 4px 4px 0 0; + border-inline: var(--thickness-border); + border-top: var(--thickness-border); + pointer-events: auto; + position: relative; + top: 1px; +} + +:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > label { + color: var(--thickness-label-color); +} + +:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input { + width: 100px; + height: 14px; + background-color: transparent; +} + +:is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-webkit-slider-runnable-track, :is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-moz-range-track, :is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-moz-range-progress { + background-color: var(--thickness-slider-color); +} + +:is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-webkit-slider-thumb, :is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-moz-range-thumb { + background-color: var(--thickness-bg); +} + +:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input { + border-radius: 4.5px; + border: 0; + color: var(--signature-color); +} + +#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) { + display: none; +} + + #addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > svg { + stroke: none; + stroke-width: 0; + fill: var(--signature-color); + fill-opacity: 1; + } + + #addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureImagePlaceholder { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: transparent; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + } + +:is(#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureImagePlaceholder) span { + color: var(--signature-placeholder-color); +} + +:is(#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureImagePlaceholder) a { + color: var(--open-link-fg); + text-decoration: underline; + cursor: pointer; +} + +:is(:is(#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureImagePlaceholder) a):hover { + color: var(--open-link-hover-fg); +} + +#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureFilePicker { + visibility: hidden; + position: relative; + width: 0; + height: 0; +} + +[data-selected="type"]:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > #addSignatureTypeContainer, [data-selected="draw"]:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > #addSignatureDrawContainer, [data-selected="image"]:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > #addSignatureImageContainer { + display: block; +} + +:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls { + display: flex; + flex-direction: column; + justify-content: center; + align-items: flex-start; + gap: 12px; + align-self: stretch; +} + +:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer { + display: flex; + align-items: flex-end; + gap: 16px; + align-self: stretch; +} + +:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #addSignatureDescriptionContainer { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 4px; + flex: 1 0 0; +} + +:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #addSignatureDescriptionContainer):has(input:disabled) > label { + opacity: 0.4; +} + +:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #addSignatureDescriptionContainer) > label { + width: auto; +} + +:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton { + display: flex; + height: 32px; + padding: 4px 8px; + align-items: center; + background-color: var(--clear-signature-button-bg); + border-width: var(--clear-signature-button-border-width); + border-style: var(--clear-signature-button-border-style); + border-color: var(--clear-signature-button-border-color); + border-radius: 4px; +} + +:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton) > span { + display: flex; + height: 24px; + align-items: center; + gap: 4px; + flex-shrink: 0; + color: var(--clear-signature-button-color); +} + +:is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton) > span)::after { + content: ""; + display: inline-block; + width: 16px; + height: 16px; + -webkit-mask-image: var(--clear-signature-button-icon); + mask-image: var(--clear-signature-button-icon); + -webkit-mask-size: cover; + mask-size: cover; + background-color: var(--clear-signature-button-color); + flex-shrink: 0; +} + +:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):hover { + background-color: var(--clear-signature-button-bg-hover); +} + + :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):hover > span { + color: var(--clear-signature-button-hover-color); + } + +:is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):hover > span)::after { + background-color: var(--clear-signature-button-hover-color); +} + +:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):active { + background-color: var(--clear-signature-button-bg-active); +} + + :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):active > span { + color: var(--clear-signature-button-active-color); + } + +:is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):active > span)::after { + background-color: var(--clear-signature-button-active-color); +} + +:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):focus-visible { + background-color: var(--clear-signature-button-bg-focus); +} + + :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):focus-visible > span { + color: var(--clear-signature-button-focus-color); + } + +:is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):focus-visible > span)::after { + background-color: var(--clear-signature-button-focus-color); +} + +:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):disabled { + background-color: var(--clear-signature-button-bg-disabled); + border-color: var(--clear-signature-button-border-disabled-color); +} + + :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):disabled > span { + color: var(--clear-signature-button-disabled-color); + } + +:is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):disabled > span)::after { + background-color: var( --clear-signature-button-disabled-color ); +} + +:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer { + display: grid; + grid-template-columns: max-content auto; + gap: 4px; + width: 100%; +} + +:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer) > input { + margin: 0; +} + +:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer) > input):disabled + label { + opacity: 0.4; +} + +:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer) > label { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer):not(.fullStorage) #addSignatureSaveWarning { + display: none; +} + +.fullStorage:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer) #addSignatureSaveWarning { + display: block; + opacity: 1; + color: var(--save-warning-color); + font-size: 11px; +} + +#editSignatureDescriptionDialog .mainContainer { + padding-inline: 16px; + box-sizing: border-box; +} + +:is(#editSignatureDescriptionDialog .mainContainer) .title { + margin-inline-start: 0; +} + +:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView { + width: auto; + display: flex; + justify-content: flex-end; + align-items: flex-start; + gap: 12px; + align-self: stretch; +} + +:is(:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView) #editSignatureDescriptionContainer { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 4px; + flex: 1 1 auto; +} + +:is(:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView) > svg { + width: 210px; + height: 180px; + padding: 8px; + background-color: var(--signature-bg); +} + +:is(:is(:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView) > svg) > path { + stroke: var(--button-signature-color); + stroke-width: 1px; + stroke-linecap: round; + stroke-linejoin: round; + stroke-miterlimit: 10; + vector-effect: non-scaling-stroke; + fill: none; +} + +.contours:is(:is(:is(:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView) > svg) > path) { + fill: var(--button-signature-color); + stroke-width: 0.5px; +} + +#editorSignatureParamsToolbar { + padding: 8px; +} + + #editorSignatureParamsToolbar #addSignatureDoorHanger { + gap: 8px; + padding: 2px; + } + +:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer { + height: 32px; + display: flex; + justify-content: space-between; + align-items: center; + align-self: stretch; + gap: 8px; +} + +:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button { + border: var(--button-signature-border); + border-radius: 4px; + background-color: var(--button-signature-bg); + color: var(--button-signature-color); +} + +:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):hover { + background-color: var(--button-signature-hover-bg); +} + +:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):active { + border: var(--button-signature-active-border); + background-color: var(--button-signature-active-bg); + color: var(--button-signature-active-color); +} + + :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):active::before { + background-color: var(--button-signature-active-color); + } + +:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):focus-visible { + outline: var(--focus-ring-outline); +} + + :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):focus-visible::before { + background-color: var(--button-signature-color); + } + +:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .deleteButton)::before { + -webkit-mask-image: var(--clear-signature-button-icon); + mask-image: var(--clear-signature-button-icon); +} + +:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton { + width: calc(0.8 * var(--editor-toolbar-min-width)); + height: 100%; + min-height: var(--menuitem-height); + aspect-ratio: unset; + display: flex; + align-items: center; + justify-content: flex-start; + outline: none; + border-radius: 4px; + box-sizing: border-box; + font: message-box; + position: relative; + flex: 1 1 auto; + padding: 0; + gap: 8px; + text-align: start; + white-space: normal; + cursor: default; + overflow: hidden; +} + +:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton) > svg { + display: inline-block; + height: 100%; + aspect-ratio: 1; + background-color: var(--signature-bg); + flex: none; + padding: 4px; + box-sizing: border-box; + border: none; + border-radius: 4px; +} + +:is(:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton) > svg) > path { + stroke: var(--button-signature-color); + stroke-width: 1px; + stroke-linecap: round; + stroke-linejoin: round; + stroke-miterlimit: 10; + vector-effect: non-scaling-stroke; + fill: none; +} + +.contours:is(:is(:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton) > svg) > path) { + fill: var(--button-signature-color); + stroke-width: 0.5px; +} + +:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton):is(:hover,:active) > svg { + border-radius: 4px 0 0 4px; + background-color: var(--signature-hover-bg); +} + +:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton):hover > span { + color: var(--button-signature-hover-color); +} + +:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton):active { + background-color: var(--button-signature-active-bg); +} + +:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton):is([disabled="disabled"],[disabled]) { + opacity: 0.5; + pointer-events: none; +} + +:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton) > span { + height: auto; + text-overflow: ellipsis; + white-space: nowrap; + flex: 1 1 auto; + font: menu; + font-size: 13px; + font-style: normal; + font-weight: 400; + line-height: normal; + overflow: hidden; +} + +.editDescription.altText { + --alt-text-add-image: url(images/editor-toolbar-edit.svg) !important; +} + + .editDescription.altText::before { + width: 16px !important; + height: 16px !important; + } + +.commentPopup, +#commentManagerDialog { + width: 360px; + max-width: 100%; + min-width: 200px; + position: absolute; + padding: 8px 16px 16px; + margin-left: 0; + margin-top: 0; + box-sizing: border-box; + border-radius: 8px; +} + +#commentManagerDialog { + --comment-close-button-icon: url(images/comment-closeButton.svg); +} + + #commentManagerDialog .mainContainer { + width: 100%; + height: auto; + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 4px; + } + +:is(#commentManagerDialog .mainContainer) #commentManagerToolbar { + width: 100%; + height: 32px; + display: flex; + justify-content: flex-start; + align-items: flex-start; + gap: 8px; + align-self: stretch; + cursor: move; +} + +:is(#commentManagerDialog .mainContainer) #commentManagerTextInput { + width: 100%; + min-height: 132px; + margin-bottom: 12px; +} + +.annotationLayer.disabled :is(.annotationCommentButton) { + display: none; +} + +:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton { + --csstools-color-scheme--light: initial; + color-scheme: light dark; + --csstools-light-dark-toggle--44: var(--csstools-color-scheme--light) #1c1b22; + --comment-button-bg: var(--csstools-light-dark-toggle--44, white); + --csstools-light-dark-toggle--45: var(--csstools-color-scheme--light) #fbfbfe; + --comment-button-fg: var(--csstools-light-dark-toggle--45, #5b5b66); + --csstools-light-dark-toggle--46: var(--csstools-color-scheme--light) #a6ecf4; + --comment-button-active-bg: var(--csstools-light-dark-toggle--46, #0041a4); + --csstools-light-dark-toggle--47: var(--csstools-color-scheme--light) #15141a; + --comment-button-active-fg: var(--csstools-light-dark-toggle--47, white); + --csstools-light-dark-toggle--48: var(--csstools-color-scheme--light) #61dce9; + --comment-button-hover-bg: var(--csstools-light-dark-toggle--48, #0053cb); + --csstools-light-dark-toggle--49: var(--csstools-color-scheme--light) #15141a; + --comment-button-hover-fg: var(--csstools-light-dark-toggle--49, white); + --csstools-light-dark-toggle--50: var(--csstools-color-scheme--light) #00cadb; + --comment-button-selected-bg: var(--csstools-light-dark-toggle--50, #0062fa); + --csstools-light-dark-toggle--51: var(--csstools-color-scheme--light) #bfbfc9; + --comment-button-border-color: var(--csstools-light-dark-toggle--51, #8f8f9d); + --comment-button-active-border-color: var(--comment-button-active-bg); + --csstools-light-dark-toggle--52: var(--csstools-color-scheme--light) #3a3944; + --comment-button-focus-border-color: var(--csstools-light-dark-toggle--52, #cfcfd8); + --comment-button-hover-border-color: var(--comment-button-hover-bg); + --comment-button-selected-border-color: var(--comment-button-selected-bg); + --csstools-light-dark-toggle--53: var(--csstools-color-scheme--light) #15141a; + --comment-button-selected-fg: var(--csstools-light-dark-toggle--53, white); + --comment-button-dim: 24px; + --csstools-light-dark-toggle--54: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); + --csstools-light-dark-toggle--55: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); + --comment-button-box-shadow: 0 0.25px 0.75px 0 var(--csstools-light-dark-toggle--54, rgb(0 0 0 / 0.05)), 0 2px 6px 0 var(--csstools-light-dark-toggle--55, rgb(0 0 0 / 0.1)); + --csstools-light-dark-toggle--56: var(--csstools-color-scheme--light) #00cadb; + --comment-button-focus-outline-color: var(--csstools-light-dark-toggle--56, #0062fa); +} + +@supports (color: light-dark(red, red)) { + :is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton { + --comment-button-bg: light-dark(white, #1c1b22); + --comment-button-fg: light-dark(#5b5b66, #fbfbfe); + --comment-button-active-bg: light-dark(#0041a4, #a6ecf4); + --comment-button-active-fg: light-dark(white, #15141a); + --comment-button-hover-bg: light-dark(#0053cb, #61dce9); + --comment-button-hover-fg: light-dark(white, #15141a); + --comment-button-selected-bg: light-dark(#0062fa, #00cadb); + --comment-button-border-color: light-dark(#8f8f9d, #bfbfc9); + --comment-button-focus-border-color: light-dark(#cfcfd8, #3a3944); + --comment-button-selected-fg: light-dark(white, #15141a); + } +} + +@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { + :is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton { + --comment-button-box-shadow: 0 0.25px 0.75px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), 0 2px 6px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); + } +} + +@supports (color: light-dark(red, red)) { + :is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton { + --comment-button-focus-outline-color: light-dark(#0062fa, #00cadb); + } +} + +@supports not (color: light-dark(tan, tan)) { + + :is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton) * { + --csstools-light-dark-toggle--44: var(--csstools-color-scheme--light) #1c1b22; + --comment-button-bg: var(--csstools-light-dark-toggle--44, white); + --csstools-light-dark-toggle--45: var(--csstools-color-scheme--light) #fbfbfe; + --comment-button-fg: var(--csstools-light-dark-toggle--45, #5b5b66); + --csstools-light-dark-toggle--46: var(--csstools-color-scheme--light) #a6ecf4; + --comment-button-active-bg: var(--csstools-light-dark-toggle--46, #0041a4); + --csstools-light-dark-toggle--47: var(--csstools-color-scheme--light) #15141a; + --comment-button-active-fg: var(--csstools-light-dark-toggle--47, white); + --csstools-light-dark-toggle--48: var(--csstools-color-scheme--light) #61dce9; + --comment-button-hover-bg: var(--csstools-light-dark-toggle--48, #0053cb); + --csstools-light-dark-toggle--49: var(--csstools-color-scheme--light) #15141a; + --comment-button-hover-fg: var(--csstools-light-dark-toggle--49, white); + --csstools-light-dark-toggle--50: var(--csstools-color-scheme--light) #00cadb; + --comment-button-selected-bg: var(--csstools-light-dark-toggle--50, #0062fa); + --csstools-light-dark-toggle--51: var(--csstools-color-scheme--light) #bfbfc9; + --comment-button-border-color: var(--csstools-light-dark-toggle--51, #8f8f9d); + --csstools-light-dark-toggle--52: var(--csstools-color-scheme--light) #3a3944; + --comment-button-focus-border-color: var(--csstools-light-dark-toggle--52, #cfcfd8); + --csstools-light-dark-toggle--53: var(--csstools-color-scheme--light) #15141a; + --comment-button-selected-fg: var(--csstools-light-dark-toggle--53, white); + --csstools-light-dark-toggle--54: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); + --csstools-light-dark-toggle--55: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); + --comment-button-box-shadow: 0 0.25px 0.75px 0 var(--csstools-light-dark-toggle--54, rgb(0 0 0 / 0.05)), 0 2px 6px 0 var(--csstools-light-dark-toggle--55, rgb(0 0 0 / 0.1)); + --csstools-light-dark-toggle--56: var(--csstools-color-scheme--light) #00cadb; + --comment-button-focus-outline-color: var(--csstools-light-dark-toggle--56, #0062fa); + } +} + +@media (prefers-color-scheme: dark) { + + :is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton { + --csstools-color-scheme--light:; + } +} + +@media screen and (forced-colors: active) { + + :is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton { + --comment-button-bg: ButtonFace; + --comment-button-fg: ButtonText; + --comment-button-hover-bg: SelectedItemText; + --comment-button-hover-fg: SelectedItem; + --comment-button-active-bg: SelectedItemText; + --comment-button-active-fg: SelectedItem; + --comment-button-border-color: ButtonBorder; + --comment-button-active-border-color: ButtonBorder; + --comment-button-hover-border-color: SelectedItem; + --comment-button-box-shadow: none; + --comment-button-focus-outline-color: CanvasText; + --comment-button-selected-bg: ButtonBorder; + --comment-button-selected-fg: ButtonFace; + } +} + +:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton { + position: absolute; + width: var(--comment-button-dim); + height: var(--comment-button-dim); + background-color: var(--comment-button-bg); + border-radius: 6px 6px 6px 0; + border: 1px solid var(--comment-button-border-color); + box-shadow: var(--comment-button-box-shadow); + cursor: auto; + z-index: 1; + padding: 4px; + margin: 0; + box-sizing: border-box; + pointer-events: auto; +} + +[dir="rtl"] :is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton) { + border-radius: 6px 6px 0; +} + +:is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton)::before { + content: ""; + display: inline-block; + width: 100%; + height: 100%; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-size: cover; + mask-size: cover; + -webkit-mask-image: var(--comment-edit-button-icon); + mask-image: var(--comment-edit-button-icon); + background-color: var(--comment-button-fg); + margin: 0; + padding: 0; + transform: scaleX(var(--dir-factor)); +} + +:is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton):focus-visible { + outline: 2px solid var(--comment-button-focus-outline-color); + outline-offset: 1px; + border-color: var(--comment-button-focus-border-color); +} + +:is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton):hover { + background-color: var(--comment-button-hover-bg) !important; + border-color: var(--comment-button-hover-border-color); +} + + :is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton):hover::before { + background-color: var(--comment-button-hover-fg); + } + +:is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton):active { + background-color: var(--comment-button-active-bg) !important; + border-color: var(--comment-button-active-border-color); +} + + :is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton):active::before { + background-color: var(--comment-button-active-fg); + } + +.selected:is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton) { + background-color: var(--comment-button-selected-bg) !important; + border-color: var(--comment-button-selected-border-color); +} + + .selected:is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton)::before { + background-color: var(--comment-button-selected-fg); + } + +#editorCommentsSidebar, +.commentPopup { + --comment-close-button-icon: url(images/comment-closeButton.svg); + --comment-popup-edit-button-icon: url(images/comment-popup-editButton.svg); + --comment-popup-delete-button-icon: url(images/editor-toolbar-delete.svg); + --csstools-light-dark-toggle--57: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.69); + --comment-date-fg-color: var(--csstools-light-dark-toggle--57, rgb(21 20 26 / 0.69)); + --csstools-light-dark-toggle--58: var(--csstools-color-scheme--light) #1c1b22; + --comment-bg-color: var(--csstools-light-dark-toggle--58, #f9f9fb); + --csstools-light-dark-toggle--59: var(--csstools-color-scheme--light) #2c2b33; + --comment-hover-bg-color: var(--csstools-light-dark-toggle--59, #e0e0e6); + --csstools-light-dark-toggle--60: var(--csstools-color-scheme--light) #3a3944; + --comment-active-bg-color: var(--csstools-light-dark-toggle--60, #d1d1d9); + --comment-hover-brightness: 0.89; + --comment-hover-filter: brightness(var(--comment-hover-brightness)); + --comment-active-brightness: 0.825; + --comment-active-filter: brightness(var(--comment-active-brightness)); + --csstools-light-dark-toggle--61: var(--csstools-color-scheme--light) #52525e; + --comment-border-color: var(--csstools-light-dark-toggle--61, #f0f0f4); + --csstools-light-dark-toggle--62: var(--csstools-color-scheme--light) #00cadb; + --comment-focus-outline-color: var(--csstools-light-dark-toggle--62, #0062fa); + --csstools-light-dark-toggle--63: var(--csstools-color-scheme--light) #fbfbfe; + --comment-fg-color: var(--csstools-light-dark-toggle--63, #15141a); + --csstools-light-dark-toggle--64: var(--csstools-color-scheme--light) #00317e; + --comment-count-bg-color: var(--csstools-light-dark-toggle--64, #e2f7ff); + --csstools-light-dark-toggle--65: var(--csstools-color-scheme--light) #a6ecf4; + --comment-indicator-active-fg-color: var(--csstools-light-dark-toggle--65, #0041a4); + --comment-indicator-active-filter: brightness( calc(1 / var(--comment-active-brightness)) ); + --csstools-light-dark-toggle--66: var(--csstools-color-scheme--light) #fbfbfe; + --comment-indicator-focus-fg-color: var(--csstools-light-dark-toggle--66, #5b5b66); + --csstools-light-dark-toggle--67: var(--csstools-color-scheme--light) #61dce9; + --comment-indicator-hover-fg-color: var(--csstools-light-dark-toggle--67, #0053cb); + --comment-indicator-hover-filter: brightness( calc(1 / var(--comment-hover-brightness)) ); + --csstools-light-dark-toggle--68: var(--csstools-color-scheme--light) #00cadb; + --comment-indicator-selected-fg-color: var(--csstools-light-dark-toggle--68, #0062fa); + --button-comment-bg: transparent; + --button-comment-color: var(--main-color); + --csstools-light-dark-toggle--69: var(--csstools-color-scheme--light) #5b5b66; + --button-comment-active-bg: var(--csstools-light-dark-toggle--69, #cfcfd8); + --button-comment-active-border: none; + --button-comment-active-color: var(--button-comment-color); + --button-comment-border: none; + --csstools-light-dark-toggle--70: var(--csstools-color-scheme--light) #52525e; + --button-comment-hover-bg: var(--csstools-light-dark-toggle--70, #e0e0e6); + --button-comment-hover-color: var(--button-comment-color); + --csstools-light-dark-toggle--71: var(--csstools-color-scheme--light) #0df; + --link-fg-color: var(--csstools-light-dark-toggle--71, #0060df); + --csstools-light-dark-toggle--72: var(--csstools-color-scheme--light) #80ebff; + --link-hover-fg-color: var(--csstools-light-dark-toggle--72, #0250bb); +} + +@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { + #editorCommentsSidebar, + .commentPopup { + --comment-date-fg-color: light-dark( rgb(21 20 26 / 0.69), rgb(251 251 254 / 0.69) ); + } +} + +@supports (color: light-dark(red, red)) { + #editorCommentsSidebar, + .commentPopup { + --comment-bg-color: light-dark(#f9f9fb, #1c1b22); + --comment-hover-bg-color: light-dark(#e0e0e6, #2c2b33); + --comment-active-bg-color: light-dark(#d1d1d9, #3a3944); + --comment-border-color: light-dark(#f0f0f4, #52525e); + --comment-focus-outline-color: light-dark(#0062fa, #00cadb); + --comment-fg-color: light-dark(#15141a, #fbfbfe); + --comment-count-bg-color: light-dark(#e2f7ff, #00317e); + --comment-indicator-active-fg-color: light-dark(#0041a4, #a6ecf4); + --comment-indicator-focus-fg-color: light-dark(#5b5b66, #fbfbfe); + --comment-indicator-hover-fg-color: light-dark(#0053cb, #61dce9); + --comment-indicator-selected-fg-color: light-dark(#0062fa, #00cadb); + --button-comment-active-bg: light-dark(#cfcfd8, #5b5b66); + --button-comment-hover-bg: light-dark(#e0e0e6, #52525e); + --link-fg-color: light-dark(#0060df, #0df); + --link-hover-fg-color: light-dark(#0250bb, #80ebff); + } +} + +@supports not (color: light-dark(tan, tan)) { + + :is(#editorCommentsSidebar,.commentPopup) * { + --csstools-light-dark-toggle--57: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.69); + --comment-date-fg-color: var(--csstools-light-dark-toggle--57, rgb(21 20 26 / 0.69)); + --csstools-light-dark-toggle--58: var(--csstools-color-scheme--light) #1c1b22; + --comment-bg-color: var(--csstools-light-dark-toggle--58, #f9f9fb); + --csstools-light-dark-toggle--59: var(--csstools-color-scheme--light) #2c2b33; + --comment-hover-bg-color: var(--csstools-light-dark-toggle--59, #e0e0e6); + --csstools-light-dark-toggle--60: var(--csstools-color-scheme--light) #3a3944; + --comment-active-bg-color: var(--csstools-light-dark-toggle--60, #d1d1d9); + --csstools-light-dark-toggle--61: var(--csstools-color-scheme--light) #52525e; + --comment-border-color: var(--csstools-light-dark-toggle--61, #f0f0f4); + --csstools-light-dark-toggle--62: var(--csstools-color-scheme--light) #00cadb; + --comment-focus-outline-color: var(--csstools-light-dark-toggle--62, #0062fa); + --csstools-light-dark-toggle--63: var(--csstools-color-scheme--light) #fbfbfe; + --comment-fg-color: var(--csstools-light-dark-toggle--63, #15141a); + --csstools-light-dark-toggle--64: var(--csstools-color-scheme--light) #00317e; + --comment-count-bg-color: var(--csstools-light-dark-toggle--64, #e2f7ff); + --csstools-light-dark-toggle--65: var(--csstools-color-scheme--light) #a6ecf4; + --comment-indicator-active-fg-color: var(--csstools-light-dark-toggle--65, #0041a4); + --csstools-light-dark-toggle--66: var(--csstools-color-scheme--light) #fbfbfe; + --comment-indicator-focus-fg-color: var(--csstools-light-dark-toggle--66, #5b5b66); + --csstools-light-dark-toggle--67: var(--csstools-color-scheme--light) #61dce9; + --comment-indicator-hover-fg-color: var(--csstools-light-dark-toggle--67, #0053cb); + --csstools-light-dark-toggle--68: var(--csstools-color-scheme--light) #00cadb; + --comment-indicator-selected-fg-color: var(--csstools-light-dark-toggle--68, #0062fa); + --csstools-light-dark-toggle--69: var(--csstools-color-scheme--light) #5b5b66; + --button-comment-active-bg: var(--csstools-light-dark-toggle--69, #cfcfd8); + --csstools-light-dark-toggle--70: var(--csstools-color-scheme--light) #52525e; + --button-comment-hover-bg: var(--csstools-light-dark-toggle--70, #e0e0e6); + --csstools-light-dark-toggle--71: var(--csstools-color-scheme--light) #0df; + --link-fg-color: var(--csstools-light-dark-toggle--71, #0060df); + --csstools-light-dark-toggle--72: var(--csstools-color-scheme--light) #80ebff; + --link-hover-fg-color: var(--csstools-light-dark-toggle--72, #0250bb); + } +} + +@media screen and (forced-colors: active) { + + #editorCommentsSidebar, + .commentPopup { + --comment-date-fg-color: CanvasText; + --comment-bg-color: Canvas; + --comment-hover-bg-color: Canvas; + --comment-hover-filter: none; + --comment-active-bg-color: Canvas; + --comment-active-filter: none; + --comment-border-color: CanvasText; + --comment-fg-color: CanvasText; + --comment-count-bg-color: Canvas; + --comment-indicator-active-fg-color: SelectedItem; + --comment-indicator-focus-fg-color: CanvasText; + --comment-indicator-hover-fg-color: CanvasText; + --comment-indicator-selected-fg-color: SelectedItem; + --button-comment-bg: ButtonFace; + --button-comment-color: ButtonText; + --button-comment-active-bg: Highlight; + --button-comment-active-color: HighlightText; + --button-comment-border: 1px solid ButtonText; + --button-comment-hover-bg: Highlight; + --button-comment-hover-color: HighlightText; + --link-fg-color: LinkText; + --link-hover-fg-color: LinkText; + } +} + +#editorCommentsSidebar { + display: flex; + height: auto; + padding-bottom: 16px; + flex-direction: column; + align-items: flex-start; +} + + #editorCommentsSidebar #editorCommentsSidebarHeader { + width: 100%; + box-sizing: border-box; + padding: 16px; + display: flex; + align-items: center; + justify-content: space-between; + } + +:is(#editorCommentsSidebar #editorCommentsSidebarHeader) .commentCount { + display: flex; + align-items: baseline; + gap: 6px; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) .commentCount) #editorCommentsSidebarTitle { + font: menu; + font-style: normal; + font-weight: 590; + line-height: normal; + font-size: 17px; + color: var(--comment-fg-color); +} + +:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) .commentCount) #editorCommentsSidebarCount { + padding: 0 4px; + border-radius: 4px; + background-color: var(--comment-count-bg-color); + color: var(--comment-fg-color); + text-align: center; + font: menu; + font-size: 13px; + font-style: normal; + font-weight: 400; + line-height: normal; +} + +:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton { + width: 32px; + height: 32px; + padding: 8px; + border-radius: 4px; + border: var(--button-comment-border); + background-color: var(--button-comment-bg); + cursor: pointer; +} + +:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton)::before { + content: ""; + display: inline-block; + width: 100%; + height: 100%; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-image: var(--comment-close-button-icon); + mask-image: var(--comment-close-button-icon); + background-color: var(--button-comment-color); +} + +:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton):hover { + background-color: var(--button-comment-hover-bg); +} + + :is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton):hover::before { + background-color: var(--button-comment-hover-color); + } + +:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton):active { + border: var(--button-comment-active-border); + background-color: var(--button-comment-active-bg); +} + + :is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton):active::before { + background-color: var(--button-comment-active-color); + } + +:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton):focus-visible { + outline: var(--focus-ring-outline); +} + +:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton) > span { + display: inline-block; + width: 0; + height: 0; + overflow: hidden; +} + +#editorCommentsSidebar #editorCommentsSidebarListContainer { + overflow: auto; + width: 100%; +} + +:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList { + display: flex; + width: auto; + padding: 4px 16px; + gap: 10px; + align-items: flex-start; + flex-direction: column; + list-style-type: none; +} + +:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment { + display: flex; + width: auto; + padding: 8px 16px 16px; + flex-direction: column; + align-items: flex-start; + align-self: stretch; + gap: 4px; + border-radius: 8px; + border: 0.5px solid var(--comment-border-color); + background-color: var(--comment-bg-color); +} + +@media screen and (forced-colors: active) { + + :is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):hover { + background-color: var(--comment-hover-bg-color); + } +} + +:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):hover { + filter: var(--comment-hover-filter); +} + + :is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):hover time::after { + display: inline-block; + background-color: var(--comment-indicator-hover-fg-color); + filter: var(--comment-indicator-hover-filter); + } + +@media screen and (forced-colors: active) { + + :is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):active { + background-color: var(--comment-active-bg-color); + } +} + +:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):active { + filter: var(--comment-active-filter); +} + + :is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):active time::after { + display: inline-block; + background-color: var(--comment-indicator-active-fg-color); + filter: var(--comment-indicator-active-filter); + } + +:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):is(:focus,:focus-visible) time::after { + display: inline-block; + background-color: var(--comment-indicator-focus-fg-color); +} + +:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):focus-visible { + outline: 2px solid var(--comment-focus-outline-color); + outline-offset: 2px; +} + +.selected:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments) .sidebarCommentText { + max-height: -moz-fit-content; + max-height: fit-content; + -webkit-line-clamp: unset; +} + +.selected:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments) time::after { + display: inline-block; + background-color: var(--comment-indicator-selected-fg-color); +} + +:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) .sidebarCommentText { + font: menu; + font-style: normal; + font-weight: 400; + line-height: normal; + font-size: 15px; + width: 100%; + height: -moz-fit-content; + height: fit-content; + max-height: 80px; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + overflow-wrap: break-word; +} + +:is(:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) .sidebarCommentText) .richText { + --total-scale-factor: 1.5; +} + +.noComments:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) .sidebarCommentText { + max-height: -moz-fit-content; + max-height: fit-content; + -webkit-line-clamp: unset; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.noComments:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) a { + font: menu; + font-style: normal; + font-weight: 400; + line-height: normal; + font-size: 15px; + width: 100%; + height: auto; + overflow-wrap: break-word; + margin-block-start: 15px; + color: var(--link-fg-color); +} + +:is(.noComments:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) a):focus-visible { + outline: var(--focus-ring-outline); +} + +:is(.noComments:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) a):hover { + color: var(--link-hover-fg-color); +} + +:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) time { + width: 100%; + display: inline-flex; + align-items: center; + justify-content: space-between; + font: menu; + font-style: normal; + font-weight: 400; + line-height: normal; + font-size: 13px; +} + +:is(:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) time)::after { + content: ""; + display: none; + width: 16px; + height: 16px; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + -webkit-mask-image: var(--comment-edit-button-icon); + mask-image: var(--comment-edit-button-icon); + transform: scaleX(var(--dir-factor)); +} + +.commentPopup { + --csstools-color-scheme--light: initial; + color-scheme: light dark; + --csstools-light-dark-toggle--73: var(--csstools-color-scheme--light) #3a3944; + --divider-color: var(--csstools-light-dark-toggle--73, #cfcfd8); + --csstools-light-dark-toggle--74: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); + --csstools-light-dark-toggle--75: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); + --comment-shadow: 0 0.5px 2px 0 var(--csstools-light-dark-toggle--74, rgb(0 0 0 / 0.05)), 0 4px 16px 0 var(--csstools-light-dark-toggle--75, rgb(0 0 0 / 0.1)); +} + +@supports (color: light-dark(red, red)) { + .commentPopup { + --divider-color: light-dark(#cfcfd8, #3a3944); + } +} + +@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { + .commentPopup { + --comment-shadow: 0 0.5px 2px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), 0 4px 16px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); + } +} + +@supports not (color: light-dark(tan, tan)) { + + .commentPopup * { + --csstools-light-dark-toggle--73: var(--csstools-color-scheme--light) #3a3944; + --divider-color: var(--csstools-light-dark-toggle--73, #cfcfd8); + --csstools-light-dark-toggle--74: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); + --csstools-light-dark-toggle--75: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); + --comment-shadow: 0 0.5px 2px 0 var(--csstools-light-dark-toggle--74, rgb(0 0 0 / 0.05)), 0 4px 16px 0 var(--csstools-light-dark-toggle--75, rgb(0 0 0 / 0.1)); + } +} + +@media (prefers-color-scheme: dark) { + + .commentPopup { + --csstools-color-scheme--light:; + } +} + +@media screen and (forced-colors: active) { + + .commentPopup { + --divider-color: CanvasText; + --comment-shadow: none; + } +} + +.commentPopup { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 12px; + z-index: 100001; + pointer-events: auto; + margin-top: 2px; + border: 0.5px solid var(--comment-border-color); + background: var(--comment-bg-color); + box-shadow: var(--comment-shadow); +} + + .commentPopup:focus-visible { + outline: none; + } + + .commentPopup.dragging { + cursor: move !important; + } + + .commentPopup.dragging * { + cursor: move !important; + } + + .commentPopup.dragging button { + pointer-events: none !important; + } + + .commentPopup:not(.selected) .commentPopupButtons { + visibility: hidden !important; + } + + .commentPopup hr { + width: 100%; + height: 1px; + border: none; + border-top: 1px solid var(--divider-color); + margin: 0; + padding: 0; + } + + .commentPopup .commentPopupTop { + display: flex; + width: 100%; + height: auto; + padding-bottom: 4px; + justify-content: space-between; + align-items: center; + align-self: stretch; + cursor: move; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + } + +:is(.commentPopup .commentPopupTop) .commentPopupTime { + font: menu; + font-style: normal; + font-weight: 400; + line-height: normal; + font-size: 13px; + color: var(--comment-date-fg-color); +} + +:is(.commentPopup .commentPopupTop) .commentPopupButtons { + display: flex; + align-items: center; + gap: 2px; + cursor: default; +} + +:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button { + width: 32px; + height: 32px; + padding: 8px; + border: var(--button-comment-border); + border-radius: 4px; + background-color: var(--button-comment-bg); + color: var(--button-comment-color); +} + +:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):hover { + background-color: var(--button-comment-hover-bg); +} + + :is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):hover::before { + background-color: var(--button-comment-hover-color); + } + +:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):active { + border: var(--button-comment-active-border); + background-color: var(--button-comment-active-bg); + color: var(--button-comment-active-color); +} + + :is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):active::before { + background-color: var(--button-comment-active-color); + } + +:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):focus-visible { + background-color: var(--button-comment-hover-bg); + outline: 2px solid var(--comment-focus-outline-color); + outline-offset: 0; +} + +:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button)::before { + content: ""; + display: inline-block; + width: 100%; + height: 100%; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; +} + +.commentPopupEdit:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button)::before { + -webkit-mask-image: var(--comment-popup-edit-button-icon); + mask-image: var(--comment-popup-edit-button-icon); +} + +.commentPopupDelete:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button)::before { + -webkit-mask-image: var(--comment-popup-delete-button-icon); + mask-image: var(--comment-popup-delete-button-icon); +} + +.commentPopup .commentPopupText { + width: 100%; + height: auto; + font: menu; + font-style: normal; + font-weight: 400; + line-height: normal; + font-size: 15px; + color: var(--comment-fg-color); +} + +.commentPopupText, +.sidebarCommentText .richText { + margin-block: 0; +} + +:is(.commentPopupText,.sidebarCommentText .richText) p:first-of-type { + margin-block: 0; +} + +:is(.commentPopupText,.sidebarCommentText .richText) > * { + white-space: pre-wrap; + font-size: max(15px, calc(10px * var(--total-scale-factor))); + overflow-wrap: break-word; +} + +:is(.commentPopupText,.sidebarCommentText .richText) span { + color: var(--comment-fg-color) !important; +} + +:root { + --editor-toolbar-vert-offset: 6px; + --outline-width: 2px; + --outline-color: #0060df; + --outline-around-width: 1px; + --outline-around-color: #f0f0f4; + --hover-outline-around-color: var(--outline-around-color); + --focus-outline: solid var(--outline-width) var(--outline-color); + --unfocus-outline: solid var(--outline-width) transparent; + --focus-outline-around: solid var(--outline-around-width) var(--outline-around-color); + --hover-outline-color: #8f8f9d; + --hover-outline: solid var(--outline-width) var(--hover-outline-color); + --hover-outline-around: solid var(--outline-around-width) var(--hover-outline-around-color); + --freetext-line-height: 1.35; + --freetext-padding: 2px; + --resizer-bg-color: var(--outline-color); + --resizer-size: 6px; + --resizer-shift: calc( 0px - (var(--outline-width) + var(--resizer-size)) / 2 - var(--outline-around-width) ); + --editorFreeText-editing-cursor: text; + --editorInk-editing-cursor: url(images/cursor-editorInk.svg) 0 16, pointer; + --editorHighlight-editing-cursor: url(images/cursor-editorTextHighlight.svg) 24 24, text; + --editorFreeHighlight-editing-cursor: url(images/cursor-editorFreeHighlight.svg) 1 18, pointer; + --new-alt-text-warning-image: url(images/altText_warning.svg); +} + +.textLayer.highlighting { + cursor: var(--editorFreeHighlight-editing-cursor); +} + + .textLayer.highlighting:not(.free) span { + cursor: var(--editorHighlight-editing-cursor); + } + +[role="img"]:is(.textLayer.highlighting:not(.free) span) { + cursor: var(--editorFreeHighlight-editing-cursor); +} + +.textLayer.highlighting.free span { + cursor: var(--editorFreeHighlight-editing-cursor); +} + +.page:has(.annotationEditorLayer.nonEditing) +.annotationLayer +.editorAnnotation { + position: absolute; + pointer-events: none; +} + +:is(#viewerContainer.pdfPresentationMode:fullscreen,.annotationEditorLayer.disabled) .noAltTextBadge { + display: none !important; +} + +@media (min-resolution: 1.1dppx) { + :root { + --editorFreeText-editing-cursor: url(images/cursor-editorFreeText.svg) 0 16, text; + } +} + +@media screen and (forced-colors: active) { + :root { + --outline-color: CanvasText; + --outline-around-color: ButtonFace; + --resizer-bg-color: ButtonText; + --hover-outline-color: Highlight; + --hover-outline-around-color: SelectedItemText; + } +} + +[data-editor-rotation="90"] { + transform: rotate(90deg); +} + +[data-editor-rotation="180"] { + transform: rotate(180deg); +} + +[data-editor-rotation="270"] { + transform: rotate(270deg); +} + +.annotationEditorLayer { + background: transparent; + position: absolute; + inset: 0; + font-size: calc(100px * var(--total-scale-factor)); + transform-origin: 0 0; + cursor: auto; +} + + .annotationEditorLayer .selectedEditor { + z-index: 100000 !important; + } + + .annotationEditorLayer.drawing * { + pointer-events: none !important; + } + + .annotationEditorLayer.getElements { + pointer-events: auto !important; + } + + .annotationEditorLayer.getElements > div { + pointer-events: auto !important; + } + + .annotationEditorLayer.waiting { + content: ""; + cursor: wait; + position: absolute; + inset: 0; + width: 100%; + height: 100%; + } + + .annotationEditorLayer.disabled { + pointer-events: none; + } + + .annotationEditorLayer.disabled.highlightEditing :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor,.commentPopup) { + pointer-events: auto; + } + + .annotationEditorLayer.freetextEditing { + cursor: var(--editorFreeText-editing-cursor); + } + + .annotationEditorLayer.inkEditing { + cursor: var(--editorInk-editing-cursor); + } + + .annotationEditorLayer .draw { + box-sizing: border-box; + } + + .annotationEditorLayer + :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor) { + position: absolute; + background: transparent; + z-index: 1; + transform-origin: 0 0; + cursor: auto; + max-width: 100%; + max-height: 100%; + border: var(--unfocus-outline); + } + +.draggable.selectedEditor:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) { + cursor: move; +} + +.selectedEditor:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) { + border: var(--focus-outline); + outline: var(--focus-outline-around); +} + + .selectedEditor:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor))::before { + content: ""; + position: absolute; + inset: 0; + border: var(--focus-outline-around); + pointer-events: none; + } + +:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)):hover:not(.selectedEditor) { + border: var(--hover-outline); + outline: var(--hover-outline-around); +} + + :is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)):hover:not(.selectedEditor)::before { + content: ""; + position: absolute; + inset: 0; + border: var(--focus-outline-around); + } + +:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar { + --editor-toolbar-delete-image: url(images/editor-toolbar-delete.svg); + --csstools-light-dark-toggle--76: var(--csstools-color-scheme--light) #2b2a33; + --editor-toolbar-bg-color: var(--csstools-light-dark-toggle--76, #f0f0f4); + --editor-toolbar-highlight-image: url(images/toolbarButton-editorHighlight.svg); + --csstools-light-dark-toggle--77: var(--csstools-color-scheme--light) #fbfbfe; + --editor-toolbar-fg-color: var(--csstools-light-dark-toggle--77, #2e2e56); + --editor-toolbar-border-color: #8f8f9d; + --editor-toolbar-hover-border-color: var(--editor-toolbar-border-color); + --csstools-light-dark-toggle--78: var(--csstools-color-scheme--light) #52525e; + --editor-toolbar-hover-bg-color: var(--csstools-light-dark-toggle--78, #e0e0e6); + --editor-toolbar-hover-fg-color: var(--editor-toolbar-fg-color); + --editor-toolbar-hover-outline: none; + --csstools-light-dark-toggle--79: var(--csstools-color-scheme--light) #0df; + --editor-toolbar-focus-outline-color: var(--csstools-light-dark-toggle--79, #0060df); + --editor-toolbar-shadow: 0 2px 6px 0 rgb(58 57 68 / 0.2); + --editor-toolbar-height: 28px; + --editor-toolbar-padding: 2px; + --csstools-light-dark-toggle--80: var(--csstools-color-scheme--light) #54ffbd; + --alt-text-done-color: var(--csstools-light-dark-toggle--80, #2ac3a2); + --csstools-light-dark-toggle--81: var(--csstools-color-scheme--light) #80ebff; + --alt-text-warning-color: var(--csstools-light-dark-toggle--81, #0090ed); + --alt-text-hover-done-color: var(--alt-text-done-color); + --alt-text-hover-warning-color: var(--alt-text-warning-color); +} + +@supports (color: light-dark(red, red)) { + :is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar { + --editor-toolbar-bg-color: light-dark(#f0f0f4, #2b2a33); + --editor-toolbar-fg-color: light-dark(#2e2e56, #fbfbfe); + --editor-toolbar-hover-bg-color: light-dark(#e0e0e6, #52525e); + --editor-toolbar-focus-outline-color: light-dark(#0060df, #0df); + --alt-text-done-color: light-dark(#2ac3a2, #54ffbd); + --alt-text-warning-color: light-dark(#0090ed, #80ebff); + } +} + +@supports not (color: light-dark(tan, tan)) { + + :is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) * { + --csstools-light-dark-toggle--76: var(--csstools-color-scheme--light) #2b2a33; + --editor-toolbar-bg-color: var(--csstools-light-dark-toggle--76, #f0f0f4); + --csstools-light-dark-toggle--77: var(--csstools-color-scheme--light) #fbfbfe; + --editor-toolbar-fg-color: var(--csstools-light-dark-toggle--77, #2e2e56); + --csstools-light-dark-toggle--78: var(--csstools-color-scheme--light) #52525e; + --editor-toolbar-hover-bg-color: var(--csstools-light-dark-toggle--78, #e0e0e6); + --csstools-light-dark-toggle--79: var(--csstools-color-scheme--light) #0df; + --editor-toolbar-focus-outline-color: var(--csstools-light-dark-toggle--79, #0060df); + --csstools-light-dark-toggle--80: var(--csstools-color-scheme--light) #54ffbd; + --alt-text-done-color: var(--csstools-light-dark-toggle--80, #2ac3a2); + --csstools-light-dark-toggle--81: var(--csstools-color-scheme--light) #80ebff; + --alt-text-warning-color: var(--csstools-light-dark-toggle--81, #0090ed); + } +} + +@media screen and (forced-colors: active) { + + :is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar { + --editor-toolbar-bg-color: ButtonFace; + --editor-toolbar-fg-color: ButtonText; + --editor-toolbar-border-color: ButtonText; + --editor-toolbar-hover-border-color: AccentColor; + --editor-toolbar-hover-bg-color: ButtonFace; + --editor-toolbar-hover-fg-color: AccentColor; + --editor-toolbar-hover-outline: 2px solid var(--editor-toolbar-hover-border-color); + --editor-toolbar-focus-outline-color: ButtonBorder; + --editor-toolbar-shadow: none; + --alt-text-done-color: var(--editor-toolbar-fg-color); + --alt-text-warning-color: var(--editor-toolbar-fg-color); + --alt-text-hover-done-color: var(--editor-toolbar-hover-fg-color); + --alt-text-hover-warning-color: var(--editor-toolbar-hover-fg-color); + } +} + +:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar { + display: flex; + width: -moz-fit-content; + width: fit-content; + height: var(--editor-toolbar-height); + flex-direction: column; + justify-content: center; + align-items: center; + cursor: default; + pointer-events: auto; + box-sizing: content-box; + padding: var(--editor-toolbar-padding); + position: absolute; + inset-inline-end: 0; + inset-block-start: calc(100% + var(--editor-toolbar-vert-offset)); + border-radius: 6px; + background-color: var(--editor-toolbar-bg-color); + border: 1px solid var(--editor-toolbar-border-color); + box-shadow: var(--editor-toolbar-shadow); +} + +.hidden:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) { + display: none; +} + +:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar):has(:focus-visible) { + border-color: transparent; +} + +[dir="ltr"] :is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) { + transform-origin: 100% 0; +} + +[dir="rtl"] :is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) { + transform-origin: 0 0; +} + +:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons { + display: flex; + justify-content: center; + align-items: center; + gap: 0; + height: 100%; +} + +:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) button { + padding: 0; +} + +:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .divider { + width: 0; + height: calc( 2 * var(--editor-toolbar-padding) + var(--editor-toolbar-height) ); + border-left: 1px solid var(--editor-toolbar-border-color); + border-right: none; + display: inline-block; + margin-inline: 2px; +} + +:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .basic { + width: var(--editor-toolbar-height); +} + +:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .basic)::before { + content: ""; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + display: inline-block; + background-color: var(--editor-toolbar-fg-color); + width: 100%; + height: 100%; +} + +:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .basic):hover::before { + background-color: var(--editor-toolbar-hover-fg-color); +} + +.highlightButton:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .basic)::before { + -webkit-mask-image: var(--editor-toolbar-highlight-image); + mask-image: var(--editor-toolbar-highlight-image); +} + +.commentButton:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .basic)::before { + -webkit-mask-image: var(--comment-edit-button-icon); + mask-image: var(--comment-edit-button-icon); +} + +.deleteButton:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .basic)::before { + -webkit-mask-image: var(--editor-toolbar-delete-image); + mask-image: var(--editor-toolbar-delete-image); +} + +:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) > * { + height: var(--editor-toolbar-height); +} + +:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) > :not(.divider) { + border: none; + background-color: transparent; + cursor: pointer; +} + +:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) > :not(.divider)):hover { + border-radius: 2px; + background-color: var(--editor-toolbar-hover-bg-color); + color: var(--editor-toolbar-hover-fg-color); + outline: var(--editor-toolbar-hover-outline); + outline-offset: 1px; +} + + :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) > :not(.divider)):hover:active { + outline: none; + } + +:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) > :not(.divider)):focus-visible { + border-radius: 2px; + outline: 2px solid var(--editor-toolbar-focus-outline-color); +} + +:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText { + --alt-text-add-image: url(images/altText_add.svg); + --alt-text-done-image: url(images/altText_done.svg); + display: flex; + align-items: center; + justify-content: center; + width: -moz-max-content; + width: max-content; + padding-inline: 8px; + pointer-events: all; + font: menu; + font-weight: 590; + font-size: 12px; + color: var(--editor-toolbar-fg-color); +} + +:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText):disabled { + pointer-events: none; +} + +:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText)::before { + content: ""; + -webkit-mask-image: var(--alt-text-add-image); + mask-image: var(--alt-text-add-image); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + display: inline-block; + width: 12px; + height: 13px; + background-color: var(--editor-toolbar-fg-color); + margin-inline-end: 4px; +} + +:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText):hover::before { + background-color: var(--editor-toolbar-hover-fg-color); +} + +.done:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText)::before { + -webkit-mask-image: var(--alt-text-done-image); + mask-image: var(--alt-text-done-image); +} + +.new:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText)::before { + width: 16px; + height: 16px; + -webkit-mask-image: var(--new-alt-text-warning-image); + mask-image: var(--new-alt-text-warning-image); + background-color: var(--alt-text-warning-color); + -webkit-mask-size: cover; + mask-size: cover; +} + +.new:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText):hover::before { + background-color: var(--alt-text-hover-warning-color); +} + +.new.done:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText)::before { + -webkit-mask-image: var(--alt-text-done-image); + mask-image: var(--alt-text-done-image); + background-color: var(--alt-text-done-color); +} + +.new.done:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText):hover::before { + background-color: var(--alt-text-hover-done-color); +} + +:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip { + display: none; + word-wrap: anywhere; +} + +.show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip) { + --csstools-light-dark-toggle--82: var(--csstools-color-scheme--light) #1c1b22; + --alt-text-tooltip-bg: var(--csstools-light-dark-toggle--82, #f0f0f4); + --csstools-light-dark-toggle--83: var(--csstools-color-scheme--light) #fbfbfe; + --alt-text-tooltip-fg: var(--csstools-light-dark-toggle--83, #15141a); + --alt-text-tooltip-border: #8f8f9d; + --csstools-light-dark-toggle--84: var(--csstools-color-scheme--light) #15141a; + --alt-text-tooltip-shadow: 0 2px 6px 0 var(--csstools-light-dark-toggle--84, rgb(58 57 68 / 0.2)); +} + +@supports (color: light-dark(red, red)) { + .show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip) { + --alt-text-tooltip-bg: light-dark(#f0f0f4, #1c1b22); + --alt-text-tooltip-fg: light-dark(#15141a, #fbfbfe); + } +} + +@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { + .show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip) { + --alt-text-tooltip-shadow: 0 2px 6px 0 light-dark(rgb(58 57 68 / 0.2), #15141a); + } +} + +@supports not (color: light-dark(tan, tan)) { + + .show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip) * { + --csstools-light-dark-toggle--82: var(--csstools-color-scheme--light) #1c1b22; + --alt-text-tooltip-bg: var(--csstools-light-dark-toggle--82, #f0f0f4); + --csstools-light-dark-toggle--83: var(--csstools-color-scheme--light) #fbfbfe; + --alt-text-tooltip-fg: var(--csstools-light-dark-toggle--83, #15141a); + --csstools-light-dark-toggle--84: var(--csstools-color-scheme--light) #15141a; + --alt-text-tooltip-shadow: 0 2px 6px 0 var(--csstools-light-dark-toggle--84, rgb(58 57 68 / 0.2)); + } +} + +@media screen and (forced-colors: active) { + + .show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip) { + --alt-text-tooltip-bg: Canvas; + --alt-text-tooltip-fg: CanvasText; + --alt-text-tooltip-border: CanvasText; + --alt-text-tooltip-shadow: none; + } +} + +.show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip) { + display: inline-flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: absolute; + top: calc(100% + 2px); + inset-inline-start: 0; + padding-block: 2px 3px; + padding-inline: 3px; + max-width: 300px; + width: -moz-max-content; + width: max-content; + height: auto; + font-size: 12px; + border: 0.5px solid var(--alt-text-tooltip-border); + background: var(--alt-text-tooltip-bg); + box-shadow: var(--alt-text-tooltip-shadow); + color: var(--alt-text-tooltip-fg); + pointer-events: none; +} + +:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .comment { + width: var(--editor-toolbar-height); +} + +:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .comment)::before { + content: ""; + -webkit-mask-image: var(--comment-edit-button-icon); + mask-image: var(--comment-edit-button-icon); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + display: inline-block; + background-color: var(--editor-toolbar-fg-color); + width: 100%; + height: 100%; +} + +.annotationEditorLayer .freeTextEditor { + padding: calc(var(--freetext-padding) * var(--total-scale-factor)); + width: auto; + height: auto; + touch-action: none; +} + + .annotationEditorLayer .freeTextEditor .internal { + background: transparent; + border: none; + inset: 0; + overflow: visible; + white-space: nowrap; + font: 10px sans-serif; + line-height: var(--freetext-line-height); + text-align: start; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; + } + + .annotationEditorLayer .freeTextEditor .overlay { + position: absolute; + display: none; + background: transparent; + inset: 0; + width: 100%; + height: 100%; + } + +.annotationEditorLayer freeTextEditor .overlay.enabled { + display: block; +} + +.annotationEditorLayer .freeTextEditor .internal:empty::before { + content: attr(default-content); + color: gray; +} + +.annotationEditorLayer .freeTextEditor .internal:focus { + outline: none; + -webkit-user-select: auto; + -moz-user-select: auto; + user-select: auto; +} + +.annotationEditorLayer .inkEditor { + width: 100%; + height: 100%; +} + + .annotationEditorLayer .inkEditor.editing { + cursor: inherit; + } + + .annotationEditorLayer .inkEditor .inkEditorCanvas { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + touch-action: none; + } + +.annotationEditorLayer .stampEditor { + width: auto; + height: auto; +} + +:is(.annotationEditorLayer .stampEditor) canvas { + position: absolute; + width: 100%; + height: 100%; + margin: 0; + top: 0; + left: 0; +} + +:is(.annotationEditorLayer .stampEditor) .noAltTextBadge { + --csstools-light-dark-toggle--85: var(--csstools-color-scheme--light) #52525e; + --no-alt-text-badge-border-color: var(--csstools-light-dark-toggle--85, #f0f0f4); + --csstools-light-dark-toggle--86: var(--csstools-color-scheme--light) #fbfbfe; + --no-alt-text-badge-bg-color: var(--csstools-light-dark-toggle--86, #cfcfd8); + --csstools-light-dark-toggle--87: var(--csstools-color-scheme--light) #15141a; + --no-alt-text-badge-fg-color: var(--csstools-light-dark-toggle--87, #5b5b66); +} + +@supports (color: light-dark(red, red)) { + :is(.annotationEditorLayer .stampEditor) .noAltTextBadge { + --no-alt-text-badge-border-color: light-dark(#f0f0f4, #52525e); + --no-alt-text-badge-bg-color: light-dark(#cfcfd8, #fbfbfe); + --no-alt-text-badge-fg-color: light-dark(#5b5b66, #15141a); + } +} + +@supports not (color: light-dark(tan, tan)) { + + :is(:is(.annotationEditorLayer .stampEditor) .noAltTextBadge) * { + --csstools-light-dark-toggle--85: var(--csstools-color-scheme--light) #52525e; + --no-alt-text-badge-border-color: var(--csstools-light-dark-toggle--85, #f0f0f4); + --csstools-light-dark-toggle--86: var(--csstools-color-scheme--light) #fbfbfe; + --no-alt-text-badge-bg-color: var(--csstools-light-dark-toggle--86, #cfcfd8); + --csstools-light-dark-toggle--87: var(--csstools-color-scheme--light) #15141a; + --no-alt-text-badge-fg-color: var(--csstools-light-dark-toggle--87, #5b5b66); + } +} + +@media screen and (forced-colors: active) { + + :is(.annotationEditorLayer .stampEditor) .noAltTextBadge { + --no-alt-text-badge-border-color: ButtonText; + --no-alt-text-badge-bg-color: ButtonFace; + --no-alt-text-badge-fg-color: ButtonText; + } +} + +:is(.annotationEditorLayer .stampEditor) .noAltTextBadge { + position: absolute; + inset-inline-end: 5px; + inset-block-end: 5px; + display: inline-flex; + width: 32px; + height: 32px; + padding: 3px; + justify-content: center; + align-items: center; + pointer-events: none; + z-index: 1; + border-radius: 2px; + border: 1px solid var(--no-alt-text-badge-border-color); + background: var(--no-alt-text-badge-bg-color); +} + +:is(:is(.annotationEditorLayer .stampEditor) .noAltTextBadge)::before { + content: ""; + display: inline-block; + width: 16px; + height: 16px; + -webkit-mask-image: var(--new-alt-text-warning-image); + mask-image: var(--new-alt-text-warning-image); + -webkit-mask-size: cover; + mask-size: cover; + background-color: var(--no-alt-text-badge-fg-color); +} + +:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers { + position: absolute; + inset: 0; + z-index: 1; +} + +.hidden:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) { + display: none; +} + +:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer { + width: var(--resizer-size); + height: var(--resizer-size); + background: content-box var(--resizer-bg-color); + border: var(--focus-outline-around); + border-radius: 2px; + position: absolute; +} + +.topLeft:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer) { + top: var(--resizer-shift); + left: var(--resizer-shift); +} + +.topMiddle:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer) { + top: var(--resizer-shift); + left: calc(50% + var(--resizer-shift)); +} + +.topRight:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer) { + top: var(--resizer-shift); + right: var(--resizer-shift); +} + +.middleRight:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer) { + top: calc(50% + var(--resizer-shift)); + right: var(--resizer-shift); +} + +.bottomRight:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer) { + bottom: var(--resizer-shift); + right: var(--resizer-shift); +} + +.bottomMiddle:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer) { + bottom: var(--resizer-shift); + left: calc(50% + var(--resizer-shift)); +} + +.bottomLeft:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer) { + bottom: var(--resizer-shift); + left: var(--resizer-shift); +} + +.middleLeft:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer) { + top: calc(50% + var(--resizer-shift)); + left: var(--resizer-shift); +} + +.topLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer), .bottomRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer) { + cursor: nwse-resize; +} + +.topMiddle:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer), .bottomMiddle:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer) { + cursor: ns-resize; +} + +.topRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer), .bottomLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer) { + cursor: nesw-resize; +} + +.middleRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer), .middleLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="180"],[data-editor-rotation="0"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="90"],[data-editor-rotation="270"])) > .resizers > .resizer) { + cursor: ew-resize; +} + +.topLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer), .bottomRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer) { + cursor: nesw-resize; +} + +.topMiddle:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer), .bottomMiddle:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer) { + cursor: ew-resize; +} + +.topRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer), .bottomLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer) { + cursor: nwse-resize; +} + +.middleRight:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer), .middleLeft:is(:is(.annotationEditorLayer[data-main-rotation="0"] :is([data-editor-rotation="90"],[data-editor-rotation="270"]),.annotationEditorLayer[data-main-rotation="90"] :is([data-editor-rotation="0"],[data-editor-rotation="180"]),.annotationEditorLayer[data-main-rotation="180"] :is([data-editor-rotation="270"],[data-editor-rotation="90"]),.annotationEditorLayer[data-main-rotation="270"] :is([data-editor-rotation="180"],[data-editor-rotation="0"])) > .resizers > .resizer) { + cursor: ns-resize; +} + +:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="90"],[data-main-rotation="90"] [data-editor-rotation="0"],[data-main-rotation="180"] [data-editor-rotation="270"],[data-main-rotation="270"] [data-editor-rotation="180"])) .editToolbar { + rotate: 270deg; +} + +[dir="ltr"] :is(:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="90"],[data-main-rotation="90"] [data-editor-rotation="0"],[data-main-rotation="180"] [data-editor-rotation="270"],[data-main-rotation="270"] [data-editor-rotation="180"])) .editToolbar) { + inset-inline-end: calc(0px - var(--editor-toolbar-vert-offset)); + inset-block-start: 0; +} + +[dir="rtl"] :is(:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="90"],[data-main-rotation="90"] [data-editor-rotation="0"],[data-main-rotation="180"] [data-editor-rotation="270"],[data-main-rotation="270"] [data-editor-rotation="180"])) .editToolbar) { + inset-inline-end: calc(100% + var(--editor-toolbar-vert-offset)); + inset-block-start: 0; +} + +:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="180"],[data-main-rotation="90"] [data-editor-rotation="90"],[data-main-rotation="180"] [data-editor-rotation="0"],[data-main-rotation="270"] [data-editor-rotation="270"])) .editToolbar { + rotate: 180deg; + inset-inline-end: 100%; + inset-block-start: calc(0px - var(--editor-toolbar-vert-offset)); +} + +:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="270"],[data-main-rotation="90"] [data-editor-rotation="180"],[data-main-rotation="180"] [data-editor-rotation="90"],[data-main-rotation="270"] [data-editor-rotation="0"])) .editToolbar { + rotate: 90deg; +} + +[dir="ltr"] :is(:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="270"],[data-main-rotation="90"] [data-editor-rotation="180"],[data-main-rotation="180"] [data-editor-rotation="90"],[data-main-rotation="270"] [data-editor-rotation="0"])) .editToolbar) { + inset-inline-end: calc(100% + var(--editor-toolbar-vert-offset)); + inset-block-start: 100%; +} + +[dir="rtl"] :is(:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="270"],[data-main-rotation="90"] [data-editor-rotation="180"],[data-main-rotation="180"] [data-editor-rotation="90"],[data-main-rotation="270"] [data-editor-rotation="0"])) .editToolbar) { + inset-inline-start: calc(0px - var(--editor-toolbar-vert-offset)); + inset-block-start: 0; +} + +.dialog.altText::backdrop { + -webkit-mask: url(#alttext-manager-mask); + mask: url(#alttext-manager-mask); +} + +.dialog.altText.positioned { + margin: 0; +} + +.dialog.altText #altTextContainer { + width: 300px; + height: -moz-fit-content; + height: fit-content; + display: inline-flex; + flex-direction: column; + align-items: flex-start; + gap: 16px; +} + +:is(.dialog.altText #altTextContainer) #overallDescription { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 4px; + align-self: stretch; +} + +:is(:is(.dialog.altText #altTextContainer) #overallDescription) span { + align-self: stretch; +} + +:is(:is(.dialog.altText #altTextContainer) #overallDescription) .title { + font-size: 13px; + font-style: normal; + font-weight: 590; +} + +:is(.dialog.altText #altTextContainer) #addDescription { + display: flex; + flex-direction: column; + align-items: stretch; + gap: 8px; +} + +:is(:is(.dialog.altText #altTextContainer) #addDescription) .descriptionArea { + flex: 1; + padding-inline: 24px 10px; +} + +:is(:is(:is(.dialog.altText #altTextContainer) #addDescription) .descriptionArea) textarea { + width: 100%; + min-height: 75px; +} + +:is(.dialog.altText #altTextContainer) #buttons { + display: flex; + justify-content: flex-end; + align-items: flex-start; + gap: 8px; + align-self: stretch; +} + +.dialog.newAltText { + --new-alt-text-ai-disclaimer-icon: url(images/altText_disclaimer.svg); + --new-alt-text-spinner-icon: url(images/altText_spinner.svg); + --csstools-light-dark-toggle--88: var(--csstools-color-scheme--light) #2b2a33; + --preview-image-bg-color: var(--csstools-light-dark-toggle--88, #f0f0f4); + --preview-image-border: none; +} + +@supports (color: light-dark(red, red)) { + .dialog.newAltText { + --preview-image-bg-color: light-dark(#f0f0f4, #2b2a33); + } +} + +@supports not (color: light-dark(tan, tan)) { + + .dialog.newAltText * { + --csstools-light-dark-toggle--88: var(--csstools-color-scheme--light) #2b2a33; + --preview-image-bg-color: var(--csstools-light-dark-toggle--88, #f0f0f4); + } +} + +@media screen and (forced-colors: active) { + + .dialog.newAltText { + --preview-image-bg-color: ButtonFace; + --preview-image-border: 1px solid ButtonText; + } +} + +.dialog.newAltText { + width: 80%; + max-width: 570px; + min-width: 300px; + padding: 0; +} + + .dialog.newAltText.noAi #newAltTextDisclaimer, .dialog.newAltText.noAi #newAltTextCreateAutomatically { + display: none !important; + } + + .dialog.newAltText.aiInstalling #newAltTextCreateAutomatically { + display: none !important; + } + + .dialog.newAltText.aiInstalling #newAltTextDownloadModel { + display: flex !important; + } + + .dialog.newAltText.error #newAltTextNotNow { + display: none !important; + } + + .dialog.newAltText.error #newAltTextCancel { + display: inline-block !important; + } + + .dialog.newAltText:not(.error) #newAltTextError { + display: none !important; + } + + .dialog.newAltText #newAltTextContainer { + display: flex; + width: auto; + padding: 16px; + flex-direction: column; + justify-content: flex-end; + align-items: flex-start; + gap: 12px; + flex: 0 1 auto; + line-height: normal; + } + +:is(.dialog.newAltText #newAltTextContainer) #mainContent { + display: flex; + justify-content: flex-end; + align-items: flex-start; + gap: 12px; + align-self: stretch; + flex: 1 1 auto; +} + +:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionAndSettings { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 16px; + flex: 1 0 0; + align-self: stretch; +} + +:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 8px; + align-self: stretch; + flex: 1 1 auto; +} + +:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer { + width: 100%; + height: 70px; + position: relative; +} + +:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea { + width: 100%; + height: 100%; + padding: 8px; +} + +:is(:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea)::-moz-placeholder { + color: var(--text-secondary-color); +} + +:is(:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea)::placeholder { + color: var(--text-secondary-color); +} + +:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) .altTextSpinner { + display: none; + position: absolute; + width: 16px; + height: 16px; + inset-inline-start: 8px; + inset-block-start: 8px; + -webkit-mask-size: cover; + mask-size: cover; + background-color: var(--text-secondary-color); + pointer-events: none; +} + +.loading:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea::-moz-placeholder { + color: transparent; +} + +.loading:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea::placeholder { + color: transparent; +} + +.loading:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) .altTextSpinner { + display: inline-block; + -webkit-mask-image: var(--new-alt-text-spinner-icon); + mask-image: var(--new-alt-text-spinner-icon); +} + +:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescription { + font-size: 11px; +} + +:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDisclaimer { + display: flex; + flex-direction: row; + align-items: flex-start; + gap: 4px; + font-size: 11px; +} + +:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDisclaimer)::before { + content: ""; + display: inline-block; + width: 17px; + height: 16px; + -webkit-mask-image: var(--new-alt-text-ai-disclaimer-icon); + mask-image: var(--new-alt-text-ai-disclaimer-icon); + -webkit-mask-size: cover; + mask-size: cover; + background-color: var(--text-secondary-color); + flex: 1 0 auto; +} + +:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextDownloadModel { + display: flex; + align-items: center; + gap: 4px; + align-self: stretch; +} + +:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextDownloadModel)::before { + content: ""; + display: inline-block; + width: 16px; + height: 16px; + -webkit-mask-image: var(--new-alt-text-spinner-icon); + mask-image: var(--new-alt-text-spinner-icon); + -webkit-mask-size: cover; + mask-size: cover; + background-color: var(--text-secondary-color); +} + +:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextImagePreview { + width: 180px; + aspect-ratio: 1; + display: flex; + justify-content: center; + align-items: center; + flex: 0 0 auto; + background-color: var(--preview-image-bg-color); + border: var(--preview-image-border); +} + +:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextImagePreview) > canvas { + max-width: 100%; + max-height: 100%; +} + +.colorPicker { + --csstools-light-dark-toggle--89: var(--csstools-color-scheme--light) #80ebff; + --hover-outline-color: var(--csstools-light-dark-toggle--89, #0250bb); + --csstools-light-dark-toggle--90: var(--csstools-color-scheme--light) #aaf2ff; + --selected-outline-color: var(--csstools-light-dark-toggle--90, #0060df); + --csstools-light-dark-toggle--91: var(--csstools-color-scheme--light) #52525e; + --swatch-border-color: var(--csstools-light-dark-toggle--91, #cfcfd8); +} + +@supports (color: light-dark(red, red)) { + .colorPicker { + --hover-outline-color: light-dark(#0250bb, #80ebff); + --selected-outline-color: light-dark(#0060df, #aaf2ff); + --swatch-border-color: light-dark(#cfcfd8, #52525e); + } +} + +@supports not (color: light-dark(tan, tan)) { + + .colorPicker * { + --csstools-light-dark-toggle--89: var(--csstools-color-scheme--light) #80ebff; + --hover-outline-color: var(--csstools-light-dark-toggle--89, #0250bb); + --csstools-light-dark-toggle--90: var(--csstools-color-scheme--light) #aaf2ff; + --selected-outline-color: var(--csstools-light-dark-toggle--90, #0060df); + --csstools-light-dark-toggle--91: var(--csstools-color-scheme--light) #52525e; + --swatch-border-color: var(--csstools-light-dark-toggle--91, #cfcfd8); + } +} + +@media screen and (forced-colors: active) { + + .colorPicker { + --hover-outline-color: Highlight; + --selected-outline-color: var(--hover-outline-color); + --swatch-border-color: ButtonText; + } +} + +.colorPicker .swatch { + width: 16px; + height: 16px; + border: 1px solid var(--swatch-border-color); + border-radius: 100%; + outline-offset: 2px; + box-sizing: border-box; + forced-color-adjust: none; +} + +.colorPicker button:is(:hover,.selected) > .swatch { + border: none; +} + +.basicColorPicker { + width: 28px; +} + + .basicColorPicker::-moz-color-swatch { + border-radius: 100%; + } + + .basicColorPicker::-webkit-color-swatch { + border-radius: 100%; + } + +.annotationEditorLayer[data-main-rotation="0"] .highlightEditor:not(.free) > .editToolbar { + rotate: 0deg; +} + +.annotationEditorLayer[data-main-rotation="90"] .highlightEditor:not(.free) > .editToolbar { + rotate: 270deg; +} + +.annotationEditorLayer[data-main-rotation="180"] .highlightEditor:not(.free) > .editToolbar { + rotate: 180deg; +} + +.annotationEditorLayer[data-main-rotation="270"] .highlightEditor:not(.free) > .editToolbar { + rotate: 90deg; +} + +.annotationEditorLayer .highlightEditor { + position: absolute; + background: transparent; + z-index: 1; + cursor: auto; + max-width: 100%; + max-height: 100%; + border: none; + outline: none; + pointer-events: none; + transform-origin: 0 0; +} + +:is(.annotationEditorLayer .highlightEditor):not(.free) { + transform: none; +} + +:is(.annotationEditorLayer .highlightEditor) .internal { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: auto; +} + +.disabled:is(.annotationEditorLayer .highlightEditor) .internal { + pointer-events: none; +} + +.selectedEditor:is(.annotationEditorLayer .highlightEditor) .internal { + cursor: pointer; +} + +:is(.annotationEditorLayer .highlightEditor) .editToolbar { + --editor-toolbar-colorpicker-arrow-image: url(images/toolbarButton-menuArrow.svg); + transform-origin: center !important; +} + +:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker { + position: relative; + width: auto; + display: flex; + justify-content: center; + align-items: center; + gap: 4px; + padding: 4px; +} + +:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker)::after { + content: ""; + -webkit-mask-image: var(--editor-toolbar-colorpicker-arrow-image); + mask-image: var(--editor-toolbar-colorpicker-arrow-image); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-mask-position: center; + mask-position: center; + display: inline-block; + background-color: var(--editor-toolbar-fg-color); + width: 12px; + height: 12px; +} + +:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker):hover::after { + background-color: var(--editor-toolbar-hover-fg-color); +} + +:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker):has(.dropdown:not(.hidden)) { + background-color: var(--editor-toolbar-hover-bg-color); +} + + :is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker):has(.dropdown:not(.hidden))::after { + scale: -1; + } + +:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown { + position: absolute; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + gap: 11px; + padding-block: 8px; + border-radius: 6px; + background-color: var(--editor-toolbar-bg-color); + border: 1px solid var(--editor-toolbar-border-color); + box-shadow: var(--editor-toolbar-shadow); + inset-block-start: calc(100% + 4px); + width: calc(100% + 2 * var(--editor-toolbar-padding)); +} + +:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button { + width: 100%; + height: auto; + border: none; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + background: none; +} + +:is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button):is(:active,:focus-visible) { + outline: none; +} + +:is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button) > .swatch { + outline-offset: 2px; +} + +[aria-selected="true"]:is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button) > .swatch { + outline: 2px solid var(--selected-outline-color); +} + +:is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button):is(:hover,:active,:focus-visible) > .swatch { + outline: 2px solid var(--hover-outline-color); +} + +.editorParamsToolbar:has(#highlightParamsToolbarContainer) { + padding: unset; +} + +#highlightParamsToolbarContainer { + gap: 16px; + padding-inline: 10px; + padding-block-end: 12px; +} + + #highlightParamsToolbarContainer .colorPicker { + display: flex; + flex-direction: column; + gap: 8px; + } + +:is(#highlightParamsToolbarContainer .colorPicker) .dropdown { + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: row; + height: auto; +} + +:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button { + width: auto; + height: auto; + border: none; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + background: none; + flex: 0 0 auto; + padding: 0; +} + +:is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button) .swatch { + width: 24px; + height: 24px; +} + +:is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button):is(:active,:focus-visible) { + outline: none; +} + +[aria-selected="true"]:is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button) > .swatch { + outline: 2px solid var(--selected-outline-color); +} + +:is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button):is(:hover,:active,:focus-visible) > .swatch { + outline: 2px solid var(--hover-outline-color); +} + +#highlightParamsToolbarContainer #editorHighlightThickness { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + align-self: stretch; +} + +:is(#highlightParamsToolbarContainer #editorHighlightThickness) .editorParamsLabel { + height: auto; + align-self: stretch; +} + +:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker { + display: flex; + justify-content: space-between; + align-items: center; + align-self: stretch; + --csstools-light-dark-toggle--92: var(--csstools-color-scheme--light) #80808e; + --example-color: var(--csstools-light-dark-toggle--92, #bfbfc9); +} + +@supports (color: light-dark(red, red)) { + :is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker { + --example-color: light-dark(#bfbfc9, #80808e); + } +} + +@supports not (color: light-dark(tan, tan)) { + + :is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker) * { + --csstools-light-dark-toggle--92: var(--csstools-color-scheme--light) #80808e; + --example-color: var(--csstools-light-dark-toggle--92, #bfbfc9); + } +} + +@media screen and (forced-colors: active) { + + :is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker { + --example-color: CanvasText; + } +} + +:is(:is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker) > .editorParamsSlider[disabled]) { + opacity: 0.4; +} + +:is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker)::before, :is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker)::after { + content: ""; + width: 8px; + aspect-ratio: 1; + display: block; + border-radius: 100%; + background-color: var(--example-color); +} + +:is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker)::after { + width: 24px; +} + +:is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker) .editorParamsSlider { + width: unset; + height: 14px; +} + +#highlightParamsToolbarContainer #editorHighlightVisibility { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 8px; + align-self: stretch; +} + +:is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider { + --csstools-light-dark-toggle--93: var(--csstools-color-scheme--light) #8f8f9d; + --divider-color: var(--csstools-light-dark-toggle--93, #d7d7db); +} + +@supports (color: light-dark(red, red)) { + :is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider { + --divider-color: light-dark(#d7d7db, #8f8f9d); + } +} + +@supports not (color: light-dark(tan, tan)) { + + :is(:is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider) * { + --csstools-light-dark-toggle--93: var(--csstools-color-scheme--light) #8f8f9d; + --divider-color: var(--csstools-light-dark-toggle--93, #d7d7db); + } +} + +@media screen and (forced-colors: active) { + + :is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider { + --divider-color: CanvasText; + } +} + +:is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider { + margin-block: 4px; + width: 100%; + height: 1px; + background-color: var(--divider-color); +} + +:is(#highlightParamsToolbarContainer #editorHighlightVisibility) .toggler { + display: flex; + justify-content: space-between; + align-items: center; + align-self: stretch; +} + +#altTextSettingsDialog { + padding: 16px; +} + + #altTextSettingsDialog #altTextSettingsContainer { + display: flex; + width: 573px; + flex-direction: column; + gap: 16px; + } + +:is(#altTextSettingsDialog #altTextSettingsContainer) .mainContainer { + gap: 16px; +} + +:is(#altTextSettingsDialog #altTextSettingsContainer) .description { + color: var(--text-secondary-color); +} + +:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings { + display: flex; + flex-direction: column; + gap: 12px; +} + +:is(:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings) button { + width: -moz-fit-content; + width: fit-content; +} + +.download:is(:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings) #deleteModelButton { + display: none; +} + +:is(:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings):not(.download) #downloadModelButton { + display: none; +} + +:is(#altTextSettingsDialog #altTextSettingsContainer) #automaticAltText, :is(#altTextSettingsDialog #altTextSettingsContainer) #altTextEditor { + display: flex; + flex-direction: column; + gap: 8px; +} + +:is(#altTextSettingsDialog #altTextSettingsContainer) #createModelDescription, :is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings, :is(#altTextSettingsDialog #altTextSettingsContainer) #showAltTextDialogDescription { + padding-inline-start: 40px; +} + +:is(#altTextSettingsDialog #altTextSettingsContainer) #automaticSettings { + display: flex; + flex-direction: column; + gap: 16px; +} + +.sidebar { + --csstools-light-dark-toggle--94: var(--csstools-color-scheme--light) #23222b; + --sidebar-bg-color: var(--csstools-light-dark-toggle--94, #fff); + --csstools-light-dark-toggle--95: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.1); + --sidebar-border-color: var(--csstools-light-dark-toggle--95, rgb(21 20 26 / 0.1)); + --csstools-light-dark-toggle--96: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); + --csstools-light-dark-toggle--97: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); + --sidebar-box-shadow: 0 0.25px 0.75px var(--csstools-light-dark-toggle--96, rgb(0 0 0 / 0.05)), 0 2px 6px 0 var(--csstools-light-dark-toggle--97, rgb(0 0 0 / 0.1)); + --sidebar-border-radius: 8px; + --sidebar-padding: 5px; + --sidebar-min-width: 180px; + --sidebar-max-width: 632px; + --sidebar-width: 239px; + --resizer-width: 4px; + --csstools-light-dark-toggle--98: var(--csstools-color-scheme--light) #00cadb; + --resizer-hover-bg-color: var(--csstools-light-dark-toggle--98, #0062fa); +} + +@supports (color: light-dark(red, red)) { + .sidebar { + --sidebar-bg-color: light-dark(#fff, #23222b); + } +} + +@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { + .sidebar { + --sidebar-border-color: light-dark( rgb(21 20 26 / 0.1), rgb(251 251 254 / 0.1) ); + --sidebar-box-shadow: 0 0.25px 0.75px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), 0 2px 6px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); + } +} + +@supports (color: light-dark(red, red)) { + .sidebar { + --resizer-hover-bg-color: light-dark(#0062fa, #00cadb); + } +} + +@supports not (color: light-dark(tan, tan)) { + + .sidebar * { + --csstools-light-dark-toggle--94: var(--csstools-color-scheme--light) #23222b; + --sidebar-bg-color: var(--csstools-light-dark-toggle--94, #fff); + --csstools-light-dark-toggle--95: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.1); + --sidebar-border-color: var(--csstools-light-dark-toggle--95, rgb(21 20 26 / 0.1)); + --csstools-light-dark-toggle--96: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); + --csstools-light-dark-toggle--97: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); + --sidebar-box-shadow: 0 0.25px 0.75px var(--csstools-light-dark-toggle--96, rgb(0 0 0 / 0.05)), 0 2px 6px 0 var(--csstools-light-dark-toggle--97, rgb(0 0 0 / 0.1)); + --csstools-light-dark-toggle--98: var(--csstools-color-scheme--light) #00cadb; + --resizer-hover-bg-color: var(--csstools-light-dark-toggle--98, #0062fa); + } +} + +@media screen and (forced-colors: active) { + + .sidebar { + --sidebar-bg-color: Canvas; + --sidebar-border-color: CanvasText; + --sidebar-box-shadow: none; + --resizer-hover-bg-color: CanvasText; + } +} + +.sidebar { + border-radius: var(--sidebar-border-radius); + box-shadow: var(--sidebar-box-shadow); + border: 1px solid var(--sidebar-border-color); + background-color: var(--sidebar-bg-color); + inset-block-start: calc(100% + var(--doorhanger-height) - 2px); + padding-block: var(--sidebar-padding); + width: var(--sidebar-width); + min-width: var(--sidebar-min-width); + max-width: var(--sidebar-max-width); +} + + .sidebar .sidebarResizer { + width: var(--resizer-width); + background-color: transparent; + forced-color-adjust: none; + cursor: ew-resize; + position: absolute; + inset-block: calc(var(--sidebar-padding) + var(--sidebar-border-radius)); + inset-inline-start: calc(0px - var(--resizer-width) / 2); + transition: background-color 0.5s ease-in-out; + box-sizing: border-box; + border: 1px solid transparent; + border-block-width: 0; + background-clip: content-box; + } + +:is(.sidebar .sidebarResizer):hover { + background-color: var(--resizer-hover-bg-color); +} + +.sidebar.resizing { + cursor: ew-resize; + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + + .sidebar.resizing :not(.sidebarResizer) { + pointer-events: none; + } + :root { --csstools-color-scheme--light: initial; + color-scheme: light dark; --viewer-container-height: 0; --pdfViewer-padding-bottom: 0; --page-margin: 1px auto -8px; --page-border: 9px solid transparent; --spreadHorizontalWrapped-margin-LR: -3.5px; --loading-icon-delay: 400ms; + --csstools-light-dark-toggle--99: var(--csstools-color-scheme--light) #0df; + --focus-ring-color: var(--csstools-light-dark-toggle--99, #0060df); + --focus-ring-outline: 2px solid var(--focus-ring-color); +} + +@supports (color: light-dark(red, red)) { + :root { + --focus-ring-color: light-dark(#0060df, #0df); + } +} + +@supports not (color: light-dark(tan, tan)) { + + :root * { + --csstools-light-dark-toggle--99: var(--csstools-color-scheme--light) #0df; + --focus-ring-color: var(--csstools-light-dark-toggle--99, #0060df); + } +} + +@media (prefers-color-scheme: dark) { + + :root { + --csstools-color-scheme--light:; + } +} + +@media screen and (forced-colors: active) { + + :root { + --pdfViewer-padding-bottom: 9px; + --page-margin: 8px auto -1px; + --page-border: 1px solid CanvasText; + --spreadHorizontalWrapped-margin-LR: 3.5px; + --focus-ring-color: CanvasText; + } +} + +[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%); +} + +#hiddenCopyElement, +.hiddenCanvasElement { + position: absolute; + top: 0; + left: 0; + width: 0; + height: 0; + display: none; } .pdfViewer { @@ -141,6 +5406,29 @@ margin-inline: 5px; } +.pdfViewer .page.loadingIcon::after { + position: absolute; + top: 0; + left: 0; + content: ""; + width: 100%; + height: 100%; + display: none; + transition-property: display; + transition-delay: var(--loading-icon-delay); + z-index: 5; + contain: strict; +} + +.pdfViewer .page.loading::after { + display: block; +} + +.pdfViewer .page:not(.loading)::after { + transition-property: none; + display: none; +} + .pdfPresentationMode .pdfViewer { padding-bottom: 0; }