gtk-3.0/widgets/_color-chooser.scss 3.8 K raw
1
/*****************
2
 * Color Chooser *
3
 *****************/
4
colorswatch {
5
  // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one
6
  // is colorswatch overlay {}, colorswatch has the programmatically set background, so most of the style is
7
  // applied to the overlay box.
8
9
  &, &:drop(active) { border-style: none; } // FIXME: implement a proper drop(active) state
10
11
  $_colorswatch_radius: 5px;
12
  $_colorswatch_overlay_shadow: if($variant == 'light', inset 0 2px 2px -3px transparentize(black, 0.3),
13
                                                        inset 0 3px 2px -2px transparentize(black, 0.5));
14
15
  // base color corners rounding
16
  // to avoid the artifacts caused by rounded corner anti-aliasing the base color
17
  // sports a bigger radius.
18
  // nth-child is needed by the custom color strip.
19
20
  &.top {
21
    border-top-left-radius: $_colorswatch_radius + 0.5px;
22
    border-top-right-radius: $_colorswatch_radius + 0.5px;
23
24
    overlay {
25
      border-top-left-radius: $_colorswatch_radius;
26
      border-top-right-radius: $_colorswatch_radius;
27
    }
28
  }
29
30
  &.bottom {
31
    border-bottom-left-radius: $_colorswatch_radius + 0.5px;
32
    border-bottom-right-radius: $_colorswatch_radius + 0.5px;
33
34
    overlay {
35
      border-bottom-left-radius: $_colorswatch_radius;
36
      border-bottom-right-radius: $_colorswatch_radius;
37
    }
38
  }
39
40
  &.left,
41
  &:first-child:not(.top) {
42
    border-top-left-radius: $_colorswatch_radius + 0.5px;
43
    border-bottom-left-radius: $_colorswatch_radius + 0.5px;
44
45
    overlay {
46
      border-top-left-radius: $_colorswatch_radius;
47
      border-bottom-left-radius: $_colorswatch_radius;
48
    }
49
  }
50
51
  &.right,
52
  &:last-child:not(.bottom) {
53
    border-top-right-radius: $_colorswatch_radius + 0.5px;
54
    border-bottom-right-radius: $_colorswatch_radius + 0.5px;
55
56
    overlay {
57
      border-top-right-radius: $_colorswatch_radius;
58
      border-bottom-right-radius: $_colorswatch_radius;
59
    }
60
  }
61
62
  &.dark overlay {
63
    color: $selected_fg_color;
64
65
    &:hover { border-color: if($variant == 'light', transparentize(black, 0.2), $borders_color); }
66
67
    &:backdrop { color: $backdrop_selected_fg_color; }
68
  }
69
70
  &.light overlay {
71
    color: $text_color;
72
73
    &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), $borders_color); }
74
75
    &:backdrop { color: $backdrop_text_color; }
76
  }
77
78
  &:drop(active) {
79
    box-shadow: none;
80
81
    &.light overlay {
82
      border-color: $drop_target_color;
83
      box-shadow: inset 0 0 0 2px if($variant == 'light', darken($drop_target_color, 7%), $borders_color),
84
                  inset 0 0 0 1px $drop_target_color;
85
    }
86
87
    &.dark overlay {
88
      border-color: $drop_target_color;
89
      box-shadow: inset 0 0 0 2px if($variant == 'light', transparentize(black, 0.7), $borders_color),
90
                  inset 0 0 0 1px $drop_target_color;
91
    }
92
  }
93
94
  overlay {
95
    box-shadow: $_colorswatch_overlay_shadow;
96
    border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color);
97
98
    &:hover { box-shadow: inset 0 1px transparentize(white, 0.7); }
99
100
    &:backdrop, &:backdrop:hover {
101
      border-color: if($variant == 'light', transparentize(black, 0.7), $borders_color);
102
      box-shadow: none;
103
    }
104
  }
105
106
  &#add-color-button {
107
    border-radius: $_colorswatch_radius $_colorswatch_radius 0 0;
108
109
    &:only-child { border-radius: $_colorswatch_radius; }
110
111
    overlay {
112
      @include button(normal);
113
114
      &:hover { @include button(hover); }
115
116
      &:backdrop { @include button(backdrop); }
117
    }
118
  }
119
120
  &:disabled {
121
    opacity: 0.5;
122
123
    overlay {
124
      border-color: transparentize(black, 0.4);
125
      box-shadow: none;
126
    }
127
  }
128
129
  row:selected & { box-shadow: 0 0 0 2px $selected_fg_color; }
130
131
  &#editor-color-sample {
132
    border-radius: 4px;
133
134
    overlay { border-radius: 4.5px; }
135
  }
136
}
137
138
// colorscale popup
139
colorchooser .popover.osd { border-radius: 5px; }