kirbylife
/
numix-gtk-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

GTK 3.20 :: Color chooser rewirte (#423) 

* * Color chooser rewirte.

* * Adding button.color code.
pull/517/head
Csaba Jakosa 2016-08-23 13:00:16 +02:00 committed by Dustin Falgout
parent 0bc870bcf7
commit bbf00f22b5
1 changed files with 137 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

180
gtk-3.20/scss/widgets/_choosers.scss
View File

@ -4,85 +4,159 @@
@include exports("colorchooser") { @include exports("colorchooser") {
colorswatch { colorswatch {
&, &:selected { // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
border: 1px solid alpha($black, .1); // is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
border-radius: $roundness - 1px; // applied to the overlay box.
background-color: transparent;
background-clip: border-box;
&:hover { border-color: alpha($black, .3); } &:drop(active), & { border-style: none; } // FIXME: implement a proper drop(active) state
}
&.color-light:selected:hover, &.color-dark:selected:hover { background-image: none; } $_colorswatch_radius: $roundness;
&.left, &:first-child { // base color corners rounding
border-top-left-radius: $roundness; // to avoid the artifacts caused by rounded corner anti-aliasing the base color
border-bottom-left-radius: $roundness; // sports a bigger radius.
} // nth-child is needed by the custom color strip.
&.right, &:last-child {
border-top-right-radius: $roundness;
border-bottom-right-radius: $roundness;
}
&:only-child { border-radius: $roundness; }
&.top { &.top {
border-top-left-radius: $roundness; border-top-left-radius: $_colorswatch_radius + .5px;
border-top-right-radius: $roundness; border-top-right-radius: $_colorswatch_radius + .5px;
overlay {
border-top-left-radius: $_colorswatch_radius;
border-top-right-radius: $_colorswatch_radius;
}
} }
&.bottom { &.bottom {
border-bottom-left-radius: $roundness; border-bottom-left-radius: $_colorswatch_radius + .5px;
border-bottom-right-radius: $roundness; border-bottom-right-radius: $_colorswatch_radius + .5px;
}
coloreditor & { overlay {
border-radius: $roundness; border-bottom-left-radius: $_colorswatch_radius;
border-bottom-right-radius: $_colorswatch_radius;
&.color-dark:hover, &.color-light:hover {
background-image: none;
border-color: alpha($black, .3);
}
} }
} }
GtkColorChooserWidget #add-color-button { &.left,
background-clip: padding-box; &:first-child:not(.top) {
border-color: alpha($black, .1); border-top-left-radius: $_colorswatch_radius + .5px;
border-bottom-left-radius: $_colorswatch_radius + .5px;
overlay {
border-top-left-radius: $_colorswatch_radius;
border-bottom-left-radius: $_colorswatch_radius;
}
}
&.right,
&:last-child:not(.bottom) {
border-top-right-radius: $_colorswatch_radius + .5px;
border-bottom-right-radius: $_colorswatch_radius + .5px;
overlay {
border-top-right-radius: $_colorswatch_radius;
border-bottom-right-radius: $_colorswatch_radius;
}
}
&.dark overlay {
color: $selected_fg_color;
&:hover { border-color: if($variant == 'light', transparentize($black, .2), $borders_color); }
&:backdrop { color: $backdrop_selected_fg_color; }
}
&.light overlay {
color: $text_color;
&:hover { border-color: if($variant == 'light', transparentize($black, .5), $borders_color); }
&:backdrop { color: $backdrop_text_color; }
}
&:drop(active) {
box-shadow: none;
&.light overlay {
border-color: $drop_target_color;
box-shadow: inset 0 0 0 2px if($variant == 'light', darken($drop_target_color, 7%), $borders_color),
inset 0 0 0 1px $drop_target_color;
}
&.dark overlay {
border-color: $drop_target_color;
box-shadow: inset 0 0 0 2px if($variant == 'light', transparentize($black, .7), $borders_color),
inset 0 0 0 1px $drop_target_color;
}
}
overlay {
border: 1px solid if($variant == 'light', transparentize($black, .7), $borders_color);
&:hover {
box-shadow: inset 0 1px transparentize($white, .6),
inset 0 -1px transparentize($black, .8);
}
&:backdrop,
&:backdrop:hover {
border-color: if($variant == 'light', transparentize($black, .7), $borders_color);
box-shadow: none;
}
}
&:disabled {
opacity: .5;
overlay {
border-color: transparentize($black, .4);
box-shadow: none;
}
}
row:selected & { box-shadow: 0 0 0 2px $selected_fg_color; }
&#add-color-button {
border-radius: $_colorswatch_radius $_colorswatch_radius 0 0;
&:only-child { border-radius: $_colorswatch_radius; }
overlay {
background-color: shade($bg_color, .95); background-color: shade($bg_color, .95);
color: $fg_color; color: $fg_color;
&:hover { &:hover { background-color: shade($bg_color, .9); }
border-color: alpha($black, .3);
background-color: shade($bg_color, .9); &:backdrop { background-color: shade($backdrop_bg_color, .95); }
color: $fg_color;
} }
} }
.color-active-badge { &#editor-color-sample {
&, &:selected { border-radius: $_colorswatch_radius;
border-width: 2px;
border-style: solid;
background-color: transparent;
}
&.color-light { overlay { border-radius: $_colorswatch_radius + .5px; }
&, &:hover {
border-color: alpha($black, .3);
color: alpha($black, .3);
} }
} }
&.color-dark { button.color {
&, &:hover { padding: $spacing;
border-color: alpha($white, .3);
color: alpha($white, .3); colorswatch:only-child {
&, overlay { border-radius: 0; }
@if $variant == 'light' { box-shadow: 0 1px _text_shadow_color(); }
} }
@if $variant == 'light' {
&:disabled,
&:backdrop,
&:active,
&:checked { colorswatch:only-child { box-shadow: none; } }
} }
} }
GtkColorButton.button { padding: $spacing; } colorchooser .popover.osd { border-radius: $roundness; }
} }