Created
December 12, 2019 13:11
-
-
Save DimitarChristoff/a89fe11953e71f039390831983d944fe to your computer and use it in GitHub Desktop.
OpenFin layouts v2
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .lm_root { | |
| position: relative | |
| } | |
| .lm_row>.lm_item { | |
| float: left | |
| } | |
| .lm_content { | |
| overflow: hidden; | |
| position: relative | |
| } | |
| .lm_dragging, | |
| .lm_dragging * { | |
| cursor: move !important; | |
| user-select: none | |
| } | |
| .lm_maximised { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| z-index: 40 | |
| } | |
| .lm_maximise_placeholder { | |
| display: none | |
| } | |
| .lm_splitter { | |
| position: relative; | |
| z-index: 20 | |
| } | |
| .lm_splitter:hover, | |
| .lm_splitter.lm_dragging { | |
| background: orange | |
| } | |
| .lm_splitter.lm_vertical .lm_drag_handle { | |
| width: 100%; | |
| height: 15px; | |
| position: absolute; | |
| top: -5px; | |
| cursor: ns-resize | |
| } | |
| .lm_splitter.lm_horizontal { | |
| float: left; | |
| height: 100% | |
| } | |
| .lm_splitter.lm_horizontal .lm_drag_handle { | |
| width: 15px; | |
| height: 100%; | |
| position: absolute; | |
| left: -5px; | |
| cursor: ew-resize | |
| } | |
| .lm_header { | |
| overflow: visible; | |
| position: relative; | |
| z-index: 1 | |
| } | |
| .lm_header [class^=lm_] { | |
| box-sizing: content-box !important | |
| } | |
| .lm_header .lm_controls { | |
| position: absolute; | |
| right: 3px | |
| } | |
| .lm_header .lm_controls>li { | |
| cursor: pointer; | |
| float: left; | |
| width: 18px; | |
| height: 18px; | |
| text-align: center | |
| } | |
| .lm_header ul { | |
| margin: 0; | |
| padding: 0; | |
| list-style-type: none | |
| } | |
| .lm_header .lm_tabs { | |
| position: absolute | |
| } | |
| .lm_header .lm_tab { | |
| cursor: pointer; | |
| float: left; | |
| height: 14px; | |
| margin-top: 1px; | |
| padding: 0 10px 5px; | |
| padding-right: 25px; | |
| position: relative | |
| } | |
| .lm_header .lm_tab i { | |
| width: 2px; | |
| height: 19px; | |
| position: absolute | |
| } | |
| .lm_header .lm_tab i.lm_left { | |
| top: 0; | |
| left: -2px | |
| } | |
| .lm_header .lm_tab i.lm_right { | |
| top: 0; | |
| right: -2px | |
| } | |
| .lm_header .lm_tab .lm_title { | |
| display: inline-block; | |
| overflow: hidden; | |
| text-overflow: ellipsis | |
| } | |
| .lm_header .lm_tab .lm_close_tab { | |
| width: 14px; | |
| height: 14px; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| text-align: center | |
| } | |
| .lm_stack.lm_left .lm_header, | |
| .lm_stack.lm_right .lm_header { | |
| height: 100% | |
| } | |
| .lm_dragProxy.lm_left .lm_header, | |
| .lm_dragProxy.lm_right .lm_header, | |
| .lm_stack.lm_left .lm_header, | |
| .lm_stack.lm_right .lm_header { | |
| width: 20px; | |
| float: left; | |
| vertical-align: top | |
| } | |
| .lm_dragProxy.lm_left .lm_header .lm_tabs, | |
| .lm_dragProxy.lm_right .lm_header .lm_tabs, | |
| .lm_stack.lm_left .lm_header .lm_tabs, | |
| .lm_stack.lm_right .lm_header .lm_tabs { | |
| transform-origin: left top; | |
| top: 0; | |
| width: 1000px | |
| } | |
| .lm_dragProxy.lm_left .lm_header .lm_controls, | |
| .lm_dragProxy.lm_right .lm_header .lm_controls, | |
| .lm_stack.lm_left .lm_header .lm_controls, | |
| .lm_stack.lm_right .lm_header .lm_controls { | |
| bottom: 0 | |
| } | |
| .lm_dragProxy.lm_left .lm_items, | |
| .lm_dragProxy.lm_right .lm_items, | |
| .lm_stack.lm_left .lm_items, | |
| .lm_stack.lm_right .lm_items { | |
| float: left | |
| } | |
| .lm_dragProxy.lm_left .lm_header .lm_tabs, | |
| .lm_stack.lm_left .lm_header .lm_tabs { | |
| transform: rotate(-90deg) scaleX(-1); | |
| left: 0 | |
| } | |
| .lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab, | |
| .lm_stack.lm_left .lm_header .lm_tabs .lm_tab { | |
| transform: scaleX(-1); | |
| margin-top: 1px | |
| } | |
| .lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list, | |
| .lm_stack.lm_left .lm_header .lm_tabdropdown_list { | |
| top: initial; | |
| right: initial; | |
| left: 20px | |
| } | |
| .lm_dragProxy.lm_right .lm_content { | |
| float: left | |
| } | |
| .lm_dragProxy.lm_right .lm_header .lm_tabs, | |
| .lm_stack.lm_right .lm_header .lm_tabs { | |
| transform: rotate(90deg) scaleX(1); | |
| left: 100%; | |
| margin-left: 0 | |
| } | |
| .lm_dragProxy.lm_right .lm_header .lm_controls, | |
| .lm_stack.lm_right .lm_header .lm_controls { | |
| left: 3px | |
| } | |
| .lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list, | |
| .lm_stack.lm_right .lm_header .lm_tabdropdown_list { | |
| top: initial; | |
| right: 20px | |
| } | |
| .lm_dragProxy.lm_bottom .lm_header .lm_tab, | |
| .lm_stack.lm_bottom .lm_header .lm_tab { | |
| margin-top: 0; | |
| border-top: none | |
| } | |
| .lm_dragProxy.lm_bottom .lm_header .lm_controls, | |
| .lm_stack.lm_bottom .lm_header .lm_controls { | |
| top: 3px | |
| } | |
| .lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list, | |
| .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list { | |
| top: initial; | |
| bottom: 20px | |
| } | |
| .lm_drop_tab_placeholder { | |
| float: left; | |
| width: 100px; | |
| height: 10px; | |
| visibility: hidden | |
| } | |
| .lm_header .lm_controls .lm_tabdropdown:before { | |
| content: ''; | |
| width: 0; | |
| height: 0; | |
| vertical-align: middle; | |
| display: inline-block; | |
| border-top: 5px dashed; | |
| border-right: 5px solid transparent; | |
| border-left: 5px solid transparent; | |
| color: white | |
| } | |
| .lm_header .lm_tabdropdown_list { | |
| position: absolute; | |
| top: 20px; | |
| right: 0; | |
| z-index: 5; | |
| overflow: hidden | |
| } | |
| .lm_header .lm_tabdropdown_list .lm_tab { | |
| clear: both; | |
| padding-right: 10px; | |
| margin: 0 | |
| } | |
| .lm_header .lm_tabdropdown_list .lm_tab .lm_title { | |
| width: 100px | |
| } | |
| .lm_header .lm_tabdropdown_list .lm_close_tab { | |
| display: none !important | |
| } | |
| .lm_dragProxy { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| z-index: 30 | |
| } | |
| .lm_dragProxy .lm_header { | |
| background: transparent | |
| } | |
| .lm_dragProxy .lm_content { | |
| border-top: none; | |
| overflow: hidden | |
| } | |
| .lm_dropTargetIndicator { | |
| display: none; | |
| position: absolute; | |
| z-index: 20 | |
| } | |
| .lm_dropTargetIndicator .lm_inner { | |
| width: 100%; | |
| height: 100%; | |
| position: relative; | |
| top: 0; | |
| left: 0 | |
| } | |
| .lm_transition_indicator { | |
| display: none; | |
| width: 20px; | |
| height: 20px; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| z-index: 20 | |
| } | |
| .lm_popin { | |
| width: 20px; | |
| height: 20px; | |
| position: absolute; | |
| bottom: 0; | |
| right: 0; | |
| z-index: 9999 | |
| } | |
| .lm_popin>* { | |
| width: 100%; | |
| height: 100%; | |
| position: absolute; | |
| top: 0; | |
| left: 0 | |
| } | |
| .lm_popin>.lm_bg { | |
| z-index: 10 | |
| } | |
| .lm_popin>.lm_icon { | |
| z-index: 20 | |
| } | |
| .lm_goldenlayout { | |
| background: #000000 | |
| } | |
| .lm_content { | |
| background: #222222 | |
| } | |
| .lm_dragProxy .lm_content { | |
| box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9) | |
| } | |
| .lm_dropTargetIndicator { | |
| box-shadow: inset 0 0 30px #000000; | |
| outline: 1px dashed #cccccc; | |
| transition: all 200ms ease | |
| } | |
| .lm_dropTargetIndicator .lm_inner { | |
| background: #000000; | |
| opacity: .2 | |
| } | |
| .lm_splitter { | |
| background: #000000; | |
| opacity: .001; | |
| transition: opacity 200ms ease | |
| } | |
| .lm_splitter:hover, | |
| .lm_splitter.lm_dragging { | |
| background: #444444; | |
| opacity: 1 | |
| } | |
| .lm_header { | |
| height: 20px; | |
| user-select: none | |
| } | |
| .lm_header.lm_selectable { | |
| cursor: pointer | |
| } | |
| .lm_header .lm_tab { | |
| font-family: Arial, sans-serif; | |
| font-size: 12px; | |
| color: #999999; | |
| background: #111111; | |
| box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.3); | |
| margin-right: 2px; | |
| padding-bottom: 2px; | |
| padding-top: 2px | |
| } | |
| .lm_header .lm_tab .lm_close_tab { | |
| 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: .4 | |
| } | |
| .lm_header .lm_tab .lm_close_tab:hover { | |
| opacity: 1 | |
| } | |
| .lm_header .lm_tab.lm_active { | |
| border-bottom: none; | |
| box-shadow: 0 -2px 2px #000000; | |
| padding-bottom: 3px | |
| } | |
| .lm_header .lm_tab.lm_active .lm_close_tab { | |
| opacity: 1 | |
| } | |
| .lm_dragProxy.lm_bottom .lm_header .lm_tab, | |
| .lm_stack.lm_bottom .lm_header .lm_tab { | |
| box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3) | |
| } | |
| .lm_dragProxy.lm_bottom .lm_header .lm_tab.lm_active, | |
| .lm_stack.lm_bottom .lm_header .lm_tab.lm_active { | |
| box-shadow: 0 2px 2px #000000 | |
| } | |
| .lm_selected .lm_header { | |
| background-color: #452500 | |
| } | |
| .lm_tab:hover, | |
| .lm_tab.lm_active { | |
| background: #222222; | |
| color: #dddddd | |
| } | |
| .lm_header .lm_controls .lm_tabdropdown:before { | |
| color: #ffffff | |
| } | |
| .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-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==) | |
| } | |
| .lm_controls .lm_close { | |
| background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=) | |
| } | |
| .lm_maximised .lm_header { | |
| background-color: #000000 | |
| } | |
| .lm_maximised .lm_controls .lm_maximise { | |
| background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC) | |
| } | |
| .lm_transition_indicator { | |
| background-color: #000000; | |
| border: 1px dashed #555555 | |
| } | |
| .lm_popin { | |
| cursor: pointer | |
| } | |
| .lm_popin .lm_bg { | |
| background: #ffffff; | |
| opacity: .3 | |
| } | |
| .lm_popin .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 #eeeeee; | |
| border-top: 1px solid #eeeeee; | |
| opacity: .7 | |
| } | |
| .lm_popin:hover .lm_icon { | |
| opacity: 1 | |
| } | |
| :root { | |
| --white: #ffffff; | |
| --light-gray: #EDF0F7; | |
| --gray: #D4D7DC; | |
| --dark-gray: #575E75; | |
| --title-bar-height: 36px; | |
| --corners-radius: 5px; | |
| --splitter-width: 4px; | |
| --layout-container-padding-top: 8px; | |
| --layout-container-padding-bottom: 5px; | |
| --layout-container-padding-left: 5px; | |
| --layout-container-padding-right: 5px; | |
| --layout-container-from-top: calc(var(--title-bar-height) + var(--layout-container-padding-top)); | |
| --frame-background-color: var(--gray); | |
| --title-bar-background-color: var(--dark-gray); | |
| --tabs-bar-background-color: var(--light-gray); | |
| --tab-background-color: var(--gray); | |
| --tab-background-color-active: var(--white); | |
| --tab-text-color: var(--dark-gray); | |
| --splitter-color: var(--gray); | |
| --color-behind-views: var(--white); | |
| /* only seen if there's a problem with the view */ | |
| --close-button-url: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjEycHgiIGhlaWdodD0iMTJweCIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTkgKDg2MTI3KSAtIGh0dHBzOi8vc2tldGNoLmNvbSAtLT4NCiAgICA8dGl0bGU+V0lORE9XIC8gQ2xvc2VAMng8L3RpdGxlPg0KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPg0KICAgIDxnIGlkPSJXSU5ET1ctLy1DbG9zZSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxsaW5lIHgxPSIxIiB5MT0iMSIgeDI9IjExIiB5Mj0iMTEiIGlkPSJQYXRoIiBzdHJva2U9IiNFNDgzNzIiIHN0cm9rZS13aWR0aD0iMiI+PC9saW5lPg0KICAgICAgICA8bGluZSB4MT0iMTEiIHkxPSIxIiB4Mj0iMSIgeTI9IjExIiBpZD0iUGF0aC0yIiBzdHJva2U9IiNFNDgzNzIiIHN0cm9rZS13aWR0aD0iMiI+PC9saW5lPg0KICAgIDwvZz4NCjwvc3ZnPg=="); | |
| --minimize-button-url: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjEycHgiIGhlaWdodD0iMTJweCIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTkgKDg2MTI3KSAtIGh0dHBzOi8vc2tldGNoLmNvbSAtLT4NCiAgICA8dGl0bGU+V0lORE9XIC8gTWluaW1pemVAMng8L3RpdGxlPg0KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPg0KICAgIDxnIGlkPSJXSU5ET1ctLy1NaW5pbWl6ZSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+DQogICAgICAgIDxsaW5lIHgxPSIxLjgwMzMwMDg2IiB5MT0iMS42NDY0NDY2MSIgeDI9IjEwLjI4ODU4MjIiIHkyPSIxMC4xMzE3MjgiIGlkPSJQYXRoIiBzdHJva2U9IiNGQkMyM0MiIHN0cm9rZS13aWR0aD0iMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNi4xNTY4NTQsIDYuMDAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC02LjE1Njg1NCwgLTYuMDAwMDAwKSAiPjwvbGluZT4NCiAgICA8L2c+DQo8L3N2Zz4="); | |
| --expand-button-url: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjEycHgiIGhlaWdodD0iMTJweCIgdmlld0JveD0iMCAwIDEyIDEyIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTkgKDg2MTI3KSAtIGh0dHBzOi8vc2tldGNoLmNvbSAtLT4NCiAgICA8dGl0bGU+V0lORE9XIC8gRXhwYW5kQDJ4PC90aXRsZT4NCiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4NCiAgICA8ZyBpZD0iV0lORE9XLS8tRXhwYW5kIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4NCiAgICAgICAgPHBvbHlsaW5lIGlkPSJSZWN0YW5nbGUiIHN0cm9rZT0iIzlBREVCRSIgc3Ryb2tlLXdpZHRoPSIyIiBwb2ludHM9IjYgMSAxMSAxIDExIDYiPjwvcG9seWxpbmU+DQogICAgICAgIDxwb2x5bGluZSBpZD0iUmVjdGFuZ2xlLUNvcHkiIHN0cm9rZT0iIzlBREVCRSIgc3Ryb2tlLXdpZHRoPSIyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjUwMDAwMCwgOC41MDAwMDApIHJvdGF0ZSgtMTgwLjAwMDAwMCkgdHJhbnNsYXRlKC0zLjUwMDAwMCwgLTguNTAwMDAwKSAiIHBvaW50cz0iMSA2IDYgNiA2IDExIj48L3BvbHlsaW5lPg0KICAgIDwvZz4NCjwvc3ZnPg=="); | |
| --tab-close-url: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgd2lkdGg9IjEwcHgiIGhlaWdodD0iMTBweCIgdmlld0JveD0iMCAwIDEwIDEwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPg0KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggNTkgKDg2MTI3KSAtIGh0dHBzOi8vc2tldGNoLmNvbSAtLT4NCiAgICA8dGl0bGU+VEFCIC8gQ2xvc2UgLSBsaWdodEAyeDwvdGl0bGU+DQogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+DQogICAgPGcgaWQ9IlRBQi0vLUNsb3NlLS0tbGlnaHQiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+DQogICAgICAgIDxsaW5lIHgxPSIxIiB5MT0iMSIgeDI9IjkiIHkyPSI5IiBpZD0iUGF0aCIgc3Ryb2tlPSIjNTc1RTc1Ij48L2xpbmU+DQogICAgICAgIDxsaW5lIHgxPSI5IiB5MT0iMSIgeDI9IjEiIHkyPSI5IiBpZD0iUGF0aC0yIiBzdHJva2U9IiM1NzVFNzUiPjwvbGluZT4NCiAgICA8L2c+DQo8L3N2Zz4="); | |
| } | |
| body { | |
| min-height: 100%; | |
| width: 100%; | |
| margin: 0; | |
| padding: 0px; | |
| overflow: hidden; | |
| } | |
| html { | |
| height: 100%; | |
| width: 100%; | |
| padding: 0px; | |
| margin: 0; | |
| overflow: hidden; | |
| } | |
| #of-frame-main { | |
| height: 100%; | |
| width: 100%; | |
| padding: 0px; | |
| margin: 0; | |
| position: absolute; | |
| overflow: hidden; | |
| background-color: var(--frame-background-color); | |
| } | |
| #title-bar { | |
| background: var(--title-bar-background-color); | |
| width: 100%; | |
| height: var(--title-bar-height); | |
| display: flex; | |
| } | |
| .title-bar-draggable { | |
| position: relative; | |
| flex-grow: 1; | |
| margin: 7px 0 0 7px; | |
| /* leave grabbable margin for resize */ | |
| -webkit-app-region: drag; | |
| -webkit-user-select: none; | |
| } | |
| div.wrapper_title { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| font-size: 3vw; | |
| opacity: 0.3; | |
| color: var(--tab-background-color); | |
| /* this is the text you see when a view isn't showing */ | |
| } | |
| #buttons-wrapper { | |
| -webkit-app-region: none; | |
| cursor: pointer; | |
| user-select: none; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .button { | |
| -webkit-app-region: no-drag; | |
| margin-right: 16px; | |
| vertical-align: middle; | |
| height: 12px; | |
| width: 12px; | |
| } | |
| .button:hover { | |
| transform: scale(1.2); | |
| } | |
| #layout-container { | |
| height: calc(100% - var(--title-bar-height) - var(--layout-container-padding-top) - var(--layout-container-padding-bottom)); | |
| width: calc(100% - var(--layout-container-padding-left) - var(--layout-container-padding-right)); | |
| padding: var(--layout-container-padding-top) var(--layout-container-padding-right) var(--layout-container-padding-bottom) var(--layout-container-padding-left); | |
| } | |
| .tab-button { | |
| position: relative; | |
| height: 10px; | |
| width: 10px; | |
| right: 0px; | |
| font-weight: bold; | |
| z-index: 9999; | |
| padding: 0px 10px 0px 0; | |
| margin: 0px auto; | |
| display: inline-block; | |
| vertical-align: middle; | |
| } | |
| .tab-button:hover { | |
| transform: scale(1.2); | |
| } | |
| #close-button { | |
| background-image: var(--close-button-url); | |
| background-repeat: no-repeat; | |
| } | |
| #expand-button { | |
| background-image: var(--expand-button-url); | |
| background-repeat: no-repeat; | |
| } | |
| #minimize-button { | |
| background-image: var(--minimize-button-url); | |
| background-repeat: no-repeat; | |
| } | |
| #close-tab-icon { | |
| background-image: var(--tab-close-url); | |
| background-repeat: no-repeat; | |
| } | |
| .lm_goldenlayout { | |
| background-color: var(--frame-background-color); | |
| } | |
| .lm_header { | |
| -webkit-app-region: no-drag; | |
| box-shadow: none; | |
| } | |
| .lm_tabs { | |
| -webkit-app-region: no-drag; | |
| background-color: var(--tabs-bar-background-color); | |
| border-top-left-radius: var(--corners-radius); | |
| border-top-right-radius: var(--corners-radius); | |
| width: 100%; | |
| } | |
| .lm_header .lm_tab { | |
| box-shadow: none !important; | |
| border-top-right-radius: var(--corners-radius); | |
| border-top-left-radius: var(--corners-radius); | |
| background-color: var(--tab-background-color); | |
| color: var(--tab-text-color); | |
| padding-right: 0px; | |
| } | |
| .lm_header .lm_tab .lm_title { | |
| margin-right: 10px; | |
| vertical-align: middle; | |
| padding: 0; | |
| } | |
| .lm_header .lm_tab.lm_active { | |
| background-color: var(--tab-background-color-active); | |
| } | |
| .lm_content { | |
| background-color: var(--color-behind-views); | |
| border-bottom-left-radius: 5px; | |
| border-bottom-right-radius: 5px; | |
| } | |
| .lm_splitter { | |
| background-color: var(--splitter-color); | |
| opacity: 1; | |
| } | |
| .lm_splitter:hover, | |
| .lm_splitter.lm_dragging { | |
| background-color: var(--splitter-color); | |
| opacity: 1; | |
| } | |
| .lm_splitter.lm_dragging { | |
| background-color: var(--splitter-color); | |
| opacity: 1; | |
| } | |
| .lm_dropTargetIndicator .lm_inner { | |
| background: rgb(237, 240, 247); | |
| opacity: .2 | |
| } | |
| .tab-text { | |
| font: ariel; | |
| size: 12px; | |
| font-weight: regular; | |
| line-height: 14; | |
| letter-spacing: -0.06; | |
| } | |
| .lm_header .lm_controls li.lm_tabdropdown:before { | |
| color: var(--tab-text-color) | |
| } | |
| .lm_header .lm_controls .lm_close { | |
| display: none !important | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment