CSS: General

General

.PSPDFKit-Container

The element where PSPDFKit for Web gets mounted within your application.

.PSPDFKit-Viewport

The scrollable area where the document is rendered into.

.PSPDFKit-Scroll

The element which handles the scrolling of the document.

.PSPDFKit-Spread

This class is used to access individual page spreads in the document. Depending on the layout mode, each spread may contain either 1 or 2 pages. It's also possible to access a specific spread with the data-spread-index attribute.

.PSPDFKit-Page

This class is used to access every page of the document. It's also possible to access a specific page with the data-page-index attribute.

.PSPDFKit-Text

Any entity of text on a page is wrapped with this class. You must not change any transformation or position properties, because it affects text selection. Also, the text color is transparent because the text that is visible is rendered in a canvas. This CSS class may be used to add custom click events for text entities.

.PSPDFKit-Search-Highlight

Can also be: .PSPDFKit-Search-Highlight-focused
Every result from a search gets highlighted within the document. There is always one search-highlight that is currently in focus. The user can then jump to the next or previous search-highlight.

.PSPDFKit-Loading-Indicator

The loading indicator is used when the user waits for results from the backend. For example, while loading a page or starting a search. It can appear in different sizes and can be resized via font-size.

.PSPDFKit-Annotation-Unsupported

Annotations that are not yet supported in PSPDFKit for Web are hidden by default. To highlight unsupported annotations, you can use .PSPDFKit-Annotation-Unsupported { display: block; }.

.PSPDFKit-Confirm-Dialog

Customizable confirm dialog.

.PSPDFKit-Confirm-Dialog

Customizable confirm dialog.

.PSPDFKit-Confirm-Dialog-Content

The confirm dialog content.

.PSPDFKit-Confirm-Dialog-Buttons

The confirm dialog buttons container.

.PSPDFKit-Confirm-Dialog-Button

A confirm dialog button.

.PSPDFKit-Confirm-Dialog-Button-Confirm

Is also: .PSPDFKit-Confirm-Dialog-Button
The dialog confirm button.

.PSPDFKit-Confirm-Dialog-Button-Cancel

Is also: .PSPDFKit-Confirm-Dialog-Button
The dialog confirm button.

.PSPDFKit-Selection-Outline-Rect

The annotation selection outline SVG rect, SVG line for line annotations.

.PSPDFKit-Resize-Anchor

Selected annotation resize anchor circles.

.PSPDFKit-Resize-Anchor-Top-Left

Is also: .PSPDFKit-Resize-Anchor
Selected annotation top left resize anchor circle.

.PSPDFKit-Resize-Anchor-Top

Is also: .PSPDFKit-Resize-Anchor
Selected annotation top resize anchor circle.

.PSPDFKit-Resize-Anchor-Top-Right

Is also: .PSPDFKit-Resize-Anchor
Selected annotation top right resize anchor circle.

.PSPDFKit-Resize-Anchor-Left

Is also: .PSPDFKit-Resize-Anchor
Selected annotation left resize anchor circle.

.PSPDFKit-Resize-Anchor-Right

Is also: .PSPDFKit-Resize-Anchor
Selected annotation right resize anchor circle.

.PSPDFKit-Resize-Anchor-Bottom-Left

Is also: .PSPDFKit-Resize-Anchor
Selected annotation bottom left resize anchor circle.

.PSPDFKit-Resize-Anchor-Bottom

Is also: .PSPDFKit-Resize-Anchor
Selected annotation bottom resize anchor circle.

.PSPDFKit-Resize-Anchor-Bottom-Right

Is also: .PSPDFKit-Resize-Anchor
Selected annotation bottom right resize anchor circle.