molstar 3.0.0-dev.4 → 3.0.0-dev.8

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

@@ -1,99 +1,99 @@
-.msp-task-state {
-
-    line-height: $row-height;
-    //height: $row-height;
-    //position: relative;
-    //margin-top: 1px;
-
-    > span {
-        @include non-selectable;
-        //display: inline-block;
-        //padding: 0 $control-spacing;
-    }
-}
-
-.msp-overlay-tasks {
-    position: absolute;
-    display: flex;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    height: 100%;
-    width: 100%;
-    z-index: 1000;
-    justify-content: center;
-    align-items: center;
-    background: rgba(0, 0, 0, 0.25);
-
-    .msp-task-state {
-        $size: $row-height;
-
-        > div {
-            height: $size;
-            margin-top: 1px;
-            position: relative;
-            width: 100%;
-            background: $default-background;
-
-            > div {
-                height: $size;
-                line-height: $size;
-                display: inline-block;
-                padding: 0 ($control-spacing);
-                @include non-selectable;
-                white-space: nowrap;
-                background: $default-background;
-                position: absolute;
-            }
-
-            > button {
-                display: inline-block;
-                margin-top: -3px;
-                // font-size: 140%;
-            }
-        }
-    }
-}
-
-/* background */
-
-.msp-background-tasks {
-    position: absolute;
-    left: 0;
-    bottom: 0;
-    z-index: 1000;
-
-    .msp-task-state {
-        $size: $row-height;
-
-        > div {
-            height: $size;
-            margin-top: 1px;
-            position: relative;
-            width: 100%;
-            background: $default-background;
-
-            > div {
-                height: $size;
-                line-height: $size;
-                display: inline-block;
-                padding: 0 ($control-spacing);
-                @include non-selectable;
-                white-space: nowrap;
-                background: $default-background;
-                position: absolute;
-            }
-
-            > button {
-                display: inline-block;
-                margin-top: -3px;
-                // font-size: 140%;
-            }
-        }
-    }
-}
-
-// .msp-background-tasks .msp-task-state {
-//     color:
-// }
+.msp-task-state {
+
+    line-height: $row-height;
+    //height: $row-height;
+    //position: relative;
+    //margin-top: 1px;
+
+    > span {
+        @include non-selectable;
+        //display: inline-block;
+        //padding: 0 $control-spacing;
+    }
+}
+
+.msp-overlay-tasks {
+    position: absolute;
+    display: flex;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 1000;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.25);
+
+    .msp-task-state {
+        $size: $row-height;
+
+        > div {
+            height: $size;
+            margin-top: 1px;
+            position: relative;
+            width: 100%;
+            background: $default-background;
+
+            > div {
+                height: $size;
+                line-height: $size;
+                display: inline-block;
+                padding: 0 ($control-spacing);
+                @include non-selectable;
+                white-space: nowrap;
+                background: $default-background;
+                position: absolute;
+            }
+
+            > button {
+                display: inline-block;
+                margin-top: -3px;
+                // font-size: 140%;
+            }
+        }
+    }
+}
+
+/* background */
+
+.msp-background-tasks {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    z-index: 1000;
+
+    .msp-task-state {
+        $size: $row-height;
+
+        > div {
+            height: $size;
+            margin-top: 1px;
+            position: relative;
+            width: 100%;
+            background: $default-background;
+
+            > div {
+                height: $size;
+                line-height: $size;
+                display: inline-block;
+                padding: 0 ($control-spacing);
+                @include non-selectable;
+                white-space: nowrap;
+                background: $default-background;
+                position: absolute;
+            }
+
+            > button {
+                display: inline-block;
+                margin-top: -3px;
+                // font-size: 140%;
+            }
+        }
+    }
+}
+
+// .msp-background-tasks .msp-task-state {
+//     color:
+// }

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

@@ -1,84 +1,84 @@
-
-@use "sass:math";
-
-.msp-toast-container {
-    position: relative;
-    // bottom: $control-spacing;    
-    // right: $control-spacing;
-    // margin-left: $control-spacing;
-    z-index: 1001;
-
-    .msp-toast-entry {
-        color: $font-color;
-        background: $control-background;
-        position: relative;
-        float: right;
-        min-height: $row-height;
-        margin-top: $control-spacing;
-        border: 1px solid $border-color;
-        display: table;
-
-        .msp-toast-title {
-            height: 100%;
-            line-height: $row-height;
-            padding: 0 $control-spacing;
-            background: $default-background;
-            font-weight: bold;
-            display: table-cell;
-
-            -webkit-user-select: none; /* Chrome/Safari */        
-            -moz-user-select: none; /* Firefox */
-            -ms-user-select: none; /* IE10+ */
-
-            /* Rules below not implemented in browsers yet */
-            -o-user-select: none;
-            user-select: none;
-            
-            font-weight: light;
-            
-            cursor: pointer;
-        }
-
-        .msp-toast-message {
-            padding: $info-vertical-padding ($control-spacing + $row-height) $info-vertical-padding $control-spacing;
-            display: table-cell;
-
-            a {
-                text-decoration: none;
-                color: $msp-btn-commit-on-font-color;
-                font-weight: bold;
-
-                &:hover {
-                    text-decoration: underline;
-                    color: $msp-btn-commit-on-hover-font-color;
-                }
-
-                &:active, &:focus {
-                    color: $msp-btn-commit-on-font-color;
-                    outline-offset: 0;
-                    outline: none;    
-                }
-            }
-        }
-
-        .msp-toast-hide {
-            position: absolute;
-            width: $row-height + $control-spacing;
-            right: 0;
-            top: 0;
-            bottom: 0;
-
-            .msp-btn-icon {
-                background: transparent;
-                position: absolute;
-                top: 1px;
-                right: 0;
-                left: 0;
-                bottom: 0;
-                width: 100%;
-                text-align: right;
-                padding-right: math.div($control-spacing, 2);
-            }            
-        }
-    }
+
+@use "sass:math";
+
+.msp-toast-container {
+    position: relative;
+    // bottom: $control-spacing;    
+    // right: $control-spacing;
+    // margin-left: $control-spacing;
+    z-index: 1001;
+
+    .msp-toast-entry {
+        color: $font-color;
+        background: $control-background;
+        position: relative;
+        float: right;
+        min-height: $row-height;
+        margin-top: $control-spacing;
+        border: 1px solid $border-color;
+        display: table;
+
+        .msp-toast-title {
+            height: 100%;
+            line-height: $row-height;
+            padding: 0 $control-spacing;
+            background: $default-background;
+            font-weight: bold;
+            display: table-cell;
+
+            -webkit-user-select: none; /* Chrome/Safari */        
+            -moz-user-select: none; /* Firefox */
+            -ms-user-select: none; /* IE10+ */
+
+            /* Rules below not implemented in browsers yet */
+            -o-user-select: none;
+            user-select: none;
+            
+            font-weight: light;
+            
+            cursor: pointer;
+        }
+
+        .msp-toast-message {
+            padding: $info-vertical-padding ($control-spacing + $row-height) $info-vertical-padding $control-spacing;
+            display: table-cell;
+
+            a {
+                text-decoration: none;
+                color: $msp-btn-commit-on-font-color;
+                font-weight: bold;
+
+                &:hover {
+                    text-decoration: underline;
+                    color: $msp-btn-commit-on-hover-font-color;
+                }
+
+                &:active, &:focus {
+                    color: $msp-btn-commit-on-font-color;
+                    outline-offset: 0;
+                    outline: none;    
+                }
+            }
+        }
+
+        .msp-toast-hide {
+            position: absolute;
+            width: $row-height + $control-spacing;
+            right: 0;
+            top: 0;
+            bottom: 0;
+
+            .msp-btn-icon {
+                background: transparent;
+                position: absolute;
+                top: 1px;
+                right: 0;
+                left: 0;
+                bottom: 0;
+                width: 100%;
+                text-align: right;
+                padding-right: math.div($control-spacing, 2);
+            }            
+        }
+    }
 }

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

@@ -1,164 +1,164 @@
-.msp-transformer {
-
-    .msp-entity-badge {
-        position: absolute;
-        top: 0;
-        right: 0;
-        height: $row-height;
-        line-height: $row-height;
-        width: $row-height;
-    }
-}
-
-.msp-layout-right, .msp-layout-left {
-    background: $control-background;
-}
-
-.msp-transformer-wrapper {
-    position: relative;
-}
-
-.msp-transformer-wrapper {
-
-    .msp-entity-badge {
-        left: 0;
-        top: 0;
-    }
-
-    &:first-child {
-        .msp-panel-description-content {
-            top: $row-height + 1;
-        }
-    }
-
-    &:not(:first-child) {
-        .msp-panel-description-content {
-            bottom: $row-height + 1;
-        }
-    }
-}
-
-.msp-transform-wrapper {
-    margin-bottom: $control-spacing;
-}
-
-.msp-transform-wrapper-collapsed {
-    margin-bottom: 1px;
-}
-
-.msp-transform-update-wrapper {
-    margin-bottom: 1px;
-}
-
-.msp-transform-update-wrapper-collapsed {
-    margin-bottom: 1px;
-}
-
-.msp-transform-update-wrapper, .msp-transform-update-wrapper-collapsed {
-    > .msp-transform-header > button {
-        text-align: left;
-        padding-left: $row-height;
-        line-height: 24px;
-        background: color-lower-contrast($control-background, 4%); // $control-background; // color-lower-contrast($default-background, 4%);
-        // font-weight: bold;
-    }
-}
-
-.msp-transform-wrapper > .msp-transform-header > button {
-    text-align: left;
-    background: $default-background; // color-lower-contrast($default-background, 4%);
-    font-weight: bold;
-    padding-right: 5px;
-}
-
-.msp-transform-header {
-    position: relative;
-    // border-top: 1px solid $entity-color-Behaviour; // TODO: separate color
-
-    // > button {
-    //     text-align: left;
-    //     padding-left: $row-height;
-    //     background: $control-background; // color-lower-contrast($default-background, 4%);
-    //     font-weight: bold;
-    // }
-
-    > button > small {
-        font-weight: normal;
-        float: right;
-    }
-    
-    > button {
-        > span:first-child {
-            margin-right: 10px;
-        }
-    }
-
-    > button:hover {
-        color: color-lower-contrast($font-color, 15%);
-    }
-}
-
-.msp-transform-header-brand {
-    // padding-left: 42px;
-    margin-bottom: -1px;
-    svg {
-        fill: $font-color;
-        stroke: $font-color;
-    }
-    // > div {
-    //     position: absolute;
-    //     height: 32px;
-    //     line-height: 32px;
-    //     width: 32px;
-    //     top: 0;
-    //     left: 0;
-    //     text-align: center;
-    //     color: #eceff3;
-    //     fill: #eceff3;
-    //     stroke: #eceff3;
-    //     font-size: 85%;
-    // }
-}
-
-.msp-transform-default-params {
-    background: $default-background;
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: $row-height;
-    padding: 0;
-}
-
-.msp-transform-default-params:hover {
-    background: color-lower-contrast($default-background, 20%);
-}
-
-.msp-transform-apply-wrap {
-    position: relative;
-    margin-top: 1px;
-    width: 100%;
-    height: $row-height;
-}
-
-.msp-transform-refresh {
-    width: $control-label-width + $control-spacing - $row-height - 1;
-    margin-left: $row-height + 1;
-    background: $default-background;
-    text-align: right;
-}
-
-.msp-transform-apply {
-    display: block;
-    position: absolute;
-    left: $control-label-width + $control-spacing;
-    right: 0;
-    top: 0;
-}
-
-.msp-transform-apply-wider {
-    margin-left: $row-height + 1px;
-}
-
-.msp-data-beh {
-    margin: $control-spacing 0 !important;
+.msp-transformer {
+
+    .msp-entity-badge {
+        position: absolute;
+        top: 0;
+        right: 0;
+        height: $row-height;
+        line-height: $row-height;
+        width: $row-height;
+    }
+}
+
+.msp-layout-right, .msp-layout-left {
+    background: $control-background;
+}
+
+.msp-transformer-wrapper {
+    position: relative;
+}
+
+.msp-transformer-wrapper {
+
+    .msp-entity-badge {
+        left: 0;
+        top: 0;
+    }
+
+    &:first-child {
+        .msp-panel-description-content {
+            top: $row-height + 1;
+        }
+    }
+
+    &:not(:first-child) {
+        .msp-panel-description-content {
+            bottom: $row-height + 1;
+        }
+    }
+}
+
+.msp-transform-wrapper {
+    margin-bottom: $control-spacing;
+}
+
+.msp-transform-wrapper-collapsed {
+    margin-bottom: 1px;
+}
+
+.msp-transform-update-wrapper {
+    margin-bottom: 1px;
+}
+
+.msp-transform-update-wrapper-collapsed {
+    margin-bottom: 1px;
+}
+
+.msp-transform-update-wrapper, .msp-transform-update-wrapper-collapsed {
+    > .msp-transform-header > button {
+        text-align: left;
+        padding-left: $row-height;
+        line-height: 24px;
+        background: color-lower-contrast($control-background, 4%); // $control-background; // color-lower-contrast($default-background, 4%);
+        // font-weight: bold;
+    }
+}
+
+.msp-transform-wrapper > .msp-transform-header > button {
+    text-align: left;
+    background: $default-background; // color-lower-contrast($default-background, 4%);
+    font-weight: bold;
+    padding-right: 5px;
+}
+
+.msp-transform-header {
+    position: relative;
+    // border-top: 1px solid $entity-color-Behaviour; // TODO: separate color
+
+    // > button {
+    //     text-align: left;
+    //     padding-left: $row-height;
+    //     background: $control-background; // color-lower-contrast($default-background, 4%);
+    //     font-weight: bold;
+    // }
+
+    > button > small {
+        font-weight: normal;
+        float: right;
+    }
+    
+    > button {
+        > span:first-child {
+            margin-right: 10px;
+        }
+    }
+
+    > button:hover {
+        color: color-lower-contrast($font-color, 15%);
+    }
+}
+
+.msp-transform-header-brand {
+    // padding-left: 42px;
+    margin-bottom: -1px;
+    svg {
+        fill: $font-color;
+        stroke: $font-color;
+    }
+    // > div {
+    //     position: absolute;
+    //     height: 32px;
+    //     line-height: 32px;
+    //     width: 32px;
+    //     top: 0;
+    //     left: 0;
+    //     text-align: center;
+    //     color: #eceff3;
+    //     fill: #eceff3;
+    //     stroke: #eceff3;
+    //     font-size: 85%;
+    // }
+}
+
+.msp-transform-default-params {
+    background: $default-background;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: $row-height;
+    padding: 0;
+}
+
+.msp-transform-default-params:hover {
+    background: color-lower-contrast($default-background, 20%);
+}
+
+.msp-transform-apply-wrap {
+    position: relative;
+    margin-top: 1px;
+    width: 100%;
+    height: $row-height;
+}
+
+.msp-transform-refresh {
+    width: $control-label-width + $control-spacing - $row-height - 1;
+    margin-left: $row-height + 1;
+    background: $default-background;
+    text-align: right;
+}
+
+.msp-transform-apply {
+    display: block;
+    position: absolute;
+    left: $control-label-width + $control-spacing;
+    right: 0;
+    top: 0;
+}
+
+.msp-transform-apply-wider {
+    margin-left: $row-height + 1px;
+}
+
+.msp-data-beh {
+    margin: $control-spacing 0 !important;
 }