diff --git a/packages/pdfjs-viewer/package.json b/packages/pdfjs-viewer/package.json index 44a14e7fcc2..fdfe77ca1f5 100644 --- a/packages/pdfjs-viewer/package.json +++ b/packages/pdfjs-viewer/package.json @@ -10,6 +10,6 @@ "@triliumnext/commons": "workspace:*" }, "devDependencies": { - "pdfjs-dist": "5.7.284" + "pdfjs-dist": "6.0.227" } } \ No newline at end of file diff --git a/packages/pdfjs-viewer/viewer/locale/ar/viewer.ftl b/packages/pdfjs-viewer/viewer/locale/ar/viewer.ftl index d83bbdb6d26..11046bbf097 100644 --- a/packages/pdfjs-viewer/viewer/locale/ar/viewer.ftl +++ b/packages/pdfjs-viewer/viewer/locale/ar/viewer.ftl @@ -760,6 +760,7 @@ pdfjs-views-manager-paste-button-after = # Badge used to promote a new feature in the UI, keep it as short as possible. # It's spelled uppercase for English, but it can be translated as usual. pdfjs-new-badge-content = جديد +pdfjs-views-manager-waiting-for-file = يرفع ملف… pdfjs-toggle-views-manager-button1 = .title = أدِر الصفحات diff --git a/packages/pdfjs-viewer/viewer/locale/da/viewer.ftl b/packages/pdfjs-viewer/viewer/locale/da/viewer.ftl index a05a3c9b818..1bf80a6b5d8 100644 --- a/packages/pdfjs-viewer/viewer/locale/da/viewer.ftl +++ b/packages/pdfjs-viewer/viewer/locale/da/viewer.ftl @@ -661,12 +661,58 @@ pdfjs-views-manager-view-selector-button-label = Visninger pdfjs-views-manager-pages-title = Sider pdfjs-views-manager-attachments-title = Vedhæftede filer pdfjs-views-manager-pages-option-label = Sider +pdfjs-views-manager-attachments-option-label = Vedhæftede filer +pdfjs-views-manager-layers-option-label = Lag +pdfjs-views-manager-add-file-button = + .title = Tilføj fil +pdfjs-views-manager-add-file-button-label = Tilføj fil +# Variables: +# $count (Number) - the number of selected pages. +pdfjs-views-manager-pages-status-action-label = + { $count -> + [one] { $count } valgt + *[other] { $count } valgt + } +pdfjs-views-manager-pages-status-none-action-label = Vælg sider +pdfjs-views-manager-pages-status-action-button-label = Håndter +pdfjs-views-manager-pages-status-copy-button-label = Kopier +pdfjs-views-manager-pages-status-cut-button-label = Klip +pdfjs-views-manager-pages-status-delete-button-label = Slet +# Variables: +# $count (Number) - the number of selected pages to be cut. +pdfjs-views-manager-status-undo-cut-label = + { $count -> + [one] 1 side klippet + *[other] { $count } sider klippet + } +# Variables: +# $count (Number) - the number of selected pages to be copied. +pdfjs-views-manager-pages-status-undo-copy-label = + { $count -> + [one] 1 side kopieret + *[other] { $count } sider kopieret + } +# Variables: +# $count (Number) - the number of selected pages to be deleted. +pdfjs-views-manager-pages-status-undo-delete-label = + { $count -> + [one] 1 side slettet + *[other] { $count } sider slettet + } +pdfjs-views-manager-status-undo-button-label = Fortryd +pdfjs-views-manager-status-done-button-label = Færdig +pdfjs-views-manager-status-close-button = + .title = Luk +pdfjs-views-manager-status-close-button-label = Luk +pdfjs-views-manager-paste-button-label = Indsæt pdfjs-views-manager-paste-button-before = .title = Indsæt før første side # Variables: # $page (Number) - the page number after which the paste button is. pdfjs-views-manager-paste-button-after = .title = Indsæt efter side { $page } +pdfjs-toggle-views-manager-button1 = + .title = Håndter sider ## Main menu for adding/removing signatures diff --git a/packages/pdfjs-viewer/viewer/locale/en-CA/viewer.ftl b/packages/pdfjs-viewer/viewer/locale/en-CA/viewer.ftl index 8c7cf7dea31..f79758583a5 100644 --- a/packages/pdfjs-viewer/viewer/locale/en-CA/viewer.ftl +++ b/packages/pdfjs-viewer/viewer/locale/en-CA/viewer.ftl @@ -728,6 +728,7 @@ pdfjs-views-manager-paste-button-after = # Badge used to promote a new feature in the UI, keep it as short as possible. # It's spelled uppercase for English, but it can be translated as usual. pdfjs-new-badge-content = NEW +pdfjs-views-manager-waiting-for-file = Uploading file… pdfjs-toggle-views-manager-button1 = .title = Manage pages diff --git a/packages/pdfjs-viewer/viewer/locale/eo/viewer.ftl b/packages/pdfjs-viewer/viewer/locale/eo/viewer.ftl index e1ffaa6dc9f..ced79c8218a 100644 --- a/packages/pdfjs-viewer/viewer/locale/eo/viewer.ftl +++ b/packages/pdfjs-viewer/viewer/locale/eo/viewer.ftl @@ -728,6 +728,7 @@ pdfjs-views-manager-paste-button-after = # Badge used to promote a new feature in the UI, keep it as short as possible. # It's spelled uppercase for English, but it can be translated as usual. pdfjs-new-badge-content = NOVA +pdfjs-views-manager-waiting-for-file = Dosiero alŝutata… pdfjs-toggle-views-manager-button1 = .title = Administri paĝojn diff --git a/packages/pdfjs-viewer/viewer/locale/es-ES/viewer.ftl b/packages/pdfjs-viewer/viewer/locale/es-ES/viewer.ftl index a3e260ad0fc..5bb20121e82 100644 --- a/packages/pdfjs-viewer/viewer/locale/es-ES/viewer.ftl +++ b/packages/pdfjs-viewer/viewer/locale/es-ES/viewer.ftl @@ -661,6 +661,8 @@ pdfjs-views-manager-view-selector-button = .title = Vistas pdfjs-views-manager-view-selector-button-label = Vistas pdfjs-views-manager-pages-title = Páginas +pdfjs-views-manager-outlines-title1 = Esquema del documento + .title = Esquema del documento (doble-clic para expandir/contraer todos los elementos) pdfjs-views-manager-attachments-title = Adjuntos pdfjs-views-manager-layers-title1 = Capas .title = Capas (doble clic para restablecer todas las capas a su estado predeterminado) @@ -726,6 +728,7 @@ pdfjs-views-manager-paste-button-after = # Badge used to promote a new feature in the UI, keep it as short as possible. # It's spelled uppercase for English, but it can be translated as usual. pdfjs-new-badge-content = NUEVO +pdfjs-views-manager-waiting-for-file = Subiendo el archivo… pdfjs-toggle-views-manager-button1 = .title = Administrar páginas diff --git a/packages/pdfjs-viewer/viewer/locale/fi/viewer.ftl b/packages/pdfjs-viewer/viewer/locale/fi/viewer.ftl index a5a5d69bb82..8f7091ca7af 100644 --- a/packages/pdfjs-viewer/viewer/locale/fi/viewer.ftl +++ b/packages/pdfjs-viewer/viewer/locale/fi/viewer.ftl @@ -728,6 +728,7 @@ pdfjs-views-manager-paste-button-after = # Badge used to promote a new feature in the UI, keep it as short as possible. # It's spelled uppercase for English, but it can be translated as usual. pdfjs-new-badge-content = UUTTA +pdfjs-views-manager-waiting-for-file = Lähetetään tiedostoa… pdfjs-toggle-views-manager-button1 = .title = Hallitse sivuja diff --git a/packages/pdfjs-viewer/viewer/locale/hr/viewer.ftl b/packages/pdfjs-viewer/viewer/locale/hr/viewer.ftl index 68148ac4fd2..bd8fcf96248 100644 --- a/packages/pdfjs-viewer/viewer/locale/hr/viewer.ftl +++ b/packages/pdfjs-viewer/viewer/locale/hr/viewer.ftl @@ -686,6 +686,10 @@ pdfjs-views-manager-pages-status-action-button-label = Upravljaj pdfjs-views-manager-pages-status-copy-button-label = Kopiraj pdfjs-views-manager-pages-status-cut-button-label = Izreži pdfjs-views-manager-pages-status-delete-button-label = Izbriši +pdfjs-views-manager-status-warning-cut-label = Nije moguće izrezati. Osvježi stranicu i pokušaj ponovo. +pdfjs-views-manager-status-warning-copy-label = Nije moguće kopirati. Osvježi stranicu i pokušaj ponovo. +pdfjs-views-manager-status-warning-delete-label = Nije moguće izbrisati. Osvježi stranicu i pokušaj ponovo. +pdfjs-views-manager-status-warning-save-label = Nije moguće spremiti. Osvježi stranicu i pokušaj ponovo. pdfjs-views-manager-status-undo-button-label = Poništi pdfjs-views-manager-status-done-button-label = Gotovo pdfjs-views-manager-status-close-button = diff --git a/packages/pdfjs-viewer/viewer/locale/hy-AM/viewer.ftl b/packages/pdfjs-viewer/viewer/locale/hy-AM/viewer.ftl index 71aa8b30541..de98360cbbe 100644 --- a/packages/pdfjs-viewer/viewer/locale/hy-AM/viewer.ftl +++ b/packages/pdfjs-viewer/viewer/locale/hy-AM/viewer.ftl @@ -355,7 +355,7 @@ pdfjs-editor-stamp-add-image-button-label = Հավելել պատկեր # This refers to the thickness of the line used for free highlighting (not bound to text) pdfjs-editor-free-highlight-thickness-input = Հաստություն pdfjs-editor-free-highlight-thickness-title = - .title = Փոխել հաստությունը տեքստից բացի այլ տարրեր նշելիս + .title = Փոխել հաստությունը՝ տեքստից բացի այլ տարրեր գունանշելիս pdfjs-editor-add-signature-container = .aria-label = Ստորագրության կառավարման տարրեր և պահված ստորագրություններ pdfjs-editor-signature-add-signature-button = @@ -566,7 +566,7 @@ pdfjs-editor-add-signature-draw-thickness-range-label = Հաստություն # Variables: # $thickness (Number) - the thickness (in pixels) of the line used to draw a signature. pdfjs-editor-add-signature-draw-thickness-range = - .title = Նկաելու հաստությունը՝ { $thickness } + .title = Նկարելու հաստությունը՝ { $thickness } pdfjs-editor-add-signature-image-placeholder = Քաշեք ֆայլը այստեղ՝ վերբեռնելու համար pdfjs-editor-add-signature-image-browse-link = { PLATFORM() -> diff --git a/packages/pdfjs-viewer/viewer/locale/ja/viewer.ftl b/packages/pdfjs-viewer/viewer/locale/ja/viewer.ftl index 7a3ece5e3ef..9601ad5b0d7 100644 --- a/packages/pdfjs-viewer/viewer/locale/ja/viewer.ftl +++ b/packages/pdfjs-viewer/viewer/locale/ja/viewer.ftl @@ -207,10 +207,6 @@ pdfjs-thumb-page-checkbox1 = .title = { $page } ページを選択します # Variables: # $page (Number) - the page number -pdfjs-thumb-page-checkbox = - .aria-label = { $page } ページを選択します -# Variables: -# $page (Number) - the page number # $total (Number) - the number of pages pdfjs-thumb-page-title1 = .title = { $page } / { $total } ページ @@ -638,12 +634,9 @@ pdfjs-editor-add-comment-button = ## - layers. ## The thumbnails view is used to edit the pdf: remove/insert pages, ... -pdfjs-toggle-views-manager-button = - .title = サイドバーを切り替えます pdfjs-toggle-views-manager-notification-button = .title = サイドバーを切り替えます (文書に含まれるサムネイル、アウトライン、添付データ、レイヤー) pdfjs-toggle-views-manager-button1-label = ページを管理 -pdfjs-toggle-views-manager-button-label = サイドバーを切り替え pdfjs-views-manager-sidebar = .aria-label = サイドバー pdfjs-views-manager-sidebar-resizer = @@ -654,11 +647,9 @@ pdfjs-views-manager-view-selector-button-label = ビュー pdfjs-views-manager-pages-title = ページ pdfjs-views-manager-outlines-title1 = 文書のアウトライン .title = 文書のアウトライン (ダブルクリックですべての項目を展開/折りたたみ) -pdfjs-views-manager-outlines-title = 文書のアウトライン pdfjs-views-manager-attachments-title = 添付データ pdfjs-views-manager-layers-title1 = レイヤー .title = レイヤー (ダブルクリックですべてのレイヤーを既定状態にリセット) -pdfjs-views-manager-layers-title = レイヤー pdfjs-views-manager-pages-option-label = ページ pdfjs-views-manager-outlines-option-label = 文書のアウトライン pdfjs-views-manager-attachments-option-label = 添付データ @@ -675,7 +666,6 @@ pdfjs-views-manager-pages-status-copy-button-label = コピー pdfjs-views-manager-pages-status-cut-button-label = 切り取り pdfjs-views-manager-pages-status-delete-button-label = 削除 pdfjs-views-manager-pages-status-export-selected-button-label = 選択したページをエクスポート... -pdfjs-views-manager-pages-status-save-as-button-label = 名前を付けて保存... # Variables: # $count (Number) - the number of selected pages to be cut. pdfjs-views-manager-status-undo-cut-label = { $count } ページを切り取りしました @@ -706,6 +696,7 @@ pdfjs-views-manager-paste-button-after = # Badge used to promote a new feature in the UI, keep it as short as possible. # It's spelled uppercase for English, but it can be translated as usual. pdfjs-new-badge-content = 新機能 +pdfjs-views-manager-waiting-for-file = ファイルをアップロードしています... pdfjs-toggle-views-manager-button1 = .title = ページを管理 diff --git a/packages/pdfjs-viewer/viewer/locale/kab/viewer.ftl b/packages/pdfjs-viewer/viewer/locale/kab/viewer.ftl index c1a7957ca37..4527c69ba1b 100644 --- a/packages/pdfjs-viewer/viewer/locale/kab/viewer.ftl +++ b/packages/pdfjs-viewer/viewer/locale/kab/viewer.ftl @@ -598,6 +598,8 @@ pdfjs-editor-edit-comment-popup-button = pdfjs-editor-delete-comment-popup-button-label = Kkes awennit pdfjs-editor-delete-comment-popup-button = .title = Kkes awennit +pdfjs-show-comment-button = + .title = Sken awennit ## Edit a comment dialog diff --git a/packages/pdfjs-viewer/viewer/locale/nn-NO/viewer.ftl b/packages/pdfjs-viewer/viewer/locale/nn-NO/viewer.ftl index 1c38651d1fe..178fc9021cb 100644 --- a/packages/pdfjs-viewer/viewer/locale/nn-NO/viewer.ftl +++ b/packages/pdfjs-viewer/viewer/locale/nn-NO/viewer.ftl @@ -488,8 +488,8 @@ pdfjs-editor-new-alt-text-error-close-button = Lat att # Variables: # $totalSize (Number) - the total size (in MB) of the AI model. # $downloadedSize (Number) - the downloaded size (in MB) of the AI model. -pdfjs-editor-new-alt-text-ai-model-downloading-progress = Lastar ned AI-modell med alternativ tekst ({ $downloadedSize } av { $totalSize } MB) - .aria-valuetext = Lastar ned AI-modell med alternativ tekst ({ $downloadedSize } av { $totalSize } MB) +pdfjs-editor-new-alt-text-ai-model-downloading-progress = Lastar ned KI-modell med alternativ tekst ({ $downloadedSize } av { $totalSize } MB) + .aria-valuetext = Lastar ned KI-modell med alternativ tekst ({ $downloadedSize } av { $totalSize } MB) # This is a button that users can click to edit the alt text they have already added. pdfjs-editor-new-alt-text-added-button = .aria-label = Alternativ tekst lagt til @@ -518,7 +518,7 @@ pdfjs-editor-alt-text-settings-create-model-button-label = Opprett alternativ te pdfjs-editor-alt-text-settings-create-model-description = Foreslår skildringar for å hjelpe folk som ikkje kan sjå bildet eller når bildet ikkje blir lasta inn. # Variables: # $totalSize (Number) - the total size (in MB) of the AI model. -pdfjs-editor-alt-text-settings-download-model-label = AI-modell for alternativ tekst ({ $totalSize } MB) +pdfjs-editor-alt-text-settings-download-model-label = KI-modell for alternativ tekst ({ $totalSize } MB) pdfjs-editor-alt-text-settings-ai-model-description = Køyrer lokalt på eininga di slik at dataa dine blir verande private. Påkravd for automatisk alternativ tekst. pdfjs-editor-alt-text-settings-delete-model-button = Slett pdfjs-editor-alt-text-settings-download-model-button = Last ned diff --git a/packages/pdfjs-viewer/viewer/locale/pa-IN/viewer.ftl b/packages/pdfjs-viewer/viewer/locale/pa-IN/viewer.ftl index 80f684e14c8..0ef28c927d7 100644 --- a/packages/pdfjs-viewer/viewer/locale/pa-IN/viewer.ftl +++ b/packages/pdfjs-viewer/viewer/locale/pa-IN/viewer.ftl @@ -728,6 +728,7 @@ pdfjs-views-manager-paste-button-after = # Badge used to promote a new feature in the UI, keep it as short as possible. # It's spelled uppercase for English, but it can be translated as usual. pdfjs-new-badge-content = ਨਵਾਂ +pdfjs-views-manager-waiting-for-file = …ਫ਼ਾਇਲ ਨੂੰ ਅੱਪਲੋਡ ਕੀਤਾ ਜਾ ਰਿਹਾ ਹੈ pdfjs-toggle-views-manager-button1 = .title = ਸਫ਼ਿਆਂ ਦਾ ਇੰਤਜ਼ਾਮ diff --git a/packages/pdfjs-viewer/viewer/locale/pl/viewer.ftl b/packages/pdfjs-viewer/viewer/locale/pl/viewer.ftl index 6b06eb8d089..5d8e3edebfd 100644 --- a/packages/pdfjs-viewer/viewer/locale/pl/viewer.ftl +++ b/packages/pdfjs-viewer/viewer/locale/pl/viewer.ftl @@ -735,6 +735,7 @@ pdfjs-views-manager-paste-button-after = # Badge used to promote a new feature in the UI, keep it as short as possible. # It's spelled uppercase for English, but it can be translated as usual. pdfjs-new-badge-content = Nowe +pdfjs-views-manager-waiting-for-file = Przesyłanie pliku… pdfjs-toggle-views-manager-button1 = .title = Zarządzaj stronami diff --git a/packages/pdfjs-viewer/viewer/locale/pt-PT/viewer.ftl b/packages/pdfjs-viewer/viewer/locale/pt-PT/viewer.ftl index 4fa69ab89f5..136a45c889c 100644 --- a/packages/pdfjs-viewer/viewer/locale/pt-PT/viewer.ftl +++ b/packages/pdfjs-viewer/viewer/locale/pt-PT/viewer.ftl @@ -201,6 +201,15 @@ pdfjs-thumb-page-title = # $page (Number) - the page number pdfjs-thumb-page-canvas = .aria-label = Miniatura da página { $page } +# Variables: +# $page (Number) - the page number +pdfjs-thumb-page-checkbox1 = + .title = Selecionar a página { $page } +# Variables: +# $page (Number) - the page number +# $total (Number) - the number of pages +pdfjs-thumb-page-title1 = + .title = Página { $page } de { $total } ## Find panel button title and messages @@ -286,9 +295,13 @@ pdfjs-web-fonts-disabled = Os tipos de letra web estão desativados: não é pos pdfjs-editor-free-text-button = .title = Texto +pdfjs-editor-color-picker-free-text-input = + .title = Alterar cor do texto pdfjs-editor-free-text-button-label = Texto pdfjs-editor-ink-button = .title = Desenhar +pdfjs-editor-color-picker-ink-input = + .title = Alterar a cor de desenho pdfjs-editor-ink-button-label = Desenhar pdfjs-editor-stamp-button = .title = Adicionar ou editar imagens @@ -672,6 +685,7 @@ pdfjs-views-manager-pages-status-action-button-label = Gerir pdfjs-views-manager-pages-status-copy-button-label = Copiar pdfjs-views-manager-pages-status-cut-button-label = Cortar pdfjs-views-manager-pages-status-delete-button-label = Eliminar +pdfjs-views-manager-pages-status-export-selected-button-label = Exportar selecionado… # Variables: # $count (Number) - the number of selected pages to be cut. pdfjs-views-manager-status-undo-cut-label = @@ -693,6 +707,30 @@ pdfjs-views-manager-pages-status-undo-delete-label = [one] 1 página eliminada *[other] { $count } páginas eliminadas } +pdfjs-views-manager-pages-status-waiting-ready-label = A preparar o seu ficheiro… +pdfjs-views-manager-pages-status-waiting-uploading-label = A carregar ficheiro… +pdfjs-views-manager-status-warning-cut-label = Não foi possível cortar. Atualize a página e tente novamente. +pdfjs-views-manager-status-warning-copy-label = Não foi possível copiar. Atualize a página e tente novamente. +pdfjs-views-manager-status-warning-delete-label = Não foi possível eliminar. Atualize a página e tente novamente. +pdfjs-views-manager-status-warning-save-label = Não foi possível guardar. Atualize a página e tente novamente. +pdfjs-views-manager-status-undo-button-label = Desfazer +pdfjs-views-manager-status-done-button-label = Feito +pdfjs-views-manager-status-close-button = + .title = Fechar +pdfjs-views-manager-status-close-button-label = Fechar +pdfjs-views-manager-paste-button-label = Colar +pdfjs-views-manager-paste-button-before = + .title = Colar antes da primeira página +# Variables: +# $page (Number) - the page number after which the paste button is. +pdfjs-views-manager-paste-button-after = + .title = Colar depois da página { $page } +# Badge used to promote a new feature in the UI, keep it as short as possible. +# It's spelled uppercase for English, but it can be translated as usual. +pdfjs-new-badge-content = NOVO +pdfjs-views-manager-waiting-for-file = A carregar ficheiro… +pdfjs-toggle-views-manager-button1 = + .title = Gerir páginas ## Main menu for adding/removing signatures diff --git a/packages/pdfjs-viewer/viewer/locale/ro/viewer.ftl b/packages/pdfjs-viewer/viewer/locale/ro/viewer.ftl index 85c353d5ade..2d51285c1d9 100644 --- a/packages/pdfjs-viewer/viewer/locale/ro/viewer.ftl +++ b/packages/pdfjs-viewer/viewer/locale/ro/viewer.ftl @@ -735,6 +735,7 @@ pdfjs-views-manager-paste-button-after = # Badge used to promote a new feature in the UI, keep it as short as possible. # It's spelled uppercase for English, but it can be translated as usual. pdfjs-new-badge-content = NOU +pdfjs-views-manager-waiting-for-file = Se încarcă fișierul… pdfjs-toggle-views-manager-button1 = .title = Gestionează paginile diff --git a/packages/pdfjs-viewer/viewer/locale/sr/viewer.ftl b/packages/pdfjs-viewer/viewer/locale/sr/viewer.ftl index 19bf0d30093..d4a65d70850 100644 --- a/packages/pdfjs-viewer/viewer/locale/sr/viewer.ftl +++ b/packages/pdfjs-viewer/viewer/locale/sr/viewer.ftl @@ -736,6 +736,7 @@ pdfjs-views-manager-paste-button-after = # Badge used to promote a new feature in the UI, keep it as short as possible. # It's spelled uppercase for English, but it can be translated as usual. pdfjs-new-badge-content = НОВО +pdfjs-views-manager-waiting-for-file = Отпремам датотеку… pdfjs-toggle-views-manager-button1 = .title = Управљај страницама diff --git a/packages/pdfjs-viewer/viewer/locale/zh-CN/viewer.ftl b/packages/pdfjs-viewer/viewer/locale/zh-CN/viewer.ftl index 2181decddaa..05734fd2f50 100644 --- a/packages/pdfjs-viewer/viewer/locale/zh-CN/viewer.ftl +++ b/packages/pdfjs-viewer/viewer/locale/zh-CN/viewer.ftl @@ -696,6 +696,7 @@ pdfjs-views-manager-paste-button-after = # Badge used to promote a new feature in the UI, keep it as short as possible. # It's spelled uppercase for English, but it can be translated as usual. pdfjs-new-badge-content = 新 +pdfjs-views-manager-waiting-for-file = 正在上传文件… pdfjs-toggle-views-manager-button1 = .title = 管理页面 diff --git a/packages/pdfjs-viewer/viewer/viewer.css b/packages/pdfjs-viewer/viewer/viewer.css index e47aff5e2a0..a3c952c30fe 100644 --- a/packages/pdfjs-viewer/viewer/viewer.css +++ b/packages/pdfjs-viewer/viewer/viewer.css @@ -19,16 +19,6 @@ --message-bar-close-button-color-hover:var(--text-primary-color); --message-bar-close-button-border-radius:4px; --message-bar-close-button-border:none; - --csstools-light-dark-toggle--24:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); - --message-bar-close-button-hover-bg-color:var(--csstools-light-dark-toggle--24, rgb(21 20 26 / 0.14)); - --csstools-light-dark-toggle--25:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); - --message-bar-close-button-active-bg-color:var(--csstools-light-dark-toggle--25, rgb(21 20 26 / 0.21)); - --csstools-light-dark-toggle--26:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); - --message-bar-close-button-focus-bg-color:var(--csstools-light-dark-toggle--26, rgb(21 20 26 / 0.07)); -} - -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ -.messageBar{ --message-bar-close-button-hover-bg-color:light-dark( rgb(21 20 26 / 0.14), rgb(251 251 254 / 0.14) @@ -41,35 +31,16 @@ rgb(21 20 26 / 0.07), rgb(251 251 254 / 0.07) ); -} -} - -@supports not (color: light-dark(tan, tan)){ - -.messageBar *{ - --csstools-light-dark-toggle--24:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); - --message-bar-close-button-hover-bg-color:var(--csstools-light-dark-toggle--24, rgb(21 20 26 / 0.14)); - --csstools-light-dark-toggle--25:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); - --message-bar-close-button-active-bg-color:var(--csstools-light-dark-toggle--25, rgb(21 20 26 / 0.21)); - --csstools-light-dark-toggle--26:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); - --message-bar-close-button-focus-bg-color:var(--csstools-light-dark-toggle--26, rgb(21 20 26 / 0.07)); - } -} - -@media screen and (forced-colors: active){ -.messageBar{ + @media screen and (forced-colors: active){ --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; @@ -86,16 +57,14 @@ border:1px solid var(--message-bar-border-color); background:var(--message-bar-bg-color); color:var(--message-bar-fg-color); -} -.messageBar > div{ + > div{ display:flex; align-items:flex-start; gap:8px; align-self:stretch; - } -:is(.messageBar > div)::before{ + &::before{ content:""; display:inline-block; width:16px; @@ -107,17 +76,18 @@ background-color:var(--message-bar-icon-color); flex-shrink:0; } + } -.messageBar button{ + button{ cursor:pointer; - } -:is(.messageBar button):focus-visible{ + &:focus-visible{ outline:var(--focus-ring-outline); outline-offset:2px; } + } -.messageBar .closeButton{ + .closeButton{ width:32px; height:32px; background:none; @@ -127,9 +97,8 @@ display:flex; align-items:center; justify-content:center; - } -:is(.messageBar .closeButton)::before{ + &::before{ content:""; display:inline-block; width:16px; @@ -141,69 +110,38 @@ background-color:var(--message-bar-close-button-color); } -:is(.messageBar .closeButton):is(:hover,:active,:focus)::before{ + &:is(:hover, :active, :focus)::before{ background-color:var(--message-bar-close-button-color-hover); } -:is(.messageBar .closeButton):hover{ + &:hover{ background-color:var(--message-bar-close-button-hover-bg-color); } -:is(.messageBar .closeButton):active{ + &:active{ background-color:var(--message-bar-close-button-active-bg-color); } -:is(.messageBar .closeButton):focus{ + &:focus{ background-color:var(--message-bar-close-button-focus-bg-color); } -:is(.messageBar .closeButton) > span{ + > span{ display:inline-block; width:0; height:0; overflow:hidden; } - -#editorUndoBar{ - --csstools-light-dark-toggle--27:var(--csstools-color-scheme--light) #fbfbfe; - --text-primary-color:var(--csstools-light-dark-toggle--27, #15141a); - - --message-bar-icon:url(images/messageBar_info.svg); - --csstools-light-dark-toggle--28:var(--csstools-color-scheme--light) #73a7f3; - --message-bar-icon-color:var(--csstools-light-dark-toggle--28, #0060df); - --csstools-light-dark-toggle--29:var(--csstools-color-scheme--light) #003070; - --message-bar-bg-color:var(--csstools-light-dark-toggle--29, #deeafc); - --message-bar-fg-color:var(--text-primary-color); - --csstools-light-dark-toggle--30:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); - --message-bar-border-color:var(--csstools-light-dark-toggle--30, rgb(0 0 0 / 0.08)); - - --csstools-light-dark-toggle--31:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); - - --undo-button-bg-color:var(--csstools-light-dark-toggle--31, rgb(21 20 26 / 0.07)); - --csstools-light-dark-toggle--32:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.14); - --undo-button-bg-color-hover:var(--csstools-light-dark-toggle--32, rgb(21 20 26 / 0.14)); - --csstools-light-dark-toggle--33:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.21); - --undo-button-bg-color-active:var(--csstools-light-dark-toggle--33, rgb(21 20 26 / 0.21)); - - --csstools-light-dark-toggle--34:var(--csstools-color-scheme--light) #0df; - - --undo-button-border:1px solid var(--csstools-light-dark-toggle--34, #0060df); - - --undo-button-fg-color:var(--message-bar-fg-color); - --undo-button-fg-color-hover:var(--undo-button-fg-color); - --undo-button-fg-color-active:var(--undo-button-fg-color); + } } -@supports (color: light-dark(red, red)){ #editorUndoBar{ --text-primary-color:light-dark(#15141a, #fbfbfe); + + --message-bar-icon:url(images/messageBar_info.svg); --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-fg-color:var(--text-primary-color); --message-bar-border-color:light-dark( rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.08) @@ -221,45 +159,14 @@ rgb(21 20 26 / 0.21), rgb(255 255 255 / 0.21) ); -} -} - -@supports (color: light-dark(red, red)){ -#editorUndoBar{ --undo-button-border:1px solid light-dark(#0060df, #0df); -} -} - -@supports not (color: light-dark(tan, tan)){ -#editorUndoBar *{ - --csstools-light-dark-toggle--27:var(--csstools-color-scheme--light) #fbfbfe; - --text-primary-color:var(--csstools-light-dark-toggle--27, #15141a); - --csstools-light-dark-toggle--28:var(--csstools-color-scheme--light) #73a7f3; - --message-bar-icon-color:var(--csstools-light-dark-toggle--28, #0060df); - --csstools-light-dark-toggle--29:var(--csstools-color-scheme--light) #003070; - --message-bar-bg-color:var(--csstools-light-dark-toggle--29, #deeafc); - --csstools-light-dark-toggle--30:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); - --message-bar-border-color:var(--csstools-light-dark-toggle--30, rgb(0 0 0 / 0.08)); - - --csstools-light-dark-toggle--31:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); - - --undo-button-bg-color:var(--csstools-light-dark-toggle--31, rgb(21 20 26 / 0.07)); - --csstools-light-dark-toggle--32:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.14); - --undo-button-bg-color-hover:var(--csstools-light-dark-toggle--32, rgb(21 20 26 / 0.14)); - --csstools-light-dark-toggle--33:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.21); - --undo-button-bg-color-active:var(--csstools-light-dark-toggle--33, rgb(21 20 26 / 0.21)); - - --csstools-light-dark-toggle--34:var(--csstools-color-scheme--light) #0df; - - --undo-button-border:1px solid var(--csstools-light-dark-toggle--34, #0060df); - } -} - -@media screen and (forced-colors: active){ + --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); -#editorUndoBar{ + @media screen and (forced-colors: active){ --text-primary-color:CanvasText; --message-bar-icon-color:CanvasText; @@ -275,11 +182,8 @@ --undo-button-fg-color-active:SelectedItemText; --undo-button-border:none; -} } -#editorUndoBar{ - position:fixed; top:50px; left:50%; @@ -293,13 +197,12 @@ font-size:15px; cursor:default; -} -#editorUndoBar button{ + button{ cursor:pointer; } -#editorUndoBar #editorUndoBarUndoButton{ + #editorUndoBarUndoButton{ border-radius:4px; font-weight:590; line-height:19.5px; @@ -310,222 +213,90 @@ height:32px; background-color:var(--undo-button-bg-color); - } -:is(#editorUndoBar #editorUndoBarUndoButton):hover{ + &:hover{ background-color:var(--undo-button-bg-color-hover); color:var(--undo-button-fg-color-hover); } -:is(#editorUndoBar #editorUndoBarUndoButton):active{ + &:active{ background-color:var(--undo-button-bg-color-active); color:var(--undo-button-fg-color-active); } + } -#editorUndoBar > div{ + > div{ align-items:center; } - -.dialog{ - --csstools-light-dark-toggle--35:var(--csstools-color-scheme--light) #1c1b22; - --dialog-bg-color:var(--csstools-light-dark-toggle--35, white); - --csstools-light-dark-toggle--36:var(--csstools-color-scheme--light) #1c1b22; - --dialog-border-color:var(--csstools-light-dark-toggle--36, white); - --csstools-light-dark-toggle--37:var(--csstools-color-scheme--light) #15141a; - --dialog-shadow:0 2px 14px 0 var(--csstools-light-dark-toggle--37, rgb(58 57 68 / 0.2)); - --csstools-light-dark-toggle--38:var(--csstools-color-scheme--light) #fbfbfe; - --text-primary-color:var(--csstools-light-dark-toggle--38, #15141a); - --csstools-light-dark-toggle--39:var(--csstools-color-scheme--light) #cfcfd8; - --text-secondary-color:var(--csstools-light-dark-toggle--39, #5b5b66); - --hover-filter:brightness(0.9); - --csstools-light-dark-toggle--40:var(--csstools-color-scheme--light) #0df; - --link-fg-color:var(--csstools-light-dark-toggle--40, #0060df); - --csstools-light-dark-toggle--41:var(--csstools-color-scheme--light) #80ebff; - --link-hover-fg-color:var(--csstools-light-dark-toggle--41, #0250bb); - --csstools-light-dark-toggle--42:var(--csstools-color-scheme--light) #52525e; - --separator-color:var(--csstools-light-dark-toggle--42, #f0f0f4); - - --textarea-border-color:#8f8f9d; - --csstools-light-dark-toggle--43:var(--csstools-color-scheme--light) #42414d; - --textarea-bg-color:var(--csstools-light-dark-toggle--43, white); - --textarea-fg-color:var(--text-secondary-color); - - --csstools-light-dark-toggle--44:var(--csstools-color-scheme--light) #2b2a33; - - --radio-bg-color:var(--csstools-light-dark-toggle--44, #f0f0f4); - --csstools-light-dark-toggle--45:var(--csstools-color-scheme--light) #15141a; - --radio-checked-bg-color:var(--csstools-light-dark-toggle--45, #fbfbfe); - --radio-border-color:#8f8f9d; - --csstools-light-dark-toggle--46:var(--csstools-color-scheme--light) #0df; - --radio-checked-border-color:var(--csstools-light-dark-toggle--46, #0060df); - - --csstools-light-dark-toggle--47:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); - - --button-secondary-bg-color:var(--csstools-light-dark-toggle--47, rgb(21 20 26 / 0.07)); - --button-secondary-fg-color:var(--text-primary-color); - --button-secondary-border-color:var(--button-secondary-bg-color); - --csstools-light-dark-toggle--48:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); - --button-secondary-active-bg-color:var(--csstools-light-dark-toggle--48, rgb(21 20 26 / 0.21)); - --button-secondary-active-fg-color:var(--button-secondary-fg-color); - --button-secondary-active-border-color:var(--button-secondary-bg-color); - --csstools-light-dark-toggle--49:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); - --button-secondary-hover-bg-color:var(--csstools-light-dark-toggle--49, rgb(21 20 26 / 0.14)); - --button-secondary-hover-fg-color:var(--button-secondary-fg-color); - --button-secondary-hover-border-color:var(--button-secondary-hover-bg-color); - --button-secondary-disabled-bg-color:var(--button-secondary-bg-color); - --button-secondary-disabled-border-color:var( - --button-secondary-border-color - ); - --button-secondary-disabled-fg-color:var(--button-secondary-fg-color); - - --csstools-light-dark-toggle--50:var(--csstools-color-scheme--light) #0df; - - --button-primary-bg-color:var(--csstools-light-dark-toggle--50, #0060df); - --csstools-light-dark-toggle--51:var(--csstools-color-scheme--light) #15141a; - --button-primary-fg-color:var(--csstools-light-dark-toggle--51, #fbfbfe); - --button-primary-border-color:var(--button-primary-bg-color); - --csstools-light-dark-toggle--52:var(--csstools-color-scheme--light) #aaf2ff; - --button-primary-active-bg-color:var(--csstools-light-dark-toggle--52, #054096); - --button-primary-active-fg-color:var(--button-primary-fg-color); - --button-primary-active-border-color:var(--button-primary-active-bg-color); - --csstools-light-dark-toggle--53:var(--csstools-color-scheme--light) #80ebff; - --button-primary-hover-bg-color:var(--csstools-light-dark-toggle--53, #0250bb); - --button-primary-hover-fg-color:var(--button-primary-fg-color); - --button-primary-hover-border-color:var(--button-primary-hover-bg-color); - --button-primary-disabled-bg-color:var(--button-primary-bg-color); - --button-primary-disabled-border-color:var(--button-primary-border-color); - --button-primary-disabled-fg-color:var(--button-primary-fg-color); - --button-disabled-opacity:0.4; - - --csstools-light-dark-toggle--54:var(--csstools-color-scheme--light) #42414d; - - --input-text-bg-color:var(--csstools-light-dark-toggle--54, white); - --input-text-fg-color:var(--text-primary-color); } -@supports (color: light-dark(red, red)){ .dialog{ --dialog-bg-color:light-dark(white, #1c1b22); --dialog-border-color:light-dark(white, #1c1b22); -} -} - -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ -.dialog{ --dialog-shadow:0 2px 14px 0 light-dark(rgb(58 57 68 / 0.2), #15141a); -} -} - -@supports (color: light-dark(red, red)){ -.dialog{ --text-primary-color:light-dark(#15141a, #fbfbfe); --text-secondary-color:light-dark(#5b5b66, #cfcfd8); + --hover-filter:brightness(0.9); --link-fg-color:light-dark(#0060df, #0df); --link-hover-fg-color:light-dark(#0250bb, #80ebff); --separator-color:light-dark(#f0f0f4, #52525e); + + --textarea-border-color:#8f8f9d; --textarea-bg-color:light-dark(white, #42414d); + --textarea-fg-color:var(--text-secondary-color); --radio-bg-color:light-dark(#f0f0f4, #2b2a33); --radio-checked-bg-color:light-dark(#fbfbfe, #15141a); + --radio-border-color:#8f8f9d; --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-fg-color:var(--text-primary-color); + --button-secondary-border-color:var(--button-secondary-bg-color); --button-secondary-active-bg-color:light-dark( rgb(21 20 26 / 0.21), rgb(251 251 254 / 0.21) ); + --button-secondary-active-fg-color:var(--button-secondary-fg-color); + --button-secondary-active-border-color:var(--button-secondary-bg-color); --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-secondary-hover-fg-color:var(--button-secondary-fg-color); + --button-secondary-hover-border-color:var(--button-secondary-hover-bg-color); + --button-secondary-disabled-bg-color:var(--button-secondary-bg-color); + --button-secondary-disabled-border-color:var( + --button-secondary-border-color + ); + --button-secondary-disabled-fg-color:var(--button-secondary-fg-color); --button-primary-bg-color:light-dark(#0060df, #0df); --button-primary-fg-color:light-dark(#fbfbfe, #15141a); + --button-primary-border-color:var(--button-primary-bg-color); --button-primary-active-bg-color:light-dark(#054096, #aaf2ff); + --button-primary-active-fg-color:var(--button-primary-fg-color); + --button-primary-active-border-color:var(--button-primary-active-bg-color); --button-primary-hover-bg-color:light-dark(#0250bb, #80ebff); + --button-primary-hover-fg-color:var(--button-primary-fg-color); + --button-primary-hover-border-color:var(--button-primary-hover-bg-color); + --button-primary-disabled-bg-color:var(--button-primary-bg-color); + --button-primary-disabled-border-color:var(--button-primary-border-color); + --button-primary-disabled-fg-color:var(--button-primary-fg-color); + --button-disabled-opacity:0.4; --input-text-bg-color:light-dark(white, #42414d); -} -} - -@supports not (color: light-dark(tan, tan)){ - -.dialog *{ - --csstools-light-dark-toggle--35:var(--csstools-color-scheme--light) #1c1b22; - --dialog-bg-color:var(--csstools-light-dark-toggle--35, white); - --csstools-light-dark-toggle--36:var(--csstools-color-scheme--light) #1c1b22; - --dialog-border-color:var(--csstools-light-dark-toggle--36, white); - --csstools-light-dark-toggle--37:var(--csstools-color-scheme--light) #15141a; - --dialog-shadow:0 2px 14px 0 var(--csstools-light-dark-toggle--37, rgb(58 57 68 / 0.2)); - --csstools-light-dark-toggle--38:var(--csstools-color-scheme--light) #fbfbfe; - --text-primary-color:var(--csstools-light-dark-toggle--38, #15141a); - --csstools-light-dark-toggle--39:var(--csstools-color-scheme--light) #cfcfd8; - --text-secondary-color:var(--csstools-light-dark-toggle--39, #5b5b66); - --csstools-light-dark-toggle--40:var(--csstools-color-scheme--light) #0df; - --link-fg-color:var(--csstools-light-dark-toggle--40, #0060df); - --csstools-light-dark-toggle--41:var(--csstools-color-scheme--light) #80ebff; - --link-hover-fg-color:var(--csstools-light-dark-toggle--41, #0250bb); - --csstools-light-dark-toggle--42:var(--csstools-color-scheme--light) #52525e; - --separator-color:var(--csstools-light-dark-toggle--42, #f0f0f4); - --csstools-light-dark-toggle--43:var(--csstools-color-scheme--light) #42414d; - --textarea-bg-color:var(--csstools-light-dark-toggle--43, white); - - --csstools-light-dark-toggle--44:var(--csstools-color-scheme--light) #2b2a33; - - --radio-bg-color:var(--csstools-light-dark-toggle--44, #f0f0f4); - --csstools-light-dark-toggle--45:var(--csstools-color-scheme--light) #15141a; - --radio-checked-bg-color:var(--csstools-light-dark-toggle--45, #fbfbfe); - --csstools-light-dark-toggle--46:var(--csstools-color-scheme--light) #0df; - --radio-checked-border-color:var(--csstools-light-dark-toggle--46, #0060df); - - --csstools-light-dark-toggle--47:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); - - --button-secondary-bg-color:var(--csstools-light-dark-toggle--47, rgb(21 20 26 / 0.07)); - --csstools-light-dark-toggle--48:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); - --button-secondary-active-bg-color:var(--csstools-light-dark-toggle--48, rgb(21 20 26 / 0.21)); - --csstools-light-dark-toggle--49:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); - --button-secondary-hover-bg-color:var(--csstools-light-dark-toggle--49, rgb(21 20 26 / 0.14)); - - --csstools-light-dark-toggle--50:var(--csstools-color-scheme--light) #0df; - - --button-primary-bg-color:var(--csstools-light-dark-toggle--50, #0060df); - --csstools-light-dark-toggle--51:var(--csstools-color-scheme--light) #15141a; - --button-primary-fg-color:var(--csstools-light-dark-toggle--51, #fbfbfe); - --csstools-light-dark-toggle--52:var(--csstools-color-scheme--light) #aaf2ff; - --button-primary-active-bg-color:var(--csstools-light-dark-toggle--52, #054096); - --csstools-light-dark-toggle--53:var(--csstools-color-scheme--light) #80ebff; - --button-primary-hover-bg-color:var(--csstools-light-dark-toggle--53, #0250bb); - - --csstools-light-dark-toggle--54:var(--csstools-color-scheme--light) #42414d; - - --input-text-bg-color:var(--csstools-light-dark-toggle--54, white); - } -} - -@media (prefers-color-scheme: dark){ + --input-text-fg-color:var(--text-primary-color); -.dialog{ + @media (prefers-color-scheme: dark){ --hover-filter:brightness(1.4); --button-disabled-opacity:0.6; -} } -@media screen and (forced-colors: active){ - -.dialog{ + @media screen and (forced-colors: active){ --dialog-bg-color:Canvas; --dialog-border-color:CanvasText; --dialog-shadow:none; @@ -573,11 +344,8 @@ --input-text-bg-color:Field; --input-text-fg-color:FieldText; -} } -.dialog{ - font:message-box; font-size:13px; font-weight:400; @@ -588,30 +356,30 @@ background:var(--dialog-bg-color); color:var(--text-primary-color); box-shadow:var(--dialog-shadow); -} -:is(.dialog .mainContainer) *:focus-visible{ + .mainContainer{ + *:focus-visible{ outline:var(--focus-ring-outline); outline-offset:2px; } -:is(.dialog .mainContainer) .title{ + .title{ display:flex; width:auto; flex-direction:column; justify-content:flex-end; align-items:flex-start; gap:12px; - } -:is(:is(.dialog .mainContainer) .title) > span{ + > span{ font-size:13px; font-style:normal; font-weight:590; line-height:150%; } + } -:is(.dialog .mainContainer) .dialogSeparator{ + .dialogSeparator{ width:100%; height:0; margin-block:4px; @@ -619,27 +387,25 @@ border-bottom:none; } -:is(.dialog .mainContainer) .dialogButtonsGroup{ + .dialogButtonsGroup{ display:flex; gap:12px; align-self:flex-end; } -:is(.dialog .mainContainer) .radio{ + .radio{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; - } -:is(:is(.dialog .mainContainer) .radio) > .radioButton{ + > .radioButton{ display:flex; gap:8px; align-self:stretch; align-items:center; - } -:is(:is(:is(.dialog .mainContainer) .radio) > .radioButton) input{ + input{ -webkit-appearance:none; -moz-appearance:none; appearance:none; @@ -649,32 +415,34 @@ 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{ + &:hover{ filter:var(--hover-filter); } -:is(:is(:is(:is(.dialog .mainContainer) .radio) > .radioButton) input):checked{ + &:checked{ background-color:var(--radio-checked-bg-color); border:4px solid var(--radio-checked-border-color); } + } + } -:is(:is(.dialog .mainContainer) .radio) > .radioLabel{ + > .radioLabel{ display:flex; padding-inline-start:24px; align-items:flex-start; gap:10px; align-self:stretch; - } -:is(:is(:is(.dialog .mainContainer) .radio) > .radioLabel) > span{ + > span{ flex:1 0 0; font-size:11px; color:var(--text-secondary-color); } + } + } -:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton)){ + button:not(:is(.toggle-button, .closeButton, .clearInputButton)){ border-radius:4px; border:1px solid; font:menu; @@ -683,82 +451,82 @@ padding:4px 16px; width:auto; height:32px; - } -:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):hover{ + &:hover{ cursor:pointer; filter:var(--hover-filter); } -:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))) > span{ + > span{ color:inherit; font:inherit; } -.secondaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))){ + &.secondaryButton{ 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{ + &: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{ + &:active{ color:var(--button-secondary-active-fg-color); background-color:var(--button-secondary-active-bg-color); border-color:var(--button-secondary-active-border-color); } -.secondaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):disabled{ + &:disabled{ background-color:var(--button-secondary-disabled-bg-color); border-color:var(--button-secondary-disabled-border-color); color:var(--button-secondary-disabled-fg-color); opacity:var(--button-disabled-opacity); } + } -.primaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))){ + &.primaryButton{ 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{ + &: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{ + &:active{ color:var(--button-primary-active-fg-color); background-color:var(--button-primary-active-bg-color); border-color:var(--button-primary-active-border-color); } -.primaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):disabled{ + &:disabled{ background-color:var(--button-primary-disabled-bg-color); border-color:var(--button-primary-disabled-border-color); color:var(--button-primary-disabled-fg-color); opacity:var(--button-disabled-opacity); } + } -:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):disabled{ + &:disabled{ pointer-events:none; } + } -:is(.dialog .mainContainer) a{ + a{ color:var(--link-fg-color); - } -:is(:is(.dialog .mainContainer) a):hover{ + &:hover{ color:var(--link-hover-fg-color); } + } -:is(.dialog .mainContainer) textarea{ + textarea{ font:inherit; padding:8px; resize:none; @@ -768,122 +536,83 @@ border:1px solid var(--textarea-border-color); background:var(--textarea-bg-color); color:var(--textarea-fg-color); - } -:is(:is(.dialog .mainContainer) textarea):focus{ + &:focus{ outline-offset:0; border-color:transparent; } -:is(:is(.dialog .mainContainer) textarea):disabled{ + &:disabled{ pointer-events:none; opacity:0.4; } + } -:is(.dialog .mainContainer) input[type="text"]{ + input[type="text"]{ background-color:var(--input-text-bg-color); color:var(--input-text-fg-color); } -:is(.dialog .mainContainer) .messageBar{ - --csstools-light-dark-toggle--55:var(--csstools-color-scheme--light) #5a3100; - --message-bar-bg-color:var(--csstools-light-dark-toggle--55, #ffebcd); - --csstools-light-dark-toggle--56:var(--csstools-color-scheme--light) #fbfbfe; - --message-bar-fg-color:var(--csstools-light-dark-toggle--56, #15141a); - --csstools-light-dark-toggle--57:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); - --message-bar-border-color:var(--csstools-light-dark-toggle--57, rgb(0 0 0 / 0.08)); - --message-bar-icon:url(images/messageBar_warning.svg); - --csstools-light-dark-toggle--58:var(--csstools-color-scheme--light) #e49c49; - --message-bar-icon-color:var(--csstools-light-dark-toggle--58, #cd411e); - } - -@supports (color: light-dark(red, red)){ -:is(.dialog .mainContainer) .messageBar{ + .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:url(images/messageBar_warning.svg); --message-bar-icon-color:light-dark(#cd411e, #e49c49); - } -} -@supports not (color: light-dark(tan, tan)){ - -:is(:is(.dialog .mainContainer) .messageBar) *{ - --csstools-light-dark-toggle--55:var(--csstools-color-scheme--light) #5a3100; - --message-bar-bg-color:var(--csstools-light-dark-toggle--55, #ffebcd); - --csstools-light-dark-toggle--56:var(--csstools-color-scheme--light) #fbfbfe; - --message-bar-fg-color:var(--csstools-light-dark-toggle--56, #15141a); - --csstools-light-dark-toggle--57:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); - --message-bar-border-color:var(--csstools-light-dark-toggle--57, rgb(0 0 0 / 0.08)); - --csstools-light-dark-toggle--58:var(--csstools-color-scheme--light) #e49c49; - --message-bar-icon-color:var(--csstools-light-dark-toggle--58, #cd411e); - } -} - -@media screen and (forced-colors: active){ - -:is(.dialog .mainContainer) .messageBar{ + @media screen and (forced-colors: active){ --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{ + > div{ + &::before, + > div{ margin-block:4px; } -:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > 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{ + .title{ font-size:13px; font-weight:590; } -:is(:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div) .description{ + .description{ font-size:13px; } + } + } + } -:is(.dialog .mainContainer) .toggler{ + .toggler{ display:flex; align-items:center; gap:8px; align-self:stretch; - } -:is(:is(.dialog .mainContainer) .toggler) > .togglerLabel{ + > .togglerLabel{ -webkit-user-select:none; -moz-user-select:none; user-select:none; } + } + } +} .textLayer{ - --csstools-color-scheme--light:initial; color-scheme:only light; position:absolute; @@ -892,6 +621,8 @@ overflow:clip; opacity:1; line-height:1; + letter-spacing:normal; + word-spacing:normal; -webkit-text-size-adjust:none; -moz-text-size-adjust:none; text-size-adjust:none; @@ -899,27 +630,27 @@ transform-origin:0 0; caret-color:CanvasText; z-index:0; -} -.textLayer.highlighting{ + &.highlighting{ touch-action:none; } -.textLayer :is(span,br){ + :is(span, br){ color:transparent; position:absolute; white-space:pre; cursor:text; transform-origin:0% 0%; + -webkit-user-select:text; + -moz-user-select:text; + user-select:text; } - -.textLayer{ --min-font-size:1; --text-scale-factor:calc(var(--total-scale-factor) * var(--min-font-size)); --min-font-size-inv:calc(1 / var(--min-font-size)); -} -.textLayer > :not(.markedContent),.textLayer .markedContent span:not(.markedContent){ + > :not(.markedContent), + .markedContent span:not(.markedContent){ z-index:1; --font-height:0; @@ -930,88 +661,76 @@ transform:rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv)); } -.textLayer .markedContent{ + .markedContent{ display:contents; } -.textLayer span[role="img"]{ + span[role="img"]{ -webkit-user-select:none; -moz-user-select:none; user-select:none; cursor:default; } -.textLayer .highlight{ + .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{ + @media screen and (forced-colors: active){ --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); + backdrop-filter:var(--highlight-backdrop-filter); border-radius:4px; - } -.appended:is(.textLayer .highlight){ + &.appended{ position:initial; } -.begin:is(.textLayer .highlight){ + &.begin{ border-radius:4px 0 0 4px; } -.end:is(.textLayer .highlight){ + &.end{ border-radius:0 4px 4px 0; } -.middle:is(.textLayer .highlight){ + &.middle{ border-radius:0; } -.selected:is(.textLayer .highlight){ + &.selected{ background-color:var(--highlight-selected-bg-color); - -webkit-backdrop-filter:var(--highlight-selected-backdrop-filter); - backdrop-filter:var(--highlight-selected-backdrop-filter); + backdrop-filter:var(--highlight-selected-backdrop-filter); scroll-margin-top:50px; } - -.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%); + ::-moz-selection{ + background:transparent; } -.textLayer br::-moz-selection{ + ::selection{ background:transparent; } - -.textLayer br::selection{ + br::-moz-selection{ + background:transparent; + } + br::selection{ background:transparent; } -.textLayer .endOfContent{ + .endOfContent{ display:block; position:absolute; inset:100% 0 0; @@ -1022,9 +741,10 @@ user-select:none; } -.textLayer.selecting .endOfContent{ + &.selecting .endOfContent{ top:0; } +} .textLayerImages{ position:absolute; @@ -1032,15 +752,14 @@ -webkit-user-select:none; -moz-user-select:none; user-select:none; -} -.textLayerImages canvas{ + canvas{ position:absolute; transform-origin:0% 0%; } +} .annotationLayer{ - --csstools-color-scheme--light:initial; color-scheme:only light; --annotation-unfocused-field-background:url("data:image/svg+xml;charset=UTF-8,"); @@ -1050,93 +769,86 @@ --input-disabled-border-color:transparent; --input-hover-border-color:black; --link-outline:none; -} - -@media screen and (forced-colors: active){ -.annotationLayer{ + @media screen and (forced-colors: active){ --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{ + .textWidgetAnnotation :is(input, textarea):required, + .choiceWidgetAnnotation select:required, + .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required{ outline:1.5px solid selectedItem; } - .annotationLayer .linkAnnotation{ + .linkAnnotation{ outline:var(--link-outline); - } - :is(.annotationLayer .linkAnnotation):hover{ - -webkit-backdrop-filter:var(--hcm-highlight-filter); - backdrop-filter:var(--hcm-highlight-filter); + &:hover{ + backdrop-filter:var(--hcm-highlight-filter); } - :is(.annotationLayer .linkAnnotation) > a:hover{ + & > a:hover{ opacity:0 !important; background:none !important; box-shadow:none; } + } - .annotationLayer .popupAnnotation .popup{ + .popupAnnotation .popup{ outline:calc(1.5px * var(--total-scale-factor)) solid CanvasText !important; background-color:ButtonFace !important; color:ButtonText !important; } - .annotationLayer .highlightArea:hover::after{ + .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); + backdrop-filter:var(--hcm-highlight-filter); content:""; pointer-events:none; } - .annotationLayer .popupAnnotation.focused .popup{ + .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{ + &[data-main-rotation="90"] .norotate{ transform:rotate(270deg) translateX(-100%); } - -.annotationLayer[data-main-rotation="180"] .norotate{ + &[data-main-rotation="180"] .norotate{ transform:rotate(180deg) translate(-100%, -100%); } - -.annotationLayer[data-main-rotation="270"] .norotate{ + &[data-main-rotation="270"] .norotate{ transform:rotate(90deg) translateY(-100%); } -.annotationLayer.disabled section,.annotationLayer.disabled .popup{ + &.disabled{ + section, + .popup{ pointer-events:none; } + } -.annotationLayer .annotationContent{ + .annotationContent{ position:absolute; width:100%; height:100%; pointer-events:none; - } -.freetext:is(.annotationLayer .annotationContent){ + &.freetext{ background:transparent; border:none; inset:0; @@ -1145,8 +857,9 @@ font:10px sans-serif; line-height:1.35; } + } -.annotationLayer section{ + section{ position:absolute; text-align:initial; pointer-events:auto; @@ -1155,13 +868,14 @@ -webkit-user-select:none; -moz-user-select:none; user-select:none; - } -:is(.annotationLayer section):has(div.annotationContent) canvas.annotationContent{ + &:has(div.annotationContent){ + canvas.annotationContent{ display:none; } + } -:is(.annotationLayer section) .overlaidText{ + .overlaidText{ position:absolute; top:0; left:0; @@ -1170,12 +884,13 @@ display:inline-block; overflow:hidden; } + } -.textLayer.selecting ~ .annotationLayer section{ + .textLayer.selecting ~ & section{ pointer-events:none; } -.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton) > a{ + :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a{ position:absolute; font-size:1em; top:0; @@ -1184,20 +899,21 @@ height:100%; } -.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton):not(.hasBorder) > a:hover{ + :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton):not(.hasBorder) + > a:hover{ opacity:0.2; background-color:rgb(255 255 0); } -.annotationLayer .linkAnnotation.hasBorder:hover{ + .linkAnnotation.hasBorder:hover{ background-color:rgb(255 255 0 / 0.2); } -.annotationLayer .hasBorder{ + .hasBorder{ background-size:100% 100%; } -.annotationLayer .textAnnotation img{ + .textAnnotation img{ position:absolute; cursor:pointer; width:100%; @@ -1206,7 +922,9 @@ left:0; } -.annotationLayer .textWidgetAnnotation :is(input,textarea),.annotationLayer .choiceWidgetAnnotation select,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{ + .textWidgetAnnotation :is(input, textarea), + .choiceWidgetAnnotation select, + .buttonWidgetAnnotation:is(.checkBox, .radioButton) input{ background-image:var(--annotation-unfocused-field-background); border:2px solid var(--input-unfocused-border-color); box-sizing:border-box; @@ -1217,81 +935,92 @@ width:100%; } -.annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{ + .textWidgetAnnotation :is(input, textarea):required, + .choiceWidgetAnnotation select:required, + .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required{ outline:1.5px solid red; } -.annotationLayer .choiceWidgetAnnotation select option{ + .choiceWidgetAnnotation select option{ padding:0; } -.annotationLayer .buttonWidgetAnnotation.radioButton input{ + .buttonWidgetAnnotation.radioButton input{ border-radius:50%; } -.annotationLayer .textWidgetAnnotation textarea{ + .textWidgetAnnotation textarea{ resize:none; } -.annotationLayer .textWidgetAnnotation [disabled]:is(input,textarea),.annotationLayer .choiceWidgetAnnotation select[disabled],.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input[disabled]{ + .textWidgetAnnotation :is(input, textarea)[disabled], + .choiceWidgetAnnotation select[disabled], + .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{ + .textWidgetAnnotation :is(input, textarea):hover, + .choiceWidgetAnnotation select:hover, + .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{ + .textWidgetAnnotation :is(input, textarea):hover, + .choiceWidgetAnnotation select:hover, + .buttonWidgetAnnotation.checkBox input:hover{ border-radius:2px; } -.annotationLayer .textWidgetAnnotation :is(input,textarea):focus,.annotationLayer .choiceWidgetAnnotation select:focus{ + .textWidgetAnnotation :is(input, textarea):focus, + .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{ + .buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus{ background-image:none; background-color:transparent; } -.annotationLayer .buttonWidgetAnnotation.checkBox :focus{ + .buttonWidgetAnnotation.checkBox :focus{ border:2px solid var(--input-focus-border-color); border-radius:2px; outline:var(--input-focus-outline); } -.annotationLayer .buttonWidgetAnnotation.radioButton :focus{ + .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{ + .buttonWidgetAnnotation.checkBox input:checked::before, + .buttonWidgetAnnotation.checkBox input:checked::after, + .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{ + .buttonWidgetAnnotation.checkBox input:checked::before, + .buttonWidgetAnnotation.checkBox input:checked::after{ height:80%; left:45%; width:1px; } -.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before{ + .buttonWidgetAnnotation.checkBox input:checked::before{ transform:rotate(45deg); } -.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after{ + .buttonWidgetAnnotation.checkBox input:checked::after{ transform:rotate(-45deg); } -.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before{ + .buttonWidgetAnnotation.radioButton input:checked::before{ border-radius:50%; height:50%; left:25%; @@ -1299,28 +1028,28 @@ width:50%; } -.annotationLayer .textWidgetAnnotation input.comb{ + .textWidgetAnnotation input.comb{ font-family:monospace; padding-left:2px; padding-right:0; } -.annotationLayer .textWidgetAnnotation input.comb:focus{ + .textWidgetAnnotation input.comb:focus{ width:103%; } -.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{ + .buttonWidgetAnnotation:is(.checkBox, .radioButton) input{ -webkit-appearance:none; -moz-appearance:none; appearance:none; } -.annotationLayer .fileAttachmentAnnotation .popupTriggerArea{ + .fileAttachmentAnnotation .popupTriggerArea{ height:100%; width:100%; } -.annotationLayer .popupAnnotation{ + .popupAnnotation{ position:absolute; font-size:calc(9px * var(--total-scale-factor)); pointer-events:none; @@ -1330,7 +1059,7 @@ height:auto; } -.annotationLayer .popup{ + .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); @@ -1347,51 +1076,50 @@ user-select:text; } -.annotationLayer .popupAnnotation.focused .popup{ + .popupAnnotation.focused .popup{ outline-width:3px; } -.annotationLayer .popup *{ + .popup *{ font-size:calc(9px * var(--total-scale-factor)); } -.annotationLayer .popup > .header{ + .popup > .header{ display:inline-block; } -.annotationLayer .popup > .header > .title{ + .popup > .header > .title{ display:inline; font-weight:bold; } -.annotationLayer .popup > .header .popupDate{ + .popup > .header .popupDate{ display:inline-block; margin-left:calc(5px * var(--total-scale-factor)); width:-moz-fit-content; width:fit-content; } -.annotationLayer .popupContent{ + .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 > *{ + .richText > *{ white-space:pre-wrap; font-size:calc(9px * var(--total-scale-factor)); } -.annotationLayer .popupTriggerArea{ + .popupTriggerArea{ cursor:pointer; - } -:is(.annotationLayer .popupTriggerArea):hover{ - -webkit-backdrop-filter:var(--hcm-highlight-filter); - backdrop-filter:var(--hcm-highlight-filter); + &:hover{ + backdrop-filter:var(--hcm-highlight-filter); } + } -.annotationLayer section svg{ + section svg{ position:absolute; width:100%; height:100%; @@ -1399,7 +1127,7 @@ left:0; } -.annotationLayer .annotationTextContent{ + .annotationTextContent{ position:absolute; width:100%; height:100%; @@ -1409,14 +1137,14 @@ -moz-user-select:none; user-select:none; pointer-events:none; - } -:is(.annotationLayer .annotationTextContent) span{ + span{ width:100%; display:inline-block; } + } -.annotationLayer svg.quadrilateralsContainer{ + svg.quadrilateralsContainer{ contain:strict; width:0; height:0; @@ -1425,6 +1153,7 @@ left:0; z-index:-1; } +} :root{ --xfa-unfocused-field-background:url("data:image/svg+xml;charset=UTF-8,"); @@ -1441,7 +1170,6 @@ } .xfaLayer{ - --csstools-color-scheme--light:initial; color-scheme:only light; background-color:transparent; @@ -1747,104 +1475,130 @@ } } -.canvasWrapper svg{ - transform:none; +.canvasWrapper{ + .selection{ + position:absolute; + top:0; + left:0; + width:100%; + height:100%; + pointer-events:none; + background:rgb(0 90 255 / 0.22); } -.moving:is(.canvasWrapper svg){ + svg{ + transform:none; + + &.moving{ 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){ + &.highlight, + &.highlightOutline{ + &[data-main-rotation="90"]{ + mask, + 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){ + &[data-main-rotation="180"]{ + mask, + 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){ + &[data-main-rotation="270"]{ + mask, + use:not(.clip, .mask){ transform:matrix(0, -1, 1, 0, 0, 1); } + } + } -.draw:is(.canvasWrapper svg){ + &.draw{ position:absolute; mix-blend-mode:normal; - } -.draw[data-draw-rotation="90"]:is(.canvasWrapper svg){ + &[data-draw-rotation="90"]{ transform:rotate(90deg); } -.draw[data-draw-rotation="180"]:is(.canvasWrapper svg){ + &[data-draw-rotation="180"]{ transform:rotate(180deg); } -.draw[data-draw-rotation="270"]:is(.canvasWrapper svg){ + &[data-draw-rotation="270"]{ transform:rotate(270deg); } - -.highlight:is(.canvasWrapper svg){ - --blend-mode:multiply; } -@media screen and (forced-colors: active){ + &.highlight{ + --blend-mode:multiply; -.highlight:is(.canvasWrapper svg){ + @media screen and (forced-colors: active){ --blend-mode:difference; - } } -.highlight:is(.canvasWrapper svg){ - position:absolute; mix-blend-mode:var(--blend-mode); - } -.highlight:is(.canvasWrapper svg):not(.free){ + &:not(.free){ fill-rule:evenodd; } + } -.highlightOutline:is(.canvasWrapper svg){ + &.highlightOutline{ position:absolute; mix-blend-mode:normal; fill-rule:evenodd; fill:none; - } -.highlightOutline.hovered:is(.canvasWrapper svg):not(.free):not(.selected){ + &:not(.free){ + &.hovered:not(.selected){ stroke:var(--hover-outline-color); stroke-width:var(--outline-width); } -.highlightOutline.selected:is(.canvasWrapper svg):not(.free) .mainOutline{ + &.selected{ + .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{ + .secondaryOutline{ stroke:var(--outline-color); stroke-width:var(--outline-width); } + } + } -.highlightOutline.free.hovered:is(.canvasWrapper svg):not(.selected){ + &.free{ + &.hovered:not(.selected){ stroke:var(--hover-outline-color); stroke-width:calc(2 * var(--outline-width)); } -.highlightOutline.free.selected:is(.canvasWrapper svg) .mainOutline{ + &.selected{ + .mainOutline{ stroke:var(--outline-around-color); stroke-width:calc( 2 * (var(--outline-width) + var(--outline-around-width)) ); } -.highlightOutline.free.selected:is(.canvasWrapper svg) .secondaryOutline{ + .secondaryOutline{ stroke:var(--outline-color); stroke-width:calc(2 * var(--outline-width)); } + } + } + } + } +} .toggle-button{ --button-background-color:color-mix(in srgb, currentColor 7%, transparent); @@ -1858,55 +1612,21 @@ currentColor 21%, transparent ); - --csstools-light-dark-toggle--59:var(--csstools-color-scheme--light) #0df; - --color-accent-primary:var(--csstools-light-dark-toggle--59, #0060df); - --csstools-light-dark-toggle--60:var(--csstools-color-scheme--light) #80ebff; - --color-accent-primary-hover:var(--csstools-light-dark-toggle--60, #0250bb); - --csstools-light-dark-toggle--61:var(--csstools-color-scheme--light) #aaf2ff; - --color-accent-primary-active:var(--csstools-light-dark-toggle--61, #054096); + --color-accent-primary:light-dark(#0060df, #0df); + --color-accent-primary-hover:light-dark(#0250bb, #80ebff); + --color-accent-primary-active:light-dark(#054096, #aaf2ff); --border-radius-circle:9999px; --border-width:1px; --size-item-small:16px; --size-item-large:32px; - --csstools-light-dark-toggle--62:var(--csstools-color-scheme--light) #1c1b22; - --color-canvas:var(--csstools-light-dark-toggle--62, white); + --color-canvas:light-dark(white, #1c1b22); --background-color-canvas:var(--color-canvas); - --csstools-light-dark-toggle--63:var(--csstools-color-scheme--light) #f9f9fa; - --border-color-interactive:var(--csstools-light-dark-toggle--63, #8f8f9d); + --border-color-interactive:light-dark(#8f8f9d, #f9f9fa); --border-color-interactive-hover:var(--border-color-interactive); --border-color-interactive-active:var(--border-color-interactive); --focus-outline-offset:2px; -} -@supports (color: light-dark(red, red)){ -.toggle-button{ - --color-accent-primary:light-dark(#0060df, #0df); - --color-accent-primary-hover:light-dark(#0250bb, #80ebff); - --color-accent-primary-active:light-dark(#054096, #aaf2ff); - --color-canvas:light-dark(white, #1c1b22); - --border-color-interactive:light-dark(#8f8f9d, #f9f9fa); -} -} - -@supports not (color: light-dark(tan, tan)){ - -.toggle-button *{ - --csstools-light-dark-toggle--59:var(--csstools-color-scheme--light) #0df; - --color-accent-primary:var(--csstools-light-dark-toggle--59, #0060df); - --csstools-light-dark-toggle--60:var(--csstools-color-scheme--light) #80ebff; - --color-accent-primary-hover:var(--csstools-light-dark-toggle--60, #0250bb); - --csstools-light-dark-toggle--61:var(--csstools-color-scheme--light) #aaf2ff; - --color-accent-primary-active:var(--csstools-light-dark-toggle--61, #054096); - --csstools-light-dark-toggle--62:var(--csstools-color-scheme--light) #1c1b22; - --color-canvas:var(--csstools-light-dark-toggle--62, white); - --csstools-light-dark-toggle--63:var(--csstools-color-scheme--light) #f9f9fa; - --border-color-interactive:var(--csstools-light-dark-toggle--63, #8f8f9d); - } -} - -@media (forced-colors: active){ - -.toggle-button{ + @media (forced-colors: active){ --color-accent-primary:ButtonText; --color-accent-primary-hover:SelectedItem; --color-accent-primary-active:SelectedItem; @@ -1916,8 +1636,8 @@ --border-color-interactive-active:ButtonText; --color-canvas:ButtonText; --background-color-canvas:Canvas; -} } +} .toggle-button{ --toggle-background-color:var(--button-background-color); @@ -1960,24 +1680,23 @@ border-radius:var(--toggle-border-radius); background-color:var(--toggle-background-color); box-sizing:border-box; -} -.toggle-button:focus-visible{ + &:focus-visible{ outline:var(--focus-outline); outline-offset:var(--focus-outline-offset); } -.toggle-button:enabled:hover{ + &:enabled:hover{ background-color:var(--toggle-background-color-hover); border-color:var(--toggle-border-color); } -.toggle-button:enabled:hover:active{ + &:enabled:hover:active{ background-color:var(--toggle-background-color-active); border-color:var(--toggle-border-color); } -.toggle-button::before{ + &::before{ display:block; content:""; background-color:var(--toggle-dot-background-color); @@ -1987,34 +1706,37 @@ 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{ + &:enabled:hover{ background-color:var(--toggle-background-color-pressed-hover); border-color:transparent; } -.toggle-button[aria-pressed="true"]:enabled:hover:active{ + &:enabled:hover:active{ background-color:var(--toggle-background-color-pressed-active); border-color:transparent; } -.toggle-button[aria-pressed="true"]::before{ + &::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{ + &:enabled:hover::before, + &: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{ + &:-moz-locale-dir(rtl)::before, + &:dir(rtl)::before{ translate:calc(-1 * var(--toggle-dot-transform-x)); } +} @media (prefers-reduced-motion: no-preference){ .toggle-button::before{ @@ -2034,16 +1756,16 @@ .toggle-button[aria-pressed="true"]:enabled{ border-color:var(--toggle-border-color); position:relative; - } - .toggle-button[aria-pressed="true"]:enabled:hover{ + &:hover{ border-color:var(--toggle-border-color-hover); - } - .toggle-button[aria-pressed="true"]:enabled:hover:active{ + &: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{ @@ -2079,48 +1801,18 @@ :root{ --clear-signature-button-icon:url(images/editor-toolbar-delete.svg); - --csstools-light-dark-toggle--64:var(--csstools-color-scheme--light) #2b2a33; - --signature-bg:var(--csstools-light-dark-toggle--64, #f9f9fb); - --csstools-light-dark-toggle--65:var(--csstools-color-scheme--light) var(--signature-bg); - --signature-hover-bg:var(--csstools-light-dark-toggle--65, #f0f0f4); + --signature-bg:light-dark(#f9f9fb, #2b2a33); + --signature-hover-bg:light-dark(#f0f0f4, var(--signature-bg)); --button-signature-bg:transparent; --button-signature-color:var(--main-color); - --csstools-light-dark-toggle--66:var(--csstools-color-scheme--light) #5b5b66; - --button-signature-active-bg:var(--csstools-light-dark-toggle--66, #cfcfd8); + --button-signature-active-bg:light-dark(#cfcfd8, #5b5b66); --button-signature-active-border:none; --button-signature-active-color:var(--button-signature-color); --button-signature-border:none; - --csstools-light-dark-toggle--67:var(--csstools-color-scheme--light) #52525e; - --button-signature-hover-bg:var(--csstools-light-dark-toggle--67, #e0e0e6); - --button-signature-hover-color:var(--button-signature-color); -} - -@supports (color: light-dark(red, red)){ -:root{ - --signature-bg:light-dark(#f9f9fb, #2b2a33); - --signature-hover-bg:light-dark(#f0f0f4, var(--signature-bg)); - --button-signature-active-bg:light-dark(#cfcfd8, #5b5b66); --button-signature-hover-bg:light-dark(#e0e0e6, #52525e); -} -} - -@supports not (color: light-dark(tan, tan)){ - -:root *{ - --csstools-light-dark-toggle--64:var(--csstools-color-scheme--light) #2b2a33; - --signature-bg:var(--csstools-light-dark-toggle--64, #f9f9fb); - --csstools-light-dark-toggle--65:var(--csstools-color-scheme--light) var(--signature-bg); - --signature-hover-bg:var(--csstools-light-dark-toggle--65, #f0f0f4); - --csstools-light-dark-toggle--66:var(--csstools-color-scheme--light) #5b5b66; - --button-signature-active-bg:var(--csstools-light-dark-toggle--66, #cfcfd8); - --csstools-light-dark-toggle--67:var(--csstools-color-scheme--light) #52525e; - --button-signature-hover-bg:var(--csstools-light-dark-toggle--67, #e0e0e6); - } -} - -@media screen and (forced-colors: active){ + --button-signature-hover-color:var(--button-signature-color); -:root{ + @media screen and (forced-colors: active){ --signature-bg:HighlightText; --signature-hover-bg:var(--signature-bg); --button-signature-bg:HighlightText; @@ -2130,54 +1822,47 @@ --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{ + @media screen and (forced-colors: active){ --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{ + .mainContainer{ width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:12px; - } -:is(.signatureDialog .mainContainer) span:not([role="sectionhead"]){ + span:not([role="sectionhead"]){ font-size:13px; font-style:normal; font-weight:400; line-height:normal; } -:is(.signatureDialog .mainContainer) .title{ + .title{ margin-inline-start:16px; } + } -.signatureDialog .inputWithClearButton{ + .inputWithClearButton{ --button-dimension:24px; --clear-button-icon:url(images/messageBar_closingButton.svg); @@ -2186,9 +1871,8 @@ display:flex; align-items:center; justify-content:center; - } -:is(.signatureDialog .inputWithClearButton) > input{ + > input{ width:100%; height:32px; padding-inline:8px calc(4px + var(--button-dimension)); @@ -2197,7 +1881,7 @@ border:1px solid var(--border-color); } -:is(.signatureDialog .inputWithClearButton) .clearInputButton{ + .clearInputButton{ position:absolute; inset-block-start:4px; inset-inline-end:4px; @@ -2212,6 +1896,8 @@ padding:0; border:0; } + } +} #addSignatureDialog{ --secondary-color:var(--text-secondary-color); @@ -2260,11 +1946,8 @@ --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{ + @media (prefers-color-scheme: dark){ --dialog-bg-color:#42414d; --bg-hover:#52525e; --primary-color:#fbfbfe; @@ -2278,12 +1961,9 @@ #2b2a33, transparent 40% ); -} } -@media screen and (forced-colors: active){ - -#addSignatureDialog{ + @media screen and (forced-colors: active){ --secondary-color:ButtonText; --bg:HighlightText; --bg-hover:var(--bg); @@ -2321,10 +2001,9 @@ --thickness-label-color:CanvasText; --thickness-slider-color:ButtonText; --thickness-border:1px solid var(--border-color); -} } -#addSignatureDialog #addSignatureDialogLabel{ + #addSignatureDialogLabel{ overflow:hidden; position:absolute; inset:0; @@ -2332,7 +2011,7 @@ height:0; } -#addSignatureDialog.waiting::after{ + &.waiting::after{ content:""; cursor:wait; position:absolute; @@ -2341,14 +2020,14 @@ height:100%; } -:is(#addSignatureDialog .mainContainer) [role="tablist"]{ + .mainContainer{ + [role="tablist"]{ width:100%; display:flex; align-items:flex-start; gap:0; - } -:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]{ + > [role="tab"]{ flex:1 0 0; align-self:stretch; background-color:var(--tab-bg); @@ -2368,9 +2047,8 @@ line-height:normal; font-weight:400; color:var(--tab-text-color); - } -:is(:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]):hover{ + &: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); @@ -2378,27 +2056,29 @@ color:var(--tab-text-hover-color); } -:is(:is(:is(#addSignatureDialog .mainContainer) [role="tablist"]) > [role="tab"]):focus-visible{ + &: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"]){ + &[aria-selected="true"]{ 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{ + &: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{ + #addSignatureActionContainer{ width:100%; height:auto; display:flex; @@ -2408,18 +2088,16 @@ gap:12px; padding-inline:16px; box-sizing:border-box; - } -:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]{ + > [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{ + > svg{ position:absolute; inset:0; width:100%; @@ -2427,11 +2105,10 @@ background-color:transparent; } -#addSignatureTypeContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]){ + &#addSignatureTypeContainer{ display:none; - } -#addSignatureTypeContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureTypeInput{ + #addSignatureTypeInput{ position:absolute; inset:0; width:100%; @@ -2447,9 +2124,8 @@ font-size:44px; font-style:italic; font-weight:400; - } -:is(#addSignatureTypeContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureTypeInput)::-moz-placeholder{ + &::-moz-placeholder{ color:var(--signature-placeholder-color); text-align:center; @@ -2460,7 +2136,7 @@ line-height:normal; } -:is(#addSignatureTypeContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureTypeInput)::placeholder{ + &::placeholder{ color:var(--signature-placeholder-color); text-align:center; @@ -2470,12 +2146,13 @@ font-size:44px; line-height:normal; } + } + } -#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]){ + &#addSignatureDrawContainer{ display:none; - } -#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > span{ + > span{ position:absolute; top:0; left:0; @@ -2492,20 +2169,20 @@ user-select:none; } -#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > svg{ + > 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{ + &:hover{ cursor:var(--draw-cursor); } + } -#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness{ + #thickness{ position:absolute; width:100%; inset-block-end:0; @@ -2513,13 +2190,12 @@ align-items:center; justify-content:center; pointer-events:none; - } -:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > span{ + > span{ color:var(--signature-draw-placeholder-color); } -:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div{ + > div{ width:auto; height:auto; display:flex; @@ -2535,45 +2211,46 @@ pointer-events:auto; position:relative; top:1px; - } -:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > label{ + > label{ color:var(--thickness-label-color); } -:is(:is(#addSignatureDrawContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #thickness) > div) > input{ + > 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{ + &::-webkit-slider-runnable-track, + &::-moz-range-track, + &::-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{ + &::-webkit-slider-thumb, + &::-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"]){ + &#addSignatureImageContainer{ display:none; - } -#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) > svg{ + > svg{ stroke:none; stroke-width:0; fill:var(--signature-color); fill-opacity:1; } -#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureImagePlaceholder{ + #addSignatureImagePlaceholder{ position:absolute; top:0; left:0; @@ -2584,66 +2261,68 @@ flex-direction:column; align-items:center; justify-content:center; - } -:is(#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureImagePlaceholder) span{ + span{ color:var(--signature-placeholder-color); } -:is(#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureImagePlaceholder) a{ + 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{ + &:hover{ color:var(--open-link-hover-fg); } + } + } -#addSignatureImageContainer:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) > [role="tabpanel"]) #addSignatureFilePicker{ + #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{ + &[data-selected="type"] > #addSignatureTypeContainer, + &[data-selected="draw"] > #addSignatureDrawContainer, + &[data-selected="image"] > #addSignatureImageContainer{ display:block; } -:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls{ + #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{ + #horizontalContainer{ display:flex; align-items:flex-end; gap:16px; align-self:stretch; - } -:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #addSignatureDescriptionContainer{ + #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{ + &:has(input:disabled) > label{ opacity:0.4; } -:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #addSignatureDescriptionContainer) > label{ + > label{ width:auto; } + } -:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton{ + #clearSignatureButton{ display:flex; height:32px; padding:4px 8px; @@ -2653,9 +2332,8 @@ 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{ + > span{ display:flex; height:24px; align-items:center; @@ -2663,9 +2341,8 @@ flex-shrink:0; color:var(--clear-signature-button-color); - } -:is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton) > span)::after{ + &::after{ content:""; display:inline-block; width:16px; @@ -2677,109 +2354,111 @@ background-color:var(--clear-signature-button-color); flex-shrink:0; } + } -:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):hover{ + &:hover{ background-color:var(--clear-signature-button-bg-hover); - } -:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):hover > span{ + > span{ color:var(--clear-signature-button-hover-color); - } - -:is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):hover > span)::after{ + &::after{ background-color:var(--clear-signature-button-hover-color); } + } + } -:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):active{ + &:active{ background-color:var(--clear-signature-button-bg-active); - } -:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):active > span{ + > span{ color:var(--clear-signature-button-active-color); - } - -:is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):active > span)::after{ + &::after{ background-color:var(--clear-signature-button-active-color); } + } + } -:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):focus-visible{ + &:focus-visible{ background-color:var(--clear-signature-button-bg-focus); - } -:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):focus-visible > span{ + > span{ color:var(--clear-signature-button-focus-color); - } - -:is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):focus-visible > span)::after{ + &::after{ background-color:var(--clear-signature-button-focus-color); } + } + } -:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):disabled{ + &: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{ + > span{ color:var(--clear-signature-button-disabled-color); - } - -:is(:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #horizontalContainer) #clearSignatureButton):disabled > span)::after{ + &::after{ background-color:var( --clear-signature-button-disabled-color ); } + } + } + } + } -:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer{ + #addSignatureSaveContainer{ display:grid; grid-template-columns:max-content auto; gap:4px; width:100%; - } -:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer) > input{ + > input{ margin:0; - } -:is(:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer) > input):disabled + label{ + &:disabled + label{ opacity:0.4; } + } -:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer) > label{ + > label{ -webkit-user-select:none; -moz-user-select:none; user-select:none; } -:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer):not(.fullStorage) #addSignatureSaveWarning{ + &:not(.fullStorage) #addSignatureSaveWarning{ display:none; } -.fullStorage:is(:is(:is(:is(#addSignatureDialog .mainContainer) #addSignatureActionContainer) #addSignatureControls) #addSignatureSaveContainer) #addSignatureSaveWarning{ + &.fullStorage #addSignatureSaveWarning{ display:block; opacity:1; color:var(--save-warning-color); font-size:11px; } + } + } + } + } +} -#editSignatureDescriptionDialog .mainContainer{ +#editSignatureDescriptionDialog{ + .mainContainer{ padding-inline:16px; box-sizing:border-box; - } -:is(#editSignatureDescriptionDialog .mainContainer) .title{ + .title{ margin-inline-start:0; } -:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView{ + #editSignatureDescriptionAndView{ width:auto; display:flex; justify-content:flex-end; align-items:flex-start; gap:12px; align-self:stretch; - } -:is(:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView) #editSignatureDescriptionContainer{ + #editSignatureDescriptionContainer{ display:flex; flex-direction:column; align-items:flex-start; @@ -2787,14 +2466,13 @@ flex:1 1 auto; } -:is(:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView) > svg{ + > svg{ width:210px; height:180px; padding:8px; background-color:var(--signature-bg); - } -:is(:is(:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView) > svg) > path{ + > path{ stroke:var(--button-signature-color); stroke-width:1px; stroke-linecap:round; @@ -2802,66 +2480,69 @@ stroke-miterlimit:10; vector-effect:non-scaling-stroke; fill:none; - } -.contours:is(:is(:is(:is(#editSignatureDescriptionDialog .mainContainer) #editSignatureDescriptionAndView) > svg) > path){ + &.contours{ fill:var(--button-signature-color); stroke-width:0.5px; } + } + } + } + } +} #editorSignatureParamsToolbar{ padding:8px; -} -#editorSignatureParamsToolbar #addSignatureDoorHanger{ + #addSignatureDoorHanger{ gap:8px; padding:2px; - } -:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer{ + .toolbarAddSignatureButtonContainer{ height:32px; display:flex; justify-content:space-between; align-items:center; align-self:stretch; gap:8px; - } -:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button{ + 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{ + &:hover{ background-color:var(--button-signature-hover-bg); } -:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):active{ + &: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{ + &::before{ background-color:var(--button-signature-active-color); } + } -:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):focus-visible{ + &:focus-visible{ outline:var(--focus-ring-outline); - } -:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) button):focus-visible::before{ + &::before{ background-color:var(--button-signature-color); } + } + } -:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .deleteButton)::before{ + .deleteButton{ + &::before{ -webkit-mask-image:var(--clear-signature-button-icon); mask-image:var(--clear-signature-button-icon); } + } -:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton{ + .toolbarAddSignatureButton{ width:calc(0.8 * var(--editor-toolbar-min-width)); height:100%; min-height:var(--menuitem-height); @@ -2881,9 +2562,8 @@ white-space:normal; cursor:default; overflow:hidden; - } -:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton) > svg{ + > svg{ display:inline-block; height:100%; aspect-ratio:1; @@ -2893,9 +2573,8 @@ box-sizing:border-box; border:none; border-radius:4px; - } -:is(:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton) > svg) > path{ + > path{ stroke:var(--button-signature-color); stroke-width:1px; stroke-linecap:round; @@ -2903,32 +2582,35 @@ stroke-miterlimit:10; vector-effect:non-scaling-stroke; fill:none; - } -.contours:is(:is(:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton) > svg) > path){ + &.contours{ fill:var(--button-signature-color); stroke-width:0.5px; } + } + } -:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton):is(:hover,:active) > svg{ + &: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{ + &:hover{ + > span{ color:var(--button-signature-hover-color); } + } -:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton):active{ + &:active{ background-color:var(--button-signature-active-bg); } -:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton):is([disabled="disabled"],[disabled]){ + &:is([disabled="disabled"], [disabled]){ opacity:0.5; pointer-events:none; } -:is(:is(:is(#editorSignatureParamsToolbar #addSignatureDoorHanger) .toolbarAddSignatureButtonContainer) .toolbarAddSignatureButton) > span{ + > span{ height:auto; text-overflow:ellipsis; white-space:nowrap; @@ -2940,15 +2622,19 @@ line-height:normal; overflow:hidden; } + } + } + } +} .editDescription.altText{ --alt-text-add-image:url(images/editor-toolbar-edit.svg) !important; -} -.editDescription.altText::before{ + &::before{ width:16px !important; height:16px !important; } +} .commentPopup, #commentManagerDialog{ @@ -2966,18 +2652,16 @@ #commentManagerDialog{ --comment-close-button-icon:url(images/comment-closeButton.svg); -} -#commentManagerDialog .mainContainer{ + .mainContainer{ width:100%; height:auto; display:flex; flex-direction:column; align-items:flex-start; gap:4px; - } -:is(#commentManagerDialog .mainContainer) #commentManagerToolbar{ + #commentManagerToolbar{ width:100%; height:32px; display:flex; @@ -2989,52 +2673,21 @@ cursor:move; } -:is(#commentManagerDialog .mainContainer) #commentManagerTextInput{ + #commentManagerTextInput{ width:100%; min-height:132px; margin-bottom:12px; } + } +} .annotationLayer.disabled :is(.annotationCommentButton){ display:none; } -:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton{ - --csstools-color-scheme--light:initial; +:is(.annotationLayer, .annotationEditorLayer){ + .annotationCommentButton{ color-scheme:light dark; - --csstools-light-dark-toggle--68:var(--csstools-color-scheme--light) #1c1b22; - --comment-button-bg:var(--csstools-light-dark-toggle--68, white); - --csstools-light-dark-toggle--69:var(--csstools-color-scheme--light) #fbfbfe; - --comment-button-fg:var(--csstools-light-dark-toggle--69, #5b5b66); - --csstools-light-dark-toggle--70:var(--csstools-color-scheme--light) #a6ecf4; - --comment-button-active-bg:var(--csstools-light-dark-toggle--70, #0041a4); - --csstools-light-dark-toggle--71:var(--csstools-color-scheme--light) #15141a; - --comment-button-active-fg:var(--csstools-light-dark-toggle--71, white); - --csstools-light-dark-toggle--72:var(--csstools-color-scheme--light) #61dce9; - --comment-button-hover-bg:var(--csstools-light-dark-toggle--72, #0053cb); - --csstools-light-dark-toggle--73:var(--csstools-color-scheme--light) #15141a; - --comment-button-hover-fg:var(--csstools-light-dark-toggle--73, white); - --csstools-light-dark-toggle--74:var(--csstools-color-scheme--light) #00cadb; - --comment-button-selected-bg:var(--csstools-light-dark-toggle--74, #0062fa); - --csstools-light-dark-toggle--75:var(--csstools-color-scheme--light) #bfbfc9; - --comment-button-border-color:var(--csstools-light-dark-toggle--75, #8f8f9d); - --comment-button-active-border-color:var(--comment-button-active-bg); - --csstools-light-dark-toggle--76:var(--csstools-color-scheme--light) #3a3944; - --comment-button-focus-border-color:var(--csstools-light-dark-toggle--76, #cfcfd8); - --comment-button-hover-border-color:var(--comment-button-hover-bg); - --comment-button-selected-border-color:var(--comment-button-selected-bg); - --csstools-light-dark-toggle--77:var(--csstools-color-scheme--light) #15141a; - --comment-button-selected-fg:var(--csstools-light-dark-toggle--77, white); - --comment-button-dim:24px; - --csstools-light-dark-toggle--78:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); - --csstools-light-dark-toggle--79:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); - --comment-button-box-shadow:0 0.25px 0.75px 0 var(--csstools-light-dark-toggle--78, rgb(0 0 0 / 0.05)), 0 2px 6px 0 var(--csstools-light-dark-toggle--79, rgb(0 0 0 / 0.1)); - --csstools-light-dark-toggle--80:var(--csstools-color-scheme--light) #00cadb; - --comment-button-focus-outline-color:var(--csstools-light-dark-toggle--80, #0062fa); - } - -@supports (color: light-dark(red, red)){ -:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton{ --comment-button-bg:light-dark(white, #1c1b22); --comment-button-fg:light-dark(#5b5b66, #fbfbfe); --comment-button-active-bg:light-dark(#0041a4, #a6ecf4); @@ -3043,64 +2696,16 @@ --comment-button-hover-fg:light-dark(white, #15141a); --comment-button-selected-bg:light-dark(#0062fa, #00cadb); --comment-button-border-color:light-dark(#8f8f9d, #bfbfc9); + --comment-button-active-border-color:var(--comment-button-active-bg); --comment-button-focus-border-color:light-dark(#cfcfd8, #3a3944); + --comment-button-hover-border-color:var(--comment-button-hover-bg); + --comment-button-selected-border-color:var(--comment-button-selected-bg); --comment-button-selected-fg:light-dark(white, #15141a); - } -} - -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ -:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton{ + --comment-button-dim:24px; --comment-button-box-shadow:0 0.25px 0.75px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), 0 2px 6px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); - } -} - -@supports (color: light-dark(red, red)){ -:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton{ --comment-button-focus-outline-color:light-dark(#0062fa, #00cadb); - } -} - -@supports not (color: light-dark(tan, tan)){ - -:is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton) *{ - --csstools-light-dark-toggle--68:var(--csstools-color-scheme--light) #1c1b22; - --comment-button-bg:var(--csstools-light-dark-toggle--68, white); - --csstools-light-dark-toggle--69:var(--csstools-color-scheme--light) #fbfbfe; - --comment-button-fg:var(--csstools-light-dark-toggle--69, #5b5b66); - --csstools-light-dark-toggle--70:var(--csstools-color-scheme--light) #a6ecf4; - --comment-button-active-bg:var(--csstools-light-dark-toggle--70, #0041a4); - --csstools-light-dark-toggle--71:var(--csstools-color-scheme--light) #15141a; - --comment-button-active-fg:var(--csstools-light-dark-toggle--71, white); - --csstools-light-dark-toggle--72:var(--csstools-color-scheme--light) #61dce9; - --comment-button-hover-bg:var(--csstools-light-dark-toggle--72, #0053cb); - --csstools-light-dark-toggle--73:var(--csstools-color-scheme--light) #15141a; - --comment-button-hover-fg:var(--csstools-light-dark-toggle--73, white); - --csstools-light-dark-toggle--74:var(--csstools-color-scheme--light) #00cadb; - --comment-button-selected-bg:var(--csstools-light-dark-toggle--74, #0062fa); - --csstools-light-dark-toggle--75:var(--csstools-color-scheme--light) #bfbfc9; - --comment-button-border-color:var(--csstools-light-dark-toggle--75, #8f8f9d); - --csstools-light-dark-toggle--76:var(--csstools-color-scheme--light) #3a3944; - --comment-button-focus-border-color:var(--csstools-light-dark-toggle--76, #cfcfd8); - --csstools-light-dark-toggle--77:var(--csstools-color-scheme--light) #15141a; - --comment-button-selected-fg:var(--csstools-light-dark-toggle--77, white); - --csstools-light-dark-toggle--78:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); - --csstools-light-dark-toggle--79:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); - --comment-button-box-shadow:0 0.25px 0.75px 0 var(--csstools-light-dark-toggle--78, rgb(0 0 0 / 0.05)), 0 2px 6px 0 var(--csstools-light-dark-toggle--79, rgb(0 0 0 / 0.1)); - --csstools-light-dark-toggle--80:var(--csstools-color-scheme--light) #00cadb; - --comment-button-focus-outline-color:var(--csstools-light-dark-toggle--80, #0062fa); - } -} -@media (prefers-color-scheme: dark){ - -:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton{ - --csstools-color-scheme--light:; - } -} - -@media screen and (forced-colors: active){ - -:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton{ + @media screen and (forced-colors: active){ --comment-button-bg:ButtonFace; --comment-button-fg:ButtonText; --comment-button-hover-bg:SelectedItemText; @@ -3114,11 +2719,8 @@ --comment-button-focus-outline-color:CanvasText; --comment-button-selected-bg:ButtonBorder; --comment-button-selected-fg:ButtonFace; - } } -:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton{ - position:absolute; width:var(--comment-button-dim); height:var(--comment-button-dim); @@ -3132,13 +2734,12 @@ margin:0; box-sizing:border-box; pointer-events:auto; - } -[dir="rtl"] :is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton){ + &:dir(rtl){ border-radius:6px 6px 0; } -:is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton)::before{ + &::before{ content:""; display:inline-block; width:100%; @@ -3155,38 +2756,40 @@ transform:scaleX(var(--dir-factor)); } -:is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton):focus-visible{ + &:focus-visible{ outline:2px solid var(--comment-button-focus-outline-color); outline-offset:1px; border-color:var(--comment-button-focus-border-color); } -:is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton):hover{ + &:hover{ background-color:var(--comment-button-hover-bg) !important; border-color:var(--comment-button-hover-border-color); - } -:is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton):hover::before{ + &::before{ background-color:var(--comment-button-hover-fg); } + } -:is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton):active{ + &:active{ background-color:var(--comment-button-active-bg) !important; border-color:var(--comment-button-active-border-color); - } -:is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton):active::before{ + &::before{ background-color:var(--comment-button-active-fg); } + } -.selected:is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton){ + &.selected{ background-color:var(--comment-button-selected-bg) !important; border-color:var(--comment-button-selected-border-color); - } -.selected:is(:is(.annotationLayer,.annotationEditorLayer) .annotationCommentButton)::before{ + &::before{ background-color:var(--comment-button-selected-fg); } + } + } +} #editorCommentsSidebar, .commentPopup{ @@ -3194,139 +2797,45 @@ --comment-popup-edit-button-icon:url(images/comment-popup-editButton.svg); --comment-popup-delete-button-icon:url(images/editor-toolbar-delete.svg); - --csstools-light-dark-toggle--81:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.69); - - --comment-date-fg-color:var(--csstools-light-dark-toggle--81, rgb(21 20 26 / 0.69)); - --csstools-light-dark-toggle--82:var(--csstools-color-scheme--light) #1c1b22; - --comment-bg-color:var(--csstools-light-dark-toggle--82, #f9f9fb); - --csstools-light-dark-toggle--83:var(--csstools-color-scheme--light) #2c2b33; - --comment-hover-bg-color:var(--csstools-light-dark-toggle--83, #e0e0e6); - --csstools-light-dark-toggle--84:var(--csstools-color-scheme--light) #3a3944; - --comment-active-bg-color:var(--csstools-light-dark-toggle--84, #d1d1d9); - --comment-hover-brightness:0.89; - --comment-hover-filter:brightness(var(--comment-hover-brightness)); - --comment-active-brightness:0.825; - --comment-active-filter:brightness(var(--comment-active-brightness)); - --csstools-light-dark-toggle--85:var(--csstools-color-scheme--light) #52525e; - --comment-border-color:var(--csstools-light-dark-toggle--85, #f0f0f4); - --csstools-light-dark-toggle--86:var(--csstools-color-scheme--light) #00cadb; - --comment-focus-outline-color:var(--csstools-light-dark-toggle--86, #0062fa); - --csstools-light-dark-toggle--87:var(--csstools-color-scheme--light) #fbfbfe; - --comment-fg-color:var(--csstools-light-dark-toggle--87, #15141a); - --csstools-light-dark-toggle--88:var(--csstools-color-scheme--light) #00317e; - --comment-count-bg-color:var(--csstools-light-dark-toggle--88, #e2f7ff); - --csstools-light-dark-toggle--89:var(--csstools-color-scheme--light) #a6ecf4; - --comment-indicator-active-fg-color:var(--csstools-light-dark-toggle--89, #0041a4); - --comment-indicator-active-filter:brightness( - calc(1 / var(--comment-active-brightness)) - ); - --csstools-light-dark-toggle--90:var(--csstools-color-scheme--light) #fbfbfe; - --comment-indicator-focus-fg-color:var(--csstools-light-dark-toggle--90, #5b5b66); - --csstools-light-dark-toggle--91:var(--csstools-color-scheme--light) #61dce9; - --comment-indicator-hover-fg-color:var(--csstools-light-dark-toggle--91, #0053cb); - --comment-indicator-hover-filter:brightness( - calc(1 / var(--comment-hover-brightness)) - ); - --csstools-light-dark-toggle--92:var(--csstools-color-scheme--light) #00cadb; - --comment-indicator-selected-fg-color:var(--csstools-light-dark-toggle--92, #0062fa); - - --button-comment-bg:transparent; - --button-comment-color:var(--main-color); - --csstools-light-dark-toggle--93:var(--csstools-color-scheme--light) #5b5b66; - --button-comment-active-bg:var(--csstools-light-dark-toggle--93, #cfcfd8); - --button-comment-active-border:none; - --button-comment-active-color:var(--button-comment-color); - --button-comment-border:none; - --csstools-light-dark-toggle--94:var(--csstools-color-scheme--light) #52525e; - --button-comment-hover-bg:var(--csstools-light-dark-toggle--94, #e0e0e6); - --button-comment-hover-color:var(--button-comment-color); - - --csstools-light-dark-toggle--95:var(--csstools-color-scheme--light) #0df; - - --link-fg-color:var(--csstools-light-dark-toggle--95, #0060df); - --csstools-light-dark-toggle--96:var(--csstools-color-scheme--light) #80ebff; - --link-hover-fg-color:var(--csstools-light-dark-toggle--96, #0250bb); -} - -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ -#editorCommentsSidebar, -.commentPopup{ - --comment-date-fg-color:light-dark( rgb(21 20 26 / 0.69), rgb(251 251 254 / 0.69) ); -} -} - -@supports (color: light-dark(red, red)){ -#editorCommentsSidebar, -.commentPopup{ --comment-bg-color:light-dark(#f9f9fb, #1c1b22); --comment-hover-bg-color:light-dark(#e0e0e6, #2c2b33); --comment-active-bg-color:light-dark(#d1d1d9, #3a3944); + --comment-hover-brightness:0.89; + --comment-hover-filter:brightness(var(--comment-hover-brightness)); + --comment-active-brightness:0.825; + --comment-active-filter:brightness(var(--comment-active-brightness)); --comment-border-color:light-dark(#f0f0f4, #52525e); --comment-focus-outline-color:light-dark(#0062fa, #00cadb); --comment-fg-color:light-dark(#15141a, #fbfbfe); --comment-count-bg-color:light-dark(#e2f7ff, #00317e); --comment-indicator-active-fg-color:light-dark(#0041a4, #a6ecf4); + --comment-indicator-active-filter:brightness( + calc(1 / var(--comment-active-brightness)) + ); --comment-indicator-focus-fg-color:light-dark(#5b5b66, #fbfbfe); --comment-indicator-hover-fg-color:light-dark(#0053cb, #61dce9); + --comment-indicator-hover-filter:brightness( + calc(1 / var(--comment-hover-brightness)) + ); --comment-indicator-selected-fg-color:light-dark(#0062fa, #00cadb); + + --button-comment-bg:transparent; + --button-comment-color:var(--main-color); --button-comment-active-bg:light-dark(#cfcfd8, #5b5b66); + --button-comment-active-border:none; + --button-comment-active-color:var(--button-comment-color); + --button-comment-border:none; --button-comment-hover-bg:light-dark(#e0e0e6, #52525e); + --button-comment-hover-color:var(--button-comment-color); --link-fg-color:light-dark(#0060df, #0df); --link-hover-fg-color:light-dark(#0250bb, #80ebff); -} -} - -@supports not (color: light-dark(tan, tan)){ - -:is(#editorCommentsSidebar,.commentPopup) *{ - - --csstools-light-dark-toggle--81:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.69); - - --comment-date-fg-color:var(--csstools-light-dark-toggle--81, rgb(21 20 26 / 0.69)); - --csstools-light-dark-toggle--82:var(--csstools-color-scheme--light) #1c1b22; - --comment-bg-color:var(--csstools-light-dark-toggle--82, #f9f9fb); - --csstools-light-dark-toggle--83:var(--csstools-color-scheme--light) #2c2b33; - --comment-hover-bg-color:var(--csstools-light-dark-toggle--83, #e0e0e6); - --csstools-light-dark-toggle--84:var(--csstools-color-scheme--light) #3a3944; - --comment-active-bg-color:var(--csstools-light-dark-toggle--84, #d1d1d9); - --csstools-light-dark-toggle--85:var(--csstools-color-scheme--light) #52525e; - --comment-border-color:var(--csstools-light-dark-toggle--85, #f0f0f4); - --csstools-light-dark-toggle--86:var(--csstools-color-scheme--light) #00cadb; - --comment-focus-outline-color:var(--csstools-light-dark-toggle--86, #0062fa); - --csstools-light-dark-toggle--87:var(--csstools-color-scheme--light) #fbfbfe; - --comment-fg-color:var(--csstools-light-dark-toggle--87, #15141a); - --csstools-light-dark-toggle--88:var(--csstools-color-scheme--light) #00317e; - --comment-count-bg-color:var(--csstools-light-dark-toggle--88, #e2f7ff); - --csstools-light-dark-toggle--89:var(--csstools-color-scheme--light) #a6ecf4; - --comment-indicator-active-fg-color:var(--csstools-light-dark-toggle--89, #0041a4); - --csstools-light-dark-toggle--90:var(--csstools-color-scheme--light) #fbfbfe; - --comment-indicator-focus-fg-color:var(--csstools-light-dark-toggle--90, #5b5b66); - --csstools-light-dark-toggle--91:var(--csstools-color-scheme--light) #61dce9; - --comment-indicator-hover-fg-color:var(--csstools-light-dark-toggle--91, #0053cb); - --csstools-light-dark-toggle--92:var(--csstools-color-scheme--light) #00cadb; - --comment-indicator-selected-fg-color:var(--csstools-light-dark-toggle--92, #0062fa); - --csstools-light-dark-toggle--93:var(--csstools-color-scheme--light) #5b5b66; - --button-comment-active-bg:var(--csstools-light-dark-toggle--93, #cfcfd8); - --csstools-light-dark-toggle--94:var(--csstools-color-scheme--light) #52525e; - --button-comment-hover-bg:var(--csstools-light-dark-toggle--94, #e0e0e6); - - --csstools-light-dark-toggle--95:var(--csstools-color-scheme--light) #0df; - - --link-fg-color:var(--csstools-light-dark-toggle--95, #0060df); - --csstools-light-dark-toggle--96:var(--csstools-color-scheme--light) #80ebff; - --link-hover-fg-color:var(--csstools-light-dark-toggle--96, #0250bb); - } -} - -@media screen and (forced-colors: active){ -#editorCommentsSidebar, -.commentPopup{ + @media screen and (forced-colors: active){ --comment-date-fg-color:CanvasText; --comment-bg-color:Canvas; --comment-hover-bg-color:Canvas; @@ -3349,8 +2858,8 @@ --button-comment-hover-color:HighlightText; --link-fg-color:LinkText; --link-hover-fg-color:LinkText; -} } +} #editorCommentsSidebar{ display:flex; @@ -3359,27 +2868,24 @@ flex-direction:column; align-items:flex-start; overflow-y:visible; -} -#editorCommentsSidebar #editorCommentsSidebarHeader{ + #editorCommentsSidebarHeader{ width:100%; box-sizing:border-box; padding:16px; display:flex; align-items:center; justify-content:space-between; - } -:is(#editorCommentsSidebar #editorCommentsSidebarHeader) .commentCount{ + .commentCount{ display:flex; align-items:baseline; gap:6px; -webkit-user-select:none; -moz-user-select:none; user-select:none; - } -:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) .commentCount) #editorCommentsSidebarTitle{ + #editorCommentsSidebarTitle{ font:menu; font-style:normal; font-weight:590; @@ -3388,7 +2894,7 @@ color:var(--comment-fg-color); } -:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) .commentCount) #editorCommentsSidebarCount{ + #editorCommentsSidebarCount{ padding:0 4px; border-radius:4px; background-color:var(--comment-count-bg-color); @@ -3402,8 +2908,9 @@ font-weight:400; line-height:normal; } + } -:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton{ + #editorCommentsSidebarCloseButton{ width:32px; height:32px; padding:8px; @@ -3411,9 +2918,8 @@ border:var(--button-comment-border); background-color:var(--button-comment-bg); cursor:pointer; - } -:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton)::before{ + &::before{ content:""; display:inline-block; width:100%; @@ -3427,40 +2933,41 @@ background-color:var(--button-comment-color); } -:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton):hover{ + &:hover{ background-color:var(--button-comment-hover-bg); - } -:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton):hover::before{ + &::before{ background-color:var(--button-comment-hover-color); } + } -:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton):active{ + &:active{ border:var(--button-comment-active-border); background-color:var(--button-comment-active-bg); - } -:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton):active::before{ + &::before{ background-color:var(--button-comment-active-color); } + } -:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton):focus-visible{ + &:focus-visible{ outline:var(--focus-ring-outline); } -:is(:is(#editorCommentsSidebar #editorCommentsSidebarHeader) #editorCommentsSidebarCloseButton) > span{ + > span{ display:inline-block; width:0; height:0; overflow:hidden; } + } + } -#editorCommentsSidebar #editorCommentsSidebarListContainer{ + #editorCommentsSidebarListContainer{ overflow:auto; width:100%; - } -:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList{ + #editorCommentsSidebarList{ display:flex; width:auto; padding:4px 16px; @@ -3468,9 +2975,8 @@ align-items:flex-start; flex-direction:column; list-style-type:none; - } -:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment{ + .sidebarComment{ display:flex; width:auto; padding:8px 16px 16px; @@ -3482,64 +2988,59 @@ border-radius:8px; border:0.5px solid var(--comment-border-color); background-color:var(--comment-bg-color); - } - -@media screen and (forced-colors: active){ -:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):hover{ + &:not(.noComments){ + &:hover{ + @media screen and (forced-colors: active){ background-color:var(--comment-hover-bg-color); - } } - -:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):hover{ filter:var(--comment-hover-filter); - } -:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):hover time::after{ + time::after{ display:inline-block; background-color:var(--comment-indicator-hover-fg-color); filter:var(--comment-indicator-hover-filter); } + } -@media screen and (forced-colors: active){ - -:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):active{ + &:active{ + @media screen and (forced-colors: active){ background-color:var(--comment-active-bg-color); - } } - -:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):active{ filter:var(--comment-active-filter); - } -:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):active time::after{ + time::after{ display:inline-block; background-color:var(--comment-indicator-active-fg-color); filter:var(--comment-indicator-active-filter); } + } -:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):is(:focus,:focus-visible) time::after{ + &:is(:focus, :focus-visible) time::after{ display:inline-block; background-color:var(--comment-indicator-focus-fg-color); } -:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments):focus-visible{ + &:focus-visible{ outline:2px solid var(--comment-focus-outline-color); outline-offset:2px; } -.selected:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments) .sidebarCommentText{ + &.selected{ + .sidebarCommentText{ max-height:-moz-fit-content; max-height:fit-content; -webkit-line-clamp:unset; } -.selected:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment):not(.noComments) time::after{ + time::after{ display:inline-block; background-color:var(--comment-indicator-selected-fg-color); } + } + } -:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) .sidebarCommentText{ + .sidebarCommentText{ font:menu; font-style:normal; font-weight:400; @@ -3554,13 +3055,14 @@ -webkit-line-clamp:2; overflow:hidden; overflow-wrap:break-word; - } -:is(:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) .sidebarCommentText) .richText{ + .richText{ --total-scale-factor:1.5; } + } -.noComments:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) .sidebarCommentText{ + &.noComments{ + .sidebarCommentText{ max-height:-moz-fit-content; max-height:fit-content; -webkit-line-clamp:unset; @@ -3569,7 +3071,7 @@ user-select:none; } -.noComments:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) a{ + a{ font:menu; font-style:normal; font-weight:400; @@ -3580,17 +3082,18 @@ overflow-wrap:break-word; margin-block-start:15px; color:var(--link-fg-color); - } -:is(.noComments:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) a):focus-visible{ + &:focus-visible{ outline:var(--focus-ring-outline); } -:is(.noComments:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) a):hover{ + &:hover{ color:var(--link-hover-fg-color); } + } + } -:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) time{ + time{ width:100%; display:inline-flex; align-items:center; @@ -3601,9 +3104,8 @@ font-weight:400; line-height:normal; font-size:13px; - } -:is(:is(:is(:is(#editorCommentsSidebar #editorCommentsSidebarListContainer) #editorCommentsSidebarList) .sidebarComment) time)::after{ + &::after{ content:""; display:none; width:16px; @@ -3616,62 +3118,23 @@ mask-image:var(--comment-edit-button-icon); transform:scaleX(var(--dir-factor)); } - -.commentPopup{ - --csstools-color-scheme--light:initial; - color-scheme:light dark; - - --csstools-light-dark-toggle--97:var(--csstools-color-scheme--light) #3a3944; - - --divider-color:var(--csstools-light-dark-toggle--97, #cfcfd8); - --csstools-light-dark-toggle--98:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); - --csstools-light-dark-toggle--99:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); - --comment-shadow:0 0.5px 2px 0 var(--csstools-light-dark-toggle--98, rgb(0 0 0 / 0.05)), 0 4px 16px 0 var(--csstools-light-dark-toggle--99, rgb(0 0 0 / 0.1)); + } + } + } + } } -@supports (color: light-dark(red, red)){ .commentPopup{ + color-scheme:light dark; --divider-color:light-dark(#cfcfd8, #3a3944); -} -} - -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ -.commentPopup{ --comment-shadow:0 0.5px 2px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), 0 4px 16px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); -} -} - -@supports not (color: light-dark(tan, tan)){ - -.commentPopup *{ - - --csstools-light-dark-toggle--97:var(--csstools-color-scheme--light) #3a3944; - - --divider-color:var(--csstools-light-dark-toggle--97, #cfcfd8); - --csstools-light-dark-toggle--98:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); - --csstools-light-dark-toggle--99:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); - --comment-shadow:0 0.5px 2px 0 var(--csstools-light-dark-toggle--98, rgb(0 0 0 / 0.05)), 0 4px 16px 0 var(--csstools-light-dark-toggle--99, rgb(0 0 0 / 0.1)); - } -} -@media (prefers-color-scheme: dark){ - -.commentPopup{ - --csstools-color-scheme--light:; -} -} - -@media screen and (forced-colors: active){ - -.commentPopup{ + @media screen and (forced-colors: active){ --divider-color:CanvasText; --comment-shadow:none; -} } -.commentPopup{ - display:flex; flex-direction:column; align-items:flex-start; @@ -3683,29 +3146,28 @@ border:0.5px solid var(--comment-border-color); background:var(--comment-bg-color); box-shadow:var(--comment-shadow); -} -.commentPopup:focus-visible{ + &:focus-visible{ outline:none; } -.commentPopup.dragging{ + &.dragging{ cursor:move !important; - } -.commentPopup.dragging *{ + *{ cursor:move !important; } -.commentPopup.dragging button{ + button{ pointer-events:none !important; } + } -.commentPopup:not(.selected) .commentPopupButtons{ + &:not(.selected) .commentPopupButtons{ visibility:hidden !important; } -.commentPopup hr{ + hr{ width:100%; height:1px; border:none; @@ -3714,7 +3176,7 @@ padding:0; } -.commentPopup .commentPopupTop{ + .commentPopupTop{ display:flex; width:100%; height:auto; @@ -3726,9 +3188,8 @@ -webkit-user-select:none; -moz-user-select:none; user-select:none; - } -:is(.commentPopup .commentPopupTop) .commentPopupTime{ + .commentPopupTime{ font:menu; font-style:normal; font-weight:400; @@ -3737,14 +3198,13 @@ color:var(--comment-date-fg-color); } -:is(.commentPopup .commentPopupTop) .commentPopupButtons{ + .commentPopupButtons{ display:flex; align-items:center; gap:2px; cursor:default; - } -:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button{ + > button{ width:32px; height:32px; padding:8px; @@ -3752,33 +3212,32 @@ border-radius:4px; background-color:var(--button-comment-bg); color:var(--button-comment-color); - } -:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):hover{ + &:hover{ background-color:var(--button-comment-hover-bg); - } -:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):hover::before{ + &::before{ background-color:var(--button-comment-hover-color); } + } -:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):active{ + &:active{ border:var(--button-comment-active-border); background-color:var(--button-comment-active-bg); color:var(--button-comment-active-color); - } -:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):active::before{ + &::before{ background-color:var(--button-comment-active-color); } + } -:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button):focus-visible{ + &:focus-visible{ background-color:var(--button-comment-hover-bg); outline:2px solid var(--comment-focus-outline-color); outline-offset:0; } -:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button)::before{ + &::before{ content:""; display:inline-block; width:100%; @@ -3789,17 +3248,20 @@ mask-position:center; } -.commentPopupEdit:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button)::before{ + &.commentPopupEdit::before{ -webkit-mask-image:var(--comment-popup-edit-button-icon); mask-image:var(--comment-popup-edit-button-icon); } -.commentPopupDelete:is(:is(:is(.commentPopup .commentPopupTop) .commentPopupButtons) > button)::before{ + &.commentPopupDelete::before{ -webkit-mask-image:var(--comment-popup-delete-button-icon); mask-image:var(--comment-popup-delete-button-icon); } + } + } + } -.commentPopup .commentPopupText{ + .commentPopupText{ width:100%; height:auto; @@ -3810,25 +3272,26 @@ font-size:15px; color:var(--comment-fg-color); } +} .commentPopupText, .sidebarCommentText .richText{ margin-block:0; -} -:is(.commentPopupText,.sidebarCommentText .richText) p:first-of-type{ + p:first-of-type{ margin-block:0; } -:is(.commentPopupText,.sidebarCommentText .richText) > *{ + > *{ white-space:pre-wrap; font-size:max(15px, calc(10px * var(--total-scale-factor))); overflow-wrap:break-word; } -:is(.commentPopupText,.sidebarCommentText .richText) span{ + span{ color:var(--comment-fg-color) !important; } +} :root{ --editor-toolbar-vert-offset:6px; @@ -3859,21 +3322,23 @@ --new-alt-text-warning-image:url(images/altText_warning.svg); } -.textLayer.highlighting{ +.textLayer{ + &.highlighting{ cursor:var(--editorFreeHighlight-editing-cursor); - } -.textLayer.highlighting:not(.free) span{ + &:not(.free) span{ cursor:var(--editorHighlight-editing-cursor); - } -[role="img"]:is(.textLayer.highlighting:not(.free) span){ + &[role="img"]{ cursor:var(--editorFreeHighlight-editing-cursor); } + } -.textLayer.highlighting.free span{ + &.free span{ cursor:var(--editorFreeHighlight-editing-cursor); } + } +} .page:has(.annotationEditorLayer.nonEditing) .annotationLayer @@ -3882,9 +3347,12 @@ pointer-events:none; } -:is(#viewerContainer.pdfPresentationMode:fullscreen,.annotationEditorLayer.disabled) .noAltTextBadge{ +#viewerContainer.pdfPresentationMode:fullscreen, +.annotationEditorLayer.disabled{ + .noAltTextBadge{ display:none !important; } +} @media (min-resolution: 1.1dppx){ :root{ @@ -3921,23 +3389,22 @@ font-size:calc(100px * var(--total-scale-factor)); transform-origin:0 0; cursor:auto; -} -.annotationEditorLayer .selectedEditor{ + .selectedEditor{ z-index:100000 !important; } -.annotationEditorLayer.drawing *{ + &.drawing *{ pointer-events:none !important; } -.annotationEditorLayer.getElements{ + &.getElements{ pointer-events:auto !important; - } - -.annotationEditorLayer.getElements > div{ + > div{ pointer-events:auto !important; } + } +} .annotationEditorLayer.waiting{ content:""; @@ -3950,11 +3417,18 @@ .annotationEditorLayer.disabled{ pointer-events:none; -} -.annotationEditorLayer.disabled.highlightEditing :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor,.commentPopup){ + &.highlightEditing + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .signatureEditor, + .commentPopup + ){ pointer-events:auto; } +} .annotationEditorLayer.freetextEditing{ cursor:var(--editorFreeText-editing-cursor); @@ -3978,95 +3452,66 @@ max-width:100%; max-height:100%; border:var(--unfocus-outline); -} -.draggable.selectedEditor:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)){ + &.draggable.selectedEditor{ cursor:move; } -.selectedEditor:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)){ + &.selectedEditor{ border:var(--focus-outline); outline:var(--focus-outline-around); - } -.selectedEditor:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor))::before{ + &::before{ content:""; position:absolute; inset:0; border:var(--focus-outline-around); pointer-events:none; } + } -:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)):hover:not(.selectedEditor){ + &:hover:not(.selectedEditor){ border:var(--hover-outline); outline:var(--hover-outline-around); - } -:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)):hover:not(.selectedEditor)::before{ + &::before{ content:""; position:absolute; inset:0; border:var(--focus-outline-around); } + } +} -:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar{ +.annotationEditorLayer + :is( + .freeTextEditor, + .inkEditor, + .stampEditor, + .highlightEditor, + .signatureEditor + ), +.textLayer{ + .editToolbar{ --editor-toolbar-delete-image:url(images/editor-toolbar-delete.svg); - --csstools-light-dark-toggle--100:var(--csstools-color-scheme--light) #2b2a33; - --editor-toolbar-bg-color:var(--csstools-light-dark-toggle--100, #f0f0f4); + --editor-toolbar-bg-color:light-dark(#f0f0f4, #2b2a33); --editor-toolbar-highlight-image:url(images/toolbarButton-editorHighlight.svg); - --csstools-light-dark-toggle--101:var(--csstools-color-scheme--light) #fbfbfe; - --editor-toolbar-fg-color:var(--csstools-light-dark-toggle--101, #2e2e56); + --editor-toolbar-fg-color:light-dark(#2e2e56, #fbfbfe); --editor-toolbar-border-color:#8f8f9d; --editor-toolbar-hover-border-color:var(--editor-toolbar-border-color); - --csstools-light-dark-toggle--102:var(--csstools-color-scheme--light) #52525e; - --editor-toolbar-hover-bg-color:var(--csstools-light-dark-toggle--102, #e0e0e6); - --editor-toolbar-hover-fg-color:var(--editor-toolbar-fg-color); - --editor-toolbar-hover-outline:none; - --csstools-light-dark-toggle--103:var(--csstools-color-scheme--light) #0df; - --editor-toolbar-focus-outline-color:var(--csstools-light-dark-toggle--103, #0060df); - --editor-toolbar-shadow:0 2px 6px 0 rgb(58 57 68 / 0.2); - --editor-toolbar-height:28px; - --editor-toolbar-padding:2px; - --csstools-light-dark-toggle--104:var(--csstools-color-scheme--light) #54ffbd; - --alt-text-done-color:var(--csstools-light-dark-toggle--104, #2ac3a2); - --csstools-light-dark-toggle--105:var(--csstools-color-scheme--light) #80ebff; - --alt-text-warning-color:var(--csstools-light-dark-toggle--105, #0090ed); - --alt-text-hover-done-color:var(--alt-text-done-color); - --alt-text-hover-warning-color:var(--alt-text-warning-color); - } - -@supports (color: light-dark(red, red)){ -:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar{ - --editor-toolbar-bg-color:light-dark(#f0f0f4, #2b2a33); - --editor-toolbar-fg-color:light-dark(#2e2e56, #fbfbfe); --editor-toolbar-hover-bg-color:light-dark(#e0e0e6, #52525e); + --editor-toolbar-hover-fg-color:var(--editor-toolbar-fg-color); + --editor-toolbar-hover-outline:none; --editor-toolbar-focus-outline-color:light-dark(#0060df, #0df); + --editor-toolbar-shadow:0 2px 6px 0 rgb(58 57 68 / 0.2); + --editor-toolbar-height:28px; + --editor-toolbar-padding:2px; --alt-text-done-color:light-dark(#2ac3a2, #54ffbd); --alt-text-warning-color:light-dark(#0090ed, #80ebff); - } -} - -@supports not (color: light-dark(tan, tan)){ - -:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) *{ - --csstools-light-dark-toggle--100:var(--csstools-color-scheme--light) #2b2a33; - --editor-toolbar-bg-color:var(--csstools-light-dark-toggle--100, #f0f0f4); - --csstools-light-dark-toggle--101:var(--csstools-color-scheme--light) #fbfbfe; - --editor-toolbar-fg-color:var(--csstools-light-dark-toggle--101, #2e2e56); - --csstools-light-dark-toggle--102:var(--csstools-color-scheme--light) #52525e; - --editor-toolbar-hover-bg-color:var(--csstools-light-dark-toggle--102, #e0e0e6); - --csstools-light-dark-toggle--103:var(--csstools-color-scheme--light) #0df; - --editor-toolbar-focus-outline-color:var(--csstools-light-dark-toggle--103, #0060df); - --csstools-light-dark-toggle--104:var(--csstools-color-scheme--light) #54ffbd; - --alt-text-done-color:var(--csstools-light-dark-toggle--104, #2ac3a2); - --csstools-light-dark-toggle--105:var(--csstools-color-scheme--light) #80ebff; - --alt-text-warning-color:var(--csstools-light-dark-toggle--105, #0090ed); - } -} - -@media screen and (forced-colors: active){ + --alt-text-hover-done-color:var(--alt-text-done-color); + --alt-text-hover-warning-color:var(--alt-text-warning-color); -:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar{ + @media screen and (forced-colors: active){ --editor-toolbar-bg-color:ButtonFace; --editor-toolbar-fg-color:ButtonText; --editor-toolbar-border-color:ButtonText; @@ -4080,11 +3525,8 @@ --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; @@ -4096,6 +3538,9 @@ pointer-events:auto; box-sizing:content-box; padding:var(--editor-toolbar-padding); + -webkit-user-select:none; + -moz-user-select:none; + user-select:none; position:absolute; inset-inline-end:0; @@ -4105,37 +3550,35 @@ 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){ + &.hidden{ display:none; } -:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar):has(:focus-visible){ + &:has(:focus-visible){ border-color:transparent; } -[dir="ltr"] :is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar){ + &:dir(ltr){ transform-origin:100% 0; } -[dir="rtl"] :is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar){ + &:dir(rtl){ transform-origin:0 0; } -:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons{ + .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{ + button{ padding:0; } -:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .divider{ + .divider{ width:0; height:calc( 2 * var(--editor-toolbar-padding) + var(--editor-toolbar-height) @@ -4146,11 +3589,10 @@ margin-inline:2px; } -:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .basic{ + .basic{ width:var(--editor-toolbar-height); - } -:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .basic)::before{ + &::before{ content:""; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; @@ -4162,53 +3604,54 @@ height:100%; } -:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .basic):hover::before{ + &:hover::before{ background-color:var(--editor-toolbar-hover-fg-color); } -.highlightButton:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .basic)::before{ + &.highlightButton::before{ -webkit-mask-image:var(--editor-toolbar-highlight-image); mask-image:var(--editor-toolbar-highlight-image); } -.commentButton:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .basic)::before{ + &.commentButton::before{ -webkit-mask-image:var(--comment-edit-button-icon); mask-image:var(--comment-edit-button-icon); } -.deleteButton:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .basic)::before{ + &.deleteButton::before{ -webkit-mask-image:var(--editor-toolbar-delete-image); mask-image:var(--editor-toolbar-delete-image); } + } -:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) > *{ + > *{ height:var(--editor-toolbar-height); } -:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) > :not(.divider){ + > :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{ + &: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{ + &:active{ outline:none; } + } -:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) > :not(.divider)):focus-visible{ + &: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{ + .altText{ --alt-text-add-image:url(images/altText_add.svg); --alt-text-done-image:url(images/altText_done.svg); @@ -4223,13 +3666,12 @@ 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{ + &:disabled{ pointer-events:none; } -:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText)::before{ + &::before{ content:""; -webkit-mask-image:var(--alt-text-add-image); mask-image:var(--alt-text-add-image); @@ -4244,16 +3686,17 @@ margin-inline-end:4px; } -:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText):hover::before{ + &: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{ + &.done::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{ + &.new{ + &::before{ width:16px; height:16px; -webkit-mask-image:var(--new-alt-text-warning-image); @@ -4263,72 +3706,40 @@ mask-size:cover; } -.new:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText):hover::before{ + &: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{ + &.done{ + &::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{ + &: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{ + .tooltip{ display:none; word-wrap:anywhere; - } - -.show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip){ - --csstools-light-dark-toggle--106:var(--csstools-color-scheme--light) #1c1b22; - --alt-text-tooltip-bg:var(--csstools-light-dark-toggle--106, #f0f0f4); - --csstools-light-dark-toggle--107:var(--csstools-color-scheme--light) #fbfbfe; - --alt-text-tooltip-fg:var(--csstools-light-dark-toggle--107, #15141a); - --alt-text-tooltip-border:#8f8f9d; - --csstools-light-dark-toggle--108:var(--csstools-color-scheme--light) #15141a; - --alt-text-tooltip-shadow:0 2px 6px 0 var(--csstools-light-dark-toggle--108, rgb(58 57 68 / 0.2)); - } -@supports (color: light-dark(red, red)){ -.show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip){ + &.show{ --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-border:#8f8f9d; --alt-text-tooltip-shadow:0 2px 6px 0 light-dark(rgb(58 57 68 / 0.2), #15141a); - } -} -@supports not (color: light-dark(tan, tan)){ - -.show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip) *{ - --csstools-light-dark-toggle--106:var(--csstools-color-scheme--light) #1c1b22; - --alt-text-tooltip-bg:var(--csstools-light-dark-toggle--106, #f0f0f4); - --csstools-light-dark-toggle--107:var(--csstools-color-scheme--light) #fbfbfe; - --alt-text-tooltip-fg:var(--csstools-light-dark-toggle--107, #15141a); - --csstools-light-dark-toggle--108:var(--csstools-color-scheme--light) #15141a; - --alt-text-tooltip-shadow:0 2px 6px 0 var(--csstools-light-dark-toggle--108, rgb(58 57 68 / 0.2)); - } -} - -@media screen and (forced-colors: active){ - -.show:is(:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .altText) .tooltip){ + @media screen and (forced-colors: active){ --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; @@ -4351,12 +3762,13 @@ pointer-events:none; } + } + } -:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .comment{ + .comment{ width:var(--editor-toolbar-height); - } -:is(:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.highlightEditor,.signatureEditor),.textLayer) .editToolbar) .buttons) .comment)::before{ + &::before{ content:""; -webkit-mask-image:var(--comment-edit-button-icon); mask-image:var(--comment-edit-button-icon); @@ -4369,6 +3781,10 @@ width:100%; height:100%; } + } + } + } +} .annotationEditorLayer .freeTextEditor{ padding:calc(var(--freetext-padding) * var(--total-scale-factor)); @@ -4436,9 +3852,8 @@ .annotationEditorLayer .stampEditor{ width:auto; height:auto; -} -:is(.annotationEditorLayer .stampEditor) canvas{ + canvas{ position:absolute; width:100%; height:100%; @@ -4447,46 +3862,17 @@ left:0; } -:is(.annotationEditorLayer .stampEditor) .noAltTextBadge{ - --csstools-light-dark-toggle--109:var(--csstools-color-scheme--light) #52525e; - --no-alt-text-badge-border-color:var(--csstools-light-dark-toggle--109, #f0f0f4); - --csstools-light-dark-toggle--110:var(--csstools-color-scheme--light) #fbfbfe; - --no-alt-text-badge-bg-color:var(--csstools-light-dark-toggle--110, #cfcfd8); - --csstools-light-dark-toggle--111:var(--csstools-color-scheme--light) #15141a; - --no-alt-text-badge-fg-color:var(--csstools-light-dark-toggle--111, #5b5b66); - } - -@supports (color: light-dark(red, red)){ -:is(.annotationEditorLayer .stampEditor) .noAltTextBadge{ + .noAltTextBadge{ --no-alt-text-badge-border-color:light-dark(#f0f0f4, #52525e); --no-alt-text-badge-bg-color:light-dark(#cfcfd8, #fbfbfe); --no-alt-text-badge-fg-color:light-dark(#5b5b66, #15141a); - } -} - -@supports not (color: light-dark(tan, tan)){ - -:is(:is(.annotationEditorLayer .stampEditor) .noAltTextBadge) *{ - --csstools-light-dark-toggle--109:var(--csstools-color-scheme--light) #52525e; - --no-alt-text-badge-border-color:var(--csstools-light-dark-toggle--109, #f0f0f4); - --csstools-light-dark-toggle--110:var(--csstools-color-scheme--light) #fbfbfe; - --no-alt-text-badge-bg-color:var(--csstools-light-dark-toggle--110, #cfcfd8); - --csstools-light-dark-toggle--111:var(--csstools-color-scheme--light) #15141a; - --no-alt-text-badge-fg-color:var(--csstools-light-dark-toggle--111, #5b5b66); - } -} -@media screen and (forced-colors: active){ - -:is(.annotationEditorLayer .stampEditor) .noAltTextBadge{ + @media screen and (forced-colors: active){ --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; @@ -4502,9 +3888,8 @@ 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{ + &::before{ content:""; display:inline-block; width:16px; @@ -4515,142 +3900,202 @@ mask-size:cover; background-color:var(--no-alt-text-badge-fg-color); } + } +} -:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers{ +.annotationEditorLayer{ + :is(.freeTextEditor, .inkEditor, .stampEditor, .signatureEditor){ + & > .resizers{ position:absolute; inset:0; z-index:1; - } -.hidden:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers){ + &.hidden{ display:none; } -:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer{ + & > .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){ + &.topLeft{ top:var(--resizer-shift); left:var(--resizer-shift); } -.topMiddle:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ + &.topMiddle{ top:var(--resizer-shift); left:calc(50% + var(--resizer-shift)); } -.topRight:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ + &.topRight{ top:var(--resizer-shift); right:var(--resizer-shift); } -.middleRight:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ + &.middleRight{ top:calc(50% + var(--resizer-shift)); right:var(--resizer-shift); } -.bottomRight:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ + &.bottomRight{ bottom:var(--resizer-shift); right:var(--resizer-shift); } -.bottomMiddle:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ + &.bottomMiddle{ bottom:var(--resizer-shift); left:calc(50% + var(--resizer-shift)); } -.bottomLeft:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ + &.bottomLeft{ bottom:var(--resizer-shift); left:var(--resizer-shift); } -.middleLeft:is(:is(:is(.annotationEditorLayer :is(.freeTextEditor,.inkEditor,.stampEditor,.signatureEditor)) > .resizers) > .resizer){ + &.middleLeft{ 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){ + &[data-main-rotation="0"] + :is([data-editor-rotation="0"], [data-editor-rotation="180"]), + &[data-main-rotation="90"] + :is([data-editor-rotation="270"], [data-editor-rotation="90"]), + &[data-main-rotation="180"] + :is([data-editor-rotation="180"], [data-editor-rotation="0"]), + &[data-main-rotation="270"] + :is([data-editor-rotation="90"], [data-editor-rotation="270"]){ + & > .resizers > .resizer{ + &.topLeft, + &.bottomRight{ 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){ + &.topMiddle, + &.bottomMiddle{ 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){ + &.topRight, + &.bottomLeft{ 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){ + &.middleRight, + &.middleLeft{ 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){ + &[data-main-rotation="0"] + :is([data-editor-rotation="90"], [data-editor-rotation="270"]), + &[data-main-rotation="90"] + :is([data-editor-rotation="0"], [data-editor-rotation="180"]), + &[data-main-rotation="180"] + :is([data-editor-rotation="270"], [data-editor-rotation="90"]), + &[data-main-rotation="270"] + :is([data-editor-rotation="180"], [data-editor-rotation="0"]){ + & > .resizers > .resizer{ + &.topLeft, + &.bottomRight{ 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){ + &.topMiddle, + &.bottomMiddle{ 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){ + &.topRight, + &.bottomLeft{ 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){ + &.middleRight, + &.middleLeft{ 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{ + & + :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){ + &:dir(ltr){ 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){ + &:dir(rtl){ 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{ + & + :is( + [data-main-rotation="0"] [data-editor-rotation="180"], + [data-main-rotation="90"] [data-editor-rotation="90"], + [data-main-rotation="180"] [data-editor-rotation="0"], + [data-main-rotation="270"] [data-editor-rotation="270"] + ){ + .editToolbar{ rotate:180deg; inset-inline-end:100%; inset-block-start:calc(0px - var(--editor-toolbar-vert-offset)); } + } -:is(.annotationEditorLayer :is([data-main-rotation="0"] [data-editor-rotation="270"],[data-main-rotation="90"] [data-editor-rotation="180"],[data-main-rotation="180"] [data-editor-rotation="90"],[data-main-rotation="270"] [data-editor-rotation="0"])) .editToolbar{ + & + :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){ + &:dir(ltr){ 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){ + &:dir(rtl){ inset-inline-start:calc(0px - var(--editor-toolbar-vert-offset)); inset-block-start:0; } + } + } +} -.dialog.altText::backdrop{ +.dialog.altText{ + &::backdrop{ -webkit-mask:url(#alttext-manager-mask); mask:url(#alttext-manager-mask); } - -.dialog.altText.positioned{ + &.positioned{ margin:0; } -.dialog.altText #altTextContainer{ + & #altTextContainer{ width:300px; height:-moz-fit-content; height:fit-content; @@ -4658,114 +4103,99 @@ flex-direction:column; align-items:flex-start; gap:16px; - } -:is(.dialog.altText #altTextContainer) #overallDescription{ + & #overallDescription{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; align-self:stretch; - } -:is(:is(.dialog.altText #altTextContainer) #overallDescription) span{ + & span{ align-self:stretch; } -:is(:is(.dialog.altText #altTextContainer) #overallDescription) .title{ + & .title{ font-size:13px; font-style:normal; font-weight:590; } + } -:is(.dialog.altText #altTextContainer) #addDescription{ + & #addDescription{ display:flex; flex-direction:column; align-items:stretch; gap:8px; - } -:is(:is(.dialog.altText #altTextContainer) #addDescription) .descriptionArea{ + & .descriptionArea{ flex:1; padding-inline:24px 10px; - } -:is(:is(:is(.dialog.altText #altTextContainer) #addDescription) .descriptionArea) textarea{ + textarea{ width:100%; min-height:75px; } + } + } -:is(.dialog.altText #altTextContainer) #buttons{ + & #buttons{ display:flex; justify-content:flex-end; align-items:flex-start; gap:8px; align-self:stretch; } + } +} .dialog.newAltText{ --new-alt-text-ai-disclaimer-icon:url(images/altText_disclaimer.svg); --new-alt-text-spinner-icon:url(images/altText_spinner.svg); - --csstools-light-dark-toggle--112:var(--csstools-color-scheme--light) #2b2a33; - --preview-image-bg-color:var(--csstools-light-dark-toggle--112, #f0f0f4); - --preview-image-border:none; -} - -@supports (color: light-dark(red, red)){ -.dialog.newAltText{ --preview-image-bg-color:light-dark(#f0f0f4, #2b2a33); -} -} - -@supports not (color: light-dark(tan, tan)){ - -.dialog.newAltText *{ - --csstools-light-dark-toggle--112:var(--csstools-color-scheme--light) #2b2a33; - --preview-image-bg-color:var(--csstools-light-dark-toggle--112, #f0f0f4); - } -} - -@media screen and (forced-colors: active){ + --preview-image-border:none; -.dialog.newAltText{ + @media screen and (forced-colors: active){ --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{ + &.noAi{ + #newAltTextDisclaimer, + #newAltTextCreateAutomatically{ display:none !important; } + } -.dialog.newAltText.aiInstalling #newAltTextCreateAutomatically{ + &.aiInstalling{ + #newAltTextCreateAutomatically{ display:none !important; } - -.dialog.newAltText.aiInstalling #newAltTextDownloadModel{ + #newAltTextDownloadModel{ display:flex !important; } + } -.dialog.newAltText.error #newAltTextNotNow{ + &.error{ + #newAltTextNotNow{ display:none !important; } -.dialog.newAltText.error #newAltTextCancel{ + #newAltTextCancel{ display:inline-block !important; } + } -.dialog.newAltText:not(.error) #newAltTextError{ + &:not(.error) #newAltTextError{ display:none !important; } -.dialog.newAltText #newAltTextContainer{ + #newAltTextContainer{ display:flex; width:auto; padding:16px; @@ -4775,18 +4205,16 @@ gap:12px; flex:0 1 auto; line-height:normal; - } -:is(.dialog.newAltText #newAltTextContainer) #mainContent{ + #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{ + #descriptionAndSettings{ display:flex; flex-direction:column; align-items:flex-start; @@ -4795,36 +4223,34 @@ align-self:stretch; } -:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction{ + #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{ + #newAltTextDescriptionContainer{ width:100%; height:70px; position:relative; - } -:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea{ + textarea{ width:100%; height:100%; padding:8px; - } -:is(:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea)::-moz-placeholder{ + &::-moz-placeholder{ color:var(--text-secondary-color); } -:is(:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea)::placeholder{ + &::placeholder{ color:var(--text-secondary-color); } + } -:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) .altTextSpinner{ + .altTextSpinner{ display:none; position:absolute; width:16px; @@ -4837,33 +4263,34 @@ pointer-events:none; } -.loading:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea::-moz-placeholder{ + &.loading{ + textarea::-moz-placeholder{ color:transparent; } - -.loading:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea::placeholder{ + textarea::placeholder{ color:transparent; } -.loading:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) .altTextSpinner{ + .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{ + #newAltTextDescription{ font-size:11px; } -:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDisclaimer{ + #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{ + &::before{ content:""; display:inline-block; width:17px; @@ -4875,15 +4302,16 @@ background-color:var(--text-secondary-color); flex:1 0 auto; } + } + } -:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextDownloadModel{ + #newAltTextDownloadModel{ display:flex; align-items:center; gap:4px; align-self:stretch; - } -:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextDownloadModel)::before{ + &::before{ content:""; display:inline-block; width:16px; @@ -4894,8 +4322,9 @@ mask-size:cover; background-color:var(--text-secondary-color); } + } -:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextImagePreview{ + #newAltTextImagePreview{ width:180px; aspect-ratio:1; display:flex; @@ -4904,52 +4333,28 @@ 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{ + > canvas{ max-width:100%; max-height:100%; } - -.colorPicker{ - --csstools-light-dark-toggle--113:var(--csstools-color-scheme--light) #80ebff; - --hover-outline-color:var(--csstools-light-dark-toggle--113, #0250bb); - --csstools-light-dark-toggle--114:var(--csstools-color-scheme--light) #aaf2ff; - --selected-outline-color:var(--csstools-light-dark-toggle--114, #0060df); - --csstools-light-dark-toggle--115:var(--csstools-color-scheme--light) #52525e; - --swatch-border-color:var(--csstools-light-dark-toggle--115, #cfcfd8); + } + } + } } -@supports (color: light-dark(red, red)){ .colorPicker{ --hover-outline-color:light-dark(#0250bb, #80ebff); --selected-outline-color:light-dark(#0060df, #aaf2ff); --swatch-border-color:light-dark(#cfcfd8, #52525e); -} -} -@supports not (color: light-dark(tan, tan)){ - -.colorPicker *{ - --csstools-light-dark-toggle--113:var(--csstools-color-scheme--light) #80ebff; - --hover-outline-color:var(--csstools-light-dark-toggle--113, #0250bb); - --csstools-light-dark-toggle--114:var(--csstools-color-scheme--light) #aaf2ff; - --selected-outline-color:var(--csstools-light-dark-toggle--114, #0060df); - --csstools-light-dark-toggle--115:var(--csstools-color-scheme--light) #52525e; - --swatch-border-color:var(--csstools-light-dark-toggle--115, #cfcfd8); - } -} - -@media screen and (forced-colors: active){ - -.colorPicker{ + @media screen and (forced-colors: active){ --hover-outline-color:Highlight; --selected-outline-color:var(--hover-outline-color); --swatch-border-color:ButtonText; -} } -.colorPicker .swatch{ + .swatch{ width:16px; height:16px; border:1px solid var(--swatch-border-color); @@ -4959,41 +4364,51 @@ forced-color-adjust:none; } -.colorPicker button:is(:hover,.selected) > .swatch{ + button:is(:hover, .selected) > .swatch{ border:none; } +} .basicColorPicker{ width:28px; -} -.basicColorPicker::-moz-color-swatch{ + &::-moz-color-swatch{ border-radius:100%; margin:0; } -.basicColorPicker::-webkit-color-swatch{ + &::-webkit-color-swatch{ border-radius:100%; margin:0; } +} -.annotationEditorLayer[data-main-rotation="0"] .highlightEditor:not(.free) > .editToolbar{ +.annotationEditorLayer{ + &[data-main-rotation="0"]{ + .highlightEditor:not(.free) > .editToolbar{ rotate:0deg; } + } -.annotationEditorLayer[data-main-rotation="90"] .highlightEditor:not(.free) > .editToolbar{ + &[data-main-rotation="90"]{ + .highlightEditor:not(.free) > .editToolbar{ rotate:270deg; } + } -.annotationEditorLayer[data-main-rotation="180"] .highlightEditor:not(.free) > .editToolbar{ + &[data-main-rotation="180"]{ + .highlightEditor:not(.free) > .editToolbar{ rotate:180deg; } + } -.annotationEditorLayer[data-main-rotation="270"] .highlightEditor:not(.free) > .editToolbar{ + &[data-main-rotation="270"]{ + .highlightEditor:not(.free) > .editToolbar{ rotate:90deg; } + } -.annotationEditorLayer .highlightEditor{ + .highlightEditor{ position:absolute; background:transparent; z-index:1; @@ -5004,13 +4419,12 @@ outline:none; pointer-events:none; transform-origin:0 0; - } -:is(.annotationEditorLayer .highlightEditor):not(.free){ + &:not(.free){ transform:none; } -:is(.annotationEditorLayer .highlightEditor) .internal{ + .internal{ position:absolute; top:0; left:0; @@ -5019,21 +4433,23 @@ pointer-events:auto; } -.disabled:is(.annotationEditorLayer .highlightEditor) .internal{ + &.disabled .internal{ pointer-events:none; } -.selectedEditor:is(.annotationEditorLayer .highlightEditor) .internal{ + &.selectedEditor{ + .internal{ cursor:pointer; } + } -:is(.annotationEditorLayer .highlightEditor) .editToolbar{ + .editToolbar{ --editor-toolbar-colorpicker-arrow-image:url(images/toolbarButton-menuArrow.svg); transform-origin:center !important; - } -:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker{ + .buttons{ + .colorPicker{ position:relative; width:auto; display:flex; @@ -5041,9 +4457,8 @@ align-items:center; gap:4px; padding:4px; - } -:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker)::after{ + &::after{ content:""; -webkit-mask-image:var(--editor-toolbar-colorpicker-arrow-image); mask-image:var(--editor-toolbar-colorpicker-arrow-image); @@ -5057,19 +4472,19 @@ height:12px; } -:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker):hover::after{ + &:hover::after{ background-color:var(--editor-toolbar-hover-fg-color); } -:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker):has(.dropdown:not(.hidden)){ + &: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{ + &::after{ scale:-1; } + } -:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown{ + .dropdown{ position:absolute; display:flex; justify-content:center; @@ -5083,9 +4498,8 @@ 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{ + button{ width:100%; height:auto; border:none; @@ -5094,23 +4508,29 @@ 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){ + &:is(:active, :focus-visible){ outline:none; } -:is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button) > .swatch{ + > .swatch{ outline-offset:2px; } -[aria-selected="true"]:is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button) > .swatch{ + &[aria-selected="true"] > .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{ + &:is(:hover, :active, :focus-visible) > .swatch{ outline:2px solid var(--hover-outline-color); } + } + } + } + } + } + } +} .editorParamsToolbar:has(#highlightParamsToolbarContainer){ padding:unset; @@ -5120,23 +4540,20 @@ gap:16px; padding-inline:10px; padding-block-end:12px; -} -#highlightParamsToolbarContainer .colorPicker{ + .colorPicker{ display:flex; flex-direction:column; gap:8px; - } -:is(#highlightParamsToolbarContainer .colorPicker) .dropdown{ + .dropdown{ display:flex; justify-content:space-between; align-items:center; flex-direction:row; height:auto; - } -:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button{ + button{ width:auto; height:auto; border:none; @@ -5147,78 +4564,57 @@ background:none; flex:0 0 auto; padding:0; - } -:is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button) .swatch{ + .swatch{ width:24px; height:24px; } -:is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button):is(:active,:focus-visible){ + &:is(:active, :focus-visible){ outline:none; } -[aria-selected="true"]:is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button) > .swatch{ + &[aria-selected="true"] > .swatch{ outline:2px solid var(--selected-outline-color); } -:is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button):is(:hover,:active,:focus-visible) > .swatch{ + &:is(:hover, :active, :focus-visible) > .swatch{ outline:2px solid var(--hover-outline-color); } + } + } + } -#highlightParamsToolbarContainer #editorHighlightThickness{ + #editorHighlightThickness{ display:flex; flex-direction:column; align-items:center; gap:4px; align-self:stretch; - } -:is(#highlightParamsToolbarContainer #editorHighlightThickness) .editorParamsLabel{ + .editorParamsLabel{ height:auto; align-self:stretch; } -:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker{ + .thicknessPicker{ display:flex; justify-content:space-between; align-items:center; align-self:stretch; - --csstools-light-dark-toggle--116:var(--csstools-color-scheme--light) #80808e; - - --example-color:var(--csstools-light-dark-toggle--116, #bfbfc9); - } - -@supports (color: light-dark(red, red)){ -:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker{ - --example-color:light-dark(#bfbfc9, #80808e); - } -} - -@supports not (color: light-dark(tan, tan)){ - -:is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker) *{ - - --csstools-light-dark-toggle--116:var(--csstools-color-scheme--light) #80808e; - --example-color:var(--csstools-light-dark-toggle--116, #bfbfc9); - } -} - -@media screen and (forced-colors: active){ - -:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker{ + @media screen and (forced-colors: active){ --example-color:CanvasText; - } } -:is(:is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker) > .editorParamsSlider[disabled]){ + :is(& > .editorParamsSlider[disabled]){ opacity:0.4; } -:is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker)::before,:is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker)::after{ + &::before, + &::after{ content:""; width:8px; aspect-ratio:1; @@ -5226,113 +4622,99 @@ border-radius:100%; background-color:var(--example-color); } - -:is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker)::after{ + &::after{ width:24px; } -:is(:is(#highlightParamsToolbarContainer #editorHighlightThickness) .thicknessPicker) .editorParamsSlider{ + .editorParamsSlider{ width:unset; height:14px; } + } + } -#highlightParamsToolbarContainer #editorHighlightVisibility{ + #editorHighlightVisibility{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; align-self:stretch; - } - -:is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider{ - --csstools-light-dark-toggle--117:var(--csstools-color-scheme--light) #8f8f9d; - --divider-color:var(--csstools-light-dark-toggle--117, #d7d7db); - } -@supports (color: light-dark(red, red)){ -:is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider{ + .divider{ --divider-color:light-dark(#d7d7db, #8f8f9d); - } -} - -@supports not (color: light-dark(tan, tan)){ - -:is(:is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider) *{ - --csstools-light-dark-toggle--117:var(--csstools-color-scheme--light) #8f8f9d; - --divider-color:var(--csstools-light-dark-toggle--117, #d7d7db); - } -} - -@media screen and (forced-colors: active){ -:is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider{ + @media screen and (forced-colors: active){ --divider-color:CanvasText; - } } -:is(#highlightParamsToolbarContainer #editorHighlightVisibility) .divider{ - margin-block:4px; width:100%; height:1px; background-color:var(--divider-color); } -:is(#highlightParamsToolbarContainer #editorHighlightVisibility) .toggler{ + .toggler{ display:flex; justify-content:space-between; align-items:center; align-self:stretch; } + } +} #altTextSettingsDialog{ padding:16px; -} -#altTextSettingsDialog #altTextSettingsContainer{ + #altTextSettingsContainer{ display:flex; width:573px; flex-direction:column; gap:16px; - } -:is(#altTextSettingsDialog #altTextSettingsContainer) .mainContainer{ + .mainContainer{ gap:16px; } -:is(#altTextSettingsDialog #altTextSettingsContainer) .description{ + .description{ color:var(--text-secondary-color); } -:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings{ + #aiModelSettings{ display:flex; flex-direction:column; gap:12px; } -:is(#altTextSettingsDialog #altTextSettingsContainer) #automaticAltText,:is(#altTextSettingsDialog #altTextSettingsContainer) #altTextEditor{ + #automaticAltText, + #altTextEditor{ display:flex; flex-direction:column; gap:8px; } -:is(#altTextSettingsDialog #altTextSettingsContainer) #createModelDescription,:is(#altTextSettingsDialog #altTextSettingsContainer) #aiModelSettings,:is(#altTextSettingsDialog #altTextSettingsContainer) #showAltTextDialogDescription{ + #createModelDescription, + #aiModelSettings, + #showAltTextDialogDescription{ padding-inline-start:40px; } -:is(#altTextSettingsDialog #altTextSettingsContainer) #automaticSettings{ + #automaticSettings{ display:flex; flex-direction:column; gap:16px; } + } +} -button.hasPopupMenu[aria-expanded="true"] + menu{ +button.hasPopupMenu{ + &[aria-expanded="true"] + menu{ visibility:visible; } -button.hasPopupMenu[aria-expanded="false"] + menu{ + &[aria-expanded="false"] + menu{ visibility:hidden; } +} .popupMenu{ --menuitem-checkmark-icon:url(images/checkmark.svg); @@ -5352,24 +4734,16 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ var(--menu-text-color), transparent 93% ); - --csstools-light-dark-toggle--118:var(--csstools-color-scheme--light) #00cadb; - --menuitem-focus-outline-color:var(--csstools-light-dark-toggle--118, #0062fa); - --csstools-light-dark-toggle--119:var(--csstools-color-scheme--light) black; - --menuitem-focus-border-color:var(--csstools-light-dark-toggle--119, white); - - --csstools-light-dark-toggle--120:var(--csstools-color-scheme--light) #23222b; + --menuitem-focus-outline-color:light-dark(#0062fa, #00cadb); + --menuitem-focus-border-color:light-dark(white, black); - --menu-bg:var(--csstools-light-dark-toggle--120, white); + --menu-bg:light-dark(white, #23222b); --menu-background-blend-mode:normal; - --csstools-light-dark-toggle--121:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); - --csstools-light-dark-toggle--122:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); - --menu-box-shadow:0 0.375px 1.5px 0 var(--csstools-light-dark-toggle--121, rgb(0 0 0 / 0.05)), 0 3px 12px 0 var(--csstools-light-dark-toggle--122, rgb(0 0 0 / 0.1)); - --csstools-light-dark-toggle--123:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.1); - --menu-border-color:var(--csstools-light-dark-toggle--123, rgb(21 20 26 / 0.1)); + --menu-box-shadow:0 0.375px 1.5px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), 0 3px 12px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); + --menu-border-color:light-dark(rgb(21 20 26 / 0.1), rgb(251 251 254 / 0.1)); --menuitem-border-radius:8px; --menu-backdrop-filter:none; - --csstools-light-dark-toggle--124:var(--csstools-color-scheme--light) #fbfbfe; - --menu-text-color:var(--csstools-light-dark-toggle--124, #15141a); + --menu-text-color:light-dark(#15141a, #fbfbfe); --menu-text-disabled-color:var(--menu-text-color); --menuitem-text-hover-fg:var(--menu-text-color); --menuitem-hover-bg:color-mix( @@ -5379,54 +4753,8 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ ); --menuitem-hover-background-blend-mode:normal; --disabled-opacity:0.62; -} - -@supports (color: light-dark(red, red)){ -.popupMenu{ - --menuitem-focus-outline-color:light-dark(#0062fa, #00cadb); - --menuitem-focus-border-color:light-dark(white, black); - - --menu-bg:light-dark(white, #23222b); -} -} - -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ -.popupMenu{ - --menu-box-shadow:0 0.375px 1.5px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), 0 3px 12px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); - --menu-border-color:light-dark(rgb(21 20 26 / 0.1), rgb(251 251 254 / 0.1)); -} -} - -@supports (color: light-dark(red, red)){ -.popupMenu{ - --menu-text-color:light-dark(#15141a, #fbfbfe); -} -} - -@supports not (color: light-dark(tan, tan)){ - -.popupMenu *{ - --csstools-light-dark-toggle--118:var(--csstools-color-scheme--light) #00cadb; - --menuitem-focus-outline-color:var(--csstools-light-dark-toggle--118, #0062fa); - --csstools-light-dark-toggle--119:var(--csstools-color-scheme--light) black; - --menuitem-focus-border-color:var(--csstools-light-dark-toggle--119, white); - - --csstools-light-dark-toggle--120:var(--csstools-color-scheme--light) #23222b; - - --menu-bg:var(--csstools-light-dark-toggle--120, white); - --csstools-light-dark-toggle--121:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); - --csstools-light-dark-toggle--122:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); - --menu-box-shadow:0 0.375px 1.5px 0 var(--csstools-light-dark-toggle--121, rgb(0 0 0 / 0.05)), 0 3px 12px 0 var(--csstools-light-dark-toggle--122, rgb(0 0 0 / 0.1)); - --csstools-light-dark-toggle--123:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.1); - --menu-border-color:var(--csstools-light-dark-toggle--123, rgb(21 20 26 / 0.1)); - --csstools-light-dark-toggle--124:var(--csstools-color-scheme--light) #fbfbfe; - --menu-text-color:var(--csstools-light-dark-toggle--124, #15141a); - } -} - -@media screen and (forced-colors: active){ -.popupMenu{ + @media screen and (forced-colors: active){ --menu-bg:Canvas; --menu-background-blend-mode:normal; --menu-box-shadow:none; @@ -5444,11 +4772,8 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ --menuitem-focus-outline-color:CanvasText; --menuitem-focus-border-color:none; --disabled-opacity:1; -} } -.popupMenu{ - display:flex; flex-direction:column; width:-moz-max-content; @@ -5466,15 +4791,13 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ box-shadow:var(--menu-box-shadow); border-radius:6px; border:1px solid var(--menu-border-color); - -webkit-backdrop-filter:var(--menu-backdrop-filter); - backdrop-filter:var(--menu-backdrop-filter); -} + backdrop-filter:var(--menu-backdrop-filter); -.popupMenu.withMark{ + &.withMark{ --menu-mark-icon-size:16px; } -.popupMenu > button{ + > button{ display:flex; align-items:center; position:relative; @@ -5486,9 +4809,8 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ border-radius:var(--menuitem-border-radius); border:1px solid var(--menuitem-border-color); background:transparent; - } -.selected:is(.popupMenu > button)::after{ + &.selected::after{ content:""; display:inline-block; width:11px; @@ -5506,56 +4828,58 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ transform:translateY(-50%); } -:is(.popupMenu > button):disabled{ + &:disabled{ opacity:var(--disabled-opacity); - } -.selected:is(.popupMenu > button):disabled::after{ + &.selected::after{ background-color:var(--menu-text-disabled-color); } -:is(.popupMenu > button):disabled:not(.noIcon)::before{ + &:not(.noIcon)::before{ background-color:var(--menu-text-disabled-color); } -:is(.popupMenu > button):disabled > span{ + > span{ color:var(--menu-text-disabled-color); } + } -:is(.popupMenu > button):not(:disabled):hover{ + &:not(:disabled){ + &:hover{ background:var(--menuitem-hover-bg); background-blend-mode:var(--menuitem-hover-background-blend-mode); - } -:is(.popupMenu > button):not(:disabled):hover:not(.noIcon)::before{ + &:not(.noIcon)::before{ background-color:var(--menuitem-text-hover-fg); } -:is(.popupMenu > button):not(:disabled):hover > span{ + > span{ color:var(--menuitem-text-hover-fg); } -.selected:is(.popupMenu > button):not(:disabled):hover::after{ + &.selected::after{ background-color:var(--menuitem-text-hover-fg); } + } -:is(.popupMenu > button):not(:disabled):active{ + &:active{ background-color:var(--menuitem-active-bg); border-color:var(--menuitem-active-border-color); - } -:is(.popupMenu > button):not(:disabled):active > span{ + > span{ color:var(--menuitem-text-active-fg); } + } -:is(.popupMenu > button):not(:disabled):focus-visible{ + &:focus-visible{ border-color:var(--menuitem-focus-border-color); background-color:var(--menuitem-focus-bg); outline:2px solid var(--menuitem-focus-outline-color); outline-offset:2px; } + } -:is(.popupMenu > button):not(.noIcon)::before{ + &:not(.noIcon)::before{ display:inline-block; width:var(--menu-icon-size); height:var(--menu-icon-size); @@ -5567,7 +4891,7 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ background-color:var(--menu-text-color); } -:is(.popupMenu > button) > span{ + > span{ display:flex; align-items:center; align-self:stretch; @@ -5587,23 +4911,9 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ font-weight:510; line-height:normal; } - -.treeView{ - --csstools-light-dark-toggle--125:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.8); - --treeitem-color:var(--csstools-light-dark-toggle--125, rgb(0 0 0 / 0.8)); - --csstools-light-dark-toggle--126:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.15); - --treeitem-bg-color:var(--csstools-light-dark-toggle--126, rgb(0 0 0 / 0.15)); - --csstools-light-dark-toggle--127:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.9); - --treeitem-hover-color:var(--csstools-light-dark-toggle--127, rgb(0 0 0 / 0.9)); - --csstools-light-dark-toggle--128:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.9); - --treeitem-selected-color:var(--csstools-light-dark-toggle--128, rgb(0 0 0 / 0.9)); - --csstools-light-dark-toggle--129:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.25); - --treeitem-selected-bg-color:var(--csstools-light-dark-toggle--129, rgb(0 0 0 / 0.25)); - --treeitem-expanded-icon:url(images/treeitem-expanded.svg); - --treeitem-collapsed-icon:url(images/treeitem-collapsed.svg); + } } -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ .treeView{ --treeitem-color:light-dark(rgb(0 0 0 / 0.8), rgb(255 255 255 / 0.8)); --treeitem-bg-color:light-dark(rgb(0 0 0 / 0.15), rgb(255 255 255 / 0.15)); @@ -5616,26 +4926,12 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ rgb(0 0 0 / 0.25), rgb(255 255 255 / 0.25) ); -} -} - -@supports not (color: light-dark(tan, tan)){ - -.treeView *{ - --csstools-light-dark-toggle--125:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.8); - --treeitem-color:var(--csstools-light-dark-toggle--125, rgb(0 0 0 / 0.8)); - --csstools-light-dark-toggle--126:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.15); - --treeitem-bg-color:var(--csstools-light-dark-toggle--126, rgb(0 0 0 / 0.15)); - --csstools-light-dark-toggle--127:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.9); - --treeitem-hover-color:var(--csstools-light-dark-toggle--127, rgb(0 0 0 / 0.9)); - --csstools-light-dark-toggle--128:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.9); - --treeitem-selected-color:var(--csstools-light-dark-toggle--128, rgb(0 0 0 / 0.9)); - --csstools-light-dark-toggle--129:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.25); - --treeitem-selected-bg-color:var(--csstools-light-dark-toggle--129, rgb(0 0 0 / 0.25)); - } -} + --treeitem-expanded-icon:url(images/treeitem-expanded.svg); + --treeitem-collapsed-icon:url(images/treeitem-collapsed.svg); -:is(.treeView.withNesting .treeItemToggler)::before{ + &.withNesting{ + .treeItemToggler{ + &::before{ position:absolute; display:inline-block; width:16px; @@ -5650,51 +4946,56 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ mask-size:cover; } -.treeView.withNesting .treeItemToggler{ - position:relative; float:inline-start; height:0; width:0; color:rgb(255 255 255 / 0.5); - } -.treeItemsHidden:is(.treeView.withNesting .treeItemToggler)::before{ + &.treeItemsHidden{ + &::before{ -webkit-mask-image:var(--treeitem-collapsed-icon); mask-image:var(--treeitem-collapsed-icon); transform:scaleX(var(--dir-factor)); } -.treeItemsHidden:is(.treeView.withNesting .treeItemToggler) ~ .treeItems{ + ~ .treeItems{ display:none; } + } -:is(.treeView.withNesting .treeItemToggler):hover + a,:is(.treeView.withNesting .treeItemToggler):hover ~ .treeItems{ + &:hover + a, + &:hover ~ .treeItems{ background-color:var(--treeitem-bg-color); background-clip:padding-box; border-radius:2px; color:var(--treeitem-hover-color); } + } -.treeView.withNesting > .treeItem,.treeView.withNesting .treeItem > .treeItems{ + > .treeItem, + .treeItem > .treeItems{ margin-inline-start:20px; } + } -:is(#layersView.treeView .treeItem > a) *{ + &#layersView .treeItem > a{ + *{ cursor:pointer; } -:is(#layersView.treeView .treeItem > a) > label{ + > label{ display:flex; align-items:center; padding-inline-start:4px; - } - -:is(:is(#layersView.treeView .treeItem > a) > label) > input{ + > input{ margin-top:1px; } + } + } -:is(.treeView .treeItem) > a{ + .treeItem{ + > a{ text-decoration:none; display:inline-block; min-width:calc(100% - 4px); @@ -5711,37 +5012,45 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ user-select:none; white-space:normal; cursor:default; - } -:is(:is(.treeView .treeItem) > a):hover{ + &:hover{ background-color:var(--treeitem-bg-color); background-clip:padding-box; border-radius:2px; color:var(--treeitem-hover-color); } + } -.selected:is(.treeView .treeItem) > a{ + &.selected > a{ background-color:var(--treeitem-selected-bg-color); color:var(--treeitem-selected-color); } + } +} -#outerContainer.viewsManagerMoving #viewsManager{ +#outerContainer{ + &.viewsManagerMoving{ + #viewsManager{ visibility:visible; } + } -#outerContainer.viewsManagerOpen #viewsManager{ + &.viewsManagerOpen{ + #viewsManager{ visibility:visible; inset-inline-start:8px; } -#outerContainer.viewsManagerOpen #viewerContainer:not(.pdfPresentationMode){ + #viewerContainer:not(.pdfPresentationMode){ inset-inline-start:var(--viewsManager-width, 0); transition-property:inset-inline-start; } + } -#outerContainer.viewsManagerResizing :is(#sidebarContainer,#viewerContainer,#loadingBar){ + &.viewsManagerResizing :is(#sidebarContainer, #viewerContainer, #loadingBar){ transition-duration:0s; } +} #viewsManager{ --views-manager-button-icon:url(images/pages_viewButton.svg); @@ -5758,156 +5067,54 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ --pages-selected-icon:url(images/pages_selected.svg); --spinner-icon:url(images/altText_spinner.svg); - --csstools-light-dark-toggle--130:var(--csstools-color-scheme--light) rgb(66 65 77 / 0.92); - - --sidebar-bg-color:var(--csstools-light-dark-toggle--130, rgb(255 255 255 / 0.92)); + --sidebar-bg-color:light-dark(rgb(255 255 255 / 0.92), rgb(66 65 77 / 0.92)); --sidebar-backdrop-filter:blur(7px); --sidebar-width:230px; --sidebar-min-width:min-content; --sidebar-max-width:50vw; --sidebar-block-padding:8px; - --csstools-light-dark-toggle--131:var(--csstools-color-scheme--light) #fbfbfe; - - --text-color:var(--csstools-light-dark-toggle--131, #15141a); + --text-color:light-dark(#15141a, #fbfbfe); --button-fg:var(--text-color); --button-no-bg:transparent; - --csstools-light-dark-toggle--132:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); - --button-bg:var(--csstools-light-dark-toggle--132, rgb(21 20 26 / 0.07)); + --button-bg:light-dark(rgb(21 20 26 / 0.07), rgb(251 251 254 / 0.07)); --button-border-color:transparent; - --csstools-light-dark-toggle--133:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); - --button-hover-bg:var(--csstools-light-dark-toggle--133, rgb(21 20 26 / 0.14)); + --button-hover-bg:light-dark(rgb(21 20 26 / 0.14), rgb(251 251 254 / 0.14)); --button-hover-fg:var(--text-color); --button-hover-border-color:var(--button-border-color); - --csstools-light-dark-toggle--134:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); - --button-active-bg:var(--csstools-light-dark-toggle--134, rgb(21 20 26 / 0.21)); + --button-active-bg:light-dark(rgb(21 20 26 / 0.21), rgb(251 251 254 / 0.21)); --button-active-fg:var(--text-color); --button-active-border-color:var(--button-border-color); --button-focus-no-bg:color-mix(in srgb, var(--text-color), transparent 93%); - --csstools-light-dark-toggle--135:var(--csstools-color-scheme--light) #00cadb; - --button-focus-outline-color:var(--csstools-light-dark-toggle--135, #0062fa); - --csstools-light-dark-toggle--136:var(--csstools-color-scheme--light) black; - --button-focus-border-color:var(--csstools-light-dark-toggle--136, white); - --status-border-color:transparent; - --csstools-light-dark-toggle--137:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.03); - --status-actions-bg:var(--csstools-light-dark-toggle--137, rgb(21 20 26 / 0.03)); - --csstools-light-dark-toggle--138:var(--csstools-color-scheme--light) rgb(0 202 219 / 0.08); - --status-undo-bg:var(--csstools-light-dark-toggle--138, rgb(0 98 250 / 0.08)); - --status-waiting-bg:var(--status-undo-bg); - --csstools-light-dark-toggle--139:var(--csstools-color-scheme--light) #00cadb; - --indicator-color:var(--csstools-light-dark-toggle--139, #0062fa); - --csstools-light-dark-toggle--140:var(--csstools-color-scheme--light) #6e001f; - --status-warning-bg:var(--csstools-light-dark-toggle--140, #ffe8ea); - --csstools-light-dark-toggle--141:var(--csstools-color-scheme--light) #ffa0aa; - --indicator-warning-color:var(--csstools-light-dark-toggle--141, #b20037); - --csstools-light-dark-toggle--142:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); - --csstools-light-dark-toggle--143:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); - --header-shadow:0 0.25px 0.75px -0.75px var(--csstools-light-dark-toggle--142, rgb(0 0 0 / 0.05)), 0 2px 6px -6px var(--csstools-light-dark-toggle--143, rgb(0 0 0 / 0.1)); - --csstools-light-dark-toggle--144:var(--csstools-color-scheme--light) #42414e; - --header-bg:var(--csstools-light-dark-toggle--144, rgb(255 255 255 / 0.92)); - --image-outline:none; - --image-border-width:6px; - --csstools-light-dark-toggle--145:var(--csstools-color-scheme--light) #3a3944; - --image-border-color:var(--csstools-light-dark-toggle--145, #cfcfd8); - --image-hover-border-color:#bfbfc9; - --image-current-border-color:var(--button-focus-outline-color); - --image-current-focused-outline-color:var(--image-hover-border-color); - --csstools-light-dark-toggle--146:var(--csstools-color-scheme--light) #42414d; - --image-page-number-bg:var(--csstools-light-dark-toggle--146, #f0f0f4); - --image-page-number-fg:var(--text-color); - --image-page-number-border-color:transparent; - --image-hover-page-number-bg:var(--image-page-number-bg); - --image-hover-page-number-fg:var(--image-page-number-fg); - --image-current-page-number-bg:var(--image-current-border-color); - --csstools-light-dark-toggle--147:var(--csstools-color-scheme--light) #15141a; - --image-current-page-number-fg:var(--csstools-light-dark-toggle--147, #fff); - --image-current-hover-page-number-bg:var(--image-current-page-number-bg); - --image-current-hover-page-number-fg:var(--image-current-page-number-fg); - --csstools-light-dark-toggle--148:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); - --csstools-light-dark-toggle--149:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); - --image-shadow:0 0.375px 1.5px 0 var(--csstools-light-dark-toggle--148, rgb(0 0 0 / 0.05)), 0 0 0 1px var(--image-border-color), 0 3px 12px 0 var(--csstools-light-dark-toggle--149, rgb(0 0 0 / 0.1)); - --csstools-light-dark-toggle--150:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); - --csstools-light-dark-toggle--151:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.1); - --csstools-light-dark-toggle--152:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); - --image-hover-shadow:0 0.375px 1.5px 0 var(--csstools-light-dark-toggle--150, rgb(0 0 0 / 0.05)), 0 0 0 1px var(--csstools-light-dark-toggle--151, rgb(21 20 26 / 0.1)), 0 0 0 var(--image-border-width) var(--image-hover-border-color), 0 3px 12px 0 var(--csstools-light-dark-toggle--152, rgb(0 0 0 / 0.1)); - --csstools-light-dark-toggle--153:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); - --csstools-light-dark-toggle--154:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); - --image-current-shadow:0 0.375px 1.5px 0 var(--csstools-light-dark-toggle--153, rgb(0 0 0 / 0.05)), 0 0 0 var(--image-border-width) var(--image-current-border-color), 0 3px 12px 0 var(--csstools-light-dark-toggle--154, rgb(0 0 0 / 0.1)); - --csstools-light-dark-toggle--155:var(--csstools-color-scheme--light) rgb(0 202 219 / 0.08); - --image-dragging-placeholder-bg:var(--csstools-light-dark-toggle--155, rgb(0 98 250 / 0.08)); - --image-dragging-placeholder-border:var(--image-outline); - --multiple-dragging-bg:white; - --image-multiple-dragging-shadow:0 0 0 var(--image-border-width) var(--image-current-border-color), var(--image-border-width) var(--image-border-width) 0 calc(var(--image-border-width) / 2) var(--multiple-dragging-bg), var(--image-border-width) var(--image-border-width) 0 calc(3 * var(--image-border-width) / 2) var(--image-current-border-color); - --image-dragging-shadow:0 0 0 var(--image-border-width) var(--image-current-border-color); - --multiple-dragging-indicator-bg:var(--indicator-color); - --csstools-light-dark-toggle--156:var(--csstools-color-scheme--light) #15141a; - --multiple-dragging-text-color:var(--csstools-light-dark-toggle--156, #fbfbfe); -} - -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ -#viewsManager{ - - --sidebar-bg-color:light-dark(rgb(255 255 255 / 0.92), rgb(66 65 77 / 0.92)); -} -} - -@supports (color: light-dark(red, red)){ -#viewsManager{ - - --text-color:light-dark(#15141a, #fbfbfe); -} -} - -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ -#viewsManager{ - --button-bg:light-dark(rgb(21 20 26 / 0.07), rgb(251 251 254 / 0.07)); - --button-hover-bg:light-dark(rgb(21 20 26 / 0.14), rgb(251 251 254 / 0.14)); - --button-active-bg:light-dark(rgb(21 20 26 / 0.21), rgb(251 251 254 / 0.21)); -} -} - -@supports (color: light-dark(red, red)){ -#viewsManager{ --button-focus-outline-color:light-dark(#0062fa, #00cadb); --button-focus-border-color:light-dark(white, black); -} -} - -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ -#viewsManager{ + --status-border-color:transparent; --status-actions-bg:light-dark( rgb(21 20 26 / 0.03), rgb(251 251 254 / 0.03) ); --status-undo-bg:light-dark(rgb(0 98 250 / 0.08), rgb(0 202 219 / 0.08)); -} -} - -@supports (color: light-dark(red, red)){ -#viewsManager{ + --status-waiting-bg:var(--status-undo-bg); --indicator-color:light-dark(#0062fa, #00cadb); --status-warning-bg:light-dark(#ffe8ea, #6e001f); --indicator-warning-color:light-dark(#b20037, #ffa0aa); -} -} - -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ -#viewsManager{ --header-shadow:0 0.25px 0.75px -0.75px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), 0 2px 6px -6px light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); --header-bg:light-dark(rgb(255 255 255 / 0.92), #42414e); -} -} - -@supports (color: light-dark(red, red)){ -#viewsManager{ + --image-outline:none; + --image-border-width:6px; --image-border-color:light-dark(#cfcfd8, #3a3944); + --image-hover-border-color:#bfbfc9; + --image-current-border-color:var(--button-focus-outline-color); + --image-current-focused-outline-color:var(--image-hover-border-color); --image-page-number-bg:light-dark(#f0f0f4, #42414d); + --image-page-number-fg:var(--text-color); + --image-page-number-border-color:transparent; + --image-hover-page-number-bg:var(--image-page-number-bg); + --image-hover-page-number-fg:var(--image-page-number-fg); + --image-current-page-number-bg:var(--image-current-border-color); --image-current-page-number-fg:light-dark(#fff, #15141a); -} -} - -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ -#viewsManager{ + --image-current-hover-page-number-bg:var(--image-current-page-number-bg); + --image-current-hover-page-number-fg:var(--image-current-page-number-fg); --image-shadow:0 0.375px 1.5px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), 0 0 0 1px var(--image-border-color), 0 3px 12px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); --image-hover-shadow:0 0.375px 1.5px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), 0 0 0 1px light-dark(rgb(21 20 26 / 0.1), rgb(251 251 254 / 0.1)), 0 0 0 var(--image-border-width) var(--image-hover-border-color), 0 3px 12px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); --image-current-shadow:0 0.375px 1.5px 0 light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), 0 0 0 var(--image-border-width) var(--image-current-border-color), 0 3px 12px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); @@ -5915,77 +5122,14 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ rgb(0 98 250 / 0.08), rgb(0 202 219 / 0.08) ); -} -} - -@supports (color: light-dark(red, red)){ -#viewsManager{ + --image-dragging-placeholder-border:var(--image-outline); + --multiple-dragging-bg:white; + --image-multiple-dragging-shadow:0 0 0 var(--image-border-width) var(--image-current-border-color), var(--image-border-width) var(--image-border-width) 0 calc(var(--image-border-width) / 2) var(--multiple-dragging-bg), var(--image-border-width) var(--image-border-width) 0 calc(3 * var(--image-border-width) / 2) var(--image-current-border-color); + --image-dragging-shadow:0 0 0 var(--image-border-width) var(--image-current-border-color); + --multiple-dragging-indicator-bg:var(--indicator-color); --multiple-dragging-text-color:light-dark(#fbfbfe, #15141a); -} -} -@supports not (color: light-dark(tan, tan)){ - -#viewsManager *{ - - --csstools-light-dark-toggle--130:var(--csstools-color-scheme--light) rgb(66 65 77 / 0.92); - - --sidebar-bg-color:var(--csstools-light-dark-toggle--130, rgb(255 255 255 / 0.92)); - - --csstools-light-dark-toggle--131:var(--csstools-color-scheme--light) #fbfbfe; - - --text-color:var(--csstools-light-dark-toggle--131, #15141a); - --csstools-light-dark-toggle--132:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); - --button-bg:var(--csstools-light-dark-toggle--132, rgb(21 20 26 / 0.07)); - --csstools-light-dark-toggle--133:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); - --button-hover-bg:var(--csstools-light-dark-toggle--133, rgb(21 20 26 / 0.14)); - --csstools-light-dark-toggle--134:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); - --button-active-bg:var(--csstools-light-dark-toggle--134, rgb(21 20 26 / 0.21)); - --csstools-light-dark-toggle--135:var(--csstools-color-scheme--light) #00cadb; - --button-focus-outline-color:var(--csstools-light-dark-toggle--135, #0062fa); - --csstools-light-dark-toggle--136:var(--csstools-color-scheme--light) black; - --button-focus-border-color:var(--csstools-light-dark-toggle--136, white); - --csstools-light-dark-toggle--137:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.03); - --status-actions-bg:var(--csstools-light-dark-toggle--137, rgb(21 20 26 / 0.03)); - --csstools-light-dark-toggle--138:var(--csstools-color-scheme--light) rgb(0 202 219 / 0.08); - --status-undo-bg:var(--csstools-light-dark-toggle--138, rgb(0 98 250 / 0.08)); - --csstools-light-dark-toggle--139:var(--csstools-color-scheme--light) #00cadb; - --indicator-color:var(--csstools-light-dark-toggle--139, #0062fa); - --csstools-light-dark-toggle--140:var(--csstools-color-scheme--light) #6e001f; - --status-warning-bg:var(--csstools-light-dark-toggle--140, #ffe8ea); - --csstools-light-dark-toggle--141:var(--csstools-color-scheme--light) #ffa0aa; - --indicator-warning-color:var(--csstools-light-dark-toggle--141, #b20037); - --csstools-light-dark-toggle--142:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); - --csstools-light-dark-toggle--143:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); - --header-shadow:0 0.25px 0.75px -0.75px var(--csstools-light-dark-toggle--142, rgb(0 0 0 / 0.05)), 0 2px 6px -6px var(--csstools-light-dark-toggle--143, rgb(0 0 0 / 0.1)); - --csstools-light-dark-toggle--144:var(--csstools-color-scheme--light) #42414e; - --header-bg:var(--csstools-light-dark-toggle--144, rgb(255 255 255 / 0.92)); - --csstools-light-dark-toggle--145:var(--csstools-color-scheme--light) #3a3944; - --image-border-color:var(--csstools-light-dark-toggle--145, #cfcfd8); - --csstools-light-dark-toggle--146:var(--csstools-color-scheme--light) #42414d; - --image-page-number-bg:var(--csstools-light-dark-toggle--146, #f0f0f4); - --csstools-light-dark-toggle--147:var(--csstools-color-scheme--light) #15141a; - --image-current-page-number-fg:var(--csstools-light-dark-toggle--147, #fff); - --csstools-light-dark-toggle--148:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); - --csstools-light-dark-toggle--149:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); - --image-shadow:0 0.375px 1.5px 0 var(--csstools-light-dark-toggle--148, rgb(0 0 0 / 0.05)), 0 0 0 1px var(--image-border-color), 0 3px 12px 0 var(--csstools-light-dark-toggle--149, rgb(0 0 0 / 0.1)); - --csstools-light-dark-toggle--150:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); - --csstools-light-dark-toggle--151:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.1); - --csstools-light-dark-toggle--152:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); - --image-hover-shadow:0 0.375px 1.5px 0 var(--csstools-light-dark-toggle--150, rgb(0 0 0 / 0.05)), 0 0 0 1px var(--csstools-light-dark-toggle--151, rgb(21 20 26 / 0.1)), 0 0 0 var(--image-border-width) var(--image-hover-border-color), 0 3px 12px 0 var(--csstools-light-dark-toggle--152, rgb(0 0 0 / 0.1)); - --csstools-light-dark-toggle--153:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); - --csstools-light-dark-toggle--154:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); - --image-current-shadow:0 0.375px 1.5px 0 var(--csstools-light-dark-toggle--153, rgb(0 0 0 / 0.05)), 0 0 0 var(--image-border-width) var(--image-current-border-color), 0 3px 12px 0 var(--csstools-light-dark-toggle--154, rgb(0 0 0 / 0.1)); - --csstools-light-dark-toggle--155:var(--csstools-color-scheme--light) rgb(0 202 219 / 0.08); - --image-dragging-placeholder-bg:var(--csstools-light-dark-toggle--155, rgb(0 98 250 / 0.08)); - --csstools-light-dark-toggle--156:var(--csstools-color-scheme--light) #15141a; - --multiple-dragging-text-color:var(--csstools-light-dark-toggle--156, #fbfbfe); - } -} - -@media screen and (forced-colors: active){ - -#viewsManager{ + @media screen and (forced-colors: active){ --text-color:CanvasText; --button-fg:ButtonText; --button-bg:ButtonFace; @@ -6026,11 +5170,8 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ --multiple-dragging-text-color:Canvas; --image-dragging-placeholder-bg:Canvas; --image-dragging-placeholder-border:1px GrayText solid; -} } -#viewsManager{ - display:flex; padding-bottom:16px; flex-direction:column; @@ -6047,60 +5188,57 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ transition-property:inset-inline-start; transition-duration:var(--sidebar-transition-duration); transition-timing-function:var(--sidebar-transition-timing-function); -} -#viewsManager .sidebarResizer{ + .sidebarResizer{ inset-inline-start:calc(100% + 4px); } -#viewsManager .viewsManagerButton{ + .viewsManagerButton{ width:auto; color:var(--button-fg); border-radius:8px; border:1px solid var(--button-border-color); background:var(--button-bg); - } -:is(#viewsManager .viewsManagerButton):hover{ + &:hover{ background-color:var(--button-hover-bg) !important; color:var(--button-hover-fg) !important; border-color:var(--button-hover-border-color) !important; - } -:is(#viewsManager .viewsManagerButton):hover::before{ + &::before{ background-color:var(--button-hover-fg) !important; } - -:is(#viewsManager .viewsManagerButton):active{ + } + &:active{ background:var(--button-active-bg) !important; color:var(--button-active-fg) !important; border-color:var(--button-active-border-color) !important; - } -:is(#viewsManager .viewsManagerButton):active::before{ + &::before{ background-color:var(--button-active-fg) !important; } - -:is(#viewsManager .viewsManagerButton):focus-visible{ + } + &:focus-visible{ outline:2px solid var(--button-focus-outline-color); outline-offset:2px; border-color:var(--button-focus-border-color); } -.viewsCloseButton:is(#viewsManager .viewsManagerButton){ + &.viewsCloseButton{ width:26px; height:26px; padding:4px; border-radius:8px; background:none; - } -.viewsCloseButton:is(#viewsManager .viewsManagerButton)::before{ + &::before{ -webkit-mask-image:var(--close-button-icon); mask-image:var(--close-button-icon); } + } + } -#viewsManager #viewsManagerHeader{ + #viewsManagerHeader{ display:flex; flex-direction:column; align-items:flex-start; @@ -6109,9 +5247,8 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ box-shadow:var(--header-shadow); flex:0 0 auto; background-color:var(--header-bg); - } -:is(#viewsManager #viewsManagerHeader) .viewsManagerLabel{ + .viewsManagerLabel{ flex:1 1 auto; color:var(--text-color); text-align:center; @@ -6130,7 +5267,7 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ line-height:normal; } -:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle{ + #viewsManagerTitle{ display:flex; flex-direction:row; align-items:center; @@ -6138,9 +5275,8 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ justify-content:space-between; width:auto; padding:12px 16px 12px 8px; - } -:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle):not(:has(#viewsManagerHeaderLabel ~ button:not([hidden])))::after{ + &:not(:has(#viewsManagerHeaderLabel ~ button:not([hidden])))::after{ content:""; flex:0 0 auto; @@ -6149,23 +5285,21 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ pointer-events:none; } -:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector{ + #viewsManagerSelector{ width:48px; height:32px; display:block; - } -:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > button{ + > button{ background:var(--button-no-bg); width:100%; height:100%; - } -:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > button):focus-visible{ + &:focus-visible{ background-color:var(--button-focus-no-bg); } -:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > button)::before{ + &::before{ -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-image:var(--views-manager-button-icon); @@ -6173,7 +5307,7 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ background-color:var(--button-fg); } -:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > button)::after{ + &::after{ content:""; display:inline-block; width:12px; @@ -6188,50 +5322,56 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ background-color:var(--button-fg); } -:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > button):hover::before,:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > button):hover::after{ + &:hover{ + &::before, + &::after{ background-color:var(--button-hover-fg) !important; } + } -:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > button):active::before,:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > button):active::after{ + &:active{ + &::before, + &::after{ background-color:var(--button-active-fg) !important; } + } + } -:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > .popupMenu{ + > .popupMenu{ min-width:182px; z-index:1; - } -#thumbnailsViewMenu:is(:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > .popupMenu) > button)::before{ + > button{ + &#thumbnailsViewMenu::before{ -webkit-mask-image:var(--menuitem-thumbnailsView-icon); mask-image:var(--menuitem-thumbnailsView-icon); } - -#outlinesViewMenu:is(:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > .popupMenu) > button)::before{ + &#outlinesViewMenu::before{ -webkit-mask-image:var(--menuitem-outlinesView-icon); mask-image:var(--menuitem-outlinesView-icon); } - -#attachmentsViewMenu:is(:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > .popupMenu) > button)::before{ + &#attachmentsViewMenu::before{ -webkit-mask-image:var(--menuitem-attachmentsView-icon); mask-image:var(--menuitem-attachmentsView-icon); } - -#layersViewMenu:is(:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerSelector) > .popupMenu) > button)::before{ + &#layersViewMenu::before{ -webkit-mask-image:var(--menuitem-layersView-icon); mask-image:var(--menuitem-layersView-icon); } + } + } + } -:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerAddFileButton{ + #viewsManagerAddFileButton{ background:var(--button-no-bg); width:32px; height:32px; - } -:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerAddFileButton):focus-visible{ + &:focus-visible{ background-color:var(--button-focus-no-bg); } -:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerAddFileButton)::before{ + &::before{ -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-image:var(--views-manager-add-file-button-icon); @@ -6239,48 +5379,49 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ background-color:var(--button-fg); } -:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerAddFileButton) > input{ + > input{ display:none; } + } -:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerCurrentOutlineButton{ + #viewsManagerCurrentOutlineButton{ background:var(--button-no-bg); width:32px; height:32px; - } -:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerCurrentOutlineButton):focus-visible{ + &:focus-visible{ background-color:var(--button-focus-no-bg); } -:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle) #viewsManagerCurrentOutlineButton)::before{ + &::before{ -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-image:var(--current-outline-button-icon); mask-image:var(--current-outline-button-icon); background-color:var(--button-fg); } + } + } -:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus{ + #viewsManagerStatus{ display:grid; width:100%; border:1px solid var(--status-border-color); - } -:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) > div{ + > div{ min-height:64px; width:100%; padding-inline:16px; grid-area:1 / 1; box-sizing:border-box; - } -.hidden:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) > div){ + &.hidden{ visibility:hidden; display:unset !important; } + } -:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) .viewsManagerStatusLabel{ + .viewsManagerStatusLabel{ display:flex; align-items:center; gap:8px; @@ -6289,24 +5430,22 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ font-size:13px; } -:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusAction{ + #viewsManagerStatusAction{ display:flex; justify-content:space-between; align-items:center; align-self:stretch; background-color:var(--status-actions-bg); - } -:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusAction) #viewsManagerStatusActionLabelContainer > button{ + #viewsManagerStatusActionLabelContainer > button{ position:relative; width:var(--icon-size); height:var(--icon-size); border:none; padding:0; flex:0 0 auto; - } -:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusAction) #viewsManagerStatusActionLabelContainer > button)::before{ + &::before{ content:""; position:absolute; inset:0; @@ -6319,21 +5458,44 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ mask-image:var(--pages-selected-icon); } -#viewsManagerStatusActionDeselectButton:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusAction) #viewsManagerStatusActionLabelContainer > button):focus-visible{ + @media screen and (forced-colors: active){ + border-radius:2px; + background-color:var(--button-bg); + + &::before{ + background-color:var(--button-fg); + } + &:hover{ + background-color:var(--button-hover-bg); + + &::before{ + background-color:var(--button-hover-fg); + } + } + &:active{ + background-color:var(--button-active-bg); + + &::before{ + background-color:var(--button-active-fg); + } + } + } + + &#viewsManagerStatusActionDeselectButton:focus-visible{ outline:2px solid var(--button-focus-outline-color); border:1px solid var(--button-focus-border-color); border-radius:2px; outline-offset:1px; } + } -:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusAction) #actionSelector{ + #actionSelector{ height:32px; min-width:115px; width:auto; display:block; - } -:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusAction) #actionSelector) #viewsManagerStatusActionButton{ + #viewsManagerStatusActionButton{ display:flex; align-items:center; justify-content:space-between; @@ -6341,9 +5503,8 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ width:100%; height:100%; padding:4px 16px; - } -:is(:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusAction) #actionSelector) #viewsManagerStatusActionButton)::after{ + &::after{ content:""; display:inline-block; width:var(--icon-size); @@ -6357,30 +5518,32 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ background-color:var(--button-fg); } -:is(:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusAction) #actionSelector) #viewsManagerStatusActionButton):hover::after{ + &:hover::after{ background-color:var(--button-hover-fg) !important; } -:is(:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusAction) #actionSelector) #viewsManagerStatusActionButton):active::after{ + &:active::after{ background-color:var(--button-active-fg) !important; } + } -:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusAction) #actionSelector) > .popupMenu{ + > .popupMenu{ width:100%; min-width:-moz-fit-content; min-width:fit-content; z-index:1; } + } + } -:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusUndo{ + #viewsManagerStatusUndo{ display:flex; justify-content:space-between; align-items:center; align-self:stretch; background-color:var(--status-undo-bg); - } -:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusUndo) > span::before{ + > span::before{ content:""; display:inline-block; width:var(--icon-size); @@ -6394,31 +5557,30 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ background-color:var(--indicator-color); } -:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusUndo) > div{ + > div{ display:flex; align-items:center; gap:8px; width:auto; - } -:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusUndo) > div) #viewsManagerStatusUndoButton{ + #viewsManagerStatusUndoButton{ width:auto; min-height:24px; padding:4px 8px; } + } + } -:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusWarning{ + #viewsManagerStatusWarning{ display:flex; align-items:center; justify-content:space-between; background-color:var(--status-warning-bg); - } -:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusWarning) > span{ + > span{ align-items:flex-start; - } -:is(:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusWarning) > span)::before{ + &::before{ content:""; display:inline-block; width:var(--icon-size); @@ -6432,15 +5594,16 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ mask-image:var(--undo-label-icon); flex:0 0 auto; } + } + } -:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusWaiting{ + #viewsManagerStatusWaiting{ display:flex; align-items:center; justify-content:space-between; background-color:var(--status-waiting-bg); - } -:is(:is(:is(#viewsManager #viewsManagerHeader) #viewsManagerStatus) #viewsManagerStatusWaiting) > span::before{ + > span::before{ content:""; display:inline-block; width:var(--icon-size); @@ -6454,18 +5617,20 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ mask-image:var(--spinner-icon); flex:0 0 auto; } + } + } + } -#viewsManager #viewsManagerContent{ + #viewsManagerContent{ width:100%; flex:1 1 0%; overflow:auto; - } -:is(#viewsManager #viewsManagerContent):has(#thumbnailsView.isDragging){ + &:has(#thumbnailsView.isDragging){ overflow-x:hidden; } -:is(#viewsManager #viewsManagerContent) #thumbnailsView{ + #thumbnailsView{ --thumbnail-width:126px; --gap-between-input-and-thumbnail:16px; @@ -6478,45 +5643,45 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ width:100%; box-sizing:border-box; position:relative; - } -.isDragging:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView){ + &.isDragging{ cursor:grabbing; - } -:is(.isDragging:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer:hover{ + > .thumbnail{ + > .thumbnailImageContainer:hover{ cursor:grabbing; - } -:is(:is(.isDragging:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer:hover):not([aria-current="page"]){ + &:not([aria-current="page"]){ box-shadow:var(--image-shadow); } + } -:is(.isDragging:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > input{ + > input{ pointer-events:none; } - -.isDragging:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .dragMarker{ - position:absolute; - top:0; - left:0; - border:2px solid var(--indicator-color); - contain:strict; } + } -.pasteMode:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView){ - gap:var(--gap-between-input-and-thumbnail); + &.isDragging > .dragMarker, + &.isDraggingFile > .dragMarker{ + position:absolute; + top:0; + left:0; + border:2px solid var(--indicator-color); + contain:strict; } -.pasteMode:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail{ + &.pasteMode{ + gap:var(--gap-between-input-and-thumbnail); + + > .thumbnail{ flex-direction:column; - } -:is(.pasteMode:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > input{ + > input{ display:none; } -:is(.pasteMode:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailPasteButton{ + > .thumbnailPasteButton{ display:flex; justify-content:center; align-items:center; @@ -6530,22 +5695,21 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ font-weight:400; line-height:normal; } + } + } -:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView):not(.pasteMode) > .thumbnail > .thumbnailPasteButton{ + &:not(.pasteMode) > .thumbnail > .thumbnailPasteButton{ display:none; } -:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail{ + > .thumbnail{ --input-dim:16px; - } -:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail):not(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail):has(input)){ + &:not(&:has(input)){ --input-dim:0px; --gap-between-input-and-thumbnail:0px; } -:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail{ - display:inline-flex; justify-content:flex-end; align-items:center; @@ -6558,14 +5722,13 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ height:auto; position:relative; scroll-margin-top:20px; - } -:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) .thumbnailPasteButton{ + .thumbnailPasteButton{ padding:8px 0; text-align:center; } -:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail):not(.isDragging) > .thumbnailImageContainer::after{ + &:not(.isDragging) > .thumbnailImageContainer::after{ content:attr(page-number); border-radius:8px; border:1px solid var(--image-page-number-border-color); @@ -6592,24 +5755,25 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ user-select:none; } -:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail):has([aria-current="page"]):not(.isDragging) > .thumbnailImageContainer::after{ + &:has([aria-current="page"]):not(.isDragging) + > .thumbnailImageContainer::after{ background-color:var(--image-current-page-number-bg); color:var(--image-current-page-number-fg); outline:1px solid var(--image-current-border-color); } -.isDragging:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > input{ + &.isDragging > input{ visibility:hidden; } -:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > input{ + > input{ margin:0; width:var(--input-dim); height:var(--input-dim); accent-color:var(--indicator-color); } -:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer{ + > .thumbnailImageContainer{ --thumbnail-dragging-scale:1.4; width:var(--thumbnail-width); @@ -6622,9 +5786,8 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ -moz-user-select:none; user-select:none; position:relative; - } -:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer) img{ + img{ width:100%; height:100%; border:none; @@ -6636,102 +5799,89 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ pointer-events:none; } -.missingThumbnailImage:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer){ + &.missingThumbnailImage{ content-visibility:hidden; } -:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):hover{ + &:hover{ cursor:pointer; box-shadow:var(--image-hover-shadow); - } -:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):hover::after{ + &::after{ background-color:var(--image-hover-page-number-bg); color:var(--image-hover-page-number-fg); } -@media screen and (forced-colors: active){ - -:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):hover{ + @media screen and (forced-colors: active){ box-shadow:none; outline:var(--image-border-width) var(--image-hover-border-color) solid; - } } + } -:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):focus-visible:not([aria-current="page"]){ + &:focus-visible{ + &:not([aria-current="page"]){ box-shadow:var(--image-hover-shadow); outline:none; - } - -@media screen and (forced-colors: active){ -:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):focus-visible:not([aria-current="page"]){ + @media screen and (forced-colors: active){ box-shadow:none; outline:var(--image-border-width) var(--image-focus-outline-color) solid; - } } + } -[aria-current="page"]:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):focus-visible{ + &[aria-current="page"]{ outline:var(--image-border-width) solid var(--image-current-focused-outline-color); outline-offset:var(--image-border-width); - } - -@media screen and (forced-colors: active){ -[aria-current="page"]:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):focus-visible{ + @media screen and (forced-colors: active){ box-shadow:none; outline:var(--image-border-width) var(--image-current-border-color) solid; outline-offset:0; - } - [aria-current="page"]:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):focus-visible > img{ + > img{ outline:var(--image-border-width) var(--image-focus-outline-color) solid; outline-offset:var(--image-border-width); } } + } -@media screen and (forced-colors: active){ - -:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):focus-visible{ + @media screen and (forced-colors: active){ box-shadow:none; outline:var(--image-border-width) var(--image-current-border-color) solid; - } - :is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):focus-visible:hover > img{ + &:hover > img{ outline:var(--image-border-width) var(--image-hover-border-color) solid; outline-offset:var(--image-border-width); } } + } -[aria-current="page"]:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer){ + &[aria-current="page"]{ box-shadow:var(--image-current-shadow); - } -[aria-current="page"]:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):hover::after{ + &:hover::after{ background-color:var(--image-current-hover-page-number-bg); color:var(--image-current-hover-page-number-fg); } -@media screen and (forced-colors: active){ - -[aria-current="page"]:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer){ + @media screen and (forced-colors: active){ box-shadow:none; outline:var(--image-border-width) var(--image-current-border-color) solid; - } - [aria-current="page"]:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer):hover > img{ + &:hover > img{ outline:var(--image-border-width) var(--image-hover-border-color) solid; outline-offset:var(--image-border-width); } } + } -.placeholder:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer){ + &.placeholder{ background-color:var(--image-dragging-placeholder-bg); box-shadow:none !important; outline:var(--image-dragging-placeholder-border); } -.draggingThumbnail:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer){ + &.draggingThumbnail{ position:absolute; left:0; top:0; @@ -6740,21 +5890,16 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ scale:calc(1 / var(--thumbnail-dragging-scale)); pointer-events:none; box-shadow:var(--image-dragging-shadow); - } -.draggingThumbnail.multiple:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer){ + &.multiple{ box-shadow:var(--image-multiple-dragging-shadow); - } - -@media screen and (forced-colors: active){ -.draggingThumbnail.multiple:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer){ + @media screen and (forced-colors: active){ forced-color-adjust:none; box-shadow:var(--image-multiple-dragging-shadow); - } } -.draggingThumbnail.multiple:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer) > .thumbnailImageContainer{ + > .thumbnailImageContainer{ position:absolute; top:0; left:0; @@ -6769,7 +5914,7 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ user-select:none; } -.draggingThumbnail.multiple:is(:is(:is(:is(#viewsManager #viewsManagerContent) #thumbnailsView) > .thumbnail) > .thumbnailImageContainer)::after{ + &::after{ content:attr(data-multiple-count); border-radius:calc(8px * var(--thumbnail-dragging-scale)); background-color:var(--multiple-dragging-indicator-bg); @@ -6787,18 +5932,13 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ line-height:normal; contain:strict; } - -:is(#viewsManager #viewsManagerContent) #attachmentsView{ - --csstools-light-dark-toggle--157:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.8); - --attachment-color:var(--csstools-light-dark-toggle--157, rgb(0 0 0 / 0.8)); - --csstools-light-dark-toggle--158:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.15); - --attachment-bg-color:var(--csstools-light-dark-toggle--158, rgb(0 0 0 / 0.15)); - --csstools-light-dark-toggle--159:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.9); - --attachment-hover-color:var(--csstools-light-dark-toggle--159, rgb(0 0 0 / 0.9)); + } + } + } + } } -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ -:is(#viewsManager #viewsManagerContent) #attachmentsView{ + #attachmentsView{ --attachment-color:light-dark(rgb(0 0 0 / 0.8), rgb(255 255 255 / 0.8)); --attachment-bg-color:light-dark( rgb(0 0 0 / 0.15), @@ -6808,27 +5948,12 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ rgb(0 0 0 / 0.9), rgb(255 255 255 / 0.9) ); - } -} - -@supports not (color: light-dark(tan, tan)){ -:is(:is(#viewsManager #viewsManagerContent) #attachmentsView) *{ - --csstools-light-dark-toggle--157:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.8); - --attachment-color:var(--csstools-light-dark-toggle--157, rgb(0 0 0 / 0.8)); - --csstools-light-dark-toggle--158:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.15); - --attachment-bg-color:var(--csstools-light-dark-toggle--158, rgb(0 0 0 / 0.15)); - --csstools-light-dark-toggle--159:var(--csstools-color-scheme--light) rgb(255 255 255 / 0.9); - --attachment-hover-color:var(--csstools-light-dark-toggle--159, rgb(0 0 0 / 0.9)); - } -} - -:is(:is(#viewsManager #viewsManagerContent) #attachmentsView) > ul{ + > ul{ list-style-type:none; padding:0; - } -:is(:is(:is(#viewsManager #viewsManagerContent) #attachmentsView) > ul) > li > a{ + > li > a{ text-decoration:none; display:inline-block; min-width:calc(100% - 4px); @@ -6845,23 +5970,26 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ user-select:none; white-space:normal; cursor:pointer; - } -:is(:is(:is(:is(#viewsManager #viewsManagerContent) #attachmentsView) > ul) > li > a):hover{ + &:hover{ background-color:var(--attachment-bg-color); background-clip:padding-box; border-radius:2px; color:var(--attachment-hover-color); } + } + } + } + } +} .sidebar{ - --csstools-light-dark-toggle--160:var(--csstools-color-scheme--light) #23222b; - --sidebar-bg-color:var(--csstools-light-dark-toggle--160, #fff); - --csstools-light-dark-toggle--161:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.1); - --sidebar-border-color:var(--csstools-light-dark-toggle--161, rgb(21 20 26 / 0.1)); - --csstools-light-dark-toggle--162:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); - --csstools-light-dark-toggle--163:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); - --sidebar-box-shadow:0 0.25px 0.75px var(--csstools-light-dark-toggle--162, rgb(0 0 0 / 0.05)), 0 2px 6px 0 var(--csstools-light-dark-toggle--163, rgb(0 0 0 / 0.1)); + --sidebar-bg-color:light-dark(#fff, #23222b); + --sidebar-border-color:light-dark( + rgb(21 20 26 / 0.1), + rgb(251 251 254 / 0.1) + ); + --sidebar-box-shadow:0 0.25px 0.75px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), 0 2px 6px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); --sidebar-backdrop-filter:none; --sidebar-border-radius:8px; --sidebar-padding:5px; @@ -6870,59 +5998,15 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ --sidebar-width:239px; --resizer-width:4px; --resizer-shift:calc(0px - var(--resizer-width) - 2px); - --csstools-light-dark-toggle--164:var(--csstools-color-scheme--light) #00cadb; - --resizer-hover-bg-color:var(--csstools-light-dark-toggle--164, #0062fa); -} - -@supports (color: light-dark(red, red)){ -.sidebar{ - --sidebar-bg-color:light-dark(#fff, #23222b); -} -} - -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ -.sidebar{ - --sidebar-border-color:light-dark( - rgb(21 20 26 / 0.1), - rgb(251 251 254 / 0.1) - ); - --sidebar-box-shadow:0 0.25px 0.75px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), 0 2px 6px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); -} -} - -@supports (color: light-dark(red, red)){ -.sidebar{ --resizer-hover-bg-color:light-dark(#0062fa, #00cadb); -} -} - -@supports not (color: light-dark(tan, tan)){ -.sidebar *{ - --csstools-light-dark-toggle--160:var(--csstools-color-scheme--light) #23222b; - --sidebar-bg-color:var(--csstools-light-dark-toggle--160, #fff); - --csstools-light-dark-toggle--161:var(--csstools-color-scheme--light) rgb(251 251 254 / 0.1); - --sidebar-border-color:var(--csstools-light-dark-toggle--161, rgb(21 20 26 / 0.1)); - --csstools-light-dark-toggle--162:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); - --csstools-light-dark-toggle--163:var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); - --sidebar-box-shadow:0 0.25px 0.75px var(--csstools-light-dark-toggle--162, rgb(0 0 0 / 0.05)), 0 2px 6px 0 var(--csstools-light-dark-toggle--163, rgb(0 0 0 / 0.1)); - --csstools-light-dark-toggle--164:var(--csstools-color-scheme--light) #00cadb; - --resizer-hover-bg-color:var(--csstools-light-dark-toggle--164, #0062fa); - } -} - -@media screen and (forced-colors: active){ - -.sidebar{ + @media screen and (forced-colors: active){ --sidebar-bg-color:Canvas; --sidebar-border-color:CanvasText; --sidebar-box-shadow:none; --resizer-hover-bg-color:CanvasText; -} } -.sidebar{ - border-radius:var(--sidebar-border-radius); box-shadow:var(--sidebar-box-shadow); border:1px solid var(--sidebar-border-color); @@ -6932,13 +6016,11 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ width:var(--sidebar-width); min-width:var(--sidebar-min-width); max-width:var(--sidebar-max-width); - -webkit-backdrop-filter:var(--sidebar-backdrop-filter); - backdrop-filter:var(--sidebar-backdrop-filter); + backdrop-filter:var(--sidebar-backdrop-filter); box-sizing:border-box; position:relative; -} -.sidebar .sidebarResizer{ + .sidebarResizer{ width:var(--resizer-width); background-color:transparent; forced-color-adjust:none; @@ -6951,35 +6033,34 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ border:1px solid transparent; border-block-width:0; background-clip:content-box; - } -:is(.sidebar .sidebarResizer):hover{ + &:hover{ background-color:var(--resizer-hover-bg-color); border-color:white; } - -:is(.sidebar .sidebarResizer):focus-visible{ + &:focus-visible{ background-color:var(--resizer-hover-bg-color); outline:none; } + } -.sidebar.resizing{ + &.resizing{ cursor:ew-resize; -webkit-user-select:none; -moz-user-select:none; user-select:none; - } -.sidebar.resizing :not(.sidebarResizer){ + :not(.sidebarResizer){ pointer-events:none; } -.sidebar.resizing .sidebarResizer{ + .sidebarResizer{ background-color:var(--resizer-hover-bg-color); } + } +} :root{ - --csstools-color-scheme--light:initial; color-scheme:light dark; --viewer-container-height:0; @@ -6988,46 +6069,13 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ --page-border:9px solid transparent; --spreadHorizontalWrapped-margin-LR:-3.5px; --loading-icon-delay:400ms; - --csstools-light-dark-toggle--165:var(--csstools-color-scheme--light) #0df; - --focus-ring-color:var(--csstools-light-dark-toggle--165, #0060df); - --focus-ring-outline:2px solid var(--focus-ring-color); - --csstools-light-dark-toggle--166:var(--csstools-color-scheme--light) #37b847; - --new-badge-bg:var(--csstools-light-dark-toggle--166, #070); - --csstools-light-dark-toggle--167:var(--csstools-color-scheme--light) #15141a; - --new-badge-color:var(--csstools-light-dark-toggle--167, #fff); - --new-badge-border-color:light-dark(#fbfbfe / 40%, #15141a / 40%); -} - -@supports (color: light-dark(red, red)){ -:root{ --focus-ring-color:light-dark(#0060df, #0df); + --focus-ring-outline:2px solid var(--focus-ring-color); --new-badge-bg:light-dark(#070, #37b847); --new-badge-color:light-dark(#fff, #15141a); -} -} - -@supports not (color: light-dark(tan, tan)){ - -:root *{ - --csstools-light-dark-toggle--165:var(--csstools-color-scheme--light) #0df; - --focus-ring-color:var(--csstools-light-dark-toggle--165, #0060df); - --csstools-light-dark-toggle--166:var(--csstools-color-scheme--light) #37b847; - --new-badge-bg:var(--csstools-light-dark-toggle--166, #070); - --csstools-light-dark-toggle--167:var(--csstools-color-scheme--light) #15141a; - --new-badge-color:var(--csstools-light-dark-toggle--167, #fff); - } -} - -@media (prefers-color-scheme: dark){ - -:root{ - --csstools-color-scheme--light:; -} -} - -@media screen and (forced-colors: active){ + --new-badge-border-color:light-dark(#fbfbfe / 40%, #15141a / 40%); -:root{ + @media screen and (forced-colors: active){ --pdfViewer-padding-bottom:9px; --page-margin:8px auto -1px; --page-border:1px solid CanvasText; @@ -7036,8 +6084,8 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ --new-badge-bg:AccentColor; --new-badge-color:ButtonFace; --new-badge-border-color:CanvasText; -} } +} .newBadge{ background-color:var(--new-badge-bg); @@ -7067,16 +6115,6 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ 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; @@ -7085,26 +6123,21 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ --hcm-highlight-filter:none; --hcm-highlight-selected-filter:none; -} -@media screen and (forced-colors: active){ - -.pdfViewer{ + @media screen and (forced-colors: active){ --hcm-highlight-filter:invert(100%); -} } -.pdfViewer.copyAll{ + &.copyAll{ cursor:wait; } -.pdfViewer .canvasWrapper{ + .canvasWrapper{ overflow:hidden; width:100%; height:100%; - } -:is(.pdfViewer .canvasWrapper) canvas{ + canvas{ position:absolute; top:0; left:0; @@ -7113,15 +6146,17 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ width:100%; height:100%; contain:content; - } -:is(:is(.pdfViewer .canvasWrapper) canvas) .structTree{ + .structTree{ contain:strict; } -.detailView:is(:is(.pdfViewer .canvasWrapper) canvas){ + &.detailView{ image-rendering:pixelated; } + } + } +} .pdfViewer .page{ --user-unit:1; @@ -7242,68 +6277,48 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ --doorhanger-icon-opacity:0.9; --doorhanger-height:8px; - --csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) rgb(249 249 250); - - --main-color:var(--csstools-light-dark-toggle--0, rgb(12 12 13)); - --csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) rgb(42 42 46); - --body-bg-color:var(--csstools-light-dark-toggle--1, rgb(212 212 215)); - --csstools-light-dark-toggle--2:var(--csstools-color-scheme--light) rgb(0 96 223); - --progressBar-color:var(--csstools-light-dark-toggle--2, rgb(10 132 255)); - --csstools-light-dark-toggle--3:var(--csstools-color-scheme--light) rgb(40 40 43); - --progressBar-bg-color:var(--csstools-light-dark-toggle--3, rgb(221 221 222)); - --csstools-light-dark-toggle--4:var(--csstools-color-scheme--light) rgb(20 68 133); - --progressBar-blend-color:var(--csstools-light-dark-toggle--4, rgb(116 177 239)); - --csstools-light-dark-toggle--5:var(--csstools-color-scheme--light) rgb(121 121 123); - --scrollbar-color:var(--csstools-light-dark-toggle--5, auto); - --csstools-light-dark-toggle--6:var(--csstools-color-scheme--light) rgb(35 35 39); - --scrollbar-bg-color:var(--csstools-light-dark-toggle--6, auto); - --csstools-light-dark-toggle--7:var(--csstools-color-scheme--light) rgb(255 255 255); - --toolbar-icon-bg-color:var(--csstools-light-dark-toggle--7, rgb(0 0 0)); - --csstools-light-dark-toggle--8:var(--csstools-color-scheme--light) rgb(255 255 255); - --toolbar-icon-hover-bg-color:var(--csstools-light-dark-toggle--8, rgb(0 0 0)); - - --csstools-light-dark-toggle--9:var(--csstools-color-scheme--light) rgb(42 42 46 / 0.9); - - --sidebar-narrow-bg-color:var(--csstools-light-dark-toggle--9, rgb(212 212 215 / 0.9)); - --csstools-light-dark-toggle--10:var(--csstools-color-scheme--light) rgb(50 50 52); - --sidebar-toolbar-bg-color:var(--csstools-light-dark-toggle--10, rgb(245 246 247)); - --csstools-light-dark-toggle--11:var(--csstools-color-scheme--light) rgb(56 56 61); - --toolbar-bg-color:var(--csstools-light-dark-toggle--11, rgb(249 249 250)); - --csstools-light-dark-toggle--12:var(--csstools-color-scheme--light) rgb(12 12 13); - --toolbar-border-color:var(--csstools-light-dark-toggle--12, rgb(184 184 184)); + --main-color:light-dark(rgb(12 12 13), rgb(249 249 250)); + --body-bg-color:light-dark(rgb(212 212 215), rgb(42 42 46)); + --progressBar-color:light-dark(rgb(10 132 255), rgb(0 96 223)); + --progressBar-bg-color:light-dark(rgb(221 221 222), rgb(40 40 43)); + --progressBar-blend-color:light-dark(rgb(116 177 239), rgb(20 68 133)); + --scrollbar-color:light-dark(auto, rgb(121 121 123)); + --scrollbar-bg-color:light-dark(auto, rgb(35 35 39)); + --toolbar-icon-bg-color:light-dark(rgb(0 0 0), rgb(255 255 255)); + --toolbar-icon-hover-bg-color:light-dark(rgb(0 0 0), rgb(255 255 255)); + + --sidebar-narrow-bg-color:light-dark( + rgb(212 212 215 / 0.9), + rgb(42 42 46 / 0.9) + ); + --sidebar-toolbar-bg-color:light-dark(rgb(245 246 247), rgb(50 50 52)); + --toolbar-bg-color:light-dark(rgb(249 249 250), rgb(56 56 61)); + --toolbar-border-color:light-dark(rgb(184 184 184), rgb(12 12 13)); --toolbar-box-shadow:0 1px 0 var(--toolbar-border-color); --toolbar-border-bottom:none; --toolbarSidebar-box-shadow:inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.25), 0 1px 0 rgb(0 0 0 / 0.15), 0 0 1px rgb(0 0 0 / 0.1); --toolbarSidebar-border-bottom:none; --button-hover-color:color-mix(in srgb, currentColor 17%, transparent); - --csstools-light-dark-toggle--13:var(--csstools-color-scheme--light) rgb(255 255 255); - --toggled-btn-color:var(--csstools-light-dark-toggle--13, rgb(0 0 0)); + --toggled-btn-color:light-dark(rgb(0 0 0), rgb(255 255 255)); --toggled-btn-bg-color:rgb(0 0 0 / 0.3); --toggled-hover-active-btn-color:rgb(0 0 0 / 0.4); --toggled-hover-btn-outline:none; - --csstools-light-dark-toggle--14:var(--csstools-color-scheme--light) rgb(74 74 79); - --dropdown-btn-bg-color:var(--csstools-light-dark-toggle--14, rgb(215 215 219)); + --dropdown-btn-bg-color:light-dark(rgb(215 215 219), rgb(74 74 79)); --dropdown-btn-border:none; --separator-color:rgb(0 0 0 / 0.3); - --csstools-light-dark-toggle--15:var(--csstools-color-scheme--light) rgb(250 250 250); - --field-color:var(--csstools-light-dark-toggle--15, rgb(6 6 6)); - --csstools-light-dark-toggle--16:var(--csstools-color-scheme--light) rgb(64 64 68); - --field-bg-color:var(--csstools-light-dark-toggle--16, rgb(255 255 255)); - --csstools-light-dark-toggle--17:var(--csstools-color-scheme--light) rgb(115 115 115); - --field-border-color:var(--csstools-light-dark-toggle--17, rgb(187 187 188)); - --csstools-light-dark-toggle--18:var(--csstools-color-scheme--light) #42414d; - --doorhanger-bg-color:var(--csstools-light-dark-toggle--18, rgb(255 255 255)); - --csstools-light-dark-toggle--19:var(--csstools-color-scheme--light) rgb(39 39 43); - --doorhanger-border-color:var(--csstools-light-dark-toggle--19, rgb(12 12 13 / 0.2)); - --csstools-light-dark-toggle--20:var(--csstools-color-scheme--light) rgb(249 249 250); - --doorhanger-hover-color:var(--csstools-light-dark-toggle--20, rgb(12 12 13)); - --csstools-light-dark-toggle--21:var(--csstools-color-scheme--light) rgb(92 92 97); - --doorhanger-separator-color:var(--csstools-light-dark-toggle--21, rgb(222 222 222)); + --field-color:light-dark(rgb(6 6 6), rgb(250 250 250)); + --field-bg-color:light-dark(rgb(255 255 255), rgb(64 64 68)); + --field-border-color:light-dark(rgb(187 187 188), rgb(115 115 115)); + --doorhanger-bg-color:light-dark(rgb(255 255 255), #42414d); + --doorhanger-border-color:light-dark(rgb(12 12 13 / 0.2), rgb(39 39 43)); + --doorhanger-hover-color:light-dark(rgb(12 12 13), rgb(249 249 250)); + --doorhanger-separator-color:light-dark(rgb(222 222 222), rgb(92 92 97)); --dialog-button-border:none; - --csstools-light-dark-toggle--22:var(--csstools-color-scheme--light) rgb(92 92 97); - --dialog-button-bg-color:var(--csstools-light-dark-toggle--22, rgb(12 12 13 / 0.1)); - --csstools-light-dark-toggle--23:var(--csstools-color-scheme--light) rgb(115 115 115); - --dialog-button-hover-bg-color:var(--csstools-light-dark-toggle--23, rgb(12 12 13 / 0.3)); + --dialog-button-bg-color:light-dark(rgb(12 12 13 / 0.1), rgb(92 92 97)); + --dialog-button-hover-bg-color:light-dark( + rgb(12 12 13 / 0.3), + rgb(115 115 115) + ); --loading-icon:url(images/loading.svg); --toolbarButton-editorComment-icon:url(images/comment-editButton.svg); @@ -7353,102 +6368,7 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ --comment-edit-button-icon:url(images/comment-editButton.svg); } -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)){ -:root{ - - --main-color:light-dark(rgb(12 12 13), rgb(249 249 250)); - --body-bg-color:light-dark(rgb(212 212 215), rgb(42 42 46)); - --progressBar-color:light-dark(rgb(10 132 255), rgb(0 96 223)); - --progressBar-bg-color:light-dark(rgb(221 221 222), rgb(40 40 43)); - --progressBar-blend-color:light-dark(rgb(116 177 239), rgb(20 68 133)); - --scrollbar-color:light-dark(auto, rgb(121 121 123)); - --scrollbar-bg-color:light-dark(auto, rgb(35 35 39)); - --toolbar-icon-bg-color:light-dark(rgb(0 0 0), rgb(255 255 255)); - --toolbar-icon-hover-bg-color:light-dark(rgb(0 0 0), rgb(255 255 255)); - - --sidebar-narrow-bg-color:light-dark( - rgb(212 212 215 / 0.9), - rgb(42 42 46 / 0.9) - ); - --sidebar-toolbar-bg-color:light-dark(rgb(245 246 247), rgb(50 50 52)); - --toolbar-bg-color:light-dark(rgb(249 249 250), rgb(56 56 61)); - --toolbar-border-color:light-dark(rgb(184 184 184), rgb(12 12 13)); - --toggled-btn-color:light-dark(rgb(0 0 0), rgb(255 255 255)); - --dropdown-btn-bg-color:light-dark(rgb(215 215 219), rgb(74 74 79)); - --field-color:light-dark(rgb(6 6 6), rgb(250 250 250)); - --field-bg-color:light-dark(rgb(255 255 255), rgb(64 64 68)); - --field-border-color:light-dark(rgb(187 187 188), rgb(115 115 115)); - --doorhanger-bg-color:light-dark(rgb(255 255 255), #42414d); - --doorhanger-border-color:light-dark(rgb(12 12 13 / 0.2), rgb(39 39 43)); - --doorhanger-hover-color:light-dark(rgb(12 12 13), rgb(249 249 250)); - --doorhanger-separator-color:light-dark(rgb(222 222 222), rgb(92 92 97)); - --dialog-button-bg-color:light-dark(rgb(12 12 13 / 0.1), rgb(92 92 97)); - --dialog-button-hover-bg-color:light-dark( - rgb(12 12 13 / 0.3), - rgb(115 115 115) - ); -} -} - -@supports not (color: light-dark(tan, tan)){ - -:root *{ - - --csstools-light-dark-toggle--0:var(--csstools-color-scheme--light) rgb(249 249 250); - - --main-color:var(--csstools-light-dark-toggle--0, rgb(12 12 13)); - --csstools-light-dark-toggle--1:var(--csstools-color-scheme--light) rgb(42 42 46); - --body-bg-color:var(--csstools-light-dark-toggle--1, rgb(212 212 215)); - --csstools-light-dark-toggle--2:var(--csstools-color-scheme--light) rgb(0 96 223); - --progressBar-color:var(--csstools-light-dark-toggle--2, rgb(10 132 255)); - --csstools-light-dark-toggle--3:var(--csstools-color-scheme--light) rgb(40 40 43); - --progressBar-bg-color:var(--csstools-light-dark-toggle--3, rgb(221 221 222)); - --csstools-light-dark-toggle--4:var(--csstools-color-scheme--light) rgb(20 68 133); - --progressBar-blend-color:var(--csstools-light-dark-toggle--4, rgb(116 177 239)); - --csstools-light-dark-toggle--5:var(--csstools-color-scheme--light) rgb(121 121 123); - --scrollbar-color:var(--csstools-light-dark-toggle--5, auto); - --csstools-light-dark-toggle--6:var(--csstools-color-scheme--light) rgb(35 35 39); - --scrollbar-bg-color:var(--csstools-light-dark-toggle--6, auto); - --csstools-light-dark-toggle--7:var(--csstools-color-scheme--light) rgb(255 255 255); - --toolbar-icon-bg-color:var(--csstools-light-dark-toggle--7, rgb(0 0 0)); - --csstools-light-dark-toggle--8:var(--csstools-color-scheme--light) rgb(255 255 255); - --toolbar-icon-hover-bg-color:var(--csstools-light-dark-toggle--8, rgb(0 0 0)); - - --csstools-light-dark-toggle--9:var(--csstools-color-scheme--light) rgb(42 42 46 / 0.9); - - --sidebar-narrow-bg-color:var(--csstools-light-dark-toggle--9, rgb(212 212 215 / 0.9)); - --csstools-light-dark-toggle--10:var(--csstools-color-scheme--light) rgb(50 50 52); - --sidebar-toolbar-bg-color:var(--csstools-light-dark-toggle--10, rgb(245 246 247)); - --csstools-light-dark-toggle--11:var(--csstools-color-scheme--light) rgb(56 56 61); - --toolbar-bg-color:var(--csstools-light-dark-toggle--11, rgb(249 249 250)); - --csstools-light-dark-toggle--12:var(--csstools-color-scheme--light) rgb(12 12 13); - --toolbar-border-color:var(--csstools-light-dark-toggle--12, rgb(184 184 184)); - --csstools-light-dark-toggle--13:var(--csstools-color-scheme--light) rgb(255 255 255); - --toggled-btn-color:var(--csstools-light-dark-toggle--13, rgb(0 0 0)); - --csstools-light-dark-toggle--14:var(--csstools-color-scheme--light) rgb(74 74 79); - --dropdown-btn-bg-color:var(--csstools-light-dark-toggle--14, rgb(215 215 219)); - --csstools-light-dark-toggle--15:var(--csstools-color-scheme--light) rgb(250 250 250); - --field-color:var(--csstools-light-dark-toggle--15, rgb(6 6 6)); - --csstools-light-dark-toggle--16:var(--csstools-color-scheme--light) rgb(64 64 68); - --field-bg-color:var(--csstools-light-dark-toggle--16, rgb(255 255 255)); - --csstools-light-dark-toggle--17:var(--csstools-color-scheme--light) rgb(115 115 115); - --field-border-color:var(--csstools-light-dark-toggle--17, rgb(187 187 188)); - --csstools-light-dark-toggle--18:var(--csstools-color-scheme--light) #42414d; - --doorhanger-bg-color:var(--csstools-light-dark-toggle--18, rgb(255 255 255)); - --csstools-light-dark-toggle--19:var(--csstools-color-scheme--light) rgb(39 39 43); - --doorhanger-border-color:var(--csstools-light-dark-toggle--19, rgb(12 12 13 / 0.2)); - --csstools-light-dark-toggle--20:var(--csstools-color-scheme--light) rgb(249 249 250); - --doorhanger-hover-color:var(--csstools-light-dark-toggle--20, rgb(12 12 13)); - --csstools-light-dark-toggle--21:var(--csstools-color-scheme--light) rgb(92 92 97); - --doorhanger-separator-color:var(--csstools-light-dark-toggle--21, rgb(222 222 222)); - --csstools-light-dark-toggle--22:var(--csstools-color-scheme--light) rgb(92 92 97); - --dialog-button-bg-color:var(--csstools-light-dark-toggle--22, rgb(12 12 13 / 0.1)); - --csstools-light-dark-toggle--23:var(--csstools-color-scheme--light) rgb(115 115 115); - --dialog-button-hover-bg-color:var(--csstools-light-dark-toggle--23, rgb(12 12 13 / 0.3)); - } -} - -[dir="rtl"]:root{ +:root:dir(rtl){ --dir-factor:-1; } @@ -7497,13 +6417,14 @@ button.hasPopupMenu[aria-expanded="false"] + menu{ } } -html[data-toolbar-density="compact"]{ +html{ + &[data-toolbar-density="compact"]{ --toolbar-height:30px; } - -html[data-toolbar-density="touch"]{ + &[data-toolbar-density="touch"]{ --toolbar-height:44px; } +} html, body{ @@ -7515,9 +6436,8 @@ body{ margin:0; background-color:var(--body-bg-color); scrollbar-color:var(--scrollbar-color) var(--scrollbar-bg-color); -} -body.wait::before{ + &.wait::before{ content:""; position:fixed; width:100%; @@ -7525,6 +6445,7 @@ body.wait::before{ z-index:100000; cursor:wait; } +} .visuallyHidden{ position:absolute; top:0; @@ -7623,39 +6544,39 @@ body.wait::before{ border-bottom:var(--toolbarSidebar-border-bottom); padding:var(--toolbar-vertical-padding) var(--toolbar-horizontal-padding); justify-content:space-between; -} -#toolbarSidebar #toolbarSidebarLeft{ + #toolbarSidebarLeft{ width:auto; height:100%; - } -:is(#toolbarSidebar #toolbarSidebarLeft) #viewThumbnail::before{ + #viewThumbnail::before{ -webkit-mask-image:var(--toolbarButton-viewThumbnail-icon); mask-image:var(--toolbarButton-viewThumbnail-icon); } -:is(#toolbarSidebar #toolbarSidebarLeft) #viewOutline::before{ + #viewOutline::before{ -webkit-mask-image:var(--toolbarButton-viewOutline-icon); mask-image:var(--toolbarButton-viewOutline-icon); transform:scaleX(var(--dir-factor)); } -:is(#toolbarSidebar #toolbarSidebarLeft) #viewAttachments::before{ + #viewAttachments::before{ -webkit-mask-image:var(--toolbarButton-viewAttachments-icon); mask-image:var(--toolbarButton-viewAttachments-icon); } -:is(#toolbarSidebar #toolbarSidebarLeft) #viewLayers::before{ + #viewLayers::before{ -webkit-mask-image:var(--toolbarButton-viewLayers-icon); mask-image:var(--toolbarButton-viewLayers-icon); } + } -#toolbarSidebar #toolbarSidebarRight{ + #toolbarSidebarRight{ width:auto; height:100%; padding-inline-end:2px; } +} .doorHanger, .doorHangerRight{ @@ -7664,9 +6585,9 @@ body.wait::before{ border:var(--doorhanger-border-color-whcm); background-color:var(--doorhanger-bg-color); inset-block-start:calc(100% + var(--doorhanger-height) - 2px); -} -:is(.doorHanger,.doorHangerRight)::after,:is(.doorHanger,.doorHangerRight)::before{ + &::after, + &::before{ bottom:100%; border-style:solid; border-color:transparent; @@ -7678,40 +6599,41 @@ body.wait::before{ opacity:var(--doorhanger-triangle-opacity-whcm); } -:is(.doorHanger,.doorHangerRight)::before{ + &::before{ border-width:calc(var(--doorhanger-height) + 2px); border-bottom-color:var(--doorhanger-border-color); } -:is(.doorHanger,.doorHangerRight)::after{ + &::after{ border-width:var(--doorhanger-height); } +} .doorHangerRight{ inset-inline-end:calc(50% - var(--doorhanger-height) - 1px); -} -.doorHangerRight::before{ + &::before{ inset-inline-end:-1px; } -.doorHangerRight::after{ + &::after{ border-bottom-color:var(--doorhanger-bg-color); inset-inline-end:1px; } +} .doorHanger{ inset-inline-start:calc(50% - var(--doorhanger-height) - 1px); -} -.doorHanger::before{ + &::before{ inset-inline-start:-1px; } -.doorHanger::after{ + &::after{ border-bottom-color:var(--toolbar-bg-color); inset-inline-start:1px; } +} .dialogButton{ border:none; @@ -7870,19 +6792,18 @@ body.wait::before{ .toggleButton{ display:inline; -} -.toggleButton:has( > input:checked){ + &:has(> input:checked){ color:var(--toggled-btn-color); background-color:var(--toggled-btn-bg-color); } -.toggleButton:is(:hover,:has( > input:focus-visible)){ + &:is(:hover, :has(> input:focus-visible)){ color:var(--toggled-btn-color); background-color:var(--button-hover-color); } -.toggleButton > input{ + & > input{ position:absolute; top:50%; left:50%; @@ -7890,6 +6811,7 @@ body.wait::before{ width:0; height:0; } +} .toolbarField{ padding:4px 7px; @@ -7903,11 +6825,11 @@ body.wait::before{ font-size:12px; line-height:16px; outline:none; -} -.toolbarField:focus{ + &:focus{ border-color:#0a84ff; } +} #pageNumber{ -moz-appearance:textfield; @@ -7915,25 +6837,24 @@ body.wait::before{ width:40px; background-size:0 0; transition-property:none; -} -#pageNumber::-webkit-inner-spin-button{ + &::-webkit-inner-spin-button{ -webkit-appearance:none; } -.loadingInput:has( > .loading:is(#pageNumber))::after{ + .loadingInput:has(> &.loading)::after{ display:inline; visibility:visible; transition-property:visibility; transition-delay:var(--loading-icon-delay); } +} .loadingInput{ position:relative; -} -.loadingInput::after{ + &::after{ position:absolute; visibility:hidden; display:none; @@ -7948,19 +6869,21 @@ body.wait::before{ mask-image:var(--loading-icon); } -.loadingInput.start::after{ + &.start::after{ inset-inline-start:4px; } -.loadingInput.end::after{ + &.end::after{ inset-inline-end:4px; } +} #outlineOptionsContainer{ display:none; -} -#sidebarContainer:has(#outlineView:not(.hidden)) #outlineOptionsContainer{ + + #sidebarContainer:has(#outlineView:not(.hidden)) &{ display:inline flex; } +} .dialogButton{ width:auto; @@ -8050,6 +6973,10 @@ dialog :link{ margin-top:10px; } +#printServiceDialog{ + min-width:200px; +} + .grab-to-pan-grab{ cursor:grab !important; } @@ -8089,16 +7016,15 @@ dialog :link{ flex:none; position:relative; padding:0; -} -.toolbarButton > span{ + > span{ display:inline-block; width:0; height:0; overflow:hidden; } -.toolbarButton::before{ + &::before{ opacity:var(--toolbar-icon-opacity); display:inline-block; width:var(--icon-size); @@ -8111,37 +7037,37 @@ dialog :link{ mask-position:center; } -.toolbarButton.toggled{ + &.toggled{ background-color:var(--toggled-btn-bg-color); color:var(--toggled-btn-color); - } -.toolbarButton.toggled::before{ + &::before{ background-color:var(--toggled-btn-color); } -.toolbarButton.toggled:hover{ + &:hover{ outline:var(--toggled-hover-btn-outline) !important; - } -.toolbarButton.toggled:hover:active{ + &:active{ background-color:var(--toggled-hover-active-btn-color); } + } + } -.toolbarButton:is(:hover,:focus-visible){ + &:is(:hover, :focus-visible){ background-color:var(--button-hover-color); - } -.toolbarButton:is(:hover,:focus-visible)::before{ + &::before{ background-color:var(--toolbar-icon-hover-bg-color); } + } -.toolbarButton:is([disabled="disabled"],[disabled]){ + &:is([disabled="disabled"], [disabled]){ opacity:0.5; pointer-events:none; } -.toolbarButton.labeled{ + &.labeled{ width:100%; min-height:var(--menuitem-height); justify-content:flex-start; @@ -8151,31 +7077,32 @@ dialog :link{ text-align:start; white-space:normal; cursor:default; - } -.toolbarButton.labeled:is(a){ + &:is(a){ text-decoration:none; - } -.toolbarButton.labeled[href="#"]:is(a){ + &[href="#"]{ opacity:0.5; pointer-events:none; } + } -.toolbarButton.labeled::before{ + &::before{ opacity:var(--doorhanger-icon-opacity); } -.toolbarButton.labeled:is(:hover,:focus-visible){ + &:is(:hover, :focus-visible){ color:var(--doorhanger-hover-color); } -.toolbarButton.labeled > span{ + > span{ display:inline-block; width:-moz-max-content; width:max-content; height:auto; } + } +} .toolbarButtonWithContainer{ height:100%; @@ -8183,18 +7110,17 @@ dialog :link{ display:inline-block; position:relative; flex:none; -} -.toolbarButtonWithContainer > .toolbarButton{ + > .toolbarButton{ width:100%; height:100%; } -.toolbarButtonWithContainer .menu{ + .menu{ padding-block:5px; } -.toolbarButtonWithContainer .menuContainer{ + .menuContainer{ height:auto; max-height:calc( var(--viewer-container-height) - var(--toolbar-height) - @@ -8206,7 +7132,7 @@ dialog :link{ overflow-y:auto; } -.toolbarButtonWithContainer .editorParamsToolbar{ + .editorParamsToolbar{ --editor-toolbar-min-width:220px; height:auto; @@ -8216,14 +7142,13 @@ dialog :link{ position:absolute; z-index:30000; cursor:default; - } -:is(.toolbarButtonWithContainer .editorParamsToolbar) :is(#editorStampAddImage,#editorSignatureAddSignature)::before{ + :is(#editorStampAddImage, #editorSignatureAddSignature)::before{ -webkit-mask-image:var(--editorParams-stampAddImage-icon); mask-image:var(--editorParams-stampAddImage-icon); } -:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsLabel{ + .editorParamsLabel{ flex:none; font:menu; font-size:13px; @@ -8236,11 +7161,11 @@ dialog :link{ color:var(--main-color); } -:is(.toolbarButtonWithContainer .editorParamsToolbar) button:is(:hover,:focus-visible) .editorParamsLabel{ + button:is(:hover, :focus-visible) .editorParamsLabel{ color:var(--doorhanger-hover-color); } -:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsToolbarContainer{ + .editorParamsToolbarContainer{ width:100%; height:auto; display:flex; @@ -8248,40 +7173,44 @@ dialog :link{ box-sizing:border-box; padding-inline:10px; padding-block:10px; - } -:is(:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsToolbarContainer) > .editorParamsSetter{ + > .editorParamsSetter{ min-height:26px; display:flex; align-items:center; justify-content:space-between; } -:is(:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsToolbarContainer) .editorParamsColor{ + .editorParamsColor{ width:32px; height:32px; flex:none; padding:0; } -:is(:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsToolbarContainer) .editorParamsSlider{ + .editorParamsSlider{ background-color:transparent; width:90px; flex:0 1 0; font:message-box; - } -:is(:is(:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsToolbarContainer) .editorParamsSlider)::-moz-range-progress{ + &::-moz-range-progress{ background-color:black; } -:is(:is(:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsToolbarContainer) .editorParamsSlider)::-webkit-slider-runnable-track,:is(:is(:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsToolbarContainer) .editorParamsSlider)::-moz-range-track{ + &::-webkit-slider-runnable-track, + &::-moz-range-track{ background-color:black; } -:is(:is(:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsToolbarContainer) .editorParamsSlider)::-webkit-slider-thumb,:is(:is(:is(.toolbarButtonWithContainer .editorParamsToolbar) .editorParamsToolbarContainer) .editorParamsSlider)::-moz-range-thumb{ + &::-webkit-slider-thumb, + &::-moz-range-thumb{ background-color:white; } + } + } + } +} #secondaryToolbar{ height:auto; @@ -8291,107 +7220,109 @@ dialog :link{ cursor:default; min-height:26px; max-height:calc(var(--viewer-container-height) - 40px); -} -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #secondaryOpenFile::before{ + #secondaryToolbarButtonContainer{ + #secondaryOpenFile::before{ -webkit-mask-image:var(--toolbarButton-openFile-icon); mask-image:var(--toolbarButton-openFile-icon); } -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #secondaryPrint::before{ + #secondaryPrint::before{ -webkit-mask-image:var(--toolbarButton-print-icon); mask-image:var(--toolbarButton-print-icon); } -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #secondaryDownload::before{ + #secondaryDownload::before{ -webkit-mask-image:var(--toolbarButton-download-icon); mask-image:var(--toolbarButton-download-icon); } -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #presentationMode::before{ + #presentationMode::before{ -webkit-mask-image:var(--toolbarButton-presentationMode-icon); mask-image:var(--toolbarButton-presentationMode-icon); } -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #viewBookmark::before{ + #viewBookmark::before{ -webkit-mask-image:var(--toolbarButton-bookmark-icon); mask-image:var(--toolbarButton-bookmark-icon); } -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #firstPage::before{ + #firstPage::before{ -webkit-mask-image:var(--secondaryToolbarButton-firstPage-icon); mask-image:var(--secondaryToolbarButton-firstPage-icon); } -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #lastPage::before{ + #lastPage::before{ -webkit-mask-image:var(--secondaryToolbarButton-lastPage-icon); mask-image:var(--secondaryToolbarButton-lastPage-icon); } -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #pageRotateCcw::before{ + #pageRotateCcw::before{ -webkit-mask-image:var(--secondaryToolbarButton-rotateCcw-icon); mask-image:var(--secondaryToolbarButton-rotateCcw-icon); } -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #pageRotateCw::before{ + #pageRotateCw::before{ -webkit-mask-image:var(--secondaryToolbarButton-rotateCw-icon); mask-image:var(--secondaryToolbarButton-rotateCw-icon); } -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #cursorSelectTool::before{ + #cursorSelectTool::before{ -webkit-mask-image:var(--secondaryToolbarButton-selectTool-icon); mask-image:var(--secondaryToolbarButton-selectTool-icon); } -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #cursorHandTool::before{ + #cursorHandTool::before{ -webkit-mask-image:var(--secondaryToolbarButton-handTool-icon); mask-image:var(--secondaryToolbarButton-handTool-icon); } -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #scrollPage::before{ + #scrollPage::before{ -webkit-mask-image:var(--secondaryToolbarButton-scrollPage-icon); mask-image:var(--secondaryToolbarButton-scrollPage-icon); } -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #scrollVertical::before{ + #scrollVertical::before{ -webkit-mask-image:var(--secondaryToolbarButton-scrollVertical-icon); mask-image:var(--secondaryToolbarButton-scrollVertical-icon); } -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #scrollHorizontal::before{ + #scrollHorizontal::before{ -webkit-mask-image:var(--secondaryToolbarButton-scrollHorizontal-icon); mask-image:var(--secondaryToolbarButton-scrollHorizontal-icon); } -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #scrollWrapped::before{ + #scrollWrapped::before{ -webkit-mask-image:var(--secondaryToolbarButton-scrollWrapped-icon); mask-image:var(--secondaryToolbarButton-scrollWrapped-icon); } -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #spreadNone::before{ + #spreadNone::before{ -webkit-mask-image:var(--secondaryToolbarButton-spreadNone-icon); mask-image:var(--secondaryToolbarButton-spreadNone-icon); } -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #spreadOdd::before{ + #spreadOdd::before{ -webkit-mask-image:var(--secondaryToolbarButton-spreadOdd-icon); mask-image:var(--secondaryToolbarButton-spreadOdd-icon); } -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #spreadEven::before{ + #spreadEven::before{ -webkit-mask-image:var(--secondaryToolbarButton-spreadEven-icon); mask-image:var(--secondaryToolbarButton-spreadEven-icon); } -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #imageAltTextSettings::before{ + #imageAltTextSettings::before{ -webkit-mask-image:var(--secondaryToolbarButton-imageAltTextSettings-icon); mask-image:var(--secondaryToolbarButton-imageAltTextSettings-icon); } -:is(#secondaryToolbar #secondaryToolbarButtonContainer) #documentProperties::before{ + #documentProperties::before{ -webkit-mask-image:var(--secondaryToolbarButton-documentProperties-icon); mask-image:var(--secondaryToolbarButton-documentProperties-icon); } + } +} #findbar{ --input-horizontal-padding:4px; @@ -8412,103 +7343,103 @@ dialog :link{ box-sizing:border-box; flex-wrap:wrap; justify-content:flex-start; -} -#findbar > *{ + > *{ height:var(--toolbar-height); padding:var(--findbar-padding); } -#findbar #findInputContainer{ + #findInputContainer{ margin-inline-start:2px; - } -:is(#findbar #findInputContainer) #findPreviousButton::before{ + #findPreviousButton::before{ -webkit-mask-image:var(--findbarButton-previous-icon); mask-image:var(--findbarButton-previous-icon); } -:is(#findbar #findInputContainer) #findNextButton::before{ + #findNextButton::before{ -webkit-mask-image:var(--findbarButton-next-icon); mask-image:var(--findbarButton-next-icon); } -:is(#findbar #findInputContainer) #findInput{ + #findInput{ width:200px; padding:5px var(--input-horizontal-padding); - } - -:is(:is(#findbar #findInputContainer) #findInput)::-moz-placeholder{ + &::-moz-placeholder{ font-style:normal; } - -:is(:is(#findbar #findInputContainer) #findInput)::placeholder{ + &::placeholder{ font-style:normal; } -.loadingInput:has( > [data-status="pending"]:is(:is(#findbar #findInputContainer) #findInput))::after{ + .loadingInput:has(> &[data-status="pending"])::after{ display:inline; visibility:visible; inset-inline-end:calc(var(--input-horizontal-padding) + 1px); } -[data-status="notFound"]:is(:is(#findbar #findInputContainer) #findInput){ + &[data-status="notFound"]{ background-color:rgb(255 102 102); } + } + } -#findbar #findbarMessageContainer{ + #findbarMessageContainer{ display:none; gap:4px; - } -:is(#findbar #findbarMessageContainer):has( > :is(#findResultsCount,#findMsg):not(:empty)){ + &:has(> :is(#findResultsCount, #findMsg):not(:empty)){ display:inline flex; } -:is(#findbar #findbarMessageContainer) #findResultsCount{ + #findResultsCount{ background-color:rgb(217 217 217); color:rgb(82 82 82); padding-block:4px; - } -:is(:is(#findbar #findbarMessageContainer) #findResultsCount):empty{ + &:empty{ display:none; } + } -[data-status="notFound"]:is(:is(#findbar #findbarMessageContainer) #findMsg){ + #findMsg{ + &[data-status="notFound"]{ font-weight:bold; } -:is(:is(#findbar #findbarMessageContainer) #findMsg):empty{ + &:empty{ display:none; } + } + } -#findbar.wrapContainers{ + &.wrapContainers{ flex-direction:column; align-items:flex-start; height:-moz-max-content; height:max-content; - } -#findbar.wrapContainers .toolbarLabel{ + .toolbarLabel{ margin:0 4px; } -#findbar.wrapContainers #findbarMessageContainer{ + #findbarMessageContainer{ flex-wrap:wrap; flex-flow:column nowrap; align-items:flex-start; height:-moz-max-content; height:max-content; - } -:is(#findbar.wrapContainers #findbarMessageContainer) #findResultsCount{ + #findResultsCount{ height:calc(var(--toolbar-height) - 2 * var(--findbar-padding)); } -:is(#findbar.wrapContainers #findbarMessageContainer) #findMsg{ + #findMsg{ min-height:var(--toolbar-height); } + } + } +} @page{ margin:0; @@ -8593,11 +7524,11 @@ dialog :link{ flex-direction:column; align-items:center; justify-content:center; -} -.toolbarLabel > label{ + > label{ width:100%; } +} .toolbarHorizontalGroup{ height:100%; @@ -8633,13 +7564,12 @@ dialog :link{ cursor:default; box-sizing:border-box; outline:none; -} -.dropdownToolbarButton:hover{ + &:hover{ background-color:var(--button-hover-color); } -.dropdownToolbarButton > select{ + > select{ -webkit-appearance:none; -moz-appearance:none; appearance:none; @@ -8655,19 +7585,19 @@ dialog :link{ border:none; outline:none; background-color:var(--dropdown-btn-bg-color); - } -:is(.dropdownToolbarButton > select) > option{ + > option{ background:var(--doorhanger-bg-color); color:var(--main-color); } -:is(.dropdownToolbarButton > select):is(:hover,:focus-visible){ + &:is(:hover, :focus-visible){ background-color:var(--button-hover-color); color:var(--toggled-btn-color); } + } -.dropdownToolbarButton::after{ + &::after{ position:absolute; display:inline; width:var(--icon-size); @@ -8684,9 +7614,10 @@ dialog :link{ mask-image:var(--toolbarButton-menuArrow-icon); } -.dropdownToolbarButton:is(:hover,:focus-visible,:active)::after{ + &:is(:hover, :focus-visible, :active)::after{ background-color:var(--toolbar-icon-hover-bg-color); } +} #toolbarContainer{ --menuitem-height:calc(var(--toolbar-height) - 6px); @@ -8700,38 +7631,37 @@ dialog :link{ background-color:var(--toolbar-bg-color); box-shadow:var(--toolbar-box-shadow); border-bottom:var(--toolbar-border-bottom); -} -#toolbarContainer #toolbarViewer{ + #toolbarViewer{ width:100%; height:100%; justify-content:space-between; - } -:is(#toolbarContainer #toolbarViewer) > *{ + > *{ flex:none; } -:is(#toolbarContainer #toolbarViewer) input{ + input{ font:message-box; } -:is(#toolbarContainer #toolbarViewer) .toolbarButtonSpacer{ + .toolbarButtonSpacer{ width:30px; display:block; height:1px; } -:is(#toolbarContainer #toolbarViewer) #toolbarViewerLeft{ + #toolbarViewerLeft{ margin-inline-start:8px; - } -:is(:is(#toolbarContainer #toolbarViewer) #toolbarViewerLeft) #numPages.toolbarLabel{ + #numPages.toolbarLabel{ padding-inline-start:3px; flex:none; } + } + } -#toolbarContainer #loadingBar{ + #loadingBar{ --progressBar-percent:0%; --progressBar-end-offset:0; @@ -8744,9 +7674,8 @@ dialog :link{ transition-property:inset-inline-start; transition-duration:var(--sidebar-transition-duration); transition-timing-function:var(--sidebar-transition-timing-function); - } -:is(#toolbarContainer #loadingBar) .progress{ + .progress{ position:absolute; top:0; inset-inline-start:0; @@ -8759,13 +7688,12 @@ dialog :link{ transition:transform 200ms; } -.indeterminate:is(#toolbarContainer #loadingBar) .progress{ + &.indeterminate .progress{ transform:none; background-color:var(--progressBar-bg-color); transition:none; - } -:is(.indeterminate:is(#toolbarContainer #loadingBar) .progress) .glimmer{ + .glimmer{ position:absolute; top:0; inset-inline-start:0; @@ -8782,6 +7710,9 @@ dialog :link{ ); animation:progressIndeterminate 1s linear infinite; } + } + } +} @media all and (max-width: 840px){ #sidebarContainer{ diff --git a/packages/pdfjs-viewer/viewer/viewer.html b/packages/pdfjs-viewer/viewer/viewer.html index 2ed6e5f90a1..92599e0a253 100644 --- a/packages/pdfjs-viewer/viewer/viewer.html +++ b/packages/pdfjs-viewer/viewer/viewer.html @@ -27,6 +27,18 @@ PDF.js viewer + + + @@ -107,7 +119,7 @@ hidden="true" > - +