..F....... [ZBXNEXT-7469] fixed overrides in svg graph configuration

4 files changed, 119 insertions, 94 deletions

diff --git a/sass/stylesheets/sass/components/dashboard/_widget-svggraph.scss b/sass/stylesheets/sass/components/dashboard/_widget-svggraph.scss
index 8294f5cfeaf..f54300c9cde 100644
--- a/sass/stylesheets/sass/components/dashboard/_widget-svggraph.scss
+++ b/sass/stylesheets/sass/components/dashboard/_widget-svggraph.scss
@@ -182,9 +182,128 @@ form.dashboard-widget-svggraph {
 		}
 	}
 
+	.overrides-list {
+		margin: -5px 0 -5px 15px;
+	}
+
+	.overrides-list-item {
+		position: relative;
+		display: grid;
+		grid-template-columns: 1fr 1fr 24px;
+		grid-gap: 5px 10px;
+		align-items: start;
+		padding: 5px 0;
+
+		&.sortable {
+			overflow: visible;
+			margin-top: -5px;
+			margin-bottom: -5px;
+		}
+
+		.multiselect {
+			width: 100%;
+		}
+
+		.btn-remove {
+			right: 0;
+			top: 0;
+			vertical-align: baseline;
+		}
+	}
+
+	.overrides-foot {
+		padding: 5px 0;
+	}
+
+	.overrides-options-list {
+		grid-column: 1 / -1;
+		padding: 0 24px 8px 0;
+		border-bottom: 1px solid $table-border-color;
+		white-space: normal;
+
+		> li {
+			display: inline-block;
+			margin-right: 5px;
+			margin-bottom: 2px;
+			line-height: 22px;
+			white-space: nowrap;
+
+			.color-picker {
+				line-height: 22px;
+			}
+
+			> div {
+				position: relative;
+				padding: 1px 18px 1px 1px;
+				background-color: $ui-bg-selected-color;
+				border-radius: 2px;
+
+				> span {
+					color: lighten($ui-bg-selected-color, 100%);
+					padding-left: 8px;
+					line-height: 22px;
+				}
+
+				> input[type=text] {
+					border-style: none;
+					line-height: 22px;
+					min-height: 22px;
+					width: 85px;
+				}
+
+				> .subfilter-disable-btn {
+					position: absolute;
+					right: 0;
+					top: 0;
+					min-height: 24px;
+				}
+			}
+		}
+
+		.btn-alt {
+			.plus-icon {
+				margin-right: 0;
+			}
+		}
+
+		.color-picker {
+			.color-picker-preview {
+				margin: 1px;
+				width: 20px;
+				min-height: 20px;
+				background-position: -323px -411px;
+			}
+		}
+	}
+
 	.no-items-message {
 		display: none;
 		line-height: 24px;
 		color: $font-alt-color;
 	}
 }
+
+[theme="hc-dark"] form.dashboard-widget-svggraph {
+	.overrides-options-list {
+		> li > div {
+			border: 1px solid $ui-tab-bg-selected-color;
+			background-color: transparent !important;
+
+			> .subfilter-disable-btn {
+				border: none !important;
+				top: 0;
+			}
+		}
+	}
+}
+
+[theme="hc-light"] form.dashboard-widget-svggraph {
+	.overrides-options-list {
+		> li > div {
+			> .subfilter-disable-btn {
+				border: none !important;
+				top: 0;
+			}
+		}
+	}
+}
diff --git a/sass/stylesheets/sass/hc-dark.scss b/sass/stylesheets/sass/hc-dark.scss
index 57643ffb175..0b7410f1e30 100644
--- a/sass/stylesheets/sass/hc-dark.scss
+++ b/sass/stylesheets/sass/hc-dark.scss
@@ -1482,20 +1482,6 @@ td.inactive-bg {
 	}
 }
 
-// Overrides.
-
-.overrides-options-list {
-	> li > div {
-		border: 1px solid $ui-tab-bg-selected-color;
-		background-color: transparent !important;
-
-		> .subfilter-disable-btn {
-			border: none !important;
-			top: 0;
-		}
-	}
-}
-
 .totals-list {
 	> div {
 		border-top: 1px solid $ui-border-color;
diff --git a/sass/stylesheets/sass/hc-light.scss b/sass/stylesheets/sass/hc-light.scss
index 4160d92ca33..681db702d8c 100644
--- a/sass/stylesheets/sass/hc-light.scss
+++ b/sass/stylesheets/sass/hc-light.scss
@@ -1314,19 +1314,6 @@ td.inactive-bg {
 	}
 }
 
-// Overrides.
-
-.overrides-options-list {
-	> li > div {
-		background-color: $ui-bg-selected-color !important;
-
-		> .subfilter-disable-btn {
-			border: none !important;
-			top: 0;
-		}
-	}
-}
-
 .totals-list {
 	> div {
 		border-top: 1px solid $ui-border-color;
diff --git a/sass/stylesheets/sass/screen.scss b/sass/stylesheets/sass/screen.scss
index 775c4adab2b..213c18a088a 100644
--- a/sass/stylesheets/sass/screen.scss
+++ b/sass/stylesheets/sass/screen.scss
@@ -4712,73 +4712,6 @@ svg {
 	word-break: break-word;
 }
 
-.overrides-list {
-	display: table;
-	width: 90%;
-	max-width: 738px;
-	padding-left: 15px;
-
-	.overrides-list-item {
-		display: table-row;
-
-		.btn-remove {
-			position: relative;
-			right: -73px;
-			top: 3px;
-		}
-	}
-}
-
-.overrides-options-list {
-	white-space: normal;
-	padding: 5px 0 8px;
-	margin-bottom: 10px;
-	border-bottom: 1px solid $table-border-color;
-
-	> li {
-		display: inline-block;
-		margin: 2px 7px 2px 0;
-		white-space: nowrap;
-		vertical-align: middle;
-
-		> div {
-			position: relative;
-			padding: 1px 18px 1px 1px;
-			background-color: $ui-bg-selected-color;
-			border-radius: 2px;
-
-			> span {
-				color: lighten($ui-bg-selected-color, 100%);
-				padding-left: 8px;
-				line-height: 22px;
-			}
-
-			> input[type=text] {
-				border-style: none;
-				line-height: 22px;
-				min-height: 22px;
-				width: 85px;
-			}
-
-			> .subfilter-disable-btn {
-				position: absolute;
-				right: 0;
-				top: 0;
-				min-height: 24px;
-			}
-		}
-	}
-
-	.color-picker {
-		.color-picker-preview {
-			margin: 1px;
-			width: 20px;
-			min-height: 20px;
-			background-position: -323px -411px;
-		}
-	}
-}
-
 .list-accordion-foot {
 	> div {
 		display: table-cell;