[libhandy] themes: Use rgba color for HdyStatusPage icon rather than opacity

[Alexander Mikhaylenko <alexm src gnome org>]

commit ce8cd6d668d2c7f0cc84d80b047e9cc9ebc42f6f
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Mon Dec 21 18:26:33 2020 +0500

    themes: Use rgba color for HdyStatusPage icon rather than opacity
    
    Make sure full-color icons are not half-transparent.
    
    Move this style to Adwaita, since it uses Adwaita variables now.

 src/themes/Adwaita-dark.css        | 12 ++++++++----
 src/themes/Adwaita.css             | 12 ++++++++----
 src/themes/HighContrast.css        | 12 ++++++++----
 src/themes/HighContrastInverse.css | 12 ++++++++----
 src/themes/_Adwaita-base.scss      | 10 ++++++++++
 src/themes/_fallback-base.scss     |  1 -
 src/themes/fallback.css            |  2 +-
 7 files changed, 43 insertions(+), 18 deletions(-)
---
diff --git a/src/themes/Adwaita-dark.css b/src/themes/Adwaita-dark.css
index 8221c7d0..63ed17e0 100644
--- a/src/themes/Adwaita-dark.css
+++ b/src/themes/Adwaita-dark.css
@@ -77,7 +77,7 @@ viewswitchertitle viewswitcher { margin-left: 12px; margin-right: 12px; }
 
 statuspage > scrolledwindow > viewport > box { margin: 36px 12px; }
 
-statuspage > scrolledwindow > viewport > box > clamp > box > .icon { margin-bottom: 36px; opacity: 0.5; }
+statuspage > scrolledwindow > viewport > box > clamp > box > .icon { margin-bottom: 36px; }
 
 statuspage > scrolledwindow > viewport > box > clamp > box > .title { margin-bottom: 12px; }
 
@@ -184,11 +184,11 @@ list.content, list.content list { background-color: transparent; }
 
 list.content list.nested > row:not(:active):not(:hover):not(:selected), list.content list.nested > 
row:not(:active):hover:not(.activatable):not(:selected) { background-color: mix(#353535, #2d2d2d, 0.5); }
 
-list.content list.nested > row:not(:active):hover.activatable:not(:selected) { background-color: 
mix(#eeeeec, #2d2d2d, 0.95); }
+list.content list.nested > row.activatable:not(:active):hover:not(:selected) { background-color: 
mix(#eeeeec, #2d2d2d, 0.95); }
 
 list.content > row:not(.expander):not(:active):not(:hover):not(:selected), list.content > 
row:not(.expander):not(:active):hover:not(.activatable):not(:selected), list.content > row.expander 
row.header:not(:active):not(:hover):not(:selected), list.content > row.expander 
row.header:not(:active):hover:not(.activatable):not(:selected) { background-color: #2d2d2d; }
 
-list.content > row:not(.expander):not(:active):hover.activatable:not(:selected), list.content > row.expander 
row.header:not(:active):hover.activatable:not(:selected) { background-color: mix(#eeeeec, #2d2d2d, 0.95); }
+list.content > row.activatable:not(.expander):not(:active):hover:not(:selected), list.content > row.expander 
row.header.activatable:not(:active):hover:not(:selected) { background-color: mix(#eeeeec, #2d2d2d, 0.95); }
 
 list.content > row, list.content > row list > row { border-color: alpha(#1b1b1b, 0.7); border-style: solid; 
transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
 
@@ -198,7 +198,7 @@ list.content > row:first-child, list.content > row.expander:first-child row.head
 
 list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > 
row.expander:checked { border-width: 1px; }
 
-list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > 
row.expander:checked, list.content > row.expander:not(:checked):last-child row.header, list.content > 
row.expander:not(:checked).checked-expander-row-previous-sibling row.header, list.content > 
row.expander.empty:checked row.header, list.content > row.expander list.nested > row:last-child { 
border-bottom-left-radius: 8px; -gtk-outline-bottom-left-radius: 7px; border-bottom-right-radius: 8px; 
-gtk-outline-bottom-right-radius: 7px; }
+list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > 
row.expander:checked, list.content > row.expander:not(:checked):last-child row.header, list.content > 
row.expander.checked-expander-row-previous-sibling:not(:checked) row.header, list.content > 
row.expander.empty:checked row.header, list.content > row.expander list.nested > row:last-child { 
border-bottom-left-radius: 8px; -gtk-outline-bottom-left-radius: 7px; border-bottom-right-radius: 8px; 
-gtk-outline-bottom-right-radius: 7px; }
 
 list.content > row.expander:checked:not(:first-child), list.content > row.expander:checked + row { 
margin-top: 6px; }
 
@@ -211,3 +211,7 @@ window.csd.unified:not(.solid-csd):not(.fullscreen) headerbar.selection-mode { b
 window.csd.unified:not(.solid-csd):not(.fullscreen) > decoration-overlay { box-shadow: inset 0 1px rgba(255, 
255, 255, 0.065); }
 
 
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized),
 
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized)
> decoration, 
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized)
> decoration-overlay { border-radius: 8px; }
+
+statuspage > scrolledwindow > viewport > box > clamp > box > .icon { color: rgba(238, 238, 236, 0.5); }
+
+statuspage > scrolledwindow > viewport > box > clamp > box > .icon:backdrop { color: rgba(145, 145, 144, 
0.5); }
diff --git a/src/themes/Adwaita.css b/src/themes/Adwaita.css
index a7ee27b9..d6ab3e90 100644
--- a/src/themes/Adwaita.css
+++ b/src/themes/Adwaita.css
@@ -77,7 +77,7 @@ viewswitchertitle viewswitcher { margin-left: 12px; margin-right: 12px; }
 
 statuspage > scrolledwindow > viewport > box { margin: 36px 12px; }
 
-statuspage > scrolledwindow > viewport > box > clamp > box > .icon { margin-bottom: 36px; opacity: 0.5; }
+statuspage > scrolledwindow > viewport > box > clamp > box > .icon { margin-bottom: 36px; }
 
 statuspage > scrolledwindow > viewport > box > clamp > box > .title { margin-bottom: 12px; }
 
@@ -184,11 +184,11 @@ list.content, list.content list { background-color: transparent; }
 
 list.content list.nested > row:not(:active):not(:hover):not(:selected), list.content list.nested > 
row:not(:active):hover:not(.activatable):not(:selected) { background-color: mix(#f6f5f4, #ffffff, 0.5); }
 
-list.content list.nested > row:not(:active):hover.activatable:not(:selected) { background-color: 
mix(#2e3436, #ffffff, 0.95); }
+list.content list.nested > row.activatable:not(:active):hover:not(:selected) { background-color: 
mix(#2e3436, #ffffff, 0.95); }
 
 list.content > row:not(.expander):not(:active):not(:hover):not(:selected), list.content > 
row:not(.expander):not(:active):hover:not(.activatable):not(:selected), list.content > row.expander 
row.header:not(:active):not(:hover):not(:selected), list.content > row.expander 
row.header:not(:active):hover:not(.activatable):not(:selected) { background-color: #ffffff; }
 
-list.content > row:not(.expander):not(:active):hover.activatable:not(:selected), list.content > row.expander 
row.header:not(:active):hover.activatable:not(:selected) { background-color: mix(#2e3436, #ffffff, 0.95); }
+list.content > row.activatable:not(.expander):not(:active):hover:not(:selected), list.content > row.expander 
row.header.activatable:not(:active):hover:not(:selected) { background-color: mix(#2e3436, #ffffff, 0.95); }
 
 list.content > row, list.content > row list > row { border-color: alpha(#cdc7c2, 0.7); border-style: solid; 
transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
 
@@ -198,7 +198,7 @@ list.content > row:first-child, list.content > row.expander:first-child row.head
 
 list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > 
row.expander:checked { border-width: 1px; }
 
-list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > 
row.expander:checked, list.content > row.expander:not(:checked):last-child row.header, list.content > 
row.expander:not(:checked).checked-expander-row-previous-sibling row.header, list.content > 
row.expander.empty:checked row.header, list.content > row.expander list.nested > row:last-child { 
border-bottom-left-radius: 8px; -gtk-outline-bottom-left-radius: 7px; border-bottom-right-radius: 8px; 
-gtk-outline-bottom-right-radius: 7px; }
+list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > 
row.expander:checked, list.content > row.expander:not(:checked):last-child row.header, list.content > 
row.expander.checked-expander-row-previous-sibling:not(:checked) row.header, list.content > 
row.expander.empty:checked row.header, list.content > row.expander list.nested > row:last-child { 
border-bottom-left-radius: 8px; -gtk-outline-bottom-left-radius: 7px; border-bottom-right-radius: 8px; 
-gtk-outline-bottom-right-radius: 7px; }
 
 list.content > row.expander:checked:not(:first-child), list.content > row.expander:checked + row { 
margin-top: 6px; }
 
@@ -211,3 +211,7 @@ window.csd.unified:not(.solid-csd):not(.fullscreen) headerbar.selection-mode { b
 window.csd.unified:not(.solid-csd):not(.fullscreen) > decoration-overlay { box-shadow: inset 0 1px rgba(255, 
255, 255, 0.34); }
 
 
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized),
 
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized)
> decoration, 
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized)
> decoration-overlay { border-radius: 8px; }
+
+statuspage > scrolledwindow > viewport > box > clamp > box > .icon { color: rgba(46, 52, 54, 0.5); }
+
+statuspage > scrolledwindow > viewport > box > clamp > box > .icon:backdrop { color: rgba(146, 149, 149, 
0.5); }
diff --git a/src/themes/HighContrast.css b/src/themes/HighContrast.css
index b68b3476..f13c9204 100644
--- a/src/themes/HighContrast.css
+++ b/src/themes/HighContrast.css
@@ -77,7 +77,7 @@ viewswitchertitle viewswitcher { margin-left: 12px; margin-right: 12px; }
 
 statuspage > scrolledwindow > viewport > box { margin: 36px 12px; }
 
-statuspage > scrolledwindow > viewport > box > clamp > box > .icon { margin-bottom: 36px; opacity: 0.5; }
+statuspage > scrolledwindow > viewport > box > clamp > box > .icon { margin-bottom: 36px; }
 
 statuspage > scrolledwindow > viewport > box > clamp > box > .title { margin-bottom: 12px; }
 
@@ -184,11 +184,11 @@ list.content, list.content list { background-color: transparent; }
 
 list.content list.nested > row:not(:active):not(:hover):not(:selected), list.content list.nested > 
row:not(:active):hover:not(.activatable):not(:selected) { background-color: mix(#fdfdfc, #ffffff, 0.5); }
 
-list.content list.nested > row:not(:active):hover.activatable:not(:selected) { background-color: 
mix(#272c2e, #ffffff, 0.95); }
+list.content list.nested > row.activatable:not(:active):hover:not(:selected) { background-color: 
mix(#272c2e, #ffffff, 0.95); }
 
 list.content > row:not(.expander):not(:active):not(:hover):not(:selected), list.content > 
row:not(.expander):not(:active):hover:not(.activatable):not(:selected), list.content > row.expander 
row.header:not(:active):not(:hover):not(:selected), list.content > row.expander 
row.header:not(:active):hover:not(.activatable):not(:selected) { background-color: #ffffff; }
 
-list.content > row:not(.expander):not(:active):hover.activatable:not(:selected), list.content > row.expander 
row.header:not(:active):hover.activatable:not(:selected) { background-color: mix(#272c2e, #ffffff, 0.95); }
+list.content > row.activatable:not(.expander):not(:active):hover:not(:selected), list.content > row.expander 
row.header.activatable:not(:active):hover:not(:selected) { background-color: mix(#272c2e, #ffffff, 0.95); }
 
 list.content > row, list.content > row list > row { border-color: alpha(#877b6e, 0.7); border-style: solid; 
transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
 
@@ -198,7 +198,7 @@ list.content > row:first-child, list.content > row.expander:first-child row.head
 
 list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > 
row.expander:checked { border-width: 1px; }
 
-list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > 
row.expander:checked, list.content > row.expander:not(:checked):last-child row.header, list.content > 
row.expander:not(:checked).checked-expander-row-previous-sibling row.header, list.content > 
row.expander.empty:checked row.header, list.content > row.expander list.nested > row:last-child { 
border-bottom-left-radius: 8px; -gtk-outline-bottom-left-radius: 7px; border-bottom-right-radius: 8px; 
-gtk-outline-bottom-right-radius: 7px; }
+list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > 
row.expander:checked, list.content > row.expander:not(:checked):last-child row.header, list.content > 
row.expander.checked-expander-row-previous-sibling:not(:checked) row.header, list.content > 
row.expander.empty:checked row.header, list.content > row.expander list.nested > row:last-child { 
border-bottom-left-radius: 8px; -gtk-outline-bottom-left-radius: 7px; border-bottom-right-radius: 8px; 
-gtk-outline-bottom-right-radius: 7px; }
 
 list.content > row.expander:checked:not(:first-child), list.content > row.expander:checked + row { 
margin-top: 6px; }
 
@@ -211,3 +211,7 @@ window.csd.unified:not(.solid-csd):not(.fullscreen) headerbar.selection-mode { b
 window.csd.unified:not(.solid-csd):not(.fullscreen) > decoration-overlay { box-shadow: inset 0 1px rgba(255, 
255, 255, 0.34); }
 
 
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized),
 
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized)
> decoration, 
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized)
> decoration-overlay { border-radius: 8px; }
+
+statuspage > scrolledwindow > viewport > box > clamp > box > .icon { color: rgba(39, 44, 46, 0.5); }
+
+statuspage > scrolledwindow > viewport > box > clamp > box > .icon:backdrop { color: rgba(146, 149, 149, 
0.5); }
diff --git a/src/themes/HighContrastInverse.css b/src/themes/HighContrastInverse.css
index 2211c67e..1c4faf29 100644
--- a/src/themes/HighContrastInverse.css
+++ b/src/themes/HighContrastInverse.css
@@ -77,7 +77,7 @@ viewswitchertitle viewswitcher { margin-left: 12px; margin-right: 12px; }
 
 statuspage > scrolledwindow > viewport > box { margin: 36px 12px; }
 
-statuspage > scrolledwindow > viewport > box > clamp > box > .icon { margin-bottom: 36px; opacity: 0.5; }
+statuspage > scrolledwindow > viewport > box > clamp > box > .icon { margin-bottom: 36px; }
 
 statuspage > scrolledwindow > viewport > box > clamp > box > .title { margin-bottom: 12px; }
 
@@ -184,11 +184,11 @@ list.content, list.content list { background-color: transparent; }
 
 list.content list.nested > row:not(:active):not(:hover):not(:selected), list.content list.nested > 
row:not(:active):hover:not(.activatable):not(:selected) { background-color: mix(#303030, #2d2d2d, 0.5); }
 
-list.content list.nested > row:not(:active):hover.activatable:not(:selected) { background-color: 
mix(#f3f3f1, #2d2d2d, 0.95); }
+list.content list.nested > row.activatable:not(:active):hover:not(:selected) { background-color: 
mix(#f3f3f1, #2d2d2d, 0.95); }
 
 list.content > row:not(.expander):not(:active):not(:hover):not(:selected), list.content > 
row:not(.expander):not(:active):hover:not(.activatable):not(:selected), list.content > row.expander 
row.header:not(:active):not(:hover):not(:selected), list.content > row.expander 
row.header:not(:active):hover:not(.activatable):not(:selected) { background-color: #2d2d2d; }
 
-list.content > row:not(.expander):not(:active):hover.activatable:not(:selected), list.content > row.expander 
row.header:not(:active):hover.activatable:not(:selected) { background-color: mix(#f3f3f1, #2d2d2d, 0.95); }
+list.content > row.activatable:not(.expander):not(:active):hover:not(:selected), list.content > row.expander 
row.header.activatable:not(:active):hover:not(:selected) { background-color: mix(#f3f3f1, #2d2d2d, 0.95); }
 
 list.content > row, list.content > row list > row { border-color: alpha(#686868, 0.7); border-style: solid; 
transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }
 
@@ -198,7 +198,7 @@ list.content > row:first-child, list.content > row.expander:first-child row.head
 
 list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > 
row.expander:checked { border-width: 1px; }
 
-list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > 
row.expander:checked, list.content > row.expander:not(:checked):last-child row.header, list.content > 
row.expander:not(:checked).checked-expander-row-previous-sibling row.header, list.content > 
row.expander.empty:checked row.header, list.content > row.expander list.nested > row:last-child { 
border-bottom-left-radius: 8px; -gtk-outline-bottom-left-radius: 7px; border-bottom-right-radius: 8px; 
-gtk-outline-bottom-right-radius: 7px; }
+list.content > row:last-child, list.content > row.checked-expander-row-previous-sibling, list.content > 
row.expander:checked, list.content > row.expander:not(:checked):last-child row.header, list.content > 
row.expander.checked-expander-row-previous-sibling:not(:checked) row.header, list.content > 
row.expander.empty:checked row.header, list.content > row.expander list.nested > row:last-child { 
border-bottom-left-radius: 8px; -gtk-outline-bottom-left-radius: 7px; border-bottom-right-radius: 8px; 
-gtk-outline-bottom-right-radius: 7px; }
 
 list.content > row.expander:checked:not(:first-child), list.content > row.expander:checked + row { 
margin-top: 6px; }
 
@@ -211,3 +211,7 @@ window.csd.unified:not(.solid-csd):not(.fullscreen) headerbar.selection-mode { b
 window.csd.unified:not(.solid-csd):not(.fullscreen) > decoration-overlay { box-shadow: inset 0 1px rgba(255, 
255, 255, 0.065); }
 
 
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized),
 
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized)
> decoration, 
window.csd.unified:not(.solid-csd):not(.fullscreen):not(.tiled):not(.tiled-top):not(.tiled-bottom):not(.tiled-left):not(.tiled-right):not(.maximized)
> decoration-overlay { border-radius: 8px; }
+
+statuspage > scrolledwindow > viewport > box > clamp > box > .icon { color: rgba(243, 243, 241, 0.5); }
+
+statuspage > scrolledwindow > viewport > box > clamp > box > .icon:backdrop { color: rgba(145, 145, 144, 
0.5); }
diff --git a/src/themes/_Adwaita-base.scss b/src/themes/_Adwaita-base.scss
index cc0b7542..ecedc684 100644
--- a/src/themes/_Adwaita-base.scss
+++ b/src/themes/_Adwaita-base.scss
@@ -334,3 +334,13 @@ window.csd.unified:not(.solid-csd):not(.fullscreen) {
     }
   }
 }
+
+// HdyStatusPage
+
+statuspage > scrolledwindow > viewport > box > clamp > box > .icon {
+  color: transparentize($fg_color, 0.5);
+
+  &:backdrop {
+    color: transparentize($backdrop_fg_color, 0.5);
+  }
+}
diff --git a/src/themes/_fallback-base.scss b/src/themes/_fallback-base.scss
index 7542710f..b6c9d599 100644
--- a/src/themes/_fallback-base.scss
+++ b/src/themes/_fallback-base.scss
@@ -156,7 +156,6 @@ statuspage > scrolledwindow > viewport > box {
   > clamp > box {
     > .icon {
       margin-bottom: 36px;
-      opacity: 0.5;
     }
 
     > .title {
diff --git a/src/themes/fallback.css b/src/themes/fallback.css
index 16afd3c4..90bd27ce 100644
--- a/src/themes/fallback.css
+++ b/src/themes/fallback.css
@@ -77,7 +77,7 @@ viewswitchertitle viewswitcher { margin-left: 12px; margin-right: 12px; }
 
 statuspage > scrolledwindow > viewport > box { margin: 36px 12px; }
 
-statuspage > scrolledwindow > viewport > box > clamp > box > .icon { margin-bottom: 36px; opacity: 0.5; }
+statuspage > scrolledwindow > viewport > box > clamp > box > .icon { margin-bottom: 36px; }
 
 statuspage > scrolledwindow > viewport > box > clamp > box > .title { margin-bottom: 12px; }