The Pageflow default theme provides a rich set of SCSS variables that can be used to build custom themes. Instructions on how to setup a custom theme can be found in the themes guide.

Custom Page Type Pictograms

By default, each page type brings its own set of pictogram images for display inside navigations bars and overviews. Default pictograms are usually located in a directory named app/assets/images/pageflow/<page_type_name>/themes/default/pictograms inside the page type gem.

To supply custom pictograms, add the following line to your theme file:

# pageflow/themes/<theme_name>.scss
$custom-page-type-picotgrams: true;

This causes pictograms to be looked for in pageflow/themes/<theme_name>/page_type_pictograms/<page_type_name>/ inside your apps image directory. Each directory must contain the following variants:

  • wide.png
  • sprite.png

Classic Player Controls

variables

classic-player-controls-icons

$classic-player-controls-icons: "icon-font" !default;

Description

Type of icons to use:

  • "icon-font": Circular buttons with font awesome icons.

  • "sprite": Use sprite image for play controls.

classic-player-controls-images

$classic-player-controls-images: "default" !default;

Description

Image to use if $classic-player-controls-icons is "sprite":

  • "default": Use sprite from default image.

  • "custom": Custom sprite from player_controls_sprite.png in theme directory.

classic-player-controls-typography

$classic-player-controls-typography: $player-controls-typography !default;

Description

Base typography settings for player controls.

classic-player-controls-background-color

$classic-player-controls-background-color: #191919 !default;

Description

Background color of the control bar.

classic-player-controls-border-color

$classic-player-controls-border-color: #505050 !default;

Description

Color of the border around the control bar.

classic-player-controls-separator-color

$classic-player-controls-separator-color: $classic-player-controls-border-color !default;

Description

Color of the vertical separator right from the play button.

classic-player-controls-border-width

$classic-player-controls-border-width: 3px !default;

Description

Width of the border around control bar

classic-player-controls-separator-border-width

$classic-player-controls-separator-border-width: 2px !default;

Description

Width of the border between play button and progress bar

classic-player-controls-font-size

$classic-player-controls-font-size: 15px !default;

Description

Font size of control bar text, current time and duration.

classic-player-controls-text-color

$classic-player-controls-text-color: #ddd !default;

Description

Color of control bar text, current time and duration.

classic-player-controls-progress-bar-background-color

$classic-player-controls-progress-bar-background-color: #333333 !default;

Description

Backgrund color of the progress bar.

classic-player-controls-progress-bar-color

$classic-player-controls-progress-bar-color: $main-color !default;

Description

Color of the part of the progress bar indicating the play progress.

classic-player-controls-progress-bar-load-progress-color

$classic-player-controls-progress-bar-load-progress-color: rgba(255, 255, 255, 0.4) !default;

Description

Color of the part of the progress bar indicating the load progress.

classic-player-controls-progress-bar-border-radius

$classic-player-controls-progress-bar-border-radius: 4px !default;

Description

Border radius of the progress bar.

classic-player-controls-handle-width

$classic-player-controls-handle-width: 24px !default;

Description

Width of the handle element. Can be used to ensure correct positioning of the handle when sprite images are used.

classic-player-controls-timestamp-position

$classic-player-controls-timestamp-position: "left" !default;

Description

Position of current time and duration.

  • "right": Both on the right separated by a slash.

  • "split": Left and right of the progress bar.

classic-player-controls-info-box-background-color

$classic-player-controls-info-box-background-color: rgba(39, 39, 39, 0.95) !default;

Description

Background color of the info box.

classic-player-controls-info-box-text-color

$classic-player-controls-info-box-text-color: #fff !default;

Description

Color of the text inside the info box.

classic-player-controls-info-box-header-color

$classic-player-controls-info-box-header-color: null !default;

Description

Text color of the info box header.

classic-player-controls-info-box-typography

$classic-player-controls-info-box-typography: () !default;

Description

Typography settings for the info box.

classic-player-controls-info-box-header-typography

$classic-player-controls-info-box-header-typography: () !default;

Description

Typography settings for the info box header.

classic-player-controls-info-box-border-radius

$classic-player-controls-info-box-border-radius: 4px !default;

Description

Display rounded corners at the top of the info box.

Default Navigation Bar

variables

navigation-icons

$navigation-icons: $widget-icons !default;

Description

Type of icons to use:

  • "icon-font": Circular buttons with font awesome icons.

  • "sprite": Custom icons from icon_sprite.png in theme directory.

navigation-icon-font-options

$navigation-icon-font-options: () !default;

See

navigation-sprite-options

$navigation-sprite-options: () !default;

Description

Possible options:

  • use-fullscreen-exit-icon: Use fullscreen exit icon for active fullscreen button. By default the active state of the fullscreen icon is used.

navigation-display-header-button

$navigation-display-header-button: false !default;

Description

Display button to toggle header

navigation-display-share-button

$navigation-display-share-button: true !default;

Description

Display social share menu.

navigation-display-hide-text-button

$navigation-display-hide-text-button: true !default;

Description

Display button to hide the content text.

navigation-background-color

$navigation-background-color: $widget-background-color !default;

Description

Default background color for widget.

navigation-background-image

$navigation-background-image: null !default;

Description

Background tile image to display on bar and menu boxes.

navigation-text-color

$navigation-text-color: $widget-text-color !default;

Description

Default text color for widget.

navigation-bar-background-color

$navigation-bar-background-color: $navigation-background-color !default;

Description

Background color of the navigation bar.

navigation-opacity

$navigation-opacity: 0.9 !default;

Description

Transparency of navigation bar.

navigation-current-page-marker-color

$navigation-current-page-marker-color: $main-color !default;

Description

Color used to highlight the current page.

navigation-menu-box-background-color

$navigation-menu-box-background-color: $navigation-background-color !default;

Description

Background color of page detail and menu boxes

navigation-menu-box-text-color

$navigation-menu-box-text-color: #fff !default;

Description

Text color of page detail and menu boxes

navigation-menu-box-opacity

$navigation-menu-box-opacity: $navigation-opacity !default;

Description

Transparency of page detail and menu boxes

navigation-menu-box-style

$navigation-menu-box-style: "triangle" !default;

Description

Style of navigation menu boxes.

  • "triangle": Box without border and small triangle arrow at the right side

  • "border": Box with a border

navigation-menu-box-border-width

$navigation-menu-box-border-width: 2px !default;

Description

Width of border if $navigation-menu-box-style is "border".

navigation-menu-box-border-color

$navigation-menu-box-border-color: #9c9c9c !default;

Description

Color of border if $navigation-menu-box-style is "border".

navigation-separator-line-width

$navigation-separator-line-width: 0 !default;

Description

Width of the line drawn between navigation bar buttons

navigation-separator-line-color

$navigation-separator-line-color: #9c9c9c !default;

Description

Color of line drawn between navigation bar buttons

navigation-volume-control-color

$navigation-volume-control-color: #aaa !default;

Description

Background color of the volume control.

navigation-volume-level-color

$navigation-volume-level-color: $main-color !default;

Description

Background color of the level in the volume control.

Indicators

variables

indicator-icons

$indicator-icons: "icon_font" !default;

Description

Type of icons to use:

  • "default": Use images from default theme.

  • "sprite": Custom icons from icon_sprite.png in theme directory.

  • "icon_font": Use font icons for icon.

display-scroll-indicator

$display-scroll-indicator: true !default;

Description

Display the scroll indicator at the bottom of the page.

indicator-text-color

$indicator-text-color: #e6e6e6 !default;

Description

Text color of indicators.

indicator-active-text-color

$indicator-active-text-color: $indicator-text-color !default;

Description

Text color of hovered indicators.

indicator-text-shadow-color

$indicator-text-shadow-color: rgb(43, 43, 43) !default;

Description

Text shadow color of indicators.

indicator-inverted-text-color

$indicator-inverted-text-color: #0a0a0a !default;

Description

Text color of indicators on inverted page.

indicator-inverted-active-text-color

$indicator-inverted-active-text-color: $indicator-inverted-text-color !default;

Description

Text color of hovered indicators on inverted page.

indicator-inverted-text-shadow-color

$indicator-inverted-text-shadow-color: #fdfdfd !default;

Description

Text shadow color of indicators on inverted page.

indicator-typography

$indicator-typography: () !default;

Description

Typography of indicators.

indicator-phone-typography

$indicator-phone-typography: () !default;

Description

Typography of indicators on phone.

Logo

variables

logo-variant

$logo-variant: "first-page" !default;

Description

Variant of logo to display:

  • "first-page": Background image on first page.

  • "all-pages": Background image on all pages.

  • "watermark": Use .header_logo element as logo.

logo-top

$logo-top: 30px !default;

Description

Top position of logo.

logo-phone-top

$logo-phone-top: null !default;

Description

Height of the logo. (Non-watermark variants only)

logo-width

$logo-width: 100px !default;

Description

Width of the logo. (Watermark variant only)

logo-relative-width

$logo-relative-width: 13% !default;

Description

Width of the logo in percent. (Non-watermark variants only)

logo-min-width

$logo-min-width: 100px !default;

Description

Min Width of the logo. (Non-watermark variants only)

logo-max-width

$logo-max-width: 221px !default;

Description

Max Width of the logo. (Non-watermark variants only)

logo-height

$logo-height: 50px !default;

Description

Height of the logo.

logo-mobile-height

$logo-mobile-height: 35px !default;

Description

Height of the logo. (Non-watermark variants only)

logo-phone-height

$logo-phone-height: null !default;

Description

Height of the logo in phone layout. (Defaults to 24px for watermark variant)

logo-image-file-extension

$logo-image-file-extension: "png" !default;

Description

File extension of logo_header and logo_header_invert image files

Mobile Navigation

Overview

variables

overview-icons

$overview-icons: $standard-icons !default;

Description

Type of icons to use:

  • "icon-font": Circular buttons with font awesome icons.

  • "sprite": Custom icons from icon_sprite.png in theme directory.

overview-icon-font-options

$overview-icon-font-options: () !default;

See

overview-chapter-border-images

$overview-chapter-border-images: "default" !default;

Description

Images to use to draw outline of chapter columns.

Possible values:

  • "default": Use images from default theme.
  • "none": Do not use background images.
  • "custom": Use images from current theme directory.

Custom border images have to placed in a overview_chapter_borders directory inside the theme's image directory. Five images have to be supplied:

  • top.png (width: 265pxm height: 10px): Used as the upper border of each column.

  • bottom.png (width: 265px, height 10px): Used as the lower border of each column.

  • start.png (width: 265px, height: 10px): Used as the upper border of the first column.

  • end.png (width: 265px, height: 10px): Used as the lower border of the last column.

  • tile.png (width: 265px): Repeated in the background of each column to draw the left and right borders.

See

overview-chapter-border-opacity

$overview-chapter-border-opacity: 1 !default;

Description

Opacity of the border images.

overview-backdrop-color

$overview-backdrop-color: rgba(0, 0, 0, 0.4) !default;

Description

Color of the backdrop used to fade out the current page.

overview-text-color

$overview-text-color: #fff !default;

Description

Default text color for overview elements.

overview-header-text-color

$overview-header-text-color: $overview-text-color !default;

Description

Color of the overview's main header.

overview-chapter-number-text-color

$overview-chapter-number-text-color: $overview-text-color !default;

Description

Color of the chapter tagline containing the chapter number.

overview-chapter-background-color

$overview-chapter-background-color: transparent !default;

Description

Background color of the chapter columns.

overview-page-border-color

$overview-page-border-color: #505050 !default;

Description

Color of the borders around the page thumbnails.

overview-current-page-border-color

$overview-current-page-border-color: $main-color-dark !default;

Description

Color of the border around the thumbnail of the current page.

overview-page-description-background-color

$overview-page-description-background-color: $main-color-dark !default;

Description

Background color of the panel which slides above the page thumbnail to reveal a page description.

overview-page-description-text-color

$overview-page-description-text-color: $overview-text-color !default;

Description

Text color of the panel which slides above the page thumbnail to reveal a page description.

overview-close-button-text-color

$overview-close-button-text-color: #fffefe !default;

Description

Text color of the close button label.

overview-active-close-button-text-color

$overview-active-close-button-text-color: $overview-close-button-text-color !default;

Description

Text color of the hovered close button label.

overview-close-button-text-shadow-color

$overview-close-button-text-shadow-color: #2b2b2b !default;

Description

Text shadow color of the close button label.

overview-active-close-button-text-shadow-color

$overview-active-close-button-text-shadow-color: $overview-close-button-text-shadow-color !default;

Description

Text shadow color of the hovered close button label.

overview-pictogram-visibility

$overview-pictogram-visibility: $standard-page-pictogram-visibility !default;

Description

Pictogram visiblity.

overview-typography

$overview-typography: () !default;

Description

Base typography for widget.

overview-header-typography

$overview-header-typography: () !default;

Description

Typography for overview header.

overview-chapter-number-typography

$overview-chapter-number-typography: () !default;

Description

Typography for chapter number tagline.

overview-chapter-title-typography

$overview-chapter-title-typography: () !default;

Description

Typography for chapter title.

overview-close-button-typography

$overview-close-button-typography: () !default;

Description

Typography for close button label.

Page Colors

variables

page-anchor-color

$page-anchor-color: #fff !default;

Description

Color of links inside the text

page-anchor-inverted-color

$page-anchor-inverted-color: #000 !default;

Description

Color of links inside the text on inverted pages

page-anchor-typography

$page-anchor-typography: () !default;

Description

Typography settings of links in page content text

page-text-color

$page-text-color: #fff !default;

Description

Color of text

page-inverted-text-color

$page-inverted-text-color: #000 !default;

Description

Color of text on inverted pages

page-background-color

$page-background-color: #000 !default;

Description

Background-color of pages

page-inverted-background-color

$page-inverted-background-color: #fff !default;

Description

Background-color of inverted pages

page-title-color

$page-title-color: null !default;

Description

Color of title

page-inverted-title-color

$page-inverted-title-color: null !default;

Description

Color of title on inverted pages

page-shadow-color

$page-shadow-color: #000 !default;

Description

Color of the gradient

page-shadow-inverted-color

$page-shadow-inverted-color: #fff !default;

Description

Color of the gradient on inverted pages

Page Typography

variables

page-typography

$page-typography: () !default;

Description

Base typography for page.

page-content-text-typography

$page-content-text-typography: () !default;

Description

Typography for content text.

page-content-text-phone-typography

$page-content-text-phone-typography: () !default;

Description

Typography for content text in phone layout.

page-content-font-size

$page-content-font-size: 1em !default;

Description

Base font size for page content

page-content-phone-font-size

$page-content-phone-font-size: 0.7em !default;

Description

Base font size for page content in phone layout

page-header-typography

$page-header-typography: () !default;

Description

Typography for header.

page-header-tagline-typography

$page-header-tagline-typography: () !default;

Description

Typography for header tagline.

page-header-tagline-phone-typography

$page-header-tagline-phone-typography: () !default;

Description

Typography for header tagline in phone layout.

page-header-title-typography

$page-header-title-typography: () !default;

Description

Typography for header title.

page-header-title-phone-typography

$page-header-title-phone-typography: () !default;

Description

Typography for header title in phone layout.

page-header-first-page-title-typography

$page-header-first-page-title-typography: () !default;

Description

Typography for title on first page.

page-header-first-page-title-phone-typography

$page-header-first-page-title-phone-typography: () !default;

Description

Typography for title on first page in phone layout.

page-header-chapter-beginning-title-typography

$page-header-chapter-beginning-title-typography: () !default;

Description

Typography for title on first page of chapter.

page-header-chapter-beginning-title-phone-typography

$page-header-chapter-beginning-title-phone-typography: () !default;

Description

Typography for title on first page of chapter in phone layout.

page-header-subtitle-typography

$page-header-subtitle-typography: () !default;

Description

Typography for header subtitle.

page-header-subtitle-phone-typography

$page-header-subtitle-phone-typography: () !default;

Description

Typography for header subtitle in phone layout.

page-scroller-padding-top

$page-scroller-padding-top: 15% !default;

Description

Space around page text inside scroller.

page-scroller-mobile-padding-top

$page-scroller-mobile-padding-top: 25% !default;

Description

Space around page text inside scroller.

page-scroller-mobile-landscape-padding-top

$page-scroller-mobile-landscape-padding-top: 10% !default;

Description

Space around page text inside scroller.

page-scroller-padding-bottom

$page-scroller-padding-bottom: 5% !default;

Description

Space around page text inside scroller.

page-scroller-padding-left

$page-scroller-padding-left: 8% !default;

Description

Space around page text inside scroller.

page-scroller-padding-right

$page-scroller-padding-right: 8% !default;

Description

Space around page text inside scroller.

page-scroller-mobile-padding-right

$page-scroller-mobile-padding-right: 8% !default;

Description

Space around page text inside scroller.

page-scroller-first-page-padding-top

$page-scroller-first-page-padding-top: null !default;

Description

Space for logo on first page.

page-scroller-first-page-mobile-padding-top

$page-scroller-first-page-mobile-padding-top: 110px !default;

Description

Space for logo on first page in mobile layout.

page-scroller-first-page-mobile-landscape-padding-top

$page-scroller-first-page-mobile-landscape-padding-top: 100px !default;

Description

Space for logo on first page in mobile landscape layout.

page-scroller-first-page-phone-padding-top

$page-scroller-first-page-phone-padding-top: null !default;

Description

Space for logo on first page in phone layout.

Classic Player Controls

variables

slim-player-controls-typography

$slim-player-controls-typography: $player-controls-typography !default;

Description

Base typograpy settings.

slim-player-controls-color

$slim-player-controls-color: #fff !default;

Description

Color of player icons and text.

slim-player-controls-loading-spinner-color

$slim-player-controls-loading-spinner-color: rgba(255, 255, 255, 0.5) !default;

Description

Color of the loading spinner circle around the play button.

slim-player-controls-progress-bar-background-color

$slim-player-controls-progress-bar-background-color: rgba(255, 255, 255, 0.2) !default;

Description

Backgrund color of the progress bar.

slim-player-controls-progress-bar-color

$slim-player-controls-progress-bar-color: $main-color !default;

Description

Color of the part of the progress bar indicating the play progress.

slim-player-controls-progress-bar-load-progress-color

$slim-player-controls-progress-bar-load-progress-color: rgba(255, 255, 255, 0.2) !default;

Description

Color of the part of the progress bar indicating the load progress.

slim-player-controls-control-bar-text-typography

$slim-player-controls-control-bar-text-typography: () !default;

Description

Typography for text displayed next to play button

slim-player-controls-control-bar-text-desktop-typography

$slim-player-controls-control-bar-text-desktop-typography: () !default;

Description

Typography for text displayed next to play button in desktop layout

slim-player-controls-control-bar-text-phone-typography

$slim-player-controls-control-bar-text-phone-typography: () !default;

Description

Typography for text displayed next to play button in phone layout

slim-player-controls-info-box-background-color

$slim-player-controls-info-box-background-color: rgba(17, 17, 17, 0.9) !default;

Description

Background color of info box.

slim-player-controls-info-box-text-color

$slim-player-controls-info-box-text-color: #fff !default;

Description

Color of text in info box.

slim-player-controls-info-box-separator-line-color

$slim-player-controls-info-box-separator-line-color: #888 !default;

Description

Color of separator line between info box header and info box text.

slim-player-controls-info-box-typography

$slim-player-controls-info-box-typography: () !default;

Description

Typography settings for the info box.

slim-player-controls-info-box-header-typography

$slim-player-controls-info-box-header-typography: () !default;

Description

Typography settings for the info box header.

Defaults

variables

main-color

$main-color: #53adb8 !default;

Description

Color to use for highlighted elements.

main-color-dark

$main-color-dark: #3b5159 !default;

Description

Background color to use for highlighted elements.

standard-typography

$standard-typography: (
  font-family: $standard-font,
  font-size: $standard-font-size
);

Description

Default typography settings.

standard-icons

$standard-icons: "icon-font" !default;

Description

Default type of icons to use.

  • "icon-font": Circular buttons with font awesome icons.

  • "sprite": Custom icons from icon_sprite.png in theme directory.

standard-page-pictogram-visibility

$standard-page-pictogram-visibility: visible !default;

Description

Pictograms visibility values to use.

  • "visible": All pictograms should be visible.

  • "hidden": All pictograms should be hidden.

General

variables

anchor-icon-color

$anchor-icon-color: null !default;

Description

Color of the caret icon displayed in front of links. Same as text color by default.

custom-loading-spinner

$custom-loading-spinner: false !default;

Description

Let theme define its own loading spinner.

loading-spinner-logo-width

$loading-spinner-logo-width: 130px !default;

Description

Width of the loading spinner image.

loading-spinner-logo-height

$loading-spinner-logo-height: 112px !default;

Description

Height of the loading spinner image.

loading-spinner-logo-mobile-width

$loading-spinner-logo-mobile-width: null !default;

Description

Width of the loading spinner image for mobile.

loading-spinner-logo-mobile-height

$loading-spinner-logo-mobile-height: null !default;

Description

Height of the loading spinner image for mobile.

loading-spinner-background-color

$loading-spinner-background-color: #3b5159 !default;

Description

Spinner background color.

loading-spinner-background

$loading-spinner-background: "glow" !default;

Description

What to display behind the logo:

  • "glow": Display radial gradient (default).
  • "custom": Display loading_spinner/background.png image.
  • "none": Nothing

loading-spinner-background-size

$loading-spinner-background-size: "auto" !default;

Description

Background size to apply to background image:

  • "auto": Do not apply background size (default).
  • "logo": Apply same size as for logo image. Allows using background image as an animated layer of the logo.

loading-spinner-glow-color

$loading-spinner-glow-color: rgba(117, 149, 160, 0.8) !default;

Description

Radial gradient color.

loading-spinner-animate-background

$loading-spinner-animate-background: true !default;

Description

Apply opacity animation to glow or background image.

loading-spinner-glow-size

$loading-spinner-glow-size: 140px !default;

Description

Size of the actual glowing area

loading-spinner-image-file-extension

$loading-spinner-image-file-extension: "png" !default;

Description

File extension of background and logo

loading-spinner-background-position

$loading-spinner-background-position: 50% 50% !default;

Description

Background position for background image

logo-alignment

$logo-alignment: "left" !default;

Description

Alignment of the logo in desktop layout. In phone layout, logos are always displayed left aligned.

  • "left": Left align logo.

  • "right": Right align logo in desktop layout.

logo-background-image-variant-first-page-opacity

$logo-background-image-variant-first-page-opacity: null !default;

Description

Opacity of the logo on the first page

logo-background-image-variant-mobile-padding-top

$logo-background-image-variant-mobile-padding-top: 1% !default;

Description

For some reason there has always been a default padding top for logo in mobile layout.

logo-background-image-variant-banner

$logo-background-image-variant-banner: false !default;

Description

Display logo_banner.svg behind logo

logo-watermark-variant-fade-in-near-top

$logo-watermark-variant-fade-in-near-top: "first-page" !default;

Description

Fade in logo when scroller is near top

  • "first-page": only on first page

  • "all-pages": on all pages

logo-watermark-variant-fade-in-with-header

$logo-watermark-variant-fade-in-with-header: false !default;

Description

Fade in logo when header is active. If the header logo is inverted on the current page, the non-inverted logo variant is displayed while the header is active.

logo-watermark-variant-opacity

$logo-watermark-variant-opacity: 0.3 !default;

Description

Set opacity value of watermark logos

logo-watermark-mobile-height

$logo-watermark-mobile-height: null !default;

Description

Height of the logo in phone layout.

sprite-icon-active-as-pressed

$sprite-icon-active-as-pressed: false !default;

Description

Use pressed state instead of hover state as acitve state.

navigation-bar-padding-top

$navigation-bar-padding-top: null !default;

Description

Vertical position of upper buttons.

page-hyphenate-header

$page-hyphenate-header: "narrow" !default;

Description

Let browser break words in header.

  • "narrow": Only allow hyphenating words when header is narrow, i.e. in portrait phone layout.

  • "always": Always break words

  • "never": Never break words

page-content-max-width

$page-content-max-width: 500px !default;

Description

Max width for tagline and subtitle and content text.

page-header-title-max-width

$page-header-title-max-width: 700px !default;

Description

Max width for header title when text is positioned on the left. For right positioned text the max width has to match the max width of tagline and subtitle to ensure the title is left aligned with those elements.

page-content-position-right-max-width

$page-content-position-right-max-width: 500px !default;

Description

Maximal width for right positioned headlines and content text.

page-content-position-center-max-width

$page-content-position-center-max-width: $page-content-max-width !default;

Description

Maximal width for center positioned headlines and content text.

page-header-title-min-width-for-split-layout

$page-header-title-min-width-for-split-layout: 525px !default;

Description

Min width the header title is supposed to have in a split layout (i.e. when the page has two columns and some kind of embed is displayed on the right) with text positioned on the left.

page-content-width

$page-content-width: 60% !default;

Description

Relative width of tagline, subtitle and content text

page-shadow-image

$page-shadow-image: null !default;

Description

Name of image file in theme directory to display behind the shadow

page-shadow-image-opacity

$page-shadow-image-opacity: null !default;

Description

Opactiy of shadow image

page-shadow-image-position

$page-shadow-image-position: right bottom !default;

Description

Background position of shadow image

page-shadow-image-size

$page-shadow-image-size: contain !default;

Description

Background size of shadow image

page-shadow-mobile-image-size

$page-shadow-mobile-image-size: null !default;

Description

Background size of shadow image in mobile layout.

classic-player-controls-custom-play-button-icon-color

$classic-player-controls-custom-play-button-icon-color: #000 !default;

Description

Color of of the custom icon displayed inside the play button.

Widget Defaults

variables

widget-background-color

$widget-background-color: $basic-background-color-transparent !default;

Description

Default background color of widgets.

widget-text-color

$widget-text-color: #fff !default;

Description

Default text color in widgets.

widget-icons

$widget-icons: $standard-icons !default;

Description

Default type of icons to use in widgets.

default-widget-icon-font-options

$default-widget-icon-font-options: (
  button-background-color: #dbdbdb,
  active-button-background-color: $main-color,

  button-icon-color: rgba(0, 0, 0, 0.75),
  active-button-icon-color: rgba(255, 255, 255, 0.9),
  deactivated-button-icon-color: rgba(120, 120, 120, 0.8)
);

Description

Default options used for icon font based icons in widgets.

widget-icon-font-options

$widget-icon-font-options: () !default;

See