[gtk+/wip/css] gtk-demo: move styling for the CSS editor to a separate file

[Cosimo Cecchi <cosimoc src gnome org>]

commit 0f7da92f46761cda696d39bce16aea19fbde0a28
Author: Cosimo Cecchi <cosimoc gnome org>
Date:   Thu May 24 14:16:06 2012 -0400

    gtk-demo: move styling for the CSS editor to a separate file
    
    So it can be shared by multiple demos

 demos/gtk-demo/Makefile.am        |    1 +
 demos/gtk-demo/css_pixbufs.css    |   11 +---------
 demos/gtk-demo/cssview.css        |   41 +++++++++++++++++++++++++++++++++++++
 demos/gtk-demo/demo.gresource.xml |    1 +
 4 files changed, 44 insertions(+), 10 deletions(-)
---
diff --git a/demos/gtk-demo/Makefile.am b/demos/gtk-demo/Makefile.am
index 22bb3b9..c7fc121 100644
--- a/demos/gtk-demo/Makefile.am
+++ b/demos/gtk-demo/Makefile.am
@@ -117,6 +117,7 @@ RESOURCES=	application.ui			\
 		css_accordion.css		\
 		css_basics.css			\
 		css_pixbufs.css			\
+		cssview.css			\
 		reset.css
 
 IMAGEFILES=	alphatest.png		\
diff --git a/demos/gtk-demo/css_pixbufs.css b/demos/gtk-demo/css_pixbufs.css
index 6281189..c6440b3 100644
--- a/demos/gtk-demo/css_pixbufs.css
+++ b/demos/gtk-demo/css_pixbufs.css
@@ -7,6 +7,7 @@
 /* This CSS resets all properties to their defaults values
  *    and overrides all user settings and the theme in use */
 @import url("reset.css");
+ import url("cssview.css");
 
 @keyframes move-the-image {
 0% { background-position: 50.00% 75.00%, 67.68% 67.68%, 75.00% 50.00%, 67.68% 32.32%, 50.00% 25.00%, 32.32% 32.32%, 25.00% 50.00%, 32.32% 67.68%, 0% 0%; }
@@ -63,13 +64,3 @@ GtkWindow {
     background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat;
     animation: move-the-image infinite linear 3s, size-the-image infinite alternate ease-in-out 0.75s;
 }
-
-/* Make the text editor has a nice style */
-.view, .scrollbar, .pane-separator {
-  color: black;
-  background-color: rgba(255,255,255,0.5);
-}
-
-.view:selected {
-  background-color: rgba(127,127,255,0.5);
-}
diff --git a/demos/gtk-demo/cssview.css b/demos/gtk-demo/cssview.css
new file mode 100644
index 0000000..5060c39
--- /dev/null
+++ b/demos/gtk-demo/cssview.css
@@ -0,0 +1,41 @@
+/* Make the text editor has a nice style */
+.view {
+  color: #2e3436;
+  font: Monospace;
+  background-color: alpha(white, 0.30);
+}
+
+.view:selected {
+  color: white;
+  background-color: #4a90d9;
+}
+
+.scrollbar.trough,
+.scrollbars-junction {
+  background-color: alpha(white, 0.80);
+}
+
+.scrollbar.slider {
+  border-width: 3px;
+  border-style: solid;
+  border-radius: 10px;
+  border-color: transparent;
+  background-clip: padding-box;
+  background-color: #999;
+}
+
+.scrollbar.slider:prelight {
+  background-color: #555;
+}
+
+.pane-separator {
+  background-color: alpha(white, 0.80);
+  background-image: linear-gradient(transparent, transparent 1px, #999 1px, #999 4px, transparent 4px);
+  background-size: 40px auto;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.pane-separator:prelight {
+  background-image: linear-gradient(transparent, transparent 1px, #555 1px, #555 4px, transparent 4px);
+}
diff --git a/demos/gtk-demo/demo.gresource.xml b/demos/gtk-demo/demo.gresource.xml
index 653e57e..9058828 100644
--- a/demos/gtk-demo/demo.gresource.xml
+++ b/demos/gtk-demo/demo.gresource.xml
@@ -9,6 +9,7 @@
     <file preprocess="xml-stripblanks">menus.ui</file>
   </gresource>
   <gresource prefix="/">
+    <file>cssview.css</file>
     <file>reset.css</file>
   </gresource>
   <gresource prefix="/css_accordion">