AuroraMiddleware/gtk2
1
0
Fork 0
forked from AuroraMiddleware/gtk
Code Issues Pull Requests Projects Releases Wiki Activity

Adwaita: Adapt to color swatch changes

Browse Source 
This needs more work and simplification.
This commit is contained in:
Matthias Clasen 2015-10-30 21:44:19 -04:00
parent 5ec9b330b3
commit 4e8aea012e
3 changed files with 82 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
gtk/theme/Adwaita/_common.scss
View File

@ -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
}
}

62
gtk/theme/Adwaita/gtk-contained-dark.css
View File

@ -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;

62
gtk/theme/Adwaita/gtk-contained.css
View File

@ -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;