[gnome-themes-standard] Elegant recolorable borders
- From: William Jon McCann <mccann src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-themes-standard] Elegant recolorable borders
- Date: Tue, 6 May 2014 22:23:12 +0000 (UTC)
commit faa12cbd5537d9fd998927043e74ef37386b4110
Author: William Jon McCann <william jon mccann gmail com>
Date: Mon May 5 20:21:56 2014 -0400
Elegant recolorable borders
That don't rely on hardcoded colors in assets.
themes/Adwaita/gtk-3.0/gtk-widgets-borders.css | 70 ++++++++++------------
themes/Adwaita/gtk-3.0/gtk-widgets.css | 74 +++++++++--------------
2 files changed, 61 insertions(+), 83 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/gtk-widgets-borders.css b/themes/Adwaita/gtk-3.0/gtk-widgets-borders.css
index 671d8c3..66a8b9a 100644
--- a/themes/Adwaita/gtk-3.0/gtk-widgets-borders.css
+++ b/themes/Adwaita/gtk-3.0/gtk-widgets-borders.css
@@ -16,21 +16,17 @@ GtkComboBox.combobox-entry .button,
.trough.highlight,
GtkSwitch.trough,
GtkSwitch.trough:active:insensitive,
-.titlebar .titlebutton:hover,
+.titlebar .titlebutton:hover,
.titlebar .titlebutton:active {
- border-image: -gtk-scaled(url("borders/generic-border.png"),url("borders/generic-border 2 png")) 3 3 4 3
/ 3px 3px 4px 3px stretch;
- border-radius: 3px;
- border-width: 1px 1px 2px 1px;
+ box-shadow: inset .5px .5px @borders,
+ inset -.5px .5px @borders,
+ inset .5px -.5px @borders,
+ inset -.5px -.5px @borders;
+ border-image: none;
+ border-width: 0px 0px 1px;
+ border-radius: 3.5px;
border-style: solid;
- border-color: transparent;
-}
-
-.trough row {
- border-image: -gtk-scaled (url("borders/nohl-generic-border.png"),url("borders/nohl-generic-border 2
png")) 3 / 3px stretch;
- border-radius: 3px;
- border-width: 1px;
- border-style: solid;
- border-color: transparent;
+ border-color: alpha(white, 0.5);
}
/* focused element borders */
@@ -38,10 +34,22 @@ GtkSwitch.trough:active:insensitive,
GtkComboBox.combobox-entry .entry:focus,
.button.default:active,
.inline-toolbar.toolbar.vertical .button.default:active,
-GtkSwitch.trough:active {
- border-image: -gtk-scaled(url("borders/generic-border-focused.png"),url("borders/generic-border-focused
2 png")) 3 3 4 3 / 3px 3px 4px 3px stretch;
+GtkSwitch.trough:active {
+ box-shadow: inset .5px .5px @theme_selected_bg_color,
+ inset -.5px .5px @theme_selected_bg_color,
+ inset .5px -.5px @theme_selected_bg_color,
+ inset -.5px -.5px @theme_selected_bg_color;
+ border-image: none;
+ border-width: 0px 0px 1px;
+ border-radius: 3.5px;
+ border-style: solid;
+ border-color: alpha(white, 0.5);
+}
+
+.trough row {
+ border-image: -gtk-scaled (url("borders/nohl-generic-border.png"),url("borders/nohl-generic-border 2
png")) 3 / 3px stretch;
border-radius: 3px;
- border-width: 1px 1px 2px 1px;
+ border-width: 1px;
border-style: solid;
border-color: transparent;
}
@@ -252,33 +260,19 @@ GtkSwitch.trough:backdrop,
border-color: transparent;
}
+/* suggested action buttons borders */
+.suggested-action.button,
+.suggested-action.button:active,
+/* destructive action buttons borders */
+.destructive-action.button,
+.destructive-action.button:active,
/* pushed colored buttons borders */
.selection-mode.toolbar .suggested-action.button,
.selection-mode.toolbar GtkToolButton.suggested-action .button {
- border-image: -gtk-scaled
(url("borders/generic-border-transparent.png"),url("borders/generic-border-transparent 2 png")) 3 3 4 3 / 3px
3px 4px 3px stretch;
+ border-image: -gtk-scaled (url("borders/button-border.png"),url("borders/button-border 2 png")) 3 3 4 3
/ 3px 3px 4px 3px stretch;
border-radius: 4px;
border-width: 0px 0px 1px 0px;
border-style: solid;
border-color: transparent;
-
-}
-
-/* suggested action buttons borders */
-.suggested-action.button,
-.suggested-action.button:active {
- border-image:
-gtk-scaled(url("borders/button-border-suggested.png"),url("borders/button-border-suggested 2 png")) 3 3 4 3
/ 3px 3px 4px 3px stretch;
- border-radius: 3px;
- border-width: 1px 1px 2px 1px;
- border-style: solid;
- border-color: transparent;
-}
-
-/* destructive action buttons borders */
-.destructive-action.button,
-.destructive-action.button:active {
- border-image:
-gtk-scaled(url("borders/button-border-destructive.png"),url("borders/button-border-destructive 2 png")) 3 3
4 3 / 3px 3px 4px 3px stretch;
- border-radius: 3px;
- border-width: 1px 1px 2px 1px;
- border-style: solid;
- border-color: transparent;
+ box-shadow: inset 0 1px 0 #fff;
}
diff --git a/themes/Adwaita/gtk-3.0/gtk-widgets.css b/themes/Adwaita/gtk-3.0/gtk-widgets.css
index 0cc7421..88ebc36 100644
--- a/themes/Adwaita/gtk-3.0/gtk-widgets.css
+++ b/themes/Adwaita/gtk-3.0/gtk-widgets.css
@@ -345,7 +345,7 @@ GtkTreeView.separator:backdrop,
****************/
.entry {
border-style: solid;
- padding: 4px;
+ padding: 6px 4px;
/* border-image defined in the -assets variants */
@@ -359,9 +359,14 @@ GtkTreeView.separator:backdrop,
}
.entry:focus {
- box-shadow: inset 1px 2px alpha(@theme_selected_bg_color, 0.1),
- inset 1px 1px alpha(@theme_selected_bg_color, 0.1),
- inset -1px -1px alpha(@theme_selected_bg_color, 0.2);
+ 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;
}
@@ -2012,36 +2017,41 @@ GtkComboBox .separator {
GtkComboBox.combobox-entry .entry:first-child,
GtkComboBox.combobox-entry .button:first-child {
- border-image-width: 3px 0 4px 3px;
- border-radius: 3px 0 0 3px;
- border-right-width: 0;
+ border-radius: 3.5px 0 0 3.5px;
+ border-image: none;
+ box-shadow: inset .5px .5px shade(@borders, 0.8),
+ inset .5px -.5px shade(@borders, 0.8),
+ inset -1px 0 @inset_dark_color;
}
GtkComboBox.combobox-entry .entry:last-child,
GtkComboBox.combobox-entry .button:last-child {
- border-image-width: 3px 3px 4px 0;
- border-radius: 0 3px 3px 0;
- border-left-width: 0;
+ border-radius: 0 3.5px 3.5px 0;
+ border-image: none;
+ box-shadow: inset -.5px .5px shade(@borders, 0.8),
+ inset -.5px -.5px shade(@borders, 0.8);
}
.primary-toolbar GtkComboBox.combobox-entry .entry:first-child,
.primary-toolbar GtkComboBox.combobox-entry .button:first-child {
- border-image-width: 4px 0 4px 4px;
- border-radius: 3px 0 0 3px;
- border-right-width: 0;
+ border-radius: 3.5px 0 0 3.5px;
+ border-image: none;
+ box-shadow: inset .5px .5px 2px alpha(@borders, 0.8),
+ inset .5px -.5px 2px alpha(@borders, 0.8),
+ inset .5px .5px @borders,
+ inset .5px -.5px @borders;
}
.primary-toolbar GtkComboBox.combobox-entry .entry:last-child,
.primary-toolbar GtkComboBox.combobox-entry .button:last-child {
- border-image-width: 4px 4px 4px 0;
- border-radius: 0 3px 3px 0;
- border-left-width: 0;
+ border-radius: 0 3.5px 3.5px 0;
}
GtkComboBox.combobox-entry .entry:focus:first-child {
- box-shadow: inset 1px 2px alpha(@theme_selected_bg_color, 0.1),
- inset 1px 1px alpha(@theme_selected_bg_color, 0.1),
- inset 0 -1px alpha(@theme_selected_bg_color, 0.2);
+ box-shadow: inset .5px .5px 2px alpha(@theme_selected_bg_color, 0.8),
+ inset .5px -.5px 2px alpha(@theme_selected_bg_color, 0.8),
+ inset .5px .5px @theme_selected_bg_color,
+ inset .5px -.5px @theme_selected_bg_color;
}
GtkComboBox.combobox-entry .entry:focus:last-child {
@@ -2050,32 +2060,6 @@ GtkComboBox.combobox-entry .entry:focus:last-child {
inset 0 -1px alpha(@theme_selected_bg_color, 0.2);
}
-GtkComboBox.combobox-entry .button:last-child,
-GtkComboBox.combobox-entry .button:hover:last-child,
-GtkComboBox.combobox-entry .button:active:last-child,
-GtkComboBox.combobox-entry .button:hover:active:last-child {
- box-shadow: inset 1px 0 @inset_dark_color,
- inset 0 1px @entry_inset,
- inset 0 2px alpha(@entry_inset, 0.4);
-}
-
-GtkComboBox.combobox-entry .button:first-child,
-GtkComboBox.combobox-entry .button:hover:first-child,
-GtkComboBox.combobox-entry .button:active:first-child,
-GtkComboBox.combobox-entry .button:hover:active:first-child {
- box-shadow: inset -1px 0 @inset_dark_color,
- inset 0 1px @entry_inset,
- inset 0 2px alpha(@entry_inset, 0.4);
-}
-
-GtkComboBox.combobox-entry .button:insensitive:first-child {
- box-shadow: inset -1px 0 @inset_dark_color;
-}
-
-GtkComboBox.combobox-entry .button:insensitive:last-child {
- box-shadow: inset 1px 0 @inset_dark_color;
-}
-
GtkComboBox.combobox-entry .button:backdrop:first-child,
GtkComboBox.combobox-entry .button:backdrop:last-child {
box-shadow: none;
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]