diff options
Diffstat (limited to 'toolkit/components/pdfjs/content/web/viewer.css')
-rw-r--r-- | toolkit/components/pdfjs/content/web/viewer.css | 292 |
1 files changed, 279 insertions, 13 deletions
diff --git a/toolkit/components/pdfjs/content/web/viewer.css b/toolkit/components/pdfjs/content/web/viewer.css index 238df7ce7f..2999c89f3a 100644 --- a/toolkit/components/pdfjs/content/web/viewer.css +++ b/toolkit/components/pdfjs/content/web/viewer.css @@ -23,7 +23,6 @@ text-size-adjust:none; forced-color-adjust:none; transform-origin:0 0; - z-index:2; caret-color:CanvasText; &.highlighting{ @@ -162,7 +161,6 @@ left:0; pointer-events:none; transform-origin:0 0; - z-index:3; &[data-main-rotation="90"] .norotate{ transform:rotate(270deg) translateX(-100%); @@ -853,6 +851,208 @@ } } +.toggle-button{ + --button-background-color:#f0f0f4; + --button-background-color-hover:#e0e0e6; + --button-background-color-active:#cfcfd8; + --color-accent-primary:#0060df; + --color-accent-primary-hover:#0250bb; + --color-accent-primary-active:#054096; + --border-interactive-color:#8f8f9d; + --border-radius-circle:9999px; + --border-width:1px; + --size-item-small:16px; + --size-item-large:32px; + --color-canvas:white; + + @media (prefers-color-scheme: dark){ + --button-background-color:color-mix(in srgb, currentColor 7%, transparent); + --button-background-color-hover:color-mix( + in srgb, + currentColor 14%, + transparent + ); + --button-background-color-active:color-mix( + in srgb, + currentColor 21%, + transparent + ); + --color-accent-primary:#0df; + --color-accent-primary-hover:#80ebff; + --color-accent-primary-active:#aaf2ff; + --border-interactive-color:#bfbfc9; + --color-canvas:#1c1b22; + } + + @media (forced-colors: active){ + --color-accent-primary:ButtonText; + --color-accent-primary-hover:SelectedItem; + --color-accent-primary-active:SelectedItem; + --border-interactive-color:ButtonText; + --button-background-color:ButtonFace; + --border-interactive-color-hover:SelectedItem; + --border-interactive-color-active:SelectedItem; + --border-interactive-color-disabled:GrayText; + --color-canvas:ButtonText; + } + + --toggle-background-color:var(--button-background-color); + --toggle-background-color-hover:var(--button-background-color-hover); + --toggle-background-color-active:var(--button-background-color-active); + --toggle-background-color-pressed:var(--color-accent-primary); + --toggle-background-color-pressed-hover:var(--color-accent-primary-hover); + --toggle-background-color-pressed-active:var(--color-accent-primary-active); + --toggle-border-color:var(--border-interactive-color); + --toggle-border-color-hover:var(--toggle-border-color); + --toggle-border-color-active:var(--toggle-border-color); + --toggle-border-radius:var(--border-radius-circle); + --toggle-border-width:var(--border-width); + --toggle-height:var(--size-item-small); + --toggle-width:var(--size-item-large); + --toggle-dot-background-color:var(--toggle-border-color); + --toggle-dot-background-color-hover:var(--toggle-dot-background-color); + --toggle-dot-background-color-active:var(--toggle-dot-background-color); + --toggle-dot-background-color-on-pressed:var(--color-canvas); + --toggle-dot-margin:1px; + --toggle-dot-height:calc( + var(--toggle-height) - 2 * var(--toggle-dot-margin) - 2 * + var(--toggle-border-width) + ); + --toggle-dot-width:var(--toggle-dot-height); + --toggle-dot-transform-x:calc( + var(--toggle-width) - 4 * var(--toggle-dot-margin) - var(--toggle-dot-width) + ); + + appearance:none; + padding:0; + margin:0; + border:var(--toggle-border-width) solid var(--toggle-border-color); + height:var(--toggle-height); + width:var(--toggle-width); + border-radius:var(--toggle-border-radius); + background:var(--toggle-background-color); + box-sizing:border-box; + flex-shrink:0; + + &:focus-visible{ + outline:var(--focus-outline); + outline-offset:var(--focus-outline-offset); + } + + &:enabled:hover{ + background:var(--toggle-background-color-hover); + border-color:var(--toggle-border-color); + } + + &:enabled:active{ + background:var(--toggle-background-color-active); + border-color:var(--toggle-border-color); + } + + &[aria-pressed="true"]{ + background:var(--toggle-background-color-pressed); + border-color:transparent; + } + + &[aria-pressed="true"]:enabled:hover{ + background:var(--toggle-background-color-pressed-hover); + border-color:transparent; + } + + &[aria-pressed="true"]:enabled:active{ + background:var(--toggle-background-color-pressed-active); + border-color:transparent; + } + + &::before{ + display:block; + content:""; + background-color:var(--toggle-dot-background-color); + height:var(--toggle-dot-height); + width:var(--toggle-dot-width); + margin:var(--toggle-dot-margin); + border-radius:var(--toggle-border-radius); + translate:0; + } + + &[aria-pressed="true"]::before{ + translate:var(--toggle-dot-transform-x); + background-color:var(--toggle-dot-background-color-on-pressed); + } + + &[aria-pressed="true"]:enabled:hover::before, + &[aria-pressed="true"]:enabled:active::before{ + background-color:var(--toggle-dot-background-color-on-pressed); + } + + &[aria-pressed="true"]:-moz-locale-dir(rtl)::before, + &[aria-pressed="true"]:dir(rtl)::before{ + translate:calc(-1 * var(--toggle-dot-transform-x)); + } + + @media (prefers-reduced-motion: no-preference){ + &::before{ + transition:translate 100ms; + } + } + + @media (prefers-contrast){ + &:enabled:hover{ + border-color:var(--toggle-border-color-hover); + } + + &:enabled:active{ + border-color:var(--toggle-border-color-active); + } + + &[aria-pressed="true"]:enabled{ + border-color:var(--toggle-border-color); + position:relative; + } + + &[aria-pressed="true"]:enabled:hover, + &[aria-pressed="true"]:enabled:hover:active{ + border-color:var(--toggle-border-color-hover); + } + + &[aria-pressed="true"]:enabled:active{ + background-color:var(--toggle-dot-background-color-active); + border-color:var(--toggle-dot-background-color-hover); + } + + &:hover::before, + &:active::before{ + background-color:var(--toggle-dot-background-color-hover); + } + } + + @media (forced-colors){ + --toggle-dot-background-color:var(--color-accent-primary); + --toggle-dot-background-color-hover:var(--color-accent-primary-hover); + --toggle-dot-background-color-active:var(--color-accent-primary-active); + --toggle-dot-background-color-on-pressed:var(--button-background-color); + --toggle-background-color-disabled:var(--button-background-color-disabled); + --toggle-border-color-hover:var(--border-interactive-color-hover); + --toggle-border-color-active:var(--border-interactive-color-active); + --toggle-border-color-disabled:var(--border-interactive-color-disabled); + + &[aria-pressed="true"]:enabled::after{ + border:1px solid var(--button-background-color); + content:""; + position:absolute; + height:var(--toggle-height); + width:var(--toggle-width); + display:block; + border-radius:var(--toggle-border-radius); + inset:-2px; + } + + &[aria-pressed="true"]:enabled:active::after{ + border-color:var(--toggle-border-color-active); + } + } +} + :root{ --outline-width:2px; --outline-color:#0060df; @@ -878,6 +1078,19 @@ --editorHighlight-editing-cursor:url(images/cursor-editorTextHighlight.svg) 24 24, text; --editorFreeHighlight-editing-cursor:url(images/cursor-editorFreeHighlight.svg) 1 18, pointer; } +.visuallyHidden{ + position:absolute; + top:0; + left:0; + border:0; + margin:0; + padding:0; + width:0; + height:0; + overflow:hidden; + white-space:nowrap; + font-size:0; +} .textLayer.highlighting{ cursor:var(--editorFreeHighlight-editing-cursor); @@ -926,7 +1139,6 @@ font-size:calc(100px * var(--scale-factor)); transform-origin:0 0; cursor:auto; - z-index:4; } .annotationEditorLayer.waiting{ @@ -995,10 +1207,12 @@ } .annotationEditorLayer - :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor){ + :is(.freeTextEditor, .inkEditor, .stampEditor, .highlightEditor), +.textLayer{ .editToolbar{ --editor-toolbar-delete-image:url(images/editor-toolbar-delete.svg); --editor-toolbar-bg-color:#f0f0f4; + --editor-toolbar-highlight-image:url(images/toolbarButton-editorHighlight.svg); --editor-toolbar-fg-color:#2e2e56; --editor-toolbar-border-color:#8f8f9d; --editor-toolbar-hover-border-color:var(--editor-toolbar-border-color); @@ -1084,6 +1298,25 @@ margin-inline:2px; } + .highlightButton{ + width:var(--editor-toolbar-height); + + &::before{ + content:""; + mask-image:var(--editor-toolbar-highlight-image); + mask-repeat:no-repeat; + mask-position:center; + display:inline-block; + background-color:var(--editor-toolbar-fg-color); + width:100%; + height:100%; + } + + &:hover::before{ + background-color:var(--editor-toolbar-hover-fg-color); + } + } + .delete{ width:var(--editor-toolbar-height); @@ -2003,7 +2236,12 @@ --example-color:CanvasText; } - &::before{ + :is(& > .editorParamsSlider[disabled]){ + opacity:0.4; + } + + &::before, + &::after{ content:""; width:8px; aspect-ratio:1; @@ -2011,20 +2249,46 @@ border-radius:100%; background-color:var(--example-color); } + &::after{ + width:24px; + } .editorParamsSlider{ width:unset; height:14px; } + } + } - &::after{ - content:""; - width:24px; - aspect-ratio:1; - display:block; - border-radius:100%; - background-color:var(--example-color); + #editorHighlightVisibility{ + display:flex; + flex-direction:column; + align-items:flex-start; + gap:8px; + align-self:stretch; + + .divider{ + --divider-color:#d7d7db; + + @media (prefers-color-scheme: dark){ + --divider-color:#8f8f9d; + } + + @media screen and (forced-colors: active){ + --divider-color:CanvasText; } + + margin-block:4px; + width:100%; + height:1px; + background-color:var(--divider-color); + } + + .toggler{ + display:flex; + justify-content:space-between; + align-items:center; + align-self:stretch; } } } @@ -2084,7 +2348,6 @@ overflow:hidden; width:100%; height:100%; - z-index:1; } .pdfViewer .page{ @@ -2655,6 +2918,7 @@ body{ font-style:normal; } .loadingInput:has(> &[data-status="pending"])::after{ + display:block; visibility:visible; } &[data-status="notFound"]{ @@ -3249,6 +3513,7 @@ a:is(.toolbarButton, .secondaryToolbarButton)[href="#"]{ transition-property:none; .loadingInput:has(> &.loading)::after{ + display: block; visibility:visible; transition-property:visibility; @@ -3260,6 +3525,7 @@ a:is(.toolbarButton, .secondaryToolbarButton)[href="#"]{ &::after{ position:absolute; visibility:hidden; + display: none; top:calc(50% - 8px); width:16px; height:16px; |