[gtk/wip/jimmac/tone-down-infobars] Adwaita: tone down infobars

From: Jakub Steiner <jimmac src gnome org>
To: commits-list gnome org
Cc:
Subject: [gtk/wip/jimmac/tone-down-infobars] Adwaita: tone down infobars
Date: Mon, 17 Jun 2019 17:54:04 +0000 (UTC)
commit 38f016b53610aa65633b4f7d36b3d2a26780baed
Author: Jakub Steiner <jimmac gmail com>
Date:   Mon Jun 17 19:52:32 2019 +0200

    Adwaita: tone down infobars
    
    Fixes https://gitlab.gnome.org/GNOME/gtk/issues/1957

 gtk/theme/Adwaita/_common.scss           | 32 ++++++++++++++++++--------------
 gtk/theme/Adwaita/gtk-contained-dark.css | 28 +++++++++++++++-------------
 gtk/theme/Adwaita/gtk-contained.css      | 28 +++++++++++++++-------------
 3 files changed, 48 insertions(+), 40 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index a596a9c9af..bab992653d 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -4176,39 +4176,43 @@ infobar {
   &.warning,
   &.error {
     &:backdrop, & {
-      label, & { color: $selected_fg_color; }
-      background-color: $selected_bg_color;
-      border-color: darken($selected_bg_color, 10%);
+      label, & { color: $fg_color; }
+      background-color: if($variant == 'light', lighten(invert($selected_bg_color), 40%), 
+                        desaturate(darken(invert($selected_bg_color),40%), 70%));
+      border-color: lighten($borders_color, 10%);
     }
 
-    text-shadow: 0 1px darken($selected_bg_color, 10%);
+    text-shadow: none;
 
     &:backdrop { text-shadow: none; }
 
     button {
       // FIXME: extend selection mode buttons
-      @include button(normal, $selected_bg_color, $selected_fg_color, none);
+      @include button(normal, $bg_color, $fg_color, none);
 
-      &:hover { @include button(hover, $selected_bg_color, $selected_fg_color, none); }
+      &:hover { @include button(hover, $bg_color, $fg_color, none); }
 
       &:active,
-      &:checked { @include button(active, $selected_bg_color, $selected_fg_color, none); }
+      &:checked { @include button(active, $bg_color, $fg_color, none); }
 
-      &:disabled { @include button(insensitive,$selected_bg_color,$selected_fg_color,none); }
+      &:disabled { @include button(insensitive,$bg_color,$fg_color,none); }
 
       &:backdrop {
-        @include button(backdrop, $selected_bg_color, $selected_fg_color, none);
-        border-color: _border_color($selected_bg_color);
+        @include button(backdrop, $bg_color, $fg_color, none);
+        border-color: _border_color($bg_color);
 
         &:disabled {
-          @include button(backdrop-insensitive, $selected_bg_color,
-                          $selected_fg_color, none);
-          border-color: _border_color($selected_bg_color);
+          @include button(backdrop-insensitive, $bg_color,
+                          $fg_color, none);
+          border-color: _border_color($bg_color);
         }
       }
+      &:backdrop, & {
+        label, & { color: $fg_color; }
+      }
     }
 
-    selection { background-color: darken($selected_bg_color, 10%); }
+    selection { background-color: darken($bg_color, 10%); }
 
     *:link { @extend %link_selected; }
   }
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 17c9a24f39..946aea9713 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -1758,33 +1758,35 @@ paned.vertical > separator.wide { margin: 0; padding: 0; background-repeat: repe
 /************** GtkInfoBar * */
 infobar { border-style: none; }
 
-infobar.info, infobar.question, infobar.warning, infobar.error { text-shadow: 0 1px #0f3b71; }
+infobar.info, infobar.question, infobar.warning, infobar.error { text-shadow: none; }
 
-infobar.info:backdrop, infobar.info, infobar.question:backdrop, infobar.question, infobar.warning:backdrop, 
infobar.warning, infobar.error:backdrop, infobar.error { background-color: #15539e; border-color: #0f3b71; }
+infobar.info:backdrop, infobar.info, infobar.question:backdrop, infobar.question, infobar.warning:backdrop, 
infobar.warning, infobar.error:backdrop, infobar.error { background-color: #44403b; border-color: #353535; }
 
-infobar.info:backdrop label, infobar.info:backdrop, infobar.info label, infobar.info, 
infobar.question:backdrop label, infobar.question:backdrop, infobar.question label, infobar.question, 
infobar.warning:backdrop label, infobar.warning:backdrop, infobar.warning label, infobar.warning, 
infobar.error:backdrop label, infobar.error:backdrop, infobar.error label, infobar.error { color: #ffffff; }
+infobar.info:backdrop label, infobar.info:backdrop, infobar.info label, infobar.info, 
infobar.question:backdrop label, infobar.question:backdrop, infobar.question label, infobar.question, 
infobar.warning:backdrop label, infobar.warning:backdrop, infobar.warning label, infobar.warning, 
infobar.error:backdrop label, infobar.error:backdrop, infobar.error label, infobar.error { color: #eeeeec; }
 
 infobar.info:backdrop, infobar.question:backdrop, infobar.warning:backdrop, infobar.error:backdrop { 
text-shadow: none; }
 
-infobar.info button, infobar.question button, infobar.warning button, infobar.error button { color: #ffffff; 
outline-color: rgba(255, 255, 255, 0.3); border-color: #0f3b71; border-bottom-color: #092444; 
background-image: linear-gradient(to top, #155099 2px, #15539e); text-shadow: 0 -1px rgba(0, 0, 0, 0.719216); 
-gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.719216); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 
2px rgba(0, 0, 0, 0.07); }
+infobar.info button, infobar.question button, infobar.warning button, infobar.error button { color: #eeeeec; 
outline-color: rgba(238, 238, 236, 0.3); border-color: #1b1b1b; border-bottom-color: #070707; 
background-image: linear-gradient(to top, #323232 2px, #353535); text-shadow: 0 -1px rgba(0, 0, 0, 0.834353); 
-gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.834353); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 
2px rgba(0, 0, 0, 0.07); }
 
-infobar.info button:hover, infobar.question button:hover, infobar.warning button:hover, infobar.error 
button:hover { color: #ffffff; outline-color: rgba(255, 255, 255, 0.3); border-color: #0f3b71; 
border-bottom-color: #092444; text-shadow: 0 -1px rgba(0, 0, 0, 0.671216); -gtk-icon-shadow: 0 -1px rgba(0, 
0, 0, 0.671216); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07); 
background-image: linear-gradient(to top, #155099, #1655a2 1px); }
+infobar.info button:hover, infobar.question button:hover, infobar.warning button:hover, infobar.error 
button:hover { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #1b1b1b; 
border-bottom-color: #070707; text-shadow: 0 -1px rgba(0, 0, 0, 0.786353); -gtk-icon-shadow: 0 -1px rgba(0, 
0, 0, 0.786353); box-shadow: inset 0 1px rgba(255, 255, 255, 0.02), 0 1px 2px rgba(0, 0, 0, 0.07); 
background-image: linear-gradient(to top, #323232, #373737 1px); }
 
-infobar.info button:active, infobar.info button:checked, infobar.question button:active, infobar.question 
button:checked, infobar.warning button:active, infobar.warning button:checked, infobar.error button:active, 
infobar.error button:checked { color: #ffffff; outline-color: rgba(255, 255, 255, 0.3); border-color: 
#0f3b71; background-image: image(#103e75); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; 
-gtk-icon-shadow: none; }
+infobar.info button:active, infobar.info button:checked, infobar.question button:active, infobar.question 
button:checked, infobar.warning button:active, infobar.warning button:checked, infobar.error button:active, 
infobar.error button:checked { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: 
#1b1b1b; background-image: image(#1e1e1e); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; 
-gtk-icon-shadow: none; }
 
-infobar.info button:disabled, infobar.question button:disabled, infobar.warning button:disabled, 
infobar.error button:disabled { border-color: #0f3b71; background-image: image(#194d8d); text-shadow: none; 
-gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+infobar.info button:disabled, infobar.question button:disabled, infobar.warning button:disabled, 
infobar.error button:disabled { border-color: #1b1b1b; background-image: image(#323232); text-shadow: none; 
-gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
-infobar.info button:disabled label, infobar.info button:disabled, infobar.question button:disabled label, 
infobar.question button:disabled, infobar.warning button:disabled label, infobar.warning button:disabled, 
infobar.error button:disabled label, infobar.error button:disabled { color: #8ca6c6; }
+infobar.info button:disabled label, infobar.info button:disabled, infobar.question button:disabled label, 
infobar.question button:disabled, infobar.warning button:disabled label, infobar.warning button:disabled, 
infobar.error button:disabled label, infobar.error button:disabled { color: #919190; }
 
-infobar.info button:backdrop, infobar.question button:backdrop, infobar.warning button:backdrop, 
infobar.error button:backdrop { border-color: #0f3b71; background-image: image(#15539e); text-shadow: none; 
-gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); border-color: #0f3b71; }
+infobar.info button:backdrop, infobar.question button:backdrop, infobar.warning button:backdrop, 
infobar.error button:backdrop { border-color: #202020; background-image: image(#353535); text-shadow: none; 
-gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); border-color: #1b1b1b; }
 
-infobar.info button:backdrop label, infobar.info button:backdrop, infobar.question button:backdrop label, 
infobar.question button:backdrop, infobar.warning button:backdrop label, infobar.warning button:backdrop, 
infobar.error button:backdrop label, infobar.error button:backdrop { color: #d0ddec; }
+infobar.info button:backdrop label, infobar.info button:backdrop, infobar.question button:backdrop label, 
infobar.question button:backdrop, infobar.warning button:backdrop label, infobar.warning button:backdrop, 
infobar.error button:backdrop label, infobar.error button:backdrop { color: #919190; }
 
-infobar.info button:backdrop:disabled, infobar.question button:backdrop:disabled, infobar.warning 
button:backdrop:disabled, infobar.error button:backdrop:disabled { border-color: #0f3b71; background-image: 
image(#194d8d); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); 
border-color: #0f3b71; }
+infobar.info button:backdrop:disabled, infobar.question button:backdrop:disabled, infobar.warning 
button:backdrop:disabled, infobar.error button:backdrop:disabled { border-color: #202020; background-image: 
image(#323232); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); 
border-color: #1b1b1b; }
 
-infobar.info button:backdrop:disabled label, infobar.info button:backdrop:disabled, infobar.question 
button:backdrop:disabled label, infobar.question button:backdrop:disabled, infobar.warning 
button:backdrop:disabled label, infobar.warning button:backdrop:disabled, infobar.error 
button:backdrop:disabled label, infobar.error button:backdrop:disabled { color: #6a8bb5; }
+infobar.info button:backdrop:disabled label, infobar.info button:backdrop:disabled, infobar.question 
button:backdrop:disabled label, infobar.question button:backdrop:disabled, infobar.warning 
button:backdrop:disabled label, infobar.warning button:backdrop:disabled, infobar.error 
button:backdrop:disabled label, infobar.error button:backdrop:disabled { color: #5b5b5b; }
 
-infobar.info selection, infobar.question selection, infobar.warning selection, infobar.error selection { 
background-color: #0f3b71; }
+infobar.info button:backdrop label, infobar.info button:backdrop, infobar.info button label, infobar.info 
button, infobar.question button:backdrop label, infobar.question button:backdrop, infobar.question button 
label, infobar.question button, infobar.warning button:backdrop label, infobar.warning button:backdrop, 
infobar.warning button label, infobar.warning button, infobar.error button:backdrop label, infobar.error 
button:backdrop, infobar.error button label, infobar.error button { color: #eeeeec; }
+
+infobar.info selection, infobar.question selection, infobar.warning selection, infobar.error selection { 
background-color: #1b1b1b; }
 
 /************ Tooltips * */
 tooltip { padding: 4px; /* not working */ border-radius: 5px; box-shadow: none; text-shadow: 0 1px black; }
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 4362a7ff71..78ffdf0977 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -1774,33 +1774,35 @@ paned.vertical > separator.wide { margin: 0; padding: 0; background-repeat: repe
 /************** GtkInfoBar * */
 infobar { border-style: none; }
 
-infobar.info, infobar.question, infobar.warning, infobar.error { text-shadow: 0 1px #1b6acb; }
+infobar.info, infobar.question, infobar.warning, infobar.error { text-shadow: none; }
 
-infobar.info:backdrop, infobar.info, infobar.question:backdrop, infobar.question, infobar.warning:backdrop, 
infobar.warning, infobar.error:backdrop, infobar.error { background-color: #3584e4; border-color: #1b6acb; }
+infobar.info:backdrop, infobar.info, infobar.question:backdrop, infobar.question, infobar.warning:backdrop, 
infobar.warning, infobar.error:backdrop, infobar.error { background-color: #f6dbbb; border-color: #e4e1de; }
 
-infobar.info:backdrop label, infobar.info:backdrop, infobar.info label, infobar.info, 
infobar.question:backdrop label, infobar.question:backdrop, infobar.question label, infobar.question, 
infobar.warning:backdrop label, infobar.warning:backdrop, infobar.warning label, infobar.warning, 
infobar.error:backdrop label, infobar.error:backdrop, infobar.error label, infobar.error { color: #ffffff; }
+infobar.info:backdrop label, infobar.info:backdrop, infobar.info label, infobar.info, 
infobar.question:backdrop label, infobar.question:backdrop, infobar.question label, infobar.question, 
infobar.warning:backdrop label, infobar.warning:backdrop, infobar.warning label, infobar.warning, 
infobar.error:backdrop label, infobar.error:backdrop, infobar.error label, infobar.error { color: #2e3436; }
 
 infobar.info:backdrop, infobar.question:backdrop, infobar.warning:backdrop, infobar.error:backdrop { 
text-shadow: none; }
 
-infobar.info button, infobar.question button, infobar.warning button, infobar.error button { color: #ffffff; 
outline-color: rgba(255, 255, 255, 0.3); border-color: #1b6acb; border-bottom-color: #15539e; 
background-image: linear-gradient(to top, #2379e2 2px, #3584e4); text-shadow: 0 -1px rgba(0, 0, 0, 0.559216); 
-gtk-icon-shadow: 0 -1px rgba(0, 0, 0, 0.559216); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px 
rgba(0, 0, 0, 0.07); }
+infobar.info button, infobar.question button, infobar.warning button, infobar.error button { color: #2e3436; 
outline-color: rgba(46, 52, 54, 0.3); border-color: #cdc7c2; border-bottom-color: #bfb8b1; background-image: 
linear-gradient(to top, #edebe9 2px, #f6f5f4); text-shadow: 0 1px rgba(255, 255, 255, 0.769231); 
-gtk-icon-shadow: 0 1px rgba(255, 255, 255, 0.769231); box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 
0.07); }
 
-infobar.info button:hover, infobar.question button:hover, infobar.warning button:hover, infobar.error 
button:hover { color: #ffffff; outline-color: rgba(255, 255, 255, 0.3); border-color: #1b6acb; 
border-bottom-color: #15539e; text-shadow: 0 -1px rgba(0, 0, 0, 0.511216); -gtk-icon-shadow: 0 -1px rgba(0, 
0, 0, 0.511216); box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.07); 
background-image: linear-gradient(to top, #3584e4, #3987e5 1px); }
+infobar.info button:hover, infobar.question button:hover, infobar.warning button:hover, infobar.error 
button:hover { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #cdc7c2; 
border-bottom-color: #bfb8b1; text-shadow: 0 1px rgba(255, 255, 255, 0.769231); -gtk-icon-shadow: 0 1px 
rgba(255, 255, 255, 0.769231); box-shadow: inset 0 1px white, 0 1px 2px rgba(0, 0, 0, 0.07); 
background-image: linear-gradient(to top, #f6f5f4, #f8f8f7 1px); }
 
-infobar.info button:active, infobar.info button:checked, infobar.question button:active, infobar.question 
button:checked, infobar.warning button:active, infobar.warning button:checked, infobar.error button:active, 
infobar.error button:checked { color: #ffffff; outline-color: rgba(255, 255, 255, 0.3); border-color: 
#1b6acb; background-image: image(#1961b9); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; 
-gtk-icon-shadow: none; }
+infobar.info button:active, infobar.info button:checked, infobar.question button:active, infobar.question 
button:checked, infobar.warning button:active, infobar.warning button:checked, infobar.error button:active, 
infobar.error button:checked { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #cdc7c2; 
background-image: image(#d6d1cd); box-shadow: inset 0 1px rgba(255, 255, 255, 0); text-shadow: none; 
-gtk-icon-shadow: none; }
 
-infobar.info button:disabled, infobar.question button:disabled, infobar.warning button:disabled, 
infobar.error button:disabled { border-color: #1b6acb; background-image: image(#5396e8); text-shadow: none; 
-gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
+infobar.info button:disabled, infobar.question button:disabled, infobar.warning button:disabled, 
infobar.error button:disabled { border-color: #cdc7c2; background-image: image(#faf9f8); text-shadow: none; 
-gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); }
 
-infobar.info button:disabled label, infobar.info button:disabled, infobar.question button:disabled label, 
infobar.question button:disabled, infobar.warning button:disabled label, infobar.warning button:disabled, 
infobar.error button:disabled label, infobar.error button:disabled { color: #a9cbf4; }
+infobar.info button:disabled label, infobar.info button:disabled, infobar.question button:disabled label, 
infobar.question button:disabled, infobar.warning button:disabled label, infobar.warning button:disabled, 
infobar.error button:disabled label, infobar.error button:disabled { color: #929595; }
 
-infobar.info button:backdrop, infobar.question button:backdrop, infobar.warning button:backdrop, 
infobar.error button:backdrop { border-color: #3584e4; background-image: image(#3584e4); text-shadow: none; 
-gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); border-color: #1b6acb; }
+infobar.info button:backdrop, infobar.question button:backdrop, infobar.warning button:backdrop, 
infobar.error button:backdrop { border-color: #d5d0cc; background-image: image(#f6f5f4); text-shadow: none; 
-gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); border-color: #dfdcd8; }
 
-infobar.info button:backdrop label, infobar.info button:backdrop, infobar.question button:backdrop label, 
infobar.question button:backdrop, infobar.warning button:backdrop label, infobar.warning button:backdrop, 
infobar.error button:backdrop label, infobar.error button:backdrop { color: #d7e6fa; }
+infobar.info button:backdrop label, infobar.info button:backdrop, infobar.question button:backdrop label, 
infobar.question button:backdrop, infobar.warning button:backdrop label, infobar.warning button:backdrop, 
infobar.error button:backdrop label, infobar.error button:backdrop { color: #929595; }
 
-infobar.info button:backdrop:disabled, infobar.question button:backdrop:disabled, infobar.warning 
button:backdrop:disabled, infobar.error button:backdrop:disabled { border-color: #5396e8; background-image: 
image(#5396e8); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); 
border-color: #1b6acb; }
+infobar.info button:backdrop:disabled, infobar.question button:backdrop:disabled, infobar.warning 
button:backdrop:disabled, infobar.error button:backdrop:disabled { border-color: #d5d0cc; background-image: 
image(#faf9f8); text-shadow: none; -gtk-icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0); 
border-color: #dfdcd8; }
 
-infobar.info button:backdrop:disabled label, infobar.info button:backdrop:disabled, infobar.question 
button:backdrop:disabled label, infobar.question button:backdrop:disabled, infobar.warning 
button:backdrop:disabled label, infobar.warning button:backdrop:disabled, infobar.error 
button:backdrop:disabled label, infobar.error button:backdrop:disabled { color: #8fbbf0; }
+infobar.info button:backdrop:disabled label, infobar.info button:backdrop:disabled, infobar.question 
button:backdrop:disabled label, infobar.question button:backdrop:disabled, infobar.warning 
button:backdrop:disabled label, infobar.warning button:backdrop:disabled, infobar.error 
button:backdrop:disabled label, infobar.error button:backdrop:disabled { color: #d4cfca; }
 
-infobar.info selection, infobar.question selection, infobar.warning selection, infobar.error selection { 
background-color: #1b6acb; }
+infobar.info button:backdrop label, infobar.info button:backdrop, infobar.info button label, infobar.info 
button, infobar.question button:backdrop label, infobar.question button:backdrop, infobar.question button 
label, infobar.question button, infobar.warning button:backdrop label, infobar.warning button:backdrop, 
infobar.warning button label, infobar.warning button, infobar.error button:backdrop label, infobar.error 
button:backdrop, infobar.error button label, infobar.error button { color: #2e3436; }
+
+infobar.info selection, infobar.question selection, infobar.warning selection, infobar.error selection { 
background-color: #dfdcd8; }
 
 /************ Tooltips * */
 tooltip { padding: 4px; /* not working */ border-radius: 5px; box-shadow: none; text-shadow: 0 1px black; }
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]