diff --git a/src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj b/src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj index c33275fe..fd5f4897 100644 --- a/src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj +++ b/src/components/BootstrapBlazor.PdfReader/BootstrapBlazor.PdfReader.csproj @@ -1,7 +1,7 @@  - 10.0.4 + 10.0.6 diff --git a/src/components/BootstrapBlazor.PdfReader/EnumPageMode.cs b/src/components/BootstrapBlazor.PdfReader/EnumPageMode.cs deleted file mode 100644 index 0920c98a..00000000 --- a/src/components/BootstrapBlazor.PdfReader/EnumPageMode.cs +++ /dev/null @@ -1,37 +0,0 @@ -// Copyright (c) Argo Zhang (argo@163.com). All rights reserved. -// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information. -// Website: https://www.blazor.zone or https://argozhang.github.io/ - -namespace BootstrapBlazor.Components; - -/// -/// 页面模式 -/// -public enum EnumPageMode -{ - /// - /// 缩略图 / SidebarView.THUMBS; - /// - Thumbs, - - /// - /// 大纲 / SidebarView.OUTLINE , non-standard - /// - Outline, - - /// - /// 附件 / SidebarView.ATTACHMENTS , non-standard - /// - Attachments, - - /// - /// 图层 / SidebarView.LAYERS , non-standard - /// - - Layers, - - /// - /// SidebarView.NONE; - /// - None -} diff --git a/src/components/BootstrapBlazor.PdfReader/EnumZoomMode.cs b/src/components/BootstrapBlazor.PdfReader/EnumZoomMode.cs deleted file mode 100644 index abad078e..00000000 --- a/src/components/BootstrapBlazor.PdfReader/EnumZoomMode.cs +++ /dev/null @@ -1,106 +0,0 @@ -// Copyright (c) Argo Zhang (argo@163.com). All rights reserved. -// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information. -// Website: https://www.blazor.zone or https://argozhang.github.io/ - -using System.ComponentModel; -using System.Reflection; - -namespace BootstrapBlazor.Components; - -/// -/// 缩放模式 -/// -public enum EnumZoomMode -{ - /// - /// 自动缩放 - /// - [Description("auto")] - Auto, - - /// - /// 实际大小 - /// - [Description("page-actual")] - PageActual, - - /// - /// 适合页面 - /// - [Description("page-fit")] - PageFit, - - /// - /// 适合页宽 - /// - [Description("page-width")] - PageWidth, - - /// - /// - /// - [Description("page-height")] - PageHeight, - - /// - /// - /// - [Description("pref")] - Pref, - - /// - /// - /// - [Description("refW")] - RefW, - - /// - /// - /// - [Description("75")] - Zoom75, - - /// - /// - /// - [Description("50")] - Zoom50, - - /// - /// - /// - [Description("25")] - Zoom25, - - /// - /// - /// - [Description("200")] - Zoom200, -} - -/// -/// Enum 扩展方法 -/// -internal static class EnumExtensions -{ - /// - /// 重写Enum ToString（） - /// - /// - /// - public static string GetEnumName(this Enum en) - { - Type temType = en.GetType(); - MemberInfo[] memberInfos = temType.GetMember(en.ToString()); - if (memberInfos != null && memberInfos.Length > 0) - { - object[] objs = memberInfos[0].GetCustomAttributes(typeof(DescriptionAttribute), false); - if (objs != null && objs.Length > 0) - { - return ((DescriptionAttribute)objs[0]).Description; - } - } - return en.ToString(); - } -} diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor index ddc8d7be..6de2cc4b 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor @@ -3,9 +3,9 @@ @inherits BootstrapModuleComponentBase
- @if (ShowToolbar) - { -
+
+ @if (ShowToolbar) + {
@if (EnableThumbnails) { @@ -13,33 +13,33 @@ } @_docTitle
-
+
- / + /
- +
- - + +
-
@Localizer["PageActual"]
-
@Localizer["FitWidth"]
-
@Localizer["FitHeight"]
+
@Localizer["PageActual"]
+
@Localizer["FitWidth"]
+
@Localizer["FitHeight"]
-
-
+
+
@@ -83,8 +83,8 @@
-
- } + } +
@if (EnableThumbnails) { diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs index 7e646a0c..8e6b4940 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.cs @@ -4,7 +4,6 @@ using Microsoft.AspNetCore.Components; using Microsoft.Extensions.Localization; -using System.Globalization; namespace BootstrapBlazor.Components; @@ -135,57 +134,13 @@ public partial class PdfReader .AddClassFromAttributes(AdditionalAttributes) .Build(); - private string? ViewBodyString => CssBuilder.Default("bb-view-group bb-view-toolbar-main") - .AddClass("fit-width", FitMode == PdfReaderFitMode.PageHeight) - .Build(); - private string? _docTitle; - private PdfReaderFitMode _fitMode; private uint _currentPage; private string? _url; - private string? _currentScale; private string? _dropdownItemCheckIcon; private string? _dropdownItemDefaultIcon; private bool _enableThumbnails = true; - - private string CurrentPageString - { - get => CurrentPage.ToString(CultureInfo.InvariantCulture); - set => SetCurrentPage(value); - } - - private void SetCurrentPage(string value) - { - if (uint.TryParse(value, NumberStyles.Integer, CultureInfo.InvariantCulture, out var num)) - { - CurrentPage = num; - } - } - - private string CurrentScaleString - { - get => $"{CurrentScale ?? "100"}%"; - set => SetCurrentScale(value); - } - - private void SetCurrentScale(string value) - { - if (string.IsNullOrEmpty(value)) - { - CurrentScale = "100"; - } - else if (float.TryParse(value.TrimEnd("%"), out var v)) - { - v = v switch - { - > 500 => 500, - < 25 => 25, - _ => v - }; - - CurrentScale = v.ToString(CultureInfo.InvariantCulture); - } - } + private bool _showToolbar = true; /// /// @@ -216,11 +171,10 @@ protected override async Task OnAfterRenderAsync(bool firstRender) if (firstRender) { - _fitMode = FitMode; - _currentPage = CurrentPage; _url = Url; - _currentScale = CurrentScale; + _currentPage = CurrentPage; _enableThumbnails = EnableThumbnails; + _showToolbar = ShowToolbar; } if (_url != Url) @@ -228,21 +182,18 @@ protected override async Task OnAfterRenderAsync(bool firstRender) _url = Url; await InvokeInitAsync(); } - - if (_fitMode != FitMode) - { - _fitMode = FitMode; - await InvokeVoidAsync("setScaleValue", Id, _fitMode.ToDescriptionString()); - } if (_currentPage != CurrentPage) { _currentPage = CurrentPage; await NavigateToPageAsync(_currentPage); } - if (_currentScale != CurrentScale) + if (_showToolbar != ShowToolbar) { - _currentScale = CurrentScale; - await InvokeVoidAsync("scale", Id, _currentScale); + _showToolbar = ShowToolbar; + if (_showToolbar) + { + await InvokeVoidAsync("resetToolbar", Id); + } } if (_enableThumbnails != EnableThumbnails) { @@ -263,6 +214,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender) Url, FitMode, EnableThumbnails, + CurrentPage, TriggerPagesInit = OnPagesInitAsync != null, TriggerPagesLoaded = OnPagesLoadedAsync != null, TriggerPageChanged = OnPageChangedAsync != null, @@ -277,27 +229,21 @@ protected override async Task OnAfterRenderAsync(bool firstRender) public Task NavigateToPageAsync(uint pageNumber) => InvokeVoidAsync("navigateToPage", Id, pageNumber); /// - /// 适应页面宽度 + /// 设置页面适配模式方法 /// - public void SetFitMode(PdfReaderFitMode mode) => FitMode = mode; + public Task SetFitMode(PdfReaderFitMode mode) => InvokeVoidAsync("setScaleValue", Id, mode.ToDescriptionString()); /// /// 旋转页面方法 /// /// - public async Task RotateLeft() - { - await InvokeVoidAsync("rotate", Id, -90); - } + public Task RotateLeft() => InvokeVoidAsync("rotate", Id, -90); /// /// 旋转页面方法 /// /// - public async Task RotateRight() - { - await InvokeVoidAsync("rotate", Id, 90); - } + public Task RotateRight() => InvokeVoidAsync("rotate", Id, 90); private async Task OnDownload() { diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css index aad63ad5..7a9b3cd0 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.css @@ -79,11 +79,11 @@ width: 1%; } - .bb-view-toolbar-main.fit-width .bb-view-fit-height { + .bb-view-toolbar-main .fit-height .bb-view-fit-height { display: none; } - .bb-view-toolbar-main.fit-width .bb-view-fit-width { + .bb-view-toolbar-main .fit-height .bb-view-fit-width { display: block; } diff --git a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js index 02a2737c..66951070 100644 --- a/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js +++ b/src/components/BootstrapBlazor.PdfReader/PdfReader.razor.js @@ -36,12 +36,16 @@ export function setScaleValue(id, value) { export function rotate(id, step) { const { pdfViewer } = Data.get(id); if (pdfViewer) { - let rotate = pdfViewer.pagesRotation || 360; - rotate += step; - pdfViewer.pagesRotation = rotate % 360; + rotateView(pdfViewer, step); } } +const rotateView = (pdfViewer, step) => { + let rotate = pdfViewer.pagesRotation || 360; + rotate += step; + pdfViewer.pagesRotation = rotate % 360; +} + export function navigateToPage(id, pageNumber) { const { pdfViewer } = Data.get(id); if (pdfViewer) { @@ -56,6 +60,13 @@ export function scale(id, scale) { } } +export function resetToolbar(id) { + const { el, pdfViewer } = Data.get(id); + if (pdfViewer) { + resetToolbarView(el, pdfViewer); + } +} + export function resetThumbnails(id) { const { el, pdfViewer } = Data.get(id); if (pdfViewer) { @@ -85,7 +96,7 @@ const loadPdf = async (el, invoke, options) => { eventBus }); - addEventListener(el, pdfViewer, eventBus, invoke, options); + addEventBus(el, pdfViewer, eventBus, invoke, options); const pdfDocument = await loadingTask.promise; pdfViewer.setDocument(pdfDocument); @@ -94,77 +105,82 @@ const loadPdf = async (el, invoke, options) => { } const setObserver = el => { + const observer = new ResizeObserver(entries => { + relayoutToolbar(el); + }); + + observer.observe(el); + return observer; +} + +const relayoutToolbar = el => { + const toolbar = el.querySelector(".bb-view-toolbar"); + if (toolbar === null) { + return; + } + const title = el.querySelector(".bb-view-title"); const subject = el.querySelector(".bb-view-subject"); + if (subject === null) { + return; + } + const groupPage = el.querySelector(".bb-view-group-page"); const groupScale = el.querySelector(".bb-view-group-scale"); const groupRotate = el.querySelector(".bb-view-group-rotate"); const controls = el.querySelector(".bb-view-controls"); - el.widths = [subject.offsetWidth, groupRotate.offsetWidth, groupScale.offsetWidth, groupPage.offsetWidth, controls.offsetWidth]; + if (el.widths === void 0) { + el.widths = [subject.offsetWidth, groupRotate.offsetWidth, groupScale.offsetWidth, groupPage.offsetWidth, controls.offsetWidth]; + } - const increaseSpace = toolbar => { - if (controls.classList.contains('d-none')) { - if (title.offsetWidth + el.widths[4] + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) { - controls.classList.remove("d-none"); - } + const getActualWidth = () => title.offsetWidth + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth; + while (getActualWidth() + 8 > toolbar.offsetWidth) { + if (subject.classList.contains("d-none") === false) { + subject.classList.add("d-none"); } - else if (groupPage.classList.contains('d-none')) { - if (title.offsetWidth + el.widths[3] + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) { - groupPage.classList.remove("d-none"); - } + else if (groupRotate.classList.contains('d-none') === false) { + groupRotate.classList.add("d-none"); } - else if (groupScale.classList.contains('d-none')) { - if (title.offsetWidth + el.widths[2] + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) { - groupScale.classList.remove("d-none"); - } + else if (groupScale.classList.contains('d-none') === false) { + groupScale.classList.add("d-none"); } - else if (groupRotate.classList.contains('d-none')) { - if (title.offsetWidth + el.widths[1] + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) { - groupRotate.classList.remove("d-none"); - } + else if (groupPage.classList.contains('d-none') === false) { + groupPage.classList.add("d-none"); } - else if (subject.classList.contains("d-none")) { - if (title.offsetWidth + el.widths[0] + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth < toolbar.offsetWidth) { - subject.classList.remove("d-none"); - } + else if (controls.classList.contains('d-none') === false) { + controls.classList.add("d-none"); } } - const decreaseSpace = toolbar => { - while (title.offsetWidth + groupPage.offsetWidth + groupScale.offsetWidth + groupRotate.offsetWidth + controls.offsetWidth > toolbar.offsetWidth) { - if (subject.classList.contains("d-none") === false) { - subject.classList.add("d-none"); - } - else if (groupRotate.classList.contains('d-none') === false) { - groupRotate.classList.add("d-none"); - } - else if (groupScale.classList.contains('d-none') === false) { - groupScale.classList.add("d-none"); - } - else if (groupPage.classList.contains('d-none') === false) { - groupPage.classList.add("d-none"); - } - else if (controls.classList.contains('d-none') === false) { - controls.classList.add("d-none"); - } + + if (controls.classList.contains('d-none')) { + if (getActualWidth() + el.widths[4] < toolbar.offsetWidth) { + controls.classList.remove("d-none"); } } - - const observer = new ResizeObserver(entries => { - const toolbar = el.querySelector(".bb-view-toolbar"); - if (toolbar === null) { - return; + else if (groupPage.classList.contains('d-none')) { + if (getActualWidth() + el.widths[3] < toolbar.offsetWidth) { + groupPage.classList.remove("d-none"); } - - decreaseSpace(toolbar); - increaseSpace(toolbar); - }); - - observer.observe(el); - return observer; + } + else if (groupScale.classList.contains('d-none')) { + if (getActualWidth() + el.widths[2] < toolbar.offsetWidth) { + groupScale.classList.remove("d-none"); + } + } + else if (groupRotate.classList.contains('d-none')) { + if (getActualWidth() + el.widths[1] < toolbar.offsetWidth) { + groupRotate.classList.remove("d-none"); + } + } + else if (subject.classList.contains("d-none")) { + if (getActualWidth() + el.widths[0] < toolbar.offsetWidth) { + subject.classList.remove("d-none"); + } + } } -const addEventListener = (el, pdfViewer, eventBus, invoke, options) => { +const addEventBus = (el, pdfViewer, eventBus, invoke, options) => { eventBus.on("pagesinit", async () => { if (options.fitMode) { pdfViewer.currentScaleValue = fitMode; @@ -182,39 +198,19 @@ const addEventListener = (el, pdfViewer, eventBus, invoke, options) => { }); eventBus.on("pagesloaded", async e => { - if (options.enableThumbnails) { - resetThumbnailsView(el, pdfViewer); - } - if (options.triggerPagesLoaded === true) { await invoke.invokeMethodAsync("PagesLoaded", e.pagesCount); } - const controls = el.querySelector(".bb-view-controls"); - EventHandler.on(controls, "click", ".bb-view-print", async e => { - printPdf(options.url); - await invoke.invokeMethodAsync("Printing"); - }); - EventHandler.on(controls, "click", ".dropdown-item-pages", async e => { - e.delegateTarget.classList.toggle("active"); + if (options.currentPage !== 1) { + pdfViewer.currentPageNumber = options.currentPage; + } - if (pdfViewer.spreadMode !== 1) { - pdfViewer.spreadMode = 1; - } - else { - pdfViewer.spreadMode = 0; - } - }); - EventHandler.on(controls, "click", ".dropdown-item-presentation", async e => { - e.delegateTarget.classList.toggle("active"); - - //if (pdfViewer.isInPresentationMode) { - // document.exitFullscreen(); - //} - //else { - // el.requestFullscreen(); - //} - }); + if (options.enableThumbnails) { + resetThumbnailsView(el, pdfViewer); + } + + addToolbarEventHandlers(el, pdfViewer, invoke, options); }) eventBus.on("pagechanging", async evt => { @@ -237,47 +233,127 @@ const addEventListener = (el, pdfViewer, eventBus, invoke, options) => { } if (options.triggerPageChanged === true) { - await invoke.invokeMethodAsync("pageChanged", page); + await invoke.invokeMethodAsync("PageChanged", page); } }, true); - const minus = el.querySelector(".bb-page-minus"); - const plus = el.querySelector(".bb-page-plus"); - const scaleEl = el.querySelector(".bb-view-scale-input"); - eventBus.on("scalechanging", evt => { - const scale = evt.scale * 100; - scaleEl.value = `${Math.round(scale, 0)}%`; + eventBus.on("scalechanging", evt => updateScaleValue(el, evt.scale)); + + eventBus.on("rotationchanging", evt => { + const thumbnailsContainer = el.querySelector(".bb-view-thumbnails"); + if (thumbnailsContainer) { + thumbnailsContainer.style.setProperty('--thumb-rotate', `${evt.pagesRotation}deg`); + } + }) +} + +const addToolbarEventHandlers = (el, pdfViewer, invoke, options) => { + const toolbar = el.querySelector(".bb-view-toolbar"); - if (scale === 25) { - minus.classList.add("disabled"); + EventHandler.on(toolbar, "click", '.bb-view-bar', e => { + const thumbnailsEl = el.querySelector(".bb-view-thumbnails"); + thumbnailsEl.classList.toggle("show"); + }); + EventHandler.on(toolbar, "change", '.bb-view-num', e => { + let pageNumber = parseInt(e.delegateTarget.value) || 1; + if (pageNumber < 1) { + pageNumber = 1; } - else if (scale === 500) { - plus.classList.add("disabled"); + if (pageNumber > pdfViewer.pagesCount) { + pageNumber = pdfViewer.pagesCount; } - else { - minus.classList.remove("disabled"); - plus.classList.remove("disabled"); + pdfViewer.currentPageNumber = pageNumber; + }); + EventHandler.on(toolbar, "click", '.bb-page-minus', e => updateScale(pdfViewer, e.delegateTarget, -1)); + EventHandler.on(toolbar, "click", '.bb-page-plus', e => updateScale(pdfViewer, e.delegateTarget, 1)); + EventHandler.on(toolbar, 'click', '.bb-view-fit-width', e => { + const group = el.querySelector('.bb-view-group-rotate'); + group.classList.remove('fit-height') + pdfViewer.currentScaleValue = 'page-width'; + }); + EventHandler.on(toolbar, 'click', '.bb-view-fit-height', e => { + const group = el.querySelector('.bb-view-group-rotate'); + group.classList.add('fit-height') + pdfViewer.currentScaleValue = 'page-height'; + }); + EventHandler.on(toolbar, 'click', '.bb-view-page-actual', e => { + const group = el.querySelector('.bb-view-group-rotate'); + group.classList.remove('fit-height') + pdfViewer.currentScaleValue = 'page-actual'; + }); + EventHandler.on(toolbar, 'change', '.bb-view-scale-input', e => { + let value = parseInt(e.delegateTarget.value); + if (value < 25) { + value = 25; + } + else if (value > 500) { + value = 500; } + pdfViewer.currentScale = value / 100; + }); + EventHandler.on(toolbar, 'focus', '.bb-view-scale-input, .bb-view-num', e => { + e.delegateTarget.select(); + }); + EventHandler.on(toolbar, 'click', '.bb-view-rotate-left', e => { + rotateView(pdfViewer, -90); + }); + EventHandler.on(toolbar, 'click', '.bb-view-rotate-right', e => { + rotateView(pdfViewer, 90); + }); + EventHandler.on(toolbar, "click", ".bb-view-print", async e => { + printPdf(options.url); + await invoke.invokeMethodAsync("Printing"); }) + EventHandler.on(toolbar, "click", ".dropdown-item-pages", async e => { + e.delegateTarget.classList.toggle("active"); - EventHandler.on(minus, "click", e => updateScale(pdfViewer, e.target, -1)); - EventHandler.on(plus, "click", e => updateScale(pdfViewer, e.target, 1)); + if (pdfViewer.spreadMode !== 1) { + pdfViewer.spreadMode = 1; + } + else { + pdfViewer.spreadMode = 0; + } + }); + EventHandler.on(toolbar, "click", ".dropdown-item-presentation", async e => { + e.delegateTarget.classList.toggle("active"); + + //if (pdfViewer.isInPresentationMode) { + // document.exitFullscreen(); + //} + //else { + // el.requestFullscreen(); + //} + }); +} - const titleEl = el.querySelector(".bb-view-title"); - if (titleEl) { - EventHandler.on(titleEl, "click", '.bb-view-bar', e => { - const thumbnailsEl = el.querySelector(".bb-view-thumbnails"); - thumbnailsEl.classList.toggle("show"); - }); - } +const resetToolbarView = (el, pdfViewer) => { + const scaleEl = el.querySelector(".bb-view-scale-input"); + updateScaleValue(el, pdfViewer.currentScale); - eventBus.on("rotationchanging", evt => { - const thumbnailsContainer = el.querySelector(".bb-view-thumbnails"); - if (thumbnailsContainer) { - thumbnailsContainer.style.setProperty('--thumb-rotate', `${evt.pagesRotation}deg`); + const pageEl = el.querySelector(".bb-view-num"); + pageEl.value = pdfViewer.currentPageNumber; + + const group = el.querySelector('.bb-view-group-rotate'); + if (group) { + if (pdfViewer.currentScaleValue === 'page-height') { + group.classList.add('fit-height'); } - }) + else { + group.classList.remove('fit-height'); + } + } + + const twoPagesOneView = el.querySelector(".dropdown-item-pages"); + if (pdfViewer.spreadMode === 1) { + twoPagesOneView.classList.add("active"); + } + else { + twoPagesOneView.classList.remove("active"); + } + + delete el.widths + relayoutToolbar(el); } const resetThumbnailsView = (el, pdfViewer) => { @@ -320,6 +396,26 @@ const resetThumbnailsView = (el, pdfViewer) => { }); } +const updateScaleValue = (el, value) => { + const minus = el.querySelector(".bb-page-minus"); + const plus = el.querySelector(".bb-page-plus"); + const scaleEl = el.querySelector(".bb-view-scale-input"); + + const scale = value * 100; + scaleEl.value = `${Math.round(scale, 0)}%`; + + if (scale === 25) { + minus.classList.add("disabled"); + } + else if (scale === 500) { + plus.classList.add("disabled"); + } + else { + minus.classList.remove("disabled"); + plus.classList.remove("disabled"); + } +} + const updateScale = (pdfViewer, button, rate) => { if (button.classList.contains('disabled')) { return; @@ -329,6 +425,10 @@ const updateScale = (pdfViewer, button, rate) => { const current = Math.round(parseFloat(scale * 100), 0); const step = [25, 33, 50, 67, 75, 80, 90, 100, 110, 125, 150, 175, 200, 250, 300, 400, 500]; const findValues = step.filter(s => rate > 0 ? current < s : current > s); + if (findValues.length === 0) { + return; + } + let v = 100; if (rate > 0) { v = findValues.shift(); @@ -369,10 +469,6 @@ const printPdf = url => { iframe.src = url; iframe.onload = () => { - iframe.contentWindow.addEventListener('afterprint', function () { - document.body.removeChild(iframe); - }); - iframe.contentWindow.focus(); iframe.contentWindow.print(); }; @@ -386,27 +482,19 @@ export function dispose(id) { if (observer) { observer.disconnect(); - observer = null; } if (el) { - const minus = el.querySelector(".bb-page-minus"); - const plus = el.querySelector(".bb-page-plus"); - if (minus) { - EventHandler.off(minus, "click"); - } - if (plus) { - EventHandler.off(plus, "click"); - } - const towPagesOneView = el.querySelector(".dropdown-item-pages"); if (towPagesOneView) { EventHandler.off(towPagesOneView, "click"); } - const titleEl = el.querySelector(".bb-view-title"); - if (titleEl) { - EventHandler.off(titleEl, "click"); + const toolbar = el.querySelector(".bb-view-toolbar"); + if (toolbar) { + EventHandler.off(toolbar, "click"); + EventHandler.off(toolbar, "change"); + EventHandler.off(toolbar, "focus"); } const thumbnailsContainer = el.querySelector(".bb-view-thumbnails"); @@ -414,9 +502,6 @@ export function dispose(id) { EventHandler.off(thumbnailsContainer, "click"); } - const controls = el.querySelector(".bb-view-controls"); - EventHandler.off(controls, "click"); - const iframe = document.querySelector('.bb-view-print-iframe'); if (iframe) { iframe.remove(); diff --git a/src/components/BootstrapBlazor.PdfReader/wwwroot/css/pdf_viewer.css b/src/components/BootstrapBlazor.PdfReader/wwwroot/css/pdf_viewer.css index 5a5b8cc0..d4f48eeb 100644 --- a/src/components/BootstrapBlazor.PdfReader/wwwroot/css/pdf_viewer.css +++ b/src/components/BootstrapBlazor.PdfReader/wwwroot/css/pdf_viewer.css @@ -280,520 +280,6 @@ align-items: center; } -.dialog { - --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) #1c1b22; - --dialog-bg-color: var(--csstools-light-dark-toggle--11, white); - --csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) #1c1b22; - --dialog-border-color: var(--csstools-light-dark-toggle--12, white); - --csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) #15141a; - --dialog-shadow: 0 2px 14px 0 var(--csstools-light-dark-toggle--13, rgb(58 57 68 / 0.2)); - --csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) #fbfbfe; - --text-primary-color: var(--csstools-light-dark-toggle--14, #15141a); - --csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) #cfcfd8; - --text-secondary-color: var(--csstools-light-dark-toggle--15, #5b5b66); - --hover-filter: brightness(0.9); - --csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) #0df; - --link-fg-color: var(--csstools-light-dark-toggle--16, #0060df); - --csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) #80ebff; - --link-hover-fg-color: var(--csstools-light-dark-toggle--17, #0250bb); - --csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) #52525e; - --separator-color: var(--csstools-light-dark-toggle--18, #f0f0f4); - --textarea-border-color: #8f8f9d; - --csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) #42414d; - --textarea-bg-color: var(--csstools-light-dark-toggle--19, white); - --textarea-fg-color: var(--text-secondary-color); - --csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) #2b2a33; - --radio-bg-color: var(--csstools-light-dark-toggle--20, #f0f0f4); - --csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) #15141a; - --radio-checked-bg-color: var(--csstools-light-dark-toggle--21, #fbfbfe); - --radio-border-color: #8f8f9d; - --csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) #0df; - --radio-checked-border-color: var(--csstools-light-dark-toggle--22, #0060df); - --csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); - --button-secondary-bg-color: var(--csstools-light-dark-toggle--23, rgb(21 20 26 / 0.07)); - --button-secondary-fg-color: var(--text-primary-color); - --button-secondary-border-color: var(--button-secondary-bg-color); - --csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); - --button-secondary-active-bg-color: var(--csstools-light-dark-toggle--24, rgb(21 20 26 / 0.21)); - --button-secondary-active-fg-color: var(--button-secondary-fg-color); - --button-secondary-active-border-color: var(--button-secondary-bg-color); - --csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); - --button-secondary-hover-bg-color: var(--csstools-light-dark-toggle--25, rgb(21 20 26 / 0.14)); - --button-secondary-hover-fg-color: var(--button-secondary-fg-color); - --button-secondary-hover-border-color: var(--button-secondary-hover-bg-color); - --button-secondary-disabled-bg-color: var(--button-secondary-bg-color); - --button-secondary-disabled-border-color: var( --button-secondary-border-color ); - --button-secondary-disabled-fg-color: var(--button-secondary-fg-color); - --csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) #0df; - --button-primary-bg-color: var(--csstools-light-dark-toggle--26, #0060df); - --csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) #15141a; - --button-primary-fg-color: var(--csstools-light-dark-toggle--27, #fbfbfe); - --button-primary-border-color: var(--button-primary-bg-color); - --csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) #aaf2ff; - --button-primary-active-bg-color: var(--csstools-light-dark-toggle--28, #054096); - --button-primary-active-fg-color: var(--button-primary-fg-color); - --button-primary-active-border-color: var(--button-primary-active-bg-color); - --csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) #80ebff; - --button-primary-hover-bg-color: var(--csstools-light-dark-toggle--29, #0250bb); - --button-primary-hover-fg-color: var(--button-primary-fg-color); - --button-primary-hover-border-color: var(--button-primary-hover-bg-color); - --button-primary-disabled-bg-color: var(--button-primary-bg-color); - --button-primary-disabled-border-color: var(--button-primary-border-color); - --button-primary-disabled-fg-color: var(--button-primary-fg-color); - --button-disabled-opacity: 0.4; - --csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) #42414d; - --input-text-bg-color: var(--csstools-light-dark-toggle--30, white); - --input-text-fg-color: var(--text-primary-color); -} - -@supports (color: light-dark(red, red)) { - .dialog { - --dialog-bg-color: light-dark(white, #1c1b22); - --dialog-border-color: light-dark(white, #1c1b22); - } -} - -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { - .dialog { - --dialog-shadow: 0 2px 14px 0 light-dark(rgb(58 57 68 / 0.2), #15141a); - } -} - -@supports (color: light-dark(red, red)) { - .dialog { - --text-primary-color: light-dark(#15141a, #fbfbfe); - --text-secondary-color: light-dark(#5b5b66, #cfcfd8); - --link-fg-color: light-dark(#0060df, #0df); - --link-hover-fg-color: light-dark(#0250bb, #80ebff); - --separator-color: light-dark(#f0f0f4, #52525e); - --textarea-bg-color: light-dark(white, #42414d); - --radio-bg-color: light-dark(#f0f0f4, #2b2a33); - --radio-checked-bg-color: light-dark(#fbfbfe, #15141a); - --radio-checked-border-color: light-dark(#0060df, #0df); - } -} - -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { - .dialog { - --button-secondary-bg-color: light-dark( rgb(21 20 26 / 0.07), rgb(251 251 254 / 0.07) ); - --button-secondary-active-bg-color: light-dark( rgb(21 20 26 / 0.21), rgb(251 251 254 / 0.21) ); - --button-secondary-hover-bg-color: light-dark( rgb(21 20 26 / 0.14), rgb(251 251 254 / 0.14) ); - } -} - -@supports (color: light-dark(red, red)) { - .dialog { - --button-primary-bg-color: light-dark(#0060df, #0df); - --button-primary-fg-color: light-dark(#fbfbfe, #15141a); - --button-primary-active-bg-color: light-dark(#054096, #aaf2ff); - --button-primary-hover-bg-color: light-dark(#0250bb, #80ebff); - --input-text-bg-color: light-dark(white, #42414d); - } -} - -@supports not (color: light-dark(tan, tan)) { - - .dialog * { - --csstools-light-dark-toggle--11: var(--csstools-color-scheme--light) #1c1b22; - --dialog-bg-color: var(--csstools-light-dark-toggle--11, white); - --csstools-light-dark-toggle--12: var(--csstools-color-scheme--light) #1c1b22; - --dialog-border-color: var(--csstools-light-dark-toggle--12, white); - --csstools-light-dark-toggle--13: var(--csstools-color-scheme--light) #15141a; - --dialog-shadow: 0 2px 14px 0 var(--csstools-light-dark-toggle--13, rgb(58 57 68 / 0.2)); - --csstools-light-dark-toggle--14: var(--csstools-color-scheme--light) #fbfbfe; - --text-primary-color: var(--csstools-light-dark-toggle--14, #15141a); - --csstools-light-dark-toggle--15: var(--csstools-color-scheme--light) #cfcfd8; - --text-secondary-color: var(--csstools-light-dark-toggle--15, #5b5b66); - --csstools-light-dark-toggle--16: var(--csstools-color-scheme--light) #0df; - --link-fg-color: var(--csstools-light-dark-toggle--16, #0060df); - --csstools-light-dark-toggle--17: var(--csstools-color-scheme--light) #80ebff; - --link-hover-fg-color: var(--csstools-light-dark-toggle--17, #0250bb); - --csstools-light-dark-toggle--18: var(--csstools-color-scheme--light) #52525e; - --separator-color: var(--csstools-light-dark-toggle--18, #f0f0f4); - --csstools-light-dark-toggle--19: var(--csstools-color-scheme--light) #42414d; - --textarea-bg-color: var(--csstools-light-dark-toggle--19, white); - --csstools-light-dark-toggle--20: var(--csstools-color-scheme--light) #2b2a33; - --radio-bg-color: var(--csstools-light-dark-toggle--20, #f0f0f4); - --csstools-light-dark-toggle--21: var(--csstools-color-scheme--light) #15141a; - --radio-checked-bg-color: var(--csstools-light-dark-toggle--21, #fbfbfe); - --csstools-light-dark-toggle--22: var(--csstools-color-scheme--light) #0df; - --radio-checked-border-color: var(--csstools-light-dark-toggle--22, #0060df); - --csstools-light-dark-toggle--23: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.07); - --button-secondary-bg-color: var(--csstools-light-dark-toggle--23, rgb(21 20 26 / 0.07)); - --csstools-light-dark-toggle--24: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.21); - --button-secondary-active-bg-color: var(--csstools-light-dark-toggle--24, rgb(21 20 26 / 0.21)); - --csstools-light-dark-toggle--25: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.14); - --button-secondary-hover-bg-color: var(--csstools-light-dark-toggle--25, rgb(21 20 26 / 0.14)); - --csstools-light-dark-toggle--26: var(--csstools-color-scheme--light) #0df; - --button-primary-bg-color: var(--csstools-light-dark-toggle--26, #0060df); - --csstools-light-dark-toggle--27: var(--csstools-color-scheme--light) #15141a; - --button-primary-fg-color: var(--csstools-light-dark-toggle--27, #fbfbfe); - --csstools-light-dark-toggle--28: var(--csstools-color-scheme--light) #aaf2ff; - --button-primary-active-bg-color: var(--csstools-light-dark-toggle--28, #054096); - --csstools-light-dark-toggle--29: var(--csstools-color-scheme--light) #80ebff; - --button-primary-hover-bg-color: var(--csstools-light-dark-toggle--29, #0250bb); - --csstools-light-dark-toggle--30: var(--csstools-color-scheme--light) #42414d; - --input-text-bg-color: var(--csstools-light-dark-toggle--30, white); - } -} - -@media (prefers-color-scheme: dark) { - - .dialog { - --hover-filter: brightness(1.4); - --button-disabled-opacity: 0.6; - } -} - -@media screen and (forced-colors: active) { - - .dialog { - --dialog-bg-color: Canvas; - --dialog-border-color: CanvasText; - --dialog-shadow: none; - --text-primary-color: CanvasText; - --text-secondary-color: CanvasText; - --hover-filter: none; - --link-fg-color: LinkText; - --link-hover-fg-color: LinkText; - --separator-color: CanvasText; - --textarea-border-color: ButtonBorder; - --textarea-bg-color: Field; - --textarea-fg-color: ButtonText; - --radio-bg-color: ButtonFace; - --radio-checked-bg-color: ButtonFace; - --radio-border-color: ButtonText; - --radio-checked-border-color: ButtonText; - --button-secondary-bg-color: ButtonFace; - --button-secondary-fg-color: ButtonText; - --button-secondary-border-color: ButtonText; - --button-secondary-active-bg-color: HighlightText; - --button-secondary-active-fg-color: SelectedItem; - --button-secondary-active-border-color: ButtonText; - --button-secondary-hover-bg-color: HighlightText; - --button-secondary-hover-fg-color: SelectedItem; - --button-secondary-hover-border-color: SelectedItem; - --button-secondary-disabled-fg-color: GrayText; - --button-secondary-disabled-border-color: GrayText; - --button-primary-bg-color: ButtonText; - --button-primary-fg-color: ButtonFace; - --button-primary-border-color: ButtonText; - --button-primary-active-bg-color: SelectedItem; - --button-primary-active-fg-color: HighlightText; - --button-primary-active-border-color: ButtonText; - --button-primary-hover-bg-color: SelectedItem; - --button-primary-hover-fg-color: HighlightText; - --button-primary-hover-border-color: SelectedItem; - --button-primary-disabled-bg-color: GrayText; - --button-primary-disabled-fg-color: ButtonFace; - --button-primary-disabled-border-color: GrayText; - --button-disabled-opacity: 1; - --input-text-bg-color: Field; - --input-text-fg-color: FieldText; - } -} - -.dialog { - font: message-box; - font-size: 13px; - font-weight: 400; - line-height: 150%; - border-radius: 4px; - padding: 12px 16px; - border: 1px solid var(--dialog-border-color); - background: var(--dialog-bg-color); - color: var(--text-primary-color); - box-shadow: var(--dialog-shadow); -} - -:is(.dialog .mainContainer) *:focus-visible { - outline: var(--focus-ring-outline); - outline-offset: 2px; -} - -:is(.dialog .mainContainer) .title { - display: flex; - width: auto; - flex-direction: column; - justify-content: flex-end; - align-items: flex-start; - gap: 12px; -} - -:is(:is(.dialog .mainContainer) .title) > span { - font-size: 13px; - font-style: normal; - font-weight: 590; - line-height: 150%; -} - -:is(.dialog .mainContainer) .dialogSeparator { - width: 100%; - height: 0; - margin-block: 4px; - border-top: 1px solid var(--separator-color); - border-bottom: none; -} - -:is(.dialog .mainContainer) .dialogButtonsGroup { - display: flex; - gap: 12px; - align-self: flex-end; -} - -:is(.dialog .mainContainer) .radio { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 4px; -} - -:is(:is(.dialog .mainContainer) .radio) > .radioButton { - display: flex; - gap: 8px; - align-self: stretch; - align-items: center; -} - -:is(:is(:is(.dialog .mainContainer) .radio) > .radioButton) input { - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - box-sizing: border-box; - width: 16px; - height: 16px; - border-radius: 50%; - background-color: var(--radio-bg-color); - border: 1px solid var(--radio-border-color); -} - -:is(:is(:is(:is(.dialog .mainContainer) .radio) > .radioButton) input):hover { - filter: var(--hover-filter); -} - -:is(:is(:is(:is(.dialog .mainContainer) .radio) > .radioButton) input):checked { - background-color: var(--radio-checked-bg-color); - border: 4px solid var(--radio-checked-border-color); -} - -:is(:is(.dialog .mainContainer) .radio) > .radioLabel { - display: flex; - padding-inline-start: 24px; - align-items: flex-start; - gap: 10px; - align-self: stretch; -} - -:is(:is(:is(.dialog .mainContainer) .radio) > .radioLabel) > span { - flex: 1 0 0; - font-size: 11px; - color: var(--text-secondary-color); -} - -:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton)) { - border-radius: 4px; - border: 1px solid; - font: menu; - font-weight: 590; - font-size: 13px; - padding: 4px 16px; - width: auto; - height: 32px; -} - -:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):hover { - cursor: pointer; - filter: var(--hover-filter); -} - -:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))) > span { - color: inherit; - font: inherit; -} - -.secondaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))) { - color: var(--button-secondary-fg-color); - background-color: var(--button-secondary-bg-color); - border-color: var(--button-secondary-border-color); -} - - .secondaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):hover { - color: var(--button-secondary-hover-fg-color); - background-color: var(--button-secondary-hover-bg-color); - border-color: var(--button-secondary-hover-border-color); - } - - .secondaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):active { - color: var(--button-secondary-active-fg-color); - background-color: var(--button-secondary-active-bg-color); - border-color: var(--button-secondary-active-border-color); - } - - .secondaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):disabled { - background-color: var(--button-secondary-disabled-bg-color); - border-color: var(--button-secondary-disabled-border-color); - color: var(--button-secondary-disabled-fg-color); - opacity: var(--button-disabled-opacity); - } - -.primaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))) { - color: var(--button-primary-fg-color); - background-color: var(--button-primary-bg-color); - border-color: var(--button-primary-border-color); - opacity: 1; -} - - .primaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):hover { - color: var(--button-primary-hover-fg-color); - background-color: var(--button-primary-hover-bg-color); - border-color: var(--button-primary-hover-border-color); - } - - .primaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):active { - color: var(--button-primary-active-fg-color); - background-color: var(--button-primary-active-bg-color); - border-color: var(--button-primary-active-border-color); - } - - .primaryButton:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):disabled { - background-color: var(--button-primary-disabled-bg-color); - border-color: var(--button-primary-disabled-border-color); - color: var(--button-primary-disabled-fg-color); - opacity: var(--button-disabled-opacity); - } - -:is(:is(.dialog .mainContainer) button:not(:is(.toggle-button,.closeButton,.clearInputButton))):disabled { - pointer-events: none; -} - -:is(.dialog .mainContainer) a { - color: var(--link-fg-color); -} - -:is(:is(.dialog .mainContainer) a):hover { - color: var(--link-hover-fg-color); -} - -:is(.dialog .mainContainer) textarea { - font: inherit; - padding: 8px; - resize: none; - margin: 0; - box-sizing: border-box; - border-radius: 4px; - border: 1px solid var(--textarea-border-color); - background: var(--textarea-bg-color); - color: var(--textarea-fg-color); -} - -:is(:is(.dialog .mainContainer) textarea):focus { - outline-offset: 0; - border-color: transparent; -} - -:is(:is(.dialog .mainContainer) textarea):disabled { - pointer-events: none; - opacity: 0.4; -} - -:is(.dialog .mainContainer) input[type="text"] { - background-color: var(--input-text-bg-color); - color: var(--input-text-fg-color); -} - -:is(.dialog .mainContainer) .messageBar { - --csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) #5a3100; - --message-bar-bg-color: var(--csstools-light-dark-toggle--31, #ffebcd); - --csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) #fbfbfe; - --message-bar-fg-color: var(--csstools-light-dark-toggle--32, #15141a); - --csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); - --message-bar-border-color: var(--csstools-light-dark-toggle--33, rgb(0 0 0 / 0.08)); - --message-bar-icon: url(images/messageBar_warning.svg); - --csstools-light-dark-toggle--34: var(--csstools-color-scheme--light) #e49c49; - --message-bar-icon-color: var(--csstools-light-dark-toggle--34, #cd411e); -} - -@supports (color: light-dark(red, red)) { - :is(.dialog .mainContainer) .messageBar { - --message-bar-bg-color: light-dark(#ffebcd, #5a3100); - --message-bar-fg-color: light-dark(#15141a, #fbfbfe); - } -} - -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { - :is(.dialog .mainContainer) .messageBar { - --message-bar-border-color: light-dark( rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.08) ); - } -} - -@supports (color: light-dark(red, red)) { - :is(.dialog .mainContainer) .messageBar { - --message-bar-icon-color: light-dark(#cd411e, #e49c49); - } -} - -@supports not (color: light-dark(tan, tan)) { - - :is(:is(.dialog .mainContainer) .messageBar) * { - --csstools-light-dark-toggle--31: var(--csstools-color-scheme--light) #5a3100; - --message-bar-bg-color: var(--csstools-light-dark-toggle--31, #ffebcd); - --csstools-light-dark-toggle--32: var(--csstools-color-scheme--light) #fbfbfe; - --message-bar-fg-color: var(--csstools-light-dark-toggle--32, #15141a); - --csstools-light-dark-toggle--33: var(--csstools-color-scheme--light) rgb(255 255 255 / 0.08); - --message-bar-border-color: var(--csstools-light-dark-toggle--33, rgb(0 0 0 / 0.08)); - --csstools-light-dark-toggle--34: var(--csstools-color-scheme--light) #e49c49; - --message-bar-icon-color: var(--csstools-light-dark-toggle--34, #cd411e); - } -} - -@media screen and (forced-colors: active) { - - :is(.dialog .mainContainer) .messageBar { - --message-bar-bg-color: HighlightText; - --message-bar-fg-color: CanvasText; - --message-bar-border-color: CanvasText; - --message-bar-icon-color: CanvasText; - } -} - -:is(.dialog .mainContainer) .messageBar { - align-self: stretch; -} - -:is(:is(:is(.dialog .mainContainer) .messageBar) > div)::before, :is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div { - margin-block: 4px; -} - -:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 8px; - flex: 1 0 0; -} - -:is(:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div) .title { - font-size: 13px; - font-weight: 590; -} - -:is(:is(:is(:is(.dialog .mainContainer) .messageBar) > div) > div) .description { - font-size: 13px; -} - -:is(.dialog .mainContainer) .toggler { - display: flex; - align-items: center; - gap: 8px; - align-self: stretch; -} - -:is(:is(.dialog .mainContainer) .toggler) > .togglerLabel { - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} - .textLayer { position: absolute; text-align: initial; @@ -4428,349 +3914,28 @@ inset-block-start: 0; } -.dialog.altText::backdrop { - -webkit-mask: url(#alttext-manager-mask); - mask: url(#alttext-manager-mask); +.basicColorPicker { + width: 28px; } -.dialog.altText.positioned { - margin: 0; -} + .basicColorPicker::-moz-color-swatch { + border-radius: 100%; + } -.dialog.altText #altTextContainer { - width: 300px; - height: -moz-fit-content; - height: fit-content; - display: inline-flex; - flex-direction: column; - align-items: flex-start; - gap: 16px; -} + .basicColorPicker::-webkit-color-swatch { + border-radius: 100%; + } -:is(.dialog.altText #altTextContainer) #overallDescription { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 4px; - align-self: stretch; +.annotationEditorLayer[data-main-rotation="0"] .highlightEditor:not(.free) > .editToolbar { + rotate: 0deg; } -:is(:is(.dialog.altText #altTextContainer) #overallDescription) span { - align-self: stretch; +.annotationEditorLayer[data-main-rotation="90"] .highlightEditor:not(.free) > .editToolbar { + rotate: 270deg; } -:is(:is(.dialog.altText #altTextContainer) #overallDescription) .title { - font-size: 13px; - font-style: normal; - font-weight: 590; -} - -:is(.dialog.altText #altTextContainer) #addDescription { - display: flex; - flex-direction: column; - align-items: stretch; - gap: 8px; -} - -:is(:is(.dialog.altText #altTextContainer) #addDescription) .descriptionArea { - flex: 1; - padding-inline: 24px 10px; -} - -:is(:is(:is(.dialog.altText #altTextContainer) #addDescription) .descriptionArea) textarea { - width: 100%; - min-height: 75px; -} - -:is(.dialog.altText #altTextContainer) #buttons { - display: flex; - justify-content: flex-end; - align-items: flex-start; - gap: 8px; - align-self: stretch; -} - -.dialog.newAltText { - --new-alt-text-ai-disclaimer-icon: url(images/altText_disclaimer.svg); - --new-alt-text-spinner-icon: url(images/altText_spinner.svg); - --csstools-light-dark-toggle--88: var(--csstools-color-scheme--light) #2b2a33; - --preview-image-bg-color: var(--csstools-light-dark-toggle--88, #f0f0f4); - --preview-image-border: none; -} - -@supports (color: light-dark(red, red)) { - .dialog.newAltText { - --preview-image-bg-color: light-dark(#f0f0f4, #2b2a33); - } -} - -@supports not (color: light-dark(tan, tan)) { - - .dialog.newAltText * { - --csstools-light-dark-toggle--88: var(--csstools-color-scheme--light) #2b2a33; - --preview-image-bg-color: var(--csstools-light-dark-toggle--88, #f0f0f4); - } -} - -@media screen and (forced-colors: active) { - - .dialog.newAltText { - --preview-image-bg-color: ButtonFace; - --preview-image-border: 1px solid ButtonText; - } -} - -.dialog.newAltText { - width: 80%; - max-width: 570px; - min-width: 300px; - padding: 0; -} - - .dialog.newAltText.noAi #newAltTextDisclaimer, .dialog.newAltText.noAi #newAltTextCreateAutomatically { - display: none !important; - } - - .dialog.newAltText.aiInstalling #newAltTextCreateAutomatically { - display: none !important; - } - - .dialog.newAltText.aiInstalling #newAltTextDownloadModel { - display: flex !important; - } - - .dialog.newAltText.error #newAltTextNotNow { - display: none !important; - } - - .dialog.newAltText.error #newAltTextCancel { - display: inline-block !important; - } - - .dialog.newAltText:not(.error) #newAltTextError { - display: none !important; - } - - .dialog.newAltText #newAltTextContainer { - display: flex; - width: auto; - padding: 16px; - flex-direction: column; - justify-content: flex-end; - align-items: flex-start; - gap: 12px; - flex: 0 1 auto; - line-height: normal; - } - -:is(.dialog.newAltText #newAltTextContainer) #mainContent { - display: flex; - justify-content: flex-end; - align-items: flex-start; - gap: 12px; - align-self: stretch; - flex: 1 1 auto; -} - -:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionAndSettings { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 16px; - flex: 1 0 0; - align-self: stretch; -} - -:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction { - display: flex; - flex-direction: column; - align-items: flex-start; - gap: 8px; - align-self: stretch; - flex: 1 1 auto; -} - -:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer { - width: 100%; - height: 70px; - position: relative; -} - -:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea { - width: 100%; - height: 100%; - padding: 8px; -} - -:is(:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea)::-moz-placeholder { - color: var(--text-secondary-color); -} - -:is(:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea)::placeholder { - color: var(--text-secondary-color); -} - -:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) .altTextSpinner { - display: none; - position: absolute; - width: 16px; - height: 16px; - inset-inline-start: 8px; - inset-block-start: 8px; - -webkit-mask-size: cover; - mask-size: cover; - background-color: var(--text-secondary-color); - pointer-events: none; -} - -.loading:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea::-moz-placeholder { - color: transparent; -} - -.loading:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) textarea::placeholder { - color: transparent; -} - -.loading:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescriptionContainer) .altTextSpinner { - display: inline-block; - -webkit-mask-image: var(--new-alt-text-spinner-icon); - mask-image: var(--new-alt-text-spinner-icon); -} - -:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDescription { - font-size: 11px; -} - -:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDisclaimer { - display: flex; - flex-direction: row; - align-items: flex-start; - gap: 4px; - font-size: 11px; -} - -:is(:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #descriptionInstruction) #newAltTextDisclaimer)::before { - content: ""; - display: inline-block; - width: 17px; - height: 16px; - -webkit-mask-image: var(--new-alt-text-ai-disclaimer-icon); - mask-image: var(--new-alt-text-ai-disclaimer-icon); - -webkit-mask-size: cover; - mask-size: cover; - background-color: var(--text-secondary-color); - flex: 1 0 auto; -} - -:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextDownloadModel { - display: flex; - align-items: center; - gap: 4px; - align-self: stretch; -} - -:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextDownloadModel)::before { - content: ""; - display: inline-block; - width: 16px; - height: 16px; - -webkit-mask-image: var(--new-alt-text-spinner-icon); - mask-image: var(--new-alt-text-spinner-icon); - -webkit-mask-size: cover; - mask-size: cover; - background-color: var(--text-secondary-color); -} - -:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextImagePreview { - width: 180px; - aspect-ratio: 1; - display: flex; - justify-content: center; - align-items: center; - flex: 0 0 auto; - background-color: var(--preview-image-bg-color); - border: var(--preview-image-border); -} - -:is(:is(:is(.dialog.newAltText #newAltTextContainer) #mainContent) #newAltTextImagePreview) > canvas { - max-width: 100%; - max-height: 100%; -} - -.colorPicker { - --csstools-light-dark-toggle--89: var(--csstools-color-scheme--light) #80ebff; - --hover-outline-color: var(--csstools-light-dark-toggle--89, #0250bb); - --csstools-light-dark-toggle--90: var(--csstools-color-scheme--light) #aaf2ff; - --selected-outline-color: var(--csstools-light-dark-toggle--90, #0060df); - --csstools-light-dark-toggle--91: var(--csstools-color-scheme--light) #52525e; - --swatch-border-color: var(--csstools-light-dark-toggle--91, #cfcfd8); -} - -@supports (color: light-dark(red, red)) { - .colorPicker { - --hover-outline-color: light-dark(#0250bb, #80ebff); - --selected-outline-color: light-dark(#0060df, #aaf2ff); - --swatch-border-color: light-dark(#cfcfd8, #52525e); - } -} - -@supports not (color: light-dark(tan, tan)) { - - .colorPicker * { - --csstools-light-dark-toggle--89: var(--csstools-color-scheme--light) #80ebff; - --hover-outline-color: var(--csstools-light-dark-toggle--89, #0250bb); - --csstools-light-dark-toggle--90: var(--csstools-color-scheme--light) #aaf2ff; - --selected-outline-color: var(--csstools-light-dark-toggle--90, #0060df); - --csstools-light-dark-toggle--91: var(--csstools-color-scheme--light) #52525e; - --swatch-border-color: var(--csstools-light-dark-toggle--91, #cfcfd8); - } -} - -@media screen and (forced-colors: active) { - - .colorPicker { - --hover-outline-color: Highlight; - --selected-outline-color: var(--hover-outline-color); - --swatch-border-color: ButtonText; - } -} - -.colorPicker .swatch { - width: 16px; - height: 16px; - border: 1px solid var(--swatch-border-color); - border-radius: 100%; - outline-offset: 2px; - box-sizing: border-box; - forced-color-adjust: none; -} - -.colorPicker button:is(:hover,.selected) > .swatch { - border: none; -} - -.basicColorPicker { - width: 28px; -} - - .basicColorPicker::-moz-color-swatch { - border-radius: 100%; - } - - .basicColorPicker::-webkit-color-swatch { - border-radius: 100%; - } - -.annotationEditorLayer[data-main-rotation="0"] .highlightEditor:not(.free) > .editToolbar { - rotate: 0deg; -} - -.annotationEditorLayer[data-main-rotation="90"] .highlightEditor:not(.free) > .editToolbar { - rotate: 270deg; -} - -.annotationEditorLayer[data-main-rotation="180"] .highlightEditor:not(.free) > .editToolbar { - rotate: 180deg; +.annotationEditorLayer[data-main-rotation="180"] .highlightEditor:not(.free) > .editToolbar { + rotate: 180deg; } .annotationEditorLayer[data-main-rotation="270"] .highlightEditor:not(.free) > .editToolbar { @@ -4816,85 +3981,6 @@ transform-origin: center !important; } -:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker { - position: relative; - width: auto; - display: flex; - justify-content: center; - align-items: center; - gap: 4px; - padding: 4px; -} - -:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker)::after { - content: ""; - -webkit-mask-image: var(--editor-toolbar-colorpicker-arrow-image); - mask-image: var(--editor-toolbar-colorpicker-arrow-image); - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-position: center; - mask-position: center; - display: inline-block; - background-color: var(--editor-toolbar-fg-color); - width: 12px; - height: 12px; -} - -:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker):hover::after { - background-color: var(--editor-toolbar-hover-fg-color); -} - -:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker):has(.dropdown:not(.hidden)) { - background-color: var(--editor-toolbar-hover-bg-color); -} - - :is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker):has(.dropdown:not(.hidden))::after { - scale: -1; - } - -:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown { - position: absolute; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - gap: 11px; - padding-block: 8px; - border-radius: 6px; - background-color: var(--editor-toolbar-bg-color); - border: 1px solid var(--editor-toolbar-border-color); - box-shadow: var(--editor-toolbar-shadow); - inset-block-start: calc(100% + 4px); - width: calc(100% + 2 * var(--editor-toolbar-padding)); -} - -:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button { - width: 100%; - height: auto; - border: none; - cursor: pointer; - display: flex; - justify-content: center; - align-items: center; - background: none; -} - -:is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button):is(:active,:focus-visible) { - outline: none; -} - -:is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button) > .swatch { - outline-offset: 2px; -} - -[aria-selected="true"]:is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button) > .swatch { - outline: 2px solid var(--selected-outline-color); -} - -:is(:is(:is(:is(:is(:is(.annotationEditorLayer .highlightEditor) .editToolbar) .buttons) .colorPicker) .dropdown) button):is(:hover,:active,:focus-visible) > .swatch { - outline: 2px solid var(--hover-outline-color); -} - .editorParamsToolbar:has(#highlightParamsToolbarContainer) { padding: unset; } @@ -4905,58 +3991,14 @@ padding-block-end: 12px; } - #highlightParamsToolbarContainer .colorPicker { + #highlightParamsToolbarContainer #editorHighlightThickness { display: flex; flex-direction: column; - gap: 8px; + align-items: center; + gap: 4px; + align-self: stretch; } -:is(#highlightParamsToolbarContainer .colorPicker) .dropdown { - display: flex; - justify-content: space-between; - align-items: center; - flex-direction: row; - height: auto; -} - -:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button { - width: auto; - height: auto; - border: none; - cursor: pointer; - display: flex; - justify-content: center; - align-items: center; - background: none; - flex: 0 0 auto; - padding: 0; -} - -:is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button) .swatch { - width: 24px; - height: 24px; -} - -:is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button):is(:active,:focus-visible) { - outline: none; -} - -[aria-selected="true"]:is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button) > .swatch { - outline: 2px solid var(--selected-outline-color); -} - -:is(:is(:is(#highlightParamsToolbarContainer .colorPicker) .dropdown) button):is(:hover,:active,:focus-visible) > .swatch { - outline: 2px solid var(--hover-outline-color); -} - -#highlightParamsToolbarContainer #editorHighlightThickness { - display: flex; - flex-direction: column; - align-items: center; - gap: 4px; - align-self: stretch; -} - :is(#highlightParamsToolbarContainer #editorHighlightThickness) .editorParamsLabel { height: auto; align-self: stretch; @@ -5116,110 +4158,6 @@ gap: 16px; } -.sidebar { - --csstools-light-dark-toggle--94: var(--csstools-color-scheme--light) #23222b; - --sidebar-bg-color: var(--csstools-light-dark-toggle--94, #fff); - --csstools-light-dark-toggle--95: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.1); - --sidebar-border-color: var(--csstools-light-dark-toggle--95, rgb(21 20 26 / 0.1)); - --csstools-light-dark-toggle--96: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); - --csstools-light-dark-toggle--97: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); - --sidebar-box-shadow: 0 0.25px 0.75px var(--csstools-light-dark-toggle--96, rgb(0 0 0 / 0.05)), 0 2px 6px 0 var(--csstools-light-dark-toggle--97, rgb(0 0 0 / 0.1)); - --sidebar-border-radius: 8px; - --sidebar-padding: 5px; - --sidebar-min-width: 180px; - --sidebar-max-width: 632px; - --sidebar-width: 239px; - --resizer-width: 4px; - --csstools-light-dark-toggle--98: var(--csstools-color-scheme--light) #00cadb; - --resizer-hover-bg-color: var(--csstools-light-dark-toggle--98, #0062fa); -} - -@supports (color: light-dark(red, red)) { - .sidebar { - --sidebar-bg-color: light-dark(#fff, #23222b); - } -} - -@supports (color: light-dark(red, red)) and (color: rgb(0 0 0 / 0)) { - .sidebar { - --sidebar-border-color: light-dark( rgb(21 20 26 / 0.1), rgb(251 251 254 / 0.1) ); - --sidebar-box-shadow: 0 0.25px 0.75px light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.2)), 0 2px 6px 0 light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4)); - } -} - -@supports (color: light-dark(red, red)) { - .sidebar { - --resizer-hover-bg-color: light-dark(#0062fa, #00cadb); - } -} - -@supports not (color: light-dark(tan, tan)) { - - .sidebar * { - --csstools-light-dark-toggle--94: var(--csstools-color-scheme--light) #23222b; - --sidebar-bg-color: var(--csstools-light-dark-toggle--94, #fff); - --csstools-light-dark-toggle--95: var(--csstools-color-scheme--light) rgb(251 251 254 / 0.1); - --sidebar-border-color: var(--csstools-light-dark-toggle--95, rgb(21 20 26 / 0.1)); - --csstools-light-dark-toggle--96: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.2); - --csstools-light-dark-toggle--97: var(--csstools-color-scheme--light) rgb(0 0 0 / 0.4); - --sidebar-box-shadow: 0 0.25px 0.75px var(--csstools-light-dark-toggle--96, rgb(0 0 0 / 0.05)), 0 2px 6px 0 var(--csstools-light-dark-toggle--97, rgb(0 0 0 / 0.1)); - --csstools-light-dark-toggle--98: var(--csstools-color-scheme--light) #00cadb; - --resizer-hover-bg-color: var(--csstools-light-dark-toggle--98, #0062fa); - } -} - -@media screen and (forced-colors: active) { - - .sidebar { - --sidebar-bg-color: Canvas; - --sidebar-border-color: CanvasText; - --sidebar-box-shadow: none; - --resizer-hover-bg-color: CanvasText; - } -} - -.sidebar { - border-radius: var(--sidebar-border-radius); - box-shadow: var(--sidebar-box-shadow); - border: 1px solid var(--sidebar-border-color); - background-color: var(--sidebar-bg-color); - inset-block-start: calc(100% + var(--doorhanger-height) - 2px); - padding-block: var(--sidebar-padding); - width: var(--sidebar-width); - min-width: var(--sidebar-min-width); - max-width: var(--sidebar-max-width); -} - - .sidebar .sidebarResizer { - width: var(--resizer-width); - background-color: transparent; - forced-color-adjust: none; - cursor: ew-resize; - position: absolute; - inset-block: calc(var(--sidebar-padding) + var(--sidebar-border-radius)); - inset-inline-start: calc(0px - var(--resizer-width) / 2); - transition: background-color 0.5s ease-in-out; - box-sizing: border-box; - border: 1px solid transparent; - border-block-width: 0; - background-clip: content-box; - } - -:is(.sidebar .sidebarResizer):hover { - background-color: var(--resizer-hover-bg-color); -} - -.sidebar.resizing { - cursor: ew-resize; - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} - - .sidebar.resizing :not(.sidebarResizer) { - pointer-events: none; - } - :root { --csstools-color-scheme--light: initial; color-scheme: light dark;