windows control

kvmd/web/css/windows.css

@@ -2,6 +2,7 @@ div.window {
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	user-select: none;
+	overflow: hidden;
 	position: absolute;
 	border: var(--dark-border);
 	-webkit-border-radius: 8px;
@@ -11,23 +12,60 @@ div.window {
 	box-shadow: var(--big-shadow);
 	display: inline-block;
 	background-color: var(--bg-color-light);
-	padding: 3px 10px 10px 10px;
-	-webkit-transform: translate(-50%);
-	-moz-transform: translate(-50%);
-	transform: translate(-50%);
+	padding: 30px 9px 9px 9px;
+	-webkit-transform: translate(-50%, -50%);
+	-moz-transform: translate(-50%, -50%);
+	transform: translate(-50%, -50%);
+	top: 50%;
+	left: 50%;
 }
 
 div.window-header {
-	color: var(--fg-color-dark);
-	font-size: 0.8em;
-	cursor: move;
-	padding-left: 6px;
-	padding-bottom: 4px;
+	overflow: hidden;
+	top: 0;
+	left: 0;
+	position: absolute;
+	width: 100%;
+	padding: 0;
+	height: 20px;
+	border-bottom: var(--normal-border);
 }
 
-div.window hr.window-sep {
-	margin: 0 0 6px 0;
-	display: block;
-	border: none;
-	border-top: 1px solid var(--bg-color-normal);
+div.window-grab {
+	overflow: hidden;
+	font-size: 0.8em;
+	top: 0;
+	left: 0;
+	position: absolute;
+	width: 100%;
+	height: 20px;
+	cursor: move;
+	padding: 3px 0 2px 20px;
+	color: var(--fg-color-dark);
+}
+
+button.window-button-close {
+	outline: none;
+	position: absolute;
+	top: -2px;
+	right: -6px;
+	width: 44px;
+	height: 24px;
+	padding-left: 0;
+	color: var(--fg-color-inactive);
+	background-color: var(--bg-color-normal);
+	display: inline-block;
+	border: none;
+	cursor: pointer;
+}
+button.window-button-close:hover {
+	color: var(--fg-color-intensive);
+	background-color: var(--bg-color-dark) !important;
+}
+button.window-button-close:disabled {
+	color: var(--fg-color-inactive);
+	cursor: default;
+}
+button.window-button-close:active {
+	color: var(--fg-color-selected) !important;
 }