Spaces:
Running
Running
| /* 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--31:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); | |
| --message-bar-close-button-hover-bg-color:var(--csstools-light-dark-toggle--31, rgb(21 20 26 / 0.14)); | |
| --csstools-light-dark-toggle--32:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); | |
| --message-bar-close-button-active-bg-color:var(--csstools-light-dark-toggle--32, rgb(21 20 26 / 0.21)); | |
| --csstools-light-dark-toggle--33:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); | |
| --message-bar-close-button-focus-bg-color:var(--csstools-light-dark-toggle--33, 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--31:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); | |
| --message-bar-close-button-hover-bg-color:var(--csstools-light-dark-toggle--31, rgb(21 20 26 / 0.14)); | |
| --csstools-light-dark-toggle--32:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); | |
| --message-bar-close-button-active-bg-color:var(--csstools-light-dark-toggle--32, rgb(21 20 26 / 0.21)); | |
| --csstools-light-dark-toggle--33:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); | |
| --message-bar-close-button-focus-bg-color:var(--csstools-light-dark-toggle--33, 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--34:var(--csstools-color-scheme--light) #fbfbfe; | |
| --text-primary-color:var(--csstools-light-dark-toggle--34, #15141a); | |
| --message-bar-icon:url(images/messageBar_info.svg); | |
| --csstools-light-dark-toggle--35:var(--csstools-color-scheme--light) #73a7f3; | |
| --message-bar-icon-color:var(--csstools-light-dark-toggle--35, #0060df); | |
| --csstools-light-dark-toggle--36:var(--csstools-color-scheme--light) #003070; | |
| --message-bar-bg-color:var(--csstools-light-dark-toggle--36, #deeafc); | |
| --message-bar-fg-color:var(--text-primary-color); | |
| --csstools-light-dark-toggle--37:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); | |
| --message-bar-border-color:var(--csstools-light-dark-toggle--37, rgb(0 0 0 / 0.08)); | |
| --csstools-light-dark-toggle--38:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); | |
| --undo-button-bg-color:var(--csstools-light-dark-toggle--38, rgb(21 20 26 / 0.07)); | |
| --csstools-light-dark-toggle--39:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.14); | |
| --undo-button-bg-color-hover:var(--csstools-light-dark-toggle--39, rgb(21 20 26 / 0.14)); | |
| --csstools-light-dark-toggle--40:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.21); | |
| --undo-button-bg-color-active:var(--csstools-light-dark-toggle--40, rgb(21 20 26 / 0.21)); | |
| --csstools-light-dark-toggle--41:var(--csstools-color-scheme--light) #0df; | |
| --undo-button-border:1px solid var(--csstools-light-dark-toggle--41, #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--34:var(--csstools-color-scheme--light) #fbfbfe; | |
| --text-primary-color:var(--csstools-light-dark-toggle--34, #15141a); | |
| --csstools-light-dark-toggle--35:var(--csstools-color-scheme--light) #73a7f3; | |
| --message-bar-icon-color:var(--csstools-light-dark-toggle--35, #0060df); | |
| --csstools-light-dark-toggle--36:var(--csstools-color-scheme--light) #003070; | |
| --message-bar-bg-color:var(--csstools-light-dark-toggle--36, #deeafc); | |
| --csstools-light-dark-toggle--37:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); | |
| --message-bar-border-color:var(--csstools-light-dark-toggle--37, rgb(0 0 0 / 0.08)); | |
| --csstools-light-dark-toggle--38:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); | |
| --undo-button-bg-color:var(--csstools-light-dark-toggle--38, rgb(21 20 26 / 0.07)); | |
| --csstools-light-dark-toggle--39:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.14); | |
| --undo-button-bg-color-hover:var(--csstools-light-dark-toggle--39, rgb(21 20 26 / 0.14)); | |
| --csstools-light-dark-toggle--40:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.21); | |
| --undo-button-bg-color-active:var(--csstools-light-dark-toggle--40, rgb(21 20 26 / 0.21)); | |
| --csstools-light-dark-toggle--41:var(--csstools-color-scheme--light) #0df; | |
| --undo-button-border:1px solid var(--csstools-light-dark-toggle--41, #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--42:var(--csstools-color-scheme--light) #1c1b22; | |
| --dialog-bg-color:var(--csstools-light-dark-toggle--42, white); | |
| --csstools-light-dark-toggle--43:var(--csstools-color-scheme--light) #1c1b22; | |
| --dialog-border-color:var(--csstools-light-dark-toggle--43, white); | |
| --csstools-light-dark-toggle--44:var(--csstools-color-scheme--light) #15141a; | |
| --dialog-shadow:0 2px 14px 0 var(--csstools-light-dark-toggle--44, rgb(58 57 68 / 0.2)); | |
| --csstools-light-dark-toggle--45:var(--csstools-color-scheme--light) #fbfbfe; | |
| --text-primary-color:var(--csstools-light-dark-toggle--45, #15141a); | |
| --csstools-light-dark-toggle--46:var(--csstools-color-scheme--light) #cfcfd8; | |
| --text-secondary-color:var(--csstools-light-dark-toggle--46, #5b5b66); | |
| --hover-filter:brightness(0.9); | |
| --csstools-light-dark-toggle--47:var(--csstools-color-scheme--light) #0df; | |
| --link-fg-color:var(--csstools-light-dark-toggle--47, #0060df); | |
| --csstools-light-dark-toggle--48:var(--csstools-color-scheme--light) #80ebff; | |
| --link-hover-fg-color:var(--csstools-light-dark-toggle--48, #0250bb); | |
| --csstools-light-dark-toggle--49:var(--csstools-color-scheme--light) #52525e; | |
| --separator-color:var(--csstools-light-dark-toggle--49, #f0f0f4); | |
| --textarea-border-color:#8f8f9d; | |
| --csstools-light-dark-toggle--50:var(--csstools-color-scheme--light) #42414d; | |
| --textarea-bg-color:var(--csstools-light-dark-toggle--50, white); | |
| --textarea-fg-color:var(--text-secondary-color); | |
| --csstools-light-dark-toggle--51:var(--csstools-color-scheme--light) #2b2a33; | |
| --radio-bg-color:var(--csstools-light-dark-toggle--51, #f0f0f4); | |
| --csstools-light-dark-toggle--52:var(--csstools-color-scheme--light) #15141a; | |
| --radio-checked-bg-color:var(--csstools-light-dark-toggle--52, #fbfbfe); | |
| --radio-border-color:#8f8f9d; | |
| --csstools-light-dark-toggle--53:var(--csstools-color-scheme--light) #0df; | |
| --radio-checked-border-color:var(--csstools-light-dark-toggle--53, #0060df); | |
| --csstools-light-dark-toggle--54:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); | |
| --button-secondary-bg-color:var(--csstools-light-dark-toggle--54, 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--55:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); | |
| --button-secondary-active-bg-color:var(--csstools-light-dark-toggle--55, 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--56:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); | |
| --button-secondary-hover-bg-color:var(--csstools-light-dark-toggle--56, 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); | |
| --csstools-light-dark-toggle--57:var(--csstools-color-scheme--light) #0df; | |
| --button-primary-bg-color:var(--csstools-light-dark-toggle--57, #0060df); | |
| --csstools-light-dark-toggle--58:var(--csstools-color-scheme--light) #15141a; | |
| --button-primary-fg-color:var(--csstools-light-dark-toggle--58, #fbfbfe); | |
| --button-primary-border-color:var(--button-primary-bg-color); | |
| --csstools-light-dark-toggle--59:var(--csstools-color-scheme--light) #aaf2ff; | |
| --button-primary-active-bg-color:var(--csstools-light-dark-toggle--59, #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--60:var(--csstools-color-scheme--light) #80ebff; | |
| --button-primary-hover-bg-color:var(--csstools-light-dark-toggle--60, #0250bb); | |
| --button-primary-hover-fg-color:var(--button-primary-fg-color); | |
| --button-primary-hover-border-color:var(--button-primary-hover-bg-color); | |
| --button-disabled-bg-color:color-mix(in srgb, currentcolor, transparent 60%); | |
| --button-disabled-fg-color:var(--button-disabled-bg-color); | |
| --csstools-light-dark-toggle--61:var(--csstools-color-scheme--light) #42414d; | |
| --input-text-bg-color:var(--csstools-light-dark-toggle--61, 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--42:var(--csstools-color-scheme--light) #1c1b22; | |
| --dialog-bg-color:var(--csstools-light-dark-toggle--42, white); | |
| --csstools-light-dark-toggle--43:var(--csstools-color-scheme--light) #1c1b22; | |
| --dialog-border-color:var(--csstools-light-dark-toggle--43, white); | |
| --csstools-light-dark-toggle--44:var(--csstools-color-scheme--light) #15141a; | |
| --dialog-shadow:0 2px 14px 0 var(--csstools-light-dark-toggle--44, rgb(58 57 68 / 0.2)); | |
| --csstools-light-dark-toggle--45:var(--csstools-color-scheme--light) #fbfbfe; | |
| --text-primary-color:var(--csstools-light-dark-toggle--45, #15141a); | |
| --csstools-light-dark-toggle--46:var(--csstools-color-scheme--light) #cfcfd8; | |
| --text-secondary-color:var(--csstools-light-dark-toggle--46, #5b5b66); | |
| --csstools-light-dark-toggle--47:var(--csstools-color-scheme--light) #0df; | |
| --link-fg-color:var(--csstools-light-dark-toggle--47, #0060df); | |
| --csstools-light-dark-toggle--48:var(--csstools-color-scheme--light) #80ebff; | |
| --link-hover-fg-color:var(--csstools-light-dark-toggle--48, #0250bb); | |
| --csstools-light-dark-toggle--49:var(--csstools-color-scheme--light) #52525e; | |
| --separator-color:var(--csstools-light-dark-toggle--49, #f0f0f4); | |
| --csstools-light-dark-toggle--50:var(--csstools-color-scheme--light) #42414d; | |
| --textarea-bg-color:var(--csstools-light-dark-toggle--50, white); | |
| --csstools-light-dark-toggle--51:var(--csstools-color-scheme--light) #2b2a33; | |
| --radio-bg-color:var(--csstools-light-dark-toggle--51, #f0f0f4); | |
| --csstools-light-dark-toggle--52:var(--csstools-color-scheme--light) #15141a; | |
| --radio-checked-bg-color:var(--csstools-light-dark-toggle--52, #fbfbfe); | |
| --csstools-light-dark-toggle--53:var(--csstools-color-scheme--light) #0df; | |
| --radio-checked-border-color:var(--csstools-light-dark-toggle--53, #0060df); | |
| --csstools-light-dark-toggle--54:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); | |
| --button-secondary-bg-color:var(--csstools-light-dark-toggle--54, rgb(21 20 26 / 0.07)); | |
| --csstools-light-dark-toggle--55:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); | |
| --button-secondary-active-bg-color:var(--csstools-light-dark-toggle--55, rgb(21 20 26 / 0.21)); | |
| --csstools-light-dark-toggle--56:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); | |
| --button-secondary-hover-bg-color:var(--csstools-light-dark-toggle--56, rgb(21 20 26 / 0.14)); | |
| --csstools-light-dark-toggle--57:var(--csstools-color-scheme--light) #0df; | |
| --button-primary-bg-color:var(--csstools-light-dark-toggle--57, #0060df); | |
| --csstools-light-dark-toggle--58:var(--csstools-color-scheme--light) #15141a; | |
| --button-primary-fg-color:var(--csstools-light-dark-toggle--58, #fbfbfe); | |
| --csstools-light-dark-toggle--59:var(--csstools-color-scheme--light) #aaf2ff; | |
| --button-primary-active-bg-color:var(--csstools-light-dark-toggle--59, #054096); | |
| --csstools-light-dark-toggle--60:var(--csstools-color-scheme--light) #80ebff; | |
| --button-primary-hover-bg-color:var(--csstools-light-dark-toggle--60, #0250bb); | |
| --csstools-light-dark-toggle--61:var(--csstools-color-scheme--light) #42414d; | |
| --input-text-bg-color:var(--csstools-light-dark-toggle--61, white); | |
| } | |
| } | |
| @media (prefers-color-scheme: dark){ | |
| .dialog{ | |
| --hover-filter:brightness(1.4); | |
| } | |
| } | |
| @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:HighlightText; | |
| --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-primary-bg-color:ButtonText; | |
| --button-primary-fg-color:HighlightText; | |
| --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-disabled-bg-color:GrayText; | |
| --button-disabled-fg-color:ButtonFace; | |
| --input-text-bg-color:HighlightText; | |
| --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); | |
| } | |
| .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); | |
| } | |
| :is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):disabled{ | |
| color:var(--button-disabled-fg-color) ; | |
| background-color:var(--button-disabled-bg-color); | |
| border-color:var(--button-disabled-bg-color); | |
| 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--62:var(--csstools-color-scheme--light) #5a3100; | |
| --message-bar-bg-color:var(--csstools-light-dark-toggle--62, #ffebcd); | |
| --csstools-light-dark-toggle--63:var(--csstools-color-scheme--light) #fbfbfe; | |
| --message-bar-fg-color:var(--csstools-light-dark-toggle--63, #15141a); | |
| --csstools-light-dark-toggle--64:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); | |
| --message-bar-border-color:var(--csstools-light-dark-toggle--64, rgb(0 0 0 / 0.08)); | |
| --message-bar-icon:url(images/messageBar_warning.svg); | |
| --csstools-light-dark-toggle--65:var(--csstools-color-scheme--light) #e49c49; | |
| --message-bar-icon-color:var(--csstools-light-dark-toggle--65, #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--62:var(--csstools-color-scheme--light) #5a3100; | |
| --message-bar-bg-color:var(--csstools-light-dark-toggle--62, #ffebcd); | |
| --csstools-light-dark-toggle--63:var(--csstools-color-scheme--light) #fbfbfe; | |
| --message-bar-fg-color:var(--csstools-light-dark-toggle--63, #15141a); | |
| --csstools-light-dark-toggle--64:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); | |
| --message-bar-border-color:var(--csstools-light-dark-toggle--64, rgb(0 0 0 / 0.08)); | |
| --csstools-light-dark-toggle--65:var(--csstools-color-scheme--light) #e49c49; | |
| --message-bar-icon-color:var(--csstools-light-dark-toggle--65, #cd411e); | |
| } | |
| } | |
| @media screen and (forced-colors: active){ | |
| :is(.dialog .mainContainer) .messageBar{ | |
| --message-bar-bg-color:HighlightText; | |
| --message-bar-fg-color:CanvasText; | |
| --message-bar-border-color:CanvasText; | |
| --message-bar-icon-color:CanvasText; | |
| } | |
| } | |
| :is(.dialog .mainContainer) .messageBar{ | |
| align-self:stretch; | |
| } | |
| :is(:is(:is(.dialog .mainContainer) .messageBar) > div)::before,:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div{ | |
| margin-block:4px; | |
| } | |
| :is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div{ | |
| display:flex; | |
| flex-direction:column; | |
| align-items:flex-start; | |
| gap:8px; | |
| flex:1 0 0; | |
| } | |
| :is(:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div) .title{ | |
| font-size:13px; | |
| font-weight:590; | |
| } | |
| :is(:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div) .description{ | |
| font-size:13px; | |
| } | |
| :is(.dialog .mainContainer) .toggler{ | |
| display:flex; | |
| align-items:center; | |
| gap:8px; | |
| align-self:stretch; | |
| } | |
| :is(:is(.dialog .mainContainer) .toggler) > .togglerLabel{ | |
| -webkit-user-select:none; | |
| -moz-user-select:none; | |
| user-select:none; | |
| } | |
| .textLayer{ | |
| position:absolute; | |
| text-align:initial; | |
| inset:0; | |
| overflow:clip; | |
| opacity:1; | |
| line-height:1; | |
| -webkit-text-size-adjust:none; | |
| -moz-text-size-adjust:none; | |
| text-size-adjust:none; | |
| forced-color-adjust:none; | |
| transform-origin:0 0; | |
| caret-color:CanvasText; | |
| z-index:0; | |
| } | |
| .textLayer.highlighting{ | |
| touch-action:none; | |
| } | |
| .textLayer :is(span,br){ | |
| color:transparent; | |
| position:absolute; | |
| white-space:pre; | |
| cursor:text; | |
| transform-origin:0% 0%; | |
| } | |
| .textLayer > :not(.markedContent),.textLayer .markedContent span:not(.markedContent){ | |
| z-index:1; | |
| } | |
| .textLayer span.markedContent{ | |
| top:0; | |
| height:0; | |
| } | |
| .textLayer span[role="img"]{ | |
| -webkit-user-select:none; | |
| -moz-user-select:none; | |
| user-select:none; | |
| cursor:default; | |
| } | |
| .textLayer .highlight{ | |
| --highlight-bg-color:rgb(180 0 170 / 0.25); | |
| --highlight-selected-bg-color:rgb(0 100 0 / 0.25); | |
| --highlight-backdrop-filter:none; | |
| --highlight-selected-backdrop-filter:none; | |
| } | |
| @media screen and (forced-colors: active){ | |
| .textLayer .highlight{ | |
| --highlight-bg-color:transparent; | |
| --highlight-selected-bg-color:transparent; | |
| --highlight-backdrop-filter:var(--hcm-highlight-filter); | |
| --highlight-selected-backdrop-filter:var( | |
| --hcm-highlight-selected-filter | |
| ); | |
| } | |
| } | |
| .textLayer .highlight{ | |
| margin:-1px; | |
| padding:1px; | |
| background-color:var(--highlight-bg-color); | |
| -webkit-backdrop-filter:var(--highlight-backdrop-filter); | |
| backdrop-filter:var(--highlight-backdrop-filter); | |
| border-radius:4px; | |
| } | |
| .appended:is(.textLayer .highlight){ | |
| position:initial; | |
| } | |
| .begin:is(.textLayer .highlight){ | |
| border-radius:4px 0 0 4px; | |
| } | |
| .end:is(.textLayer .highlight){ | |
| border-radius:0 4px 4px 0; | |
| } | |
| .middle:is(.textLayer .highlight){ | |
| border-radius:0; | |
| } | |
| .selected:is(.textLayer .highlight){ | |
| background-color:var(--highlight-selected-bg-color); | |
| -webkit-backdrop-filter:var(--highlight-selected-backdrop-filter); | |
| backdrop-filter:var(--highlight-selected-backdrop-filter); | |
| } | |
| .textLayer ::-moz-selection{ | |
| background:rgba(0 0 255 / 0.25); | |
| background:color-mix(in srgb, AccentColor, transparent 75%); | |
| } | |
| .textLayer ::selection{ | |
| background:rgba(0 0 255 / 0.25); | |
| background:color-mix(in srgb, AccentColor, transparent 75%); | |
| } | |
| .textLayer br::-moz-selection{ | |
| background:transparent; | |
| } | |
| .textLayer br::selection{ | |
| background:transparent; | |
| } | |
| .textLayer .endOfContent{ | |
| display:block; | |
| position:absolute; | |
| inset:100% 0 0; | |
| z-index:0; | |
| cursor:default; | |
| -webkit-user-select:none; | |
| -moz-user-select:none; | |
| user-select:none; | |
| } | |
| .textLayer.selecting .endOfContent{ | |
| top:0; | |
| } | |
| .annotationLayer{ | |
| --csstools-color-scheme--light:initial; | |
| color-scheme:only light; | |
| --annotation-unfocused-field-background:url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>"); | |
| --input-focus-border-color:Highlight; | |
| --input-focus-outline:1px solid Canvas; | |
| --input-unfocused-border-color:transparent; | |
| --input-disabled-border-color:transparent; | |
| --input-hover-border-color:black; | |
| --link-outline:none; | |
| } | |
| @media screen and (forced-colors: active){ | |
| .annotationLayer{ | |
| --input-focus-border-color:CanvasText; | |
| --input-unfocused-border-color:ActiveText; | |
| --input-disabled-border-color:GrayText; | |
| --input-hover-border-color:Highlight; | |
| --link-outline:1.5px solid LinkText; | |
| } | |
| .annotationLayer .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 ; | |
| background:none ; | |
| box-shadow:none; | |
| } | |
| .annotationLayer .popupAnnotation .popup{ | |
| outline:calc(1.5px * var(--total-scale-factor)) solid CanvasText ; | |
| background-color:ButtonFace ; | |
| color:ButtonText ; | |
| } | |
| .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 ; | |
| } | |
| } | |
| .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; | |
| } | |
| .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); | |
| box-shadow:0 2px 10px 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 h1{ | |
| display:inline; | |
| } | |
| .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; | |
| } | |
| .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,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>"); | |
| --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--66:var(--csstools-color-scheme--light) #0df; | |
| --color-accent-primary:var(--csstools-light-dark-toggle--66, #0060df); | |
| --csstools-light-dark-toggle--67:var(--csstools-color-scheme--light) #80ebff; | |
| --color-accent-primary-hover:var(--csstools-light-dark-toggle--67, #0250bb); | |
| --csstools-light-dark-toggle--68:var(--csstools-color-scheme--light) #aaf2ff; | |
| --color-accent-primary-active:var(--csstools-light-dark-toggle--68, #054096); | |
| --border-radius-circle:9999px; | |
| --border-width:1px; | |
| --size-item-small:16px; | |
| --size-item-large:32px; | |
| --csstools-light-dark-toggle--69:var(--csstools-color-scheme--light) #1c1b22; | |
| --color-canvas:var(--csstools-light-dark-toggle--69, white); | |
| --background-color-canvas:var(--color-canvas); | |
| --csstools-light-dark-toggle--70:var(--csstools-color-scheme--light) #f9f9fa; | |
| --border-color-interactive:var(--csstools-light-dark-toggle--70, #8f8f9d); | |
| --border-color-interactive-hover:var(--border-color-interactive); | |
| --border-color-interactive-active:var(--border-color-interactive); | |
| } | |
| @supports (color: light-dark(red, red)){ | |
| .toggle-button{ | |
| --color-accent-primary:light-dark(#0060df, #0df); | |
| --color-accent-primary-hover:light-dark(#0250bb, #80ebff); | |
| --color-accent-primary-active:light-dark(#054096, #aaf2ff); | |
| --color-canvas:light-dark(white, #1c1b22); | |
| --border-color-interactive:light-dark(#8f8f9d, #f9f9fa); | |
| } | |
| } | |
| @supports not (color: light-dark(tan, tan)){ | |
| .toggle-button *{ | |
| --csstools-light-dark-toggle--66:var(--csstools-color-scheme--light) #0df; | |
| --color-accent-primary:var(--csstools-light-dark-toggle--66, #0060df); | |
| --csstools-light-dark-toggle--67:var(--csstools-color-scheme--light) #80ebff; | |
| --color-accent-primary-hover:var(--csstools-light-dark-toggle--67, #0250bb); | |
| --csstools-light-dark-toggle--68:var(--csstools-color-scheme--light) #aaf2ff; | |
| --color-accent-primary-active:var(--csstools-light-dark-toggle--68, #054096); | |
| --csstools-light-dark-toggle--69:var(--csstools-color-scheme--light) #1c1b22; | |
| --color-canvas:var(--csstools-light-dark-toggle--69, white); | |
| --csstools-light-dark-toggle--70:var(--csstools-color-scheme--light) #f9f9fa; | |
| --border-color-interactive:var(--csstools-light-dark-toggle--70, #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--71:var(--csstools-color-scheme--light) #2b2a33; | |
| --signature-bg:var(--csstools-light-dark-toggle--71, #f9f9fb); | |
| --csstools-light-dark-toggle--72:var(--csstools-color-scheme--light) var(--signature-bg); | |
| --signature-hover-bg:var(--csstools-light-dark-toggle--72, #f0f0f4); | |
| --button-signature-bg:transparent; | |
| --button-signature-color:var(--main-color); | |
| --csstools-light-dark-toggle--73:var(--csstools-color-scheme--light) #5b5b66; | |
| --button-signature-active-bg:var(--csstools-light-dark-toggle--73, #cfcfd8); | |
| --button-signature-active-border:none; | |
| --button-signature-active-color:var(--button-signature-color); | |
| --button-signature-border:none; | |
| --csstools-light-dark-toggle--74:var(--csstools-color-scheme--light) #52525e; | |
| --button-signature-hover-bg:var(--csstools-light-dark-toggle--74, #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--71:var(--csstools-color-scheme--light) #2b2a33; | |
| --signature-bg:var(--csstools-light-dark-toggle--71, #f9f9fb); | |
| --csstools-light-dark-toggle--72:var(--csstools-color-scheme--light) var(--signature-bg); | |
| --signature-hover-bg:var(--csstools-light-dark-toggle--72, #f0f0f4); | |
| --csstools-light-dark-toggle--73:var(--csstools-color-scheme--light) #5b5b66; | |
| --button-signature-active-bg:var(--csstools-light-dark-toggle--73, #cfcfd8); | |
| --csstools-light-dark-toggle--74:var(--csstools-color-scheme--light) #52525e; | |
| --button-signature-hover-bg:var(--csstools-light-dark-toggle--74, #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:auto; | |
| 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) ; | |
| } | |
| .editDescription.altText::before{ | |
| width:16px ; | |
| height:16px ; | |
| } | |
| :root{ | |
| --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); | |
| } | |
| .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; | |
| } | |
| .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); | |
| } | |
| :is(#viewerContainer.pdfPresentationMode:fullscreen,.annotationEditorLayer.disabled) .noAltTextBadge{ | |
| display:none ; | |
| } | |
| @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 ; | |
| } | |
| .annotationEditorLayer.drawing *{ | |
| pointer-events:none ; | |
| } | |
| .annotationEditorLayer.waiting{ | |
| content:""; | |
| cursor:wait; | |
| position:absolute; | |
| inset:0; | |
| width:100%; | |
| height:100%; | |
| } | |
| .annotationEditorLayer.disabled{ | |
| pointer-events:none; | |
| } | |
| .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--75:var(--csstools-color-scheme--light) #2b2a33; | |
| --editor-toolbar-bg-color:var(--csstools-light-dark-toggle--75, #f0f0f4); | |
| --editor-toolbar-highlight-image:url(images/toolbarButton-editorHighlight.svg); | |
| --csstools-light-dark-toggle--76:var(--csstools-color-scheme--light) #fbfbfe; | |
| --editor-toolbar-fg-color:var(--csstools-light-dark-toggle--76, #2e2e56); | |
| --editor-toolbar-border-color:#8f8f9d; | |
| --editor-toolbar-hover-border-color:var(--editor-toolbar-border-color); | |
| --csstools-light-dark-toggle--77:var(--csstools-color-scheme--light) #52525e; | |
| --editor-toolbar-hover-bg-color:var(--csstools-light-dark-toggle--77, #e0e0e6); | |
| --editor-toolbar-hover-fg-color:var(--editor-toolbar-fg-color); | |
| --editor-toolbar-hover-outline:none; | |
| --csstools-light-dark-toggle--78:var(--csstools-color-scheme--light) #0df; | |
| --editor-toolbar-focus-outline-color:var(--csstools-light-dark-toggle--78, #0060df); | |
| --editor-toolbar-shadow:0 2px 6px 0 rgb(58 57 68 / 0.2); | |
| --editor-toolbar-vert-offset:6px; | |
| --editor-toolbar-height:28px; | |
| --editor-toolbar-padding:2px; | |
| --csstools-light-dark-toggle--79:var(--csstools-color-scheme--light) #54ffbd; | |
| --alt-text-done-color:var(--csstools-light-dark-toggle--79, #2ac3a2); | |
| --csstools-light-dark-toggle--80:var(--csstools-color-scheme--light) #80ebff; | |
| --alt-text-warning-color:var(--csstools-light-dark-toggle--80, #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--75:var(--csstools-color-scheme--light) #2b2a33; | |
| --editor-toolbar-bg-color:var(--csstools-light-dark-toggle--75, #f0f0f4); | |
| --csstools-light-dark-toggle--76:var(--csstools-color-scheme--light) #fbfbfe; | |
| --editor-toolbar-fg-color:var(--csstools-light-dark-toggle--76, #2e2e56); | |
| --csstools-light-dark-toggle--77:var(--csstools-color-scheme--light) #52525e; | |
| --editor-toolbar-hover-bg-color:var(--csstools-light-dark-toggle--77, #e0e0e6); | |
| --csstools-light-dark-toggle--78:var(--csstools-color-scheme--light) #0df; | |
| --editor-toolbar-focus-outline-color:var(--csstools-light-dark-toggle--78, #0060df); | |
| --csstools-light-dark-toggle--79:var(--csstools-color-scheme--light) #54ffbd; | |
| --alt-text-done-color:var(--csstools-light-dark-toggle--79, #2ac3a2); | |
| --csstools-light-dark-toggle--80:var(--csstools-color-scheme--light) #80ebff; | |
| --alt-text-warning-color:var(--csstools-light-dark-toggle--80, #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) .highlightButton{ | |
| width:var(--editor-toolbar-height); | |
| } | |
| :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .highlightButton)::before{ | |
| content:""; | |
| -webkit-mask-image:var(--editor-toolbar-highlight-image); | |
| mask-image:var(--editor-toolbar-highlight-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:100%; | |
| height:100%; | |
| } | |
| :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .highlightButton):hover::before{ | |
| background-color:var(--editor-toolbar-hover-fg-color); | |
| } | |
| :is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .delete{ | |
| width:var(--editor-toolbar-height); | |
| } | |
| :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .delete)::before{ | |
| content:""; | |
| -webkit-mask-image:var(--editor-toolbar-delete-image); | |
| mask-image:var(--editor-toolbar-delete-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:100%; | |
| height:100%; | |
| } | |
| :is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .delete):hover::before{ | |
| background-color:var(--editor-toolbar-hover-fg-color); | |
| } | |
| :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--81:var(--csstools-color-scheme--light) #1c1b22; | |
| --alt-text-tooltip-bg:var(--csstools-light-dark-toggle--81, #f0f0f4); | |
| --csstools-light-dark-toggle--82:var(--csstools-color-scheme--light) #fbfbfe; | |
| --alt-text-tooltip-fg:var(--csstools-light-dark-toggle--82, #15141a); | |
| --alt-text-tooltip-border:#8f8f9d; | |
| --csstools-light-dark-toggle--83:var(--csstools-color-scheme--light) #15141a; | |
| --alt-text-tooltip-shadow:0px 2px 6px 0px var(--csstools-light-dark-toggle--83, 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:0px 2px 6px 0px 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--81:var(--csstools-color-scheme--light) #1c1b22; | |
| --alt-text-tooltip-bg:var(--csstools-light-dark-toggle--81, #f0f0f4); | |
| --csstools-light-dark-toggle--82:var(--csstools-color-scheme--light) #fbfbfe; | |
| --alt-text-tooltip-fg:var(--csstools-light-dark-toggle--82, #15141a); | |
| --csstools-light-dark-toggle--83:var(--csstools-color-scheme--light) #15141a; | |
| --alt-text-tooltip-shadow:0px 2px 6px 0px var(--csstools-light-dark-toggle--83, 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; | |
| } | |
| .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); | |
| -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--84:var(--csstools-color-scheme--light) #52525e; | |
| --no-alt-text-badge-border-color:var(--csstools-light-dark-toggle--84, #f0f0f4); | |
| --csstools-light-dark-toggle--85:var(--csstools-color-scheme--light) #fbfbfe; | |
| --no-alt-text-badge-bg-color:var(--csstools-light-dark-toggle--85, #cfcfd8); | |
| --csstools-light-dark-toggle--86:var(--csstools-color-scheme--light) #15141a; | |
| --no-alt-text-badge-fg-color:var(--csstools-light-dark-toggle--86, #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--84:var(--csstools-color-scheme--light) #52525e; | |
| --no-alt-text-badge-border-color:var(--csstools-light-dark-toggle--84, #f0f0f4); | |
| --csstools-light-dark-toggle--85:var(--csstools-color-scheme--light) #fbfbfe; | |
| --no-alt-text-badge-bg-color:var(--csstools-light-dark-toggle--85, #cfcfd8); | |
| --csstools-light-dark-toggle--86:var(--csstools-color-scheme--light) #15141a; | |
| --no-alt-text-badge-fg-color:var(--csstools-light-dark-toggle--86, #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; | |
| } | |
| .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(0pc - 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--87:var(--csstools-color-scheme--light) #2b2a33; | |
| --preview-image-bg-color:var(--csstools-light-dark-toggle--87, #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--87:var(--csstools-color-scheme--light) #2b2a33; | |
| --preview-image-bg-color:var(--csstools-light-dark-toggle--87, #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 ; | |
| } | |
| .dialog.newAltText.aiInstalling #newAltTextCreateAutomatically{ | |
| display:none ; | |
| } | |
| .dialog.newAltText.aiInstalling #newAltTextDownloadModel{ | |
| display:flex ; | |
| } | |
| .dialog.newAltText.error #newAltTextNotNow{ | |
| display:none ; | |
| } | |
| .dialog.newAltText.error #newAltTextCancel{ | |
| display:inline-block ; | |
| } | |
| .dialog.newAltText:not(.error) #newAltTextError{ | |
| display:none ; | |
| } | |
| .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--88:var(--csstools-color-scheme--light) #80ebff; | |
| --hover-outline-color:var(--csstools-light-dark-toggle--88, #0250bb); | |
| --csstools-light-dark-toggle--89:var(--csstools-color-scheme--light) #aaf2ff; | |
| --selected-outline-color:var(--csstools-light-dark-toggle--89, #0060df); | |
| --csstools-light-dark-toggle--90:var(--csstools-color-scheme--light) #52525e; | |
| --swatch-border-color:var(--csstools-light-dark-toggle--90, #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--88:var(--csstools-color-scheme--light) #80ebff; | |
| --hover-outline-color:var(--csstools-light-dark-toggle--88, #0250bb); | |
| --csstools-light-dark-toggle--89:var(--csstools-color-scheme--light) #aaf2ff; | |
| --selected-outline-color:var(--csstools-light-dark-toggle--89, #0060df); | |
| --csstools-light-dark-toggle--90:var(--csstools-color-scheme--light) #52525e; | |
| --swatch-border-color:var(--csstools-light-dark-toggle--90, #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; | |
| } | |
| .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 ; | |
| } | |
| :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--91:var(--csstools-color-scheme--light) #80808e; | |
| --example-color:var(--csstools-light-dark-toggle--91, #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--91:var(--csstools-color-scheme--light) #80808e; | |
| --example-color:var(--csstools-light-dark-toggle--91, #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--92:var(--csstools-color-scheme--light) #8f8f9d; | |
| --divider-color:var(--csstools-light-dark-toggle--92, #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--92:var(--csstools-color-scheme--light) #8f8f9d; | |
| --divider-color:var(--csstools-light-dark-toggle--92, #d7d7db); | |
| } | |
| } | |
| @media screen and (forced-colors: active){ | |
| :is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider{ | |
| --divider-color:CanvasText; | |
| } | |
| } | |
| :is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider{ | |
| margin-block:4px; | |
| width:100%; | |
| height:1px; | |
| background-color:var(--divider-color); | |
| } | |
| :is(#highlightParamsToolbarContainer #editorHighlightVisibility) .toggler{ | |
| display:flex; | |
| justify-content:space-between; | |
| align-items:center; | |
| align-self:stretch; | |
| } | |
| #altTextSettingsDialog{ | |
| padding:16px; | |
| } | |
| #altTextSettingsDialog #altTextSettingsContainer{ | |
| display:flex; | |
| width:573px; | |
| flex-direction:column; | |
| gap:16px; | |
| } | |
| :is(#altTextSettingsDialog #altTextSettingsContainer) .mainContainer{ | |
| gap:16px; | |
| } | |
| :is(#altTextSettingsDialog #altTextSettingsContainer) .description{ | |
| color:var(--text-secondary-color); | |
| } | |
| :is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings{ | |
| display:flex; | |
| flex-direction:column; | |
| gap:12px; | |
| } | |
| :is(:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings) button{ | |
| width:-moz-fit-content; | |
| width:fit-content; | |
| } | |
| .download:is(:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings) #deleteModelButton{ | |
| display:none; | |
| } | |
| :is(:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings):not(.download) #downloadModelButton{ | |
| display:none; | |
| } | |
| :is(#altTextSettingsDialog #altTextSettingsContainer) #automaticAltText,:is(#altTextSettingsDialog #altTextSettingsContainer) #altTextEditor{ | |
| display:flex; | |
| flex-direction:column; | |
| gap:8px; | |
| } | |
| :is(#altTextSettingsDialog #altTextSettingsContainer) #createModelDescription,:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings,:is(#altTextSettingsDialog #altTextSettingsContainer) #showAltTextDialogDescription{ | |
| padding-inline-start:40px; | |
| } | |
| :is(#altTextSettingsDialog #altTextSettingsContainer) #automaticSettings{ | |
| display:flex; | |
| flex-direction:column; | |
| gap:16px; | |
| } | |
| :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--93:var(--csstools-color-scheme--light) #0df; | |
| --focus-ring-color:var(--csstools-light-dark-toggle--93, #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--93:var(--csstools-color-scheme--light) #0df; | |
| --focus-ring-color:var(--csstools-light-dark-toggle--93, #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; | |
| } | |
| @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; | |
| } | |
| .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; | |
| --inline-start:left; | |
| --inline-end:right; | |
| --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) rgb(255 255 255 / 0.8); | |
| --treeitem-color:var(--csstools-light-dark-toggle--18, rgb(0 0 0 / 0.8)); | |
| --csstools-light-dark-toggle--19:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.15); | |
| --treeitem-bg-color:var(--csstools-light-dark-toggle--19, rgb(0 0 0 / 0.15)); | |
| --csstools-light-dark-toggle--20:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.9); | |
| --treeitem-hover-color:var(--csstools-light-dark-toggle--20, rgb(0 0 0 / 0.9)); | |
| --csstools-light-dark-toggle--21:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.9); | |
| --treeitem-selected-color:var(--csstools-light-dark-toggle--21, rgb(0 0 0 / 0.9)); | |
| --csstools-light-dark-toggle--22:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.25); | |
| --treeitem-selected-bg-color:var(--csstools-light-dark-toggle--22, rgb(0 0 0 / 0.25)); | |
| --csstools-light-dark-toggle--23:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.1); | |
| --thumbnail-hover-color:var(--csstools-light-dark-toggle--23, rgb(0 0 0 / 0.1)); | |
| --csstools-light-dark-toggle--24:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.2); | |
| --thumbnail-selected-color:var(--csstools-light-dark-toggle--24, rgb(0 0 0 / 0.2)); | |
| --csstools-light-dark-toggle--25:var(--csstools-color-scheme--light) #42414d; | |
| --doorhanger-bg-color:var(--csstools-light-dark-toggle--25, rgb(255 255 255)); | |
| --csstools-light-dark-toggle--26:var(--csstools-color-scheme--light) rgb(39 39 43); | |
| --doorhanger-border-color:var(--csstools-light-dark-toggle--26, rgb(12 12 13 / 0.2)); | |
| --csstools-light-dark-toggle--27:var(--csstools-color-scheme--light) rgb(249 249 250); | |
| --doorhanger-hover-color:var(--csstools-light-dark-toggle--27, rgb(12 12 13)); | |
| --csstools-light-dark-toggle--28:var(--csstools-color-scheme--light) rgb(92 92 97); | |
| --doorhanger-separator-color:var(--csstools-light-dark-toggle--28, rgb(222 222 222)); | |
| --dialog-button-border:none; | |
| --csstools-light-dark-toggle--29:var(--csstools-color-scheme--light) rgb(92 92 97); | |
| --dialog-button-bg-color:var(--csstools-light-dark-toggle--29, rgb(12 12 13 / 0.1)); | |
| --csstools-light-dark-toggle--30:var(--csstools-color-scheme--light) rgb(115 115 115); | |
| --dialog-button-hover-bg-color:var(--csstools-light-dark-toggle--30, rgb(12 12 13 / 0.3)); | |
| --loading-icon:url(images/loading.svg); | |
| --treeitem-expanded-icon:url(images/treeitem-expanded.svg); | |
| --treeitem-collapsed-icon:url(images/treeitem-collapsed.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-sidebarToggle-icon:url(images/toolbarButton-sidebarToggle.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); | |
| } | |
| @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)); | |
| --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) | |
| ); | |
| --thumbnail-hover-color:light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.1)); | |
| --thumbnail-selected-color:light-dark( | |
| rgb(0 0 0 / 0.2), | |
| rgb(255 255 255 / 0.2) | |
| ); | |
| --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) rgb(255 255 255 / 0.8); | |
| --treeitem-color:var(--csstools-light-dark-toggle--18, rgb(0 0 0 / 0.8)); | |
| --csstools-light-dark-toggle--19:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.15); | |
| --treeitem-bg-color:var(--csstools-light-dark-toggle--19, rgb(0 0 0 / 0.15)); | |
| --csstools-light-dark-toggle--20:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.9); | |
| --treeitem-hover-color:var(--csstools-light-dark-toggle--20, rgb(0 0 0 / 0.9)); | |
| --csstools-light-dark-toggle--21:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.9); | |
| --treeitem-selected-color:var(--csstools-light-dark-toggle--21, rgb(0 0 0 / 0.9)); | |
| --csstools-light-dark-toggle--22:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.25); | |
| --treeitem-selected-bg-color:var(--csstools-light-dark-toggle--22, rgb(0 0 0 / 0.25)); | |
| --csstools-light-dark-toggle--23:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.1); | |
| --thumbnail-hover-color:var(--csstools-light-dark-toggle--23, rgb(0 0 0 / 0.1)); | |
| --csstools-light-dark-toggle--24:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.2); | |
| --thumbnail-selected-color:var(--csstools-light-dark-toggle--24, rgb(0 0 0 / 0.2)); | |
| --csstools-light-dark-toggle--25:var(--csstools-color-scheme--light) #42414d; | |
| --doorhanger-bg-color:var(--csstools-light-dark-toggle--25, rgb(255 255 255)); | |
| --csstools-light-dark-toggle--26:var(--csstools-color-scheme--light) rgb(39 39 43); | |
| --doorhanger-border-color:var(--csstools-light-dark-toggle--26, rgb(12 12 13 / 0.2)); | |
| --csstools-light-dark-toggle--27:var(--csstools-color-scheme--light) rgb(249 249 250); | |
| --doorhanger-hover-color:var(--csstools-light-dark-toggle--27, rgb(12 12 13)); | |
| --csstools-light-dark-toggle--28:var(--csstools-color-scheme--light) rgb(92 92 97); | |
| --doorhanger-separator-color:var(--csstools-light-dark-toggle--28, rgb(222 222 222)); | |
| --csstools-light-dark-toggle--29:var(--csstools-color-scheme--light) rgb(92 92 97); | |
| --dialog-button-bg-color:var(--csstools-light-dark-toggle--29, rgb(12 12 13 / 0.1)); | |
| --csstools-light-dark-toggle--30:var(--csstools-color-scheme--light) rgb(115 115 115); | |
| --dialog-button-hover-bg-color:var(--csstools-light-dark-toggle--30, rgb(12 12 13 / 0.3)); | |
| } | |
| } | |
| [dir="rtl"]:root{ | |
| --dir-factor:-1; | |
| --inline-start:right; | |
| --inline-end:left; | |
| } | |
| @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; | |
| } | |
| .hidden, | |
| [hidden]{ | |
| display:none ; | |
| } | |
| #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; | |
| } | |
| #sidebarContainer{ | |
| position:absolute; | |
| inset-block:var(--toolbar-height) 0; | |
| inset-inline-start:calc(-1 * var(--sidebar-width)); | |
| width:var(--sidebar-width); | |
| visibility:hidden; | |
| z-index:1; | |
| font:message-box; | |
| border-top:1px solid transparent; | |
| border-inline-end:var(--doorhanger-border-color-whcm); | |
| transition-property:inset-inline-start; | |
| transition-duration:var(--sidebar-transition-duration); | |
| transition-timing-function:var(--sidebar-transition-timing-function); | |
| } | |
| #outerContainer:is(.sidebarMoving, .sidebarOpen) #sidebarContainer{ | |
| visibility:visible; | |
| } | |
| #outerContainer.sidebarOpen #sidebarContainer{ | |
| inset-inline-start: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); | |
| } | |
| #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentationMode){ | |
| inset-inline-start:var(--sidebar-width); | |
| transition-property:inset-inline-start; | |
| } | |
| #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; | |
| } | |
| #sidebarResizer{ | |
| position:absolute; | |
| inset-block:0; | |
| inset-inline-end:-6px; | |
| width:6px; | |
| z-index:200; | |
| cursor:ew-resize; | |
| } | |
| #outerContainer.sidebarOpen #loadingBar{ | |
| inset-inline-start:var(--sidebar-width); | |
| } | |
| #outerContainer.sidebarResizing | |
| :is(#sidebarContainer, #viewerContainer, #loadingBar){ | |
| transition-duration:0s; | |
| } | |
| .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:var(--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; | |
| } | |
| .treeItemToggler::before{ | |
| position:absolute; | |
| display:inline-block; | |
| width:16px; | |
| height:16px; | |
| content:""; | |
| background-color:var(--toolbar-icon-bg-color); | |
| -webkit-mask-size:cover; | |
| mask-size:cover; | |
| } | |
| #sidebarToggleButton::before{ | |
| -webkit-mask-image:var(--toolbarButton-sidebarToggle-icon); | |
| mask-image:var(--toolbarButton-sidebarToggle-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); | |
| } | |
| #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; | |
| } | |
| #thumbnailView, | |
| #outlineView, | |
| #attachmentsView, | |
| #layersView{ | |
| position:absolute; | |
| width:calc(100% - 8px); | |
| inset-block:0; | |
| padding:4px 4px 0; | |
| overflow:auto; | |
| -webkit-user-select:none; | |
| -moz-user-select:none; | |
| user-select:none; | |
| } | |
| #thumbnailView{ | |
| width:calc(100% - 60px); | |
| padding:10px 30px 0; | |
| } | |
| #thumbnailView > a:is(:active, :focus){ | |
| outline:0; | |
| } | |
| .thumbnail{ | |
| --thumbnail-width:0; | |
| --thumbnail-height:0; | |
| float:var(--inline-start); | |
| width:var(--thumbnail-width); | |
| height:var(--thumbnail-height); | |
| margin:0 10px 5px; | |
| padding:1px; | |
| border:7px solid transparent; | |
| border-radius:2px; | |
| } | |
| #thumbnailView > a:last-of-type > .thumbnail{ | |
| margin-bottom:10px; | |
| } | |
| a:focus > .thumbnail, | |
| .thumbnail:hover{ | |
| border-color:var(--thumbnail-hover-color); | |
| } | |
| .thumbnail.selected{ | |
| border-color:var(--thumbnail-selected-color) ; | |
| } | |
| .thumbnailImage{ | |
| width:var(--thumbnail-width); | |
| height:var(--thumbnail-height); | |
| opacity:0.9; | |
| } | |
| a:focus > .thumbnail > .thumbnailImage, | |
| .thumbnail:hover > .thumbnailImage{ | |
| opacity:0.95; | |
| } | |
| .thumbnail.selected > .thumbnailImage{ | |
| opacity:1 ; | |
| } | |
| .thumbnail:not([data-loaded]) > .thumbnailImage{ | |
| width:calc(var(--thumbnail-width) - 2px); | |
| height:calc(var(--thumbnail-height) - 2px); | |
| border:1px dashed rgb(132 132 132); | |
| } | |
| .treeWithDeepNesting > .treeItem, | |
| .treeItem > .treeItems{ | |
| margin-inline-start:20px; | |
| } | |
| .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:pointer; | |
| } | |
| #layersView .treeItem > a *{ | |
| cursor:pointer; | |
| } | |
| #layersView .treeItem > a > label{ | |
| padding-inline-start:4px; | |
| } | |
| #layersView .treeItem > a > label > input{ | |
| float:var(--inline-start); | |
| margin-top:1px; | |
| } | |
| .treeItemToggler{ | |
| position:relative; | |
| float:var(--inline-start); | |
| height:0; | |
| width:0; | |
| color:rgb(255 255 255 / 0.5); | |
| } | |
| .treeItemToggler::before{ | |
| inset-inline-end:4px; | |
| -webkit-mask-image:var(--treeitem-expanded-icon); | |
| mask-image:var(--treeitem-expanded-icon); | |
| } | |
| .treeItemToggler.treeItemsHidden::before{ | |
| -webkit-mask-image:var(--treeitem-collapsed-icon); | |
| mask-image:var(--treeitem-collapsed-icon); | |
| transform:scaleX(var(--dir-factor)); | |
| } | |
| .treeItemToggler.treeItemsHidden ~ .treeItems{ | |
| display:none; | |
| } | |
| .treeItem.selected > a{ | |
| background-color:var(--treeitem-selected-bg-color); | |
| color:var(--treeitem-selected-color); | |
| } | |
| .treeItemToggler:hover, | |
| .treeItemToggler:hover + a, | |
| .treeItemToggler:hover ~ .treeItems, | |
| .treeItem > a:hover{ | |
| background-color:var(--treeitem-bg-color); | |
| background-clip:padding-box; | |
| border-radius:2px; | |
| color:var(--treeitem-hover-color); | |
| } | |
| #outlineOptionsContainer{ | |
| display:none; | |
| } | |
| #sidebarContainer:has(#outlineView:not(.hidden)) #outlineOptionsContainer{ | |
| display:inline flex; | |
| } | |
| .dialogButton{ | |
| width:auto; | |
| margin:3px 4px 2px ; | |
| padding:2px 11px; | |
| color:var(--main-color); | |
| background-color:var(--dialog-button-bg-color); | |
| border:var(--dialog-button-border) ; | |
| } | |
| 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 ; | |
| } | |
| .grab-to-pan-grab | |
| *:not(input):not(textarea):not(button):not(select):not(:link){ | |
| cursor:inherit ; | |
| } | |
| .grab-to-pan-grab:active, | |
| .grab-to-pan-grabbing{ | |
| cursor:grabbing ; | |
| } | |
| .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) ; | |
| } | |
| .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{ | |
| width:100%; | |
| 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{ | |
| height:auto; | |
| width:220px; | |
| 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 ; | |
| } | |
| .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; | |
| } | |
| .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 #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.sidebarOpen #viewerContainer{ | |
| inset-inline-start:0 ; | |
| } | |
| } | |
| @media all and (max-width: 750px){ | |
| #outerContainer .hiddenMediumView{ | |
| display:none ; | |
| } | |
| #outerContainer .visibleMediumView:not(.hidden, [hidden]){ | |
| display:inline-block ; | |
| } | |
| } | |
| @media all and (max-width: 690px){ | |
| .hiddenSmallView, | |
| .hiddenSmallView *{ | |
| display:none ; | |
| } | |
| #toolbarContainer #toolbarViewer .toolbarButtonSpacer{ | |
| width:0; | |
| } | |
| } | |
| @media all and (max-width: 560px){ | |
| #scaleSelectContainer{ | |
| display:none; | |
| } | |
| } | |