Mercurial > repos > other > Adwaita-Dark-Green
annotate gtk-3.0/_drawing.scss @ 95:f3009ca89a46
Fix exported colours and export dark ones
| author | IBBoard <dev@ibboard.co.uk> |
|---|---|
| date | Mon, 14 Oct 2019 21:00:06 +0100 |
| parents | cb3e1a45b770 |
| children |
| rev | line source |
|---|---|
| 0 | 1 // Drawing mixins |
| 2 | |
| 3 // generic drawing of more complex things | |
| 4 | |
| 5 @function _widget_edge($c:$borders_edge) { | |
| 6 // outer highlight "used" on most widgets | |
| 7 @return 0 1px $c; | |
| 8 } | |
| 9 | |
| 10 @mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) { | |
| 11 // | |
| 12 // Helper function to stack up to 4 box-shadows; | |
| 13 // | |
| 14 @if $shadow4!=none { box-shadow: $shadow1, $shadow2, $shadow3, $shadow4; } | |
| 15 @else if $shadow3!=none { box-shadow: $shadow1, $shadow2, $shadow3; } | |
| 16 @else if $shadow2!=none { box-shadow: $shadow1, $shadow2; } | |
| 17 @else { box-shadow: $shadow1; } | |
| 18 } | |
| 19 | |
| 20 // entries | |
| 21 | |
|
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
22 @function entry_focus_border($fc) { |
| 0 | 23 @if $variant == 'light' { @return $fc; } |
| 24 @else { @return if($fc==$selected_bg_color, $selected_borders_color, darken($fc,35%)); } | |
| 25 } | |
| 26 | |
|
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
27 @function entry_focus_glow($fc) { |
|
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
28 $_focus_glow_color: if($variant=='light', transparentize($fc,0.85), |
|
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
29 transparentize($fc,0.3)); |
|
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
30 @return inset 0 0 0 1px $_focus_glow_color; |
| 0 | 31 } |
| 32 | |
| 33 @function entry_gradient($c) { | |
|
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
34 @return linear-gradient(to bottom, darken($c,3%), $c 90%); |
| 0 | 35 } |
| 36 | |
| 37 @mixin entry($t, $fc:$selected_bg_color, $edge: $borders_edge) { | |
| 38 // | |
| 39 // Entries drawing function | |
| 40 // | |
| 41 // $t: entry type | |
| 42 // $fc: focus color | |
| 43 // $edge: set to none to not draw the bottom edge or specify a color to not | |
| 44 // use the default one | |
| 45 // | |
| 46 // possible $t values: | |
| 47 // normal, focus, insensitive, backdrop, backdrop-insensitive, osd, osd-focus, osd-backdrop; | |
| 48 // | |
| 49 background-color: transparent; | |
| 50 background-image: entry_gradient($base_color); | |
| 51 $_blank_edge: if($edge == none, none, 0 1px transparentize($edge,1)); | |
| 52 $_entry_edge: if($edge == none, none, _widget_edge($edge)); | |
|
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
53 $_inner_shadows: inset 0 3px transparentize(black, 0.98), |
|
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
54 inset 0 2px transparentize(black, 0.97), |
|
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
55 inset 0 1px transparentize(black, 0.92); |
| 0 | 56 |
|
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
57 // we need to match the same shadow types (inset/outset) in various states |
|
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
58 // hence transparent shadows istead of resetting them when not needed |
|
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
59 $_blank_inner_shadows: inset 0 3px transparentize(black, 1), |
|
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
60 inset 0 2px transparentize(black, 1), |
|
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
61 inset 0 1px transparentize(black, 1); |
| 0 | 62 @if $t==normal { |
| 63 color: $text_color; | |
| 64 border-color: $borders_color; | |
|
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
65 @include _shadows($_inner_shadows, |
|
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
66 entry_focus_glow(transparentize($fc,1)), |
|
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
67 $_entry_edge); |
|
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
68 // the second transparent shadow is needed for the transition to work |
| 0 | 69 } |
| 70 @if $t==focus { | |
|
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
71 @include _shadows($_inner_shadows, |
|
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
72 entry_focus_glow($fc), |
|
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
73 $_entry_edge); |
| 0 | 74 border-color: entry_focus_border($fc); |
| 75 } | |
| 76 @if $t==insensitive { | |
| 77 color: $insensitive_fg_color; | |
| 78 border-color: $borders_color; | |
| 79 background-image: linear-gradient(to bottom, $insensitive_bg_color); | |
|
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
80 @include _shadows($_blank_inner_shadows, $_entry_edge); |
| 0 | 81 |
| 82 } | |
| 83 @if $t==backdrop { | |
| 84 color: $backdrop_text_color; | |
| 85 border-color: $backdrop_borders_color; | |
| 86 background-image: linear-gradient(to bottom, $backdrop_base_color); | |
|
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
87 @include _shadows($_blank_inner_shadows, $_blank_edge); |
| 0 | 88 } |
| 89 @if $t==backdrop-insensitive { | |
| 90 color: $backdrop_insensitive_color; | |
| 91 border-color: $backdrop_borders_color; | |
| 92 background-image: linear-gradient(to bottom, $insensitive_bg_color); | |
|
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
93 @include _shadows($_blank_inner_shadows, $_blank_edge); |
| 0 | 94 } |
| 95 @if $t==osd { | |
| 96 color: $osd_text_color; | |
| 97 border-color: $osd_borders_color; | |
| 98 background-image: linear-gradient(to bottom, transparentize(opacify($osd_borders_color, 1), 0.5)); | |
| 99 background-clip: padding-box; | |
| 100 box-shadow: none; | |
| 101 text-shadow: 0 1px black; | |
| 102 icon-shadow: 0 1px black; | |
| 103 } | |
| 104 @if $t==osd-focus { | |
| 105 color: $osd_text_color; | |
| 106 border-color: $selected_bg_color; | |
| 107 background-image: linear-gradient(to bottom, transparentize(opacify($osd_borders_color, 1), 0.5)); | |
| 108 background-clip: padding-box; | |
|
22
cb3e1a45b770
Restore gtk-3.0 to v3.16 (openSUSE 42.1) and add gtk-3.18 dir
IBBoard <dev@ibboard.co.uk>
parents:
17
diff
changeset
|
109 box-shadow: entry_focus_glow($selected_bg_color); |
| 0 | 110 text-shadow: 0 1px black; |
| 111 icon-shadow: 0 1px black; | |
| 112 } | |
| 113 @if $t==osd-insensitive { | |
| 114 color: $osd_insensitive_fg_color; | |
| 115 border-color: $osd_borders_color; | |
| 116 background-image: linear-gradient(to bottom, $osd_insensitive_bg_color); | |
| 117 background-clip: padding-box; | |
| 118 box-shadow: none; | |
| 119 text-shadow: none; | |
| 120 icon-shadow: none; | |
| 121 } | |
| 122 @if $t==osd-backdrop { | |
| 123 color: $osd_text_color; | |
| 124 border-color: $osd_borders_color; | |
| 125 background-image: linear-gradient(to bottom, transparentize(opacify($osd_borders_color, 1), 0.5)); | |
| 126 background-clip: padding-box; | |
| 127 box-shadow: none; | |
| 128 text-shadow: none; | |
| 129 icon-shadow: none; | |
| 130 } | |
| 131 } | |
| 132 | |
| 133 // buttons | |
| 134 | |
| 135 @function _border_color ($c) { @return darken($c,25%); } // colored buttons want | |
| 136 // the border form the | |
| 137 // base color | |
| 138 | |
| 139 @function _text_shadow_color ($tc:$fg_color, $bg:$bg_color) { | |
| 140 // | |
| 141 // calculate the color of text shadows | |
| 142 // | |
| 143 // $tc is the text color | |
| 144 // $bg is the background color | |
| 145 // | |
| 146 $_lbg: lightness($bg)/100%; | |
| 147 @if lightness($tc)<50% { @return transparentize(white,1-$_lbg/($_lbg*1.3)); } | |
| 148 @else { @return transparentize(black,$_lbg*0.8); } | |
| 149 } | |
| 150 | |
| 151 @function _button_hilight_color($c) { | |
| 152 // | |
| 153 // calculate the right top hilight color for buttons | |
| 154 // | |
| 155 // $c: base color; | |
| 156 // | |
| 157 @if lightness($c)>90% { @return white; } | |
| 158 @else if lightness($c)>80% { @return transparentize(white, 0.3); } | |
| 159 @else if lightness($c)>50% { @return transparentize(white, 0.5); } | |
| 160 @else if lightness($c)>40% { @return transparentize(white, 0.7); } | |
| 161 @else { @return transparentize(white, 0.9); } | |
| 162 } | |
| 163 | |
| 164 @mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) { | |
| 165 // | |
| 166 // helper function for the text emboss effect | |
| 167 // | |
| 168 // $tc is the optional text color, not the shadow color | |
| 169 // | |
| 170 // TODO: this functions needs a way to deal with special cases | |
| 171 // | |
| 172 | |
| 173 $_shadow: _text_shadow_color($tc, $bg); | |
| 174 | |
| 175 @if lightness($tc)<50% { | |
| 176 text-shadow: 0 1px $_shadow; | |
| 177 icon-shadow: 0 1px $_shadow; | |
| 178 } | |
| 179 @else { | |
| 180 text-shadow: 0 -1px $_shadow; | |
| 181 icon-shadow: 0 -1px $_shadow; | |
| 182 } | |
| 183 } | |
| 184 | |
| 185 @mixin button($t, $c:$bg_color, $tc:$fg_color, $edge: $borders_edge) { | |
| 186 // | |
| 187 // Button drawing function | |
| 188 // | |
| 189 // $t: button type, | |
| 190 // $c: base button color for colored* types | |
| 191 // $tc: optional text color for colored* types | |
| 192 // $edge: set to none to not draw the bottom edge or specify a color to not | |
| 193 // use the default one | |
| 194 // | |
| 195 // possible $t values: | |
| 196 // normal, hover, active, insensitive, insensitive-active, | |
| 197 // backdrop, backdrop-active, backdrop-insensitive, backdrop-insensitive-active, | |
| 198 // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated | |
| 199 // | |
| 200 | |
| 201 $_hilight_color: _button_hilight_color($c); | |
| 202 $_button_edge: if($edge == none, none, _widget_edge($edge)); | |
| 203 $_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1))); | |
| 204 | |
| 205 @if $t==normal { | |
| 206 // | |
| 207 // normal button | |
| 208 // | |
| 209 color: $tc; | |
| 210 outline-color: transparentize($tc, 0.7); | |
| 211 border-color: if($c!=$bg_color, _border_color($c), $borders_color); | |
| 212 background-image: linear-gradient(to bottom, | |
| 213 lighten($c,5%), | |
| 214 $c 40%, | |
| 215 darken($c,5%) | |
| 216 ); | |
| 217 @include _button_text_shadow($tc,$c); | |
| 218 @include _shadows(inset 0 1px $_hilight_color, $_button_edge); | |
| 219 } | |
| 220 | |
| 221 @else if $t==hover { | |
| 222 // | |
| 223 // hovered button | |
| 224 // | |
| 225 color: $tc; | |
| 226 outline-color: transparentize($tc, 0.7); | |
| 227 border-color: if($c!=$bg_color, _border_color($c), $borders_color); | |
| 228 background-image: linear-gradient(to bottom, | |
| 229 lighten($c,14%), | |
| 230 lighten($c,4%) 40%, | |
| 231 $c); | |
| 232 | |
| 233 @include _button_text_shadow($tc,lighten($c,4%)); | |
| 234 @include _shadows(inset 0 1px $_hilight_color, $_button_edge); | |
| 235 } | |
| 236 | |
| 237 @else if $t==active { | |
| 238 // | |
| 239 // pushed button | |
| 240 // | |
| 241 color: $tc; | |
| 242 outline-color: transparentize($tc, 0.7); | |
| 243 border-color: if($c!=$bg_color, _border_color($c), $borders_color); | |
| 244 background-image: linear-gradient(to bottom, | |
| 245 darken($c,9%), | |
| 246 darken($c,6.6%) 40%, | |
| 247 darken($c,5%)); | |
| 248 @include _button_text_shadow($tc,darken($c,10%)); | |
| 249 @include _shadows(inset 0 1px transparentize(black, 0.93), | |
| 250 inset 0 2px 1px -2px transparentize(black,0.4), | |
| 251 $_button_edge); | |
| 252 } | |
| 253 @else if $t==insensitive { | |
| 254 // | |
| 255 // insensitive button | |
| 256 // | |
| 257 $_bg: if($c!=$bg_color, mix($c,$base_color,85%), $insensitive_bg_color); | |
| 258 | |
| 259 color: if($tc!=$fg_color, mix($tc,$_bg,50%), $insensitive_fg_color); | |
| 260 border-color: if($c!=$bg_color, _border_color($c), | |
| 261 $insensitive_borders_color); | |
| 262 background-image: linear-gradient(to bottom, $_bg); | |
| 263 text-shadow: none; | |
| 264 icon-shadow: none; | |
| 265 // white with 0 alpha to avoid an ugly transition, since no color means | |
| 266 // black with 0 alpha | |
| 267 @include _shadows(inset 0 1px transparentize(white,1), $_button_edge); | |
| 268 > .label { color: inherit; } | |
| 269 } | |
| 270 @else if $t==insensitive-active { | |
| 271 // | |
| 272 // insensitive pushed button | |
| 273 // | |
| 274 $_bg: if($c!=$bg_color, darken(mix($c,$base_color,85%),5%), | |
| 275 $insensitive_bg_color); | |
| 276 $_bc: if($c!=$bg_color, _border_color($c), $insensitive_borders_color); | |
| 277 | |
| 278 color: if($c!=$bg_color, mix($tc,$_bg,60%), $insensitive_fg_color); | |
| 279 border-color: $_bc; | |
| 280 background-image: linear-gradient(to bottom, mix($_bc, $_bg, 10%), $_bg); | |
| 281 // white with 0 alpha to avoid an ugly transition, since no color means | |
| 282 // black with 0 alpha | |
| 283 @include _shadows(inset 0 1px transparentize(white,1), $_button_edge); | |
| 284 > .label { color: inherit; } | |
| 285 } | |
| 286 | |
| 287 @else if $t==backdrop { | |
| 288 // | |
| 289 // backdrop button | |
| 290 // | |
| 291 $_bg: if($c!=$bg_color,$c,$backdrop_bg_color); | |
| 292 $_bc: if($variant=='light',$c,_border_color($c)); | |
| 293 | |
| 294 color: if($tc!=$fg_color,mix($tc, $_bg, 80%), $backdrop_fg_color); | |
| 295 border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color); | |
| 296 background-image: linear-gradient(to bottom, $_bg); | |
| 297 text-shadow: none; | |
| 298 icon-shadow: none; | |
| 299 @include _shadows(inset 0 1px transparentize(white,1), | |
| 300 $_blank_edge); | |
| 301 } | |
| 302 | |
| 303 @else if $t==backdrop-active { | |
| 304 // | |
| 305 // backdrop pushed button FIXME no colors here! | |
| 306 // | |
| 307 $_bg: if($c!=$bg_color, darken($c,10%), $backdrop_dark_fill); | |
| 308 $_bc: if($variant=='light',$_bg,_border_color($c)); | |
| 309 | |
| 310 color: if($tc!=$fg_color, mix($tc,$_bg,80%), $backdrop_fg_color); | |
| 311 border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color); | |
| 312 background-image: linear-gradient(to bottom, $_bg); | |
| 313 @include _shadows(inset 0 1px transparentize(white,1), | |
| 314 $_blank_edge); | |
| 315 } | |
| 316 | |
| 317 @else if $t==backdrop-insensitive { | |
| 318 // | |
| 319 // backdrop insensitive button | |
| 320 // | |
| 321 | |
| 322 $_bg: if($c!=$bg_color, mix($c,$base_color,85%), $insensitive_bg_color); | |
| 323 $_bc: if($variant=='light',$_bg,_border_color($c)); | |
| 324 | |
| 325 color: if($c!=$bg_color, mix($tc,$_bg,35%), $backdrop_insensitive_color); | |
| 326 border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color); | |
| 327 background-image: linear-gradient(to bottom, $_bg); | |
| 328 text-shadow: none; | |
| 329 icon-shadow: none; | |
| 330 // white with 0 alpha to avoid an ugly transition, since no color means | |
| 331 // black with 0 alpha | |
| 332 @include _shadows(inset 0 1px transparentize(white,1), | |
| 333 $_blank_edge); | |
| 334 > .label { color: inherit; } | |
| 335 } | |
| 336 | |
| 337 @else if $t==backdrop-insensitive-active { | |
| 338 // | |
| 339 // backdrop insensitive pushed button | |
| 340 // | |
| 341 | |
| 342 $_bg: if($c!=$bg_color, darken(mix($c,$base_color,85%),5%), | |
| 343 darken($insensitive_bg_color,5%)); | |
| 344 $_bc: if($variant=='light',$_bg,_border_color($c)); | |
| 345 | |
| 346 color: if($c!=$bg_color, mix($tc,$_bg,35%), $backdrop_insensitive_color); | |
| 347 border-color: if($c!=$bg_color, $_bc, $backdrop_borders_color); | |
| 348 background-image: linear-gradient(to bottom, $_bg); | |
| 349 @include _shadows(inset 0 1px transparentize(white,1), | |
| 350 $_blank_edge); | |
| 351 > .label { color: inherit; } | |
| 352 } | |
| 353 | |
| 354 @else if $t==osd { | |
| 355 // | |
| 356 // normal osd button | |
| 357 // | |
| 358 $_bg: if($c!=$bg_color, transparentize($c, 0.5), | |
| 359 $osd_bg_color); | |
| 360 | |
| 361 color: $osd_fg_color; | |
| 362 border-color: $osd_borders_color; | |
| 363 background-image: linear-gradient(to bottom, $_bg); | |
| 364 background-clip: padding-box; | |
| 365 box-shadow: inset 0 1px transparentize(white, 0.9); | |
| 366 text-shadow: 0 1px black; | |
| 367 icon-shadow: 0 1px black; | |
| 368 outline-color: transparentize($osd_fg_color, 0.7); | |
| 369 } | |
| 370 @else if $t==osd-hover { | |
| 371 // | |
| 372 // active osd button | |
| 373 // | |
| 374 $_bg: if($c!=$bg_color, transparentize($c, 0.3), | |
| 375 lighten($osd_bg_color, 12%)); | |
| 376 | |
| 377 color: white; | |
| 378 border-color: $osd_borders_color; | |
| 379 background-image: linear-gradient(to bottom, $_bg); | |
| 380 background-clip: padding-box; | |
| 381 box-shadow: inset 0 1px transparentize(white, 0.9); | |
| 382 text-shadow: 0 1px black; | |
| 383 icon-shadow: 0 1px black; | |
| 384 outline-color: transparentize($osd_fg_color, 0.7); | |
| 385 } | |
| 386 @else if $t==osd-active { | |
| 387 // | |
| 388 // active osd button | |
| 389 // | |
| 390 $_bg: if($c!=$bg_color, $c, $osd_borders_color); | |
| 391 | |
| 392 color: white; | |
| 393 border-color: $osd_borders_color; | |
| 394 background-image: linear-gradient(to bottom, $_bg); | |
| 395 background-clip: padding-box; | |
| 396 box-shadow: none; | |
| 397 text-shadow: none; | |
| 398 icon-shadow: none; | |
| 399 outline-color: transparentize($osd_fg_color, 0.7); | |
| 400 } | |
| 401 @else if $t==osd-insensitive { | |
| 402 // | |
| 403 // insensitive osd button | |
| 404 // | |
| 405 color: $osd_insensitive_fg_color; | |
| 406 border-color: $osd_borders_color; | |
| 407 background-image: linear-gradient(to bottom, $osd_insensitive_bg_color); | |
| 408 background-clip: padding-box; | |
| 409 box-shadow: none; | |
| 410 text-shadow: none; | |
| 411 icon-shadow: none; | |
| 412 } | |
| 413 @else if $t==osd-backdrop { | |
| 414 // | |
| 415 // backdrop osd button | |
| 416 // | |
| 417 $_bg: if($c!=$bg_color, transparentize($c, 0.5), | |
| 418 $osd_bg_color); | |
| 419 | |
| 420 color: $osd_fg_color; | |
| 421 border-color: $osd_borders_color; | |
| 422 background-image: linear-gradient(to bottom, $_bg); | |
| 423 background-clip: padding-box; | |
| 424 box-shadow: none; | |
| 425 text-shadow: none; | |
| 426 icon-shadow: none; | |
| 427 } | |
| 428 @else if $t==undecorated { | |
| 429 // | |
| 430 // reset | |
| 431 // | |
| 432 border-color: transparent; | |
| 433 background-color: transparent; | |
| 434 background-image: none; | |
| 435 | |
| 436 @include _shadows(inset 0 1px transparentize(white, 1), | |
| 437 $_blank_edge); | |
| 438 | |
| 439 text-shadow: none; | |
| 440 icon-shadow: none; | |
| 441 } | |
| 442 } | |
| 443 | |
| 444 @mixin trough($flat:false, $c:$bg_color, $tc:$fg_color, $noedge:false) { | |
| 445 color: mix($tc,$bg_color,80%); | |
| 446 @if $flat { background-image: linear-gradient(to bottom,$c); } | |
| 447 @else { | |
| 448 background-image: linear-gradient(to bottom, | |
| 449 mix(black,$c,15%) 5%, | |
| 450 mix(black,$c,10%) 20%, | |
| 451 mix(black,$c,10%) 90%, | |
| 452 $c); | |
| 453 } | |
| 454 | |
| 455 border-color: if($c!=$bg_color, _border_color($c), $border_color); | |
| 456 | |
| 457 @if not($noedge) { | |
| 458 @if lightness($c) > 60% { | |
| 459 box-shadow: inset 0 -1px $borders_edge, | |
| 460 0 1px $borders_edge; | |
| 461 } | |
| 462 @else { | |
| 463 box-shadow: inset 0 -1px transparentize($borders_edge,0.5), | |
| 464 0 1px transparentize($borders_edge,0.5); | |
| 465 } | |
| 466 } | |
| 467 @else { box-shadow: none; } | |
| 468 } | |
| 469 | |
| 470 @mixin progressbar_fill($d:horizontal) { | |
| 471 $dir: if($d==vertical,right,bottom); | |
| 472 background-image: linear-gradient(to $dir, $selected_bg_color 2px, | |
| 473 lighten($selected_bg_color,6%)); | |
| 474 } | |
| 475 | |
| 476 @function headerbar_gradient($c, $tc:lighten($c,4%)) { | |
| 477 // | |
| 478 // headerbar gradient helper function | |
| 479 // | |
| 480 // $c: base color | |
| 481 // $tc: top color | |
| 482 // | |
| 483 @return linear-gradient(to bottom, $tc, $c); | |
| 484 } | |
| 485 | |
| 486 @mixin headerbar_fill($c:$bg_color, $tc:lighten($c,4%), $hc:$top_hilight) { | |
| 487 // | |
| 488 // headerbar fill | |
| 489 // | |
| 490 // $c: base color | |
| 491 // $tc: top color | |
| 492 // $hc: top highlight color | |
| 493 // | |
| 494 $_bottom_shade_color: if($variant == 'light', mix(_border_color($c), $c, 30%), | |
| 495 mix(_border_color($c), $c, 20%)); | |
| 496 | |
| 497 background-image: headerbar_gradient($c, $tc); | |
| 498 box-shadow: inset 0 -1px $_bottom_shade_color, // bottom shade | |
| 499 inset 0 1px $hc; // top highlight | |
| 500 | |
| 501 } | |
| 502 | |
| 503 @mixin overshoot($p, $t:normal, $c:$fg_color) { | |
| 504 // | |
| 505 // overshoot | |
| 506 // | |
| 507 // $p: position | |
| 508 // $t: type | |
| 509 // $c: base color | |
| 510 // | |
| 511 // possible $p values: | |
| 512 // top, bottom, right, left | |
| 513 // | |
| 514 // possible $t values: | |
| 515 // normal, backdrop | |
| 516 // | |
| 517 | |
| 518 $_small_gradient_length: 5%; | |
| 519 $_big_gradient_length: 100%; | |
| 520 | |
| 521 $_position: center top; | |
| 522 $_small_gradient_size: 100% $_small_gradient_length; | |
| 523 $_big_gradient_size: 100% $_big_gradient_length; | |
| 524 | |
| 525 @if $p==bottom { | |
| 526 $_position: center bottom; | |
| 527 $_linear_gradient_direction: to top; | |
| 528 } | |
| 529 | |
| 530 @else if $p==right { | |
| 531 $_position: right center; | |
| 532 $_small_gradient_size: $_small_gradient_length 100%; | |
| 533 $_big_gradient_size: $_big_gradient_length 100%; | |
| 534 } | |
| 535 | |
| 536 @else if $p==left { | |
| 537 $_position: left center; | |
| 538 $_small_gradient_size: $_small_gradient_length 100%; | |
| 539 $_big_gradient_size: $_big_gradient_length 100%; | |
| 540 } | |
| 541 | |
| 542 $_small_gradient_color: $c; | |
| 543 $_big_gradient_color: $c; | |
| 544 | |
| 545 @if $c==$fg_color { | |
| 546 $_small_gradient_color: darken($borders_color, 10%); | |
| 547 $_big_gradient_color: $fg_color; | |
| 548 | |
| 549 @if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; } | |
| 550 } | |
| 551 | |
| 552 $_small_gradient: -gtk-gradient(radial, | |
| 553 $_position, 0, | |
| 554 $_position, 0.5, | |
| 555 to($_small_gradient_color), | |
| 556 to(transparentize($_small_gradient_color, 1))); | |
| 557 | |
| 558 $_big_gradient: -gtk-gradient(radial, | |
| 559 $_position, 0, | |
| 560 $_position, 0.6, | |
| 561 from(transparentize($_big_gradient_color, 0.93)), | |
| 562 to(transparentize($_big_gradient_color, 1))); | |
| 563 | |
| 564 @if $t==normal { | |
| 565 background-image: $_small_gradient, $_big_gradient; | |
| 566 background-size: $_small_gradient_size, $_big_gradient_size; | |
| 567 } | |
| 568 | |
| 569 @else if $t==backdrop { | |
| 570 background-image: $_small_gradient; | |
| 571 background-size: $_small_gradient_size; | |
| 572 } | |
| 573 | |
| 574 background-repeat: no-repeat; | |
| 575 background-position: $_position; | |
| 576 | |
| 577 background-color: transparent; // reset some properties to be sure to not inherit them somehow | |
| 578 border: none; // | |
| 579 box-shadow: none; // | |
| 580 } | |
| 581 | |
| 582 @mixin undershoot($p) { | |
| 583 // | |
| 584 // undershoot | |
| 585 // | |
| 586 // $p: position | |
| 587 // | |
| 588 // possible $p values: | |
| 589 // top, bottom, right, left | |
| 590 // | |
| 591 | |
| 592 $_undershoot_color_dark: transparentize(black, 0.8); | |
| 593 $_undershoot_color_light: transparentize(white, 0.8); | |
| 594 | |
| 595 $_gradient_dir: left; | |
| 596 $_dash_bg_size: 10px 1px; | |
| 597 $_gradient_repeat: repeat-x; | |
| 598 $_bg_pos: center $p; | |
| 599 | |
| 600 background-color: transparent; // shouldn't be needed, but better to be sure; | |
| 601 | |
| 602 @if ($p == left) or ($p == right) { | |
| 603 $_gradient_dir: top; | |
| 604 $_dash_bg_size: 1px 10px; | |
| 605 $_gradient_repeat: repeat-y; | |
| 606 $_bg_pos: $p center; | |
| 607 } | |
| 608 | |
| 609 background-image: linear-gradient(to $_gradient_dir, // this is the dashed line | |
| 610 $_undershoot_color_light 50%, | |
| 611 $_undershoot_color_dark 50%); | |
| 612 | |
| 613 padding-#{$p}: 1px; | |
| 614 background-size: $_dash_bg_size; | |
| 615 background-repeat: $_gradient_repeat; | |
| 616 background-origin: content-box; | |
| 617 background-position: $_bg_pos; | |
| 618 } |