[gnome-themes-standard] first stab at the color chooser - color editor still to be done



commit 73f4deb26083eb417a2915c796583b493ff1c3ae
Author: Lapo Calamandrei <calamandrei gmail com>
Date:   Thu Jun 12 16:29:09 2014 +0200

    first stab at the color chooser
     - color editor still to be done

 themes/Adwaita/gtk-3.0/_common.scss           |   77 +++++++++++++++++++++++++
 themes/Adwaita/gtk-3.0/gtk-contained-dark.css |   56 ++++++++++++++++++
 themes/Adwaita/gtk-3.0/gtk-contained.css      |   56 ++++++++++++++++++
 3 files changed, 189 insertions(+), 0 deletions(-)
---
diff --git a/themes/Adwaita/gtk-3.0/_common.scss b/themes/Adwaita/gtk-3.0/_common.scss
index d47b0a8..8b13c05 100644
--- a/themes/Adwaita/gtk-3.0/_common.scss
+++ b/themes/Adwaita/gtk-3.0/_common.scss
@@ -1597,6 +1597,83 @@ GtkInfoBar {
   background-color: transparent;
 }
 
+/*****************
+ * Color Chooser *
+ *****************/
+
+GtkColorSwatch {
+
+  border: 1px solid transparentize(black,0.7);
+  box-shadow: inset 0 1px 1px transparentize(black, 0.8);
+  
+  &.color-light {
+    &:hover {
+      background-image: linear-gradient(to bottom,
+                                        transparentize(white, 1) 40%,
+                                        transparentize(white, 0.6));
+      &:backdrop { background-image: none; }
+    }
+  }
+  &.color-dark {
+    &:hover {
+       background-image: linear-gradient(to bottom,
+                                        transparentize(white, 1) 40%,
+                                        transparentize(white, 0.8));
+       &:backdrop { background-image: none; }
+    }
+  }
+  
+  &:hover { border-color: transparentize(black, 0.5); }
+
+  &:backdrop { border-color: transparentize(black,0.8); box-shadow: none; }
+
+  &.top {
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+  }
+  &.bottom {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  &.left, &:first-child {
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+  }
+  &.right, &:last-child {
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+  }
+  &:only-child {
+    border-radius: 5px;
+  }
+  &.color-active-badge {
+    border-width: 2px;
+    &:hover { background-image: none; }
+    &.color-light, &.color-light:hover {
+      color: transparentize(black,0.7);
+      border-color: transparentize(black,0.7);
+    }
+    &.color-dark, &.color-dark:hover {
+      color: transparentize(white,0.5);
+      border-color: transparentize(white,0.5);
+    }
+  }
+}
+GtkColorChooserWidget #add-color-button {
+  border-color: mix($borders_color,$bg_color,50%);
+  background-color: mix($borders_color,$bg_color,50%);
+  color: $bg_color;
+  box-shadow: none;
+  &:hover {
+    border-color: $borders_color;
+    background-color: $borders_color;
+  }
+  &:backdrop {
+    border-color: mix($backdrop_borders_color,$backdrop_bg_color,50%);
+    background-color: mix($backdrop_borders_color,$backdrop_bg_color,50%);
+  }
+}
+
 /**********************
  * Window Decorations *
  *********************/
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
index f7760aa..dbd2725 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained-dark.css
@@ -1858,6 +1858,62 @@ GtkInfoBar {
   padding: 4px;
   background-color: transparent; }
 
+/*****************
+ * Color Chooser *
+ *****************/
+GtkColorSwatch {
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); }
+  GtkColorSwatch.color-light:hover {
+    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.4)); }
+    GtkColorSwatch.color-light:hover:backdrop {
+      background-image: none; }
+  GtkColorSwatch.color-dark:hover {
+    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.2)); }
+    GtkColorSwatch.color-dark:hover:backdrop {
+      background-image: none; }
+  GtkColorSwatch:hover {
+    border-color: rgba(0, 0, 0, 0.5); }
+  GtkColorSwatch:backdrop {
+    border-color: rgba(0, 0, 0, 0.2);
+    box-shadow: none; }
+  GtkColorSwatch.top {
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px; }
+  GtkColorSwatch.bottom {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px; }
+  GtkColorSwatch.left, GtkColorSwatch:first-child {
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px; }
+  GtkColorSwatch.right, GtkColorSwatch:last-child {
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px; }
+  GtkColorSwatch:only-child {
+    border-radius: 5px; }
+  GtkColorSwatch.color-active-badge {
+    border-width: 2px; }
+    GtkColorSwatch.color-active-badge:hover {
+      background-image: none; }
+    GtkColorSwatch.color-active-badge.color-light, GtkColorSwatch.color-active-badge.color-light:hover {
+      color: rgba(0, 0, 0, 0.3);
+      border-color: rgba(0, 0, 0, 0.3); }
+    GtkColorSwatch.color-active-badge.color-dark, GtkColorSwatch.color-active-badge.color-dark:hover {
+      color: rgba(255, 255, 255, 0.5);
+      border-color: rgba(255, 255, 255, 0.5); }
+
+GtkColorChooserWidget #add-color-button {
+  border-color: #2a2f2f;
+  background-color: #2a2f2f;
+  color: #393f3f;
+  box-shadow: none; }
+  GtkColorChooserWidget #add-color-button:hover {
+    border-color: #1c1f1f;
+    background-color: #1c1f1f; }
+  GtkColorChooserWidget #add-color-button:backdrop {
+    border-color: #2b3030;
+    background-color: #2b3030; }
+
 /**********************
  * Window Decorations *
  *********************/
diff --git a/themes/Adwaita/gtk-3.0/gtk-contained.css b/themes/Adwaita/gtk-3.0/gtk-contained.css
index 095edb5..e061ac4 100644
--- a/themes/Adwaita/gtk-3.0/gtk-contained.css
+++ b/themes/Adwaita/gtk-3.0/gtk-contained.css
@@ -1858,6 +1858,62 @@ GtkInfoBar {
   padding: 4px;
   background-color: transparent; }
 
+/*****************
+ * Color Chooser *
+ *****************/
+GtkColorSwatch {
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); }
+  GtkColorSwatch.color-light:hover {
+    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.4)); }
+    GtkColorSwatch.color-light:hover:backdrop {
+      background-image: none; }
+  GtkColorSwatch.color-dark:hover {
+    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.2)); }
+    GtkColorSwatch.color-dark:hover:backdrop {
+      background-image: none; }
+  GtkColorSwatch:hover {
+    border-color: rgba(0, 0, 0, 0.5); }
+  GtkColorSwatch:backdrop {
+    border-color: rgba(0, 0, 0, 0.2);
+    box-shadow: none; }
+  GtkColorSwatch.top {
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px; }
+  GtkColorSwatch.bottom {
+    border-bottom-left-radius: 5px;
+    border-bottom-right-radius: 5px; }
+  GtkColorSwatch.left, GtkColorSwatch:first-child {
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px; }
+  GtkColorSwatch.right, GtkColorSwatch:last-child {
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px; }
+  GtkColorSwatch:only-child {
+    border-radius: 5px; }
+  GtkColorSwatch.color-active-badge {
+    border-width: 2px; }
+    GtkColorSwatch.color-active-badge:hover {
+      background-image: none; }
+    GtkColorSwatch.color-active-badge.color-light, GtkColorSwatch.color-active-badge.color-light:hover {
+      color: rgba(0, 0, 0, 0.3);
+      border-color: rgba(0, 0, 0, 0.3); }
+    GtkColorSwatch.color-active-badge.color-dark, GtkColorSwatch.color-active-badge.color-dark:hover {
+      color: rgba(255, 255, 255, 0.5);
+      border-color: rgba(255, 255, 255, 0.5); }
+
+GtkColorChooserWidget #add-color-button {
+  border-color: #c7c7c7;
+  background-color: #c7c7c7;
+  color: #ededed;
+  box-shadow: none; }
+  GtkColorChooserWidget #add-color-button:hover {
+    border-color: #a1a1a1;
+    background-color: #a1a1a1; }
+  GtkColorChooserWidget #add-color-button:backdrop {
+    border-color: #cacaca;
+    background-color: #cacaca; }
+
 /**********************
  * Window Decorations *
  *********************/


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]