Merge lp:~3v1n0/ubuntu-themes/list-theming into lp:ubuntu-themes

[Marco Trevisan (Treviño)]

list, row: set padding, use white bg and hover effect on activatable

Also in sidebar show frames around sidebar but avoid double ones

Before: https://i.imgur.com/pVzd27c.png
After: https://i.imgur.com/5PV26Rb.png

[Daniel van Vugt (vanvugt)]

This seems to break the list in Settings a bit:

(1) Alternating background (every second item) is the same colour as the selection.

(2) Text colour is white on light grey (unreadable).

And pre-existing bugs should be fixed but aren't:

(3) Some list items (like the monitor name in Settings > Color) never highlight. Works in Adwaita.

(4) List in bubble menus (Settings > Displays > Resolution etc) are a mixture of grey and white backgrounds.

(5) The background area around the Settings > Color > 'Add profile' and 'Calibrate' buttons is still missing in Ambiance (but not in Adwaita).

---
So this feels like more of a step backwards. Maybe try fixing each issue in separate smaller branches?

review: Needs Fixing

[Daniel van Vugt (vanvugt)]

(3) I mean the hover effect is missing in Settings > Color

[lp:~3v1n0/ubuntu-themes/list-theming]

604. By Marco Trevisan (Treviño) on 2018-03-21

Ambiance: use darker color in hover for zebra-stripped lists

605. By Marco Trevisan (Treviño) on 2018-03-21

Radiance: add zebra-stripping (as in Ambiance)

606. By Marco Trevisan (Treviño) on 2018-03-21

Ambiance, Radiance: just apply opacity to dimmed/disabled text child of selected items

607. By Marco Trevisan (Treviño) on 2018-03-21

Ambiance, Radiance: apply .inline-toolbar to all widget kinds

608. By Marco Trevisan (Treviño) on 2018-03-21

Ambiance, Radiance: use flat background for .inline-toolbar's in stack's

[Marco Trevisan (Treviño) (3v1n0)]

As also said on IRC, g-c-c is the worse example where to test such changes, as it embeds a theme change which would override these changes.

So these fixes should be landed together with the debdiff included here:
 https://bugs.launchpad.net/ubuntu/+source/gnome-control-center/+bug/1757471

> (1) Alternating background (every second item) is the same colour as the
> selection.

Thank for pointing out, I've fixed this case. Now we use a darker hover color when using the zebra-lists.

> (2) Text colour is white on light grey (unreadable).

Fixed.

> And pre-existing bugs should be fixed but aren't:
>
> (3) Some list items (like the monitor name in Settings > Color) never
> highlight. Works in Adwaita.
> (3) I mean the hover effect is missing in Settings > Color

This is fixed here, but the theme override won't show it.

> (4) List in bubble menus (Settings > Displays > Resolution etc) are a mixture
> of grey and white backgrounds.

Works here. Again, after removing the g-c-c patch.

> (5) The background area around the Settings > Color > 'Add profile' and
> 'Calibrate' buttons is still missing in Ambiance (but not in Adwaita).

Thanks, this is a different part of the theme which wasn't covered at all.
I've fixed this too.

[lp:~3v1n0/ubuntu-themes/list-theming]

609. By Marco Trevisan (Treviño) on 2018-03-22

Ambiance, Radiance: use darker separator color in zebra-stripped lists

[Daniel van Vugt (vanvugt)]

review: Abstain

[Andrea Azzarone (azzar1)]

gnome-control-center (after removing the patch) works fine here.

review: Approve

=== modified file 'Ambiance/gtk-3.20/gtk-widgets.css'
--- Ambiance/gtk-3.20/gtk-widgets.css	2018-01-22 12:01:07 +0000
+++ Ambiance/gtk-3.20/gtk-widgets.css	2018-03-22 02:10:57 +0000
@@ -551,6 +551,44 @@
     border-top-color: shade (@backdrop_selected_bg_color, 0.9);
 }
 
+stacksidebar row {
+    padding: 10px 4px;
+}
+
+stacksidebar row > label {
+    padding-left: 6px;
+    padding-right: 6px;
+}
+
+stacksidebar row.needs-attention > label {
+    background-size: 6px 6px, 0 0;
+}
+
+list row {
+    border-image: none;
+}
+
+list row:selected,
+list row:selected:backdrop {
+    background-image: none;
+    border: none;
+}
+
+list row.activatable:hover,
+list row.has-open-popup {
+    background-color: shade (@base_color, 0.965);
+}
+
+list row.activatable:hover:selected,
+list row.has-open-popup:selected {
+    background-color: shade (alpha (@selected_bg_color, 0.9), 0.965);
+}
+
+list row.activatable:selected:backdrop:hover,
+list row.has-open-popup:selected:backdrop {
+    background-color: shade (alpha (@backdrop_selected_bg_color, 0.9), 0.965);
+}
+
 /*******************
  * check and radio *
  *******************/
@@ -588,6 +626,7 @@
     background: none;
 }
 
+list separator,
 menu radio * {
     box-shadow: none;
 }
@@ -796,7 +835,8 @@
 /*********
  * frame *
  *********/
-.frame {
+.frame,
+frame > border {
     border-radius: 3px;
     border-width: 1px;
     border-style: solid;
@@ -820,7 +860,8 @@
     background: none;
 }
 
-.frame.flat, frame border.flat {
+frame > border.flat,
+.frame.flat {
     border: none;
 }
 
@@ -837,7 +878,8 @@
  * iconview *
  ************/
 
-.view {
+.view,
+list {
     background-color: @base_color;
     color: @text_color;
 }
@@ -1030,7 +1072,7 @@
 .menubar {
     -GtkWidget-window-dragging: true;
 
-    background-color: @dark_bg_color;
+    background-color: shade (@dark_bg_color, 1.10);
     background-image: none;
     border-width: 0;
 
@@ -1892,8 +1934,14 @@
     border-right-color: alpha (shade (@bg_color, 1.26), 0.6);
 }
 
+list separator {
+    border: 0;
+    background: shade (@bg_color, 0.92);
+}
+
 treeview.view separator,
 treeview separator,
+list separator,
 separator,
 separator:hover {
     color: shade (@bg_color, 0.92);
@@ -1951,7 +1999,8 @@
 
 filechooser box.search-bar,
 #pathbarbox,
-placessidebar.sidebar {
+placessidebar.sidebar,
+placessidebar.sidebar list {
     background-color: shade (@bg_color, 0.95);
 
     color: @fg_color;
@@ -1960,21 +2009,32 @@
 
 filechooser:backdrop box.search-bar,
 #pathbarbox:backdrop,
-placessidebar.sidebar:backdrop {
+.sidebar list:backdrop,
+placessidebar.sidebar:backdrop,
+placessidebar.sidebar list:backdrop {
     color: mix (@fg_color, shade (@bg_color, 0.95), 0.2);
     text-shadow: 0 1px shade (shade (@bg_color, 0.95), 1.02);
 }
 
-placessidebar.sidebar row {
+placessidebar.sidebar row,
+placessidebar.sidebar list row,
+.sidebar list {
     min-height: 30px;
 }
 
-placessidebar.sidebar row:selected {
+placessidebar.sidebar list row.activatable:hover:not(:selected),
+placessidebar.sidebar list row.has-open-popup {
+    background-color: shade (shade (@bg_color, 0.95), 0.965);
+}
+
+placessidebar.sidebar row:selected,
+placessidebar.sidebar list row:selected {
     color: @selected_fg_color;
     text-shadow: 0 1px shade (@selected_bg_color, 0.7);
 }
 
-placessidebar.sidebar row:selected:backdrop {
+placessidebar.sidebar row:selected:backdrop,
+placessidebar.sidebar list row:selected:backdrop {
     background-image: -gtk-gradient (linear, left top, left bottom,
                                      from (shade (shade (@bg_color, 0.95), 0.94)),
                                      to (shade (shade (@bg_color, 0.95), 0.86)));
@@ -1984,11 +2044,39 @@
     text-shadow: 0 1px shade (shade (@bg_color, 0.95), 0.96);
 }
 
-placessidebar.sidebar .sidebar-icon {
+placessidebar.sidebar .sidebar-icon,
+placessidebar.sidebar list .sidebar-icon {
     padding-left: 10px;
     padding-right: 10px;
 }
 
+.sidebar,
+paned .sidebar.left,
+paned .sidebar.right,
+paned .sidebar.left:dir(rtl),
+paned .sidebar:dir(rtl),
+paned .sidebar:dir(ltr),
+paned .sidebar {
+  border-style: none;
+  background-color: transparent;
+}
+
+stacksidebar.sidebar:dir(ltr) list,
+stacksidebar.sidebar.left list,
+stacksidebar.sidebar.left:dir(rtl) list,
+.sidebar:dir(ltr),
+.sidebar.left,
+.sidebar.left:dir(rtl) {
+    border-right: 1px solid shade (@bg_color, 0.82);
+    border-left-style: none;
+}
+
+stacksidebar.sidebar:dir(rtl) list .sidebar:dir(rtl),
+stacksidebar.sidebar.right list .sidebar:dir(rtl),
+.sidebar.right {
+    border-left: 1px solid shade (@bg_color, 0.82);
+    border-right-style: none;
+}
 
 /**************
  * spinbutton *
@@ -2885,7 +2973,7 @@
 }
 
 /* inline-toolbar */
-.inline-toolbar.toolbar {
+.inline-toolbar {
     -GtkToolbar-button-relief: normal;
 
     border-right-color: shade (@bg_color, 0.86);
@@ -2904,6 +2992,11 @@
     padding: 3px 4px 4px 4px;
 }
 
+stack .inline-toolbar {
+    background-color: shade (#f2f1ef, 0.97);
+    background-image: none;
+}
+
 .inline-toolbar.toolbar button {
     padding: 4px;
 
@@ -3037,11 +3130,20 @@
     background-image: none;
 }
 
-.view row:nth-child(odd) {
+.view row:nth-child(odd):not(:selected) {
     /* zebra stripping, see LP#945430 */
     background-color: shade (@base_color, 0.965);
 }
 
+.view row.activatable:hover,
+.view row.has-open-popup {
+    background-color: shade (@base_color, 0.92);
+}
+
+.view row ~ separator {
+    background-color: shade (@bg_color, 0.83);
+}
+
 treeview.view {
 	border-width: 1px;
 	border-color: @selected_bg_color;
@@ -3308,6 +3410,13 @@
 /*****************************************************************************
  * states [please keep this section at the end of the file (CSS precedence)] *
  *****************************************************************************/
+*:selected *:disabled:not(:backdrop),
+*:selected .dim-label:not(:backdrop) {
+    color: inherit;
+    opacity: 0.65;
+    text-shadow: none;
+}
+
 .dim-label,
 *:disabled {
     color: shade (@bg_color, 0.6);
@@ -3320,6 +3429,7 @@
 label selection:hover,
 entry selection,
 .view text selection,
+list row:selected,
 *:selected,
 *:selected:focus {
     background-color: alpha (@selected_bg_color, 0.9);
@@ -3329,6 +3439,7 @@
 
 entry selection:backdrop,
 .view text selection:backdrop,
+list row:selected:backdrop,
 *:selected:backdrop,
 *:selected:focus:backdrop {
     background-color: alpha (@backdrop_selected_bg_color, 0.9);

=== modified file 'Radiance/gtk-3.20/gtk-widgets.css'
--- Radiance/gtk-3.20/gtk-widgets.css	2018-01-22 12:01:07 +0000
+++ Radiance/gtk-3.20/gtk-widgets.css	2018-03-22 02:10:57 +0000
@@ -553,6 +553,44 @@
     color: @backdrop_selected_fg_color;
 }
 
+stacksidebar row {
+    padding: 10px 4px;
+}
+
+stacksidebar row > label {
+    padding-left: 6px;
+    padding-right: 6px;
+}
+
+stacksidebar row.needs-attention > label {
+    background-size: 6px 6px, 0 0;
+}
+
+list row {
+    border-image: none;
+}
+
+list row:selected,
+list row:selected:backdrop {
+    background-image: none;
+    border: none;
+}
+
+list row.activatable:hover,
+list row.has-open-popup {
+    background-color: shade (@base_color, 0.965);
+}
+
+list row.activatable:hover:selected,
+list row.has-open-popup:selected {
+    background-color: shade (alpha (@selected_bg_color, 0.9), 0.965);
+}
+
+list row.activatable:selected:backdrop:hover,
+list row.has-open-popup:selected:backdrop {
+    background-color: shade (alpha (@backdrop_selected_bg_color, 0.9), 0.965);
+}
+
 /*******************
  * check and radio *
  *******************/
@@ -590,6 +628,7 @@
     background: none;
 }
 
+list separator,
 menu radio * {
     box-shadow: none;
 }
@@ -807,7 +846,8 @@
 /*********
  * frame *
  *********/
-.frame {
+.frame,
+frame > border {
     border-radius: 3px;
     border-width: 1px;
     border-style: solid;
@@ -831,7 +871,8 @@
     background: none;
 }
 
-.frame.flat, frame border.flat {
+frame > border.flat,
+.frame.flat {
     border: none;
 }
 
@@ -848,7 +889,8 @@
  * iconview *
  ************/
 
-.view {
+.view,
+list {
     background-color: @base_color;
     color: @text_color;
 }
@@ -1041,7 +1083,7 @@
 .menubar {
     -GtkWidget-window-dragging: true;
 
-    background-color: @dark_bg_color;
+    background-color: shade (@dark_bg_color, 1.10);
     background-image: none;
     border-width: 0;
 
@@ -1893,8 +1935,14 @@
     border-right-color: alpha (shade (@bg_color, 1.26), 0.6);
 }
 
+list separator {
+    border: 0;
+    background: shade (@bg_color, 0.92);
+}
+
 treeview.view separator,
 treeview separator,
+list separator,
 separator,
 separator:hover {
     color: shade (@bg_color, 0.92);
@@ -1952,7 +2000,8 @@
 
 filechooser box.search-bar,
 #pathbarbox,
-placessidebar.sidebar {
+placessidebar.sidebar,
+placessidebar.sidebar list {
     background-color: shade (@bg_color, 0.95);
 
     color: @fg_color;
@@ -1961,21 +2010,32 @@
 
 filechooser:backdrop box.search-bar,
 #pathbarbox:backdrop,
-placessidebar.sidebar:backdrop {
+.sidebar list:backdrop,
+placessidebar.sidebar:backdrop,
+placessidebar.sidebar list:backdrop {
     color: mix (@fg_color, shade (@bg_color, 0.95), 0.2);
     text-shadow: 0 1px shade (shade (@bg_color, 0.95), 1.02);
 }
 
-placessidebar.sidebar row {
+placessidebar.sidebar row,
+placessidebar.sidebar list row,
+.sidebar list {
     min-height: 30px;
 }
 
-placessidebar.sidebar row:selected {
+placessidebar.sidebar list row.activatable:hover:not(:selected),
+placessidebar.sidebar list row.has-open-popup {
+    background-color: shade (shade (@bg_color, 0.95), 0.965);
+}
+
+placessidebar.sidebar row:selected,
+placessidebar.sidebar list row:selected {
     color: @selected_fg_color;
     text-shadow: 0 1px shade (@selected_bg_color, 0.7);
 }
 
-placessidebar.sidebar row:selected:backdrop {
+placessidebar.sidebar row:selected:backdrop,
+placessidebar.sidebar list row:selected:backdrop {
     background-image: -gtk-gradient (linear, left top, left bottom,
                                      from (shade (shade (@bg_color, 0.95), 0.94)),
                                      to (shade (shade (@bg_color, 0.95), 0.86)));
@@ -1985,11 +2045,39 @@
     text-shadow: 0 1px shade (shade (@bg_color, 0.95), 0.96);
 }
 
-placessidebar.sidebar .sidebar-icon {
+placessidebar.sidebar .sidebar-icon,
+placessidebar.sidebar list .sidebar-icon {
     padding-left: 10px;
     padding-right: 10px;
 }
 
+.sidebar,
+paned .sidebar.left,
+paned .sidebar.right,
+paned .sidebar.left:dir(rtl),
+paned .sidebar:dir(rtl),
+paned .sidebar:dir(ltr),
+paned .sidebar {
+  border-style: none;
+  background-color: transparent;
+}
+
+stacksidebar.sidebar:dir(ltr) list,
+stacksidebar.sidebar.left list,
+stacksidebar.sidebar.left:dir(rtl) list,
+.sidebar:dir(ltr),
+.sidebar.left,
+.sidebar.left:dir(rtl) {
+    border-right: 1px solid shade (@bg_color, 0.82);
+    border-left-style: none;
+}
+
+stacksidebar.sidebar:dir(rtl) list .sidebar:dir(rtl),
+stacksidebar.sidebar.right list .sidebar:dir(rtl),
+.sidebar.right {
+    border-left: 1px solid shade (@bg_color, 0.82);
+    border-right-style: none;
+}
 
 /**************
  * spinbutton *
@@ -2889,7 +2977,7 @@
 }
 
 /* inline-toolbar */
-.inline-toolbar.toolbar {
+.inline-toolbar {
     -GtkToolbar-button-relief: normal;
 
     border-right-color: shade (@bg_color, 0.86);
@@ -2908,6 +2996,11 @@
     padding: 3px 4px 4px 4px;
 }
 
+stack .inline-toolbar {
+    background-color: shade (#f2f1ef, 0.97);
+    background-image: none;
+}
+
 .inline-toolbar.toolbar button {
     padding: 4px;
 
@@ -3041,6 +3134,19 @@
     background-image: none;
 }
 
+.view row:nth-child(odd):not(:selected) {
+    background-color: shade (@base_color, 0.965);
+}
+
+.view row.activatable:hover,
+.view row.has-open-popup {
+    background-color: shade (@base_color, 0.92);
+}
+
+.view row ~ separator {
+    background-color: shade (@bg_color, 0.83);
+}
+
 treeview.view {
 	border-width: 1px;
 	border-color: @selected_bg_color;
@@ -3307,6 +3413,13 @@
 /*****************************************************************************
  * states [please keep this section at the end of the file (CSS precedence)] *
  *****************************************************************************/
+ *:selected *:disabled:not(:backdrop),
+ *:selected .dim-label:not(:backdrop) {
+    color: inherit;
+    opacity: 0.65;
+    text-shadow: none;
+}
+
 *:disabled {
     color: shade (@bg_color, 0.6);
     text-shadow: 0 1px alpha (shade (@bg_color, 1.25), 0.5);
@@ -3318,6 +3431,7 @@
 label selection:hover,
 entry selection,
 .view text selection,
+list row:selected,
 *:selected,
 *:selected:focus {
     background-color: alpha (@selected_bg_color, 0.9);
@@ -3327,6 +3441,7 @@
 
 entry selection:backdrop,
 .view text selection:backdrop,
+list row:selected:backdrop,
 *:selected:backdrop,
 *:selected:focus:backdrop {
     background-color: alpha (@backdrop_selected_bg_color, 0.9);