.windowManager { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; } .window { position: absolute; left: 0px; top: 0px; display: grid; grid-template-rows: auto 1fr; box-shadow: 5px 5px 10px #1a1a1a; opacity: 0.95; } .window, .window .titleBar { border-top-left-radius: 10px; border-top-right-radius: 10px; } .window .titleBar { display: grid; grid-template-columns: 1fr auto; user-select: none; -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; cursor: default; border: 1px solid #959595; border-bottom: none; padding: 4px; padding-left: 7px; background: linear-gradient(to bottom, #525252 0%, #91acbe 100%); } .window .titleBar .title { padding-top: 1px; color: white; font-size: 14px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .window .titleBar .buttons { display: flex; margin-left: 8px; } .window .titleBar .buttons .button { padding: 2px; border: 1px solid #014D8C; border-radius: 5px; color: white; font-weight: bold; } .window .titleBar .buttons .button:hover { background-color: #014D8C; border: 1px solid white; } .window .titleBar .buttons .button.close { font-size: 12px; line-height: 1; } .window .body { position: relative; background-color: #F7F7F0; border: 1px solid gray; border-top: none; } .window .body .content { overflow-x: auto; overflow-y: auto; padding: 7px; /* FIXME: Is this needed here? */ font-size: 13px; } .window .body .resizer { position: absolute; /* FIXME: Make the below values configurable? */ bottom: -6px; right: -6px; width: 12px; height: 12px; cursor: se-resize; } .window.active .titleBar { background: linear-gradient(to bottom, #0057b3 0%, #0099ff 100%); border-color: #6262FF; }