1// Drawing mixins 2 3@function _backdrop_color($c) { 4 // 5 // adjusts colors for use in the backdrop state 6 // 7 @if $light { 8 @return if($c!=white, lighten($c, 5%), transparentize(white, 0.3)); 9 } 10 @else { 11 @if $c==$selected_bg_color or $c==$hb_pathbar_bg { 12 @return lighten($c, 5%); 13 } @else { 14 @return darken($c, 2%); 15 } 16 } 17} 18// generic drawing of more complex things 19 20@function _widget_edge($c:$borders_edge) { 21// outer highlight "used" on most widgets 22 @return 0 1px $c; 23} 24 25@mixin _shadows($shadow1, $shadow2:none, $shadow3:none, $shadow4:none) { 26// 27// Helper function to stack up to 4 box-shadows; 28// 29 @if $shadow4!=none { box-shadow: $shadow1, $shadow2, $shadow3, $shadow4; } 30 @else if $shadow3!=none { box-shadow: $shadow1, $shadow2, $shadow3; } 31 @else if $shadow2!=none { box-shadow: $shadow1, $shadow2; } 32 @else { box-shadow: $shadow1; } 33} 34 35// entries 36 37@function entry_focus_border($fc:$selected_bg_color) { 38 @if $variant == 'light' { @return $fc; } 39 @else { @return if($fc==$selected_bg_color, $selected_borders_color, darken($fc,35%)); } 40} 41 42@function entry_focus_shadow($fc:$selected_bg_color) { 43 @return inset 0 0 0 1px $fc; 44} 45 46@function entry_gradient($c) { 47 @if $variant=='light' { @return linear-gradient(to bottom, mix($borders_color, $c, 35%), 48 mix($borders_color, $c, 7%) 3px, 49 $c 90%); } 50 @else { @return linear-gradient(to bottom, mix($borders_color, $c, 95%), 51 mix($borders_color, $c, 40%) 3px, 52 $c 90%); } 53} 54 55@mixin entry($t, $fc:$selected_bg_color, $c: $base_color, $tc: $fg_color, $edge: $borders_edge) { 56// 57// Entries drawing function 58// 59// $t: entry type 60// $fc: focus color 61// $edge: set to none to not draw the bottom edge or specify a color to not 62// use the default one 63// 64// possible $t values: 65// normal, focus, insensitive, backdrop, backdrop-insensitive, osd, osd-focus, osd-backdrop; 66// 67 68 background-color: transparent; 69 background-image: entry_gradient($base_color); 70 $_blank_edge: if($edge == none, none, 0 1px transparentize($edge,1)); 71 $_entry_edge: inset 0 1px 1px 0px rgba(0, 0, 0, if($c==$headerbar_bg_color, .15, 0.05)); 72 73 @if $t==normal { 74 $_bc: if($c == $headerbar_bg_color, lighten($hb_pathbar_bg, 5%), $c); 75 color: if($tc != $fg_color, transparentize($tc, .1), $fg_color); 76 border-color: if($c != $base_color, transparent, $borders_color); 77 @if $c!=$headerbar_bg_color { 78 @if $variant == 'light' { 79 border-top-color: darken($_bc, if($c != $base_color, 12%, 20%)); 80 } 81 else { 82 border-top-color: darken($_bc, if($c != $base_color, 12%, 20%)); 83 } 84 @include _shadows($_entry_edge); 85 } 86 @else { 87 border-top-color: $_bc; 88 box-shadow: none; 89 } 90 background-color: $_bc; 91 // for the transition to work the number of shadows in different states needs to match, hence the transparent shadow here. 92 } 93 @if $t==focus { 94 @include _shadows($_entry_edge); 95 border-color: entry_focus_border($fc); 96 } 97 @if $t==insensitive { 98 background-color: if($c != $base_color, mix($c, if($c == $headerbar_bg_color, $headerbar_bg_color, $base_color), 85%), transparent); 99 border-color: if($c == $headerbar_bg_color, $hb_pathbar_bg, $insensitive_borders_color); 100 box-shadow: none; 101 color: if($tc != $text_color, mix($tc, $c, 50%), $insensitive_fg_color); 102 } 103 @if $t==backdrop { 104 $_bg: null; 105 $_tc: null; 106 $_border_c: null; 107 @if $c == $headerbar_bg_color { 108 $_bg: $hb_button_bg_hover; 109 $_tc: $backdrop_headerbar_text_color; 110 $_border_c: $_bg; 111 } @else { 112 $_bg: if($variant=='light', _backdrop_color($c), $c); 113 $_tc: if($tc != $text_color, mix($tc, $c, 80%), $backdrop_text_color); 114 $_border_c: $backdrop_borders_color 115 } 116 background-color: $_bg; 117 border-color: $_border_c; 118 box-shadow: none; 119 color: $_tc; 120 121 .label, & { color: $_tc; } 122 } 123 @if $t==backdrop-insensitive { 124 background-color: transparent; 125 border-color: if($c != $base_color, transparent, transparentize($backdrop_borders_color, 0.3)); 126 box-shadow: none; 127 color: if($c != $base_color, mix($tc, $c, 35%), $backdrop_insensitive_color); 128 129 .label, & { color: $backdrop_fg_color; } 130 } 131 @if $t==osd { 132 color: $osd_text_color; 133 border-color: $osd_borders_color; 134 background-color: transparentize(opacify($osd_borders_color, 1), 0.5); 135 background-clip: padding-box; 136 box-shadow: none; 137 } 138 @if $t==osd-focus { 139 color: $osd_text_color; 140 border-color: $selected_bg_color; 141 background-color: transparentize(opacify($osd_borders_color, 1), 0.5); 142 background-clip: padding-box; 143 } 144 @if $t==osd-insensitive { 145 color: $osd_insensitive_fg_color; 146 border-color: $osd_borders_color; 147 background-color: $osd_insensitive_bg_color; 148 background-clip: padding-box; 149 box-shadow: none; 150 } 151 @if $t==osd-backdrop { 152 color: $osd_text_color; 153 border-color: $osd_borders_color; 154 background-color: transparentize(opacify($osd_borders_color, 1), 0.5); 155 background-clip: padding-box; 156 box-shadow: none; 157 } 158} 159 160// buttons 161 162@function _border_color($c, $darker: false) { 163 @if $darker == true { 164 @if lightness($c)<40% { @return darken($c, 20%); } 165 @else { @return darken($c, 10%); } 166 } 167 @else { 168 @if lightness($c)<40% { @return darken($c, 15%); } 169 @else { @return darken($c, 13%); } 170 } 171} 172 173@function _text_shadow_color ($tc:$fg_color, $bg:$bg_color) { 174// 175// calculate the color of text shadows 176// 177// $tc is the text color 178// $bg is the background color 179// 180 $_lbg: lightness($bg)/100%; 181 @if lightness($tc)<50% { @return transparentize(white,1-$_lbg/($_lbg*1.3)); } 182 @else { @return transparentize(black,$_lbg*0.8); } 183} 184 185@function _button_hilight_color($c) { 186// 187// calculate the right top hilight color for buttons 188// 189// $c: base color; 190// 191 @if lightness($c)>95% { @return white; } 192 @else if lightness($c)>90% { @return transparentize(white, 0.2); } 193 @else if lightness($c)>80% { @return transparentize(white, 0.4); } 194 @else if lightness($c)>50% { @return transparentize(white, 0.6); } 195 @else if lightness($c)>40% { @return transparentize(white, 0.8); } 196 @else { @return transparentize(white, 0.95); } 197} 198 199@mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) { 200// 201// helper function for the text emboss effect 202// 203// $tc is the optional text color, not the shadow color 204// 205// TODO: this functions needs a way to deal with special cases 206// 207 208 $_shadow: _text_shadow_color($tc, $bg); 209 210 @if lightness($tc)<50% { 211 text-shadow: 0 1px $_shadow; 212 icon-shadow: 0 1px $_shadow; 213 } 214 @else { 215 text-shadow: 0 -1px $_shadow; 216 icon-shadow: 0 -1px $_shadow; 217 } 218} 219 220@mixin button($t, $c:$button_bg_color, $tc:$fg_color, $flat:false) { 221 // Button drawing function 222 // 223 // $t: button type, 224 // $c: base button color for colored* types 225 // $tc: optional text color for colored* types 226 // $flat: true/false 227 // 228 // possible $t values: 229 // normal, hover, active, insensitive, insensitive-active, 230 // backdrop, backdrop-hover, backdrop-active, backdrop-insensitive, backdrop-insensitive-active, 231 // osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated 232 233 $_pressed: if(lightness($c)<15%, transparentize(black, 0.4), transparentize(black, 0.8)); 234 $shadow: null; 235 @if $variant == "dark" or $c != $button_bg_color { $shadow: 0px 2px 2px -1px $borders_edge, inset 0 -1px _button_hilight_color($c); } 236 @else { $shadow: 0px 2px 2px -1px $borders_edge; } 237 238 $_border: if($c == $button_bg_color, $borders_color, darken($c, 10%)); 239 240 @if $t==normal { 241 // normal button 242 background-color: $c; 243 background-image: none; 244 color: $tc; 245 246 @if $flat { 247 border-color: $c; 248 box-shadow: none; 249 } @else { 250 border-color: $_border; 251 box-shadow: 0 1px transparentize(black, 0.9); 252 } 253 text-shadow: none; 254 icon-shadow: none; 255 } 256 257 @else if $t==hover { 258 // hovered button 259 -gtk-image-effect: highlight; 260 261 $_bg: null; 262 263 @if $c==$headerbar_bg_color { $_bg: lighten($c, 15%); } 264 @else if $c==$success_color or $c==$destructive_color or $c==$warning_color or $c==$neutral_color or $c==$purple { $_bg: lighten($c, 5%); } 265 @else if $c==$button_bg_color { 266 @if $variant=='light' { $_bg: lighten($c, 25%); } 267 @else { $_bg: lighten($c, 1%); } 268 } 269 270 background-color: $_bg; 271 background-image: none; 272 color: $tc; 273 274 @if $flat { 275 border-color: $_bg; 276 box-shadow: none; 277 } @else { 278 border-color: $_border; 279 border-bottom-color: darken($_border, if($c == $headerbar_bg_color or $c == $button_bg_color, 15%, 12%)); 280 box-shadow: 0 1px transparentize(black, 0.85); 281 } 282 text-shadow: none; 283 icon-shadow: none; 284 } 285 286 @else if $t==active { 287 $_bg: null; 288 $_border_top_color: null; 289 $_box_shadow: none; 290 291 @if $c==$headerbar_bg_color { 292 $_bg: lighten($c, 10%); 293 $_border: $_bg; 294 } 295 @else if $c==$button_bg_color{ 296 @if $variant=='light' { 297 $_bg: darken($c, 7%); 298 $_border: $borders_color; 299 $_border_top_color: darken($_border, 25%); 300 } 301 @else { 302 $_bg: darken($button_bg_color,10%); 303 $_border: $borders_color; 304 $_border_top_color: darken($_border, 8%); 305 } 306 $_box_shadow: inset 0 1px 1px 0px rgba(0, 0, 0, 0.05); 307 } 308 @else if $c==$success_color or $c==$destructive_color or $c==$warning_color or $c==$neutral_color or $c==$purple { 309 $_bg: darken($c, 10%); 310 $_border: darken($c, 15%); 311 $_border_top_color: darken($_border, 5%); 312 @if $flat { 313 $_bg: darken($c, 10%); 314 $_border: $_bg; 315 $_border_top_color: $_bg; 316 $_box_shadow: none; 317 } 318 } 319 320 box-shadow: $_box_shadow; 321 border-color: $_border; 322 border-top-color: $_border_top_color; 323 background-color: $_bg; 324 background-image: none; 325 text-shadow: none; 326 icon-shadow: none; 327 } 328 329 @else if $t==active-hover { 330 $_bg: none; 331 332 @if $c == $headerbar_bg_color { 333 $_bg: lighten($c, 20%); 334 border-color: $_bg; 335 box-shadow: none; 336 } @else { 337 @if $flat == true { $c: darken($c, 5%); } 338 $_bg: if(lightness($c)<35%, lighten($c, 18%), darken($c, 7%)); 339 $_bg: transparentize($_bg, 0.4); 340 } 341 342 background-color: $_bg; 343 background-image: none; 344 @if $variant=='dark' and $c != $headerbar_bg_color { background-color: darken($button_bg_color,9%); } 345 text-shadow: none; 346 icon-shadow: none; 347 } 348 349 @else if $t==insensitive { 350 // insensitive button 351 $_bg: null; 352 @if $c == $button_bg_color { 353 $_bg: $bg_color; 354 } @else if $c == $headerbar_bg_color { 355 $_bg: $c; 356 } @else if $c == $red or $green or $yellow or $blue or $purple { 357 $_bg: transparentize($c, .1); 358 } 359 @else { 360 $_bg: darken($c, 20%); 361 } 362 363 background-color: $_bg; 364 background-image: none; 365 366 @if $flat { 367 border-color: $_bg; 368 box-shadow: none; 369 } @else { 370 border-color: if($c!=$button_bg_color, $c, $insensitive_borders_color); 371 box-shadow: 0 1px transparent; 372 } 373 374 .label, & { 375 $_label_alpha: if($tc == $headerbar_fg_color, 0.25, 0); 376 $_label_color: none; 377 378 @if $c == $success_color { 379 $_label_color: $porcelain; 380 $_label_alpha: 0.45; 381 } @else if $tc == $fg_color { 382 $_label_color: $insensitive_fg_color; 383 $_label_alpha: 0; 384 } @else { 385 $_label_color: mix($tc, $_bg, 50%); 386 $_label_alpha: 0.25; 387 } 388 389 color: transparentize($_label_color, $_label_alpha); 390 } 391 } 392 393 @else if $t==insensitive-active { 394 // insensitive pushed button 395 $_from: $c; 396 $_to: if($c==$headerbar_bg_color, $headerbar_bg_color, $base_color); 397 $_mix: mix($_from, $_to, 85%); 398 399 $_bg: darken($_mix, 8%); 400 background-color: $_bg; 401 background-image: none; 402 403 @if $flat { 404 border-color: $_bg; 405 box-shadow: none; 406 } @else { 407 border-color: $insensitive_borders_color; 408 border-top-color: darken($insensitive_borders_color, 10%); 409 box-shadow: inset 0 1px 1px 0px rgba(0, 0, 0, if($c==$headerbar_bg_color, .15, 0.05)); 410 } 411 412 .label, & { color: if($c != $button_bg_color, mix($tc, $_bg, 60%), $insensitive_fg_color); } 413 } 414 415 @else if $t == backdrop { 416 // backdrop button 417 $_bc: if($c != $button_bg_color, _backdrop_color(_border_color($c)), $backdrop_borders_color); 418 419 $_bg: null; 420 @if $c == $headerbar_bg_color { 421 $_bg: $backdrop_headerbar_bg_color; 422 } @else if $c == $button_bg_color { 423 $_bg: $button_backdrop_bg_color; 424 } @else { 425 $_bg: _backdrop_color($c); 426 } 427 428 -gtk-image-effect: dim; 429 background-color: $_bg; 430 background-image: none; 431 border-color: if($flat==true, $_bg, $_bc); 432 box-shadow: none; 433 434 .label, & { color: if($tc != $fg_color, mix($tc, $_bg, 60%), $backdrop_text_color); } 435 } 436 437 @else if $t==backdrop-hover { 438 $_bg: null; 439 @if $c==$headerbar_bg_color { $_bg: lighten($backdrop_headerbar_bg_color, 6%); } 440 @else if $c==$success_color or $c==$destructive_color or $c==$neutral_color or $c==$purple { 441 $_c: _backdrop_color($c); 442 $_bg: lighten($_c, 5%); 443 } @else if $c==$button_bg_color { 444 $_bg: if($light, lighten($button_backdrop_bg_color, 25%), lighten($button_backdrop_bg_color, 1%) ); 445 } 446 447 color: $tc; 448 449 @if $flat { 450 background-color: $_bg; 451 background-image: none; 452 border-color: $_bg; 453 box-shadow: none; 454 } @else { 455 border-color: $_border; 456 border-bottom-color: darken($_border, if($c == $headerbar_bg_color or $c == $button_bg_color, 15%, 12%)); 457 box-shadow: 0 1px transparentize(black, 0.85); 458 } 459 } 460 @else if $t==backdrop-active { 461 // backdrop pushed button 462 463 $_bg: null; 464 $_bc: if($c != $button_bg_color, _backdrop_color(_border_color($c)), $backdrop_borders_color); 465 466 @if $c==$headerbar_bg_color { 467 $_bg: lighten($backdrop_headerbar_bg_color, 5%); 468 } @else if $c!=$headerbar_bg_color and $variant=='light'{ 469 $_bg: darken($c, 12%); 470 } 471 @else if $c!=$headerbar_bg_color and $variant=='dark'{ 472 $_bg: darken($c, 7%); 473 } 474 475 $_border_top_color: null; 476 @if $c==$headerbar_bg_color { $_border_top_color: $_bg;} 477 @else if $c==$button_bg_color { 478 @if $variant=='light' { $_border_top_color: darken($_border,10%);} 479 @else { $_border_top_color: darken($_border,2%);} 480 } 481 482 background-color: $_bg; 483 background-image: none; 484 border-color: if($flat==true, $_bg, $_bc); 485 border-top-color: $_border_top_color; 486 box-shadow: none; 487 488 .label, & { color: if($tc != $fg_color, mix($tc, $_bg, 80%), $backdrop_fg_color); } 489 } 490 491 @else if $t==backdrop-insensitive { 492 // backdrop insensitive button 493 494 $_bc: if($c != $button_bg_color, _backdrop_color(_border_color($c)), transparentize($backdrop_borders_color, 0.3)); 495 $_bg: null; 496 @if $c == $button_bg_color { 497 $_bg: $backdrop_bg_color; 498 } @else if $c == $headerbar_bg_color { 499 $_bg: transparent; 500 background-image: none; 501 text-shadow: none; 502 icon-shadow: none; 503 } 504 @else if $c == $red or $green or $yellow or $blue or $purple { 505 $_bg: transparentize($c, .1); 506 } 507 @else { 508 $_bg: darken($c, 20%); 509 } 510 511 background-color: $_bg; 512 background-image: none; 513 border-color: if($flat==true, $_bg, $_bc); 514 box-shadow: none; 515 516 .label, & { color: if($c != $button_bg_color, mix($tc, $_bg, 35%), transparentize($backdrop_text_color, 0.3)); } 517 } 518 519 @else if $t==backdrop-insensitive-active { 520 // backdrop insensitive pushed button 521 $_bg: null; 522 $_bc: if($c != $button_bg_color, _backdrop_color(_border_color($c)), $backdrop_borders_color); 523 @if $c == $headerbar_bg_color { 524 $_bg: mix($c, $headerbar_bg_color, 85%); 525 } 526 @else if $c!=$headerbar_bg_color and $variant=='light'{ 527 $_bg: darken($c, 15%); 528 } 529 @else if $c!=$headerbar_bg_color and $variant=='dark'{ 530 $_bg: darken($c, 5%); 531 } 532 533 background-color: $_bg; 534 background-image: none; 535 border-color: if($flat==true, $_bg, $_bc); 536 $_border_top_color: null; 537 @if $c==$headerbar_bg_color { $_border_top_color: darken($_border,15%);} 538 @else if $c==$button_bg_color { 539 @if $variant=='light' { $_border_top_color: darken($_border,15%);} 540 @else { $_border_top_color: darken($_border,1%);} 541 } 542 border-top-color: $_border_top_color; 543 544 .label { color: if($c != $button_bg_color, mix($tc, $_bg, 35%), transparentize($backdrop_text_color, 0.5)); } 545 } 546 547 @else if $t==osd { 548 // 549 // normal osd button 550 // 551 $_bg: if($c != $button_bg_color, transparentize($c, 0.5), $osd_button_bg_color); 552 553 color: $osd_fg_color; 554 border-color: _border_color($_bg); 555 background-color: $_bg; 556 background-image: none; 557 background-clip: padding-box; 558 box-shadow: inset 0 -1px 1px _button_hilight_color($_bg); 559 } 560 561 @else if $t==osd-hover { 562 // 563 // active osd button 564 // 565 $_bg: if($c != $button_bg_color, transparentize($c, 0.3), lighten($osd_button_bg_color, 12%)); 566 567 color: white; 568 border-color: _border_color($_bg); 569 background-color: $_bg; 570 background-image: none; 571 background-clip: padding-box; 572 box-shadow: inset 0 -1px 1px _button_hilight_color($_bg); 573 } 574 575 @else if $t==osd-active { 576 // 577 // active osd button 578 // 579 $_bg: if($c != $button_bg_color, $c, $osd_button_bg_color); 580 581 color: white; 582 border-color: _border_color($_bg); 583 background-color: $_bg; 584 background-image: none; 585 background-clip: padding-box; 586 box-shadow: inset 0 2px 3px -1px $_pressed; 587 } 588 589 @else if $t==osd-insensitive { 590 // 591 // insensitive osd button 592 // 593 color: $osd_insensitive_fg_color; 594 background-color: $osd_insensitive_bg_color; 595 background-image: none; 596 border-color: _border_color($osd_insensitive_bg_color); 597 background-clip: padding-box; 598 box-shadow: none; 599 } 600 601 @else if $t==osd-backdrop { 602 // 603 // backdrop osd button 604 // 605 $_bg: if($c != $button_bg_color, transparentize($c, 0.5), $osd_bg_color); 606 607 color: $osd_fg_color; 608 border-color: _border_color($_bg); 609 background-color: $_bg; 610 background-image: none; 611 background-clip: padding-box; 612 box-shadow: none; 613 } 614 615 @else if $t==undecorated { 616 // 617 // reset 618 // 619 border-color: transparent; 620 background-color: transparent; 621 background-image: none; 622 box-shadow: none; 623 text-shadow: none; 624 icon-shadow: none; 625 } 626} 627 628/*************************** 629 * Check and Radio buttons * 630 ***************************/ 631 632@mixin check($t, $c:white, $tc:white) { 633 // Check/Radio drawing function 634 // 635 // $t: check/radio type, 636 // $c: base button color for colored* types 637 // $tc: optional text color for colored* types 638 // 639 // possible $t values: 640 // normal, hover, active, insensitive, backdrop, backdrop-insensitive 641 642 $_checked: if($c==$success_color, true, false); 643 $_border_color: if($_checked, $c, if($light, $borders_color, white)); 644 $_dim_border_color: transparentize($_border_color, if($light, 0.3, 0.7)); 645 $_dim_background: if($light, $dark_fill, $slate); 646 647 @if $t==normal { 648 background-color: if($_checked, $c, if($variant=='light', $c, transparent)); 649 border-color: $_border_color; 650 box-shadow: 0 1px transparentize(black, 0.95); 651 color: $tc; 652 } 653 654 @if $t==hover { 655 -gtk-image-effect: highlight; 656 background-color: if($c==white, darken($c, 5%), lighten($c, 5%)); 657 } 658 659 @if $t==active { 660 box-shadow: inset 0 1px 1px 0px if($light, rgba(0, 0, 0, 0.2), black); 661 } 662 663 @if $t==insensitive { 664 $_bg: if($_checked, $_dim_background , transparent); 665 background-color: $_bg; 666 border-color: if($_checked, $_bg, $_dim_border_color); 667 box-shadow: none; 668 color: transparentize($tc, 0.3); 669 } 670 671 @if $t==backdrop { 672 -gtk-image-effect: dim; 673 674 background-color: if($_checked, _backdrop_color($c), $bg_color); 675 border-color: $_dim_border_color; 676 box-shadow: 0 1px transparentize(black, 0.95); 677 color: $tc; 678 } 679 680 @if $t==backdrop-hover { 681 -gtk-image-effect: highlight; 682 background-color: if($c!=white, lighten($c, 9%), darken($c, 7%)); 683 } 684 685 @if $t==backdrop-insensitive { 686 -gtk-image-effect: dim; 687 688 $_bg: if($_checked, $_dim_background, transparent); 689 background-color: $_bg; 690 border-color: if($_checked, $_bg, $_dim_border_color); 691 box-shadow: none; 692 color: transparentize($tc, 0.6); 693 } 694} 695 696/************ 697 * Switches * 698 ************/ 699@mixin switch($bg:$dark_fill, $alt:$success_color) { 700 -GtkSwitch-slider-width: 18px; 701 -GtkSwitch-slider-height: 18px; 702 703 font-weight: normal; 704 font-size: 0; 705 outline-color: $focus_color; 706 outline-offset: -2px; 707 outline-radius: $small_radius; 708 box-shadow: inset 0 1px 1px 0 if($bg==$dark_fill, transparentize($bg, 0.2), rgba(0, 0, 0, 0.15)); 709 710 $_insensitive_border_color: null; 711 @if $bg == $dark_fill { 712 $_insensitive_border_color: if($variant=='light', $borders_edge, lighten($inkstone, 5%)); 713 } @else { 714 $_insensitive_border_color: $borders_edge; 715 } 716 717 &.trough { 718 // similar to the .scale 719 border: 1px solid darken($bg, 5%); 720 border-top-color: darken($bg, 20%); 721 border-radius: 5px; 722 color: transparent; 723 background-color: $bg; 724 background-image: none; 725 text-shadow: none; 726 &:hover { 727 -gtk-image-effect: highlight; 728 background-color: lighten($bg, 5%); 729 } 730 &:active { 731 background-color: $alt; 732 background-image: none; 733 color: transparent; 734 border-color: darken($alt, 5%); 735 border-top-color: darken($alt, 20%); 736 box-shadow: inset 0 1px 1px 0 transparentize($alt, 0.2); 737 text-shadow: none; 738 &:hover { 739 -gtk-image-effect: highlight; 740 background-color: lighten($alt, 5%); 741 } 742 } 743 &:insensitive { 744 color: transparent; 745 border-color: $_insensitive_border_color; 746 background-image: none; 747 background-color: if($bg==$dark_fill, transparent, $ash); 748 box-shadow: none; 749 text-shadow: none; 750 &:active { 751 background-color: transparentize($dark_fill, if($variant=='light', 0.6, 0.9)); 752 } 753 } 754 &:backdrop { 755 color: transparent; 756 border-color: if($bg==$dark_fill, if($variant=='light', $borders_edge, $bg), transparent); 757 border-top-color: darken($bg, if($variant=='light', 10%, 5%)); 758 @if $bg!=$dark_fill { 759 background-color: _backdrop_color(transparentize($bg, 0.3)); 760 } 761 @else { 762 @if $variant='light' { 763 background-color: _backdrop_color($bg); 764 } 765 @else { 766 background-color: lighten($bg, 2%); 767 } 768 } 769 background-image: none; 770 box-shadow: none; 771 text-shadow: none; 772 transition: $backdrop_transition; 773 &:hover { 774 background-color: $bg; 775 776 &:active { 777 background-color: $alt; 778 } 779 } 780 &:active { 781 color: transparent; 782 border-color: darken($alt, 5%); 783 border-top-color: darken($alt, 10%); 784 background-color: _backdrop_color($alt); 785 background-image: none; 786 box-shadow: none; 787 &:insensitive { 788 $_bg: transparentize($dark_fill, if($variant=='light', 0.7, 0.9)); 789 background-color: if($bg==$dark_fill, $_bg, _backdrop_color($ash));; 790 } 791 } 792 &:insensitive { 793 color: transparent; 794 border-color: if($bg==$dark_fill, $_insensitive_border_color, transparent); 795 background-image: none; 796 background-color: if($bg==$dark_fill, transparent, _backdrop_color($ash)); 797 box-shadow: none; 798 } 799 } 800 } 801 &.slider { 802 &, &:hover, &:active, &:insensitive, &:backdrop, &:backdrop:insensitive { 803 background-color: if($bg==$dark_fill, white, $headerbar_fg_color); 804 background-image: none; 805 background-clip: if($variant == "light", border-box, padding-box); 806 border-radius: $small_radius; 807 border: 1px solid transparent; 808 box-shadow: 0 1px 1px if($bg==$dark_fill, darken($bg, 7%), rgba(0, 0, 0, 0.15)); 809 } 810 padding: 3px; 811 transition: $button_transition; 812 &:active { 813 box-shadow: 0 1px 1px darken($alt, 7%); 814 } 815 &:insensitive { 816 background-color: if($bg==$dark_fill, transparent, $ash); 817 border: 1px solid if($bg==$dark_fill, $_insensitive_border_color, $slate);; 818 box-shadow: none; 819 } 820 &:backdrop { 821 transition: $backdrop_transition; 822 @if $bg==$dark_fill { 823 @if $variant=='light' { 824 background-color: $backdrop_bg_color; 825 } @else { 826 background-color: lighten($backdrop_fg_color, 20%); 827 } 828 } @else { 829 background-color: $headerbar_fg_color; 830 } 831 &:active{ 832 border-color: transparent; 833 } 834 &:insensitive { 835 background-color: if($bg==$dark_fill, transparent, _backdrop_color($ash)); 836 transition: $backdrop_transition; 837 } 838 } 839 } 840 .list-row:selected & { 841 @if $variant == 'light' { 842 box-shadow: none; 843 border-color: $selected_borders_color; 844 &:backdrop { border-color: $selected_borders_color; } 845 &.slider:dir(rtl) { border-left-color: $borders_color; } 846 &.slider:dir(ltr) { border-right-color: $borders_color; } 847 &.slider, 848 &.slider:active { border-color: $selected_borders_color; } 849 } 850 } 851} 852 853@mixin progressbar_fill($d:horizontal) { 854 $dir: if($d==vertical,right,bottom); 855 background-image: linear-gradient(to $dir, $selected_bg_color 2px, 856 lighten($selected_bg_color,6%)); 857} 858 859@mixin overshoot($p, $t:normal, $c:$fg_color) { 860// 861// overshoot 862// 863// $p: position 864// $t: type 865// $c: base color 866// 867// possible $p values: 868// top, bottom, right, left 869// 870// possible $t values: 871// normal, backdrop 872// 873 874 $_small_gradient_length: 5%; 875 $_big_gradient_length: 100%; 876 877 $_position: center top; 878 $_small_gradient_size: 100% $_small_gradient_length; 879 $_big_gradient_size: 100% $_big_gradient_length; 880 881 @if $p==bottom { 882 $_position: center bottom; 883 $_linear_gradient_direction: to top; 884 } 885 886 @else if $p==right { 887 $_position: right center; 888 $_small_gradient_size: $_small_gradient_length 100%; 889 $_big_gradient_size: $_big_gradient_length 100%; 890 } 891 892 @else if $p==left { 893 $_position: left center; 894 $_small_gradient_size: $_small_gradient_length 100%; 895 $_big_gradient_size: $_big_gradient_length 100%; 896 } 897 898 $_small_gradient_color: $c; 899 $_big_gradient_color: $c; 900 901 @if $c==$fg_color { 902 $_small_gradient_color: darken($borders_color, 10%); 903 $_big_gradient_color: $fg_color; 904 905 @if $t==backdrop { $_small_gradient_color: $backdrop_borders_color; } 906 } 907 908 $_small_gradient: -gtk-gradient(radial, 909 $_position, 0, 910 $_position, 0.5, 911 to($_small_gradient_color), 912 to(transparentize($_small_gradient_color, 1))); 913 914 $_big_gradient: -gtk-gradient(radial, 915 $_position, 0, 916 $_position, 0.6, 917 from(transparentize($_big_gradient_color, 0.93)), 918 to(transparentize($_big_gradient_color, 1))); 919 920 @if $t==normal { 921 background-image: $_small_gradient, $_big_gradient; 922 background-size: $_small_gradient_size, $_big_gradient_size; 923 } 924 925 @else if $t==backdrop { 926 background-image: $_small_gradient; 927 background-size: $_small_gradient_size; 928 } 929 930 background-repeat: no-repeat; 931 background-position: $_position; 932 933 background-color: transparent; // reset some properties to be sure to not inherit them somehow 934 border: none; // 935 box-shadow: none; // 936} 937 938@mixin undershoot($p) { 939// 940// undershoot 941// 942// $p: position 943// 944// possible $p values: 945// top, bottom, right, left 946// 947 948 $_undershoot_color_dark: transparentize(black, 0.8); 949 $_undershoot_color_light: transparentize(white, 0.8); 950 951 $_gradient_dir: left; 952 $_dash_bg_size: 10px 1px; 953 $_gradient_repeat: repeat-x; 954 $_bg_pos: center $p; 955 956 background-color: transparent; // shouldn't be needed, but better to be sure; 957 958 @if ($p == left) or ($p == right) { 959 $_gradient_dir: top; 960 $_dash_bg_size: 1px 10px; 961 $_gradient_repeat: repeat-y; 962 $_bg_pos: $p center; 963 } 964 965 background-image: linear-gradient(to $_gradient_dir, // this is the dashed line 966 $_undershoot_color_light 50%, 967 $_undershoot_color_dark 50%); 968 969 padding-#{$p}: 1px; 970 background-size: $_dash_bg_size; 971 background-repeat: $_gradient_repeat; 972 background-origin: content-box; 973 background-position: $_bg_pos; 974} 975 976@mixin draw_circle($c, $close:false, $size:24px) { 977 $button_size: $size + 2px * 2; 978 $circle_size: 20px / $button_size / 2; 979 980 background-image: -gtk-gradient(radial, 981 center center, 0, 982 center center, $circle_size, 983 to($c), 984 to(transparent)); 985 986 &:hover { 987 $_bg: if(lightness($c)<35%, lighten($c, 25%), lighten($c, 5%)); 988 background-image: -gtk-gradient(radial, 989 center center, 0, 990 center center, $circle_size, 991 to($_bg), 992 to(transparent)); 993 &:backdrop { 994 $_bg: lighten($backdrop_headerbar_bg_color, 8%); 995 background-image: -gtk-gradient(radial, 996 center center, 0, 997 center center, $circle_size, 998 to($_bg), 999 to(transparent)); 1000 } 1001 } 1002 1003 &:active { 1004 $_bg: if(lightness($c)<35%, lighten($c, 18%), darken($c, 7%)); 1005 background-image: -gtk-gradient(radial, 1006 center center, 0, 1007 center center, $circle_size, 1008 to($_bg), 1009 to(transparent)); 1010 } 1011 1012 @if $close == true { 1013 &:backdrop { 1014 color: $backdrop_headerbar_fg_color; 1015 } 1016 } 1017} 1018