style vertically linked buttons and entries

Vertex-gtk/gtk-3.0/borders.txt

@@ -12,6 +12,18 @@ right-button-border
 left-button-active-border
 middle-button-active-border
 right-button-active-border
+top-vertical-button-border
+middle-vertical-button-border
+bottom-vertical-button-border
+top-vertical-button-active-border
+middle-vertical-button-active-border
+bottom-vertical-button-active-border
+top-vertical-entry-border
+middle-vertical-entry-border
+bottom-vertical-entry-border
+top-vertical-entry-border-focused
+middle-vertical-entry-border-focused
+bottom-vertical-entry-border-focused
 generic-border
 generic-border-focused
 tooltip-generic-border
@@ -45,6 +57,18 @@ right-button-border-dark
 left-button-active-border-dark
 middle-button-active-border-dark
 right-button-active-border-dark
+top-vertical-button-border-dark
+middle-vertical-button-border-dark
+bottom-vertical-button-border-dark
+top-vertical-button-active-border-dark
+middle-vertical-button-active-border-dark
+bottom-vertical-button-active-border-dark
+top-vertical-entry-border-dark
+middle-vertical-entry-border-dark
+bottom-vertical-entry-border-dark
+top-vertical-entry-border-focused-dark
+middle-vertical-entry-border-focused-dark
+bottom-vertical-entry-border-focused-dark
 generic-border-dark
 generic-border-focused-dark
 trough-border-dark

Vertex-gtk/gtk-3.0/gtk-widgets-borders-dark.css

@@ -38,6 +38,49 @@
   border-top-left-radius: 0;
 }
 
+.linked.vertical .entry, 
+.linked.vertical .entry:insensitive {
+  border-image: -gtk-scaled(url("borders/middle-vertical-entry-border-dark.png"),url("borders/[email protected]")) 1 2 1 2 / 1px 2px 1px 2px stretch;
+  border-radius: 0;
+  border-width: 0 1px 0 1px;
+  border-style: solid;
+  border-color: transparent;
+}
+
+.linked.vertical .entry:focus {
+  border-image: -gtk-scaled(url("borders/middle-vertical-entry-border-focused-dark.png"),url("borders/[email protected]")) 2 3 2 3 / 2px 3px 2px 3px stretch;
+}
+
+.linked.vertical .entry:first-child, 
+.linked.vertical .entry:first-child:insensitive, 
+.linked.vertical > GtkComboBox.combobox-entry .entry:first-child,
+.linked.vertical > GtkComboBox.combobox-entry .entry:first-child:insensitive {
+  border-image: -gtk-scaled(url("borders/top-vertical-entry-border-dark.png"),url("borders/[email protected]")) 2 2 1 2 / 2px 2px 1px 2px stretch;
+  border-width: 1px 1px 0 1px;
+  border-style: solid;
+  border-color: transparent;
+}
+
+.linked.vertical .entry:first-child:focus, 
+.linked.vertical > GtkComboBox.combobox-entry .entry:first-child:focus {
+  border-image: -gtk-scaled(url("borders/top-vertical-entry-border-focused-dark.png"),url("borders/[email protected]")) 3 3 2 3 / 3px 3px 2px 3px stretch;
+}
+
+.linked.vertical .entry:last-child, 
+.linked.vertical .entry:last-child:insensitive,
+.linked.vertical > GtkComboBox.combobox-entry .entry:last-child,
+.linked.vertical > GtkComboBox.combobox-entry .entry:last-child:insensitive {
+  border-image: -gtk-scaled(url("borders/bottom-vertical-entry-border-dark.png"),url("borders/[email protected]")) 1 2 3 2 / 1px 2px 3px 2px stretch;
+  border-width: 0 1px 1px 1px;
+  border-style: solid;
+  border-color: transparent;
+}
+
+.linked.vertical .entry:last-child:focus, 
+.linked.vertical > GtkComboBox.combobox-entry .entry:last-child:focus {
+  border-image: -gtk-scaled(url("borders/bottom-vertical-entry-border-focused-dark.png"),url("borders/[email protected]")) 2 3 4 3 / 2px 3px 4px 3px stretch;
+}
+
 /*Buttons*/
 .button,
 .button.flat:hover,
@@ -384,6 +427,82 @@ GtkComboBox.combobox-entry .button:only-child:checked,
   border-image: -gtk-scaled(url("borders/button-active-border-dark.png"),url("borders/[email protected]")) 2 2 3 2 / 2px 2px 3px 2px stretch;
 }
 
+/*Vertical Linked Buttons*/
+/*Middle*/
+.linked.vertical .button,
+.linked.vertical .button:hover,
+.linked.vertical > GtkComboBox.combobox-entry .button, 
+.linked.vertical > GtkComboBox.combobox-entry .button:insensitive {
+  border-top-width: 0;
+  border-bottom-width: 0;
+  border-image-width: 1px 1px 1px 1px;
+  border-radius: 0; 
+  border-image: -gtk-scaled(url("borders/middle-vertical-button-border-dark.png"),url("borders/[email protected]")) 1 1 1 1 / 1px 1px 1px 1px stretch;
+}
+
+.linked.vertical .button:active,
+.linked.vertical .button:hover:active,
+.linked.vertical > GtkComboBox.combobox-entry .button:active, 
+.linked.vertical > GtkComboBox.combobox-entry .button:active:insensitive,
+.linked.vertical .button:checked,
+.linked.vertical .button:hover:checked,
+.linked.vertical > GtkComboBox.combobox-entry .button:checked, 
+.linked.vertical > GtkComboBox.combobox-entry .button:checked:insensitive  {
+  border-top-width: 0;
+  border-bottom-width: 0;
+  border-image-width: 1px 1px 1px 1px;
+  border-radius: 0; 
+  border-image: -gtk-scaled(url("borders/middle-vertical-button-active-border-dark.png"),url("borders/[email protected]")) 1 1 1 1 / 1px 1px 1px 1px stretch;
+}
+
+/*Top*/
+.linked.vertical .button:first-child, 
+.linked.vertical > GtkComboBox.combobox-entry .button:first-child, 
+.linked.vertical > GtkComboBox:first-child > .button {
+  border-top-width: 1px;
+  border-bottom-width: 0;
+  border-image-width: 3px 2px 1px 2px;
+  border-radius: 2px 2px 0 0;
+  border-image: -gtk-scaled(url("borders/top-vertical-button-border-dark.png"),url("borders/[email protected]")) 3 2 1 2 / 3px 2px 1px 2px stretch;
+}
+
+.linked.vertical .button:first-child:active, 
+.linked.vertical > GtkComboBox.combobox-entry .button:first-child:active, 
+.linked.vertical > GtkComboBox:first-child > .button:active,
+.linked.vertical .button:first-child:checked, 
+.linked.vertical > GtkComboBox.combobox-entry .button:first-child:checked, 
+.linked.vertical > GtkComboBox:first-child > .button:checked {
+  border-top-width: 1px;
+  border-bottom-width: 0;
+  border-image-width: 2px 2px 1px 2px;
+  border-radius: 2px 2px 0 0;
+  border-image: -gtk-scaled(url("borders/top-vertical-button-active-border-dark.png"),url("borders/[email protected]")) 2 2 1 2 / 2px 2px 1px 2px stretch;
+}
+
+/*Bottom*/
+.linked.vertical .button:last-child, 
+.linked.vertical > GtkComboBox.combobox-entry .button:last-child, 
+.linked.vertical > GtkComboBox:last-child > .button {
+  border-top-width: 0;
+  border-bottom-width: 1px;
+  border-image-width: 1px 2px 3px 2px;
+  border-radius: 0 0 2px 2px;
+  border-image: -gtk-scaled(url("borders/bottom-vertical-button-border-dark.png"),url("borders/[email protected]")) 1 2 3 2 / 1px 2px 3px 2px stretch;
+}
+
+.linked.vertical .button:last-child:active, 
+.linked.vertical > GtkComboBox.combobox-entry .button:last-child:active, 
+.linked.vertical > GtkComboBox:last-child > .button:active,
+.linked.vertical .button:last-child:checked, 
+.linked.vertical > GtkComboBox.combobox-entry .button:last-child:checked, 
+.linked.vertical > GtkComboBox:last-child > .button:checked {
+  border-top-width: 0;
+  border-bottom-width: 1px;
+  border-image-width: 1px 2px 3px 2px;
+  border-radius: 0 0 2px 2px;
+  border-image: -gtk-scaled(url("borders/bottom-vertical-button-active-border-dark.png"),url("borders/[email protected]")) 1 2 3 2 / 1px 2px 3px 2px stretch;
+}
+
 /*OSD */
 .button.osd, .button.osd:insensitive, 
 .button.osd:active, .button.osd:active:hover, 

Vertex-gtk/gtk-3.0/gtk-widgets-borders.css

@@ -38,6 +38,49 @@
   border-top-left-radius: 0;
 }
 
+.linked.vertical .entry, 
+.linked.vertical .entry:insensitive {
+  border-image: -gtk-scaled(url("borders/middle-vertical-entry-border.png"),url("borders/[email protected]")) 1 2 1 2 / 1px 2px 1px 2px stretch;
+  border-radius: 0;
+  border-width: 0 1px 0 1px;
+  border-style: solid;
+  border-color: transparent;
+}
+
+.linked.vertical .entry:focus {
+  border-image: -gtk-scaled(url("borders/middle-vertical-entry-border-focused.png"),url("borders/[email protected]")) 2 3 2 3 / 2px 3px 2px 3px stretch;
+}
+
+.linked.vertical .entry:first-child, 
+.linked.vertical .entry:first-child:insensitive, 
+.linked.vertical > GtkComboBox.combobox-entry .entry:first-child,
+.linked.vertical > GtkComboBox.combobox-entry .entry:first-child:insensitive {
+  border-image: -gtk-scaled(url("borders/top-vertical-entry-border.png"),url("borders/[email protected]")) 2 2 1 2 / 2px 2px 1px 2px stretch;
+  border-width: 1px 1px 0 1px;
+  border-style: solid;
+  border-color: transparent;
+}
+
+.linked.vertical .entry:first-child:focus, 
+.linked.vertical > GtkComboBox.combobox-entry .entry:first-child:focus {
+  border-image: -gtk-scaled(url("borders/top-vertical-entry-border-focused.png"),url("borders/[email protected]")) 3 3 2 3 / 3px 3px 2px 3px stretch;
+}
+
+.linked.vertical .entry:last-child, 
+.linked.vertical .entry:last-child:insensitive,
+.linked.vertical > GtkComboBox.combobox-entry .entry:last-child,
+.linked.vertical > GtkComboBox.combobox-entry .entry:last-child:insensitive {
+  border-image: -gtk-scaled(url("borders/bottom-vertical-entry-border.png"),url("borders/[email protected]")) 1 2 3 2 / 1px 2px 3px 2px stretch;
+  border-width: 0 1px 1px 1px;
+  border-style: solid;
+  border-color: transparent;
+}
+
+.linked.vertical .entry:last-child:focus, 
+.linked.vertical > GtkComboBox.combobox-entry .entry:last-child:focus {
+  border-image: -gtk-scaled(url("borders/bottom-vertical-entry-border-focused.png"),url("borders/[email protected]")) 2 3 4 3 / 2px 3px 4px 3px stretch;
+}
+
 /*Buttons*/
 .button,
 .button.flat:hover,
@@ -383,6 +426,82 @@ GtkComboBox.combobox-entry .button:only-child:checked,
   border-image: -gtk-scaled(url("borders/button-active-border.png"),url("borders/[email protected]")) 2 2 3 2 / 2px 2px 3px 2px stretch;
 }
 
+/*Vertical Linked Buttons*/
+/*Middle*/
+.linked.vertical .button,
+.linked.vertical .button:hover,
+.linked.vertical > GtkComboBox.combobox-entry .button, 
+.linked.vertical > GtkComboBox.combobox-entry .button:insensitive {
+  border-top-width: 0;
+  border-bottom-width: 0;
+  border-image-width: 1px 1px 1px 1px;
+  border-radius: 0; 
+  border-image: -gtk-scaled(url("borders/middle-vertical-button-border.png"),url("borders/[email protected]")) 1 1 1 1 / 1px 1px 1px 1px stretch;
+}
+
+.linked.vertical .button:active,
+.linked.vertical .button:hover:active,
+.linked.vertical > GtkComboBox.combobox-entry .button:active, 
+.linked.vertical > GtkComboBox.combobox-entry .button:active:insensitive,
+.linked.vertical .button:checked,
+.linked.vertical .button:hover:checked,
+.linked.vertical > GtkComboBox.combobox-entry .button:checked, 
+.linked.vertical > GtkComboBox.combobox-entry .button:checked:insensitive  {
+  border-top-width: 0;
+  border-bottom-width: 0;
+  border-image-width: 1px 1px 1px 1px;
+  border-radius: 0; 
+  border-image: -gtk-scaled(url("borders/middle-vertical-button-active-border.png"),url("borders/[email protected]")) 1 1 1 1 / 1px 1px 1px 1px stretch;
+}
+
+/*Top*/
+.linked.vertical .button:first-child, 
+.linked.vertical > GtkComboBox.combobox-entry .button:first-child, 
+.linked.vertical > GtkComboBox:first-child > .button {
+  border-top-width: 1px;
+  border-bottom-width: 0;
+  border-image-width: 2px 2px 1px 2px;
+  border-radius: 2px 2px 0 0;
+  border-image: -gtk-scaled(url("borders/top-vertical-button-border.png"),url("borders/[email protected]")) 2 2 1 2 / 2px 2px 1px 2px stretch;
+}
+
+.linked.vertical .button:first-child:active, 
+.linked.vertical > GtkComboBox.combobox-entry .button:first-child:active, 
+.linked.vertical > GtkComboBox:first-child > .button:active,
+.linked.vertical .button:first-child:checked, 
+.linked.vertical > GtkComboBox.combobox-entry .button:first-child:checked, 
+.linked.vertical > GtkComboBox:first-child > .button:checked {
+  border-top-width: 1px;
+  border-bottom-width: 0;
+  border-image-width: 3px 2px 1px 2px;
+  border-radius: 2px 2px 0 0;
+  border-image: -gtk-scaled(url("borders/top-vertical-button-active-border.png"),url("borders/[email protected]")) 3 2 1 2 / 3px 2px 1px 2px stretch;
+}
+
+/*Bottom*/
+.linked.vertical .button:last-child, 
+.linked.vertical > GtkComboBox.combobox-entry .button:last-child, 
+.linked.vertical > GtkComboBox:last-child > .button {
+  border-top-width: 0;
+  border-bottom-width: 1px;
+  border-image-width: 1px 2px 3px 2px;
+  border-radius: 0 0 2px 2px;
+  border-image: -gtk-scaled(url("borders/bottom-vertical-button-border.png"),url("borders/[email protected]")) 1 2 3 2 / 1px 2px 3px 2px stretch;
+}
+
+.linked.vertical .button:last-child:active, 
+.linked.vertical > GtkComboBox.combobox-entry .button:last-child:active, 
+.linked.vertical > GtkComboBox:last-child > .button:active,
+.linked.vertical .button:last-child:checked, 
+.linked.vertical > GtkComboBox.combobox-entry .button:last-child:checked, 
+.linked.vertical > GtkComboBox:last-child > .button:checked {
+  border-top-width: 0;
+  border-bottom-width: 1px;
+  border-image-width: 1px 2px 3px 2px;
+  border-radius: 0 0 2px 2px;
+  border-image: -gtk-scaled(url("borders/bottom-vertical-button-active-border.png"),url("borders/[email protected]")) 1 2 3 2 / 1px 2px 3px 2px stretch;
+}
+
 /*OSD */
 .button.osd, .button.osd:insensitive, 
 .button.osd:active, .button.osd:active:hover, 

Vertex-gtk/gtk-3.0/gtk-widgets.css

@@ -198,6 +198,15 @@ GtkFlowBox .grid-child {
       box-shadow: inset 0 1px @entry_inset; }
       .linked .entry:last-child:dir(rtl):insensitive, GtkComboBox.combobox-entry .entry:last-child:dir(rtl):insensitive {
         box-shadow: none; }
+  .linked.vertical .entry {
+    box-shadow: none; }
+    .linked.vertical .entry:first-child, .linked.vertical > GtkComboBox.combobox-entry .entry:first-child {
+      box-shadow: inset 0 1px @entry_inset; }
+    .linked.vertical .entry:last-child, .linked.vertical > GtkComboBox.combobox-entry .entry:last-child {
+      box-shadow: none; }
+  .linked.vertical .entry:insensitive, .linked.vertical .entry:first-child:insensitive, .linked.vertical > GtkComboBox.combobox-entry .entry:first-child:insensitive,
+  .linked.vertical .entry:last-child:insensitive, .linked.vertical > GtkComboBox.combobox-entry .entry:last-child:insensitive {
+    box-shadow: none; }
   .entry.error {
     color: @error_color; }
     .entry.error:focus {
@@ -641,6 +650,31 @@ GtkColorButton.button {
                   inset 1px 2px alpha(@theme_selected_bg_color, 0.1),
                   inset -1px -1px alpha(@theme_selected_bg_color, 0.2) }
 
+/*special case spinbutton inside linked entries*/
+.linked.vertical > .spinbutton .button:last-child, .linked.vertical > .spinbutton .button,
+.linked.vertical > .spinbutton .button:last-child:hover, .linked.vertical > .spinbutton .button:hover,
+.linked.vertical > .spinbutton .button:last-child:active, .linked.vertical > .spinbutton .button:active,
+.linked.vertical > .spinbutton .button:last-child:insensitive, .linked.vertical > .spinbutton .button:insensitive {
+  border-image: none;
+  border-width: 0;
+  border-radius: 0;
+  background-image: none;
+  background-color: transparent;
+  box-shadow: inset 1px 0 alpha(black, 0.1);
+  icon-shadow: none; }
+
+.linked.vertical > .spinbutton .button:last-child:dir(rtl), .linked.vertical > .spinbutton .button:dir(rtl),
+.linked.vertical > .spinbutton .button:last-child:hover:dir(rtl), .linked.vertical > .spinbutton .button:hover:dir(rtl),
+.linked.vertical > .spinbutton .button:last-child:active:dir(rtl), .linked.vertical > .spinbutton .button:active:dir(rtl),
+.linked.vertical > .spinbutton .button:last-child:insensitive:dir(rtl), .linked.vertical > .spinbutton .button:insensitive:dir(rtl) {
+  box-shadow: inset -1px 0 alpha(black, 0.1); }
+
+.linked.vertical > .spinbutton .button:last-child:hover, .linked.vertical > .spinbutton .button:hover {
+  color: alpha(@theme_fg_color, 0.5); }
+
+.linked.vertical > .spinbutton .button:last-child:active, .linked.vertical > .spinbutton .button:active {
+  color: alpha(@theme_fg_color, 0.7); }
+
 /**************
  * ComboBoxes *
  **************/