windows control

3 files changed, 56 insertions, 17 deletions

diff --git a/kvmd/web/css/main.css b/kvmd/web/css/main.css
index e3b16b2f..2f77d923 100644
--- a/kvmd/web/css/main.css
+++ b/kvmd/web/css/main.css
@@ -110,10 +110,10 @@ div.ctl-dropdown-content button.row50:not(:first-child), button.row25:not(:first
 div.ctl-dropdown-content hr {
 	margin: 0;
 	display: block;
-	height: 1px;
-	border: 0;
+	height: 0px;
 	padding: 0;
-	background-color: var(--bg-color-dark);
+	border: none;
+	border-top: var(--dark-border);
 }
 div.ctl-dropdown-content-text {
 	margin: 10px 15px 10px 15px;
diff --git a/kvmd/web/css/vars.css b/kvmd/web/css/vars.css
index fde20d36..76d98edd 100644
--- a/kvmd/web/css/vars.css
+++ b/kvmd/web/css/vars.css
@@ -1,7 +1,8 @@
 :root {
-	--dark-border: 1px solid #17191d;
-	--grey-border: 1px solid #202225;
-	--black-border: 1px solid black;
+	--dark-border: thin solid #17191d;
+	--grey-border: thin solid #202225;
+	--normal-border: thin solid #36393f;
+	--black-border: thin solid black;
 
 	--micro-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
 	--small-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
diff --git a/kvmd/web/css/windows.css b/kvmd/web/css/windows.css
index f576c97d..f0d58e04 100644
--- a/kvmd/web/css/windows.css
+++ b/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);
+	overflow: hidden;
+	top: 0;
+	left: 0;
+	position: absolute;
+	width: 100%;
+	padding: 0;
+	height: 20px;
+	border-bottom: var(--normal-border);
+}
+
+div.window-grab {
+	overflow: hidden;
 	font-size: 0.8em;
+	top: 0;
+	left: 0;
+	position: absolute;
+	width: 100%;
+	height: 20px;
 	cursor: move;
-	padding-left: 6px;
-	padding-bottom: 4px;
+	padding: 3px 0 2px 20px;
+	color: var(--fg-color-dark);
 }
 
-div.window hr.window-sep {
-	margin: 0 0 6px 0;
-	display: block;
+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;
-	border-top: 1px solid var(--bg-color-normal);
+	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;
 }