2 files changed, 43 insertions, 16 deletions

diff --git a/kvmd/web/css/main.css b/kvmd/web/css/main.css
index 44ca1ac1..4ff39abe 100644
--- a/kvmd/web/css/main.css
+++ b/kvmd/web/css/main.css
@@ -91,7 +91,7 @@ div.ctl-dropdown-content div.buttons-row {
 	padding: 0;
 	font-size: 0;
 }
-div.ctl-dropdown-content button {
+div.ctl-dropdown-content button, select {
 	box-shadow: none;
 	border: none;
 	color: var(--fg-color-normal);
@@ -105,26 +105,48 @@ div.ctl-dropdown-content button {
 	outline: none;
 	cursor: pointer;
 }
-div.ctl-dropdown-content button:enabled:hover {
+div.ctl-dropdown-content button:enabled:hover, select:enabled:hover {
 	color: var(--fg-color-intensive);
 	background-color: var(--bg-color-dark) !important;
 }
-div.ctl-dropdown-content button:disabled {
+div.ctl-dropdown-content button:disabled, select:disabled {
 	color: var(--fg-color-inactive);
 	cursor: default;
 }
-div.ctl-dropdown-content button:active {
+div.ctl-dropdown-content button:active, select:active {
 	color: var(--fg-color-selected) !important;
 }
-div.ctl-dropdown-content button.row50 {
+div.ctl-dropdown-content select {
+	-webkit-appearance: button;
+	-moz-appearance: button;
+	appearance: button;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	user-select: none;
+	background-image: url("../svg/select-arrow-normal.svg");
+	background-position: center right;
+	background-repeat: no-repeat;
+}
+div.ctl-dropdown-content select:enabled:hover {
+	background-image: url("../svg/select-arrow-intensive.svg") !important;
+}
+div.ctl-dropdown-content select:disabled {
+	background-image: url("../svg/select-arrow-inactive.svg") !important;
+}
+div.ctl-dropdown-content select:active {
+	color: var(--fg-color-intensive) !important;
+	background-color: var(--bg-color-dark) !important;
+	background-image: url("../svg/select-arrow-intensive.svg") !important;
+}
+div.ctl-dropdown-content .row50 {
 	display: inline-block;
 	width: 50%;
 }
-div.ctl-dropdown-content button.row25 {
+div.ctl-dropdown-content .row25 {
 	display: inline-block;
 	width: 25%;
 }
-div.ctl-dropdown-content button.row50:not(:first-child), button.row25:not(:first-child) {
+div.ctl-dropdown-content .row50:not(:first-child), .row25:not(:first-child) {
 	border-left: var(--dark-border);
 }
 div.ctl-dropdown-content hr {
diff --git a/kvmd/web/css/stream.css b/kvmd/web/css/stream.css
index c3429630..01fd3cc4 100644
--- a/kvmd/web/css/stream.css
+++ b/kvmd/web/css/stream.css
@@ -35,21 +35,26 @@ div.stream-box-mouse-enabled {
 	cursor: url("../svg/stream-mouse-cursor.svg"), pointer;
 }
 
-div#stream-size {
+div.stream-params {
 	-webkit-user-select: text;
 	-moz-user-select: text;
 	user-select: text;
 	font-size: 12px;
 	margin: 5px 15px 5px 15px;
 }
-div#stream-size span#stream-size-counter {
+
+div.stream-params select#stream-resolution-select {
+	margin: 8px 0 8px 0;
+}
+
+div.stream-params span#stream-size-value {
 }
-div#stream-size div#stream-size-slider-box {
+div.stream-params div#stream-size-slider-box {
 	margin-top: 5px;
 	display: flex;
 }
 @supports (-webkit-appearance:none) {
-	div#stream-size div#stream-size-slider-box input[type=range] {
+	div.stream-params div#stream-size-slider-box input[type=range] {
 		cursor: pointer;
 		outline: none;
 		width: 100%;
@@ -60,7 +65,7 @@ div#stream-size div#stream-size-slider-box {
 	}
 }
 @supports not (-webkit-appearance:none) {
-	div#stream-size div#stream-size-slider-box input[type=range] {
+	div.stream-params div#stream-size-slider-box input[type=range] {
 		cursor: pointer;
 		outline: none;
 		width: 100%;
@@ -69,12 +74,12 @@ div#stream-size div#stream-size-slider-box {
 		margin-right: 0;
 	}
 }
-div#stream-size div#stream-size-slider-box input[type=range]::-webkit-slider-runnable-track {
+div.stream-params div#stream-size-slider-box input[type=range]::-webkit-slider-runnable-track {
 	height: 5px;
 	background: var(--bg-color-light);
 	border-radius: 3px;
 }
-div#stream-size div#stream-size-slider-box input[type=range]::-webkit-slider-thumb {
+div.stream-params div#stream-size-slider-box input[type=range]::-webkit-slider-thumb {
 	border: var(--intensive-border);
 	height: 18px;
 	width: 18px;
@@ -83,12 +88,12 @@ div#stream-size div#stream-size-slider-box input[type=range]::-webkit-slider-thu
 	-webkit-appearance: none;
 	margin-top: -7px;
 }
-div#stream-size div#stream-size-slider-box input[type=range]::-moz-range-track {
+div.stream-params div#stream-size-slider-box input[type=range]::-moz-range-track {
 	height: 5px;
 	background: var(--bg-color-light);
 	border-radius: 3px;
 }
-div#stream-size div#stream-size-slider-box input[type=range]::-moz-range-thumb {
+div.stream-params div#stream-size-slider-box input[type=range]::-moz-range-thumb {
 	border: var(--intensive-border);
 	height: 18px;
 	width: 18px;