diff --git a/src/apps/viewer/index.html b/src/apps/viewer/index.html
index 9a57c1d04577e84284f8bb4b9fcf4318a918b97f..6f2809d5e30883dd8872f931c3428f0731b3a19e 100644
--- a/src/apps/viewer/index.html
+++ b/src/apps/viewer/index.html
@@ -26,6 +26,7 @@
padding: 2px;
}
</style>
+ <link rel="stylesheet" type="text/css" href="app.css" />
</head>
<body>
<div id="app" style="position: absolute; width: 100%; height: 100%"></div>
diff --git a/src/apps/viewer/index.ts b/src/apps/viewer/index.ts
index d27e1d06ee511f99acc28aa67e6b241f2d877756..6e103ee755535db5599d3c284aaa975a6f45990a 100644
--- a/src/apps/viewer/index.ts
+++ b/src/apps/viewer/index.ts
@@ -6,5 +6,6 @@
import { createPlugin } from 'mol-plugin';
import './index.html'
+require('mol-plugin/skin/light.scss')
createPlugin(document.getElementById('app')!);
\ No newline at end of file
diff --git a/src/mol-plugin/skin/base/base.scss b/src/mol-plugin/skin/base/base.scss
new file mode 100644
index 0000000000000000000000000000000000000000..93c90ce1106864f5c9f8bb5ce0f3b93c4ce0356b
--- /dev/null
+++ b/src/mol-plugin/skin/base/base.scss
@@ -0,0 +1,44 @@
+@font-face {
+ font-family: 'fontello';
+ src: url('./fonts/fontello.eot?22556350');
+ src: url('./fonts/fontello.eot?22556350#iefix') format('embedded-opentype'),
+ url('./fonts/fontello.woff2?22556350') format('woff2'),
+ url('./fonts/fontello.woff?22556350') format('woff'),
+ url('./fonts/fontello.ttf?22556350') format('truetype'),
+ url('./fonts/fontello.svg?22556350#fontello') format('svg');
+ font-weight: normal;
+ font-style: normal;
+}
+
+@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700);
+
+.msp-plugin {
+ font-family: "Helvetica Neue", "Source Sans Pro", Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ line-height: 1.42857143;
+
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ @import 'variables';
+
+ // for bootstrap
+ $border-radius-base: 0;
+ $border-radius-large: 0;
+ $border-radius-small: 0;
+
+ @import 'bootstrap/bootstrap';
+
+ @import 'icons';
+ @import 'layout';
+ @import 'ui';
+ @import 'logo';
+
+ .msp-plugin-content {
+ color: $font-color;
+ }
+
+ background: $default-background;
+}
\ No newline at end of file
diff --git a/src/mol-plugin/skin/base/bootstrap/_bootstrap-compass.scss b/src/mol-plugin/skin/base/bootstrap/_bootstrap-compass.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8fbc3cda5e3d58d102ab2661543e0769fd21ba5b
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/_bootstrap-compass.scss
@@ -0,0 +1,9 @@
+@function twbs-font-path($path) {
+ @return font-url($path, true);
+}
+
+@function twbs-image-path($path) {
+ @return image-url($path, true);
+}
+
+$bootstrap-sass-asset-helper: true;
diff --git a/src/mol-plugin/skin/base/bootstrap/_bootstrap-mincer.scss b/src/mol-plugin/skin/base/bootstrap/_bootstrap-mincer.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0c4655e32d2f6ee2ff8e2b3a20ec0e603e8bf057
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/_bootstrap-mincer.scss
@@ -0,0 +1,19 @@
+// Mincer asset helper functions
+//
+// This must be imported into a .css.ejs.scss file.
+// Then, <% %>-interpolations will be parsed as strings by Sass, and evaluated by EJS after Sass compilation.
+
+
+@function twbs-font-path($path) {
+ // do something like following
+ // from "path/to/font.ext#suffix" to "<%- asset_path(path/to/font.ext)) + #suffix %>"
+ // from "path/to/font.ext?#suffix" to "<%- asset_path(path/to/font.ext)) + ?#suffix %>"
+ // or from "path/to/font.ext" just "<%- asset_path(path/to/font.ext)) %>"
+ @return "<%- asset_path("#{$path}".replace(/[#?].*$/, '')) + "#{$path}".replace(/(^[^#?]*)([#?]?.*$)/, '$2') %>";
+}
+
+@function twbs-image-path($file) {
+ @return "<%- asset_path("#{$file}") %>";
+}
+
+$bootstrap-sass-asset-helper: true;
diff --git a/src/mol-plugin/skin/base/bootstrap/_bootstrap-sprockets.scss b/src/mol-plugin/skin/base/bootstrap/_bootstrap-sprockets.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9fffc1eb4b1b9aac66c9329cd6691c33483313c5
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/_bootstrap-sprockets.scss
@@ -0,0 +1,9 @@
+@function twbs-font-path($path) {
+ @return font-path($path);
+}
+
+@function twbs-image-path($path) {
+ @return image-path($path);
+}
+
+$bootstrap-sass-asset-helper: true;
diff --git a/src/mol-plugin/skin/base/bootstrap/_bootstrap.scss b/src/mol-plugin/skin/base/bootstrap/_bootstrap.scss
new file mode 100644
index 0000000000000000000000000000000000000000..932fea7adc8604ea404345125b63d22ac213a0e2
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/_bootstrap.scss
@@ -0,0 +1,57 @@
+/*!
+ * Bootstrap v3.3.6 (http://getbootstrap.com)
+ * Copyright 2011-2015 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+// Core variables and mixins
+@import "bootstrap/variables";
+
+@import "bootstrap/mixins";
+
+// Reset and dependencies
+@import "bootstrap/normalize";
+//@import "bootstrap/print";
+//@import "bootstrap/glyphicons";
+
+// Core CSS
+@import "bootstrap/scaffolding";
+@import "bootstrap/type";
+//@import "bootstrap/code";
+//@import "bootstrap/grid";
+//@import "bootstrap/tables";
+@import "bootstrap/forms";
+@import "bootstrap/buttons";
+
+// Components
+//@import "bootstrap/component-animations";
+// @import "bootstrap/dropdowns";
+ @import "bootstrap/button-groups";
+ @import "bootstrap/input-groups";
+// @import "bootstrap/navs";
+// @import "bootstrap/navbar";
+// @import "bootstrap/breadcrumbs";
+// @import "bootstrap/pagination";
+// @import "bootstrap/pager";
+@import "bootstrap/labels";
+@import "bootstrap/badges";
+// @import "bootstrap/jumbotron";
+// @import "bootstrap/thumbnails";
+// @import "bootstrap/alerts";
+// @import "bootstrap/progress-bars";
+// @import "bootstrap/media";
+//@import "bootstrap/list-group";
+// @import "bootstrap/panels";
+// @import "bootstrap/responsive-embed";
+// @import "bootstrap/wells";
+//@import "bootstrap/close";
+
+// Components w/ JavaScript
+// @import "bootstrap/modals";
+// @import "bootstrap/tooltip";
+// @import "bootstrap/popovers";
+// @import "bootstrap/carousel";
+
+// // Utility classes
+ //@import "bootstrap/utilities";
+// @import "bootstrap/responsive-utilities";
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_alerts.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_alerts.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7d1e1fddd15d81820e7bcfbd4b270381cf3b9377
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_alerts.scss
@@ -0,0 +1,73 @@
+//
+// Alerts
+// --------------------------------------------------
+
+
+// Base styles
+// -------------------------
+
+.alert {
+ padding: $alert-padding;
+ margin-bottom: $line-height-computed;
+ border: 1px solid transparent;
+ border-radius: $alert-border-radius;
+
+ // Headings for larger alerts
+ h4 {
+ margin-top: 0;
+ // Specified for the h4 to prevent conflicts of changing $headings-color
+ color: inherit;
+ }
+
+ // Provide class for links that match alerts
+ .alert-link {
+ font-weight: $alert-link-font-weight;
+ }
+
+ // Improve alignment and spacing of inner content
+ > p,
+ > ul {
+ margin-bottom: 0;
+ }
+
+ > p + p {
+ margin-top: 5px;
+ }
+}
+
+// Dismissible alerts
+//
+// Expand the right padding and account for the close button's positioning.
+
+.alert-dismissable, // The misspelled .alert-dismissable was deprecated in 3.2.0.
+.alert-dismissible {
+ padding-right: ($alert-padding + 20);
+
+ // Adjust close link position
+ .close {
+ position: relative;
+ top: -2px;
+ right: -21px;
+ color: inherit;
+ }
+}
+
+// Alternate styles
+//
+// Generate contextual modifier classes for colorizing the alert.
+
+.alert-success {
+ @include alert-variant($alert-success-bg, $alert-success-border, $alert-success-text);
+}
+
+.alert-info {
+ @include alert-variant($alert-info-bg, $alert-info-border, $alert-info-text);
+}
+
+.alert-warning {
+ @include alert-variant($alert-warning-bg, $alert-warning-border, $alert-warning-text);
+}
+
+.alert-danger {
+ @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_badges.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_badges.scss
new file mode 100644
index 0000000000000000000000000000000000000000..06d25a80ec35c3488d04d429f39b7e6a824c63b2
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_badges.scss
@@ -0,0 +1,68 @@
+//
+// Badges
+// --------------------------------------------------
+
+
+// Base class
+.badge {
+ display: inline-block;
+ min-width: 10px;
+ padding: 3px 7px;
+ font-size: $font-size-small;
+ font-weight: $badge-font-weight;
+ color: $badge-color;
+ line-height: $badge-line-height;
+ vertical-align: middle;
+ white-space: nowrap;
+ text-align: center;
+ background-color: $badge-bg;
+ border-radius: $badge-border-radius;
+
+ // Empty badges collapse automatically (not available in IE8)
+ &:empty {
+ display: none;
+ }
+
+ // Quick fix for badges in buttons
+ .msp-btn & {
+ position: relative;
+ top: -1px;
+ }
+
+ .msp-btn-xs &,
+ .msp-btn-group-xs > .msp-btn & {
+ top: 0;
+ padding: 1px 5px;
+ }
+
+ // [converter] extracted a& to a.badge
+
+ // Account for badges in navs
+ .list-group-item.active > &,
+ .nav-pills > .active > a > & {
+ color: $badge-active-color;
+ background-color: $badge-active-bg;
+ }
+
+ .list-group-item > & {
+ float: right;
+ }
+
+ .list-group-item > & + & {
+ margin-right: 5px;
+ }
+
+ .nav-pills > li > a > & {
+ margin-left: 3px;
+ }
+}
+
+// Hover state, but only for links
+a.badge {
+ &:hover,
+ &:focus {
+ color: $badge-link-hover-color;
+ text-decoration: none;
+ cursor: pointer;
+ }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_breadcrumbs.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_breadcrumbs.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b61f0c731caf2f99d3fba09e6643216c679984a6
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_breadcrumbs.scss
@@ -0,0 +1,28 @@
+//
+// Breadcrumbs
+// --------------------------------------------------
+
+
+.breadcrumb {
+ padding: $breadcrumb-padding-vertical $breadcrumb-padding-horizontal;
+ margin-bottom: $line-height-computed;
+ list-style: none;
+ background-color: $breadcrumb-bg;
+ border-radius: $border-radius-base;
+
+ > li {
+ display: inline-block;
+
+ + li:before {
+ // [converter] Workaround for https://github.com/sass/libsass/issues/1115
+ $nbsp: "\00a0";
+ content: "#{$breadcrumb-separator}#{$nbsp}"; // Unicode space added since inline-block means non-collapsing white-space
+ padding: 0 5px;
+ color: $breadcrumb-color;
+ }
+ }
+
+ > .active {
+ color: $breadcrumb-active-color;
+ }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_button-groups.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_button-groups.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6f66f8fcfd8f20ffe9fbd1229fe2d66f4589e5fe
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_button-groups.scss
@@ -0,0 +1,244 @@
+//
+// Button groups
+// --------------------------------------------------
+
+// Make the div behave like a button
+.msp-btn-group,
+.msp-btn-group-vertical {
+ position: relative;
+ display: inline-block;
+ vertical-align: middle; // match .msp-btn alignment given font-size hack above
+ > .msp-btn {
+ position: relative;
+ float: left;
+ // Bring the "active" button to the front
+ &:hover,
+ &:focus,
+ &:active,
+ &.active {
+ z-index: 2;
+ }
+ }
+}
+
+// Prevent double borders when buttons are next to each other
+.msp-btn-group {
+ .msp-btn + .msp-btn,
+ .msp-btn + .msp-btn-group,
+ .msp-btn-group + .msp-btn,
+ .msp-btn-group + .msp-btn-group {
+ margin-left: -1px;
+ }
+}
+
+// Optional: Group multiple button groups together for a toolbar
+.msp-btn-toolbar {
+ margin-left: -5px; // Offset the first child's margin
+ @include clearfix;
+
+ .msp-btn,
+ .msp-btn-group,
+ .input-group {
+ float: left;
+ }
+ > .msp-btn,
+ > .msp-btn-group,
+ > .input-group {
+ margin-left: 5px;
+ }
+}
+
+.msp-btn-group > .msp-btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
+ border-radius: 0;
+}
+
+// Set corners individual because sometimes a single button can be in a .msp-btn-group and we need :first-child and :last-child to both match
+.msp-btn-group > .msp-btn:first-child {
+ margin-left: 0;
+ &:not(:last-child):not(.dropdown-toggle) {
+ @include border-right-radius(0);
+ }
+}
+// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
+.msp-btn-group > .msp-btn:last-child:not(:first-child),
+.msp-btn-group > .dropdown-toggle:not(:first-child) {
+ @include border-left-radius(0);
+}
+
+// Custom edits for including msp-btn-groups within msp-btn-groups (useful for including dropdown buttons within a msp-btn-group)
+.msp-btn-group > .msp-btn-group {
+ float: left;
+}
+.msp-btn-group > .msp-btn-group:not(:first-child):not(:last-child) > .msp-btn {
+ border-radius: 0;
+}
+.msp-btn-group > .msp-btn-group:first-child:not(:last-child) {
+ > .msp-btn:last-child,
+ > .dropdown-toggle {
+ @include border-right-radius(0);
+ }
+}
+.msp-btn-group > .msp-btn-group:last-child:not(:first-child) > .msp-btn:first-child {
+ @include border-left-radius(0);
+}
+
+// On active and open, don't show outline
+.msp-btn-group .dropdown-toggle:active,
+.msp-btn-group.open .dropdown-toggle {
+ outline: 0;
+}
+
+
+// Sizing
+//
+// Remix the default button sizing classes into new ones for easier manipulation.
+
+.msp-btn-group-xs > .msp-btn { @extend .msp-btn-xs; }
+.msp-btn-group-sm > .msp-btn { @extend .msp-btn-sm; }
+.msp-btn-group-lg > .msp-btn { @extend .msp-btn-lg; }
+
+
+// Split button dropdowns
+// ----------------------
+
+// Give the line between buttons some depth
+.msp-btn-group > .msp-btn + .dropdown-toggle {
+ padding-left: 8px;
+ padding-right: 8px;
+}
+.msp-btn-group > .msp-btn-lg + .dropdown-toggle {
+ padding-left: 12px;
+ padding-right: 12px;
+}
+
+// The clickable button for toggling the menu
+// Remove the gradient and set the same inset shadow as the :active state
+.msp-btn-group.open .dropdown-toggle {
+ @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
+
+ // Show no shadow for `.msp-btn-link` since it has no other button styles.
+ &.msp-btn-link {
+ @include box-shadow(none);
+ }
+}
+
+
+// Reposition the caret
+.msp-btn .caret {
+ margin-left: 0;
+}
+// Carets in other button sizes
+.msp-btn-lg .caret {
+ border-width: $caret-width-large $caret-width-large 0;
+ border-bottom-width: 0;
+}
+// Upside down carets for .dropup
+.dropup .msp-btn-lg .caret {
+ border-width: 0 $caret-width-large $caret-width-large;
+}
+
+
+// Vertical button groups
+// ----------------------
+
+.msp-btn-group-vertical {
+ > .msp-btn,
+ > .msp-btn-group,
+ > .msp-btn-group > .msp-btn {
+ display: block;
+ float: none;
+ width: 100%;
+ max-width: 100%;
+ }
+
+ // Clear floats so dropdown menus can be properly placed
+ > .msp-btn-group {
+ @include clearfix;
+ > .msp-btn {
+ float: none;
+ }
+ }
+
+ > .msp-btn + .msp-btn,
+ > .msp-btn + .msp-btn-group,
+ > .msp-btn-group + .msp-btn,
+ > .msp-btn-group + .msp-btn-group {
+ margin-top: -1px;
+ margin-left: 0;
+ }
+}
+
+.msp-btn-group-vertical > .msp-btn {
+ &:not(:first-child):not(:last-child) {
+ border-radius: 0;
+ }
+ &:first-child:not(:last-child) {
+ @include border-top-radius($msp-btn-border-radius-base);
+ @include border-bottom-radius(0);
+ }
+ &:last-child:not(:first-child) {
+ @include border-top-radius(0);
+ @include border-bottom-radius($msp-btn-border-radius-base);
+ }
+}
+.msp-btn-group-vertical > .msp-btn-group:not(:first-child):not(:last-child) > .msp-btn {
+ border-radius: 0;
+}
+.msp-btn-group-vertical > .msp-btn-group:first-child:not(:last-child) {
+ > .msp-btn:last-child,
+ > .dropdown-toggle {
+ @include border-bottom-radius(0);
+ }
+}
+.msp-btn-group-vertical > .msp-btn-group:last-child:not(:first-child) > .msp-btn:first-child {
+ @include border-top-radius(0);
+}
+
+
+// Justified button groups
+// ----------------------
+
+.msp-btn-group-justified {
+ display: table;
+ width: 100%;
+ table-layout: fixed;
+ border-collapse: separate;
+ > .msp-btn,
+ > .msp-btn-group {
+ float: none;
+ display: table-cell;
+ width: 1%;
+ }
+ > .msp-btn-group .msp-btn {
+ width: 100%;
+ }
+
+ > .msp-btn-group .dropdown-menu {
+ left: auto;
+ }
+}
+
+
+// Checkbox and radio options
+//
+// In order to support the browser's form validation feedback, powered by the
+// `required` attribute, we have to "hide" the inputs via `clip`. We cannot use
+// `display: none;` or `visibility: hidden;` as that also hides the popover.
+// Simply visually hiding the inputs via `opacity` would leave them clickable in
+// certain cases which is prevented by using `clip` and `pointer-events`.
+// This way, we ensure a DOM element is visible to position the popover from.
+//
+// See https://github.com/twbs/bootstrap/pull/12794 and
+// https://github.com/twbs/bootstrap/pull/14559 for more information.
+
+[data-toggle="buttons"] {
+ > .msp-btn,
+ > .msp-btn-group > .msp-btn {
+ input[type="radio"],
+ input[type="checkbox"] {
+ position: absolute;
+ clip: rect(0,0,0,0);
+ pointer-events: none;
+ }
+ }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_buttons.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_buttons.scss
new file mode 100644
index 0000000000000000000000000000000000000000..03c0bfe44e2576411ff0ac675d337073d9f982b6
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_buttons.scss
@@ -0,0 +1,168 @@
+//
+// Buttons
+// --------------------------------------------------
+
+
+// Base styles
+// --------------------------------------------------
+
+.msp-btn {
+ display: inline-block;
+ margin-bottom: 0; // For input.msp-btn
+ font-weight: $msp-btn-font-weight;
+ text-align: center;
+ vertical-align: middle;
+ touch-action: manipulation;
+ cursor: pointer;
+ background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+ border: 1px solid transparent;
+ white-space: nowrap;
+ @include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $msp-btn-border-radius-base);
+ @include user-select(none);
+
+ &,
+ &:active,
+ &.active {
+ &:focus,
+ &.focus {
+ @include tab-focus;
+ }
+ }
+
+ &:hover,
+ &:focus,
+ &.focus {
+ color: $msp-btn-default-color;
+ text-decoration: none;
+ }
+
+ &:active,
+ &.active {
+ outline: 0;
+ background-image: none;
+ @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
+ }
+
+ &.disabled,
+ &[disabled],
+ fieldset[disabled] & {
+ cursor: $cursor-disabled;
+ @include opacity(.65);
+ @include box-shadow(none);
+ }
+
+ // [converter] extracted a& to a.msp-btn
+}
+
+a.msp-btn {
+ &.disabled,
+ fieldset[disabled] & {
+ pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
+ }
+}
+
+
+// Alternate buttons
+// --------------------------------------------------
+
+.msp-btn-default {
+ @include button-variant($msp-btn-default-color, $msp-btn-default-bg, $msp-btn-default-border);
+}
+.msp-btn-primary {
+ @include button-variant($msp-btn-primary-color, $msp-btn-primary-bg, $msp-btn-primary-border);
+}
+// Success appears as green
+.msp-btn-success {
+ @include button-variant($msp-btn-success-color, $msp-btn-success-bg, $msp-btn-success-border);
+}
+// Info appears as blue-green
+.msp-btn-info {
+ @include button-variant($msp-btn-info-color, $msp-btn-info-bg, $msp-btn-info-border);
+}
+// Warning appears as orange
+.msp-btn-warning {
+ @include button-variant($msp-btn-warning-color, $msp-btn-warning-bg, $msp-btn-warning-border);
+}
+// Danger and error appear as red
+.msp-btn-danger {
+ @include button-variant($msp-btn-danger-color, $msp-btn-danger-bg, $msp-btn-danger-border);
+}
+
+
+// Link buttons
+// -------------------------
+
+// Make a button look and behave like a link
+.msp-btn-link {
+ color: $link-color;
+ font-weight: normal;
+ border-radius: 0;
+
+ &,
+ &:active,
+ &.active,
+ &[disabled],
+ fieldset[disabled] & {
+ background-color: transparent;
+ @include box-shadow(none);
+ }
+ &,
+ &:hover,
+ &:focus,
+ &:active {
+ border-color: transparent;
+ }
+ &:hover,
+ &:focus {
+ color: $link-hover-color;
+ text-decoration: $link-hover-decoration;
+ background-color: transparent;
+ }
+ &[disabled],
+ fieldset[disabled] & {
+ &:hover,
+ &:focus {
+ color: $msp-btn-link-disabled-color;
+ text-decoration: none;
+ }
+ }
+}
+
+
+// Button Sizes
+// --------------------------------------------------
+
+.msp-btn-lg {
+ // line-height: ensure even-numbered height of button next to large input
+ @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $msp-btn-border-radius-large);
+}
+.msp-btn-sm {
+ // line-height: ensure proper height of button next to small input
+ @include button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $msp-btn-border-radius-small);
+}
+.msp-btn-xs {
+ @include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $line-height-small, $msp-btn-border-radius-small);
+}
+
+
+// Block button
+// --------------------------------------------------
+
+.msp-btn-block {
+ display: block;
+ width: 100%;
+}
+
+// Vertically space out multiple block buttons
+.msp-btn-block + .msp-btn-block {
+ margin-top: 5px;
+}
+
+// Specificity overrides
+input[type="submit"],
+input[type="reset"],
+input[type="button"] {
+ &.msp-btn-block {
+ width: 100%;
+ }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_carousel.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_carousel.scss
new file mode 100644
index 0000000000000000000000000000000000000000..965a82e125cd160e6221cc2a32366f6586ea6754
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_carousel.scss
@@ -0,0 +1,270 @@
+//
+// Carousel
+// --------------------------------------------------
+
+
+// Wrapper for the slide container and indicators
+.carousel {
+ position: relative;
+}
+
+.carousel-inner {
+ position: relative;
+ overflow: hidden;
+ width: 100%;
+
+ > .item {
+ display: none;
+ position: relative;
+ @include transition(.6s ease-in-out left);
+
+ // Account for jankitude on images
+ > img,
+ > a > img {
+ @include img-responsive;
+ line-height: 1;
+ }
+
+ // WebKit CSS3 transforms for supported devices
+ @media all and (transform-3d), (-webkit-transform-3d) {
+ @include transition-transform(0.6s ease-in-out);
+ @include backface-visibility(hidden);
+ @include perspective(1000px);
+
+ &.next,
+ &.active.right {
+ @include translate3d(100%, 0, 0);
+ left: 0;
+ }
+ &.prev,
+ &.active.left {
+ @include translate3d(-100%, 0, 0);
+ left: 0;
+ }
+ &.next.left,
+ &.prev.right,
+ &.active {
+ @include translate3d(0, 0, 0);
+ left: 0;
+ }
+ }
+ }
+
+ > .active,
+ > .next,
+ > .prev {
+ display: block;
+ }
+
+ > .active {
+ left: 0;
+ }
+
+ > .next,
+ > .prev {
+ position: absolute;
+ top: 0;
+ width: 100%;
+ }
+
+ > .next {
+ left: 100%;
+ }
+ > .prev {
+ left: -100%;
+ }
+ > .next.left,
+ > .prev.right {
+ left: 0;
+ }
+
+ > .active.left {
+ left: -100%;
+ }
+ > .active.right {
+ left: 100%;
+ }
+
+}
+
+// Left/right controls for nav
+// ---------------------------
+
+.carousel-control {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ width: $carousel-control-width;
+ @include opacity($carousel-control-opacity);
+ font-size: $carousel-control-font-size;
+ color: $carousel-control-color;
+ text-align: center;
+ text-shadow: $carousel-text-shadow;
+ background-color: rgba(0, 0, 0, 0); // Fix IE9 click-thru bug
+ // We can't have this transition here because WebKit cancels the carousel
+ // animation if you trip this while in the middle of another animation.
+
+ // Set gradients for backgrounds
+ &.left {
+ @include gradient-horizontal($start-color: rgba(0,0,0,.5), $end-color: rgba(0,0,0,.0001));
+ }
+ &.right {
+ left: auto;
+ right: 0;
+ @include gradient-horizontal($start-color: rgba(0,0,0,.0001), $end-color: rgba(0,0,0,.5));
+ }
+
+ // Hover/focus state
+ &:hover,
+ &:focus {
+ outline: 0;
+ color: $carousel-control-color;
+ text-decoration: none;
+ @include opacity(.9);
+ }
+
+ // Toggles
+ .icon-prev,
+ .icon-next,
+ .glyphicon-chevron-left,
+ .glyphicon-chevron-right {
+ position: absolute;
+ top: 50%;
+ margin-top: -10px;
+ z-index: 5;
+ display: inline-block;
+ }
+ .icon-prev,
+ .glyphicon-chevron-left {
+ left: 50%;
+ margin-left: -10px;
+ }
+ .icon-next,
+ .glyphicon-chevron-right {
+ right: 50%;
+ margin-right: -10px;
+ }
+ .icon-prev,
+ .icon-next {
+ width: 20px;
+ height: 20px;
+ line-height: 1;
+ font-family: serif;
+ }
+
+
+ .icon-prev {
+ &:before {
+ content: '\2039';// SINGLE LEFT-POINTING ANGLE QUOTATION MARK (U+2039)
+ }
+ }
+ .icon-next {
+ &:before {
+ content: '\203a';// SINGLE RIGHT-POINTING ANGLE QUOTATION MARK (U+203A)
+ }
+ }
+}
+
+// Optional indicator pips
+//
+// Add an unordered list with the following class and add a list item for each
+// slide your carousel holds.
+
+.carousel-indicators {
+ position: absolute;
+ bottom: 10px;
+ left: 50%;
+ z-index: 15;
+ width: 60%;
+ margin-left: -30%;
+ padding-left: 0;
+ list-style: none;
+ text-align: center;
+
+ li {
+ display: inline-block;
+ width: 10px;
+ height: 10px;
+ margin: 1px;
+ text-indent: -999px;
+ border: 1px solid $carousel-indicator-border-color;
+ border-radius: 10px;
+ cursor: pointer;
+
+ // IE8-9 hack for event handling
+ //
+ // Internet Explorer 8-9 does not support clicks on elements without a set
+ // `background-color`. We cannot use `filter` since that's not viewed as a
+ // background color by the browser. Thus, a hack is needed.
+ // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Internet_Explorer
+ //
+ // For IE8, we set solid black as it doesn't support `rgba()`. For IE9, we
+ // set alpha transparency for the best results possible.
+ background-color: #000 \9; // IE8
+ background-color: rgba(0,0,0,0); // IE9
+ }
+ .active {
+ margin: 0;
+ width: 12px;
+ height: 12px;
+ background-color: $carousel-indicator-active-bg;
+ }
+}
+
+// Optional captions
+// -----------------------------
+// Hidden by default for smaller viewports
+.carousel-caption {
+ position: absolute;
+ left: 15%;
+ right: 15%;
+ bottom: 20px;
+ z-index: 10;
+ padding-top: 20px;
+ padding-bottom: 20px;
+ color: $carousel-caption-color;
+ text-align: center;
+ text-shadow: $carousel-text-shadow;
+ & .msp-btn {
+ text-shadow: none; // No shadow for button elements in carousel-caption
+ }
+}
+
+
+// Scale up controls for tablets and up
+@media screen and (min-width: $screen-sm-min) {
+
+ // Scale up the controls a smidge
+ .carousel-control {
+ .glyphicon-chevron-left,
+ .glyphicon-chevron-right,
+ .icon-prev,
+ .icon-next {
+ width: ($carousel-control-font-size * 1.5);
+ height: ($carousel-control-font-size * 1.5);
+ margin-top: ($carousel-control-font-size / -2);
+ font-size: ($carousel-control-font-size * 1.5);
+ }
+ .glyphicon-chevron-left,
+ .icon-prev {
+ margin-left: ($carousel-control-font-size / -2);
+ }
+ .glyphicon-chevron-right,
+ .icon-next {
+ margin-right: ($carousel-control-font-size / -2);
+ }
+ }
+
+ // Show and left align the captions
+ .carousel-caption {
+ left: 20%;
+ right: 20%;
+ padding-bottom: 30px;
+ }
+
+ // Move up the indicators
+ .carousel-indicators {
+ bottom: 20px;
+ }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_close.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_close.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3b74d8a973c2be2a1c5ae3002a5935de577dda30
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_close.scss
@@ -0,0 +1,36 @@
+//
+// Close icons
+// --------------------------------------------------
+
+
+.close {
+ float: right;
+ font-size: ($font-size-base * 1.5);
+ font-weight: $close-font-weight;
+ line-height: 1;
+ color: $close-color;
+ text-shadow: $close-text-shadow;
+ @include opacity(.2);
+
+ &:hover,
+ &:focus {
+ color: $close-color;
+ text-decoration: none;
+ cursor: pointer;
+ @include opacity(.5);
+ }
+
+ // [converter] extracted button& to button.close
+}
+
+// Additional properties for button version
+// iOS requires the button element instead of an anchor tag.
+// If you want the anchor version, it requires `href="#"`.
+// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+button.close {
+ padding: 0;
+ cursor: pointer;
+ background: transparent;
+ border: 0;
+ -webkit-appearance: none;
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_code.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_code.scss
new file mode 100644
index 0000000000000000000000000000000000000000..caa5f06304c8e575b3fabdfdc7639af6d4053cd2
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_code.scss
@@ -0,0 +1,69 @@
+//
+// Code (inline and block)
+// --------------------------------------------------
+
+
+// Inline and block code styles
+code,
+kbd,
+pre,
+samp {
+ font-family: $font-family-monospace;
+}
+
+// Inline code
+code {
+ padding: 2px 4px;
+ font-size: 90%;
+ color: $code-color;
+ background-color: $code-bg;
+ border-radius: $border-radius-base;
+}
+
+// User input typically entered via keyboard
+kbd {
+ padding: 2px 4px;
+ font-size: 90%;
+ color: $kbd-color;
+ background-color: $kbd-bg;
+ border-radius: $border-radius-small;
+ box-shadow: inset 0 -1px 0 rgba(0,0,0,.25);
+
+ kbd {
+ padding: 0;
+ font-size: 100%;
+ font-weight: bold;
+ box-shadow: none;
+ }
+}
+
+// Blocks of code
+pre {
+ display: block;
+ padding: (($line-height-computed - 1) / 2);
+ margin: 0 0 ($line-height-computed / 2);
+ font-size: ($font-size-base - 1); // 14px to 13px
+ line-height: $line-height-base;
+ word-break: break-all;
+ word-wrap: break-word;
+ color: $pre-color;
+ background-color: $pre-bg;
+ border: 1px solid $pre-border-color;
+ border-radius: $border-radius-base;
+
+ // Account for some code outputs that place code tags in pre tags
+ code {
+ padding: 0;
+ font-size: inherit;
+ color: inherit;
+ white-space: pre-wrap;
+ background-color: transparent;
+ border-radius: 0;
+ }
+}
+
+// Enable scrollable blocks of code
+.pre-scrollable {
+ max-height: $pre-scrollable-max-height;
+ overflow-y: scroll;
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_component-animations.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_component-animations.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ca3b43ca788fff99fb8f46626fdb1ea2efbe9ffc
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_component-animations.scss
@@ -0,0 +1,37 @@
+//
+// Component animations
+// --------------------------------------------------
+
+// Heads up!
+//
+// We don't use the `.opacity()` mixin here since it causes a bug with text
+// fields in IE7-8. Source: https://github.com/twbs/bootstrap/pull/3552.
+
+.fade {
+ opacity: 0;
+ @include transition(opacity .15s linear);
+ &.in {
+ opacity: 1;
+ }
+}
+
+.collapse {
+ display: none;
+
+ &.in { display: block; }
+ // [converter] extracted tr&.in to tr.collapse.in
+ // [converter] extracted tbody&.in to tbody.collapse.in
+}
+
+tr.collapse.in { display: table-row; }
+
+tbody.collapse.in { display: table-row-group; }
+
+.collapsing {
+ position: relative;
+ height: 0;
+ overflow: hidden;
+ @include transition-property(height, visibility);
+ @include transition-duration(.35s);
+ @include transition-timing-function(ease);
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_dropdowns.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_dropdowns.scss
new file mode 100644
index 0000000000000000000000000000000000000000..aac84597a496ee873bed7e31498dce970da831ca
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_dropdowns.scss
@@ -0,0 +1,216 @@
+//
+// Dropdown menus
+// --------------------------------------------------
+
+
+// Dropdown arrow/caret
+.caret {
+ display: inline-block;
+ width: 0;
+ height: 0;
+ margin-left: 2px;
+ vertical-align: middle;
+ border-top: $caret-width-base dashed;
+ border-top: $caret-width-base solid \9; // IE8
+ border-right: $caret-width-base solid transparent;
+ border-left: $caret-width-base solid transparent;
+}
+
+// The dropdown wrapper (div)
+.dropup,
+.dropdown {
+ position: relative;
+}
+
+// Prevent the focus on the dropdown toggle when closing dropdowns
+.dropdown-toggle:focus {
+ outline: 0;
+}
+
+// The dropdown menu (ul)
+.dropdown-menu {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ z-index: $zindex-dropdown;
+ display: none; // none by default, but block on "open" of the menu
+ float: left;
+ min-width: 160px;
+ padding: 5px 0;
+ margin: 2px 0 0; // override default ul
+ list-style: none;
+ font-size: $font-size-base;
+ text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
+ background-color: $dropdown-bg;
+ border: 1px solid $dropdown-fallback-border; // IE8 fallback
+ border: 1px solid $dropdown-border;
+ border-radius: $border-radius-base;
+ @include box-shadow(0 6px 12px rgba(0,0,0,.175));
+ background-clip: padding-box;
+
+ // Aligns the dropdown menu to right
+ //
+ // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]`
+ &.pull-right {
+ right: 0;
+ left: auto;
+ }
+
+ // Dividers (basically an hr) within the dropdown
+ .divider {
+ @include nav-divider($dropdown-divider-bg);
+ }
+
+ // Links within the dropdown menu
+ > li > a {
+ display: block;
+ padding: 3px 20px;
+ clear: both;
+ font-weight: normal;
+ line-height: $line-height-base;
+ color: $dropdown-link-color;
+ white-space: nowrap; // prevent links from randomly breaking onto new lines
+ }
+}
+
+// Hover/Focus state
+.dropdown-menu > li > a {
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ color: $dropdown-link-hover-color;
+ background-color: $dropdown-link-hover-bg;
+ }
+}
+
+// Active state
+.dropdown-menu > .active > a {
+ &,
+ &:hover,
+ &:focus {
+ color: $dropdown-link-active-color;
+ text-decoration: none;
+ outline: 0;
+ background-color: $dropdown-link-active-bg;
+ }
+}
+
+// Disabled state
+//
+// Gray out text and ensure the hover/focus state remains gray
+
+.dropdown-menu > .disabled > a {
+ &,
+ &:hover,
+ &:focus {
+ color: $dropdown-link-disabled-color;
+ }
+
+ // Nuke hover/focus effects
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ background-color: transparent;
+ background-image: none; // Remove CSS gradient
+ @include reset-filter;
+ cursor: $cursor-disabled;
+ }
+}
+
+// Open state for the dropdown
+.open {
+ // Show the menu
+ > .dropdown-menu {
+ display: block;
+ }
+
+ // Remove the outline when :focus is triggered
+ > a {
+ outline: 0;
+ }
+}
+
+// Menu positioning
+//
+// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
+// menu with the parent.
+.dropdown-menu-right {
+ left: auto; // Reset the default from `.dropdown-menu`
+ right: 0;
+}
+// With v3, we enabled auto-flipping if you have a dropdown within a right
+// aligned nav component. To enable the undoing of that, we provide an override
+// to restore the default dropdown menu alignment.
+//
+// This is only for left-aligning a dropdown menu within a `.navbar-right` or
+// `.pull-right` nav component.
+.dropdown-menu-left {
+ left: 0;
+ right: auto;
+}
+
+// Dropdown section headers
+.dropdown-header {
+ display: block;
+ padding: 3px 20px;
+ font-size: $font-size-small;
+ line-height: $line-height-base;
+ color: $dropdown-header-color;
+ white-space: nowrap; // as with > li > a
+}
+
+// Backdrop to catch body clicks on mobile, etc.
+.dropdown-backdrop {
+ position: fixed;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ top: 0;
+ z-index: ($zindex-dropdown - 10);
+}
+
+// Right aligned dropdowns
+.pull-right > .dropdown-menu {
+ right: 0;
+ left: auto;
+}
+
+// Allow for dropdowns to go bottom up (aka, dropup-menu)
+//
+// Just add .dropup after the standard .dropdown class and you're set, bro.
+// TODO: abstract this so that the navbar fixed styles are not placed here?
+
+.dropup,
+.navbar-fixed-bottom .dropdown {
+ // Reverse the caret
+ .caret {
+ border-top: 0;
+ border-bottom: $caret-width-base dashed;
+ border-bottom: $caret-width-base solid \9; // IE8
+ content: "";
+ }
+ // Different positioning for bottom up menu
+ .dropdown-menu {
+ top: auto;
+ bottom: 100%;
+ margin-bottom: 2px;
+ }
+}
+
+
+// Component alignment
+//
+// Reiterate per navbar.less and the modified component alignment there.
+
+@media (min-width: $grid-float-breakpoint) {
+ .navbar-right {
+ .dropdown-menu {
+ right: 0; left: auto;
+ }
+ // Necessary for overrides of the default right aligned menu.
+ // Will remove come v4 in all likelihood.
+ .dropdown-menu-left {
+ left: 0; right: auto;
+ }
+ }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_forms.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_forms.scss
new file mode 100644
index 0000000000000000000000000000000000000000..bd47375adb24aecbff0377177f1ac192dc6b5d02
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_forms.scss
@@ -0,0 +1,617 @@
+//
+// Forms
+// --------------------------------------------------
+
+
+// Normalize non-controls
+//
+// Restyle and baseline non-control form elements.
+
+fieldset {
+ padding: 0;
+ margin: 0;
+ border: 0;
+ // Chrome and Firefox set a `min-width: min-content;` on fieldsets,
+ // so we reset that to ensure it behaves more like a standard block element.
+ // See https://github.com/twbs/bootstrap/issues/12359.
+ min-width: 0;
+}
+
+legend {
+ display: block;
+ width: 100%;
+ padding: 0;
+ margin-bottom: $line-height-computed;
+ font-size: ($font-size-base * 1.5);
+ line-height: inherit;
+ color: $legend-color;
+ border: 0;
+ border-bottom: 1px solid $legend-border-color;
+}
+
+label {
+ display: inline-block;
+ max-width: 100%; // Force IE8 to wrap long content (see https://github.com/twbs/bootstrap/issues/13141)
+ margin-bottom: 5px;
+ font-weight: bold;
+}
+
+
+// Normalize form controls
+//
+// While most of our form styles require extra classes, some basic normalization
+// is required to ensure optimum display with or without those classes to better
+// address browser inconsistencies.
+
+// Override content-box in Normalize (* isn't specific enough)
+input[type="search"] {
+ @include box-sizing(border-box);
+}
+
+// Position radios and checkboxes better
+input[type="radio"],
+input[type="checkbox"] {
+ margin: 4px 0 0;
+ margin-top: 1px \9; // IE8-9
+ line-height: normal;
+}
+
+input[type="file"] {
+ display: block;
+}
+
+// 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] {
+ height: auto;
+}
+
+// Focus for file, radio, and checkbox
+input[type="file"]:focus,
+input[type="radio"]:focus,
+input[type="checkbox"]:focus {
+ @include tab-focus;
+}
+
+// Adjust output element
+output {
+ display: block;
+ padding-top: ($padding-base-vertical + 1);
+ font-size: $font-size-base;
+ line-height: $line-height-base;
+ color: $input-color;
+}
+
+
+// Common form controls
+//
+// Shared size and type resets for form controls. Apply `.msp-form-control` to any
+// of the following form controls:
+//
+// select
+// textarea
+// input[type="text"]
+// input[type="password"]
+// input[type="datetime"]
+// input[type="datetime-local"]
+// input[type="date"]
+// input[type="month"]
+// input[type="time"]
+// input[type="week"]
+// input[type="number"]
+// input[type="email"]
+// input[type="url"]
+// input[type="search"]
+// input[type="tel"]
+// input[type="color"]
+
+.msp-form-control {
+ display: block;
+ width: 100%;
+ height: $input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+ padding: $padding-base-vertical $padding-base-horizontal;
+ font-size: $font-size-base;
+ line-height: $line-height-base;
+ color: $input-color;
+ background-color: $input-bg;
+ background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+ border: 1px solid $input-border;
+ border-radius: $input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
+ //@include box-shadow(none);//inset 0 1px 1px rgba(0,0,0,.075));
+ //@include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
+
+ // Customize the `:focus` state to imitate native WebKit styles.
+ @include msp-form-control-focus;
+
+ // Placeholder
+ @include placeholder;
+
+ // Unstyle the caret on `<select>`s in IE10+.
+ &::-ms-expand {
+ border: 0;
+ background-color: transparent;
+ }
+
+ // Disabled and read-only inputs
+ //
+ // HTML5 says that controls under a fieldset > legend:first-child won't be
+ // disabled if the fieldset is disabled. Due to implementation difficulty, we
+ // don't honor that edge case; we style them as disabled anyway.
+ &[disabled],
+ &[readonly],
+ fieldset[disabled] & {
+ background-color: $input-bg-disabled;
+ opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
+ }
+
+ &[disabled],
+ fieldset[disabled] & {
+ cursor: $cursor-disabled;
+ }
+
+ // [converter] extracted textarea& to textarea.msp-form-control
+}
+
+// Reset height for `textarea`s
+textarea.msp-form-control {
+ height: auto;
+}
+
+
+// Search inputs in iOS
+//
+// This overrides the extra rounded corners on search inputs in iOS so that our
+// `.msp-form-control` class can properly style them. Note that this cannot simply
+// be added to `.msp-form-control` as it's not specific enough. For details, see
+// https://github.com/twbs/bootstrap/issues/11586.
+
+input[type="search"] {
+ -webkit-appearance: none;
+}
+
+
+// Special styles for iOS temporal inputs
+//
+// In Mobile Safari, setting `display: block` on temporal inputs causes the
+// text within the input to become vertically misaligned. As a workaround, we
+// set a pixel line-height that matches the given height of the input, but only
+// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
+//
+// Note that as of 8.3, iOS doesn't support `datetime` or `week`.
+
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+ input[type="date"],
+ input[type="time"],
+ input[type="datetime-local"],
+ input[type="month"] {
+ &.msp-form-control {
+ line-height: $input-height-base;
+ }
+
+ &.input-sm,
+ .input-group-sm & {
+ line-height: $input-height-small;
+ }
+
+ &.input-lg,
+ .input-group-lg & {
+ line-height: $input-height-large;
+ }
+ }
+}
+
+
+// Form groups
+//
+// Designed to help with the organization and spacing of vertical forms. For
+// horizontal forms, use the predefined grid classes.
+
+.form-group {
+ margin-bottom: $form-group-margin-bottom;
+}
+
+
+// Checkboxes and radios
+//
+// Indent the labels to position radios/checkboxes as hanging controls.
+
+.radio,
+.checkbox {
+ position: relative;
+ display: block;
+ margin-top: 10px;
+ margin-bottom: 10px;
+
+ label {
+ min-height: $line-height-computed; // Ensure the input doesn't jump when there is no text
+ padding-left: 20px;
+ margin-bottom: 0;
+ font-weight: normal;
+ cursor: pointer;
+ }
+}
+.radio input[type="radio"],
+.radio-inline input[type="radio"],
+.checkbox input[type="checkbox"],
+.checkbox-inline input[type="checkbox"] {
+ position: absolute;
+ margin-left: -20px;
+ margin-top: 4px \9;
+}
+
+.radio + .radio,
+.checkbox + .checkbox {
+ margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing
+}
+
+// Radios and checkboxes on same line
+.radio-inline,
+.checkbox-inline {
+ position: relative;
+ display: inline-block;
+ padding-left: 20px;
+ margin-bottom: 0;
+ vertical-align: middle;
+ font-weight: normal;
+ cursor: pointer;
+}
+.radio-inline + .radio-inline,
+.checkbox-inline + .checkbox-inline {
+ margin-top: 0;
+ margin-left: 10px; // space out consecutive inline controls
+}
+
+// Apply same disabled cursor tweak as for inputs
+// Some special care is needed because <label>s don't inherit their parent's `cursor`.
+//
+// Note: Neither radios nor checkboxes can be readonly.
+input[type="radio"],
+input[type="checkbox"] {
+ &[disabled],
+ &.disabled,
+ fieldset[disabled] & {
+ cursor: $cursor-disabled;
+ }
+}
+// These classes are used directly on <label>s
+.radio-inline,
+.checkbox-inline {
+ &.disabled,
+ fieldset[disabled] & {
+ cursor: $cursor-disabled;
+ }
+}
+// These classes are used on elements with <label> descendants
+.radio,
+.checkbox {
+ &.disabled,
+ fieldset[disabled] & {
+ label {
+ cursor: $cursor-disabled;
+ }
+ }
+}
+
+
+// Static form control text
+//
+// Apply class to a `p` element to make any string of text align with labels in
+// a horizontal form layout.
+
+.msp-form-control-static {
+ // Size it appropriately next to real form controls
+ padding-top: ($padding-base-vertical + 1);
+ padding-bottom: ($padding-base-vertical + 1);
+ // Remove default margin from `p`
+ margin-bottom: 0;
+ min-height: ($line-height-computed + $font-size-base);
+
+ &.input-lg,
+ &.input-sm {
+ padding-left: 0;
+ padding-right: 0;
+ }
+}
+
+
+// Form control sizing
+//
+// Build on `.msp-form-control` with modifier classes to decrease or increase the
+// height and font-size of form controls.
+//
+// The `.form-group-* msp-form-control` variations are sadly duplicated to avoid the
+// issue documented in https://github.com/twbs/bootstrap/issues/15074.
+
+@include input-size('.input-sm', $input-height-small, $padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $input-border-radius-small);
+.form-group-sm {
+ .msp-form-control {
+ height: $input-height-small;
+ padding: $padding-small-vertical $padding-small-horizontal;
+ font-size: $font-size-small;
+ line-height: $line-height-small;
+ border-radius: $input-border-radius-small;
+ }
+ select.msp-form-control {
+ height: $input-height-small;
+ line-height: $input-height-small;
+ }
+ textarea.msp-form-control,
+ select[multiple].msp-form-control {
+ height: auto;
+ }
+ .msp-form-control-static {
+ height: $input-height-small;
+ min-height: ($line-height-computed + $font-size-small);
+ padding: ($padding-small-vertical + 1) $padding-small-horizontal;
+ font-size: $font-size-small;
+ line-height: $line-height-small;
+ }
+}
+
+@include input-size('.input-lg', $input-height-large, $padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $input-border-radius-large);
+.form-group-lg {
+ .msp-form-control {
+ height: $input-height-large;
+ padding: $padding-large-vertical $padding-large-horizontal;
+ font-size: $font-size-large;
+ line-height: $line-height-large;
+ border-radius: $input-border-radius-large;
+ }
+ select.msp-form-control {
+ height: $input-height-large;
+ line-height: $input-height-large;
+ }
+ textarea.msp-form-control,
+ select[multiple].msp-form-control {
+ height: auto;
+ }
+ .msp-form-control-static {
+ height: $input-height-large;
+ min-height: ($line-height-computed + $font-size-large);
+ padding: ($padding-large-vertical + 1) $padding-large-horizontal;
+ font-size: $font-size-large;
+ line-height: $line-height-large;
+ }
+}
+
+
+// Form control feedback states
+//
+// Apply contextual and semantic states to individual form controls.
+
+.has-feedback {
+ // Enable absolute positioning
+ position: relative;
+
+ // Ensure icons don't overlap text
+ .msp-form-control {
+ padding-right: ($input-height-base * 1.25);
+ }
+}
+// Feedback icon (requires .glyphicon classes)
+.msp-form-control-feedback {
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: 2; // Ensure icon is above input groups
+ display: block;
+ width: $input-height-base;
+ height: $input-height-base;
+ line-height: $input-height-base;
+ text-align: center;
+ pointer-events: none;
+}
+.input-lg + .msp-form-control-feedback,
+.input-group-lg + .msp-form-control-feedback,
+.form-group-lg .msp-form-control + .msp-form-control-feedback {
+ width: $input-height-large;
+ height: $input-height-large;
+ line-height: $input-height-large;
+}
+.input-sm + .msp-form-control-feedback,
+.input-group-sm + .msp-form-control-feedback,
+.form-group-sm .msp-form-control + .msp-form-control-feedback {
+ width: $input-height-small;
+ height: $input-height-small;
+ line-height: $input-height-small;
+}
+
+// Feedback states
+.has-success {
+ @include msp-form-control-validation($state-success-text, $state-success-text, $state-success-bg);
+}
+.has-warning {
+ @include msp-form-control-validation($state-warning-text, $state-warning-text, $state-warning-bg);
+}
+.has-error {
+ @include msp-form-control-validation($state-danger-text, $state-danger-text, $state-danger-bg);
+}
+
+// Reposition feedback icon if input has visible label above
+.has-feedback label {
+
+ & ~ .msp-form-control-feedback {
+ top: ($line-height-computed + 5); // Height of the `label` and its margin
+ }
+ &.sr-only ~ .msp-form-control-feedback {
+ top: 0;
+ }
+}
+
+
+// Help text
+//
+// Apply to any element you wish to create light text for placement immediately
+// below a form control. Use for general help, formatting, or instructional text.
+
+.help-block {
+ display: block; // account for any element using help-block
+ margin-top: 5px;
+ margin-bottom: 10px;
+ color: lighten($text-color, 25%); // lighten the text some for contrast
+}
+
+
+// Inline forms
+//
+// Make forms appear inline(-block) by adding the `.form-inline` class. Inline
+// forms begin stacked on extra small (mobile) devices and then go inline when
+// viewports reach <768px.
+//
+// Requires wrapping inputs and labels with `.form-group` for proper display of
+// default HTML form controls and our custom form controls (e.g., input groups).
+//
+// Heads up! This is mixin-ed into `.navbar-form` in navbars.less.
+
+// [converter] extracted from `.form-inline` for libsass compatibility
+@mixin form-inline {
+
+ // Kick in the inline
+ @media (min-width: $screen-sm-min) {
+ // Inline-block all the things for "inline"
+ .form-group {
+ display: inline-block;
+ margin-bottom: 0;
+ vertical-align: middle;
+ }
+
+ // In navbar-form, allow folks to *not* use `.form-group`
+ .msp-form-control {
+ display: inline-block;
+ width: auto; // Prevent labels from stacking above inputs in `.form-group`
+ vertical-align: middle;
+ }
+
+ // Make static controls behave like regular ones
+ .msp-form-control-static {
+ display: inline-block;
+ }
+
+ .input-group {
+ display: inline-table;
+ vertical-align: middle;
+
+ .input-group-addon,
+ .input-group-msp-btn,
+ .msp-form-control {
+ width: auto;
+ }
+ }
+
+ // Input groups need that 100% width though
+ .input-group > .msp-form-control {
+ width: 100%;
+ }
+
+ .control-label {
+ margin-bottom: 0;
+ vertical-align: middle;
+ }
+
+ // Remove default margin on radios/checkboxes that were used for stacking, and
+ // then undo the floating of radios and checkboxes to match.
+ .radio,
+ .checkbox {
+ display: inline-block;
+ margin-top: 0;
+ margin-bottom: 0;
+ vertical-align: middle;
+
+ label {
+ padding-left: 0;
+ }
+ }
+ .radio input[type="radio"],
+ .checkbox input[type="checkbox"] {
+ position: relative;
+ margin-left: 0;
+ }
+
+ // Re-override the feedback icon.
+ .has-feedback .msp-form-control-feedback {
+ top: 0;
+ }
+ }
+}
+// [converter] extracted as `@mixin form-inline` for libsass compatibility
+.form-inline {
+ @include form-inline;
+}
+
+
+
+// Horizontal forms
+//
+// Horizontal forms are built on grid classes and allow you to create forms with
+// labels on the left and inputs on the right.
+
+.form-horizontal {
+
+ // Consistent vertical alignment of radios and checkboxes
+ //
+ // Labels also get some reset styles, but that is scoped to a media query below.
+ .radio,
+ .checkbox,
+ .radio-inline,
+ .checkbox-inline {
+ margin-top: 0;
+ margin-bottom: 0;
+ padding-top: ($padding-base-vertical + 1); // Default padding plus a border
+ }
+ // Account for padding we're adding to ensure the alignment and of help text
+ // and other content below items
+ .radio,
+ .checkbox {
+ min-height: ($line-height-computed + ($padding-base-vertical + 1));
+ }
+
+ // Make form groups behave like rows
+ .form-group {
+ @include make-row;
+ }
+
+ // Reset spacing and right align labels, but scope to media queries so that
+ // labels on narrow viewports stack the same as a default form example.
+ @media (min-width: $screen-sm-min) {
+ .control-label {
+ text-align: right;
+ margin-bottom: 0;
+ padding-top: ($padding-base-vertical + 1); // Default padding plus a border
+ }
+ }
+
+ // Validation states
+ //
+ // Reposition the icon because it's now within a grid column and columns have
+ // `position: relative;` on them. Also accounts for the grid gutter padding.
+ .has-feedback .msp-form-control-feedback {
+ right: floor(($grid-gutter-width / 2));
+ }
+
+ // Form group sizes
+ //
+ // Quick utility class for applying `.input-lg` and `.input-sm` styles to the
+ // inputs and labels within a `.form-group`.
+ .form-group-lg {
+ @media (min-width: $screen-sm-min) {
+ .control-label {
+ padding-top: ($padding-large-vertical + 1);
+ font-size: $font-size-large;
+ }
+ }
+ }
+ .form-group-sm {
+ @media (min-width: $screen-sm-min) {
+ .control-label {
+ padding-top: ($padding-small-vertical + 1);
+ font-size: $font-size-small;
+ }
+ }
+ }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_glyphicons.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_glyphicons.scss
new file mode 100644
index 0000000000000000000000000000000000000000..07a0fc91fe6dd8919fc4054e3134776b31170394
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_glyphicons.scss
@@ -0,0 +1,307 @@
+//
+// Glyphicons for Bootstrap
+//
+// Since icons are fonts, they can be placed anywhere text is placed and are
+// thus automatically sized to match the surrounding child. To use, create an
+// inline element with the appropriate classes, like so:
+//
+// <a href="#"><span class="glyphicon glyphicon-star"></span> Star</a>
+
+@at-root {
+ // Import the fonts
+ @font-face {
+ font-family: 'Glyphicons Halflings';
+ src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot'), '#{$icon-font-path}#{$icon-font-name}.eot'));
+ src: url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.eot?#iefix'), '#{$icon-font-path}#{$icon-font-name}.eot?#iefix')) format('embedded-opentype'),
+ url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff2'), '#{$icon-font-path}#{$icon-font-name}.woff2')) format('woff2'),
+ url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.woff'), '#{$icon-font-path}#{$icon-font-name}.woff')) format('woff'),
+ url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.ttf'), '#{$icon-font-path}#{$icon-font-name}.ttf')) format('truetype'),
+ url(if($bootstrap-sass-asset-helper, twbs-font-path('#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}'), '#{$icon-font-path}#{$icon-font-name}.svg##{$icon-font-svg-id}')) format('svg');
+ }
+}
+
+// Catchall baseclass
+.glyphicon {
+ position: relative;
+ top: 1px;
+ display: inline-block;
+ font-family: 'Glyphicons Halflings';
+ font-style: normal;
+ font-weight: normal;
+ line-height: 1;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+// Individual icons
+.glyphicon-asterisk { &:before { content: "\002a"; } }
+.glyphicon-plus { &:before { content: "\002b"; } }
+.glyphicon-euro,
+.glyphicon-eur { &:before { content: "\20ac"; } }
+.glyphicon-minus { &:before { content: "\2212"; } }
+.glyphicon-cloud { &:before { content: "\2601"; } }
+.glyphicon-envelope { &:before { content: "\2709"; } }
+.glyphicon-pencil { &:before { content: "\270f"; } }
+.glyphicon-glass { &:before { content: "\e001"; } }
+.glyphicon-music { &:before { content: "\e002"; } }
+.glyphicon-search { &:before { content: "\e003"; } }
+.glyphicon-heart { &:before { content: "\e005"; } }
+.glyphicon-star { &:before { content: "\e006"; } }
+.glyphicon-star-empty { &:before { content: "\e007"; } }
+.glyphicon-user { &:before { content: "\e008"; } }
+.glyphicon-film { &:before { content: "\e009"; } }
+.glyphicon-th-large { &:before { content: "\e010"; } }
+.glyphicon-th { &:before { content: "\e011"; } }
+.glyphicon-th-list { &:before { content: "\e012"; } }
+.glyphicon-ok { &:before { content: "\e013"; } }
+.glyphicon-remove { &:before { content: "\e014"; } }
+.glyphicon-zoom-in { &:before { content: "\e015"; } }
+.glyphicon-zoom-out { &:before { content: "\e016"; } }
+.glyphicon-off { &:before { content: "\e017"; } }
+.glyphicon-signal { &:before { content: "\e018"; } }
+.glyphicon-cog { &:before { content: "\e019"; } }
+.glyphicon-trash { &:before { content: "\e020"; } }
+.glyphicon-home { &:before { content: "\e021"; } }
+.glyphicon-file { &:before { content: "\e022"; } }
+.glyphicon-time { &:before { content: "\e023"; } }
+.glyphicon-road { &:before { content: "\e024"; } }
+.glyphicon-download-alt { &:before { content: "\e025"; } }
+.glyphicon-download { &:before { content: "\e026"; } }
+.glyphicon-upload { &:before { content: "\e027"; } }
+.glyphicon-inbox { &:before { content: "\e028"; } }
+.glyphicon-play-circle { &:before { content: "\e029"; } }
+.glyphicon-repeat { &:before { content: "\e030"; } }
+.glyphicon-refresh { &:before { content: "\e031"; } }
+.glyphicon-list-alt { &:before { content: "\e032"; } }
+.glyphicon-lock { &:before { content: "\e033"; } }
+.glyphicon-flag { &:before { content: "\e034"; } }
+.glyphicon-headphones { &:before { content: "\e035"; } }
+.glyphicon-volume-off { &:before { content: "\e036"; } }
+.glyphicon-volume-down { &:before { content: "\e037"; } }
+.glyphicon-volume-up { &:before { content: "\e038"; } }
+.glyphicon-qrcode { &:before { content: "\e039"; } }
+.glyphicon-barcode { &:before { content: "\e040"; } }
+.glyphicon-tag { &:before { content: "\e041"; } }
+.glyphicon-tags { &:before { content: "\e042"; } }
+.glyphicon-book { &:before { content: "\e043"; } }
+.glyphicon-bookmark { &:before { content: "\e044"; } }
+.glyphicon-print { &:before { content: "\e045"; } }
+.glyphicon-camera { &:before { content: "\e046"; } }
+.glyphicon-font { &:before { content: "\e047"; } }
+.glyphicon-bold { &:before { content: "\e048"; } }
+.glyphicon-italic { &:before { content: "\e049"; } }
+.glyphicon-text-height { &:before { content: "\e050"; } }
+.glyphicon-text-width { &:before { content: "\e051"; } }
+.glyphicon-align-left { &:before { content: "\e052"; } }
+.glyphicon-align-center { &:before { content: "\e053"; } }
+.glyphicon-align-right { &:before { content: "\e054"; } }
+.glyphicon-align-justify { &:before { content: "\e055"; } }
+.glyphicon-list { &:before { content: "\e056"; } }
+.glyphicon-indent-left { &:before { content: "\e057"; } }
+.glyphicon-indent-right { &:before { content: "\e058"; } }
+.glyphicon-facetime-video { &:before { content: "\e059"; } }
+.glyphicon-picture { &:before { content: "\e060"; } }
+.glyphicon-map-marker { &:before { content: "\e062"; } }
+.glyphicon-adjust { &:before { content: "\e063"; } }
+.glyphicon-tint { &:before { content: "\e064"; } }
+.glyphicon-edit { &:before { content: "\e065"; } }
+.glyphicon-share { &:before { content: "\e066"; } }
+.glyphicon-check { &:before { content: "\e067"; } }
+.glyphicon-move { &:before { content: "\e068"; } }
+.glyphicon-step-backward { &:before { content: "\e069"; } }
+.glyphicon-fast-backward { &:before { content: "\e070"; } }
+.glyphicon-backward { &:before { content: "\e071"; } }
+.glyphicon-play { &:before { content: "\e072"; } }
+.glyphicon-pause { &:before { content: "\e073"; } }
+.glyphicon-stop { &:before { content: "\e074"; } }
+.glyphicon-forward { &:before { content: "\e075"; } }
+.glyphicon-fast-forward { &:before { content: "\e076"; } }
+.glyphicon-step-forward { &:before { content: "\e077"; } }
+.glyphicon-eject { &:before { content: "\e078"; } }
+.glyphicon-chevron-left { &:before { content: "\e079"; } }
+.glyphicon-chevron-right { &:before { content: "\e080"; } }
+.glyphicon-plus-sign { &:before { content: "\e081"; } }
+.glyphicon-minus-sign { &:before { content: "\e082"; } }
+.glyphicon-remove-sign { &:before { content: "\e083"; } }
+.glyphicon-ok-sign { &:before { content: "\e084"; } }
+.glyphicon-question-sign { &:before { content: "\e085"; } }
+.glyphicon-info-sign { &:before { content: "\e086"; } }
+.glyphicon-screenshot { &:before { content: "\e087"; } }
+.glyphicon-remove-circle { &:before { content: "\e088"; } }
+.glyphicon-ok-circle { &:before { content: "\e089"; } }
+.glyphicon-ban-circle { &:before { content: "\e090"; } }
+.glyphicon-arrow-left { &:before { content: "\e091"; } }
+.glyphicon-arrow-right { &:before { content: "\e092"; } }
+.glyphicon-arrow-up { &:before { content: "\e093"; } }
+.glyphicon-arrow-down { &:before { content: "\e094"; } }
+.glyphicon-share-alt { &:before { content: "\e095"; } }
+.glyphicon-resize-full { &:before { content: "\e096"; } }
+.glyphicon-resize-small { &:before { content: "\e097"; } }
+.glyphicon-exclamation-sign { &:before { content: "\e101"; } }
+.glyphicon-gift { &:before { content: "\e102"; } }
+.glyphicon-leaf { &:before { content: "\e103"; } }
+.glyphicon-fire { &:before { content: "\e104"; } }
+.glyphicon-eye-open { &:before { content: "\e105"; } }
+.glyphicon-eye-close { &:before { content: "\e106"; } }
+.glyphicon-warning-sign { &:before { content: "\e107"; } }
+.glyphicon-plane { &:before { content: "\e108"; } }
+.glyphicon-calendar { &:before { content: "\e109"; } }
+.glyphicon-random { &:before { content: "\e110"; } }
+.glyphicon-comment { &:before { content: "\e111"; } }
+.glyphicon-magnet { &:before { content: "\e112"; } }
+.glyphicon-chevron-up { &:before { content: "\e113"; } }
+.glyphicon-chevron-down { &:before { content: "\e114"; } }
+.glyphicon-retweet { &:before { content: "\e115"; } }
+.glyphicon-shopping-cart { &:before { content: "\e116"; } }
+.glyphicon-folder-close { &:before { content: "\e117"; } }
+.glyphicon-folder-open { &:before { content: "\e118"; } }
+.glyphicon-resize-vertical { &:before { content: "\e119"; } }
+.glyphicon-resize-horizontal { &:before { content: "\e120"; } }
+.glyphicon-hdd { &:before { content: "\e121"; } }
+.glyphicon-bullhorn { &:before { content: "\e122"; } }
+.glyphicon-bell { &:before { content: "\e123"; } }
+.glyphicon-certificate { &:before { content: "\e124"; } }
+.glyphicon-thumbs-up { &:before { content: "\e125"; } }
+.glyphicon-thumbs-down { &:before { content: "\e126"; } }
+.glyphicon-hand-right { &:before { content: "\e127"; } }
+.glyphicon-hand-left { &:before { content: "\e128"; } }
+.glyphicon-hand-up { &:before { content: "\e129"; } }
+.glyphicon-hand-down { &:before { content: "\e130"; } }
+.glyphicon-circle-arrow-right { &:before { content: "\e131"; } }
+.glyphicon-circle-arrow-left { &:before { content: "\e132"; } }
+.glyphicon-circle-arrow-up { &:before { content: "\e133"; } }
+.glyphicon-circle-arrow-down { &:before { content: "\e134"; } }
+.glyphicon-globe { &:before { content: "\e135"; } }
+.glyphicon-wrench { &:before { content: "\e136"; } }
+.glyphicon-tasks { &:before { content: "\e137"; } }
+.glyphicon-filter { &:before { content: "\e138"; } }
+.glyphicon-briefcase { &:before { content: "\e139"; } }
+.glyphicon-fullscreen { &:before { content: "\e140"; } }
+.glyphicon-dashboard { &:before { content: "\e141"; } }
+.glyphicon-paperclip { &:before { content: "\e142"; } }
+.glyphicon-heart-empty { &:before { content: "\e143"; } }
+.glyphicon-link { &:before { content: "\e144"; } }
+.glyphicon-phone { &:before { content: "\e145"; } }
+.glyphicon-pushpin { &:before { content: "\e146"; } }
+.glyphicon-usd { &:before { content: "\e148"; } }
+.glyphicon-gbp { &:before { content: "\e149"; } }
+.glyphicon-sort { &:before { content: "\e150"; } }
+.glyphicon-sort-by-alphabet { &:before { content: "\e151"; } }
+.glyphicon-sort-by-alphabet-alt { &:before { content: "\e152"; } }
+.glyphicon-sort-by-order { &:before { content: "\e153"; } }
+.glyphicon-sort-by-order-alt { &:before { content: "\e154"; } }
+.glyphicon-sort-by-attributes { &:before { content: "\e155"; } }
+.glyphicon-sort-by-attributes-alt { &:before { content: "\e156"; } }
+.glyphicon-unchecked { &:before { content: "\e157"; } }
+.glyphicon-expand { &:before { content: "\e158"; } }
+.glyphicon-collapse-down { &:before { content: "\e159"; } }
+.glyphicon-collapse-up { &:before { content: "\e160"; } }
+.glyphicon-log-in { &:before { content: "\e161"; } }
+.glyphicon-flash { &:before { content: "\e162"; } }
+.glyphicon-log-out { &:before { content: "\e163"; } }
+.glyphicon-new-window { &:before { content: "\e164"; } }
+.glyphicon-record { &:before { content: "\e165"; } }
+.glyphicon-save { &:before { content: "\e166"; } }
+.glyphicon-open { &:before { content: "\e167"; } }
+.glyphicon-saved { &:before { content: "\e168"; } }
+.glyphicon-import { &:before { content: "\e169"; } }
+.glyphicon-export { &:before { content: "\e170"; } }
+.glyphicon-send { &:before { content: "\e171"; } }
+.glyphicon-floppy-disk { &:before { content: "\e172"; } }
+.glyphicon-floppy-saved { &:before { content: "\e173"; } }
+.glyphicon-floppy-remove { &:before { content: "\e174"; } }
+.glyphicon-floppy-save { &:before { content: "\e175"; } }
+.glyphicon-floppy-open { &:before { content: "\e176"; } }
+.glyphicon-credit-card { &:before { content: "\e177"; } }
+.glyphicon-transfer { &:before { content: "\e178"; } }
+.glyphicon-cutlery { &:before { content: "\e179"; } }
+.glyphicon-header { &:before { content: "\e180"; } }
+.glyphicon-compressed { &:before { content: "\e181"; } }
+.glyphicon-earphone { &:before { content: "\e182"; } }
+.glyphicon-phone-alt { &:before { content: "\e183"; } }
+.glyphicon-tower { &:before { content: "\e184"; } }
+.glyphicon-stats { &:before { content: "\e185"; } }
+.glyphicon-sd-video { &:before { content: "\e186"; } }
+.glyphicon-hd-video { &:before { content: "\e187"; } }
+.glyphicon-subtitles { &:before { content: "\e188"; } }
+.glyphicon-sound-stereo { &:before { content: "\e189"; } }
+.glyphicon-sound-dolby { &:before { content: "\e190"; } }
+.glyphicon-sound-5-1 { &:before { content: "\e191"; } }
+.glyphicon-sound-6-1 { &:before { content: "\e192"; } }
+.glyphicon-sound-7-1 { &:before { content: "\e193"; } }
+.glyphicon-copyright-mark { &:before { content: "\e194"; } }
+.glyphicon-registration-mark { &:before { content: "\e195"; } }
+.glyphicon-cloud-download { &:before { content: "\e197"; } }
+.glyphicon-cloud-upload { &:before { content: "\e198"; } }
+.glyphicon-tree-conifer { &:before { content: "\e199"; } }
+.glyphicon-tree-deciduous { &:before { content: "\e200"; } }
+.glyphicon-cd { &:before { content: "\e201"; } }
+.glyphicon-save-file { &:before { content: "\e202"; } }
+.glyphicon-open-file { &:before { content: "\e203"; } }
+.glyphicon-level-up { &:before { content: "\e204"; } }
+.glyphicon-copy { &:before { content: "\e205"; } }
+.glyphicon-paste { &:before { content: "\e206"; } }
+// The following 2 Glyphicons are omitted for the time being because
+// they currently use Unicode codepoints that are outside the
+// Basic Multilingual Plane (BMP). Older buggy versions of WebKit can't handle
+// non-BMP codepoints in CSS string escapes, and thus can't display these two icons.
+// Notably, the bug affects some older versions of the Android Browser.
+// More info: https://github.com/twbs/bootstrap/issues/10106
+// .glyphicon-door { &:before { content: "\1f6aa"; } }
+// .glyphicon-key { &:before { content: "\1f511"; } }
+.glyphicon-alert { &:before { content: "\e209"; } }
+.glyphicon-equalizer { &:before { content: "\e210"; } }
+.glyphicon-king { &:before { content: "\e211"; } }
+.glyphicon-queen { &:before { content: "\e212"; } }
+.glyphicon-pawn { &:before { content: "\e213"; } }
+.glyphicon-bishop { &:before { content: "\e214"; } }
+.glyphicon-knight { &:before { content: "\e215"; } }
+.glyphicon-baby-formula { &:before { content: "\e216"; } }
+.glyphicon-tent { &:before { content: "\26fa"; } }
+.glyphicon-blackboard { &:before { content: "\e218"; } }
+.glyphicon-bed { &:before { content: "\e219"; } }
+.glyphicon-apple { &:before { content: "\f8ff"; } }
+.glyphicon-erase { &:before { content: "\e221"; } }
+.glyphicon-hourglass { &:before { content: "\231b"; } }
+.glyphicon-lamp { &:before { content: "\e223"; } }
+.glyphicon-duplicate { &:before { content: "\e224"; } }
+.glyphicon-piggy-bank { &:before { content: "\e225"; } }
+.glyphicon-scissors { &:before { content: "\e226"; } }
+.glyphicon-bitcoin { &:before { content: "\e227"; } }
+.glyphicon-btc { &:before { content: "\e227"; } }
+.glyphicon-xbt { &:before { content: "\e227"; } }
+.glyphicon-yen { &:before { content: "\00a5"; } }
+.glyphicon-jpy { &:before { content: "\00a5"; } }
+.glyphicon-ruble { &:before { content: "\20bd"; } }
+.glyphicon-rub { &:before { content: "\20bd"; } }
+.glyphicon-scale { &:before { content: "\e230"; } }
+.glyphicon-ice-lolly { &:before { content: "\e231"; } }
+.glyphicon-ice-lolly-tasted { &:before { content: "\e232"; } }
+.glyphicon-education { &:before { content: "\e233"; } }
+.glyphicon-option-horizontal { &:before { content: "\e234"; } }
+.glyphicon-option-vertical { &:before { content: "\e235"; } }
+.glyphicon-menu-hamburger { &:before { content: "\e236"; } }
+.glyphicon-modal-window { &:before { content: "\e237"; } }
+.glyphicon-oil { &:before { content: "\e238"; } }
+.glyphicon-grain { &:before { content: "\e239"; } }
+.glyphicon-sunglasses { &:before { content: "\e240"; } }
+.glyphicon-text-size { &:before { content: "\e241"; } }
+.glyphicon-text-color { &:before { content: "\e242"; } }
+.glyphicon-text-background { &:before { content: "\e243"; } }
+.glyphicon-object-align-top { &:before { content: "\e244"; } }
+.glyphicon-object-align-bottom { &:before { content: "\e245"; } }
+.glyphicon-object-align-horizontal{ &:before { content: "\e246"; } }
+.glyphicon-object-align-left { &:before { content: "\e247"; } }
+.glyphicon-object-align-vertical { &:before { content: "\e248"; } }
+.glyphicon-object-align-right { &:before { content: "\e249"; } }
+.glyphicon-triangle-right { &:before { content: "\e250"; } }
+.glyphicon-triangle-left { &:before { content: "\e251"; } }
+.glyphicon-triangle-bottom { &:before { content: "\e252"; } }
+.glyphicon-triangle-top { &:before { content: "\e253"; } }
+.glyphicon-console { &:before { content: "\e254"; } }
+.glyphicon-superscript { &:before { content: "\e255"; } }
+.glyphicon-subscript { &:before { content: "\e256"; } }
+.glyphicon-menu-left { &:before { content: "\e257"; } }
+.glyphicon-menu-right { &:before { content: "\e258"; } }
+.glyphicon-menu-down { &:before { content: "\e259"; } }
+.glyphicon-menu-up { &:before { content: "\e260"; } }
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_grid.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_grid.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b15ca27bb546898d56f9f13a8c600c593b7f824e
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_grid.scss
@@ -0,0 +1,84 @@
+//
+// Grid system
+// --------------------------------------------------
+
+
+// Container widths
+//
+// Set the container width, and override it for fixed navbars in media queries.
+
+.container {
+ @include container-fixed;
+
+ @media (min-width: $screen-sm-min) {
+ width: $container-sm;
+ }
+ @media (min-width: $screen-md-min) {
+ width: $container-md;
+ }
+ @media (min-width: $screen-lg-min) {
+ width: $container-lg;
+ }
+}
+
+
+// Fluid container
+//
+// Utilizes the mixin meant for fixed width containers, but without any defined
+// width for fluid, full width layouts.
+
+.container-fluid {
+ @include container-fixed;
+}
+
+
+// Row
+//
+// Rows contain and clear the floats of your columns.
+
+.row {
+ @include make-row;
+}
+
+
+// Columns
+//
+// Common styles for small and large grid columns
+
+@include make-grid-columns;
+
+
+// Extra small grid
+//
+// Columns, offsets, pushes, and pulls for extra small devices like
+// smartphones.
+
+@include make-grid(xs);
+
+
+// Small grid
+//
+// Columns, offsets, pushes, and pulls for the small device range, from phones
+// to tablets.
+
+@media (min-width: $screen-sm-min) {
+ @include make-grid(sm);
+}
+
+
+// Medium grid
+//
+// Columns, offsets, pushes, and pulls for the desktop device range.
+
+@media (min-width: $screen-md-min) {
+ @include make-grid(md);
+}
+
+
+// Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+
+@media (min-width: $screen-lg-min) {
+ @include make-grid(lg);
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_input-groups.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_input-groups.scss
new file mode 100644
index 0000000000000000000000000000000000000000..cda75934cb8588c5d5b79875749d49fe62f9f126
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_input-groups.scss
@@ -0,0 +1,171 @@
+//
+// Input groups
+// --------------------------------------------------
+
+// Base styles
+// -------------------------
+.input-group {
+ position: relative; // For dropdowns
+ display: table;
+ border-collapse: separate; // prevent input groups from inheriting border styles from table cells when placed within a table
+
+ // Undo padding and float of grid classes
+ &[class*="col-"] {
+ float: none;
+ padding-left: 0;
+ padding-right: 0;
+ }
+
+ .msp-form-control {
+ // Ensure that the input is always above the *appended* addon button for
+ // proper border colors.
+ position: relative;
+ z-index: 2;
+
+ // IE9 fubars the placeholder attribute in text inputs and the arrows on
+ // select elements in input groups. To fix it, we float the input. Details:
+ // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
+ float: left;
+
+ width: 100%;
+ margin-bottom: 0;
+
+ &:focus {
+ z-index: 3;
+ }
+ }
+}
+
+// Sizing options
+//
+// Remix the default form control sizing classes into new ones for easier
+// manipulation.
+
+.input-group-lg > .msp-form-control,
+.input-group-lg > .input-group-addon,
+.input-group-lg > .input-group-msp-btn > .msp-btn {
+ @extend .input-lg;
+}
+.input-group-sm > .msp-form-control,
+.input-group-sm > .input-group-addon,
+.input-group-sm > .input-group-msp-btn > .msp-btn {
+ @extend .input-sm;
+}
+
+
+// Display as table-cell
+// -------------------------
+.input-group-addon,
+.input-group-msp-btn,
+.input-group .msp-form-control {
+ display: table-cell;
+
+ &:not(:first-child):not(:last-child) {
+ border-radius: 0;
+ }
+}
+// Addon and addon wrapper for buttons
+.input-group-addon,
+.input-group-msp-btn {
+ width: 1%;
+ white-space: nowrap;
+ vertical-align: middle; // Match the inputs
+}
+
+// Text input groups
+// -------------------------
+.input-group-addon {
+ padding: $padding-base-vertical $padding-base-horizontal;
+ font-size: $font-size-base;
+ font-weight: normal;
+ line-height: 1;
+ color: $input-color;
+ text-align: center;
+ background-color: $input-group-addon-bg;
+ border: 1px solid $input-group-addon-border-color;
+ border-radius: $input-border-radius;
+
+ // Sizing
+ &.input-sm {
+ padding: $padding-small-vertical $padding-small-horizontal;
+ font-size: $font-size-small;
+ border-radius: $input-border-radius-small;
+ }
+ &.input-lg {
+ padding: $padding-large-vertical $padding-large-horizontal;
+ font-size: $font-size-large;
+ border-radius: $input-border-radius-large;
+ }
+
+ // Nuke default margins from checkboxes and radios to vertically center within.
+ input[type="radio"],
+ input[type="checkbox"] {
+ margin-top: 0;
+ }
+}
+
+// Reset rounded corners
+.input-group .msp-form-control:first-child,
+.input-group-addon:first-child,
+.input-group-msp-btn:first-child > .msp-btn,
+.input-group-msp-btn:first-child > .msp-btn-group > .msp-btn,
+.input-group-msp-btn:first-child > .dropdown-toggle,
+.input-group-msp-btn:last-child > .msp-btn:not(:last-child):not(.dropdown-toggle),
+.input-group-msp-btn:last-child > .msp-btn-group:not(:last-child) > .msp-btn {
+ @include border-right-radius(0);
+}
+.input-group-addon:first-child {
+ border-right: 0;
+}
+.input-group .msp-form-control:last-child,
+.input-group-addon:last-child,
+.input-group-msp-btn:last-child > .msp-btn,
+.input-group-msp-btn:last-child > .msp-btn-group > .msp-btn,
+.input-group-msp-btn:last-child > .dropdown-toggle,
+.input-group-msp-btn:first-child > .msp-btn:not(:first-child),
+.input-group-msp-btn:first-child > .msp-btn-group:not(:first-child) > .msp-btn {
+ @include border-left-radius(0);
+}
+.input-group-addon:last-child {
+ border-left: 0;
+}
+
+// Button input groups
+// -------------------------
+.input-group-msp-btn {
+ position: relative;
+ // Jankily prevent input button groups from wrapping with `white-space` and
+ // `font-size` in combination with `inline-block` on buttons.
+ font-size: 0;
+ white-space: nowrap;
+
+ // Negative margin for spacing, position for bringing hovered/focused/actived
+ // element above the siblings.
+ > .msp-btn {
+ position: relative;
+ + .msp-btn {
+ margin-left: -1px;
+ }
+ // Bring the "active" button to the front
+ &:hover,
+ &:focus,
+ &:active {
+ z-index: 2;
+ }
+ }
+
+ // Negative margin to only have a 1px border between the two
+ &:first-child {
+ > .msp-btn,
+ > .msp-btn-group {
+ margin-right: -1px;
+ }
+ }
+ &:last-child {
+ > .msp-btn,
+ > .msp-btn-group {
+ z-index: 2;
+ margin-left: -1px;
+ }
+ }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_jumbotron.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_jumbotron.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a27da4738fe71de9fa737c1cfadc92b11975b4d6
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_jumbotron.scss
@@ -0,0 +1,54 @@
+//
+// Jumbotron
+// --------------------------------------------------
+
+
+.jumbotron {
+ padding-top: $jumbotron-padding;
+ padding-bottom: $jumbotron-padding;
+ margin-bottom: $jumbotron-padding;
+ color: $jumbotron-color;
+ background-color: $jumbotron-bg;
+
+ h1,
+ .h1 {
+ color: $jumbotron-heading-color;
+ }
+
+ p {
+ margin-bottom: ($jumbotron-padding / 2);
+ font-size: $jumbotron-font-size;
+ font-weight: 200;
+ }
+
+ > hr {
+ border-top-color: darken($jumbotron-bg, 10%);
+ }
+
+ .container &,
+ .container-fluid & {
+ border-radius: $border-radius-large; // Only round corners at higher resolutions if contained in a container
+ padding-left: ($grid-gutter-width / 2);
+ padding-right: ($grid-gutter-width / 2);
+ }
+
+ .container {
+ max-width: 100%;
+ }
+
+ @media screen and (min-width: $screen-sm-min) {
+ padding-top: ($jumbotron-padding * 1.6);
+ padding-bottom: ($jumbotron-padding * 1.6);
+
+ .container &,
+ .container-fluid & {
+ padding-left: ($jumbotron-padding * 2);
+ padding-right: ($jumbotron-padding * 2);
+ }
+
+ h1,
+ .h1 {
+ font-size: $jumbotron-heading-font-size;
+ }
+ }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_labels.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_labels.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8afe53e37ef25d2a796ec7d610e8e6fdece6d287
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_labels.scss
@@ -0,0 +1,66 @@
+//
+// Labels
+// --------------------------------------------------
+
+.label {
+ display: inline;
+ padding: .2em .6em .3em;
+ font-size: 75%;
+ font-weight: bold;
+ line-height: 1;
+ color: $label-color;
+ text-align: center;
+ white-space: nowrap;
+ vertical-align: baseline;
+ border-radius: .25em;
+
+ // [converter] extracted a& to a.label
+
+ // Empty labels collapse automatically (not available in IE8)
+ &:empty {
+ display: none;
+ }
+
+ // Quick fix for labels in buttons
+ .msp-btn & {
+ position: relative;
+ top: -1px;
+ }
+}
+
+// Add hover effects, but only for links
+a.label {
+ &:hover,
+ &:focus {
+ color: $label-link-hover-color;
+ text-decoration: none;
+ cursor: pointer;
+ }
+}
+
+// Colors
+// Contextual variations (linked labels get darker on :hover)
+
+.label-default {
+ @include label-variant($label-default-bg);
+}
+
+.label-primary {
+ @include label-variant($label-primary-bg);
+}
+
+.label-success {
+ @include label-variant($label-success-bg);
+}
+
+.label-info {
+ @include label-variant($label-info-bg);
+}
+
+.label-warning {
+ @include label-variant($label-warning-bg);
+}
+
+.label-danger {
+ @include label-variant($label-danger-bg);
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_list-group.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_list-group.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7cb83aab05ca09849795a5d8e20527da0e0dc941
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_list-group.scss
@@ -0,0 +1,130 @@
+//
+// List groups
+// --------------------------------------------------
+
+
+// Base class
+//
+// Easily usable on <ul>, <ol>, or <div>.
+
+.list-group {
+ // No need to set list-style: none; since .list-group-item is block level
+ margin-bottom: 20px;
+ padding-left: 0; // reset padding because ul and ol
+}
+
+
+// Individual list items
+//
+// Use on `li`s or `div`s within the `.list-group` parent.
+
+.list-group-item {
+ position: relative;
+ display: block;
+ padding: 10px 15px;
+ // Place the border on the list items and negative margin up for better styling
+ margin-bottom: -1px;
+ background-color: $list-group-bg;
+ border: 1px solid $list-group-border;
+
+ // Round the first and last items
+ &:first-child {
+ @include border-top-radius($list-group-border-radius);
+ }
+ &:last-child {
+ margin-bottom: 0;
+ @include border-bottom-radius($list-group-border-radius);
+ }
+}
+
+
+// Interactive list items
+//
+// Use anchor or button elements instead of `li`s or `div`s to create interactive items.
+// Includes an extra `.active` modifier class for showing selected items.
+
+a.list-group-item,
+button.list-group-item {
+ color: $list-group-link-color;
+
+ .list-group-item-heading {
+ color: $list-group-link-heading-color;
+ }
+
+ // Hover state
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ color: $list-group-link-hover-color;
+ background-color: $list-group-hover-bg;
+ }
+}
+
+button.list-group-item {
+ width: 100%;
+ text-align: left;
+}
+
+.list-group-item {
+ // Disabled state
+ &.disabled,
+ &.disabled:hover,
+ &.disabled:focus {
+ background-color: $list-group-disabled-bg;
+ color: $list-group-disabled-color;
+ cursor: $cursor-disabled;
+
+ // Force color to inherit for custom content
+ .list-group-item-heading {
+ color: inherit;
+ }
+ .list-group-item-text {
+ color: $list-group-disabled-text-color;
+ }
+ }
+
+ // Active class on item itself, not parent
+ &.active,
+ &.active:hover,
+ &.active:focus {
+ z-index: 2; // Place active items above their siblings for proper border styling
+ color: $list-group-active-color;
+ background-color: $list-group-active-bg;
+ border-color: $list-group-active-border;
+
+ // Force color to inherit for custom content
+ .list-group-item-heading,
+ .list-group-item-heading > small,
+ .list-group-item-heading > .small {
+ color: inherit;
+ }
+ .list-group-item-text {
+ color: $list-group-active-text-color;
+ }
+ }
+}
+
+
+// Contextual variants
+//
+// Add modifier classes to change text and background color on individual items.
+// Organizationally, this must come after the `:hover` states.
+
+@include list-group-item-variant(success, $state-success-bg, $state-success-text);
+@include list-group-item-variant(info, $state-info-bg, $state-info-text);
+@include list-group-item-variant(warning, $state-warning-bg, $state-warning-text);
+@include list-group-item-variant(danger, $state-danger-bg, $state-danger-text);
+
+
+// Custom content options
+//
+// Extra classes for creating well-formatted content within `.list-group-item`s.
+
+.list-group-item-heading {
+ margin-top: 0;
+ margin-bottom: 5px;
+}
+.list-group-item-text {
+ margin-bottom: 0;
+ line-height: 1.3;
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_media.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_media.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8c835e861edf28f7c3c49f18caf09d626565e11d
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_media.scss
@@ -0,0 +1,66 @@
+.media {
+ // Proper spacing between instances of .media
+ margin-top: 15px;
+
+ &:first-child {
+ margin-top: 0;
+ }
+}
+
+.media,
+.media-body {
+ zoom: 1;
+ overflow: hidden;
+}
+
+.media-body {
+ width: 10000px;
+}
+
+.media-object {
+ display: block;
+
+ // Fix collapse in webkit from max-width: 100% and display: table-cell.
+ &.img-thumbnail {
+ max-width: none;
+ }
+}
+
+.media-right,
+.media > .pull-right {
+ padding-left: 10px;
+}
+
+.media-left,
+.media > .pull-left {
+ padding-right: 10px;
+}
+
+.media-left,
+.media-right,
+.media-body {
+ display: table-cell;
+ vertical-align: top;
+}
+
+.media-middle {
+ vertical-align: middle;
+}
+
+.media-bottom {
+ vertical-align: bottom;
+}
+
+// Reset margins on headings for tighter default spacing
+.media-heading {
+ margin-top: 0;
+ margin-bottom: 5px;
+}
+
+// Media list variation
+//
+// Undo default ul/ol styles
+.media-list {
+ padding-left: 0;
+ list-style: none;
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_mixins.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_mixins.scss
new file mode 100644
index 0000000000000000000000000000000000000000..78cd5aa0ff34a647fe9a99be3b8fe4e063cbe8af
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_mixins.scss
@@ -0,0 +1,40 @@
+// Mixins
+// --------------------------------------------------
+
+// Utilities
+@import "mixins/hide-text";
+@import "mixins/opacity";
+@import "mixins/image";
+@import "mixins/labels";
+@import "mixins/reset-filter";
+@import "mixins/resize";
+@import "mixins/responsive-visibility";
+@import "mixins/size";
+@import "mixins/tab-focus";
+@import "mixins/reset-text";
+@import "mixins/text-emphasis";
+@import "mixins/text-overflow";
+@import "mixins/vendor-prefixes";
+
+// Components
+@import "mixins/alerts";
+@import "mixins/buttons";
+@import "mixins/panels";
+@import "mixins/pagination";
+@import "mixins/list-group";
+@import "mixins/nav-divider";
+@import "mixins/forms";
+@import "mixins/progress-bar";
+@import "mixins/table-row";
+
+// Skins
+@import "mixins/background-variant";
+@import "mixins/border-radius";
+@import "mixins/gradients";
+
+// Layout
+@import "mixins/clearfix";
+@import "mixins/center-block";
+@import "mixins/nav-vertical-align";
+@import "mixins/grid-framework";
+@import "mixins/grid";
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_modals.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_modals.scss
new file mode 100644
index 0000000000000000000000000000000000000000..0aa4004225e2d03272d16e4c82c961bf50216e29
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_modals.scss
@@ -0,0 +1,150 @@
+//
+// Modals
+// --------------------------------------------------
+
+// .modal-open - body class for killing the scroll
+// .modal - container to scroll within
+// .modal-dialog - positioning shell for the actual modal
+// .modal-content - actual modal w/ bg and corners and shit
+
+// Kill the scroll on the body
+.modal-open {
+ overflow: hidden;
+}
+
+// Container that the modal scrolls within
+.modal {
+ display: none;
+ overflow: hidden;
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: $zindex-modal;
+ -webkit-overflow-scrolling: touch;
+
+ // Prevent Chrome on Windows from adding a focus outline. For details, see
+ // https://github.com/twbs/bootstrap/pull/10951.
+ outline: 0;
+
+ // When fading in the modal, animate it to slide down
+ &.fade .modal-dialog {
+ @include translate(0, -25%);
+ @include transition-transform(0.3s ease-out);
+ }
+ &.in .modal-dialog { @include translate(0, 0) }
+}
+.modal-open .modal {
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+
+// Shell div to position the modal with bottom padding
+.modal-dialog {
+ position: relative;
+ width: auto;
+ margin: 10px;
+}
+
+// Actual modal
+.modal-content {
+ position: relative;
+ background-color: $modal-content-bg;
+ border: 1px solid $modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
+ border: 1px solid $modal-content-border-color;
+ border-radius: $border-radius-large;
+ @include box-shadow(0 3px 9px rgba(0,0,0,.5));
+ background-clip: padding-box;
+ // Remove focus outline from opened modal
+ outline: 0;
+}
+
+// Modal background
+.modal-backdrop {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: $zindex-modal-background;
+ background-color: $modal-backdrop-bg;
+ // Fade for backdrop
+ &.fade { @include opacity(0); }
+ &.in { @include opacity($modal-backdrop-opacity); }
+}
+
+// Modal header
+// Top section of the modal w/ title and dismiss
+.modal-header {
+ padding: $modal-title-padding;
+ border-bottom: 1px solid $modal-header-border-color;
+ @include clearfix;
+}
+// Close icon
+.modal-header .close {
+ margin-top: -2px;
+}
+
+// Title text within header
+.modal-title {
+ margin: 0;
+ line-height: $modal-title-line-height;
+}
+
+// Modal body
+// Where all modal content resides (sibling of .modal-header and .modal-footer)
+.modal-body {
+ position: relative;
+ padding: $modal-inner-padding;
+}
+
+// Footer (for actions)
+.modal-footer {
+ padding: $modal-inner-padding;
+ text-align: right; // right align buttons
+ border-top: 1px solid $modal-footer-border-color;
+ @include clearfix; // clear it in case folks use .pull-* classes on buttons
+
+ // Properly space out buttons
+ .msp-btn + .msp-btn {
+ margin-left: 5px;
+ margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
+ }
+ // but override that for button groups
+ .msp-btn-group .msp-btn + .msp-btn {
+ margin-left: -1px;
+ }
+ // and override it for block buttons as well
+ .msp-btn-block + .msp-btn-block {
+ margin-left: 0;
+ }
+}
+
+// Measure scrollbar width for padding body during modal show/hide
+.modal-scrollbar-measure {
+ position: absolute;
+ top: -9999px;
+ width: 50px;
+ height: 50px;
+ overflow: scroll;
+}
+
+// Scale up the modal
+@media (min-width: $screen-sm-min) {
+ // Automatically set modal's width for larger viewports
+ .modal-dialog {
+ width: $modal-md;
+ margin: 30px auto;
+ }
+ .modal-content {
+ @include box-shadow(0 5px 15px rgba(0,0,0,.5));
+ }
+
+ // Modal sizes
+ .modal-sm { width: $modal-sm; }
+}
+
+@media (min-width: $screen-md-min) {
+ .modal-lg { width: $modal-lg; }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_navbar.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_navbar.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6f8cc029c7004c1efa49f533592979f5947f8aab
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_navbar.scss
@@ -0,0 +1,662 @@
+//
+// Navbars
+// --------------------------------------------------
+
+
+// Wrapper and base class
+//
+// Provide a static navbar from which we expand to create full-width, fixed, and
+// other navbar variations.
+
+.navbar {
+ position: relative;
+ min-height: $navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
+ margin-bottom: $navbar-margin-bottom;
+ border: 1px solid transparent;
+
+ // Prevent floats from breaking the navbar
+ @include clearfix;
+
+ @media (min-width: $grid-float-breakpoint) {
+ border-radius: $navbar-border-radius;
+ }
+}
+
+
+// Navbar heading
+//
+// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
+// styling of responsive aspects.
+
+.navbar-header {
+ @include clearfix;
+
+ @media (min-width: $grid-float-breakpoint) {
+ float: left;
+ }
+}
+
+
+// Navbar collapse (body)
+//
+// Group your navbar content into this for easy collapsing and expanding across
+// various device sizes. By default, this content is collapsed when <768px, but
+// will expand past that for a horizontal display.
+//
+// To start (on mobile devices) the navbar links, forms, and buttons are stacked
+// vertically and include a `max-height` to overflow in case you have too much
+// content for the user's viewport.
+
+.navbar-collapse {
+ overflow-x: visible;
+ padding-right: $navbar-padding-horizontal;
+ padding-left: $navbar-padding-horizontal;
+ border-top: 1px solid transparent;
+ box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
+ @include clearfix;
+ -webkit-overflow-scrolling: touch;
+
+ &.in {
+ overflow-y: auto;
+ }
+
+ @media (min-width: $grid-float-breakpoint) {
+ width: auto;
+ border-top: 0;
+ box-shadow: none;
+
+ &.collapse {
+ display: block !important;
+ height: auto !important;
+ padding-bottom: 0; // Override default setting
+ overflow: visible !important;
+ }
+
+ &.in {
+ overflow-y: visible;
+ }
+
+ // Undo the collapse side padding for navbars with containers to ensure
+ // alignment of right-aligned contents.
+ .navbar-fixed-top &,
+ .navbar-static-top &,
+ .navbar-fixed-bottom & {
+ padding-left: 0;
+ padding-right: 0;
+ }
+ }
+}
+
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+ .navbar-collapse {
+ max-height: $navbar-collapse-max-height;
+
+ @media (max-device-width: $screen-xs-min) and (orientation: landscape) {
+ max-height: 200px;
+ }
+ }
+}
+
+
+// Both navbar header and collapse
+//
+// When a container is present, change the behavior of the header and collapse.
+
+.container,
+.container-fluid {
+ > .navbar-header,
+ > .navbar-collapse {
+ margin-right: -$navbar-padding-horizontal;
+ margin-left: -$navbar-padding-horizontal;
+
+ @media (min-width: $grid-float-breakpoint) {
+ margin-right: 0;
+ margin-left: 0;
+ }
+ }
+}
+
+
+//
+// Navbar alignment options
+//
+// Display the navbar across the entirety of the page or fixed it to the top or
+// bottom of the page.
+
+// Static top (unfixed, but 100% wide) navbar
+.navbar-static-top {
+ z-index: $zindex-navbar;
+ border-width: 0 0 1px;
+
+ @media (min-width: $grid-float-breakpoint) {
+ border-radius: 0;
+ }
+}
+
+// Fix the top/bottom navbars when screen real estate supports it
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+ position: fixed;
+ right: 0;
+ left: 0;
+ z-index: $zindex-navbar-fixed;
+
+ // Undo the rounded corners
+ @media (min-width: $grid-float-breakpoint) {
+ border-radius: 0;
+ }
+}
+.navbar-fixed-top {
+ top: 0;
+ border-width: 0 0 1px;
+}
+.navbar-fixed-bottom {
+ bottom: 0;
+ margin-bottom: 0; // override .navbar defaults
+ border-width: 1px 0 0;
+}
+
+
+// Brand/project name
+
+.navbar-brand {
+ float: left;
+ padding: $navbar-padding-vertical $navbar-padding-horizontal;
+ font-size: $font-size-large;
+ line-height: $line-height-computed;
+ height: $navbar-height;
+
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ }
+
+ > img {
+ display: block;
+ }
+
+ @media (min-width: $grid-float-breakpoint) {
+ .navbar > .container &,
+ .navbar > .container-fluid & {
+ margin-left: -$navbar-padding-horizontal;
+ }
+ }
+}
+
+
+// Navbar toggle
+//
+// Custom button for toggling the `.navbar-collapse`, powered by the collapse
+// JavaScript plugin.
+
+.navbar-toggle {
+ position: relative;
+ float: right;
+ margin-right: $navbar-padding-horizontal;
+ padding: 9px 10px;
+ @include navbar-vertical-align(34px);
+ background-color: transparent;
+ background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+ border: 1px solid transparent;
+ border-radius: $border-radius-base;
+
+ // We remove the `outline` here, but later compensate by attaching `:hover`
+ // styles to `:focus`.
+ &:focus {
+ outline: 0;
+ }
+
+ // Bars
+ .icon-bar {
+ display: block;
+ width: 22px;
+ height: 2px;
+ border-radius: 1px;
+ }
+ .icon-bar + .icon-bar {
+ margin-top: 4px;
+ }
+
+ @media (min-width: $grid-float-breakpoint) {
+ display: none;
+ }
+}
+
+
+// Navbar nav links
+//
+// Builds on top of the `.nav` components with its own modifier class to make
+// the nav the full height of the horizontal nav (above 768px).
+
+.navbar-nav {
+ margin: ($navbar-padding-vertical / 2) (-$navbar-padding-horizontal);
+
+ > li > a {
+ padding-top: 10px;
+ padding-bottom: 10px;
+ line-height: $line-height-computed;
+ }
+
+ @media (max-width: $grid-float-breakpoint-max) {
+ // Dropdowns get custom display when collapsed
+ .open .dropdown-menu {
+ position: static;
+ float: none;
+ width: auto;
+ margin-top: 0;
+ background-color: transparent;
+ border: 0;
+ box-shadow: none;
+ > li > a,
+ .dropdown-header {
+ padding: 5px 15px 5px 25px;
+ }
+ > li > a {
+ line-height: $line-height-computed;
+ &:hover,
+ &:focus {
+ background-image: none;
+ }
+ }
+ }
+ }
+
+ // Uncollapse the nav
+ @media (min-width: $grid-float-breakpoint) {
+ float: left;
+ margin: 0;
+
+ > li {
+ float: left;
+ > a {
+ padding-top: $navbar-padding-vertical;
+ padding-bottom: $navbar-padding-vertical;
+ }
+ }
+ }
+}
+
+
+// Navbar form
+//
+// Extension of the `.form-inline` with some extra flavor for optimum display in
+// our navbars.
+
+.navbar-form {
+ margin-left: -$navbar-padding-horizontal;
+ margin-right: -$navbar-padding-horizontal;
+ padding: 10px $navbar-padding-horizontal;
+ border-top: 1px solid transparent;
+ border-bottom: 1px solid transparent;
+ $shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
+ @include box-shadow($shadow);
+
+ // Mixin behavior for optimum display
+ @include form-inline;
+
+ .form-group {
+ @media (max-width: $grid-float-breakpoint-max) {
+ margin-bottom: 5px;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+
+ // Vertically center in expanded, horizontal navbar
+ @include navbar-vertical-align($input-height-base);
+
+ // Undo 100% width for pull classes
+ @media (min-width: $grid-float-breakpoint) {
+ width: auto;
+ border: 0;
+ margin-left: 0;
+ margin-right: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ @include box-shadow(none);
+ }
+}
+
+
+// Dropdown menus
+
+// Menu position and menu carets
+.navbar-nav > li > .dropdown-menu {
+ margin-top: 0;
+ @include border-top-radius(0);
+}
+// Menu position and menu caret support for dropups via extra dropup class
+.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
+ margin-bottom: 0;
+ @include border-top-radius($navbar-border-radius);
+ @include border-bottom-radius(0);
+}
+
+
+// Buttons in navbars
+//
+// Vertically center a button within a navbar (when *not* in a form).
+
+.navbar-msp-btn {
+ @include navbar-vertical-align($input-height-base);
+
+ &.msp-btn-sm {
+ @include navbar-vertical-align($input-height-small);
+ }
+ &.msp-btn-xs {
+ @include navbar-vertical-align(22);
+ }
+}
+
+
+// Text in navbars
+//
+// Add a class to make any element properly align itself vertically within the navbars.
+
+.navbar-text {
+ @include navbar-vertical-align($line-height-computed);
+
+ @media (min-width: $grid-float-breakpoint) {
+ float: left;
+ margin-left: $navbar-padding-horizontal;
+ margin-right: $navbar-padding-horizontal;
+ }
+}
+
+
+// Component alignment
+//
+// Repurpose the pull utilities as their own navbar utilities to avoid specificity
+// issues with parents and chaining. Only do this when the navbar is uncollapsed
+// though so that navbar contents properly stack and align in mobile.
+//
+// Declared after the navbar components to ensure more specificity on the margins.
+
+@media (min-width: $grid-float-breakpoint) {
+ .navbar-left {
+ float: left !important;
+ }
+ .navbar-right {
+ float: right !important;
+ margin-right: -$navbar-padding-horizontal;
+
+ ~ .navbar-right {
+ margin-right: 0;
+ }
+ }
+}
+
+
+// Alternate navbars
+// --------------------------------------------------
+
+// Default navbar
+.navbar-default {
+ background-color: $navbar-default-bg;
+ border-color: $navbar-default-border;
+
+ .navbar-brand {
+ color: $navbar-default-brand-color;
+ &:hover,
+ &:focus {
+ color: $navbar-default-brand-hover-color;
+ background-color: $navbar-default-brand-hover-bg;
+ }
+ }
+
+ .navbar-text {
+ color: $navbar-default-color;
+ }
+
+ .navbar-nav {
+ > li > a {
+ color: $navbar-default-link-color;
+
+ &:hover,
+ &:focus {
+ color: $navbar-default-link-hover-color;
+ background-color: $navbar-default-link-hover-bg;
+ }
+ }
+ > .active > a {
+ &,
+ &:hover,
+ &:focus {
+ color: $navbar-default-link-active-color;
+ background-color: $navbar-default-link-active-bg;
+ }
+ }
+ > .disabled > a {
+ &,
+ &:hover,
+ &:focus {
+ color: $navbar-default-link-disabled-color;
+ background-color: $navbar-default-link-disabled-bg;
+ }
+ }
+ }
+
+ .navbar-toggle {
+ border-color: $navbar-default-toggle-border-color;
+ &:hover,
+ &:focus {
+ background-color: $navbar-default-toggle-hover-bg;
+ }
+ .icon-bar {
+ background-color: $navbar-default-toggle-icon-bar-bg;
+ }
+ }
+
+ .navbar-collapse,
+ .navbar-form {
+ border-color: $navbar-default-border;
+ }
+
+ // Dropdown menu items
+ .navbar-nav {
+ // Remove background color from open dropdown
+ > .open > a {
+ &,
+ &:hover,
+ &:focus {
+ background-color: $navbar-default-link-active-bg;
+ color: $navbar-default-link-active-color;
+ }
+ }
+
+ @media (max-width: $grid-float-breakpoint-max) {
+ // Dropdowns get custom display when collapsed
+ .open .dropdown-menu {
+ > li > a {
+ color: $navbar-default-link-color;
+ &:hover,
+ &:focus {
+ color: $navbar-default-link-hover-color;
+ background-color: $navbar-default-link-hover-bg;
+ }
+ }
+ > .active > a {
+ &,
+ &:hover,
+ &:focus {
+ color: $navbar-default-link-active-color;
+ background-color: $navbar-default-link-active-bg;
+ }
+ }
+ > .disabled > a {
+ &,
+ &:hover,
+ &:focus {
+ color: $navbar-default-link-disabled-color;
+ background-color: $navbar-default-link-disabled-bg;
+ }
+ }
+ }
+ }
+ }
+
+
+ // Links in navbars
+ //
+ // Add a class to ensure links outside the navbar nav are colored correctly.
+
+ .navbar-link {
+ color: $navbar-default-link-color;
+ &:hover {
+ color: $navbar-default-link-hover-color;
+ }
+ }
+
+ .msp-btn-link {
+ color: $navbar-default-link-color;
+ &:hover,
+ &:focus {
+ color: $navbar-default-link-hover-color;
+ }
+ &[disabled],
+ fieldset[disabled] & {
+ &:hover,
+ &:focus {
+ color: $navbar-default-link-disabled-color;
+ }
+ }
+ }
+}
+
+// Inverse navbar
+
+.navbar-inverse {
+ background-color: $navbar-inverse-bg;
+ border-color: $navbar-inverse-border;
+
+ .navbar-brand {
+ color: $navbar-inverse-brand-color;
+ &:hover,
+ &:focus {
+ color: $navbar-inverse-brand-hover-color;
+ background-color: $navbar-inverse-brand-hover-bg;
+ }
+ }
+
+ .navbar-text {
+ color: $navbar-inverse-color;
+ }
+
+ .navbar-nav {
+ > li > a {
+ color: $navbar-inverse-link-color;
+
+ &:hover,
+ &:focus {
+ color: $navbar-inverse-link-hover-color;
+ background-color: $navbar-inverse-link-hover-bg;
+ }
+ }
+ > .active > a {
+ &,
+ &:hover,
+ &:focus {
+ color: $navbar-inverse-link-active-color;
+ background-color: $navbar-inverse-link-active-bg;
+ }
+ }
+ > .disabled > a {
+ &,
+ &:hover,
+ &:focus {
+ color: $navbar-inverse-link-disabled-color;
+ background-color: $navbar-inverse-link-disabled-bg;
+ }
+ }
+ }
+
+ // Darken the responsive nav toggle
+ .navbar-toggle {
+ border-color: $navbar-inverse-toggle-border-color;
+ &:hover,
+ &:focus {
+ background-color: $navbar-inverse-toggle-hover-bg;
+ }
+ .icon-bar {
+ background-color: $navbar-inverse-toggle-icon-bar-bg;
+ }
+ }
+
+ .navbar-collapse,
+ .navbar-form {
+ border-color: darken($navbar-inverse-bg, 7%);
+ }
+
+ // Dropdowns
+ .navbar-nav {
+ > .open > a {
+ &,
+ &:hover,
+ &:focus {
+ background-color: $navbar-inverse-link-active-bg;
+ color: $navbar-inverse-link-active-color;
+ }
+ }
+
+ @media (max-width: $grid-float-breakpoint-max) {
+ // Dropdowns get custom display
+ .open .dropdown-menu {
+ > .dropdown-header {
+ border-color: $navbar-inverse-border;
+ }
+ .divider {
+ background-color: $navbar-inverse-border;
+ }
+ > li > a {
+ color: $navbar-inverse-link-color;
+ &:hover,
+ &:focus {
+ color: $navbar-inverse-link-hover-color;
+ background-color: $navbar-inverse-link-hover-bg;
+ }
+ }
+ > .active > a {
+ &,
+ &:hover,
+ &:focus {
+ color: $navbar-inverse-link-active-color;
+ background-color: $navbar-inverse-link-active-bg;
+ }
+ }
+ > .disabled > a {
+ &,
+ &:hover,
+ &:focus {
+ color: $navbar-inverse-link-disabled-color;
+ background-color: $navbar-inverse-link-disabled-bg;
+ }
+ }
+ }
+ }
+ }
+
+ .navbar-link {
+ color: $navbar-inverse-link-color;
+ &:hover {
+ color: $navbar-inverse-link-hover-color;
+ }
+ }
+
+ .msp-btn-link {
+ color: $navbar-inverse-link-color;
+ &:hover,
+ &:focus {
+ color: $navbar-inverse-link-hover-color;
+ }
+ &[disabled],
+ fieldset[disabled] & {
+ &:hover,
+ &:focus {
+ color: $navbar-inverse-link-disabled-color;
+ }
+ }
+ }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_navs.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_navs.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9d369f307917e557b53e3aeb9e800708b3aadb6b
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_navs.scss
@@ -0,0 +1,242 @@
+//
+// Navs
+// --------------------------------------------------
+
+
+// Base class
+// --------------------------------------------------
+
+.nav {
+ margin-bottom: 0;
+ padding-left: 0; // Override default ul/ol
+ list-style: none;
+ @include clearfix;
+
+ > li {
+ position: relative;
+ display: block;
+
+ > a {
+ position: relative;
+ display: block;
+ padding: $nav-link-padding;
+ &:hover,
+ &:focus {
+ text-decoration: none;
+ background-color: $nav-link-hover-bg;
+ }
+ }
+
+ // Disabled state sets text to gray and nukes hover/tab effects
+ &.disabled > a {
+ color: $nav-disabled-link-color;
+
+ &:hover,
+ &:focus {
+ color: $nav-disabled-link-hover-color;
+ text-decoration: none;
+ background-color: transparent;
+ cursor: $cursor-disabled;
+ }
+ }
+ }
+
+ // Open dropdowns
+ .open > a {
+ &,
+ &:hover,
+ &:focus {
+ background-color: $nav-link-hover-bg;
+ border-color: $link-color;
+ }
+ }
+
+ // Nav dividers (deprecated with v3.0.1)
+ //
+ // This should have been removed in v3 with the dropping of `.nav-list`, but
+ // we missed it. We don't currently support this anywhere, but in the interest
+ // of maintaining backward compatibility in case you use it, it's deprecated.
+ .nav-divider {
+ @include nav-divider;
+ }
+
+ // Prevent IE8 from misplacing imgs
+ //
+ // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989
+ > li > a > img {
+ max-width: none;
+ }
+}
+
+
+// Tabs
+// -------------------------
+
+// Give the tabs something to sit on
+.nav-tabs {
+ border-bottom: 1px solid $nav-tabs-border-color;
+ > li {
+ float: left;
+ // Make the list-items overlay the bottom border
+ margin-bottom: -1px;
+
+ // Actual tabs (as links)
+ > a {
+ margin-right: 2px;
+ line-height: $line-height-base;
+ border: 1px solid transparent;
+ border-radius: $border-radius-base $border-radius-base 0 0;
+ &:hover {
+ border-color: $nav-tabs-link-hover-border-color $nav-tabs-link-hover-border-color $nav-tabs-border-color;
+ }
+ }
+
+ // Active state, and its :hover to override normal :hover
+ &.active > a {
+ &,
+ &:hover,
+ &:focus {
+ color: $nav-tabs-active-link-hover-color;
+ background-color: $nav-tabs-active-link-hover-bg;
+ border: 1px solid $nav-tabs-active-link-hover-border-color;
+ border-bottom-color: transparent;
+ cursor: default;
+ }
+ }
+ }
+ // pulling this in mainly for less shorthand
+ &.nav-justified {
+ @extend .nav-justified;
+ @extend .nav-tabs-justified;
+ }
+}
+
+
+// Pills
+// -------------------------
+.nav-pills {
+ > li {
+ float: left;
+
+ // Links rendered as pills
+ > a {
+ border-radius: $nav-pills-border-radius;
+ }
+ + li {
+ margin-left: 2px;
+ }
+
+ // Active state
+ &.active > a {
+ &,
+ &:hover,
+ &:focus {
+ color: $nav-pills-active-link-hover-color;
+ background-color: $nav-pills-active-link-hover-bg;
+ }
+ }
+ }
+}
+
+
+// Stacked pills
+.nav-stacked {
+ > li {
+ float: none;
+ + li {
+ margin-top: 2px;
+ margin-left: 0; // no need for this gap between nav items
+ }
+ }
+}
+
+
+// Nav variations
+// --------------------------------------------------
+
+// Justified nav links
+// -------------------------
+
+.nav-justified {
+ width: 100%;
+
+ > li {
+ float: none;
+ > a {
+ text-align: center;
+ margin-bottom: 5px;
+ }
+ }
+
+ > .dropdown .dropdown-menu {
+ top: auto;
+ left: auto;
+ }
+
+ @media (min-width: $screen-sm-min) {
+ > li {
+ display: table-cell;
+ width: 1%;
+ > a {
+ margin-bottom: 0;
+ }
+ }
+ }
+}
+
+// Move borders to anchors instead of bottom of list
+//
+// Mixin for adding on top the shared `.nav-justified` styles for our tabs
+.nav-tabs-justified {
+ border-bottom: 0;
+
+ > li > a {
+ // Override margin from .nav-tabs
+ margin-right: 0;
+ border-radius: $border-radius-base;
+ }
+
+ > .active > a,
+ > .active > a:hover,
+ > .active > a:focus {
+ border: 1px solid $nav-tabs-justified-link-border-color;
+ }
+
+ @media (min-width: $screen-sm-min) {
+ > li > a {
+ border-bottom: 1px solid $nav-tabs-justified-link-border-color;
+ border-radius: $border-radius-base $border-radius-base 0 0;
+ }
+ > .active > a,
+ > .active > a:hover,
+ > .active > a:focus {
+ border-bottom-color: $nav-tabs-justified-active-link-border-color;
+ }
+ }
+}
+
+
+// Tabbable tabs
+// -------------------------
+
+// Hide tabbable panes to start, show them when `.active`
+.tab-content {
+ > .tab-pane {
+ display: none;
+ }
+ > .active {
+ display: block;
+ }
+}
+
+
+// Dropdowns
+// -------------------------
+
+// Specific dropdowns
+.nav-tabs .dropdown-menu {
+ // make dropdown border overlap tab border
+ margin-top: -1px;
+ // Remove the top rounded corners here since there is a hard edge above the menu
+ @include border-top-radius(0);
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_normalize.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_normalize.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9dddf73ad2924561afa704701655f2cbc011d7df
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_normalize.scss
@@ -0,0 +1,424 @@
+/*! 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.
+//
+
+html {
+ font-family: sans-serif; // 1
+ -ms-text-size-adjust: 100%; // 2
+ -webkit-text-size-adjust: 100%; // 2
+}
+
+//
+// Remove default margin.
+//
+
+body {
+ margin: 0;
+}
+
+// HTML5 display definitions
+// ==========================================================================
+
+//
+// Correct `block` display not defined for any HTML5 element in IE 8/9.
+// Correct `block` display not defined for `details` or `summary` in IE 10/11
+// and Firefox.
+// Correct `block` display not defined for `main` in IE 11.
+//
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+ display: block;
+}
+
+//
+// 1. Correct `inline-block` display not defined in IE 8/9.
+// 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+//
+
+audio,
+canvas,
+progress,
+video {
+ display: inline-block; // 1
+ vertical-align: baseline; // 2
+}
+
+//
+// Prevent modern browsers from displaying `audio` without controls.
+// Remove excess height in iOS 5 devices.
+//
+
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+
+//
+// Address `[hidden]` styling not present in IE 8/9/10.
+// Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+//
+
+[hidden],
+template {
+ display: none;
+}
+
+// Links
+// ==========================================================================
+
+//
+// Remove the gray background color from active links in IE 10.
+//
+
+a {
+ background-color: transparent;
+}
+
+//
+// Improve readability of focused elements when they are also in an
+// active/hover state.
+//
+
+a:active,
+a:hover {
+ outline: 0;
+}
+
+// Text-level semantics
+// ==========================================================================
+
+//
+// Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+//
+
+abbr[title] {
+ border-bottom: 1px dotted;
+}
+
+//
+// Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+//
+
+b,
+strong {
+ font-weight: bold;
+}
+
+//
+// Address styling not present in Safari and Chrome.
+//
+
+dfn {
+ font-style: italic;
+}
+
+//
+// Address variable `h1` font-size and margin within `section` and `article`
+// contexts in Firefox 4+, Safari, and Chrome.
+//
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+//
+// Address styling not present in IE 8/9.
+//
+
+mark {
+ background: #ff0;
+ color: #000;
+}
+
+//
+// Address inconsistent and variable font size in all browsers.
+//
+
+small {
+ font-size: 80%;
+}
+
+//
+// Prevent `sub` and `sup` affecting `line-height` in all browsers.
+//
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sup {
+ top: -0.5em;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+// Embedded content
+// ==========================================================================
+
+//
+// Remove border when inside `a` element in IE 8/9/10.
+//
+
+img {
+ border: 0;
+}
+
+//
+// Correct overflow not hidden in IE 9/10/11.
+//
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+// Grouping content
+// ==========================================================================
+
+//
+// Address margin not present in IE 8/9 and Safari.
+//
+
+figure {
+ margin: 1em 40px;
+}
+
+//
+// Address differences between Firefox and other browsers.
+//
+
+hr {
+ box-sizing: content-box;
+ height: 0;
+}
+
+//
+// Contain overflow in all browsers.
+//
+
+pre {
+ overflow: auto;
+}
+
+//
+// Address odd `em`-unit font size rendering in all browsers.
+//
+
+code,
+kbd,
+pre,
+samp {
+ font-family: monospace, monospace;
+ font-size: 1em;
+}
+
+// Forms
+// ==========================================================================
+
+//
+// Known limitation: by default, Chrome and Safari on OS X allow very limited
+// styling of `select`, unless a `border` property is set.
+//
+
+//
+// 1. Correct color not being inherited.
+// Known issue: affects color of disabled elements.
+// 2. Correct font properties not being inherited.
+// 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+//
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ color: inherit; // 1
+ font: inherit; // 2
+ margin: 0; // 3
+}
+
+//
+// Address `overflow` set to `hidden` in IE 8/9/10/11.
+//
+
+button {
+ overflow: visible;
+}
+
+//
+// Address inconsistent `text-transform` inheritance for `button` and `select`.
+// All other form control elements do not inherit `text-transform` values.
+// Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+// Correct `select` style inheritance in Firefox.
+//
+
+button,
+select {
+ text-transform: none;
+}
+
+//
+// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+// and `video` controls.
+// 2. Correct inability to style clickable `input` types in iOS.
+// 3. Improve usability and consistency of cursor style between image-type
+// `input` and others.
+//
+
+button,
+html input[type="button"], // 1
+input[type="reset"],
+input[type="submit"] {
+ -webkit-appearance: button; // 2
+ cursor: pointer; // 3
+}
+
+//
+// Re-set default cursor for disabled elements.
+//
+
+button[disabled],
+html input[disabled] {
+ cursor: default;
+}
+
+//
+// Remove inner padding and border in Firefox 4+.
+//
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+
+//
+// Address Firefox 4+ setting `line-height` on `input` using `!important` in
+// the UA stylesheet.
+//
+
+input {
+ line-height: normal;
+}
+
+//
+// It's recommended that you don't attempt to style these elements.
+// Firefox's implementation doesn't respect box-sizing, padding, or width.
+//
+// 1. Address box sizing set to `content-box` in IE 8/9/10.
+// 2. Remove excess padding in IE 8/9/10.
+//
+
+input[type="checkbox"],
+input[type="radio"] {
+ box-sizing: border-box; // 1
+ padding: 0; // 2
+}
+
+//
+// Fix the cursor style for Chrome's increment/decrement buttons. For certain
+// `font-size` values of the `input`, it causes the cursor style of the
+// decrement button to change from `default` to `text`.
+//
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+//
+// 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+// 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+//
+
+input[type="search"] {
+ -webkit-appearance: textfield; // 1
+ box-sizing: content-box; //2
+}
+
+//
+// Remove inner padding and search cancel button in Safari and Chrome on OS X.
+// Safari (but not Chrome) clips the cancel button when the search input has
+// padding (and `textfield` appearance).
+//
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+//
+// Define consistent border, margin, and padding.
+//
+
+fieldset {
+ border: 1px solid #c0c0c0;
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em;
+}
+
+//
+// 1. Correct `color` not being inherited in IE 8/9/10/11.
+// 2. Remove padding so people aren't caught out if they zero out fieldsets.
+//
+
+legend {
+ border: 0; // 1
+ padding: 0; // 2
+}
+
+//
+// Remove default vertical scrollbar in IE 8/9/10/11.
+//
+
+textarea {
+ overflow: auto;
+}
+
+//
+// Don't inherit the `font-weight` (applied by a rule above).
+// NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+//
+
+optgroup {
+ font-weight: bold;
+}
+
+// Tables
+// ==========================================================================
+
+//
+// Remove most spacing between table cells.
+//
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+td,
+th {
+ padding: 0;
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_pager.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_pager.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c2342174ff3713003e0417b18271ef3e609475c7
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_pager.scss
@@ -0,0 +1,54 @@
+//
+// Pager pagination
+// --------------------------------------------------
+
+
+.pager {
+ padding-left: 0;
+ margin: $line-height-computed 0;
+ list-style: none;
+ text-align: center;
+ @include clearfix;
+ li {
+ display: inline;
+ > a,
+ > span {
+ display: inline-block;
+ padding: 5px 14px;
+ background-color: $pager-bg;
+ border: 1px solid $pager-border;
+ border-radius: $pager-border-radius;
+ }
+
+ > a:hover,
+ > a:focus {
+ text-decoration: none;
+ background-color: $pager-hover-bg;
+ }
+ }
+
+ .next {
+ > a,
+ > span {
+ float: right;
+ }
+ }
+
+ .previous {
+ > a,
+ > span {
+ float: left;
+ }
+ }
+
+ .disabled {
+ > a,
+ > a:hover,
+ > a:focus,
+ > span {
+ color: $pager-disabled-color;
+ background-color: $pager-bg;
+ cursor: $cursor-disabled;
+ }
+ }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_pagination.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_pagination.scss
new file mode 100644
index 0000000000000000000000000000000000000000..fecfa9c6421106f05dd37023620a477012f2e9e9
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_pagination.scss
@@ -0,0 +1,89 @@
+//
+// Pagination (multiple pages)
+// --------------------------------------------------
+.pagination {
+ display: inline-block;
+ padding-left: 0;
+ margin: $line-height-computed 0;
+ border-radius: $border-radius-base;
+
+ > li {
+ display: inline; // Remove list-style and block-level defaults
+ > a,
+ > span {
+ position: relative;
+ float: left; // Collapse white-space
+ padding: $padding-base-vertical $padding-base-horizontal;
+ line-height: $line-height-base;
+ text-decoration: none;
+ color: $pagination-color;
+ background-color: $pagination-bg;
+ border: 1px solid $pagination-border;
+ margin-left: -1px;
+ }
+ &:first-child {
+ > a,
+ > span {
+ margin-left: 0;
+ @include border-left-radius($border-radius-base);
+ }
+ }
+ &:last-child {
+ > a,
+ > span {
+ @include border-right-radius($border-radius-base);
+ }
+ }
+ }
+
+ > li > a,
+ > li > span {
+ &:hover,
+ &:focus {
+ z-index: 2;
+ color: $pagination-hover-color;
+ background-color: $pagination-hover-bg;
+ border-color: $pagination-hover-border;
+ }
+ }
+
+ > .active > a,
+ > .active > span {
+ &,
+ &:hover,
+ &:focus {
+ z-index: 3;
+ color: $pagination-active-color;
+ background-color: $pagination-active-bg;
+ border-color: $pagination-active-border;
+ cursor: default;
+ }
+ }
+
+ > .disabled {
+ > span,
+ > span:hover,
+ > span:focus,
+ > a,
+ > a:hover,
+ > a:focus {
+ color: $pagination-disabled-color;
+ background-color: $pagination-disabled-bg;
+ border-color: $pagination-disabled-border;
+ cursor: $cursor-disabled;
+ }
+ }
+}
+
+// Sizing
+// --------------------------------------------------
+
+// Large
+.pagination-lg {
+ @include pagination-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large);
+}
+
+// Small
+.pagination-sm {
+ @include pagination-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small);
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_panels.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_panels.scss
new file mode 100644
index 0000000000000000000000000000000000000000..be9410f5b9781b949d7be09482fa208769a2458a
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_panels.scss
@@ -0,0 +1,271 @@
+//
+// Panels
+// --------------------------------------------------
+
+
+// Base class
+.panel {
+ margin-bottom: $line-height-computed;
+ background-color: $panel-bg;
+ border: 1px solid transparent;
+ border-radius: $panel-border-radius;
+ @include box-shadow(0 1px 1px rgba(0,0,0,.05));
+}
+
+// Panel contents
+.panel-body {
+ padding: $panel-body-padding;
+ @include clearfix;
+}
+
+// Optional heading
+.panel-heading {
+ padding: $panel-heading-padding;
+ border-bottom: 1px solid transparent;
+ @include border-top-radius(($panel-border-radius - 1));
+
+ > .dropdown .dropdown-toggle {
+ color: inherit;
+ }
+}
+
+// Within heading, strip any `h*` tag of its default margins for spacing.
+.panel-title {
+ margin-top: 0;
+ margin-bottom: 0;
+ font-size: ceil(($font-size-base * 1.125));
+ color: inherit;
+
+ > a,
+ > small,
+ > .small,
+ > small > a,
+ > .small > a {
+ color: inherit;
+ }
+}
+
+// Optional footer (stays gray in every modifier class)
+.panel-footer {
+ padding: $panel-footer-padding;
+ background-color: $panel-footer-bg;
+ border-top: 1px solid $panel-inner-border;
+ @include border-bottom-radius(($panel-border-radius - 1));
+}
+
+
+// List groups in panels
+//
+// By default, space out list group content from panel headings to account for
+// any kind of custom content between the two.
+
+.panel {
+ > .list-group,
+ > .panel-collapse > .list-group {
+ margin-bottom: 0;
+
+ .list-group-item {
+ border-width: 1px 0;
+ border-radius: 0;
+ }
+
+ // Add border top radius for first one
+ &:first-child {
+ .list-group-item:first-child {
+ border-top: 0;
+ @include border-top-radius(($panel-border-radius - 1));
+ }
+ }
+
+ // Add border bottom radius for last one
+ &:last-child {
+ .list-group-item:last-child {
+ border-bottom: 0;
+ @include border-bottom-radius(($panel-border-radius - 1));
+ }
+ }
+ }
+ > .panel-heading + .panel-collapse > .list-group {
+ .list-group-item:first-child {
+ @include border-top-radius(0);
+ }
+ }
+}
+// Collapse space between when there's no additional content.
+.panel-heading + .list-group {
+ .list-group-item:first-child {
+ border-top-width: 0;
+ }
+}
+.list-group + .panel-footer {
+ border-top-width: 0;
+}
+
+// Tables in panels
+//
+// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
+// watch it go full width.
+
+.panel {
+ > .table,
+ > .table-responsive > .table,
+ > .panel-collapse > .table {
+ margin-bottom: 0;
+
+ caption {
+ padding-left: $panel-body-padding;
+ padding-right: $panel-body-padding;
+ }
+ }
+ // Add border top radius for first one
+ > .table:first-child,
+ > .table-responsive:first-child > .table:first-child {
+ @include border-top-radius(($panel-border-radius - 1));
+
+ > thead:first-child,
+ > tbody:first-child {
+ > tr:first-child {
+ border-top-left-radius: ($panel-border-radius - 1);
+ border-top-right-radius: ($panel-border-radius - 1);
+
+ td:first-child,
+ th:first-child {
+ border-top-left-radius: ($panel-border-radius - 1);
+ }
+ td:last-child,
+ th:last-child {
+ border-top-right-radius: ($panel-border-radius - 1);
+ }
+ }
+ }
+ }
+ // Add border bottom radius for last one
+ > .table:last-child,
+ > .table-responsive:last-child > .table:last-child {
+ @include border-bottom-radius(($panel-border-radius - 1));
+
+ > tbody:last-child,
+ > tfoot:last-child {
+ > tr:last-child {
+ border-bottom-left-radius: ($panel-border-radius - 1);
+ border-bottom-right-radius: ($panel-border-radius - 1);
+
+ td:first-child,
+ th:first-child {
+ border-bottom-left-radius: ($panel-border-radius - 1);
+ }
+ td:last-child,
+ th:last-child {
+ border-bottom-right-radius: ($panel-border-radius - 1);
+ }
+ }
+ }
+ }
+ > .panel-body + .table,
+ > .panel-body + .table-responsive,
+ > .table + .panel-body,
+ > .table-responsive + .panel-body {
+ border-top: 1px solid $table-border-color;
+ }
+ > .table > tbody:first-child > tr:first-child th,
+ > .table > tbody:first-child > tr:first-child td {
+ border-top: 0;
+ }
+ > .table-bordered,
+ > .table-responsive > .table-bordered {
+ border: 0;
+ > thead,
+ > tbody,
+ > tfoot {
+ > tr {
+ > th:first-child,
+ > td:first-child {
+ border-left: 0;
+ }
+ > th:last-child,
+ > td:last-child {
+ border-right: 0;
+ }
+ }
+ }
+ > thead,
+ > tbody {
+ > tr:first-child {
+ > td,
+ > th {
+ border-bottom: 0;
+ }
+ }
+ }
+ > tbody,
+ > tfoot {
+ > tr:last-child {
+ > td,
+ > th {
+ border-bottom: 0;
+ }
+ }
+ }
+ }
+ > .table-responsive {
+ border: 0;
+ margin-bottom: 0;
+ }
+}
+
+
+// Collapsable panels (aka, accordion)
+//
+// Wrap a series of panels in `.panel-group` to turn them into an accordion with
+// the help of our collapse JavaScript plugin.
+
+.panel-group {
+ margin-bottom: $line-height-computed;
+
+ // Tighten up margin so it's only between panels
+ .panel {
+ margin-bottom: 0;
+ border-radius: $panel-border-radius;
+
+ + .panel {
+ margin-top: 5px;
+ }
+ }
+
+ .panel-heading {
+ border-bottom: 0;
+
+ + .panel-collapse > .panel-body,
+ + .panel-collapse > .list-group {
+ border-top: 1px solid $panel-inner-border;
+ }
+ }
+
+ .panel-footer {
+ border-top: 0;
+ + .panel-collapse .panel-body {
+ border-bottom: 1px solid $panel-inner-border;
+ }
+ }
+}
+
+
+// Contextual variations
+.panel-default {
+ @include panel-variant($panel-default-border, $panel-default-text, $panel-default-heading-bg, $panel-default-border);
+}
+.panel-primary {
+ @include panel-variant($panel-primary-border, $panel-primary-text, $panel-primary-heading-bg, $panel-primary-border);
+}
+.panel-success {
+ @include panel-variant($panel-success-border, $panel-success-text, $panel-success-heading-bg, $panel-success-border);
+}
+.panel-info {
+ @include panel-variant($panel-info-border, $panel-info-text, $panel-info-heading-bg, $panel-info-border);
+}
+.panel-warning {
+ @include panel-variant($panel-warning-border, $panel-warning-text, $panel-warning-heading-bg, $panel-warning-border);
+}
+.panel-danger {
+ @include panel-variant($panel-danger-border, $panel-danger-text, $panel-danger-heading-bg, $panel-danger-border);
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_popovers.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_popovers.scss
new file mode 100644
index 0000000000000000000000000000000000000000..9b90a2e964e39dee9ad208b544a2a9b538c92b08
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_popovers.scss
@@ -0,0 +1,131 @@
+//
+// Popovers
+// --------------------------------------------------
+
+
+.popover {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: $zindex-popover;
+ display: none;
+ max-width: $popover-max-width;
+ padding: 1px;
+ // Our parent element can be arbitrary since popovers are by default inserted as a sibling of their target element.
+ // So reset our font and text properties to avoid inheriting weird values.
+ @include reset-text;
+ font-size: $font-size-base;
+
+ background-color: $popover-bg;
+ background-clip: padding-box;
+ border: 1px solid $popover-fallback-border-color;
+ border: 1px solid $popover-border-color;
+ border-radius: $border-radius-large;
+ @include box-shadow(0 5px 10px rgba(0,0,0,.2));
+
+ // Offset the popover to account for the popover arrow
+ &.top { margin-top: -$popover-arrow-width; }
+ &.right { margin-left: $popover-arrow-width; }
+ &.bottom { margin-top: $popover-arrow-width; }
+ &.left { margin-left: -$popover-arrow-width; }
+}
+
+.popover-title {
+ margin: 0; // reset heading margin
+ padding: 8px 14px;
+ font-size: $font-size-base;
+ background-color: $popover-title-bg;
+ border-bottom: 1px solid darken($popover-title-bg, 5%);
+ border-radius: ($border-radius-large - 1) ($border-radius-large - 1) 0 0;
+}
+
+.popover-content {
+ padding: 9px 14px;
+}
+
+// Arrows
+//
+// .arrow is outer, .arrow:after is inner
+
+.popover > .arrow {
+ &,
+ &:after {
+ position: absolute;
+ display: block;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+ }
+}
+.popover > .arrow {
+ border-width: $popover-arrow-outer-width;
+}
+.popover > .arrow:after {
+ border-width: $popover-arrow-width;
+ content: "";
+}
+
+.popover {
+ &.top > .arrow {
+ left: 50%;
+ margin-left: -$popover-arrow-outer-width;
+ border-bottom-width: 0;
+ border-top-color: $popover-arrow-outer-fallback-color; // IE8 fallback
+ border-top-color: $popover-arrow-outer-color;
+ bottom: -$popover-arrow-outer-width;
+ &:after {
+ content: " ";
+ bottom: 1px;
+ margin-left: -$popover-arrow-width;
+ border-bottom-width: 0;
+ border-top-color: $popover-arrow-color;
+ }
+ }
+ &.right > .arrow {
+ top: 50%;
+ left: -$popover-arrow-outer-width;
+ margin-top: -$popover-arrow-outer-width;
+ border-left-width: 0;
+ border-right-color: $popover-arrow-outer-fallback-color; // IE8 fallback
+ border-right-color: $popover-arrow-outer-color;
+ &:after {
+ content: " ";
+ left: 1px;
+ bottom: -$popover-arrow-width;
+ border-left-width: 0;
+ border-right-color: $popover-arrow-color;
+ }
+ }
+ &.bottom > .arrow {
+ left: 50%;
+ margin-left: -$popover-arrow-outer-width;
+ border-top-width: 0;
+ border-bottom-color: $popover-arrow-outer-fallback-color; // IE8 fallback
+ border-bottom-color: $popover-arrow-outer-color;
+ top: -$popover-arrow-outer-width;
+ &:after {
+ content: " ";
+ top: 1px;
+ margin-left: -$popover-arrow-width;
+ border-top-width: 0;
+ border-bottom-color: $popover-arrow-color;
+ }
+ }
+
+ &.left > .arrow {
+ top: 50%;
+ right: -$popover-arrow-outer-width;
+ margin-top: -$popover-arrow-outer-width;
+ border-right-width: 0;
+ border-left-color: $popover-arrow-outer-fallback-color; // IE8 fallback
+ border-left-color: $popover-arrow-outer-color;
+ &:after {
+ content: " ";
+ right: 1px;
+ border-right-width: 0;
+ border-left-color: $popover-arrow-color;
+ bottom: -$popover-arrow-width;
+ }
+ }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_print.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_print.scss
new file mode 100644
index 0000000000000000000000000000000000000000..18287467a2f00987c5d6caa111fc137af9090cbc
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_print.scss
@@ -0,0 +1,101 @@
+/*! Source: https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css */
+
+// ==========================================================================
+// Print styles.
+// Inlined to avoid the additional HTTP request: h5bp.com/r
+// ==========================================================================
+
+@media print {
+ *,
+ *:before,
+ *:after {
+ background: transparent !important;
+ color: #000 !important; // Black prints faster: h5bp.com/s
+ box-shadow: none !important;
+ text-shadow: none !important;
+ }
+
+ a,
+ a:visited {
+ text-decoration: underline;
+ }
+
+ a[href]:after {
+ content: " (" attr(href) ")";
+ }
+
+ abbr[title]:after {
+ content: " (" attr(title) ")";
+ }
+
+ // Don't show links that are fragment identifiers,
+ // or use the `javascript:` pseudo protocol
+ a[href^="#"]:after,
+ a[href^="javascript:"]:after {
+ content: "";
+ }
+
+ pre,
+ blockquote {
+ border: 1px solid #999;
+ page-break-inside: avoid;
+ }
+
+ thead {
+ display: table-header-group; // h5bp.com/t
+ }
+
+ tr,
+ img {
+ page-break-inside: avoid;
+ }
+
+ img {
+ max-width: 100% !important;
+ }
+
+ p,
+ h2,
+ h3 {
+ orphans: 3;
+ widows: 3;
+ }
+
+ h2,
+ h3 {
+ page-break-after: avoid;
+ }
+
+ // Bootstrap specific changes start
+
+ // Bootstrap components
+ .navbar {
+ display: none;
+ }
+ .msp-btn,
+ .dropup > .msp-btn {
+ > .caret {
+ border-top-color: #000 !important;
+ }
+ }
+ .label {
+ border: 1px solid #000;
+ }
+
+ .table {
+ border-collapse: collapse !important;
+
+ td,
+ th {
+ background-color: #fff !important;
+ }
+ }
+ .table-bordered {
+ th,
+ td {
+ border: 1px solid #ddd !important;
+ }
+ }
+
+ // Bootstrap specific changes end
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_progress-bars.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_progress-bars.scss
new file mode 100644
index 0000000000000000000000000000000000000000..343df6323c59464cf8088d9c136ace5c29637758
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_progress-bars.scss
@@ -0,0 +1,87 @@
+//
+// Progress bars
+// --------------------------------------------------
+
+
+// Bar animations
+// -------------------------
+
+// WebKit
+@-webkit-keyframes progress-bar-stripes {
+ from { background-position: 40px 0; }
+ to { background-position: 0 0; }
+}
+
+// Spec and IE10+
+@keyframes progress-bar-stripes {
+ from { background-position: 40px 0; }
+ to { background-position: 0 0; }
+}
+
+
+// Bar itself
+// -------------------------
+
+// Outer container
+.progress {
+ overflow: hidden;
+ height: $line-height-computed;
+ margin-bottom: $line-height-computed;
+ background-color: $progress-bg;
+ border-radius: $progress-border-radius;
+ @include box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
+}
+
+// Bar of progress
+.progress-bar {
+ float: left;
+ width: 0%;
+ height: 100%;
+ font-size: $font-size-small;
+ line-height: $line-height-computed;
+ color: $progress-bar-color;
+ text-align: center;
+ background-color: $progress-bar-bg;
+ @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
+ @include transition(width .6s ease);
+}
+
+// Striped bars
+//
+// `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the
+// `.progress-bar-striped` class, which you just add to an existing
+// `.progress-bar`.
+.progress-striped .progress-bar,
+.progress-bar-striped {
+ @include gradient-striped;
+ background-size: 40px 40px;
+}
+
+// Call animation for the active one
+//
+// `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the
+// `.progress-bar.active` approach.
+.progress.active .progress-bar,
+.progress-bar.active {
+ @include animation(progress-bar-stripes 2s linear infinite);
+}
+
+
+// Variations
+// -------------------------
+
+.progress-bar-success {
+ @include progress-bar-variant($progress-bar-success-bg);
+}
+
+.progress-bar-info {
+ @include progress-bar-variant($progress-bar-info-bg);
+}
+
+.progress-bar-warning {
+ @include progress-bar-variant($progress-bar-warning-bg);
+}
+
+.progress-bar-danger {
+ @include progress-bar-variant($progress-bar-danger-bg);
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_responsive-embed.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_responsive-embed.scss
new file mode 100644
index 0000000000000000000000000000000000000000..080a5118fe9ab2af331e6b1444fff4be840ecc03
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_responsive-embed.scss
@@ -0,0 +1,35 @@
+// Embeds responsive
+//
+// Credit: Nicolas Gallagher and SUIT CSS.
+
+.embed-responsive {
+ position: relative;
+ display: block;
+ height: 0;
+ padding: 0;
+ overflow: hidden;
+
+ .embed-responsive-item,
+ iframe,
+ embed,
+ object,
+ video {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ height: 100%;
+ width: 100%;
+ border: 0;
+ }
+}
+
+// Modifier class for 16:9 aspect ratio
+.embed-responsive-16by9 {
+ padding-bottom: 56.25%;
+}
+
+// Modifier class for 4:3 aspect ratio
+.embed-responsive-4by3 {
+ padding-bottom: 75%;
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_responsive-utilities.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_responsive-utilities.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f3f0c839beca5d7d5064b49a0bbd48af7a0c8665
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_responsive-utilities.scss
@@ -0,0 +1,179 @@
+//
+// Responsive: Utility classes
+// --------------------------------------------------
+
+
+// IE10 in Windows (Phone) 8
+//
+// Support for responsive views via media queries is kind of borked in IE10, for
+// Surface/desktop in split view and for Windows Phone 8. This particular fix
+// must be accompanied by a snippet of JavaScript to sniff the user agent and
+// apply some conditional CSS to *only* the Surface/desktop Windows 8. Look at
+// our Getting Started page for more information on this bug.
+//
+// For more information, see the following:
+//
+// Issue: https://github.com/twbs/bootstrap/issues/10497
+// Docs: http://getbootstrap.com/getting-started/#support-ie10-width
+// Source: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
+// Source: http://timkadlec.com/2012/10/ie10-snap-mode-and-responsive-design/
+
+@at-root {
+ @-ms-viewport {
+ width: device-width;
+ }
+}
+
+
+// Visibility utilities
+// Note: Deprecated .visible-xs, .visible-sm, .visible-md, and .visible-lg as of v3.2.0
+
+@include responsive-invisibility('.visible-xs');
+@include responsive-invisibility('.visible-sm');
+@include responsive-invisibility('.visible-md');
+@include responsive-invisibility('.visible-lg');
+
+.visible-xs-block,
+.visible-xs-inline,
+.visible-xs-inline-block,
+.visible-sm-block,
+.visible-sm-inline,
+.visible-sm-inline-block,
+.visible-md-block,
+.visible-md-inline,
+.visible-md-inline-block,
+.visible-lg-block,
+.visible-lg-inline,
+.visible-lg-inline-block {
+ display: none !important;
+}
+
+@media (max-width: $screen-xs-max) {
+ @include responsive-visibility('.visible-xs');
+}
+.visible-xs-block {
+ @media (max-width: $screen-xs-max) {
+ display: block !important;
+ }
+}
+.visible-xs-inline {
+ @media (max-width: $screen-xs-max) {
+ display: inline !important;
+ }
+}
+.visible-xs-inline-block {
+ @media (max-width: $screen-xs-max) {
+ display: inline-block !important;
+ }
+}
+
+@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+ @include responsive-visibility('.visible-sm');
+}
+.visible-sm-block {
+ @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+ display: block !important;
+ }
+}
+.visible-sm-inline {
+ @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+ display: inline !important;
+ }
+}
+.visible-sm-inline-block {
+ @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+ display: inline-block !important;
+ }
+}
+
+@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+ @include responsive-visibility('.visible-md');
+}
+.visible-md-block {
+ @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+ display: block !important;
+ }
+}
+.visible-md-inline {
+ @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+ display: inline !important;
+ }
+}
+.visible-md-inline-block {
+ @media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+ display: inline-block !important;
+ }
+}
+
+@media (min-width: $screen-lg-min) {
+ @include responsive-visibility('.visible-lg');
+}
+.visible-lg-block {
+ @media (min-width: $screen-lg-min) {
+ display: block !important;
+ }
+}
+.visible-lg-inline {
+ @media (min-width: $screen-lg-min) {
+ display: inline !important;
+ }
+}
+.visible-lg-inline-block {
+ @media (min-width: $screen-lg-min) {
+ display: inline-block !important;
+ }
+}
+
+@media (max-width: $screen-xs-max) {
+ @include responsive-invisibility('.hidden-xs');
+}
+
+@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+ @include responsive-invisibility('.hidden-sm');
+}
+
+@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
+ @include responsive-invisibility('.hidden-md');
+}
+
+@media (min-width: $screen-lg-min) {
+ @include responsive-invisibility('.hidden-lg');
+}
+
+
+// Print utilities
+//
+// Media queries are placed on the inside to be mixin-friendly.
+
+// Note: Deprecated .visible-print as of v3.2.0
+
+@include responsive-invisibility('.visible-print');
+
+@media print {
+ @include responsive-visibility('.visible-print');
+}
+.visible-print-block {
+ display: none !important;
+
+ @media print {
+ display: block !important;
+ }
+}
+.visible-print-inline {
+ display: none !important;
+
+ @media print {
+ display: inline !important;
+ }
+}
+.visible-print-inline-block {
+ display: none !important;
+
+ @media print {
+ display: inline-block !important;
+ }
+}
+
+@media print {
+ @include responsive-invisibility('.hidden-print');
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_scaffolding.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_scaffolding.scss
new file mode 100644
index 0000000000000000000000000000000000000000..83adb5dd51f9dcca66752e04035d05f32670130c
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_scaffolding.scss
@@ -0,0 +1,161 @@
+//
+// Scaffolding
+// --------------------------------------------------
+
+
+// Reset the box-sizing
+//
+// Heads up! This reset may cause conflicts with some third-party widgets.
+// For recommendations on resolving such conflicts, see
+// http://getbootstrap.com/getting-started/#third-box-sizing
+* {
+ @include box-sizing(border-box);
+}
+*:before,
+*:after {
+ @include box-sizing(border-box);
+}
+
+
+// Body reset
+
+html {
+ font-size: 10px;
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
+body {
+ font-family: $font-family-base;
+ font-size: $font-size-base;
+ line-height: $line-height-base;
+ color: $text-color;
+ background-color: $body-bg;
+}
+
+// Reset fonts for relevant elements
+input,
+button,
+select,
+textarea {
+ font-family: inherit;
+ font-size: inherit;
+ line-height: inherit;
+}
+
+
+// Links
+
+a {
+ color: $link-color;
+ text-decoration: none;
+
+ &:hover,
+ &:focus {
+ color: $link-hover-color;
+ text-decoration: $link-hover-decoration;
+ }
+
+ &:focus {
+ @include tab-focus;
+ }
+}
+
+
+// Figures
+//
+// We reset this here because previously Normalize had no `figure` margins. This
+// ensures we don't break anyone's use of the element.
+
+figure {
+ margin: 0;
+}
+
+
+// Images
+
+img {
+ vertical-align: middle;
+}
+
+// Responsive images (ensure images don't scale beyond their parents)
+.img-responsive {
+ @include img-responsive;
+}
+
+// Rounded corners
+.img-rounded {
+ border-radius: $border-radius-large;
+}
+
+// Image thumbnails
+//
+// Heads up! This is mixin-ed into thumbnails.less for `.thumbnail`.
+.img-thumbnail {
+ padding: $thumbnail-padding;
+ line-height: $line-height-base;
+ background-color: $thumbnail-bg;
+ border: 1px solid $thumbnail-border;
+ border-radius: $thumbnail-border-radius;
+ @include transition(all .2s ease-in-out);
+
+ // Keep them at most 100% wide
+ @include img-responsive(inline-block);
+}
+
+// Perfect circle
+.img-circle {
+ border-radius: 50%; // set radius in percents
+}
+
+
+// Horizontal rules
+
+hr {
+ margin-top: $line-height-computed;
+ margin-bottom: $line-height-computed;
+ border: 0;
+ border-top: 1px solid $hr-border;
+}
+
+
+// Only display content to screen readers
+//
+// See: http://a11yproject.com/posts/how-to-hide-content/
+
+.sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ margin: -1px;
+ padding: 0;
+ overflow: hidden;
+ clip: rect(0,0,0,0);
+ border: 0;
+}
+
+// Use in conjunction with .sr-only to only display content when it's focused.
+// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+// Credit: HTML5 Boilerplate
+
+.sr-only-focusable {
+ &:active,
+ &:focus {
+ position: static;
+ width: auto;
+ height: auto;
+ margin: 0;
+ overflow: visible;
+ clip: auto;
+ }
+}
+
+
+// iOS "clickable elements" fix for role="button"
+//
+// Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
+// for traditionally non-focusable elements with role="button"
+// see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+
+[role="button"] {
+ cursor: pointer;
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_tables.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_tables.scss
new file mode 100644
index 0000000000000000000000000000000000000000..affcc58c0b0f80388f291c73451da8e38c8f9280
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_tables.scss
@@ -0,0 +1,234 @@
+//
+// Tables
+// --------------------------------------------------
+
+
+table {
+ background-color: $table-bg;
+}
+caption {
+ padding-top: $table-cell-padding;
+ padding-bottom: $table-cell-padding;
+ color: $text-muted;
+ text-align: left;
+}
+th {
+ text-align: left;
+}
+
+
+// Baseline styles
+
+.table {
+ width: 100%;
+ max-width: 100%;
+ margin-bottom: $line-height-computed;
+ // Cells
+ > thead,
+ > tbody,
+ > tfoot {
+ > tr {
+ > th,
+ > td {
+ padding: $table-cell-padding;
+ line-height: $line-height-base;
+ vertical-align: top;
+ border-top: 1px solid $table-border-color;
+ }
+ }
+ }
+ // Bottom align for column headings
+ > thead > tr > th {
+ vertical-align: bottom;
+ border-bottom: 2px solid $table-border-color;
+ }
+ // Remove top border from thead by default
+ > caption + thead,
+ > colgroup + thead,
+ > thead:first-child {
+ > tr:first-child {
+ > th,
+ > td {
+ border-top: 0;
+ }
+ }
+ }
+ // Account for multiple tbody instances
+ > tbody + tbody {
+ border-top: 2px solid $table-border-color;
+ }
+
+ // Nesting
+ .table {
+ background-color: $body-bg;
+ }
+}
+
+
+// Condensed table w/ half padding
+
+.table-condensed {
+ > thead,
+ > tbody,
+ > tfoot {
+ > tr {
+ > th,
+ > td {
+ padding: $table-condensed-cell-padding;
+ }
+ }
+ }
+}
+
+
+// Bordered version
+//
+// Add borders all around the table and between all the columns.
+
+.table-bordered {
+ border: 1px solid $table-border-color;
+ > thead,
+ > tbody,
+ > tfoot {
+ > tr {
+ > th,
+ > td {
+ border: 1px solid $table-border-color;
+ }
+ }
+ }
+ > thead > tr {
+ > th,
+ > td {
+ border-bottom-width: 2px;
+ }
+ }
+}
+
+
+// Zebra-striping
+//
+// Default zebra-stripe styles (alternating gray and transparent backgrounds)
+
+.table-striped {
+ > tbody > tr:nth-of-type(odd) {
+ background-color: $table-bg-accent;
+ }
+}
+
+
+// Hover effect
+//
+// Placed here since it has to come after the potential zebra striping
+
+.table-hover {
+ > tbody > tr:hover {
+ background-color: $table-bg-hover;
+ }
+}
+
+
+// Table cell sizing
+//
+// Reset default table behavior
+
+table col[class*="col-"] {
+ position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
+ float: none;
+ display: table-column;
+}
+table {
+ td,
+ th {
+ &[class*="col-"] {
+ position: static; // Prevent border hiding in Firefox and IE9-11 (see https://github.com/twbs/bootstrap/issues/11623)
+ float: none;
+ display: table-cell;
+ }
+ }
+}
+
+
+// Table backgrounds
+//
+// Exact selectors below required to override `.table-striped` and prevent
+// inheritance to nested tables.
+
+// Generate the contextual variants
+@include table-row-variant('active', $table-bg-active);
+@include table-row-variant('success', $state-success-bg);
+@include table-row-variant('info', $state-info-bg);
+@include table-row-variant('warning', $state-warning-bg);
+@include table-row-variant('danger', $state-danger-bg);
+
+
+// Responsive tables
+//
+// Wrap your tables in `.table-responsive` and we'll make them mobile friendly
+// by enabling horizontal scrolling. Only applies <768px. Everything above that
+// will display normally.
+
+.table-responsive {
+ overflow-x: auto;
+ min-height: 0.01%; // Workaround for IE9 bug (see https://github.com/twbs/bootstrap/issues/14837)
+
+ @media screen and (max-width: $screen-xs-max) {
+ width: 100%;
+ margin-bottom: ($line-height-computed * 0.75);
+ overflow-y: hidden;
+ -ms-overflow-style: -ms-autohiding-scrollbar;
+ border: 1px solid $table-border-color;
+
+ // Tighten up spacing
+ > .table {
+ margin-bottom: 0;
+
+ // Ensure the content doesn't wrap
+ > thead,
+ > tbody,
+ > tfoot {
+ > tr {
+ > th,
+ > td {
+ white-space: nowrap;
+ }
+ }
+ }
+ }
+
+ // Special overrides for the bordered tables
+ > .table-bordered {
+ border: 0;
+
+ // Nuke the appropriate borders so that the parent can handle them
+ > thead,
+ > tbody,
+ > tfoot {
+ > tr {
+ > th:first-child,
+ > td:first-child {
+ border-left: 0;
+ }
+ > th:last-child,
+ > td:last-child {
+ border-right: 0;
+ }
+ }
+ }
+
+ // Only nuke the last row's bottom-border in `tbody` and `tfoot` since
+ // chances are there will be only one `tr` in a `thead` and that would
+ // remove the border altogether.
+ > tbody,
+ > tfoot {
+ > tr:last-child {
+ > th,
+ > td {
+ border-bottom: 0;
+ }
+ }
+ }
+
+ }
+ }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_theme.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_theme.scss
new file mode 100644
index 0000000000000000000000000000000000000000..eec012b9e75b1fb249a4ddf114c24c7a493e1264
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_theme.scss
@@ -0,0 +1,291 @@
+/*!
+ * Bootstrap v3.3.6 (http://getbootstrap.com)
+ * Copyright 2011-2015 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+//
+// Load core variables and mixins
+// --------------------------------------------------
+
+@import "variables";
+@import "mixins";
+
+
+//
+// Buttons
+// --------------------------------------------------
+
+// Common styles
+.msp-btn-default,
+.msp-btn-primary,
+.msp-btn-success,
+.msp-btn-info,
+.msp-btn-warning,
+.msp-btn-danger {
+ text-shadow: 0 -1px 0 rgba(0,0,0,.2);
+ $shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 1px rgba(0,0,0,.075);
+ @include box-shadow($shadow);
+
+ // Reset the shadow
+ &:active,
+ &.active {
+ @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
+ }
+
+ &.disabled,
+ &[disabled],
+ fieldset[disabled] & {
+ @include box-shadow(none);
+ }
+
+ .badge {
+ text-shadow: none;
+ }
+}
+
+// Mixin for generating new styles
+@mixin msp-btn-styles($msp-btn-color: #555) {
+ @include gradient-vertical($start-color: $msp-btn-color, $end-color: darken($msp-btn-color, 12%));
+ @include reset-filter; // Disable gradients for IE9 because filter bleeds through rounded corners; see https://github.com/twbs/bootstrap/issues/10620
+ background-repeat: repeat-x;
+ border-color: darken($msp-btn-color, 14%);
+
+ &:hover,
+ &:focus {
+ background-color: darken($msp-btn-color, 12%);
+ background-position: 0 -15px;
+ }
+
+ &:active,
+ &.active {
+ background-color: darken($msp-btn-color, 12%);
+ border-color: darken($msp-btn-color, 14%);
+ }
+
+ &.disabled,
+ &[disabled],
+ fieldset[disabled] & {
+ &,
+ &:hover,
+ &:focus,
+ &.focus,
+ &:active,
+ &.active {
+ background-color: darken($msp-btn-color, 12%);
+ background-image: none;
+ }
+ }
+}
+
+// Common styles
+.msp-btn {
+ // Remove the gradient for the pressed/active state
+ &:active,
+ &.active {
+ background-image: none;
+ }
+}
+
+// Apply the mixin to the buttons
+.msp-btn-default { @include msp-btn-styles($msp-btn-default-bg); text-shadow: 0 1px 0 #fff; border-color: #ccc; }
+.msp-btn-primary { @include msp-btn-styles($msp-btn-primary-bg); }
+.msp-btn-success { @include msp-btn-styles($msp-btn-success-bg); }
+.msp-btn-info { @include msp-btn-styles($msp-btn-info-bg); }
+.msp-btn-warning { @include msp-btn-styles($msp-btn-warning-bg); }
+.msp-btn-danger { @include msp-btn-styles($msp-btn-danger-bg); }
+
+
+//
+// Images
+// --------------------------------------------------
+
+.thumbnail,
+.img-thumbnail {
+ @include box-shadow(0 1px 2px rgba(0,0,0,.075));
+}
+
+
+//
+// Dropdowns
+// --------------------------------------------------
+
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus {
+ @include gradient-vertical($start-color: $dropdown-link-hover-bg, $end-color: darken($dropdown-link-hover-bg, 5%));
+ background-color: darken($dropdown-link-hover-bg, 5%);
+}
+.dropdown-menu > .active > a,
+.dropdown-menu > .active > a:hover,
+.dropdown-menu > .active > a:focus {
+ @include gradient-vertical($start-color: $dropdown-link-active-bg, $end-color: darken($dropdown-link-active-bg, 5%));
+ background-color: darken($dropdown-link-active-bg, 5%);
+}
+
+
+//
+// Navbar
+// --------------------------------------------------
+
+// Default navbar
+.navbar-default {
+ @include gradient-vertical($start-color: lighten($navbar-default-bg, 10%), $end-color: $navbar-default-bg);
+ @include reset-filter; // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered
+ border-radius: $navbar-border-radius;
+ $shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 1px 5px rgba(0,0,0,.075);
+ @include box-shadow($shadow);
+
+ .navbar-nav > .open > a,
+ .navbar-nav > .active > a {
+ @include gradient-vertical($start-color: darken($navbar-default-link-active-bg, 5%), $end-color: darken($navbar-default-link-active-bg, 2%));
+ @include box-shadow(inset 0 3px 9px rgba(0,0,0,.075));
+ }
+}
+.navbar-brand,
+.navbar-nav > li > a {
+ text-shadow: 0 1px 0 rgba(255,255,255,.25);
+}
+
+// Inverted navbar
+.navbar-inverse {
+ @include gradient-vertical($start-color: lighten($navbar-inverse-bg, 10%), $end-color: $navbar-inverse-bg);
+ @include reset-filter; // Remove gradient in IE<10 to fix bug where dropdowns don't get triggered; see https://github.com/twbs/bootstrap/issues/10257
+ border-radius: $navbar-border-radius;
+ .navbar-nav > .open > a,
+ .navbar-nav > .active > a {
+ @include gradient-vertical($start-color: $navbar-inverse-link-active-bg, $end-color: lighten($navbar-inverse-link-active-bg, 2.5%));
+ @include box-shadow(inset 0 3px 9px rgba(0,0,0,.25));
+ }
+
+ .navbar-brand,
+ .navbar-nav > li > a {
+ text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+ }
+}
+
+// Undo rounded corners in static and fixed navbars
+.navbar-static-top,
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+ border-radius: 0;
+}
+
+// Fix active state of dropdown items in collapsed mode
+@media (max-width: $grid-float-breakpoint-max) {
+ .navbar .navbar-nav .open .dropdown-menu > .active > a {
+ &,
+ &:hover,
+ &:focus {
+ color: #fff;
+ @include gradient-vertical($start-color: $dropdown-link-active-bg, $end-color: darken($dropdown-link-active-bg, 5%));
+ }
+ }
+}
+
+
+//
+// Alerts
+// --------------------------------------------------
+
+// Common styles
+.alert {
+ text-shadow: 0 1px 0 rgba(255,255,255,.2);
+ $shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.05);
+ @include box-shadow($shadow);
+}
+
+// Mixin for generating new styles
+@mixin alert-styles($color) {
+ @include gradient-vertical($start-color: $color, $end-color: darken($color, 7.5%));
+ border-color: darken($color, 15%);
+}
+
+// Apply the mixin to the alerts
+.alert-success { @include alert-styles($alert-success-bg); }
+.alert-info { @include alert-styles($alert-info-bg); }
+.alert-warning { @include alert-styles($alert-warning-bg); }
+.alert-danger { @include alert-styles($alert-danger-bg); }
+
+
+//
+// Progress bars
+// --------------------------------------------------
+
+// Give the progress background some depth
+.progress {
+ @include gradient-vertical($start-color: darken($progress-bg, 4%), $end-color: $progress-bg)
+}
+
+// Mixin for generating new styles
+@mixin progress-bar-styles($color) {
+ @include gradient-vertical($start-color: $color, $end-color: darken($color, 10%));
+}
+
+// Apply the mixin to the progress bars
+.progress-bar { @include progress-bar-styles($progress-bar-bg); }
+.progress-bar-success { @include progress-bar-styles($progress-bar-success-bg); }
+.progress-bar-info { @include progress-bar-styles($progress-bar-info-bg); }
+.progress-bar-warning { @include progress-bar-styles($progress-bar-warning-bg); }
+.progress-bar-danger { @include progress-bar-styles($progress-bar-danger-bg); }
+
+// Reset the striped class because our mixins don't do multiple gradients and
+// the above custom styles override the new `.progress-bar-striped` in v3.2.0.
+.progress-bar-striped {
+ @include gradient-striped;
+}
+
+
+//
+// List groups
+// --------------------------------------------------
+
+.list-group {
+ border-radius: $border-radius-base;
+ @include box-shadow(0 1px 2px rgba(0,0,0,.075));
+}
+.list-group-item.active,
+.list-group-item.active:hover,
+.list-group-item.active:focus {
+ text-shadow: 0 -1px 0 darken($list-group-active-bg, 10%);
+ @include gradient-vertical($start-color: $list-group-active-bg, $end-color: darken($list-group-active-bg, 7.5%));
+ border-color: darken($list-group-active-border, 7.5%);
+
+ .badge {
+ text-shadow: none;
+ }
+}
+
+
+//
+// Panels
+// --------------------------------------------------
+
+// Common styles
+.panel {
+ @include box-shadow(0 1px 2px rgba(0,0,0,.05));
+}
+
+// Mixin for generating new styles
+@mixin panel-heading-styles($color) {
+ @include gradient-vertical($start-color: $color, $end-color: darken($color, 5%));
+}
+
+// Apply the mixin to the panel headings only
+.panel-default > .panel-heading { @include panel-heading-styles($panel-default-heading-bg); }
+.panel-primary > .panel-heading { @include panel-heading-styles($panel-primary-heading-bg); }
+.panel-success > .panel-heading { @include panel-heading-styles($panel-success-heading-bg); }
+.panel-info > .panel-heading { @include panel-heading-styles($panel-info-heading-bg); }
+.panel-warning > .panel-heading { @include panel-heading-styles($panel-warning-heading-bg); }
+.panel-danger > .panel-heading { @include panel-heading-styles($panel-danger-heading-bg); }
+
+
+//
+// Wells
+// --------------------------------------------------
+
+.well {
+ @include gradient-vertical($start-color: darken($well-bg, 5%), $end-color: $well-bg);
+ border-color: darken($well-bg, 10%);
+ $shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 1px 0 rgba(255,255,255,.1);
+ @include box-shadow($shadow);
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_thumbnails.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_thumbnails.scss
new file mode 100644
index 0000000000000000000000000000000000000000..da0e1e76cf01131006ae0c188d81d3f1470ad197
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_thumbnails.scss
@@ -0,0 +1,38 @@
+//
+// Thumbnails
+// --------------------------------------------------
+
+
+// Mixin and adjust the regular image class
+.thumbnail {
+ display: block;
+ padding: $thumbnail-padding;
+ margin-bottom: $line-height-computed;
+ line-height: $line-height-base;
+ background-color: $thumbnail-bg;
+ border: 1px solid $thumbnail-border;
+ border-radius: $thumbnail-border-radius;
+ @include transition(border .2s ease-in-out);
+
+ > img,
+ a > img {
+ @include img-responsive;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ // [converter] extracted a&:hover, a&:focus, a&.active to a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active
+
+ // Image captions
+ .caption {
+ padding: $thumbnail-caption-padding;
+ color: $thumbnail-caption-color;
+ }
+}
+
+// Add a hover state for linked versions only
+a.thumbnail:hover,
+a.thumbnail:focus,
+a.thumbnail.active {
+ border-color: $link-color;
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_tooltip.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_tooltip.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f0c165827434484c9121d320324284b265ace7f1
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_tooltip.scss
@@ -0,0 +1,101 @@
+//
+// Tooltips
+// --------------------------------------------------
+
+
+// Base class
+.tooltip {
+ position: absolute;
+ z-index: $zindex-tooltip;
+ display: block;
+ // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+ // So reset our font and text properties to avoid inheriting weird values.
+ @include reset-text;
+ font-size: $font-size-small;
+
+ @include opacity(0);
+
+ &.in { @include opacity($tooltip-opacity); }
+ &.top { margin-top: -3px; padding: $tooltip-arrow-width 0; }
+ &.right { margin-left: 3px; padding: 0 $tooltip-arrow-width; }
+ &.bottom { margin-top: 3px; padding: $tooltip-arrow-width 0; }
+ &.left { margin-left: -3px; padding: 0 $tooltip-arrow-width; }
+}
+
+// Wrapper for the tooltip content
+.tooltip-inner {
+ max-width: $tooltip-max-width;
+ padding: 3px 8px;
+ color: $tooltip-color;
+ text-align: center;
+ background-color: $tooltip-bg;
+ border-radius: $border-radius-base;
+}
+
+// Arrows
+.tooltip-arrow {
+ position: absolute;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+}
+// Note: Deprecated .top-left, .top-right, .bottom-left, and .bottom-right as of v3.3.1
+.tooltip {
+ &.top .tooltip-arrow {
+ bottom: 0;
+ left: 50%;
+ margin-left: -$tooltip-arrow-width;
+ border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
+ border-top-color: $tooltip-arrow-color;
+ }
+ &.top-left .tooltip-arrow {
+ bottom: 0;
+ right: $tooltip-arrow-width;
+ margin-bottom: -$tooltip-arrow-width;
+ border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
+ border-top-color: $tooltip-arrow-color;
+ }
+ &.top-right .tooltip-arrow {
+ bottom: 0;
+ left: $tooltip-arrow-width;
+ margin-bottom: -$tooltip-arrow-width;
+ border-width: $tooltip-arrow-width $tooltip-arrow-width 0;
+ border-top-color: $tooltip-arrow-color;
+ }
+ &.right .tooltip-arrow {
+ top: 50%;
+ left: 0;
+ margin-top: -$tooltip-arrow-width;
+ border-width: $tooltip-arrow-width $tooltip-arrow-width $tooltip-arrow-width 0;
+ border-right-color: $tooltip-arrow-color;
+ }
+ &.left .tooltip-arrow {
+ top: 50%;
+ right: 0;
+ margin-top: -$tooltip-arrow-width;
+ border-width: $tooltip-arrow-width 0 $tooltip-arrow-width $tooltip-arrow-width;
+ border-left-color: $tooltip-arrow-color;
+ }
+ &.bottom .tooltip-arrow {
+ top: 0;
+ left: 50%;
+ margin-left: -$tooltip-arrow-width;
+ border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
+ border-bottom-color: $tooltip-arrow-color;
+ }
+ &.bottom-left .tooltip-arrow {
+ top: 0;
+ right: $tooltip-arrow-width;
+ margin-top: -$tooltip-arrow-width;
+ border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
+ border-bottom-color: $tooltip-arrow-color;
+ }
+ &.bottom-right .tooltip-arrow {
+ top: 0;
+ left: $tooltip-arrow-width;
+ margin-top: -$tooltip-arrow-width;
+ border-width: 0 $tooltip-arrow-width $tooltip-arrow-width;
+ border-bottom-color: $tooltip-arrow-color;
+ }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_type.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_type.scss
new file mode 100644
index 0000000000000000000000000000000000000000..20c4d00acb7ccfd20049ab0258c3f99e22d999dc
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_type.scss
@@ -0,0 +1,298 @@
+//
+// Typography
+// --------------------------------------------------
+
+
+// Headings
+// -------------------------
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+ font-family: $headings-font-family;
+ font-weight: $headings-font-weight;
+ line-height: $headings-line-height;
+ color: $headings-color;
+
+ small,
+ .small {
+ font-weight: normal;
+ line-height: 1;
+ color: $headings-small-color;
+ }
+}
+
+h1, .h1,
+h2, .h2,
+h3, .h3 {
+ margin-top: $line-height-computed;
+ margin-bottom: ($line-height-computed / 2);
+
+ small,
+ .small {
+ font-size: 65%;
+ }
+}
+h4, .h4,
+h5, .h5,
+h6, .h6 {
+ margin-top: ($line-height-computed / 2);
+ margin-bottom: ($line-height-computed / 2);
+
+ small,
+ .small {
+ font-size: 75%;
+ }
+}
+
+h1, .h1 { font-size: $font-size-h1; }
+h2, .h2 { font-size: $font-size-h2; }
+h3, .h3 { font-size: $font-size-h3; }
+h4, .h4 { font-size: $font-size-h4; }
+h5, .h5 { font-size: $font-size-h5; }
+h6, .h6 { font-size: $font-size-h6; }
+
+
+// Body text
+// -------------------------
+
+p {
+ margin: 0 0 ($line-height-computed / 2);
+}
+
+.lead {
+ margin-bottom: $line-height-computed;
+ font-size: floor(($font-size-base * 1.15));
+ font-weight: 300;
+ line-height: 1.4;
+
+ @media (min-width: $screen-sm-min) {
+ font-size: ($font-size-base * 1.5);
+ }
+}
+
+
+// Emphasis & misc
+// -------------------------
+
+// Ex: (12px small font / 14px base font) * 100% = about 85%
+small,
+.small {
+ font-size: floor((100% * $font-size-small / $font-size-base));
+}
+
+mark,
+.mark {
+ background-color: $state-warning-bg;
+ padding: .2em;
+}
+
+// Alignment
+.text-left { text-align: left; }
+.text-right { text-align: right; }
+.text-center { text-align: center; }
+.text-justify { text-align: justify; }
+.text-nowrap { white-space: nowrap; }
+
+// Transformation
+.text-lowercase { text-transform: lowercase; }
+.text-uppercase { text-transform: uppercase; }
+.text-capitalize { text-transform: capitalize; }
+
+// Contextual colors
+.text-muted {
+ color: $text-muted;
+}
+
+@include text-emphasis-variant('.text-primary', $brand-primary);
+
+@include text-emphasis-variant('.text-success', $state-success-text);
+
+@include text-emphasis-variant('.text-info', $state-info-text);
+
+@include text-emphasis-variant('.text-warning', $state-warning-text);
+
+@include text-emphasis-variant('.text-danger', $state-danger-text);
+
+// Contextual backgrounds
+// For now we'll leave these alongside the text classes until v4 when we can
+// safely shift things around (per SemVer rules).
+.bg-primary {
+ // Given the contrast here, this is the only class to have its color inverted
+ // automatically.
+ color: #fff;
+}
+@include bg-variant('.bg-primary', $brand-primary);
+
+@include bg-variant('.bg-success', $state-success-bg);
+
+@include bg-variant('.bg-info', $state-info-bg);
+
+@include bg-variant('.bg-warning', $state-warning-bg);
+
+@include bg-variant('.bg-danger', $state-danger-bg);
+
+
+// Page header
+// -------------------------
+
+.page-header {
+ padding-bottom: (($line-height-computed / 2) - 1);
+ margin: ($line-height-computed * 2) 0 $line-height-computed;
+ border-bottom: 1px solid $page-header-border-color;
+}
+
+
+// Lists
+// -------------------------
+
+// Unordered and Ordered lists
+ul,
+ol {
+ margin-top: 0;
+ margin-bottom: ($line-height-computed / 2);
+ ul,
+ ol {
+ margin-bottom: 0;
+ }
+}
+
+// List options
+
+// [converter] extracted from `.msp-list-unstyled` for libsass compatibility
+@mixin msp-list-unstyled {
+ padding-left: 0;
+ list-style: none;
+}
+// [converter] extracted as `@mixin msp-list-unstyled` for libsass compatibility
+.msp-list-unstyled {
+ @include msp-list-unstyled;
+}
+
+
+// Inline turns list items into inline-block
+.list-inline {
+ @include msp-list-unstyled;
+ margin-left: -5px;
+
+ > li {
+ display: inline-block;
+ padding-left: 5px;
+ padding-right: 5px;
+ }
+}
+
+// Description Lists
+dl {
+ margin-top: 0; // Remove browser default
+ margin-bottom: $line-height-computed;
+}
+dt,
+dd {
+ line-height: $line-height-base;
+}
+dt {
+ font-weight: bold;
+}
+dd {
+ margin-left: 0; // Undo browser default
+}
+
+// Horizontal description lists
+//
+// Defaults to being stacked without any of the below styles applied, until the
+// grid breakpoint is reached (default of ~768px).
+
+.dl-horizontal {
+ dd {
+ @include clearfix; // Clear the floated `dt` if an empty `dd` is present
+ }
+
+ @media (min-width: $dl-horizontal-breakpoint) {
+ dt {
+ float: left;
+ width: ($dl-horizontal-offset - 20);
+ clear: left;
+ text-align: right;
+ @include text-overflow;
+ }
+ dd {
+ margin-left: $dl-horizontal-offset;
+ }
+ }
+}
+
+
+// Misc
+// -------------------------
+
+// Abbreviations and acronyms
+abbr[title],
+// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
+abbr[data-original-title] {
+ cursor: help;
+ border-bottom: 1px dotted $abbr-border-color;
+}
+.initialism {
+ font-size: 90%;
+ @extend .text-uppercase;
+}
+
+// Blockquotes
+blockquote {
+ padding: ($line-height-computed / 2) $line-height-computed;
+ margin: 0 0 $line-height-computed;
+ font-size: $blockquote-font-size;
+ border-left: 5px solid $blockquote-border-color;
+
+ p,
+ ul,
+ ol {
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ // Note: Deprecated small and .small as of v3.1.0
+ // Context: https://github.com/twbs/bootstrap/issues/11660
+ footer,
+ small,
+ .small {
+ display: block;
+ font-size: 80%; // back to default font-size
+ line-height: $line-height-base;
+ color: $blockquote-small-color;
+
+ &:before {
+ content: '\2014 \00A0'; // em dash, nbsp
+ }
+ }
+}
+
+// Opposite alignment of blockquote
+//
+// Heads up: `blockquote.pull-right` has been deprecated as of v3.1.0.
+.blockquote-reverse,
+blockquote.pull-right {
+ padding-right: 15px;
+ padding-left: 0;
+ border-right: 5px solid $blockquote-border-color;
+ border-left: 0;
+ text-align: right;
+
+ // Account for citation
+ footer,
+ small,
+ .small {
+ &:before { content: ''; }
+ &:after {
+ content: '\00A0 \2014'; // nbsp, em dash
+ }
+ }
+}
+
+// Addresses
+address {
+ margin-bottom: $line-height-computed;
+ font-style: normal;
+ line-height: $line-height-base;
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_utilities.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_utilities.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8c99c71643ed94ad7000f105faf4610095270d33
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_utilities.scss
@@ -0,0 +1,55 @@
+//
+// Utility classes
+// --------------------------------------------------
+
+
+// Floats
+// -------------------------
+
+.clearfix {
+ @include clearfix;
+}
+.center-block {
+ @include center-block;
+}
+.pull-right {
+ float: right !important;
+}
+.pull-left {
+ float: left !important;
+}
+
+
+// Toggling content
+// -------------------------
+
+// Note: Deprecated .hide in favor of .hidden or .sr-only (as appropriate) in v3.0.1
+.hide {
+ display: none !important;
+}
+.show {
+ display: block !important;
+}
+.invisible {
+ visibility: hidden;
+}
+.text-hide {
+ @include text-hide;
+}
+
+
+// Hide from screenreaders and browsers
+//
+// Credit: HTML5 Boilerplate
+
+.hidden {
+ display: none !important;
+}
+
+
+// For Affix plugin
+// -------------------------
+
+.affix {
+ position: fixed;
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_variables.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_variables.scss
new file mode 100644
index 0000000000000000000000000000000000000000..965132ff21dd6d3480d62ac5af09a72ee22a1908
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_variables.scss
@@ -0,0 +1,874 @@
+$bootstrap-sass-asset-helper: false !default;
+//
+// Variables
+// --------------------------------------------------
+
+
+//== Colors
+//
+//## Gray and brand colors for use across Bootstrap.
+
+$gray-base: #000 !default;
+$gray-darker: lighten($gray-base, 13.5%) !default; // #222
+$gray-dark: lighten($gray-base, 20%) !default; // #333
+$gray: lighten($gray-base, 33.5%) !default; // #555
+$gray-light: lighten($gray-base, 46.7%) !default; // #777
+$gray-lighter: lighten($gray-base, 93.5%) !default; // #eee
+
+$brand-primary: darken(#428bca, 6.5%) !default; // #337ab7
+$brand-success: #5cb85c !default;
+$brand-info: #5bc0de !default;
+$brand-warning: #f0ad4e !default;
+$brand-danger: #d9534f !default;
+
+
+//== Scaffolding
+//
+//## Settings for some of the most global styles.
+
+//** Background color for `<body>`.
+$body-bg: #fff !default;
+//** Global text color on `<body>`.
+$text-color: $gray-dark !default;
+
+//** Global textual link color.
+$link-color: $brand-primary !default;
+//** Link hover color set via `darken()` function.
+$link-hover-color: darken($link-color, 15%) !default;
+//** Link hover decoration.
+$link-hover-decoration: underline !default;
+
+
+//== Typography
+//
+//## Font, line-height, and color for body text, headings, and more.
+
+$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
+//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
+$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;
+$font-family-base: $font-family-sans-serif !default;
+
+$font-size-base: 14px !default;
+$font-size-large: ceil(($font-size-base * 1.25)) !default; // ~18px
+$font-size-small: ceil(($font-size-base * 0.85)) !default; // ~12px
+
+$font-size-h1: floor(($font-size-base * 2.6)) !default; // ~36px
+$font-size-h2: floor(($font-size-base * 2.15)) !default; // ~30px
+$font-size-h3: ceil(($font-size-base * 1.7)) !default; // ~24px
+$font-size-h4: ceil(($font-size-base * 1.25)) !default; // ~18px
+$font-size-h5: $font-size-base !default;
+$font-size-h6: ceil(($font-size-base * 0.85)) !default; // ~12px
+
+//** Unit-less `line-height` for use in components like buttons.
+$line-height-base: 1.428571429 !default; // 20/14
+//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
+$line-height-computed: floor(($font-size-base * $line-height-base)) !default; // ~20px
+
+//** By default, this inherits from the `<body>`.
+$headings-font-family: inherit !default;
+$headings-font-weight: 500 !default;
+$headings-line-height: 1.1 !default;
+$headings-color: inherit !default;
+
+
+//== Iconography
+//
+//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower.
+
+//** Load fonts from this directory.
+
+// [converter] If $bootstrap-sass-asset-helper if used, provide path relative to the assets load path.
+// [converter] This is because some asset helpers, such as Sprockets, do not work with file-relative paths.
+$icon-font-path: if($bootstrap-sass-asset-helper, "bootstrap/", "../fonts/bootstrap/") !default;
+
+//** File name for all font files.
+$icon-font-name: "glyphicons-halflings-regular" !default;
+//** Element ID within SVG icon file.
+$icon-font-svg-id: "glyphicons_halflingsregular" !default;
+
+
+//== Components
+//
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+
+$padding-base-vertical: 6px !default;
+$padding-base-horizontal: 12px !default;
+
+$padding-large-vertical: 10px !default;
+$padding-large-horizontal: 16px !default;
+
+$padding-small-vertical: 5px !default;
+$padding-small-horizontal: 10px !default;
+
+$padding-xs-vertical: 1px !default;
+$padding-xs-horizontal: 5px !default;
+
+$line-height-large: 1.3333333 !default; // extra decimals for Win 8.1 Chrome
+$line-height-small: 1.5 !default;
+
+$border-radius-base: 4px !default;
+$border-radius-large: 6px !default;
+$border-radius-small: 3px !default;
+
+//** Global color for active items (e.g., navs or dropdowns).
+$component-active-color: #fff !default;
+//** Global background color for active items (e.g., navs or dropdowns).
+$component-active-bg: $brand-primary !default;
+
+//** Width of the `border` for generating carets that indicator dropdowns.
+$caret-width-base: 4px !default;
+//** Carets increase slightly in size for larger components.
+$caret-width-large: 5px !default;
+
+
+//== Tables
+//
+//## Customizes the `.table` component with basic values, each used across all table variations.
+
+//** Padding for `<th>`s and `<td>`s.
+$table-cell-padding: 8px !default;
+//** Padding for cells in `.table-condensed`.
+$table-condensed-cell-padding: 5px !default;
+
+//** Default background color used for all tables.
+$table-bg: transparent !default;
+//** Background color used for `.table-striped`.
+$table-bg-accent: #f9f9f9 !default;
+//** Background color used for `.table-hover`.
+$table-bg-hover: #f5f5f5 !default;
+$table-bg-active: $table-bg-hover !default;
+
+//** Border color for table and cell borders.
+$table-border-color: #ddd !default;
+
+
+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
+
+$msp-btn-font-weight: normal !default;
+
+$msp-btn-default-color: #333 !default;
+$msp-btn-default-bg: #fff !default;
+$msp-btn-default-border: #ccc !default;
+
+$msp-btn-primary-color: #fff !default;
+$msp-btn-primary-bg: $brand-primary !default;
+$msp-btn-primary-border: darken($msp-btn-primary-bg, 5%) !default;
+
+$msp-btn-success-color: #fff !default;
+$msp-btn-success-bg: $brand-success !default;
+$msp-btn-success-border: darken($msp-btn-success-bg, 5%) !default;
+
+$msp-btn-info-color: #fff !default;
+$msp-btn-info-bg: $brand-info !default;
+$msp-btn-info-border: darken($msp-btn-info-bg, 5%) !default;
+
+$msp-btn-warning-color: #fff !default;
+$msp-btn-warning-bg: $brand-warning !default;
+$msp-btn-warning-border: darken($msp-btn-warning-bg, 5%) !default;
+
+$msp-btn-danger-color: #fff !default;
+$msp-btn-danger-bg: $brand-danger !default;
+$msp-btn-danger-border: darken($msp-btn-danger-bg, 5%) !default;
+
+$msp-btn-link-disabled-color: $gray-light !default;
+
+// Allows for customizing button radius independently from global border radius
+$msp-btn-border-radius-base: $border-radius-base !default;
+$msp-btn-border-radius-large: $border-radius-large !default;
+$msp-btn-border-radius-small: $border-radius-small !default;
+
+
+//== Forms
+//
+//##
+
+//** `<input>` background color
+$input-bg: #fff !default;
+//** `<input disabled>` background color
+$input-bg-disabled: $gray-lighter !default;
+
+//** Text color for `<input>`s
+$input-color: $gray !default;
+//** `<input>` border color
+$input-border: #ccc !default;
+
+// TODO: Rename `$input-border-radius` to `$input-border-radius-base` in v4
+//** Default `.msp-form-control` border radius
+// This has no effect on `<select>`s in some browsers, due to the limited stylability of `<select>`s in CSS.
+$input-border-radius: $border-radius-base !default;
+//** Large `.msp-form-control` border radius
+$input-border-radius-large: $border-radius-large !default;
+//** Small `.msp-form-control` border radius
+$input-border-radius-small: $border-radius-small !default;
+
+//** Border color for inputs on focus
+$input-border-focus: #66afe9 !default;
+
+//** Placeholder text color
+$input-color-placeholder: #999 !default;
+
+//** Default `.msp-form-control` height
+$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
+//** Large `.msp-form-control` height
+$input-height-large: (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
+//** Small `.msp-form-control` height
+$input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
+
+//** `.form-group` margin
+$form-group-margin-bottom: 15px !default;
+
+$legend-color: $gray-dark !default;
+$legend-border-color: #e5e5e5 !default;
+
+//** Background color for textual input addons
+$input-group-addon-bg: $gray-lighter !default;
+//** Border color for textual input addons
+$input-group-addon-border-color: $input-border !default;
+
+//** Disabled cursor for form controls and buttons.
+$cursor-disabled: not-allowed !default;
+
+
+//== Dropdowns
+//
+//## Dropdown menu container and contents.
+
+//** Background for the dropdown menu.
+$dropdown-bg: #fff !default;
+//** Dropdown menu `border-color`.
+$dropdown-border: rgba(0,0,0,.15) !default;
+//** Dropdown menu `border-color` **for IE8**.
+$dropdown-fallback-border: #ccc !default;
+//** Divider color for between dropdown items.
+$dropdown-divider-bg: #e5e5e5 !default;
+
+//** Dropdown link text color.
+$dropdown-link-color: $gray-dark !default;
+//** Hover color for dropdown links.
+$dropdown-link-hover-color: darken($gray-dark, 5%) !default;
+//** Hover background for dropdown links.
+$dropdown-link-hover-bg: #f5f5f5 !default;
+
+//** Active dropdown menu item text color.
+$dropdown-link-active-color: $component-active-color !default;
+//** Active dropdown menu item background color.
+$dropdown-link-active-bg: $component-active-bg !default;
+
+//** Disabled dropdown menu item background color.
+$dropdown-link-disabled-color: $gray-light !default;
+
+//** Text color for headers within dropdown menus.
+$dropdown-header-color: $gray-light !default;
+
+//** Deprecated `$dropdown-caret-color` as of v3.1.0
+$dropdown-caret-color: #000 !default;
+
+
+//-- Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+//
+// Note: These variables are not generated into the Customizer.
+
+$zindex-navbar: 1000 !default;
+$zindex-dropdown: 1000 !default;
+$zindex-popover: 1060 !default;
+$zindex-tooltip: 1070 !default;
+$zindex-navbar-fixed: 1030 !default;
+$zindex-modal-background: 1040 !default;
+$zindex-modal: 1050 !default;
+
+
+//== Media queries breakpoints
+//
+//## Define the breakpoints at which your layout will change, adapting to different screen sizes.
+
+// Extra small screen / phone
+//** Deprecated `$screen-xs` as of v3.0.1
+$screen-xs: 480px !default;
+//** Deprecated `$screen-xs-min` as of v3.2.0
+$screen-xs-min: $screen-xs !default;
+//** Deprecated `$screen-phone` as of v3.0.1
+$screen-phone: $screen-xs-min !default;
+
+// Small screen / tablet
+//** Deprecated `$screen-sm` as of v3.0.1
+$screen-sm: 768px !default;
+$screen-sm-min: $screen-sm !default;
+//** Deprecated `$screen-tablet` as of v3.0.1
+$screen-tablet: $screen-sm-min !default;
+
+// Medium screen / desktop
+//** Deprecated `$screen-md` as of v3.0.1
+$screen-md: 992px !default;
+$screen-md-min: $screen-md !default;
+//** Deprecated `$screen-desktop` as of v3.0.1
+$screen-desktop: $screen-md-min !default;
+
+// Large screen / wide desktop
+//** Deprecated `$screen-lg` as of v3.0.1
+$screen-lg: 1200px !default;
+$screen-lg-min: $screen-lg !default;
+//** Deprecated `$screen-lg-desktop` as of v3.0.1
+$screen-lg-desktop: $screen-lg-min !default;
+
+// So media queries don't overlap when required, provide a maximum
+$screen-xs-max: ($screen-sm-min - 1) !default;
+$screen-sm-max: ($screen-md-min - 1) !default;
+$screen-md-max: ($screen-lg-min - 1) !default;
+
+
+//== Grid system
+//
+//## Define your custom responsive grid.
+
+//** Number of columns in the grid.
+$grid-columns: 12 !default;
+//** Padding between columns. Gets divided in half for the left and right.
+$grid-gutter-width: 30px !default;
+// Navbar collapse
+//** Point at which the navbar becomes uncollapsed.
+$grid-float-breakpoint: $screen-sm-min !default;
+//** Point at which the navbar begins collapsing.
+$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;
+
+
+//== Container sizes
+//
+//## Define the maximum width of `.container` for different screen sizes.
+
+// Small screen / tablet
+$container-tablet: (720px + $grid-gutter-width) !default;
+//** For `$screen-sm-min` and up.
+$container-sm: $container-tablet !default;
+
+// Medium screen / desktop
+$container-desktop: (940px + $grid-gutter-width) !default;
+//** For `$screen-md-min` and up.
+$container-md: $container-desktop !default;
+
+// Large screen / wide desktop
+$container-large-desktop: (1140px + $grid-gutter-width) !default;
+//** For `$screen-lg-min` and up.
+$container-lg: $container-large-desktop !default;
+
+
+//== Navbar
+//
+//##
+
+// Basics of a navbar
+$navbar-height: 50px !default;
+$navbar-margin-bottom: $line-height-computed !default;
+$navbar-border-radius: $border-radius-base !default;
+$navbar-padding-horizontal: floor(($grid-gutter-width / 2)) !default;
+$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2) !default;
+$navbar-collapse-max-height: 340px !default;
+
+$navbar-default-color: #777 !default;
+$navbar-default-bg: #f8f8f8 !default;
+$navbar-default-border: darken($navbar-default-bg, 6.5%) !default;
+
+// Navbar links
+$navbar-default-link-color: #777 !default;
+$navbar-default-link-hover-color: #333 !default;
+$navbar-default-link-hover-bg: transparent !default;
+$navbar-default-link-active-color: #555 !default;
+$navbar-default-link-active-bg: darken($navbar-default-bg, 6.5%) !default;
+$navbar-default-link-disabled-color: #ccc !default;
+$navbar-default-link-disabled-bg: transparent !default;
+
+// Navbar brand label
+$navbar-default-brand-color: $navbar-default-link-color !default;
+$navbar-default-brand-hover-color: darken($navbar-default-brand-color, 10%) !default;
+$navbar-default-brand-hover-bg: transparent !default;
+
+// Navbar toggle
+$navbar-default-toggle-hover-bg: #ddd !default;
+$navbar-default-toggle-icon-bar-bg: #888 !default;
+$navbar-default-toggle-border-color: #ddd !default;
+
+
+//=== Inverted navbar
+// Reset inverted navbar basics
+$navbar-inverse-color: lighten($gray-light, 15%) !default;
+$navbar-inverse-bg: #222 !default;
+$navbar-inverse-border: darken($navbar-inverse-bg, 10%) !default;
+
+// Inverted navbar links
+$navbar-inverse-link-color: lighten($gray-light, 15%) !default;
+$navbar-inverse-link-hover-color: #fff !default;
+$navbar-inverse-link-hover-bg: transparent !default;
+$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color !default;
+$navbar-inverse-link-active-bg: darken($navbar-inverse-bg, 10%) !default;
+$navbar-inverse-link-disabled-color: #444 !default;
+$navbar-inverse-link-disabled-bg: transparent !default;
+
+// Inverted navbar brand label
+$navbar-inverse-brand-color: $navbar-inverse-link-color !default;
+$navbar-inverse-brand-hover-color: #fff !default;
+$navbar-inverse-brand-hover-bg: transparent !default;
+
+// Inverted navbar toggle
+$navbar-inverse-toggle-hover-bg: #333 !default;
+$navbar-inverse-toggle-icon-bar-bg: #fff !default;
+$navbar-inverse-toggle-border-color: #333 !default;
+
+
+//== Navs
+//
+//##
+
+//=== Shared nav styles
+$nav-link-padding: 10px 15px !default;
+$nav-link-hover-bg: $gray-lighter !default;
+
+$nav-disabled-link-color: $gray-light !default;
+$nav-disabled-link-hover-color: $gray-light !default;
+
+//== Tabs
+$nav-tabs-border-color: #ddd !default;
+
+$nav-tabs-link-hover-border-color: $gray-lighter !default;
+
+$nav-tabs-active-link-hover-bg: $body-bg !default;
+$nav-tabs-active-link-hover-color: $gray !default;
+$nav-tabs-active-link-hover-border-color: #ddd !default;
+
+$nav-tabs-justified-link-border-color: #ddd !default;
+$nav-tabs-justified-active-link-border-color: $body-bg !default;
+
+//== Pills
+$nav-pills-border-radius: $border-radius-base !default;
+$nav-pills-active-link-hover-bg: $component-active-bg !default;
+$nav-pills-active-link-hover-color: $component-active-color !default;
+
+
+//== Pagination
+//
+//##
+
+$pagination-color: $link-color !default;
+$pagination-bg: #fff !default;
+$pagination-border: #ddd !default;
+
+$pagination-hover-color: $link-hover-color !default;
+$pagination-hover-bg: $gray-lighter !default;
+$pagination-hover-border: #ddd !default;
+
+$pagination-active-color: #fff !default;
+$pagination-active-bg: $brand-primary !default;
+$pagination-active-border: $brand-primary !default;
+
+$pagination-disabled-color: $gray-light !default;
+$pagination-disabled-bg: #fff !default;
+$pagination-disabled-border: #ddd !default;
+
+
+//== Pager
+//
+//##
+
+$pager-bg: $pagination-bg !default;
+$pager-border: $pagination-border !default;
+$pager-border-radius: 15px !default;
+
+$pager-hover-bg: $pagination-hover-bg !default;
+
+$pager-active-bg: $pagination-active-bg !default;
+$pager-active-color: $pagination-active-color !default;
+
+$pager-disabled-color: $pagination-disabled-color !default;
+
+
+//== Jumbotron
+//
+//##
+
+$jumbotron-padding: 30px !default;
+$jumbotron-color: inherit !default;
+$jumbotron-bg: $gray-lighter !default;
+$jumbotron-heading-color: inherit !default;
+$jumbotron-font-size: ceil(($font-size-base * 1.5)) !default;
+$jumbotron-heading-font-size: ceil(($font-size-base * 4.5)) !default;
+
+
+//== Form states and alerts
+//
+//## Define colors for form feedback states and, by default, alerts.
+
+$state-success-text: #3c763d !default;
+$state-success-bg: #dff0d8 !default;
+$state-success-border: darken(adjust-hue($state-success-bg, -10), 5%) !default;
+
+$state-info-text: #31708f !default;
+$state-info-bg: #d9edf7 !default;
+$state-info-border: darken(adjust-hue($state-info-bg, -10), 7%) !default;
+
+$state-warning-text: #8a6d3b !default;
+$state-warning-bg: #fcf8e3 !default;
+$state-warning-border: darken(adjust-hue($state-warning-bg, -10), 5%) !default;
+
+$state-danger-text: #a94442 !default;
+$state-danger-bg: #f2dede !default;
+$state-danger-border: darken(adjust-hue($state-danger-bg, -10), 5%) !default;
+
+
+//== Tooltips
+//
+//##
+
+//** Tooltip max width
+$tooltip-max-width: 200px !default;
+//** Tooltip text color
+$tooltip-color: #fff !default;
+//** Tooltip background color
+$tooltip-bg: #000 !default;
+$tooltip-opacity: .9 !default;
+
+//** Tooltip arrow width
+$tooltip-arrow-width: 5px !default;
+//** Tooltip arrow color
+$tooltip-arrow-color: $tooltip-bg !default;
+
+
+//== Popovers
+//
+//##
+
+//** Popover body background color
+$popover-bg: #fff !default;
+//** Popover maximum width
+$popover-max-width: 276px !default;
+//** Popover border color
+$popover-border-color: rgba(0,0,0,.2) !default;
+//** Popover fallback border color
+$popover-fallback-border-color: #ccc !default;
+
+//** Popover title background color
+$popover-title-bg: darken($popover-bg, 3%) !default;
+
+//** Popover arrow width
+$popover-arrow-width: 10px !default;
+//** Popover arrow color
+$popover-arrow-color: $popover-bg !default;
+
+//** Popover outer arrow width
+$popover-arrow-outer-width: ($popover-arrow-width + 1) !default;
+//** Popover outer arrow color
+$popover-arrow-outer-color: fade_in($popover-border-color, 0.05) !default;
+//** Popover outer arrow fallback color
+$popover-arrow-outer-fallback-color: darken($popover-fallback-border-color, 20%) !default;
+
+
+//== Labels
+//
+//##
+
+//** Default label background color
+$label-default-bg: $gray-light !default;
+//** Primary label background color
+$label-primary-bg: $brand-primary !default;
+//** Success label background color
+$label-success-bg: $brand-success !default;
+//** Info label background color
+$label-info-bg: $brand-info !default;
+//** Warning label background color
+$label-warning-bg: $brand-warning !default;
+//** Danger label background color
+$label-danger-bg: $brand-danger !default;
+
+//** Default label text color
+$label-color: #fff !default;
+//** Default text color of a linked label
+$label-link-hover-color: #fff !default;
+
+
+//== Modals
+//
+//##
+
+//** Padding applied to the modal body
+$modal-inner-padding: 15px !default;
+
+//** Padding applied to the modal title
+$modal-title-padding: 15px !default;
+//** Modal title line-height
+$modal-title-line-height: $line-height-base !default;
+
+//** Background color of modal content area
+$modal-content-bg: #fff !default;
+//** Modal content border color
+$modal-content-border-color: rgba(0,0,0,.2) !default;
+//** Modal content border color **for IE8**
+$modal-content-fallback-border-color: #999 !default;
+
+//** Modal backdrop background color
+$modal-backdrop-bg: #000 !default;
+//** Modal backdrop opacity
+$modal-backdrop-opacity: .5 !default;
+//** Modal header border color
+$modal-header-border-color: #e5e5e5 !default;
+//** Modal footer border color
+$modal-footer-border-color: $modal-header-border-color !default;
+
+$modal-lg: 900px !default;
+$modal-md: 600px !default;
+$modal-sm: 300px !default;
+
+
+//== Alerts
+//
+//## Define alert colors, border radius, and padding.
+
+$alert-padding: 15px !default;
+$alert-border-radius: $border-radius-base !default;
+$alert-link-font-weight: bold !default;
+
+$alert-success-bg: $state-success-bg !default;
+$alert-success-text: $state-success-text !default;
+$alert-success-border: $state-success-border !default;
+
+$alert-info-bg: $state-info-bg !default;
+$alert-info-text: $state-info-text !default;
+$alert-info-border: $state-info-border !default;
+
+$alert-warning-bg: $state-warning-bg !default;
+$alert-warning-text: $state-warning-text !default;
+$alert-warning-border: $state-warning-border !default;
+
+$alert-danger-bg: $state-danger-bg !default;
+$alert-danger-text: $state-danger-text !default;
+$alert-danger-border: $state-danger-border !default;
+
+
+//== Progress bars
+//
+//##
+
+//** Background color of the whole progress component
+$progress-bg: #f5f5f5 !default;
+//** Progress bar text color
+$progress-bar-color: #fff !default;
+//** Variable for setting rounded corners on progress bar.
+$progress-border-radius: $border-radius-base !default;
+
+//** Default progress bar color
+$progress-bar-bg: $brand-primary !default;
+//** Success progress bar color
+$progress-bar-success-bg: $brand-success !default;
+//** Warning progress bar color
+$progress-bar-warning-bg: $brand-warning !default;
+//** Danger progress bar color
+$progress-bar-danger-bg: $brand-danger !default;
+//** Info progress bar color
+$progress-bar-info-bg: $brand-info !default;
+
+
+//== List group
+//
+//##
+
+//** Background color on `.list-group-item`
+$list-group-bg: #fff !default;
+//** `.list-group-item` border color
+$list-group-border: #ddd !default;
+//** List group border radius
+$list-group-border-radius: $border-radius-base !default;
+
+//** Background color of single list items on hover
+$list-group-hover-bg: #f5f5f5 !default;
+//** Text color of active list items
+$list-group-active-color: $component-active-color !default;
+//** Background color of active list items
+$list-group-active-bg: $component-active-bg !default;
+//** Border color of active list elements
+$list-group-active-border: $list-group-active-bg !default;
+//** Text color for content within active list items
+$list-group-active-text-color: lighten($list-group-active-bg, 40%) !default;
+
+//** Text color of disabled list items
+$list-group-disabled-color: $gray-light !default;
+//** Background color of disabled list items
+$list-group-disabled-bg: $gray-lighter !default;
+//** Text color for content within disabled list items
+$list-group-disabled-text-color: $list-group-disabled-color !default;
+
+$list-group-link-color: #555 !default;
+$list-group-link-hover-color: $list-group-link-color !default;
+$list-group-link-heading-color: #333 !default;
+
+
+//== Panels
+//
+//##
+
+$panel-bg: #fff !default;
+$panel-body-padding: 15px !default;
+$panel-heading-padding: 10px 15px !default;
+$panel-footer-padding: $panel-heading-padding !default;
+$panel-border-radius: $border-radius-base !default;
+
+//** Border color for elements within panels
+$panel-inner-border: #ddd !default;
+$panel-footer-bg: #f5f5f5 !default;
+
+$panel-default-text: $gray-dark !default;
+$panel-default-border: #ddd !default;
+$panel-default-heading-bg: #f5f5f5 !default;
+
+$panel-primary-text: #fff !default;
+$panel-primary-border: $brand-primary !default;
+$panel-primary-heading-bg: $brand-primary !default;
+
+$panel-success-text: $state-success-text !default;
+$panel-success-border: $state-success-border !default;
+$panel-success-heading-bg: $state-success-bg !default;
+
+$panel-info-text: $state-info-text !default;
+$panel-info-border: $state-info-border !default;
+$panel-info-heading-bg: $state-info-bg !default;
+
+$panel-warning-text: $state-warning-text !default;
+$panel-warning-border: $state-warning-border !default;
+$panel-warning-heading-bg: $state-warning-bg !default;
+
+$panel-danger-text: $state-danger-text !default;
+$panel-danger-border: $state-danger-border !default;
+$panel-danger-heading-bg: $state-danger-bg !default;
+
+
+//== Thumbnails
+//
+//##
+
+//** Padding around the thumbnail image
+$thumbnail-padding: 4px !default;
+//** Thumbnail background color
+$thumbnail-bg: $body-bg !default;
+//** Thumbnail border color
+$thumbnail-border: #ddd !default;
+//** Thumbnail border radius
+$thumbnail-border-radius: $border-radius-base !default;
+
+//** Custom text color for thumbnail captions
+$thumbnail-caption-color: $text-color !default;
+//** Padding around the thumbnail caption
+$thumbnail-caption-padding: 9px !default;
+
+
+//== Wells
+//
+//##
+
+$well-bg: #f5f5f5 !default;
+$well-border: darken($well-bg, 7%) !default;
+
+
+//== Badges
+//
+//##
+
+$badge-color: #fff !default;
+//** Linked badge text color on hover
+$badge-link-hover-color: #fff !default;
+$badge-bg: $gray-light !default;
+
+//** Badge text color in active nav link
+$badge-active-color: $link-color !default;
+//** Badge background color in active nav link
+$badge-active-bg: #fff !default;
+
+$badge-font-weight: bold !default;
+$badge-line-height: 1 !default;
+$badge-border-radius: 10px !default;
+
+
+//== Breadcrumbs
+//
+//##
+
+$breadcrumb-padding-vertical: 8px !default;
+$breadcrumb-padding-horizontal: 15px !default;
+//** Breadcrumb background color
+$breadcrumb-bg: #f5f5f5 !default;
+//** Breadcrumb text color
+$breadcrumb-color: #ccc !default;
+//** Text color of current page in the breadcrumb
+$breadcrumb-active-color: $gray-light !default;
+//** Textual separator for between breadcrumb elements
+$breadcrumb-separator: "/" !default;
+
+
+//== Carousel
+//
+//##
+
+$carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6) !default;
+
+$carousel-control-color: #fff !default;
+$carousel-control-width: 15% !default;
+$carousel-control-opacity: .5 !default;
+$carousel-control-font-size: 20px !default;
+
+$carousel-indicator-active-bg: #fff !default;
+$carousel-indicator-border-color: #fff !default;
+
+$carousel-caption-color: #fff !default;
+
+
+//== Close
+//
+//##
+
+$close-font-weight: bold !default;
+$close-color: #000 !default;
+$close-text-shadow: 0 1px 0 #fff !default;
+
+
+//== Code
+//
+//##
+
+$code-color: #c7254e !default;
+$code-bg: #f9f2f4 !default;
+
+$kbd-color: #fff !default;
+$kbd-bg: #333 !default;
+
+$pre-bg: #f5f5f5 !default;
+$pre-color: $gray-dark !default;
+$pre-border-color: #ccc !default;
+$pre-scrollable-max-height: 340px !default;
+
+
+//== Type
+//
+//##
+
+//** Horizontal offset for forms and lists.
+$component-offset-horizontal: 180px !default;
+//** Text muted color
+$text-muted: $gray-light !default;
+//** Abbreviations and acronyms border color
+$abbr-border-color: $gray-light !default;
+//** Headings small color
+$headings-small-color: $gray-light !default;
+//** Blockquote small color
+$blockquote-small-color: $gray-light !default;
+//** Blockquote font size
+$blockquote-font-size: ($font-size-base * 1.25) !default;
+//** Blockquote border color
+$blockquote-border-color: $gray-lighter !default;
+//** Page header border color
+$page-header-border-color: $gray-lighter !default;
+//** Width of horizontal description list titles
+$dl-horizontal-offset: $component-offset-horizontal !default;
+//** Point at which .dl-horizontal becomes horizontal
+$dl-horizontal-breakpoint: $grid-float-breakpoint !default;
+//** Horizontal line color.
+$hr-border: $gray-lighter !default;
\ No newline at end of file
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/_wells.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/_wells.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b8657118a661cfb1f6119f7dccb169db06e4cd04
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/_wells.scss
@@ -0,0 +1,29 @@
+//
+// Wells
+// --------------------------------------------------
+
+
+// Base class
+.well {
+ min-height: 20px;
+ padding: 19px;
+ margin-bottom: 20px;
+ background-color: $well-bg;
+ border: 1px solid $well-border;
+ border-radius: $border-radius-base;
+ @include box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
+ blockquote {
+ border-color: #ddd;
+ border-color: rgba(0,0,0,.15);
+ }
+}
+
+// Sizes
+.well-lg {
+ padding: 24px;
+ border-radius: $border-radius-large;
+}
+.well-sm {
+ padding: 9px;
+ border-radius: $border-radius-small;
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_alerts.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_alerts.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3faf0b5a507d799af422ac2b65f20ef155781830
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_alerts.scss
@@ -0,0 +1,14 @@
+// Alerts
+
+@mixin alert-variant($background, $border, $text-color) {
+ background-color: $background;
+ border-color: $border;
+ color: $text-color;
+
+ hr {
+ border-top-color: darken($border, 5%);
+ }
+ .alert-link {
+ color: darken($text-color, 10%);
+ }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_background-variant.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_background-variant.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4c7769e13a3665a5cb9b12884f3ed82cfb277f34
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_background-variant.scss
@@ -0,0 +1,12 @@
+// Contextual backgrounds
+
+// [converter] $parent hack
+@mixin bg-variant($parent, $color) {
+ #{$parent} {
+ background-color: $color;
+ }
+ a#{$parent}:hover,
+ a#{$parent}:focus {
+ background-color: darken($color, 10%);
+ }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_border-radius.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_border-radius.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ce1949987508574a8d31b1d688096ce8925ed051
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_border-radius.scss
@@ -0,0 +1,18 @@
+// Single side border-radius
+
+@mixin border-top-radius($radius) {
+ border-top-right-radius: $radius;
+ border-top-left-radius: $radius;
+}
+@mixin border-right-radius($radius) {
+ border-bottom-right-radius: $radius;
+ border-top-right-radius: $radius;
+}
+@mixin border-bottom-radius($radius) {
+ border-bottom-right-radius: $radius;
+ border-bottom-left-radius: $radius;
+}
+@mixin border-left-radius($radius) {
+ border-bottom-left-radius: $radius;
+ border-top-left-radius: $radius;
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_buttons.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_buttons.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b93f84b2cb69d72278590188f862e06853451afd
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_buttons.scss
@@ -0,0 +1,65 @@
+// Button variants
+//
+// Easily pump out default styles, as well as :hover, :focus, :active,
+// and disabled options for all buttons
+
+@mixin button-variant($color, $background, $border) {
+ color: $color;
+ background-color: $background;
+ border-color: $border;
+
+ &:focus,
+ &.focus {
+ color: $color;
+ background-color: darken($background, 10%);
+ border-color: darken($border, 25%);
+ }
+ &:hover {
+ color: $color;
+ background-color: darken($background, 10%);
+ border-color: darken($border, 12%);
+ }
+ &:active,
+ &.active,
+ .open > &.dropdown-toggle {
+ color: $color;
+ background-color: darken($background, 10%);
+ border-color: darken($border, 12%);
+
+ &:hover,
+ &:focus,
+ &.focus {
+ color: $color;
+ background-color: darken($background, 17%);
+ border-color: darken($border, 25%);
+ }
+ }
+ &:active,
+ &.active,
+ .open > &.dropdown-toggle {
+ background-image: none;
+ }
+ &.disabled,
+ &[disabled],
+ fieldset[disabled] & {
+ &:hover,
+ &:focus,
+ &.focus {
+ background-color: $background;
+ border-color: $border;
+ }
+ }
+
+ .badge {
+ color: $background;
+ background-color: $color;
+ }
+}
+
+// Button sizes
+@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
+ padding: $padding-vertical $padding-horizontal;
+ font-size: $font-size;
+ line-height: $line-height;
+ border-radius: $border-radius;
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_center-block.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_center-block.scss
new file mode 100644
index 0000000000000000000000000000000000000000..e06fb5e276e471ac4bd574068254808089695afd
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_center-block.scss
@@ -0,0 +1,7 @@
+// Center-align a block level element
+
+@mixin center-block() {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_clearfix.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_clearfix.scss
new file mode 100644
index 0000000000000000000000000000000000000000..dc3e2ab426edf4d5ae1f27d5c767ff396f359243
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_clearfix.scss
@@ -0,0 +1,22 @@
+// Clearfix
+//
+// For modern browsers
+// 1. The space content is one way to avoid an Opera bug when the
+// contenteditable attribute is included anywhere else in the document.
+// Otherwise it causes space to appear at the top and bottom of elements
+// that are clearfixed.
+// 2. The use of `table` rather than `block` is only necessary if using
+// `:before` to contain the top-margins of child elements.
+//
+// Source: http://nicolasgallagher.com/micro-clearfix-hack/
+
+@mixin clearfix() {
+ &:before,
+ &:after {
+ content: " "; // 1
+ display: table; // 2
+ }
+ &:after {
+ clear: both;
+ }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_forms.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_forms.scss
new file mode 100644
index 0000000000000000000000000000000000000000..839067327c701e8c3db290840ebe0c79b96f050e
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_forms.scss
@@ -0,0 +1,88 @@
+// Form validation states
+//
+// Used in forms.less to generate the form validation CSS for warnings, errors,
+// and successes.
+
+@mixin msp-form-control-validation($text-color: #555, $border-color: #ccc, $background-color: #f5f5f5) {
+ // Color the label and help text
+ .help-block,
+ .control-label,
+ .radio,
+ .checkbox,
+ .radio-inline,
+ .checkbox-inline,
+ &.radio label,
+ &.checkbox label,
+ &.radio-inline label,
+ &.checkbox-inline label {
+ color: $text-color;
+ }
+ // Set the border and box shadow on specific inputs to match
+ .msp-form-control {
+ border-color: $border-color;
+ @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
+ &:focus {
+ border-color: darken($border-color, 10%);
+ $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten($border-color, 20%);
+ @include box-shadow($shadow);
+ }
+ }
+ // Set validation states also for addons
+ .input-group-addon {
+ color: $text-color;
+ border-color: $border-color;
+ background-color: $background-color;
+ }
+ // Optional feedback icon
+ .msp-form-control-feedback {
+ color: $text-color;
+ }
+}
+
+
+// Form control focus state
+//
+// Generate a customized focus state and for any input with the specified color,
+// which defaults to the `$input-border-focus` variable.
+//
+// We highly encourage you to not customize the default value, but instead use
+// this to tweak colors on an as-needed basis. This aesthetic change is based on
+// WebKit's default styles, but applicable to a wider range of browsers. Its
+// usability and accessibility should be taken into account with any change.
+//
+// Example usage: change the default blue border and shadow to white for better
+// contrast against a dark gray background.
+@mixin msp-form-control-focus($color: $input-border-focus) {
+ $color-rgba: rgba(red($color), green($color), blue($color), .6);
+ &:focus {
+ border-color: $color;
+ outline: 0;
+ @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba);
+ }
+}
+
+// Form control sizing
+//
+// Relative text size, padding, and border-radii changes for form controls. For
+// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
+// element gets special love because it's special, and that's a fact!
+// [converter] $parent hack
+@mixin input-size($parent, $input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
+ #{$parent} {
+ height: $input-height;
+ padding: $padding-vertical $padding-horizontal;
+ font-size: $font-size;
+ line-height: $line-height;
+ border-radius: $border-radius;
+ }
+
+ select#{$parent} {
+ height: $input-height;
+ line-height: $input-height;
+ }
+
+ textarea#{$parent},
+ select[multiple]#{$parent} {
+ height: auto;
+ }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_gradients.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_gradients.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a8939f5ae6411aa9f9dabce969e1a20760eb0ef2
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_gradients.scss
@@ -0,0 +1,58 @@
+// Gradients
+
+
+
+// Horizontal gradient, from left to right
+//
+// Creates two color stops, start and end, by specifying a color and position for each color stop.
+// Color stops are not available in IE9 and below.
+@mixin gradient-horizontal($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
+ background-image: -webkit-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
+ background-image: -o-linear-gradient(left, $start-color $start-percent, $end-color $end-percent); // Opera 12
+ background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down
+}
+
+// Vertical gradient, from top to bottom
+//
+// Creates two color stops, start and end, by specifying a color and position for each color stop.
+// Color stops are not available in IE9 and below.
+@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
+ background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // Safari 5.1-6, Chrome 10+
+ background-image: -o-linear-gradient(top, $start-color $start-percent, $end-color $end-percent); // Opera 12
+ background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+ background-repeat: repeat-x;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down
+}
+
+@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
+ background-repeat: repeat-x;
+ background-image: -webkit-linear-gradient($deg, $start-color, $end-color); // Safari 5.1-6, Chrome 10+
+ background-image: -o-linear-gradient($deg, $start-color, $end-color); // Opera 12
+ background-image: linear-gradient($deg, $start-color, $end-color); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+}
+@mixin gradient-horizontal-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
+ background-image: -webkit-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
+ background-image: -o-linear-gradient(left, $start-color, $mid-color $color-stop, $end-color);
+ background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
+ background-repeat: no-repeat;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=1); // IE9 and down, gets no color-stop at all for proper fallback
+}
+@mixin gradient-vertical-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
+ background-image: -webkit-linear-gradient($start-color, $mid-color $color-stop, $end-color);
+ background-image: -o-linear-gradient($start-color, $mid-color $color-stop, $end-color);
+ background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
+ background-repeat: no-repeat;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}', GradientType=0); // IE9 and down, gets no color-stop at all for proper fallback
+}
+@mixin gradient-radial($inner-color: #555, $outer-color: #333) {
+ background-image: -webkit-radial-gradient(circle, $inner-color, $outer-color);
+ background-image: radial-gradient(circle, $inner-color, $outer-color);
+ background-repeat: no-repeat;
+}
+@mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {
+ background-image: -webkit-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
+ background-image: -o-linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
+ background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_grid-framework.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_grid-framework.scss
new file mode 100644
index 0000000000000000000000000000000000000000..16d038c04f3b1993608a76fd773eb39ec141dfa1
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_grid-framework.scss
@@ -0,0 +1,81 @@
+// Framework grid generation
+//
+// Used only by Bootstrap to generate the correct number of grid classes given
+// any value of `$grid-columns`.
+
+// [converter] This is defined recursively in LESS, but Sass supports real loops
+@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
+ @for $i from (1 + 1) through $grid-columns {
+ $list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
+ }
+ #{$list} {
+ position: relative;
+ // Prevent columns from collapsing when empty
+ min-height: 1px;
+ // Inner gutter via padding
+ padding-left: ceil(($grid-gutter-width / 2));
+ padding-right: floor(($grid-gutter-width / 2));
+ }
+}
+
+
+// [converter] This is defined recursively in LESS, but Sass supports real loops
+@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {
+ @for $i from (1 + 1) through $grid-columns {
+ $list: "#{$list}, .col-#{$class}-#{$i}";
+ }
+ #{$list} {
+ float: left;
+ }
+}
+
+
+@mixin calc-grid-column($index, $class, $type) {
+ @if ($type == width) and ($index > 0) {
+ .col-#{$class}-#{$index} {
+ width: percentage(($index / $grid-columns));
+ }
+ }
+ @if ($type == push) and ($index > 0) {
+ .col-#{$class}-push-#{$index} {
+ left: percentage(($index / $grid-columns));
+ }
+ }
+ @if ($type == push) and ($index == 0) {
+ .col-#{$class}-push-0 {
+ left: auto;
+ }
+ }
+ @if ($type == pull) and ($index > 0) {
+ .col-#{$class}-pull-#{$index} {
+ right: percentage(($index / $grid-columns));
+ }
+ }
+ @if ($type == pull) and ($index == 0) {
+ .col-#{$class}-pull-0 {
+ right: auto;
+ }
+ }
+ @if ($type == offset) {
+ .col-#{$class}-offset-#{$index} {
+ margin-left: percentage(($index / $grid-columns));
+ }
+ }
+}
+
+// [converter] This is defined recursively in LESS, but Sass supports real loops
+@mixin loop-grid-columns($columns, $class, $type) {
+ @for $i from 0 through $columns {
+ @include calc-grid-column($i, $class, $type);
+ }
+}
+
+
+// Create grid for specific class
+@mixin make-grid($class) {
+ @include float-grid-columns($class);
+ @include loop-grid-columns($grid-columns, $class, width);
+ @include loop-grid-columns($grid-columns, $class, pull);
+ @include loop-grid-columns($grid-columns, $class, push);
+ @include loop-grid-columns($grid-columns, $class, offset);
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_grid.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_grid.scss
new file mode 100644
index 0000000000000000000000000000000000000000..59551dac1eda335f9d73112a4b414abadf232bfc
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_grid.scss
@@ -0,0 +1,122 @@
+// Grid system
+//
+// Generate semantic grid columns with these mixins.
+
+// Centered container element
+@mixin container-fixed($gutter: $grid-gutter-width) {
+ margin-right: auto;
+ margin-left: auto;
+ padding-left: floor(($gutter / 2));
+ padding-right: ceil(($gutter / 2));
+ @include clearfix;
+}
+
+// Creates a wrapper for a series of columns
+@mixin make-row($gutter: $grid-gutter-width) {
+ margin-left: ceil(($gutter / -2));
+ margin-right: floor(($gutter / -2));
+ @include clearfix;
+}
+
+// Generate the extra small columns
+@mixin make-xs-column($columns, $gutter: $grid-gutter-width) {
+ position: relative;
+ float: left;
+ width: percentage(($columns / $grid-columns));
+ min-height: 1px;
+ padding-left: ($gutter / 2);
+ padding-right: ($gutter / 2);
+}
+@mixin make-xs-column-offset($columns) {
+ margin-left: percentage(($columns / $grid-columns));
+}
+@mixin make-xs-column-push($columns) {
+ left: percentage(($columns / $grid-columns));
+}
+@mixin make-xs-column-pull($columns) {
+ right: percentage(($columns / $grid-columns));
+}
+
+// Generate the small columns
+@mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
+ position: relative;
+ min-height: 1px;
+ padding-left: ($gutter / 2);
+ padding-right: ($gutter / 2);
+
+ @media (min-width: $screen-sm-min) {
+ float: left;
+ width: percentage(($columns / $grid-columns));
+ }
+}
+@mixin make-sm-column-offset($columns) {
+ @media (min-width: $screen-sm-min) {
+ margin-left: percentage(($columns / $grid-columns));
+ }
+}
+@mixin make-sm-column-push($columns) {
+ @media (min-width: $screen-sm-min) {
+ left: percentage(($columns / $grid-columns));
+ }
+}
+@mixin make-sm-column-pull($columns) {
+ @media (min-width: $screen-sm-min) {
+ right: percentage(($columns / $grid-columns));
+ }
+}
+
+// Generate the medium columns
+@mixin make-md-column($columns, $gutter: $grid-gutter-width) {
+ position: relative;
+ min-height: 1px;
+ padding-left: ($gutter / 2);
+ padding-right: ($gutter / 2);
+
+ @media (min-width: $screen-md-min) {
+ float: left;
+ width: percentage(($columns / $grid-columns));
+ }
+}
+@mixin make-md-column-offset($columns) {
+ @media (min-width: $screen-md-min) {
+ margin-left: percentage(($columns / $grid-columns));
+ }
+}
+@mixin make-md-column-push($columns) {
+ @media (min-width: $screen-md-min) {
+ left: percentage(($columns / $grid-columns));
+ }
+}
+@mixin make-md-column-pull($columns) {
+ @media (min-width: $screen-md-min) {
+ right: percentage(($columns / $grid-columns));
+ }
+}
+
+// Generate the large columns
+@mixin make-lg-column($columns, $gutter: $grid-gutter-width) {
+ position: relative;
+ min-height: 1px;
+ padding-left: ($gutter / 2);
+ padding-right: ($gutter / 2);
+
+ @media (min-width: $screen-lg-min) {
+ float: left;
+ width: percentage(($columns / $grid-columns));
+ }
+}
+@mixin make-lg-column-offset($columns) {
+ @media (min-width: $screen-lg-min) {
+ margin-left: percentage(($columns / $grid-columns));
+ }
+}
+@mixin make-lg-column-push($columns) {
+ @media (min-width: $screen-lg-min) {
+ left: percentage(($columns / $grid-columns));
+ }
+}
+@mixin make-lg-column-pull($columns) {
+ @media (min-width: $screen-lg-min) {
+ right: percentage(($columns / $grid-columns));
+ }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_hide-text.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_hide-text.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1767e029c53a5e817ce79e9d489fd2cc114d319c
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_hide-text.scss
@@ -0,0 +1,21 @@
+// CSS image replacement
+//
+// Heads up! v3 launched with only `.hide-text()`, but per our pattern for
+// mixins being reused as classes with the same name, this doesn't hold up. As
+// of v3.0.1 we have added `.text-hide()` and deprecated `.hide-text()`.
+//
+// Source: https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
+
+// Deprecated as of v3.0.1 (has been removed in v4)
+@mixin hide-text() {
+ font: 0/0 a;
+ color: transparent;
+ text-shadow: none;
+ background-color: transparent;
+ border: 0;
+}
+
+// New mixin to use as of v3.0.1
+@mixin text-hide() {
+ @include hide-text;
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_image.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_image.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c8dcf5e9cd867de4d0ba528736719483266a1ae0
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_image.scss
@@ -0,0 +1,33 @@
+// Image Mixins
+// - Responsive image
+// - Retina image
+
+
+// Responsive image
+//
+// Keep images from scaling beyond the width of their parents.
+@mixin img-responsive($display: block) {
+ display: $display;
+ max-width: 100%; // Part 1: Set a maximum relative to the parent
+ height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching
+}
+
+
+// Retina image
+//
+// Short retina mixin for setting background-image and -size. Note that the
+// spelling of `min--moz-device-pixel-ratio` is intentional.
+@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
+ background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-1x}"), "#{$file-1x}"));
+
+ @media
+ only screen and (-webkit-min-device-pixel-ratio: 2),
+ only screen and ( min--moz-device-pixel-ratio: 2),
+ only screen and ( -o-min-device-pixel-ratio: 2/1),
+ only screen and ( min-device-pixel-ratio: 2),
+ only screen and ( min-resolution: 192dpi),
+ only screen and ( min-resolution: 2dppx) {
+ background-image: url(if($bootstrap-sass-asset-helper, twbs-image-path("#{$file-2x}"), "#{$file-2x}"));
+ background-size: $width-1x $height-1x;
+ }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_labels.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_labels.scss
new file mode 100644
index 0000000000000000000000000000000000000000..eda6dfd29ea1709380b27748ef5d082fed20903a
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_labels.scss
@@ -0,0 +1,12 @@
+// Labels
+
+@mixin label-variant($color) {
+ background-color: $color;
+
+ &[href] {
+ &:hover,
+ &:focus {
+ background-color: darken($color, 10%);
+ }
+ }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_list-group.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_list-group.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c478eeb31e321a4199329b653e06b2cb57ab3436
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_list-group.scss
@@ -0,0 +1,32 @@
+// List Groups
+
+@mixin list-group-item-variant($state, $background, $color) {
+ .list-group-item-#{$state} {
+ color: $color;
+ background-color: $background;
+
+ // [converter] extracted a&, button& to a.list-group-item-#{$state}, button.list-group-item-#{$state}
+ }
+
+ a.list-group-item-#{$state},
+ button.list-group-item-#{$state} {
+ color: $color;
+
+ .list-group-item-heading {
+ color: inherit;
+ }
+
+ &:hover,
+ &:focus {
+ color: $color;
+ background-color: darken($background, 5%);
+ }
+ &.active,
+ &.active:hover,
+ &.active:focus {
+ color: #fff;
+ background-color: $color;
+ border-color: $color;
+ }
+ }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_nav-divider.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_nav-divider.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2e6da02a4748b00cf67c21cc1735c26373e9c4c8
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_nav-divider.scss
@@ -0,0 +1,10 @@
+// Horizontal dividers
+//
+// Dividers (basically an hr) within dropdowns and nav lists
+
+@mixin nav-divider($color: #e5e5e5) {
+ height: 1px;
+ margin: (($line-height-computed / 2) - 1) 0;
+ overflow: hidden;
+ background-color: $color;
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_nav-vertical-align.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_nav-vertical-align.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c8fbf1a7d67d35140c5de3b192fd917775ac8c18
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_nav-vertical-align.scss
@@ -0,0 +1,9 @@
+// Navbar vertical align
+//
+// Vertically center elements in the navbar.
+// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);` to calculate the appropriate top margin.
+
+@mixin navbar-vertical-align($element-height) {
+ margin-top: (($navbar-height - $element-height) / 2);
+ margin-bottom: (($navbar-height - $element-height) / 2);
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_opacity.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_opacity.scss
new file mode 100644
index 0000000000000000000000000000000000000000..88e9a576abd795a9d0734542ff7e58e44a08d9a3
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_opacity.scss
@@ -0,0 +1,8 @@
+// Opacity
+
+@mixin opacity($opacity) {
+ opacity: $opacity;
+ // IE8 filter
+ $opacity-ie: ($opacity * 100);
+ filter: alpha(opacity=$opacity-ie);
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_pagination.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_pagination.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d4a5404fce227fd7de1af1be1d979152d1a62694
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_pagination.scss
@@ -0,0 +1,24 @@
+// Pagination
+
+@mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
+ > li {
+ > a,
+ > span {
+ padding: $padding-vertical $padding-horizontal;
+ font-size: $font-size;
+ line-height: $line-height;
+ }
+ &:first-child {
+ > a,
+ > span {
+ @include border-left-radius($border-radius);
+ }
+ }
+ &:last-child {
+ > a,
+ > span {
+ @include border-right-radius($border-radius);
+ }
+ }
+ }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_panels.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_panels.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3ff31ae51ee0827d9a4dd3e14ff3fd18f90572fb
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_panels.scss
@@ -0,0 +1,24 @@
+// Panels
+
+@mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
+ border-color: $border;
+
+ & > .panel-heading {
+ color: $heading-text-color;
+ background-color: $heading-bg-color;
+ border-color: $heading-border;
+
+ + .panel-collapse > .panel-body {
+ border-top-color: $border;
+ }
+ .badge {
+ color: $heading-bg-color;
+ background-color: $heading-text-color;
+ }
+ }
+ & > .panel-footer {
+ + .panel-collapse > .panel-body {
+ border-bottom-color: $border;
+ }
+ }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_progress-bar.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_progress-bar.scss
new file mode 100644
index 0000000000000000000000000000000000000000..90a62afc2d6b33de932ff21247b9ef7eec258cf6
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_progress-bar.scss
@@ -0,0 +1,10 @@
+// Progress bars
+
+@mixin progress-bar-variant($color) {
+ background-color: $color;
+
+ // Deprecated parent class requirement as of v3.2.0
+ .progress-striped & {
+ @include gradient-striped;
+ }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_reset-filter.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_reset-filter.scss
new file mode 100644
index 0000000000000000000000000000000000000000..bf73051200ec53b4fca0fcb50eaa8bf7b7c16d23
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_reset-filter.scss
@@ -0,0 +1,8 @@
+// Reset filters for IE
+//
+// When you need to remove a gradient background, do not forget to use this to reset
+// the IE filter for IE9 and below.
+
+@mixin reset-filter() {
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_reset-text.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_reset-text.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c9c28417fabaf6f190bd284e6e954b5dec5034d6
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_reset-text.scss
@@ -0,0 +1,18 @@
+@mixin reset-text() {
+ font-family: $font-family-base;
+ // We deliberately do NOT reset font-size.
+ font-style: normal;
+ font-weight: normal;
+ letter-spacing: normal;
+ line-break: auto;
+ line-height: $line-height-base;
+ text-align: left; // Fallback for where `start` is not supported
+ text-align: start;
+ text-decoration: none;
+ text-shadow: none;
+ text-transform: none;
+ white-space: normal;
+ word-break: normal;
+ word-spacing: normal;
+ word-wrap: normal;
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_resize.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_resize.scss
new file mode 100644
index 0000000000000000000000000000000000000000..83fa6379179cba67dbd3b3fb1b1d167380f361d4
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_resize.scss
@@ -0,0 +1,6 @@
+// Resize anything
+
+@mixin resizable($direction) {
+ resize: $direction; // Options: horizontal, vertical, both
+ overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_responsive-visibility.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_responsive-visibility.scss
new file mode 100644
index 0000000000000000000000000000000000000000..cbdf77723977ab2b76e6f54454534e9e6b3c5874
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_responsive-visibility.scss
@@ -0,0 +1,21 @@
+// Responsive utilities
+
+//
+// More easily include all the states for responsive-utilities.less.
+// [converter] $parent hack
+@mixin responsive-visibility($parent) {
+ #{$parent} {
+ display: block !important;
+ }
+ table#{$parent} { display: table !important; }
+ tr#{$parent} { display: table-row !important; }
+ th#{$parent},
+ td#{$parent} { display: table-cell !important; }
+}
+
+// [converter] $parent hack
+@mixin responsive-invisibility($parent) {
+ #{$parent} {
+ display: none !important;
+ }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_size.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_size.scss
new file mode 100644
index 0000000000000000000000000000000000000000..abbe2463ce8d7c315f8a2368f9301603315a35db
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_size.scss
@@ -0,0 +1,10 @@
+// Sizing shortcuts
+
+@mixin size($width, $height) {
+ width: $width;
+ height: $height;
+}
+
+@mixin square($size) {
+ @include size($size, $size);
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_tab-focus.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_tab-focus.scss
new file mode 100644
index 0000000000000000000000000000000000000000..7df0ae7ca114611e90c2f1c6d2bfcf55bc6792ec
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_tab-focus.scss
@@ -0,0 +1,9 @@
+// WebKit-style focus
+
+@mixin tab-focus() {
+ // Default
+ outline: thin dotted;
+ // WebKit
+ outline: 5px auto -webkit-focus-ring-color;
+ outline-offset: -2px;
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_table-row.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_table-row.scss
new file mode 100644
index 0000000000000000000000000000000000000000..136795081eb992d71b7a72dae19795bf71135316
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_table-row.scss
@@ -0,0 +1,28 @@
+// Tables
+
+@mixin table-row-variant($state, $background) {
+ // Exact selectors below required to override `.table-striped` and prevent
+ // inheritance to nested tables.
+ .table > thead > tr,
+ .table > tbody > tr,
+ .table > tfoot > tr {
+ > td.#{$state},
+ > th.#{$state},
+ &.#{$state} > td,
+ &.#{$state} > th {
+ background-color: $background;
+ }
+ }
+
+ // Hover states for `.table-hover`
+ // Note: this is not available for cells or rows within `thead` or `tfoot`.
+ .table-hover > tbody > tr {
+ > td.#{$state}:hover,
+ > th.#{$state}:hover,
+ &.#{$state}:hover > td,
+ &:hover > .#{$state},
+ &.#{$state}:hover > th {
+ background-color: darken($background, 5%);
+ }
+ }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_text-emphasis.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_text-emphasis.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3b446c41524883db963f728dbd5439ea993c8d64
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_text-emphasis.scss
@@ -0,0 +1,12 @@
+// Typography
+
+// [converter] $parent hack
+@mixin text-emphasis-variant($parent, $color) {
+ #{$parent} {
+ color: $color;
+ }
+ a#{$parent}:hover,
+ a#{$parent}:focus {
+ color: darken($color, 10%);
+ }
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_text-overflow.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_text-overflow.scss
new file mode 100644
index 0000000000000000000000000000000000000000..1593b25ea5c7b570188f99bbeda5f36b0d57e5eb
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_text-overflow.scss
@@ -0,0 +1,8 @@
+// Text overflow
+// Requires inline-block or block for proper styling
+
+@mixin text-overflow() {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
diff --git a/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_vendor-prefixes.scss b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_vendor-prefixes.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b3d0371fa866e3f5bb0d8671126087d2f862fc4d
--- /dev/null
+++ b/src/mol-plugin/skin/base/bootstrap/bootstrap/mixins/_vendor-prefixes.scss
@@ -0,0 +1,222 @@
+// Vendor Prefixes
+//
+// All vendor mixins are deprecated as of v3.2.0 due to the introduction of
+// Autoprefixer in our Gruntfile. They have been removed in v4.
+
+// - Animations
+// - Backface visibility
+// - Box shadow
+// - Box sizing
+// - Content columns
+// - Hyphens
+// - Placeholder text
+// - Transformations
+// - Transitions
+// - User Select
+
+
+// Animations
+@mixin animation($animation) {
+ -webkit-animation: $animation;
+ -o-animation: $animation;
+ animation: $animation;
+}
+@mixin animation-name($name) {
+ -webkit-animation-name: $name;
+ animation-name: $name;
+}
+@mixin animation-duration($duration) {
+ -webkit-animation-duration: $duration;
+ animation-duration: $duration;
+}
+@mixin animation-timing-function($timing-function) {
+ -webkit-animation-timing-function: $timing-function;
+ animation-timing-function: $timing-function;
+}
+@mixin animation-delay($delay) {
+ -webkit-animation-delay: $delay;
+ animation-delay: $delay;
+}
+@mixin animation-iteration-count($iteration-count) {
+ -webkit-animation-iteration-count: $iteration-count;
+ animation-iteration-count: $iteration-count;
+}
+@mixin animation-direction($direction) {
+ -webkit-animation-direction: $direction;
+ animation-direction: $direction;
+}
+@mixin animation-fill-mode($fill-mode) {
+ -webkit-animation-fill-mode: $fill-mode;
+ animation-fill-mode: $fill-mode;
+}
+
+// Backface visibility
+// Prevent browsers from flickering when using CSS 3D transforms.
+// Default value is `visible`, but can be changed to `hidden`
+
+@mixin backface-visibility($visibility) {
+ -webkit-backface-visibility: $visibility;
+ -moz-backface-visibility: $visibility;
+ backface-visibility: $visibility;
+}
+
+// Drop shadows
+//
+// Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
+// supported browsers that have box shadow capabilities now support it.
+
+@mixin box-shadow($shadow...) {
+ -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
+ box-shadow: $shadow;
+}
+
+// Box sizing
+@mixin box-sizing($boxmodel) {
+ -webkit-box-sizing: $boxmodel;
+ -moz-box-sizing: $boxmodel;
+ box-sizing: $boxmodel;
+}
+
+// CSS3 Content Columns
+@mixin content-columns($column-count, $column-gap: $grid-gutter-width) {
+ -webkit-column-count: $column-count;
+ -moz-column-count: $column-count;
+ column-count: $column-count;
+ -webkit-column-gap: $column-gap;
+ -moz-column-gap: $column-gap;
+ column-gap: $column-gap;
+}
+
+// Optional hyphenation
+@mixin hyphens($mode: auto) {
+ word-wrap: break-word;
+ -webkit-hyphens: $mode;
+ -moz-hyphens: $mode;
+ -ms-hyphens: $mode; // IE10+
+ -o-hyphens: $mode;
+ hyphens: $mode;
+}
+
+// Placeholder text
+@mixin placeholder($color: $input-color-placeholder) {
+ // Firefox
+ &::-moz-placeholder {
+ color: $color;
+ opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
+ }
+ &:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
+ &::-webkit-input-placeholder { color: $color; } // Safari and Chrome
+}
+
+// Transformations
+@mixin scale($ratio...) {
+ -webkit-transform: scale($ratio);
+ -ms-transform: scale($ratio); // IE9 only
+ -o-transform: scale($ratio);
+ transform: scale($ratio);
+}
+
+@mixin scaleX($ratio) {
+ -webkit-transform: scaleX($ratio);
+ -ms-transform: scaleX($ratio); // IE9 only
+ -o-transform: scaleX($ratio);
+ transform: scaleX($ratio);
+}
+@mixin scaleY($ratio) {
+ -webkit-transform: scaleY($ratio);
+ -ms-transform: scaleY($ratio); // IE9 only
+ -o-transform: scaleY($ratio);
+ transform: scaleY($ratio);
+}
+@mixin skew($x, $y) {
+ -webkit-transform: skewX($x) skewY($y);
+ -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
+ -o-transform: skewX($x) skewY($y);
+ transform: skewX($x) skewY($y);
+}
+@mixin translate($x, $y) {
+ -webkit-transform: translate($x, $y);
+ -ms-transform: translate($x, $y); // IE9 only
+ -o-transform: translate($x, $y);
+ transform: translate($x, $y);
+}
+@mixin translate3d($x, $y, $z) {
+ -webkit-transform: translate3d($x, $y, $z);
+ transform: translate3d($x, $y, $z);
+}
+@mixin rotate($degrees) {
+ -webkit-transform: rotate($degrees);
+ -ms-transform: rotate($degrees); // IE9 only
+ -o-transform: rotate($degrees);
+ transform: rotate($degrees);
+}
+@mixin rotateX($degrees) {
+ -webkit-transform: rotateX($degrees);
+ -ms-transform: rotateX($degrees); // IE9 only
+ -o-transform: rotateX($degrees);
+ transform: rotateX($degrees);
+}
+@mixin rotateY($degrees) {
+ -webkit-transform: rotateY($degrees);
+ -ms-transform: rotateY($degrees); // IE9 only
+ -o-transform: rotateY($degrees);
+ transform: rotateY($degrees);
+}
+@mixin perspective($perspective) {
+ -webkit-perspective: $perspective;
+ -moz-perspective: $perspective;
+ perspective: $perspective;
+}
+@mixin perspective-origin($perspective) {
+ -webkit-perspective-origin: $perspective;
+ -moz-perspective-origin: $perspective;
+ perspective-origin: $perspective;
+}
+@mixin transform-origin($origin) {
+ -webkit-transform-origin: $origin;
+ -moz-transform-origin: $origin;
+ -ms-transform-origin: $origin; // IE9 only
+ transform-origin: $origin;
+}
+
+
+// Transitions
+
+@mixin transition($transition...) {
+ -webkit-transition: $transition;
+ -o-transition: $transition;
+ transition: $transition;
+}
+@mixin transition-property($transition-property...) {
+ -webkit-transition-property: $transition-property;
+ transition-property: $transition-property;
+}
+@mixin transition-delay($transition-delay) {
+ -webkit-transition-delay: $transition-delay;
+ transition-delay: $transition-delay;
+}
+@mixin transition-duration($transition-duration...) {
+ -webkit-transition-duration: $transition-duration;
+ transition-duration: $transition-duration;
+}
+@mixin transition-timing-function($timing-function) {
+ -webkit-transition-timing-function: $timing-function;
+ transition-timing-function: $timing-function;
+}
+@mixin transition-transform($transition...) {
+ -webkit-transition: -webkit-transform $transition;
+ -moz-transition: -moz-transform $transition;
+ -o-transition: -o-transform $transition;
+ transition: transform $transition;
+}
+
+
+// User select
+// For selecting text on the page
+
+@mixin user-select($select) {
+ -webkit-user-select: $select;
+ -moz-user-select: $select;
+ -ms-user-select: $select; // IE10+
+ user-select: $select;
+}
diff --git a/src/mol-plugin/skin/base/components/controls-base.scss b/src/mol-plugin/skin/base/components/controls-base.scss
new file mode 100644
index 0000000000000000000000000000000000000000..897703537a270d1b153a82a71a85849a75405a01
--- /dev/null
+++ b/src/mol-plugin/skin/base/components/controls-base.scss
@@ -0,0 +1,144 @@
+.msp-btn {
+ padding: 0 $control-spacing;
+ line-height: $row-height;
+ border: none;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.msp-btn, .msp-btn:active, .msp-btn-link:focus, .msp-btn:hover {
+ outline: none !important;
+}
+
+.msp-btn-icon {
+ height: $row-height;
+ width: $row-height;
+ line-height: $row-height;
+ padding: 0;
+ text-align: center;
+}
+
+.msp-btn-link {
+ .msp-icon {
+ font-size: 100%;
+ }
+}
+
+.msp-btn-link, .msp-btn-link:active, .msp-btn-link:focus {
+ color: $msp-btn-link-font-color;
+ text-decoration: none;
+}
+
+.msp-btn-link:hover {
+ color: $hover-font-color;
+ text-decoration: none;
+}
+
+.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 {
+ color: $msp-btn-link-toggle-off-font-color;
+}
+
+.msp-btn-link-toggle-off:hover, .msp-btn-link-toggle-on:hover {
+ color: $hover-font-color;
+}
+
+@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);
+
+.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 {
+ height: $row-height;
+ line-height: $row-height;
+}
+
+.msp-form-control {
+ width: 100%;
+ background: $msp-form-control-background;
+ color: $font-color;
+ border: none !important;
+ padding: 0 $control-spacing;
+ line-height: $row-height - 2px;
+ height: $row-height;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ box-shadow: none !important;
+
+ &:hover {
+ color: $hover-font-color;
+ background-color: color-increase-contrast($msp-form-control-background, 5%);
+ border: none;
+ outline-offset: -1px;
+ outline: 1px solid color-increase-contrast($msp-form-control-background, 20%);
+ }
+
+ &:active, &:focus {
+ color: $font-color;
+ background-color: $msp-form-control-background;
+ border: none;
+ outline-offset: 0;
+ outline: none;
+ }
+}
+
+.msp-btn-commit {
+ text-align: right;
+ padding-top: 0;
+ padding-bottom: 0;
+ padding-right: $control-spacing;
+ padding-left: 0;
+ line-height: $row-height;
+ border: none;
+ overflow: hidden;
+
+ .msp-icon {
+ display: block-inline;
+ line-height: $row-height;
+ margin-right: $control-spacing;
+ width: $row-height;
+ text-align: center;
+ float: left;
+ }
+}
+
+select.msp-form-control {
+ background: none;
+ background-color: $msp-form-control-background;
+ background-size: 8px 12px;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC);
+ background-repeat: no-repeat;
+ background-position: right $control-spacing top (($row-height - 12px) / 2);
+}
+
+select.msp-form-control:-moz-focusring {
+ color: transparent;
+ text-shadow: 0 0 0 $font-color;
+}
\ No newline at end of file
diff --git a/src/mol-plugin/skin/base/components/controls.scss b/src/mol-plugin/skin/base/components/controls.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2ba55358c6a90255d29ba0cdff5196b9d3883451
--- /dev/null
+++ b/src/mol-plugin/skin/base/components/controls.scss
@@ -0,0 +1,197 @@
+
+.msp-control-row {
+ position: relative;
+ height: $row-height;
+ background: $default-background;
+ margin-top: 1px;
+
+ > span {
+ line-height: $row-height;
+ display: block;
+ width: $control-label-width + $control-spacing;
+ text-align: right;
+ padding: 0 $control-spacing;
+ color: color-lower-contrast($font-color, 15%);
+
+ @include non-selectable;
+ }
+
+ select, button, input[type=text] {
+ @extend .msp-form-control;
+ }
+
+ button {
+ @extend .msp-btn;
+ @extend .msp-btn-block;
+ }
+
+ > div:nth-child(2) {
+ background: $msp-form-control-background;
+ position: absolute;
+ left: $control-label-width + $control-spacing;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ }
+}
+
+.msp-control-group {
+ position: relative;
+}
+
+.msp-toggle-button {
+ .msp-icon {
+ display: inline-block;
+ margin-right: 6px;
+ }
+
+ > 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 {
+ > div:first-child {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ width: 100%;
+ padding-right: 50px;
+ display: table;
+
+ > div {
+ height: $row-height;
+ display: table-cell;
+ vertical-align: middle;
+ padding: 0 ($control-spacing + 4px);
+ }
+ }
+ > div:last-child {
+ position: absolute;
+ height: $row-height;
+ right: 0;
+ width: 50px;
+ top: 0;
+ bottom: 0;
+ }
+ }
+
+ input[type=text] {
+ text-align: right;
+ }
+
+ input[type=range] {
+ width: 100%;
+ }
+}
+
+.msp-toggle-color-picker {
+ button {
+ border: $control-spacing solid $msp-form-control-background !important;
+ margin: 0;
+ text-align: center;
+ padding-right: $control-spacing;
+ padding-left: $control-spacing;
+
+ &: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-color-picker {
+ position: absolute;
+ z-index: 100000;
+ background: $default-background;
+ border-top: 1px solid $default-background;
+ padding-bottom: $control-spacing / 2;
+ width: 100%;
+
+ // input[type=text] {
+ // background: $msp-form-control-background !important;
+ // }
+ }
+}
+
+.msp-toggle-color-picker-above {
+ .msp-color-picker {
+ top: -2 * 32px - 16px - $control-spacing / 2;
+ height: 2 * 32px + 16px + $control-spacing / 2;
+ }
+}
+
+.msp-toggle-color-picker-below {
+ .msp-color-picker {
+ top: $row-height;
+ height: 2 * 32px + 16px;
+ }
+}
+
+
+.msp-control-subgroup {
+ margin-top: 1px;
+
+ .msp-control-row {
+ margin-left: $control-spacing !important;
+ > span {
+ width: $control-label-width !important;
+ }
+
+ > div:nth-child(2) {
+ left: $control-label-width !important;
+ }
+ }
+}
+
+.msp-conrol-group-expander {
+ display: block;
+ position: absolute;
+ line-height: $row-height;
+ padding: 0;
+ left: 0;
+ top: 0;
+ width: $control-label-width + $control-spacing;
+ text-align: left;
+
+ .msp-icon {
+ line-height: $row-height - 3;
+ width: $row-height - 1;
+ text-align: center;
+ display: inline-block;
+ font-size: 100%;
+ }
+}
+
+.msp-plugin-layout_controls {
+ position: absolute;
+ left: $control-spacing;
+ top: $control-spacing;
+}
+
+.msp-plugin-layout_controls > button:first-child {
+ margin-right: 6px;
+}
+
+.msp-empty-control {
+ display: none;
+}
+
+.msp-control .msp-btn-block {
+ margin-bottom: 0px;
+ margin-top: 0px;
+}
+
+.msp-row-text {
+ > div {
+ line-height: $row-height;
+ text-align: center;
+ }
+}
\ No newline at end of file
diff --git a/src/mol-plugin/skin/base/components/entity-info.scss b/src/mol-plugin/skin/base/components/entity-info.scss
new file mode 100644
index 0000000000000000000000000000000000000000..55ae9df3cad920fdaa955bc6a2cbf8367c92febd
--- /dev/null
+++ b/src/mol-plugin/skin/base/components/entity-info.scss
@@ -0,0 +1,196 @@
+/* info */
+
+.msp-layout-hide-right {
+ .msp-entity-info {
+ display: none;
+ }
+}
+
+.msp-entity-info {
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ top: 0;
+ //border-top: 1px solid $default-background;
+ padding-top: $control-spacing;
+ background: $control-background;
+
+ .msp-entity-badge {
+ position: absolute;
+ width: $row-height;
+ height: $row-height;
+ left: 0;
+ top: 0;
+ border-bottom: 1px solid $border-color;
+ }
+
+ > div {
+ position: relative;
+ height: $row-height;
+ line-height: $row-height;
+ > span {
+ font-weight: bold;
+ > span {
+ display: inline-block;
+ margin-left: 6px;
+ font-size: 80%;
+ color: $entity-tag-color;
+ font-weight: normal;
+ }
+ }
+ background: $default-background;
+ border-bottom: 1px solid $border-color;
+ padding: 0 ($row-height + $control-spacing);
+ text-align: center;
+ }
+
+ .msp-remove-entity {
+ position: absolute;
+ right: 0;
+ top: 0;
+ }
+}
+
+/* badge */
+
+.msp-entity-badge {
+ font-weight: bold;
+ color: $entity-badge-font-color;
+ text-align: center;
+ display: table;
+ cursor: default;
+}
+
+.msp-entity-badge > div {
+ margin: auto;
+ display: inline-block;
+ display: table-cell;
+ vertical-align: middle;
+
+ @include non-selectable;
+}
+
+@mixin entity-bg($name, $color) {
+ .msp-entity-badge-#{$name} {
+ background: $color;
+ }
+}
+
+// TypeClass = 'Root' | 'Group' | 'Data' | 'Object' | 'Visual' | 'Selection' | 'Action' | 'Behaviour'
+@include entity-bg('Root', $entity-color-Root);
+@include entity-bg('Group', $entity-color-Group);
+@include entity-bg('Data', $entity-color-Data);
+@include entity-bg('Object', $entity-color-Object);
+@include entity-bg('Visual', $entity-color-Visual);
+@include entity-bg('Selection', $entity-color-Selection);
+@include entity-bg('Action', $entity-color-Action);
+@include entity-bg('Behaviour', $entity-color-Behaviour);
+
+
+.msp-entity-badge-Root {
+ background-repeat: no-repeat;
+ background-position: center;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACKUExURQAAAM4+K84/LM4+K5BhopJboCue1XmKi5RbpSud1R2tcolpRx2scys8Sis8Sn6SlOCFOiqYzhUYMDRPYSue1n6SlMiDTR6ncbVfNd+EOeCEOeCEOeCEORYZMMk/LH6RkxUcMhUYMSs8S32Rkyye1BUZL9+FOVpORWRSRCw8SxYYMB6tcxYZMSw9S+ECnyoAAAArdFJOUwB5/uoyc/FX9DjdS5SzyPT+acsS/fwdWEmk1NidrGb6bq+HgJY7eFVH955mjSdVAAAAn0lEQVQ4y93TyxaCIBCA4alQpFQsSs1Ku997/9drRtoxwV5Ww/m/BXAOAENc8hTonRb+3sn86OkrLfNPVgd6Ox55ezWb8KLUtr+mvLg2kjpAyguxLprbI6ORFVESobjbDSdE0ouSZrPvRQuO2BYbFGbxJmGcQ/wE9sP8nFbuNayoqS9jxT0ECey7f51E5O24Qh0uT3/HO8b+DqDUIH/SF4XSDWWIL+vnAAAAAElFTkSuQmCC)
+}
+
+
+.msp-entity-splash {
+ //padding-left: $row-height - $entity-subtree-offset;
+
+ .msp-entity-splash-general {
+ //border-top-left-radius: $entity-subtree-offset;
+ //border-bottom-left-radius: $entity-subtree-offset;
+ padding: $info-vertical-padding $control-spacing $info-vertical-padding ($row-height + $control-spacing + $row-height - $entity-subtree-offset);
+ position: relative;
+ background: color-lower-contrast($default-background, 4%);
+ margin-bottom: $control-spacing;
+
+ .msp-icon {
+ display: block;
+ width: $row-height;
+ height: $row-height;
+ line-height: $row-height;
+ position: absolute;
+ text-align: center;
+ left: $row-height - $entity-subtree-offset;
+ top: 0;
+ font-size: 80%;
+ }
+
+ > div {
+ position: absolute;
+ width: 2 * $row-height - $entity-subtree-offset;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ background: $default-background;
+ }
+ }
+
+ .msp-entity-splash-class {
+ margin-bottom: 1px; //$control-spacing;
+ }
+
+ .msp-entity-splash-class > div:first-child {
+ //border-top-left-radius: $entity-subtree-offset;
+ background: color-lower-contrast($default-background, 4%);
+ line-height: $row-height;
+ padding-left: $row-height + $control-spacing + $row-height - $entity-subtree-offset;
+ font-weight: bold;
+ position: relative;
+ cursor: pointer;
+
+ &:hover {
+ color: $hover-font-color;
+ }
+
+ > span {
+ @include non-selectable;
+ cursor: pointer;
+ }
+
+ > div:first-child {
+ position: absolute;
+ width: $row-height - $entity-subtree-offset;
+ height: $row-height;
+ left: 0;
+ top: 0;
+ background: $default-background;
+ }
+
+ > div:nth-child(2) {
+ //border-top-left-radius: $entity-subtree-offset;
+ position: absolute;
+ width: $row-height;
+ height: $row-height;
+ left: $row-height - $entity-subtree-offset;
+ top: 0;
+ //background-image: none;
+ }
+ }
+
+ .msp-entity-splash-class > div:nth-child(2) {
+ //@include non-selectable;
+ padding: $info-vertical-padding $control-spacing $info-vertical-padding ($row-height + $control-spacing + $row-height - $entity-subtree-offset);
+ margin-top: 1px;
+ background: $default-background; // color-increase-contrast($msp-form-control-background, 20%);
+ //font-size: 90%;
+ //border-bottom-left-radius: $entity-subtree-offset;
+ }
+
+ // .msp-entity-splash-class-collapsed > div:first-child {
+ // //border-bottom-left-radius: $entity-subtree-offset;
+ // > div {
+ // //border-bottom-left-radius: $entity-subtree-offset;
+ // }
+ // }
+
+ .msp-entity-splash-class-expanded > div:nth-child(2) {
+ display: block;
+ }
+
+ .msp-entity-splash-class-collapsed > div:nth-child(2) {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/src/mol-plugin/skin/base/components/entity.scss b/src/mol-plugin/skin/base/components/entity.scss
new file mode 100644
index 0000000000000000000000000000000000000000..811265d3392b9ff66793621d83fcf68804092e00
--- /dev/null
+++ b/src/mol-plugin/skin/base/components/entity.scss
@@ -0,0 +1,225 @@
+
+
+.msp-entity-tree {
+ overflow: hidden;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ padding-top: $control-spacing;
+ background: $control-background;
+
+ .msp-entity-tree-children {
+ overflow-x: hidden;
+ overflow-y: auto;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: $row-height + $control-spacing + 1;
+ padding: $control-spacing 0;
+ }
+}
+
+.msp-entity-store-header {
+ height: $row-height + 1;
+ position: relative;
+
+ > span {
+ margin-left: 6px;
+ display: inline-block;
+ line-height: $row-height;
+ font-weight: bold;
+
+ @include non-selectable
+ }
+
+ button {
+ display: block !important;
+ height: $row-height !important;
+ margin: 0 !important;
+ line-height: $row-height !important;
+ border: none !important;
+ position: absolute;
+ top: 0;
+ }
+
+ border-bottom: 1px solid $border-color;
+}
+
+.msp-entity-store-root {
+ overflow-x: hidden;
+ overflow-y: auto;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ top: $row-height + 1;
+ right: 0;
+}
+
+.msp-entity-tree-entry {
+ height: $row-height + 1;
+ position: relative;
+ border-bottom: 1px solid $control-background;
+}
+
+.msp-entity-tree-entry-current {
+ background: color-lower-contrast($default-background, 4%) !important;
+
+ .msp-entity-tree-entry-label {
+ color: $entity-current-font-color;
+ font-weight: bold;
+ .msp-entity-tree-entry-label-tag {
+ font-weight: normal;
+ }
+ &:hover {
+ color: $hover-font-color;
+ }
+ }
+}
+
+.msp-entity-tree-entry-current-path {
+ background: color-lower-contrast($default-background, 2%) !important;
+ .msp-entity-tree-entry-label {
+ color: color-lower-contrast($entity-current-font-color, 5%);
+ &:hover {
+ color: $hover-font-color;
+ }
+ }
+}
+
+.msp-entity-tree-entry button, .msp-entity-tree-entry > div {
+ display: block !important;
+ height: $row-height !important;
+ margin: 0 !important;
+ line-height: $row-height !important;
+ border: none !important;
+ position: absolute;
+ top: 0;
+}
+
+
+.msp-entity-tree-entry-toggle-group {
+ width: $row-height;
+ height: $row-height;
+ padding: 0;
+ left: 0;
+}
+
+.msp-entity-tree-entry-toggle-visible {
+ width: $row-height;
+ right: 0; //$row-height + 6;
+ padding: 0 !important;
+ font-size: 80%;
+}
+
+.msp-entity-tree-entry-toggle-visible-full, .msp-entity-tree-entry-toggle-visible-full:focus, .msp-entity-tree-entry-toggle-visible-full:active {
+ color: $entity-color-fully-visible;
+}
+
+.msp-entity-tree-entry-toggle-visible-partial, .msp-entity-tree-entry-toggle-visible-partial:focus, .msp-entity-tree-entry-toggle-visible-partial:active {
+ color: $entity-color-partialy-visible;
+}
+
+.msp-entity-tree-entry-toggle-visible-none, .msp-entity-tree-entry-toggle-visible-none:focus, .msp-entity-tree-entry-toggle-visible-none:active {
+ //background: transparent !important;
+ color: $entity-color-not-visible;
+}
+
+.msp-entity-tree-entry-remove {
+ width: $row-height;
+ height: $row-height;
+ right: $row-height;
+ padding: 0 !important;
+ text-align: center;
+ font-size: 80%;
+ color: color-lower-contrast($font-color, 66%)
+}
+
+.msp-entity-tree-entry-body {
+ position: absolute;
+ left: $row-height;
+ border-radius: 0 0 0 $entity-subtree-offset;
+ right: 0;
+ background: $default-background;
+}
+
+.msp-entity-tree-entry .msp-entity-badge {
+ width: $row-height;
+ position: absolute;
+ height: $row-height;
+ left: 0;
+ top: 0;
+ border-radius: 0 $entity-subtree-offset 0 $entity-subtree-offset;
+}
+
+.msp-entity-tree-entry-label-wrap {
+ right: 2 * $row-height;
+ overflow: hidden;
+ left: $row-height;
+ height: $row-height;
+ position: absolute;
+}
+
+.msp-entity-tree-entry-label {
+ position: absolute;
+ right: 0;
+ top: 0;
+ left: 0;
+ text-align: left !important;
+ width: 100%;
+ padding: 0 $control-spacing !important;
+}
+
+.msp-entity-tree-entry-label-tag {
+ color: $entity-tag-color;
+ font-size: 70%;
+ display: inline-block;
+ margin-left: 6px;
+}
+
+
+.msp-entity-tree-children-wrap {
+ padding-left: $entity-subtree-offset;
+}
+
+.msp-entity-tree-root {
+ > .msp-entity-tree-entry {
+ .msp-entity-badge {
+ border-top-right-radius: 0;
+ }
+ .msp-entity-tree-entry-label {
+ font-weight: bold;
+ }
+ .msp-entity-tree-entry-toggle-group {
+ display: none !important;
+ }
+ .msp-entity-tree-entry-body {
+ left: $row-height - $entity-subtree-offset !important;
+ }
+ background: $default-background;
+ border-bottom: 1px solid $border-color;
+ }
+
+ > .msp-entity-tree-children-wrap {
+ margin-top: $control-spacing;
+ padding-left: 0 !important;
+ }
+}
+
+.msp-panel {
+ .msp-entity-tree-entry-toggle-visible {
+ position: absolute;
+ top: 0;
+ right: 0;
+ height: $row-height;
+ font-size: 100%;
+
+ background: $default-background; //color-increase-contrast($default-background, 4%);
+ }
+
+ // .msp-entity-tree-entry-toggle-visible-full {
+ // background: color-increase-contrast($default-background, 8%);
+ // }
+}
\ No newline at end of file
diff --git a/src/mol-plugin/skin/base/components/help.scss b/src/mol-plugin/skin/base/components/help.scss
new file mode 100644
index 0000000000000000000000000000000000000000..01fc7995bf22ccd11acc069fdcb086f978bdf1ad
--- /dev/null
+++ b/src/mol-plugin/skin/base/components/help.scss
@@ -0,0 +1,27 @@
+
+.msp-help-row {
+ position: relative;
+ height: $row-height;
+ background: $default-background;
+ margin-top: 1px;
+ display: table;
+ width: 100%;
+
+ > span {
+ width: $control-label-width + $control-spacing;
+ text-align: right;
+ padding: $info-vertical-padding $control-spacing;
+ color: color-lower-contrast($font-color, 15%);
+ display: table-cell;
+ font-weight: bold;
+
+ @include non-selectable;
+ }
+
+ > div {
+ background: $msp-form-control-background;
+ position: relative;
+ padding: $info-vertical-padding $control-spacing;
+ display: table-cell;
+ }
+}
diff --git a/src/mol-plugin/skin/base/components/log.scss b/src/mol-plugin/skin/base/components/log.scss
new file mode 100644
index 0000000000000000000000000000000000000000..124473cda40bf33cc81cfb1d6884478540cf29ce
--- /dev/null
+++ b/src/mol-plugin/skin/base/components/log.scss
@@ -0,0 +1,98 @@
+
+.msp-log-wrap {
+ position: absolute;
+ right: 0;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ overflow: hidden;
+}
+
+.msp-log {
+ position: absolute;
+ right: -20px;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ font-size: 90%;
+ background: $control-background;
+}
+
+.msp-log {
+ ul {
+ padding: 0;
+ margin: 0;
+ }
+
+ color: $log-font-color;
+
+ li {
+ clear: both;
+ margin: 0;
+ background: $default-background;
+ position: relative;
+
+ &:not(:last-child) {
+ border-bottom: 1px solid $border-color;
+ }
+ }
+
+
+ .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 ;
+ }
+
+ .msp-log-timestamp {
+ padding: ($info-vertical-padding + 1) $control-spacing ($info-vertical-padding - 1) $control-spacing;
+ float: left;
+ text-align: right;
+ width: $control-label-width;
+ color: $log-timestamp-font-color;
+ //vertical-align: baseline;
+ //line-height: $row-height;
+ font-size: 90%;
+ }
+
+ .msp-log-timestamp small {
+ font-size: 90%;
+ }
+}
+
+// .msp-log hr {
+// border-color: $separator-color;
+// margin: 3px 3px 0 5px;
+// }
+
+.msp-log .label {
+ margin-top: -3px;
+ font-size: 7pt;
+}
+
+.msp-log-entry-badge {
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 6px;
+}
+
+.msp-log-entry-message {
+ background: $log-message;
+}
+
+.msp-log-entry-info {
+ background: $log-info;
+}
+
+.msp-log-entry-error {
+ background: $log-error;
+}
+
+.msp-log-entry-warning {
+ background: $log-warning;
+}
+
diff --git a/src/mol-plugin/skin/base/components/misc.scss b/src/mol-plugin/skin/base/components/misc.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d11284bcf2feee85acc1e334685872c053da564d
--- /dev/null
+++ b/src/mol-plugin/skin/base/components/misc.scss
@@ -0,0 +1,69 @@
+.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+ */
+
+ /* Rules below not implemented in browsers yet */
+ -o-user-select: none;
+ user-select: none;
+
+ font-weight: light;
+
+ cursor: default;
+}
+
+.msp-description:not(:first-child) {
+ border-top: 1px solid $control-background;
+}
+
+.msp-color-picker input {
+ color: black !important;
+}
+
+.msp-no-webgl {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ top: 0;
+ display: table;
+ text-align: center;
+
+ > div {
+ b {
+ font-size: 120%;
+ }
+ display: table-cell;
+ vertical-align: middle;
+ text-align: center;
+ width: 100%;
+ height: 100%;
+ }
+}
+
+.msp-loader-msp-btn-file {
+ position: relative;
+ overflow: hidden;
+}
+
+.msp-loader-msp-btn-file input[type=file] {
+ position: absolute;
+ top: 0;
+ right: 0;
+ min-width: 100%;
+ min-height: 100%;
+ font-size: 100px;
+ text-align: right;
+ filter: alpha(opacity=0);
+ opacity: 0;
+ outline: none;
+ background: white;
+ cursor: inherit;
+ display: block;
+}
\ No newline at end of file
diff --git a/src/mol-plugin/skin/base/components/panel.scss b/src/mol-plugin/skin/base/components/panel.scss
new file mode 100644
index 0000000000000000000000000000000000000000..256c91dc57ba40f5e43cdb4d33477aee8d328a38
--- /dev/null
+++ b/src/mol-plugin/skin/base/components/panel.scss
@@ -0,0 +1,142 @@
+.msp-panel-header .msp-panel-expander {
+ display: block;
+ width: 100%;
+ text-align: left;
+}
+
+.msp-panel-header {
+
+ //border-bottom-width: 1px;
+ //border-bottom-style: solid;
+ height: $row-height;
+ border-color: $border-color;
+ position: relative;
+
+ //border-radius: $control-spacing 0 0 0;
+
+ .msp-panel-expander-wrapper {
+
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 2 * $row-height;
+
+ button {
+ // width: 100%;
+
+ display: block;
+ width: 100%;
+ text-align: left;
+
+ height: $row-height;
+ line-height: $row-height;
+ border: none;
+ font-weight: bold;
+ //color: $panel-header-font-color;
+ padding-left: 0;
+ background: color-lower-contrast($default-background, 4%);
+ //text-align: right!important;
+
+ .msp-icon {
+ display: inline-block;
+ margin-right: $control-spacing;
+ width: $row-height;
+ text-align: center;
+ }
+
+ &:hover {
+ background: color-lower-contrast($default-background, 4%);
+ }
+ }
+ }
+
+ .msp-panel-description-standalone {
+ > .msp-icon {
+ margin-left: $row-height;
+ }
+
+ width: 2 * $row-height;
+ }
+
+ .msp-panel-description-with-action {
+ width: $row-height;
+ margin-right: $row-height;
+ }
+
+ .msp-panel-description {
+ color: $font-color;
+ float: right;
+ background: color-lower-contrast($default-background, 4%);
+ //margin-right: $row-height;
+
+ > .msp-icon {
+ display: block;
+ width: $row-height;
+ height: $row-height;
+ line-height: $row-height;
+ text-align: center;
+ font-size: 70%;
+ cursor: default;
+ background: color-lower-contrast($default-background, 4%);
+ color: color-lower-contrast($font-color, 66%);
+ }
+
+ .msp-panel-description-content {
+ @include non-selectable;
+
+ color: $font-color;
+ display: none;
+ position: absolute;
+ left: 0;
+ width: 100%;
+ background: color-increase-contrast($msp-form-control-background, 20%);
+ min-height: $row-height;
+ z-index: 1000000;
+ padding: $info-vertical-padding $control-spacing $info-vertical-padding ($row-height + $control-spacing);
+ text-align: left;
+ //border-bottom: 1px solid color-lower-contrast($default-background, 4%);
+
+ > .msp-icon {
+ position: absolute;
+ width: $row-height;
+ height: $row-height;
+ line-height: $row-height;
+ text-align: center;
+ font-size: 80%;
+ cursor: default;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ &:hover {
+ color: $hover-font-color;
+ > .msp-icon {
+ color: $hover-font-color;
+ }
+ .msp-panel-description-content {
+ display: block;
+ }
+ }
+ }
+}
+
+.msp-panel-body {
+ background: $control-background;
+}
+
+.msp-panel {
+ margin-bottom: $control-spacing;
+}
+
+.msp-transform-view {
+ padding-top: $control-spacing;
+}
+
+.msp-expandable-group-color-stripe {
+ position: absolute;
+ left: 0;
+ top: $row-height - 2px;
+ width: $control-label-width + $control-spacing;
+ height: 2px;
+}
\ No newline at end of file
diff --git a/src/mol-plugin/skin/base/components/slider.scss b/src/mol-plugin/skin/base/components/slider.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3d879558045cb147effefb5861d7eb6e457c57c2
--- /dev/null
+++ b/src/mol-plugin/skin/base/components/slider.scss
@@ -0,0 +1,164 @@
+@mixin borderBox {
+ box-sizing: border-box;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari
+
+ * {
+ box-sizing: border-box;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari
+ }
+}
+
+.msp-slider-base {
+ position: relative;
+ height: 14px;
+ padding: 5px 0;
+ width: 100%;
+ border-radius: $slider-border-radius-base;
+ @include borderBox;
+
+ &-rail {
+ position: absolute;
+ width: 100%;
+ background-color: $border-color;
+ height: 4px;
+ border-radius: 2px;
+ }
+
+ &-track {
+ position: absolute;
+ left: 0;
+ height: 4px;
+ border-radius: $slider-border-radius-base;
+ background-color: tint($font-color, 60%);
+ }
+
+ &-handle {
+ position: absolute;
+ margin-left: -11px;
+ margin-top: -9px;
+ width: 22px;
+ height: 22px;
+ cursor: pointer;
+ border-radius: 50%;
+ background-color: $font-color;
+ border: 4px solid $border-color;
+
+ &:hover {
+ background-color: $hover-font-color;
+ }
+ }
+
+ &-mark {
+ position: absolute;
+ top: 18px;
+ left: 0;
+ width: 100%;
+ font-size: 12px;
+ }
+
+ &-mark-text {
+ position: absolute;
+ display: inline-block;
+ vertical-align: middle;
+ text-align: center;
+ cursor: pointer;
+ color: #999;
+
+ &-active {
+ color: #666;
+ }
+ }
+
+ &-step {
+ position: absolute;
+ width: 100%;
+ height: 4px;
+ background: transparent;
+ }
+
+ &-dot {
+ position: absolute;
+ bottom: -2px;
+ margin-left: -4px;
+ width: 8px;
+ height: 8px;
+ border: 2px solid #e9e9e9;
+ background-color: #fff;
+ 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%);
+ }
+ }
+
+ &-disabled {
+ background-color: #e9e9e9;
+
+ .msp-slider-base-track {
+ background-color: $slider-disabledColor;
+ }
+
+ .msp-slider-base-handle, .msp-slider-base-dot {
+ border-color: $slider-disabledColor;
+ background-color: #fff;
+ cursor: not-allowed;
+ }
+
+ .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;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/mol-plugin/skin/base/components/tasks.scss b/src/mol-plugin/skin/base/components/tasks.scss
new file mode 100644
index 0000000000000000000000000000000000000000..77da59ce53be55595ae7e692e7438bb20e6c8e8c
--- /dev/null
+++ b/src/mol-plugin/skin/base/components/tasks.scss
@@ -0,0 +1,132 @@
+.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;
+ }
+
+ > button {
+ //margin-top: -2px;
+ //float: left;
+ //display: block;
+ //line-height: $row-height;
+ //height: $row-height;
+ }
+}
+
+/* overlay */
+
+.msp-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ z-index: 1000;
+
+ .msp-overlay-background {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ background: transparent;
+ //background: black;
+ //opacity: 0.5;
+ }
+
+ .msp-overlay-content-wrap {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ display: block;
+ width: 100%;
+ height: 100%;
+ }
+
+ .msp-overlay-content {
+ text-align: center;
+
+ > div {
+
+ padding-top: 2 * $row-height;
+
+ .msp-task-state {
+ $size: $row-height;
+ text-align: center;
+
+ > div {
+ height: $size;
+ margin-top: $control-spacing;
+ position: relative;
+ text-align: center;
+ width: 100%;
+
+ > div {
+ height: $size;
+ line-height: $size;
+ display: inline-block;
+ background: $default-background;
+ padding: 0 ($control-spacing);
+ font-weight: bold;
+ @include non-selectable;
+ }
+
+ > 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;
+ }
+
+ > button {
+ display: inline-block;
+ margin-top: -3px;
+ font-size: 140%;
+ }
+ }
+ }
+}
+
+// .msp-background-tasks .msp-task-state {
+// color:
+// }
+
diff --git a/src/mol-plugin/skin/base/components/toast.scss b/src/mol-plugin/skin/base/components/toast.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ff9c109007f2101aa89ffb267ba26f55b8d5d988
--- /dev/null
+++ b/src/mol-plugin/skin/base/components/toast.scss
@@ -0,0 +1,82 @@
+
+.msp-toast-container {
+ position: absolute;
+ max-width: 100%;
+ bottom: $control-spacing;
+ right: $control-spacing;
+ margin-left: $control-spacing;
+ z-index: 1001;
+
+ .msp-toast-entry {
+
+ color: $font-color;
+ background: $control-background;
+ position: relative;
+ 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 {
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ text-align: right;
+ padding-right: $control-spacing / 2;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/mol-plugin/skin/base/components/transformer.scss b/src/mol-plugin/skin/base/components/transformer.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8328a1eb129b661fa4313fcc528e91e8a6d9d9a8
--- /dev/null
+++ b/src/mol-plugin/skin/base/components/transformer.scss
@@ -0,0 +1,39 @@
+.msp-transformer {
+
+ .msp-entity-badge {
+ position: absolute;
+ top: 0;
+ right: 0;
+ height: $row-height;
+ line-height: $row-height;
+ width: $row-height;
+ }
+}
+
+.msp-layout-right {
+ 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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/mol-plugin/skin/base/components/viewport.scss b/src/mol-plugin/skin/base/components/viewport.scss
new file mode 100644
index 0000000000000000000000000000000000000000..55ca6cd8b1b16f786f320f1a61a35c3625040f10
--- /dev/null
+++ b/src/mol-plugin/skin/base/components/viewport.scss
@@ -0,0 +1,93 @@
+.msp-viewport {
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ background: black;
+
+ .msp-btn-link {
+ background: rgba(0,0,0,0.2);
+ }
+
+}
+
+.msp-viewport-expanded {
+ position: fixed;
+ z-index: 1000;
+}
+
+.msp-viewport-host3d {
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ -webkit-user-select: none;
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+ -webkit-touch-callout: none;
+}
+
+.msp-viewport-controls {
+ position: absolute;
+ right: $control-spacing;
+ top: $control-spacing;
+}
+
+.msp-viewport-controls-buttons {
+ text-align: right;
+
+ > button {
+ padding: 0;
+ text-align: center;
+ width: $row-height;
+ }
+
+ > button:last-child {
+ margin-left: $control-spacing;
+ }
+
+ .msp-btn-link, .msp-btn-link-toggle-on {
+ color: #eee;
+ }
+
+ .msp-btn-link-toggle-off {
+ color: $msp-btn-link-toggle-off-font-color;
+ }
+
+ .msp-btn-link:hover {
+ color: $hover-font-color;
+ }
+}
+
+.msp-viewport-controls-scene-options {
+ width: 290px;
+ background: $control-background;
+}
+
+/* highlight */
+
+.msp-highlight-info {
+
+ color: $highlight-info-font-color;
+ padding: $info-vertical-padding $control-spacing;
+ background: $default-background; //$highlight-info-background;
+
+ position: absolute;
+ top: $control-spacing;
+ left: $control-spacing;
+ text-align: left;
+ min-height: $row-height;
+ max-width: 95%;
+
+ //border-bottom-right-radius: 6px;
+ z-index: 10000;
+ @include non-selectable;
+}
+
+.msp-highlight-info-additional {
+ font-size: 85%;
+ display: inline-block;
+ color: $highlight-info-additional-font-color;
+}
+
diff --git a/src/mol-plugin/skin/base/icons.scss b/src/mol-plugin/skin/base/icons.scss
new file mode 100644
index 0000000000000000000000000000000000000000..d79242cfc706b4831107786af0152cb6c16107cf
--- /dev/null
+++ b/src/mol-plugin/skin/base/icons.scss
@@ -0,0 +1,135 @@
+
+[class^="msp-icon-"]:before, [class*=" msp-icon-"]:before {
+ font-family: "fontello";
+ font-style: normal;
+ font-weight: normal;
+ speak: none;
+
+ display: inline-block;
+ text-decoration: inherit;
+ width: 1em;
+ margin-right: .2em;
+ text-align: center;
+ /* opacity: .8; */
+
+ /* For safety - reset parent styles, that can break glyph codes*/
+ font-variant: normal;
+ text-transform: none;
+
+ /* fix buttons height, for twitter bootstrap */
+ line-height: 1em;
+
+ /* Animation center compensation - margins should be symmetric */
+ /* remove if not needed */
+ margin-left: .2em;
+
+ /* you can be more comfortable with increased icons size */
+ /* font-size: 120%; */
+
+ /* Font smoothing. That was taken from TWBS */
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+
+ /* Uncomment for 3D effect */
+ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+
+.msp-icon-expand-layout:before {
+ content: "\e84a";
+}
+
+.msp-icon-plus:before {
+ content: "\e816";
+}
+
+.msp-icon-minus:before {
+ content: "\e819";
+}
+
+.msp-icon-reset-scene:before {
+ content: "\e891";
+}
+
+.msp-icon-ok:before {
+ content: "\e812";
+}
+
+.msp-icon-cross:before {
+ content: "\e868";
+}
+
+.msp-icon-off:before {
+ content: "\e813";
+}
+
+.msp-icon-expand:before {
+ content: "\e885";
+}
+
+.msp-icon-collapse:before {
+ content: "\e883";
+}
+
+.msp-icon-visual-visibility:before {
+ content: "\e826";
+}
+
+.msp-icon-abort:before {
+ content: "\e814";
+}
+
+.msp-icon-focus-on-visual:before {
+ content: "\e8a3";
+}
+
+.msp-icon-settings:before {
+ content: "\e855";
+}
+
+.msp-icon-tools:before {
+ content: "\e856";
+}
+
+.msp-icon-log:before {
+ content: "\e8a5";
+}
+
+.msp-icon-remove:before {
+ content: "\e847";
+}
+
+.msp-icon-help:before {
+ content: '\e81c'
+}
+
+.msp-icon-info:before {
+ content: '\e81e'
+}
+
+.msp-icon-left-open-big:before {
+ content: '\e87c'
+}
+
+.msp-icon-right-open-big:before {
+ content: '\e87d'
+}
+
+.msp-icon-left-open:before {
+ content: '\e874'
+}
+
+.msp-icon-right-open:before {
+ content: '\e875'
+}
+
+.msp-icon-screenshot:before {
+ content: "\e80f";
+}
+
+.msp-icon-help:before {
+ content: "\e81c";
+}
+
+.msp-icon-help-circle:before {
+ content: "\e81d";
+}
\ No newline at end of file
diff --git a/src/mol-plugin/skin/base/layout.scss b/src/mol-plugin/skin/base/layout.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8f05c4dabcfa75de561df363891298325c8af415
--- /dev/null
+++ b/src/mol-plugin/skin/base/layout.scss
@@ -0,0 +1,29 @@
+
+@import 'layout/common';
+
+.msp-layout-standard-outside {
+ position: absolute;
+ @import 'layout/controls-outside';
+}
+
+.msp-layout-standard-landscape {
+ position: absolute;
+ @import 'layout/controls-landscape';
+}
+
+.msp-layout-standard-portrait {
+ position: absolute;
+ @import 'layout/controls-portrait';
+}
+
+.msp-layout-expanded {
+ position: fixed;
+
+ @media (orientation:landscape) {
+ @import 'layout/controls-landscape';
+ };
+
+ @media (orientation:portrait) {
+ @import 'layout/controls-portrait';
+ } ;
+}
\ No newline at end of file
diff --git a/src/mol-plugin/skin/base/layout/common.scss b/src/mol-plugin/skin/base/layout/common.scss
new file mode 100644
index 0000000000000000000000000000000000000000..afd01479f0ae265c339f6677232dd0dabe89f564
--- /dev/null
+++ b/src/mol-plugin/skin/base/layout/common.scss
@@ -0,0 +1,61 @@
+
+
+.msp-layout-expanded, .msp-layout-standard {
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+}
+
+.msp-layout-region {
+ overflow: hidden;
+ background: $default-background;
+}
+
+.msp-layout-static, .msp-layout-scrollable {
+ position: absolute;
+}
+
+.msp-layout-scrollable {
+ overflow-y: auto;
+}
+
+.msp-layout-static {
+ overflow: hidden;
+}
+
+.msp-layout-main, .msp-layout-bottom {
+ .msp-layout-static {
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ }
+}
+
+.msp-layout-right {
+
+ .msp-layout-static {
+ left: 0;
+ right: 0;
+ top: 0;
+ height: $row-height + $control-spacing;
+ }
+
+ .msp-layout-scrollable {
+ left: 0;
+ right: 0;
+ top: $row-height + $control-spacing + 1;
+ bottom: 0;
+ }
+
+}
+
+.msp-layout-left {
+ .msp-layout-static {
+ left: 0;
+ right: 0;
+ bottom: 0;
+ top: 0;
+ }
+}
\ No newline at end of file
diff --git a/src/mol-plugin/skin/base/layout/controls-landscape.scss b/src/mol-plugin/skin/base/layout/controls-landscape.scss
new file mode 100644
index 0000000000000000000000000000000000000000..fe395aa8d978098418aafee593225e27f49dbb33
--- /dev/null
+++ b/src/mol-plugin/skin/base/layout/controls-landscape.scss
@@ -0,0 +1,81 @@
+
+.msp-layout-main {
+ position: absolute;
+ left: $expanded-left-width;
+ right: $expanded-right-width;
+ bottom: $expanded-bottom-height;
+ top: $expanded-top-height;
+}
+
+.msp-layout-top {
+ position: absolute;
+ left: $expanded-left-width;
+ right: $expanded-right-width;
+ height: $expanded-top-height;
+ top: 0;
+ border-bottom: 1px solid $border-color;
+}
+
+.msp-layout-bottom {
+ position: absolute;
+ left: $expanded-left-width;
+ right: $expanded-right-width;
+ height: $expanded-bottom-height;
+ bottom: 0;
+ border-top: 1px solid $border-color;
+}
+
+.msp-layout-right {
+ position: absolute;
+ width: $expanded-right-width;
+ right: 0;
+ bottom: 0;
+ top: 0;
+ border-left: 1px solid $border-color;
+}
+
+.msp-layout-left {
+ position: absolute;
+ width: $expanded-left-width;
+ left: 0;
+ bottom: 0;
+ top: 0;
+ border-right: 1px solid $border-color;
+}
+
+.msp-layout-hide-right {
+ .msp-layout-right {
+ display: none;
+ }
+ .msp-layout-main, .msp-layout-top, .msp-layout-bottom {
+ right: 0;
+ }
+}
+
+
+.msp-layout-hide-left {
+ .msp-layout-left {
+ display: none;
+ }
+ .msp-layout-main, .msp-layout-top, .msp-layout-bottom {
+ left: 0;
+ }
+}
+
+.msp-layout-hide-bottom {
+ .msp-layout-bottom {
+ display: none;
+ }
+ .msp-layout-main {
+ bottom: 0;
+ }
+}
+
+.msp-layout-hide-top {
+ .msp-layout-top {
+ display: none;
+ }
+ .msp-layout-main {
+ top: 0;
+ }
+}
\ No newline at end of file
diff --git a/src/mol-plugin/skin/base/layout/controls-outside.scss b/src/mol-plugin/skin/base/layout/controls-outside.scss
new file mode 100644
index 0000000000000000000000000000000000000000..a6bde6fcde07a8854a89fceca0827f6ce92413af
--- /dev/null
+++ b/src/mol-plugin/skin/base/layout/controls-outside.scss
@@ -0,0 +1,89 @@
+
+.msp-layout-main {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ top: 0;
+}
+
+.msp-layout-top {
+ position: absolute;
+ right: 0;
+ height: $standard-top-height;
+ top: -$standard-top-height;
+ width: 50%;
+ border-left: 1px solid $border-color;
+ border-bottom: 1px solid $border-color;
+}
+
+.msp-layout-bottom {
+ position: absolute;
+ left: 0;
+ right: 0;
+ height: $standard-top-height;
+ top: -$standard-top-height;
+ width: 50%;
+ border-bottom: 1px solid $border-color;
+}
+
+.msp-layout-right {
+ position: absolute;
+ width: 50%;
+ right: 0;
+ bottom: -$standard-bottom-height;
+ height: $standard-bottom-height;
+ border-left: 1px solid $border-color;
+ border-top: 1px solid $border-color;
+}
+
+.msp-layout-left {
+ position: absolute;
+ width: 50%;
+ left: 0;
+ bottom: 0;
+ bottom: -$standard-bottom-height;
+ height: $standard-bottom-height;
+ border-top: 1px solid $border-color;
+}
+
+/////////////////////////////////////////
+.msp-layout-hide-right {
+ .msp-layout-right {
+ display: none;
+ }
+ .msp-layout-left {
+ width: 100%;
+ }
+}
+
+.msp-layout-hide-left {
+ .msp-layout-left {
+ display: none;
+ }
+ .msp-layout-right {
+ width: 100%;
+ border-left: none;
+ }
+}
+
+///////////////////////////////////
+.msp-layout-hide-top {
+ .msp-layout-top {
+ display: none;
+ }
+ .msp-layout-bottom {
+ width: 100%;
+ border-left: none;
+ }
+}
+
+.msp-layout-hide-bottom {
+ .msp-layout-bottom {
+ display: none;
+ }
+ .msp-layout-top {
+ width: 100%;
+ border-left: none;
+ }
+}
\ No newline at end of file
diff --git a/src/mol-plugin/skin/base/layout/controls-portrait.scss b/src/mol-plugin/skin/base/layout/controls-portrait.scss
new file mode 100644
index 0000000000000000000000000000000000000000..594625afda713e4a788f6caa07e097dbe6b4e797
--- /dev/null
+++ b/src/mol-plugin/skin/base/layout/controls-portrait.scss
@@ -0,0 +1,99 @@
+
+.msp-layout-main {
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: $expanded-portrait-bottom-height;
+ top: $expanded-portrait-top-height;
+}
+
+.msp-layout-top {
+ position: absolute;
+ right: 0;
+ height: $expanded-portrait-top-height;
+ top: 0;
+ width: 50%;
+ border-left: 1px solid $border-color;
+ border-bottom: 1px solid $border-color;
+}
+
+.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 {
+ position: absolute;
+ width: 50%;
+ right: 0;
+ bottom: 0;
+ height: $expanded-portrait-bottom-height;
+ border-left: 1px solid $border-color;
+ border-top: 1px solid $border-color;
+}
+
+.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-right {
+ display: none;
+ }
+ .msp-layout-left {
+ width: 100%;
+ }
+}
+
+.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-main {
+ bottom: 0;
+ }
+}
+
+///////////////////////////////////
+.msp-layout-hide-top {
+ .msp-layout-top {
+ display: none;
+ }
+ .msp-layout-bottom {
+ width: 100%;
+ border-left: none;
+ }
+}
+
+.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-main {
+ top: 0;
+ }
+}
\ No newline at end of file
diff --git a/src/mol-plugin/skin/base/logo.scss b/src/mol-plugin/skin/base/logo.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4f9fbb6068664acf95ec651630aa7b38a8199110
--- /dev/null
+++ b/src/mol-plugin/skin/base/logo.scss
@@ -0,0 +1,50 @@
+
+.msp-logo {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+
+ display: table;
+ width: 100%;
+ height: 100%;
+
+ > div {
+ display: table-cell;
+ vertical-align: middle;
+ text-align: center;
+
+ > div {
+ display: inline-block;
+ position: relative;
+ width: 50%;
+ max-width: 450px;
+ height: 130px;
+
+ > div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ }
+
+ > div:first-child {
+ //border-radius: 8px;
+ background: $logo-background;
+ }
+ }
+ }
+}
+
+
+
+.msp-logo-image {
+@include non-selectable;
+margin: 20px;
+background-repeat: no-repeat;
+background-position: center;
+background-size: contain;
+background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAABSCAMAAAASJ/28AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAACuUExURQAAAP7+/v///////6upo////////84/LP7+/v7+/v///////////////7Jod/7+/v///////x5eU/7+/h9TTf///y6e1B4nO/7+/pRcpSue1pRcpX6Skys8Siue1f///yk4RxUYMOCFOR2tcsdJPn+SlM4+K9+BOdJRL84+Kyud1uCFOR2tc3+SlB6sch6tch2tcrfBw////5RcpX+SlCw9S+CFOhYZMR6tcyye1o20WrIAAAAydFJOUwC5VEEKn3z/c9bHFIRoG5jyNB77NCY+lObZ+I3E6VY7bNvX6jSxcLdQ6PGYhJNeb8aMIUgcaQAABuVJREFUeNrt3Oly2zYQAGASBGnxMknTtJmjkZvmcNK67TBOHL//i5XiJRy74AHImk6wfzKREMn6vLgWUBxncdw4NnTi4fHBImj5PVpBTT8rqOtnBbfGx8dHK2jE7+2l1dDyo45zbUG0/O6+31oSLb/vVnBNUNnPCur6WUFdPyuo6/ebnYq1/eyCUM/v08W9FdLyu7CCmn6/tiCNu6B4g7ezfr+0oNd0QbT8Vgi6YfqyHzANpwiwNuTYJjEMqPRz7i9WC4ZN8LKAu2aKGutn0bGNbxZQ6Ue3CC4BLDJyEsAGSf6iORUg4/dR8vvrj6sNgksA66asTgIYwU2yUwGq/X7+3CK4DLDhAeOqMgLYFFCLOD8R4JzfJsFNXXjXuGYAs9kWBgHn/QbBL5PgpxNNIsYA8xj8kU4D+DDv1wt+WCN4XkBoGvGaU2fgR0dav0yAqwXPBVj3f4RyA3+YYMwC3n+moyDgpyF4LkB/6Kh7aQope+CdUcD7Hz9GwYPf7dHvamixVfBsgBhQ0D8eGAVs/UZBxG+z4NkAh0wrY3nN1D1sErDz6wUfML+tgmcDHMc64e1J/6jrGAQc/DpB3G+j4PkA98NsIhQ3+kc9FeA+cMO8zEM38egSwM8/WME7zG+b4KKFdDr+OF7ahduEKRdiP9zvfNd1s7RSAI7rPa6zVdPkjAHGQc0uJLN4HpBygvQW89skuAQwmRLOb+DgtmRxcvyIIcEB07G3cm/VxQ4FTHPhrcuEKgFv3oiCQx8G/LYIrgNMsy6ips64qISPmLsBIWnithNFVGGAtLdgCxW0nmYWEDB2gd9eWCkA33z7xgu+H3IQ9HOcf46C14sE1wHOj4HUPaQdnZKxbHKCAI5Vl0SaQnwHBoxDMP/rAgVs/WBBxG+9oGFAGgl9qgqbkiCAlVRXjY6rawAQ8WtfoUIAOz9A0Lm9Qj/tSkHDgK7A1ZHmFQw4ehGhkho6MOA0Aud+uq8Kkk1jbURBwMEPElTEOkGzgCmwi2/zJkIAiVBXzaYpBAIk47Qxzbw0GKeUAAKkr74hgpfmBI0CxjlU4StKtujCwgxzxliuHSqpfY1LBhw6cO6xr12LdTE2Ay85QUdX8MvlqQGTpoYKfD5bdOFgEq6umrJPSYBDAgpDRJELKciNgVsE764RQdDPKGCbUOCLVWzRhYOp+g1xTtkUK2BAFy5ip0JdjJ+F1wvePT3BgrCfUUBPLg2Mk2sCA44qXRffcyOiCEiR4oMwDIjrQEHwzznB1q8T/FsURPyMAiZQfbR/IkIAPSZ/fK5ILQIWwL6FHQZSZCeyTvD26QkW/Hz5AgtpFz4kOgxfOQI4VK8OXTzmurMEmDIzNLR3S7C98BrBwQ8QNLQXVgOGTVaA0X74GAE8/nXHj3EiYICddcR8Q7mYsFxw8nv63VkqaBKwbvCoEMBjXTXkG4qACXIEMAK6eDVmqSDj14lNgv/SlwKsQyywDBxHvp0nLKqRDPTWZ+BSQd7v5mYSVPkZ7sK7FQXVsXQ4TCOu8MGRMVA+By34rg+eiSwRFPy+vh4FlX4vM4moAPlz9GNhQWznYRXqHT+7wKdy84Ki3/PzIKj2M7yMiTYApixggrYbjzupvMjkBkfkXHhOUPYbBGf8jAISbCGtBGTvEjHFValdBK9jBrBx9YPeTFALMn5Xo18vOBcbAcFUo/mCQVAuEjC32VxFu+GBvHKgGmvmzACigu8/YH6t4NVpAFNky+Hjl04VgMx9SrIgU8MYqPEfUxe/GwMLqvye350oA7FNb1XOvxpQKJ1u9NbKdsHY6riUKULpDpLifiAkCPi9XuO3DbAd0AnSsvSAgmCmBiTyFAK1o9N87ZLD7y8mbjmaxksAAcHDAKjltw2wXbBE2JFILu0VSI4VVIWCSlmpoStmuslrdu7xnEWAkqC+30ZAj7+SQQpmTC/5tS5NysalShin2ndRzHR1x8vBbSL3jupb+oKgwu/1Mr+NgIcN2HQyUflNOAnF7YAWkeNfd212ZXQGZuFY2W5boO02f2469z0RXlDbrwWsIzQqFPBw/JtnqeeRpBXLUz7jmtrfkcNzh0GqJvMwSwGhk3Xh5H72m0qT4CsD+SdspMTYo4DMgVhT+vxHqDKmp4U76hgEbIEi/loCgRfW+DdbRkEzfk4aKGLopPsA+nFikrlR5GZEXtFQL/Gjw3PA7aKif+nZr+7g7YokGi6FhJlc3ar6f6f4HkYvKPu92+L3f4242Bebv6tyEPzF/TSDvrJ+moLWTzusn15cY372/1NdKdj5PVu/rYLWT0+Q779frd9KQT7/rN9qQeunHdZPc0X91frpxXiCZP30BK2fnqD10xO0fpqC1s/GCeI/6y9FSRCu10QAAAAASUVORK5CYII=);
+}
\ No newline at end of file
diff --git a/src/mol-plugin/skin/base/ui.scss b/src/mol-plugin/skin/base/ui.scss
new file mode 100644
index 0000000000000000000000000000000000000000..4a6063880c6b5879cb62240bf1e6cd6496320064
--- /dev/null
+++ b/src/mol-plugin/skin/base/ui.scss
@@ -0,0 +1,42 @@
+
+@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;
+}
+
+::-webkit-scrollbar {
+ width: 10px;
+ height:10px;
+}
+
+::-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 {
+ border-radius: 0;
+ //-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.9);
+ background-color: color-lower-contrast($control-background, 8%);
+}
+
+@import 'components/controls-base';
+@import 'components/controls';
+@import 'components/slider';
+@import 'components/panel';
+@import 'components/misc';
+@import 'components/entity';
+@import 'components/entity-info';
+@import 'components/tasks';
+@import 'components/viewport';
+@import 'components/log';
+@import 'components/transformer';
+@import 'components/toast';
+@import 'components/help';
\ No newline at end of file
diff --git a/src/mol-plugin/skin/base/variables.scss b/src/mol-plugin/skin/base/variables.scss
new file mode 100644
index 0000000000000000000000000000000000000000..ada1a971c269ba80592491b672c65f0d5e248161
--- /dev/null
+++ b/src/mol-plugin/skin/base/variables.scss
@@ -0,0 +1,78 @@
+
+// measures
+
+$control-label-width: 110px;
+$row-height: 32px;
+$control-spacing: 10px;
+$entity-subtree-offset: 8px;
+$info-vertical-padding: 6px;
+$slider-border-radius-base: 6px;
+
+// layout
+$expanded-top-height: 100px;
+$expanded-bottom-height: 3 * $row-height + 2;
+$expanded-right-width: 290px;
+$expanded-left-width: 290px;
+
+$expanded-portrait-bottom-height: 10 * ($row-height + 1) + 3 * $control-spacing + 1;
+$expanded-portrait-top-height: 2 * $row-height + 1;
+
+$standard-bottom-height: 8 * ($row-height + 1) + 3 * $control-spacing + 1;
+$standard-top-height: 2 * $row-height + 1;
+
+//////////////////////////////////////////////////
+// ENTITY COLORS
+
+
+// entity colors are "somewhat orthogonal" on the RGB cube
+// TypeClass = 'Root' | 'Group' | 'Data' | 'Object' | 'Visual' | 'Selection' | 'Action' | 'Behaviour'
+
+// DO NOT CHANGE THESE!!
+$entity-color-Root: $default-background;
+$entity-color-Data: color-lower-contrast(#95a5a6, 15%);
+$entity-color-Selection: color-lower-contrast(#e74c3c, 15%);
+$entity-color-Action: color-lower-contrast(#34495e, 10%);
+$entity-color-Object: color-lower-contrast(#2ecc71, 10%);
+$entity-color-Behaviour: color-lower-contrast(#9b59b6, 10%);
+$entity-color-Visual: color-lower-contrast(#3498db, 5%);
+$entity-color-Group: color-lower-contrast(#e67e22, 5%);
+
+//////////////////////////////////////////////////
+// COLORS and COMPUTED COLORS
+
+$slider-disabledColor: #ccc;
+
+$control-background: color-increase-contrast($default-background, 6.5%);
+$border-color: color-increase-contrast($default-background, 15%);
+$msp-form-control-background: color-lower-contrast($default-background, 2.5%);
+
+// buttons
+$msp-btn-link-font-color: $font-color;
+$msp-btn-link-toggle-on-font-color: $font-color;
+$msp-btn-link-toggle-off-font-color: color-lower-contrast($font-color, 33%);
+
+// used for "actions" -- i.e. + in selection
+$msp-btn-remove-font-color: $font-color;
+
+$msp-btn-action-background: $msp-form-control-background;
+
+// update selection etc
+//!! $msp-btn-commit-on-font-color: $entity-current-font-color;
+$msp-btn-commit-on-hover-font-color: color-lower-contrast($msp-btn-commit-on-font-color, 20%); //!!Change
+$msp-btn-commit-on-background: color-lower-contrast($default-background, 2%);
+$msp-btn-commit-off-background: color-lower-contrast($default-background, 4%); //$control-background;
+$msp-btn-commit-off-font-color: $font-color;
+
+// log
+$log-font-color: color-lower-contrast($font-color, 5%);
+$log-timestamp-font-color: color-lower-contrast($font-color, 20%);
+
+// highlight
+$highlight-info-font-color: $hover-font-color;
+$highlight-info-additional-font-color: color-lower-contrast($hover-font-color, 20%);
+
+// entity state
+$entity-color-fully-visible: $font-color;
+$entity-color-not-visible: color-lower-contrast($font-color, 66%);
+$entity-color-partialy-visible: color-lower-contrast($font-color, 33%);
+$entity-tag-color: color-lower-contrast($font-color, 20%);
diff --git a/src/mol-plugin/skin/blue.scss b/src/mol-plugin/skin/blue.scss
new file mode 100644
index 0000000000000000000000000000000000000000..846c0e0a14fb89f9521e579616bb5df910eed4a6
--- /dev/null
+++ b/src/mol-plugin/skin/blue.scss
@@ -0,0 +1,2 @@
+@import 'colors/blue';
+@import 'base/base';
\ No newline at end of file
diff --git a/src/mol-plugin/skin/colors/blue.scss b/src/mol-plugin/skin/colors/blue.scss
new file mode 100644
index 0000000000000000000000000000000000000000..46a7709694a4b9537cb9437ee48fc41a995ccd38
--- /dev/null
+++ b/src/mol-plugin/skin/colors/blue.scss
@@ -0,0 +1,24 @@
+$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 darken($color, $amount);
+}
+
+@function color-increase-contrast($color, $amount) {
+ @return lighten($color, $amount);
+}
\ No newline at end of file
diff --git a/src/mol-plugin/skin/colors/dark.scss b/src/mol-plugin/skin/colors/dark.scss
new file mode 100644
index 0000000000000000000000000000000000000000..2e6893aca3abd9850145a1591859d9dc40b08ad8
--- /dev/null
+++ b/src/mol-plugin/skin/colors/dark.scss
@@ -0,0 +1,24 @@
+$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 darken($color, $amount);
+}
+
+@function color-increase-contrast($color, $amount) {
+ @return lighten($color, $amount);
+}
\ No newline at end of file
diff --git a/src/mol-plugin/skin/colors/light.scss b/src/mol-plugin/skin/colors/light.scss
new file mode 100644
index 0000000000000000000000000000000000000000..cb628fdea42ef53a82bb2c3cc348c868fbf4c22f
--- /dev/null
+++ b/src/mol-plugin/skin/colors/light.scss
@@ -0,0 +1,30 @@
+// this is complement of the dark theme
+
+@function compl($color) {
+ @return rgb(255 - red($color), 255 - green($color), 255 - blue($color));
+}
+
+$default-background: compl(#111318);
+$font-color: compl(#ccd4e0);
+$hover-font-color: compl(#51A2FB);
+$entity-current-font-color: compl(#68BEFD);
+$msp-btn-commit-on-font-color: compl(#68BEFD);
+$entity-badge-font-color: lighten(#ccd4e0,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: rgba(204,201,193,0.85);
+
+@function color-lower-contrast($color, $amount) {
+ @return lighten($color, $amount);
+}
+
+@function color-increase-contrast($color, $amount) {
+ @return darken($color, $amount);
+}
\ No newline at end of file
diff --git a/src/mol-plugin/skin/dark.scss b/src/mol-plugin/skin/dark.scss
new file mode 100644
index 0000000000000000000000000000000000000000..8b3d00abd670acaa5aeca019f2a9d27afa5ff8a0
--- /dev/null
+++ b/src/mol-plugin/skin/dark.scss
@@ -0,0 +1,2 @@
+@import 'colors/dark';
+@import 'base/base';
\ No newline at end of file
diff --git a/src/mol-plugin/skin/fonts/fontello.eot b/src/mol-plugin/skin/fonts/fontello.eot
new file mode 100644
index 0000000000000000000000000000000000000000..b522411b265bb3854a7f23579001bfe51e4229cb
Binary files /dev/null and b/src/mol-plugin/skin/fonts/fontello.eot differ
diff --git a/src/mol-plugin/skin/fonts/fontello.svg b/src/mol-plugin/skin/fonts/fontello.svg
new file mode 100644
index 0000000000000000000000000000000000000000..753bf788b40774bbb9a88c2b847d0b335975882a
--- /dev/null
+++ b/src/mol-plugin/skin/fonts/fontello.svg
@@ -0,0 +1,442 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2016 by original authors @ fontello.com</metadata>
+<defs>
+<font id="fontello" horiz-adv-x="1000" >
+<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="palette" unicode="" d="M857 622q72-48 101-110t20-104-35-48q-16-4-54 10t-80 10-80-46q-30-46-21-75t34-65 23-50q-2-26-36-63t-126-74-216-37q-186 0-291 101t-95 245q8 118 104 235t216 151q290 84 536-80z m-318-466q30 0 52 22t22 54-22 53-52 21q-32 0-54-21t-22-53 22-54 54-22z" horiz-adv-x="980" />
+
+<glyph glyph-name="search" unicode="" d="M772 78q30-34 6-62l-46-46q-36-32-68 0l-190 190q-74-42-156-42-128 0-223 95t-95 223 90 219 218 91 224-95 96-223q0-88-46-162z m-678 358q0-88 68-156t156-68 151 63 63 153q0 88-68 155t-156 67-151-63-63-151z" horiz-adv-x="789" />
+
+<glyph glyph-name="flashlight" unicode="" d="M807 706q62-62 85-130t-5-92l-134-134q-16-16-62-26t-96-4l-408-408q-18-18-57-6t-75 50q-36 36-49 74t5 56l408 408q-6 50 4 96t26 62l136 136q24 28 92 4t130-86z m-448-408q32-32 80 14 46 46 14 82-14 14-38 10t-44-24-23-43 11-39z m336 298q30-30 68-50t62-25 28-1q2 4-4 27t-26 60-50 67-66 50-59 26-27 2 1-28 25-62 48-66z" horiz-adv-x="902" />
+
+<glyph glyph-name="mail" unicode="" d="M30 586q-32 18-28 40 2 14 26 14l846 0q38 0 20-32-8-14-24-22-14-6-192-102t-182-98q-16-10-46-10-28 0-46 10-4 2-182 98t-192 102z m850-100q20 10 20-10l0-368q0-16-17-32t-33-16l-800 0q-16 0-33 16t-17 32l0 368q0 20 20 10l384-200q18-10 46-10t46 10z" horiz-adv-x="900" />
+
+<glyph glyph-name="heart" unicode="" d="M790 644q70-64 70-156t-70-158l-360-330-360 330q-70 66-70 158t70 156q62 58 151 58t153-58l56-52 58 52q62 58 150 58t152-58z" horiz-adv-x="860" />
+
+<glyph glyph-name="heart-empty" unicode="" d="M790 642q70-64 70-156t-70-156l-360-330-360 330q-70 64-70 156t70 156q64 58 152 58t150-58l58-52 56 52q64 58 152 58t152-58z m-54-260q42 40 42 104 0 66-38 100-38 38-102 38-52 0-104-48l-104-92-106 92q-48 48-102 48-64 0-104-38-38-36-38-100 0-66 44-104l306-286z" horiz-adv-x="860" />
+
+<glyph glyph-name="star" unicode="" d="M440 790l120-336 320 0-262-196 94-348-272 208-272-208 94 348-262 196 320 0z" horiz-adv-x="880" />
+
+<glyph glyph-name="star-empty" unicode="" d="M880 454l-262-196 94-348-272 208-272-208 94 348-262 196 320 0 120 336 120-336 320 0z m-440-238l150-124-62 178 144 114-176-4-56 202-54-202-176 4 142-114-62-178z" horiz-adv-x="880" />
+
+<glyph glyph-name="user" unicode="" d="M736 128q204-72 204-122l0-106-940 0 0 106q0 50 204 122 94 34 128 69t34 95q0 22-22 49t-32 73q-2 12-9 18t-14 8-14 17-9 43q0 16 5 26t9 12l4 4q-8 50-12 88-4 54 41 112t157 58 158-58 40-112l-12-88q18-8 18-42-2-28-9-43t-14-17-14-8-9-18q-8-48-31-74t-23-48q0-60 35-95t127-69z" horiz-adv-x="940" />
+
+<glyph glyph-name="users" unicode="" d="M1000-90l-224 0 0 150q0 54-30 81t-154 89q40 30 40 84 0 16-13 33t-19 51q-2 8-14 16t-14 42q0 24 12 30-6 34-8 60-4 38 23 78t95 40 96-40 24-78l-8-60q12-6 12-30-2-34-14-42t-14-16q-6-34-19-51t-13-33q0-42 21-66t77-48q112-46 130-80 6-8 9-61t5-101l0-48z m-488 262q182-78 182-124l0-138-694 0 0 184q0 44 84 78 76 32 104 64t28 88q0 20-19 44t-25 68q-2 10-18 22t-20 56q0 14 3 23t7 13l4 2q-6 46-10 82-4 50 33 103t127 53 127-53 33-103l-10-82q14-8 14-38-4-44-20-56t-18-22q-6-44-25-68t-19-44q0-56 28-88t104-64z" horiz-adv-x="1000" />
+
+<glyph glyph-name="user-add" unicode="" d="M620 128q180-64 180-122l0-106-800 0 0 202q36 14 82 26 94 34 129 69t35 95q0 22-23 48t-31 74q-2 12-23 25t-25 61q0 16 5 26t9 12l4 4q-8 50-12 88-6 54 40 112t160 58 160-58 42-112l-14-88q18-8 18-42-2-28-9-43t-14-17-14-8-9-18q-10-46-33-73t-23-49q0-60 36-95t130-69z m230 272l150 0 0-100-150 0 0-150-100 0 0 150-150 0 0 100 150 0 0 150 100 0 0-150z" horiz-adv-x="1000" />
+
+<glyph glyph-name="video" unicode="" d="M980 600l-100 0 0-100 100 0 0-100-100 0 0-100 100 0 0-100-100 0 0-100 100 0 0-60q0-16-12-28t-28-12l-900 0q-16 0-28 12t-12 28l0 60 100 0 0 100-100 0 0 100 100 0 0 100-100 0 0 100 100 0 0 100-100 0 0 60q0 18 12 29t28 11l900 0q16 0 28-11t12-29l0-60z m-600-400l250 150-250 150 0-300z" horiz-adv-x="980" />
+
+<glyph glyph-name="picture" unicode="" d="M856 518l-100 0-124 150-214-150-180 0q-52 0-90-39t-38-91l0-160-108 296q-10 38 22 52l680 248q36 10 50-24z m106-90q16 0 27-12t11-28l0-472q0-16-11-28t-27-12l-724 0q-16 0-27 12t-11 28l0 472q0 16 11 28t27 12l724 0z m-56-452l0 162-72 160-166-60-130-132-138 170-92-214 0-86 598 0z" horiz-adv-x="1000" />
+
+<glyph glyph-name="camera" unicode="" d="M500 450q64 0 107-44t43-106-44-106-106-44-106 44-44 106 44 106 106 44z m400 150q42 0 71-29t29-71l0-450q0-40-29-70t-71-30l-800 0q-40 0-70 30t-30 70l0 450q0 42 30 71t70 29l120 0q28 0 40 30l30 92q10 28 40 28l340 0q30 0 40-28l30-92q12-30 40-30l120 0z m-400-550q104 0 177 73t73 177-73 177-177 73-177-73-73-177 73-177 177-73z m366 380q14 0 24 11t10 25-10 24-24 10q-36 0-36-34 0-16 11-26t25-10z" horiz-adv-x="1000" />
+
+<glyph glyph-name="layout" unicode="" d="M170 650q80 0 80-80l0-90q0-80-80-80l-90 0q-80 0-80 80l0 90q0 80 80 80l90 0z m350 0q80 0 80-80l0-90q0-80-80-80l-90 0q-80 0-80 80l0 90q0 80 80 80l90 0z m-350-350q80 0 80-80l0-90q0-80-80-80l-90 0q-80 0-80 80l0 90q0 80 80 80l90 0z m350 0q80 0 80-80l0-90q0-80-80-80l-90 0q-80 0-80 80l0 90q0 80 80 80l90 0z" horiz-adv-x="600" />
+
+<glyph glyph-name="menu" unicode="" d="M650 400q22 0 36-15t14-35-15-35-35-15l-600 0q-20 0-35 15t-15 35 14 35 36 15l600 0z m-600 100q-20 0-35 15t-15 35 14 35 36 15l600 0q22 0 36-15t14-35-15-35-35-15l-600 0z m600-300q22 0 36-15t14-35-15-35-35-15l-600 0q-20 0-35 15t-15 35 14 35 36 15l600 0z" horiz-adv-x="700" />
+
+<glyph glyph-name="check" unicode="" d="M249 0q-34 0-56 28l-180 236q-16 24-12 52t26 46 51 14 47-28l118-154 296 474q16 24 43 30t53-8q24-16 30-43t-8-53l-350-560q-20-32-56-32z" horiz-adv-x="667" />
+
+<glyph glyph-name="cancel" unicode="" d="M452 194q18-18 18-43t-18-43q-18-16-43-16t-43 16l-132 152-132-152q-18-16-43-16t-43 16q-16 18-16 43t16 43l138 156-138 158q-16 18-16 43t16 43q18 16 43 16t43-16l132-152 132 152q18 16 43 16t43-16q18-18 18-43t-18-43l-138-158z" horiz-adv-x="470" />
+
+<glyph glyph-name="cancel-circled" unicode="" d="M420 770q174 0 297-123t123-297-123-297-297-123-297 123-123 297 123 297 297 123z m86-420l154 154-86 86-154-152-152 152-88-86 154-154-154-152 88-86 152 152 154-152 86 86z" horiz-adv-x="840" />
+
+<glyph glyph-name="cancel-squared" unicode="" d="M700 750q42 0 71-29t29-71l0-600q0-40-29-70t-71-30l-600 0q-40 0-70 30t-30 70l0 600q0 42 30 71t70 29l600 0z m-146-638l86 86-154 152 154 154-86 86-154-152-152 152-88-86 154-154-154-152 88-86 152 152z" horiz-adv-x="800" />
+
+<glyph glyph-name="plus" unicode="" d="M550 400q30 0 30-50t-30-50l-210 0 0-210q0-30-50-30t-50 30l0 210-210 0q-30 0-30 50t30 50l210 0 0 210q0 30 50 30t50-30l0-210 210 0z" horiz-adv-x="580" />
+
+<glyph glyph-name="plus-circled" unicode="" d="M420 770q174 0 297-123t123-297-123-297-297-123-297 123-123 297 123 297 297 123z m52-470l200 0 0 102-200 0 0 202-102 0 0-202-202 0 0-102 202 0 0-202 102 0 0 202z" horiz-adv-x="840" />
+
+<glyph glyph-name="plus-squared" unicode="" d="M700 750q42 0 71-29t29-71l0-600q0-40-29-70t-71-30l-600 0q-40 0-70 30t-30 70l0 600q0 42 30 71t70 29l600 0z m-50-450l0 100-200 0 0 200-100 0 0-200-200 0 0-100 200 0 0-200 100 0 0 200 200 0z" horiz-adv-x="800" />
+
+<glyph glyph-name="minus" unicode="" d="M550 400q30 0 30-50t-30-50l-520 0q-30 0-30 50t30 50l520 0z" horiz-adv-x="580" />
+
+<glyph glyph-name="minus-circled" unicode="" d="M420 770q174 0 297-123t123-297-123-297-297-123-297 123-123 297 123 297 297 123z m252-368l-504 0 0-102 504 0 0 102z" horiz-adv-x="840" />
+
+<glyph glyph-name="minus-squared" unicode="" d="M700 750q42 0 71-29t29-71l0-600q0-40-29-70t-71-30l-600 0q-40 0-70 30t-30 70l0 600q0 42 30 71t70 29l600 0z m-50-450l0 100-500 0 0-100 500 0z" horiz-adv-x="800" />
+
+<glyph glyph-name="help" unicode="" d="M494 740q86-62 86-184 0-64-42-124-12-20-88-80l-46-30q-40-34-48-60-6-16-8-44 0-14-16-14l-128 0q-16 0-16 12 4 98 28 124 16 22 48 48t56 42l24 14q22 16 34 34 28 44 28 70 0 40-26 78-28 36-92 36-68 0-94-44-28-42-28-92l-166 0q6 162 114 232 70 42 166 42 130 0 214-60z m-216-636q44 0 73-30t27-74q-2-46-32-73t-74-25q-44 0-73 29t-27 75 32 73 74 25z" horiz-adv-x="580" />
+
+<glyph glyph-name="help-circled" unicode="" d="M454 810q190 2 326-130t140-322q2-190-131-327t-323-141q-190-2-327 131t-139 323q-4 190 130 327t324 139z m-2-740q30 0 49 19t19 47q2 30-17 49t-49 19l-2 0q-28 0-47-18t-21-46q0-30 19-49t47-21l2 0z m166 328q26 34 26 78 0 78-54 116-52 38-134 38-64 0-104-26-68-42-72-146l0-4 110 0 0 4q0 26 16 54 16 24 54 24 40 0 52-20 16-20 16-44 0-18-16-40-8-12-20-20l-6-4q-6-4-16-11t-20-15-21-17-17-17q-14-20-18-78l0-8 108 0 0 4q0 12 4 28 6 20 28 36l28 18q46 34 56 50z" horiz-adv-x="920" />
+
+<glyph glyph-name="info" unicode="" d="M352 850q48 0 74-27t26-69q0-50-39-88t-95-38q-48 0-74 26t-24 72q0 46 35 85t97 39z m-206-1000q-100 0-54 178l60 254q14 56 0 56-12 0-54-18t-72-38l-26 44q90 78 189 126t151 48q78 0 36-162l-70-266q-16-64 6-64 44 0 118 60l30-40q-84-86-175-132t-139-46z" horiz-adv-x="460" />
+
+<glyph glyph-name="info-circled" unicode="" d="M454 810q190 2 326-130t140-322q2-190-131-327t-323-141q-190-2-327 131t-139 323q-4 190 130 327t324 139z m52-152q-42 0-65-24t-23-50q-2-28 15-44t49-16q38 0 61 22t23 54q0 58-60 58z m-120-594q30 0 84 26t106 78l-18 24q-48-36-72-36-14 0-4 38l42 160q26 96-22 96-30 0-89-29t-115-75l16-26q52 34 74 34 12 0 0-34l-36-152q-26-104 34-104z" horiz-adv-x="920" />
+
+<glyph glyph-name="back" unicode="" d="M750 540q40 0 70-29t30-71l0-290q0-40-30-70t-70-30l-690 0 0 140 650 0 0 210-500 0 0-110-210 180 210 180 0-110 540 0z" horiz-adv-x="850" />
+
+<glyph glyph-name="home" unicode="" d="M888 336q16-16 11-27t-27-11l-84 0 0-310q0-14-1-21t-8-13-23-6l-204 0 0 310-204 0 0-310-194 0q-28 0-35 10t-7 30l0 310-84 0q-22 0-27 11t11 27l400 402q16 16 38 16t38-16z" horiz-adv-x="900" />
+
+<glyph glyph-name="link" unicode="" d="M294 116q14 14 34 14t36-14q32-34 0-70l-42-40q-56-56-132-56-78 0-134 56t-56 132q0 78 56 134l148 148q70 68 144 77t128-43q16-16 16-36t-16-36q-36-32-70 0-50 48-132-34l-148-146q-26-26-26-64t26-62q26-26 63-26t63 26z m450 574q56-56 56-132 0-78-56-134l-158-158q-74-72-150-72-62 0-112 50-14 14-14 34t14 36q14 14 35 14t35-14q50-48 122 24l158 156q28 28 28 64 0 38-28 62-24 26-56 31t-60-21l-50-50q-16-14-36-14t-34 14q-34 34 0 70l50 50q54 54 127 51t129-61z" horiz-adv-x="800" />
+
+<glyph glyph-name="attach" unicode="" d="M244-140q-102 0-170 72-72 70-74 166t84 190l496 496q80 80 174 54 44-12 79-47t47-79q26-96-54-176l-474-474q-40-40-88-46-48-4-80 28-30 24-27 74t47 92l332 334q24 26 50 0t0-50l-332-332q-44-44-20-70 12-8 24-6 24 4 46 26l474 474q50 50 34 108-16 60-76 76-54 14-108-36l-494-494q-66-76-64-143t52-117q50-48 117-50t141 62l496 494q24 24 50 0 26-22 0-48l-496-496q-82-82-186-82z" horiz-adv-x="939" />
+
+<glyph glyph-name="lock" unicode="" d="M640 476q20 0 40-19t20-41l0-390q0-48-48-66l-60-18q-42-16-96-16l-290 0q-56 0-98 16l-60 18q-48 18-48 66l0 390q0 22 15 41t35 19l100 0 0 70q0 110 51 170t149 60 149-60 51-170l0-70 90 0z m-390 90l0-90 200 0 0 90q0 52-27 81t-73 29-73-29-27-81z" horiz-adv-x="700" />
+
+<glyph glyph-name="lock-open" unicode="" d="M640 450q20 0 40-20t20-40l0-390q0-20-14-39t-34-25l-60-20q-52-16-96-16l-290 0q-46 0-98 16l-60 20q-20 6-34 25t-14 39l0 390q0 22 15 41t35 19l400 0 0 140q0 110-100 110t-100-110l0-40-100 0 0 20q0 110 51 170t149 60q200 0 200-230l0-120 90 0z" horiz-adv-x="700" />
+
+<glyph glyph-name="eye" unicode="" d="M500 630q92 0 177-25t141-62 99-77 63-71 20-45-20-44-63-71-99-78-141-62-177-25-177 25-141 62-99 78-63 71-20 44 20 45 63 71 99 77 141 62 177 25z m0-494q92 0 157 63t65 151q0 90-65 153t-157 63-157-63-65-153q0-88 65-151t157-63z m0 214q8-8 37-2t50 11 25-9q0-44-33-75t-79-31-78 31-32 75q0 46 32 77t78 31q14 0 10-23t-12-47 2-38z" horiz-adv-x="1000" />
+
+<glyph glyph-name="tag" unicode="" d="M944 830q36-106-8-199t-128-157l18-24q16-28 6-54l-48-158q-12-30-36-46l-464-328q-42-30-64 4l-210 304q-12 18-9 39t21 33l464 328q26 18 54 18l158 0q30 0 48-26l28-40q168 130 114 286-10 28 18 40 32 8 38-20z m-216-468q40 32 34 80l-32-16q-8-4-12-4-18 0-28 18-12 30 16 40l24 14q-48 34-92 0-28-18-34-51t14-61q18-26 51-32t59 12z" horiz-adv-x="960" />
+
+<glyph glyph-name="bookmark" unicode="" d="M310 800q22 0 36-15t14-35l0-850-180 180-180-180 0 850q0 50 40 50l270 0z" horiz-adv-x="360" />
+
+<glyph glyph-name="bookmarks" unicode="" d="M500 850q20 0 35-15t15-35l0-850-150 180 0 620q0 20-15 35t-35 15l-100 0q0 50 40 50l210 0z m-250-150q20 0 35-15t15-35l0-800-150 180-150-180 0 800q0 50 40 50l210 0z" horiz-adv-x="550" />
+
+<glyph glyph-name="flag" unicode="" d="M874 616q14 6 22-1t0-19q-96-138-164-213t-110-90-73-2-60 37-63 40-93-4-139-86l90-352-100 0-184 720 92 34q90 66 152 86t98 3 64-51 62-71 79-62 129-20 198 51z" horiz-adv-x="900" />
+
+<glyph glyph-name="thumbs-up" unicode="" d="M582 480q2-6 58-13t108-24 52-47q0-72-61-284t-107-212q-144 0-288 42t-144 88l0 342q0 14 15 34t46 45 53 41 62 43 46 31q50 34 104 100t85 104 41 26q48-76 29-137t-59-119-40-60z m-432-4q14 0 0-14-50-50-50-104l0-318q0-50 52-104 10-10-2-10-26 0-55 8t-62 45-33 99l0 242q0 62 33 100t63 47 54 9z" horiz-adv-x="800" />
+
+<glyph glyph-name="thumbs-down" unicode="" d="M218 218q-2 6-57 13t-108 24-53 47q0 72 62 285t106 213q144 0 288-43t144-89l0-342q0-10-8-24t-25-30-32-29-42-32-41-29-41-28l-33-22q-50-34-104-100t-85-104-41-26q-48 76-29 137t59 119 40 60z m432 4q-12 0 2 14 48 50 48 104l0 318q0 50-52 104-10 10 2 10 26 0 55-8t62-45 33-99l0-242q0-48-18-81t-45-48-48-21-39-6z" horiz-adv-x="800" />
+
+<glyph glyph-name="download" unicode="" d="M968 198q18-10 27-32t3-40l-28-154q-4-20-22-33t-40-13l-816 0q-22 0-40 13t-22 33l-28 154q-10 48 32 72l158 108 98 0-170-130 178 0q8 0 12-8l40-110 300 0 40 110q8 8 12 8l178 0-170 130 98 0z m-208 322l-260-244-260 244 166 0 0 256 190 0 0-256 164 0z" horiz-adv-x="1000" />
+
+<glyph glyph-name="upload" unicode="" d="M500 776l260-244-164 0 0-256-190 0 0 256-166 0z m468-578q18-10 27-32t3-40l-28-154q-4-20-22-33t-40-13l-816 0q-22 0-40 13t-22 33l-28 154q-10 48 32 72l158 108 98 0-170-130 178 0q8 0 12-8l40-110 300 0 40 110q8 8 12 8l178 0-170 130 98 0z" horiz-adv-x="1000" />
+
+<glyph glyph-name="upload-cloud" unicode="" d="M760 494q100 0 170-68t70-166-70-166-170-68l-190 0 0 190 106 0-176 230-174-230 104 0 0-190-248 0q-74 0-128 52t-54 124q0 74 53 126t129 52q14 0 20-2-2 12-2 38 0 108 78 184t188 76q90 0 160-52t94-134q28 4 40 4z" horiz-adv-x="1000" />
+
+<glyph glyph-name="reply" unicode="" d="M900 10q-86 152-208 197t-330 45l0-218-362 334 362 322 0-192q90 0 168-27t131-70 96-95 69-104 44-95 24-69z" horiz-adv-x="900" />
+
+<glyph glyph-name="reply-all" unicode="" d="M362 556l-212-188 212-196 0-138-362 334 362 322 0-134z m250-58q104 0 182-50t115-122 60-144 27-122l4-50q-86 154-168 198t-220 44l0-218-362 334 362 322 0-192z" horiz-adv-x="1000" />
+
+<glyph glyph-name="forward" unicode="" d="M540 252q-210 0-332-45t-208-197q4 20 13 53t50 117 96 148 156 117 225 53l0 192 360-322-360-334 0 218z" horiz-adv-x="900" />
+
+<glyph glyph-name="quote" unicode="" d="M146 680q146 0 184-146 38-140-40-302-80-168-224-204-32-8-66-8l0 70q112 0 182 108 54 86 26 146-16 36-62 36-60 0-103 44t-43 106 43 106 103 44z m420 0q146 0 184-146 38-140-40-302-80-168-224-204-32-8-66-8l0 70q112 0 182 108 54 86 26 146-16 36-62 36-60 0-103 44t-43 106 43 106 103 44z" horiz-adv-x="762" />
+
+<glyph glyph-name="code" unicode="" d="M380 636q16-14 16-32t-16-30l-246-224 246-226q16-12 16-30t-16-32q-30-30-60 0l-320 288 320 286q30 30 60 0z m302 0l318-286-318-288q-32-30-62 0-32 32 0 62l248 226-248 224q-32 30 0 62 30 30 62 0z" horiz-adv-x="1000" />
+
+<glyph glyph-name="export" unicode="" d="M750 60l0 56 100 82 0-188q0-20-15-35t-35-15l-750 0q-20 0-35 15t-15 35l0 550q0 22 14 36t36 14l288 0q-32-24-59-49t-39-39l-10-12-130 0 0-450 650 0z m-82 348q-166 0-242-41t-160-181q0 8 1 22t9 56 22 79 44 83 70 79 107 56 149 23l0 156 332-250-332-260 0 178z" horiz-adv-x="1000" />
+
+<glyph glyph-name="pencil" unicode="" d="M718 680q32-32 47-64t15-48l0-16-252-252-290-288-238-52 50 240 290 288 252 252q54 12 126-60z m-494-640l24 24q-2 44-52 94-22 22-45 35t-35 13l-14 2-22-24-18-80q28-16 46-34 24-24 36-48z" horiz-adv-x="780" />
+
+<glyph glyph-name="feather" unicode="" d="M60-138q-6-20-26-8-18 8-16 34 4 100 50 226-100 154-52 316 10-32 32-78t44-80 32-30q8 4 0 83t-11 166 25 157q22 44 80 94t104 70q-24-46-33-94t-4-78 21-32q12 0 84 120t106 122q46 4 114-29t82-65q12-24 0-79t-40-83q-44-44-146-62t-114-24q-16-10 12-34 54-48 176-20-56-80-136-114t-132-38-54-10q-4-24 49-54t101-14q-30-56-63-84t-54-35-76-11-85-8z" horiz-adv-x="698" />
+
+<glyph glyph-name="print" unicode="" d="M66 526q-26 0-22 22 4 10 12 14 2 0 49 17t93 32 58 15l44 0 0 150 380 0 0-150 46 0q12 0 57-15t92-32 49-17q18-8 12-26-4-10-20-10l-850 0z m860-56q20 0 37-19t17-41l0-174q0-22-17-41t-37-19l-100 0 44-250-760 0 44 250-98 0q-20 0-38 19t-18 41l0 174q0 22 18 41t38 19l870 0z m-716-444l560 0-70 324-420 0z" horiz-adv-x="980" />
+
+<glyph glyph-name="retweet" unicode="" d="M250 190l272 0 128-140-448 0q-42 0-71 30t-29 70l0 302-102 0 176 198 174-198-100 0 0-262z m650 60l100 0-174-200-176 200 102 0 0 260-274 0-128 140 450 0q40 0 70-29t30-71l0-300z" horiz-adv-x="1000" />
+
+<glyph glyph-name="keyboard" unicode="" d="M930 650q28 0 49-21t21-49l0-460q0-30-21-50t-49-20l-860 0q-28 0-49 20t-21 50l0 460q0 28 21 49t49 21l860 0z m-380-100l0-100 100 0 0 100-100 0z m150-150l-100 0 0-100 100 0 0 100z m-300 150l0-100 100 0 0 100-100 0z m150-150l-100 0 0-100 100 0 0 100z m-300 150l0-100 100 0 0 100-100 0z m150-150l-100 0 0-100 100 0 0 100z m-300 150l0-100 100 0 0 100-100 0z m150-150l-100 0 0-100 100 0 0 100z m-50-250l0 100-100 0 0-100 100 0z m550 0l0 100-500 0 0-100 500 0z m150 0l0 100-100 0 0-100 100 0z m-150 150l100 0 0 100-100 0 0-100z m150 150l0 100-200 0 0-100 200 0z" horiz-adv-x="1000" />
+
+<glyph glyph-name="comment" unicode="" d="M700 700q42 0 71-29t29-71l0-350q0-40-29-70t-71-30l-200 0 0-150-200 150-200 0q-40 0-70 30t-30 70l0 350q0 42 30 71t70 29l600 0z" horiz-adv-x="800" />
+
+<glyph glyph-name="chat" unicode="" d="M290 240l350 0q2 0 6 2l4 0 0-92q0-40-29-70t-71-30l-250 0-150-150 0 150-50 0q-40 0-70 30t-30 70l0 300q0 42 30 71t70 29l190 0 0-310z m610 560q42 0 71-29t29-71l0-300q0-40-29-70t-71-30l-50 0 0-150-150 150-350 0 0 400q0 42 30 71t70 29l450 0z" horiz-adv-x="1000" />
+
+<glyph glyph-name="bell" unicode="" d="M632 426q16-34 40-52t45-22 44-23 35-55q22-62-74-161t-252-157q-164-58-297-45t-155 75q-20 54 12 111t18 111q-56 192-47 300t113 192q26 22 29 51t29 39q24 8 46-12t56-18q132 2 198-66t160-268z m-186-404q88 32 159 85t100 91 25 50q-8 22-49 33t-124 1-187-48q-102-38-173-87t-94-84-17-53q4-12 50-22t134-4 176 38z m-62 174q8 2 21 7t17 7l2-2q14-40-17-83t-89-63q-96-36-152 14 78 68 218 120z" horiz-adv-x="800" />
+
+<glyph glyph-name="attention" unicode="" d="M957-24q10-16 0-34-10-16-30-16l-892 0q-18 0-28 16-13 18-2 34l446 782q8 18 30 18t30-18z m-420 50l0 100-110 0 0-100 110 0z m0 174l0 300-110 0 0-300 110 0z" horiz-adv-x="962" />
+
+<glyph glyph-name="alert" unicode="" d="M885 234q20-16 16-33t-28-23l-78-22q-24-6-40-28t-14-48l4-82q2-24-14-34t-38 0l-86 44q-22 12-47 4t-35-30l-46-88q-12-22-29-23t-33 19l-50 78q-34 48-88 20l-122-70q-22-14-32-6t-2 32l54 164q8 24-4 44t-36 22l-106 12q-24 4-29 18t15 30l86 76q20 16 20 41t-20 41l-86 76q-20 16-16 33t28 23l78 22q24 6 41 28t15 48l-6 82q0 26 15 36t37 0l80-38q24-10 49-2t37 30l46 80q12 22 30 21t30-23l50-86q12-22 35-29t45 7l136 84q22 14 30 6t0-32l-60-170q-10-22 2-41t38-21l114-12q26-2 30-16t-16-30l-86-76q-18-16-18-41t18-41z m-384-92l0 104-100 0 0-104 100 0z m0 160l0 260-100 0 0-260 100 0z" horiz-adv-x="901" />
+
+<glyph glyph-name="vcard" unicode="" d="M900 750q42 0 71-29t29-71l0-600q0-40-29-70t-71-30l-800 0q-40 0-70 30t-30 70l0 600q0 42 30 71t70 29l800 0z m0-700l0 600-800 0 0-600 800 0z m-450 196l0-90-250 0 0 90 250 0z m0 150l0-90-250 0 0 90 250 0z m0 150l0-90-250 0 0 90 250 0z m346-320l4-70-250 0q0 70 6 70 84 22 84 66 0 16-27 56t-27 88q0 110 90 110t90-110q0-48-28-88t-28-56q0-20 21-36t43-22z" horiz-adv-x="1000" />
+
+<glyph glyph-name="address" unicode="" d="M426 800q20 0 20-20l0-860q0-20-20-20l-46 0q-20 0-20 20l0 440-176 0q-16 0-28 6-12 2-26 12l-120 82q-10 6-10 16t10 16l120 82q14 10 26 12 8 4 28 4l176 0 0 190q0 20 20 20l46 0z m564-208q10-6 10-16t-10-16l-118-82q-22-12-26-12-14-6-28-6l-302 0-40 230 342 0q18 0 28-4t26-12z" horiz-adv-x="1000" />
+
+<glyph glyph-name="location" unicode="" d="M250 750q104 0 177-73t73-177q0-106-62-243t-126-223l-62-84q-10 12-27 35t-60 89-76 130-60 147-27 149q0 104 73 177t177 73z m0-388q56 0 96 40t40 96-40 95-96 39-95-39-39-95 39-96 95-40z" horiz-adv-x="500" />
+
+<glyph glyph-name="map" unicode="" d="M984 600q16-10 16-30l0-584q0-20-16-30-8-6-16-6t-18 6l-216 136-216-136q-18-10-34 0l-218 136-216-136q-16-10-34 0-16 10-16 30l0 584q0 20 16 30l234 146q18 10 34 0l216-136 218 136q16 10 32 0z m-750-450l0 506-168-104 0-506z m234-104l0 506-168 104 0-506z m234 104l0 506-170-104 0-506z m232-104l0 506-168 104 0-506z" horiz-adv-x="1000" />
+
+<glyph glyph-name="direction" unicode="" d="M848 768q8-8 11-16t-2-22-10-26-19-39-24-49q-54-112-147-286t-157-292l-66-118-54 380-380 56q442 246 696 368 20 10 48 25t39 20 25 9 23 1 17-11z m-92-96l-304-280 28-234z" horiz-adv-x="860" />
+
+<glyph glyph-name="compass" unicode="" d="M474 830q198 2 340-136t146-336q2-200-136-342t-338-146q-198-2-341 137t-145 337q-4 200 135 342t339 144z m12-858q156 2 266 114t108 270-115 267-269 107q-158-2-267-114t-107-270 114-267 270-107z m-234 154q4 26 12 66t41 128 77 132 125 76 141 42l60 10q-4-26-12-66t-41-128-77-132q-42-42-124-74t-142-42z m180 276q-22-20-22-48t22-50q20-22 49-22t49 22q52 52 88 186-136-36-186-88z" horiz-adv-x="960" />
+
+<glyph glyph-name="cup" unicode="" d="M340 760q152 0 249-41t91-87l-72-594q-2-14-34-36t-97-42-137-20-136 20-97 42-35 36l-72 594q-4 28 36 57t121 50 183 21z m0-216q72 0 137 15t98 33 33 30-33 29-98 32-137 15-137-15-98-32-33-29 33-30 98-33 137-15z" horiz-adv-x="681" />
+
+<glyph glyph-name="trash" unicode="" d="M50 458q122-70 330-70t330 70l-54-486q-2-14-35-36t-100-43-141-21-140 21-100 43-36 36z m488 300q94-18 158-55t64-71l0-10q0-58-112-99t-268-41-268 41-112 99l0 10q0 34 64 71t158 55l42 48q22 26 70 26l92 0q52 0 70-26z m-54-112l84 0q-92 110-104 126-14 16-32 16l-102 0q-22 0-32-16l-106-126 84 0 64 66 82 0z" horiz-adv-x="760" />
+
+<glyph glyph-name="doc" unicode="" d="M600 800q42 0 71-29t29-71l0-700q0-40-29-70t-71-30l-500 0q-40 0-70 30t-30 70l0 700q0 42 30 71t70 29l500 0z m0-800l0 700-500 0 0-700 500 0z" horiz-adv-x="700" />
+
+<glyph glyph-name="docs" unicode="" d="M970 480q38-10 30-46l-150-556q-4-16-18-23t-30-3l-406 110q-16 4-24 18t-4 28l24 92-180-48q-40-10-50 26l-160 602q-10 36 28 48l454 122q16 4 30-3t18-23l66-244z m-888 190l144-542 392 106-144 540z m702-742l132 492-298 82 76-282q10-34-28-46l-196-52-26-102z" horiz-adv-x="1001" />
+
+<glyph glyph-name="doc-landscape" unicode="" d="M0 600q0 42 30 71t70 29l800 0q42 0 71-29t29-71l0-500q0-40-29-70t-71-30l-800 0q-40 0-70 30t-30 70l0 500z m900 0l-800 0 0-500 800 0 0 500z" horiz-adv-x="1000" />
+
+<glyph glyph-name="doc-text" unicode="" d="M212 308l0 90 280 0 0-90-280 0z m388 492q42 0 71-29t29-71l0-700q0-40-29-70t-71-30l-500 0q-40 0-70 30t-30 70l0 700q0 42 30 71t70 29l500 0z m0-800l0 700-500 0 0-700 500 0z m-110 592l0-88-280 0 0 88 280 0z m0-392l0-88-280 0 0 88 280 0z" horiz-adv-x="700" />
+
+<glyph glyph-name="doc-text-inv" unicode="" d="M600 800q42 0 71-29t29-71l0-700q0-40-29-70t-71-30l-500 0q-40 0-70 30t-30 70l0 700q0 42 30 71t70 29l500 0z m-460-208l0-88 420 0 0 88-420 0z m420-480l0 88-420 0 0-88 420 0z m0 196l0 90-418 0 0-90 418 0z" horiz-adv-x="700" />
+
+<glyph glyph-name="newspaper" unicode="" d="M700 800q42 0 71-29t29-71l0-700q0-40-29-70t-71-30l-600 0q-40 0-70 30t-30 70l0 700q0 42 30 71t70 29l600 0z m0-800l0 700-600 0 0-700 600 0z m-250 250l0-50-250 0 0 50 250 0z m150 200l0-50-200 0 0 50 200 0z m-200 50l0 100 200 0 0-100-200 0z m-50 100l0-200-150 0 0 200 150 0z m-50-250l0-50-100 0 0 50 100 0z m50-50l0 50 250 0 0-50-250 0z m250-150l0-50-400 0 0 50 400 0z m-100 50l0 50 100 0 0-50-100 0z" horiz-adv-x="800" />
+
+<glyph glyph-name="book-open" unicode="" d="M340 238l0-68-200 80 0 68z m0 208l0-68-200 80 0 68z m538 346q22-12 22-42l0-640q0-34-32-46l-398-160q-8-2-10-2t-5-1-5-1-5 1-5 1l-10 2-398 160q-32 12-32 46l0 640q0 30 22 42 22 16 46 6l382-154 382 154q24 10 46-6z m-478-788l0 560-320 128 0-560z m420 128l0 560-320-128 0-560z m-60 186l0-68-200-80 0 68z m0 208l0-68-200-80 0 68z" horiz-adv-x="900" />
+
+<glyph glyph-name="book" unicode="" d="M682 594q18-8 18-28l0-562q0-14-12-25t-28-11q-46 0-46 36l0 522q0 12-12 18l-404 216q-32 10-68-10-44-20-56-44l408-228q18-8 18-28l0-550q0-22-18-28-6-4-16-4-14 0-20 4-8 6-202 127t-212 131q-26 18-26 34l-6 524q0 28 14 52 28 46 102 77t116 9z" horiz-adv-x="700" />
+
+<glyph glyph-name="folder" unicode="" d="M954 500q32 0 40-12t6-36l-42-452q-2-24-12-37t-42-13l-806 0q-52 0-56 50l-42 452q-2 24 6 36t40 12l908 0z m-34 110l10-40-846 0 14 132q4 20 20 34t36 14l164 0q52 0 86-34l30-30q32-36 86-36l340 0q20 0 38-12t22-28z" horiz-adv-x="1001" />
+
+<glyph glyph-name="archive" unicode="" d="M840 600l0-50-696 0 0 50q0 22 13 35t25 15l608 0q6 0 14-1t22-14 14-35z m-148 150q6 0 14-1t22-14 14-35l-498 0q0 22 13 35t25 15l410 0z m248-200q34-32 38-46 6-18 0-54l-76-450q-4-22-20-35t-28-15l-710 0q-52 0-60 50-6 26-39 223t-39 227q-10 22-3 44t10 26 21 20l10 10 30 30 0-80 836 0 0 80z m-248-270l0 100-70 0 0-80-260 0 0 80-68 0 0-100q0-50 48-50l300 0q22 0 35 12t13 24z" horiz-adv-x="981" />
+
+<glyph glyph-name="box" unicode="" d="M870 750q12 0 21-9t9-21l0-120-900 0 0 120q0 12 9 21t21 9l840 0z m-820-730l0 530 800 0 0-530q0-30-21-50t-49-20l-660 0q-28 0-49 20t-21 50z m250 430l0-100 300 0 0 100-300 0z" horiz-adv-x="900" />
+
+<glyph glyph-name="rss" unicode="" d="M0 730q314 0 537-223t223-537l-118 0q0 266-188 453t-454 187l0 120z m0-238q218 0 371-153t153-369l-118 0q0 166-119 285t-287 119l0 118z m114-296q46 0 80-33t34-81q0-46-34-79t-80-33-80 33-34 79q0 48 34 81t80 33z" horiz-adv-x="760" />
+
+<glyph glyph-name="phone" unicode="" d="M461 290q162 162 118 206l-8 8q-30 30-41 48t-4 54 49 88q20 24 37 39t35 16 30 1 29-13 24-18 26-25 21-22q48-48-6-194t-204-294q-150-150-295-205t-193-7q-2 2-23 22t-25 25-18 24-13 31 2 30 15 35 38 37q42 34 70 47t54 2 35-18 39-37q44-44 208 120z" horiz-adv-x="800" />
+
+<glyph glyph-name="cog" unicode="" d="M760 350q0-72 80-122-12-40-34-82-70 18-136-44-54-58-34-136-40-20-84-36-46 82-132 82t-132-82q-44 16-84 36 20 80-34 136-54 54-136 34-14 26-34 82 82 52 82 132 0 72-82 124 20 56 34 82 74-18 136 44 54 56 34 136 42 22 84 34 46-80 132-80t132 80q42-12 84-34-20-78 34-136 66-62 136-44 22-42 34-82-80-50-80-124z m-340-182q76 0 129 53t53 129-53 130-129 54-129-54-53-130 53-129 129-53z" horiz-adv-x="840" />
+
+<glyph glyph-name="tools" unicode="" d="M155 506q-8-8-11-22t-3-25-2-11q-2-2-17-15t-19-17q-16-14-28 4l-70 76q-11 12 2 24 2 2 18 14t20 16q6 6 27 6t37 14q14 14 18 38t10 30q2 0 9 7t26 22 41 31q134 90 186 96 122 0 148-2 12 0-8-8-120-52-152-76-80-56-36-114 34-46 38-48 8-8-2-14-2-2-38-35t-38-35q-14-8-18-4-42 48-71 60t-67-12z m286-26l410-476q18-22-2-38l-48-42q-22-14-38 4l-414 472q-8 8 0 20l72 62q12 8 20-2z m554 202q16-104-16-166-50-88-154-62-56 12-100-32l-82-78-68 78 68 70q24 24 31 53t6 65 5 58q12 56 140 112 12 6 18-3t2-15q-12-12-46-80-14-10-12-35t40-53q58-40 96 22 6 12 26 41t22 33q4 10 13 9t11-17z m-858-684l254 248 76-86-246-242q-20-20-38-4l-46 46q-22 18 0 38z" horiz-adv-x="1000" />
+
+<glyph glyph-name="share" unicode="" d="M650 200q62 0 106-43t44-107q0-62-44-106t-106-44-106 44-44 106q0 6 1 14t1 12l-260 156q-42-32-92-32-62 0-106 44t-44 106 44 106 106 44q54 0 92-30l260 156q0 4-1 12t-1 12q0 62 44 106t106 44 106-43 44-107q0-62-44-106t-106-44q-52 0-90 32l-262-156q2-8 2-26 0-16-2-24l262-156q36 30 90 30z" horiz-adv-x="800" />
+
+<glyph glyph-name="shareable" unicode="" d="M340 350q0 68 47 114t113 46 113-46 47-114q0-66-47-113t-113-47-113 47-47 113z m-114 60q-14-60-66-60l-160 0 0 120 118 0q40 124 145 202t237 78q164 0 284-116 16-18 16-43t-16-43q-18-16-43-16t-43 16q-78 82-198 82-100 0-176-62t-98-158z m614-60l160 0 0-120-118 0q-40-124-144-202t-238-78q-164 0-282 118-18 18-18 43t18 41q16 18 41 18t43-18q82-82 198-82 100 0 176 63t98 157q12 60 66 60z" horiz-adv-x="1000" />
+
+<glyph glyph-name="basket" unicode="" d="M150 0q0 40 30 70t70 30q42 0 71-30t29-70q0-42-29-71t-71-29q-40 0-70 29t-30 71z m500 0q0 40 30 70t70 30q42 0 71-30t29-70q0-42-29-71t-71-29q-40 0-70 29t-30 71z m-322 236q-36-10-34-23t44-13l562 0 0-76q0-20-20-20l-654 0q-20 0-20 20l0 76-10 46-98 454-98 0 0 80q0 20 20 20l156 0q20 0 20-20l0-86 704 0 0-274q0-22-18-26z" horiz-adv-x="900" />
+
+<glyph glyph-name="bag" unicode="" d="M835 668q28-26 24-60l-98-648q-8-30-38-30l-586 0q-28 0-40 30-94 620-96 648-5 34 22 60 6 6 54 43t56 43q18 16 56 16l480 0q38 0 56-16 78-58 110-86z m-406-436q56 0 98 34t63 89 30 89 13 66l-92 0q-38-188-112-188t-112 188l-92 0q46-278 204-278z m-352 368l704 0-110 116-484 0z" horiz-adv-x="859" />
+
+<glyph glyph-name="calendar" unicode="" d="M800 700q42 0 71-29t29-71l0-600q0-40-29-70t-71-30l-700 0q-40 0-70 30t-30 70l0 600q0 42 30 71t70 29l46 0 0-100 160 0 0 100 290 0 0-100 160 0 0 100 44 0z m0-700l0 400-700 0 0-400 700 0z m-540 800l0-170-70 0 0 170 70 0z m450 0l0-170-70 0 0 170 70 0z" horiz-adv-x="900" />
+
+<glyph glyph-name="login" unicode="" d="M800 800q42 0 71-29t29-71l0-700q0-40-29-70t-71-30l-450 0q-40 0-69 30t-29 70l0 100 98 0 0-100 450 0 0 700-450 0 0-150-98 0 0 150q0 42 29 71t69 29l450 0z m-350-670l0 120-450 0 0 150 450 0 0 120 200-194z" horiz-adv-x="900" />
+
+<glyph glyph-name="logout" unicode="" d="M502 0l0 100 98 0 0-100q0-40-29-70t-71-30l-400 0q-40 0-70 30t-30 70l0 700q0 42 30 71t70 29l400 0q42 0 71-29t29-71l0-150-98 0 0 150-402 0 0-700 402 0z m398 326l-198-196 0 120-450 0 0 150 450 0 0 120z" horiz-adv-x="900" />
+
+<glyph glyph-name="mic" unicode="" d="M620 488q20 0 20-20l0-138q0-92-69-164t-201-84l0-132 130 0q20 0 20-20l0-60q0-20-20-20l-360 0q-20 0-20 20l0 60q0 20 20 20l130 0 0 132q-132 12-201 84t-69 164l0 138q0 20 20 20l30 0q20 0 20-20l0-138q0-66 59-123t191-57 191 57 59 123l0 138q0 20 20 20l30 0z m-300-238q-80 0-115 25t-35 55l0 158 300 0 0-158q0-30-35-55t-115-25z m150 520l0-212-300 0 0 212q0 30 35 55t115 25 115-25 35-55z" horiz-adv-x="640" />
+
+<glyph glyph-name="mute" unicode="" d="M868 778q16-16 16-36t-16-36l-782-782q-18-14-34-14-18 0-36 14-16 14-16 36t16 36l782 782q34 32 70 0z m-216-386l50 50q74-92 101-172t-7-116q-24-24-75-57t-131-71-161-45-165 23l278 276q44-32 88-54t67-25 33 1q6 10 2 34t-26 68-54 88z m-276 62l-270-270q-40 132 28 283t132 215q34 32 105 11t159-85l-52-50q-58 38-105 53t-57 5q-4-8-2-28t19-58 43-76z" horiz-adv-x="884" />
+
+<glyph glyph-name="sound" unicode="" d="M176 588q42 42 149-5t217-157 157-217 5-149q-28-28-92-67t-156-78-194-29-176 84-84 176 29 194 78 156 67 92z m464-480q8 10-3 49t-49 101-96 118q-56 58-118 96t-101 49-49 3q-8-10 3-49t49-101 94-120q58-56 120-94t101-49 49-3z m6 394q-18 0-34 16-16 14-16 35t16 35l94 96q36 32 72 0 32-36 0-72l-96-94q-16-16-36-16z m-180 124q-18 10-23 30t5 38l54 96q26 44 68 20 18-10 23-30t-5-38l-54-96q-14-26-42-26-14 0-26 6z m438-150q10-18 4-38t-24-30l-96-54q-16-8-24-8-28 0-44 26-10 18-4 38t24 30l96 54q18 10 38 5t30-23z" horiz-adv-x="910" />
+
+<glyph glyph-name="volume" unicode="" d="M896 180q0-34-24-57t-56-23l-780 0q-22 0-31 5t-3 15 24 20l802 452q28 18 48 7t20-45l0-374z" horiz-adv-x="896" />
+
+<glyph glyph-name="clock" unicode="" d="M460 810q190 0 325-135t135-325-135-325-325-135-325 135-135 325 135 325 325 135z m0-820q150 0 255 106t105 254q0 150-105 255t-255 105q-148 0-254-105t-106-255q0-148 106-254t254-106z m36 620l0-244 150-150-50-50-170 170 0 274 70 0z" horiz-adv-x="920" />
+
+<glyph glyph-name="hourglass" unicode="" d="M560 622q0-44-48-96t-97-99-49-77 49-76 97-97 48-97l0-118q0-34-86-73t-194-39-194 39-86 73l0 118q0 46 48 97t97 97 49 76-49 77-97 99-48 96l0 118q0 32 87 71t193 39 193-39 87-71l0-118z m-482 112l-18-14q-4-8 4-14 92-52 216-52 132 0 220 50 14 10-16 30-96 54-202 54-120 0-204-54z m228-384q0 18 4 33t18 33 20 25 31 31 29 28q92 92 92 122l2 50q-100-54-222-54t-222 54l4-50q0-32 90-122 6-6 22-21t23-22l19-19t17-21 11-20 9-23 3-24q0-10-1-19t-6-18-8-16-11-17l-12-15t-15-16-16-15-18-16-17-16q-90-90-90-122l0-66q8 4 66 23t92 43 34 58q0 30 26 30t26-30q0-34 33-58t94-43 67-23l0 66q0 30-92 122-4 4-21 20t-22 21-18 19-18 22-12 20-9 23-2 23z" horiz-adv-x="560" />
+
+<glyph glyph-name="lamp" unicode="" d="M209-110l0 104 282 0 0-104q-70-42-142-40-70-2-140 40z m276 164l-270 0q0 72-36 140t-78 113-74 112-26 139q8 120 94 206t254 86q170 0 255-86t95-206q4-60-16-113t-52-96-65-85-57-96-24-114z m-378 496q-4-4 0-20t2-20 5-19 6-18 8-18 11-19 13-19 14-19 15-21 16-23q88-122 112-212l82 0q24 94 112 212 4 6 25 35t25 36 17 29 16 33 6 28 1 35q-16 196-244 196-226 0-242-196z" horiz-adv-x="700" />
+
+<glyph glyph-name="light-down" unicode="" d="M350 510q68 0 114-47t46-113q0-68-46-114t-114-46q-66 0-113 46t-47 114q0 66 47 113t113 47z m0-264q44 0 73 30t29 74q0 42-29 72t-73 30q-42 0-72-30t-30-72q0-44 30-74t72-30z m-300 144q20 0 35-12t15-28q0-40-50-40t-50 40q0 16 15 28t35 12z m546 204q28-28-8-64-14-14-33-16t-29 10q-12 12-10 31t16 33q36 34 64 6z m54-204q20 0 35-12t15-28q0-40-50-40-48 0-48 40 0 16 14 28t34 12z m-300-290q16 0 28-15t12-35-12-35-28-15-28 15-12 35 12 35 28 15z m-238 62q36 36 64 8t-8-64q-14-14-33-16t-29 8q-30 28 6 64z m-10 430q28 28 64-8 14-14 16-33t-8-29q-30-28-64 6-36 36-8 64z m432-484q-34 36-6 64t64-8q14-14 16-33t-10-29q-30-28-64 6z m-184 492q-16 0-28 15t-12 35 12 35 28 15 28-15 12-35-12-35-28-15z" horiz-adv-x="700" />
+
+<glyph glyph-name="light-up" unicode="" d="M950 390q20 0 35-12t15-28q0-40-50-40l-48 0q-50 0-50 40 0 16 15 28t35 12l48 0z m-450 234q114 0 195-80t81-194q0-116-81-196t-195-80-194 80-80 196q0 114 80 194t194 80z m0-474q82 0 141 58t59 142q0 82-59 141t-141 59-141-59-59-141q0-84 59-142t141-58z m-350 200q0-40-50-40l-50 0q-50 0-50 40 0 16 15 28t35 12l50 0q20 0 35-12t15-28z m350 350q-16 0-28 15t-12 35l0 50q0 20 12 35t28 15 28-15 12-35l0-50q0-20-12-35t-28-15z m0-700q16 0 28-15t12-35l0-50q0-20-12-35t-28-15-28 15-12 35l0 50q0 20 12 35t28 15z m368 660l-34-34q-34-34-64-8-28 28 8 64 4 6 34 36 36 34 64 6t-8-64z m-700-588q14 16 33 18t29-10q12-12 10-31t-16-33l-36-36q-14-14-33-16t-29 10q-30 28 6 64 6 4 36 34z m20 646l36-36q36-36 6-64-10-10-29-8t-33 16q-30 30-36 34-14 14-16 33t10 31q10 12 29 10t33-16z m590-702q-36 36-8 64t64-8l34-34q36-36 8-64t-64 6q-30 30-34 36z" horiz-adv-x="1000" />
+
+<glyph glyph-name="adjust" unicode="" d="M950 390q20 0 35-12t15-28q0-40-50-40l-48 0q-50 0-50 40 0 16 15 28t35 12l48 0z m-450 234q114 0 195-80t81-194q0-116-81-196t-195-80-194 80-80 196q0 114 80 194t194 80z m6-474l0 400q-86 0-146-59t-60-141q0-84 60-142t146-58z m-356 200q0-40-50-40l-50 0q-50 0-50 40 0 16 15 28t35 12l50 0q20 0 35-12t15-28z m350 350q-16 0-28 15t-12 35l0 50q0 20 12 35t28 15 28-15 12-35l0-50q0-20-12-35t-28-15z m0-700q16 0 28-15t12-35l0-50q0-20-12-35t-28-15-28 15-12 35l0 50q0 20 12 35t28 15z m368 660l-34-34q-34-34-64-8-28 28 8 64 4 6 34 36 36 34 64 6t-8-64z m-700-588q14 16 33 18t29-10q12-12 10-31t-16-33l-36-36q-14-14-33-16t-29 10q-30 28 6 64 6 4 36 34z m20 646l36-36q36-36 6-64-10-10-29-8t-33 16q-30 30-36 34-14 14-16 33t10 31q10 12 29 10t33-16z m590-702q-36 36-8 64t64-8l34-34q36-36 8-64t-64 6q-30 30-34 36z" horiz-adv-x="1000" />
+
+<glyph glyph-name="block" unicode="" d="M480 830q200 0 340-140t140-340q0-198-140-339t-340-141q-198 0-339 141t-141 339q0 200 141 340t339 140z m258-220z m-622-260q0-132 82-230l514 514q-100 82-232 82-152 0-258-107t-106-259z m106-258z m258-106q152 0 259 107t107 257q0 130-82 232l-514-514q98-82 230-82z" horiz-adv-x="960" />
+
+<glyph glyph-name="resize-full" unicode="" d="M476 746l316 0 0-316-100 124-146-152-100 100 152 146z m-230-444l100-100-152-146 122-100-316 0 0 316 100-122z" horiz-adv-x="792" />
+
+<glyph glyph-name="resize-small" unicode="" d="M156 146l-106 100 296 0 0-296-100 106-146-156-100 100z m744 554l-154-144 104-100-294 0 0 294 100-104 144 154z" horiz-adv-x="900" />
+
+<glyph glyph-name="popup" unicode="" d="M700 750q42 0 71-29t29-71l0-400q0-40-29-70t-71-30l-400 0q-40 0-70 30t-30 70l0 402q0 40 29 69t71 29l400 0z m0-500l0 400-400 0 0-400 400 0z m-600 100l0-300 300 0 0-100-300 0q-40 0-70 30t-30 70l0 300 100 0z" horiz-adv-x="800" />
+
+<glyph glyph-name="publish" unicode="" d="M900 800q42 0 71-30t29-70l0-600q0-42-29-71t-71-29l-198 0 0 98 200 0 0 462-802 0 0-462 200 0 0-98-200 0q-40 0-70 29t-30 71l0 600q0 40 30 70t70 30l800 0z m-770-168q38 0 38 38 0 16-11 26t-27 10-27-11-11-25q0-16 11-27t27-11z m100 0q38 0 38 38 0 16-11 26t-27 10-27-11-11-25q0-16 11-27t27-11z m672 6l0 62-602 0 0-62 602 0z m-404-198l242-240-150 0 0-300-184 0 0 300-150 0z" horiz-adv-x="1000" />
+
+<glyph glyph-name="window" unicode="" d="M900 750q42 0 71-30t29-70l0-600q0-42-29-71t-71-29l-800 0q-40 0-70 29t-30 71l0 600q0 40 30 70t70 30l800 0z m-670-94q-16 0-27-11t-11-25q0-16 11-27t27-11q38 0 38 38 0 16-11 26t-27 10z m-138-36q0-16 11-27t27-11q38 0 38 38 0 16-11 26t-27 10-27-11-11-25z m810-570l0 460-802 0 0-460 802 0z m0 540l0 60-602 0 0-60 602 0z" horiz-adv-x="1000" />
+
+<glyph glyph-name="arrow-combo" unicode="" d="M230 850l230-364-460 0z m0-1000l-230 366 460 0z" horiz-adv-x="460" />
+
+<glyph glyph-name="down-circled" unicode="" d="M460 810q190 0 325-135t135-325-135-325-325-135-325 135-135 325 135 325 325 135z m0-820q148 0 254 106t106 254q0 150-106 255t-254 105-254-105-106-255q0-148 106-254t254-106z m90 554l0-206 112 0-202-190-202 190 112 0 0 206 180 0z" horiz-adv-x="920" />
+
+<glyph glyph-name="left-circled" unicode="" d="M920 350q0-190-135-325t-325-135-325 135-135 325q0 192 135 326t325 134 325-134 135-326z m-820 0q0-148 106-254t254-106 254 106 106 254q0 150-106 255t-254 105-254-105-106-255z m552-90l-204 0 0-112-190 202 190 204 0-114 204 0 0-180z" horiz-adv-x="920" />
+
+<glyph glyph-name="right-circled" unicode="" d="M0 350q0 190 135 325t325 135 325-135 135-325-135-325-325-135-325 135-135 325z m820 0q0 150-105 255t-255 105q-148 0-254-105t-106-255q0-148 106-254t254-106q150 0 255 106t105 254z m-552 90l204 0 0 114 190-204-190-202 0 112-204 0 0 180z" horiz-adv-x="920" />
+
+<glyph glyph-name="up-circled" unicode="" d="M460-110q-190 0-325 135t-135 325q0 192 135 326t325 134 325-134 135-326q0-190-135-325t-325-135z m0 820q-148 0-254-105t-106-255q0-148 106-254t254-106q150 0 255 106t105 254q0 150-105 255t-255 105z m-90-552l0 204-112 0 202 192 202-192-112 0 0-204-180 0z" horiz-adv-x="920" />
+
+<glyph glyph-name="down-open" unicode="" d="M564 422l-234-224q-18-18-40-18t-40 18l-234 224q-16 16-16 41t16 41q38 38 78 0l196-188 196 188q40 38 78 0 16-16 16-41t-16-41z" horiz-adv-x="580" />
+
+<glyph glyph-name="left-open" unicode="" d="M242 626q14 16 39 16t41-16q38-36 0-80l-186-196 186-194q38-44 0-80-16-16-40-16t-40 16l-226 236q-16 16-16 38 0 24 16 40 206 214 226 236z" horiz-adv-x="341" />
+
+<glyph glyph-name="right-open" unicode="" d="M98 626l226-236q16-16 16-40 0-22-16-38l-226-236q-16-16-40-16t-40 16q-36 36 0 80l186 194-186 196q-36 44 0 80 16 16 41 16t39-16z" horiz-adv-x="340" />
+
+<glyph glyph-name="up-open" unicode="" d="M564 280q16-16 16-41t-16-41q-38-38-78 0l-196 188-196-188q-40-38-78 0-16 16-16 41t16 41l234 224q16 16 40 16t40-16z" horiz-adv-x="580" />
+
+<glyph glyph-name="down-open-mini" unicode="" d="M405 470q22 26 48 0 26-22 0-48l-196-192q-22-22-48 0l-196 192q-26 26 0 48 24 24 50 0l170-156z" horiz-adv-x="466" />
+
+<glyph glyph-name="left-open-mini" unicode="" d="M252 180q26-26 0-48-26-26-48 0l-192 194q-24 24 0 50l192 194q22 26 48 0 26-22 0-48l-156-172z" horiz-adv-x="265" />
+
+<glyph glyph-name="right-open-mini" unicode="" d="M13 180l158 170-158 172q-26 26 0 48 26 26 48 0l192-194q24-26 0-50l-192-194q-22-26-48 0-26 22 0 48z" horiz-adv-x="265" />
+
+<glyph glyph-name="up-open-mini" unicode="" d="M62 230q-26-22-50 0-24 24 0 50l196 190q26 26 48 0l196-190q24-26 0-50-24-22-50 0l-170 158z" horiz-adv-x="464" />
+
+<glyph glyph-name="down-open-big" unicode="" d="M63 570l370-356 372 356q22 26 48 0 26-22 0-48l-396-392q-22-22-48 0l-396 392q-26 26 0 48 24 24 50 0z" horiz-adv-x="866" />
+
+<glyph glyph-name="left-open-big" unicode="" d="M452-20q26-26 0-48-26-26-48 0l-392 394q-24 24 0 50l392 394q22 26 48 0 26-22 0-48l-358-372z" horiz-adv-x="465" />
+
+<glyph glyph-name="right-open-big" unicode="" d="M13-20l358 370-358 372q-26 26 0 48 26 26 48 0l392-394q24-26 0-50l-392-394q-22-26-48 0-26 22 0 48z" horiz-adv-x="465" />
+
+<glyph glyph-name="up-open-big" unicode="" d="M804 130l-372 358-370-358q-26-22-50 0-24 24 0 50l396 390q26 26 48 0l396-390q24-26 0-50-26-22-48 0z" horiz-adv-x="864" />
+
+<glyph glyph-name="down" unicode="" d="M660 366l-330-380-330 380 192 0 0 350 276 0 0-350 192 0z" horiz-adv-x="660" />
+
+<glyph glyph-name="left" unicode="" d="M378 20l-378 330 378 330 0-190 352 0 0-278-352 0 0-192z" horiz-adv-x="730" />
+
+<glyph glyph-name="right" unicode="" d="M350 680l380-330-380-330 0 192-350 0 0 278 350 0 0 190z" horiz-adv-x="730" />
+
+<glyph glyph-name="up" unicode="" d="M660 336l-192 0 0-350-276 0 0 350-192 0 330 380z" horiz-adv-x="660" />
+
+<glyph glyph-name="down-dir" unicode="" d="M460 550l-230-400-230 400 460 0z" horiz-adv-x="460" />
+
+<glyph glyph-name="left-dir" unicode="" d="M400 580l0-460-400 230z" horiz-adv-x="400" />
+
+<glyph glyph-name="right-dir" unicode="" d="M0 580l400-230-400-230 0 460z" horiz-adv-x="400" />
+
+<glyph glyph-name="up-dir" unicode="" d="M0 150l230 400 230-400-460 0z" horiz-adv-x="460" />
+
+<glyph glyph-name="down-bold" unicode="" d="M760 366l-380-380-380 380 192 0 0 350 376 0 0-350 192 0z" horiz-adv-x="760" />
+
+<glyph glyph-name="left-bold" unicode="" d="M378 730l0-190 352 0 0-378-352 0 0-192-378 380z" horiz-adv-x="730" />
+
+<glyph glyph-name="right-bold" unicode="" d="M350 730l380-380-380-380 0 192-350 0 0 378 350 0 0 190z" horiz-adv-x="730" />
+
+<glyph glyph-name="up-bold" unicode="" d="M760 336l-192 0 0-350-376 0 0 350-192 0 380 380z" horiz-adv-x="760" />
+
+<glyph glyph-name="down-thin" unicode="" d="M500 100l-250-240-250 240 162 0 0 740 176 0 0-740 162 0z" horiz-adv-x="500" />
+
+<glyph glyph-name="left-thin" unicode="" d="M240 100l-240 250 240 250 0-160 740 0 0-178-740 0 0-162z" horiz-adv-x="980" />
+
+<glyph glyph-name="right-thin" unicode="" d="M742 100l0 162-742 0 0 178 742 0 0 160 238-250z" horiz-adv-x="980" />
+
+<glyph glyph-name="up-thin" unicode="" d="M500 602l-162 0 0-742-176 0 0 742-162 0 250 238z" horiz-adv-x="500" />
+
+<glyph glyph-name="ccw" unicode="" d="M532 736q170 0 289-120t119-290-119-290-289-120q-142 0-252 88l70 74q84-60 182-60 126 0 216 90t90 218-90 218-216 90q-124 0-214-87t-92-211l142 0-184-204-184 204 124 0q2 166 122 283t286 117z" horiz-adv-x="940" />
+
+<glyph glyph-name="cw" unicode="" d="M408 760q168 0 287-116t123-282l122 0-184-206-184 206 144 0q-4 124-94 210t-214 86q-126 0-216-90t-90-218q0-126 90-216t216-90q104 0 182 60l70-76q-110-88-252-88-168 0-288 120t-120 290 120 290 288 120z" horiz-adv-x="940" />
+
+<glyph glyph-name="arrows-ccw" unicode="" d="M186 140l116 116 0-292-276 16 88 86q-116 122-114 290t120 288q100 100 240 116l4-102q-100-16-172-88-88-88-90-213t84-217z m332 598l276-16-88-86q116-122 114-290t-120-288q-96-98-240-118l-2 104q98 16 170 88 88 88 90 213t-84 217l-114-116z" horiz-adv-x="820" />
+
+<glyph glyph-name="level-down" unicode="" d="M100 200q-42 0-71 30t-29 70l0 350 140 0 0-310 364 0 0 150 240-220-240-220 0 150-404 0z" horiz-adv-x="744" />
+
+<glyph glyph-name="level-up" unicode="" d="M200 350l0-90-200 160 200 170 0-100 550 0q40 0 70-29t30-71l0-280-140 0 0 240-510 0z" horiz-adv-x="850" />
+
+<glyph glyph-name="shuffle" unicode="" d="M754 516q-54 0-105-32t-80-66-83-104q-48-62-75-94t-78-77-107-66-122-21l-104 0 0 140 104 0q54 0 106 32t81 66 83 104q62 82 101 126t116 88 163 44l36 0 0 120 210-180-210-180 0 100-36 0z m-484-88q-74 78-166 78l-104 0 0 140 104 0q140 0 254-108-14-16-37-45t-27-33q-8-12-24-32z m520-242l0 100 210-180-210-180 0 120-36 0q-140 0-260 116 46 58 72 92 0 2 6 9t8 11q84-88 174-88l36 0z" horiz-adv-x="1000" />
+
+<glyph glyph-name="loop" unicode="" d="M800 540q42 0 71-29t29-71l0-290q0-40-29-70t-71-30l-700 0q-40 0-70 30t-30 70l0 290q0 42 30 71t70 29l250 0 0 110 200-180-200-180 0 110-210 0 0-210 620 0 0 210-150 0 0 140 190 0z" horiz-adv-x="900" />
+
+<glyph glyph-name="switch" unicode="" d="M700 592l0-140-500 0 0-90-200 160 200 170 0-100 500 0z m300-420l-200-160 0 90-500 0 0 140 500 0 0 100z" horiz-adv-x="1000" />
+
+<glyph glyph-name="play" unicode="" d="M486 376q14-10 14-26 0-14-14-24l-428-266q-24-16-41-6t-17 40l0 514q0 30 17 40t41-6z" horiz-adv-x="500" />
+
+<glyph glyph-name="stop" unicode="" d="M526 650q74 0 74-64l0-470q0-66-74-66l-450 0q-76 0-76 66l0 470q0 36 18 50t58 14l450 0z" horiz-adv-x="600" />
+
+<glyph glyph-name="pause" unicode="" d="M440 700q90 0 90-64l0-570q0-66-90-66t-90 66l0 570q0 64 90 64z m-350 0q90 0 90-64l0-570q0-66-90-66t-90 66l0 570q0 64 90 64z" horiz-adv-x="530" />
+
+<glyph glyph-name="record" unicode="" d="M350 700q146 0 248-102t102-248q0-144-102-247t-248-103-248 103-102 247q0 146 102 248t248 102z" horiz-adv-x="700" />
+
+<glyph glyph-name="to-end" unicode="" d="M412 374q14-10 14-24 0-12-14-22l-362-228q-22-14-36-5t-14 35l0 442q0 26 14 35t36-5z m114 268q74 0 74-58l0-466q0-58-74-58-76 0-76 58l0 466q0 58 76 58z" horiz-adv-x="600" />
+
+<glyph glyph-name="to-start" unicode="" d="M174 350q0 14 14 24l364 228q20 14 34 5t14-35l0-442q0-26-14-35t-34 5l-364 228q-14 10-14 22z m-174 234q0 58 76 58 74 0 74-58l0-466q0-58-74-58-76 0-76 58l0 466z" horiz-adv-x="600" />
+
+<glyph glyph-name="fast-forward" unicode="" d="M866 374q14-10 14-24t-14-22l-372-248q-22-14-37-6t-15 36l0 482q0 28 15 36t37-6z m-454 0q14-10 14-24t-14-22l-360-248q-20-14-36-6t-16 36l0 482q0 28 16 36t36-6z" horiz-adv-x="880" />
+
+<glyph glyph-name="fast-backward" unicode="" d="M0 350q0 14 14 24l374 248q20 14 36 6t16-36l0-482q0-28-16-36t-36 6l-374 248q-14 8-14 22z m454 0q0 14 14 24l360 248q20 14 36 6t16-36l0-482q0-28-16-36t-36 6l-360 248q-14 8-14 22z" horiz-adv-x="880" />
+
+<glyph glyph-name="progress-0" unicode="" d="M1000 450l0-250q0-42-29-71t-71-29l-800 0q-40 0-70 29t-30 71l0 300q0 40 30 70t70 30l800 0q42 0 71-30t29-70l0-50z m-100-250l0 300-800 0 0-300 800 0z" horiz-adv-x="1000" />
+
+<glyph glyph-name="progress-1" unicode="" d="M1000 450l0-250q0-42-29-71t-71-29l-800 0q-40 0-70 29t-30 71l0 300q0 40 30 70t70 30l800 0q42 0 71-30t29-70l0-50z m-100-250l0 300-800 0 0-300 800 0z m-750 50l0 198 200 0 0-198-200 0z" horiz-adv-x="1000" />
+
+<glyph glyph-name="progress-2" unicode="" d="M1000 450l0-250q0-42-29-71t-71-29l-800 0q-40 0-70 29t-30 71l0 300q0 40 30 70t70 30l800 0q42 0 71-30t29-70l0-50z m-100-250l0 300-800 0 0-300 800 0z m-750 50l0 198 200 0 0-198-200 0z m250 0l0 198 200 0 0-198-200 0z" horiz-adv-x="1000" />
+
+<glyph glyph-name="progress-3" unicode="" d="M1000 450l0-250q0-42-29-71t-71-29l-800 0q-40 0-70 29t-30 71l0 300q0 40 30 70t70 30l800 0q42 0 71-30t29-70l0-50z m-100-250l0 300-800 0 0-300 800 0z m-750 50l0 198 200 0 0-198-200 0z m250 0l0 198 200 0 0-198-200 0z m250 198l200 0 0-198-200 0 0 198z" horiz-adv-x="1000" />
+
+<glyph glyph-name="target" unicode="" d="M430 780q178 0 304-126t126-304-126-304-304-126-304 126-126 304 126 304 304 126z m36-778q124 14 212 102t100 212l-192 0 0 70 192 0q-12 124-100 212t-212 102l0-194-70 0 0 194q-124-14-213-102t-101-212l194 0 0-70-194 0q12-124 101-212t213-102l0 194 70 0 0-194z" horiz-adv-x="860" />
+
+<glyph glyph-name="list" unicode="" d="M100 200q20 0 35-15t15-35-15-35-35-15l-50 0q-20 0-35 15t-15 35 14 35 36 15l50 0z m0 200q20 0 35-15t15-35-15-35-35-15l-50 0q-20 0-35 15t-15 35 14 35 36 15l50 0z m0 200q20 0 35-15t15-35-15-35-35-15l-50 0q-20 0-35 15t-15 35 14 35 36 15l50 0z m200-100q-20 0-35 15t-15 35 15 35 35 15l350 0q22 0 36-15t14-35-15-35-35-15l-350 0z m350-100q22 0 36-15t14-35-15-35-35-15l-350 0q-20 0-35 15t-15 35 15 35 35 15l350 0z m0-200q22 0 36-15t14-35-15-35-35-15l-350 0q-20 0-35 15t-15 35 15 35 35 15l350 0z" horiz-adv-x="700" />
+
+<glyph glyph-name="list-add" unicode="" d="M350 400q22 0 36-15t14-35-15-35-35-15l-300 0q-20 0-35 15t-15 35 14 35 36 15l300 0z m0-200q22 0 36-15t14-35-15-35-35-15l-300 0q-20 0-35 15t-15 35 14 35 36 15l300 0z m620 200q30 0 30-50t-30-50l-170 0 0-170q0-30-50-30t-50 30l0 170-164 0q-30 0-30 50t30 50l164 0 0 170q0 30 50 30t50-30l0-170 170 0z m-620 200q22 0 36-15t14-35-15-35-35-15l-300 0q-20 0-35 15t-15 35 14 35 36 15l300 0z" horiz-adv-x="1000" />
+
+<glyph glyph-name="battery" unicode="" d="M770 350q0-98 36-157t78-59l66 0q-30-46-64-65t-118-19l-500 0q-130 0-199 94t-69 206q0 110 69 205t199 95l500 0q84 0 118-19t64-65l-66 0q-42 0-78-60t-36-156z m-136-90q10 12-8 26-136 134-178 164-16 10-26 13t-18-5-10-12-8-18l-22-56-148 66q-26 12-34 0-8-14 8-28 136-132 180-162 34-16 42-11t18 31l24 58 146-68q26-12 34 2z m310 192q22 0 39-27t17-71-17-72-39-28l-38 0q-22 0-38 28t-16 72 16 71 38 27l38 0z" horiz-adv-x="1000" />
+
+<glyph glyph-name="back-in-time" unicode="" d="M532 760q170 0 289-120t119-290-119-290-289-120q-138 0-252 88l70 76q82-60 182-60 126 0 216 90t90 216q0 128-90 218t-216 90q-124 0-213-86t-93-210l142 0-184-206-184 206 124 0q4 166 123 282t285 116z m-36-190l70 0 0-204 130-130-50-50-150 150 0 234z" horiz-adv-x="940" />
+
+<glyph glyph-name="monitor" unicode="" d="M900 790q42 0 71-30t29-70l0-550q0-42-29-77t-69-43l-218-44 86-38q50-28-20-28l-500 0q-98 0 32 52l36 14-220 44q-40 8-69 43t-29 77l0 550q0 40 30 70t70 30l800 0z m0-646l0 556-800 0 0-556 800 0z" horiz-adv-x="1000" />
+
+<glyph glyph-name="mobile" unicode="" d="M480 840q42 0 71-29t29-71l0-780q0-40-29-70t-71-30l-380 0q-40 0-70 30t-30 70l0 780q0 42 30 71t70 29l380 0z m-190-940q30 0 50 15t20 35q0 22-20 36t-50 14q-28 0-49-15t-21-35 21-35 49-15z m210 150l0 660-420 0 0-660 420 0z" horiz-adv-x="580" />
+
+<glyph glyph-name="cd" unicode="" d="M460 810q190 0 325-135t135-325-135-325-325-135-325 135-135 325 135 325 325 135z m0-610q62 0 106 44t44 106q0 64-43 107t-107 43q-62 0-106-44t-44-106 44-106 106-44z" horiz-adv-x="920" />
+
+<glyph glyph-name="inbox" unicode="" d="M967 398q40-42 30-72l-28-154q-4-20-22-33t-40-13l-816 0q-22 0-40 13t-22 33l-28 154q-8 32 32 72 8 10 36 38t68 67 52 51q22 22 52 22l516 0q30 0 52-22 16-16 53-52t67-65 38-39z m-266-32l178 0-102 114-556 0-102-114 178 0q8 0 12-8l40-100 300 0 40 100q4 8 12 8z" horiz-adv-x="999" />
+
+<glyph glyph-name="install" unicode="" d="M884 306q24-52 14-96l-34-184q-2-20-19-35t-39-15l-712 0q-22 0-39 15t-19 35l-34 184q-8 50 14 96l158 374q22 46 72 46l104 0-20-204-134 0 254-210 256 210-136 0-18 204 102 0q50 0 74-46z m-68-132q2 22-10 38t-34 16l-644 0q-22 0-34-16t-10-38l14-74q2-22 19-37t37-15l592 0q22 0 39 15t19 37z" horiz-adv-x="901" />
+
+<glyph glyph-name="globe" unicode="" d="M480 830q200 0 340-141t140-339q0-200-140-340t-340-140q-198 0-339 140t-141 340q0 198 141 339t339 141z m410-480q0 132-78 239t-202 149q-18-24-16-32 4-38 18-51t30-7l32 12t20 2q22-24 0-47t-45-56-1-77q34-64 96-64 28-2 43-36t17-66q10-80-14-140-22-44 14-76 86 112 86 250z m-466 404q-112-14-199-84t-127-174q6 0 22-2t28-3 26-4 24-8 12-13q4-12-14-45t-18-61q0-30 38-56t38-46q0-28 8-68t8-44q0-12 36-54t52-42q10 0 11 22t-2 54-3 40q0 32 14 74 12 42 59 70t55 46q16 34 9 61t-17 43-34 28-41 17-37 9-22 4q-16 6-42 7t-36-3-27 11-17 29q0 10 15 27t35 37 28 30q8 14 17 21t22 16 27 21q4 4 25 17t27 23z m-72-794q66-20 128-20 128 0 226 68-26 44-118 34-24-2-65-17t-47-17q-74-16-76-16-12-2-26-14t-22-18z" horiz-adv-x="960" />
+
+<glyph glyph-name="cloud" unicode="" d="M760 494q100 0 170-68t70-166-70-166-170-68l-578 0q-74 0-128 52t-54 124q0 74 53 126t129 52q2 0 10-1t10-1q-2 12-2 38 0 108 78 184t188 76q90 0 160-52t94-134q28 4 40 4z" horiz-adv-x="1000" />
+
+<glyph glyph-name="cloud-thunder" unicode="" d="M760 494q100 0 170-68t70-166-70-166-170-68l-578 0q-74 0-128 52t-54 124q0 74 53 126t129 52q2 0 10-1t10-1q-2 12-2 38 0 108 78 184t188 76q90 0 160-52t94-134q28 4 40 4z m-192-216q14 16 14 30 0 20-30 32l-4 0q-26 14-38 16l50 116q6 0 6 20 0 14-8 18-16 10-34-8-2-2-30-32t-61-66-45-52q-12-18-12-30 0-22 30-30l4-2q8-4 38-16l-52-114-2-8q-2-8-2-14 0-10 8-18 18-10 34 10 100 100 134 148z" horiz-adv-x="1000" />
+
+<glyph glyph-name="flash" unicode="" d="M40-100q-4 4 35 94t79 182 38 98-94 45-98 55q-4 12 84 120t180 209 96 97q6-4-74-186t-78-186 95-43 97-57q4-20-174-227t-186-201z" horiz-adv-x="400" />
+
+<glyph glyph-name="moon" unicode="" d="M524 238q106 106 125 252t-53 270q52-26 96-72 128-128 128-309t-128-309-310-128-310 128q-40 40-72 94 124-70 271-51t253 125z" horiz-adv-x="820" />
+
+<glyph glyph-name="flight" unicode="" d="M268-120l124 400-180 0-112-100-100 0 80 170-80 170 100 0 112-100 180 0-124 400 100 0 224-400 274 0t36-4 46-11 36-21 16-34q0-32-38-49t-74-19l-38-2-258 0-224-400-100 0z" horiz-adv-x="1000" />
+
+<glyph glyph-name="paper-plane" unicode="" d="M894 720q14 4 22-3t4-19q-2-6-72-310t-74-316q-2-14-14-19t-24 1l-248 134-30 16 22 26q388 420 394 426 4 4-1 9t-9 1l-550-402-112 44-190 76q-12 4-12 12t12 12q8 4 441 157t441 155z m-582-728l0 204 160-82q-130-116-142-128-18-14-18 6z" horiz-adv-x="921" />
+
+<glyph glyph-name="leaf" unicode="" d="M236 646q182 106 506 66 168-22 196-50 4-6-2-10-76-40-130-109t-78-132-65-132-93-105q-138-96-382-4-66-76-114-176-12-24-47-7t-25 39q44 100 129 193t176 153 176 106 141 68l54 20q-14 0-41-1t-104-14-148-38-162-84-161-141q-22 242 174 358z" horiz-adv-x="940" />
+
+<glyph glyph-name="lifebuoy" unicode="" d="M454 810q190 2 326-130t140-322q2-190-131-327t-323-141q-190-2-327 131t-139 323q-4 190 130 327t324 139z m0-60q-94 0-178-44l62-104q56 28 122 28t122-28l62 104q-88 46-190 44z m-246-522q-28 60-28 122 0 64 28 124l-102 62q-46-88-46-190 2-96 46-180z m258-278q98 4 178 46l-62 104q-60-30-122-30t-122 30l-62-104q86-46 190-46z m-6 180q92 0 156 65t64 155q0 92-64 156t-156 64-156-64-64-156q0-90 64-155t156-65z m252 98l104-62q46 96 44 190 0 96-44 180l-104-62q28-60 28-124 0-62-28-122z" horiz-adv-x="920" />
+
+<glyph glyph-name="mouse" unicode="" d="M551 130q28-80-17-157t-139-111q-94-28-175 9t-103 117l-106 384q-20 68 6 134t84 106l-96 186q-14 34 14 48 30 18 48-14l98-192q80 22 154-16t102-116z m-324 274q28 10 40 36t4 54q-10 28-35 41t-53 5q-28-10-40-36t-4-54q10-28 35-41t53-5z" horiz-adv-x="561" />
+
+<glyph glyph-name="briefcase" unicode="" d="M456 326l0-100-456 0q8 226 10 292 4 108 100 108l160 0q16 26 37 67t23 45q14 26 23 32t37 6l222 0q26 0 36-7t22-31q18-32 60-112l160 0q96 0 100-108l10-292-454 0 0 100-90 0z m-74 354l-28-54 292 0-28 54q-14 26-42 26l-152 0q-28 0-42-26z m164-604l0 100 430 0q-6-88-10-166-6-84-90-84l-750 0q-90 0-90 84l-10 166 430 0 0-100 90 0z" horiz-adv-x="1000" />
+
+<glyph glyph-name="suitcase" unicode="" d="M900 650q42 0 71-30t29-70l0-550q0-42-29-71t-71-29l-50 0 0 750 50 0z m-900-100q0 40 30 70t70 30l50 0 0-750-50 0q-40 0-70 29t-30 71l0 550z m670 204l0-104 110 0 0-750-560 0 0 750 110 0 0 104q98 46 170 46t170-46z m-60-104l0 66q-52 24-110 24-54 0-110-24l0-66 220 0z" horiz-adv-x="1000" />
+
+<glyph glyph-name="dot" unicode="" d="M110 460q46 0 78-32t32-78q0-44-32-77t-78-33-78 33-32 77q0 46 32 78t78 32z" horiz-adv-x="220" />
+
+<glyph glyph-name="dot-2" unicode="" d="M110 460q46 0 78-32t32-78q0-44-32-77t-78-33-78 32-32 78 32 78 78 32z m350 0q46 0 78-32t32-78q0-44-33-77t-77-33q-46 0-78 32t-32 78 32 78 78 32z" horiz-adv-x="570" />
+
+<glyph glyph-name="dot-3" unicode="" d="M110 460q46 0 78-32t32-78q0-44-32-77t-78-33-78 33-32 77q0 46 32 78t78 32z m350 0q46 0 78-32t32-78q0-44-33-77t-77-33-77 33-33 77q0 46 32 78t78 32z m350 0q46 0 78-32t32-78q0-44-32-77t-78-33-78 33-32 77q0 46 32 78t78 32z" horiz-adv-x="920" />
+
+<glyph glyph-name="brush" unicode="" d="M118 170q38 34 85 29t87-45q42-40 48-87t-30-83q-86-84-228-102-84-12-80 14 0 4 6 10 52 60 64 145t48 119z m840 646q26-26-148-248t-292-338q-38-38-124-104-8-6-16 8-18 34-48 64-32 32-66 48-16 6-8 16 64 84 104 122 118 116 344 287t254 145z" horiz-adv-x="962" />
+
+<glyph glyph-name="infinity" unicode="" d="M796 570q84 0 144-53t60-167q0-112-60-166t-144-54q-78 0-157 40t-139 106q-58-66-137-106t-157-40q-86 0-146 54t-60 166q0 114 60 167t146 53q78 0 157-39t137-105q58 66 138 105t158 39z m-590-352q60 0 127 37t113 95q-46 58-112 95t-128 37q-114 0-114-132t114-132z m590 0q114 0 114 132t-114 132q-62 0-129-37t-111-95q44-58 111-95t129-37z" horiz-adv-x="1000" />
+
+<glyph glyph-name="erase" unicode="" d="M902 700q42 0 71-29t29-71l0-500q0-40-29-70t-71-30l-478 0q-38 0-70 28l-340 296q-28 26 0 54l340 296q30 26 70 26l478 0z m-140-550l72 74-128 126 128 128-72 72-128-126-128 126-72-72 128-128-128-126 72-74 128 128z" horiz-adv-x="1002" />
+
+<glyph glyph-name="chart-pie" unicode="" d="M368 770l0-368-368 0q18 146 121 249t247 119z m106 0q156-20 261-139t105-279q0-174-123-298t-299-124q-160 0-278 105t-140 263l424 0q20 0 35 14t15 36l0 422z" horiz-adv-x="840" />
+
+<glyph glyph-name="chart-line" unicode="" d="M34 284q-42 10-32 56 10 42 54 32l98-24-52-80z m890-12q14 12 33 11t31-15q32-32-2-64l-252-226q-12-12-30-12-14 0-28 10l-286 220-54 14 50 80 36-8q12-4 16-8l264-204z m-490 220l-350-550q-12-22-38-22-12 0-24 8-16 10-20 29t6 33l374 588q8 16 28 20 18 6 36-6l246-156 226 326q10 16 28 19t34-9q38-24 12-62l-252-362q-24-36-62-12z" horiz-adv-x="1003" />
+
+<glyph glyph-name="chart-bar" unicode="" d="M750 800q22 0 36-15t14-35l0-850-200 0 0 850q0 50 40 50l110 0z m-300-300q22 0 36-15t14-35l0-550-200 0 0 550q0 50 40 50l110 0z m-300-300q22 0 36-15t14-35l0-250-200 0 0 250q0 50 40 50l110 0z" horiz-adv-x="800" />
+
+<glyph glyph-name="chart-area" unicode="" d="M964 732q16 22 16-4l0-768-964 0q-12 0-15 7t5 17l230 288q20 22 40 2l74-66q10-8 21-7t17 11l158 238q16 26 38 4l112-104q20-20 38 4z" horiz-adv-x="980" />
+
+<glyph glyph-name="tape" unicode="" d="M770 580q96 0 163-67t67-163q0-94-67-162t-163-68l-540 0q-94 0-162 68t-68 162q0 96 68 163t162 67q96 0 163-67t67-163q0-72-40-130l160 0q-40 64-40 130 0 96 68 163t162 67z m-670-230q0-52 38-91t92-39 92 39 38 91q0 54-38 92t-92 38-92-38-38-92z m670-130q54 0 92 39t38 91q0 54-38 92t-92 38-92-38-38-92q0-52 38-91t92-39z" horiz-adv-x="1000" />
+
+<glyph glyph-name="graduation-cap" unicode="" d="M166 238l334-168 276 136q-4-22-8-47t-6-35-11-23-24-23-45-22q-40-18-80-41t-63-34-39-11-40 13-64 37-80 40q-72 32-103 69t-47 109z m810 246q24-14 24-33t-24-33l-78-44-308 102q-22 36-90 36-40 0-67-16t-27-40 27-40 67-16q26 0 36 4l292-68-268-152q-60-32-120 0l-416 234q-24 14-24 33t24 33l416 234q60 32 120 0z m-128-442q18 116 13 182t-19 90l-14 22 70 38q6-8 12-28t17-101-7-197q-4-26-22-30t-35 5-15 19z" horiz-adv-x="1000" />
+
+<glyph glyph-name="language" unicode="" d="M988 306q30-82-10-176t-134-160q-10 0-12 2t-16 19-16 19q-2 6 2 10 86 60 117 152t-11 148q-16-38-39-76t-59-80-86-65-106-15q-52 6-84 41t-32 93q0 84 60 148 50 50 114 66l-2 100q-140-24-146-24-6-2-10 4 0 2-5 29t-5 31q-2 2 1 4t7 2l156 28q0 110-2 114 0 8 8 8 46 0 52 2 10 0 10-8l0-104q158 22 164 22 8 4 10-6 0-2 4-23t4-25q4-10-4-12l-176-30 0-102 12 0q86 0 148-36t86-100z m-370-160q28-6 62 6l-4 214q-34-12-60-40-44-44-44-108 0-66 46-72z m122 28q28 24 58 68t45 79 7 41q-36 18-96 18-2 0-6-1t-6-1z m-448 382q10-28 53-165t83-261 40-126q0-4-4-4l-86 0q-6 0-6 4l-50 166-176 0q-48-164-50-166 0-4-6-4l-86 0q-4 0-4 4 10 18 176 552 2 8 10 8l96 0q10 0 10-8z m-130-316l144 0-72 264z" horiz-adv-x="1001" />
+
+<glyph glyph-name="ticket" unicode="" d="M216 272l326 326 178-178-326-326z m710 244q14-14 14-36t-14-36l-550-550q-16-16-36-16t-36 16l-76 76q12 20 12 48 0 42-29 72t-71 30q-22 0-50-14l-74 76q-16 16-16 36t16 36l550 550q14 14 36 14t36-14l74-76q-12-22-12-48 0-42 30-71t72-29q26 0 48 12z m-532-502l406 406-258 258-408-406z" horiz-adv-x="940" />
+
+<glyph glyph-name="water" unicode="" d="M168 844q10-86 50-155t73-123 33-112q0-66-48-113t-114-47-114 47-48 113q0 58 33 112t73 123 50 155q2 4 7 4t5-4z m616 0q10-86 50-155t73-123 33-112q0-66-48-113t-114-47-114 47-48 113q0 48 21 93t48 78 53 92 34 127q2 4 7 4t5-4z m-320-444q2 4 7 4t5-4q10-86 50-155t73-123 33-112q0-66-48-113t-114-47-114 47-48 113q0 58 33 112t73 123 50 155z" horiz-adv-x="940" />
+
+<glyph glyph-name="droplet" unicode="" d="M290 822q14-118 60-219t92-159 82-136 36-160q0-114-83-196t-197-82-197 82-83 196q0 82 36 160t82 136 92 159 60 219q2 8 11 8t9-8z m-42-392q2 4-2 14-6 6-14 6t-12-6l-40-58q-32-46-48-70t-34-75-18-101q0-24 17-41t41-17q58 0 58 68 0 94 42 246 2 6 5 17t5 17z" horiz-adv-x="560" />
+
+<glyph glyph-name="air" unicode="" d="M85 534q-16-14-36-12t-34 18q-14 14-12 36t18 36q48 40 79 60t89 40 129 4 159-66 155-53 100 16 89 67q38 30 70-6 32-40-6-72-122-110-234-110-100 0-222 70-68 38-119 52t-93 0-65-29-67-51z m736-110q38 32 70-6 32-40-6-72-40-34-65-53t-72-38-97-19q-96 0-222 70-68 38-119 52t-93 0-65-29-67-51q-14-14-35-12t-35 18q-32 40 6 72 38 34 60 50t69 38 88 23 105-15 134-56q68-38 119-52t93 0 65 29 67 51z m0-256q38 32 70-6 14-14 12-36t-18-36q-40-34-65-53t-72-38-97-19q-96 0-222 70-68 38-119 52t-93 1-66-29-66-52q-14-14-35-12t-35 18q-32 40 6 72 38 34 60 50t69 38 88 23 105-15 134-56q68-38 119-52t93 0 65 29 67 51z" horiz-adv-x="905" />
+
+<glyph glyph-name="credit-card" unicode="" d="M900 700q42 0 71-30t29-70l0-500q0-42-29-71t-71-29l-800 0q-40 0-70 29t-30 71l0 500q0 40 30 70t70 30l800 0z m0-600l0 300-800 0 0-300 800 0z m0 450l0 50-800 0 0-50 800 0z m-700-256l30 0 0-30-30 0 0 30z m180-60l30 0 0 30 30 0 0 30 60 0 0-30-30 0 0-30-30 0 0-30-60 0 0 30z m120-30l-30 0 0 30 30 0 0-30z m-150 0l-60 0 0 30 60 0 0-30z m30 60l0-30-30 0 0 60 60 0 0-30-30 0z m-120-30l0-30-60 0 0 30 30 0 0 30 30 0 0 30 60 0 0-30-30 0 0-30-30 0z" horiz-adv-x="1000" />
+
+<glyph glyph-name="floppy" unicode="" d="M658 750l142-156 0-544q0-40-29-70t-71-30l-600 0q-40 0-70 30t-30 70l0 600q0 42 30 71t70 29l558 0z m-58-300l0 250-400 0 0-250q0-20 15-35t35-15l300 0q20 0 35 15t15 35z m-50 200l0-200-100 0 0 200 100 0z" horiz-adv-x="800" />
+
+<glyph glyph-name="clipboard" unicode="" d="M630 750q28 0 49-21t21-49l0-760q0-30-21-50t-49-20l-560 0q-28 0-49 20t-21 50l0 760q0 28 21 49t49 21l60-150 440 0z m-100-100l-360 0-44 100 108 0 36 100 160 0 36-100 110 0z" horiz-adv-x="700" />
+
+<glyph glyph-name="megaphone" unicode="" d="M792 500q58-138 67-258t-39-140q-28-12-61 3t-65 40-99 41-149 8q-28-4-42-19t-6-37q22-56 46-108 4-10 24-22t24-20q14-34-22-46-50-22-102-40-30-10-54 42-32 76-58 132-6 12-34 17t-46 31q-30-10-38-14-34-12-74 12t-54 60q-17 32-5 79t43 61q126 52 213 108t124 103 59 92 25 78 15 59 36 36q48 20 130-70t142-228z m-28-300q8 4 10 38t-11 98-41 128q-28 66-67 123t-67 84-36 23-10-42 10-105 40-133 68-119 68-76 36-19z" horiz-adv-x="860" />
+
+<glyph glyph-name="database" unicode="" d="M686 208q14 20 14-2l0-100q0-74-104-135t-246-61q-140 0-245 61t-105 135l0 100q0 8 4 10t10-8q32-52 125-86t211-34 211 34 125 86z m2 254q8 16 12 0l0-116q0-68-102-114t-248-46q-144 0-247 46t-103 114l0 116q0 20 14 0 30-46 124-75t212-29 212 29 126 75z m-338 328q144 0 247-39t103-93l0-64q0-58-103-99t-247-41-247 41-103 99l0 64q0 54 103 93t247 39z" horiz-adv-x="700" />
+
+<glyph glyph-name="drive" unicode="" d="M884 304q26-44 14-96l-34-184q-2-20-19-35t-39-15l-712 0q-20 0-38 15t-20 35l-34 184q-8 52 14 96l158 374q22 46 72 46l408 0q50 0 74-46z m-68-132q2 22-10 38t-34 16l-644 0q-22 0-34-16t-10-38l14-74q2-22 19-37t39-15l590 0q22 0 39 15t19 37z" horiz-adv-x="902" />
+
+<glyph glyph-name="bucket" unicode="" d="M522 780q174 0 286-49t104-105q-6-38-48-307t-44-281q-2-18-37-44t-107-50-154-24-153 24-106 50-37 44q0 2-4 30 82-6 163 35t139 117q28 0 48 20t20 50q0 28-20 49t-50 21q-28 0-49-21t-21-49q0-20 10-36-48-58-115-89t-131-27q-102 10-157 57t-59 109q-8 122 156 184-18 94-22 138-8 56 104 105t284 49z m-452-470q4-32 37-59t91-39l-32 204q-100-44-96-106z m452 212q82 0 157 18t113 39 38 35-38 35-112 39-158 18q-82 0-156-18t-112-39-38-35 38-35 112-39 156-18z" horiz-adv-x="913" />
+
+<glyph glyph-name="thermometer" unicode="" d="M400 356q64-36 102-98t38-138q0-112-79-191t-191-79-191 79-79 191q0 76 38 138t102 98l0 444q0 50 40 50l170 0q20 0 35-15t15-35l0-444z m-130-406q70 0 120 50t50 120q0 56-32 100t-84 60l0 370-100 0 0-368q-54-16-89-61t-35-101q0-70 50-120t120-50z" horiz-adv-x="540" />
+
+<glyph glyph-name="key" unicode="" d="M774 612q20-116-28-215t-150-117q-66-12-130-2l-118-194-70-12-104-166q-14-28-46-32l-76-14q-12-4-22 4t-12 22l-16 98q-8 30 12 56l258 386q-24 50-38 120-18 106 53 187t185 101q106 20 195-45t107-177z m-126-76q30 44 21 97t-51 83q-42 32-92 22t-80-54q-8-12-12-23t-1-20 5-16 13-17 18-15 22-16 23-17q6-4 22-16t23-16 19-12 19-8 17 1 18 8 16 19z" horiz-adv-x="780" />
+
+<glyph glyph-name="flow-cascade" unicode="" d="M520 120q50 0 85-35t35-85-35-85-85-35q-80 0-110 74l-164 0q-88 0-131 54t-43 118l0 464q-72 34-72 110 0 50 35 85t85 35 85-35 35-85q0-76-72-110l0-114q0-78 78-78l164 0q30 72 110 72 50 0 85-35t35-85-35-85-85-35q-80 0-110 74l-164 0q-42 0-78 16l0-194q0-78 78-78l164 0q30 72 110 72z m0 300q-28 0-49-20t-21-50q0-28 21-48t49-20 49 20 21 48q0 30-21 50t-49 20z m-470 280q0-28 21-48t49-20 49 20 21 48q0 30-21 50t-49 20-49-20-21-50z m470-768q28 0 49 20t21 48q0 30-21 50t-49 20-49-20-21-50q0-28 21-48t49-20z" horiz-adv-x="640" />
+
+<glyph glyph-name="flow-branch" unicode="" d="M640 650q0-80-74-110-6-58-28-101t-61-69-68-38-75-26q-42-14-63-22t-47-24-38-40-16-60q70-30 70-110 0-50-35-85t-85-35-85 35-35 85q0 78 72 112l0 378q-72 34-72 110 0 50 35 85t85 35 85-35 35-85q0-76-72-110l0-204q40 30 138 60 58 18 84 29t51 41 29 76q-70 32-70 108 0 50 35 85t85 35 85-35 35-85z m-588 0q0-28 20-48t48-20 49 20 21 48q0 30-21 50t-49 20-48-20-20-50z m68-668q28 0 49 20t21 48q0 30-21 50t-49 20-48-20-20-50q0-28 20-48t48-20z m400 600q28 0 49 20t21 48q0 30-21 50t-49 20-48-20-20-50q0-28 20-48t48-20z" horiz-adv-x="640" />
+
+<glyph glyph-name="flow-tree" unicode="" d="M868 112q72-34 72-112 0-50-35-85t-85-35-85 35-35 85q0 78 72 112l0 114q0 78-76 78l-100 0q-44 0-78 12l0-204q72-34 72-112 0-50-35-85t-85-35-85 35-35 85q0 78 72 112l0 204q-30-12-76-12l-100 0q-34 0-53-19t-22-33-3-26l0-114q72-34 72-112 0-50-35-85t-85-35-85 35-35 85q0 78 72 112l0 114q0 64 43 118t131 54l100 0q76 0 76 52l0 140q-72 34-72 110 0 50 35 85t85 35 85-35 35-85q0-76-72-110l0-140q0-52 78-52l100 0q86 0 129-54t43-118l0-114z m-678-112q0 30-21 50t-49 20-48-20-20-50q0-28 20-48t48-20 49 20 21 48z m212 700q0-28 20-48t48-20 49 20 21 48q0 30-21 50t-49 20-48-20-20-50z m138-700q0 30-21 50t-49 20-48-20-20-50q0-28 20-48t48-20 49 20 21 48z m280-68q28 0 49 20t21 48q0 30-21 50t-49 20-48-20-20-50q0-28 20-48t48-20z" horiz-adv-x="940" />
+
+<glyph glyph-name="flow-line" unicode="" d="M168 162q72-34 72-112 0-50-35-85t-85-35-85 35-35 85q0 78 72 112l0 378q-72 34-72 110 0 50 35 85t85 35 85-35 35-85q0-76-72-110l0-378z m-116 488q0-28 20-48t48-20 49 20 21 48q0 30-21 50t-49 20-48-20-20-50z m68-668q28 0 49 20t21 48q0 30-21 50t-49 20-48-20-20-50q0-28 20-48t48-20z" horiz-adv-x="240" />
+
+<glyph glyph-name="flow-parallel" unicode="" d="M240 650q0-76-72-110l0-378q72-34 72-112 0-50-35-85t-85-35-85 35-35 85q0 78 72 112l0 378q-72 34-72 110 0 50 35 85t85 35 85-35 35-85z m-50-600q0 30-21 50t-49 20-48-20-20-50q0-28 20-48t48-20 49 20 21 48z m-70 532q28 0 49 20t21 48q0 30-21 50t-49 20-48-20-20-50q0-28 20-48t48-20z m448-420q72-34 72-112 0-50-35-85t-85-35-85 35-35 85q0 78 72 112l0 378q-72 34-72 110 0 50 35 85t85 35 85-35 35-85q0-76-72-110l0-378z m-116 488q0-28 20-48t48-20 49 20 21 48q0 30-21 50t-49 20-48-20-20-50z m68-668q28 0 49 20t21 48q0 30-21 50t-49 20-48-20-20-50q0-28 20-48t48-20z" horiz-adv-x="640" />
+
+<glyph glyph-name="rocket" unicode="" d="M543 236q6-50 8-81t-8-59-13-40-35-32-45-26-70-31-85-37q-32-12-45 4t-3 44l40 110-130 132-106-40q-28-12-43 2t-3 46q12 30 31 79t27 65 22 45 25 36 29 20 41 13l52 0t71-6q10 14 29 39t77 85 118 104 145 75 165 19q8 0 14-6 4-4 6-14 10-82-18-168t-76-151-98-118-86-81z m50 296q22-22 54-22t54 22q22 24 22 56t-22 56q-22 22-54 22t-54-22q-22-24-22-56t22-56z" horiz-adv-x="860" />
+
+<glyph glyph-name="gauge" unicode="" d="M406 178q34 56 214 284t194 220q12-6-96-278t-138-326q-50-86-136-36t-38 136z m94 380q-168 0-284-127t-116-311q0-30 2-46 2-22-12-37t-34-17-36 12-18 34q0 8-1 26t-1 28q0 226 145 382t355 156q72 0 134-18l-70-86q-40 4-64 4z m362-62q138-154 138-376 0-38-2-56-2-20-16-33t-34-13l-4 0q-22 4-35 20t-11 36q2 14 2 46 0 150-80 268 6 14 20 51t22 57z" horiz-adv-x="1000" />
+</font>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/src/mol-plugin/skin/fonts/fontello.ttf b/src/mol-plugin/skin/fonts/fontello.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..39a234370e14bbf53e699758840b2ea5de8ccede
Binary files /dev/null and b/src/mol-plugin/skin/fonts/fontello.ttf differ
diff --git a/src/mol-plugin/skin/fonts/fontello.woff b/src/mol-plugin/skin/fonts/fontello.woff
new file mode 100644
index 0000000000000000000000000000000000000000..674807bae0bb1793ab6274a50737b707d9356fd2
Binary files /dev/null and b/src/mol-plugin/skin/fonts/fontello.woff differ
diff --git a/src/mol-plugin/skin/fonts/fontello.woff2 b/src/mol-plugin/skin/fonts/fontello.woff2
new file mode 100644
index 0000000000000000000000000000000000000000..49eb9640642432843920fcacac3346c95157ba26
Binary files /dev/null and b/src/mol-plugin/skin/fonts/fontello.woff2 differ
diff --git a/src/mol-plugin/skin/light.scss b/src/mol-plugin/skin/light.scss
new file mode 100644
index 0000000000000000000000000000000000000000..f669f4b368b02cbcf03adf7aa95ad8f1649796f1
--- /dev/null
+++ b/src/mol-plugin/skin/light.scss
@@ -0,0 +1,2 @@
+@import 'colors/light';
+@import 'base/base';
\ No newline at end of file