molstar 3.26.0 → 3.28.0

package/lib/mol-plugin-ui/skin/base/components/viewport.scss

@@ -1,128 +1,137 @@
-.msp-viewport {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    background: $default-background;
-
-    .msp-btn-link {
-        background: rgba(0,0,0,0.2);
-    }
-
-}
-
-.msp-viewport-expanded {
-    position: fixed;
-    z-index: 1000;
-}
-
-.msp-viewport-host3d {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    -webkit-user-select: none;
-    user-select: none;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
-    -webkit-touch-callout: none;
-    touch-action: manipulation;
-
-    > canvas {
-        background-color: $default-background;
-        background-image: linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%, lightgrey),
-        linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%, lightgrey);
-        background-size: 60px 60px;
-        background-position: 0 0, 30px 30px;
-    }
-}
-
-.msp-viewport-controls {
-    position: absolute;
-    right: $control-spacing;
-    top: $control-spacing;
-    width: 32px;
-}
-
-.msp-viewport-controls-buttons {
-    text-align: right;
-    position: relative;
-    // opacity: 0.5;
-    // &:hover { opacity: 1.0; }
-
-    > div {
-        position: relative;
-        margin-bottom: 4px;
-    }
-
-    button {
-        padding: 0;
-        text-align: center;
-        width: $row-height;
-        position: relative;
-    }
-
-    .msp-btn-link-toggle-off {
-        color: $msp-btn-link-toggle-off-font-color;
-    }
-
-    .msp-btn-link:hover {
-        color: $hover-font-color;
-    }
-}
-
-.msp-semi-transparent-background {
-    background: $default-background;
-    opacity: 0.5;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.msp-viewport-controls-panel {
-    width: 290px;
-    top: 0;
-    right: $row-height + 4px;
-    position: absolute;
-    background: $control-background;
-
-    .msp-control-group-wrapper:first-child {
-        padding-top: 0;
-    }
-
-    .msp-viewport-controls-panel-controls {
-        overflow-y: auto;
-        max-height: 400px;
-    }
-}
-
-/* highlight & toasts */
-
-.msp-highlight-toast-wrapper {
-    position: absolute;
-    right: $control-spacing;
-    bottom: $control-spacing;
-    max-width: 95%;
-
-    z-index: 10000;
-}
-
-.msp-highlight-info {
-    color: $highlight-info-font-color;
-    padding: $info-vertical-padding $control-spacing;
-    background: $default-background; //$highlight-info-background;
-
-    // min-height: $row-height;
-    text-align: right;
-
-    @include non-selectable;
-}
-
-.msp-highlight-info-additional {
-    font-size: 85%;
-    display: inline-block;
-    color: $highlight-info-additional-font-color;
-}
+.msp-viewport {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    background: $default-background;
+
+    .msp-btn-link {
+        background: rgba(0,0,0,0.2);
+    }
+
+}
+
+.msp-viewport-expanded {
+    position: fixed;
+    z-index: 1000;
+}
+
+.msp-viewport-host3d {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -webkit-touch-callout: none;
+    touch-action: manipulation;
+
+    > canvas {
+        background-color: $default-background;
+        background-image: linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%, lightgrey),
+        linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%, lightgrey);
+        background-size: 60px 60px;
+        background-position: 0 0, 30px 30px;
+    }
+}
+
+.msp-viewport-controls {
+    position: absolute;
+    right: $control-spacing;
+    top: $control-spacing;
+    width: 32px;
+}
+
+.msp-viewport-controls-buttons {
+    text-align: right;
+    position: relative;
+    // opacity: 0.5;
+    // &:hover { opacity: 1.0; }
+
+    > div {
+        position: relative;
+        margin-bottom: 4px;
+    }
+
+    button {
+        padding: 0;
+        text-align: center;
+        width: $row-height;
+        position: relative;
+    }
+
+    .msp-btn-link-toggle-off {
+        color: $msp-btn-link-toggle-off-font-color;
+    }
+
+    .msp-btn-link:hover {
+        color: $hover-font-color;
+    }
+}
+
+.msp-semi-transparent-background {
+    background: $default-background;
+    opacity: 0.5;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.msp-viewport-controls-panel {
+    width: 290px;
+    top: 0;
+    right: $row-height + 4px;
+    position: absolute;
+    background: $control-background;
+
+    .msp-control-group-wrapper:first-child {
+        padding-top: 0;
+    }
+
+    .msp-viewport-controls-panel-controls {
+        overflow-y: auto;
+        max-height: 400px;
+    }
+}
+
+/* highlight & toasts */
+
+.msp-highlight-toast-wrapper {
+    position: absolute;
+    right: $control-spacing;
+    bottom: $control-spacing;
+    max-width: 95%;
+
+    z-index: 10000;
+}
+
+.msp-highlight-info {
+    color: $highlight-info-font-color;
+    padding: $info-vertical-padding $control-spacing;
+    background: $default-background; //$highlight-info-background;
+    opacity: 90%;
+
+    // min-height: $row-height;
+    text-align: right;
+
+    @include non-selectable;
+}
+
+.msp-highlight-info-hr {
+    margin-inline: 0px;
+    margin-block: 3px;
+    border: none;
+    height: 1px;
+    background-color: $highlight-info-font-color;
+}
+
+.msp-highlight-info-additional {
+    font-size: 85%;
+    display: inline-block;
+    color: $highlight-info-additional-font-color;
+}

package/lib/mol-plugin-ui/skin/base/layout/common.scss

@@ -1,72 +1,72 @@
-
-
-.msp-layout-expanded, .msp-layout-standard {
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-}
-
-.msp-layout-standard {
-    border: 1px solid $border-color;
-}
-
-.msp-layout-region {
-    overflow: hidden;
-}
-
-.msp-layout-static, .msp-layout-scrollable {
-    position: absolute;
-}
-
-.msp-scrollable {
-    overflow-y: auto;
-}
-
-.msp-scrollable-container {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    overflow-y: auto;
-}
-
-.msp-layout-static {
-    overflow: hidden;
-}
-
-.msp-layout-top, .msp-layout-main, .msp-layout-bottom {
-    .msp-layout-static {
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-    }
-}
-
-.msp-layout-right {
-    .msp-layout-static {
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0; // height: $row-height + $control-spacing;
-    }
-
-    .msp-layout-scrollable {
-        left: 0;
-        right: 0;
-        top: $row-height + $control-spacing + 1;
-        bottom: 0;
-     }
-
-}
-
-.msp-layout-left {
-    .msp-layout-static {
-        left: 0;
-        right: 0;
-        bottom: 0;
-        top: 0;
-    }
+
+
+.msp-layout-expanded, .msp-layout-standard {
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.msp-layout-standard {
+    border: 1px solid $border-color;
+}
+
+.msp-layout-region {
+    overflow: hidden;
+}
+
+.msp-layout-static, .msp-layout-scrollable {
+    position: absolute;
+}
+
+.msp-scrollable {
+    overflow-y: auto;
+}
+
+.msp-scrollable-container {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    overflow-y: auto;
+}
+
+.msp-layout-static {
+    overflow: hidden;
+}
+
+.msp-layout-top, .msp-layout-main, .msp-layout-bottom {
+    .msp-layout-static {
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+    }
+}
+
+.msp-layout-right {
+    .msp-layout-static {
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0; // height: $row-height + $control-spacing;
+    }
+
+    .msp-layout-scrollable {
+        left: 0;
+        right: 0;
+        top: $row-height + $control-spacing + 1;
+        bottom: 0;
+     }
+
+}
+
+.msp-layout-left {
+    .msp-layout-static {
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: 0;
+    }
 }

package/lib/mol-plugin-ui/skin/base/layout/controls-landscape.scss

@@ -1,90 +1,90 @@
-
-.msp-layout-main {                
-    position: absolute;
-    left: $expanded-left-width;
-    right: $expanded-right-width;
-    bottom: $expanded-bottom-height;
-    top: $expanded-top-height;
-}
-
-.msp-layout-top {        
-    position: absolute;
-    left: $expanded-left-width;
-    right: $expanded-right-width;
-    height: $expanded-top-height;
-    top: 0;
-    border-bottom: 1px solid $border-color;
-}
-
-.msp-layout-bottom {        
-    position: absolute;
-    left: $expanded-left-width;
-    right: $expanded-right-width;
-    height: $expanded-bottom-height;
-    bottom: 0;
-    border-top: 1px solid $border-color;
-}
-
-.msp-layout-right {
-    position: absolute;
-    width: $expanded-right-width;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    border-left: 1px solid $border-color;
-}
-
-.msp-layout-left {
-    position: absolute;
-    width: $expanded-left-width;
-    left: 0;
-    bottom: 0;
-    top: 0;
-    border-right: 1px solid $border-color;
-}
-
-.msp-layout-hide-right {
-    .msp-layout-right {
-        display: none;
-    }    
-    .msp-layout-main, .msp-layout-top, .msp-layout-bottom {
-        right: 0;
-    }    
-}
-
-
-.msp-layout-hide-left {
-    .msp-layout-left {
-        display: none;
-    }    
-    .msp-layout-main, .msp-layout-top, .msp-layout-bottom {
-        left: 0;
-    }    
-}
-
-.msp-layout-collapse-left {
-    .msp-layout-left {
-        width: $collapsed-left-width; 
-    }
-    .msp-layout-main, .msp-layout-top, .msp-layout-bottom {
-        left: $collapsed-left-width;
-    }    
-}
-
-.msp-layout-hide-bottom {
-    .msp-layout-bottom {
-        display: none;
-    }    
-    .msp-layout-main {
-        bottom: 0;
-    }    
-}
-
-.msp-layout-hide-top {
-    .msp-layout-top {
-        display: none;
-    }    
-    .msp-layout-main {
-        top: 0;
-    }    
+
+.msp-layout-main {                
+    position: absolute;
+    left: $expanded-left-width;
+    right: $expanded-right-width;
+    bottom: $expanded-bottom-height;
+    top: $expanded-top-height;
+}
+
+.msp-layout-top {        
+    position: absolute;
+    left: $expanded-left-width;
+    right: $expanded-right-width;
+    height: $expanded-top-height;
+    top: 0;
+    border-bottom: 1px solid $border-color;
+}
+
+.msp-layout-bottom {        
+    position: absolute;
+    left: $expanded-left-width;
+    right: $expanded-right-width;
+    height: $expanded-bottom-height;
+    bottom: 0;
+    border-top: 1px solid $border-color;
+}
+
+.msp-layout-right {
+    position: absolute;
+    width: $expanded-right-width;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    border-left: 1px solid $border-color;
+}
+
+.msp-layout-left {
+    position: absolute;
+    width: $expanded-left-width;
+    left: 0;
+    bottom: 0;
+    top: 0;
+    border-right: 1px solid $border-color;
+}
+
+.msp-layout-hide-right {
+    .msp-layout-right {
+        display: none;
+    }    
+    .msp-layout-main, .msp-layout-top, .msp-layout-bottom {
+        right: 0;
+    }    
+}
+
+
+.msp-layout-hide-left {
+    .msp-layout-left {
+        display: none;
+    }    
+    .msp-layout-main, .msp-layout-top, .msp-layout-bottom {
+        left: 0;
+    }    
+}
+
+.msp-layout-collapse-left {
+    .msp-layout-left {
+        width: $collapsed-left-width; 
+    }
+    .msp-layout-main, .msp-layout-top, .msp-layout-bottom {
+        left: $collapsed-left-width;
+    }    
+}
+
+.msp-layout-hide-bottom {
+    .msp-layout-bottom {
+        display: none;
+    }    
+    .msp-layout-main {
+        bottom: 0;
+    }    
+}
+
+.msp-layout-hide-top {
+    .msp-layout-top {
+        display: none;
+    }    
+    .msp-layout-main {
+        top: 0;
+    }    
 }