Merge pull request #7239 from nextcloud/bugfix/noid/update-theming-of-offline-participants

Theming adjustments to latest master

5 files changed, 5 insertions, 27 deletions

diff --git a/src/components/AvatarWrapper/AvatarWrapper.vue b/src/components/AvatarWrapper/AvatarWrapper.vue
index 9f66580ad..ce9bcf668 100644
--- a/src/components/AvatarWrapper/AvatarWrapper.vue
+++ b/src/components/AvatarWrapper/AvatarWrapper.vue
@@ -139,18 +139,11 @@ export default {
 }
 
 .offline .avatar-wrapper .avatardiv {
-	background: rgba(255, 255, 255, .4) !important;
+	background: rgba(var(--color-main-background-rgb), .4) !important;
 
 	::v-deep > img {
 		opacity: .4 !important;
 	}
 }
 
-body.theme--dark {
-	.offline .avatar-wrapper .avatardiv {
-		background: rgba(0, 0, 0, .4) !important;
-		margin-top: -4px;
-	}
-}
-
 </style>
diff --git a/src/components/ConversationSettings/Matterbridge/BridgePart.vue b/src/components/ConversationSettings/Matterbridge/BridgePart.vue
index 295d7fec6..19dde6197 100644
--- a/src/components/ConversationSettings/Matterbridge/BridgePart.vue
+++ b/src/components/ConversationSettings/Matterbridge/BridgePart.vue
@@ -204,14 +204,10 @@ h3 {
 		margin: 14px 10px 0 14px;
 		width: 16px;
 		height: 16px;
+		filter: var(--background-invert-if-dark);
 	}
 }
 
-body.theme--dark .icon-service {
-	-webkit-filter: invert(1);
-	filter: invert(1);
-}
-
 input {
 	background-size: 16px;
 	background-position: 14px;
diff --git a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
index 76e5e89cb..68ea5e038 100644
--- a/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
+++ b/src/components/ConversationSettings/Matterbridge/MatterbridgeSettings.vue
@@ -630,11 +630,7 @@ export default {
 	width: 16px !important;
 	height: 16px !important;
 	margin-right: 10px;
-}
-
-body.theme--dark .icon-multiselect-service {
-	-webkit-filter: invert(1);
-	filter: invert(1);
+	filter: var(--background-invert-if-dark);
 }
 
 .matterbridge-settings {
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Contact.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Contact.vue
index a894954db..a3d5a17ff 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/Contact.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/Contact.vue
@@ -100,6 +100,7 @@ export default {
 	.contact {
 		display: flex;
 		transition: box-shadow 0.1s ease-in-out;
+		border: 1px solid var(--color-border);
 		box-shadow: 0 0 2px 0 var(--color-box-shadow);
 		border-radius: var(--border-radius-large);
 		font-size: 100%;
@@ -137,11 +138,6 @@ export default {
 				margin-left: 12px;
 			}
 		}
-
-		// Dark theme
-		body.dark &, body.theme--dark & {
-			border: 2px solid var(--color-border);
-		}
 	}
 
 	.icon-contacts {
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue
index 26ec2187c..e77000425 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/DeckCard.vue
@@ -93,6 +93,7 @@ export default {
 .deck-card {
 	display: flex;
 	transition: box-shadow 0.1s ease-in-out;
+	border: 1px solid var(--color-border);
 	box-shadow: 0 0 2px 0 var(--color-box-shadow);
 	border-radius: var(--border-radius-large);
 	font-size: 100%;
@@ -126,10 +127,6 @@ export default {
 		white-space: nowrap;
 		text-overflow: ellipsis;
 	}
-	// Dark theme
-	body.dark &, body.theme--dark & {
-		border: 2px solid var(--color-border);
-	}
 }
 
 .icon-deck {