114 lines
2.9 KiB
SCSS
114 lines
2.9 KiB
SCSS
/*****************
|
|
* Color Chooser *
|
|
*****************/
|
|
GtkColorSwatch {
|
|
// This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
|
|
|
|
$_colorswatch_radius: 5px;
|
|
$_colorswatch_overlay_shadow: if($variant == 'light', inset 0 2px 2px -3px transparentize(black, 0.3),
|
|
inset 0 3px 2px -2px transparentize(black, 0.5));
|
|
|
|
&.top {
|
|
border-top-left-radius: $_colorswatch_radius + 0.5px;
|
|
border-top-right-radius: $_colorswatch_radius + 0.5px;
|
|
|
|
overlay {
|
|
border-top-left-radius: $_colorswatch_radius;
|
|
border-top-right-radius: $_colorswatch_radius;
|
|
}
|
|
}
|
|
|
|
&.bottom {
|
|
border-bottom-left-radius: $_colorswatch_radius + 0.5px;
|
|
border-bottom-right-radius: $_colorswatch_radius + 0.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 + 0.5px;
|
|
border-bottom-left-radius: $_colorswatch_radius + 0.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 + 0.5px;
|
|
border-bottom-right-radius: $_colorswatch_radius + 0.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, 0.2), $borders_color); }
|
|
|
|
&:backdrop { color: $backdrop_selected_fg_color; }
|
|
}
|
|
|
|
&.light overlay {
|
|
color: $text_color;
|
|
|
|
&:hover { border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); }
|
|
|
|
&:backdrop { color: $backdrop_text_color; }
|
|
}
|
|
|
|
overlay {
|
|
box-shadow: $_colorswatch_overlay_shadow;
|
|
border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
|
|
|
|
&:hover { box-shadow: inset 0 1px transparentize(white, 0.7); }
|
|
|
|
&:backdrop, &:backdrop:hover {
|
|
border-color: if($variant == 'light', transparentize(black, 0.7), $borders_color);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
&#add-color-button {
|
|
border-radius: $_colorswatch_radius $_colorswatch_radius 0 0;
|
|
|
|
&:only-child { border-radius: $_colorswatch_radius; }
|
|
|
|
overlay {
|
|
@include button(normal);
|
|
|
|
&:hover { @include button(hover); }
|
|
|
|
&:backdrop { @include button(backdrop); }
|
|
}
|
|
}
|
|
|
|
&:insensitive {
|
|
opacity: 0.5;
|
|
|
|
overlay {
|
|
border-color: transparentize(black, 0.4);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
row:selected & { box-shadow: 0 0 0 2px $selected_fg_color; }
|
|
|
|
&#editor-color-sample {
|
|
border-radius: 4px;
|
|
|
|
overlay { border-radius: 4.5px; }
|
|
}
|
|
}
|
|
|
|
// colorscale popup
|
|
colorchooser .popover.osd { border-radius: 5px; } |