mirror of
https://github.com/molstar/molstar.git
synced 2026-06-04 13:30:24 +08:00
Fix SASS @import depraction warnings (#1534)
* refactor SASS to not use @import * changelog * typo
This commit is contained in:
David Sehnal
GitHub
@@ -17,6 +17,7 @@ Note that since we don't clearly distinguish between a public and private interf
|
||||
- Use `isolatedModules` tsconfig flag
|
||||
- Fix TurboPack build when using ES6 modules
|
||||
- Support `pickingAlphaThreshold` when `xrayShaded` is enabled
|
||||
- Refactor SCSS to not use `@import` (fixes deprecation warnings)
|
||||
|
||||
## [v4.17.0] - 2025-05-22
|
||||
- Remove `xhr2` dependency for NodeJS, use `fetch`
|
||||
|
||||
@@ -141,7 +141,7 @@ export async function loadStructure(plugin: PluginUIContext, url: string, option
|
||||
```
|
||||
- Create `src/style.scss`:
|
||||
```scss
|
||||
@import '../node_modules/molstar/lib/mol-plugin-ui/skin/light.scss';
|
||||
@use '../node_modules/molstar/lib/mol-plugin-ui/skin/light.scss';
|
||||
```
|
||||
- Create `build/ui.html`:
|
||||
```html
|
||||
|
||||
@@ -1,32 +1,28 @@
|
||||
@use "sass:color";
|
||||
|
||||
$default-background: #2D3E50;
|
||||
$font-color: #EDF1F2;
|
||||
$hover-font-color: #3B9AD9;
|
||||
$entity-current-font-color: #FFFFFF;
|
||||
$msp-btn-remove-background: #BF3A31;
|
||||
$msp-btn-remove-hover-font-color:#ffffff;
|
||||
$msp-btn-commit-on-font-color: #ffffff;
|
||||
$entity-badge-font-color: #ccd4e0;
|
||||
@use '../../mol-plugin-ui/skin/base/colors' with (
|
||||
$default-background: #2D3E50,
|
||||
$font-color: #EDF1F2,
|
||||
$hover-font-color: #3B9AD9,
|
||||
$entity-current-font-color: #FFFFFF,
|
||||
$msp-btn-remove-background: #BF3A31,
|
||||
$msp-btn-remove-hover-font-color:#ffffff,
|
||||
$msp-btn-commit-on-font-color: #ffffff,
|
||||
$entity-badge-font-color: #ccd4e0,
|
||||
|
||||
// used in LOG
|
||||
$log-message: #0CCA5D;
|
||||
$log-info: #5E3673;
|
||||
$log-warning: #FCC937;
|
||||
$log-error: #FD354B;
|
||||
// used in LOG
|
||||
$log-message: #0CCA5D,
|
||||
$log-info: #5E3673,
|
||||
$log-warning: #FCC937,
|
||||
$log-error: #FD354B,
|
||||
|
||||
$logo-background: rgba(0,0,0,0.75);
|
||||
$logo-background: rgba(0,0,0,0.75),
|
||||
|
||||
@function color-lower-contrast($color, $amount) {
|
||||
@return color.adjust($color, $lightness: -$amount, $space: hsl);
|
||||
}
|
||||
$color-adjust-sign: -1,
|
||||
);
|
||||
|
||||
@function color-increase-contrast($color, $amount) {
|
||||
@return color.adjust($color, $lightness: $amount, $space: hsl);
|
||||
}
|
||||
|
||||
@import '../../mol-plugin-ui/skin/base/base';
|
||||
@import '../../mol-plugin-ui/skin/base/variables';
|
||||
@use '../../mol-plugin-ui/skin/base/base';
|
||||
@use '../../mol-plugin-ui/skin/base/vars' as *;
|
||||
|
||||
a {
|
||||
color: $font-color;
|
||||
|
||||
28
src/mol-plugin-ui/skin/base/_colors.scss
Normal file
28
src/mol-plugin-ui/skin/base/_colors.scss
Normal file
@@ -0,0 +1,28 @@
|
||||
@use "sass:color";
|
||||
|
||||
$default-background: color.invert(#111318, $space: rgb) !default;
|
||||
$font-color: color.invert(#ccd4e0, $space: rgb) !default;
|
||||
$hover-font-color: color.invert(#51A2FB, $space: rgb) !default;
|
||||
$entity-current-font-color: color.invert(#68BEFD, $space: rgb) !default;
|
||||
$msp-btn-commit-on-font-color: color.invert(#68BEFD, $space: rgb) !default;
|
||||
$entity-badge-font-color: color.adjust(#ccd4e0, $lightness: 10%) !default;
|
||||
$msp-btn-remove-background: #DE0A28 !default;
|
||||
$msp-btn-remove-hover-font-color:#F2F4F7 !default;
|
||||
|
||||
// used in LOG
|
||||
$log-message: #0CCA5D !default;
|
||||
$log-info: #5E3673 !default;
|
||||
$log-warning: #FCC937 !default;
|
||||
$log-error: #FD354B !default;
|
||||
|
||||
$logo-background: color.invert(#111318, $space: rgb) !default;
|
||||
|
||||
$color-adjust-sign: 1 !default;
|
||||
|
||||
@function color-lower-contrast($color, $amount) {
|
||||
@return color.adjust($color, $lightness: $color-adjust-sign * $amount, $space: hsl);
|
||||
}
|
||||
|
||||
@function color-increase-contrast($color, $amount) {
|
||||
@return color.adjust($color, $lightness: -$color-adjust-sign * $amount, $space: hsl);
|
||||
}
|
||||
@@ -1,4 +1,6 @@
|
||||
@use "sass:color";
|
||||
@use "colors" as *;
|
||||
@forward "colors";
|
||||
|
||||
// measures
|
||||
|
||||
@@ -1,4 +1,11 @@
|
||||
|
||||
@use "sass:meta";
|
||||
@use 'vars' as *;
|
||||
@use 'normalize' as *;
|
||||
@use 'layout' as *;
|
||||
@use 'ui' as *;
|
||||
@use 'logo' as *;
|
||||
|
||||
@mixin user-select($select) {
|
||||
-webkit-user-select: $select;
|
||||
-moz-user-select: $select;
|
||||
@@ -17,13 +24,11 @@
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
@import 'variables';
|
||||
@include normalize;
|
||||
|
||||
@import "normalize";
|
||||
|
||||
@import 'layout';
|
||||
@import 'ui';
|
||||
@import 'logo';
|
||||
@include layout;
|
||||
@include ui;
|
||||
@include logo;
|
||||
|
||||
.msp-plugin-content {
|
||||
color: $font-color;
|
||||
|
||||
17
src/mol-plugin-ui/skin/base/common.scss
Normal file
17
src/mol-plugin-ui/skin/base/common.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
@mixin non-selectable {
|
||||
-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;
|
||||
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@mixin user-select($select) {
|
||||
-webkit-user-select: $select;
|
||||
-moz-user-select: $select;
|
||||
-ms-user-select: $select; // IE10+
|
||||
user-select: $select;
|
||||
}
|
||||
@@ -1,6 +1,31 @@
|
||||
@use '../vars' as *;
|
||||
@use '../common' as *;
|
||||
|
||||
|
||||
.msp-form-control {
|
||||
@mixin msp-btn($name, $font, $bg) {
|
||||
|
||||
.msp-btn-#{$name},
|
||||
.msp-btn-#{$name}:active,
|
||||
.msp-btn-#{$name}:focus {
|
||||
color: $font;
|
||||
background: $bg;
|
||||
}
|
||||
|
||||
.msp-btn-#{$name}:hover {
|
||||
color: $hover-font-color;
|
||||
background: color-lower-contrast($bg, 2.5%);
|
||||
}
|
||||
|
||||
.msp-btn-#{$name}[disabled],
|
||||
.msp-btn-#{$name}[disabled]:hover,
|
||||
.msp-btn-#{$name}[disabled]:active,
|
||||
.msp-btn-#{$name}[disabled]:focus {
|
||||
color: color-lower-contrast($font, 1%);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin controls-base {
|
||||
.msp-form-control {
|
||||
display: block;
|
||||
width: 100%;
|
||||
background: $msp-form-control-background;
|
||||
@@ -22,8 +47,17 @@
|
||||
color: color-lower-contrast($font-color, 33%);
|
||||
opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
|
||||
}
|
||||
&:-ms-input-placeholder { color: color-lower-contrast($font-color, 33%); } // Internet Explorer 10+
|
||||
&::-webkit-input-placeholder { color: color-lower-contrast($font-color, 33%); } // Safari and Chrome
|
||||
|
||||
&:-ms-input-placeholder {
|
||||
color: color-lower-contrast($font-color, 33%);
|
||||
}
|
||||
|
||||
// Internet Explorer 10+
|
||||
&::-webkit-input-placeholder {
|
||||
color: color-lower-contrast($font-color, 33%);
|
||||
}
|
||||
|
||||
// Safari and Chrome
|
||||
|
||||
&:hover {
|
||||
color: $hover-font-color;
|
||||
@@ -33,7 +67,8 @@
|
||||
outline: 1px solid color-increase-contrast($msp-form-control-background, 20%) !important;
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
&:active,
|
||||
&:focus {
|
||||
color: $font-color;
|
||||
background-color: $msp-form-control-background;
|
||||
border: none;
|
||||
@@ -52,9 +87,9 @@
|
||||
background: $default-background;
|
||||
opacity: 0.35;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-btn {
|
||||
.msp-btn {
|
||||
@extend .msp-form-control;
|
||||
|
||||
display: inline-block;
|
||||
@@ -77,18 +112,21 @@
|
||||
background: $default-background;
|
||||
opacity: 0.35;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-btn-block {
|
||||
.msp-btn-block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-btn, .msp-btn:active, .msp-btn-link:focus, .msp-btn:hover {
|
||||
.msp-btn,
|
||||
.msp-btn:active,
|
||||
.msp-btn-link:focus,
|
||||
.msp-btn:hover {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-material-icon {
|
||||
.msp-material-icon {
|
||||
svg {
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
@@ -101,23 +139,23 @@
|
||||
flex-shrink: 0;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-btn-block {
|
||||
> .msp-material-icon {
|
||||
.msp-btn-block {
|
||||
>.msp-material-icon {
|
||||
margin-left: 0;
|
||||
margin-right: .4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-btn-childless {
|
||||
> .msp-material-icon {
|
||||
.msp-btn-childless {
|
||||
>.msp-material-icon {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-btn-icon {
|
||||
.msp-btn-icon {
|
||||
border: none;
|
||||
height: $row-height;
|
||||
width: $row-height;
|
||||
@@ -133,12 +171,14 @@
|
||||
outline: 1px solid color-increase-contrast($msp-form-control-background, 20%) !important;
|
||||
}
|
||||
|
||||
&[disabled], &[disabled]:hover, &[disabled]:active {
|
||||
&[disabled],
|
||||
&[disabled]:hover,
|
||||
&[disabled]:active {
|
||||
color: $msp-btn-link-toggle-off-font-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-btn-icon-small {
|
||||
.msp-btn-icon-small {
|
||||
border: none;
|
||||
height: $row-height;
|
||||
width: 20px;
|
||||
@@ -155,12 +195,14 @@
|
||||
outline: 1px solid color-increase-contrast($msp-form-control-background, 20%) !important;
|
||||
}
|
||||
|
||||
&[disabled], &[disabled]:hover, &[disabled]:active {
|
||||
&[disabled],
|
||||
&[disabled]:hover,
|
||||
&[disabled]:active {
|
||||
color: $msp-btn-link-toggle-off-font-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-btn-link {
|
||||
.msp-btn-link {
|
||||
font-weight: normal;
|
||||
border-radius: 0;
|
||||
|
||||
@@ -173,19 +215,23 @@
|
||||
-webkit-box-shadow: none; // iOS <4.3 & Android <4.1
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&,
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&[disabled],
|
||||
fieldset[disabled] & {
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
@@ -195,93 +241,82 @@
|
||||
.msp-icon {
|
||||
font-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-btn-link, .msp-btn-link:active, .msp-btn-link:focus {
|
||||
.msp-btn-link,
|
||||
.msp-btn-link:active,
|
||||
.msp-btn-link:focus {
|
||||
color: $msp-btn-link-font-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-btn-link:hover {
|
||||
.msp-btn-link:hover {
|
||||
color: $hover-font-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-btn-link-toggle-on {
|
||||
.msp-btn-link-toggle-on {
|
||||
color: $msp-btn-link-toggle-on-font-color;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-btn-link-toggle-off, .msp-btn-link-toggle-off:active, .msp-btn-link-toggle-off:focus {
|
||||
.msp-btn-link-toggle-off,
|
||||
.msp-btn-link-toggle-off:active,
|
||||
.msp-btn-link-toggle-off:focus {
|
||||
color: $msp-btn-link-toggle-off-font-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-btn-link-toggle-on:hover {
|
||||
.msp-btn-link-toggle-on:hover {
|
||||
color: $msp-btn-link-toggle-on-hover-font-color !important;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-btn-link-toggle-off:hover {
|
||||
.msp-btn-link-toggle-off:hover {
|
||||
color: $msp-btn-link-toggle-off-hover-font-color !important;
|
||||
}
|
||||
|
||||
@mixin msp-btn($name, $font, $bg) {
|
||||
.msp-btn-#{$name}, .msp-btn-#{$name}:active, .msp-btn-#{$name}:focus {
|
||||
color: $font;
|
||||
background: $bg;
|
||||
}
|
||||
.msp-btn-#{$name}:hover {
|
||||
color: $hover-font-color;
|
||||
background: color-lower-contrast($bg, 2.5%);
|
||||
}
|
||||
|
||||
.msp-btn-#{$name}[disabled], .msp-btn-#{$name}[disabled]:hover,
|
||||
.msp-btn-#{$name}[disabled]:active, .msp-btn-#{$name}[disabled]:focus {
|
||||
color: color-lower-contrast($font, 1%);
|
||||
}
|
||||
}
|
||||
// @include msp-btn('remove', $msp-btn-remove-font-color, $msp-btn-remove-background);
|
||||
@include msp-btn('action', $font-color, $msp-btn-action-background);
|
||||
@include msp-btn('commit-on', $msp-btn-commit-on-font-color, $msp-btn-commit-on-background);
|
||||
@include msp-btn('commit-off', $msp-btn-commit-off-font-color, $msp-btn-commit-off-background);
|
||||
|
||||
// @include msp-btn('remove', $msp-btn-remove-font-color, $msp-btn-remove-background);
|
||||
@include msp-btn('action', $font-color, $msp-btn-action-background);
|
||||
@include msp-btn('commit-on', $msp-btn-commit-on-font-color, $msp-btn-commit-on-background);
|
||||
@include msp-btn('commit-off', $msp-btn-commit-off-font-color, $msp-btn-commit-off-background);
|
||||
|
||||
.msp-btn-remove:hover {
|
||||
.msp-btn-remove:hover {
|
||||
color: $msp-btn-remove-hover-font-color;
|
||||
}
|
||||
.msp-btn-commit-on:hover {
|
||||
color: $msp-btn-commit-on-hover-font-color;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-btn-action {
|
||||
.msp-btn-commit-on:hover {
|
||||
color: $msp-btn-commit-on-hover-font-color;
|
||||
}
|
||||
|
||||
.msp-btn-action {
|
||||
height: $row-height;
|
||||
line-height: $row-height;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
input[type="file"] {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
// Make range inputs behave like textual form controls
|
||||
input[type="range"] {
|
||||
// Make range inputs behave like textual form controls
|
||||
input[type="range"] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Make multiple select elements height not fixed
|
||||
select[multiple],
|
||||
select[size] {
|
||||
// Make multiple select elements height not fixed
|
||||
select[multiple],
|
||||
select[size] {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Reset height for `textarea`s
|
||||
textarea.msp-form-control {
|
||||
// Reset height for `textarea`s
|
||||
textarea.msp-form-control {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-control-top-offset {
|
||||
.msp-control-top-offset {
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-btn-commit {
|
||||
.msp-btn-commit {
|
||||
text-align: right;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
@@ -298,9 +333,9 @@ textarea.msp-form-control {
|
||||
width: $row-height;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select.msp-form-control {
|
||||
select.msp-form-control {
|
||||
background: none;
|
||||
background-color: $msp-form-control-background;
|
||||
background-size: 8px 12px;
|
||||
@@ -308,22 +343,22 @@ select.msp-form-control {
|
||||
background-repeat: no-repeat;
|
||||
background-position: right $control-spacing center;
|
||||
padding-right: ($row-height - 8px);
|
||||
}
|
||||
}
|
||||
|
||||
select.msp-form-control:-moz-focusring {
|
||||
select.msp-form-control:-moz-focusring {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 $font-color;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-default-bg {
|
||||
.msp-default-bg {
|
||||
background: $default-background;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-transparent-bg {
|
||||
.msp-transparent-bg {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-no-hover-outline {
|
||||
.msp-no-hover-outline {
|
||||
&:hover {
|
||||
color: $hover-font-color;
|
||||
background-color: inherit;
|
||||
@@ -331,8 +366,9 @@ select.msp-form-control:-moz-focusring {
|
||||
outline-offset: 0 !important;
|
||||
outline: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-icon-inline {
|
||||
.msp-icon-inline {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
@@ -1,13 +1,19 @@
|
||||
@use "sass:math";
|
||||
@use "sass:color";
|
||||
|
||||
.msp-control-row {
|
||||
@use '../vars' as *;
|
||||
@use '../common' as *;
|
||||
|
||||
@mixin controls {
|
||||
.msp-control-row {
|
||||
position: relative;
|
||||
height: $row-height;
|
||||
background: $default-background;
|
||||
margin-top: 1px;
|
||||
|
||||
select, button, input[type=text] {
|
||||
select,
|
||||
button,
|
||||
input[type=text] {
|
||||
@extend .msp-form-control;
|
||||
}
|
||||
|
||||
@@ -16,7 +22,8 @@
|
||||
@extend .msp-btn-block;
|
||||
}
|
||||
|
||||
> span.msp-control-row-label, > button.msp-control-button-label {
|
||||
>span.msp-control-row-label,
|
||||
>button.msp-control-button-label {
|
||||
line-height: $row-height;
|
||||
display: block;
|
||||
width: $control-label-width + $control-spacing;
|
||||
@@ -31,7 +38,7 @@
|
||||
@include non-selectable;
|
||||
}
|
||||
|
||||
> button.msp-control-button-label {
|
||||
>button.msp-control-button-label {
|
||||
background: $default-background;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -40,7 +47,7 @@
|
||||
background: $default-background;
|
||||
}
|
||||
|
||||
> div.msp-control-row-ctrl {
|
||||
>div.msp-control-row-ctrl {
|
||||
position: absolute;
|
||||
left: $control-label-width + $control-spacing;
|
||||
top: 0;
|
||||
@@ -48,7 +55,7 @@
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
> div.msp-control-row-text {
|
||||
>div.msp-control-row-text {
|
||||
position: absolute;
|
||||
left: $control-label-width + $control-spacing;
|
||||
top: 0;
|
||||
@@ -59,54 +66,54 @@
|
||||
padding: 0 $control-spacing;
|
||||
}
|
||||
|
||||
> div {
|
||||
>div {
|
||||
background: $msp-form-control-background;
|
||||
}
|
||||
|
||||
> .msp-flex-row {
|
||||
>.msp-flex-row {
|
||||
background: $default-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-control-label-short {
|
||||
> span {
|
||||
.msp-control-label-short {
|
||||
>span {
|
||||
width: $control-label-short-width + $control-spacing !important;
|
||||
}
|
||||
|
||||
> div:nth-child(2) {
|
||||
>div:nth-child(2) {
|
||||
left: $control-label-short-width + $control-spacing !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-control-col-2 {
|
||||
.msp-control-col-2 {
|
||||
float: left;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-control-twoline {
|
||||
.msp-control-twoline {
|
||||
height: 2 * $row-height !important;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-control-group {
|
||||
.msp-control-group {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-toggle-button {
|
||||
.msp-toggle-button {
|
||||
.msp-icon {
|
||||
display: inline-block;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
> div > button:hover {
|
||||
>div>button:hover {
|
||||
border-color: color-increase-contrast($msp-form-control-background, 5%) !important;
|
||||
border: none;
|
||||
outline-offset: -1px !important;
|
||||
outline: 1px solid color-increase-contrast($msp-form-control-background, 20%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-slider {
|
||||
> div:first-child {
|
||||
.msp-slider {
|
||||
>div:first-child {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 18px;
|
||||
@@ -114,7 +121,8 @@
|
||||
right: 62px;
|
||||
display: flex;
|
||||
}
|
||||
> div:last-child {
|
||||
|
||||
>div:last-child {
|
||||
position: absolute;
|
||||
height: $row-height;
|
||||
line-height: $row-height;
|
||||
@@ -135,10 +143,10 @@
|
||||
// input[type=range] {
|
||||
// width: 100%;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.msp-slider2 {
|
||||
> div:first-child {
|
||||
.msp-slider2 {
|
||||
>div:first-child {
|
||||
position: absolute;
|
||||
height: $row-height;
|
||||
line-height: $row-height;
|
||||
@@ -149,7 +157,8 @@
|
||||
bottom: 0;
|
||||
font-size: 80%;
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
|
||||
>div:nth-child(2) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 35px;
|
||||
@@ -157,7 +166,8 @@
|
||||
right: 37px;
|
||||
display: flex;
|
||||
}
|
||||
> div:last-child {
|
||||
|
||||
>div:last-child {
|
||||
position: absolute;
|
||||
height: $row-height;
|
||||
line-height: $row-height;
|
||||
@@ -179,9 +189,9 @@
|
||||
// input[type=range] {
|
||||
// width: 100%;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.msp-toggle-color-picker {
|
||||
.msp-toggle-color-picker {
|
||||
button {
|
||||
border: $control-spacing solid $msp-form-control-background !important;
|
||||
margin: 0;
|
||||
@@ -209,51 +219,53 @@
|
||||
// background: $msp-form-control-background !important;
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-toggle-color-picker-above {
|
||||
.msp-toggle-color-picker-above {
|
||||
.msp-color-picker {
|
||||
top: -2 * 32px - 16px - math.div($control-spacing, 2);
|
||||
height: 2 * 32px + 16px + math.div($control-spacing, 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-toggle-color-picker-below {
|
||||
.msp-toggle-color-picker-below {
|
||||
.msp-color-picker {
|
||||
top: $row-height;
|
||||
height: 2 * 32px + 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-control-offset {
|
||||
.msp-control-offset {
|
||||
padding-left: $control-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-accent-offset {
|
||||
.msp-accent-offset {
|
||||
padding-left: 1px;
|
||||
margin-left: $control-spacing - 2;
|
||||
border-left: 2px solid $color-accent-orange;
|
||||
}
|
||||
}
|
||||
|
||||
// .msp-accent-offset-right {
|
||||
// margin-left: $control-spacing;
|
||||
// padding-right: 1px;
|
||||
// border-right: 2px solid $color-accent-orange;
|
||||
// }
|
||||
// .msp-accent-offset-right {
|
||||
// margin-left: $control-spacing;
|
||||
// padding-right: 1px;
|
||||
// border-right: 2px solid $color-accent-orange;
|
||||
// }
|
||||
|
||||
.msp-control-group-wrapper {
|
||||
.msp-control-group-wrapper {
|
||||
//border-left-width: math.div($control-spacing, 2);
|
||||
//border-left-style: solid;
|
||||
//border-left-color: color-increase-contrast($default-background, 10%);
|
||||
|
||||
margin-bottom: 0px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
// TODO : get rid of the important
|
||||
.msp-control-group-header {
|
||||
// TODO : get rid of the important
|
||||
.msp-control-group-header {
|
||||
background: $default-background;
|
||||
> button, div {
|
||||
|
||||
>button,
|
||||
div {
|
||||
padding-left: 4px; // math.div($control-spacing, 2) !important;
|
||||
text-align: left;
|
||||
height: 24px !important;
|
||||
@@ -262,31 +274,33 @@
|
||||
background: $default-background !important;
|
||||
color: color-lower-contrast($font-color, 15%);
|
||||
}
|
||||
|
||||
.msp-icon {
|
||||
height: 24px !important;
|
||||
line-height: 24px !important;
|
||||
}
|
||||
> span {
|
||||
|
||||
>span {
|
||||
padding-left: math.div($control-spacing, 2);
|
||||
line-height: math.div(2 * $row-height, 3);
|
||||
font-size: 70%;
|
||||
background: $default-background;
|
||||
color: color-lower-contrast($font-color, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-control-current {
|
||||
.msp-control-current {
|
||||
background: $default-background;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-control-group-footer {
|
||||
.msp-control-group-footer {
|
||||
background: color-increase-contrast($default-background, 5%);
|
||||
height: math.div($control-spacing, 2);
|
||||
font-size: 1px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-control-group-expander {
|
||||
.msp-control-group-expander {
|
||||
display: block;
|
||||
position: absolute;
|
||||
line-height: $row-height;
|
||||
@@ -304,91 +318,91 @@
|
||||
// display: inline-block;
|
||||
font-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-plugin-layout_controls {
|
||||
.msp-plugin-layout_controls {
|
||||
position: absolute;
|
||||
left: $control-spacing;
|
||||
top: $control-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-plugin-layout_controls > button:first-child {
|
||||
.msp-plugin-layout_controls>button:first-child {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-empty-control {
|
||||
.msp-empty-control {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-control .msp-btn-block {
|
||||
.msp-control .msp-btn-block {
|
||||
margin-bottom: 0px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-row-text {
|
||||
.msp-row-text {
|
||||
height: $row-height;
|
||||
position: relative;
|
||||
background: $default-background;
|
||||
margin-top: 1px;
|
||||
|
||||
> div {
|
||||
>div {
|
||||
line-height: $row-height;
|
||||
text-align: center;
|
||||
color: color-lower-contrast($font-color, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-help span {
|
||||
.msp-help span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-help:hover span {
|
||||
.msp-help:hover span {
|
||||
display: inline-block;
|
||||
background: linear-gradient($default-background, color.change($default-background, $alpha: 0.8));
|
||||
}
|
||||
}
|
||||
|
||||
.msp-help-text {
|
||||
.msp-help-text {
|
||||
position: relative;
|
||||
background: $default-background;
|
||||
margin-top: 1px;
|
||||
|
||||
> div {
|
||||
>div {
|
||||
padding: (math.div($control-spacing, 2)) $control-spacing;
|
||||
text-align: left;
|
||||
color: color-lower-contrast($font-color, 15%);
|
||||
}
|
||||
|
||||
> p {
|
||||
>p {
|
||||
padding: (math.div($control-spacing, 2)) $control-spacing;
|
||||
text-align: left;
|
||||
color: color-lower-contrast($font-color, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-help-description {
|
||||
.msp-help-description {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-help-legend {
|
||||
.msp-help-legend {
|
||||
padding-top: $control-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-scale-legend {
|
||||
> div {
|
||||
.msp-scale-legend {
|
||||
>div {
|
||||
width: 100%;
|
||||
height: $control-spacing * 3;
|
||||
|
||||
> span {
|
||||
>span {
|
||||
padding: math.div($control-spacing, 2);
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-table-legend {
|
||||
> div {
|
||||
.msp-table-legend {
|
||||
>div {
|
||||
// min-width: 60px;
|
||||
margin-right: math.div($control-spacing, 2);
|
||||
display: inline-flex;
|
||||
@@ -402,9 +416,9 @@
|
||||
margin: 0 (math.div($control-spacing, 2));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-image-preview {
|
||||
.msp-image-preview {
|
||||
position: relative;
|
||||
background: $default-background;
|
||||
margin-top: 1px;
|
||||
@@ -414,16 +428,16 @@
|
||||
@include user-select(none);
|
||||
}
|
||||
|
||||
> span {
|
||||
>span {
|
||||
margin-top: 6px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 80%;
|
||||
line-height: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-copy-image-wrapper {
|
||||
.msp-copy-image-wrapper {
|
||||
position: relative;
|
||||
|
||||
div {
|
||||
@@ -438,10 +452,12 @@
|
||||
img {
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-control-text-area-wrapper, .msp-text-area-wrapper {
|
||||
.msp-control-text-area-wrapper,
|
||||
.msp-text-area-wrapper {
|
||||
position: relative;
|
||||
|
||||
textarea {
|
||||
border: none;
|
||||
width: 100%;
|
||||
@@ -452,12 +468,13 @@
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-control-text-area-wrapper {
|
||||
.msp-control-text-area-wrapper {
|
||||
height: 2 * $row-height !important;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-text-area-wrapper {
|
||||
.msp-text-area-wrapper {
|
||||
height: 3 * $row-height !important;
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,8 @@
|
||||
@use '../vars' as *;
|
||||
@use '../common' as *;
|
||||
|
||||
.msp-help-row {
|
||||
@mixin help {
|
||||
.msp-help-row {
|
||||
position: relative;
|
||||
height: $row-height;
|
||||
background: $default-background;
|
||||
@@ -7,7 +10,7 @@
|
||||
display: table;
|
||||
width: 100%;
|
||||
|
||||
> span {
|
||||
>span {
|
||||
width: $control-label-width + $control-spacing;
|
||||
text-align: right;
|
||||
padding: $info-vertical-padding $control-spacing;
|
||||
@@ -18,10 +21,11 @@
|
||||
@include non-selectable;
|
||||
}
|
||||
|
||||
> div {
|
||||
>div {
|
||||
background: $msp-form-control-background;
|
||||
position: relative;
|
||||
padding: $info-vertical-padding $control-spacing;
|
||||
display: table-cell;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,15 +1,25 @@
|
||||
.msp-canvas {
|
||||
@use '../vars' as *;
|
||||
@use '../common' as *;
|
||||
|
||||
@mixin line-graph {
|
||||
.msp-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #f3f2ee;
|
||||
|
||||
text {
|
||||
-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
|
||||
-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 */
|
||||
}
|
||||
|
||||
@@ -34,6 +44,7 @@
|
||||
.show {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.hide {
|
||||
visibility: hidden;
|
||||
}
|
||||
@@ -61,8 +72,9 @@
|
||||
fill: #4c66b2;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-canvas:focus {
|
||||
.msp-canvas:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
@@ -1,14 +1,17 @@
|
||||
@use '../vars' as *;
|
||||
@use '../common' as *;
|
||||
|
||||
.msp-log-wrap {
|
||||
@mixin log {
|
||||
.msp-log-wrap {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-log {
|
||||
.msp-log {
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
top: 0;
|
||||
@@ -18,9 +21,9 @@
|
||||
overflow-x: hidden;
|
||||
font-size: 90%;
|
||||
background: $control-background;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-log {
|
||||
.msp-log {
|
||||
font-size: 90%;
|
||||
|
||||
ul {
|
||||
@@ -47,7 +50,8 @@
|
||||
.msp-log-entry {
|
||||
margin-left: $control-label-width;
|
||||
background: color-lower-contrast($control-background, 5%);
|
||||
padding: $info-vertical-padding ($control-spacing + 15px) $info-vertical-padding $control-spacing ;
|
||||
padding: $info-vertical-padding (
|
||||
$control-spacing + 15px) $info-vertical-padding $control-spacing ;
|
||||
}
|
||||
|
||||
.msp-log-timestamp {
|
||||
@@ -64,39 +68,39 @@
|
||||
.msp-log-timestamp small {
|
||||
font-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .msp-log hr {
|
||||
// border-color: $separator-color;
|
||||
// margin: 3px 3px 0 5px;
|
||||
// }
|
||||
// .msp-log hr {
|
||||
// border-color: $separator-color;
|
||||
// margin: 3px 3px 0 5px;
|
||||
// }
|
||||
|
||||
.msp-log .label {
|
||||
.msp-log .label {
|
||||
margin-top: -3px;
|
||||
font-size: 7pt;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-log-entry-badge {
|
||||
.msp-log-entry-badge {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-log-entry-message {
|
||||
.msp-log-entry-message {
|
||||
background: $log-message;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-log-entry-info {
|
||||
.msp-log-entry-info {
|
||||
background: $log-info;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-log-entry-error {
|
||||
.msp-log-entry-error {
|
||||
background: $log-error;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-log-entry-warning {
|
||||
.msp-log-entry-warning {
|
||||
background: $log-warning;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,13 +1,45 @@
|
||||
.msp-description {
|
||||
@use '../vars' as *;
|
||||
@use '../common' as *;
|
||||
|
||||
@mixin type-class-border($name, $color) {
|
||||
.msp-type-class-#{$name} {
|
||||
border-left-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin accent($name, $color) {
|
||||
.msp-accent-color-#{$name} {
|
||||
color: $color;
|
||||
}
|
||||
|
||||
.msp-accent-bg-#{$name} {
|
||||
background: $color;
|
||||
}
|
||||
|
||||
.msp-transform-header-brand-#{$name} {
|
||||
border-bottom: 1px solid $color;
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
border-bottom: 1px solid $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin misc {
|
||||
.msp-description {
|
||||
padding: $control-spacing;
|
||||
font-size: 85%;
|
||||
background: $default-background;
|
||||
text-align: center;
|
||||
//font-style: italic;
|
||||
|
||||
-webkit-user-select: none; /* Chrome/Safari */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* IE10+ */
|
||||
-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;
|
||||
@@ -16,17 +48,17 @@
|
||||
font-weight: light;
|
||||
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-description:not(:first-child) {
|
||||
.msp-description:not(:first-child) {
|
||||
border-top: 1px solid $control-background;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-color-picker input {
|
||||
.msp-color-picker input {
|
||||
color: black !important;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-no-webgl {
|
||||
.msp-no-webgl {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -36,7 +68,7 @@
|
||||
text-align: center;
|
||||
background: $default-background;
|
||||
|
||||
> div {
|
||||
>div {
|
||||
b {
|
||||
font-size: 120%;
|
||||
}
|
||||
@@ -49,14 +81,14 @@
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-loader-msp-btn-file {
|
||||
.msp-loader-msp-btn-file {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-loader-msp-btn-file input[type=file] {
|
||||
.msp-loader-msp-btn-file input[type=file] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
@@ -70,13 +102,13 @@
|
||||
background: white;
|
||||
cursor: inherit;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-controls-section {
|
||||
.msp-controls-section {
|
||||
margin-bottom: $control-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-combined-color-button {
|
||||
.msp-combined-color-button {
|
||||
border: 4px solid $msp-form-control-background !important;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
@@ -89,9 +121,9 @@
|
||||
outline-offset: -1px !important;
|
||||
outline: 1px solid color-increase-contrast($msp-form-control-background, 20%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-combined-color-swatch {
|
||||
.msp-combined-color-swatch {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-gap: 1px;
|
||||
@@ -103,9 +135,9 @@
|
||||
outline: 1px solid color-increase-contrast($msp-form-control-background, 20%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-action-select {
|
||||
.msp-action-select {
|
||||
position: relative;
|
||||
|
||||
select {
|
||||
@@ -116,16 +148,16 @@
|
||||
color: color-lower-contrast($font-color, 15%);
|
||||
}
|
||||
|
||||
> .msp-icon {
|
||||
>.msp-icon {
|
||||
display: block;
|
||||
top: 0;
|
||||
left: $control-spacing;
|
||||
position: absolute;
|
||||
line-height: $row-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-simple-help-section {
|
||||
.msp-simple-help-section {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
margin-top: 5px;
|
||||
@@ -134,9 +166,9 @@
|
||||
font-weight: 500;
|
||||
background: $default-background;
|
||||
color: $font-color;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-left-panel-controls-buttons {
|
||||
.msp-left-panel-controls-buttons {
|
||||
position: absolute;
|
||||
width: $row-height;
|
||||
top: 0;
|
||||
@@ -148,14 +180,14 @@
|
||||
// .msp-btn-link-toggle-on {
|
||||
// border-left: 1px solid $font-color;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.msp-left-panel-controls-buttons-bottom {
|
||||
.msp-left-panel-controls-buttons-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-left-panel-controls-button-data-dirty {
|
||||
.msp-left-panel-controls-button-data-dirty {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
@@ -163,65 +195,65 @@
|
||||
border-radius: 3px;
|
||||
right: 6px;
|
||||
bottom: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-left-panel-controls {
|
||||
.msp-left-panel-controls {
|
||||
.msp-scrollable-container {
|
||||
left: $row-height + 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-mapped-parameter-group {
|
||||
.msp-mapped-parameter-group {
|
||||
position: relative;
|
||||
|
||||
> .msp-control-row:first-child {
|
||||
> div:nth-child(2) {
|
||||
>.msp-control-row:first-child {
|
||||
>div:nth-child(2) {
|
||||
right: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
> button:first-child {
|
||||
>button:first-child {
|
||||
right: 33px;
|
||||
}
|
||||
|
||||
> .msp-btn-icon {
|
||||
>.msp-btn-icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 32px;
|
||||
top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-shape-filled {
|
||||
.msp-shape-filled {
|
||||
fill: $font-color;
|
||||
stroke: $font-color;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-shape-empty {
|
||||
.msp-shape-empty {
|
||||
fill: none;
|
||||
stroke: $font-color;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-no-overflow {
|
||||
.msp-no-overflow {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-25-lower-contrast-text {
|
||||
.msp-25-lower-contrast-text {
|
||||
color: color-lower-contrast($font-color, 25%);
|
||||
}
|
||||
}
|
||||
|
||||
.msp-expandable-group-color-stripe {
|
||||
.msp-expandable-group-color-stripe {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: $row-height - 2px;
|
||||
width: $control-label-width + $control-spacing;
|
||||
height: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-section-header {
|
||||
.msp-section-header {
|
||||
height: $row-height;
|
||||
line-height: $row-height;
|
||||
margin-top: $control-spacing;
|
||||
@@ -234,46 +266,47 @@
|
||||
// border-bottom: 1px solid $color-accent-orange;
|
||||
cursor: default;
|
||||
|
||||
> .msp-icon {
|
||||
>.msp-icon {
|
||||
display: block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
> small {
|
||||
>small {
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-current-header {
|
||||
.msp-current-header {
|
||||
height: $row-height;
|
||||
line-height: $row-height;
|
||||
margin-bottom: $control-spacing;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
background: $default-background;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-flex-row {
|
||||
.msp-flex-row {
|
||||
margin-top: 1px;
|
||||
background: $default-background;
|
||||
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: inherit;
|
||||
height: $row-height;
|
||||
|
||||
> .msp-flex-item {
|
||||
>.msp-flex-item {
|
||||
margin: 0;
|
||||
flex: 1 1 auto;
|
||||
margin-right: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
> .msp-flex-item:last-child {
|
||||
>.msp-flex-item:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
> select, > button {
|
||||
>select,
|
||||
>button {
|
||||
margin: 0;
|
||||
flex: 1 1 auto;
|
||||
margin-right: 1px;
|
||||
@@ -284,60 +317,62 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.msp-btn-icon, .msp-btn-icon-small {
|
||||
.msp-btn-icon,
|
||||
.msp-btn-icon-small {
|
||||
flex: 0 0 32px;
|
||||
max-width: 32px;
|
||||
}
|
||||
|
||||
> select {
|
||||
>select {
|
||||
background: none;
|
||||
|
||||
> option[value = _] {
|
||||
>option[value=_] {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
> select:last-child, > button:last-child {
|
||||
>select:last-child,
|
||||
>button:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
> button.msp-control-button-label {
|
||||
>button.msp-control-button-label {
|
||||
background: $default-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-state-list {
|
||||
.msp-state-list {
|
||||
list-style: none;
|
||||
// margin-top: $control-spacing;
|
||||
|
||||
> li {
|
||||
>li {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
> button:first-child {
|
||||
>button:first-child {
|
||||
text-align: left;
|
||||
border-left: $control-spacing solid color-increase-contrast($default-background, 12%) !important;
|
||||
}
|
||||
|
||||
> div {
|
||||
>div {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-state-image-row {
|
||||
.msp-state-image-row {
|
||||
@extend .msp-flex-row;
|
||||
|
||||
height: $state-image-height;
|
||||
margin-top: 0px;
|
||||
|
||||
> button {
|
||||
>button {
|
||||
height: $state-image-height;
|
||||
padding: 0px;
|
||||
|
||||
> img {
|
||||
>img {
|
||||
min-height: $state-image-height;
|
||||
width: inherit;
|
||||
transform: translateY(-50%);
|
||||
@@ -345,9 +380,9 @@
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-tree-row {
|
||||
.msp-tree-row {
|
||||
position: relative;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1px;
|
||||
@@ -355,7 +390,7 @@
|
||||
|
||||
&-current {
|
||||
.msp-btn-tree-label {
|
||||
> span {
|
||||
>span {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@@ -372,18 +407,18 @@
|
||||
border-left-style: solid;
|
||||
}
|
||||
|
||||
.msp-btn-tree-label > small {
|
||||
.msp-btn-tree-label>small {
|
||||
color: color-lower-contrast($font-color, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-tree-updates-wrapper {
|
||||
.msp-tree-updates-wrapper {
|
||||
.msp-control-group-header:last-child {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-viewport-top-left-controls {
|
||||
.msp-viewport-top-left-controls {
|
||||
position: absolute;
|
||||
left: $control-spacing;
|
||||
top: $control-spacing;
|
||||
@@ -394,7 +429,7 @@
|
||||
margin-right: $control-spacing;
|
||||
background-color: $msp-form-control-background;
|
||||
|
||||
> span {
|
||||
>span {
|
||||
color: $font-color;
|
||||
margin-left: $control-spacing;
|
||||
margin-right: $control-spacing;
|
||||
@@ -408,11 +443,11 @@
|
||||
float: left;
|
||||
margin-right: $control-spacing;
|
||||
|
||||
> button {
|
||||
>button {
|
||||
background-color: $msp-form-control-background;
|
||||
}
|
||||
|
||||
> select {
|
||||
>select {
|
||||
display: inline-block;
|
||||
width: 200px;
|
||||
margin-right: $control-spacing;
|
||||
@@ -425,11 +460,11 @@
|
||||
margin-right: $control-spacing;
|
||||
position: relative;
|
||||
|
||||
> div:first-child {
|
||||
>div:first-child {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
> button {
|
||||
>button {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
@@ -446,9 +481,9 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-selection-viewport-controls {
|
||||
.msp-selection-viewport-controls {
|
||||
position: relative;
|
||||
// display: inline-block;
|
||||
margin: $control-spacing auto 0 auto;
|
||||
@@ -461,7 +496,7 @@
|
||||
background: $control-background;
|
||||
}
|
||||
|
||||
> .msp-flex-row .msp-btn {
|
||||
>.msp-flex-row .msp-btn {
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
@@ -472,37 +507,40 @@
|
||||
flex: 0 0 80px;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-param-object-list-item {
|
||||
.msp-param-object-list-item {
|
||||
margin-top: 1px;
|
||||
position: relative;
|
||||
> button {
|
||||
|
||||
>button {
|
||||
text-align: left;
|
||||
> span {
|
||||
|
||||
>span {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
> div {
|
||||
|
||||
>div {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-state-actions {
|
||||
.msp-state-actions {
|
||||
.msp-transform-wrapper:last-child {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-button-row {
|
||||
display:flex;
|
||||
flex-direction:row;
|
||||
.msp-button-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: $row-height;
|
||||
width: inherit;
|
||||
|
||||
> button {
|
||||
>button {
|
||||
margin: 0;
|
||||
flex: 1 1 auto;
|
||||
margin-right: 1px;
|
||||
@@ -513,16 +551,21 @@
|
||||
padding: 0 $control-spacing;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-action-menu-options {
|
||||
&-no-header, .msp-control-group-children {
|
||||
.msp-action-menu-options {
|
||||
|
||||
&-no-header,
|
||||
.msp-control-group-children {
|
||||
max-height: 300px;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.msp-control-row, button, .msp-icon, .msp-flex-row {
|
||||
.msp-control-row,
|
||||
button,
|
||||
.msp-icon,
|
||||
.msp-flex-row {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
@@ -535,89 +578,75 @@
|
||||
.msp-action-menu-button {
|
||||
margin-top: 1px;
|
||||
display: flex;
|
||||
|
||||
.msp-icon {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-representation-entry {
|
||||
.msp-representation-entry {
|
||||
position: relative;
|
||||
> .msp-control-group-header {
|
||||
> .msp-btn {
|
||||
|
||||
>.msp-control-group-header {
|
||||
>.msp-btn {
|
||||
font-weight: bold;
|
||||
}
|
||||
> .msp-icon, > .msp-btn-link {
|
||||
|
||||
>.msp-icon,
|
||||
>.msp-btn-link {
|
||||
line-height: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-control-group-presets-wrapper {
|
||||
.msp-control-group-presets-wrapper {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
.msp-control-group-header {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
button {
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-parameter-matrix {
|
||||
.msp-parameter-matrix {
|
||||
input {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-btn-apply-simple {
|
||||
.msp-btn-apply-simple {
|
||||
text-align: left;
|
||||
|
||||
.msp-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin type-class-border($name, $color) {
|
||||
.msp-type-class-#{$name} {
|
||||
border-left-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
// TypeClass = 'Root' | 'Group' | 'Data' | 'Object' | 'Representation3D' | 'Behavior'
|
||||
@include type-class-border('Root', $type-class-Root);
|
||||
@include type-class-border('Group', $type-class-Group);
|
||||
@include type-class-border('Data', $type-class-Data);
|
||||
@include type-class-border('Object', $type-class-Object);
|
||||
@include type-class-border('Representation3D', $type-class-Representation3D);
|
||||
@include type-class-border('Behavior', $type-class-Behavior);
|
||||
// TypeClass = 'Root' | 'Group' | 'Data' | 'Object' | 'Representation3D' | 'Behavior'
|
||||
@include type-class-border('Root', $type-class-Root);
|
||||
@include type-class-border('Group', $type-class-Group);
|
||||
@include type-class-border('Data', $type-class-Data);
|
||||
@include type-class-border('Object', $type-class-Object);
|
||||
@include type-class-border('Representation3D', $type-class-Representation3D);
|
||||
@include type-class-border('Behavior', $type-class-Behavior);
|
||||
|
||||
@mixin accent($name, $color) {
|
||||
.msp-accent-color-#{$name} {
|
||||
color: $color;
|
||||
}
|
||||
.msp-accent-bg-#{$name} {
|
||||
background: $color;
|
||||
}
|
||||
.msp-transform-header-brand-#{$name} {
|
||||
border-bottom: 1px solid $color;
|
||||
&:active, &:focus {
|
||||
border-bottom: 1px solid $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include accent('cyan', $color-accent-cyan);
|
||||
@include accent('red', $color-accent-red);
|
||||
@include accent('gray', $color-accent-gray);
|
||||
@include accent('green', $color-accent-green);
|
||||
@include accent('purple', $color-accent-purple);
|
||||
@include accent('blue', $color-accent-blue);
|
||||
@include accent('orange', $color-accent-orange);
|
||||
|
||||
@include accent('cyan', $color-accent-cyan);
|
||||
@include accent('red', $color-accent-red);
|
||||
@include accent('gray', $color-accent-gray);
|
||||
@include accent('green', $color-accent-green);
|
||||
@include accent('purple', $color-accent-purple);
|
||||
@include accent('blue', $color-accent-blue);
|
||||
@include accent('orange', $color-accent-orange);
|
||||
|
||||
.msp-volume-channel-inline-controls {
|
||||
.msp-volume-channel-inline-controls {
|
||||
> :first-child {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@@ -627,15 +656,16 @@
|
||||
}
|
||||
|
||||
.msp-slider {
|
||||
> div:first-child {
|
||||
>div:first-child {
|
||||
right: 42px;
|
||||
}
|
||||
> div:last-child {
|
||||
|
||||
>div:last-child {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
> button {
|
||||
>button {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 32px;
|
||||
@@ -646,14 +676,14 @@
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-list-unstyled {
|
||||
.msp-list-unstyled {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-drag-drop-overlay {
|
||||
.msp-drag-drop-overlay {
|
||||
border: 12px dashed $font-color;
|
||||
background: rgba(0, 0, 0, 0.36);
|
||||
display: flex;
|
||||
@@ -666,4 +696,5 @@
|
||||
bottom: 0;
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
@@ -1,15 +1,19 @@
|
||||
.msp-sequence {
|
||||
@use '../vars' as *;
|
||||
@use '../common' as *;
|
||||
|
||||
@mixin sequence {
|
||||
.msp-sequence {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: $sequence-background;
|
||||
}
|
||||
}
|
||||
|
||||
$sequence-select-height: 24px;
|
||||
$sequence-select-height: 24px;
|
||||
|
||||
.msp-sequence-select {
|
||||
.msp-sequence-select {
|
||||
position: relative;
|
||||
height: $sequence-select-height;
|
||||
width: 100%;
|
||||
@@ -17,7 +21,7 @@ $sequence-select-height: 24px;
|
||||
background: $control-background;
|
||||
text-align: left;
|
||||
|
||||
> span {
|
||||
>span {
|
||||
display: inline-block;
|
||||
line-height: $sequence-select-height;
|
||||
padding: 0 $control-spacing;
|
||||
@@ -26,7 +30,7 @@ $sequence-select-height: 24px;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
> select {
|
||||
>select {
|
||||
display: inline-block;
|
||||
max-width: 120px;
|
||||
width: auto;
|
||||
@@ -37,16 +41,16 @@ $sequence-select-height: 24px;
|
||||
background-size: 6px 8px;
|
||||
background-color: $control-background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-sequence-wrapper {
|
||||
.msp-sequence-wrapper {
|
||||
word-break: break-word;
|
||||
// use $control-spacing for top to have space for sequence numebrs
|
||||
padding: $control-spacing $control-spacing $info-vertical-padding $control-spacing;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-sequence-wrapper-non-empty {
|
||||
.msp-sequence-wrapper-non-empty {
|
||||
font-size: 85%;
|
||||
line-height: 180%;
|
||||
font-family: "Courier New", monospace;
|
||||
@@ -60,9 +64,9 @@ $sequence-select-height: 24px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-sequence-chain-label {
|
||||
.msp-sequence-chain-label {
|
||||
margin-left: $control-spacing;
|
||||
margin-top: $control-spacing;
|
||||
user-select: none;
|
||||
@@ -70,9 +74,9 @@ $sequence-select-height: 24px;
|
||||
font-size: 90%;
|
||||
line-height: 90%;
|
||||
padding-left: 0.2em;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-sequence-wrapper {
|
||||
.msp-sequence-wrapper {
|
||||
span {
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -131,4 +135,5 @@ $sequence-select-height: 24px;
|
||||
color: color-lower-contrast($font-color, 45%);
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,3 +1,6 @@
|
||||
@use '../vars' as *;
|
||||
@use '../common' as *;
|
||||
|
||||
@mixin borderBox {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari
|
||||
@@ -8,7 +11,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.msp-slider-base {
|
||||
@mixin slider {
|
||||
.msp-slider-base {
|
||||
position: relative;
|
||||
height: 14px;
|
||||
padding: 5px 0;
|
||||
@@ -88,12 +92,15 @@
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
|
||||
&:first-child {
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
&-active {
|
||||
border-color: tint($font-color, 50%);
|
||||
}
|
||||
@@ -107,60 +114,63 @@
|
||||
// background-color: $slider-disabledColor;
|
||||
// }
|
||||
|
||||
.msp-slider-base-handle, .msp-slider-base-dot {
|
||||
.msp-slider-base-handle,
|
||||
.msp-slider-base-dot {
|
||||
// border-color: $slider-disabledColor;
|
||||
// background-color: color-lower-contrast($font-color, 10%);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.msp-slider-base-mark-text, .msp-slider-base-dot {
|
||||
cursor: not-allowed!important;
|
||||
.msp-slider-base-mark-text,
|
||||
.msp-slider-base-dot {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .msp-slider-base-vertical {
|
||||
// width: 14px;
|
||||
// height: 100%;
|
||||
// padding: 0 5px;
|
||||
|
||||
// .msp-slider-base {
|
||||
// &-rail {
|
||||
// height: 100%;
|
||||
// width: 4px;
|
||||
// }
|
||||
|
||||
// &-track {
|
||||
// left: 5px;
|
||||
// bottom: 0;
|
||||
// width: 4px;
|
||||
// }
|
||||
|
||||
// &-handle {
|
||||
// margin-left: -5px;
|
||||
// margin-bottom: -7px;
|
||||
// }
|
||||
|
||||
// &-mark {
|
||||
// top: 0;
|
||||
// left: 18px;
|
||||
// height: 100%;
|
||||
// }
|
||||
|
||||
// &-step {
|
||||
// height: 100%;
|
||||
// width: 4px;
|
||||
// }
|
||||
|
||||
// &-dot {
|
||||
// left: 2px;
|
||||
// margin-bottom: -4px;
|
||||
// &:first-child {
|
||||
// margin-bottom: -4px;
|
||||
// }
|
||||
// &:last-child {
|
||||
// margin-bottom: -4px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
// .msp-slider-base-vertical {
|
||||
// width: 14px;
|
||||
// height: 100%;
|
||||
// padding: 0 5px;
|
||||
|
||||
// .msp-slider-base {
|
||||
// &-rail {
|
||||
// height: 100%;
|
||||
// width: 4px;
|
||||
// }
|
||||
|
||||
// &-track {
|
||||
// left: 5px;
|
||||
// bottom: 0;
|
||||
// width: 4px;
|
||||
// }
|
||||
|
||||
// &-handle {
|
||||
// margin-left: -5px;
|
||||
// margin-bottom: -7px;
|
||||
// }
|
||||
|
||||
// &-mark {
|
||||
// top: 0;
|
||||
// left: 18px;
|
||||
// height: 100%;
|
||||
// }
|
||||
|
||||
// &-step {
|
||||
// height: 100%;
|
||||
// width: 4px;
|
||||
// }
|
||||
|
||||
// &-dot {
|
||||
// left: 2px;
|
||||
// margin-bottom: -4px;
|
||||
// &:first-child {
|
||||
// margin-bottom: -4px;
|
||||
// }
|
||||
// &:last-child {
|
||||
// margin-bottom: -4px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@@ -1,18 +1,22 @@
|
||||
.msp-task-state {
|
||||
@use '../vars' as *;
|
||||
@use '../common' as *;
|
||||
|
||||
@mixin tasks {
|
||||
.msp-task-state {
|
||||
|
||||
line-height: $row-height;
|
||||
//height: $row-height;
|
||||
//position: relative;
|
||||
//margin-top: 1px;
|
||||
|
||||
> span {
|
||||
>span {
|
||||
@include non-selectable;
|
||||
//display: inline-block;
|
||||
//padding: 0 $control-spacing;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-overlay-tasks {
|
||||
.msp-overlay-tasks {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
top: 0;
|
||||
@@ -29,14 +33,14 @@
|
||||
.msp-task-state {
|
||||
$size: $row-height;
|
||||
|
||||
> div {
|
||||
>div {
|
||||
height: $size;
|
||||
margin-top: 1px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: $default-background;
|
||||
|
||||
> div {
|
||||
>div {
|
||||
height: $size;
|
||||
line-height: $size;
|
||||
display: inline-block;
|
||||
@@ -47,18 +51,18 @@
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
> button {
|
||||
>button {
|
||||
display: inline-block;
|
||||
margin-top: -3px;
|
||||
// font-size: 140%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* background */
|
||||
/* background */
|
||||
|
||||
.msp-background-tasks {
|
||||
.msp-background-tasks {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
@@ -67,14 +71,14 @@
|
||||
.msp-task-state {
|
||||
$size: $row-height;
|
||||
|
||||
> div {
|
||||
>div {
|
||||
height: $size;
|
||||
margin-top: 1px;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
background: $default-background;
|
||||
|
||||
> div {
|
||||
>div {
|
||||
height: $size;
|
||||
line-height: $size;
|
||||
display: inline-block;
|
||||
@@ -85,15 +89,16 @@
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
> button {
|
||||
>button {
|
||||
display: inline-block;
|
||||
margin-top: -3px;
|
||||
// font-size: 140%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// .msp-background-tasks .msp-task-state {
|
||||
// color:
|
||||
// }
|
||||
// .msp-background-tasks .msp-task-state {
|
||||
// color:
|
||||
// }
|
||||
}
|
||||
@@ -1,7 +1,10 @@
|
||||
|
||||
@use "sass:math";
|
||||
@use '../vars' as *;
|
||||
@use '../common' as *;
|
||||
|
||||
.msp-toast-container {
|
||||
@mixin toast {
|
||||
|
||||
.msp-toast-container {
|
||||
position: relative;
|
||||
// bottom: $control-spacing;
|
||||
// right: $control-spacing;
|
||||
@@ -26,9 +29,12 @@
|
||||
font-weight: bold;
|
||||
display: table-cell;
|
||||
|
||||
-webkit-user-select: none; /* Chrome/Safari */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* IE10+ */
|
||||
-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;
|
||||
@@ -40,7 +46,8 @@
|
||||
}
|
||||
|
||||
.msp-toast-message {
|
||||
padding: $info-vertical-padding ($control-spacing + $row-height) $info-vertical-padding $control-spacing;
|
||||
padding: $info-vertical-padding (
|
||||
$control-spacing + $row-height) $info-vertical-padding $control-spacing;
|
||||
display: table-cell;
|
||||
|
||||
a {
|
||||
@@ -53,7 +60,8 @@
|
||||
color: $msp-btn-commit-on-hover-font-color;
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
&:active,
|
||||
&:focus {
|
||||
color: $msp-btn-commit-on-font-color;
|
||||
outline-offset: 0;
|
||||
outline: none;
|
||||
@@ -77,8 +85,10 @@
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
padding-right: math.div($control-spacing, 2);
|
||||
padding-right: math.div($control-spacing, 2
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,8 @@
|
||||
.msp-transformer {
|
||||
@use '../vars' as *;
|
||||
@use '../common' as *;
|
||||
|
||||
@mixin transformer {
|
||||
.msp-transformer {
|
||||
|
||||
.msp-entity-badge {
|
||||
position: absolute;
|
||||
@@ -8,17 +12,18 @@
|
||||
line-height: $row-height;
|
||||
width: $row-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-layout-right, .msp-layout-left {
|
||||
.msp-layout-right,
|
||||
.msp-layout-left {
|
||||
background: $control-background;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-transformer-wrapper {
|
||||
.msp-transformer-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-transformer-wrapper {
|
||||
.msp-transformer-wrapper {
|
||||
|
||||
.msp-entity-badge {
|
||||
left: 0;
|
||||
@@ -36,42 +41,43 @@
|
||||
bottom: $row-height + 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-transform-wrapper {
|
||||
.msp-transform-wrapper {
|
||||
margin-bottom: $control-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-transform-wrapper-collapsed {
|
||||
.msp-transform-wrapper-collapsed {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-transform-update-wrapper {
|
||||
.msp-transform-update-wrapper {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-transform-update-wrapper-collapsed {
|
||||
.msp-transform-update-wrapper-collapsed {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-transform-update-wrapper, .msp-transform-update-wrapper-collapsed {
|
||||
> .msp-transform-header > button {
|
||||
.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 {
|
||||
.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 {
|
||||
.msp-transform-header {
|
||||
position: relative;
|
||||
// border-top: 1px solid $entity-color-Behaviour; // TODO: separate color
|
||||
|
||||
@@ -82,29 +88,31 @@
|
||||
// font-weight: bold;
|
||||
// }
|
||||
|
||||
> button > small {
|
||||
>button>small {
|
||||
font-weight: normal;
|
||||
float: right;
|
||||
}
|
||||
|
||||
> button {
|
||||
> span:first-child {
|
||||
>button {
|
||||
>span:first-child {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
> button:hover {
|
||||
>button:hover {
|
||||
color: color-lower-contrast($font-color, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-transform-header-brand {
|
||||
.msp-transform-header-brand {
|
||||
// padding-left: 42px;
|
||||
margin-bottom: -1px;
|
||||
|
||||
svg {
|
||||
fill: $font-color;
|
||||
stroke: $font-color;
|
||||
}
|
||||
|
||||
// > div {
|
||||
// position: absolute;
|
||||
// height: 32px;
|
||||
@@ -118,47 +126,48 @@
|
||||
// stroke: #eceff3;
|
||||
// font-size: 85%;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
.msp-transform-default-params {
|
||||
.msp-transform-default-params {
|
||||
background: $default-background;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: $row-height;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-transform-default-params:hover {
|
||||
.msp-transform-default-params:hover {
|
||||
background: color-lower-contrast($default-background, 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.msp-transform-apply-wrap {
|
||||
.msp-transform-apply-wrap {
|
||||
position: relative;
|
||||
margin-top: 1px;
|
||||
width: 100%;
|
||||
height: $row-height;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-transform-refresh {
|
||||
.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 {
|
||||
.msp-transform-apply {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: $control-label-width + $control-spacing;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-transform-apply-wider {
|
||||
.msp-transform-apply-wider {
|
||||
margin-left: $row-height + 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-data-beh {
|
||||
.msp-data-beh {
|
||||
margin: $control-spacing 0 !important;
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,9 @@
|
||||
@use "sass:color";
|
||||
@use '../vars' as *;
|
||||
@use '../common' as *;
|
||||
|
||||
.msp-viewport {
|
||||
@mixin viewport {
|
||||
.msp-viewport {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@@ -12,14 +15,14 @@
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.msp-viewport-expanded {
|
||||
.msp-viewport-expanded {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-viewport-host3d {
|
||||
.msp-viewport-host3d {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
@@ -31,29 +34,29 @@
|
||||
-webkit-touch-callout: none;
|
||||
touch-action: manipulation;
|
||||
|
||||
> canvas {
|
||||
>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 {
|
||||
.msp-viewport-controls {
|
||||
position: absolute;
|
||||
right: $control-spacing;
|
||||
top: $control-spacing;
|
||||
width: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-viewport-controls-buttons {
|
||||
.msp-viewport-controls-buttons {
|
||||
text-align: right;
|
||||
position: relative;
|
||||
// opacity: 0.5;
|
||||
// &:hover { opacity: 1.0; }
|
||||
|
||||
> div {
|
||||
>div {
|
||||
position: relative;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
@@ -72,9 +75,9 @@
|
||||
.msp-btn-link:hover {
|
||||
color: $hover-font-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-semi-transparent-background {
|
||||
.msp-semi-transparent-background {
|
||||
background: $default-background;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
@@ -82,9 +85,9 @@
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-hover-box-wrapper {
|
||||
.msp-hover-box-wrapper {
|
||||
position: relative;
|
||||
|
||||
.msp-hover-box-body {
|
||||
@@ -109,9 +112,9 @@
|
||||
&:hover .msp-hover-box-spacer {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-viewport-controls-panel {
|
||||
.msp-viewport-controls-panel {
|
||||
width: 290px;
|
||||
top: 0;
|
||||
right: $row-height + 4px;
|
||||
@@ -126,20 +129,20 @@
|
||||
overflow-y: auto;
|
||||
max-height: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* highlight & toasts */
|
||||
/* highlight & toasts */
|
||||
|
||||
.msp-highlight-toast-wrapper {
|
||||
.msp-highlight-toast-wrapper {
|
||||
position: absolute;
|
||||
right: $control-spacing;
|
||||
bottom: $control-spacing;
|
||||
max-width: 95%;
|
||||
|
||||
z-index: 10000;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-highlight-info {
|
||||
.msp-highlight-info {
|
||||
color: $highlight-info-font-color;
|
||||
padding: $info-vertical-padding $control-spacing;
|
||||
background: $default-background; //$highlight-info-background;
|
||||
@@ -147,31 +150,31 @@
|
||||
max-width: 400px;
|
||||
|
||||
@include non-selectable;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-highlight-markdown-row {
|
||||
.msp-highlight-markdown-row {
|
||||
padding-left: $control-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-highlight-simple-row {
|
||||
.msp-highlight-simple-row {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-highlight-info-hr {
|
||||
.msp-highlight-info-hr {
|
||||
margin-inline: 0px;
|
||||
margin-block: 3px;
|
||||
border: none;
|
||||
height: 1px;
|
||||
background-color: $highlight-info-font-color;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-highlight-info-additional {
|
||||
.msp-highlight-info-additional {
|
||||
font-size: 85%;
|
||||
display: inline-block;
|
||||
color: $highlight-info-additional-font-color;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-snapshot-description-wrapper {
|
||||
.msp-snapshot-description-wrapper {
|
||||
background: color.change($default-background, $alpha: 0.5, $space: rgb);
|
||||
|
||||
position: absolute;
|
||||
@@ -192,7 +195,9 @@
|
||||
color: $font-color;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
ul,
|
||||
ol {
|
||||
padding-left: $control-spacing + 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,41 +1,56 @@
|
||||
|
||||
@import 'layout/common';
|
||||
@use 'layout/common' as *;
|
||||
@use 'layout/controls-landscape.scss' as *;
|
||||
@use 'layout/controls-outside.scss' as *;
|
||||
@use 'layout/controls-portrait.scss' as *;
|
||||
|
||||
.msp-layout-standard-outside {
|
||||
@mixin layout {
|
||||
@include layout-common;
|
||||
|
||||
.msp-layout-standard-outside {
|
||||
position: absolute;
|
||||
@import 'layout/controls-outside';
|
||||
}
|
||||
@include layout-outside;
|
||||
}
|
||||
|
||||
.msp-layout-standard-landscape {
|
||||
.msp-layout-standard-landscape {
|
||||
position: absolute;
|
||||
@import 'layout/controls-landscape';
|
||||
}
|
||||
@include layout-landscape;
|
||||
}
|
||||
|
||||
.msp-layout-standard-portrait {
|
||||
.msp-layout-standard-portrait {
|
||||
position: absolute;
|
||||
@import 'layout/controls-portrait';
|
||||
}
|
||||
@include layout-portrait;
|
||||
}
|
||||
|
||||
.msp-layout-standard-reactive {
|
||||
.msp-layout-standard-reactive {
|
||||
position: absolute;
|
||||
|
||||
@media (orientation:landscape), (min-width: 1000px) {
|
||||
@import 'layout/controls-landscape';
|
||||
};
|
||||
@media (orientation:landscape),
|
||||
(min-width: 1000px) {
|
||||
@include layout-landscape;
|
||||
}
|
||||
|
||||
;
|
||||
|
||||
@media (orientation:portrait) and (max-width: 1000px) {
|
||||
@import 'layout/controls-portrait';
|
||||
};
|
||||
}
|
||||
@include layout-portrait;
|
||||
}
|
||||
|
||||
.msp-layout-expanded {
|
||||
;
|
||||
}
|
||||
|
||||
.msp-layout-expanded {
|
||||
position: fixed;
|
||||
|
||||
@media (orientation:landscape) {
|
||||
@import 'layout/controls-landscape';
|
||||
};
|
||||
@include layout-landscape;
|
||||
}
|
||||
|
||||
;
|
||||
|
||||
@media (orientation:portrait) {
|
||||
@import 'layout/controls-portrait';
|
||||
};
|
||||
@include layout-portrait;
|
||||
}
|
||||
|
||||
;
|
||||
}
|
||||
}
|
||||
@@ -1,51 +1,56 @@
|
||||
@use '../vars' as *;
|
||||
|
||||
|
||||
.msp-layout-expanded, .msp-layout-standard {
|
||||
@mixin layout-common {
|
||||
.msp-layout-expanded,
|
||||
.msp-layout-standard {
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-layout-standard {
|
||||
.msp-layout-standard {
|
||||
border: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-layout-region {
|
||||
.msp-layout-region {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-layout-static, .msp-layout-scrollable {
|
||||
.msp-layout-static,
|
||||
.msp-layout-scrollable {
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-scrollable {
|
||||
.msp-scrollable {
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-scrollable-container {
|
||||
.msp-scrollable-container {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-layout-static {
|
||||
.msp-layout-static {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-layout-top, .msp-layout-main, .msp-layout-bottom {
|
||||
.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-right {
|
||||
.msp-layout-static {
|
||||
left: 0;
|
||||
right: 0;
|
||||
@@ -60,13 +65,14 @@
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.msp-layout-left {
|
||||
.msp-layout-left {
|
||||
.msp-layout-static {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,90 +1,104 @@
|
||||
|
||||
.msp-layout-main {
|
||||
@use '../vars' as *;
|
||||
|
||||
@mixin layout-landscape {
|
||||
.msp-layout-main {
|
||||
position: absolute;
|
||||
left: $expanded-left-width;
|
||||
right: $expanded-right-width;
|
||||
bottom: $expanded-bottom-height;
|
||||
top: $expanded-top-height;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-layout-top {
|
||||
.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 {
|
||||
.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 {
|
||||
.msp-layout-right {
|
||||
position: absolute;
|
||||
width: $expanded-right-width;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
border-left: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-layout-left {
|
||||
.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-hide-right {
|
||||
.msp-layout-right {
|
||||
display: none;
|
||||
}
|
||||
.msp-layout-main, .msp-layout-top, .msp-layout-bottom {
|
||||
|
||||
.msp-layout-main,
|
||||
.msp-layout-top,
|
||||
.msp-layout-bottom {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.msp-layout-hide-left {
|
||||
.msp-layout-hide-left {
|
||||
.msp-layout-left {
|
||||
display: none;
|
||||
}
|
||||
.msp-layout-main, .msp-layout-top, .msp-layout-bottom {
|
||||
|
||||
.msp-layout-main,
|
||||
.msp-layout-top,
|
||||
.msp-layout-bottom {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-layout-collapse-left {
|
||||
.msp-layout-collapse-left {
|
||||
.msp-layout-left {
|
||||
width: $collapsed-left-width;
|
||||
}
|
||||
.msp-layout-main, .msp-layout-top, .msp-layout-bottom {
|
||||
|
||||
.msp-layout-main,
|
||||
.msp-layout-top,
|
||||
.msp-layout-bottom {
|
||||
left: $collapsed-left-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-layout-hide-bottom {
|
||||
.msp-layout-hide-bottom {
|
||||
.msp-layout-bottom {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.msp-layout-main {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-layout-hide-top {
|
||||
.msp-layout-hide-top {
|
||||
.msp-layout-top {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.msp-layout-main {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,13 +1,15 @@
|
||||
|
||||
.msp-layout-main {
|
||||
@use '../vars' as *;
|
||||
|
||||
@mixin layout-outside {
|
||||
.msp-layout-main {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-layout-top {
|
||||
.msp-layout-top {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
height: $standard-top-height;
|
||||
@@ -15,9 +17,9 @@
|
||||
width: 50%;
|
||||
border-left: 1px solid $border-color;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-layout-bottom {
|
||||
.msp-layout-bottom {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@@ -25,9 +27,9 @@
|
||||
top: -$standard-top-height;
|
||||
width: 50%;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-layout-right {
|
||||
.msp-layout-right {
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
right: 0;
|
||||
@@ -35,9 +37,9 @@
|
||||
height: $standard-bottom-height;
|
||||
border-left: 1px solid $border-color;
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-layout-left {
|
||||
.msp-layout-left {
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
left: 0;
|
||||
@@ -45,55 +47,61 @@
|
||||
bottom: -$standard-bottom-height;
|
||||
height: $standard-bottom-height;
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
/////////////////////////////////////////
|
||||
.msp-layout-hide-right {
|
||||
/////////////////////////////////////////
|
||||
.msp-layout-hide-right {
|
||||
.msp-layout-right {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.msp-layout-left {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-layout-hide-left {
|
||||
.msp-layout-hide-left {
|
||||
.msp-layout-left {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.msp-layout-right {
|
||||
width: 100%;
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-layout-collapse-left {
|
||||
.msp-layout-collapse-left {
|
||||
.msp-layout-left {
|
||||
width: $collapsed-left-width;
|
||||
}
|
||||
|
||||
.msp-layout-right {
|
||||
left: $collapsed-left-width;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
///////////////////////////////////
|
||||
.msp-layout-hide-top {
|
||||
///////////////////////////////////
|
||||
.msp-layout-hide-top {
|
||||
.msp-layout-top {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.msp-layout-bottom {
|
||||
width: 100%;
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-layout-hide-bottom {
|
||||
.msp-layout-hide-bottom {
|
||||
.msp-layout-bottom {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.msp-layout-top {
|
||||
width: 100%;
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,13 +1,15 @@
|
||||
|
||||
.msp-layout-main {
|
||||
@use '../vars' as *;
|
||||
|
||||
@mixin layout-portrait {
|
||||
.msp-layout-main {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: $expanded-portrait-bottom-height;
|
||||
top: $expanded-portrait-top-height;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-layout-top {
|
||||
.msp-layout-top {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
height: $expanded-portrait-top-height;
|
||||
@@ -15,18 +17,18 @@
|
||||
width: 50%;
|
||||
border-left: 1px solid $border-color;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-layout-bottom {
|
||||
.msp-layout-bottom {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: $expanded-portrait-top-height;
|
||||
width: 50%;
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-layout-right {
|
||||
.msp-layout-right {
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
right: 0;
|
||||
@@ -34,76 +36,82 @@
|
||||
height: $expanded-portrait-bottom-height;
|
||||
border-left: 1px solid $border-color;
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
.msp-layout-left {
|
||||
.msp-layout-left {
|
||||
position: absolute;
|
||||
width: 50%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: $expanded-portrait-bottom-height;
|
||||
border-top: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
/////////////////////////////////////////
|
||||
.msp-layout-hide-right {
|
||||
/////////////////////////////////////////
|
||||
.msp-layout-hide-right {
|
||||
.msp-layout-right {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.msp-layout-left {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-layout-hide-left {
|
||||
.msp-layout-hide-left {
|
||||
.msp-layout-left {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.msp-layout-right {
|
||||
width: 100%;
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-layout-hide-right.msp-layout-hide-left {
|
||||
.msp-layout-hide-right.msp-layout-hide-left {
|
||||
.msp-layout-main {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-layout-collapse-left {
|
||||
.msp-layout-collapse-left {
|
||||
.msp-layout-left {
|
||||
width: $collapsed-left-width;
|
||||
}
|
||||
|
||||
.msp-layout-right {
|
||||
left: $collapsed-left-width;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
///////////////////////////////////
|
||||
.msp-layout-hide-top {
|
||||
///////////////////////////////////
|
||||
.msp-layout-hide-top {
|
||||
.msp-layout-top {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.msp-layout-bottom {
|
||||
width: 100%;
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-layout-hide-bottom {
|
||||
.msp-layout-hide-bottom {
|
||||
.msp-layout-bottom {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.msp-layout-top {
|
||||
width: 100%;
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.msp-layout-hide-top.msp-layout-hide-bottom {
|
||||
.msp-layout-hide-top.msp-layout-hide-bottom {
|
||||
.msp-layout-main {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
17
src/mol-plugin-ui/skin/base/normalize.scss
vendored
17
src/mol-plugin-ui/skin/base/normalize.scss
vendored
@@ -1,13 +1,15 @@
|
||||
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
//
|
||||
// 1. Set default font family to sans-serif.
|
||||
// 2. Prevent iOS and IE text size adjust after device orientation change,
|
||||
// without disabling user zoom.
|
||||
//
|
||||
* {
|
||||
|
||||
@mixin normalize {
|
||||
//
|
||||
// 1. Set default font family to sans-serif.
|
||||
// 2. Prevent iOS and IE text size adjust after device orientation change,
|
||||
// without disabling user zoom.
|
||||
//
|
||||
* {
|
||||
box-sizing: border-box; // 1
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Address `[hidden]` styling not present in IE 8/9/10.
|
||||
@@ -208,3 +210,4 @@
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
@@ -1,42 +1,47 @@
|
||||
@mixin non-selectable {
|
||||
-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;
|
||||
@use 'vars' as *;
|
||||
@use './components/controls-base' as *;
|
||||
@use './components/controls' as *;
|
||||
@use './components/help' as *;
|
||||
@use './components/line-graph' as *;
|
||||
@use './components/log' as *;
|
||||
@use './components/slider' as *;
|
||||
@use './components/misc' as *;
|
||||
@use './components/tasks' as *;
|
||||
@use './components/viewport' as *;
|
||||
@use './components/sequence' as *;
|
||||
@use './components/transformer' as *;
|
||||
@use './components/toast' as *;
|
||||
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
@mixin ui {
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height:10px;
|
||||
}
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
::-webkit-scrollbar-track {
|
||||
//-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
|
||||
border-radius: 0;
|
||||
background-color: color-lower-contrast($control-background, 4%);
|
||||
}
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
//-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
|
||||
background-color: color-increase-contrast($control-background, 16%);
|
||||
border: solid 1px transparent;
|
||||
background-clip: content-box;
|
||||
}
|
||||
}
|
||||
|
||||
@import 'components/controls-base';
|
||||
@import 'components/controls';
|
||||
@import 'components/slider';
|
||||
@import 'components/misc';
|
||||
@import 'components/tasks';
|
||||
@import 'components/viewport';
|
||||
@import 'components/log';
|
||||
@import 'components/sequence';
|
||||
@import 'components/transformer';
|
||||
@import 'components/toast';
|
||||
@import 'components/help';
|
||||
@import 'components/line-graph';
|
||||
@include controls-base;
|
||||
@include controls;
|
||||
@include help;
|
||||
@include line-graph;
|
||||
@include log;
|
||||
@include slider;
|
||||
@include misc;
|
||||
@include tasks;
|
||||
@include viewport;
|
||||
@include sequence;
|
||||
@include transformer;
|
||||
@include toast;
|
||||
}
|
||||
|
||||
@@ -1,2 +1,21 @@
|
||||
@import 'colors/blue';
|
||||
@import 'base/base';
|
||||
@use 'base/colors' with (
|
||||
$default-background: #2D3E50,
|
||||
$font-color: #EDF1F2,
|
||||
$hover-font-color: #3B9AD9,
|
||||
$entity-current-font-color: #FFFFFF,
|
||||
$msp-btn-remove-background: #BF3A31,
|
||||
$msp-btn-remove-hover-font-color:#ffffff,
|
||||
$msp-btn-commit-on-font-color: #ffffff,
|
||||
$entity-badge-font-color: #ccd4e0,
|
||||
|
||||
$log-message: #0CCA5D,
|
||||
$log-info: #5E3673,
|
||||
$log-warning: #FCC937,
|
||||
$log-error: #FD354B,
|
||||
|
||||
$logo-background: rgba(0,0,0,0.75),
|
||||
|
||||
$color-adjust-sign: -1,
|
||||
);
|
||||
|
||||
@use 'base/base';
|
||||
@@ -1,26 +0,0 @@
|
||||
@use "sass:color";
|
||||
|
||||
$default-background: #2D3E50;
|
||||
$font-color: #EDF1F2;
|
||||
$hover-font-color: #3B9AD9;
|
||||
$entity-current-font-color: #FFFFFF;
|
||||
$msp-btn-remove-background: #BF3A31;
|
||||
$msp-btn-remove-hover-font-color:#ffffff;
|
||||
$msp-btn-commit-on-font-color: #ffffff;
|
||||
$entity-badge-font-color: #ccd4e0;
|
||||
|
||||
// used in LOG
|
||||
$log-message: #0CCA5D;
|
||||
$log-info: #5E3673;
|
||||
$log-warning: #FCC937;
|
||||
$log-error: #FD354B;
|
||||
|
||||
$logo-background: rgba(0,0,0,0.75);
|
||||
|
||||
@function color-lower-contrast($color, $amount) {
|
||||
@return color.adjust($color, $lightness: -$amount, $space: hsl);
|
||||
}
|
||||
|
||||
@function color-increase-contrast($color, $amount) {
|
||||
@return color.adjust($color, $lightness: $amount, $space: hsl);
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
@use "sass:color";
|
||||
|
||||
$default-background: #111318;
|
||||
$font-color: #ccd4e0;
|
||||
$hover-font-color: #51A2FB;
|
||||
$entity-current-font-color: #68BEFD;
|
||||
$msp-btn-remove-background: #DE0A28;
|
||||
$msp-btn-remove-hover-font-color:#F2F4F7;
|
||||
$msp-btn-commit-on-font-color: #68BEFD;
|
||||
$entity-badge-font-color: #ccd4e0;
|
||||
|
||||
// used in LOG
|
||||
$log-message: #0CCA5D;
|
||||
$log-info: #5E3673;
|
||||
$log-warning: #FCC937;
|
||||
$log-error: #FD354B;
|
||||
|
||||
$logo-background: rgba(0,0,0,0.75);
|
||||
|
||||
@function color-lower-contrast($color, $amount) {
|
||||
@return color.adjust($color, $lightness: -$amount, $space: hsl);
|
||||
}
|
||||
|
||||
@function color-increase-contrast($color, $amount) {
|
||||
@return color.adjust($color, $lightness: $amount, $space: hsl);
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
// this is complement of the dark theme
|
||||
|
||||
@use "sass:color";
|
||||
|
||||
$default-background: color.invert(#111318, $space: rgb);
|
||||
$font-color: color.invert(#ccd4e0, $space: rgb);
|
||||
$hover-font-color: color.invert(#51A2FB, $space: rgb);
|
||||
$entity-current-font-color: color.invert(#68BEFD, $space: rgb);
|
||||
$msp-btn-commit-on-font-color: color.invert(#68BEFD, $space: rgb);
|
||||
$entity-badge-font-color: color.adjust(#ccd4e0, $lightness: 10%);
|
||||
$msp-btn-remove-background: #DE0A28;
|
||||
$msp-btn-remove-hover-font-color:#F2F4F7;
|
||||
|
||||
// used in LOG
|
||||
$log-message: #0CCA5D;
|
||||
$log-info: #5E3673;
|
||||
$log-warning: #FCC937;
|
||||
$log-error: #FD354B;
|
||||
|
||||
$logo-background: color.invert(#111318, $space: rgb);
|
||||
|
||||
@function color-lower-contrast($color, $amount) {
|
||||
@return color.adjust($color, $lightness: $amount, $space: hsl);
|
||||
}
|
||||
|
||||
@function color-increase-contrast($color, $amount) {
|
||||
@return color.adjust($color, $lightness: -$amount, $space: hsl);
|
||||
}
|
||||
@@ -1,2 +1,21 @@
|
||||
@import 'colors/dark';
|
||||
@import 'base/base';
|
||||
@use 'base/colors' with (
|
||||
$default-background: #111318,
|
||||
$font-color: #ccd4e0,
|
||||
$hover-font-color: #51A2FB,
|
||||
$entity-current-font-color: #68BEFD,
|
||||
$msp-btn-remove-background: #DE0A28,
|
||||
$msp-btn-remove-hover-font-color: #F2F4F7,
|
||||
$msp-btn-commit-on-font-color: #68BEFD,
|
||||
$entity-badge-font-color: #ccd4e0,
|
||||
|
||||
$log-message: #0CCA5D,
|
||||
$log-info: #5E3673,
|
||||
$log-warning: #FCC937,
|
||||
$log-error: #FD354B,
|
||||
|
||||
$logo-background: rgba(0, 0, 0, 0.75),
|
||||
|
||||
$color-adjust-sign: -1,
|
||||
);
|
||||
|
||||
@use 'base/base';
|
||||
@@ -1,2 +1 @@
|
||||
@import 'colors/light';
|
||||
@import 'base/base';
|
||||
@use 'base/base';
|
||||
Reference in New Issue
Block a user