GNOME.org
 

[gnome-themes-standard] osd: add start of a new style for OSD widgets

commit d44c6a33b0d79e320a39d192700668e086bf814f
Author: Cosimo Cecchi <cosimoc gnome org>
Date:   Thu Apr 19 16:44:40 2012 -0400

    osd: add start of a new style for OSD widgets
    
    Such as those seen in Documents, gnome-settings-daemon and Totem.
    Basically move out of gnome-applications.css the relevant styling
    information, clean it up and make it generic enough to be usable from
    different sources.

 themes/Adwaita/gtk-3.0/Makefile.am            |    1 +
 themes/Adwaita/gtk-3.0/gnome-applications.css |  103 +------------------------
 themes/Adwaita/gtk-3.0/gtk-main-common.css    |   32 ++++++++
 themes/Adwaita/gtk-3.0/gtk-main-dark.css      |    1 +
 themes/Adwaita/gtk-3.0/gtk-main.css           |    1 +
 themes/Adwaita/gtk-3.0/gtk-widgets.css        |   99 ++++++++++++++++++++++++
 themes/Adwaita/gtk-3.0/gtk.gresource.xml      |    1 +
 7 files changed, 138 insertions(+), 100 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/Makefile.am b/themes/Adwaita/gtk-3.0/Makefile.am
index 4096508..998ba12 100644
--- a/themes/Adwaita/gtk-3.0/Makefile.am
+++ b/themes/Adwaita/gtk-3.0/Makefile.am
@@ -16,6 +16,7 @@ EXTRA_DIST = \
 	gtk.css \
 	gtk-dark.css \
 	gtk-main.css \
+	gtk-main-common.css \
 	gtk-main-dark.css \
 	gtk-widgets.css \
 	gtk-widgets-backgrounds.css \
diff --git a/themes/Adwaita/gtk-3.0/gnome-applications.css b/themes/Adwaita/gtk-3.0/gnome-applications.css
index a3bb865..48e03f2 100644
--- a/themes/Adwaita/gtk-3.0/gnome-applications.css
+++ b/themes/Adwaita/gtk-3.0/gnome-applications.css
@@ -11,16 +11,6 @@
 @define-color documents_emblem_bg #3465a4;
 @define-color documents_collection_bg #d3d7cf;
 
- define-color documents_osd_toolbar_a alpha(#242424, 0.80);
- define-color documents_osd_toolbar_b alpha(#101010, 0.80);
- define-color documents_osd_toolbar_c alpha(#262626, 0.80);
-
- define-color documents_osd_button_a @theme_base_color;
- define-color documents_osd_button_b #525252;
- define-color documents_osd_button_inset #9f9f9f;
-
- define-color documents_osd_fg #bebebe;
-
 /****************
  * Applications *
  ****************/
@@ -351,95 +341,8 @@ GtkIconView.documents-main-view.check:active {
     font: bold;
 }
 
-.documents-osd {
-    background-image: none;
-    background-color: transparent;
-}
-
-.documents-osd .toolbar {
-    padding: 16px;
-    border-style: none;
-    border-radius: 5px;
-    border-width: 0;
-
-    background-image: -gtk-gradient(linear, left top, left bottom,
-                                    from(@documents_osd_toolbar_a),
-                                    color-stop(0.63, @documents_osd_toolbar_b),
-                                    to(@documents_osd_toolbar_c));
-    color: @documents_osd_fg;
-
-    -GtkToolbar-button-relief: normal;
-}
-
-.documents-osd .toolbar .button {
-    padding: 4px;
-
-    background-image: -gtk-gradient(linear, left top, left bottom,
-                                    from(alpha(@documents_osd_button_a, 0.16)),
-                                    color-stop(0.68, alpha(@documents_osd_button_b, 0.05)),
-                                    to(alpha(@documents_osd_button_a, 0.12)));
-    border-width: 1px 0;
-    border-style: solid;
-    border-image: none;
-    border-color: alpha(@documents_osd_button_a, 0.50);
-    border-radius: 0;
-
-    color: @documents_osd_fg;
-
-    text-shadow: none;
-    icon-shadow: none;
-    box-shadow: inset -1px 0 @documents_osd_button_inset;
-}
-
-.documents-osd .toolbar .button,
-.documents-osd .toolbar .button:prelight,
-.documents-osd .toolbar .button:active {
-    background-color: transparent;
-}
-
-.documents-osd .toolbar .button:nth-child(first) {
-    border-radius: 4px 0 0 4px;
-    border-left-width: 1px;
-    box-shadow: inset -1px 0 @documents_osd_button_inset;
-}
-
-.documents-osd .toolbar .button:nth-child(last) {
-    box-shadow: none;
-    border-radius: 0 4px 4px 0;
-    border-right-width: 1px;
-}
-
-.documents-osd .toolbar .button:only-child {
-    border-width: 1px;
-    border-radius: 4px;
-    border-style: solid;
-}
-
-.documents-osd .toolbar .separator {
-    color: @documents_osd_button_inset;
-}
-
-.documents-osd .toolbar .button:hover {
-    background-image: -gtk-gradient(linear, left top, left bottom,
-                                    from(alpha(@documents_osd_button_a, 0.28)),
-                                    color-stop(0.68, alpha(@documents_osd_button_b, 0.14)),
-                                    to(alpha(@documents_osd_button_a, 0.14)));
-}
-
-.documents-osd .toolbar .button *:hover {
-    color: shade(@documents_osd_fg, 1.20);
-}
-
-.documents-osd .toolbar .button:active,
-.documents-osd .toolbar .button:active:hover {
-    background-image: -gtk-gradient(linear, left top, left bottom,
-                                    from(alpha(@documents_osd_button_b, 0.18)),
-                                    color-stop(0.68, alpha(@documents_osd_button_a, 0.23)),
-                                    to(alpha(@documents_osd_button_b, 0.17)));
-}
-
-.documents-osd .toolbar .button.favorite,
-.documents-osd .toolbar .button.favorite *:hover {
+.documents-favorite.button *:active,
+.documents-favorite.button *:active:hover {
     color: shade(@theme_selected_bg_color, 1.20);
 }
 
@@ -473,7 +376,7 @@ GtkIconView.documents-main-view.check:active {
     color: shade(@documents_emblem_bg, 2.10);
 }
 
-.documents-osd .documents-notification {
+.documents-notification {
     border-style: solid;
     border-color: #949486;
     border-width: 0 1px 1px 1px;
diff --git a/themes/Adwaita/gtk-3.0/gtk-main-common.css b/themes/Adwaita/gtk-3.0/gtk-main-common.css
new file mode 100644
index 0000000..7ca574a
--- /dev/null
+++ b/themes/Adwaita/gtk-3.0/gtk-main-common.css
@@ -0,0 +1,32 @@
+/* common color definitions to the light and dark variations */
+
+/*******
+ * OSD *
+ *******/
+ define-color osd_highlight #ffffff;
+ define-color osd_lowlight #525252;
+ define-color osd_base #212526;
+
+ define-color osd_fg #ededed;
+ define-color osd_bg alpha(@osd_base, 0.80);
+
+ define-color osd_toolbar_bg_a alpha(@osd_base, 0.80);
+ define-color osd_toolbar_bg_b alpha(#101010, 0.80);
+
+ define-color osd_button_bg_a alpha(@osd_highlight, 0.16);
+ define-color osd_button_bg_b alpha(@osd_lowlight, 0.05);
+ define-color osd_button_bg_c alpha(@osd_highlight, 0.12);
+
+ define-color osd_button_bg_hover_a alpha(@osd_highlight, 0.28);
+ define-color osd_button_bg_hover_b alpha(@osd_lowlight, 0.14);
+ define-color osd_button_bg_hover_c alpha(@osd_highlight, 0.14);
+
+ define-color osd_button_bg_active_a alpha(@osd_lowlight, 0.18);
+ define-color osd_button_bg_active_b alpha(@osd_highlight, 0.23);
+ define-color osd_button_bg_active_c alpha(@osd_lowlight, 0.17);
+
+ define-color osd_button_border alpha(@osd_highlight, 0.50);
+ define-color osd_button_fg shade(@osd_fg, 0.80);
+ define-color osd_button_inset shade(@osd_fg, 0.67);
+
+ define-color osd_trough_bg alpha(@osd_button_fg, 0.10);
diff --git a/themes/Adwaita/gtk-3.0/gtk-main-dark.css b/themes/Adwaita/gtk-3.0/gtk-main-dark.css
index 4b7d6fe..16159d3 100644
--- a/themes/Adwaita/gtk-3.0/gtk-main-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-main-dark.css
@@ -196,6 +196,7 @@
 @define-color wm_button_bg_active_b shade (@theme_bg_color, 0.7);
 @define-color wm_button_bg_active_c shade (@theme_bg_color, 0.7);
 
+ import url("gtk-main-common.css");
 @import url("gtk-widgets-backgrounds.css");
 @import url("gtk-widgets-borders-dark.css");
 @import url("gtk-widgets-assets-dark.css");
diff --git a/themes/Adwaita/gtk-3.0/gtk-main.css b/themes/Adwaita/gtk-3.0/gtk-main.css
index ed95632..fb43ef2 100644
--- a/themes/Adwaita/gtk-3.0/gtk-main.css
+++ b/themes/Adwaita/gtk-3.0/gtk-main.css
@@ -218,6 +218,7 @@
 @define-color wm_button_bg_active_b shade (@bg_color, 0.9);
 @define-color wm_button_bg_active_c shade (@bg_color, 0.9);
 
+ import url("gtk-main-common.css");
 @import url("gtk-widgets-backgrounds.css");
 @import url("gtk-widgets-borders.css");
 @import url("gtk-widgets-assets.css");
diff --git a/themes/Adwaita/gtk-3.0/gtk-widgets.css b/themes/Adwaita/gtk-3.0/gtk-widgets.css
index d705337..dd4db04 100644
--- a/themes/Adwaita/gtk-3.0/gtk-widgets.css
+++ b/themes/Adwaita/gtk-3.0/gtk-widgets.css
@@ -1929,6 +1929,105 @@ GtkCheckButton:selected:focus {
     background-color: transparent;
 }
 
+/*******
+ * OSD *
+ *******/
+.osd {
+    color: @osd_fg;
+    background-color: @osd_bg;
+}
+
+.osd.toolbar {
+    padding: 16px;
+    border-style: none;
+    border-radius: 5px;
+
+    background-image: -gtk-gradient(linear, left top, left bottom,
+                                    from(@osd_toolbar_bg_a),
+                                    color-stop(0.63, @osd_toolbar_bg_b),
+                                    to(@osd_toolbar_bg_a));
+    background-color: transparent;
+
+    -GtkToolbar-button-relief: normal;
+}
+
+.osd.toolbar .button {
+    padding: 4px;
+
+    background-image: -gtk-gradient(linear, left top, left bottom,
+                                    from(@osd_button_bg_a),
+                                    color-stop(0.68, @osd_button_bg_b),
+                                    to(@osd_button_bg_c));
+    border-width: 1px 0;
+    border-style: solid;
+    border-image: none;
+    border-color: @osd_button_border;
+    border-radius: 0;
+
+    color: @osd_button_fg;
+
+    text-shadow: none;
+    icon-shadow: none;
+    box-shadow: inset -1px 0 @osd_button_inset;
+}
+
+.osd.toolbar .button,
+.osd.toolbar .button:prelight,
+.osd.toolbar .button:active {
+    background-color: transparent;
+}
+
+.osd.toolbar .button:nth-child(first) {
+    border-radius: 4px 0 0 4px;
+    border-left-width: 1px;
+    box-shadow: inset -1px 0 @osd_button_inset;
+}
+
+.osd.toolbar .button:nth-child(last) {
+    box-shadow: none;
+    border-radius: 0 4px 4px 0;
+    border-right-width: 1px;
+}
+
+.osd.toolbar GtkToolButton .button,
+.osd.toolbar .button:only-child {
+    border-width: 1px;
+    border-radius: 4px;
+    border-style: solid;
+
+    box-shadow: none;
+}
+
+.osd.toolbar .separator {
+    color: @osd_button_inset;
+}
+
+.osd.toolbar .button:hover {
+    background-image: -gtk-gradient(linear, left top, left bottom,
+                                    from(@osd_button_bg_hover_a),
+                                    color-stop(0.68, @osd_button_bg_hover_b),
+                                    to(@osd_button_bg_hover_c));
+}
+
+.osd.toolbar .button *:hover {
+    color: shade(@osd_button_fg, 1.20);
+}
+
+.osd.toolbar .button:active,
+.osd.toolbar .button:active:hover {
+    background-image: -gtk-gradient(linear, left top, left bottom,
+                                    from(@osd_button_bg_active_a),
+                                    color-stop(0.68, @osd_button_bg_active_b),
+                                    to(@osd_button_bg_active_c));
+}
+
+.osd.trough {
+    background-color: @osd_trough_bg;
+}
+
+.osd.progressbar {
+    background-color: @osd_fg;
+}
 
 /****************
  * GtkAssistant *
diff --git a/themes/Adwaita/gtk-3.0/gtk.gresource.xml b/themes/Adwaita/gtk-3.0/gtk.gresource.xml
index ac2f8a9..486f1be 100644
--- a/themes/Adwaita/gtk-3.0/gtk.gresource.xml
+++ b/themes/Adwaita/gtk-3.0/gtk.gresource.xml
@@ -177,6 +177,7 @@
     <file>gtk-widgets-assets.css</file>
     <file>gtk-widgets-assets-dark.css</file>
     <file>gtk-main.css</file>
+    <file>gtk-main-common.css</file>
     <file>gtk-main-dark.css</file>
   </gresource>
 </gresources>
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]