[gtk+] Adwaita: Adapt to color swatch changes
- From: Matthias Clasen <matthiasc src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gtk+] Adwaita: Adapt to color swatch changes
- Date: Sat, 31 Oct 2015 01:47:42 +0000 (UTC)
commit 4e8aea012e081c84351e3abb2459926e519a88d8
Author: Matthias Clasen <mclasen redhat com>
Date: Fri Oct 30 21:44:19 2015 -0400
Adwaita: Adapt to color swatch changes
This needs more work and simplification.
gtk/theme/Adwaita/_common.scss | 40 ++++++++++----------
gtk/theme/Adwaita/gtk-contained-dark.css | 62 +++++++++++++++---------------
gtk/theme/Adwaita/gtk-contained.css | 62 +++++++++++++++---------------
3 files changed, 82 insertions(+), 82 deletions(-)
---
diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss
index 220991c..b6290de 100644
--- a/gtk/theme/Adwaita/_common.scss
+++ b/gtk/theme/Adwaita/_common.scss
@@ -3047,9 +3047,9 @@ infobar {
* Color Chooser *
*****************/
-GtkColorSwatch {
- // This widget is made of two boxes one on top of the other, the lower box is GtkColorSwatch {} the other
one
- // is GtkColorSwatch > .overlay {}, GtkColorSwatch has the programmatically set background, so most of the
style
+colorswatch {
+ // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
+ // is colorswatch overlay {}, GtkColorSwatch has the programmatically set background, so most of the style
// is applied to the overlay box.
$_colorswatch_shadow: inset 0 1px transparentize(black, 0.9), _widget_edge();
@@ -3061,7 +3061,7 @@ GtkColorSwatch {
// take care of colorswatches on selected elements
:selected & {
box-shadow: none;
- &.overlay, &.overlay:hover {
+ & overlay, & overlay:hover {
border-color: $selected_fg_color;
}
}
@@ -3083,34 +3083,34 @@ GtkColorSwatch {
border-bottom-left-radius: $_colorswatch-radius + 1px;
border-bottom-right-radius: $_colorswatch-radius + 1px;
}
- &.left, &:first-child:not(.overlay):not(.top) {
+ &.left, &:first-child:not(overlay):not(.top) {
border-top-left-radius: $_colorswatch-radius + 1px;
border-bottom-left-radius: $_colorswatch-radius + 1px;
}
- &.right, &:last-child:not(.overlay):not(.bottom) {
+ &.right, &:last-child:not(overlay):not(.bottom) {
border-top-right-radius: $_colorswatch-radius + 1px;
border-bottom-right-radius: $_colorswatch-radius + 1px;
}
- &:only-child:not(.overlay) { border-radius: $_colorswatch-radius + 1px; }
+ &:only-child:not(overlay) { border-radius: $_colorswatch-radius + 1px; }
// overlay corner rounding
- &.top > .overlay {
+ &.top > overlay {
border-top-left-radius: $_colorswatch-radius;
border-top-right-radius: $_colorswatch-radius;
}
- &.bottom > .overlay {
+ &.bottom > overlay {
border-bottom-left-radius: $_colorswatch-radius;
border-bottom-right-radius: $_colorswatch-radius;
}
- &:first-child:not(.top) > .overlay {
+ &:first-child:not(.top) > overlay {
border-top-left-radius: $_colorswatch-radius;
border-bottom-left-radius: $_colorswatch-radius;
}
- &:last-child:not(.bottom) > .overlay {
+ &:last-child:not(.bottom) > overlay {
border-top-right-radius: $_colorswatch-radius;
border-bottom-right-radius: $_colorswatch-radius;
}
- &:only-child > .overlay { border-radius: $_colorswatch-radius; }
+ &:only-child > overlay { border-radius: $_colorswatch-radius; }
// hover effect
&:hover,
@@ -3119,15 +3119,15 @@ GtkColorSwatch {
transparentize(white, 1) 50%);
box-shadow: inset 0 1px transparentize(white, 0.6),
inset 0 -1px if($variant == 'light', transparentize(black, 0.9), transparentize(black, 0.6));
- &.color-dark { // swatches with colors with luminosity lower than 50% get the color-dark class
+ &.dark overlay { // swatches with colors with luminosity lower than 50% get the dark class
background-image: linear-gradient(135deg, transparentize(white, 0.5),
transparentize(white, 1) 50%);
}
}
&:backdrop,
&:backdrop:selected
- &.color-dark:backdrop,
- &.color-dark:backdrop:selected {
+ &.dark:backdrop,
+ &.dark:backdrop:selected {
background-image: none;
box-shadow: none;
}
@@ -3143,20 +3143,20 @@ GtkColorSwatch {
}
// indicator and keynav outline colors
- &.color-dark {
+ &.dark overlay {
color: white;
outline-color: transparentize(white, 0.5);
&:backdrop { color: transparentize(white, 0.7); }
}
- &.color-light {
+ &.light overlay {
color: black;
outline-color: transparentize(black, 0.5);
&:backdrop { color: transparentize(black, 0.7); }
}
// border color
- &.overlay,
- &.overlay:selected {
+ & overlay,
+ & overlay:selected {
border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
&:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); }
}
@@ -3168,7 +3168,7 @@ GtkColorSwatch {
@include button(normal);
&:hover { @include button(hover); }
&:backdrop { @include button(backdrop); }
- .overlay { @include button(undecorated); } // reset the overlay to not cover the button style underneat
+ overlay { @include button(undecorated); } // reset the overlay to not cover the button style underneat
}
}
diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css
index 339dad8..f78854c 100644
--- a/gtk/theme/Adwaita/gtk-contained-dark.css
+++ b/gtk/theme/Adwaita/gtk-contained-dark.css
@@ -4244,73 +4244,73 @@ infobar {
/*****************
* Color Chooser *
*****************/
-GtkColorSwatch {
+colorswatch {
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
- :selected GtkColorSwatch {
+ :selected colorswatch {
box-shadow: none; }
- :selected GtkColorSwatch.overlay, :selected GtkColorSwatch.overlay:hover {
+ :selected colorswatch overlay, :selected colorswatch overlay:hover {
border-color: #ffffff; }
- GtkColorSwatch:selected {
+ colorswatch:selected {
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
- GtkColorSwatch.top {
+ colorswatch.top {
border-top-left-radius: 6px;
border-top-right-radius: 6px; }
- GtkColorSwatch.bottom {
+ colorswatch.bottom {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px; }
- GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay):not(.top) {
+ colorswatch.left, colorswatch:first-child:not(overlay):not(.top) {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px; }
- GtkColorSwatch.right, GtkColorSwatch:last-child:not(.overlay):not(.bottom) {
+ colorswatch.right, colorswatch:last-child:not(overlay):not(.bottom) {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px; }
- GtkColorSwatch:only-child:not(.overlay) {
+ colorswatch:only-child:not(overlay) {
border-radius: 6px; }
- GtkColorSwatch.top > .overlay {
+ colorswatch.top > overlay {
border-top-left-radius: 5px;
border-top-right-radius: 5px; }
- GtkColorSwatch.bottom > .overlay {
+ colorswatch.bottom > overlay {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; }
- GtkColorSwatch:first-child:not(.top) > .overlay {
+ colorswatch:first-child:not(.top) > overlay {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px; }
- GtkColorSwatch:last-child:not(.bottom) > .overlay {
+ colorswatch:last-child:not(.bottom) > overlay {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px; }
- GtkColorSwatch:only-child > .overlay {
+ colorswatch:only-child > overlay {
border-radius: 5px; }
- GtkColorSwatch:hover, GtkColorSwatch:hover:selected {
+ colorswatch:hover, colorswatch:hover:selected {
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.4); }
- GtkColorSwatch:hover.color-dark, GtkColorSwatch:hover:selected.color-dark {
+ colorswatch:hover.dark overlay, colorswatch:hover:selected.dark overlay {
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%); }
- GtkColorSwatch:backdrop, GtkColorSwatch:backdrop:selected
- GtkColorSwatch.color-dark:backdrop, GtkColorSwatch.color-dark:backdrop:selected {
+ colorswatch:backdrop, colorswatch:backdrop:selected
+ colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected {
background-image: none;
box-shadow: none; }
- GtkColorEditor GtkColorSwatch {
+ GtkColorEditor colorswatch {
border-radius: 3px; }
- GtkColorEditor GtkColorSwatch:hover {
+ GtkColorEditor colorswatch:hover {
background-image: none;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
- GtkColorEditor GtkColorSwatch:backdrop {
+ GtkColorEditor colorswatch:backdrop {
box-shadow: none; }
- GtkColorSwatch.color-dark {
+ colorswatch.dark overlay {
color: white;
outline-color: rgba(255, 255, 255, 0.5); }
- GtkColorSwatch.color-dark:backdrop {
+ colorswatch.dark overlay:backdrop {
color: rgba(255, 255, 255, 0.3); }
- GtkColorSwatch.color-light {
+ colorswatch.light overlay {
color: black;
outline-color: rgba(0, 0, 0, 0.5); }
- GtkColorSwatch.color-light:backdrop {
+ colorswatch.light overlay:backdrop {
color: rgba(0, 0, 0, 0.3); }
- GtkColorSwatch.overlay, GtkColorSwatch.overlay:selected {
+ colorswatch overlay, colorswatch overlay:selected {
border: 1px solid #1c1f1f; }
- GtkColorSwatch.overlay:hover, GtkColorSwatch.overlay:selected:hover {
+ colorswatch overlay:hover, colorswatch overlay:selected:hover {
border-color: black; }
- GtkColorSwatch#add-color-button {
+ colorswatch#add-color-button {
border-style: solid;
border-width: 1px;
color: #eeeeec;
@@ -4320,7 +4320,7 @@ GtkColorSwatch {
text-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
- GtkColorSwatch#add-color-button:hover {
+ colorswatch#add-color-button:hover {
color: #eeeeec;
outline-color: rgba(238, 238, 236, 0.3);
border-color: #1c1f1f;
@@ -4328,14 +4328,14 @@ GtkColorSwatch {
text-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
- GtkColorSwatch#add-color-button:backdrop {
+ colorswatch#add-color-button:backdrop {
color: #949796;
border-color: #1f2222;
background-image: linear-gradient(to bottom, #393f3f);
text-shadow: none;
icon-shadow: none;
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); }
- GtkColorSwatch#add-color-button .overlay {
+ colorswatch#add-color-button overlay {
border-color: transparent;
background-color: transparent;
background-image: none;
diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css
index 014e6f8..abfdfbf 100644
--- a/gtk/theme/Adwaita/gtk-contained.css
+++ b/gtk/theme/Adwaita/gtk-contained.css
@@ -4416,73 +4416,73 @@ infobar {
/*****************
* Color Chooser *
*****************/
-GtkColorSwatch {
+colorswatch {
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px white; }
- :selected GtkColorSwatch {
+ :selected colorswatch {
box-shadow: none; }
- :selected GtkColorSwatch.overlay, :selected GtkColorSwatch.overlay:hover {
+ :selected colorswatch overlay, :selected colorswatch overlay:hover {
border-color: #ffffff; }
- GtkColorSwatch:selected {
+ colorswatch:selected {
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px white; }
- GtkColorSwatch.top {
+ colorswatch.top {
border-top-left-radius: 6px;
border-top-right-radius: 6px; }
- GtkColorSwatch.bottom {
+ colorswatch.bottom {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px; }
- GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay):not(.top) {
+ colorswatch.left, colorswatch:first-child:not(overlay):not(.top) {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px; }
- GtkColorSwatch.right, GtkColorSwatch:last-child:not(.overlay):not(.bottom) {
+ colorswatch.right, colorswatch:last-child:not(overlay):not(.bottom) {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px; }
- GtkColorSwatch:only-child:not(.overlay) {
+ colorswatch:only-child:not(overlay) {
border-radius: 6px; }
- GtkColorSwatch.top > .overlay {
+ colorswatch.top > overlay {
border-top-left-radius: 5px;
border-top-right-radius: 5px; }
- GtkColorSwatch.bottom > .overlay {
+ colorswatch.bottom > overlay {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; }
- GtkColorSwatch:first-child:not(.top) > .overlay {
+ colorswatch:first-child:not(.top) > overlay {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px; }
- GtkColorSwatch:last-child:not(.bottom) > .overlay {
+ colorswatch:last-child:not(.bottom) > overlay {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px; }
- GtkColorSwatch:only-child > .overlay {
+ colorswatch:only-child > overlay {
border-radius: 5px; }
- GtkColorSwatch:hover, GtkColorSwatch:hover:selected {
+ colorswatch:hover, colorswatch:hover:selected {
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.1); }
- GtkColorSwatch:hover.color-dark, GtkColorSwatch:hover:selected.color-dark {
+ colorswatch:hover.dark overlay, colorswatch:hover:selected.dark overlay {
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%); }
- GtkColorSwatch:backdrop, GtkColorSwatch:backdrop:selected
- GtkColorSwatch.color-dark:backdrop, GtkColorSwatch.color-dark:backdrop:selected {
+ colorswatch:backdrop, colorswatch:backdrop:selected
+ colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected {
background-image: none;
box-shadow: none; }
- GtkColorEditor GtkColorSwatch {
+ GtkColorEditor colorswatch {
border-radius: 3px; }
- GtkColorEditor GtkColorSwatch:hover {
+ GtkColorEditor colorswatch:hover {
background-image: none;
box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px white; }
- GtkColorEditor GtkColorSwatch:backdrop {
+ GtkColorEditor colorswatch:backdrop {
box-shadow: none; }
- GtkColorSwatch.color-dark {
+ colorswatch.dark overlay {
color: white;
outline-color: rgba(255, 255, 255, 0.5); }
- GtkColorSwatch.color-dark:backdrop {
+ colorswatch.dark overlay:backdrop {
color: rgba(255, 255, 255, 0.3); }
- GtkColorSwatch.color-light {
+ colorswatch.light overlay {
color: black;
outline-color: rgba(0, 0, 0, 0.5); }
- GtkColorSwatch.color-light:backdrop {
+ colorswatch.light overlay:backdrop {
color: rgba(0, 0, 0, 0.3); }
- GtkColorSwatch.overlay, GtkColorSwatch.overlay:selected {
+ colorswatch overlay, colorswatch overlay:selected {
border: 1px solid rgba(0, 0, 0, 0.3); }
- GtkColorSwatch.overlay:hover, GtkColorSwatch.overlay:selected:hover {
+ colorswatch overlay:hover, colorswatch overlay:selected:hover {
border-color: rgba(0, 0, 0, 0.5); }
- GtkColorSwatch#add-color-button {
+ colorswatch#add-color-button {
border-style: solid;
border-width: 1px;
color: #2e3436;
@@ -4492,7 +4492,7 @@ GtkColorSwatch {
text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
box-shadow: inset 0 1px white, 0 1px white; }
- GtkColorSwatch#add-color-button:hover {
+ colorswatch#add-color-button:hover {
color: #2e3436;
outline-color: rgba(46, 52, 54, 0.3);
border-color: #a1a1a1;
@@ -4500,14 +4500,14 @@ GtkColorSwatch {
text-shadow: 0 1px rgba(255, 255, 255, 0.76923);
icon-shadow: 0 1px rgba(255, 255, 255, 0.76923);
box-shadow: inset 0 1px white, 0 1px white; }
- GtkColorSwatch#add-color-button:backdrop {
+ colorswatch#add-color-button:backdrop {
color: #8e9192;
border-color: darkgray;
background-image: linear-gradient(to bottom, #ededed);
text-shadow: none;
icon-shadow: none;
box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); }
- GtkColorSwatch#add-color-button .overlay {
+ colorswatch#add-color-button overlay {
border-color: transparent;
background-color: transparent;
background-image: none;
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]