From 09727cb8bf0db08bb63409e513a8032f12d5a7ba Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Mon, 15 Apr 2024 14:30:29 +0200 Subject: [PATCH 1/2] style: update CSS specificity for fallback mention icons Signed-off-by: Maksim Sukharev --- css/icons.css | 47 ++++++++++++++++++++++++++++++++--------------- 1 file changed, 32 insertions(+), 15 deletions(-) diff --git a/css/icons.css b/css/icons.css index 4fe49391a4f..2c44a6f538e 100644 --- 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) { + .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: #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; } From 969e38bdd67e4909cd6a447d3cc90a041bc89dea Mon Sep 17 00:00:00 2001 From: Joas Schilling Date: Mon, 15 Apr 2024 17:17:59 +0200 Subject: [PATCH 2/2] fix(style): Only respect the prefers-color-scheme on default nextcloud theme Signed-off-by: Joas Schilling --- css/icons.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/css/icons.css b/css/icons.css index 2c44a6f538e..5a0dc23b83a 100644 --- a/css/icons.css +++ b/css/icons.css @@ -103,12 +103,12 @@ /* System default: dark theme */ @media (prefers-color-scheme: dark) { - .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-- { + 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; } }