diff --git a/docs/plugins/gallery.md b/docs/plugins/gallery.md index 3a13b3530..a2c1cb884 100644 --- a/docs/plugins/gallery.md +++ b/docs/plugins/gallery.md @@ -194,3 +194,18 @@ This plugin adds buttons to the default navbar: - `gallery` allows to toggle the gallery panel If you use a [custom navbar](../guide/navbar.md) you will need to manually add the buttons to the list. + +## SCSS variables + +| variable | default | description | +| -------- | ------- | ----------- | +| $psv-gallery-breakpoint | 500px | Screen size bellow which the gallery is displayed full-height | +| $psv-gallery-padding | 15px | Padding of the container | +| $psv-gallery-border | 1px solid $psv-caption-text-color | Border between the gallery and the navbar | +| $psv-gallery-background | $psv-navbar-background | Background of the gallery | +| $psv-gallery-item-radius | 5px | Corner radius of gallery items | +| $psv-gallery-item-active-border | 3px solid white | Border of active gallery item | +| $psv-gallery-title-font | $psv-caption-font | Font of the gallery item title | +| $psv-gallery-title-color | $psv-caption-text-color | Color of the gallery item title | +| $psv-gallery-title-background | rgba(0, 0, 0, .6) | Background of the gallery item title | +| $psv-gallery-thumb-hover-scale | 1.2 | Scale factor of thumbnails on mouse hover | diff --git a/docs/plugins/map.md b/docs/plugins/map.md index a519ea19b..776a2d493 100644 --- a/docs/plugins/map.md +++ b/docs/plugins/map.md @@ -428,3 +428,15 @@ mapPlugin.addEventListener('select-hotspot', ({ hotspotId }) => { #### `view-changed(view)` Triggered when the map is maximized (`view=maximized`), minimized or opened (`view=normal`) or closed (`view=closed`). + +## SCSS variables + +| variable | default | description | +| -------- | ------- | ----------- | +| $psv-map-background | rgba(61, 61, 61, .7) | Background color of the map | +| $psv-map-button-size | 34px | Size of map buttons | +| $psv-map-button-color | $psv-buttons-color | Color of map buttons | +| $psv-map-toolbar-font | 12px sans-serif | Font for the zoom indicator | +| $psv-map-toolbar-text-color | white | Color of the zoom indicator | +| $psv-map-toolbar-background | #222 | Background color of the zoom indicator | +| $psv-map-transition | ease-in-out .3s | Transition | diff --git a/docs/plugins/plan.md b/docs/plugins/plan.md index 0710af01f..12fe28d68 100644 --- a/docs/plugins/plan.md +++ b/docs/plugins/plan.md @@ -414,3 +414,14 @@ planPlugin.addEventListener('select-hotspot', ({ hotspotId }) => { #### `view-changed(view)` Triggered when the map is maximized (`view=maximized`), minimized or opened (`view=normal`) or closed (`view=closed`). + +## SCSS variables + +| variable | default | description | +| -------- | ------- | ----------- | +| $psv-plan-radius | 8px | Corner radius of the plan | +| $psv-plan-shadow | 0 0 5px rgba(0, 0, 0, .7) | Shadow applied to the plan | +| $psv-plan-button-size | 34px | Size if plan buttons | +| $psv-plan-button-background | rgba(0, 0, 0, .7) | Background color of buttons | +| $psv-plan-button-color | white | Icon color if buttons | +| $psv-map-transition | ease-in-out .3s | Transition | diff --git a/docs/plugins/settings.md b/docs/plugins/settings.md index 93ab8b57a..b302ac65a 100644 --- a/docs/plugins/settings.md +++ b/docs/plugins/settings.md @@ -13,7 +13,7 @@ This plugin is available in the [@photo-sphere-viewer/settings-plugin](https://w ## Usage -Once enabled the plugin will add a new "Settings" button which other plugins can use to display various settings in the side panel. +Once enabled the plugin will add a new "Settings" button which can be populated by other plugins. ```js const viewer = new PhotoSphereViewer.Viewer({ @@ -187,3 +187,17 @@ This plugin adds buttons to the default navbar: - `settings` allows to open the settings panel If you use a [custom navbar](../guide/navbar.md) you will need to manually add the buttons to the list. + +## SCSS variables + +| variable | default | description | +| -------- | ------- | ----------- | +| $psv-settings-font | $psv-caption-font | Font of settings | +| $psv-settings-text-color | $psv-panel-text-color | Text color of settings | +| $psv-settings-background | $psv-panel-background | Background color of settings | +| $psv-settings-item-height | $psv-panel-menu-item-height | Height of each settings item | +| $psv-settings-item-padding | $psv-panel-menu-item-padding | Padding of each settings item | +| $psv-settings-hover-background | $psv-panel-menu-hover-background | Background color of items on mouse hover | +| $psv-settings-badge-font | 10px / .9 monospace | Font of the badge displayed on the button | +| $psv-settings-badge-text-color | white | Text color if the badge | +| $psv-settings-badge-background | #111 | Background color of the badge | diff --git a/docs/plugins/video.md b/docs/plugins/video.md index 4e5cde271..26b68bb90 100644 --- a/docs/plugins/video.md +++ b/docs/plugins/video.md @@ -230,3 +230,22 @@ This plugin adds buttons to the default navbar: - `videoTime` shows the video time and duration (not a real button) If you use a [custom navbar](../guide/navbar.md) you will need to manually add the buttons to the list. + +## SCSS variables + +| variable | default | description | +| -------- | ------- | ----------- | +| $psv-progressbar-height | 3px | Height of the progress bar | +| $psv-progressbar-height-active | 5px | Height of the progress bar on mouse hover | +| $psv-progressbar-progress-color | $psv-buttons-color | Color of the playing progress bar | +| $psv-progressbar-buffer-color | $psv-buttons-active-background | Color of the buffer progress bar | +| $psv-progressbar-handle-size | 9px | Size of the seek handle | +| $psv-progressbar-handle-color | white | Color of the seek handle | +| $psv-volume-height | 80px | Height of the volume control | +| $psv-volume-width | $psv-progressbar-height-active | Width of the volume control | +| $psv-volume-bar-color | $psv-progressbar-progress-color | Color of the volume controle | +| $psv-volume-track-color | $psv-progressbar-buffer-color | Background color of the volume control | +| $psv-volume-handle-size | $psv-progressbar-handle-size | Size of the volume handle | +| $psv-volume-handle-color | $psv-progressbar-handle-color | Color of the volume handle | +| $psv-video-bigbutton-color | $psv-buttons-color | Color of the central play button | +| $psv-video-bigbutton-size | (portrait: 20vw,
landscape: 10vw) | Size if the central play button, depending on screen orientation | diff --git a/packages/plan-plugin/src/style.scss b/packages/plan-plugin/src/style.scss index 3ce53b86a..40dfd8ef5 100644 --- a/packages/plan-plugin/src/style.scss +++ b/packages/plan-plugin/src/style.scss @@ -7,7 +7,6 @@ $psv-plan-shadow: 0 0 5px rgba(0, 0, 0, 0.7) !default; $psv-plan-button-size: 34px !default; $psv-plan-button-background: rgba(0, 0, 0, 0.7) !default; $psv-plan-button-color: white !default; -$psv-plan-button-radius: $psv-plan-radius !default; $psv-plan-transition: ease-in-out 0.3s !default; .psv-container { @@ -59,25 +58,25 @@ $psv-plan-transition: ease-in-out 0.3s !default; &--top-left { left: 0; top: 0; - border-bottom-right-radius: $psv-plan-button-radius; + border-bottom-right-radius: $psv-plan-radius; } &--top-right { right: 0; top: 0; - border-bottom-left-radius: $psv-plan-button-radius; + border-bottom-left-radius: $psv-plan-radius; } &--bottom-left { left: 0; bottom: 0; - border-top-right-radius: $psv-plan-button-radius; + border-top-right-radius: $psv-plan-radius; } &--bottom-right { right: 0; bottom: 0; - border-top-left-radius: $psv-plan-button-radius; + border-top-left-radius: $psv-plan-radius; } }