svelte-golden-layout
Version:
GoldenLayout 2.x Wrapper for Svelte
143 lines (142 loc) • 4.51 kB
CSS
.lm_goldenlayout {
background: #f4f4f4;
}
.lm_content {
background: #e1e1e1;
border: 1px solid #cccccc;
}
.lm_dragProxy .lm_content {
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.lm_dropTargetIndicator {
box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.4);
outline: 1px dashed #cccccc;
}
.lm_dropTargetIndicator .lm_inner {
background: #000000;
opacity: 0.1;
}
.lm_splitter {
background: #999999;
opacity: 0.001;
transition: opacity 200ms ease;
}
.lm_splitter:hover,
.lm_splitter.lm_dragging {
background: #bbbbbb;
opacity: 1;
}
.lm_header {
height: 20px;
}
.lm_header .lm_tab {
font-family: Arial, sans-serif;
font-size: 12px;
color: #888888;
background: #fafafa;
margin-right: 2px;
padding-bottom: 4px;
border: 1px solid #cccccc;
border-bottom: none;
}
.lm_header .lm_tab .lm_title {
padding-top: 1px;
}
.lm_header .lm_tab .lm_close_tab {
width: 11px;
height: 11px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVR4nGNgYGD4z4Af/Mdg4FKASwCnDf8JKSBoAtEmEXQTQd8RDCcA6+4Q8OvIgasAAAAASUVORK5CYII=);
background-position: center center;
background-repeat: no-repeat;
top: 4px;
right: 6px;
opacity: 0.4;
}
.lm_header .lm_tab .lm_close_tab:hover {
opacity: 1;
}
.lm_header .lm_tab.lm_active {
border-bottom: none;
box-shadow: 2px -2px 2px -2px rgba(0, 0, 0, 0.2);
padding-bottom: 5px;
}
.lm_header .lm_tab.lm_active .lm_close_tab {
opacity: 1;
}
.lm_dragProxy.lm_right .lm_header .lm_tab.lm_active,
.lm_stack.lm_right .lm_header .lm_tab.lm_active {
box-shadow: 2px -2px 2px -2px rgba(0, 0, 0, 0.2);
}
.lm_dragProxy.lm_bottom .lm_header .lm_tab.lm_active,
.lm_stack.lm_bottom .lm_header .lm_tab.lm_active {
box-shadow: 2px 2px 2px -2px rgba(0, 0, 0, 0.2);
}
.lm_selected .lm_header {
background-color: #452500;
}
.lm_tab:hover,
.lm_tab.lm_active {
background: #e1e1e1;
color: #777777;
}
.lm_header .lm_controls .lm_tabdropdown:before {
color: #000000;
}
.lm_controls > * {
position: relative;
background-position: center center;
background-repeat: no-repeat;
opacity: 0.4;
transition: opacity 300ms ease;
}
.lm_controls > *:hover {
opacity: 1;
}
.lm_controls .lm_popout {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAANUlEQVR4nI2QMQoAMAwCz5L/f9mOzZIaN0E9UDyZhaaQz6atgBHgambEJ5wBKoS0WaIvfT+6K2MIECN19MAAAAAASUVORK5CYII=);
}
.lm_controls .lm_maximise {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAIklEQVR4nGNkYGD4z0AAMBFSAAOETPpPlEmDUREjAxHhBABPvAQLFv3qngAAAABJRU5ErkJggg==);
}
.lm_controls .lm_close {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVR4nGNgYGD4z4Af/Mdg4FKASwCnDf8JKSBoAtEmEXQTQd8RDCcA6+4Q8OvIgasAAAAASUVORK5CYII=);
}
.lm_controls .lm_dock {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAC6SURBVHjavNRRFYIwFAbgLwJRaCBRaCIRbGAEaSARaKANpMF8GedM3BSV4wMvY/u4+++GEIItns8m0/wMoUHA8WsIFS7oMOawtVCPPkGfsFeLa+ywx4RqUeEDVgIuMY8R11zIcZthfpfLYsKQVpCZc1p+oFTRhLbQuVvMrHqbUQmLVXQftT/JoE3GhtKhLCFtRLq5sphNQL0KSpB2sc0zrquuyBLJZFa/hUpI2vZVtx+HErL5b+Qv0H0Axmb86JFNd6MAAAAASUVORK5CYII=);
transform: rotate(-45deg);
transition: transform 300ms;
}
.lm_stack.lm_docked .lm_controls .lm_dock {
transform: rotate(0deg);
}
.lm_stack.lm_docked > .lm_items {
border-color: #bbbbbb;
border-image: linear-gradient(to right, #bbbbbb 1%, #ffffff 100%);
box-shadow: 2px 2px 2px -2px rgba(0, 0, 0, 0.2);
}
.lm_maximised .lm_header {
background-color: #ffffff;
}
.lm_maximised .lm_controls .lm_maximise {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAJklEQVR4nGP8//8/AyHARFDFUFbEwsDAwMDIyIgzHP7//89IlEkApSkHEScJTKoAAAAASUVORK5CYII=);
}
.lm_transition_indicator {
background-color: #000000;
border: 1px dashed #555555;
}
.lm_popin {
cursor: pointer;
}
.lm_popin .lm_bg {
background: #000000;
opacity: 0.7;
}
.lm_popin .lm_icon {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5AIMBA8Y4uozqQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAQ0lEQVQY072OMQ6AMAzEzhH//7I7oKKKoSULXjI5Z5KokgXAbEANoMq8WwGs3FOcvq/Ul5w311zqSNVdefJ+kUjSzhteChsRI/jXegAAAABJRU5ErkJggg==);
background-position: center center;
background-repeat: no-repeat;
opacity: 0.7;
}
.lm_popin:hover .lm_icon {
opacity: 1;
}