@deephaven/golden-layout 0.40.2 → 0.40.3

package/scss/goldenlayout-dark-theme.scss

@@ -1,234 +1,150 @@
-@import '@deephaven/components/scss/custom.scss';
-
-$tab-height: 28px;
-$drag-border-width: 5px;
-
-$close-button-height: 8px;
-$tab-font-size: 12px;
-
-$lm-tab-color: $gray-400;
-$lm-tab-hover-color: $gray-300;
-$lm-tab-active-color: $white;
-$lm-tab-icon-color: $gray-200;
-
-//make some subtle tab background colors relative to our defined color
-$lm-tab-active-background: $content-bg;
-$lm-tab-background: darken($lm-tab-active-background, 3.5);
-$lm-header-background: darken($lm-tab-active-background, 5);
-
-$lm-close-button-hover-color: $gray-100;
-$lm-close-button-active-color: $gray-400;
-
-$lm-splitter-hover-color: $gray-400;
-$lm-splitter-active-color: $gray-300;
+// Color variables (appears count calculates by raw css)
+$color0: #000000; // Appears 7 times
+$color1: #222222; // Appears 3 times
+$color2: #eeeeee; // Appears 2 times
+$color3: #dddddd; // Appears 2 times
+
+$color4: #cccccc; // Appears 1 time
+$color5: #444444; // Appears 1 time
+$color6: #999999; // Appears 1 time
+$color7: #111111; // Appears 1 time
+$color8: #452500; // Appears 1 time
+$color9: #555555; // Appears 1 time
+$color10: #ffffff; // Appears 2 time
 
 // ".lm_dragging" is applied to BODY tag during Drag and is also directly applied to the root of the object being dragged
-//is added to the body class, prevents overflow in our app context
-.lm_dragging {
-  overflow: hidden;
-  pointer-events: none;
-
-  // we still need events on our header for scroll while dragging to work
-  .lm_goldenlayout .lm_header {
-    pointer-events: auto;
-
-    // disable other control buttons during drag
-    .lm_controls > li {
-      pointer-events: none;
-
-      &.lm_tabpreviousbutton,
-      &.lm_tabnextbutton {
-        pointer-events: auto;
-      }
-    }
-  }
-}
-
-// disable hover styling during drag (pointer-events still needed)
-body:not(.lm_dragging) .lm_header .lm_tab:not(.lm_active):hover {
-  color: $lm-tab-hover-color;
-}
-
-.lm_header .lm_tab.lm_active .lm_close_tab {
-  background-color: $lm-tab-active-background;
-}
-
-body:not(.lm_dragging) .lm_header .lm_tab:hover .lm_close_tab {
-  background-color: $lm-close-button-active-color;
-}
-
-body:not(.lm_dragging) .lm_header .lm_tab .lm_close_tab:hover {
-  background-color: $lm-close-button-hover-color;
-}
 
 // Entire GoldenLayout Container, if a background is set, it is visible as color of "pane header" and "splitters" (if these latest has opacity very low)
 .lm_goldenlayout {
-  background: $background;
-  position: absolute;
+  background: $color0;
 }
 
 // Single Pane content (area in which final dragged content is contained)
 .lm_content {
-  background: $content-bg;
-  overflow: visible;
+  background: $color1;
 }
 
 // Single Pane content during Drag (style of moving window following mouse)
 .lm_dragProxy {
   .lm_content {
-    height: 100%;
-    width: 100%;
-    box-shadow: $box-shadow;
-  }
-  .lm_header {
-    height: $tab-height;
-    box-shadow: none;
-
-    .lm_tab,
-    .lm_tab.lm_active {
-      border: 0;
-      box-shadow: $box-shadow;
-    }
+    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
   }
 }
 
 // Placeholder Container of target position
 .lm_dropTargetIndicator {
-  @include ants-base($white, $black); //replace with ants
-  box-sizing: border-box;
-  transition: all $transition-mid ease;
+  box-shadow: inset 0 0 30px $color0;
+  outline: 1px dashed $color4;
+  transition: all 200ms ease;
 
   // Inner Placeholder
   .lm_inner {
-    box-sizing: border-box;
-    border: $ant-thickness solid transparent; //offset shadow using a transparent border
-    box-shadow: inset 0 0 1rem 1px rgba(black, 0.45); //true black for this shadow
-    opacity: 1; //set opacity back to 1, default 0.2 and backroudn was solid.
-    background: rgba(
-      $primary,
-      0.1
-    ); //apply scrim as rgba background now instead
+    background: $color0;
+    opacity: 0.2;
   }
 }
 
 // Separator line (handle to change pane size)
 .lm_splitter {
-  background: $lm-splitter-hover-color;
+  background: $color0;
   opacity: 0.001;
-  transition: opacity $transition ease;
+  transition: opacity 200ms ease;
 
   &:hover, // When hovered by mouse...
   &.lm_dragging {
-    background: $lm-splitter-active-color;
+    background: $color5;
     opacity: 1;
   }
 }
 
 // Pane Header (container of Tabs for each pane)
 .lm_header {
-  box-sizing: content-box; // golden-layout sets a js height using a content box model
-  height: $tab-height;
-  padding-top: 0;
-  background: $lm-header-background;
-  box-shadow: inset 0 -1px 0 0 $background;
-  // inset box shadows with 0-blur used to draw borders without impacting spacing or GL size calculations.
-  // golden layout default styling doesnt have the same border styling we want
-  // this trick is used elsewhere in the header as well for the same purpose
+  height: 20px;
   user-select: none;
 
-  .lm_controls {
-    > li {
-      height: 100%;
-      width: 24px;
-    }
-  }
-
   &.lm_selectable {
     cursor: pointer;
   }
 
   // Single Tab container. A single Tab is set for each pane, a group of Tabs are contained in ".lm_header"
   .lm_tab {
-    display: flex;
-    align-items: center;
-    font-family: $font-family-sans-serif;
-    background-color: $lm-tab-background;
-    color: $lm-tab-color;
-    height: $tab-height;
-    font-size: $tab-font-size;
-    min-width: 5rem;
-    margin: 0;
-    padding: 0 $spacer-1 0 $spacer-2;
-    box-shadow: inset -1px -1px 0 0 $background; // acting as bottom and right border
-    transition: color $transition, background-color $transition;
-    max-width: 12rem;
-    white-space: nowrap;
-    overflow: hidden;
-
-    .lm_title {
-      flex-grow: 1;
-      padding-right: $spacer-1;
-      // add equalized spacing for tabs without close buttons
-      // so that when a tab is longer then min-width it still
-      // is balanced with equal padding. Extra padding is then
-      // removed from tabs with close buttons via negative margin
-    }
-
-    .lm_title_before {
-      display: flex;
-      align-items: center;
-    }
+    font-family: Arial, sans-serif;
+    font-size: 12px;
+    color: $color6;
+    background: $color7;
+    box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.3);
+    margin-right: 2px;
+    padding-bottom: 2px;
+    padding-top: 2px;
+
+    /*.lm_title         // Present in LIGHT Theme
+    {
+      padding-top:1px;
+    }*/
 
     // Close Tab Icon
     .lm_close_tab {
-      $lm-close-button-padding: 4px;
-
-      cursor: pointer;
-      position: relative;
-      width: $close-button-height;
-      height: $close-button-height;
-      padding: $lm-close-button-padding;
-      margin-left: -$spacer-1; // undo padding on title
-      //fa-times-light url svg encoded as a background mask
-      background-color: $lm-tab-background; //set the backgroun color to nothing
-      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z'/%3E%3C/svg%3E");
-      mask-position: center center;
-      mask-repeat: no-repeat;
-      mask-size: $close-button-height;
-      opacity: 1;
-      transition: background-color $transition;
+      width: 11px;
+      height: 11px;
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAATElEQVR4nG3OwQ0DMQwDwZGRBtR/j1YJzMc5+IDoR+yCVO29g+pu981MFgqZmRdAfU7+CYWcbF11LwALjpBL0N0qybNx/RPU+gOeiS/+XCRwDlTgkQAAAABJRU5ErkJggg==);
+      background-position: center center;
+      background-repeat: no-repeat;
+      top: 4px;
+      right: 6px;
+      opacity: 0.4;
 
       &:hover {
         opacity: 1;
       }
     }
+
+    // If Tab is active, so if it's in foreground
+    &.lm_active {
+      border-bottom: none;
+      box-shadow: 0 -2px 2px $color0;
+      padding-bottom: 3px;
+
+      .lm_close_tab {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.lm_dragProxy.lm_bottom,
+.lm_stack.lm_bottom {
+  .lm_header .lm_tab {
+    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
+    &.lm_active {
+      box-shadow: 0 2px 2px $color0;
+    }
   }
 }
 
 // If Pane Header (container of Tabs for each pane) is selected (used only if addition of new Contents is made "by selection" and not "by drag")
 .lm_selected {
   .lm_header {
-    background-color: $lm-tab-active-background;
+    background-color: $color8;
   }
 }
 
-.lm_header .lm_tab.lm_active,
-.lm_header .lm_tab.lm_active:hover {
-  height: $tab-height;
-  background-color: $lm-tab-active-background;
-  color: $lm-tab-active-color;
-  padding-bottom: 0;
-  box-shadow: inset -1px 0 0 0 $background; // act as right border only when active
-  // also kills the default shadow, doesn't work well with our design
-  &.lm_focusin {
-    box-shadow: inset 0 1px $primary, inset -1px 0 0 0 $background; // top focus indicator, right border
+.lm_tab {
+  &:hover, // If Tab is hovered
+  &.lm_active // If Tab is active, so if it's in foreground
+  {
+    background: $color1;
+    color: $color3;
   }
 }
 
-.lm_window_blur {
-  .lm_header .lm_tab.lm_active.lm_focusin {
-    box-shadow: none;
-  }
+.lm_header .lm_tabs .lm_tab.lm_keyboard_active {
+  color: $color0;
+  background: $color3;
+}
+
+// Dropdown arrow for additional tabs when too many to be displayed
+.lm_header .lm_controls .lm_tabdropdown:before {
+  color: $color10;
 }
 
 // Pane controls (popout, maximize, minimize, close)
@@ -253,23 +169,7 @@ body:not(.lm_dragging) .lm_header .lm_tab .lm_close_tab:hover {
 
   // Icon to Maximize Pane, so it will fill the entire GoldenLayout Container
   .lm_maximise {
-    background-size: 16px;
-    // vsChromeMaximize
-    background-image: str-replace(
-      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$lm-tab-icon-color}' d='M3 3v10h10V3H3zm9 9H4V4h8v8z'/%3E%3C/svg%3E"),
-      '#',
-      '%23'
-    );
-  }
-
-  .lm_tabdropdown {
-    background-size: 16px;
-    // vsChevronDown
-    background-image: str-replace(
-      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$lm-tab-icon-color}' d='M7.976 10.072l4.357-4.357.62.618L8.284 11h-.618L3 6.333l.619-.618 4.357 4.357z'/%3E%3C/svg%3E"),
-      '#',
-      '%23'
-    );
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==);
   }
 
   // Icon to Close Pane and so remove it from GoldenLayout Container
@@ -278,103 +178,52 @@ body:not(.lm_dragging) .lm_header .lm_tab .lm_close_tab:hover {
   }
 
   .lm_tabnextbutton {
-    background-size: 16px;
-    // vsChevronRight
-    background-image: str-replace(
-      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$lm-tab-icon-color}' d='M10.072 8.024L5.715 3.667l.618-.62L11 7.716v.618L6.333 13l-.618-.619 4.357-4.357z'/%3E%3C/svg%3E"),
-      '#',
-      '%23'
-    );
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAABxJREFUCNdjUGBgEGBg4GBgYGFgYAKTHCARoDgABscAe0vtWukAAAAASUVORK5CYII=);
   }
 
   .lm_tabpreviousbutton {
-    background-size: 16px;
-    // vsChevronLeft
-    background-image: str-replace(
-      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$lm-tab-icon-color}' d='M5.928 7.976l4.357 4.357-.618.62L5 8.284v-.618L9.667 3l.618.619-4.357 4.357z'/%3E%3C/svg%3E"),
-      '#',
-      '%23'
-    );
-  }
-}
-
-.lm_header .lm_tabdropdown_list {
-  z-index: $zindex-dropdown;
-  background: $lm-tab-background;
-  top: 22px;
-  right: 24px;
-  box-shadow: $box-shadow-900;
-  border-radius: $border-radius;
-  max-width: 12rem;
-
-  .lm_tabdropdown_search {
-    padding: $spacer-1;
-    input {
-      padding: $input-padding-y $input-padding-x;
-      line-height: $input-line-height;
-      color: $input-color;
-      background-color: $input-bg;
-      border: $input-border-width solid $input-border-color;
-      border-radius: $border-radius;
-      max-width: 100%;
-
-      &::placeholder {
-        color: $input-placeholder-color;
-        opacity: 1;
-      }
-
-      &:focus {
-        border-color: $input-focus-border-color;
-        box-shadow: $input-btn-focus-box-shadow;
-        outline: 0;
-      }
-    }
-  }
-
-  .lm_tab {
-    background: $lm-tab-background;
-    color: $lm-tab-hover-color;
-    box-shadow: none;
-
-    &.lm_keyboard_active {
-      color: $lm-tab-hover-color;
-      background-color: $primary-dark;
-    }
-
-    &:hover {
-      color: $lm-tab-active-color;
-      background-color: $primary;
-    }
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJAQMAAADaX5RTAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAABxJREFUCNdjYGJgYGFg4GBgEGBgUACTHCARoDgABSMAXe2fzqEAAAAASUVORK5CYII=);
   }
 }
 
 // If a specific Pane is maximized
 .lm_maximised {
-  border: 15px solid rgba($black, 0.85);
-  height: 100% !important;
-  width: 100% !important;
-  .lm_items {
-    box-shadow: $box-shadow-900;
+  // Pane Header (container of Tabs for each pane) can have different style when is Maximized
+  .lm_header {
+    background-color: $color0;
   }
 
   // Pane controls are different in Maximized Mode, especially the old Icon "Maximise" that now has a different meaning, so "Minimize" (even if CSS Class did not change)
   .lm_controls {
     .lm_maximise {
-      opacity: 0.7;
-      // vsChromeMinimize
-      background-image: str-replace(
-        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='#{$gray-100}' d='M14 8v1H3V8h11z'/%3E%3C/svg%3E"),
-        '#',
-        '%23'
-      );
-
-      &:hover {
-        opacity: 1;
-      }
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC);
     }
   }
 }
 
-.lm_tabs:empty + .lm_controls .lm_maximise {
-  display: none;
+// If a specific Pane is Popped Out, so move it to a different Browser Window, Icon to restore original position is:
+.lm_popin {
+  cursor: pointer;
+
+  // Background of Icon
+  .lm_bg {
+    background: $color10;
+    opacity: 0.3;
+  }
+
+  // Icon to Restore original position in Golden Layout Container
+  .lm_icon {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAAWklEQVR4nJWOyw3AIAxDHcQC7L8jbwT3AlJBfNp3SiI7dtRaLSlKKeoA1oEsKSQZCEluexw8Tm3ohk+E7bnOUHUGcNh+HwbBygw4AZ7FN/Lt84p0l+yTflV8AKQyLdcCRJi/AAAAAElFTkSuQmCC);
+    background-position: center center;
+    background-repeat: no-repeat;
+    border-left: 1px solid $color2;
+    border-top: 1px solid $color2;
+    opacity: 0.7;
+  }
+
+  &:hover {
+    .lm_icon {
+      opacity: 1;
+    }
+  }
 }

package/css/GoldenLayout.module.css

@@ -1 +0,0 @@
-.lm_dragging{overflow:hidden;pointer-events:none}.lm_dragging .lm_goldenlayout .lm_header{pointer-events:auto}.lm_dragging .lm_goldenlayout .lm_header .lm_controls>li{pointer-events:none}.lm_dragging .lm_goldenlayout .lm_header .lm_controls>li.lm_tabpreviousbutton,.lm_dragging .lm_goldenlayout .lm_header .lm_controls>li.lm_tabnextbutton{pointer-events:auto}body:not(.lm_dragging) .lm_header .lm_tab:not(.lm_active):hover{color:#c0bfbf}.lm_header .lm_tab.lm_active .lm_close_tab{background-color:#2d2a2e}body:not(.lm_dragging) .lm_header .lm_tab:hover .lm_close_tab{background-color:#929192}body:not(.lm_dragging) .lm_header .lm_tab .lm_close_tab:hover{background-color:#fcfcfa}.lm_goldenlayout{background:#1a171a;position:absolute}.lm_content{background:#2d2a2e;overflow:visible}.lm_dragProxy .lm_content{height:100%;width:100%;box-shadow:0 .1rem 1rem rgba(26,23,26,.45)}.lm_dragProxy .lm_header{height:28px;box-shadow:none}.lm_dragProxy .lm_header .lm_tab,.lm_dragProxy .lm_header .lm_tab.lm_active{border:0;box-shadow:0 .1rem 1rem rgba(26,23,26,.45)}.lm_dropTargetIndicator{background-image:linear-gradient(to right, #1a171a 50%, #f0f0ee 50%),linear-gradient(to right, #1a171a 50%, #f0f0ee 50%),linear-gradient(to bottom, #1a171a 50%, #f0f0ee 50%),linear-gradient(to bottom, #1a171a 50%, #f0f0ee 50%);background-size:8px 1px,8px 1px,1px 8px,1px 8px;background-position:0 top,0 bottom,left 0,right 0;background-repeat:repeat-x,repeat-x,repeat-y,repeat-y;animation:march .5s;animation-timing-function:linear;animation-iteration-count:infinite;box-sizing:border-box;transition:all .2s ease}.lm_dropTargetIndicator .lm_inner{box-sizing:border-box;border:1px solid transparent;box-shadow:inset 0 0 1rem 1px rgba(0,0,0,.45);opacity:1;background:rgba(72,120,234,.1)}.lm_splitter{background:#929192;opacity:.001;transition:opacity .15s ease}.lm_splitter:hover,.lm_splitter.lm_dragging{background:#c0bfbf;opacity:1}.lm_header{box-sizing:content-box;height:28px;padding-top:0;background:#201e21;box-shadow:inset 0 -1px 0 0 #1a171a;user-select:none}.lm_header .lm_controls>li{height:100%;width:24px}.lm_header.lm_selectable{cursor:pointer}.lm_header .lm_tab{display:flex;align-items:center;font-family:"Fira Sans",-apple-system,blinkmacsystemfont,"Segoe UI","Roboto","Helvetica Neue",arial,sans-serif;background-color:#242125;color:#929192;height:28px;font-size:12px;min-width:5rem;margin:0;padding:0 .25rem 0 .5rem;box-shadow:inset -1px -1px 0 0 #1a171a;transition:color .15s,background-color .15s;max-width:12rem;white-space:nowrap;overflow:hidden}.lm_header .lm_tab .lm_title{flex-grow:1;padding-right:.25rem}.lm_header .lm_tab .lm_title_before{display:flex;align-items:center}.lm_header .lm_tab .lm_close_tab{cursor:pointer;position:relative;width:8px;height:8px;padding:4px;margin-left:-0.25rem;background-color:#242125;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z'/%3E%3C/svg%3E");mask-position:center center;mask-repeat:no-repeat;mask-size:8px;opacity:1;transition:background-color .15s}.lm_header .lm_tab .lm_close_tab:hover{opacity:1}.lm_selected .lm_header{background-color:#2d2a2e}.lm_header .lm_tab.lm_active,.lm_header .lm_tab.lm_active:hover{height:28px;background-color:#2d2a2e;color:#f0f0ee;padding-bottom:0;box-shadow:inset -1px 0 0 0 #1a171a}.lm_header .lm_tab.lm_active.lm_focusin,.lm_header .lm_tab.lm_active:hover.lm_focusin{box-shadow:inset 0 1px #4878ea,inset -1px 0 0 0 #1a171a}.lm_window_blur .lm_header .lm_tab.lm_active.lm_focusin{box-shadow:none}.lm_controls>li{position:relative;background-position:center center;background-repeat:no-repeat;opacity:.4;transition:opacity 300ms ease}.lm_controls>li:hover{opacity:1}.lm_controls .lm_popout{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=)}.lm_controls .lm_maximise{background-size:16px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23f0f0ee' d='M3 3v10h10V3H3zm9 9H4V4h8v8z'/%3E%3C/svg%3E")}.lm_controls .lm_tabdropdown{background-size:16px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23f0f0ee' d='M7.976 10.072l4.357-4.357.62.618L8.284 11h-.618L3 6.333l.619-.618 4.357 4.357z'/%3E%3C/svg%3E")}.lm_controls .lm_close{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=)}.lm_controls .lm_tabnextbutton{background-size:16px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23f0f0ee' d='M10.072 8.024L5.715 3.667l.618-.62L11 7.716v.618L6.333 13l-.618-.619 4.357-4.357z'/%3E%3C/svg%3E")}.lm_controls .lm_tabpreviousbutton{background-size:16px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23f0f0ee' d='M5.928 7.976l4.357 4.357-.618.62L5 8.284v-.618L9.667 3l.618.619-4.357 4.357z'/%3E%3C/svg%3E")}.lm_header .lm_tabdropdown_list{z-index:1000;background:#242125;top:22px;right:24px;box-shadow:0 .1rem 1rem rgba(0,0,0,.45);border-radius:4px;max-width:12rem}.lm_header .lm_tabdropdown_list .lm_tabdropdown_search{padding:.25rem}.lm_header .lm_tabdropdown_list .lm_tabdropdown_search input{padding:.375rem .75rem;line-height:1.5;color:#f0f0ee;background-color:#555356;border:1px solid #929192;border-radius:4px;max-width:100%}.lm_header .lm_tabdropdown_list .lm_tabdropdown_search input::placeholder{color:#929192;opacity:1}.lm_header .lm_tabdropdown_list .lm_tabdropdown_search input:focus{border-color:rgba(72,120,234,.85);box-shadow:0 0 0 .2rem rgba(72,120,234,.35);outline:0}.lm_header .lm_tabdropdown_list .lm_tab{background:#242125;color:#c0bfbf;box-shadow:none}.lm_header .lm_tabdropdown_list .lm_tab.lm_keyboard_active{color:#c0bfbf;background-color:#343e5d}.lm_header .lm_tabdropdown_list .lm_tab:hover{color:#f0f0ee;background-color:#4878ea}.lm_maximised{border:15px solid rgba(26,23,26,.85);height:100% !important;width:100% !important}.lm_maximised .lm_items{box-shadow:0 .1rem 1rem rgba(0,0,0,.45)}.lm_maximised .lm_controls .lm_maximise{opacity:.7;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fcfcfa' d='M14 8v1H3V8h11z'/%3E%3C/svg%3E")}.lm_maximised .lm_controls .lm_maximise:hover{opacity:1}.lm_tabs:empty+.lm_controls .lm_maximise{display:none}:export{tab-height:28px;drag-border-width:5px}/*# sourceMappingURL=GoldenLayout.module.css.map */