@perspective-dev/viewer 4.0.0

package/src/less/filter-item.less

@@ -0,0 +1,126 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 {
+    :-webkit-calendar-picker-indicator {
+        filter: var(--calendar--filter, none);
+    }
+
+    #top_panel {
+        .rrow {
+            .input-sizer {
+                display: inline-grid;
+                align-items: center;
+                position: relative;
+                margin-top: 1px;
+                min-width: 45px;
+                overflow: hidden;
+                height: 16px;
+
+                &:after,
+                input,
+                textarea {
+                    width: auto;
+                    grid-area: 1 / 1;
+                    font-family: inherit;
+                }
+
+                input,
+                textarea {
+                    grid-area: 1 / 1;
+                    padding: 0;
+                    border: none;
+                    border-bottom: 1px solid var(--inactive--color, #ccc);
+                    background: transparent;
+                    color: inherit;
+                }
+
+                &:after {
+                    content: attr(data-value) " ";
+                    color: var(--inactive--color, inherit);
+                    visibility: hidden;
+                    white-space: nowrap;
+                    padding-right: 18px;
+                }
+
+                &.num-filter {
+                    input,
+                    textarea {
+                        width: 100%;
+                        position: absolute;
+                    }
+                }
+
+                &.num-filter:after {
+                    padding-right: 25px;
+                }
+
+                input.date-filter {
+                    width: 120px;
+                }
+
+                input.datetime-filter {
+                    width: 230px;
+                }
+
+                input.time-filter {
+                    grid-area: 1/2;
+                }
+
+                &:focus-within {
+                    textarea:focus,
+                    input:focus {
+                        outline: none;
+                    }
+                }
+            }
+        }
+
+        // The filter comparator
+        #filter {
+            .pivot-column {
+                input {
+                    font-size: 1em;
+                }
+
+                input[type="search"] {
+                    text-overflow: ellipsis;
+                    position: absolute;
+                    left: 0;
+                    right: 0;
+                    &::-webkit-search-cancel-button {
+                        cursor: pointer;
+                        opacity: 1;
+                        margin-left: 6px;
+                    }
+
+                    &:not(:empty)::-webkit-search-cancel-button {
+                        opacity: 1;
+                    }
+                }
+
+                .dropdown-width-container {
+                    height: 100%;
+                    flex: 0 0 auto;
+
+                    select {
+                        padding-right: 12px;
+                        padding-left: 4px;
+                        max-width: 100%;
+                        position: absolute;
+                        height: 100%;
+                    }
+                }
+            }
+        }
+    }
+}

package/src/less/form/code-editor.less

@@ -0,0 +1,137 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+@import "dom/scrollbar.less";
+
+:host {
+    #editor {
+        display: flex;
+        flex: 1 1 auto;
+        position: relative;
+        overflow-x: visible;
+        overflow-y: auto;
+        @include scrollbar;
+
+        #editor-height-sizer {
+            height: 100px;
+        }
+
+        #editor-inner {
+            overflow: hidden;
+            position: relative;
+            display: flex;
+            flex: 1 1 auto;
+        }
+
+        #line_numbers {
+            color: var(--inactive--color);
+            background-color: var(--plugin--background, white);
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            flex: 0 0 auto;
+            font-family: var(--interface-monospace--font-family, monospace);
+            font-weight: 400;
+            overflow: hidden;
+            padding: 6px 0 6px 6px;
+            pointer-events: none;
+            span:after {
+                color: var(--code-editor-error--color, red);
+                white-space: pre;
+                content: var(--status-icon--content, " X ");
+                opacity: 0;
+            }
+
+            span.error_highlight:after {
+                opacity: 1;
+            }
+        }
+
+        pre#content {
+            margin: 0 6px 6px 0;
+            padding: 6px 0;
+            // margin-left: 36px;
+            box-sizing: border-box;
+            pointer-events: none;
+            font-weight: 400;
+            font-family: var(--interface-monospace--font-family, monospace);
+            color: var(--code-editor-error--color, red);
+            white-space: pre;
+            overflow: hidden;
+
+            span {
+                // display: contents;
+            }
+
+            .comment {
+                color: var(--code-editor-comment--color, orange);
+            }
+
+            .operator {
+                color: var(--code-editor-operator--color, green);
+            }
+
+            .unknown {
+                color: var(--code-editor-unknown--color, red);
+            }
+
+            .symbol {
+                color: var(--code-editor-symbol--color, #242526);
+            }
+
+            .column {
+                color: var(--code-editor-column--color, purple);
+            }
+
+            .literal {
+                color: var(--code-editor-literal--color, blue);
+            }
+
+            .error_highlight {
+                // background-color:
+                color: var(--code-editor-error--color, red);
+                background-color: rgba(255, 0, 0, 0.1);
+                border: 0px solid var(--code-editor-error--color, red);
+                border-bottom-width: 1px;
+                margin-bottom: -1px;
+            }
+        }
+
+        #textarea_editable {
+            @include scrollbar;
+
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            font-family: var(--interface-monospace--font-family, monospace);
+            font-size: 1em;
+            resize: none;
+            padding: 6px 0;
+            margin: 0;
+            border: none;
+            outline: none;
+            color: transparent;
+            caret-color: var(--code-editor-symbol--color, #242526);
+            white-space: pre;
+            box-sizing: border-box;
+            background-color: transparent;
+        }
+
+        &.wordwrap {
+            #textarea_editable,
+            #content {
+                white-space: pre-wrap;
+                word-wrap: break-word;
+            }
+        }
+    }
+}

package/src/less/form/debug.less

@@ -0,0 +1,88 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 {
+    div.tab-title#Debug:before {
+        content: var(--debug-tab-label--content, "Debug JSON");
+    }
+
+    #debug-panel-overflow {
+        overflow: hidden;
+        display: flex;
+    }
+
+    .tab-padding {
+        border-right: none;
+    }
+
+    .tab-title {
+        height: 36px;
+    }
+
+    #debug-panel {
+        display: flex;
+        min-width: 150px;
+        label {
+            display: block;
+            margin-bottom: 2px;
+            font-size: var(--label--font-size, 0.75em);
+        }
+
+        #debug-panel-controls {
+            display: flex;
+            flex: 0 0 auto;
+            gap: 0.333333em;
+            padding: 0px 8px 12px 8px;
+            align-items: center;
+            button {
+                appearance: none;
+                background-color: transparent;
+                border-radius: 3px;
+                border: 1px solid var(--icon--color);
+                color: inherit;
+                cursor: pointer;
+                flex: 0 1 100px;
+                font-family: inherit;
+                font-size: 0.8333em;
+                text-transform: uppercase;
+                height: 24px;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                width: 0px;
+                &:not([disabled]):hover {
+                    background-color: var(--icon--color);
+                    color: var(--plugin--background);
+                }
+
+                &[disabled] {
+                    cursor: not-allowed;
+                    opacity: 0.2;
+                }
+            }
+        }
+
+        #debug-panel-editor {
+            display: flex;
+            flex-direction: column;
+            flex: 0 1 auto;
+            overflow: hidden;
+            padding: 12px 8px 12px 8px;
+        }
+
+        #editor {
+            background-color: var(--plugin--background);
+            border: 1px solid var(--inactive--color);
+            border-radius: 2px;
+            // height: 100%;
+        }
+    }
+}

package/src/less/function-dropdown.less

@@ -0,0 +1,45 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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 {
+    position: fixed;
+    z-index: 10000;
+    outline: none;
+    font-size: 0.75em;
+    border: inherit;
+    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);
+    user-select: none;
+    background-color: white;
+    padding: 6px;
+    display: flex;
+    flex-direction: column;
+    max-width: 300px;
+    overflow: hidden;
+
+    .selected {
+        background-color: rgba(0, 0, 0, 0.05);
+    }
+
+    span {
+        cursor: pointer;
+    }
+}
+
+:host(:hover) {
+    .selected {
+        background-color: transparent;
+    }
+
+    .selected:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+    }
+}

package/src/less/plugin-selector.less

@@ -0,0 +1,173 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+@import "dom/scrollbar.less";
+
+:host {
+    #settings_panel {
+        #plugin_selector_container.open ~ * {
+            opacity: 0;
+        }
+
+        #plugin_selector_container {
+            min-height: 48px;
+            display: flex;
+            white-space: nowrap;
+            flex-direction: column;
+            flex: 0 0 auto;
+
+            // Overflow the padding bounds of the container
+            // TODO these bounds exist to protext the resizer and scrollbar (left &
+            // right resp) but we really should find a way to remove it and delegate
+            // to sub-containers.
+            margin: 0 0px 0 -9px;
+
+            #plugin_selector_border {
+                height: 2px;
+                min-height: 2px;
+                width: 100%;
+                background-color: var(--inactive--color, #6e6e6e);
+                margin-top: 1px;
+            }
+
+            .plugin-selector-options {
+                overflow-y: auto;
+                @include scrollbar;
+            }
+
+            &.open {
+                position: absolute;
+                margin: 0;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+
+                // This element is first in the container but visually "overlaps"
+                // when expanded
+                z-index: 3;
+                color: var(--icon--color, #042121);
+                // background: var(--plugin--background);
+
+                .plugin-select-item {
+                    padding-left: 8px;
+                }
+            }
+
+            .plugin-select-item-name {
+                padding-left: 10px;
+                font-size: 1.33333em;
+            }
+
+            .plugin-select-item-name:before {
+                // This value is set in a `style` tag from Yew!
+                content: var(--default-column-title);
+            }
+
+            .plugin-select-item {
+                // width: 48px;
+                padding-left: 9px;
+                height: 48px;
+                min-height: 48px;
+                display: flex;
+                align-items: center;
+                border-bottom: 1px solid var(--inactive--color, #6e6e6e);
+                cursor: pointer;
+            }
+
+            // Hadn't seen this technique before, makes sizing/positioning these
+            // trivial.  There's some indication this doesn't work on non-chrome
+            // https://stackoverflow.com/questions/36259410/how-to-set-size-of-svg-image-in-before-pseudo-class
+            // https://stackoverflow.com/questions/21509982/change-svg-fill-color-in-before-or-after-css
+            .plugin-select-item:before {
+                content: "";
+                display: inline-block;
+                height: 35px;
+                width: 40px;
+                -webkit-mask-size: cover;
+                mask-size: cover;
+                background-repeat: no-repeat;
+                background-color: var(--icon--color);
+            }
+
+            .plugin-select-item:hover {
+                background-color: var(--icon--color, #042121);
+                color: var(--plugin--background, #fdfffd);
+            }
+
+            .plugin-select-item:hover:before {
+                background-color: var(--plugin--background, #fdfffd);
+            }
+
+            .plugin-select-item[data-plugin="Candlestick"]:before {
+                // mask-image: var(--plugin-selector-candlestick--content);
+                -webkit-mask-image: var(--plugin-selector-candlestick--content);
+            }
+
+            .plugin-select-item[data-plugin="Heatmap"]:before {
+                -webkit-mask-image: var(--plugin-selector-heatmap--content);
+            }
+
+            .plugin-select-item[data-plugin="Map Scatter"]:before {
+                -webkit-mask-image: var(--plugin-selector-map-scatter--content);
+            }
+
+            .plugin-select-item[data-plugin="OHLC"]:before {
+                -webkit-mask-image: var(--plugin-selector-ohlc--content);
+            }
+
+            .plugin-select-item[data-plugin="Sunburst"]:before {
+                -webkit-mask-image: var(--plugin-selector-sunburst--content);
+            }
+
+            .plugin-select-item[data-plugin="Treemap"]:before {
+                -webkit-mask-image: var(--plugin-selector-treemap--content);
+            }
+
+            .plugin-select-item[data-plugin="X Bar"]:before {
+                -webkit-mask-image: var(--plugin-selector-x-bar--content);
+            }
+
+            .plugin-select-item[data-plugin="X/Y Line"]:before {
+                -webkit-mask-image: var(--plugin-selector-x-y-line--content);
+            }
+
+            .plugin-select-item[data-plugin="X/Y Scatter"]:before {
+                -webkit-mask-image: var(--plugin-selector-x-y-scatter--content);
+            }
+
+            .plugin-select-item[data-plugin="Y Area"]:before {
+                -webkit-mask-image: var(--plugin-selector-y-area--content);
+            }
+
+            .plugin-select-item[data-plugin="Y Bar"]:before {
+                -webkit-mask-image: var(--plugin-selector-y-bar--content);
+            }
+
+            .plugin-select-item[data-plugin="Y Line"]:before {
+                -webkit-mask-image: var(--plugin-selector-y-line--content);
+            }
+
+            .plugin-select-item[data-plugin="Y Scatter"]:before {
+                -webkit-mask-image: var(--plugin-selector-y-scatter--content);
+            }
+
+            .plugin-select-item[data-plugin="Datagrid"]:before {
+                -webkit-mask-image: var(--plugin-selector-datagrid--content);
+            }
+        }
+
+        #plugin_selector {
+            flex-grow: 1;
+        }
+    }
+}

package/src/less/render-warning.less

@@ -0,0 +1,81 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ 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). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+// @amber400: #ffca28;
+
+:host {
+    .plugin_information {
+        color: var(--warning--color, inherit);
+        box-sizing: border-box;
+        display: flex;
+        position: absolute;
+        flex-direction: row;
+        justify-content: flex-start;
+        padding: 0.5rem;
+        z-index: 10000;
+        user-select: none;
+        left: 48px;
+        padding-left: 24px;
+        padding-right: 24px;
+        border-radius: 24px;
+        align-items: center;
+
+        &.plugin_information--warning {
+            background: var(--warning--background, #ffca28);
+        }
+
+        .plugin_information__text {
+            margin-right: 0.25rem;
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+        }
+
+        .plugin_information__icon {
+            height: 20px;
+        }
+
+        .plugin_information__icon:before {
+            content: var(--overflow-hint-icon--content);
+            height: 20px;
+            font-family: var(
+                --overflow_hint--font-family,
+                var(--button--font-family, inherit)
+            );
+            color: var(--overflow-hint-icon--color);
+            padding: var(--overflow-hint-icon--padding, 0 12px 0 6px);
+            font-size: 16px;
+        }
+
+        .plugin_information__action {
+            text-decoration: underline;
+            cursor: pointer;
+            margin-right: 0.25rem;
+        }
+
+        .plugin_information__actions {
+            margin-left: auto;
+            display: flex;
+            align-items: center;
+            flex-direction: row;
+            justify-content: flex-start;
+        }
+
+        .plugin_information--overflow-hint-percent {
+            font-weight: 700;
+        }
+
+        .plugin_information--overflow-hint {
+            white-space: nowrap;
+        }
+    }
+}