[gnome-themes-standard] fix spin buttons
- From: William Jon McCann <mccann src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-themes-standard] fix spin buttons
- Date: Tue, 6 May 2014 22:23:47 +0000 (UTC)
commit 4c75f9f47986787fa1e14e730d97aa426608c57f
Author: William Jon McCann <william jon mccann gmail com>
Date: Tue May 6 14:55:49 2014 -0400
fix spin buttons
themes/Adwaita/gtk-3.0/gtk-widgets.css | 351 +++++++++++++++-----------------
1 files changed, 162 insertions(+), 189 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/gtk-widgets.css b/themes/Adwaita/gtk-3.0/gtk-widgets.css
index b2261e4..cf5750b 100644
--- a/themes/Adwaita/gtk-3.0/gtk-widgets.css
+++ b/themes/Adwaita/gtk-3.0/gtk-widgets.css
@@ -525,10 +525,11 @@ GtkComboBox.combobox-entry .button:insensitive:backdrop {
/*****************
* GtkSpinButton *
*****************/
-.spinbutton .button {
+.spinbutton .button,
+.spinbutton .button:insensitive {
color: @internal_element_color;
padding: 2px 6px;
- border-width: 0;
+ border-width: 0 0 1px;
border-radius: 0;
border-style: none;
border-image: none;
@@ -558,8 +559,9 @@ GtkComboBox.combobox-entry .button:insensitive:backdrop {
color: @internal_element_prelight;
}
-.spinbutton .button:first-child {
- border-radius: 2px 0 0 2px;
+.spinbutton .button:first-child,
+.spinbutton .button:insensitive:first-child {
+ border-radius: 0;
box-shadow: none;
}
@@ -572,23 +574,39 @@ GtkComboBox.combobox-entry .button:insensitive:backdrop {
}
/* Add back the glowy effect from the entry covered by the pushed button background*/
-.spinbutton .button:active {
+.spinbutton .button:active,
+.spinbutton .button:active:hover {
+ border-radius: 0;
+ border-width: 0;
box-shadow: inset 1px 0 @inset_dark_color,
- inset 0 1px alpha(@theme_selected_bg_color, 0.2),
- inset 0 -1px alpha(@theme_selected_bg_color, 0.2);
+ inset 0 .5px 2px alpha(@theme_selected_bg_color, 0.3),
+ inset 0 -1px 2px alpha(@theme_selected_bg_color, 0.3),
+ inset 0 .5px alpha(@theme_selected_bg_color, 0.9),
+ inset 0 -1px alpha(@theme_selected_bg_color, 0.9);
}
-.spinbutton .button:first-child:active {
- box-shadow: inset 1px 1px alpha(@theme_selected_bg_color, 0.2),
- inset 0 -1px alpha(@theme_selected_bg_color, 0.2);
+.spinbutton .button:first-child:active,
+.spinbutton .button:first-child:active:hover {
+ border-radius: 0;
+ border-width: 0;
+ box-shadow: inset .5px .5px 2px alpha(@theme_selected_bg_color, 0.3),
+ inset .5px -1px 2px alpha(@theme_selected_bg_color, 0.3),
+ inset .5px .5px alpha(@theme_selected_bg_color, 0.9),
+ inset .5px -1px alpha(@theme_selected_bg_color, 0.9);
}
-.spinbutton .button:last-child:active {
+.spinbutton .button:last-child:active,
+.spinbutton .button:last-child:active:hover {
+ border-radius: 0 3.5px 3.5px 0;
+ border-width: 0;
box-shadow: inset 1px 0 @inset_dark_color,
- inset 0 1px alpha(@theme_selected_bg_color, 0.2),
- inset -1px -1px alpha(@theme_selected_bg_color, 0.2);
+ inset -.5px .5px 2px alpha(@theme_selected_bg_color, 0.3),
+ inset -.5px -1px 2px alpha(@theme_selected_bg_color, 0.3),
+ inset -.5px .5px alpha(@theme_selected_bg_color, 0.9),
+ inset -.5px -1px alpha(@theme_selected_bg_color, 0.9);
}
+/* Vertical */
.spinbutton.vertical .button {
padding: 4px;
@@ -625,72 +643,82 @@ GtkComboBox.combobox-entry .button:insensitive:backdrop {
}
.spinbutton.vertical .button,
+.spinbutton.vertical .button:insensitive,
+.spinbutton.vertical .button:backdrop,
+.spinbutton.vertical .button:insensitive:backdrop,
/* :active:active to override the dark overriden style for
normal spinbutton buttons, yeah we lack !important */
.spinbutton.vertical .button:active:active {
- box-shadow: none;
-}
-
-.spinbutton.vertical .button:first-child {
- border-image-width: 3px 3px 0 3px;
- border-width: 1px 1px 0 1px;
- border-bottom-left-radius: 0;
- border-bottom-right-radius: 0;
+ border-width: 0;
+ border-radius: 3.5px 3.5px 0 0;
+ border-image: none;
+ border-style: solid;
+ border-color: alpha(white, 0.5);
}
-.spinbutton.vertical .button:last-child {
- border-image-width: 0 3px 4px 3px;
- border-width: 0 1px 2px 1px;
- border-top-left-radius: 0;
- border-top-right-radius: 0;
+.spinbutton.vertical .button:first-child,
+.spinbutton.vertical .button:first-child:insensitive,
+.spinbutton.vertical .button:first-child:backdrop,
+.spinbutton.vertical .button:first-child:insensitive:backdrop {
+ border-width: 0;
+ border-radius: 3.5px 3.5px 0 0;
+ border-image: none;
+ border-style: solid;
+ box-shadow: inset .5px .5px shade(@borders, 0.8),
+ inset -.5px .5px shade(@borders, 0.8);
}
-.spinbutton.vertical.entry {
+.spinbutton.vertical .button:last-child,
+.spinbutton.vertical .button:last-child:insensitive,
+.spinbutton.vertical .button:last-child:backdrop,
+.spinbutton.vertical .button:last-child:insensitive:backdrop {
+ border-width: 0 0 1px;
+ border-radius: 0 0 3.5px 3.5px;
border-image: none;
- border-color: @borders;
- border-width: 0 1px;
border-style: solid;
- border-radius: 0;
- box-shadow: inset 0 2px @entry_inset,
- inset 0 3px alpha(@entry_inset, 0.4),
- inset 0 1px @borders,
- inset 0 -1px @borders;
-
- /* I'm using box-shadow as borders, so I need to compensate
- with padding. Those two values need to be entry padding +1 */
- padding-top: 5px;
- padding-bottom: 5px;
+ border-color: alpha(white, 0.5);
+ box-shadow: inset .5px -.5px shade(@borders, 0.8),
+ inset -.5px -.5px shade(@borders, 0.8);
}
-.spinbutton.vertical.entry:insensitive {
- border-color: @insensitive_borders;
- box-shadow: inset 0 1px @insensitive_borders,
- inset 0 -1px @insensitive_borders;
+.spinbutton.vertical.entry,
+.spinbutton.vertical.entry:insensitive,
+.spinbutton.vertical.entry:backdrop,
+.spinbutton.vertical.entry:insensitive:backdrop {
+ border-image: none;
+ border-width: 0;
+ border-radius: 0;
+ box-shadow: inset 0 2px 2px alpha(@borders, 0.3),
+ inset .5px .5px alpha(@borders, 0.9),
+ inset -.5px .5px alpha(@borders, 0.9),
+ inset .5px -.5px alpha(@borders, 0.9),
+ inset -.5px -.5px alpha(@borders, 0.9);
}
.spinbutton.vertical.entry:focus {
border-color: @theme_selected_bg_color;
- box-shadow: inset 1px 2px alpha(@theme_selected_bg_color, 0.1),
- inset 1px 3px alpha(@theme_selected_bg_color, 0.1),
- inset -1px -2px alpha(@theme_selected_bg_color, 0.2),
- inset 0 1px @theme_selected_bg_color,
- inset 0 -1px @theme_selected_bg_color;
+ box-shadow: inset .5px .5px 2px alpha(@theme_selected_bg_color, 0.3),
+ inset -.5px .5px 2px alpha(@theme_selected_bg_color, 0.3),
+ inset .5px -.5px 2px alpha(@theme_selected_bg_color, 0.3),
+ inset -.5px -.5px 2px alpha(@theme_selected_bg_color, 0.3),
+ inset .5px .5px alpha(@theme_selected_bg_color, 0.9),
+ inset -.5px .5px alpha(@theme_selected_bg_color, 0.9),
+ inset .5px -.5px alpha(@theme_selected_bg_color, 0.9),
+ inset -.5px -.5px alpha(@theme_selected_bg_color, 0.9);
+ transition: all 200ms ease-in;
}
-.spinbutton.vertical.entry:backdrop {
- /* Adding back box-shadow for borders */
- border-color: @unfocused_borders;
- box-shadow: inset 0 1px @unfocused_borders,
- inset 0 -1px @unfocused_borders;
+.spinbutton.vertical .button:first-child:active,
+.spinbutton.vertical .button:first-child:active:hover {
+ border-radius: 3.5px 3.5px 0 0;
}
-.spinbutton.vertical.entry:insensitive:backdrop {
- /* Adding back box-shadow for borders */
- box-shadow: inset 0 1px @unfocused_insensitive_borders,
- inset 0 -1px @unfocused_insensitive_borders;
+.spinbutton.vertical .button:last-child:active,
+.spinbutton.vertical .button:last-child:active:hover {
+ border-radius: 0 0 3.5px 3.5px;
+ border-width: 0 0 1px;
}
-
/*****************
* Color Chooser *
*****************/
@@ -1199,8 +1227,6 @@ GtkComboBox.combobox-entry .button {
.button:active,
.button:insensitive,
.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,
@@ -1334,19 +1360,12 @@ GtkSwitch.trough:backdrop,
}
/* linked entries/buttons */
-.linked {
- border: 20px;
- background-color: red;
- background-image: none;
-}
-
.linked .entry {
border-radius: 3.5px 0 0 3.5px;
border-image: none;
border-width: 0px 0px 1px;
border-style: solid;
border-color: alpha(white, 0.5);
- padding: 20px;
}
.linked .entry:first-child {
@@ -1382,145 +1401,91 @@ GtkSwitch.trough:backdrop,
}
/* Set up shadows and hilights for button visual separation */
+
+/* Middle button */
.linked .button,
+.linked .button:insensitive,
.toolbar .button.raised.linked,
.toolbar .raised.linked .button,
.inline-toolbar.toolbar .button,
.inline-toolbar.toolbar GtkToolButton > .button {
- box-shadow: inset 1px 0 @inset_light_color, inset -1px 0 @inset_dark_color;
+ border-radius: 0;
+ border-image: none;
+ border-width: 0px 0px 1px;
+ border-style: solid;
+ border-color: alpha(white, 0.5);
+ box-shadow: inset 1px 0 @inset_light_color,
+ inset -1px 0 @inset_dark_color,
+ inset 0 .5px shade(@borders, 0.8),
+ inset 0 -.5px shade(@borders, 0.8);
+}
+.linked .button:active,
+.linked .button:active:hover {
+ border-radius: 0;
+ border-image: none;
+ border-width: 0px 0px 1px;
+ border-style: solid;
+ border-color: alpha(white, 0.5);
+ box-shadow: inset 0 .5px shade(@borders, 0.8),
+ inset 0 -.5px shade(@borders, 0.8);
+}
+
+.linked .button:insensitive {
+border: 20px;
}
+/* Leftmost button */
.linked .button:first-child,
+.linked .button:insensitive:first-child,
.toolbar .button.raised.linked:first-child,
.toolbar .raised.linked .button:first-child,
.inline-toolbar.toolbar .button:first-child,
.inline-toolbar.toolbar GtkToolButton:first-child > .button {
- box-shadow: inset -1px 0 @inset_dark_color;
+ border-radius: 3.5px 0 0 3.5px;
+ border-image: none;
+ border-width: 0px 0px 1px;
+ border-style: solid;
+ border-color: alpha(white, 0.5);
+ box-shadow: inset -1px 0 @inset_dark_color,
+ inset .5px .5px shade(@borders, 0.8),
+ inset .5px -.5px shade(@borders, 0.8);
+}
+.linked .button:active:first-child,
+.linked .button:active:hover:first-child {
+ border-radius: 3.5px 0 0 3.5px;
+ border-image: none;
+ border-width: 0px 0px 1px;
+ border-style: solid;
+ border-color: alpha(white, 0.5);
+ box-shadow: inset .5px .5px shade(@borders, 0.8),
+ inset .5px -.5px shade(@borders, 0.8);
}
+/* Rightmost button */
.linked .button:last-child,
+.linked .button:insensitive:last-child,
.toolbar .button.raised.linked:last-child,
.toolbar .raised.linked .button:last-child,
.inline-toolbar.toolbar .button:last-child,
.inline-toolbar.toolbar GtkToolButton:last-child > .button {
- box-shadow: inset 1px 0 @inset_light_color;
-}
-
-.linked .button:active,
-.toolbar .button.raised.linked:active,
-.toolbar .raised.linked .button:active,
-.inline-toolbar.toolbar .button:active,
-.inline-toolbar.toolbar GtkToolButton > .button:active {
- box-shadow: inset 0 1px 1px alpha(black, 0.1),
- inset 1px 0 @inset_dark_color;
-}
-
-.linked .button:insensitive,
-.toolbar .button.raised.linked:insensitive,
-.toolbar .raised.linked .button:insensitive,
-.inline-toolbar.toolbar .button:insensitive,
-.inline-toolbar.toolbar GtkToolButton > .button:insensitive {
- box-shadow: inset -1px 0 @inset_dark_color;
-}
-
-.linked .button:backdrop,
-.toolbar .button.raised.linked:backdrop,
-.toolbar .raised.linked .button:backdrop,
-.inline-toolbar.toolbar .button:backdrop,
-.inline-toolbar.toolbar GtkToolButton > .button:backdrop {
- box-shadow: inset -1px 0 @unfocused_borders;
-}
-
-.linked .button:insensitive:backdrop,
-.toolbar .button.raised.linked:insensitive:backdrop,
-.toolbar .raised.linked .button:insensitive:backdrop,
-.inline-toolbar.toolbar .button:insensitive:backdrop,
-.inline-toolbar.toolbar GtkToolButton > .button:insensitive:backdrop {
- box-shadow: inset -1px 0 @unfocused_insensitive_borders;
-}
-
-/* remove box shadow from last-child and only-child */
-.linked .button:backdrop:last-child,
-.linked .button:insensitive:last-child,
-.linked .button:backdrop:insensitive:last-child,
-.linked .button:only-child,
-.linked .button:backdrop:only-child,
-.linked .button:backdrop:insensitive:only-child,
-.toolbar .button.raised.linked:backdrop:last-child,
-.toolbar .button.raised.linked:insensitive:last-child,
-.toolbar .button.raised.linked:backdrop:insensitive:last-child,
-.toolbar .button.raised.linked:backdrop:only-child,
-.toolbar .button.raised.linked:backdrop:insensitive:only-child,
-.toolbar .raised.linked .button:insensitive:last-child,
-.toolbar .raised.linked .button:backdrop:last-child,
-.toolbar .raised.linked .button:insensitive:backdrop:last-child,
-.toolbar .raised.linked .button:backdrop:only-child,
-.toolbar .raised.linked .button:backdrop:insensitive:only-child,
-.inline-toolbar.toolbar .button:backdrop:last-child,
-.inline-toolbar.toolbar .button:insensitive:last-child,
-.inline-toolbar.toolbar .button:backdrop:insensitive:last-child,
-.inline-toolbar.toolbar .button:only-child,
-.inline-toolbar.toolbar .button:backdrop:only-child,
-.inline-toolbar.toolbar .button:backdrop:insensitive:only-child,
-.inline-toolbar.toolbar GtkToolButton:last-child > .button:backdrop,
-.inline-toolbar.toolbar GtkToolButton:last-child > .button:insensitive,
-.inline-toolbar.toolbar GtkToolButton:last-child > .button:backdrop:insensitive,
-.inline-toolbar.toolbar GtkToolButton:only-child > .button,
-.inline-toolbar.toolbar GtkToolButton:only-child > .button:backdrop,
-.inline-toolbar.toolbar GtkToolButton:only-child > .button:backdrop:insensitive {
- box-shadow: inset .5px .5px @borders,
- inset -.5px .5px @borders,
- inset .5px -.5px @borders,
- inset -.5px -.5px @borders;
-}
-
-/* remove inset from first-child and only-child active buttons */
-.linked .button:only-child:active,
-.toolbar .button.raised.linked:only-child:active,
-.toolbar .raised.linked .button:only-child:active,
-.inline-toolbar.toolbar .button:only-child:active,
-.inline-toolbar.toolbar GtkToolButton > .button:only-child:active,
-.linked .button:first-child:active,
-.toolbar .button.raised.linked:first-child:active,
-.toolbar .raised.linked .button:first-child:active,
-.inline-toolbar.toolbar .button:first-child:active,
-.inline-toolbar.toolbar GtkToolButton > .button:first-child:active {
- box-shadow: inset 0 1px 1px alpha(black, 0.1);
-}
-
-/* Middle button */
-.linked .button,
-.linked .button:active,
-.linked .button:active:hover,
-.linked .button:insensitive {
- border-right-width: 0;
- border-left-width: 0;
- border-image-width: 3px 0 4px 0;
- border-radius: 0;
-}
-
-/* Leftmost button */
-.linked .button:first-child,
-.linked .button:active:first-child,
-.linked .button:active:hover:first-child,
-.linked .button:insensitive:first-child {
- border-right-width: 0;
- border-left-width: 1px;
- border-image-width: 3px 0 4px 3px;
- border-bottom-right-radius: 0;
- border-top-right-radius: 0;
+ border-radius: 0 3.5px 3.5px 0;
+ border-image: none;
+ border-width: 0px 0px 1px;
+ border-style: solid;
+ border-color: alpha(white, 0.5);
+ box-shadow: inset 1px 0 @inset_light_color,
+ inset -.5px .5px shade(@borders, 0.8),
+ inset -.5px -.5px shade(@borders, 0.8);
}
-
-/* Rightmost button */
-.linked .button:last-child,
.linked .button:active:last-child,
-.linked .button:active:hover:last-child,
-.linked .button:insensitive:last-child {
- border-right-width: 1px;
- border-left-width: 0;
- border-image-width: 3px 3px 4px 0;
- border-bottom-left-radius: 0;
- border-top-left-radius: 0;
+.linked .button:active:hover:last-child {
+ border-radius: 0 3.5px 3.5px 0;
+ border-image: none;
+ border-width: 0px 0px 1px;
+ border-style: solid;
+ border-color: alpha(white, 0.5);
+ box-shadow: inset -.5px .5px shade(@borders, 0.8),
+ inset -.5px -.5px shade(@borders, 0.8);
}
/* Linked single button */
@@ -1528,12 +1493,20 @@ GtkSwitch.trough:backdrop,
.linked .button:active:only-child,
.linked .button:active:hover:only-child,
.linked .button:insensitive:only-child {
- border-right-width: 1px;
- border-left-width: 1px;
- border-image-width: 3px 3px 4px 3px;
border-radius: 3.5px;
+ border-image: none;
+ border-width: 0px 0px 1px;
+ border-style: solid;
+ border-color: alpha(white, 0.5);
+ box-shadow: inset .5px .5px @borders,
+ inset -.5px .5px @borders,
+ inset .5px -.5px @borders,
+ inset -.5px -.5px @borders;
}
+
+/* Vertical linked buttons */
+
/* Middle button (vertical) */
.linked.vertical .button,
.linked.vertical .button:active,
@@ -1883,7 +1856,7 @@ GtkLinkButton.button:active {
text-shadow: none;
}
-.button .separator {
+.button .separator {
color: shade(@internal_element_color, 1.30);
}
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]