@perspective-dev/viewer 4.2.0 → 4.4.0

package/src/{less/status-bar.less → css/status-bar.css}

@@ -1,14 +1,15 @@
-// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
-// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
-// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
-// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
-// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
-// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
-// ┃ 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(:hover) {
     #status_bar.settings-closed.floating {
@@ -18,13 +19,11 @@
 }
 
 :host {
-    // When settings open ...
+    /* When settings open ... */
     #main_column #status_bar,
     #main_column #status_bar.titled {
-        // padding-right: 10px;
-
         input::placeholder {
-            color: var(--inactive--color);
+            color: var(--psp-inactive--color);
         }
     }
 
@@ -45,23 +44,25 @@
         min-height: auto;
         max-height: none;
         gap: 6px;
-        top: calc((var(--status-bar--height, 48px) - 20px) / 2);
-        right: calc(min(48px, (var(--status-bar--height, 48px) - 20px) / 2));
+        top: calc((var(--psp-status-bar--height, 48px) - 20px) / 2);
+        right: calc(
+            min(48px, (var(--psp-status-bar--height, 48px) - 20px) / 2)
+        );
     }
 
     #status_bar {
-        box-shadow: 0 13px 0 -12px var(--inactive--border-color);
+        box-shadow: 0 13px 0 -12px var(--psp-inactive--border-color);
         z-index: 1;
-        display: var(--status-bar--display, flex);
+        display: var(--psp-status-bar--display, flex);
         gap: 6px;
         align-items: center;
-        background: var(--plugin--background);
-        padding: var(--status-bar--padding, 0 31px 0 8px);
+        background: var(--psp--background-color);
+        padding: var(--psp-status-bar--padding, 0 31px 0 8px);
         position: relative;
-        height: var(--status-bar--height, 48px);
-        min-height: var(--status-bar--height, 48px);
-        max-height: var(--status-bar--height, 48px);
-        border-radius: var(--status-bar--border-radius);
+        height: var(--psp-status-bar--height, 48px);
+        min-height: var(--psp-status-bar--height, 48px);
+        max-height: var(--psp-status-bar--height, 48px);
+        border-radius: var(--psp-status-bar--border-radius);
         #status-bar-placeholder {
             margin: 0px;
             margin-right: -5px;
@@ -73,8 +74,8 @@
         }
 
         input:placeholder-shown + #status-bar-placeholder:before {
-            content: var(--untitled--content, "untitled");
-            color: var(--inactive--color);
+            content: var(--psp-label--untitled--content, "untitled");
+            color: var(--psp-inactive--color);
         }
 
         .input-sizer {
@@ -95,7 +96,6 @@
 
             input,
             textarea {
-                // grid-area: 1 / 1;
                 position: absolute;
                 left: 0;
                 right: 0;
@@ -109,7 +109,7 @@
 
             &:after {
                 content: attr(data-value) " ";
-                color: var(--inactive--color, inherit);
+                color: var(--psp-inactive--color, inherit);
                 visibility: hidden;
                 white-space: nowrap;
                 padding-right: 12px;
@@ -123,11 +123,6 @@
             }
         }
 
-        .app-title {
-            margin-left: 12px;
-            font-size: 16px;
-        }
-
         .section {
             display: flex;
             align-items: center;
@@ -156,11 +151,11 @@
 
             span.x,
             span.total {
-                color: var(--inactive--color);
+                color: var(--psp-inactive--color);
             }
         }
 
-        // Exceptions when the menu bar is visible and the settings panel is closed.
+        /* Exceptions when the menu bar is visible and the settings panel is closed. */
         #menu-bar {
             flex: 0 1000000 auto;
             height: 100%;
@@ -171,44 +166,25 @@
             align-self: stretch;
         }
 
-        #counter-arrow:before {
-            content: var(--status-bar-counter--content, "arrow_back");
-        }
-
         span {
             white-space: nowrap;
-
-            // font-size: var(--label--font-size, 0.75em);
             margin: 0px 14px;
             user-select: none;
-            // height: 100%;
-            // line-height: 36px;
-
-            // &:before {
-            //     position: relative;
-            // }
 
             &:hover {
                 color: inherit;
             }
         }
 
-        // span#rows {
-        //     margin-left: 2px;
-        // }
-
         span.icon {
             height: 100%;
-            line-height: 36px;
+            /* line-height: 36px; */
             margin: 0;
         }
 
         span#status {
-            width: 20px;
-            height: 20px;
             background-repeat: no-repeat;
-            background-color: var(--icon--color);
-            content: "";
+            background-color: var(--psp--color);
             mask-size: contain;
             mask-repeat: no-repeat;
             mask-position: center;
@@ -217,12 +193,17 @@
             margin: 0 5px;
         }
 
-        // span#status_updating
+        /* span#status_updating */
 
         span#status.loading {
             image-rendering: pixelated;
-            mask-image: var(--downloading-icon--mask-image);
-            -webkit-mask-image: var(--downloading-icon--mask-image);
+            mask-image: var(--psp-icon--downloading--mask-image);
+            -webkit-mask-image: var(--psp-icon--downloading--mask-image);
+            &:before {
+                visibility: hidden;
+                content: var(--psp-icon--downloading--mask-image);
+                line-height: 0;
+            }
         }
 
         span#status.uninitialized {
@@ -231,8 +212,13 @@
 
         span#status.connected,
         span#status.updating {
-            mask-image: var(--status-ok-icon--mask-image);
-            -webkit-mask-image: var(--status-ok-icon--mask-image);
+            mask-image: var(--psp-icon--status-ok--mask-image);
+            -webkit-mask-image: var(--psp-icon--status-ok--mask-image);
+            &:before {
+                visibility: hidden;
+                content: var(--psp-icon--status-ok--mask-image);
+                line-height: 0;
+            }
         }
 
         .error-dialog {
@@ -246,9 +232,9 @@
             padding: 0px 0px 0px 50px;
             display: none;
             white-space: pre-wrap;
-            color: var(--plugin--background);
-            background: var(--icon--color);
-            border-radius: var(--status-bar--border-radius);
+            color: var(--psp--background-color);
+            background: var(--psp--color);
+            border-radius: var(--psp-status-bar--border-radius);
         }
 
         .error-dialog-message {
@@ -257,14 +243,14 @@
             align-items: center;
             display: flex;
             padding-right: 17px;
-            height: var(--status-bar--height, 48px);
-            min-height: var(--status-bar--height, 48px);
+            height: var(--psp-status-bar--height, 48px);
+            min-height: var(--psp-status-bar--height, 48px);
         }
 
         .error-dialog-stack {
             font-size: 10px;
             padding-right: 17px;
-            color: var(--inactive--color);
+            color: var(--psp-inactive--color);
             overflow-y: auto;
             padding-bottom: 24px;
         }
@@ -279,26 +265,26 @@
             align-items: center;
             border-radius: 3px;
             margin: 0;
-            height: auto; //var(--status-bar--height, 48px);
-            border: 1px solid var(--status-ok-icon--border-color, transparent);
-            cursor: var(--status-ok-icon--cursor);
-            pointer-events: var(--status-indicator--pointer-events, none);
+            height: auto;
+            border: 1px solid
+                var(--psp-status-icon--ok--border-color, transparent);
+            cursor: var(--psp-status-icon--ok--cursor);
+            pointer-events: var(--psp-status-icon--pointer-events, none);
             &:hover {
                 background-color: var(
-                    --status-ok-icon--hover--background-color,
+                    --psp-status-icon--ok-hover--background-color,
                     transparent
                 );
                 border-color: var(
-                    --status-ok-icon--hover--border-color,
+                    --psp-status-icon--ok-hover--border-color,
                     transparent
                 );
                 span#status {
                     background-color: var(
-                        --status-ok-icon--hover--color,
-                        var(--icon--color)
+                        --psp-status-icon--ok-hover--color,
+                        var(--psp--color)
                     );
                 }
-                // color: var(--status-ok-icon--hover--background-color);
             }
 
             &.errored {
@@ -317,47 +303,44 @@
                 align-items: center;
                 justify-content: center;
                 height: 20px;
-                height: 20px;
+                width: 20px;
                 border-radius: 10px;
-                color: var(--plugin--background);
-                // pointer-events: all;
-                // mask-image: url(../svg/status_error.svg);
-                // -webkit-mask-image: url(../svg/status_error.svg);
+                color: var(--psp--background-color);
                 &:before {
                     content: "!";
                 }
             }
 
             &.errored:hover {
-                background-color: var(--icon--color);
+                background-color: var(--psp--color);
                 span#status.errored {
-                    color: var(--icon--color);
-                    background-color: var(--plugin--background);
+                    color: var(--psp--color);
+                    background-color: var(--psp--background-color);
                 }
             }
         }
 
-        // Status bar status icon animations
+        /* Status bar status icon animations */
         span#status_updating {
             position: absolute;
+            display: inline-flex;
+            margin: 0 5px;
             opacity: 0;
-            width: 20px;
-            height: 20px;
             background-repeat: no-repeat;
-            background-color: var(--icon--color);
-            content: "";
+            background-color: var(--psp--color);
             -webkit-mask-size: cover;
             mask-size: cover;
             pointer-events: none;
             image-rendering: pixelated;
-            mask-image: var(--updating-icon--mask-image);
-            -webkit-mask-image: var(--updating-icon--mask-image);
+            mask-image: var(--psp-icon--updating--mask-image);
+            -webkit-mask-image: var(--psp-icon--updating--mask-image);
+            &:before {
+                visibility: hidden;
+                content: var(--psp-icon--updating--mask-image);
+                line-height: 0;
+            }
         }
 
-        // span#status.uninitialized {
-
-        // }
-
         span#status.updating {
             animation-name: status-bar-updating-inverse;
             animation-fill-mode: forwards;
@@ -372,51 +355,76 @@
             animation-duration: 0.3s;
         }
 
-        .button:before {
-            height: 21px;
-            width: 21px;
+        .button > .icon {
             background-repeat: no-repeat;
-            background-color: var(--icon--color);
-            content: "";
+            background-color: var(--psp--color);
             -webkit-mask-size: cover;
             mask-size: cover;
             pointer-events: none;
+            display: inline-block;
         }
 
         span#export {
-            &:before {
-                -webkit-mask-image: var(--export-icon--mask-image);
-                mask-image: var(--export-icon--mask-image);
+            & > .icon {
+                -webkit-mask-image: var(--psp-icon--export--mask-image);
+                mask-image: var(--psp-icon--export--mask-image);
+                display: inline-flex;
+                &:before {
+                    line-height: 0;
+                    content: var(--psp-icon--export--mask-image);
+                    visibility: hidden;
+                }
             }
-            span:before {
-                content: var(--export-button--content, "Export");
+
+            span:not(.icon):before {
+                content: var(--psp-label--export-button--content, "Export");
             }
         }
 
         span#lock {
-            &:before {
-                -webkit-mask-image: var(--free-scroll-icon--mask-image);
-                mask-image: var(--free-scroll-icon--mask-image);
+            & > .icon {
+                -webkit-mask-image: var(--psp-icon--free-scroll--mask-image);
+                mask-image: var(--psp-icon--free-scroll--mask-image);
+
+                &:before {
+                    line-height: 0;
+                    content: var(--psp-icon--free-scroll--mask-image);
+                    visibility: hidden;
+                }
             }
         }
 
         span#reset {
-            &:before {
-                -webkit-mask-image: var(--reset-icon--mask-image);
-                mask-image: var(--reset-icon--mask-image);
+            & > .icon {
+                -webkit-mask-image: var(--psp-icon--reset--mask-image);
+                mask-image: var(--psp-icon--reset--mask-image);
+                display: inline-flex;
+                &:before {
+                    line-height: 0;
+                    content: var(--psp-icon--reset--mask-image);
+                    visibility: hidden;
+                }
             }
-            span:before {
-                content: var(--reset-button--content);
+            span:not(.icon):before {
+                content: var(--psp-label--reset-button--content);
             }
         }
 
         span#copy {
-            &:before {
-                -webkit-mask-image: var(--copy-icon--mask-image);
-                mask-image: var(--copy-icon--mask-image);
+            & > .icon {
+                -webkit-mask-image: var(--psp-icon--copy--mask-image);
+                mask-image: var(--psp-icon--copy--mask-image);
+                display: inline-flex;
+
+                &:before {
+                    line-height: 0;
+                    content: var(--psp-icon--copy--mask-image);
+                    visibility: hidden;
+                }
             }
-            span:before {
-                content: var(--copy-button--content);
+
+            span:not(.icon):before {
+                content: var(--psp-label--copy-button--content);
             }
         }
 
@@ -438,21 +446,29 @@
                 height: 100%;
             }
 
-            &:before {
+            & > .icon {
                 margin: 0 6px 0 4px;
-                -webkit-mask-image: var(--theme-icon--mask-image);
-                mask-image: var(--theme-icon--mask-image);
+                height: auto;
+                -webkit-mask-image: var(--psp-icon--theme--mask-image);
+                mask-image: var(--psp-icon--theme--mask-image);
+                display: inline-flex;
+                &:before {
+                    line-height: 0;
+                    content: var(--psp-icon--theme--mask-image);
+                    visibility: hidden;
+                }
             }
         }
 
-        #theme_icon.modified:hover + #theme:before {
-            -webkit-mask-image: var(--close-icon--mask-image);
-            mask-image: var(--close-icon--mask-image);
+        #theme_icon.modified:hover + #theme > .icon {
+            -webkit-mask-image: var(--psp-icon--close--mask-image);
+            mask-image: var(--psp-icon--close--mask-image);
         }
 
         #theme_selector {
             max-width: 100px;
             text-overflow: ellipsis;
+            font-size: 0.8em;
         }
 
         .button {
@@ -461,7 +477,7 @@
             align-items: center;
             margin: 0px;
             padding: 0 5px;
-            color: var(--inactive--color, #ccc);
+            color: var(--psp-inactive--color, #ccc);
             border: 1px solid transparent;
             border-radius: 3px;
             font-size: var(--label--font-size, 0.75em);
@@ -473,7 +489,7 @@
                 display: none;
             }
 
-            &:before {
+            & > .icon {
                 z-index: 1;
             }
         }
@@ -488,9 +504,9 @@
             &:hover,
             &.modal-target {
                 box-shadow:
-                    -4px 0 0 var(--icon--color),
-                    4px 0 0 var(--icon--color);
-                background-color: var(--icon--color);
+                    -4px 0 0 var(--psp--color),
+                    4px 0 0 var(--psp--color);
+                background-color: var(--psp--color);
             }
 
             &:focus-within .button select,
@@ -499,26 +515,26 @@
             }
 
             .modal-target .button > span {
-                color: var(--icon--color) !important;
+                color: var(--psp--color) !important;
             }
 
             &:focus-within .button,
             &:hover .button,
             &.modal-target .button {
                 position: relative;
-                min-width: var(--button--min-width, 33px);
+                min-width: var(--psp-button--min-width, 33px);
                 color: inherit;
                 cursor: pointer;
                 transition: none;
-                background-color: var(--icon--color);
-                color: var(--plugin--background);
+                background-color: var(--psp--color);
+                color: var(--psp--background-color);
 
-                &:before {
-                    background-color: var(--plugin--background);
+                & > .icon {
+                    background-color: var(--psp--background-color);
                 }
 
-                // The label.
-                @mixin label {
+                & > span:not(.icon) {
+                    /* The label. */
                     display: block;
                     text-align: center;
                     position: absolute;
@@ -531,20 +547,16 @@
                     white-space: nowrap;
                     line-height: 1;
                     width: 41px;
-                    background-color: var(--icon--color);
+                    background-color: var(--psp--color);
                     border-radius: 0 0 3px 3px;
                 }
 
-                & > span {
-                    @include label;
-                }
-
                 & > .dropdown-width-container {
                     display: block;
                     margin: 0;
                     white-space: nowrap;
                     line-height: 1;
-                    background-color: var(--icon--color);
+                    background-color: var(--psp--color);
                     pointer-events: all;
 
                     & > select {

package/src/css/type-icon.css

@@ -0,0 +1,116 @@
+/* ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+ * ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+ * ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+ * ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+ * ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+ * ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+ * ┃ 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 #selected-columns .type-icon,
+:host #sub-columns .type-icon {
+    /* position: absolute; */
+    /* left: 15px; */
+    margin-left: 4px;
+}
+
+:host .icon {
+    background-repeat: no-repeat;
+    background-color: var(--psp--color);
+    display: inline-block;
+    -webkit-mask-size: cover;
+    mask-size: cover;
+    flex-shrink: 0;
+    line-height: 0;
+    &.integer {
+        -webkit-mask-image: var(--icon-image);
+        mask-image: var(--icon-image);
+
+        &:before {
+            content: var(--icon-image);
+            visibility: hidden;
+        }
+    }
+}
+
+:host .type-icon {
+    background-repeat: no-repeat;
+    background-color: var(--psp--color);
+    display: inline-block;
+    -webkit-mask-size: cover;
+    mask-size: cover;
+    flex-shrink: 0;
+    line-height: 0;
+
+    &.none {
+        content: none;
+    }
+
+    &.integer {
+        -webkit-mask-image: var(--psp-column-type--integer--mask-image);
+        mask-image: var(--psp-column-type--integer--mask-image);
+
+        &:before {
+            content: var(--psp-column-type--integer--mask-image);
+            visibility: hidden;
+        }
+    }
+
+    &.float {
+        -webkit-mask-image: var(--psp-column-type--float--mask-image);
+        mask-image: var(--psp-column-type--float--mask-image);
+        &:before {
+            content: var(--psp-column-type--float--mask-image);
+            visibility: hidden;
+        }
+    }
+
+    &.string {
+        -webkit-mask-image: var(--psp-column-type--string--mask-image);
+        mask-image: var(--psp-column-type--string--mask-image);
+        &:before {
+            content: var(--psp-column-type--string--mask-image);
+            visibility: hidden;
+        }
+    }
+
+    &.boolean {
+        -webkit-mask-image: var(--psp-column-type--boolean--mask-image);
+        mask-image: var(--psp-column-type--boolean--mask-image);
+        &:before {
+            content: var(--psp-column-type--boolean--mask-image);
+            visibility: hidden;
+        }
+    }
+
+    &.date {
+        -webkit-mask-image: var(--psp-column-type--date--mask-image);
+        mask-image: var(--psp-column-type--date--mask-image);
+        &:before {
+            content: var(--psp-column-type--date--mask-image);
+            visibility: hidden;
+        }
+    }
+
+    &.datetime {
+        -webkit-mask-image: var(--psp-column-type--datetime--mask-image);
+        mask-image: var(--psp-column-type--datetime--mask-image);
+        &:before {
+            content: var(--psp-column-type--datetime--mask-image);
+            visibility: hidden;
+        }
+    }
+
+    &.expression {
+        -webkit-mask-image: var(--psp-icon--add-expression--mask-image);
+        mask-image: var(--psp-icon--add-expression--mask-image);
+        &:before {
+            content: var(--psp-icon--add-expression--mask-image);
+            visibility: hidden;
+        }
+    }
+}