inline-toolbar: add styling for vertical inline toolbars

4 files changed, 150 insertions, 12 deletions

diff --git a/themes/Adwaita/gtk-3.0/gtk-widgets-backgrounds.css b/themes/Adwaita/gtk-3.0/gtk-widgets-backgrounds.css
index 4c9e1e36..2c7a10d5 100644
--- a/themes/Adwaita/gtk-3.0/gtk-widgets-backgrounds.css
+++ b/themes/Adwaita/gtk-3.0/gtk-widgets-backgrounds.css
@@ -208,6 +208,17 @@ GtkComboBox.combobox-entry .button:insensitive:backdrop,
     background-color: transparent;
 }
 
+.primary-toolbar .toolbar.vertical,
+.primary-toolbar.toolbar.vertical,
+.inline-toolbar.toolbar.vertical {
+    background-image: linear-gradient(to right,
+                                      @toolbar_gradient_a,
+                                      @toolbar_gradient_b 50%,
+                                      @toolbar_gradient_c
+                                      );
+    background-color: transparent;
+}
+
 /* Unfocused window primary and inline toolbars background */
 .primary-toolbar .toolbar:backdrop,
 .primary-toolbar.toolbar:backdrop,
diff --git a/themes/Adwaita/gtk-3.0/gtk-widgets-borders-dark.css b/themes/Adwaita/gtk-3.0/gtk-widgets-borders-dark.css
index 49ef1b79..72f59e40 100644
--- a/themes/Adwaita/gtk-3.0/gtk-widgets-borders-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-widgets-borders-dark.css
@@ -9,6 +9,9 @@ GtkComboBox.combobox-entry .button,
 .button.default:insensitive,
 .spinbutton.vertical .button:active,
 .spinbutton.vertical .button:insensitive,
+.inline-toolbar.toolbar.vertical .button:active,
+.inline-toolbar.toolbar.vertical .button:insensitive,
+.inline-toolbar.toolbar.vertical .button.default:insensitive,
 .trough,
 .trough.highlight,
 GtkSwitch.trough,
@@ -32,6 +35,7 @@ GtkSwitch.trough:active:insensitive {
 .entry:focus,
 GtkComboBox.combobox-entry .entry:focus,
 .button.default:active,
+.inline-toolbar.toolbar.vertical .button.default:active,
 GtkSwitch.trough:active { 
     border-image: url("borders/generic-border-focused-dark.png") 3 3 4 3 / 3px 3px 4px 3px stretch;
     border-radius: 3px;
@@ -42,7 +46,8 @@ GtkSwitch.trough:active {
 
 /* generic button borders */
 .button,
-.spinbutton.vertical .button {
+.spinbutton.vertical .button,
+.inline-toolbar.toolbar.vertical .button {
     border-image: url("borders/button-border-dark.png") 3 3 4 3 / 3px 3px 4px 3px stretch;
     border-radius: 3px;
     border-width: 1px 1px 2px 1px;
@@ -198,7 +203,10 @@ GtkComboBox.combobox-entry .entry:backdrop,
 GtkComboBox.combobox-entry .button:backdrop,
 .entry:backdrop,
 GtkSwitch.trough:backdrop,
-.trough:backdrop {
+.trough:backdrop,
+.inline-toolbar.toolbar.vertical .button:backdrop,
+.inline-toolbar.toolbar.vertical .button:backdrop:insensitive,
+.inline-toolbar.toolbar.vertical .button:backdrop:active {
     border-image: url("borders/generic-border-backdrop-dark.png") 3 3 4 3 / 3px 3px 4px 3px stretch;
     border-radius: 3px;
     border-width: 1px 1px 2px 1px;
diff --git a/themes/Adwaita/gtk-3.0/gtk-widgets-borders.css b/themes/Adwaita/gtk-3.0/gtk-widgets-borders.css
index c3da7490..5aabe24b 100644
--- a/themes/Adwaita/gtk-3.0/gtk-widgets-borders.css
+++ b/themes/Adwaita/gtk-3.0/gtk-widgets-borders.css
@@ -9,6 +9,9 @@ GtkComboBox.combobox-entry .button,
 .button.default:insensitive,
 .spinbutton.vertical .button:active,
 .spinbutton.vertical .button:insensitive,
+.inline-toolbar.toolbar.vertical .button:active,
+.inline-toolbar.toolbar.vertical .button:insensitive,
+.inline-toolbar.toolbar.vertical .button.default:insensitive,
 .trough,
 .trough.highlight,
 GtkSwitch.trough,
@@ -32,6 +35,7 @@ GtkSwitch.trough:active:insensitive {
 .entry:focus,
 GtkComboBox.combobox-entry .entry:focus,
 .button.default:active,
+.inline-toolbar.toolbar.vertical .button.default:active,
 GtkSwitch.trough:active { 
     border-image: url("borders/generic-border-focused.png") 3 3 4 3 / 3px 3px 4px 3px stretch;
     border-radius: 3px;
@@ -42,7 +46,8 @@ GtkSwitch.trough:active {
 
 /* generic button borders */
 .button,
-.spinbutton.vertical .button {
+.spinbutton.vertical .button,
+.inline-toolbar.toolbar.vertical .button {
     border-image: url("borders/button-border.png") 3 3 4 3 / 3px 3px 4px 3px stretch;
     border-radius: 3px;
     border-width: 1px 1px 2px 1px;
@@ -198,7 +203,10 @@ GtkComboBox.combobox-entry .entry:backdrop,
 GtkComboBox.combobox-entry .button:backdrop,
 .entry:backdrop,
 GtkSwitch.trough:backdrop,
-.trough:backdrop {
+.trough:backdrop,
+.inline-toolbar.toolbar.vertical .button:backdrop,
+.inline-toolbar.toolbar.vertical .button:backdrop:insensitive,
+.inline-toolbar.toolbar.vertical .button:backdrop:active {
     border-image: url("borders/generic-border-backdrop.png") 3 3 4 3 / 3px 3px 4px 3px stretch;
     border-radius: 3px;
     border-width: 1px 1px 2px 1px;
diff --git a/themes/Adwaita/gtk-3.0/gtk-widgets.css b/themes/Adwaita/gtk-3.0/gtk-widgets.css
index 9972d958..14407bc6 100644
--- a/themes/Adwaita/gtk-3.0/gtk-widgets.css
+++ b/themes/Adwaita/gtk-3.0/gtk-widgets.css
@@ -1395,31 +1395,45 @@ GtkComboBox.combobox-entry .button {
 }
 
 /* Linked button shadows (vertical) */
-.linked.vertical .button {
+.linked.vertical .button,
+.inline-toolbar.toolbar.vertical .button,
+.inline-toolbar.toolbar.vertical GtkToolButton > .button {
     box-shadow: inset 0 1px @inset_light_color, inset 0 -1px @inset_dark_color;
 }
 
-.linked.vertical .button:first-child {
+.linked.vertical .button:first-child,
+.inline-toolbar.toolbar.vertical .button:first-child,
+.inline-toolbar.toolbar.vertical GtkToolButton:first-child > .button {
     box-shadow: inset 0 -1px @inset_dark_color;
 }
 
-.linked.vertical .button:last-child {
+.linked.vertical .button:last-child,
+.inline-toolbar.toolbar.vertical .button:last-child,
+.inline-toolbar.toolbar.vertical GtkToolButton:last-child > .button {
     box-shadow: inset 0 -1px @inset_light_color;
 }
 
-.linked.vertical .button:active {
+.linked.vertical .button:active,
+.inline-toolbar.toolbar.vertical .button:active,
+.inline-toolbar.toolbar.vertical GtkToolButton > .button:active {
     box-shadow: inset 0 1px @inset_dark_color, inset 0 -1px @inset_dark_color;
 }
 
-.linked.vertical .button:insensitive {
+.linked.vertical .button:insensitive,
+.inline-toolbar.toolbar.vertical .button:insensitive,
+.inline-toolbar.toolbar.vertical GtkToolButton > .button:insensitive {
     box-shadow: inset 0 -1px @inset_dark_color;
 }
 
-.linked.vertical .button:backdrop {
+.linked.vertical .button:backdrop,
+.inline-toolbar.toolbar.vertical .button:backdrop,
+.inline-toolbar.toolbar.vertical GtkToolButton > .button:backdrop {
     box-shadow: inset 0 -1px @unfocused_borders;
 }
 
-.linked.vertical .button:insensitive:backdrop {
+.linked.vertical .button:insensitive:backdrop,
+.inline-toolbar.toolbar.vertical .button:insensitive:backdrop,
+.inline-toolbar.toolbar.vertical GtkToolButton > .button:insensitive:backdrop {
     box-shadow: inset 0 -1px @unfocused_insensitive_borders;
 }
 
@@ -1428,7 +1442,19 @@ GtkComboBox.combobox-entry .button {
 .linked.vertical .button:insensitive:last-child,
 .linked.vertical .button:insensitive:backdrop:last-child,
 .linked.vertical .button:backdrop:only-child,
-.linked.vertical .button:backdrop:insensitive:only-child {
+.linked.vertical .button:backdrop:insensitive:only-child,
+.inline-toolbar.toolbar.vertical .button:backdrop:last-child,
+.inline-toolbar.toolbar.vertical .button:insensitive:last-child,
+.inline-toolbar.toolbar.vertical .button:backdrop:insensitive:last-child,
+.inline-toolbar.toolbar.vertical .button:only-child,
+.inline-toolbar.toolbar.vertical .button:backdrop:only-child,
+.inline-toolbar.toolbar.vertical .button:backdrop:insensitive:only-child,
+.inline-toolbar.toolbar.vertical GtkToolButton:last-child > .button:backdrop,
+.inline-toolbar.toolbar.vertical GtkToolButton:last-child > .button:insensitive,
+.inline-toolbar.toolbar.vertical GtkToolButton:last-child > .button:backdrop:insensitive,
+.inline-toolbar.toolbar.vertical GtkToolButton:only-child > .button,
+.inline-toolbar.toolbar.vertical GtkToolButton:only-child > .button:backdrop,
+.inline-toolbar.toolbar.vertical GtkToolButton:only-child > .button:backdrop:insensitive {
     box-shadow: none;
 }
 
@@ -1578,6 +1604,84 @@ GtkComboBox.combobox-entry .button {
     border-top-left-radius: 0;
 }
 
+/* Vertical inline toolbars */
+
+/* Middle button */
+.inline-toolbar.toolbar.vertical .button,
+.inline-toolbar.toolbar.vertical .button:active,
+.inline-toolbar.toolbar.vertical .button:insensitive,
+.inline-toolbar.toolbar.vertical .button:backdrop,
+.inline-toolbar.toolbar.vertical .button:backdrop:active,
+.inline-toolbar.toolbar.vertical .button:backdrop:insensitive,
+.inline-toolbar.toolbar.vertical GtkToolButton > .button,
+.inline-toolbar.toolbar.vertical GtkToolButton > .button:active,
+.inline-toolbar.toolbar.vertical GtkToolButton > .button:insensitive,
+.inline-toolbar.toolbar.vertical GtkToolButton > .button:backdrop,
+.inline-toolbar.toolbar.vertical GtkToolButton > .button:backdrop:active,
+.inline-toolbar.toolbar.vertical GtkToolButton > .button:backdrop:insensitive {
+    border-bottom-width: 0;
+    border-top-width: 0;
+    border-image-width: 0 3px 0 3px;
+    border-radius: 0;
+}
+
+/* Topmost button */
+.inline-toolbar.toolbar.vertical .button:first-child,
+.inline-toolbar.toolbar.vertical .button:active:first-child,
+.inline-toolbar.toolbar.vertical .button:insensitive:first-child,
+.inline-toolbar.toolbar.vertical .button:backdrop:first-child,
+.inline-toolbar.toolbar.vertical .button:backdrop:active:first-child,
+.inline-toolbar.toolbar.vertical .button:backdrop:insensitive:first-child,
+.inline-toolbar.toolbar.vertical GtkToolButton:first-child > .button,
+.inline-toolbar.toolbar.vertical GtkToolButton:first-child > .button:active,
+.inline-toolbar.toolbar.vertical GtkToolButton:first-child > .button:insensitive,
+.inline-toolbar.toolbar.vertical GtkToolButton:first-child > .button:backdrop,
+.inline-toolbar.toolbar.vertical GtkToolButton:first-child > .button:backdrop:active,
+.inline-toolbar.toolbar.vertical GtkToolButton:first-child > .button:backdrop:insensitive {
+    border-width: 1px 1px 0 1px;
+    border-image-width: 3px 3px 0 3px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+/* Bottommost button */
+.inline-toolbar.toolbar.vertical .button:last-child,
+.inline-toolbar.toolbar.vertical .button:active:last-child,
+.inline-toolbar.toolbar.vertical .button:insensitive:last-child,
+.inline-toolbar.toolbar.vertical .button:backdrop:last-child,
+.inline-toolbar.toolbar.vertical .button:backdrop:active:last-child,
+.inline-toolbar.toolbar.vertical .button:backdrop:insensitive:last-child,
+.inline-toolbar.toolbar.vertical GtkToolButton:last-child > .button,
+.inline-toolbar.toolbar.vertical GtkToolButton:last-child > .button:active,
+.inline-toolbar.toolbar.vertical GtkToolButton:last-child > .button:insensitive,
+.inline-toolbar.toolbar.vertical GtkToolButton:last-child > .button:backdrop,
+.inline-toolbar.toolbar.vertical GtkToolButton:last-child > .button:backdrop:active,
+.inline-toolbar.toolbar.vertical GtkToolButton:last-child > .button:backdrop:insensitive {
+    border-width: 0 1px 2px 1px;
+    border-image-width: 0 3px 4px 3px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+/* Single button */
+.inline-toolbar.toolbar.vertical .button:only-child,
+.inline-toolbar.toolbar.vertical .button:active:only-child,
+.inline-toolbar.toolbar.vertical .button:insensitive:only-child,
+.inline-toolbar.toolbar.vertical .button:backdrop:only-child,
+.inline-toolbar.toolbar.vertical .button:backdrop:active:only-child,
+.inline-toolbar.toolbar.vertical .button:backdrop:insensitive:only-child,
+.inline-toolbar.toolbar.vertical GtkToolButton:only-child > .button,
+.inline-toolbar.toolbar.vertical GtkToolButton:only-child > .button:active,
+.inline-toolbar.toolbar.vertical GtkToolButton:only-child > .button:insensitive,
+.inline-toolbar.toolbar.vertical GtkToolButton:only-child > .button:backdrop,
+.inline-toolbar.toolbar.vertical GtkToolButton:only-child > .button:backdrop:active,
+.inline-toolbar.toolbar.vertical GtkToolButton:only-child > .button:backdrop:insensitive {
+    border-top-width: 1px;
+    border-bottom-width: 2px;
+    border-image-width: 3px 3px 3px 4px;
+    border-radius: 3px;
+}
+
 GtkLinkButton.button,
 GtkLinkButton.button *:active {
     text-shadow: none;
@@ -2423,6 +2527,13 @@ GtkCheckButton:selected:focus {
     border-radius: 0 0 3px 3px;
 }
 
+.inline-toolbar.toolbar.vertical:last-child {
+    border-left-width: 0;
+    padding-left: 4px;
+
+    border-radius: 0;
+}
+
 /***********
  * Sidebar *
  ***********/