Merge pull request #13648 from nextcloud/darktheme-fix

🕶 Dark theme fixes

4 files changed, 20 insertions, 19 deletions

diff --git a/core/css/header.scss b/core/css/header.scss
index 14f87b26800..4511b44668d 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -694,8 +694,8 @@ nav[role='navigation'] {
 			color: var(--color-primary-text);
 			width: 155px;
 			cursor: text;
-			background-color: var(--color-primary) !important;
-			border: 1px solid var(--color-primary-text-dark) !important;
+			background-color: transparent !important;
+			border: 1px solid var(--color-border) !important;
 		}
 		&:hover, &:focus, &:active {
 			opacity: 1;
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index 96c53d6e9b0..3562372dbc9 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -230,7 +230,7 @@ select {
 	-webkit-appearance: none;
 	-moz-appearance: none;
 	appearance: none;
-	background: url('../img/actions/triangle-s.svg') no-repeat right 4px center;
+	background: var(--icon-triangle-s-000) no-repeat right 4px center;
 	background-color: inherit;
 	outline: 0;
 	padding-right: 24px !important;
@@ -431,7 +431,7 @@ div.select2-drop {
 	}
 	.select2-search input {
 		min-height: auto;
-		background: url('../img/actions/search.svg') no-repeat right center !important;
+		background: var(--icon-search-000) no-repeat right center !important;
 		background-origin: content-box !important;
 	}
 	.select2-results {
@@ -554,7 +554,7 @@ div.select2-container {
 			border-radius: 0;
 			border: none;
 			b {
-				background: url('../img/actions/triangle-s.svg') no-repeat center !important;
+				background: var(--icon-triangle-s-000) no-repeat center !important;
 				opacity: .5;
 			}
 		}
@@ -619,7 +619,7 @@ div.select2-container {
 				color: inherit !important;
 				&::before {
 					content: ' ';
-					background-image: url('../img/actions/checkmark.svg?v=1');
+					background-image: var(--icon-checkmark-000);
 					background-repeat: no-repeat;
 					background-position: center;
 					min-width: 16px;
@@ -809,7 +809,7 @@ div.select2-container {
 				/* selected checkmark icon */
 				&::before {
 					content: ' ';
-					background-image: url('../img/actions/checkmark.svg?v=1');
+					background-image: var(--icon-checkmark-000);
 					background-repeat: no-repeat;
 					background-position: center;
 					min-width: 16px;
@@ -828,7 +828,7 @@ div.select2-container {
 				 */
 				&[data-select='create'] {
 					&::before {
-						background-image: url('../img/actions/add.svg?v=1');
+						background-image: var(--icon-add-000);
 						visibility: visible;
 					}
 				}
diff --git a/core/css/jquery.ocdialog.scss b/core/css/jquery.ocdialog.scss
index f25ca142716..7372f308727 100644
--- a/core/css/jquery.ocdialog.scss
+++ b/core/css/jquery.ocdialog.scss
@@ -51,7 +51,7 @@
 	top: 0;
 	right: 0;
 	padding: 25px;
-	background: url('../img/actions/close.svg') no-repeat center;
+	background: var(--icon-close-000) no-repeat center;
 	opacity: .5;
 
 	&:hover,
diff --git a/core/css/styles.scss b/core/css/styles.scss
index a4610aba567..5f45b29cfde 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -290,7 +290,7 @@ label.infield {
 	position: absolute !important;
 	height: 20px;
 	width: 24px;
-	background-image: url('../img/actions/toggle.svg?v=1');
+	background-image: var(--icon-toggle-000);
 	background-repeat: no-repeat;
 	background-position: center;
 	opacity: .3;
@@ -312,8 +312,9 @@ label.infield {
 #personal-show + label {
 	display: block;
 	right: 0;
-	margin-top: -36px;
-    padding: 6px 4px;
+	margin-top: -41px;
+	margin-right: -6px;
+	padding: 22px;
 }
 
 /* Warnings and errors are the same */
@@ -709,7 +710,7 @@ code {
 		box-sizing: border-box;
 
 		div:first-child a {
-			background-image: url('../img/places/home.svg?v=1');
+			background-image: var(--icon-home-000);
 			background-repeat: no-repeat;
 			background-position: left center;
 		}
@@ -743,11 +744,12 @@ code {
 			opacity: 1;
 		}
 	}
+
 	// keyboard focus
 	#picker-showgridview:focus + #picker-view-toggle {
 		opacity: 1;
 	}
-	
+
 	.actions.creatable {
 		flex-wrap: wrap;
 		padding: 0px;
@@ -761,14 +763,13 @@ code {
 		border-radius: var(--border-radius-pill);
 		position: absolute;
 		top: 4px;
-		
+
 		.icon.icon-add{
 			background-image: var(--icon-add-000);
 			background-size: 16px 16px;
-			max-height:36px;
-			width:36px;
-			margin:0px;
-			
+			max-height: 36px;
+			width: 36px;
+			margin: 0px;
 		}
 
 		a {