.......... [ZBX-20428] updated to latest master; no conflicts

5 files changed, 164 insertions, 118 deletions

diff --git a/sass/stylesheets/sass/components/_color-picker.scss b/sass/stylesheets/sass/components/_color-picker.scss
new file mode 100755
index 00000000000..0baf9aa3597
--- /dev/null
+++ b/sass/stylesheets/sass/components/_color-picker.scss
@@ -0,0 +1,98 @@
+.color-picker,
+.color-picker-dialogue {
+	.color-picker-preview {
+		position: relative;
+		background: url($sprite-path) no-repeat -323px -411px;
+		border: 1px solid $form-border-color;
+		color: $font-color;
+		vertical-align: inherit;
+	}
+
+	.use-default {
+		background: none;
+
+		&::after {
+			content: attr(data-use-default);
+			position: absolute;
+			top: 0;
+			right: 0;
+			left: 0;
+			text-align: center;
+		}
+	}
+}
+
+.color-picker {
+	display: inline-block;
+	line-height: 1.2;
+	vertical-align: sub;
+
+	.color-picker-preview {
+		padding: 0;
+		background-position: -321px -409px;
+		width: 24px;
+
+		&:after {
+			line-height: 22px;
+		}
+	}
+
+	input:disabled + button {
+		pointer-events: none;
+		background: $form-disabled-font-color !important;
+		border-color: $form-disabled-font-color;
+	}
+}
+
+.color-picker-dialogue {
+	> div {
+		&:first-of-type {
+			margin-bottom: 5px;
+		}
+
+		&:not(:first-of-type) {
+			button {
+				padding: 0;
+				width: 20px;
+				min-height: 20px;
+				border: 1px solid $ui-bg-color;
+				border-radius: 0;
+				vertical-align: middle;
+				transition: none;
+
+				&:hover,
+				&:focus {
+					border-color: $form-border-focus-color;
+					box-shadow: inset 0 0 0 1px $ui-bg-color;
+				}
+
+				&:active {
+					box-shadow: inset 0 0 0 2px $ui-bg-color;
+				}
+			}
+		}
+	}
+
+	.color-picker-input {
+		position: relative;
+		display: inline-block;
+		margin-right: 3px;
+
+		.color-picker-preview {
+			position: absolute;
+			top: 2px;
+			left: 2px;
+			width: 18px;
+			height: 18px;
+
+			&:after {
+				line-height: 18px;
+			}
+		}
+
+		input {
+			padding-left: 25px;
+		}
+	}
+}
+
diff --git a/sass/stylesheets/sass/components/_tabfilter.scss b/sass/stylesheets/sass/components/_tabfilter.scss
index f4c9abf47c3..8807d133c3b 100644
--- a/sass/stylesheets/sass/components/_tabfilter.scss
+++ b/sass/stylesheets/sass/components/_tabfilter.scss
@@ -31,6 +31,23 @@ $tab-label-counter-bg-color: $form-disabled-bg-color;
 		background-color: $ui-bg-color;
 		padding: 10px 0;
 		margin-bottom: 6px;
+
+		&.tabfilter-collapsed {
+			.tabfilter-tabs-container,
+			.form-buttons {
+				display: none;
+			}
+		}
+	}
+
+	.subfilter-option-grid {
+		grid-template-columns: minmax(75px, max-content) auto;
+		display: grid;
+		margin: 5px 0;
+
+		.subfilter-options {
+			grid-column: 2 / -1;
+		}
 	}
 
 	/* Top navigation labels */
@@ -162,7 +179,7 @@ $tab-label-counter-bg-color: $form-disabled-bg-color;
 			pointer-events: none;
 		}
 
-		.icon-home.tabfilter-item-link[data-counter]::after {
+		.icon-filter.tabfilter-item-link[data-counter]::after {
 			display: none;
 		}
 	}
@@ -226,16 +243,16 @@ $tab-label-counter-bg-color: $form-disabled-bg-color;
 	}
 }
 
-.icon-home::before {
+.icon-filter::before {
 	display: block;
-	width: 22px;
+	width: 24px;
 	height: 24px;
 	content: '';
 	// white icon
-	background: url($sprite-path) no-repeat -433px -510px;
+	background: url($sprite-path) no-repeat -87px -547px;
 }
 
-.selected.expanded .icon-home::before {
+.selected.expanded .icon-filter::before {
 	// grey icon
-	background: url($sprite-path) no-repeat -121px -510px;
+	background-position: -246px -547px;
 }
diff --git a/sass/stylesheets/sass/dark-theme.scss b/sass/stylesheets/sass/dark-theme.scss
index fa41e6d02f7..f8170f785ba 100644
--- a/sass/stylesheets/sass/dark-theme.scss
+++ b/sass/stylesheets/sass/dark-theme.scss
@@ -442,3 +442,8 @@ $toc-title-bg-color: #4f4f4f;
 		content: "";
 	}
 }
+
+.selected.expanded .icon-filter::before {
+	// grey icon
+	background-position: -87px -547px;
+}
diff --git a/sass/stylesheets/sass/hc-dark.scss b/sass/stylesheets/sass/hc-dark.scss
index 08689d0e2f6..0fb08f173f4 100644
--- a/sass/stylesheets/sass/hc-dark.scss
+++ b/sass/stylesheets/sass/hc-dark.scss
@@ -1521,14 +1521,14 @@ td.inactive-bg {
 
 .filter-container.tabfilter-container {
 
-	.selected.expanded .icon-home::before {
+	.selected.expanded .icon-filter::before {
 		// white icon
-		background: url($sprite-path) no-repeat -433px -510px;
+		background: url($sprite-path) no-repeat -87px -547px;
 	}
 
-	.icon-home::before {
+	.icon-filter::before {
 		// black icon
-		background: url($sprite-path) no-repeat -281px -510px;
+		background: url($sprite-path) no-repeat -246px -547px;
 	}
 
 	.tabfilter-item-label {
diff --git a/sass/stylesheets/sass/screen.scss b/sass/stylesheets/sass/screen.scss
index 10ec325f800..1711390ed35 100644
--- a/sass/stylesheets/sass/screen.scss
+++ b/sass/stylesheets/sass/screen.scss
@@ -28,6 +28,7 @@ $browser-sprite-path: '../img/browser-sprite.png?20211222';
 @import "layout/form-grid";
 
 @import "components/buttons";
+@import "components/color-picker";
 @import "components/dashboard/dashboard";
 @import "components/dashboard/widget-item";
 @import "components/diff";
@@ -297,17 +298,26 @@ form {
 	.action-container {
 		display: flex;
 		width: 100%;
+		height: 18px;
+		line-height: 18px;
 
-		.label {
+		.link-action {
+			height: 16px;
+			min-width: 1em;
 			@extend %overflow-ellipsis;
 		}
 
-		.separator {
-			margin-right: 4px;
+		[class*='icon-'] {
+			flex-shrink: 0;
 		}
 
-		[class*='icon-'] {
+		.rel-container {
+			display: flex;
+		}
+
+		.separator {
 			flex-shrink: 0;
+			margin-right: 4px;
 		}
 	}
 
@@ -495,25 +505,6 @@ form {
 				margin-left: 2px;
 			}
 		}
-
-		.action-container {
-			height: 18px;
-			line-height: 18px;
-
-			.rel-container {
-				display: flex;
-			}
-
-			.link-action {
-				height: 16px;
-				min-width: 1em;
-				@extend %overflow-ellipsis;
-			}
-
-			.separator {
-				flex-shrink: 0;
-			}
-		}
 	}
 
 	thead th {
@@ -4119,6 +4110,16 @@ a.link-action {
 	@extend %overflow-ellipsis;
 	border-radius: 2px;
 
+	a.link-action {
+		color: inherit !important;
+		border-bottom: none;
+
+		&:hover {
+			text-decoration: underline;
+			border-bottom: none;
+		}
+	}
+
 	&:last-child {
 		margin: 0;
 	}
@@ -4298,91 +4299,6 @@ td.inactive-bg {
 	}
 }
 
-// Color picker.
-.color-picker {
-	height: 20px;
-	white-space: nowrap;
-
-	div {
-		display: inline-block;
-		width: 18px;
-		height: 18px;
-		border: 1px solid $ui-bg-color;
-
-		&:hover {
-			border-color: $alt-dark-blue;
-			box-shadow: inset 0 0 0 1px $ui-bg-color;
-			cursor: pointer;
-		}
-
-		&:active {
-			box-shadow: inset 0 0 0 2px $ui-bg-color;
-			cursor: pointer;
-		}
-	}
-}
-
-.input-color-picker {
-	display: inline-block;
-	vertical-align: middle;
-
-	div {
-		width: 18px;
-		height: 18px;
-		background: url($sprite-path) no-repeat -323px -411px;
-		border: 1px solid $form-border-color;
-		margin: 1px;
-		cursor: pointer;
-
-		&:focus {
-			border-color: $form-border-focus-color;
-			outline: none;
-		}
-	}
-
-	div.use-default {
-		background: none;
-		position: relative;
-
-		&::after {
-			content: attr(data-use-default);
-			position: absolute;
-			text-align: center;
-			line-height: 18px;
-			right: 0;
-			left: 0;
-		}
-	}
-
-	input:disabled + div {
-		cursor: default;
-		background: $form-disabled-font-color !important;
-		border-color: $form-disabled-font-color;
-	}
-
-	input[type="text"] {
-		padding-left: 25px;
-	}
-}
-
-.color-picker-controls {
-	margin-bottom: 5px;
-
-	.input-color-picker {
-		position: relative;
-		cursor: default;
-		margin-top: -2px;
-
-		div {
-			position: absolute;
-			border-width: 1px;
-			margin: 0px;
-			left: 2px;
-			top: 2px;
-		}
-	}
-}
-
 // Preloader.
 @keyframes is-loading-kf {
 	to {
@@ -4819,6 +4735,7 @@ svg {
 		display: inline-block;
 		margin: 2px 7px 2px 0;
 		white-space: nowrap;
+		vertical-align: middle;
 
 		> div {
 			position: relative;
@@ -4847,6 +4764,15 @@ svg {
 			}
 		}
 	}
+
+	.color-picker {
+		.color-picker-preview {
+			margin: 1px;
+			width: 20px;
+			min-height: 20px;
+			background-position: -323px -411px;
+		}
+	}
 }
 
 .list-accordion-foot {