pdf.js.mirror/web/pdf_viewer.css

/* Copyright 2014 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
/*
 * Firefox design-system bridge.
 *
 * The viewer chrome is authored against Firefox design-token names with the
 * shipped literal as the fallback: `var(--fx-token, <literal>)`. GENERIC and
 * the components build resolve the fallback and stay self-contained; the
 * MOZCENTRAL build imports tokens-brand.css when pdfjs.enableNova is set (see
 * viewer.css), so those names resolve to live Firefox values and the theme
 * never has to be re-synced by hand.
 *
 * Firefox declares its tokens inside `@layer tokens-foundation-brand`, so any
 * unlayered declaration wins over them. To *consume* a Firefox value,
 * reference it through var() (with a fallback) and do NOT redeclare the same
 * name: that would shadow Firefox's for the whole subtree.
 */
@import url(buttons.css);
@import url(message_bar.css);
@import url(dialog.css);
@import url(text_layer_builder.css);
@import url(annotation_layer_builder.css);
@import url(xfa_layer_builder.css);
/* Ignored in GECKOVIEW: begin */
@import url(annotation_editor_layer_builder.css);
@import url(menu.css);
@import url(tree.css);
@import url(views_manager.css);
@import url(sidebar.css);
/* Ignored in GECKOVIEW: end */

:root {
  color-scheme: light dark;

  --viewer-container-height: 0;
  --pdfViewer-padding-bottom: 0;
  --page-margin: 1px auto -8px;
  --page-border: 9px solid transparent;
  --spreadHorizontalWrapped-margin-LR: -3.5px;
  --loading-icon-delay: 400ms;
  --focus-ring-color: var(--focus-outline-color, light-dark(#0060df, #0df));
  --focus-ring-outline: var(--focus-outline-width, 2px) solid
    var(--focus-ring-color);
  --text-primary-color: var(--text-color, light-dark(#15141a, #fbfbfe));
  --link-fg-color: var(--link-color, light-dark(#0060df, #0df));
  --link-hover-fg-color: var(--link-color-hover, light-dark(#0250bb, #80ebff));
  --new-badge-bg: light-dark(#070, #37b847);
  --new-badge-color: light-dark(#fff, #15141a);
  --new-badge-border-color: light-dark(#fbfbfe / 40%, #15141a / 40%);

  @media screen and (forced-colors: active) {
    --pdfViewer-padding-bottom: 9px;
    --page-margin: 8px auto -1px;
    --page-border: 1px solid CanvasText;
    --spreadHorizontalWrapped-margin-LR: 3.5px;
    --focus-ring-color: var(--focus-outline-color, CanvasText);
    --text-primary-color: var(--text-color, CanvasText);
    --link-fg-color: var(--link-color, LinkText);
    --link-hover-fg-color: var(--link-color-hover, LinkText);
    --new-badge-bg: AccentColor;
    --new-badge-color: ButtonFace;
    --new-badge-border-color: CanvasText;
  }
}

.newBadge {
  background-color: var(--new-badge-bg);
  color: var(--new-badge-color);
  border-radius: 4px;
  border: 1px solid var(--new-badge-border-color);
  padding-inline: 4px;
  margin-inline: 4px;
  font: menu;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  flex: 0 0 fit-content;
  user-select: none;
}

[data-main-rotation="90"] {
  transform: rotate(90deg) translateY(-100%);
}
[data-main-rotation="180"] {
  transform: rotate(180deg) translate(-100%, -100%);
}
[data-main-rotation="270"] {
  transform: rotate(270deg) translateX(-100%);
}

.pdfViewer {
  /* Define this variable here and not in :root to avoid to reflow all the UI
     when scaling (see #15929). */
  --scale-factor: 1;
  --page-bg-color: unset;

  padding-bottom: var(--pdfViewer-padding-bottom);

  --hcm-highlight-filter: none;
  --hcm-highlight-selected-filter: none;

  @media screen and (forced-colors: active) {
    --hcm-highlight-filter: invert(100%);
  }

  &.copyAll {
    cursor: wait;
  }

  .canvasWrapper {
    overflow: hidden;
    width: 100%;
    height: 100%;

    canvas {
      position: absolute;
      top: 0;
      left: 0;
      margin: 0;
      display: block;
      width: 100%;
      height: 100%;
      contain: content;

      .structTree {
        contain: strict;
      }

      &.detailView {
        image-rendering: pixelated;
      }
    }

    /* Used by the DrawLayer, but we keep these styles here and not in
     * draw_layer_builder.css because we need them to be loaded in GECKOVIEW for
     * text selection. */
    .selection {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      background: rgb(0 90 255 / 0.22);
    }
  }
}

.pdfViewer .page {
  --user-unit: 1;
  --total-scale-factor: calc(var(--scale-factor) * var(--user-unit));
  --scale-round-x: 1px;
  --scale-round-y: 1px;

  direction: ltr;
  width: 816px;
  height: 1056px;
  margin: var(--page-margin);
  position: relative;
  overflow: visible;
  border: var(--page-border);
  background-clip: content-box;
  background-color: var(--page-bg-color, rgb(255 255 255));
}

.pdfViewer .dummyPage {
  position: relative;
  width: 0;
  height: var(--viewer-container-height);
}

.pdfViewer.noUserSelect {
  user-select: none;
}

/*#if GENERIC*/
.pdfViewer.removePageBorders .page {
  margin: 0 auto 10px;
  border: none;
}
/*#endif*/

/*#if COMPONENTS*/
.pdfViewer.singlePageView {
  display: inline-block;
}

.pdfViewer.singlePageView .page {
  margin: 0;
  border: none;
}
/*#endif*/

.pdfViewer:is(.scrollHorizontal, .scrollWrapped),
.spread {
  margin-inline: 3.5px;
  text-align: center;
}

.pdfViewer.scrollHorizontal,
.spread {
  white-space: nowrap;
}

/*#if GENERIC*/
.pdfViewer.removePageBorders,
/*#endif*/
.pdfViewer:is(.scrollHorizontal, .scrollWrapped) .spread {
  margin-inline: 0;
}

.spread :is(.page, .dummyPage),
.pdfViewer:is(.scrollHorizontal, .scrollWrapped) :is(.page, .spread) {
  display: inline-block;
  vertical-align: middle;
}

.spread .page,
.pdfViewer:is(.scrollHorizontal, .scrollWrapped) .page {
  margin-inline: var(--spreadHorizontalWrapped-margin-LR);
}

/*#if GENERIC*/
.pdfViewer.removePageBorders .spread .page,
.pdfViewer.removePageBorders:is(.scrollHorizontal, .scrollWrapped) .page {
  margin-inline: 5px;
}
/*#endif*/

.pdfViewer .page.loadingIcon::after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 100%;
  background: url("images/loading-icon.gif") center no-repeat;
  display: none;
  /* Using a delay with background-image doesn't work,
     consequently we use the display. */
  transition-property: display;
  transition-delay: var(--loading-icon-delay);
  z-index: 5;
  contain: strict;
}

.pdfViewer .page.loading::after {
  display: block;
}

.pdfViewer .page:not(.loading)::after {
  transition-property: none;
  display: none;
}

.pdfPresentationMode .pdfViewer {
  padding-bottom: 0;
}

.pdfPresentationMode .spread {
  margin: 0;
}

.pdfPresentationMode .pdfViewer .page {
  margin: 0 auto;
  border: 2px solid transparent;
}