[gtk+] Adwaita: better colorswatches for the dark theme
- From: Lapo Calamandrei <lapo src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gtk+] Adwaita: better colorswatches for the dark theme
- Date: Fri, 18 Jul 2014 21:50:00 +0000 (UTC)
commit 663a50dd4eb061f6895e3f0b25cba9f6ea896229
Author: Lapo Calamandrei <calamandrei gmail com>
Date: Fri Jul 18 23:48:33 2014 +0200
Adwaita: better colorswatches for the dark theme
...which reveals a "nice" border/fill border radius issue.
gtk/resources/theme/Adwaita/_common.scss | 34 ++++++++++++++++---
gtk/resources/theme/Adwaita/gtk-contained-dark.css | 15 ++++++--
gtk/resources/theme/Adwaita/gtk-contained.css | 9 +++++-
3 files changed, 47 insertions(+), 11 deletions(-)
---
diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss
index e9b4036..586e280 100644
--- a/gtk/resources/theme/Adwaita/_common.scss
+++ b/gtk/resources/theme/Adwaita/_common.scss
@@ -525,8 +525,15 @@ GtkLabel {
}
}
-GtkColorButton.button { padding: 4px; } // Uniform padding on the
- // GtkColorButton.button
+GtkColorButton.button {
+ padding: 4px; // Uniform padding on the GtkColorButton
+ GtkColorSwatch {
+ border-radius: 1.5px;
+ box-shadow: inset 0 1px 1px transparentize(black, 0.8),
+ $widget_edge;
+ &:backdrop { box-shadow: none; }
+ }
+}
/*********
* Links *
@@ -2295,8 +2302,16 @@ GtkInfoBar {
GtkColorSwatch {
- border: 1px solid transparentize(black,0.7);
- box-shadow: inset 0 1px 1px transparentize(black, 0.8);
+ border-width: 1px;
+ border-style: solid;
+ @if $variant == light {
+ border-color: transparentize(black,0.7);
+ box-shadow: inset 0 1px 1px transparentize(black, 0.8);
+ }
+ @else {
+ border-color: $borders_color;
+ box-shadow: inset 0 1px 1px transparentize(black, 0.6);
+ }
&.color-light {
&:hover {
@@ -2315,9 +2330,16 @@ GtkColorSwatch {
}
}
- &:hover { border-color: transparentize(black, 0.5); }
+ &:hover {
+ border-color: if($variant=='light', transparentize(black, 0.5),
+ $backdrop_borders_color);
+ }
- &:backdrop { border-color: transparentize(black,0.8); box-shadow: none; }
+ &:backdrop {
+ border-color: if($variant=='light', transparentize(black,0.8),
+ $backdrop_borders_color);
+ box-shadow: none;
+ }
&.top {
border-top-left-radius: 5px;
diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
index e38d02a..af6e850 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css
@@ -634,6 +634,11 @@
GtkColorButton.button {
padding: 4px; }
+ GtkColorButton.button GtkColorSwatch {
+ border-radius: 1.5px;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px rgba(238, 238, 236, 0.1); }
+ GtkColorButton.button GtkColorSwatch:backdrop {
+ box-shadow: none; }
/*********
* Links *
@@ -2860,8 +2865,10 @@ GtkInfoBar {
* Color Chooser *
*****************/
GtkColorSwatch {
- border: 1px solid rgba(0, 0, 0, 0.3);
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2); }
+ border-width: 1px;
+ border-style: solid;
+ border-color: #1c1f1f;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4); }
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 {
@@ -2871,9 +2878,9 @@ GtkColorSwatch {
GtkColorSwatch.color-dark:hover:backdrop {
background-image: none; }
GtkColorSwatch:hover {
- border-color: rgba(0, 0, 0, 0.5); }
+ border-color: #1e2222; }
GtkColorSwatch:backdrop {
- border-color: rgba(0, 0, 0, 0.2);
+ border-color: #1e2222;
box-shadow: none; }
GtkColorSwatch.top {
border-top-left-radius: 5px;
diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css
index c71989b..27b902a 100644
--- a/gtk/resources/theme/Adwaita/gtk-contained.css
+++ b/gtk/resources/theme/Adwaita/gtk-contained.css
@@ -626,6 +626,11 @@
GtkColorButton.button {
padding: 4px; }
+ GtkColorButton.button GtkColorSwatch {
+ border-radius: 1.5px;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2), 0 1px white; }
+ GtkColorButton.button GtkColorSwatch:backdrop {
+ box-shadow: none; }
/*********
* Links *
@@ -2852,7 +2857,9 @@ GtkInfoBar {
* Color Chooser *
*****************/
GtkColorSwatch {
- border: 1px solid rgba(0, 0, 0, 0.3);
+ border-width: 1px;
+ border-style: solid;
+ border-color: 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)); }
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]