/* 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--0:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); --message-bar-close-button-hover-bg-color:var(--csstools-light-dark-toggle--0, rgb(21 20 26 / 0.14)); --csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); --message-bar-close-button-active-bg-color:var(--csstools-light-dark-toggle--1, rgb(21 20 26 / 0.21)); --csstools-light-dark-toggle--2:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); --message-bar-close-button-focus-bg-color:var(--csstools-light-dark-toggle--2, rgb(21 20 26 / 0.07)); } @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ .messageBar{ --message-bar-close-button-hover-bg-color:light-dark( rgb(21 20 26 / 0.14), rgb(251 251 254 / 0.14) ); --message-bar-close-button-active-bg-color:light-dark( rgb(21 20 26 / 0.21), rgb(251 251 254 / 0.21) ); --message-bar-close-button-focus-bg-color:light-dark( rgb(21 20 26 / 0.07), rgb(251 251 254 / 0.07) ); } } @supports not (color: light-dark(tan, tan)){ .messageBar *{ --csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); --message-bar-close-button-hover-bg-color:var(--csstools-light-dark-toggle--0, rgb(21 20 26 / 0.14)); --csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); --message-bar-close-button-active-bg-color:var(--csstools-light-dark-toggle--1, rgb(21 20 26 / 0.21)); --csstools-light-dark-toggle--2:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); --message-bar-close-button-focus-bg-color:var(--csstools-light-dark-toggle--2, rgb(21 20 26 / 0.07)); } } @media screen and (forced-colors: active){ .messageBar{ --message-bar-close-button-color:ButtonText; --message-bar-close-button-border:1px solid ButtonText; --message-bar-close-button-hover-bg-color:ButtonText; --message-bar-close-button-active-bg-color:ButtonText; --message-bar-close-button-focus-bg-color:ButtonText; --message-bar-close-button-color-hover:HighlightText; } } .messageBar{ display:flex; position:relative; padding:8px 8px 8px 16px; flex-direction:column; justify-content:center; align-items:center; gap:8px; -webkit-user-select:none; -moz-user-select:none; user-select:none; border-radius:4px; border:1px solid var(--message-bar-border-color); background:var(--message-bar-bg-color); color:var(--message-bar-fg-color); } .messageBar > div{ display:flex; align-items:flex-start; gap:8px; align-self:stretch; } :is(.messageBar > div)::before{ content:""; display:inline-block; width:16px; height:16px; -webkit-mask-image:var(--message-bar-icon); mask-image:var(--message-bar-icon); -webkit-mask-size:cover; mask-size:cover; background-color:var(--message-bar-icon-color); flex-shrink:0; } .messageBar button{ cursor:pointer; } :is(.messageBar button):focus-visible{ outline:var(--focus-ring-outline); outline-offset:2px; } .messageBar .closeButton{ width:32px; height:32px; background:none; border-radius:var(--message-bar-close-button-border-radius); border:var(--message-bar-close-button-border); display:flex; align-items:center; justify-content:center; } :is(.messageBar .closeButton)::before{ content:""; display:inline-block; width:16px; height:16px; -webkit-mask-image:var(--closing-button-icon); mask-image:var(--closing-button-icon); -webkit-mask-size:cover; mask-size:cover; background-color:var(--message-bar-close-button-color); } :is(.messageBar .closeButton):is(:hover,:active,:focus)::before{ background-color:var(--message-bar-close-button-color-hover); } :is(.messageBar .closeButton):hover{ background-color:var(--message-bar-close-button-hover-bg-color); } :is(.messageBar .closeButton):active{ background-color:var(--message-bar-close-button-active-bg-color); } :is(.messageBar .closeButton):focus{ background-color:var(--message-bar-close-button-focus-bg-color); } :is(.messageBar .closeButton) > span{ display:inline-block; width:0; height:0; overflow:hidden; } #editorUndoBar{ --csstools-light-dark-toggle--3:var(--csstools-color-scheme--light) #fbfbfe; --text-primary-color:var(--csstools-light-dark-toggle--3, #15141a); --message-bar-icon:url(images/messageBar_info.svg); --csstools-light-dark-toggle--4:var(--csstools-color-scheme--light) #73a7f3; --message-bar-icon-color:var(--csstools-light-dark-toggle--4, #0060df); --csstools-light-dark-toggle--5:var(--csstools-color-scheme--light) #003070; --message-bar-bg-color:var(--csstools-light-dark-toggle--5, #deeafc); --message-bar-fg-color:var(--text-primary-color); --csstools-light-dark-toggle--6:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); --message-bar-border-color:var(--csstools-light-dark-toggle--6, rgb(0 0 0 / 0.08)); --csstools-light-dark-toggle--7:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); --undo-button-bg-color:var(--csstools-light-dark-toggle--7, rgb(21 20 26 / 0.07)); --csstools-light-dark-toggle--8:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.14); --undo-button-bg-color-hover:var(--csstools-light-dark-toggle--8, rgb(21 20 26 / 0.14)); --csstools-light-dark-toggle--9:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.21); --undo-button-bg-color-active:var(--csstools-light-dark-toggle--9, rgb(21 20 26 / 0.21)); --csstools-light-dark-toggle--10:var(--csstools-color-scheme--light) #0df; --undo-button-border:1px solid var(--csstools-light-dark-toggle--10, #0060df); --undo-button-fg-color:var(--message-bar-fg-color); --undo-button-fg-color-hover:var(--undo-button-fg-color); --undo-button-fg-color-active:var(--undo-button-fg-color); } @supports (color: light-dark(red, red)){ #editorUndoBar{ --text-primary-color:light-dark(#15141a, #fbfbfe); --message-bar-icon-color:light-dark(#0060df, #73a7f3); --message-bar-bg-color:light-dark(#deeafc, #003070); } } @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ #editorUndoBar{ --message-bar-border-color:light-dark( rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.08) ); --undo-button-bg-color:light-dark( rgb(21 20 26 / 0.07), rgb(255 255 255 / 0.08) ); --undo-button-bg-color-hover:light-dark( rgb(21 20 26 / 0.14), rgb(255 255 255 / 0.14) ); --undo-button-bg-color-active:light-dark( rgb(21 20 26 / 0.21), rgb(255 255 255 / 0.21) ); } } @supports (color: light-dark(red, red)){ #editorUndoBar{ --undo-button-border:1px solid light-dark(#0060df, #0df); } } @supports not (color: light-dark(tan, tan)){ #editorUndoBar *{ --csstools-light-dark-toggle--3:var(--csstools-color-scheme--light) #fbfbfe; --text-primary-color:var(--csstools-light-dark-toggle--3, #15141a); --csstools-light-dark-toggle--4:var(--csstools-color-scheme--light) #73a7f3; --message-bar-icon-color:var(--csstools-light-dark-toggle--4, #0060df); --csstools-light-dark-toggle--5:var(--csstools-color-scheme--light) #003070; --message-bar-bg-color:var(--csstools-light-dark-toggle--5, #deeafc); --csstools-light-dark-toggle--6:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); --message-bar-border-color:var(--csstools-light-dark-toggle--6, rgb(0 0 0 / 0.08)); --csstools-light-dark-toggle--7:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); --undo-button-bg-color:var(--csstools-light-dark-toggle--7, rgb(21 20 26 / 0.07)); --csstools-light-dark-toggle--8:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.14); --undo-button-bg-color-hover:var(--csstools-light-dark-toggle--8, rgb(21 20 26 / 0.14)); --csstools-light-dark-toggle--9:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.21); --undo-button-bg-color-active:var(--csstools-light-dark-toggle--9, rgb(21 20 26 / 0.21)); --csstools-light-dark-toggle--10:var(--csstools-color-scheme--light) #0df; --undo-button-border:1px solid var(--csstools-light-dark-toggle--10, #0060df); } } @media screen and (forced-colors: active){ #editorUndoBar{ --text-primary-color:CanvasText; --message-bar-icon-color:CanvasText; --message-bar-bg-color:Canvas; --message-bar-border-color:CanvasText; --undo-button-bg-color:ButtonText; --undo-button-bg-color-hover:SelectedItem; --undo-button-bg-color-active:SelectedItem; --undo-button-fg-color:ButtonFace; --undo-button-fg-color-hover:SelectedItemText; --undo-button-fg-color-active:SelectedItemText; --undo-button-border:none; } } #editorUndoBar{ position:fixed; top:50px; left:50%; transform:translateX(-50%); z-index:10; padding-block:8px; padding-inline:16px 8px; font:menu; font-size:15px; cursor:default; } #editorUndoBar button{ cursor:pointer; } #editorUndoBar #editorUndoBarUndoButton{ border-radius:4px; font-weight:590; line-height:19.5px; color:var(--undo-button-fg-color); border:var(--undo-button-border); padding:4px 16px; margin-inline-start:8px; height:32px; background-color:var(--undo-button-bg-color); } :is(#editorUndoBar #editorUndoBarUndoButton):hover{ background-color:var(--undo-button-bg-color-hover); color:var(--undo-button-fg-color-hover); } :is(#editorUndoBar #editorUndoBarUndoButton):active{ background-color:var(--undo-button-bg-color-active); color:var(--undo-button-fg-color-active); } #editorUndoBar > div{ align-items:center; } .dialog{ --csstools-light-dark-toggle--11:var(--csstools-color-scheme--light) #1c1b22; --dialog-bg-color:var(--csstools-light-dark-toggle--11, white); --csstools-light-dark-toggle--12:var(--csstools-color-scheme--light) #1c1b22; --dialog-border-color:var(--csstools-light-dark-toggle--12, white); --csstools-light-dark-toggle--13:var(--csstools-color-scheme--light) #15141a; --dialog-shadow:0 2px 14px 0 var(--csstools-light-dark-toggle--13, rgb(58 57 68 / 0.2)); --csstools-light-dark-toggle--14:var(--csstools-color-scheme--light) #fbfbfe; --text-primary-color:var(--csstools-light-dark-toggle--14, #15141a); --csstools-light-dark-toggle--15:var(--csstools-color-scheme--light) #cfcfd8; --text-secondary-color:var(--csstools-light-dark-toggle--15, #5b5b66); --hover-filter:brightness(0.9); --csstools-light-dark-toggle--16:var(--csstools-color-scheme--light) #0df; --link-fg-color:var(--csstools-light-dark-toggle--16, #0060df); --csstools-light-dark-toggle--17:var(--csstools-color-scheme--light) #80ebff; --link-hover-fg-color:var(--csstools-light-dark-toggle--17, #0250bb); --csstools-light-dark-toggle--18:var(--csstools-color-scheme--light) #52525e; --separator-color:var(--csstools-light-dark-toggle--18, #f0f0f4); --textarea-border-color:#8f8f9d; --csstools-light-dark-toggle--19:var(--csstools-color-scheme--light) #42414d; --textarea-bg-color:var(--csstools-light-dark-toggle--19, white); --textarea-fg-color:var(--text-secondary-color); --csstools-light-dark-toggle--20:var(--csstools-color-scheme--light) #2b2a33; --radio-bg-color:var(--csstools-light-dark-toggle--20, #f0f0f4); --csstools-light-dark-toggle--21:var(--csstools-color-scheme--light) #15141a; --radio-checked-bg-color:var(--csstools-light-dark-toggle--21, #fbfbfe); --radio-border-color:#8f8f9d; --csstools-light-dark-toggle--22:var(--csstools-color-scheme--light) #0df; --radio-checked-border-color:var(--csstools-light-dark-toggle--22, #0060df); --csstools-light-dark-toggle--23:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); --button-secondary-bg-color:var(--csstools-light-dark-toggle--23, rgb(21 20 26 / 0.07)); --button-secondary-fg-color:var(--text-primary-color); --button-secondary-border-color:var(--button-secondary-bg-color); --csstools-light-dark-toggle--24:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); --button-secondary-active-bg-color:var(--csstools-light-dark-toggle--24, rgb(21 20 26 / 0.21)); --button-secondary-active-fg-color:var(--button-secondary-fg-color); --button-secondary-active-border-color:var(--button-secondary-bg-color); --csstools-light-dark-toggle--25:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); --button-secondary-hover-bg-color:var(--csstools-light-dark-toggle--25, rgb(21 20 26 / 0.14)); --button-secondary-hover-fg-color:var(--button-secondary-fg-color); --button-secondary-hover-border-color:var(--button-secondary-hover-bg-color); --csstools-light-dark-toggle--26:var(--csstools-color-scheme--light) #0df; --button-primary-bg-color:var(--csstools-light-dark-toggle--26, #0060df); --csstools-light-dark-toggle--27:var(--csstools-color-scheme--light) #15141a; --button-primary-fg-color:var(--csstools-light-dark-toggle--27, #fbfbfe); --button-primary-border-color:var(--button-primary-bg-color); --csstools-light-dark-toggle--28:var(--csstools-color-scheme--light) #aaf2ff; --button-primary-active-bg-color:var(--csstools-light-dark-toggle--28, #054096); --button-primary-active-fg-color:var(--button-primary-fg-color); --button-primary-active-border-color:var(--button-primary-active-bg-color); --csstools-light-dark-toggle--29:var(--csstools-color-scheme--light) #80ebff; --button-primary-hover-bg-color:var(--csstools-light-dark-toggle--29, #0250bb); --button-primary-hover-fg-color:var(--button-primary-fg-color); --button-primary-hover-border-color:var(--button-primary-hover-bg-color); --button-disabled-bg-color:color-mix(in srgb, currentcolor, transparent 60%); --button-disabled-fg-color:var(--button-disabled-bg-color); --csstools-light-dark-toggle--30:var(--csstools-color-scheme--light) #42414d; --input-text-bg-color:var(--csstools-light-dark-toggle--30, white); --input-text-fg-color:var(--text-primary-color); } @supports (color: light-dark(red, red)){ .dialog{ --dialog-bg-color:light-dark(white, #1c1b22); --dialog-border-color:light-dark(white, #1c1b22); } } @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ .dialog{ --dialog-shadow:0 2px 14px 0 light-dark(rgb(58 57 68 / 0.2), #15141a); } } @supports (color: light-dark(red, red)){ .dialog{ --text-primary-color:light-dark(#15141a, #fbfbfe); --text-secondary-color:light-dark(#5b5b66, #cfcfd8); --link-fg-color:light-dark(#0060df, #0df); --link-hover-fg-color:light-dark(#0250bb, #80ebff); --separator-color:light-dark(#f0f0f4, #52525e); --textarea-bg-color:light-dark(white, #42414d); --radio-bg-color:light-dark(#f0f0f4, #2b2a33); --radio-checked-bg-color:light-dark(#fbfbfe, #15141a); --radio-checked-border-color:light-dark(#0060df, #0df); } } @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ .dialog{ --button-secondary-bg-color:light-dark( rgb(21 20 26 / 0.07), rgb(251 251 254 / 0.07) ); --button-secondary-active-bg-color:light-dark( rgb(21 20 26 / 0.21), rgb(251 251 254 / 0.21) ); --button-secondary-hover-bg-color:light-dark( rgb(21 20 26 / 0.14), rgb(251 251 254 / 0.14) ); } } @supports (color: light-dark(red, red)){ .dialog{ --button-primary-bg-color:light-dark(#0060df, #0df); --button-primary-fg-color:light-dark(#fbfbfe, #15141a); --button-primary-active-bg-color:light-dark(#054096, #aaf2ff); --button-primary-hover-bg-color:light-dark(#0250bb, #80ebff); --input-text-bg-color:light-dark(white, #42414d); } } @supports not (color: light-dark(tan, tan)){ .dialog *{ --csstools-light-dark-toggle--11:var(--csstools-color-scheme--light) #1c1b22; --dialog-bg-color:var(--csstools-light-dark-toggle--11, white); --csstools-light-dark-toggle--12:var(--csstools-color-scheme--light) #1c1b22; --dialog-border-color:var(--csstools-light-dark-toggle--12, white); --csstools-light-dark-toggle--13:var(--csstools-color-scheme--light) #15141a; --dialog-shadow:0 2px 14px 0 var(--csstools-light-dark-toggle--13, rgb(58 57 68 / 0.2)); --csstools-light-dark-toggle--14:var(--csstools-color-scheme--light) #fbfbfe; --text-primary-color:var(--csstools-light-dark-toggle--14, #15141a); --csstools-light-dark-toggle--15:var(--csstools-color-scheme--light) #cfcfd8; --text-secondary-color:var(--csstools-light-dark-toggle--15, #5b5b66); --csstools-light-dark-toggle--16:var(--csstools-color-scheme--light) #0df; --link-fg-color:var(--csstools-light-dark-toggle--16, #0060df); --csstools-light-dark-toggle--17:var(--csstools-color-scheme--light) #80ebff; --link-hover-fg-color:var(--csstools-light-dark-toggle--17, #0250bb); --csstools-light-dark-toggle--18:var(--csstools-color-scheme--light) #52525e; --separator-color:var(--csstools-light-dark-toggle--18, #f0f0f4); --csstools-light-dark-toggle--19:var(--csstools-color-scheme--light) #42414d; --textarea-bg-color:var(--csstools-light-dark-toggle--19, white); --csstools-light-dark-toggle--20:var(--csstools-color-scheme--light) #2b2a33; --radio-bg-color:var(--csstools-light-dark-toggle--20, #f0f0f4); --csstools-light-dark-toggle--21:var(--csstools-color-scheme--light) #15141a; --radio-checked-bg-color:var(--csstools-light-dark-toggle--21, #fbfbfe); --csstools-light-dark-toggle--22:var(--csstools-color-scheme--light) #0df; --radio-checked-border-color:var(--csstools-light-dark-toggle--22, #0060df); --csstools-light-dark-toggle--23:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); --button-secondary-bg-color:var(--csstools-light-dark-toggle--23, rgb(21 20 26 / 0.07)); --csstools-light-dark-toggle--24:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); --button-secondary-active-bg-color:var(--csstools-light-dark-toggle--24, rgb(21 20 26 / 0.21)); --csstools-light-dark-toggle--25:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); --button-secondary-hover-bg-color:var(--csstools-light-dark-toggle--25, rgb(21 20 26 / 0.14)); --csstools-light-dark-toggle--26:var(--csstools-color-scheme--light) #0df; --button-primary-bg-color:var(--csstools-light-dark-toggle--26, #0060df); --csstools-light-dark-toggle--27:var(--csstools-color-scheme--light) #15141a; --button-primary-fg-color:var(--csstools-light-dark-toggle--27, #fbfbfe); --csstools-light-dark-toggle--28:var(--csstools-color-scheme--light) #aaf2ff; --button-primary-active-bg-color:var(--csstools-light-dark-toggle--28, #054096); --csstools-light-dark-toggle--29:var(--csstools-color-scheme--light) #80ebff; --button-primary-hover-bg-color:var(--csstools-light-dark-toggle--29, #0250bb); --csstools-light-dark-toggle--30:var(--csstools-color-scheme--light) #42414d; --input-text-bg-color:var(--csstools-light-dark-toggle--30, white); } } @media (prefers-color-scheme: dark){ .dialog{ --hover-filter:brightness(1.4); } } @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) !important; 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--31:var(--csstools-color-scheme--light) #5a3100; --message-bar-bg-color:var(--csstools-light-dark-toggle--31, #ffebcd); --csstools-light-dark-toggle--32:var(--csstools-color-scheme--light) #fbfbfe; --message-bar-fg-color:var(--csstools-light-dark-toggle--32, #15141a); --csstools-light-dark-toggle--33:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); --message-bar-border-color:var(--csstools-light-dark-toggle--33, rgb(0 0 0 / 0.08)); --message-bar-icon:url(images/messageBar_warning.svg); --csstools-light-dark-toggle--34:var(--csstools-color-scheme--light) #e49c49; --message-bar-icon-color:var(--csstools-light-dark-toggle--34, #cd411e); } @supports (color: light-dark(red, red)){ :is(.dialog .mainContainer) .messageBar{ --message-bar-bg-color:light-dark(#ffebcd, #5a3100); --message-bar-fg-color:light-dark(#15141a, #fbfbfe); } } @supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ :is(.dialog .mainContainer) .messageBar{ --message-bar-border-color:light-dark( rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.08) ); } } @supports (color: light-dark(red, red)){ :is(.dialog .mainContainer) .messageBar{ --message-bar-icon-color:light-dark(#cd411e, #e49c49); } } @supports not (color: light-dark(tan, tan)){ :is(:is(.dialog .mainContainer) .messageBar) *{ --csstools-light-dark-toggle--31:var(--csstools-color-scheme--light) #5a3100; --message-bar-bg-color:var(--csstools-light-dark-toggle--31, #ffebcd); --csstools-light-dark-toggle--32:var(--csstools-color-scheme--light) #fbfbfe; --message-bar-fg-color:var(--csstools-light-dark-toggle--32, #15141a); --csstools-light-dark-toggle--33:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); --message-bar-border-color:var(--csstools-light-dark-toggle--33, rgb(0 0 0 / 0.08)); --csstools-light-dark-toggle--34:var(--csstools-color-scheme--light) #e49c49; --message-bar-icon-color:var(--csstools-light-dark-toggle--34, #cd411e); } } @media screen and (forced-colors: active){ :is(.dialog .mainContainer) .messageBar{ --message-bar-bg-color:HighlightText; --message-bar-fg-color:CanvasText; --message-bar-border-color:CanvasText; --message-bar-icon-color:CanvasText; } } :is(.dialog .mainContainer) .messageBar{ align-self:stretch; } :is(:is(:is(.dialog .mainContainer) .messageBar) > div)::before,:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div{ margin-block:4px; } :is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; flex:1 0 0; } :is(:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div) .title{ font-size:13px; font-weight:590; } :is(:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div) .description{ font-size:13px; } :is(.dialog .mainContainer) .toggler{ display:flex; align-items:center; gap:8px; align-self:stretch; } :is(:is(.dialog .mainContainer) .toggler) > .togglerLabel{ -webkit-user-select:none; -moz-user-select:none; user-select:none; } .textLayer{ position:absolute; text-align:initial; inset:0; overflow:clip; opacity:1; line-height:1; -webkit-text-size-adjust:none; -moz-text-size-adjust:none; text-size-adjust:none; forced-color-adjust:none; transform-origin:0 0; caret-color:CanvasText; z-index:0; } .textLayer.highlighting{ touch-action:none; } .textLayer :is(span,br){ color:transparent; position:absolute; white-space:pre; cursor:text; transform-origin:0% 0%; } .textLayer > :not(.markedContent),.textLayer .markedContent span:not(.markedContent){ z-index:1; } .textLayer span.markedContent{ top:0; height:0; } .textLayer span[role="img"]{ -webkit-user-select:none; -moz-user-select:none; user-select:none; cursor:default; } .textLayer .highlight{ --highlight-bg-color:rgb(180 0 170 / 0.25); --highlight-selected-bg-color:rgb(0 100 0 / 0.25); --highlight-backdrop-filter:none; --highlight-selected-backdrop-filter:none; } @media screen and (forced-colors: active){ .textLayer .highlight{ --highlight-bg-color:transparent; --highlight-selected-bg-color:transparent; --highlight-backdrop-filter:var(--hcm-highlight-filter); --highlight-selected-backdrop-filter:var( --hcm-highlight-selected-filter ); } } .textLayer .highlight{ margin:-1px; padding:1px; background-color:var(--highlight-bg-color); -webkit-backdrop-filter:var(--highlight-backdrop-filter); backdrop-filter:var(--highlight-backdrop-filter); border-radius:4px; } .appended:is(.textLayer .highlight){ position:initial; } .begin:is(.textLayer .highlight){ border-radius:4px 0 0 4px; } .end:is(.textLayer .highlight){ border-radius:0 4px 4px 0; } .middle:is(.textLayer .highlight){ border-radius:0; } .selected:is(.textLayer .highlight){ background-color:var(--highlight-selected-bg-color); -webkit-backdrop-filter:var(--highlight-selected-backdrop-filter); backdrop-filter:var(--highlight-selected-backdrop-filter); } .textLayer ::-moz-selection{ background:rgba(0 0 255 / 0.25); background:color-mix(in srgb, AccentColor, transparent 75%); } .textLayer ::selection{ background:rgba(0 0 255 / 0.25); background:color-mix(in srgb, AccentColor, transparent 75%); } .textLayer br::-moz-selection{ background:transparent; } .textLayer br::selection{ background:transparent; } .textLayer .endOfContent{ display:block; position:absolute; inset:100% 0 0; z-index:0; cursor:default; -webkit-user-select:none; -moz-user-select:none; user-select:none; } .textLayer.selecting .endOfContent{ top:0; } .annotationLayer{ --csstools-color-scheme--light:initial; color-scheme:only light; --annotation-unfocused-field-background:url("data:image/svg+xml;charset=UTF-8,"); --input-focus-border-color:Highlight; --input-focus-outline:1px solid Canvas; --input-unfocused-border-color:transparent; --input-disabled-border-color:transparent; --input-hover-border-color:black; --link-outline:none; } @media screen and (forced-colors: active){ .annotationLayer{ --input-focus-border-color:CanvasText; --input-unfocused-border-color:ActiveText; --input-disabled-border-color:GrayText; --input-hover-border-color:Highlight; --link-outline:1.5px solid LinkText; } .annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{ outline:1.5px solid selectedItem; } .annotationLayer .linkAnnotation{ outline:var(--link-outline); } :is(.annotationLayer .linkAnnotation):hover{ -webkit-backdrop-filter:var(--hcm-highlight-filter); backdrop-filter:var(--hcm-highlight-filter); } :is(.annotationLayer .linkAnnotation) > a:hover{ opacity:0 !important; background:none !important; box-shadow:none; } .annotationLayer .popupAnnotation .popup{ outline:calc(1.5px * var(--total-scale-factor)) solid CanvasText !important; background-color:ButtonFace !important; color:ButtonText !important; } .annotationLayer .highlightArea:hover::after{ position:absolute; top:0; left:0; width:100%; height:100%; -webkit-backdrop-filter:var(--hcm-highlight-filter); backdrop-filter:var(--hcm-highlight-filter); content:""; pointer-events:none; } .annotationLayer .popupAnnotation.focused .popup{ outline:calc(3px * var(--total-scale-factor)) solid Highlight !important; } } .annotationLayer{ position:absolute; top:0; left:0; pointer-events:none; transform-origin:0 0; } .annotationLayer[data-main-rotation="90"] .norotate{ transform:rotate(270deg) translateX(-100%); } .annotationLayer[data-main-rotation="180"] .norotate{ transform:rotate(180deg) translate(-100%, -100%); } .annotationLayer[data-main-rotation="270"] .norotate{ transform:rotate(90deg) translateY(-100%); } .annotationLayer.disabled section,.annotationLayer.disabled .popup{ pointer-events:none; } .annotationLayer .annotationContent{ position:absolute; width:100%; height:100%; pointer-events:none; } .freetext:is(.annotationLayer .annotationContent){ background:transparent; border:none; inset:0; overflow:visible; white-space:nowrap; font:10px sans-serif; line-height:1.35; } .annotationLayer section{ position:absolute; text-align:initial; pointer-events:auto; box-sizing:border-box; transform-origin:0 0; -webkit-user-select:none; -moz-user-select:none; user-select:none; } :is(.annotationLayer section):has(div.annotationContent) canvas.annotationContent{ display:none; } .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,"); --xfa-focus-outline:auto; } @media screen and (forced-colors: active){ :root{ --xfa-focus-outline:2px solid CanvasText; } .xfaLayer *:required{ outline:1.5px solid selectedItem; } } .xfaLayer{ --csstools-color-scheme--light:initial; color-scheme:only light; background-color:transparent; } .xfaLayer .highlight{ margin:-1px; padding:1px; background-color:rgb(239 203 237); border-radius:4px; } .xfaLayer .highlight.appended{ position:initial; } .xfaLayer .highlight.begin{ border-radius:4px 0 0 4px; } .xfaLayer .highlight.end{ border-radius:0 4px 4px 0; } .xfaLayer .highlight.middle{ border-radius:0; } .xfaLayer .highlight.selected{ background-color:rgb(203 223 203); } .xfaPage{ overflow:hidden; position:relative; } .xfaContentarea{ position:absolute; } .xfaPrintOnly{ display:none; } .xfaLayer{ position:absolute; text-align:initial; top:0; left:0; transform-origin:0 0; line-height:1.2; } .xfaLayer *{ color:inherit; font:inherit; font-style:inherit; font-weight:inherit; font-kerning:inherit; letter-spacing:-0.01px; text-align:inherit; text-decoration:inherit; box-sizing:border-box; background-color:transparent; padding:0; margin:0; pointer-events:auto; line-height:inherit; } .xfaLayer *:required{ outline:1.5px solid red; } .xfaLayer div, .xfaLayer svg, .xfaLayer svg *{ pointer-events:none; } .xfaLayer a{ color:blue; } .xfaRich li{ margin-left:3em; } .xfaFont{ color:black; font-weight:normal; font-kerning:none; font-size:10px; font-style:normal; letter-spacing:0; text-decoration:none; vertical-align:0; } .xfaCaption{ overflow:hidden; flex:0 0 auto; } .xfaCaptionForCheckButton{ overflow:hidden; flex:1 1 auto; } .xfaLabel{ height:100%; width:100%; } .xfaLeft{ display:flex; flex-direction:row; align-items:center; } .xfaRight{ display:flex; flex-direction:row-reverse; align-items:center; } :is(.xfaLeft, .xfaRight) > :is(.xfaCaption, .xfaCaptionForCheckButton){ max-height:100%; } .xfaTop{ display:flex; flex-direction:column; align-items:flex-start; } .xfaBottom{ display:flex; flex-direction:column-reverse; align-items:flex-start; } :is(.xfaTop, .xfaBottom) > :is(.xfaCaption, .xfaCaptionForCheckButton){ width:100%; } .xfaBorder{ background-color:transparent; position:absolute; pointer-events:none; } .xfaWrapped{ width:100%; height:100%; } :is(.xfaTextfield, .xfaSelect):focus{ background-image:none; background-color:transparent; outline:var(--xfa-focus-outline); outline-offset:-1px; } :is(.xfaCheckbox, .xfaRadio):focus{ outline:var(--xfa-focus-outline); } .xfaTextfield, .xfaSelect{ height:100%; width:100%; flex:1 1 auto; border:none; resize:none; background-image:var(--xfa-unfocused-field-background); } .xfaSelect{ padding-inline:2px; } :is(.xfaTop, .xfaBottom) > :is(.xfaTextfield, .xfaSelect){ flex:0 1 auto; } .xfaButton{ cursor:pointer; width:100%; height:100%; border:none; text-align:center; } .xfaLink{ width:100%; height:100%; position:absolute; top:0; left:0; } .xfaCheckbox, .xfaRadio{ width:100%; height:100%; flex:0 0 auto; border:none; } .xfaRich{ white-space:pre-wrap; width:100%; height:100%; } .xfaImage{ -o-object-position:left top; object-position:left top; -o-object-fit:contain; object-fit:contain; width:100%; height:100%; } .xfaLrTb, .xfaRlTb, .xfaTb{ display:flex; flex-direction:column; align-items:stretch; } .xfaLr{ display:flex; flex-direction:row; align-items:stretch; } .xfaRl{ display:flex; flex-direction:row-reverse; align-items:stretch; } .xfaTb > div{ justify-content:left; } .xfaPosition{ position:relative; } .xfaArea{ position:relative; } .xfaValignMiddle{ display:flex; align-items:center; } .xfaTable{ display:flex; flex-direction:column; align-items:stretch; } .xfaTable .xfaRow{ display:flex; flex-direction:row; align-items:stretch; } .xfaTable .xfaRlRow{ display:flex; flex-direction:row-reverse; align-items:stretch; flex:1; } .xfaTable .xfaRlRow > div{ flex:1; } :is(.xfaNonInteractive, .xfaDisabled, .xfaReadOnly) :is(input, textarea){ background:initial; } @media print{ .xfaTextfield, .xfaSelect{ background:transparent; } .xfaSelect{ -webkit-appearance:none; -moz-appearance:none; appearance:none; text-indent:1px; text-overflow:""; } } .canvasWrapper svg{ transform:none; } .moving:is(.canvasWrapper svg){ z-index:100000; } [data-main-rotation="90"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) mask,[data-main-rotation="90"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) use:not(.clip,.mask){ transform:matrix(0, 1, -1, 0, 1, 0); } [data-main-rotation="180"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) mask,[data-main-rotation="180"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) use:not(.clip,.mask){ transform:matrix(-1, 0, 0, -1, 1, 1); } [data-main-rotation="270"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) mask,[data-main-rotation="270"]:is(.highlight:is(.canvasWrapper svg),.highlightOutline:is(.canvasWrapper svg)) use:not(.clip,.mask){ transform:matrix(0, -1, 1, 0, 0, 1); } .draw:is(.canvasWrapper svg){ position:absolute; mix-blend-mode:normal; } .draw[data-draw-rotation="90"]:is(.canvasWrapper svg){ transform:rotate(90deg); } .draw[data-draw-rotation="180"]:is(.canvasWrapper svg){ transform:rotate(180deg); } .draw[data-draw-rotation="270"]:is(.canvasWrapper svg){ transform:rotate(270deg); } .highlight:is(.canvasWrapper svg){ --blend-mode:multiply; } @media screen and (forced-colors: active){ .highlight:is(.canvasWrapper svg){ --blend-mode:difference; } } .highlight:is(.canvasWrapper svg){ position:absolute; mix-blend-mode:var(--blend-mode); } .highlight:is(.canvasWrapper svg):not(.free){ fill-rule:evenodd; } .highlightOutline:is(.canvasWrapper svg){ position:absolute; mix-blend-mode:normal; fill-rule:evenodd; fill:none; } .highlightOutline.hovered:is(.canvasWrapper svg):not(.free):not(.selected){ stroke:var(--hover-outline-color); stroke-width:var(--outline-width); } .highlightOutline.selected:is(.canvasWrapper svg):not(.free) .mainOutline{ stroke:var(--outline-around-color); stroke-width:calc( var(--outline-width) + 2 * var(--outline-around-width) ); } .highlightOutline.selected:is(.canvasWrapper svg):not(.free) .secondaryOutline{ stroke:var(--outline-color); stroke-width:var(--outline-width); } .highlightOutline.free.hovered:is(.canvasWrapper svg):not(.selected){ stroke:var(--hover-outline-color); stroke-width:calc(2 * var(--outline-width)); } .highlightOutline.free.selected:is(.canvasWrapper svg) .mainOutline{ stroke:var(--outline-around-color); stroke-width:calc( 2 * (var(--outline-width) + var(--outline-around-width)) ); } .highlightOutline.free.selected:is(.canvasWrapper svg) .secondaryOutline{ stroke:var(--outline-color); stroke-width:calc(2 * var(--outline-width)); } .toggle-button{ --button-background-color:color-mix(in srgb, currentColor 7%, transparent); --button-background-color-hover:color-mix( in srgb, currentColor 14%, transparent ); --button-background-color-active:color-mix( in srgb, currentColor 21%, transparent ); --csstools-light-dark-toggle--35:var(--csstools-color-scheme--light) #0df; --color-accent-primary:var(--csstools-light-dark-toggle--35, #0060df); --csstools-light-dark-toggle--36:var(--csstools-color-scheme--light) #80ebff; --color-accent-primary-hover:var(--csstools-light-dark-toggle--36, #0250bb); --csstools-light-dark-toggle--37:var(--csstools-color-scheme--light) #aaf2ff; --color-accent-primary-active:var(--csstools-light-dark-toggle--37, #054096); --border-radius-circle:9999px; --border-width:1px; --size-item-small:16px; --size-item-large:32px; --csstools-light-dark-toggle--38:var(--csstools-color-scheme--light) #1c1b22; --color-canvas:var(--csstools-light-dark-toggle--38, white); --background-color-canvas:var(--color-canvas); --csstools-light-dark-toggle--39:var(--csstools-color-scheme--light) #f9f9fa; --border-color-interactive:var(--csstools-light-dark-toggle--39, #8f8f9d); --border-color-interactive-hover:var(--border-color-interactive); --border-color-interactive-active:var(--border-color-interactive); } @supports (color: light-dark(red, red)){ .toggle-button{ --color-accent-primary:light-dark(#0060df, #0df); --color-accent-primary-hover:light-dark(#0250bb, #80ebff); --color-accent-primary-active:light-dark(#054096, #aaf2ff); --color-canvas:light-dark(white, #1c1b22); --border-color-interactive:light-dark(#8f8f9d, #f9f9fa); } } @supports not (color: light-dark(tan, tan)){ .toggle-button *{ --csstools-light-dark-toggle--35:var(--csstools-color-scheme--light) #0df; --color-accent-primary:var(--csstools-light-dark-toggle--35, #0060df); --csstools-light-dark-toggle--36:var(--csstools-color-scheme--light) #80ebff; --color-accent-primary-hover:var(--csstools-light-dark-toggle--36, #0250bb); --csstools-light-dark-toggle--37:var(--csstools-color-scheme--light) #aaf2ff; --color-accent-primary-active:var(--csstools-light-dark-toggle--37, #054096); --csstools-light-dark-toggle--38:var(--csstools-color-scheme--light) #1c1b22; --color-canvas:var(--csstools-light-dark-toggle--38, white); --csstools-light-dark-toggle--39:var(--csstools-color-scheme--light) #f9f9fa; --border-color-interactive:var(--csstools-light-dark-toggle--39, #8f8f9d); } } @media (forced-colors: active){ .toggle-button{ --color-accent-primary:ButtonText; --color-accent-primary-hover:SelectedItem; --color-accent-primary-active:SelectedItem; --button-background-color:ButtonFace; --border-color-interactive:ButtonText; --border-color-interactive-hover:SelectedItem; --border-color-interactive-active:ButtonText; --color-canvas:ButtonText; --background-color-canvas:Canvas; } } .toggle-button{ --toggle-background-color:var(--button-background-color); --toggle-background-color-hover:var(--button-background-color-hover); --toggle-background-color-active:var(--button-background-color-active); --toggle-background-color-pressed:var(--color-accent-primary); --toggle-background-color-pressed-hover:var(--color-accent-primary-hover); --toggle-background-color-pressed-active:var(--color-accent-primary-active); --toggle-border-color:var(--border-color-interactive); --toggle-border-color-hover:var(--toggle-border-color); --toggle-border-color-active:var(--toggle-border-color); --toggle-border-radius:var(--border-radius-circle); --toggle-border-width:var(--border-width); --toggle-height:var(--size-item-small); --toggle-width:var(--size-item-large); --toggle-dot-background-color:var(--toggle-border-color); --toggle-dot-background-color-hover:var(--toggle-dot-background-color); --toggle-dot-background-color-active:var(--toggle-dot-background-color); --toggle-dot-background-color-on-pressed:var(--background-color-canvas); --toggle-dot-margin:1px; --toggle-dot-height:calc( var(--toggle-height) - 2 * var(--toggle-dot-margin) - 2 * var(--toggle-border-width) ); --toggle-dot-width:var(--toggle-dot-height); --toggle-dot-transform-x:calc( var(--toggle-width) - 4 * var(--toggle-dot-margin) - var(--toggle-dot-width) ); --input-width:var(--toggle-width); -webkit-appearance:none; -moz-appearance:none; appearance:none; padding:0; border:var(--toggle-border-width) solid var(--toggle-border-color); height:var(--toggle-height); width:var(--toggle-width); border-radius:var(--toggle-border-radius); background-color:var(--toggle-background-color); box-sizing:border-box; } .toggle-button:focus-visible{ outline:var(--focus-outline); outline-offset:var(--focus-outline-offset); } .toggle-button:enabled:hover{ background-color:var(--toggle-background-color-hover); border-color:var(--toggle-border-color); } .toggle-button:enabled:hover:active{ background-color:var(--toggle-background-color-active); border-color:var(--toggle-border-color); } .toggle-button::before{ display:block; content:""; background-color:var(--toggle-dot-background-color); height:var(--toggle-dot-height); width:var(--toggle-dot-width); margin:var(--toggle-dot-margin); border-radius:var(--toggle-border-radius); translate:0; } .toggle-button[aria-pressed="true"]{ background-color:var(--toggle-background-color-pressed); border-color:transparent; } .toggle-button[aria-pressed="true"]:enabled:hover{ background-color:var(--toggle-background-color-pressed-hover); border-color:transparent; } .toggle-button[aria-pressed="true"]:enabled:hover:active{ background-color:var(--toggle-background-color-pressed-active); border-color:transparent; } .toggle-button[aria-pressed="true"]::before{ translate:var(--toggle-dot-transform-x); background-color:var(--toggle-dot-background-color-on-pressed); } .toggle-button[aria-pressed="true"]:enabled:hover::before,.toggle-button[aria-pressed="true"]:enabled:hover:active::before{ background-color:var(--toggle-dot-background-color-on-pressed); } .toggle-button[aria-pressed="true"]:-moz-locale-dir(rtl)::before,[dir="rtl"] .toggle-button[aria-pressed="true"]::before{ translate:calc(-1 * var(--toggle-dot-transform-x)); } @media (prefers-reduced-motion: no-preference){ .toggle-button::before{ transition:translate 100ms; } } @media (prefers-contrast){ .toggle-button:enabled:hover{ border-color:var(--toggle-border-color-hover); } .toggle-button:enabled:hover:active{ border-color:var(--toggle-border-color-active); } .toggle-button[aria-pressed="true"]:enabled{ border-color:var(--toggle-border-color); position:relative; } .toggle-button[aria-pressed="true"]:enabled:hover{ border-color:var(--toggle-border-color-hover); } .toggle-button[aria-pressed="true"]:enabled:hover:active{ background-color:var(--toggle-dot-background-color-active); border-color:var(--toggle-dot-background-color-hover); } .toggle-button:enabled:hover::before, .toggle-button:enabled:hover:active::before{ background-color:var(--toggle-dot-background-color-hover); } } @media (forced-colors){ .toggle-button{ --toggle-dot-background-color:var(--color-accent-primary); --toggle-dot-background-color-hover:var(--color-accent-primary-hover); --toggle-dot-background-color-active:var(--color-accent-primary-active); --toggle-dot-background-color-on-pressed:var(--button-background-color); --toggle-border-color-hover:var(--border-color-interactive-hover); --toggle-border-color-active:var(--border-color-interactive-active); } .toggle-button[aria-pressed="true"]:enabled::after{ border:1px solid var(--button-background-color); content:""; position:absolute; height:var(--toggle-height); width:var(--toggle-width); display:block; border-radius:var(--toggle-border-radius); inset:-2px; } .toggle-button[aria-pressed="true"]:enabled:hover:active::after{ border-color:var(--toggle-border-color-active); } } :root{ --clear-signature-button-icon:url(images/editor-toolbar-delete.svg); --csstools-light-dark-toggle--40:var(--csstools-color-scheme--light) #2b2a33; --signature-bg:var(--csstools-light-dark-toggle--40, #f9f9fb); --csstools-light-dark-toggle--41:var(--csstools-color-scheme--light) var(--signature-bg); --signature-hover-bg:var(--csstools-light-dark-toggle--41, #f0f0f4); --button-signature-bg:transparent; --button-signature-color:var(--main-color); --csstools-light-dark-toggle--42:var(--csstools-color-scheme--light) #5b5b66; --button-signature-active-bg:var(--csstools-light-dark-toggle--42, #cfcfd8); --button-signature-active-border:none; --button-signature-active-color:var(--button-signature-color); --button-signature-border:none; --csstools-light-dark-toggle--43:var(--csstools-color-scheme--light) #52525e; --button-signature-hover-bg:var(--csstools-light-dark-toggle--43, #e0e0e6); --button-signature-hover-color:var(--button-signature-color); } @supports (color: light-dark(red, red)){ :root{ --signature-bg:light-dark(#f9f9fb, #2b2a33); --signature-hover-bg:light-dark(#f0f0f4, var(--signature-bg)); --button-signature-active-bg:light-dark(#cfcfd8, #5b5b66); --button-signature-hover-bg:light-dark(#e0e0e6, #52525e); } } @supports not (color: light-dark(tan, tan)){ :root *{ --csstools-light-dark-toggle--40:var(--csstools-color-scheme--light) #2b2a33; --signature-bg:var(--csstools-light-dark-toggle--40, #f9f9fb); --csstools-light-dark-toggle--41:var(--csstools-color-scheme--light) var(--signature-bg); --signature-hover-bg:var(--csstools-light-dark-toggle--41, #f0f0f4); --csstools-light-dark-toggle--42:var(--csstools-color-scheme--light) #5b5b66; --button-signature-active-bg:var(--csstools-light-dark-toggle--42, #cfcfd8); --csstools-light-dark-toggle--43:var(--csstools-color-scheme--light) #52525e; --button-signature-hover-bg:var(--csstools-light-dark-toggle--43, #e0e0e6); } } @media screen and (forced-colors: active){ :root{ --signature-bg:HighlightText; --signature-hover-bg:var(--signature-bg); --button-signature-bg:HighlightText; --button-signature-color:ButtonText; --button-signature-active-bg:ButtonText; --button-signature-active-color:HighlightText; --button-signature-border:1px solid ButtonText; --button-signature-hover-bg:Highlight; --button-signature-hover-color:HighlightText; } } .signatureDialog{ --primary-color:var(--text-primary-color); --border-color:#8f8f9d; --open-link-fg:var(--link-fg-color); --open-link-hover-fg:var(--link-hover-fg-color); } @media screen and (forced-colors: active){ .signatureDialog{ --primary-color:ButtonText; --border-color:ButtonText; --open-link-fg:ButtonText; --open-link-hover-fg:ButtonText; } } .signatureDialog{ width:570px; max-width:100%; min-width:300px; padding:16px 0; } .signatureDialog .mainContainer{ width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:12px; } :is(.signatureDialog .mainContainer) span:not([role="sectionhead"]){ font-size:13px; font-style:normal; font-weight:400; line-height:normal; } :is(.signatureDialog .mainContainer) .title{ margin-inline-start:16px; } .signatureDialog .inputWithClearButton{ --button-dimension:24px; --clear-button-icon:url(images/messageBar_closingButton.svg); width:100%; position:relative; display:flex; align-items:center; justify-content:center; } :is(.signatureDialog .inputWithClearButton) > input{ width:100%; height:32px; padding-inline:8px calc(4px + var(--button-dimension)); box-sizing:border-box; border-radius:4px; border:1px solid var(--border-color); } :is(.signatureDialog .inputWithClearButton) .clearInputButton{ position:absolute; inset-block-start:4px; inset-inline-end:4px; display:inline-block; width:var(--button-dimension); height:var(--button-dimension); background-color:var(--input-text-fg-color); -webkit-mask-size:cover; mask-size:cover; -webkit-mask-image:var(--clear-button-icon); mask-image:var(--clear-button-icon); padding:0; border:0; } #addSignatureDialog{ --secondary-color:var(--text-secondary-color); --bg-hover:#e0e0e6; --tab-top-line-active-color:#0060df; --tab-top-line-active-hover-color:var(--tab-text-hover-color); --tab-top-line-hover-color:#8f8f9d; --tab-top-line-inactive-color:#cfcfd8; --tab-bottom-line-active-color:var(--tab-top-line-inactive-color); --tab-bottom-line-hover-color:var(--tab-top-line-inactive-color); --tab-bottom-line-inactive-color:var(--tab-top-line-inactive-color); --tab-bg:var(--dialog-bg-color); --tab-bg-active-color:var(--tab-bg); --tab-bg-active-hover-color:var(--bg-hover); --tab-bg-hover:var(--bg-hover); --tab-panel-border:none; --tab-panel-border-radius:4px; --tab-text-color:var(--primary-color); --tab-text-active-color:var(--tab-top-line-active-color); --tab-text-active-hover-color:var(--tab-text-hover-color); --tab-text-hover-color:var(--tab-text-color); --signature-placeholder-color:var(--secondary-color); --signature-draw-placeholder-color:var(--primary-color); --signature-color:var(--primary-color); --clear-signature-button-border-width:0; --clear-signature-button-border-style:solid; --clear-signature-button-border-color:transparent; --clear-signature-button-border-disabled-color:transparent; --clear-signature-button-color:var(--primary-color); --clear-signature-button-hover-color:var(--clear-signature-button-color); --clear-signature-button-active-color:var(--clear-signature-button-color); --clear-signature-button-disabled-color:var(--clear-signature-button-color); --clear-signature-button-focus-color:var(--clear-signature-button-color); --clear-signature-button-bg:var(--dialog-bg-color); --clear-signature-button-bg-hover:var(--bg-hover); --clear-signature-button-bg-active:#cfcfd8; --clear-signature-button-bg-focus:#f0f0f4; --clear-signature-button-bg-disabled:color-mix( in srgb, #f0f0f4, transparent 40% ); --save-warning-color:var(--secondary-color); --thickness-bg:var(--dialog-bg-color); --thickness-label-color:var(--primary-color); --thickness-slider-color:var(--primary-color); --thickness-border:none; --draw-cursor:url(images/cursor-editorInk.svg) 0 16, pointer; } @media (prefers-color-scheme: dark){ #addSignatureDialog{ --dialog-bg-color:#42414d; --bg-hover:#52525e; --primary-color:#fbfbfe; --secondary-color:#cfcfd8; --tab-top-line-active-color:#0df; --tab-top-line-inactive-color:#8f8f9d; --clear-signature-button-bg-active:#5b5b66; --clear-signature-button-bg-focus:#2b2a33; --clear-signature-button-bg-disabled:color-mix( in srgb, #2b2a33, transparent 40% ); } } @media screen and (forced-colors: active){ #addSignatureDialog{ --secondary-color:ButtonText; --bg:HighlightText; --bg-hover:var(--bg); --tab-top-line-active-color:ButtonText; --tab-top-line-active-hover-color:HighlightText; --tab-top-line-hover-color:SelectedItem; --tab-top-line-inactive-color:ButtonText; --tab-bottom-line-active-color:var(--tab-top-line-active-color); --tab-bottom-line-hover-color:var(--tab-top-line-hover-color); --tab-bg:var(--bg); --tab-bg-active-color:SelectedItem; --tab-bg-active-hover-color:SelectedItem; --tab-panel-border:1px solid ButtonText; --tab-panel-border-radius:8px; --tab-text-color:ButtonText; --tab-text-active-color:HighlightText; --tab-text-active-hover-color:HighlightText; --tab-text-hover-color:SelectedItem; --signature-color:ButtonText; --clear-signature-button-border-width:1px; --clear-signature-button-border-style:solid; --clear-signature-button-border-color:ButtonText; --clear-signature-button-border-disabled-color:GrayText; --clear-signature-button-color:ButtonText; --clear-signature-button-hover-color:HighlightText; --clear-signature-button-active-color:SelectedItem; --clear-signature-button-focus-color:CanvasText; --clear-signature-button-disabled-color:GrayText; --clear-signature-button-bg:var(--bg); --clear-signature-button-bg-hover:SelectedItem; --clear-signature-button-bg-active:var(--bg); --clear-signature-button-bg-focus:var(--bg); --clear-signature-button-bg-disabled:var(--bg); --thickness-bg:Canvas; --thickness-label-color:CanvasText; --thickness-slider-color:ButtonText; --thickness-border:1px solid var(--border-color); } } #addSignatureDialog #addSignatureDialogLabel{ overflow:hidden; position:absolute; inset:0; width:0; height:0; } #addSignatureDialog.waiting::after{ content:""; cursor:wait; position:absolute; inset:0; width:100%; height:100%; } :is(#addSignatureDialog .mainContainer) [role="tablist"]{ width:100%; display:flex; align-items:flex-start; gap:0; } :is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]{ flex:1 0 0; align-self:stretch; background-color:var(--tab-bg); padding-inline:0; cursor:default; border-inline:0; border-block-width:1px; border-block-style:solid; border-block-start-color:var(--tab-top-line-inactive-color); border-block-end-color:var(--tab-bottom-line-inactive-color); border-radius:0; font:menu; font-size:13px; font-style:normal; line-height:normal; font-weight:400; color:var(--tab-text-color); } :is(:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]):hover{ border-block-start-width:2px; border-block-start-color:var(--tab-top-line-hover-color); border-block-end-color:var(--tab-bottom-line-hover-color); background-color:var(--tab-bg-hover); color:var(--tab-text-hover-color); } :is(:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]):focus-visible{ outline:2px solid var(--tab-top-line-active-color); outline-offset:-2px; } [aria-selected="true"]:is(:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]){ border-block-start-width:2px; border-block-start-color:var(--tab-top-line-active-color); border-block-end-color:var(--tab-bottom-line-active-color); background-color:var(--tab-bg-active-color); font-weight:590; color:var(--tab-text-active-color); } [aria-selected="true"]:is(:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]):hover{ border-block-start-color:var(--tab-top-line-active-hover-color); background-color:var(--tab-bg-active-hover-color); color:var(--tab-text-active-hover-color); } :is(#addSignatureDialog .mainContainer) #addSignatureActionContainer{ width:100%; height:auto; display:flex; flex-direction:column; align-items:flex-end; align-self:stretch; gap:12px; padding-inline:16px; box-sizing:border-box; } :is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]{ position:relative; width:100%; height:220px; background-color:var(--signature-bg); border:var(--tab-panel-border); border-radius:var(--tab-panel-border-radius); } :is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > svg{ position:absolute; inset:0; width:100%; height:100%; background-color:transparent; } #addSignatureTypeContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]){ display:none; } #addSignatureTypeContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureTypeInput{ position:absolute; inset:0; width:100%; height:100%; border:0; padding:0; text-align:center; color:var(--signature-color); background-color:transparent; border-radius:var(--tab-panel-border-radius); font-family:"Brush script", "Apple Chancery", "Segoe script", "Freestyle Script", "Palace Script MT", "Brush Script MT", TK, cursive, serif; font-size:44px; font-style:italic; font-weight:400; } :is(#addSignatureTypeContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureTypeInput)::-moz-placeholder{ color:var(--signature-placeholder-color); text-align:center; font:menu; font-style:normal; font-weight:274; font-size:44px; line-height:normal; } :is(#addSignatureTypeContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureTypeInput)::placeholder{ color:var(--signature-placeholder-color); text-align:center; font:menu; font-style:normal; font-weight:274; font-size:44px; line-height:normal; } #addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]){ display:none; } #addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > span{ position:absolute; top:0; left:0; width:100%; height:100%; display:grid; align-items:center; justify-content:center; background-color:transparent; color:var(--signature-placeholder-color); -webkit-user-select:none; -moz-user-select:none; user-select:none; } #addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > svg{ stroke:var(--signature-color); fill:none; stroke-opacity:1; stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:10; } :is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > svg):hover{ cursor:var(--draw-cursor); } #addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness{ position:absolute; width:100%; inset-block-end:0; display:grid; align-items:center; justify-content:center; pointer-events:none; } :is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > span{ color:var(--signature-draw-placeholder-color); } :is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div{ width:auto; height:auto; display:flex; align-items:center; justify-content:center; gap:8px; padding:6px 8px 7px; margin:0; background-color:var(--thickness-bg); border-radius:4px 4px 0 0; border-inline:var(--thickness-border); border-top:var(--thickness-border); pointer-events:auto; position:relative; top:1px; } :is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > label{ color:var(--thickness-label-color); } :is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input{ width:100px; height:14px; background-color:transparent; } :is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-webkit-slider-runnable-track,:is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-moz-range-track,:is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-moz-range-progress{ background-color:var(--thickness-slider-color); } :is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-webkit-slider-thumb,:is(:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input)::-moz-range-thumb{ background-color:var(--thickness-bg); } :is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input{ border-radius:4.5px; border:0; color:var(--signature-color); } #addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]){ display:none; } #addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > svg{ stroke:none; stroke-width:0; fill:var(--signature-color); fill-opacity:1; } #addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureImagePlaceholder{ position:absolute; top:0; left:0; width:100%; height:100%; background-color:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; } :is(#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureImagePlaceholder) span{ color:var(--signature-placeholder-color); } :is(#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureImagePlaceholder) a{ color:var(--open-link-fg); text-decoration:underline; cursor:pointer; } :is(:is(#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureImagePlaceholder) a):hover{ color:var(--open-link-hover-fg); } #addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureFilePicker{ visibility:hidden; position:relative; width:0; height:0; } [data-selected="type"]:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > #addSignatureTypeContainer,[data-selected="draw"]:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > #addSignatureDrawContainer,[data-selected="image"]:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > #addSignatureImageContainer{ display:block; } :is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls{ display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:12px; align-self:stretch; } :is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer{ display:flex; align-items:flex-end; gap:16px; align-self:stretch; } :is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #addSignatureDescriptionContainer{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; flex:1 0 0; } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #addSignatureDescriptionContainer):has(input:disabled) > label{ opacity:0.4; } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #addSignatureDescriptionContainer) > label{ width:auto; } :is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton{ display:flex; height:32px; padding:4px 8px; align-items:center; background-color:var(--clear-signature-button-bg); border-width:var(--clear-signature-button-border-width); border-style:var(--clear-signature-button-border-style); border-color:var(--clear-signature-button-border-color); border-radius:4px; } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton) > span{ display:flex; height:24px; align-items:center; gap:4px; flex-shrink:0; color:var(--clear-signature-button-color); } :is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton) > span)::after{ content:""; display:inline-block; width:16px; height:16px; -webkit-mask-image:var(--clear-signature-button-icon); mask-image:var(--clear-signature-button-icon); -webkit-mask-size:cover; mask-size:cover; background-color:var(--clear-signature-button-color); flex-shrink:0; } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):hover{ background-color:var(--clear-signature-button-bg-hover); } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):hover > span{ color:var(--clear-signature-button-hover-color); } :is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):hover > span)::after{ background-color:var(--clear-signature-button-hover-color); } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):active{ background-color:var(--clear-signature-button-bg-active); } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):active > span{ color:var(--clear-signature-button-active-color); } :is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):active > span)::after{ background-color:var(--clear-signature-button-active-color); } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):focus-visible{ background-color:var(--clear-signature-button-bg-focus); } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):focus-visible > span{ color:var(--clear-signature-button-focus-color); } :is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):focus-visible > span)::after{ background-color:var(--clear-signature-button-focus-color); } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):disabled{ background-color:var(--clear-signature-button-bg-disabled); border-color:var(--clear-signature-button-border-disabled-color); } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):disabled > span{ color:var(--clear-signature-button-disabled-color); } :is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):disabled > span)::after{ background-color:var( --clear-signature-button-disabled-color ); } :is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer{ display:grid; grid-template-columns:max-content auto; gap:4px; width:100%; } :is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer) > input{ margin:0; } :is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer) > input):disabled + label{ opacity:0.4; } :is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer) > label{ -webkit-user-select:none; -moz-user-select:none; user-select:none; } :is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer):not(.fullStorage) #addSignatureSaveWarning{ display:none; } .fullStorage:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer) #addSignatureSaveWarning{ display:block; opacity:1; color:var(--save-warning-color); font-size:11px; } #editSignatureDescriptionDialog .mainContainer{ padding-inline:16px; box-sizing:border-box; } :is(#editSignatureDescriptionDialog .mainContainer) .title{ margin-inline-start:0; } :is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView{ width:auto; display:flex; justify-content:flex-end; align-items:flex-start; gap:12px; align-self:stretch; } :is(:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView) #editSignatureDescriptionContainer{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; flex:1 1 auto; } :is(:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView) > svg{ width:210px; height:180px; padding:8px; background-color:var(--signature-bg); } :is(:is(:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView) > svg) > path{ stroke:var(--button-signature-color); stroke-width:1px; stroke-linecap:round; stroke-linejoin:round; stroke-miterlimit:10; vector-effect:non-scaling-stroke; fill:none; } .contours:is(:is(:is(:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView) > svg) > path){ fill:var(--button-signature-color); stroke-width:0.5px; } #editorSignatureParamsToolbar{ padding:8px; } #editorSignatureParamsToolbar #addSignatureDoorHanger{ gap:8px; padding:2px; } :is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer{ height:32px; display:flex; justify-content:space-between; align-items:center; align-self:stretch; gap:8px; } :is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button{ border:var(--button-signature-border); border-radius:4px; background-color:var(--button-signature-bg); color:var(--button-signature-color); } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):hover{ background-color:var(--button-signature-hover-bg); } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):active{ border:var(--button-signature-active-border); background-color:var(--button-signature-active-bg); color:var(--button-signature-active-color); } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):active::before{ background-color:var(--button-signature-active-color); } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):focus-visible{ outline:var(--focus-ring-outline); } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):focus-visible::before{ background-color:var(--button-signature-color); } :is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .deleteButton)::before{ -webkit-mask-image:var(--clear-signature-button-icon); mask-image:var(--clear-signature-button-icon); } :is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton{ width: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) !important; } .editDescription.altText::before{ width:16px !important; height:16px !important; } :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 !important; } @media (min-resolution: 1.1dppx){ :root{ --editorFreeText-editing-cursor:url(images/cursor-editorFreeText.svg) 0 16, text; } } @media screen and (forced-colors: active){ :root{ --outline-color:CanvasText; --outline-around-color:ButtonFace; --resizer-bg-color:ButtonText; --hover-outline-color:Highlight; --hover-outline-around-color:SelectedItemText; } } [data-editor-rotation="90"]{ transform:rotate(90deg); } [data-editor-rotation="180"]{ transform:rotate(180deg); } [data-editor-rotation="270"]{ transform:rotate(270deg); } .annotationEditorLayer{ background:transparent; position:absolute; inset:0; font-size:calc(100px * var(--total-scale-factor)); transform-origin:0 0; cursor:auto; } .annotationEditorLayer .selectedEditor{ z-index:100000 !important; } .annotationEditorLayer.drawing *{ pointer-events:none !important; } .annotationEditorLayer.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--44:var(--csstools-color-scheme--light) #2b2a33; --editor-toolbar-bg-color:var(--csstools-light-dark-toggle--44, #f0f0f4); --editor-toolbar-highlight-image:url(images/toolbarButton-editorHighlight.svg); --csstools-light-dark-toggle--45:var(--csstools-color-scheme--light) #fbfbfe; --editor-toolbar-fg-color:var(--csstools-light-dark-toggle--45, #2e2e56); --editor-toolbar-border-color:#8f8f9d; --editor-toolbar-hover-border-color:var(--editor-toolbar-border-color); --csstools-light-dark-toggle--46:var(--csstools-color-scheme--light) #52525e; --editor-toolbar-hover-bg-color:var(--csstools-light-dark-toggle--46, #e0e0e6); --editor-toolbar-hover-fg-color:var(--editor-toolbar-fg-color); --editor-toolbar-hover-outline:none; --csstools-light-dark-toggle--47:var(--csstools-color-scheme--light) #0df; --editor-toolbar-focus-outline-color:var(--csstools-light-dark-toggle--47, #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--48:var(--csstools-color-scheme--light) #54ffbd; --alt-text-done-color:var(--csstools-light-dark-toggle--48, #2ac3a2); --csstools-light-dark-toggle--49:var(--csstools-color-scheme--light) #80ebff; --alt-text-warning-color:var(--csstools-light-dark-toggle--49, #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--44:var(--csstools-color-scheme--light) #2b2a33; --editor-toolbar-bg-color:var(--csstools-light-dark-toggle--44, #f0f0f4); --csstools-light-dark-toggle--45:var(--csstools-color-scheme--light) #fbfbfe; --editor-toolbar-fg-color:var(--csstools-light-dark-toggle--45, #2e2e56); --csstools-light-dark-toggle--46:var(--csstools-color-scheme--light) #52525e; --editor-toolbar-hover-bg-color:var(--csstools-light-dark-toggle--46, #e0e0e6); --csstools-light-dark-toggle--47:var(--csstools-color-scheme--light) #0df; --editor-toolbar-focus-outline-color:var(--csstools-light-dark-toggle--47, #0060df); --csstools-light-dark-toggle--48:var(--csstools-color-scheme--light) #54ffbd; --alt-text-done-color:var(--csstools-light-dark-toggle--48, #2ac3a2); --csstools-light-dark-toggle--49:var(--csstools-color-scheme--light) #80ebff; --alt-text-warning-color:var(--csstools-light-dark-toggle--49, #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--50:var(--csstools-color-scheme--light) #1c1b22; --alt-text-tooltip-bg:var(--csstools-light-dark-toggle--50, #f0f0f4); --csstools-light-dark-toggle--51:var(--csstools-color-scheme--light) #fbfbfe; --alt-text-tooltip-fg:var(--csstools-light-dark-toggle--51, #15141a); --alt-text-tooltip-border:#8f8f9d; --csstools-light-dark-toggle--52:var(--csstools-color-scheme--light) #15141a; --alt-text-tooltip-shadow:0px 2px 6px 0px var(--csstools-light-dark-toggle--52, 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--50:var(--csstools-color-scheme--light) #1c1b22; --alt-text-tooltip-bg:var(--csstools-light-dark-toggle--50, #f0f0f4); --csstools-light-dark-toggle--51:var(--csstools-color-scheme--light) #fbfbfe; --alt-text-tooltip-fg:var(--csstools-light-dark-toggle--51, #15141a); --csstools-light-dark-toggle--52:var(--csstools-color-scheme--light) #15141a; --alt-text-tooltip-shadow:0px 2px 6px 0px var(--csstools-light-dark-toggle--52, 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--53:var(--csstools-color-scheme--light) #52525e; --no-alt-text-badge-border-color:var(--csstools-light-dark-toggle--53, #f0f0f4); --csstools-light-dark-toggle--54:var(--csstools-color-scheme--light) #fbfbfe; --no-alt-text-badge-bg-color:var(--csstools-light-dark-toggle--54, #cfcfd8); --csstools-light-dark-toggle--55:var(--csstools-color-scheme--light) #15141a; --no-alt-text-badge-fg-color:var(--csstools-light-dark-toggle--55, #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--53:var(--csstools-color-scheme--light) #52525e; --no-alt-text-badge-border-color:var(--csstools-light-dark-toggle--53, #f0f0f4); --csstools-light-dark-toggle--54:var(--csstools-color-scheme--light) #fbfbfe; --no-alt-text-badge-bg-color:var(--csstools-light-dark-toggle--54, #cfcfd8); --csstools-light-dark-toggle--55:var(--csstools-color-scheme--light) #15141a; --no-alt-text-badge-fg-color:var(--csstools-light-dark-toggle--55, #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--56:var(--csstools-color-scheme--light) #2b2a33; --preview-image-bg-color:var(--csstools-light-dark-toggle--56, #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--56:var(--csstools-color-scheme--light) #2b2a33; --preview-image-bg-color:var(--csstools-light-dark-toggle--56, #f0f0f4); } } @media screen and (forced-colors: active){ .dialog.newAltText{ --preview-image-bg-color:ButtonFace; --preview-image-border:1px solid ButtonText; } } .dialog.newAltText{ width:80%; max-width:570px; min-width:300px; padding:0; } .dialog.newAltText.noAi #newAltTextDisclaimer,.dialog.newAltText.noAi #newAltTextCreateAutomatically{ display:none !important; } .dialog.newAltText.aiInstalling #newAltTextCreateAutomatically{ display:none !important; } .dialog.newAltText.aiInstalling #newAltTextDownloadModel{ display:flex !important; } .dialog.newAltText.error #newAltTextNotNow{ display:none !important; } .dialog.newAltText.error #newAltTextCancel{ display:inline-block !important; } .dialog.newAltText:not(.error) #newAltTextError{ display:none !important; } .dialog.newAltText #newAltTextContainer{ display:flex; width:auto; padding:16px; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:12px; flex:0 1 auto; line-height:normal; } :is(.dialog.newAltText #newAltTextContainer) #mainContent{ display:flex; justify-content:flex-end; align-items:flex-start; gap:12px; align-self:stretch; flex:1 1 auto; } :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionAndSettings{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; flex:1 0 0; align-self:stretch; } :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; align-self:stretch; flex:1 1 auto; } :is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer{ width:100%; height:70px; position:relative; } :is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea{ width:100%; height:100%; padding:8px; } :is(:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea)::-moz-placeholder{ color:var(--text-secondary-color); } :is(:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea)::placeholder{ color:var(--text-secondary-color); } :is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) .altTextSpinner{ display:none; position:absolute; width:16px; height:16px; inset-inline-start:8px; inset-block-start:8px; -webkit-mask-size:cover; mask-size:cover; background-color:var(--text-secondary-color); pointer-events:none; } .loading:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea::-moz-placeholder{ color:transparent; } .loading:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea::placeholder{ color:transparent; } .loading:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) .altTextSpinner{ display:inline-block; -webkit-mask-image:var(--new-alt-text-spinner-icon); mask-image:var(--new-alt-text-spinner-icon); } :is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescription{ font-size:11px; } :is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDisclaimer{ display:flex; flex-direction:row; align-items:flex-start; gap:4px; font-size:11px; } :is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDisclaimer)::before{ content:""; display:inline-block; width:17px; height:16px; -webkit-mask-image:var(--new-alt-text-ai-disclaimer-icon); mask-image:var(--new-alt-text-ai-disclaimer-icon); -webkit-mask-size:cover; mask-size:cover; background-color:var(--text-secondary-color); flex:1 0 auto; } :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextDownloadModel{ display:flex; align-items:center; gap:4px; align-self:stretch; } :is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextDownloadModel)::before{ content:""; display:inline-block; width:16px; height:16px; -webkit-mask-image:var(--new-alt-text-spinner-icon); mask-image:var(--new-alt-text-spinner-icon); -webkit-mask-size:cover; mask-size:cover; background-color:var(--text-secondary-color); } :is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextImagePreview{ width:180px; aspect-ratio:1; display:flex; justify-content:center; align-items:center; flex:0 0 auto; background-color:var(--preview-image-bg-color); border:var(--preview-image-border); } :is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextImagePreview) > canvas{ max-width:100%; max-height:100%; } .colorPicker{ --csstools-light-dark-toggle--57:var(--csstools-color-scheme--light) #80ebff; --hover-outline-color:var(--csstools-light-dark-toggle--57, #0250bb); --csstools-light-dark-toggle--58:var(--csstools-color-scheme--light) #aaf2ff; --selected-outline-color:var(--csstools-light-dark-toggle--58, #0060df); --csstools-light-dark-toggle--59:var(--csstools-color-scheme--light) #52525e; --swatch-border-color:var(--csstools-light-dark-toggle--59, #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--57:var(--csstools-color-scheme--light) #80ebff; --hover-outline-color:var(--csstools-light-dark-toggle--57, #0250bb); --csstools-light-dark-toggle--58:var(--csstools-color-scheme--light) #aaf2ff; --selected-outline-color:var(--csstools-light-dark-toggle--58, #0060df); --csstools-light-dark-toggle--59:var(--csstools-color-scheme--light) #52525e; --swatch-border-color:var(--csstools-light-dark-toggle--59, #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 !important; } :is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker{ position:relative; width:auto; display:flex; justify-content:center; align-items:center; gap:4px; padding:4px; } :is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker)::after{ content:""; -webkit-mask-image:var(--editor-toolbar-colorpicker-arrow-image); mask-image:var(--editor-toolbar-colorpicker-arrow-image); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; display:inline-block; background-color:var(--editor-toolbar-fg-color); width:12px; height:12px; } :is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker):hover::after{ background-color:var(--editor-toolbar-hover-fg-color); } :is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker):has(.dropdown:not(.hidden)){ background-color:var(--editor-toolbar-hover-bg-color); } :is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker):has(.dropdown:not(.hidden))::after{ scale:-1; } :is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown{ position:absolute; display:flex; justify-content:center; align-items:center; flex-direction:column; gap:11px; padding-block:8px; border-radius:6px; background-color:var(--editor-toolbar-bg-color); border:1px solid var(--editor-toolbar-border-color); box-shadow:var(--editor-toolbar-shadow); inset-block-start:calc(100% + 4px); width:calc(100% + 2 * var(--editor-toolbar-padding)); } :is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button{ width:100%; height:auto; border:none; cursor:pointer; display:flex; justify-content:center; align-items:center; background:none; } :is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button):is(:active,:focus-visible){ outline:none; } :is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button) > .swatch{ outline-offset:2px; } [aria-selected="true"]:is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button) > .swatch{ outline:2px solid var(--selected-outline-color); } :is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button):is(:hover,:active,:focus-visible) > .swatch{ outline:2px solid var(--hover-outline-color); } .editorParamsToolbar:has(#highlightParamsToolbarContainer){ padding:unset; } #highlightParamsToolbarContainer{ gap:16px; padding-inline:10px; padding-block-end:12px; } #highlightParamsToolbarContainer .colorPicker{ display:flex; flex-direction:column; gap:8px; } :is(#highlightParamsToolbarContainer .colorPicker) .dropdown{ display:flex; justify-content:space-between; align-items:center; flex-direction:row; height:auto; } :is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button{ width:auto; height:auto; border:none; cursor:pointer; display:flex; justify-content:center; align-items:center; background:none; flex:0 0 auto; padding:0; } :is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button) .swatch{ width:24px; height:24px; } :is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button):is(:active,:focus-visible){ outline:none; } [aria-selected="true"]:is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button) > .swatch{ outline:2px solid var(--selected-outline-color); } :is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button):is(:hover,:active,:focus-visible) > .swatch{ outline:2px solid var(--hover-outline-color); } #highlightParamsToolbarContainer #editorHighlightThickness{ display:flex; flex-direction:column; align-items:center; gap:4px; align-self:stretch; } :is(#highlightParamsToolbarContainer #editorHighlightThickness) .editorParamsLabel{ height:auto; align-self:stretch; } :is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker{ display:flex; justify-content:space-between; align-items:center; align-self:stretch; --csstools-light-dark-toggle--60:var(--csstools-color-scheme--light) #80808e; --example-color:var(--csstools-light-dark-toggle--60, #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--60:var(--csstools-color-scheme--light) #80808e; --example-color:var(--csstools-light-dark-toggle--60, #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--61:var(--csstools-color-scheme--light) #8f8f9d; --divider-color:var(--csstools-light-dark-toggle--61, #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--61:var(--csstools-color-scheme--light) #8f8f9d; --divider-color:var(--csstools-light-dark-toggle--61, #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--62:var(--csstools-color-scheme--light) #0df; --focus-ring-color:var(--csstools-light-dark-toggle--62, #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--62:var(--csstools-color-scheme--light) #0df; --focus-ring-color:var(--csstools-light-dark-toggle--62, #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.singlePageView{ display:inline-block; } .pdfViewer.singlePageView .page{ margin:0; 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; }