doc: add SCSS variables for plugins

Author: mistic100

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 |

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 |

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 |

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 |

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,<br>landscape: 10vw) | Size if the central play button, depending on screen orientation |

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;
         }
     }