@perspective-dev/viewer 4.2.0 → 4.4.0

package/src/{less/viewer.less → css/viewer.css}

@@ -1,18 +1,19 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
-// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
-// ┃ This file is part of the Perspective library, distributed under the terms ┃
-// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
-// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+ * ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+ * ┃ This file is part of the Perspective library, distributed under the terms ┃
+ * ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+ * ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+ */
 
 :host {
     --settings-panel-z-index: 10;
-    --icon--color: #ff0000;
+    --psp--color: #ff0000;
 }
 
 ::slotted(*) {
@@ -25,8 +26,8 @@
     padding-top: calc(
         (
                 var(
-                        --plugin-selector--height,
-                        var(--status-bar--height, 48px)
+                        --psp-plugin-selector--height,
+                        var(--psp-status-bar--height, 48px)
                     ) -
                     20px
             ) /
@@ -35,15 +36,18 @@
     padding-bottom: calc(
         (
                 var(
-                        --plugin-selector--height,
-                        var(--status-bar--height, 48px)
+                        --psp-plugin-selector--height,
+                        var(--psp-status-bar--height, 48px)
                     ) -
                     20px
             ) /
             2
     );
     z-index: 10000;
-    height: var(--plugin-selector--height, var(--status-bar--height, 48px));
+    height: var(
+        --psp-plugin-selector--height,
+        var(--psp-status-bar--height, 48px)
+    );
 
     &:hover {
         cursor: pointer;
@@ -52,25 +56,27 @@
     .sidebar_close_button_inner {
         border-radius: 5px 0 0 5px;
         height: 20px;
-        background-color: var(--plugin--background);
+        background-color: var(--psp--background-color);
     }
 
-    .sidebar_close_button_inner:before {
+    .sidebar_close_button_inner .icon {
         display: inline-block;
-        height: 20px;
-        width: 20px;
-        content: "";
         mask-size: cover;
         -webkit-mask-size: cover;
         background-repeat: no-repeat;
-        background-color: var(--icon--color);
-        mask-image: var(--drawer-tab-icon--mask-image);
-        -webkit-mask-image: var(--drawer-tab-icon--mask-image);
+        background-color: var(--psp--color);
+        mask-image: var(--psp-icon--drawer-tab--mask-image);
+        -webkit-mask-image: var(--psp-icon--drawer-tab--mask-image);
+
+        &:before {
+            content: var(--psp-icon--drawer-tab--mask-image);
+            visibility: hidden;
+        }
     }
 
-    &:hover .sidebar_close_button_inner:before {
-        mask-image: var(--drawer-tab-icon--hover--mask-image);
-        -webkit-mask-image: var(--drawer-tab-icon--hover--mask-image);
+    &:hover .sidebar_close_button_inner .icon {
+        mask-image: var(--psp-icon--drawer-tab-hover--mask-image);
+        -webkit-mask-image: var(--psp-icon--drawer-tab-hover--mask-image);
     }
 }
 
@@ -81,20 +87,20 @@
 
 :host #debug_close_button.sidebar_close_button .sidebar_close_button_inner {
     background-attachment: fixed;
-    background: var(--sidebar--background);
-    background-size: 4px;
+    background: var(--psp-sidebar--background);
 
-    &:before {
-        mask-image: var(--drawer-tab-icon--hover--mask-image);
-        -webkit-mask-image: var(--drawer-tab-icon--hover--mask-image);
+    .icon {
+        mask-image: var(--psp-icon--drawer-tab-hover--mask-image);
+        -webkit-mask-image: var(--psp-icon--drawer-tab-hover--mask-image);
     }
 }
 
 :host
     #debug_close_button.sidebar_close_button:hover
-    .sidebar_close_button_inner:before {
-    mask-image: var(--drawer-tab-icon--mask-image);
-    -webkit-mask-image: var(--drawer-tab-icon--mask-image);
+    .sidebar_close_button_inner
+    .icon {
+    mask-image: var(--psp-icon--drawer-tab--mask-image);
+    -webkit-mask-image: var(--psp-icon--drawer-tab--mask-image);
 }
 
 :host #debug_open_button.sidebar_close_button {
@@ -107,14 +113,16 @@
 }
 
 :host #debug_open_button.sidebar_close_button .sidebar_close_button_inner {
-    &:before {
-        mask-image: var(--drawer-tab-inverted-icon--mask-image);
-        -webkit-mask-image: var(--drawer-tab-inverted-icon--mask-image);
+    .icon {
+        mask-image: var(--psp-icon--drawer-tab-inverted--mask-image);
+        -webkit-mask-image: var(--psp-icon--drawer-tab-inverted--mask-image);
     }
 
-    &:hover:before {
-        mask-image: var(--drawer-tab-inverted-icon--hover--mask-image);
-        -webkit-mask-image: var(--drawer-tab-inverted-icon--hover--mask-image);
+    &:hover .icon {
+        mask-image: var(--psp-icon--drawer-tab-inverted-hover--mask-image);
+        -webkit-mask-image: var(
+            --psp-icon--drawer-tab-inverted-hover--mask-image
+        );
     }
 }
 
@@ -164,7 +172,7 @@
         height: auto;
         flex-direction: row-reverse;
         & > .split-panel-divider {
-            border-left: 1px solid var(--inactive--color, #6e6e6e);
+            border-left: 1px solid var(--psp-inactive--color, #6e6e6e);
             margin-right: -5px;
         }
     }
@@ -183,12 +191,12 @@
     }
 
     #modal_panel > .split-panel-divider {
-        border-left: 1px solid var(--inactive--color, #6e6e6e);
+        border-left: 1px solid var(--psp-inactive--color, #6e6e6e);
         margin-right: -5px;
     }
 
     #status_bar {
-        height: var(--status-bar--height, 48px);
+        height: var(--psp-status-bar--height, 48px);
     }
 
     #main_column_container {
@@ -204,19 +212,22 @@
         overflow: hidden;
         flex-direction: column;
         position: relative;
-        margin: var(--main-column--margin);
-        border: var(--main-column--border);
-        border-width: var(--main-column--border-width);
-        border-radius: var(--main-column--border-radius);
+        margin: var(--psp-main-column--margin);
+        border: var(--psp-main-column--border);
+        border-width: var(--psp-main-column--border-width);
+        border-radius: var(--psp-main-column--border-radius);
     }
 
     #main_panel_container {
         position: relative;
         height: 100%;
         box-shadow: var(--plugin--box-shadow, none);
-        background: var(--plugin--background, none);
+        background: var(
+            --psp-main-column--background,
+            var(--psp--background-color, none)
+        );
         overflow: hidden;
-        border: var(--plugin--border, none);
+        border: var(--psp-plugin--border, none);
     }
 
     #settings_panel {
@@ -233,8 +244,8 @@
         }
 
         & > .split-panel-divider {
-            border-top: 1px solid var(--inactive--color, #6e6e6e);
-            border-bottom: 2px solid var(--inactive--color, #6e6e6e);
+            border-top: 1px solid var(--psp-inactive--color, #6e6e6e);
+            border-bottom: 2px solid var(--psp-inactive--color, #6e6e6e);
             margin-left: -9px;
             margin-right: 0px;
             flex: 0 0 4px;
@@ -242,8 +253,8 @@
     }
 
     #column_settings_sidebar .split-panel-divider {
-        border-top: 1px solid var(--inactive--color, #6e6e6e);
-        border-bottom: 2px solid var(--inactive--color, #6e6e6e);
+        border-top: 1px solid var(--psp-inactive--color, #6e6e6e);
+        border-bottom: 2px solid var(--psp-inactive--color, #6e6e6e);
         margin-left: -9px;
         margin-right: -4px;
         flex: 0 0 4px;
@@ -251,22 +262,12 @@
 
     .noselect {
         -webkit-touch-callout: none;
-        /* iOS Safari */
         -webkit-user-select: none;
-        /* Safari */
-        -khtml-user-select: none;
-        /* Konqueror HTML */
-        -moz-user-select: none;
-        /* Firefox */
-        -ms-user-select: none;
-        /* Internet Explorer/Edge */
         user-select: none;
-        /* Non-prefixed version, currently supported by Chrome and Opera */
     }
 
     .sidebar_column {
-        background: var(--sidebar--background);
-        background-size: 4px;
+        background: var(--psp-sidebar--background);
         background-attachment: fixed;
 
         display: flex;
@@ -274,7 +275,7 @@
         flex-direction: column;
         flex: 1;
 
-        // Needs 2 because it must take precedence over teh chart legend.
+        /* Needs 2 because it must take precedence over teh chart legend. */
         z-index: 2;
     }
 
@@ -282,7 +283,7 @@
         margin-top: 3px;
         border-bottom-width: 1px;
         border-style: solid;
-        border-color: var(--inactive--color, #c5c9d0);
+        border-color: var(--psp-inactive--color, #c5c9d0);
         border-top-width: 0px;
         border-left-width: 0px;
         border-right-width: 0px;
@@ -297,130 +298,105 @@
         padding: 0;
     }
 
-    // #settings_button.titled {
-    //     opacity: 0.2;
-    // }
-
     #close_button {
-        background-color: var(--plugin--background);
+        background-color: var(--psp--background-color);
         padding: 0px;
         overflow: hidden;
-        display: var(--close-button--display, none);
+        display: var(--psp-close-button--display, none);
         align-items: center;
         justify-content: center;
         z-index: 10000;
-        border: 1px solid var(--inactive--color);
+        border: 1px solid var(--psp-inactive--color);
         border-radius: 5px;
         font-size: 10px;
         font-weight: normal;
 
         &:hover {
-            color: var(--plugin--background, inherit);
-            background-color: var(--icon--color);
+            color: var(--psp--background-color, inherit);
+            background-color: var(--psp--color);
             cursor: pointer;
         }
 
-        &:hover:before {
-            background-color: var(--plugin--background);
+        &:hover .icon {
+            background-color: var(--psp--background-color);
         }
 
-        &:before {
-            // font-feature-settings: "liga";
-            // content: var(--config-button-icon--content, "Configure");
+        .icon {
             display: inline-block;
-            height: 20px;
-            width: 20px;
-            content: "";
             mask-size: cover;
-            -webkit-mask-size: cover; //40px 35px;
+            -webkit-mask-size: cover;
             background-repeat: no-repeat;
-            background-color: var(--icon--color);
-            mask-image: var(--close-icon--mask-image);
-            -webkit-mask-image: var(--close-icon--mask-image);
+            background-color: var(--psp--color);
+            mask-image: var(--psp-icon--close--mask-image);
+            -webkit-mask-image: var(--psp-icon--close--mask-image);
+
+            &:before {
+                content: var(--psp-icon--close--mask-image);
+                visibility: hidden;
+            }
         }
     }
 
     #settings_button {
-        background-color: var(--plugin--background);
+        background-color: var(--psp--background-color);
         padding: 0;
         overflow: hidden;
         display: flex;
         align-items: center;
         justify-content: center;
-        z-index: 10000;
-        border: 1px solid var(--inactive--color);
+        z-index: 3;
+        border: 1px solid var(--psp-inactive--color);
         border-radius: 5px;
         font-size: 10px;
         font-weight: normal;
-        z-index: 3;
 
         &:hover {
-            color: var(--plugin--background, inherit);
-            background-color: var(--icon--color);
+            color: var(--psp--background-color, inherit);
+            background-color: var(--psp--color);
             cursor: pointer;
         }
 
-        &:hover:before {
-            background-color: var(--plugin--background);
+        &:hover .icon {
+            background-color: var(--psp--background-color);
         }
 
-        &:before {
-            // font-feature-settings: "liga";
-            // content: var(--config-button-icon--content, "Configure");
-            display: inline-block;
-            height: 20px;
-            width: 20px;
-            content: "";
+        .icon {
+            display: inline-flex;
             mask-size: cover;
-            -webkit-mask-size: cover; //40px 35px;
+            -webkit-mask-size: cover;
             background-repeat: no-repeat;
-            background-color: var(--icon--color);
-            mask-image: var(--drawer-tab-inverted-icon--mask-image);
-            -webkit-mask-image: var(--drawer-tab-inverted-icon--mask-image);
+            background-color: var(--psp--color);
+            mask-image: var(--psp-icon--drawer-tab-inverted--mask-image);
+            -webkit-mask-image: var(
+                --psp-icon--drawer-tab-inverted--mask-image
+            );
+
+            &:before {
+                line-height: 0;
+                display: inline-flex;
+                content: var(--psp-icon--drawer-tab-inverted--mask-image);
+                visibility: hidden;
+            }
         }
     }
 
-    // #settings_button.floating {
-    //     border: none;
-    //     opacity: 1;
-    //     background-color: transparent;
-    //     margin-right: 0px;
-    //     padding: 0;
-    //     border-radius: 0px;
-
-    //     &:before {
-    //         display: inline-block;
-    //         height: 18px;
-    //         width: 26px;
-    //         content: "";
-    //         mask-size: cover;
-    //         -webkit-mask-size: cover; //40px 35px;
-    //         background-repeat: no-repeat;
-    //         background-color: var(--icon--color);
-    //         mask-image: var(--drawer-tab-icon--mask-image);
-    //         -webkit-mask-image: var(--drawer-tab-icon--mask-image);
-    //     }
-    // }
-
     .split-panel.orient-reverse
         > .split-panel-child:not(:last-child):not(.is-width-override) {
         max-width: 300px;
     }
 
-    #expr_panel_header,
     .sidebar_header {
         min-height: var(
-            --plugin-selector--height,
-            var(--status-bar--height, 48px)
+            --psp-plugin-selector--height,
+            var(--psp-status-bar--height, 48px)
         );
         overflow: hidden;
         display: flex;
         flex-direction: column;
         justify-content: center;
-        border-bottom: 1px solid var(--inactive--color, #6e6e6e);
+        border-bottom: 1px solid var(--psp-inactive--color, #6e6e6e);
     }
 
-    #expr_panel_header_title,
     .sidebar_header_title {
         padding-left: 9px;
         overflow: hidden;
@@ -429,22 +405,12 @@
         margin-right: 30px;
     }
 
-    #expr_panel_border,
     .sidebar_border {
         height: 2px;
         width: 100%;
-        background-color: var(--inactive--color, #6e6e6e);
+        background-color: var(--psp-inactive--color, #6e6e6e);
         margin-top: 1px;
         flex-shrink: 0;
         flex-grow: 0;
     }
-
-    .expr_editor_column {
-        z-index: 2;
-        width: 100%;
-    }
-
-    .is-width-override > .expr_editor_column {
-        min-width: unset;
-    }
 }