Merge lp:~3v1n0/ubuntu-themes/osd-scrollbars-improvements into lp:ubuntu-themes

[Marco Trevisan (Treviño)]

Ambiance, Radiance: make overlay scrollbars too look more like the ubuntu designed ones

 - Remove the ugly background-gradient (and the highly rounded corners)
 - Show scrollbar track background only when using it (hovering or dragging)
 - Use some margin instead of resizing the scrollbar to get some proximity support on
   mouse enter as well (it will be shown when mouse is near)
 - Add some threshold pixels (2 now) for grabbing the slider
 - Add backdrop version

This is the result: https://transfer.sh/yS1Zs/out-18.ogv
Threshold might be reduced if we want.

I've made also a version that shows the track only when mouse hovers it, but it needs a gtk patch.

It would be nice to add some transitions on bg changes, but for some reason they don't seem to work.

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:455
http://jenkins.qa.ubuntu.com/job/ubuntu-themes-ci/110/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-vivid-amd64-ci/24
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-vivid-armhf-ci/24
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-vivid-i386-ci/24

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-themes-ci/110/rebuild

review: Approve (continuous-integration)

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:456
http://jenkins.qa.ubuntu.com/job/ubuntu-themes-ci/111/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-vivid-amd64-ci/25
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-vivid-armhf-ci/25
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-vivid-i386-ci/25

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-themes-ci/111/rebuild

review: Approve (continuous-integration)

[Lars Karlitski (larsu)]

Thanks for your work. I do like these better than what I came up with. However, we discussed on irc that we'll wait for an updated design before merging this.

Please link this request to bug #1450747.

[Lars Karlitski (larsu)]

We're not going to get any input from design before UI freeze, so let's go with this.

Thanks again!

review: Approve

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

gnome-terminal needed some custom love... Fixed (using some nicer colors for it).

You can test it at https://launchpad.net/~ci-train-ppa-service/+archive/ubuntu/landing-029

[lp:~3v1n0/ubuntu-themes/osd-scrollbars-improvements]

461. By Marco Trevisan (Treviño) on 2015-09-09

Scrollbar: ensure we've top-margin on horizontal sliders

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:460
http://jenkins.qa.ubuntu.com/job/ubuntu-themes-ci/114/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-vivid-amd64-ci/28
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-vivid-armhf-ci/28
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-vivid-i386-ci/28

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-themes-ci/114/rebuild

review: Approve (continuous-integration)

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:461
http://jenkins.qa.ubuntu.com/job/ubuntu-themes-ci/115/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-vivid-amd64-ci/29
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-vivid-armhf-ci/29
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-vivid-i386-ci/29

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-themes-ci/115/rebuild

review: Approve (continuous-integration)

[lp:~3v1n0/ubuntu-themes/osd-scrollbars-improvements]

462. By Marco Trevisan (Treviño) on 2015-09-09

GnomeTerminal: use less custom theming for gnome-terminal

We only need some upstream patching, see gnome bug
https://bugzilla.gnome.org/show_bug.cgi?id=754796

[PS Jenkins bot (ps-jenkins)]

PASSED: Continuous integration, rev:462
http://jenkins.qa.ubuntu.com/job/ubuntu-themes-ci/116/
Executed test runs:
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-vivid-amd64-ci/30
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-vivid-armhf-ci/30
    SUCCESS: http://jenkins.qa.ubuntu.com/job/ubuntu-themes-vivid-i386-ci/30

Click here to trigger a rebuild:
http://s-jenkins.ubuntu-ci:8080/job/ubuntu-themes-ci/116/rebuild

review: Approve (continuous-integration)

=== modified file 'Ambiance/gtk-3.0/apps/gnome-terminal.css'
--- Ambiance/gtk-3.0/apps/gnome-terminal.css	2015-01-15 13:09:21 +0000
+++ Ambiance/gtk-3.0/apps/gnome-terminal.css	2015-09-09 18:23:26 +0000
@@ -1,8 +1,19 @@
 /* gnome-terminal */
+@define-color terminal_bg #300a24;
+
 TerminalScreen {
     -TerminalScreen-background-darkness: 0.95;
-
-    background-color: #300a24;
-
+    background-color: @terminal_bg;
     color: #fff;
 }
+
+TerminalScreenContainer .scrollbar:hover:not(.slider),
+TerminalScreenContainer .scrollbar.dragging:not(.slider) {
+    background-color: alpha(@scrollbar_track_color, 0.4);
+}
+
+/* Since .hovering class is not working here, we always use the same radius */
+TerminalScreenContainer .scrollbar.slider.hovering,
+TerminalScreenContainer .scrollbar.slider.dragging {
+    border-radius: 1px;
+}

=== modified file 'Ambiance/gtk-3.0/gtk-main.css'
--- Ambiance/gtk-3.0/gtk-main.css	2015-09-03 09:05:55 +0000
+++ Ambiance/gtk-3.0/gtk-main.css	2015-09-09 18:23:26 +0000
@@ -40,6 +40,7 @@
 /*@define-color backdrop_dark_bg_color mix (@dark_bg_color, @dark_fg_color, 0.75);*/
 @define-color backdrop_selected_bg_color shade (@bg_color, 0.92);
 @define-color backdrop_selected_fg_color @fg_color;
+@define-color backdrop_filling_bg #b0b0b0;
 
 @define-color focus_color alpha (@selected_bg_color, 0.5);
 @define-color focus_bg_color alpha (@selected_bg_color, 0.1);
@@ -50,6 +51,8 @@
 @define-color osd_bg_color alpha(#202526, 0.7);
 @define-color osd_border_color alpha(black, 0.7);
 
+@define-color scrollbar_track_color mix(@base_color, black, 0.1); /* #e6e6e6 */
+
 @import url("gtk-widgets-borders.css");
 @import url("gtk-widgets-assets.css");
 @import url("gtk-widgets.css");

=== modified file 'Ambiance/gtk-3.0/gtk-widgets.css'
--- Ambiance/gtk-3.0/gtk-widgets.css	2015-07-21 09:53:24 +0000
+++ Ambiance/gtk-3.0/gtk-widgets.css	2015-09-09 18:23:26 +0000
@@ -983,7 +983,7 @@
     border-radius: 8px;
     border-width: 0px;
     background-image: none;
-    background-color: #b0b0b0;
+    background-color: @backdrop_filling_bg;
 }
 
 .scale.highlight.left:insensitive {
@@ -1050,8 +1050,8 @@
 .level-bar.fill-block:backdrop,
 .level-bar.fill-block.level-high:backdrop,
 .level-bar.fill-block.level-low:backdrop {
-    background-color: #b0b0b0;
-    border-color: #b0b0b0;
+    background-color: @backdrop_filling_bg;
+    border-color: @backdrop_filling_bg;
     background-image: none;
 }
 
@@ -1140,26 +1140,90 @@
     -GtkScrollbar-has-forward-stepper: 0;
     -GtkScrollbar-trough-border: 0;
     -GtkScrollbar-min-slider-length: 31;
-    -GtkRange-slider-width: 3;
+    -GtkRange-slider-width: 10;
 
+    background-image: none;
+    background-size: 0;
     border: none;
+    border-radius: 0;
 }
 
-.scrollbar.hovering,
+.scrollbar:hover,
 .scrollbar.dragging {
-    -GtkRange-slider-width: 10;
-    background-color: alpha(@bg_color, 0.8);
+    background-color: @scrollbar_track_color;
+}
+
+.scrollbar:hover:backdrop,
+.scrollbar.dragging:backdrop {
+    background-color: @backdrop_selected_bg_color;
+}
+
+/* Adding margins, so actual visible size is: -GtkRange-slider-width - margin
+ * this allows to keep the slider smaller, but keeping few threshold pixels
+ */
+.scrollbar.vertical:hover:dir(ltr),
+.scrollbar.vertical.dragging:dir(ltr) {
+    margin-left: 2px;
+}
+
+.scrollbar.vertical:hover:dir(rtl),
+.scrollbar.vertical.dragging:dir(rtl) {
+    margin-right: 2px;
+}
+
+.scrollbar.horizontal:hover,
+.scrollbar.horizontal.dragging,
+.scrollbar.horizontal.slider:hover,
+.scrollbar.horizontal.slider.dragging {
+    margin-top: 2px;
 }
 
 .scrollbar.slider {
     background-color: alpha(@selected_bg_color, 0.8);
-    border-radius: 8px;
+    border-radius: 1px;
+}
+
+.scrollbar.slider.hovering,
+.scrollbar.slider.dragging {
+    border-radius: 2px;
+    margin: 0;
+}
+
+/* Adding margins, so actual visible size is: -GtkRange-slider-width - margin
+ * this allows to define some kind of proximity effect also on mouse-enter
+ */
+.scrollbar.slider.vertical:dir(ltr):not(:hover):not(.dragging) {
+    margin-left: 7px;
+}
+
+.scrollbar.slider.vertical:dir(rtl):not(:hover):not(.dragging) {
+    margin-right: 7px;
+}
+
+.scrollbar.slider.horizontal:not(:hover):not(.dragging) {
+    margin-top: 7px;
+}
+
+.scrollbar.slider:hover {
+    background-color: alpha(@selected_bg_color, 0.85);
 }
 
 .scrollbar.slider:active {
     background-color: @selected_bg_color;
 }
 
+.scrollbar.slider:backdrop {
+    background-color: alpha(@backdrop_filling_bg, 0.8);
+}
+
+.scrollbar.slider:hover:backdrop {
+    background-color: alpha(@backdrop_filling_bg, 0.85);
+}
+
+.scrollbar.slider:active:backdrop {
+    background-color: @backdrop_filling_bg;
+}
+
 /*******************
  * scrolled window *
  *******************/

=== modified file 'Radiance/gtk-3.0/apps/gnome-terminal.css'
--- Radiance/gtk-3.0/apps/gnome-terminal.css	2011-06-24 13:21:08 +0000
+++ Radiance/gtk-3.0/apps/gnome-terminal.css	2015-09-09 18:23:26 +0000
@@ -1,7 +1,19 @@
 /* gnome-terminal */
+@define-color terminal_bg #300a24;
+
 TerminalScreen {
     -TerminalScreen-background-darkness: 0.95;
-    background-color: #300a24;
+    background-color: @terminal_bg;
     color: #fff;
 }
 
+TerminalScreenContainer .scrollbar:hover:not(.slider),
+TerminalScreenContainer .scrollbar.dragging:not(.slider) {
+    background-color: alpha(@scrollbar_track_color, 0.4);
+}
+
+/* Since .hovering class is not working here, we always use the same radius */
+TerminalScreenContainer .scrollbar.slider.hovering,
+TerminalScreenContainer .scrollbar.slider.dragging {
+    border-radius: 1px;
+}

=== modified file 'Radiance/gtk-3.0/gtk-main.css'
--- Radiance/gtk-3.0/gtk-main.css	2015-09-03 09:05:55 +0000
+++ Radiance/gtk-3.0/gtk-main.css	2015-09-09 18:23:26 +0000
@@ -39,6 +39,7 @@
 @define-color backdrop_dark_fg_color mix (@dark_bg_color, @dark_fg_color, 0.75);
 @define-color backdrop_selected_bg_color shade (@bg_color, 0.92);
 @define-color backdrop_selected_fg_color @fg_color;
+@define-color backdrop_filling_bg #b0b0b0;
 
 @define-color focus_color alpha (@selected_bg_color, 0.5);
 @define-color focus_bg_color alpha (@selected_bg_color, 0.1);
@@ -49,6 +50,8 @@
 @define-color osd_bg_color alpha(#202526, 0.7);
 @define-color osd_border_color alpha(black, 0.7);
 
+@define-color scrollbar_track_color mix(@base_color, black, 0.1); /* #e6e6e6 */
+
 @import url("gtk-widgets-borders.css");
 @import url("gtk-widgets-borders-radiance.css");
 @import url("gtk-widgets-assets.css");

=== modified file 'Radiance/gtk-3.0/gtk-widgets.css'
--- Radiance/gtk-3.0/gtk-widgets.css	2015-07-21 09:53:24 +0000
+++ Radiance/gtk-3.0/gtk-widgets.css	2015-09-09 18:23:26 +0000
@@ -1006,7 +1006,7 @@
     border-radius: 8px;
     border-width: 0px;
     background-image: none;
-    background-color: #b0b0b0;
+    background-color: @backdrop_filling_bg;
 }
 
 .scale.highlight.left:insensitive {
@@ -1073,8 +1073,8 @@
 .level-bar.fill-block:backdrop,
 .level-bar.fill-block.level-high:backdrop,
 .level-bar.fill-block.level-low:backdrop {
-    background-color: #b0b0b0;
-    border-color: #b0b0b0;
+    background-color: @backdrop_filling_bg;
+    border-color: @backdrop_filling_bg;
     background-image: none;
 }
 
@@ -1162,26 +1162,90 @@
     -GtkScrollbar-has-forward-stepper: 0;
     -GtkScrollbar-trough-border: 0;
     -GtkScrollbar-min-slider-length: 31;
-    -GtkRange-slider-width: 3;
+    -GtkRange-slider-width: 10;
 
+    background-image: none;
+    background-size: 0;
     border: none;
+    border-radius: 0;
 }
 
-.scrollbar.hovering,
+.scrollbar:hover,
 .scrollbar.dragging {
-    -GtkRange-slider-width: 10;
-    background-color: alpha(@bg_color, 0.8);
+    background-color: @scrollbar_track_color;
+}
+
+.scrollbar:hover:backdrop,
+.scrollbar.dragging:backdrop {
+    background-color: @backdrop_selected_bg_color;
+}
+
+/* Adding margins, so actual visible size is: -GtkRange-slider-width - margin
+ * this allows to keep the slider smaller, but keeping few threshold pixels
+ */
+.scrollbar.vertical:hover:dir(ltr),
+.scrollbar.vertical.dragging:dir(ltr) {
+    margin-left: 2px;
+}
+
+.scrollbar.vertical:hover:dir(rtl),
+.scrollbar.vertical.dragging:dir(rtl) {
+    margin-right: 2px;
+}
+
+.scrollbar.horizontal:hover,
+.scrollbar.horizontal.dragging,
+.scrollbar.horizontal.slider:hover,
+.scrollbar.horizontal.slider.dragging {
+    margin-top: 2px;
 }
 
 .scrollbar.slider {
     background-color: alpha(@selected_bg_color, 0.8);
-    border-radius: 8px;
+    border-radius: 1px;
+}
+
+.scrollbar.slider.hovering,
+.scrollbar.slider.dragging {
+    border-radius: 2px;
+    margin: 0;
+}
+
+/* Adding margins, so actual visible size is: -GtkRange-slider-width - margin
+ * this allows to define some kind of proximity effect also on mouse-enter
+ */
+.scrollbar.slider.vertical:dir(ltr):not(:hover):not(.dragging) {
+    margin-left: 7px;
+}
+
+.scrollbar.slider.vertical:dir(rtl):not(:hover):not(.dragging) {
+    margin-right: 7px;
+}
+
+.scrollbar.slider.horizontal:not(:hover):not(.dragging) {
+    margin-top: 7px;
+}
+
+.scrollbar.slider:hover {
+    background-color: alpha(@selected_bg_color, 0.85);
 }
 
 .scrollbar.slider:active {
     background-color: @selected_bg_color;
 }
 
+.scrollbar.slider:backdrop {
+    background-color: alpha(@backdrop_filling_bg, 0.8);
+}
+
+.scrollbar.slider:hover:backdrop {
+    background-color: alpha(@backdrop_filling_bg, 0.85);
+}
+
+.scrollbar.slider:active:backdrop {
+    background-color: @backdrop_filling_bg;
+}
+
 /*******************
  * scrolled window *
  *******************/