gtk3/widgets/_color_chooser.scss

0001 @charset "UTF-8";
0002
0003 /*****************
0004  * Color Chooser *
0005  *****************/
0006 // FIXME button.color in buttons section
0007 colorswatch {
0008         // take care of colorswatches on selected elements
0009         :selected & {
0010                 box-shadow: none;
0011                 &.overlay,
0012                 &.overlay:hover {
0013                         border-color: gtk("@theme_selected_fg_color");
0014                 }
0015         }
0016
0017         &:selected {
0018                 box-shadow: none;
0019         }
0020
0021         &.top,
0022         &.bottom,
0023         &.left,
0024         &:first-child:not(.overlay):not(.top),
0025         &.right,
0026         &:last-child:not(.overlay):not(.bottom),
0027         &:only-child:not(.overlay),
0028         &.top > .overlay,
0029         &.bottom > .overlay,
0030         &:first-child:not(.top) > .overlay,
0031         &:last-child:not(.bottom) > .overlay,
0032         &:only-child > .overlay {
0033                 border-radius: $r;
0034         }
0035
0036         // hover effect
0037         &:hover,
0038         &:hover:selected {
0039                 background-image: linear-gradient(
0040                         135deg,
0041                         transparentize(white, 0.3),
0042                         transparentize(white, 1) 50%
0043                 );
0044                 box-shadow: inset 0 1px transparentize(white, 0.6);
0045                 &.color-dark {
0046                         // swatches with colors with luminosity lower than 50% get the color-dark class
0047                         background-image: linear-gradient(
0048                                 135deg,
0049                                 transparentize(white, 0.5),
0050                                 transparentize(white, 1) 50%
0051                         );
0052                 }
0053         }
0054         &:backdrop,
0055         &:backdrop:selected &.color-dark:backdrop,
0056         &.color-dark:backdrop:selected {
0057                 background-image: none;
0058                 box-shadow: none;
0059         }
0060
0061         // no hover effect for the colorswatch in the color editor
0062         GtkColorEditor & {
0063                 border-radius: $r; // same radius as the entry
0064                 &:hover {
0065                         background-image: none;
0066                         box-shadow: none;
0067                 }
0068                 &:backdrop {
0069                         box-shadow: none;
0070                 }
0071         }
0072
0073         // indicator and keynav outline colors
0074         &.color-dark {
0075                 color: white;
0076                 outline-color: transparentize(black, 0.7);
0077                 &:backdrop {
0078                         color: transparentize(white, 0.7);
0079                 }
0080         }
0081         &.color-light {
0082                 color: black;
0083                 outline-color: transparentize(white, 0.5);
0084                 &:backdrop {
0085                         color: transparentize(black, 0.7);
0086                 }
0087         }
0088
0089         // border color
0090         overlay,
0091         overlay:selected {
0092                 border: 1px solid gtk("@borders");
0093                 &:hover {
0094                         border-color: gtk("@theme_button_decoration_hover");
0095                 }
0096         }
0097
0098         // make the add color button looks like, well, a button
0099         &#add-color-button {
0100                 border-style: solid; // the borders are drawn by the overlay for standard colorswatches to have them semi
0101                 border-width: 1px; // translucent on the colored background, here it's not necessary so they need to be set
0102                 @include neobutton(normal);
0103                 overlay {
0104                         @include neobutton(toolbutton);
0105                 } // reset the overlay to not cover the button style underneat
0106         }
0107 }
0108
0109 GtkColorButton.button {
0110         padding: 5px; // Uniform padding on the GtkColorButton
0111
0112         GtkColorSwatch:first-child:last-child {
0113                 // :first-child:last-child for a specificity bump, it gets overridden by the
0114                 // colorpicker style, otherwise
0115                 border-radius: 0;
0116                 box-shadow: none;
0117                 &:disabled,
0118                 &:backdrop {
0119                         box-shadow: none;
0120                 }
0121         }
0122 }