With nasty gross ugly code, no other ways, sorry.
}
}
+
GtkColorButton.button {
padding: 5px; // Uniform padding on the GtkColorButton
- GtkColorSwatch {
+
+ GtkColorSwatch:only-child:first-child:last-child { //*-child mess needed since we get overridden by the colorpicker selectors
border-radius: 0;
box-shadow: inset 0 1px 1px transparentize(black, 0.9),
_widget_edge();
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
+ // is GtkColorSwatch > .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();
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
- &.left, &:first-child, &:first-child .overlay {
+ &.left, &:first-child:not(.overlay), &:first-child:not(.top) > .overlay {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
- &.right, &:last-child, &:last-child .overlay {
+ &.right, &:last-child:not(.overlay), &:last-child:not(.bottom) > .overlay {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
- &:only-child, &:only-child .overlay {
- border-radius: 5px;
- }
- // nth-child works just on the custom colors row
+ &:only-child:not(.overlay), &:only-child > .overlay { border-radius: 5px; }
+ // nth-child is used for the custom colors row.
+ // the :not() madness is needed since actually the overlay is selectable by GtkColorSwatch > .overlay
+ // and GtkColorSwatch.overlay, I know it's weird, but this is gtk+.
// hover effect
&:hover,
GtkColorButton.button, .header-bar GtkColorButton.button.titlebutton,
.titlebar GtkColorButton.button.titlebutton {
padding: 5px; }
- GtkColorButton.button GtkColorSwatch, .header-bar GtkColorButton.button.titlebutton GtkColorSwatch,
- .titlebar GtkColorButton.button.titlebutton GtkColorSwatch {
+ GtkColorButton.button GtkColorSwatch:only-child:first-child:last-child {
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
- GtkColorButton.button GtkColorSwatch:insensitive, .header-bar GtkColorButton.button.titlebutton GtkColorSwatch:insensitive,
- .titlebar GtkColorButton.button.titlebutton GtkColorSwatch:insensitive, GtkColorButton.button GtkColorSwatch:backdrop, .header-bar GtkColorButton.button.titlebutton GtkColorSwatch:backdrop,
- .titlebar GtkColorButton.button.titlebutton GtkColorSwatch:backdrop {
+ GtkColorButton.button GtkColorSwatch:only-child:first-child:last-child:insensitive, GtkColorButton.button GtkColorSwatch:only-child:first-child:last-child:backdrop {
box-shadow: none; }
/*********
GtkColorSwatch.bottom {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; }
- GtkColorSwatch.left, GtkColorSwatch:first-child, GtkColorSwatch:first-child .overlay {
+ GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay), GtkColorSwatch:first-child:not(.top) > .overlay {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px; }
- GtkColorSwatch.right, GtkColorSwatch:last-child, GtkColorSwatch:last-child .overlay {
+ GtkColorSwatch.right, GtkColorSwatch:last-child:not(.overlay), GtkColorSwatch:last-child:not(.bottom) > .overlay {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px; }
- GtkColorSwatch:only-child, GtkColorSwatch:only-child .overlay {
+ GtkColorSwatch:only-child:not(.overlay), GtkColorSwatch:only-child > .overlay {
border-radius: 5px; }
GtkColorSwatch:hover, GtkColorSwatch:hover:selected {
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%);
GtkColorButton.button, .header-bar GtkColorButton.button.titlebutton,
.titlebar GtkColorButton.button.titlebutton {
padding: 5px; }
- GtkColorButton.button GtkColorSwatch, .header-bar GtkColorButton.button.titlebutton GtkColorSwatch,
- .titlebar GtkColorButton.button.titlebutton GtkColorSwatch {
+ GtkColorButton.button GtkColorSwatch:only-child:first-child:last-child {
border-radius: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px white; }
- GtkColorButton.button GtkColorSwatch:insensitive, .header-bar GtkColorButton.button.titlebutton GtkColorSwatch:insensitive,
- .titlebar GtkColorButton.button.titlebutton GtkColorSwatch:insensitive, GtkColorButton.button GtkColorSwatch:backdrop, .header-bar GtkColorButton.button.titlebutton GtkColorSwatch:backdrop,
- .titlebar GtkColorButton.button.titlebutton GtkColorSwatch:backdrop {
+ GtkColorButton.button GtkColorSwatch:only-child:first-child:last-child:insensitive, GtkColorButton.button GtkColorSwatch:only-child:first-child:last-child:backdrop {
box-shadow: none; }
/*********
GtkColorSwatch.bottom {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; }
- GtkColorSwatch.left, GtkColorSwatch:first-child, GtkColorSwatch:first-child .overlay {
+ GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay), GtkColorSwatch:first-child:not(.top) > .overlay {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px; }
- GtkColorSwatch.right, GtkColorSwatch:last-child, GtkColorSwatch:last-child .overlay {
+ GtkColorSwatch.right, GtkColorSwatch:last-child:not(.overlay), GtkColorSwatch:last-child:not(.bottom) > .overlay {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px; }
- GtkColorSwatch:only-child, GtkColorSwatch:only-child .overlay {
+ GtkColorSwatch:only-child:not(.overlay), GtkColorSwatch:only-child > .overlay {
border-radius: 5px; }
GtkColorSwatch:hover, GtkColorSwatch:hover:selected {
background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%);