jspaint/lib/os-gui/layout.css

100 lines
2.1 KiB
CSS

.menus,
.menu-popup,
.os-window,
.os-window .window-titlebar,
.os-window .window-title {
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.os-window {
contain: layout; /* contain: paint; seems to clip children to the padding-box, including for interaction, not just painting; it breaks being able to grab resize handles over the border */
/* overflow: hidden; is also not usable for the same reason */
/* I might be able to do either with overflow-clip-margin however (@TODO) */
display: flex;
flex-direction: column;
/* will-change: width height left top; */
}
.window-content {
flex: 1;
min-height: 0px;
/* We want to allow scrollbars to be enabled easily, but not enable them,
and we want to clip to the border of the window, without overlapping it at all.
It's already clipped to the outside of .os-window's border, but we want to clip to the inside. */
contain: layout paint;
}
.os-window .window-titlebar,
body > .window-titlebar {
display: flex;
flex-direction: row;
align-items: center;
}
.os-window .window-title-area {
position: relative;
flex: 1;
}
.os-window .window-titlebar .icon {
vertical-align: bottom;
}
/* Fix dragging things (like windows) over iframes */
.dragging iframe {
pointer-events: none;
}
.menus {
display: flex;
flex: 0 0 auto;
}
.menu-container {
position: relative;
}
.menu-popup {
position: absolute;
top: 100%;
left: 0;
z-index: 400000; /* so sub-menu-popups can be visible over the window */
box-sizing: border-box;
}
.menu-popup-table {
border-collapse: collapse;
}
.menu-item {
white-space: nowrap;
}
.menu-hr {
display: block !important;
height: 0;
width: auto;
}
.menu-hotkey {
display: inline !important;
}
.menu-item-checkbox-area,
.menu-item-submenu-area {
min-width: 16px;
}
.menu-item-checkbox-area,
.menu-item-submenu-area {
text-align: center;
}
/* .window-content .button-group {
width: 85px;
}
.window-content .button-group > button {
width: 95%;
padding: 3px 5px;
} */
::before,
::after {
pointer-events: none;
}
/*# sourceMappingURL=layout.css.map */