Moved between oomox themes
This one's based on Numix, which should look a lot better.
This commit is contained in:
181
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_choosers.scss
Normal file
181
.themes/oomox-numix-gruvbox/gtk-3.20/scss/widgets/_choosers.scss
Normal file
@@ -0,0 +1,181 @@
|
||||
/***************
|
||||
! Color chooser
|
||||
****************/
|
||||
|
||||
@include exports("colorchooser") {
|
||||
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 {}, colorswatch has the programmatically set background, so most of the style is
|
||||
// applied to the overlay box.
|
||||
|
||||
&:drop(active), & { border-style: none; } // FIXME: implement a proper drop(active) state
|
||||
|
||||
$_colorswatch_radius: $roundness;
|
||||
|
||||
// base color corners rounding
|
||||
// to avoid the artifacts caused by rounded corner anti-aliasing the base color
|
||||
// sports a bigger radius.
|
||||
// nth-child is needed by the custom color strip.
|
||||
|
||||
&.top {
|
||||
border-top-left-radius: $_colorswatch_radius + .5px;
|
||||
border-top-right-radius: $_colorswatch_radius + .5px;
|
||||
|
||||
overlay {
|
||||
border-top-left-radius: $_colorswatch_radius;
|
||||
border-top-right-radius: $_colorswatch_radius;
|
||||
}
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
border-bottom-left-radius: $_colorswatch_radius + .5px;
|
||||
border-bottom-right-radius: $_colorswatch_radius + .5px;
|
||||
|
||||
overlay {
|
||||
border-bottom-left-radius: $_colorswatch_radius;
|
||||
border-bottom-right-radius: $_colorswatch_radius;
|
||||
}
|
||||
}
|
||||
|
||||
&.left,
|
||||
&:first-child:not(.top) {
|
||||
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);
|
||||
color: $fg_color;
|
||||
|
||||
&:hover { background-color: shade($bg_color, .9); }
|
||||
|
||||
&:backdrop { background-color: shade($backdrop_bg_color, .95); }
|
||||
}
|
||||
}
|
||||
|
||||
&#editor-color-sample {
|
||||
border-radius: $_colorswatch_radius;
|
||||
|
||||
overlay { border-radius: $_colorswatch_radius + .5px; }
|
||||
}
|
||||
}
|
||||
|
||||
button.color {
|
||||
padding: $spacing;
|
||||
|
||||
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; } }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/***********************
|
||||
! Font and file choosers
|
||||
************************/
|
||||
|
||||
@include exports("miscchoosers") {
|
||||
filechooser {
|
||||
/* for fallback when header bar not used */
|
||||
.dialog-action-box {
|
||||
border-top: 1px solid $borders_color;
|
||||
|
||||
&:backdrop { border-top-color: $backdrop_borders_color; }
|
||||
}
|
||||
|
||||
#pathbarbox { border-bottom: 1px solid $bg_color; }
|
||||
}
|
||||
|
||||
filechooserbutton:drop(active) {
|
||||
box-shadow: none;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user