/* Copyright 2014 Mozilla Foundation * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ .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--24: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); --message-bar-close-button-hover-bg-color: var(--csstools-light-dark-toggle--24, rgb(21 20 26 / 0.14)); --csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); --message-bar-close-button-active-bg-color: var(--csstools-light-dark-toggle--25, rgb(21 20 26 / 0.21)); --csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); --message-bar-close-button-focus-bg-color: var(--csstools-light-dark-toggle--26, 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--24: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); --message-bar-close-button-hover-bg-color: var(--csstools-light-dark-toggle--24, rgb(21 20 26 / 0.14)); --csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); --message-bar-close-button-active-bg-color: var(--csstools-light-dark-toggle--25, rgb(21 20 26 / 0.21)); --csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); --message-bar-close-button-focus-bg-color: var(--csstools-light-dark-toggle--26, 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--27: var(--csstools-color-scheme--light) #fbfbfe; --text-primary-color: var(--csstools-light-dark-toggle--27, #15141a); --message-bar-icon: url(images/messageBar_info.svg); --csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) #73a7f3; --message-bar-icon-color: var(--csstools-light-dark-toggle--28, #0060df); --csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) #003070; --message-bar-bg-color: var(--csstools-light-dark-toggle--29, #deeafc); --message-bar-fg-color: var(--text-primary-color); --csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); --message-bar-border-color: var(--csstools-light-dark-toggle--30, rgb(0 0 0 / 0.08)); --csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); --undo-button-bg-color: var(--csstools-light-dark-toggle--31, rgb(21 20 26 / 0.07)); --csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.14); --undo-button-bg-color-hover: var(--csstools-light-dark-toggle--32, rgb(21 20 26 / 0.14)); --csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.21); --undo-button-bg-color-active: var(--csstools-light-dark-toggle--33, rgb(21 20 26 / 0.21)); --csstools-light-dark-toggle--34: var(--csstools-color-scheme--light) #0df; --undo-button-border: 1px solid var(--csstools-light-dark-toggle--34, #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--27: var(--csstools-color-scheme--light) #fbfbfe; --text-primary-color: var(--csstools-light-dark-toggle--27, #15141a); --csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) #73a7f3; --message-bar-icon-color: var(--csstools-light-dark-toggle--28, #0060df); --csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) #003070; --message-bar-bg-color: var(--csstools-light-dark-toggle--29, #deeafc); --csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); --message-bar-border-color: var(--csstools-light-dark-toggle--30, rgb(0 0 0 / 0.08)); --csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); --undo-button-bg-color: var(--csstools-light-dark-toggle--31, rgb(21 20 26 / 0.07)); --csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.14); --undo-button-bg-color-hover: var(--csstools-light-dark-toggle--32, rgb(21 20 26 / 0.14)); --csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.21); --undo-button-bg-color-active: var(--csstools-light-dark-toggle--33, rgb(21 20 26 / 0.21)); --csstools-light-dark-toggle--34: var(--csstools-color-scheme--light) #0df; --undo-button-border: 1px solid var(--csstools-light-dark-toggle--34, #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--35: var(--csstools-color-scheme--light) #1c1b22; --dialog-bg-color: var(--csstools-light-dark-toggle--35, white); --csstools-light-dark-toggle--36: var(--csstools-color-scheme--light) #1c1b22; --dialog-border-color: var(--csstools-light-dark-toggle--36, white); --csstools-light-dark-toggle--37: var(--csstools-color-scheme--light) #15141a; --dialog-shadow: 0 2px 14px 0 var(--csstools-light-dark-toggle--37, rgb(58 57 68 / 0.2)); --csstools-light-dark-toggle--38: var(--csstools-color-scheme--light) #fbfbfe; --text-primary-color: var(--csstools-light-dark-toggle--38, #15141a); --csstools-light-dark-toggle--39: var(--csstools-color-scheme--light) #cfcfd8; --text-secondary-color: var(--csstools-light-dark-toggle--39, #5b5b66); --hover-filter: brightness(0.9); --csstools-light-dark-toggle--40: var(--csstools-color-scheme--light) #0df; --link-fg-color: var(--csstools-light-dark-toggle--40, #0060df); --csstools-light-dark-toggle--41: var(--csstools-color-scheme--light) #80ebff; --link-hover-fg-color: var(--csstools-light-dark-toggle--41, #0250bb); --csstools-light-dark-toggle--42: var(--csstools-color-scheme--light) #52525e; --separator-color: var(--csstools-light-dark-toggle--42, #f0f0f4); --textarea-border-color: #8f8f9d; --csstools-light-dark-toggle--43: var(--csstools-color-scheme--light) #42414d; --textarea-bg-color: var(--csstools-light-dark-toggle--43, white); --textarea-fg-color: var(--text-secondary-color); --csstools-light-dark-toggle--44: var(--csstools-color-scheme--light) #2b2a33; --radio-bg-color: var(--csstools-light-dark-toggle--44, #f0f0f4); --csstools-light-dark-toggle--45: var(--csstools-color-scheme--light) #15141a; --radio-checked-bg-color: var(--csstools-light-dark-toggle--45, #fbfbfe); --radio-border-color: #8f8f9d; --csstools-light-dark-toggle--46: var(--csstools-color-scheme--light) #0df; --radio-checked-border-color: var(--csstools-light-dark-toggle--46, #0060df); --csstools-light-dark-toggle--47: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); --button-secondary-bg-color: var(--csstools-light-dark-toggle--47, 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--48: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); --button-secondary-active-bg-color: var(--csstools-light-dark-toggle--48, 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--49: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); --button-secondary-hover-bg-color: var(--csstools-light-dark-toggle--49, 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--50: var(--csstools-color-scheme--light) #0df; --button-primary-bg-color: var(--csstools-light-dark-toggle--50, #0060df); --csstools-light-dark-toggle--51: var(--csstools-color-scheme--light) #15141a; --button-primary-fg-color: var(--csstools-light-dark-toggle--51, #fbfbfe); --button-primary-border-color: var(--button-primary-bg-color); --csstools-light-dark-toggle--52: var(--csstools-color-scheme--light) #aaf2ff; --button-primary-active-bg-color: var(--csstools-light-dark-toggle--52, #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--53: var(--csstools-color-scheme--light) #80ebff; --button-primary-hover-bg-color: var(--csstools-light-dark-toggle--53, #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--54: var(--csstools-color-scheme--light) #42414d; --input-text-bg-color: var(--csstools-light-dark-toggle--54, 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--35: var(--csstools-color-scheme--light) #1c1b22; --dialog-bg-color: var(--csstools-light-dark-toggle--35, white); --csstools-light-dark-toggle--36: var(--csstools-color-scheme--light) #1c1b22; --dialog-border-color: var(--csstools-light-dark-toggle--36, white); --csstools-light-dark-toggle--37: var(--csstools-color-scheme--light) #15141a; --dialog-shadow: 0 2px 14px 0 var(--csstools-light-dark-toggle--37, rgb(58 57 68 / 0.2)); --csstools-light-dark-toggle--38: var(--csstools-color-scheme--light) #fbfbfe; --text-primary-color: var(--csstools-light-dark-toggle--38, #15141a); --csstools-light-dark-toggle--39: var(--csstools-color-scheme--light) #cfcfd8; --text-secondary-color: var(--csstools-light-dark-toggle--39, #5b5b66); --csstools-light-dark-toggle--40: var(--csstools-color-scheme--light) #0df; --link-fg-color: var(--csstools-light-dark-toggle--40, #0060df); --csstools-light-dark-toggle--41: var(--csstools-color-scheme--light) #80ebff; --link-hover-fg-color: var(--csstools-light-dark-toggle--41, #0250bb); --csstools-light-dark-toggle--42: var(--csstools-color-scheme--light) #52525e; --separator-color: var(--csstools-light-dark-toggle--42, #f0f0f4); --csstools-light-dark-toggle--43: var(--csstools-color-scheme--light) #42414d; --textarea-bg-color: var(--csstools-light-dark-toggle--43, white); --csstools-light-dark-toggle--44: var(--csstools-color-scheme--light) #2b2a33; --radio-bg-color: var(--csstools-light-dark-toggle--44, #f0f0f4); --csstools-light-dark-toggle--45: var(--csstools-color-scheme--light) #15141a; --radio-checked-bg-color: var(--csstools-light-dark-toggle--45, #fbfbfe); --csstools-light-dark-toggle--46: var(--csstools-color-scheme--light) #0df; --radio-checked-border-color: var(--csstools-light-dark-toggle--46, #0060df); --csstools-light-dark-toggle--47: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); --button-secondary-bg-color: var(--csstools-light-dark-toggle--47, rgb(21 20 26 / 0.07)); --csstools-light-dark-toggle--48: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); --button-secondary-active-bg-color: var(--csstools-light-dark-toggle--48, rgb(21 20 26 / 0.21)); --csstools-light-dark-toggle--49: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); --button-secondary-hover-bg-color: var(--csstools-light-dark-toggle--49, rgb(21 20 26 / 0.14)); --csstools-light-dark-toggle--50: var(--csstools-color-scheme--light) #0df; --button-primary-bg-color: var(--csstools-light-dark-toggle--50, #0060df); --csstools-light-dark-toggle--51: var(--csstools-color-scheme--light) #15141a; --button-primary-fg-color: var(--csstools-light-dark-toggle--51, #fbfbfe); --csstools-light-dark-toggle--52: var(--csstools-color-scheme--light) #aaf2ff; --button-primary-active-bg-color: var(--csstools-light-dark-toggle--52, #054096); --csstools-light-dark-toggle--53: var(--csstools-color-scheme--light) #80ebff; --button-primary-hover-bg-color: var(--csstools-light-dark-toggle--53, #0250bb); --csstools-light-dark-toggle--54: var(--csstools-color-scheme--light) #42414d; --input-text-bg-color: var(--csstools-light-dark-toggle--54, 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--55: var(--csstools-color-scheme--light) #5a3100; --message-bar-bg-color: var(--csstools-light-dark-toggle--55, #ffebcd); --csstools-light-dark-toggle--56: var(--csstools-color-scheme--light) #fbfbfe; --message-bar-fg-color: var(--csstools-light-dark-toggle--56, #15141a); --csstools-light-dark-toggle--57: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); --message-bar-border-color: var(--csstools-light-dark-toggle--57, rgb(0 0 0 / 0.08)); --message-bar-icon: url(images/messageBar_warning.svg); --csstools-light-dark-toggle--58: var(--csstools-color-scheme--light) #e49c49; --message-bar-icon-color: var(--csstools-light-dark-toggle--58, #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--55: var(--csstools-color-scheme--light) #5a3100; --message-bar-bg-color: var(--csstools-light-dark-toggle--55, #ffebcd); --csstools-light-dark-toggle--56: var(--csstools-color-scheme--light) #fbfbfe; --message-bar-fg-color: var(--csstools-light-dark-toggle--56, #15141a); --csstools-light-dark-toggle--57: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); --message-bar-border-color: var(--csstools-light-dark-toggle--57, rgb(0 0 0 / 0.08)); --csstools-light-dark-toggle--58: var(--csstools-color-scheme--light) #e49c49; --message-bar-icon-color: var(--csstools-light-dark-toggle--58, #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 { --csstools-color-scheme--light: initial; color-scheme: only light; 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 { --min-font-size: 1; --text-scale-factor: calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv: calc(1 / var(--min-font-size)); } .textLayer > :not(.markedContent), .textLayer .markedContent span:not(.markedContent) { z-index: 1; --font-height: 0; font-size: calc(var(--text-scale-factor) * var(--font-height)); --scale-x: 1; --rotate: 0deg; transform: rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); } .textLayer .markedContent { display: contents; } .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--59: var(--csstools-color-scheme--light) #0df; --color-accent-primary: var(--csstools-light-dark-toggle--59, #0060df); --csstools-light-dark-toggle--60: var(--csstools-color-scheme--light) #80ebff; --color-accent-primary-hover: var(--csstools-light-dark-toggle--60, #0250bb); --csstools-light-dark-toggle--61: var(--csstools-color-scheme--light) #aaf2ff; --color-accent-primary-active: var(--csstools-light-dark-toggle--61, #054096); --border-radius-circle: 9999px; --border-width: 1px; --size-item-small: 16px; --size-item-large: 32px; --csstools-light-dark-toggle--62: var(--csstools-color-scheme--light) #1c1b22; --color-canvas: var(--csstools-light-dark-toggle--62, white); --background-color-canvas: var(--color-canvas); --csstools-light-dark-toggle--63: var(--csstools-color-scheme--light) #f9f9fa; --border-color-interactive: var(--csstools-light-dark-toggle--63, #8f8f9d); --border-color-interactive-hover: var(--border-color-interactive); --border-color-interactive-active: var(--border-color-interactive); --focus-outline-offset: 2px; } @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--59: var(--csstools-color-scheme--light) #0df; --color-accent-primary: var(--csstools-light-dark-toggle--59, #0060df); --csstools-light-dark-toggle--60: var(--csstools-color-scheme--light) #80ebff; --color-accent-primary-hover: var(--csstools-light-dark-toggle--60, #0250bb); --csstools-light-dark-toggle--61: var(--csstools-color-scheme--light) #aaf2ff; --color-accent-primary-active: var(--csstools-light-dark-toggle--61, #054096); --csstools-light-dark-toggle--62: var(--csstools-color-scheme--light) #1c1b22; --color-canvas: var(--csstools-light-dark-toggle--62, white); --csstools-light-dark-toggle--63: var(--csstools-color-scheme--light) #f9f9fa; --border-color-interactive: var(--csstools-light-dark-toggle--63, #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--64: var(--csstools-color-scheme--light) #2b2a33; --signature-bg: var(--csstools-light-dark-toggle--64, #f9f9fb); --csstools-light-dark-toggle--65: var(--csstools-color-scheme--light) var(--signature-bg); --signature-hover-bg: var(--csstools-light-dark-toggle--65, #f0f0f4); --button-signature-bg: transparent; --button-signature-color: var(--main-color); --csstools-light-dark-toggle--66: var(--csstools-color-scheme--light) #5b5b66; --button-signature-active-bg: var(--csstools-light-dark-toggle--66, #cfcfd8); --button-signature-active-border: none; --button-signature-active-color: var(--button-signature-color); --button-signature-border: none; --csstools-light-dark-toggle--67: var(--csstools-color-scheme--light) #52525e; --button-signature-hover-bg: var(--csstools-light-dark-toggle--67, #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--64: var(--csstools-color-scheme--light) #2b2a33; --signature-bg: var(--csstools-light-dark-toggle--64, #f9f9fb); --csstools-light-dark-toggle--65: var(--csstools-color-scheme--light) var(--signature-bg); --signature-hover-bg: var(--csstools-light-dark-toggle--65, #f0f0f4); --csstools-light-dark-toggle--66: var(--csstools-color-scheme--light) #5b5b66; --button-signature-active-bg: var(--csstools-light-dark-toggle--66, #cfcfd8); --csstools-light-dark-toggle--67: var(--csstools-color-scheme--light) #52525e; --button-signature-hover-bg: var(--csstools-light-dark-toggle--67, #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--68: var(--csstools-color-scheme--light) #1c1b22; --comment-button-bg: var(--csstools-light-dark-toggle--68, white); --csstools-light-dark-toggle--69: var(--csstools-color-scheme--light) #fbfbfe; --comment-button-fg: var(--csstools-light-dark-toggle--69, #5b5b66); --csstools-light-dark-toggle--70: var(--csstools-color-scheme--light) #a6ecf4; --comment-button-active-bg: var(--csstools-light-dark-toggle--70, #0041a4); --csstools-light-dark-toggle--71: var(--csstools-color-scheme--light) #15141a; --comment-button-active-fg: var(--csstools-light-dark-toggle--71, white); --csstools-light-dark-toggle--72: var(--csstools-color-scheme--light) #61dce9; --comment-button-hover-bg: var(--csstools-light-dark-toggle--72, #0053cb); --csstools-light-dark-toggle--73: var(--csstools-color-scheme--light) #15141a; --comment-button-hover-fg: var(--csstools-light-dark-toggle--73, white); --csstools-light-dark-toggle--74: var(--csstools-color-scheme--light) #00cadb; --comment-button-selected-bg: var(--csstools-light-dark-toggle--74, #0062fa); --csstools-light-dark-toggle--75: var(--csstools-color-scheme--light) #bfbfc9; --comment-button-border-color: var(--csstools-light-dark-toggle--75, #8f8f9d); --comment-button-active-border-color: var(--comment-button-active-bg); --csstools-light-dark-toggle--76: var(--csstools-color-scheme--light) #3a3944; --comment-button-focus-border-color: var(--csstools-light-dark-toggle--76, #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--77: var(--csstools-color-scheme--light) #15141a; --comment-button-selected-fg: var(--csstools-light-dark-toggle--77, white); --comment-button-dim: 24px; --csstools-light-dark-toggle--78: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); --csstools-light-dark-toggle--79: 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--78, rgb(0 0 0 / 0.05)), 0 2px 6px 0 var(--csstools-light-dark-toggle--79, rgb(0 0 0 / 0.1)); --csstools-light-dark-toggle--80: var(--csstools-color-scheme--light) #00cadb; --comment-button-focus-outline-color: var(--csstools-light-dark-toggle--80, #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--68: var(--csstools-color-scheme--light) #1c1b22; --comment-button-bg: var(--csstools-light-dark-toggle--68, white); --csstools-light-dark-toggle--69: var(--csstools-color-scheme--light) #fbfbfe; --comment-button-fg: var(--csstools-light-dark-toggle--69, #5b5b66); --csstools-light-dark-toggle--70: var(--csstools-color-scheme--light) #a6ecf4; --comment-button-active-bg: var(--csstools-light-dark-toggle--70, #0041a4); --csstools-light-dark-toggle--71: var(--csstools-color-scheme--light) #15141a; --comment-button-active-fg: var(--csstools-light-dark-toggle--71, white); --csstools-light-dark-toggle--72: var(--csstools-color-scheme--light) #61dce9; --comment-button-hover-bg: var(--csstools-light-dark-toggle--72, #0053cb); --csstools-light-dark-toggle--73: var(--csstools-color-scheme--light) #15141a; --comment-button-hover-fg: var(--csstools-light-dark-toggle--73, white); --csstools-light-dark-toggle--74: var(--csstools-color-scheme--light) #00cadb; --comment-button-selected-bg: var(--csstools-light-dark-toggle--74, #0062fa); --csstools-light-dark-toggle--75: var(--csstools-color-scheme--light) #bfbfc9; --comment-button-border-color: var(--csstools-light-dark-toggle--75, #8f8f9d); --csstools-light-dark-toggle--76: var(--csstools-color-scheme--light) #3a3944; --comment-button-focus-border-color: var(--csstools-light-dark-toggle--76, #cfcfd8); --csstools-light-dark-toggle--77: var(--csstools-color-scheme--light) #15141a; --comment-button-selected-fg: var(--csstools-light-dark-toggle--77, white); --csstools-light-dark-toggle--78: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); --csstools-light-dark-toggle--79: 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--78, rgb(0 0 0 / 0.05)), 0 2px 6px 0 var(--csstools-light-dark-toggle--79, rgb(0 0 0 / 0.1)); --csstools-light-dark-toggle--80: var(--csstools-color-scheme--light) #00cadb; --comment-button-focus-outline-color: var(--csstools-light-dark-toggle--80, #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--81: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.69); --comment-date-fg-color: var(--csstools-light-dark-toggle--81, rgb(21 20 26 / 0.69)); --csstools-light-dark-toggle--82: var(--csstools-color-scheme--light) #1c1b22; --comment-bg-color: var(--csstools-light-dark-toggle--82, #f9f9fb); --csstools-light-dark-toggle--83: var(--csstools-color-scheme--light) #2c2b33; --comment-hover-bg-color: var(--csstools-light-dark-toggle--83, #e0e0e6); --csstools-light-dark-toggle--84: var(--csstools-color-scheme--light) #3a3944; --comment-active-bg-color: var(--csstools-light-dark-toggle--84, #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--85: var(--csstools-color-scheme--light) #52525e; --comment-border-color: var(--csstools-light-dark-toggle--85, #f0f0f4); --csstools-light-dark-toggle--86: var(--csstools-color-scheme--light) #00cadb; --comment-focus-outline-color: var(--csstools-light-dark-toggle--86, #0062fa); --csstools-light-dark-toggle--87: var(--csstools-color-scheme--light) #fbfbfe; --comment-fg-color: var(--csstools-light-dark-toggle--87, #15141a); --csstools-light-dark-toggle--88: var(--csstools-color-scheme--light) #00317e; --comment-count-bg-color: var(--csstools-light-dark-toggle--88, #e2f7ff); --csstools-light-dark-toggle--89: var(--csstools-color-scheme--light) #a6ecf4; --comment-indicator-active-fg-color: var(--csstools-light-dark-toggle--89, #0041a4); --comment-indicator-active-filter: brightness(calc(1 / var(--comment-active-brightness))); --csstools-light-dark-toggle--90: var(--csstools-color-scheme--light) #fbfbfe; --comment-indicator-focus-fg-color: var(--csstools-light-dark-toggle--90, #5b5b66); --csstools-light-dark-toggle--91: var(--csstools-color-scheme--light) #61dce9; --comment-indicator-hover-fg-color: var(--csstools-light-dark-toggle--91, #0053cb); --comment-indicator-hover-filter: brightness(calc(1 / var(--comment-hover-brightness))); --csstools-light-dark-toggle--92: var(--csstools-color-scheme--light) #00cadb; --comment-indicator-selected-fg-color: var(--csstools-light-dark-toggle--92, #0062fa); --button-comment-bg: transparent; --button-comment-color: var(--main-color); --csstools-light-dark-toggle--93: var(--csstools-color-scheme--light) #5b5b66; --button-comment-active-bg: var(--csstools-light-dark-toggle--93, #cfcfd8); --button-comment-active-border: none; --button-comment-active-color: var(--button-comment-color); --button-comment-border: none; --csstools-light-dark-toggle--94: var(--csstools-color-scheme--light) #52525e; --button-comment-hover-bg: var(--csstools-light-dark-toggle--94, #e0e0e6); --button-comment-hover-color: var(--button-comment-color); --csstools-light-dark-toggle--95: var(--csstools-color-scheme--light) #0df; --link-fg-color: var(--csstools-light-dark-toggle--95, #0060df); --csstools-light-dark-toggle--96: var(--csstools-color-scheme--light) #80ebff; --link-hover-fg-color: var(--csstools-light-dark-toggle--96, #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--81: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.69); --comment-date-fg-color: var(--csstools-light-dark-toggle--81, rgb(21 20 26 / 0.69)); --csstools-light-dark-toggle--82: var(--csstools-color-scheme--light) #1c1b22; --comment-bg-color: var(--csstools-light-dark-toggle--82, #f9f9fb); --csstools-light-dark-toggle--83: var(--csstools-color-scheme--light) #2c2b33; --comment-hover-bg-color: var(--csstools-light-dark-toggle--83, #e0e0e6); --csstools-light-dark-toggle--84: var(--csstools-color-scheme--light) #3a3944; --comment-active-bg-color: var(--csstools-light-dark-toggle--84, #d1d1d9); --csstools-light-dark-toggle--85: var(--csstools-color-scheme--light) #52525e; --comment-border-color: var(--csstools-light-dark-toggle--85, #f0f0f4); --csstools-light-dark-toggle--86: var(--csstools-color-scheme--light) #00cadb; --comment-focus-outline-color: var(--csstools-light-dark-toggle--86, #0062fa); --csstools-light-dark-toggle--87: var(--csstools-color-scheme--light) #fbfbfe; --comment-fg-color: var(--csstools-light-dark-toggle--87, #15141a); --csstools-light-dark-toggle--88: var(--csstools-color-scheme--light) #00317e; --comment-count-bg-color: var(--csstools-light-dark-toggle--88, #e2f7ff); --csstools-light-dark-toggle--89: var(--csstools-color-scheme--light) #a6ecf4; --comment-indicator-active-fg-color: var(--csstools-light-dark-toggle--89, #0041a4); --csstools-light-dark-toggle--90: var(--csstools-color-scheme--light) #fbfbfe; --comment-indicator-focus-fg-color: var(--csstools-light-dark-toggle--90, #5b5b66); --csstools-light-dark-toggle--91: var(--csstools-color-scheme--light) #61dce9; --comment-indicator-hover-fg-color: var(--csstools-light-dark-toggle--91, #0053cb); --csstools-light-dark-toggle--92: var(--csstools-color-scheme--light) #00cadb; --comment-indicator-selected-fg-color: var(--csstools-light-dark-toggle--92, #0062fa); --csstools-light-dark-toggle--93: var(--csstools-color-scheme--light) #5b5b66; --button-comment-active-bg: var(--csstools-light-dark-toggle--93, #cfcfd8); --csstools-light-dark-toggle--94: var(--csstools-color-scheme--light) #52525e; --button-comment-hover-bg: var(--csstools-light-dark-toggle--94, #e0e0e6); --csstools-light-dark-toggle--95: var(--csstools-color-scheme--light) #0df; --link-fg-color: var(--csstools-light-dark-toggle--95, #0060df); --csstools-light-dark-toggle--96: var(--csstools-color-scheme--light) #80ebff; --link-hover-fg-color: var(--csstools-light-dark-toggle--96, #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; overflow-y: visible; } #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--97: var(--csstools-color-scheme--light) #3a3944; --divider-color: var(--csstools-light-dark-toggle--97, #cfcfd8); --csstools-light-dark-toggle--98: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); --csstools-light-dark-toggle--99: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); --comment-shadow: 0 0.5px 2px 0 var(--csstools-light-dark-toggle--98, rgb(0 0 0 / 0.05)), 0 4px 16px 0 var(--csstools-light-dark-toggle--99, 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--97: var(--csstools-color-scheme--light) #3a3944; --divider-color: var(--csstools-light-dark-toggle--97, #cfcfd8); --csstools-light-dark-toggle--98: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); --csstools-light-dark-toggle--99: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); --comment-shadow: 0 0.5px 2px 0 var(--csstools-light-dark-toggle--98, rgb(0 0 0 / 0.05)), 0 4px 16px 0 var(--csstools-light-dark-toggle--99, 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--100: var(--csstools-color-scheme--light) #2b2a33; --editor-toolbar-bg-color: var(--csstools-light-dark-toggle--100, #f0f0f4); --editor-toolbar-highlight-image: url(images/toolbarButton-editorHighlight.svg); --csstools-light-dark-toggle--101: var(--csstools-color-scheme--light) #fbfbfe; --editor-toolbar-fg-color: var(--csstools-light-dark-toggle--101, #2e2e56); --editor-toolbar-border-color: #8f8f9d; --editor-toolbar-hover-border-color: var(--editor-toolbar-border-color); --csstools-light-dark-toggle--102: var(--csstools-color-scheme--light) #52525e; --editor-toolbar-hover-bg-color: var(--csstools-light-dark-toggle--102, #e0e0e6); --editor-toolbar-hover-fg-color: var(--editor-toolbar-fg-color); --editor-toolbar-hover-outline: none; --csstools-light-dark-toggle--103: var(--csstools-color-scheme--light) #0df; --editor-toolbar-focus-outline-color: var(--csstools-light-dark-toggle--103, #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--104: var(--csstools-color-scheme--light) #54ffbd; --alt-text-done-color: var(--csstools-light-dark-toggle--104, #2ac3a2); --csstools-light-dark-toggle--105: var(--csstools-color-scheme--light) #80ebff; --alt-text-warning-color: var(--csstools-light-dark-toggle--105, #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--100: var(--csstools-color-scheme--light) #2b2a33; --editor-toolbar-bg-color: var(--csstools-light-dark-toggle--100, #f0f0f4); --csstools-light-dark-toggle--101: var(--csstools-color-scheme--light) #fbfbfe; --editor-toolbar-fg-color: var(--csstools-light-dark-toggle--101, #2e2e56); --csstools-light-dark-toggle--102: var(--csstools-color-scheme--light) #52525e; --editor-toolbar-hover-bg-color: var(--csstools-light-dark-toggle--102, #e0e0e6); --csstools-light-dark-toggle--103: var(--csstools-color-scheme--light) #0df; --editor-toolbar-focus-outline-color: var(--csstools-light-dark-toggle--103, #0060df); --csstools-light-dark-toggle--104: var(--csstools-color-scheme--light) #54ffbd; --alt-text-done-color: var(--csstools-light-dark-toggle--104, #2ac3a2); --csstools-light-dark-toggle--105: var(--csstools-color-scheme--light) #80ebff; --alt-text-warning-color: var(--csstools-light-dark-toggle--105, #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--106: var(--csstools-color-scheme--light) #1c1b22; --alt-text-tooltip-bg: var(--csstools-light-dark-toggle--106, #f0f0f4); --csstools-light-dark-toggle--107: var(--csstools-color-scheme--light) #fbfbfe; --alt-text-tooltip-fg: var(--csstools-light-dark-toggle--107, #15141a); --alt-text-tooltip-border: #8f8f9d; --csstools-light-dark-toggle--108: var(--csstools-color-scheme--light) #15141a; --alt-text-tooltip-shadow: 0 2px 6px 0 var(--csstools-light-dark-toggle--108, 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--106: var(--csstools-color-scheme--light) #1c1b22; --alt-text-tooltip-bg: var(--csstools-light-dark-toggle--106, #f0f0f4); --csstools-light-dark-toggle--107: var(--csstools-color-scheme--light) #fbfbfe; --alt-text-tooltip-fg: var(--csstools-light-dark-toggle--107, #15141a); --csstools-light-dark-toggle--108: var(--csstools-color-scheme--light) #15141a; --alt-text-tooltip-shadow: 0 2px 6px 0 var(--csstools-light-dark-toggle--108, 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--109: var(--csstools-color-scheme--light) #52525e; --no-alt-text-badge-border-color: var(--csstools-light-dark-toggle--109, #f0f0f4); --csstools-light-dark-toggle--110: var(--csstools-color-scheme--light) #fbfbfe; --no-alt-text-badge-bg-color: var(--csstools-light-dark-toggle--110, #cfcfd8); --csstools-light-dark-toggle--111: var(--csstools-color-scheme--light) #15141a; --no-alt-text-badge-fg-color: var(--csstools-light-dark-toggle--111, #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--109: var(--csstools-color-scheme--light) #52525e; --no-alt-text-badge-border-color: var(--csstools-light-dark-toggle--109, #f0f0f4); --csstools-light-dark-toggle--110: var(--csstools-color-scheme--light) #fbfbfe; --no-alt-text-badge-bg-color: var(--csstools-light-dark-toggle--110, #cfcfd8); --csstools-light-dark-toggle--111: var(--csstools-color-scheme--light) #15141a; --no-alt-text-badge-fg-color: var(--csstools-light-dark-toggle--111, #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--112: var(--csstools-color-scheme--light) #2b2a33; --preview-image-bg-color: var(--csstools-light-dark-toggle--112, #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--112: var(--csstools-color-scheme--light) #2b2a33; --preview-image-bg-color: var(--csstools-light-dark-toggle--112, #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--113: var(--csstools-color-scheme--light) #80ebff; --hover-outline-color: var(--csstools-light-dark-toggle--113, #0250bb); --csstools-light-dark-toggle--114: var(--csstools-color-scheme--light) #aaf2ff; --selected-outline-color: var(--csstools-light-dark-toggle--114, #0060df); --csstools-light-dark-toggle--115: var(--csstools-color-scheme--light) #52525e; --swatch-border-color: var(--csstools-light-dark-toggle--115, #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--113: var(--csstools-color-scheme--light) #80ebff; --hover-outline-color: var(--csstools-light-dark-toggle--113, #0250bb); --csstools-light-dark-toggle--114: var(--csstools-color-scheme--light) #aaf2ff; --selected-outline-color: var(--csstools-light-dark-toggle--114, #0060df); --csstools-light-dark-toggle--115: var(--csstools-color-scheme--light) #52525e; --swatch-border-color: var(--csstools-light-dark-toggle--115, #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--116: var(--csstools-color-scheme--light) #80808e; --example-color: var(--csstools-light-dark-toggle--116, #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--116: var(--csstools-color-scheme--light) #80808e; --example-color: var(--csstools-light-dark-toggle--116, #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--117: var(--csstools-color-scheme--light) #8f8f9d; --divider-color: var(--csstools-light-dark-toggle--117, #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--117: var(--csstools-color-scheme--light) #8f8f9d; --divider-color: var(--csstools-light-dark-toggle--117, #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(#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; } button.hasPopupMenu[aria-expanded="true"] + menu { visibility: visible; } button.hasPopupMenu[aria-expanded="false"] + menu { visibility: hidden; } .popupMenu { --menuitem-checkmark-icon: url(images/checkmark.svg); --menu-mark-icon-size: 0; --menu-icon-size: 16px; --menuitem-gap: 5px; --menuitem-border-color: transparent; --menuitem-active-bg: color-mix(in srgb, var(--menu-text-color), transparent 79%); --menuitem-text-active-fg: var(--menu-text-color); --menuitem-focus-bg: color-mix(in srgb, var(--menu-text-color), transparent 93%); --csstools-light-dark-toggle--118: var(--csstools-color-scheme--light) #00cadb; --menuitem-focus-outline-color: var(--csstools-light-dark-toggle--118, #0062fa); --csstools-light-dark-toggle--119: var(--csstools-color-scheme--light) black; --menuitem-focus-border-color: var(--csstools-light-dark-toggle--119, white); --csstools-light-dark-toggle--120: var(--csstools-color-scheme--light) #23222b; --menu-bg: var(--csstools-light-dark-toggle--120, white); --menu-background-blend-mode: normal; --csstools-light-dark-toggle--121: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); --csstools-light-dark-toggle--122: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); --menu-box-shadow: 0 0.375px 1.5px 0 var(--csstools-light-dark-toggle--121, rgb(0 0 0 / 0.05)), 0 3px 12px 0 var(--csstools-light-dark-toggle--122, rgb(0 0 0 / 0.1)); --csstools-light-dark-toggle--123: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.1); --menu-border-color: var(--csstools-light-dark-toggle--123, rgb(21 20 26 / 0.1)); --menuitem-border-radius: 8px; --menu-backdrop-filter: none; --csstools-light-dark-toggle--124: var(--csstools-color-scheme--light) #fbfbfe; --menu-text-color: var(--csstools-light-dark-toggle--124, #15141a); --menuitem-text-hover-fg: var(--menu-text-color); --menuitem-hover-bg: color-mix(in srgb, var(--menu-text-color), transparent 86%); --menuitem-hover-background-blend-mode: normal; } @supports (color: light-dark(red, red)) { .popupMenu { --menuitem-focus-outline-color: light-dark(#0062fa, #00cadb); --menuitem-focus-border-color: light-dark(white, black); --menu-bg: light-dark(white, #23222b); } } @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { .popupMenu { --menu-box-shadow: 0 0.375px 1.5px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), 0 3px 12px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); --menu-border-color: light-dark(rgb(21 20 26 / 0.1), rgb(251 251 254 / 0.1)); } } @supports (color: light-dark(red, red)) { .popupMenu { --menu-text-color: light-dark(#15141a, #fbfbfe); } } @supports not (color: light-dark(tan, tan)) { .popupMenu * { --csstools-light-dark-toggle--118: var(--csstools-color-scheme--light) #00cadb; --menuitem-focus-outline-color: var(--csstools-light-dark-toggle--118, #0062fa); --csstools-light-dark-toggle--119: var(--csstools-color-scheme--light) black; --menuitem-focus-border-color: var(--csstools-light-dark-toggle--119, white); --csstools-light-dark-toggle--120: var(--csstools-color-scheme--light) #23222b; --menu-bg: var(--csstools-light-dark-toggle--120, white); --csstools-light-dark-toggle--121: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); --csstools-light-dark-toggle--122: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); --menu-box-shadow: 0 0.375px 1.5px 0 var(--csstools-light-dark-toggle--121, rgb(0 0 0 / 0.05)), 0 3px 12px 0 var(--csstools-light-dark-toggle--122, rgb(0 0 0 / 0.1)); --csstools-light-dark-toggle--123: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.1); --menu-border-color: var(--csstools-light-dark-toggle--123, rgb(21 20 26 / 0.1)); --csstools-light-dark-toggle--124: var(--csstools-color-scheme--light) #fbfbfe; --menu-text-color: var(--csstools-light-dark-toggle--124, #15141a); } } @media screen and (forced-colors: active) { .popupMenu { --menu-bg: Canvas; --menu-background-blend-mode: normal; --menu-box-shadow: none; --menu-backdrop-filter: none; --menu-text-color: ButtonText; --menu-border-color: CanvasText; --menuitem-border-color: none; --menuitem-hover-bg: SelectedItemText; --menuitem-text-hover-fg: SelectedItem; --menuitem-active-bg: SelectedItemText; --menuitem-text-active-fg: SelectedItem; --menuitem-focus-outline-color: CanvasText; --menuitem-focus-border-color: none; } } .popupMenu { display: flex; flex-direction: column; width: -moz-max-content; width: max-content; height: auto; position: relative; left: 0; top: 1px; margin: 0; padding: 5px; box-sizing: border-box; background: var(--menu-bg); background-blend-mode: var(--menu-background-blend-mode); box-shadow: var(--menu-box-shadow); border-radius: 6px; border: 1px solid var(--menu-border-color); -webkit-backdrop-filter: var(--menu-backdrop-filter); backdrop-filter: var(--menu-backdrop-filter); } .popupMenu.withMark { --menu-mark-icon-size: 16px; } .popupMenu > li { display: flex; align-items: center; list-style: none; width: 100%; height: 24px; padding-inline: calc(var(--menu-mark-icon-size) + var(--menuitem-gap)) var(--menuitem-gap); gap: var(--menuitem-gap); box-sizing: border-box; border-radius: var(--menuitem-border-radius); border: 1px solid var(--menuitem-border-color); background: transparent; } :is(.popupMenu > li):has(button.selected)::before { content: ""; display: inline-block; width: 11px; height: 11px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-image: var(--menuitem-checkmark-icon); mask-image: var(--menuitem-checkmark-icon); background-color: var(--menu-text-color); position: absolute; margin-inline-start: -16px; } :is(.popupMenu > li):has(button:disabled) { opacity: 0.62; pointer-events: none; } :is(.popupMenu > li):hover { background: var(--menuitem-hover-bg); background-blend-mode: var(--menuitem-hover-background-blend-mode); } :is(:is(.popupMenu > li):hover > button):not(.noIcon)::before { background-color: var(--menuitem-text-hover-fg); } :is(:is(.popupMenu > li):hover > button) > span { color: var(--menuitem-text-hover-fg); } :is(.popupMenu > li):hover:has(button.selected)::before { background-color: var(--menuitem-text-hover-fg); } :is(.popupMenu > li):active { background-color: var(--menuitem-active-bg); } :is(.popupMenu > li):active > button > span { color: var(--menuitem-text-active-fg); } :is(.popupMenu > li):has(> button:focus-visible) { border-color: var(--menuitem-focus-border-color); background-color: var(--menuitem-focus-bg); outline: 2px solid var(--menuitem-focus-outline-color); outline-offset: 2px; } :is(.popupMenu > li) > button { display: flex; flex-direction: row; align-items: center; width: 100%; height: auto; padding: var(--menuitem-gap); gap: var(--menuitem-gap); background: transparent; border: none; } :is(:is(.popupMenu > li) > button):not(.noIcon)::before { display: inline-block; width: var(--menu-icon-size); height: var(--menu-icon-size); content: ""; -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: center; mask-position: center; background-color: var(--menu-text-color); } :is(:is(.popupMenu > li) > button):focus-visible { outline: none; } :is(:is(.popupMenu > li) > button) > span { display: inline-block; width: -moz-max-content; width: max-content; height: auto; text-align: start; color: var(--menu-text-color); -webkit-user-select: none; -moz-user-select: none; user-select: none; padding-inline-start: 6px; font: menu; font-size: 13px; font-style: normal; font-weight: 510; line-height: normal; } .treeView { --csstools-light-dark-toggle--125: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.8); --treeitem-color: var(--csstools-light-dark-toggle--125, rgb(0 0 0 / 0.8)); --csstools-light-dark-toggle--126: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.15); --treeitem-bg-color: var(--csstools-light-dark-toggle--126, rgb(0 0 0 / 0.15)); --csstools-light-dark-toggle--127: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.9); --treeitem-hover-color: var(--csstools-light-dark-toggle--127, rgb(0 0 0 / 0.9)); --csstools-light-dark-toggle--128: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.9); --treeitem-selected-color: var(--csstools-light-dark-toggle--128, rgb(0 0 0 / 0.9)); --csstools-light-dark-toggle--129: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.25); --treeitem-selected-bg-color: var(--csstools-light-dark-toggle--129, rgb(0 0 0 / 0.25)); --treeitem-expanded-icon: url(images/treeitem-expanded.svg); --treeitem-collapsed-icon: url(images/treeitem-collapsed.svg); } @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { .treeView { --treeitem-color: light-dark(rgb(0 0 0 / 0.8), rgb(255 255 255 / 0.8)); --treeitem-bg-color: light-dark(rgb(0 0 0 / 0.15), rgb(255 255 255 / 0.15)); --treeitem-hover-color: light-dark(rgb(0 0 0 / 0.9), rgb(255 255 255 / 0.9)); --treeitem-selected-color: light-dark(rgb(0 0 0 / 0.9), rgb(255 255 255 / 0.9)); --treeitem-selected-bg-color: light-dark(rgb(0 0 0 / 0.25), rgb(255 255 255 / 0.25)); } } @supports not (color: light-dark(tan, tan)) { .treeView * { --csstools-light-dark-toggle--125: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.8); --treeitem-color: var(--csstools-light-dark-toggle--125, rgb(0 0 0 / 0.8)); --csstools-light-dark-toggle--126: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.15); --treeitem-bg-color: var(--csstools-light-dark-toggle--126, rgb(0 0 0 / 0.15)); --csstools-light-dark-toggle--127: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.9); --treeitem-hover-color: var(--csstools-light-dark-toggle--127, rgb(0 0 0 / 0.9)); --csstools-light-dark-toggle--128: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.9); --treeitem-selected-color: var(--csstools-light-dark-toggle--128, rgb(0 0 0 / 0.9)); --csstools-light-dark-toggle--129: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.25); --treeitem-selected-bg-color: var(--csstools-light-dark-toggle--129, rgb(0 0 0 / 0.25)); } } :is(.treeView.withNesting .treeItemToggler)::before { position: absolute; display: inline-block; width: 16px; height: 16px; inset-inline-end: 4px; content: ""; background-color: var(--toolbar-icon-bg-color); -webkit-mask-image: var(--treeitem-expanded-icon); mask-image: var(--treeitem-expanded-icon); -webkit-mask-size: cover; mask-size: cover; } .treeView.withNesting .treeItemToggler { position: relative; float: inline-start; height: 0; width: 0; color: rgb(255 255 255 / 0.5); } .treeItemsHidden:is(.treeView.withNesting .treeItemToggler)::before { -webkit-mask-image: var(--treeitem-collapsed-icon); mask-image: var(--treeitem-collapsed-icon); transform: scaleX(var(--dir-factor)); } .treeItemsHidden:is(.treeView.withNesting .treeItemToggler) ~ .treeItems { display: none; } :is(.treeView.withNesting .treeItemToggler):hover + a, :is(.treeView.withNesting .treeItemToggler):hover ~ .treeItems { background-color: var(--treeitem-bg-color); background-clip: padding-box; border-radius: 2px; color: var(--treeitem-hover-color); } .treeView.withNesting > .treeItem, .treeView.withNesting .treeItem > .treeItems { margin-inline-start: 20px; } :is(#layersView.treeView .treeItem > a) * { cursor: pointer; } :is(#layersView.treeView .treeItem > a) > label { display: flex; align-items: center; padding-inline-start: 4px; } :is(:is(#layersView.treeView .treeItem > a) > label) > input { margin-top: 1px; } :is(.treeView .treeItem) > a { text-decoration: none; display: inline-block; min-width: calc(100% - 4px); height: auto; margin-bottom: 1px; padding: 2px 0 5px; padding-inline-start: 4px; border-radius: 2px; color: var(--treeitem-color); font-size: 13px; line-height: 15px; -webkit-user-select: none; -moz-user-select: none; user-select: none; white-space: normal; cursor: default; } :is(:is(.treeView .treeItem) > a):hover { background-color: var(--treeitem-bg-color); background-clip: padding-box; border-radius: 2px; color: var(--treeitem-hover-color); } .selected:is(.treeView .treeItem) > a { background-color: var(--treeitem-selected-bg-color); color: var(--treeitem-selected-color); } #outerContainer.viewsManagerMoving #viewsManager { visibility: visible; } #outerContainer.viewsManagerOpen #viewsManager { visibility: visible; inset-inline-start: 8px; } #outerContainer.viewsManagerOpen #viewerContainer:not(.pdfPresentationMode) { inset-inline-start: var(--viewsManager-width, 0); transition-property: inset-inline-start; } #outerContainer.viewsManagerResizing :is(#sidebarContainer, #viewerContainer, #loadingBar) { transition-duration: 0s; } #viewsManager { --views-manager-button-icon: url(images/pages_viewButton.svg); --views-manager-button-arrow-icon: url(images/pages_viewArrow.svg); --views-manager-add-file-button-icon: url(images/toolbarButton-zoomIn.svg); --current-outline-button-icon: url(images/toolbarButton-currentOutlineItem.svg); --menuitem-thumbnailsView-icon: url(images/pages_viewButton.svg); --menuitem-outlinesView-icon: url(images/toolbarButton-viewOutline.svg); --menuitem-attachmentsView-icon: url(images/toolbarButton-viewAttachments.svg); --menuitem-layersView-icon: url(images/toolbarButton-viewLayers.svg); --manage-button-icon: url(images/toolbarButton-pageDown.svg); --close-button-icon: url(images/pages_closeButton.svg); --undo-label-icon: url(images/altText_done.svg); --pages-selected-icon: url(images/pages_selected.svg); --spinner-icon: url(images/altText_spinner.svg); --csstools-light-dark-toggle--130: var(--csstools-color-scheme--light) rgb(66 65 77 / 0.92); --sidebar-bg-color: var(--csstools-light-dark-toggle--130, rgb(255 255 255 / 0.92)); --sidebar-backdrop-filter: blur(7px); --sidebar-width: 230px; --sidebar-min-width: min-content; --sidebar-max-width: 50vw; --sidebar-block-padding: 8px; --csstools-light-dark-toggle--131: var(--csstools-color-scheme--light) #fbfbfe; --text-color: var(--csstools-light-dark-toggle--131, #15141a); --button-fg: var(--text-color); --button-no-bg: transparent; --csstools-light-dark-toggle--132: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); --button-bg: var(--csstools-light-dark-toggle--132, rgb(21 20 26 / 0.07)); --button-border-color: transparent; --csstools-light-dark-toggle--133: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); --button-hover-bg: var(--csstools-light-dark-toggle--133, rgb(21 20 26 / 0.14)); --button-hover-fg: var(--text-color); --button-hover-border-color: var(--button-border-color); --csstools-light-dark-toggle--134: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); --button-active-bg: var(--csstools-light-dark-toggle--134, rgb(21 20 26 / 0.21)); --button-active-fg: var(--text-color); --button-active-border-color: var(--button-border-color); --button-focus-no-bg: color-mix(in srgb, var(--text-color), transparent 93%); --csstools-light-dark-toggle--135: var(--csstools-color-scheme--light) #00cadb; --button-focus-outline-color: var(--csstools-light-dark-toggle--135, #0062fa); --csstools-light-dark-toggle--136: var(--csstools-color-scheme--light) black; --button-focus-border-color: var(--csstools-light-dark-toggle--136, white); --status-border-color: transparent; --csstools-light-dark-toggle--137: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.03); --status-actions-bg: var(--csstools-light-dark-toggle--137, rgb(21 20 26 / 0.03)); --csstools-light-dark-toggle--138: var(--csstools-color-scheme--light) rgb(0 202 219 / 0.08); --status-undo-bg: var(--csstools-light-dark-toggle--138, rgb(0 98 250 / 0.08)); --status-waiting-bg: var(--status-undo-bg); --csstools-light-dark-toggle--139: var(--csstools-color-scheme--light) #00cadb; --indicator-color: var(--csstools-light-dark-toggle--139, #0062fa); --csstools-light-dark-toggle--140: var(--csstools-color-scheme--light) #6e001f; --status-warning-bg: var(--csstools-light-dark-toggle--140, #ffe8ea); --csstools-light-dark-toggle--141: var(--csstools-color-scheme--light) #ffa0aa; --indicator-warning-color: var(--csstools-light-dark-toggle--141, #b20037); --csstools-light-dark-toggle--142: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); --csstools-light-dark-toggle--143: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); --header-shadow: 0 0.25px 0.75px -0.75px var(--csstools-light-dark-toggle--142, rgb(0 0 0 / 0.05)), 0 2px 6px -6px var(--csstools-light-dark-toggle--143, rgb(0 0 0 / 0.1)); --csstools-light-dark-toggle--144: var(--csstools-color-scheme--light) #42414e; --header-bg: var(--csstools-light-dark-toggle--144, rgb(255 255 255 / 0.92)); --image-outline: none; --image-border-width: 6px; --csstools-light-dark-toggle--145: var(--csstools-color-scheme--light) #3a3944; --image-border-color: var(--csstools-light-dark-toggle--145, #cfcfd8); --image-hover-border-color: #bfbfc9; --image-current-border-color: var(--button-focus-outline-color); --image-current-focused-outline-color: var(--image-hover-border-color); --csstools-light-dark-toggle--146: var(--csstools-color-scheme--light) #42414d; --image-page-number-bg: var(--csstools-light-dark-toggle--146, #f0f0f4); --image-page-number-fg: var(--text-color); --image-page-number-border-color: transparent; --image-hover-page-number-bg: var(--image-page-number-bg); --image-hover-page-number-fg: var(--image-page-number-fg); --image-current-page-number-bg: var(--image-current-border-color); --csstools-light-dark-toggle--147: var(--csstools-color-scheme--light) #15141a; --image-current-page-number-fg: var(--csstools-light-dark-toggle--147, #fff); --image-current-hover-page-number-bg: var(--image-current-page-number-bg); --image-current-hover-page-number-fg: var(--image-current-page-number-fg); --csstools-light-dark-toggle--148: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); --csstools-light-dark-toggle--149: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); --image-shadow: 0 0.375px 1.5px 0 var(--csstools-light-dark-toggle--148, rgb(0 0 0 / 0.05)), 0 0 0 1px var(--image-border-color), 0 3px 12px 0 var(--csstools-light-dark-toggle--149, rgb(0 0 0 / 0.1)); --csstools-light-dark-toggle--150: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); --csstools-light-dark-toggle--151: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.1); --csstools-light-dark-toggle--152: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); --image-hover-shadow: 0 0.375px 1.5px 0 var(--csstools-light-dark-toggle--150, rgb(0 0 0 / 0.05)), 0 0 0 1px var(--csstools-light-dark-toggle--151, rgb(21 20 26 / 0.1)), 0 0 0 var(--image-border-width) var(--image-hover-border-color), 0 3px 12px 0 var(--csstools-light-dark-toggle--152, rgb(0 0 0 / 0.1)); --csstools-light-dark-toggle--153: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); --csstools-light-dark-toggle--154: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); --image-current-shadow: 0 0.375px 1.5px 0 var(--csstools-light-dark-toggle--153, rgb(0 0 0 / 0.05)), 0 0 0 var(--image-border-width) var(--image-current-border-color), 0 3px 12px 0 var(--csstools-light-dark-toggle--154, rgb(0 0 0 / 0.1)); --csstools-light-dark-toggle--155: var(--csstools-color-scheme--light) rgb(0 202 219 / 0.08); --image-dragging-placeholder-bg: var(--csstools-light-dark-toggle--155, rgb(0 98 250 / 0.08)); --multiple-dragging-bg: white; --image-multiple-dragging-shadow: 0 0 0 var(--image-border-width) var(--image-current-border-color), var(--image-border-width) var(--image-border-width) 0 calc(var(--image-border-width) / 2) var(--multiple-dragging-bg), var(--image-border-width) var(--image-border-width) 0 calc(3 * var(--image-border-width) / 2) var(--image-current-border-color); --image-dragging-shadow: 0 0 0 var(--image-border-width) var(--image-current-border-color); --multiple-dragging-indicator-bg: var(--indicator-color); --csstools-light-dark-toggle--156: var(--csstools-color-scheme--light) #15141a; --multiple-dragging-text-color: var(--csstools-light-dark-toggle--156, #fbfbfe); } @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { #viewsManager { --sidebar-bg-color: light-dark(rgb(255 255 255 / 0.92), rgb(66 65 77 / 0.92)); } } @supports (color: light-dark(red, red)) { #viewsManager { --text-color: light-dark(#15141a, #fbfbfe); } } @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { #viewsManager { --button-bg: light-dark(rgb(21 20 26 / 0.07), rgb(251 251 254 / 0.07)); --button-hover-bg: light-dark(rgb(21 20 26 / 0.14), rgb(251 251 254 / 0.14)); --button-active-bg: light-dark(rgb(21 20 26 / 0.21), rgb(251 251 254 / 0.21)); } } @supports (color: light-dark(red, red)) { #viewsManager { --button-focus-outline-color: light-dark(#0062fa, #00cadb); --button-focus-border-color: light-dark(white, black); } } @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { #viewsManager { --status-actions-bg: light-dark(rgb(21 20 26 / 0.03), rgb(251 251 254 / 0.03)); --status-undo-bg: light-dark(rgb(0 98 250 / 0.08), rgb(0 202 219 / 0.08)); } } @supports (color: light-dark(red, red)) { #viewsManager { --indicator-color: light-dark(#0062fa, #00cadb); --status-warning-bg: light-dark(#ffe8ea, #6e001f); --indicator-warning-color: light-dark(#b20037, #ffa0aa); } } @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { #viewsManager { --header-shadow: 0 0.25px 0.75px -0.75px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), 0 2px 6px -6px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); --header-bg: light-dark(rgb(255 255 255 / 0.92), #42414e); } } @supports (color: light-dark(red, red)) { #viewsManager { --image-border-color: light-dark(#cfcfd8, #3a3944); --image-page-number-bg: light-dark(#f0f0f4, #42414d); --image-current-page-number-fg: light-dark(#fff, #15141a); } } @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { #viewsManager { --image-shadow: 0 0.375px 1.5px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), 0 0 0 1px var(--image-border-color), 0 3px 12px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); --image-hover-shadow: 0 0.375px 1.5px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), 0 0 0 1px light-dark(rgb(21 20 26 / 0.1), rgb(251 251 254 / 0.1)), 0 0 0 var(--image-border-width) var(--image-hover-border-color), 0 3px 12px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); --image-current-shadow: 0 0.375px 1.5px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), 0 0 0 var(--image-border-width) var(--image-current-border-color), 0 3px 12px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); --image-dragging-placeholder-bg: light-dark(rgb(0 98 250 / 0.08), rgb(0 202 219 / 0.08)); } } @supports (color: light-dark(red, red)) { #viewsManager { --multiple-dragging-text-color: light-dark(#fbfbfe, #15141a); } } @supports not (color: light-dark(tan, tan)) { #viewsManager * { --csstools-light-dark-toggle--130: var(--csstools-color-scheme--light) rgb(66 65 77 / 0.92); --sidebar-bg-color: var(--csstools-light-dark-toggle--130, rgb(255 255 255 / 0.92)); --csstools-light-dark-toggle--131: var(--csstools-color-scheme--light) #fbfbfe; --text-color: var(--csstools-light-dark-toggle--131, #15141a); --csstools-light-dark-toggle--132: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); --button-bg: var(--csstools-light-dark-toggle--132, rgb(21 20 26 / 0.07)); --csstools-light-dark-toggle--133: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); --button-hover-bg: var(--csstools-light-dark-toggle--133, rgb(21 20 26 / 0.14)); --csstools-light-dark-toggle--134: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); --button-active-bg: var(--csstools-light-dark-toggle--134, rgb(21 20 26 / 0.21)); --csstools-light-dark-toggle--135: var(--csstools-color-scheme--light) #00cadb; --button-focus-outline-color: var(--csstools-light-dark-toggle--135, #0062fa); --csstools-light-dark-toggle--136: var(--csstools-color-scheme--light) black; --button-focus-border-color: var(--csstools-light-dark-toggle--136, white); --csstools-light-dark-toggle--137: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.03); --status-actions-bg: var(--csstools-light-dark-toggle--137, rgb(21 20 26 / 0.03)); --csstools-light-dark-toggle--138: var(--csstools-color-scheme--light) rgb(0 202 219 / 0.08); --status-undo-bg: var(--csstools-light-dark-toggle--138, rgb(0 98 250 / 0.08)); --csstools-light-dark-toggle--139: var(--csstools-color-scheme--light) #00cadb; --indicator-color: var(--csstools-light-dark-toggle--139, #0062fa); --csstools-light-dark-toggle--140: var(--csstools-color-scheme--light) #6e001f; --status-warning-bg: var(--csstools-light-dark-toggle--140, #ffe8ea); --csstools-light-dark-toggle--141: var(--csstools-color-scheme--light) #ffa0aa; --indicator-warning-color: var(--csstools-light-dark-toggle--141, #b20037); --csstools-light-dark-toggle--142: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); --csstools-light-dark-toggle--143: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); --header-shadow: 0 0.25px 0.75px -0.75px var(--csstools-light-dark-toggle--142, rgb(0 0 0 / 0.05)), 0 2px 6px -6px var(--csstools-light-dark-toggle--143, rgb(0 0 0 / 0.1)); --csstools-light-dark-toggle--144: var(--csstools-color-scheme--light) #42414e; --header-bg: var(--csstools-light-dark-toggle--144, rgb(255 255 255 / 0.92)); --csstools-light-dark-toggle--145: var(--csstools-color-scheme--light) #3a3944; --image-border-color: var(--csstools-light-dark-toggle--145, #cfcfd8); --csstools-light-dark-toggle--146: var(--csstools-color-scheme--light) #42414d; --image-page-number-bg: var(--csstools-light-dark-toggle--146, #f0f0f4); --csstools-light-dark-toggle--147: var(--csstools-color-scheme--light) #15141a; --image-current-page-number-fg: var(--csstools-light-dark-toggle--147, #fff); --csstools-light-dark-toggle--148: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); --csstools-light-dark-toggle--149: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); --image-shadow: 0 0.375px 1.5px 0 var(--csstools-light-dark-toggle--148, rgb(0 0 0 / 0.05)), 0 0 0 1px var(--image-border-color), 0 3px 12px 0 var(--csstools-light-dark-toggle--149, rgb(0 0 0 / 0.1)); --csstools-light-dark-toggle--150: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); --csstools-light-dark-toggle--151: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.1); --csstools-light-dark-toggle--152: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); --image-hover-shadow: 0 0.375px 1.5px 0 var(--csstools-light-dark-toggle--150, rgb(0 0 0 / 0.05)), 0 0 0 1px var(--csstools-light-dark-toggle--151, rgb(21 20 26 / 0.1)), 0 0 0 var(--image-border-width) var(--image-hover-border-color), 0 3px 12px 0 var(--csstools-light-dark-toggle--152, rgb(0 0 0 / 0.1)); --csstools-light-dark-toggle--153: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); --csstools-light-dark-toggle--154: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); --image-current-shadow: 0 0.375px 1.5px 0 var(--csstools-light-dark-toggle--153, rgb(0 0 0 / 0.05)), 0 0 0 var(--image-border-width) var(--image-current-border-color), 0 3px 12px 0 var(--csstools-light-dark-toggle--154, rgb(0 0 0 / 0.1)); --csstools-light-dark-toggle--155: var(--csstools-color-scheme--light) rgb(0 202 219 / 0.08); --image-dragging-placeholder-bg: var(--csstools-light-dark-toggle--155, rgb(0 98 250 / 0.08)); --csstools-light-dark-toggle--156: var(--csstools-color-scheme--light) #15141a; --multiple-dragging-text-color: var(--csstools-light-dark-toggle--156, #fbfbfe); } } @media screen and (forced-colors: active) { #viewsManager { --text-color: CanvasText; --button-fg: ButtonText; --button-bg: ButtonFace; --button-no-bg: ButtonFace; --button-border-color: ButtonText; --button-hover-bg: SelectedItemText; --button-hover-fg: SelectedItem; --button-hover-border-color: SelectedItem; --button-active-bg: SelectedItemText; --button-active-fg: SelectedItem; --button-active-border-color: ButtonText; --button-focus-no-bg: ButtonFace; --button-focus-outline-color: CanvasText; --button-focus-border-color: none; --status-border-color: CanvasText; --status-undo-bg: none; --indicator-color: CanvasText; --status-warning-bg: none; --indicator-warning-color: CanvasText; --header-shadow: none; --image-shadow: none; --image-outline: 1px solid ButtonText; --image-focus-outline-color: CanvasText; --image-hover-border-color: SelectedItem; --image-hover-page-number-bg: SelectedItemText; --image-hover-page-number-fg: SelectedItem; --image-current-page-number-bg: ButtonText; --image-current-page-number-fg: ButtonFace; --image-current-border-color: ButtonText; --image-current-focused-outline-color: var(--image-hover-border-color); --image-current-hover-page-number-bg: SelectedItem; --image-current-hover-page-number-fg: SelectedItemText; --image-page-number-bg: ButtonFace; --image-page-number-fg: ButtonText; --image-page-number-border-color: var(--image-page-number-fg); --multiple-dragging-bg: Canvas; --multiple-dragging-indicator-bg: ButtonBorder; --multiple-dragging-text-color: Canvas; } } #viewsManager { display: flex; padding-bottom: 16px; flex-direction: column; align-items: flex-start; inset-block-start: calc(100% + var(--sidebar-block-padding)); height: calc(var(--viewer-container-height) - 2 * var(--sidebar-block-padding)); position: absolute; inset-inline-start: calc(-1 * var(--viewsManager-width, --sidebar-width) - 1px); transition-property: inset-inline-start; transition-duration: var(--sidebar-transition-duration); transition-timing-function: var(--sidebar-transition-timing-function); } #viewsManager .sidebarResizer { inset-inline-start: calc(100% + 4px); } #viewsManager .viewsManagerButton { width: auto; color: var(--button-fg); border-radius: 8px; border: 1px solid var(--button-border-color); background: var(--button-bg); } :is(#viewsManager .viewsManagerButton):hover { background-color: var(--button-hover-bg) !important; color: var(--button-hover-fg) !important; border-color: var(--button-hover-border-color) !important; } :is(#viewsManager .viewsManagerButton):hover::before { background-color: var(--button-hover-fg) !important; } :is(#viewsManager .viewsManagerButton):active { background: var(--button-active-bg) !important; color: var(--button-active-fg) !important; border-color: var(--button-active-border-color) !important; } :is(#viewsManager .viewsManagerButton):active::before { background-color: var(--button-active-fg) !important; } :is(#viewsManager .viewsManagerButton):focus-visible { outline: 2px solid var(--button-focus-outline-color); outline-offset: 2px; border-color: var(--button-focus-border-color); } .viewsCloseButton:is(#viewsManager .viewsManagerButton) { width: 32px; height: 32px; padding: 4px; border-radius: 8px; } .viewsCloseButton:is(#viewsManager .viewsManagerButton)::before { -webkit-mask-image: var(--close-button-icon); mask-image: var(--close-button-icon); } #viewsManager #viewsManagerHeader { display: flex; flex-direction: column; align-items: flex-start; align-self: stretch; width: 100%; box-shadow: var(--header-shadow); flex: 0 0 auto; background-color: var(--header-bg); } :is(#viewsManager #viewsManagerHeader) .viewsManagerLabel { /*flex: 0;*/ color: var(--text-color); text-align: center; height: -moz-fit-content; height: fit-content; width: -moz-fit-content; width: fit-content; -webkit-user-select: none; -moz-user-select: none; user-select: none; font: menu; font-size: 15px; font-style: normal; font-weight: 400; line-height: normal; } :is(#viewsManager #viewsManagerHeader) #viewsManagerTitle { display: flex; flex-direction: row; align-items: center; align-self: stretch; justify-content: space-between; width: auto; padding: 12px 16px 12px 8px; } :is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector { width: 48px; height: 32px; display: block; } :is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > button { background: var(--button-no-bg); width: 100%; height: 100%; } :is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > button):focus-visible { background-color: var(--button-focus-no-bg); } :is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > button)::before { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-image: var(--views-manager-button-icon); mask-image: var(--views-manager-button-icon); background-color: var(--button-fg); } :is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > button)::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 8px; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-image: var(--views-manager-button-arrow-icon); mask-image: var(--views-manager-button-arrow-icon); background-color: var(--button-fg); } :is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > button):hover::before, :is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > button):hover::after { background-color: var(--button-hover-fg) !important; } :is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > button):active::before, :is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > button):active::after { background-color: var(--button-active-fg) !important; } :is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > .popupMenu { min-width: 182px; z-index: 1; } #thumbnailsViewMenu:is(:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > .popupMenu) > li > button)::before { -webkit-mask-image: var(--menuitem-thumbnailsView-icon); mask-image: var(--menuitem-thumbnailsView-icon); } #outlinesViewMenu:is(:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > .popupMenu) > li > button)::before { -webkit-mask-image: var(--menuitem-outlinesView-icon); mask-image: var(--menuitem-outlinesView-icon); } #attachmentsViewMenu:is(:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > .popupMenu) > li > button)::before { -webkit-mask-image: var(--menuitem-attachmentsView-icon); mask-image: var(--menuitem-attachmentsView-icon); } #layersViewMenu:is(:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > .popupMenu) > li > button)::before { -webkit-mask-image: var(--menuitem-layersView-icon); mask-image: var(--menuitem-layersView-icon); } :is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerAddFileButton { visibility: hidden; background: var(--button-no-bg); width: 32px; height: 32px; } :is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerAddFileButton):focus-visible { background-color: var(--button-focus-no-bg); } :is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerAddFileButton)::before { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-image: var(--views-manager-add-file-button-icon); mask-image: var(--views-manager-add-file-button-icon); } :is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerCurrentOutlineButton { background: var(--button-no-bg); width: 32px; height: 32px; } :is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerCurrentOutlineButton):focus-visible { background-color: var(--button-focus-no-bg); } :is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerCurrentOutlineButton)::before { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-image: var(--current-outline-button-icon); mask-image: var(--current-outline-button-icon); } :is(#viewsManager #viewsManagerHeader) #viewsManagerStatus { display: flex; align-items: center; align-self: stretch; justify-content: space-between; width: auto; border: 1px solid var(--status-border-color); } :is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) > div { min-height: 64px; width: 100%; padding-inline: 16px; } :is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) .viewsManagerStatusLabel { display: flex; align-items: center; gap: 8px; font: menu; font-size: 13px; } :is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusAction { display: flex; justify-content: space-between; align-items: center; align-self: stretch; background-color: var(--status-actions-bg); } :is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusAction) > span.selected::before { content: ""; display: inline-block; width: var(--icon-size); height: var(--icon-size); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: var(--indicator-color); -webkit-mask-image: var(--pages-selected-icon); mask-image: var(--pages-selected-icon); } :is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusAction) #actionSelector { height: 32px; min-width: 115px; width: auto; display: block; } :is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusAction) #actionSelector) #viewsManagerStatusActionButton { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 100%; padding: 4px 16px; } :is(:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusAction) #actionSelector) #viewsManagerStatusActionButton)::after { content: ""; display: inline-block; width: var(--icon-size); height: var(--icon-size); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-image: var(--manage-button-icon); mask-image: var(--manage-button-icon); background-color: var(--button-fg); } :is(:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusAction) #actionSelector) #viewsManagerStatusActionButton):hover::after { background-color: var(--button-hover-fg) !important; } :is(:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusAction) #actionSelector) #viewsManagerStatusActionButton):active::after { background-color: var(--button-active-fg) !important; } :is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusAction) #actionSelector) > .popupMenu { width: 100%; min-width: -moz-fit-content; min-width: fit-content; z-index: 1; } :is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusUndo { display: flex; justify-content: space-between; align-items: center; align-self: stretch; background-color: var(--status-undo-bg); } :is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusUndo) > span::before { content: ""; display: inline-block; width: var(--icon-size); height: var(--icon-size); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-image: var(--undo-label-icon); mask-image: var(--undo-label-icon); background-color: var(--indicator-color); } :is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusUndo) > div { display: flex; align-items: center; gap: 8px; width: auto; } :is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusUndo) > div) #viewsManagerStatusUndoButton { width: auto; min-height: 24px; padding: 4px 8px; } :is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusWarning { display: flex; align-items: center; justify-content: space-between; background-color: var(--status-warning-bg); } :is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusWarning) > span { align-items: flex-start; } :is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusWarning) > span)::before { content: ""; display: inline-block; width: var(--icon-size); height: var(--icon-size); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: var(--indicator-warning-color); -webkit-mask-image: var(--undo-label-icon); mask-image: var(--undo-label-icon); flex: 0 0 auto; } :is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusWaiting { display: flex; align-items: center; justify-content: space-between; background-color: var(--status-waiting-bg); } :is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusWaiting) > span::before { content: ""; display: inline-block; width: var(--icon-size); height: var(--icon-size); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: var(--indicator-color); -webkit-mask-image: var(--spinner-icon); mask-image: var(--spinner-icon); flex: 0 0 auto; } #viewsManager #viewsManagerContent { width: 100%; flex: 1 1 0%; overflow: auto; } :is(#viewsManager #viewsManagerContent):has(#thumbnailsView.isDragging) { overflow-x: hidden; } :is(#viewsManager #viewsManagerContent) #thumbnailsView { --thumbnail-width: 126px; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-evenly; padding: 20px 32px; gap: 44px; width: 100%; box-sizing: border-box; position: relative; } .isDragging:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) { cursor: grabbing; } :is(.isDragging:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer:hover { cursor: grabbing; } :is(:is(.isDragging:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer:hover):not([aria-current="page"]) { box-shadow: var(--image-shadow); } :is(.isDragging:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > input { pointer-events: none; } .isDragging:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .dragMarker { position: absolute; top: 0; left: 0; border: 2px solid var(--indicator-color); contain: strict; } .pasteMode:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail { flex-direction: column; } :is(.pasteMode:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > input { display: none; } :is(.pasteMode:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailPasteButton { display: flex; justify-content: center; align-items: center; border-radius: 16px; min-height: 24px; padding: 4px 16px; font: menu; font-size: 13px; font-style: normal; font-weight: 400; line-height: normal; } :is(:is(#viewsManager #viewsManagerContent) #thumbnailsView):not(.pasteMode) > .thumbnail > .thumbnailPasteButton { display: none; } :is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail { --input-dim: 16px; --gap-between-input-and-thumbnail: 16px; display: inline-flex; justify-content: flex-end; align-items: center; flex-direction: row-reverse; gap: var(--gap-between-input-and-thumbnail); width: 190px; height: auto; position: relative; scroll-margin-top: 20px; } :is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) .thumbnailPasteButton { padding: 8px 0; text-align: center; } :is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail):not(.isDragging) > .thumbnailImageContainer::after { content: attr(page-number); border-radius: 8px; border: 1px solid var(--image-page-number-border-color); background-color: var(--image-page-number-bg); color: var(--image-page-number-fg); position: absolute; bottom: 5px; inset-inline-end: 50%; min-width: 32px; height: 16px; text-align: center; box-sizing: content-box; translate: calc(var(--dir-factor) * 50%); font: menu; font-size: 12px; font-style: normal; font-weight: 400; line-height: normal; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } :is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail):has([aria-current="page"]):not(.isDragging) > .thumbnailImageContainer::after { background-color: var(--image-current-page-number-bg); color: var(--image-current-page-number-fg); outline: 1px solid var(--image-current-border-color); } .isDragging:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > input { visibility: hidden; } :is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > input { margin: 0; width: var(--input-dim); height: var(--input-dim); accent-color: var(--indicator-color); } :is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer { --thumbnail-dragging-scale: 1.4; width: var(--thumbnail-width); border: none; border-radius: 8px; box-shadow: var(--image-shadow); box-sizing: content-box; outline: var(--image-outline); -webkit-user-select: none; -moz-user-select: none; user-select: none; position: relative; } :is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer) img { width: 100%; height: 100%; border: none; border-radius: 8px; outline: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; pointer-events: none; } .missingThumbnailImage:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer) { content-visibility: hidden; } :is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):hover { cursor: pointer; box-shadow: var(--image-hover-shadow); } :is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):hover::after { background-color: var(--image-hover-page-number-bg); color: var(--image-hover-page-number-fg); } @media screen and (forced-colors: active) { :is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):hover { box-shadow: none; outline: var(--image-border-width) var(--image-hover-border-color) solid; } } :is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):focus-visible:not([aria-current="page"]) { box-shadow: var(--image-hover-shadow); outline: none; } @media screen and (forced-colors: active) { :is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):focus-visible:not([aria-current="page"]) { box-shadow: none; outline: var(--image-border-width) var(--image-focus-outline-color) solid; } } [aria-current="page"]:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):focus-visible { outline: var(--image-border-width) solid var(--image-current-focused-outline-color); outline-offset: var(--image-border-width); } @media screen and (forced-colors: active) { [aria-current="page"]:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):focus-visible { box-shadow: none; outline: var(--image-border-width) var(--image-current-border-color) solid; outline-offset: 0; } [aria-current="page"]:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):focus-visible > img { outline: var(--image-border-width) var(--image-focus-outline-color) solid; outline-offset: var(--image-border-width); } } @media screen and (forced-colors: active) { :is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):focus-visible { box-shadow: none; outline: var(--image-border-width) var(--image-current-border-color) solid; } :is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):focus-visible:hover > img { outline: var(--image-border-width) var(--image-hover-border-color) solid; outline-offset: var(--image-border-width); } } [aria-current="page"]:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer) { box-shadow: var(--image-current-shadow); } [aria-current="page"]:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):hover::after { background-color: var(--image-current-hover-page-number-bg); color: var(--image-current-hover-page-number-fg); } @media screen and (forced-colors: active) { [aria-current="page"]:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer) { box-shadow: none; outline: var(--image-border-width) var(--image-current-border-color) solid; } [aria-current="page"]:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):hover > img { outline: var(--image-border-width) var(--image-hover-border-color) solid; outline-offset: var(--image-border-width); } } .placeholder:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer) { background-color: var(--image-dragging-placeholder-bg); box-shadow: none !important; } .draggingThumbnail:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer) { position: absolute; left: 0; top: 0; z-index: 1; transform-origin: 0 0 0; scale: calc(1 / var(--thumbnail-dragging-scale)); pointer-events: none; box-shadow: var(--image-dragging-shadow); } .draggingThumbnail.multiple:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer) { box-shadow: var(--image-multiple-dragging-shadow); } @media screen and (forced-colors: active) { .draggingThumbnail.multiple:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer) { forced-color-adjust: none; box-shadow: var(--image-multiple-dragging-shadow); } } .draggingThumbnail.multiple:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer) > .thumbnailImageContainer { position: absolute; top: 0; left: 0; width: var(--thumbnail-width); border: none; border-radius: 8px; box-sizing: content-box; outline: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .draggingThumbnail.multiple:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer)::after { content: attr(data-multiple-count); border-radius: calc(8px * var(--thumbnail-dragging-scale)); background-color: var(--multiple-dragging-indicator-bg); color: var(--multiple-dragging-text-color); position: absolute; inset-block-end: calc(4px * var(--thumbnail-dragging-scale)); inset-inline-start: calc(4px * var(--thumbnail-dragging-scale)); min-width: calc(32px * var(--thumbnail-dragging-scale)); height: calc(16px * var(--thumbnail-dragging-scale)); text-align: center; font: menu; font-size: calc(13px * var(--thumbnail-dragging-scale)); font-style: normal; font-weight: 400; line-height: normal; contain: strict; } :is(#viewsManager #viewsManagerContent) #attachmentsView { --csstools-light-dark-toggle--157: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.8); --attachment-color: var(--csstools-light-dark-toggle--157, rgb(0 0 0 / 0.8)); --csstools-light-dark-toggle--158: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.15); --attachment-bg-color: var(--csstools-light-dark-toggle--158, rgb(0 0 0 / 0.15)); --csstools-light-dark-toggle--159: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.9); --attachment-hover-color: var(--csstools-light-dark-toggle--159, rgb(0 0 0 / 0.9)); } @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { :is(#viewsManager #viewsManagerContent) #attachmentsView { --attachment-color: light-dark(rgb(0 0 0 / 0.8), rgb(255 255 255 / 0.8)); --attachment-bg-color: light-dark(rgb(0 0 0 / 0.15), rgb(255 255 255 / 0.15)); --attachment-hover-color: light-dark(rgb(0 0 0 / 0.9), rgb(255 255 255 / 0.9)); } } @supports not (color: light-dark(tan, tan)) { :is(:is(#viewsManager #viewsManagerContent) #attachmentsView) * { --csstools-light-dark-toggle--157: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.8); --attachment-color: var(--csstools-light-dark-toggle--157, rgb(0 0 0 / 0.8)); --csstools-light-dark-toggle--158: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.15); --attachment-bg-color: var(--csstools-light-dark-toggle--158, rgb(0 0 0 / 0.15)); --csstools-light-dark-toggle--159: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.9); --attachment-hover-color: var(--csstools-light-dark-toggle--159, rgb(0 0 0 / 0.9)); } } :is(:is(#viewsManager #viewsManagerContent) #attachmentsView) > ul { list-style-type: none; padding: 0; } :is(:is(:is(#viewsManager #viewsManagerContent) #attachmentsView) > ul) > li > a { text-decoration: none; display: inline-block; min-width: calc(100% - 4px); height: auto; margin-bottom: 1px; padding: 2px 0 5px; padding-inline-start: 4px; border-radius: 2px; color: var(--attachment-color); font-size: 13px; line-height: 15px; -webkit-user-select: none; -moz-user-select: none; user-select: none; white-space: normal; cursor: pointer; } :is(:is(:is(:is(#viewsManager #viewsManagerContent) #attachmentsView) > ul) > li > a):hover { background-color: var(--attachment-bg-color); background-clip: padding-box; border-radius: 2px; color: var(--attachment-hover-color); } .sidebar { --csstools-light-dark-toggle--160: var(--csstools-color-scheme--light) #23222b; --sidebar-bg-color: var(--csstools-light-dark-toggle--160, #fff); --csstools-light-dark-toggle--161: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.1); --sidebar-border-color: var(--csstools-light-dark-toggle--161, rgb(21 20 26 / 0.1)); --csstools-light-dark-toggle--162: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); --csstools-light-dark-toggle--163: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); --sidebar-box-shadow: 0 0.25px 0.75px var(--csstools-light-dark-toggle--162, rgb(0 0 0 / 0.05)), 0 2px 6px 0 var(--csstools-light-dark-toggle--163, rgb(0 0 0 / 0.1)); --sidebar-backdrop-filter: none; --sidebar-border-radius: 8px; --sidebar-padding: 5px; --sidebar-min-width: 180px; --sidebar-max-width: 632px; --sidebar-width: 239px; --resizer-width: 4px; --resizer-shift: calc(0px - var(--resizer-width) - 2px); --csstools-light-dark-toggle--164: var(--csstools-color-scheme--light) #00cadb; --resizer-hover-bg-color: var(--csstools-light-dark-toggle--164, #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--160: var(--csstools-color-scheme--light) #23222b; --sidebar-bg-color: var(--csstools-light-dark-toggle--160, #fff); --csstools-light-dark-toggle--161: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.1); --sidebar-border-color: var(--csstools-light-dark-toggle--161, rgb(21 20 26 / 0.1)); --csstools-light-dark-toggle--162: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); --csstools-light-dark-toggle--163: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); --sidebar-box-shadow: 0 0.25px 0.75px var(--csstools-light-dark-toggle--162, rgb(0 0 0 / 0.05)), 0 2px 6px 0 var(--csstools-light-dark-toggle--163, rgb(0 0 0 / 0.1)); --csstools-light-dark-toggle--164: var(--csstools-color-scheme--light) #00cadb; --resizer-hover-bg-color: var(--csstools-light-dark-toggle--164, #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); -webkit-backdrop-filter: var(--sidebar-backdrop-filter); backdrop-filter: var(--sidebar-backdrop-filter); box-sizing: border-box; position: relative; } .sidebar .sidebarResizer { width: var(--resizer-width); background-color: transparent; forced-color-adjust: none; cursor: ew-resize; position: absolute; inset-block: 0; inset-inline-start: var(--resizer-shift); transition: background-color 0.5s ease-in-out, border-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); border-color: white; } :is(.sidebar .sidebarResizer):focus-visible { background-color: var(--resizer-hover-bg-color); outline: none; } .sidebar.resizing { cursor: ew-resize; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .sidebar.resizing :not(.sidebarResizer) { pointer-events: none; } .sidebar.resizing .sidebarResizer { background-color: var(--resizer-hover-bg-color); } :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--165: var(--csstools-color-scheme--light) #0df; --focus-ring-color: var(--csstools-light-dark-toggle--165, #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--165: var(--csstools-color-scheme--light) #0df; --focus-ring-color: var(--csstools-light-dark-toggle--165, #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 { --scale-factor: 1; --page-bg-color: unset; padding-bottom: var(--pdfViewer-padding-bottom); --hcm-highlight-filter: none; --hcm-highlight-selected-filter: none; background-color: #d4d4d7; /* 色を固定　*/ } @media screen and (forced-colors: active) { .pdfViewer { --hcm-highlight-filter: invert(100%); } } .pdfViewer.copyAll { cursor: wait; } .pdfViewer .canvasWrapper { overflow: hidden; width: 100%; height: 100%; } :is(.pdfViewer .canvasWrapper) canvas { position: absolute; top: 0; left: 0; margin: 0; display: block; width: 100%; height: 100%; contain: content; } :is(:is(.pdfViewer .canvasWrapper) canvas) .structTree { contain: strict; } .detailView:is(:is(.pdfViewer .canvasWrapper) canvas) { image-rendering: pixelated; } .pdfViewer .page { --user-unit: 1; --total-scale-factor: calc(var(--scale-factor) * var(--user-unit)); --scale-round-x: 1px; --scale-round-y: 1px; direction: ltr; width: 816px; height: 1056px; margin: var(--page-margin); position: relative; overflow: visible; border: var(--page-border); background-clip: content-box; background-color: var(--page-bg-color, rgb(255 255 255)); } .pdfViewer .dummyPage { position: relative; width: 0; height: var(--viewer-container-height); } .pdfViewer.noUserSelect { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .pdfViewer.removePageBorders .page { margin: 0 auto 10px; border: none; } .pdfViewer:is(.scrollHorizontal, .scrollWrapped), .spread { margin-inline: 3.5px; text-align: center; } .pdfViewer.scrollHorizontal, .spread { white-space: nowrap; } .pdfViewer.removePageBorders, .pdfViewer:is(.scrollHorizontal, .scrollWrapped) .spread { margin-inline: 0; } .spread :is(.page, .dummyPage), .pdfViewer:is(.scrollHorizontal, .scrollWrapped) :is(.page, .spread) { display: inline-block; vertical-align: middle; } .spread .page, .pdfViewer:is(.scrollHorizontal, .scrollWrapped) .page { margin-inline: var(--spreadHorizontalWrapped-margin-LR); } .pdfViewer.removePageBorders .spread .page, .pdfViewer.removePageBorders:is(.scrollHorizontal, .scrollWrapped) .page { margin-inline: 5px; } .pdfViewer .page.loadingIcon::after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background: url("images/loading-icon.gif") center no-repeat; 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; } .pdfPresentationMode .spread { margin: 0; } .pdfPresentationMode .pdfViewer .page { margin: 0 auto; border: 2px solid transparent; } :root { --dir-factor: 1; --sidebar-width: 200px; --sidebar-transition-duration: 200ms; --sidebar-transition-timing-function: ease; --toolbar-height: 32px; --toolbar-horizontal-padding: 1px; --toolbar-vertical-padding: 2px; --icon-size: 16px; --toolbar-icon-opacity: 0.7; --doorhanger-icon-opacity: 0.9; --doorhanger-height: 8px; --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) rgb(249 249 250); --main-color: var(--csstools-light-dark-toggle--0, rgb(12 12 13)); --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) rgb(42 42 46); --body-bg-color: var(--csstools-light-dark-toggle--1, rgb(212 212 215)); --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) rgb(0 96 223); --progressBar-color: var(--csstools-light-dark-toggle--2, rgb(10 132 255)); --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) rgb(40 40 43); --progressBar-bg-color: var(--csstools-light-dark-toggle--3, rgb(221 221 222)); --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) rgb(20 68 133); --progressBar-blend-color: var(--csstools-light-dark-toggle--4, rgb(116 177 239)); --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) rgb(121 121 123); --scrollbar-color: var(--csstools-light-dark-toggle--5, auto); --csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) rgb(35 35 39); --scrollbar-bg-color: var(--csstools-light-dark-toggle--6, auto); --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) rgb(255 255 255); --toolbar-icon-bg-color: var(--csstools-light-dark-toggle--7, rgb(0 0 0)); --csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) rgb(255 255 255); --toolbar-icon-hover-bg-color: var(--csstools-light-dark-toggle--8, rgb(0 0 0)); --csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) rgb(42 42 46 / 0.9); --sidebar-narrow-bg-color: var(--csstools-light-dark-toggle--9, rgb(212 212 215 / 0.9)); --csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) rgb(50 50 52); --sidebar-toolbar-bg-color: var(--csstools-light-dark-toggle--10, rgb(245 246 247)); --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) rgb(56 56 61); --toolbar-bg-color: var(--csstools-light-dark-toggle--11, rgb(249 249 250)); --csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) rgb(12 12 13); --toolbar-border-color: var(--csstools-light-dark-toggle--12, rgb(184 184 184)); --toolbar-box-shadow: 0 1px 0 var(--toolbar-border-color); --toolbar-border-bottom: none; --toolbarSidebar-box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.25), 0 1px 0 rgb(0 0 0 / 0.15), 0 0 1px rgb(0 0 0 / 0.1); --toolbarSidebar-border-bottom: none; --button-hover-color: color-mix(in srgb, currentColor 17%, transparent); --csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) rgb(255 255 255); --toggled-btn-color: var(--csstools-light-dark-toggle--13, rgb(0 0 0)); --toggled-btn-bg-color: rgb(0 0 0 / 0.3); --toggled-hover-active-btn-color: rgb(0 0 0 / 0.4); --toggled-hover-btn-outline: none; --csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) rgb(74 74 79); --dropdown-btn-bg-color: var(--csstools-light-dark-toggle--14, rgb(215 215 219)); --dropdown-btn-border: none; --separator-color: rgb(0 0 0 / 0.3); --csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) rgb(250 250 250); --field-color: var(--csstools-light-dark-toggle--15, rgb(6 6 6)); --csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) rgb(64 64 68); --field-bg-color: var(--csstools-light-dark-toggle--16, rgb(255 255 255)); --csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) rgb(115 115 115); --field-border-color: var(--csstools-light-dark-toggle--17, rgb(187 187 188)); --csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) #42414d; --doorhanger-bg-color: var(--csstools-light-dark-toggle--18, rgb(255 255 255)); --csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) rgb(39 39 43); --doorhanger-border-color: var(--csstools-light-dark-toggle--19, rgb(12 12 13 / 0.2)); --csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) rgb(249 249 250); --doorhanger-hover-color: var(--csstools-light-dark-toggle--20, rgb(12 12 13)); --csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) rgb(92 92 97); --doorhanger-separator-color: var(--csstools-light-dark-toggle--21, rgb(222 222 222)); --dialog-button-border: none; --csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) rgb(92 92 97); --dialog-button-bg-color: var(--csstools-light-dark-toggle--22, rgb(12 12 13 / 0.1)); --csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) rgb(115 115 115); --dialog-button-hover-bg-color: var(--csstools-light-dark-toggle--23, rgb(12 12 13 / 0.3)); --loading-icon: url(images/loading.svg); --toolbarButton-editorComment-icon: url(images/comment-editButton.svg); --toolbarButton-editorFreeText-icon: url(images/toolbarButton-editorFreeText.svg); --toolbarButton-editorHighlight-icon: url(images/toolbarButton-editorHighlight.svg); --toolbarButton-editorInk-icon: url(images/toolbarButton-editorInk.svg); --toolbarButton-editorStamp-icon: url(images/toolbarButton-editorStamp.svg); --toolbarButton-editorSignature-icon: url(images/toolbarButton-editorSignature.svg); --toolbarButton-menuArrow-icon: url(images/toolbarButton-menuArrow.svg); --toolbarButton-viewsManagerToggle-icon: url(images/toolbarButton-viewsManagerToggle.svg); --toolbarButton-secondaryToolbarToggle-icon: url(images/toolbarButton-secondaryToolbarToggle.svg); --toolbarButton-pageUp-icon: url(images/toolbarButton-pageUp.svg); --toolbarButton-pageDown-icon: url(images/toolbarButton-pageDown.svg); --toolbarButton-zoomOut-icon: url(images/toolbarButton-zoomOut.svg); --toolbarButton-zoomIn-icon: url(images/toolbarButton-zoomIn.svg); --toolbarButton-presentationMode-icon: url(images/toolbarButton-presentationMode.svg); --toolbarButton-print-icon: url(images/toolbarButton-print.svg); --toolbarButton-openFile-icon: url(images/toolbarButton-openFile.svg); --toolbarButton-download-icon: url(images/toolbarButton-download.svg); --toolbarButton-bookmark-icon: url(images/toolbarButton-bookmark.svg); --toolbarButton-viewThumbnail-icon: url(images/toolbarButton-viewThumbnail.svg); --toolbarButton-viewOutline-icon: url(images/toolbarButton-viewOutline.svg); --toolbarButton-viewAttachments-icon: url(images/toolbarButton-viewAttachments.svg); --toolbarButton-viewLayers-icon: url(images/toolbarButton-viewLayers.svg); --toolbarButton-currentOutlineItem-icon: url(images/toolbarButton-currentOutlineItem.svg); --toolbarButton-search-icon: url(images/toolbarButton-search.svg); --findbarButton-previous-icon: url(images/findbarButton-previous.svg); --findbarButton-next-icon: url(images/findbarButton-next.svg); --secondaryToolbarButton-firstPage-icon: url(images/secondaryToolbarButton-firstPage.svg); --secondaryToolbarButton-lastPage-icon: url(images/secondaryToolbarButton-lastPage.svg); --secondaryToolbarButton-rotateCcw-icon: url(images/secondaryToolbarButton-rotateCcw.svg); --secondaryToolbarButton-rotateCw-icon: url(images/secondaryToolbarButton-rotateCw.svg); --secondaryToolbarButton-selectTool-icon: url(images/secondaryToolbarButton-selectTool.svg); --secondaryToolbarButton-handTool-icon: url(images/secondaryToolbarButton-handTool.svg); --secondaryToolbarButton-scrollPage-icon: url(images/secondaryToolbarButton-scrollPage.svg); --secondaryToolbarButton-scrollVertical-icon: url(images/secondaryToolbarButton-scrollVertical.svg); --secondaryToolbarButton-scrollHorizontal-icon: url(images/secondaryToolbarButton-scrollHorizontal.svg); --secondaryToolbarButton-scrollWrapped-icon: url(images/secondaryToolbarButton-scrollWrapped.svg); --secondaryToolbarButton-spreadNone-icon: url(images/secondaryToolbarButton-spreadNone.svg); --secondaryToolbarButton-spreadOdd-icon: url(images/secondaryToolbarButton-spreadOdd.svg); --secondaryToolbarButton-spreadEven-icon: url(images/secondaryToolbarButton-spreadEven.svg); --secondaryToolbarButton-imageAltTextSettings-icon: var(--toolbarButton-editorStamp-icon); --secondaryToolbarButton-documentProperties-icon: url(images/secondaryToolbarButton-documentProperties.svg); --editorParams-stampAddImage-icon: url(images/toolbarButton-zoomIn.svg); --comment-edit-button-icon: url(images/comment-editButton.svg); } @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { :root { --main-color: light-dark(rgb(12 12 13), rgb(249 249 250)); --body-bg-color: light-dark(rgb(212 212 215), rgb(42 42 46)); --progressBar-color: light-dark(rgb(10 132 255), rgb(0 96 223)); --progressBar-bg-color: light-dark(rgb(221 221 222), rgb(40 40 43)); --progressBar-blend-color: light-dark(rgb(116 177 239), rgb(20 68 133)); --scrollbar-color: light-dark(auto, rgb(121 121 123)); --scrollbar-bg-color: light-dark(auto, rgb(35 35 39)); --toolbar-icon-bg-color: light-dark(rgb(0 0 0), rgb(255 255 255)); --toolbar-icon-hover-bg-color: light-dark(rgb(0 0 0), rgb(255 255 255)); --sidebar-narrow-bg-color: light-dark(rgb(212 212 215 / 0.9), rgb(42 42 46 / 0.9)); --sidebar-toolbar-bg-color: light-dark(rgb(245 246 247), rgb(50 50 52)); --toolbar-bg-color: light-dark(rgb(249 249 250), rgb(56 56 61)); --toolbar-border-color: light-dark(rgb(184 184 184), rgb(12 12 13)); --toggled-btn-color: light-dark(rgb(0 0 0), rgb(255 255 255)); --dropdown-btn-bg-color: light-dark(rgb(215 215 219), rgb(74 74 79)); --field-color: light-dark(rgb(6 6 6), rgb(250 250 250)); --field-bg-color: light-dark(rgb(255 255 255), rgb(64 64 68)); --field-border-color: light-dark(rgb(187 187 188), rgb(115 115 115)); --doorhanger-bg-color: light-dark(rgb(255 255 255), #42414d); --doorhanger-border-color: light-dark(rgb(12 12 13 / 0.2), rgb(39 39 43)); --doorhanger-hover-color: light-dark(rgb(12 12 13), rgb(249 249 250)); --doorhanger-separator-color: light-dark(rgb(222 222 222), rgb(92 92 97)); --dialog-button-bg-color: light-dark(rgb(12 12 13 / 0.1), rgb(92 92 97)); --dialog-button-hover-bg-color: light-dark(rgb(12 12 13 / 0.3), rgb(115 115 115)); } } @supports not (color: light-dark(tan, tan)) { :root * { --csstools-light-dark-toggle--0: var(--csstools-color-scheme--light) rgb(249 249 250); --main-color: var(--csstools-light-dark-toggle--0, rgb(12 12 13)); --csstools-light-dark-toggle--1: var(--csstools-color-scheme--light) rgb(42 42 46); --body-bg-color: var(--csstools-light-dark-toggle--1, rgb(212 212 215)); --csstools-light-dark-toggle--2: var(--csstools-color-scheme--light) rgb(0 96 223); --progressBar-color: var(--csstools-light-dark-toggle--2, rgb(10 132 255)); --csstools-light-dark-toggle--3: var(--csstools-color-scheme--light) rgb(40 40 43); --progressBar-bg-color: var(--csstools-light-dark-toggle--3, rgb(221 221 222)); --csstools-light-dark-toggle--4: var(--csstools-color-scheme--light) rgb(20 68 133); --progressBar-blend-color: var(--csstools-light-dark-toggle--4, rgb(116 177 239)); --csstools-light-dark-toggle--5: var(--csstools-color-scheme--light) rgb(121 121 123); --scrollbar-color: var(--csstools-light-dark-toggle--5, auto); --csstools-light-dark-toggle--6: var(--csstools-color-scheme--light) rgb(35 35 39); --scrollbar-bg-color: var(--csstools-light-dark-toggle--6, auto); --csstools-light-dark-toggle--7: var(--csstools-color-scheme--light) rgb(255 255 255); --toolbar-icon-bg-color: var(--csstools-light-dark-toggle--7, rgb(0 0 0)); --csstools-light-dark-toggle--8: var(--csstools-color-scheme--light) rgb(255 255 255); --toolbar-icon-hover-bg-color: var(--csstools-light-dark-toggle--8, rgb(0 0 0)); --csstools-light-dark-toggle--9: var(--csstools-color-scheme--light) rgb(42 42 46 / 0.9); --sidebar-narrow-bg-color: var(--csstools-light-dark-toggle--9, rgb(212 212 215 / 0.9)); --csstools-light-dark-toggle--10: var(--csstools-color-scheme--light) rgb(50 50 52); --sidebar-toolbar-bg-color: var(--csstools-light-dark-toggle--10, rgb(245 246 247)); --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) rgb(56 56 61); --toolbar-bg-color: var(--csstools-light-dark-toggle--11, rgb(249 249 250)); --csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) rgb(12 12 13); --toolbar-border-color: var(--csstools-light-dark-toggle--12, rgb(184 184 184)); --csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) rgb(255 255 255); --toggled-btn-color: var(--csstools-light-dark-toggle--13, rgb(0 0 0)); --csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) rgb(74 74 79); --dropdown-btn-bg-color: var(--csstools-light-dark-toggle--14, rgb(215 215 219)); --csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) rgb(250 250 250); --field-color: var(--csstools-light-dark-toggle--15, rgb(6 6 6)); --csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) rgb(64 64 68); --field-bg-color: var(--csstools-light-dark-toggle--16, rgb(255 255 255)); --csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) rgb(115 115 115); --field-border-color: var(--csstools-light-dark-toggle--17, rgb(187 187 188)); --csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) #42414d; --doorhanger-bg-color: var(--csstools-light-dark-toggle--18, rgb(255 255 255)); --csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) rgb(39 39 43); --doorhanger-border-color: var(--csstools-light-dark-toggle--19, rgb(12 12 13 / 0.2)); --csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) rgb(249 249 250); --doorhanger-hover-color: var(--csstools-light-dark-toggle--20, rgb(12 12 13)); --csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) rgb(92 92 97); --doorhanger-separator-color: var(--csstools-light-dark-toggle--21, rgb(222 222 222)); --csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) rgb(92 92 97); --dialog-button-bg-color: var(--csstools-light-dark-toggle--22, rgb(12 12 13 / 0.1)); --csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) rgb(115 115 115); --dialog-button-hover-bg-color: var(--csstools-light-dark-toggle--23, rgb(12 12 13 / 0.3)); } } [dir="rtl"]:root { --dir-factor: -1; } @media screen and (forced-colors: active) { :root { --button-hover-color: Highlight; --toolbar-icon-opacity: 1; --toolbar-icon-bg-color: ButtonText; --toolbar-icon-hover-bg-color: ButtonFace; --toggled-hover-active-btn-color: ButtonText; --toggled-hover-btn-outline: 2px solid ButtonBorder; --toolbar-border-color: CanvasText; --toolbar-border-bottom: 1px solid var(--toolbar-border-color); --toolbar-box-shadow: none; --toggled-btn-color: HighlightText; --toggled-btn-bg-color: LinkText; --doorhanger-hover-color: ButtonFace; --doorhanger-border-color-whcm: 1px solid ButtonText; --doorhanger-triangle-opacity-whcm: 0; --dialog-button-border: 1px solid Highlight; --dialog-button-hover-bg-color: Highlight; --dialog-button-hover-color: ButtonFace; --dropdown-btn-border: 1px solid ButtonText; --field-border-color: ButtonText; --main-color: CanvasText; --separator-color: GrayText; --doorhanger-separator-color: GrayText; --toolbarSidebar-box-shadow: none; --toolbarSidebar-border-bottom: 1px solid var(--toolbar-border-color); } } @media screen and (prefers-reduced-motion: reduce) { :root { --sidebar-transition-duration: 0; } } @keyframes progressIndeterminate { 0% { transform: translateX(calc(-142px * var(--dir-factor))); } 100% { transform: translateX(0); } } html[data-toolbar-density="compact"] { --toolbar-height: 30px; } html[data-toolbar-density="touch"] { --toolbar-height: 44px; } html, body { height: 100%; width: 100%; } body { margin: 0; background-color: var(--body-bg-color); scrollbar-color: var(--scrollbar-color) var(--scrollbar-bg-color); } body.wait::before { content: ""; position: fixed; width: 100%; height: 100%; z-index: 100000; cursor: wait; } .visuallyHidden { position: absolute; top: 0; left: 0; border: 0; margin: 0; padding: 0; width: 0; height: 0; overflow: hidden; white-space: nowrap; font-size: 0; } .hidden, [hidden] { display: none !important; } #viewerContainer.pdfPresentationMode:fullscreen { top: 0; background-color: rgb(0 0 0); width: 100%; height: 100%; overflow: hidden; cursor: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .pdfPresentationMode:fullscreen section:not([data-internal-link]) { pointer-events: none; } .pdfPresentationMode:fullscreen .textLayer span { cursor: none; } .pdfPresentationMode.pdfPresentationModeControls > *, .pdfPresentationMode.pdfPresentationModeControls .textLayer span { cursor: default; } #outerContainer { width: 100%; height: 100%; position: relative; margin: 0; } #mainContainer { position: absolute; inset: 0; min-width: 350px; margin: 0; display: flex; flex-direction: column; } #sidebarContent { inset-block: var(--toolbar-height) 0; inset-inline-start: 0; overflow: auto; position: absolute; width: 100%; box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.25); } #viewerContainer { overflow: auto; position: absolute; inset: var(--toolbar-height) 0 0; outline: none; z-index: 0; } #viewerContainer:not(.pdfPresentationMode) { transition-duration: var(--sidebar-transition-duration); transition-timing-function: var(--sidebar-transition-timing-function); } #sidebarContainer :is(input, button, select) { font: message-box; } .toolbar { z-index: 2; } #toolbarSidebar { width: 100%; height: var(--toolbar-height); background-color: var(--sidebar-toolbar-bg-color); box-shadow: var(--toolbarSidebar-box-shadow); border-bottom: var(--toolbarSidebar-border-bottom); padding: var(--toolbar-vertical-padding) var(--toolbar-horizontal-padding); justify-content: space-between; } #toolbarSidebar #toolbarSidebarLeft { width: auto; height: 100%; } :is(#toolbarSidebar #toolbarSidebarLeft) #viewThumbnail::before { -webkit-mask-image: var(--toolbarButton-viewThumbnail-icon); mask-image: var(--toolbarButton-viewThumbnail-icon); } :is(#toolbarSidebar #toolbarSidebarLeft) #viewOutline::before { -webkit-mask-image: var(--toolbarButton-viewOutline-icon); mask-image: var(--toolbarButton-viewOutline-icon); transform: scaleX(var(--dir-factor)); } :is(#toolbarSidebar #toolbarSidebarLeft) #viewAttachments::before { -webkit-mask-image: var(--toolbarButton-viewAttachments-icon); mask-image: var(--toolbarButton-viewAttachments-icon); } :is(#toolbarSidebar #toolbarSidebarLeft) #viewLayers::before { -webkit-mask-image: var(--toolbarButton-viewLayers-icon); mask-image: var(--toolbarButton-viewLayers-icon); } #toolbarSidebar #toolbarSidebarRight { width: auto; height: 100%; padding-inline-end: 2px; } .doorHanger, .doorHangerRight { border-radius: 2px; box-shadow: 0 1px 5px var(--doorhanger-border-color), 0 0 0 1px var(--doorhanger-border-color); border: var(--doorhanger-border-color-whcm); background-color: var(--doorhanger-bg-color); inset-block-start: calc(100% + var(--doorhanger-height) - 2px); } :is(.doorHanger, .doorHangerRight)::after, :is(.doorHanger, .doorHangerRight)::before { bottom: 100%; border-style: solid; border-color: transparent; content: ""; height: 0; width: 0; position: absolute; pointer-events: none; opacity: var(--doorhanger-triangle-opacity-whcm); } :is(.doorHanger, .doorHangerRight)::before { border-width: calc(var(--doorhanger-height) + 2px); border-bottom-color: var(--doorhanger-border-color); } :is(.doorHanger, .doorHangerRight)::after { border-width: var(--doorhanger-height); } .doorHangerRight { inset-inline-end: calc(50% - var(--doorhanger-height) - 1px); } .doorHangerRight::before { inset-inline-end: -1px; } .doorHangerRight::after { border-bottom-color: var(--doorhanger-bg-color); inset-inline-end: 1px; } .doorHanger { inset-inline-start: calc(50% - var(--doorhanger-height) - 1px); } .doorHanger::before { inset-inline-start: -1px; } .doorHanger::after { border-bottom-color: var(--toolbar-bg-color); inset-inline-start: 1px; } .dialogButton { border: none; background: none; width: 28px; height: 28px; outline: none; } .dialogButton:is(:hover, :focus-visible) { background-color: var(--dialog-button-hover-bg-color); } .dialogButton:is(:hover, :focus-visible) > span { color: var(--dialog-button-hover-color); } .splitToolbarButtonSeparator { float: inline-start; width: 0; height: 62%; border-left: 1px solid var(--separator-color); border-right: none; } .dialogButton { min-width: 16px; margin: 2px 1px; padding: 2px 6px 0; border: none; border-radius: 2px; color: var(--main-color); font-size: 12px; line-height: 14px; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: default; box-sizing: border-box; } #viewsManagerToggleButton::before { -webkit-mask-image: var(--toolbarButton-viewsManagerToggle-icon); mask-image: var(--toolbarButton-viewsManagerToggle-icon); transform: scaleX(var(--dir-factor)); } #secondaryToolbarToggleButton::before { -webkit-mask-image: var(--toolbarButton-secondaryToolbarToggle-icon); mask-image: var(--toolbarButton-secondaryToolbarToggle-icon); transform: scaleX(var(--dir-factor)); } #previous::before { -webkit-mask-image: var(--toolbarButton-pageUp-icon); mask-image: var(--toolbarButton-pageUp-icon); } #next::before { -webkit-mask-image: var(--toolbarButton-pageDown-icon); mask-image: var(--toolbarButton-pageDown-icon); } #zoomOutButton::before { -webkit-mask-image: var(--toolbarButton-zoomOut-icon); mask-image: var(--toolbarButton-zoomOut-icon); } #zoomInButton::before { -webkit-mask-image: var(--toolbarButton-zoomIn-icon); mask-image: var(--toolbarButton-zoomIn-icon); } #editorCommentButton::before { -webkit-mask-image: var(--toolbarButton-editorComment-icon); mask-image: var(--toolbarButton-editorComment-icon); transform: scaleX(var(--dir-factor)); } #editorFreeTextButton::before { -webkit-mask-image: var(--toolbarButton-editorFreeText-icon); mask-image: var(--toolbarButton-editorFreeText-icon); } #editorHighlightButton::before { -webkit-mask-image: var(--toolbarButton-editorHighlight-icon); mask-image: var(--toolbarButton-editorHighlight-icon); } #editorInkButton::before { -webkit-mask-image: var(--toolbarButton-editorInk-icon); mask-image: var(--toolbarButton-editorInk-icon); } #editorStampButton::before { -webkit-mask-image: var(--toolbarButton-editorStamp-icon); mask-image: var(--toolbarButton-editorStamp-icon); } #editorSignatureButton::before { -webkit-mask-image: var(--toolbarButton-editorSignature-icon); mask-image: var(--toolbarButton-editorSignature-icon); } #printButton::before { -webkit-mask-image: var(--toolbarButton-print-icon); mask-image: var(--toolbarButton-print-icon); } #downloadButton::before { -webkit-mask-image: var(--toolbarButton-download-icon); mask-image: var(--toolbarButton-download-icon); } #currentOutlineItem::before { -webkit-mask-image: var(--toolbarButton-currentOutlineItem-icon); mask-image: var(--toolbarButton-currentOutlineItem-icon); transform: scaleX(var(--dir-factor)); } #viewFindButton::before { -webkit-mask-image: var(--toolbarButton-search-icon); mask-image: var(--toolbarButton-search-icon); } .pdfSidebarNotification::after { position: absolute; display: inline-block; top: 2px; inset-inline-end: 2px; content: ""; background-color: rgb(112 219 85); height: 9px; width: 9px; border-radius: 50%; } .verticalToolbarSeparator { display: block; margin-inline: 2px; width: 0; height: 80%; border-left: 1px solid var(--separator-color); border-right: none; box-sizing: border-box; } .horizontalToolbarSeparator { display: block; margin: 6px 0; border-top: 1px solid var(--doorhanger-separator-color); border-bottom: none; height: 0; width: 100%; } .toggleButton { display: inline; } .toggleButton:has(> input:checked) { color: var(--toggled-btn-color); background-color: var(--toggled-btn-bg-color); } .toggleButton:is(:hover, :has(> input:focus-visible)) { color: var(--toggled-btn-color); background-color: var(--button-hover-color); } .toggleButton > input { position: absolute; top: 50%; left: 50%; opacity: 0; width: 0; height: 0; } .toolbarField { padding: 4px 7px; margin: 3px 0; border-radius: 2px; background-color: var(--field-bg-color); background-clip: padding-box; border: 1px solid var(--field-border-color); box-shadow: none; color: var(--field-color); font-size: 12px; line-height: 16px; outline: none; } .toolbarField:focus { border-color: #0a84ff; } #pageNumber { -moz-appearance: textfield; text-align: end; width: 40px; background-size: 0 0; transition-property: none; } #pageNumber::-webkit-inner-spin-button { -webkit-appearance: none; } .loadingInput:has(> .loading:is(#pageNumber))::after { display: inline; visibility: visible; transition-property: visibility; transition-delay: var(--loading-icon-delay); } .loadingInput { position: relative; } .loadingInput::after { position: absolute; visibility: hidden; display: none; width: var(--icon-size); height: var(--icon-size); content: ""; background-color: var(--toolbar-icon-bg-color); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-image: var(--loading-icon); mask-image: var(--loading-icon); } .loadingInput.start::after { inset-inline-start: 4px; } .loadingInput.end::after { inset-inline-end: 4px; } #outlineOptionsContainer { display: none; } #sidebarContainer:has(#outlineView:not(.hidden)) #outlineOptionsContainer { display: inline flex; } .dialogButton { width: auto; margin: 3px 4px 2px !important; padding: 2px 11px; color: var(--main-color); background-color: var(--dialog-button-bg-color); border: var(--dialog-button-border) !important; } dialog { margin: auto; padding: 15px; border-spacing: 4px; color: var(--main-color); font: message-box; font-size: 12px; line-height: 14px; background-color: var(--doorhanger-bg-color); border: 1px solid rgb(0 0 0 / 0.5); border-radius: 4px; box-shadow: 0 1px 4px rgb(0 0 0 / 0.3); } dialog::backdrop { background-color: rgb(0 0 0 / 0.2); } dialog > .row { display: table-row; } dialog > .row > * { display: table-cell; } dialog .toolbarField { margin: 5px 0; } dialog .separator { display: block; margin: 4px 0; height: 0; width: 100%; border-top: 1px solid var(--separator-color); border-bottom: none; } dialog .buttonRow { text-align: center; vertical-align: middle; } dialog :link { color: rgb(255 255 255); } #passwordDialog { text-align: center; } #passwordDialog .toolbarField { width: 200px; } #documentPropertiesDialog { text-align: left; } #documentPropertiesDialog .row > * { min-width: 100px; text-align: start; } #documentPropertiesDialog .row > span { width: 125px; word-wrap: break-word; } #documentPropertiesDialog .row > p { max-width: 225px; word-wrap: break-word; } #documentPropertiesDialog .buttonRow { margin-top: 10px; } .grab-to-pan-grab { cursor: grab !important; } .grab-to-pan-grab *:not(input):not(textarea):not(button):not(select):not(:link) { cursor: inherit !important; } .grab-to-pan-grab:active, .grab-to-pan-grabbing { cursor: grabbing !important; } .grab-to-pan-grabbing { position: fixed; background: rgb(0 0 0 / 0); display: block; inset: 0; overflow: hidden; z-index: 50000; } .toolbarButton { height: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--main-color); outline: none; border-radius: 2px; box-sizing: border-box; font: message-box; flex: none; position: relative; padding: 0; } .toolbarButton > span { display: inline-block; width: 0; height: 0; overflow: hidden; } .toolbarButton::before { opacity: var(--toolbar-icon-opacity); display: inline-block; width: var(--icon-size); height: var(--icon-size); content: ""; background-color: var(--toolbar-icon-bg-color); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: center; mask-position: center; } .toolbarButton.toggled { background-color: var(--toggled-btn-bg-color); color: var(--toggled-btn-color); } .toolbarButton.toggled::before { background-color: var(--toggled-btn-color); } .toolbarButton.toggled:hover { outline: var(--toggled-hover-btn-outline) !important; } .toolbarButton.toggled:hover:active { background-color: var(--toggled-hover-active-btn-color); } .toolbarButton:is(:hover, :focus-visible) { background-color: var(--button-hover-color); } .toolbarButton:is(:hover, :focus-visible)::before { background-color: var(--toolbar-icon-hover-bg-color); } .toolbarButton:is([disabled="disabled"], [disabled]) { opacity: 0.5; pointer-events: none; } .toolbarButton.labeled { width: 100%; min-height: var(--menuitem-height); justify-content: flex-start; gap: 8px; padding-inline-start: 12px; aspect-ratio: unset; text-align: start; white-space: normal; cursor: default; } .toolbarButton.labeled:is(a) { text-decoration: none; } .toolbarButton.labeled[href="#"]:is(a) { opacity: 0.5; pointer-events: none; } .toolbarButton.labeled::before { opacity: var(--doorhanger-icon-opacity); } .toolbarButton.labeled:is(:hover, :focus-visible) { color: var(--doorhanger-hover-color); } .toolbarButton.labeled > span { display: inline-block; width: -moz-max-content; width: max-content; height: auto; } .toolbarButtonWithContainer { height: 100%; aspect-ratio: 1; display: inline-block; position: relative; flex: none; } .toolbarButtonWithContainer > .toolbarButton { width: 100%; height: 100%; } .toolbarButtonWithContainer .menu { padding-block: 5px; } .toolbarButtonWithContainer .menuContainer { height: auto; max-height: calc(var(--viewer-container-height) - var(--toolbar-height) - var(--doorhanger-height)); display: flex; flex-direction: column; box-sizing: border-box; overflow-y: auto; } .toolbarButtonWithContainer .editorParamsToolbar { --editor-toolbar-min-width: 220px; height: auto; min-width: var(--editor-toolbar-min-width); width: -moz-max-content; width: max-content; position: absolute; z-index: 30000; cursor: default; } :is(.toolbarButtonWithContainer .editorParamsToolbar) :is(#editorStampAddImage, #editorSignatureAddSignature)::before { -webkit-mask-image: var(--editorParams-stampAddImage-icon); mask-image: var(--editorParams-stampAddImage-icon); } :is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsLabel { flex: none; font: menu; font-size: 13px; font-style: normal; font-weight: 400; line-height: 150%; width: -moz-fit-content; width: fit-content; inset-inline-start: 0; color: var(--main-color); } :is(.toolbarButtonWithContainer .editorParamsToolbar) button:is(:hover, :focus-visible) .editorParamsLabel { color: var(--doorhanger-hover-color); } :is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsToolbarContainer { width: 100%; height: auto; display: flex; flex-direction: column; box-sizing: border-box; padding-inline: 10px; padding-block: 10px; } :is(:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsToolbarContainer) > .editorParamsSetter { min-height: 26px; display: flex; align-items: center; justify-content: space-between; } :is(:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsToolbarContainer) .editorParamsColor { width: 32px; height: 32px; flex: none; padding: 0; } :is(:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsToolbarContainer) .editorParamsSlider { background-color: transparent; width: 90px; flex: 0 1 0; font: message-box; } :is(:is(:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsToolbarContainer) .editorParamsSlider)::-moz-range-progress { background-color: black; } :is(:is(:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsToolbarContainer) .editorParamsSlider)::-webkit-slider-runnable-track, :is(:is(:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsToolbarContainer) .editorParamsSlider)::-moz-range-track { background-color: black; } :is(:is(:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsToolbarContainer) .editorParamsSlider)::-webkit-slider-thumb, :is(:is(:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsToolbarContainer) .editorParamsSlider)::-moz-range-thumb { background-color: white; } #secondaryToolbar { height: auto; width: 220px; position: absolute; z-index: 30000; cursor: default; min-height: 26px; max-height: calc(var(--viewer-container-height) - 40px); } :is(#secondaryToolbar #secondaryToolbarButtonContainer) #secondaryOpenFile::before { -webkit-mask-image: var(--toolbarButton-openFile-icon); mask-image: var(--toolbarButton-openFile-icon); } :is(#secondaryToolbar #secondaryToolbarButtonContainer) #secondaryPrint::before { -webkit-mask-image: var(--toolbarButton-print-icon); mask-image: var(--toolbarButton-print-icon); } :is(#secondaryToolbar #secondaryToolbarButtonContainer) #secondaryDownload::before { -webkit-mask-image: var(--toolbarButton-download-icon); mask-image: var(--toolbarButton-download-icon); } :is(#secondaryToolbar #secondaryToolbarButtonContainer) #presentationMode::before { -webkit-mask-image: var(--toolbarButton-presentationMode-icon); mask-image: var(--toolbarButton-presentationMode-icon); } :is(#secondaryToolbar #secondaryToolbarButtonContainer) #viewBookmark::before { -webkit-mask-image: var(--toolbarButton-bookmark-icon); mask-image: var(--toolbarButton-bookmark-icon); } :is(#secondaryToolbar #secondaryToolbarButtonContainer) #firstPage::before { -webkit-mask-image: var(--secondaryToolbarButton-firstPage-icon); mask-image: var(--secondaryToolbarButton-firstPage-icon); } :is(#secondaryToolbar #secondaryToolbarButtonContainer) #lastPage::before { -webkit-mask-image: var(--secondaryToolbarButton-lastPage-icon); mask-image: var(--secondaryToolbarButton-lastPage-icon); } :is(#secondaryToolbar #secondaryToolbarButtonContainer) #pageRotateCcw::before { -webkit-mask-image: var(--secondaryToolbarButton-rotateCcw-icon); mask-image: var(--secondaryToolbarButton-rotateCcw-icon); } :is(#secondaryToolbar #secondaryToolbarButtonContainer) #pageRotateCw::before { -webkit-mask-image: var(--secondaryToolbarButton-rotateCw-icon); mask-image: var(--secondaryToolbarButton-rotateCw-icon); } :is(#secondaryToolbar #secondaryToolbarButtonContainer) #cursorSelectTool::before { -webkit-mask-image: var(--secondaryToolbarButton-selectTool-icon); mask-image: var(--secondaryToolbarButton-selectTool-icon); } :is(#secondaryToolbar #secondaryToolbarButtonContainer) #cursorHandTool::before { -webkit-mask-image: var(--secondaryToolbarButton-handTool-icon); mask-image: var(--secondaryToolbarButton-handTool-icon); } :is(#secondaryToolbar #secondaryToolbarButtonContainer) #scrollPage::before { -webkit-mask-image: var(--secondaryToolbarButton-scrollPage-icon); mask-image: var(--secondaryToolbarButton-scrollPage-icon); } :is(#secondaryToolbar #secondaryToolbarButtonContainer) #scrollVertical::before { -webkit-mask-image: var(--secondaryToolbarButton-scrollVertical-icon); mask-image: var(--secondaryToolbarButton-scrollVertical-icon); } :is(#secondaryToolbar #secondaryToolbarButtonContainer) #scrollHorizontal::before { -webkit-mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon); mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon); } :is(#secondaryToolbar #secondaryToolbarButtonContainer) #scrollWrapped::before { -webkit-mask-image: var(--secondaryToolbarButton-scrollWrapped-icon); mask-image: var(--secondaryToolbarButton-scrollWrapped-icon); } :is(#secondaryToolbar #secondaryToolbarButtonContainer) #spreadNone::before { -webkit-mask-image: var(--secondaryToolbarButton-spreadNone-icon); mask-image: var(--secondaryToolbarButton-spreadNone-icon); } :is(#secondaryToolbar #secondaryToolbarButtonContainer) #spreadOdd::before { -webkit-mask-image: var(--secondaryToolbarButton-spreadOdd-icon); mask-image: var(--secondaryToolbarButton-spreadOdd-icon); } :is(#secondaryToolbar #secondaryToolbarButtonContainer) #spreadEven::before { -webkit-mask-image: var(--secondaryToolbarButton-spreadEven-icon); mask-image: var(--secondaryToolbarButton-spreadEven-icon); } :is(#secondaryToolbar #secondaryToolbarButtonContainer) #imageAltTextSettings::before { -webkit-mask-image: var(--secondaryToolbarButton-imageAltTextSettings-icon); mask-image: var(--secondaryToolbarButton-imageAltTextSettings-icon); } :is(#secondaryToolbar #secondaryToolbarButtonContainer) #documentProperties::before { -webkit-mask-image: var(--secondaryToolbarButton-documentProperties-icon); mask-image: var(--secondaryToolbarButton-documentProperties-icon); } #findbar { --input-horizontal-padding: 4px; --findbar-padding: 2px; width: -moz-max-content; width: max-content; max-width: 90vw; min-height: var(--toolbar-height); height: auto; position: absolute; z-index: 30000; cursor: default; padding: 0; min-width: 300px; background-color: var(--toolbar-bg-color); box-sizing: border-box; flex-wrap: wrap; justify-content: flex-start; } #findbar > * { height: var(--toolbar-height); padding: var(--findbar-padding); } #findbar #findInputContainer { margin-inline-start: 2px; } :is(#findbar #findInputContainer) #findPreviousButton::before { -webkit-mask-image: var(--findbarButton-previous-icon); mask-image: var(--findbarButton-previous-icon); } :is(#findbar #findInputContainer) #findNextButton::before { -webkit-mask-image: var(--findbarButton-next-icon); mask-image: var(--findbarButton-next-icon); } :is(#findbar #findInputContainer) #findInput { width: 200px; padding: 5px var(--input-horizontal-padding); } :is(:is(#findbar #findInputContainer) #findInput)::-moz-placeholder { font-style: normal; } :is(:is(#findbar #findInputContainer) #findInput)::placeholder { font-style: normal; } .loadingInput:has(> [data-status="pending"]:is(:is(#findbar #findInputContainer) #findInput))::after { display: inline; visibility: visible; inset-inline-end: calc(var(--input-horizontal-padding) + 1px); } [data-status="notFound"]:is(:is(#findbar #findInputContainer) #findInput) { background-color: rgb(255 102 102); } #findbar #findbarMessageContainer { display: none; gap: 4px; } :is(#findbar #findbarMessageContainer):has(> :is(#findResultsCount, #findMsg):not(:empty)) { display: inline flex; } :is(#findbar #findbarMessageContainer) #findResultsCount { background-color: rgb(217 217 217); color: rgb(82 82 82); padding-block: 4px; } :is(:is(#findbar #findbarMessageContainer) #findResultsCount):empty { display: none; } [data-status="notFound"]:is(:is(#findbar #findbarMessageContainer) #findMsg) { font-weight: bold; } :is(:is(#findbar #findbarMessageContainer) #findMsg):empty { display: none; } #findbar.wrapContainers { flex-direction: column; align-items: flex-start; height: -moz-max-content; height: max-content; } #findbar.wrapContainers .toolbarLabel { margin: 0 4px; } #findbar.wrapContainers #findbarMessageContainer { flex-wrap: wrap; flex-flow: column nowrap; align-items: flex-start; height: -moz-max-content; height: max-content; } :is(#findbar.wrapContainers #findbarMessageContainer) #findResultsCount { height: calc(var(--toolbar-height) - 2 * var(--findbar-padding)); } :is(#findbar.wrapContainers #findbarMessageContainer) #findMsg { min-height: var(--toolbar-height); } @page { margin: 0; } #printContainer { display: none; } @media print { body { background: rgb(0 0 0 / 0) none; } body[data-pdfjsprinting] #outerContainer { display: none; } body[data-pdfjsprinting] #printContainer { display: block; } #printContainer { height: 100%; } #printContainer > .printedPage { page-break-after: always; page-break-inside: avoid; height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } #printContainer > .xfaPrintedPage .xfaPage { position: absolute; } #printContainer > .xfaPrintedPage { page-break-after: always; page-break-inside: avoid; width: 100%; height: 100%; position: relative; } #printContainer > .printedPage :is(canvas, img) { max-width: 100%; max-height: 100%; direction: ltr; display: block; } } .visibleMediumView { display: none !important; } .toolbarLabel { width: -moz-max-content; width: max-content; min-width: 16px; height: 100%; padding-inline: 4px; margin: 2px; border-radius: 2px; color: var(--main-color); font-size: 12px; line-height: 14px; text-align: left; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: default; box-sizing: border-box; display: inline flex; flex-direction: column; align-items: center; justify-content: center; } .toolbarLabel > label { width: 100%; } .toolbarHorizontalGroup { height: 100%; display: inline flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 1px; box-sizing: border-box; } /*ツールバー並び順変更・ツールボタン非表示*/ #toolbarViewer, #toolbarViewerRight, #toolbarViewerLeft { flex-direction: row-reverse; } #editorModeButtons { display: none; } /*ツールバー並び順変更・ツールボタン非表示 - ここまで - */ .dropdownToolbarButton { display: inline flex; flex-direction: row; align-items: center; justify-content: center; position: relative; width: -moz-fit-content; width: fit-content; min-width: 140px; padding: 0; background-color: var(--dropdown-btn-bg-color); border: var(--dropdown-btn-border); border-radius: 2px; color: var(--main-color); font-size: 12px; line-height: 14px; -webkit-user-select: none; -moz-user-select: none; user-select: none; cursor: default; box-sizing: border-box; outline: none; } .dropdownToolbarButton:hover { background-color: var(--button-hover-color); } .dropdownToolbarButton > select { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: inherit; min-width: inherit; height: 28px; font: message-box; font-size: 12px; color: var(--main-color); margin: 0; padding-block: 1px 2px; padding-inline: 6px 38px; border: none; outline: none; background-color: var(--dropdown-btn-bg-color); } :is(.dropdownToolbarButton > select) > option { background: var(--doorhanger-bg-color); color: var(--main-color); } :is(.dropdownToolbarButton > select):is(:hover, :focus-visible) { background-color: var(--button-hover-color); color: var(--toggled-btn-color); } .dropdownToolbarButton::after { position: absolute; display: inline; width: var(--icon-size); height: var(--icon-size); content: ""; background-color: var(--toolbar-icon-bg-color); -webkit-mask-size: cover; mask-size: cover; inset-inline-end: 4px; pointer-events: none; -webkit-mask-image: var(--toolbarButton-menuArrow-icon); mask-image: var(--toolbarButton-menuArrow-icon); } .dropdownToolbarButton:is(:hover, :focus-visible, :active)::after { background-color: var(--toolbar-icon-hover-bg-color); } #toolbarContainer { --menuitem-height: calc(var(--toolbar-height) - 6px); width: 100%; height: var(--toolbar-height); padding: var(--toolbar-vertical-padding) var(--toolbar-horizontal-padding); position: relative; box-sizing: border-box; font: message-box; background-color: var(--toolbar-bg-color); box-shadow: var(--toolbar-box-shadow); border-bottom: var(--toolbar-border-bottom); } #toolbarContainer #toolbarViewer { width: 100%; height: 100%; justify-content: space-between; } :is(#toolbarContainer #toolbarViewer) > * { flex: none; } :is(#toolbarContainer #toolbarViewer) input { font: message-box; } :is(#toolbarContainer #toolbarViewer) .toolbarButtonSpacer { width: 30px; display: block; height: 1px; } :is(#toolbarContainer #toolbarViewer) #toolbarViewerLeft { margin-inline-start: 8px; } :is(:is(#toolbarContainer #toolbarViewer) #toolbarViewerLeft) #numPages.toolbarLabel { padding-inline-start: 3px; flex: none; } #toolbarContainer #loadingBar { --progressBar-percent: 0%; --progressBar-end-offset: 0; position: absolute; top: var(--toolbar-height); inset-inline: 0 var(--progressBar-end-offset); height: 4px; background-color: var(--progressBar-bg-color); border-bottom: 1px solid var(--toolbar-border-color); transition-property: inset-inline-start; transition-duration: var(--sidebar-transition-duration); transition-timing-function: var(--sidebar-transition-timing-function); } :is(#toolbarContainer #loadingBar) .progress { position: absolute; top: 0; inset-inline-start: 0; width: 100%; transform: scaleX(var(--progressBar-percent)); transform-origin: calc(50% - 50% * var(--dir-factor)) 0; height: 100%; background-color: var(--progressBar-color); overflow: hidden; transition: transform 200ms; } .indeterminate:is(#toolbarContainer #loadingBar) .progress { transform: none; background-color: var(--progressBar-bg-color); transition: none; } :is(.indeterminate:is(#toolbarContainer #loadingBar) .progress) .glimmer { position: absolute; top: 0; inset-inline-start: 0; height: 100%; width: calc(100% + 150px); background: repeating-linear-gradient( 135deg, var(--progressBar-blend-color) 0, var(--progressBar-bg-color) 5px, var(--progressBar-bg-color) 45px, var(--progressBar-color) 55px, var(--progressBar-color) 95px, var(--progressBar-blend-color) 100px ); animation: progressIndeterminate 1s linear infinite; } @media all and (max-width: 840px) { #sidebarContainer { background-color: var(--sidebar-narrow-bg-color); } #outerContainer.viewsManagerOpen #viewerContainer { inset-inline-start: 0 !important; } } @media all and (max-width: 750px) { #outerContainer .hiddenMediumView { display: none !important; } #outerContainer .visibleMediumView:not(.hidden, [hidden]) { display: inline-block !important; } } @media all and (max-width: 690px) { .hiddenSmallView, .hiddenSmallView * { display: none !important; } #toolbarContainer #toolbarViewer .toolbarButtonSpacer { width: 0; } } @media all and (max-width: 560px) { #scaleSelectContainer { display: none; } }