Merge pull request #12117 from nextcloud/backport/12107/stable29

[stable29] style: update CSS specificity for fallback mention icons
nextcloud · Apr 16, 2024 · e5c5489 · e5c5489
2 parents 992d891 + 969e38b
commit e5c5489
Showing 1 changed file with 32 additions and 15 deletions.
diff --git a/css/icons.css b/css/icons.css
@@ -92,29 +92,46 @@
  * .app-Talk rules above.
  * "forced-white" needs to be included in the class name as the Avatar does
  * not accept several classes. */
-.user-bubble__avatar .icon-group-forced-white,
-.user-bubble__avatar .icon-user-forced-white,
-.autocomplete-result .icon-group-forced-white,
-.autocomplete-result .icon-user-forced-white,
-.mention-bubble .icon-group-forced-white,
-.mention-bubble .icon-user-forced-white {
-	background-color: var(--color-text-maxcontrast-default) !important;
+.user-bubble__avatar .icon-group-forced-white.avatar-class-icon,
+.user-bubble__avatar .icon-user-forced-white.avatar-class-icon,
+.autocomplete-result .icon-group-forced-white.autocomplete-result__icon--,
+.autocomplete-result .icon-user-forced-white.autocomplete-result__icon--,
+.mention-bubble .icon-group-forced-white.mention-bubble__icon--,
+.mention-bubble .icon-user-forced-white.mention-bubble__icon-- {
+	background-color: #6B6B6B;
 }
 
-body[data-theme-dark] .icon-group-forced-white,
-body[data-theme-dark] .icon-user-forced-white {
-	background-color: #3B3B3B !important;
+/* System default: dark theme */
+@media (prefers-color-scheme: dark) {
+	body[data-theme-default] .user-bubble__avatar .icon-group-forced-white.avatar-class-icon,
+	body[data-theme-default] .user-bubble__avatar .icon-user-forced-white.avatar-class-icon,
+	body[data-theme-default] .autocomplete-result .icon-group-forced-white.autocomplete-result__icon--,
+	body[data-theme-default] .autocomplete-result .icon-user-forced-white.autocomplete-result__icon--,
+	body[data-theme-default] .mention-bubble .icon-group-forced-white.mention-bubble__icon--,
+	body[data-theme-default] .mention-bubble .icon-user-forced-white.mention-bubble__icon-- {
+		background-color: #3B3B3B;
+	}
 }
 
-.user-bubble__avatar .icon-group-forced-white,
-.user-bubble__avatar .icon-user-forced-white {
-	background-size: 75%;
+/* Manually set dark theme */
+body[data-theme-dark] .user-bubble__avatar .icon-group-forced-white.avatar-class-icon,
+body[data-theme-dark] .user-bubble__avatar .icon-user-forced-white.avatar-class-icon,
+body[data-theme-dark] .autocomplete-result .icon-group-forced-white.autocomplete-result__icon--,
+body[data-theme-dark] .autocomplete-result .icon-user-forced-white.autocomplete-result__icon--,
+body[data-theme-dark] .mention-bubble .icon-group-forced-white.mention-bubble__icon--,
+body[data-theme-dark] .mention-bubble .icon-user-forced-white.mention-bubble__icon-- {
+	background-color: #3B3B3B;
 }
 
-.autocomplete-result .icon-group-forced-white.autocomplete-result__icon--,
-.autocomplete-result .icon-user-forced-white.autocomplete-result__icon--,
+.user-bubble__avatar .icon-group-forced-white.avatar-class-icon,
+.user-bubble__avatar .icon-user-forced-white.avatar-class-icon,
 .mention-bubble .icon-group-forced-white.mention-bubble__icon--,
 .mention-bubble .icon-user-forced-white.mention-bubble__icon-- {
+	background-size: 75%;
+}
+
+.autocomplete-result .icon-group-forced-white.autocomplete-result__icon--,
+.autocomplete-result .icon-user-forced-white.autocomplete-result__icon-- {
 	background-size: 50% !important;
 }