New to Kendo UI for AngularStart a free 30-day trial

Customizing PDFViewer

Variables

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$kendo-pdf-viewer-border-widthNumber1px1px
Description
The border width of the PDFViewer.
$kendo-pdf-viewer-font-familyStringvar( --kendo-font-family, inherit )var(--kendo-font-family, inherit)
Description
The font family of the PDFViewer.
$kendo-pdf-viewer-font-sizeStringvar( --kendo-font-size, inherit )var(--kendo-font-size, inherit)
Description
The font size of the PDFViewer.
$kendo-pdf-viewer-line-heightStringvar( --kendo-line-height, normal )var(--kendo-line-height, normal)
Description
The line height of the PDFViewer.
$kendo-pdf-viewer-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the PDFViewer.
$kendo-pdf-viewer-textString$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the PDFViewer.
$kendo-pdf-viewer-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the PDFViewer.
$kendo-pdf-viewer-toolbar-bgNullnullnull
Description
The background color of the PDFViewer Toolbar.
$kendo-pdf-viewer-toolbar-textNullnullnull
Description
The text color of the PDFViewer Toolbar.
$kendo-pdf-viewer-toolbar-borderNullnullnull
Description
The border color of the PDFViewer Toolbar.
$kendo-pdf-viewer-toolbar-gradientNullnullnull
Description
The gradient of the PDFViewer Toolbar.
$kendo-pdf-viewer-canvas-bgString$kendo-app-bgvar(--kendo-color-surface, #fafafa)
Description
The background color of the PDFViewer canvas.
$kendo-pdf-viewer-canvas-textNullnullnull
Description
The text color of the PDFViewer canvas.
$kendo-pdf-viewer-canvas-borderNullnullnull
Description
The border color of the PDFViewer canvas.
$kendo-pdf-viewer-page-spacingStringk-spacing(7.5)var(--kendo-spacing-7\.5, 1.875rem)
Description
The spacing of the PDFViewer page.
$kendo-pdf-viewer-page-bgColorwhitewhite
Description
The background color of the PDFViewer page.
$kendo-pdf-viewer-page-textString$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the PDFViewer page.
$kendo-pdf-viewer-page-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the PDFViewer page.
$kendo-pdf-viewer-page-shadowStringk-elevation(3)var(--kendo-elevation-3, 0 6px 8px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the PDFViewer page.
$kendo-pdf-viewer-search-panel-padding-xString$kendo-toolbar-md-padding-xvar(--kendo-spacing-2, 0.5rem)
Description
The horizontal padding of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-padding-yCalculationcalc( #{$kendo-toolbar-md-padding-x} * 2 )calc(var(--kendo-spacing-2, 0.5rem) * 2)
Description
The vertical padding of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-spacingString$kendo-toolbar-md-spacingvar(--kendo-spacing-2, 0.5rem)
Description
The spacing of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-border-widthNumber1px1px
Description
The border width of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-border-radiusNumber00
Description
The border radius of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-bgString$kendo-component-bgvar(--kendo-color-surface-alt, #ffffff)
Description
The background color of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-textString$kendo-component-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The text color of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-borderString$kendo-component-bordervar(--kendo-color-border, rgba(0, 0, 0, 0.08))
Description
The border color of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-shadowString$kendo-window-shadowvar(--kendo-elevation-8, 0 16px 18px rgba(0, 0, 0, 0.28), 0 4px 16px rgba(0, 0, 0, 0.12))
Description
The shadow of the PDFViewer search panel.
$kendo-pdf-viewer-search-panel-matches-spacingString$kendo-padding-sm-xvar(--kendo-spacing-1, 0.25rem)
Description
The spacing of the matches container in the PDFViewer search panel.
$kendo-pdf-viewer-selection-line-heightStringvar( --kendo-line-height-sm, normal )var(--kendo-line-height-sm, normal)
Description
The line height of the PDFViewer selection.
$kendo-pdf-viewer-search-highlight-bgString$kendo-body-textvar(--kendo-color-on-app-surface, #3d3d3d)
Description
The background color of the PDFViewer highlight.
$kendo-pdf-viewer-search-highlight-mark-bgColoryellowyellow
Description
The background color of the PDFViewer highlight mark.
$kendo-pdf-viewer-icon-textString$kendo-dropzone-icon-textvar(--kendo-color-subtle, #666666)
Description
The text color of the PDFViewer icon.
In this article
VariablesSuggested Links
Not finding the help you need?
Contact Support