[gnome-themes-standard] first stab at the color chooser - color editor still to be done
- From: Lapo Calamandrei <lapo src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-themes-standard] first stab at the color chooser - color editor still to be done
- Date: Thu, 12 Jun 2014 14:30:12 +0000 (UTC)
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]