own modals - first implementation

4 files changed, 43 insertions, 16 deletions

diff --git a/kvmd/web/css/main.css b/kvmd/web/css/main.css
index 289730b1..d8477ed5 100644
--- a/kvmd/web/css/main.css
+++ b/kvmd/web/css/main.css
@@ -70,6 +70,18 @@ select:active {
 	background-image: url("../svg/select-arrow-intensive.svg") !important;
 }
 
+.row50 {
+	display: inline-block;
+	width: 50%;
+}
+.row25 {
+	display: inline-block;
+	width: 25%;
+}
+.row50:not(:first-child), .row25:not(:first-child) {
+	border-left: var(--dark-border);
+}
+
 img#logo {
 	-webkit-filter: invert(0.7);
 	filter: invert(0.7);
@@ -142,17 +154,6 @@ div.ctl-dropdown-content div.buttons-row {
 	padding: 0;
 	font-size: 0;
 }
-div.ctl-dropdown-content .row50 {
-	display: inline-block;
-	width: 50%;
-}
-div.ctl-dropdown-content .row25 {
-	display: inline-block;
-	width: 25%;
-}
-div.ctl-dropdown-content .row50:not(:first-child), .row25:not(:first-child) {
-	border-left: var(--dark-border);
-}
 div.ctl-dropdown-content hr {
 	margin: 0;
 	display: block;
diff --git a/kvmd/web/css/mobile.css b/kvmd/web/css/mobile.css
index f12e1f8c..24bf9ca8 100644
--- a/kvmd/web/css/mobile.css
+++ b/kvmd/web/css/mobile.css
@@ -36,6 +36,10 @@
 		background-color: var(--bg-color-normal) !important;
 	}
 
+	div.modal div.modal-window div.modal-buttons button {
+		height: 50px !important;
+	}
+
 	div#stream-window {
 		padding-top: 9px !important;
 		border-top: 0 !important;
diff --git a/kvmd/web/css/modals.css b/kvmd/web/css/modals.css
index eedb4ef6..441c065f 100644
--- a/kvmd/web/css/modals.css
+++ b/kvmd/web/css/modals.css
@@ -10,16 +10,39 @@ div.modal {
 	z-index: 2147483647;
 }
 
-div.modal-content {
+div.modal div.modal-window {
 	display: table;
 	outline: none;
 	margin: 15% auto;
 	overflow: hidden;
-	border: var(--important-border);
+	border: var(--intensive-border);
 	border-radius: 8px;
 	box-sizing: border-box;
 	box-shadow: var(--big-shadow);
-	white-space: nowrap;
 	background-color: var(--bg-color-light);
-	padding: 9px;
+	padding: 0;
+}
+
+div.modal div.modal-window div.modal-header {
+	text-align: center;
+	font-weight: bold;
+	padding: 3px 9px 3px 9px;
+	border-bottom: var(--normal-border);
+}
+
+div.modal div.modal-window div.modal-content {
+	max-width: 500px;
+	max-height: 500px;
+	padding: 16px 9px 16px 9px;
+}
+
+div.modal div.modal-window div.modal-buttons {
+	border-top: var(--dark-border);
+	margin: 0;
+	padding: 0;
+	font-size: 0;
+}
+
+div.modal div.modal-window div.modal-buttons button {
+	height: 40px;
 }
diff --git a/kvmd/web/css/vars.css b/kvmd/web/css/vars.css
index 35d68c26..d6d5a604 100644
--- a/kvmd/web/css/vars.css
+++ b/kvmd/web/css/vars.css
@@ -28,7 +28,6 @@
 	--black-border: thin solid black;
 	--intensive-border: 2px solid var(--border-color-intensive);
 	--thin-intensive-border: thin solid var(--border-color-intensive);
-	--important-border: 2px solid var(--border-color-important);
 
 	--micro-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
 	--small-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);