1//
   2// Suffix
   3//
   4
   5$asset_suffix: if($variant == 'dark', '-dark', '');
   6
   7
   8//
   9// transitions
  10//
  11
  12%transition {
  13  // do not include sizing factors and text colors/shadows
  14  transition-property: opacity,
  15                       border-color,
  16                       border-image,
  17                       background-color,
  18                       background-image,
  19                       box-shadow,
  20                       icon-shadow;
  21  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  22  transition-duration: 0.2s;
  23}
  24
  25
  26/*****************
  27 * Common States *
  28 *****************/
  29
  30* {
  31  @extend %transition; // global transition setting
  32
  33  padding: 0;
  34  background-clip: padding-box;
  35
  36  -GtkToolButton-icon-spacing: 4;
  37  -GtkTextView-error-underline-color: $error_color;
  38
  39  -GtkCheckButton-indicator-size: 16;
  40  -GtkCheckMenuItem-indicator-size: 16;
  41
  42  // The size for scrollbars. The slider is 2px smaller, but we keep it
  43  // up so that the whole area is sensitive to button presses for the
  44  // slider. The stepper button is larger in both directions, the slider
  45  // only in the width
  46
  47  -GtkScrolledWindow-scrollbar-spacing: 0;
  48  -GtkScrolledWindow-scrollbars-within-bevel: 1;
  49
  50  -GtkToolItemGroup-expander-size: 11;
  51  -GtkExpander-expander-size: 16;
  52
  53  -GtkMenu-horizontal-padding: 0;
  54  -GtkMenu-vertical-padding: 0;
  55
  56  -GtkWidget-link-color: $link_color;
  57  -GtkWidget-visited-link-color: $link_visited_color;
  58
  59  -GtkWidget-text-handle-width: 16;
  60  -GtkWidget-text-handle-height: 16;
  61
  62  -GtkDialog-button-spacing: 4;
  63  -GtkDialog-action-area-border: 0;
  64
  65  -GtkStatusbar-shadow-type: none;
  66
  67  // We use the outline properties to signal the focus properties
  68  // to the adwaita engine: using real CSS properties is faster,
  69  // and we don't use any outlines for now.
  70
  71  outline-style: solid;
  72  outline-width: 2px;
  73  outline-color: $track_color;
  74  outline-offset: -4px;
  75  outline-radius: 2px;
  76
  77  // disable foreground-shadows as default
  78  text-shadow: none;
  79  icon-shadow: none;
  80}
  81
  82
  83/***************
  84 * Base States *
  85 ***************/
  86
  87.background {
  88  background-color: $bg_color;
  89  color: $fg_color;
  90}
  91
  92// These wildcard seems unavoidable, need to investigate.
  93// Wildcards are bad and troublesome, use them with care,
  94// or better, just don't.
  95// Everytime a wildcard is used a kitten dies, painfully.
  96
  97*:insensitive {
  98  -gtk-image-effect: dim;
  99}
 100
 101// for backdrop, tone down element surfaces with transparentize
 102%fade_effect {
 103  *:backdrop {
 104    opacity: 0.75;
 105    transition: 0.2s;
 106  }
 107}
 108
 109.gtkstyle-fallback {
 110  background-color: $bg_color;
 111  color: $fg_color;
 112  &:prelight {
 113    background-color: darken($bg_color, 5%);
 114    color: $fg_color;
 115  }
 116  &:active {
 117    background-color: darken($bg_color, 10%);
 118    color: $fg_color;
 119  }
 120  &:insensitive {
 121    background-color: $bg_color;
 122    color: $insensitive_fg_color;
 123  }
 124  &:selected {
 125    background-color: $selected_bg_color;
 126    color: $selected_fg_color;
 127  }
 128}
 129
 130.view {
 131  @extend .list-row.activatable;
 132  background-color: $base_color;
 133  color: $fg_color;
 134  &:hover,
 135  &:active,
 136  &:selected { border-radius: 2px; }
 137  &:insensitive {
 138    color: $insensitive_fg_color;
 139  }
 140  &:selected { @extend %selected_items; }
 141}
 142
 143.rubberband {
 144  border: 1px solid $secondary_selected_bg_color;
 145  background-color: gtkopacity($secondary_selected_bg_color, 0.2);
 146}
 147
 148.label {
 149  &.separator {
 150    color: $fg_color;
 151    @extend .dim-label;
 152  }
 153
 154  &:selected,
 155  &:selected:focus,
 156  &:selected:hover {
 157    @extend %selected_items;
 158  }
 159  &:insensitive { color: $insensitive_fg_color; }
 160
 161  // always use dark foreground in Gnome-Software
 162  &.kudo-label {
 163    color: $fixed_fg_color;
 164  }
 165}
 166
 167.dim-label {
 168  opacity: 0.55;
 169}
 170
 171GtkAssistant {
 172  // sidebar styling
 173  .sidebar {
 174    padding: 0.5em 0;
 175    &:dir(ltr) { border-right: 1px solid $borders_color; }
 176    &:dir(rtl) { border-left: 1px solid $borders_color; }
 177
 178    .label {
 179      padding: 0.7em 1em 0.8em;
 180      color: $secondary_fg_color;
 181      font-weight: 500;
 182      &.highlight { color: $selected_bg_color; }
 183    }
 184  }
 185
 186  // header-bar styling
 187  .header-bar {
 188    // apply suggested-action button for "Next" and "Back"
 189    // last -> "cancel", nth -> "Next" and "Back", that's weird.
 190    .button.flat:not(:last-child) {
 191      @include button(normal);
 192      background-color: $suggested_color;
 193      color: $secondary_selected_fg_color;
 194      &:hover {
 195        @include button(hover);
 196        color: $selected_fg_color;
 197      }
 198      &:active {
 199        @include button(active);
 200        color: $selected_fg_color;
 201        background-color: $selected_bg_color;
 202      }
 203      &:checked {
 204        @include button(checked);
 205        background-color: mix($selected_fg_color, $suggested_color, 20%);
 206        color: $selected_fg_color;
 207      }
 208      &:insensitive { @include button(insensitive); }
 209    }
 210  }
 211}
 212
 213GtkTextView { // This will get overridden by .view,
 214              // needed by gedit line numbers
 215  background-color: $secondary_dark_color;
 216}
 217
 218.grid-child {
 219  // outline-offset: -2px;
 220  padding: 4px;
 221  border-radius: 2px;
 222  &:selected { @extend %selected_items; }
 223}
 224
 225%osd, .osd {
 226  opacity: 0.9;
 227}
 228
 229
 230/*********************
 231 * Spinner Animation *
 232 *********************/
 233
 234@keyframes colorful_bar {
 235  0% {
 236    -gtk-icon-source: url("assets/bar-red.svg");
 237    -gtk-icon-transform: scale(0, 1.0);
 238  }
 239  24.9% {
 240    -gtk-icon-source: url("assets/bar-red.svg");
 241    -gtk-icon-transform: scale(1.0, 1.0);
 242  }
 243  25% {
 244    -gtk-icon-source: url("assets/bar-yellow.svg");
 245    -gtk-icon-transform: scale(1.0, 1.0);
 246  }
 247  49.9% {
 248    -gtk-icon-source: url("assets/bar-yellow.svg");
 249    -gtk-icon-transform: scale(0, 1.0);
 250  }
 251  50% {
 252    -gtk-icon-source: url("assets/bar-green.svg");
 253    -gtk-icon-transform: scale(0, 1.0);
 254  }
 255  74.9% {
 256    -gtk-icon-source: url("assets/bar-green.svg");
 257    -gtk-icon-transform: scale(1.0, 1.0);
 258  }
 259  75% {
 260    -gtk-icon-source: url("assets/bar-blue.svg");
 261    -gtk-icon-transform: scale(1.0, 1.0);
 262  }
 263  99.9% {
 264    -gtk-icon-source: url("assets/bar-blue.svg");
 265    -gtk-icon-transform: scale(0, 1.0);
 266  }
 267  100% {
 268    -gtk-icon-source: url("assets/bar-red.svg");
 269    -gtk-icon-transform: scale(0, 1.0);
 270  }
 271}
 272
 273.spinner {
 274  background-color: blue;
 275  background-image: none;
 276  opacity: 0; // non spinning spinner makes no sense
 277  -gtk-icon-source: url("assets/bar-red.svg");
 278  &:active {
 279    opacity: 1.0;
 280    animation: colorful_bar 2s linear infinite;
 281    &:insensitive { opacity: 0.4; }
 282    &:backdrop { opacity: 1.0; }
 283  }
 284  &:backdrop { opacity: 0; }
 285}
 286
 287
 288/****************
 289 * Text Entries *
 290 ****************/
 291
 292.entry {
 293  padding: 0.75em 1em 0.8em;
 294  @include entry(normal);
 295  &:focus { @include entry(focus); }
 296  &:insensitive { @include entry(insensitive); }
 297
 298  &.flat {
 299    @include entry(flat-normal);
 300    &:focus { @include entry(flat-focus); }
 301    &:insensitive { @include entry(flat-insensitive); }
 302  }
 303
 304  &:selected { @extend %selected_items; }
 305
 306  &.image { // icons inside the entry
 307    &.left { padding-left: 0.1em; }
 308    &.right { padding-right: 0.1em; }
 309  }
 310
 311  &.progressbar { @extend %entry_progressbar; }
 312
 313  .linked > &:not(.flat),
 314  .linked.vertical > &:not(.flat) {
 315    @extend .entry.flat;
 316    border-radius: 0;
 317    outline-radius: 0;
 318  }
 319
 320  // entry error and warning style
 321  @each $e_type, $e_color in (error, $error_color),
 322                             (warning, $warning_color) {
 323    &.#{$e_type} {
 324      @include entry(normal, $e_color);
 325      &:focus { @include entry(focus, $e_color); }
 326      &:insensitive { @include entry(insensitive, $e_color); }
 327      &.flat {
 328        @include entry(flat-normal, $e_color);
 329        &:focus { @include entry(flat-focus, $e_color); }
 330        &:insensitive { @include entry(flat-insensitive, $e_color); }
 331      }
 332    }
 333  }
 334
 335  &.image { // entry icons colors
 336    &:not(:hover):not(:active) { color: gtkalpha(currentColor, 0.75); }
 337    &:active { color: $selected_bg_color; }
 338    &:insensitive { color: gtkalpha(currentColor, 0.6); }
 339  }
 340
 341  GtkTreeView & { // reset styling inside tree-view
 342    &.flat:focus {
 343      padding: 1px;
 344      border-radius: 0;
 345      border-image: none;
 346      background-color: $base_color;
 347      color: $fg_color;
 348      box-shadow: none;
 349      transition: none;
 350      &:selected { @extend %selected_items; }
 351    }
 352    &:insensitive,
 353    &.flat:insensitive { color: $insensitive_fg_color; }
 354  }
 355
 356  .osd & {
 357  }
 358}
 359
 360
 361/***********
 362 * Buttons *
 363 ***********/
 364
 365// stuff for .needs-attention
 366@keyframes needs_attention {
 367  from {
 368    background-image: -gtk-gradient(radial,
 369                                    center center, 0,
 370                                    center center, 0.001,
 371                                    to($selected_bg_color),
 372                                    to(transparent));
 373  }
 374  to {
 375    background-image: -gtk-gradient(radial,
 376                                    center center, 0,
 377                                    center center, 0.5,
 378                                    to($selected_bg_color),
 379                                    to(transparent));
 380  }
 381}
 382
 383.button {
 384  padding: 0.7em 1em 0.8em;
 385  border-radius: 2px;
 386  background-repeat: no-repeat;
 387  background-position: center, center;
 388  background-size: 3em * 2 / 0.8 3em * 2 / 0.8, auto;
 389  font-weight: 500;
 390  @include button(normal);
 391  &:hover { @include button(hover); }
 392  &:active { @include button(active); }
 393  &:insensitive { @include button(insensitive); }
 394  &:checked { @include button(checked); }
 395  &:checked:insensitive { @include button(checked-insensitive); }
 396
 397  &.flat {
 398    @include button(flat-normal);
 399    &:hover { @include button(flat-hover); }
 400    &:active { @include button(flat-active); }
 401    &:insensitive { @include button(flat-insensitive); }
 402    &:checked { @include button(flat-checked); }
 403    &:checked:insensitive { @include button(flat-checked-insensitive); }
 404    .linked > & {
 405      border-radius: 2px;
 406      &.image-button {
 407        outline-radius: 100px;
 408        border-radius: 100px;
 409      }
 410    }
 411  }
 412
 413  // big standalone buttons like in Documents pager
 414  &.osd {
 415    &.image-button {
 416      @extend .button.flat;
 417      @extend %image_button;
 418      padding: 1.3em;
 419      background-color: $inverted_dark_color;
 420      &:not(:active):not(:insensitive):not(hover) {
 421        color: $secondary_accent_color;
 422      }
 423      &:hover {
 424        color: $accent_color;
 425        background-color: gtkopacity($inverted_dark_color, 0.7);
 426        background-image: linear-gradient(to bottom, $track_color);
 427      }
 428      &:active {
 429        color: $accent_color;
 430        background-color: gtkopacity($inverted_dark_color, 0.7);
 431        background-image: linear-gradient(to bottom, $accent_fill_color);
 432      }
 433    }
 434    &:insensitive { opacity: 0; }
 435  }
 436
 437  // overlay / OSD style
 438  .osd & {
 439  }
 440
 441  // Suggested and Destructive Action buttons
 442  @each $b_type, $b_color in (suggested-action, $suggested_color),
 443                             (destructive-action, $destructive_color) {
 444    &.#{$b_type} {
 445      background-color: $b_color;
 446      color: $secondary_selected_fg_color;
 447      &:hover {
 448        @include button(hover);
 449        background-color: $b_color;
 450        color: $selected_fg_color;
 451      }
 452      &:active {
 453        @include button(active);
 454        background-color: $selected_bg_color;
 455        color: $selected_fg_color;
 456      }
 457      &:checked { background-color: mix($selected_fg_color, $b_color, 20%); }
 458      &:insensitive {
 459        @include button(insensitive, $b_color,
 460                                     $insensitive_selected_fg_color);
 461      }
 462
 463      &.flat {
 464        background-color: transparent;
 465        color: $b_color;
 466        &:hover { @include button(flat-hover, $track_color, $b_color);
 467        }
 468        &:active {
 469          @include button(flat-active);
 470          background-color: gtkalpha($selected_bg_color, 0.2);
 471          color: $selected_bg_color;
 472        }
 473        &:checked { @include button(flat-checked, $b_color, $selected_fg_color); }
 474        &:insensitive {
 475          @include button(flat-insensitive, $b_color,
 476                                            $insensitive_selected_fg_color);
 477        }
 478      }
 479    }
 480  }
 481
 482  &.image-button { @extend %image_button; }
 483
 484  &.text-button {
 485    padding-left: 1.2em;
 486    padding-right: 1.2em;
 487    font-weight: 700;
 488  }
 489
 490  &.text-button.image-button {
 491    // those buttons needs uneven horizontal padding, we want the icon side
 492    // to have the image-button padding, while the text side the text-button
 493    // one, so we're adding the missing padding to the label depending on
 494    // its position inside the button
 495    padding: 0.7em 1em 0.8em; // same as .button
 496    outline-radius: 2px;
 497    border-radius: 2px;
 498    background-size: 3em * 2 / 0.8 3em * 2 / 0.8, auto;
 499    .label:first-child { padding-left: 0.5em; }
 500    .label:last-child { padding-right: 0.5em; }
 501  }
 502
 503  .stack-switcher > & {
 504    // to position the needs attention dot, padding is added to the button
 505    // child, a label needs just lateral padding while an icon needs vertical
 506    // padding added too.
 507
 508    outline-offset: -0.2em; // needs to be set or it gets overriden 
 509                            // by GtkRadioButton outline-offset
 510
 511    > .label {
 512      padding-left: 0.5em;  // label padding
 513      padding-right: 0.5em; //
 514    }
 515
 516    > GtkImage {
 517      padding-left: 0.5em;   // image padding
 518      padding-right: 0.5em;  //
 519      padding-top: 0.2em;    //
 520      padding-bottom: 0.2em; //
 521    }
 522
 523    &.text-button {
 524      padding: 0.7em 1em 0.8em; // needed or it will get overridden
 525    }
 526
 527    &.image-button {
 528      // we want image buttons to have a 1:1 aspect ratio, so compensation
 529      // of the padding added to the GtkImage is needed
 530      padding: 0.5em 0.3em;
 531    }
 532
 533    &.needs-attention > .label,
 534    &.needs-attention > GtkImage { @extend %needs_attention; }
 535    &.needs-attention:active > .label,
 536    &.needs-attention:active > GtkImage,
 537    &.needs-attention:checked > .label,
 538    &.needs-attention:checked > GtkImage {
 539      animation: none;
 540      background-image: none;
 541    }
 542  }
 543
 544  // inline-toolbar buttons
 545  .inline-toolbar &,
 546  .action-bar &,
 547  .inline-toolbar .linked > &,
 548  .action-bar .linked > & {
 549    &, &:not(.text-button).image-button {
 550      @extend .button.flat;
 551      padding: 0.75em;
 552      border-radius: 100px;
 553      outline-radius: 100px;
 554    }
 555
 556    &.text-button {
 557      border-radius: 2px;
 558      outline-radius: 2px;
 559    }
 560  }
 561
 562  .inline-toolbar .stack-switcher > &,
 563  .action-bar .stack-switcher > & {
 564    &, &:not(.text-button).image-button {
 565      @extend .button.flat;
 566      padding: 0.5em 0.25em;
 567      border-radius: 100px;
 568      outline-radius: 100px;
 569    }
 570  }
 571
 572  .primary-toolbar & { icon-shadow: none; } // tango icons don't need shadows
 573
 574  // mimic tab-switcher-ish button array
 575  // horizontal array
 576  .linked > &:not(.flat):not(:only-child) { @extend %linked_middle; }
 577  .linked > &,
 578  .linked > & .image-button,
 579  .linked > & .text-button {
 580    @extend %linked_middle;
 581    @extend %button_array;
 582  }
 583  // vertical array
 584  .linked.vertical > &:not(:only-child) { @extend %linked_vertical_middle; }
 585  .linked.vertical > &,
 586  .linked.vertical > & .image-button,
 587  .linked.vertical > & .text-button {
 588    @extend %linked_vertical_middle;
 589    @extend %button_vertical_array;
 590  }
 591}
 592
 593%button_array {
 594  @include button(flat-normal);
 595  border-radius: 0;
 596  outline-radius: 0;
 597  color: $secondary_fg_color;
 598  border-image: -gtk-gradient(radial,
 599                              center bottom, 0,
 600                              center bottom, 0.5,
 601                              to($track_color),
 602                              to(transparent))
 603                              0 0 1 / 0 0 1px;
 604  &:hover {
 605    @include button(flat-hover);
 606    border-radius: 0;
 607    border-image: -gtk-gradient(radial,
 608                                center bottom, 0,
 609                                center bottom, 0.5,
 610                                to($track_color),
 611                                to(transparent))
 612                                0 0 2 / 0 0 2px;
 613  }
 614  &:active,
 615  &:checked {
 616    @include button(flat-checked);
 617    border-radius: 0;
 618    color: $fg_color;
 619    background-color: transparent;
 620    border-image: -gtk-gradient(radial,
 621                                center bottom, 0,
 622                                center bottom, 0.5,
 623                                to($selected_bg_color),
 624                                to(transparent))
 625                                0 0 2 / 0 0 2px;
 626    &:hover { background-color: gtkalpha($secondary_fg_color, 0.1); }
 627    &:insensitive {
 628      @include button(flat-checked-insensitive);
 629      color: $insensitive_fg_color;
 630      background-color: transparent;
 631      border-image: -gtk-gradient(radial,
 632                                  center bottom, 0,
 633                                  center bottom, 0.5,
 634                                  to(gtkopacity($selected_bg_color, 0.2)),
 635                                  to(transparent))
 636                                  0 0 2 / 0 0 2px;
 637      > .label { color: inherit; }
 638    }
 639  }
 640  &:insensitive {
 641    @include button(flat-insensitive);
 642    border-radius: 0;
 643    color: $insensitive_fg_color;
 644    background-color: transparent;
 645    border-image: -gtk-gradient(radial,
 646                                center bottom, 0,
 647                                center bottom, 0.5,
 648                                to($track_color),
 649                                to(transparent))
 650                                0 0 1 / 0 0 1px;
 651  }
 652}
 653
 654%button_vertical_array {
 655  @include button(flat-normal);
 656  border-image: none;
 657  border-width: 0;
 658  outline-radius: 0;
 659  color: $secondary_fg_color;
 660  &:hover {
 661    @include button(flat-hover);
 662    &:dir(ltr) { box-shadow: inset 2px 0 $track_color; }
 663    &:dir(rtl) { box-shadow: inset -2px 0 $track_color; }
 664  }
 665  &:active,
 666  &:checked {
 667    @include button(flat-checked);
 668    color: $fg_color;
 669    background-color: transparent;
 670    &:dir(ltr) { box-shadow: inset 2px 0 $selected_bg_color; }
 671    &:dir(rtl) { box-shadow: inset -2px 0 $selected_bg_color; }
 672    &:hover { background-color: gtkalpha(currentColor, 0.1); }
 673    &:insensitive {
 674      @include button(flat-checked-insensitive);
 675      color: $insensitive_fg_color;
 676      background-color: transparent;
 677      &:dir(ltr) { box-shadow: inset 2px 0 gtkopacity($selected_bg_color, 0.2); }
 678      &:dir(ltr) { box-shadow: inset -2px 0 gtkopacity($selected_bg_color, 0.2); }
 679      > .label { color: inherit; }
 680    }
 681  }
 682  &:insensitive {
 683    @include button(flat-insensitive);
 684    color: $insensitive_fg_color;
 685    background-color: transparent;
 686    &:dir(ltr) { box-shadow: inset 1px 0 $track_color; }
 687    &:dir(rtl) { box-shadow: inset -1px 0 $track_color; }
 688  }
 689
 690  &:dir(ltr) { box-shadow: inset 1px 0 $track_color; }
 691  &:dir(rtl) { box-shadow: inset -1px 0 $track_color; }
 692}
 693
 694%image_button {
 695  padding: 1em;
 696  outline-radius: 100px;
 697  border-radius: 100px;
 698  background-size: 3em * 1 / 0.8 3em * 1 / 0.8, auto;
 699}
 700
 701%needs_attention {
 702  background-repeat: no-repeat;
 703  background-position: right 3px;
 704  background-size: 0.4em 0.4em;
 705  animation: needs_attention 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 706  transition: none;
 707
 708  &:dir(rtl) { background-position: left 3px; }
 709}
 710
 711// all the following is for the +|- buttons on inline toolbars, that way
 712// should really be deprecated...
 713.inline-toolbar GtkToolButton > .button { // redefining the button look is
 714                                          // needed since those are flat...
 715  outline-radius: 100px;
 716  border-radius: 100px;
 717}
 718
 719// More inline toolbar buttons
 720.inline-toolbar.toolbar GtkToolButton {
 721  // & > .button.flat { @extend %linked_middle; }
 722  // &:first-child > .button.flat { @extend %linked:first-child; }
 723  // &:last-child > .button.flat { @extend %linked:last-child; }
 724  // &:only-child > .button.flat { @extend %linked:only-child; }
 725}
 726
 727%linked_middle { border-radius: 0; }
 728
 729%linked {
 730  outline-radius: 2px;
 731  @extend %linked_middle;
 732  &:first-child {
 733    border-top-left-radius: 2px;
 734    border-bottom-left-radius: 2px;
 735  }
 736  &:last-child {
 737    border-top-right-radius: 2px;
 738    border-bottom-right-radius: 2px;
 739  }
 740  &:only-child { border-radius: 2px; }
 741}
 742
 743%linked_vertical_middle { border-radius: 0; }
 744
 745%linked_vertical{
 746  outline-radius: 2px;
 747  @extend %linked_vertical_middle;
 748  &:first-child {
 749    border-top-left-radius: 2px;
 750    border-top-right-radius: 2px;
 751  }
 752  &:last-child {
 753    border-bottom-left-radius: 2px;
 754    border-bottom-right-radius: 2px;
 755  }
 756  &:only-child { border-radius: 2px; }
 757}
 758
 759// menu buttons
 760.menuitem.button.flat {
 761  transition: none;
 762  &:selected { @extend %selected_items; }
 763}
 764
 765GtkColorButton.button {
 766  padding: 0.4em 0.6em 0.5em; // Uniform padding on the GtkColorButton
 767
 768  GtkColorSwatch:first-child:last-child { // :first-child:last-child for a 
 769                                          // specificity bump, it gets 
 770                                          // overridden by the
 771                                          // colorpicker style, otherwise
 772    border-radius: 2px;
 773    box-shadow: $z-depth-1;
 774  }
 775
 776  &,
 777  GtkColorSwatch {
 778    &:insensitive {
 779      box-shadow: none;
 780      opacity: 0.4;
 781    }
 782  }
 783}
 784
 785// button box is always shown with flat-buttons
 786GtkButtonBox > .button {
 787  @include button(flat-normal);
 788  color: $secondary_accent_color;
 789  font-weight: 700;
 790  &:hover {
 791    @include button(flat-hover);
 792    color: $accent_color;
 793  }
 794  &:active {
 795    @include button(flat-active);
 796    color: $accent_color;
 797  }
 798  &:insensitive { @include button(flat-insensitive); }
 799  &:checked {
 800    @include button(flat-checked);
 801    color: $accent_color;
 802  }
 803  &:checked:insensitive {
 804    @include button(flat-checked-insensitive);
 805    color: gtkopacity($accent_color, 0.4);
 806  }
 807}
 808
 809
 810/*********
 811 * Links *
 812 *********/
 813
 814*:link {
 815  color: $link_color;
 816  &:hover, &:active { color: $link_color; }
 817  &:visited {
 818    color: $link_visited_color;
 819    &:hover, &:active { color: $link_visited_color; }
 820    *:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); }
 821  }
 822  &:selected,
 823  *:selected & {
 824    color: mix($selected_fg_color, $selected_bg_color, 80%);
 825  }
 826  &:insensitive { opacity: 0.4; }
 827}
 828
 829.button:link,
 830.button:visited {
 831  @extend *:link;
 832  & > .label { text-decoration-line: underline; }
 833}
 834
 835
 836/*****************
 837 * GtkSpinButton *
 838 *****************/
 839
 840.spinbutton {
 841  .button,
 842  .osd & .button {
 843    padding: 0.4em;
 844    border: solid 0.35em transparent;
 845    border-radius: 100px;
 846    outline-radius: 100px;
 847    background: none;
 848    box-shadow: none;
 849    color: $secondary_fg_color;
 850    &:not(:last-child) { // '-' button
 851      &:hover {
 852        @include button(flat-hover);
 853        background: none;
 854        color: $error_color;
 855      }
 856      &:active {
 857        @include button(flat-active);
 858        background-color: $track_color;
 859        color: $error_color;
 860      }
 861      &:insensitive {
 862        @include button(flat-insensitive);
 863        background: none;
 864        color: $insensitive_fg_color;
 865      }
 866    }
 867    &:last-child { // '+' button
 868      &:hover {
 869        @include button(flat-hover);
 870        background: none;
 871        color: $success_color;
 872      }
 873      &:active {
 874        @include button(flat-active);
 875        background-color: $track_color;
 876        color: $success_color;
 877      }
 878      &:insensitive {
 879        @include button(flat-insensitive);
 880        background: none;
 881        color: $insensitive_fg_color;
 882      }
 883    }
 884  }
 885
 886  &.vertical { // FIXME: try using linking templates for
 887               // vertically linked stuff
 888    padding: 0.5em 0;
 889
 890    .button {
 891      padding: 0.2em 0;
 892      border: solid 0.5em transparent;
 893      border-radius: 200px;
 894      outline-radius: 200px;
 895      background: none;
 896      box-shadow: none;
 897      color: $secondary_fg_color;
 898      &:first-child { // '+' button
 899        &:hover {
 900          @include button(flat-hover);
 901          background: none;
 902          color: $success_color;
 903	}
 904        &:active {
 905          @include button(flat-active);
 906          background-color: $track_color;
 907          color: $success_color;
 908        }
 909        &:insensitive {
 910          @include button(flat-insensitive);
 911          background: none;
 912          color: $insensitive_fg_color;
 913        }
 914      }
 915      &:last-child { // '-' button
 916        &:hover {
 917          @include button(flat-hover);
 918          background: none;
 919          color: $error_color;
 920	}
 921        &:active {
 922          @include button(flat-active);
 923          background-color: $track_color;
 924          color: $error_color;
 925        }
 926        &:insensitive {
 927          @include button(flat-insensitive);
 928          background: none;
 929          color: $insensitive_fg_color;
 930        }
 931      }
 932    }
 933
 934    &.entry {
 935    }
 936  }
 937
 938  GtkTreeView & { // reset styling inside tree-view
 939    &.entry:focus {
 940      padding: 1px;
 941      border-radius: 0;
 942      border-width: 0;
 943      background-color: $base_color;
 944      color: $fg_color;
 945      box-shadow: none;
 946      &:selected { @extend %selected_items; }
 947    }
 948  }
 949}
 950
 951
 952/**************
 953 * ComboBoxes *
 954 **************/
 955
 956GtkComboBox {
 957  > .the-button-in-the-combobox {
 958    // Otherwise combos are bigger than buttons
 959    padding: 0.35em 0.5em 0.45em;
 960  }
 961
 962  -GtkComboBox-arrow-scaling: 0.5;
 963  -GtkComboBox-shadow-type: none;
 964
 965  .menu { padding: 2px 0; }
 966  .menu .menuitem { padding: 0.35em 0.5em 0.45em; }
 967
 968  .separator.vertical {
 969    // always disable separators
 970    -GtkWidget-wide-separators: true;
 971  }
 972
 973  .button { // combobox-button styling
 974    @extend %button_array;
 975    border-radius: 0;
 976    padding: 0.5em 0.5em 0.55em;  // FIXME: need a bit more padding
 977    color: $secondary_fg_color;
 978    &:hover,
 979    &:active,
 980    &:checked {
 981      @include button(flat-normal);
 982      @extend %button_array:active;
 983      background-color: transparent;
 984      &:insensitive {
 985        color: $insensitive_fg_color;
 986      }
 987    }
 988    &:insensitive {
 989      color: $insensitive_fg_color;
 990      background-color: transparent;
 991    }
 992  }
 993
 994  &.combobox-entry {
 995    padding: 0;
 996
 997    .entry {
 998    }
 999
1000    .button { padding: 0 0.7em; }
1001  }
1002}
1003
1004.linked.vertical > GtkComboBox {
1005  .button { // vertical combobox-button styling
1006    @extend %button_vertical_array;
1007    padding: 0.35em 0.5em 0.45em;
1008    border-radius: 0;
1009    color: $secondary_fg_color;
1010  }
1011}
1012
1013.linked > GtkComboBox > .the-button-in-the-combobox,
1014.linked > GtkComboBoxText > .the-button-in-the-combobox {
1015  // the combo is a composite widget so the way we do button linkind doesn't
1016  // work, special case needed. See
1017  // https://bugzilla.gnome.org/show_bug.cgi?id=733979
1018  &:dir(ltr),
1019  &:dir(rtl) { // specificity bump
1020    @extend %linked_middle;
1021  }
1022}
1023
1024// stop using rounded-borders
1025.linked > GtkComboBox:first-child > .the-button-in-the-combobox,
1026.linked > GtkComboBoxText:first-child > .the-button-in-the-combobox,
1027.linked > GtkComboBox:last-child > .the-button-in-the-combobox,
1028.linked > GtkComboBoxText:last-child > .the-button-in-the-combobox,
1029.linked > GtkComboBox:only-child > .the-button-in-the-combobox,
1030.linked > GtkComboBoxText:only-child > .the-button-in-the-combobox {
1031  @extend %linked_middle;
1032}
1033.linked.vertical > GtkComboBoxText > .the-button-in-the-combobox,
1034.linked.vertical > GtkComboBox > .the-button-in-the-combobox,
1035.linked.vertical > GtkComboBoxText:first-child > .the-button-in-the-combobox,
1036.linked.vertical > GtkComboBox:first-child > .the-button-in-the-combobox,
1037.linked.vertical > GtkComboBoxText:last-child > .the-button-in-the-combobox,
1038.linked.vertical > GtkComboBox:last-child > .the-button-in-the-combobox,
1039.linked.vertical > GtkComboBoxText:only-child > .the-button-in-the-combobox,
1040.linked.vertical > GtkComboBox:only-child > .the-button-in-the-combobox {
1041  @extend %linked_vertical_middle;
1042}
1043
1044
1045/************
1046 * Toolbars *
1047 ************/
1048
1049.toolbar {
1050  -GtkWidget-window-dragging: true;
1051
1052  padding: 0.4em;
1053  border-width: 0;
1054  background-color: $bg_color;
1055  color: $secondary_fg_color;
1056  // draw shadows
1057  box-shadow: if($variant == 'light', $toolbar-shadow-light,
1058                                      $toolbar-shadow-dark);
1059  &.vertical,
1060  .inline-toolbar &,
1061  GtkPaned &,
1062  GtkEventBox &,
1063  GtkGrid &.primary-toolbar { // stop drawing fake-shadows
1064    box-shadow: none;
1065  }
1066
1067  .osd &, &.osd {
1068    padding: 3px;
1069    border-style: solid;
1070    border-width: 9px;
1071    border-image: -gtk-scaled(url("assets/osd-shadow#{$asset_suffix}.png"),
1072                              url("assets/osd-shadow#{$asset_suffix}@2.png"))
1073                  10 / 10px stretch;
1074    border-radius: 2px;
1075    box-shadow: none;
1076    color: $inverted_fg_color;
1077    background-color: $inverted_dark_color;
1078    &:backdrop {
1079      border-image: -gtk-scaled(url("assets/osd-shadow-backdrop#{$asset_suffix}.png"),
1080                                url("assets/osd-shadow-backdrop#{$asset_suffix}@2.png"))
1081                    10 / 10px stretch;
1082    }
1083
1084    .button {
1085      @extend .button.flat;
1086      &:not(:active):not(:insensitive):not(hover) {
1087        color: $secondary_accent_color;
1088      }
1089      &:hover,
1090      &:active { color: $accent_color; }
1091      &:active,
1092      &:checked {
1093        border-image: none;
1094        box-shadow: none;
1095      }
1096      &:insensitive { color: gtkopacity($accent_color, 0.4); }
1097    }
1098
1099    .label { padding: 0 1em; }
1100  }
1101
1102  .button { // use flat-buttons
1103    @extend .button.flat;
1104    border-image: -gtk-gradient(radial,
1105                                center bottom, 0,
1106                                center bottom, 0.001,
1107                                to($track_color),
1108                                to(transparent))
1109                                0 0 0 / 0 0 0px;
1110    color: $secondary_fg_color;
1111    box-shadow: none;
1112    &:hover {
1113      border-image: none;
1114      color: $fg_color;
1115      box-shadow: none;
1116    }
1117    &:checked {
1118      border-image: -gtk-gradient(radial,
1119                                  center bottom, 0,
1120                                  center bottom, 0.5,
1121                                  to($selected_bg_color),
1122                                  to(transparent))
1123                                  0 0 2 / 0 0 2px;
1124      background: transparent;
1125      color: $fg_color;
1126      box-shadow: none;
1127      &:insensitive {
1128        border-image: none;
1129        background: transparent;
1130        color: $insensitive_fg_color;
1131        box-shadow: none;
1132        > .label { color: inherit; }
1133      }
1134    }
1135    &:insensitive {
1136      border-image: none;
1137      background-color: transparent;
1138      color: $insensitive_secondary_fg_color;
1139      box-shadow: none;
1140    }
1141
1142    .image-button {
1143      border-radius: 100px;
1144      outline-radius: 100px;
1145    }
1146  }
1147
1148  & .linked > .button {
1149    border-radius: 100px;
1150    outline-radius: 100px;
1151    &:hover { background-color: transparent; } // remove double-background
1152    &:not(:checked) {
1153      border-radius: 100px;
1154      outline-radius: 100px;
1155    }
1156  }
1157  & .linked > .button.text-button:not(.image-button) { // revive underlines
1158    @extend %button_array;
1159  }
1160}
1161
1162// searchbar, location-bar & inline-toolbar
1163.inline-toolbar {
1164  padding: 0.4em;
1165  border-style: solid;
1166  border-width: 0 1px 1px;
1167  border-color: $borders_color;
1168  background-color: $secondary_dark_color;
1169  box-shadow: if($variant == 'light', $inline-shadow-light,
1170                                      $inline-shadow-dark);
1171}
1172
1173.search-bar,
1174.location-bar {
1175  padding: 0.4em;
1176  border-style: solid;
1177  border-width: 0 0 1px;
1178  border-color: $borders_color;
1179  background-color: $secondary_dark_color;
1180
1181  // use flat circle-button for '+', 'x', etc...
1182  .button.raised {
1183    padding: 0.75em;
1184    border-radius: 100px;
1185    outline-radius: 100px;
1186  }
1187}
1188
1189
1190/***************
1191 * Header bars *
1192 ***************/
1193
1194.titlebar,
1195.header-bar {
1196  @extend %fade_effect;
1197
1198  -GtkPaned-handle-size: 0; // FIXME: workaround for ugly Gedit!
1199
1200  padding: 0.4em;
1201  border-width: 1px 0 1px;
1202  border-style: solid;
1203  // do not use transparentize
1204  border-top-color: $top_edge_border_color;
1205  border-bottom-color: $solid_dark_borders_color;
1206  background-color: $inverted_dark_color;
1207  background-clip: border-box;
1208
1209  // basic text colours
1210  color: $inverted_secondary_fg_color;
1211  .label { // FIXME: only for insensitive state!
1212    &:checked {
1213      &:insensitive { color: $insensitive_inverted_fg_color; }
1214    }
1215    &:insensitive { color: $insensitive_inverted_secondary_fg_color; }
1216  }
1217
1218  // titles
1219  .title {
1220    padding-left: 1em;
1221    padding-right: 1em;
1222    color: $inverted_fg_color;
1223    font-weight: 700;
1224    &:backdrop { @extend .dim-label; }
1225  }
1226
1227  .subtitle {
1228    @extend .dim-label;
1229    padding-left: 1em;
1230    padding-right: 1em;
1231    color: $inverted_secondary_fg_color;
1232    font-size: 90%;
1233    &:backdrop { @extend .dim-label; }
1234  }
1235
1236  // separator
1237  .header-bar-separator,
1238  & > GtkBox > .separator.vertical,
1239  & > GtkBox > GtkBox > .separator.vertical {
1240    -GtkWidget-separator-width: 0;
1241    border: 0 none transparent;
1242    color: transparent;
1243  }
1244
1245  // button styling
1246  .button:not(.suggested-action):not(.destructive-action) {
1247    @extend .button.flat;
1248    border-image: -gtk-gradient(radial,
1249                                center bottom, 0,
1250                                center bottom, 0.001,
1251                                to($track_color),
1252                                to(transparent))
1253                                0 0 0 / 0 0 0px;
1254    color: $inverted_secondary_fg_color;
1255    &:hover { color: $inverted_fg_color; }
1256    &:checked {
1257      border-image: -gtk-gradient(radial,
1258                                  center bottom, 0,
1259                                  center bottom, 0.5,
1260                                  to($selected_bg_color),
1261                                  to(transparent))
1262                                  0 0 2 / 0 0 2px;
1263      background-color: transparent;
1264      color: $inverted_fg_color;
1265      // &:active { transition: none; }
1266      &:insensitive {
1267        background-color: transparent;
1268        color: $insensitive_inverted_fg_color;
1269        > .label { color: inherit; }
1270      }
1271    }
1272    &:insensitive { color: $insensitive_inverted_secondary_fg_color; }
1273  }
1274
1275  .button,
1276  .linked > .button,
1277  .button.suggested-action,
1278  .button.destructive-action {
1279    &, & .label.text-button {
1280      color: $inverted_secondary_fg_color;
1281      &:hover { color: $inverted_fg_color; }
1282      &:checked {
1283        color: $inverted_fg_color;
1284        &:insensitive { color: $insensitive_inverted_fg_color; }
1285      }
1286      &:insensitive { color: $insensitive_inverted_secondary_fg_color; }
1287    }
1288
1289    .label.text-button { // workaround for Gnome-Software
1290      border-image: none;
1291      box-shadow: none;
1292    }
1293  }
1294
1295  // force to draw circle flat buttons as default
1296  .button:not(.suggested-action):not(.destructive-action) {
1297    border-radius: 100px;
1298    outline-radius: 100px;
1299    &.text-button {
1300      border-radius: 2px;
1301      outline-radius: 2px;
1302      &.image-button {
1303        border-radius: 2px;
1304        outline-radius: 2px;
1305      }
1306    }
1307  }
1308
1309  // entry styling
1310  .entry,
1311  .linked > .entry {
1312    color: $inverted_secondary_fg_color;
1313    &:focus { color: $inverted_fg_color; }
1314    &:insensitive { color: $insensitive_inverted_secondary_fg_color; }
1315  }
1316
1317  // combobox styling
1318  GtkComboBox,
1319  .linked > GtkComboBox {
1320    &.combobox-entry {
1321      .entry {
1322        color: $inverted_secondary_fg_color;
1323        &:focus { color: $inverted_fg_color; }
1324        &:insensitive { color: $insensitive_inverted_secondary_fg_color; }
1325      }
1326
1327      .button {
1328        color: $inverted_secondary_fg_color;
1329        &:hover { color: $inverted_fg_color; }
1330        &:checked {
1331          color: $inverted_fg_color;
1332          &:insensitive { color: $insensitive_inverted_fg_color; }
1333        }
1334        &:insensitive { color: $insensitive_inverted_secondary_fg_color; }
1335      }
1336    }
1337  }
1338
1339  // menu styling
1340  .menu .menuitem { // reset text colour
1341    color: $secondary_fg_color;
1342    &:hover { color: $fg_color; }
1343
1344    .label {
1345      &:insensitive { color: $insensitive_fg_color; }
1346    }
1347
1348    .accelerator { color: gtkalpha(currentColor, 0.6); }
1349
1350    .separator { color: $borders_color; }
1351  }
1352
1353  // pop-over styling
1354  .popover .button.flat {
1355    color: $secondary_fg_color;
1356    &:hover { color: $fg_color; }
1357
1358    .label {
1359      &:hover { color: $fg_color; }
1360      &:insensitive { color: $insensitive_fg_color; }
1361    }
1362  }
1363
1364  // switch styling
1365  GtkSwitch {
1366    &.trough {
1367      background-color: gtkopacity($inverted_secondary_fg_color, 0.1);
1368      &:active {
1369        background-color: gtkopacity($selected_bg_color, 0.2);
1370        &:insensitive { background-color: gtkopacity($selected_bg_color, 0.2); }
1371      }
1372      &:insensitive {
1373        color: $insensitive_inverted_fg_color;
1374        background-color: $track_color;
1375      }
1376    }
1377
1378    &.slider {
1379      background-color: $inverted_bg_color;
1380      &:hover {
1381        background-image: linear-gradient(to bottom,
1382                                          gtkalpha($selected_fg_color, 0.2));
1383      }
1384      &:active {
1385        background-color: $selected_bg_color;
1386        &:insensitive { background-color: #3F4E56; }
1387      }
1388      &:insensitive { background-color: #3F4E56; }
1389    }
1390  }
1391
1392
1393  // selection-mode styling
1394  &.selection-mode {
1395    border-width: 1px 0 1px 0; // remove side borders
1396    border-top-color: $highlight_color;
1397    border-bottom-color: transparent;
1398    background-color: $selected_bg_color;
1399    color: $selected_fg_color;
1400
1401    .subtitle:link { @extend *:link:selected;  }
1402
1403    .button,
1404    .button.text-button,
1405    .flat.selection-menu,
1406    .text-button.selection-menu,
1407    .button.image-button {
1408      border-image: -gtk-gradient(radial,
1409                                  center bottom, 0,
1410                                  center bottom, 0.001,
1411                                  to($selected_fg_color),
1412                                  to(transparent))
1413                                  0 0 0 / 0 0 0px;
1414      color: $secondary_selected_fg_color;
1415      background-color: transparent;
1416      &:hover,
1417      &:active,
1418      &:checked { color: $selected_fg_color; }
1419      &:insensitive { color: $insensitive_inverted_secondary_fg_color; }
1420      &:checked {
1421        border-image: -gtk-gradient(radial,
1422                                    center bottom, 0,
1423                                    center bottom, 0.5,
1424                                    to($selected_fg_color),
1425                                    to(transparent))
1426                                    0 0 2 / 0 0 2px;
1427        color: $selected_fg_color;
1428        background-color: transparent;
1429        &:insensitive {
1430          color: $insensitive_selected_fg_color;
1431          > .label { color: inherit; }
1432        }
1433      }
1434
1435      &.suggested-action {
1436        // NOTE: do not use @extend .button;
1437        @include button(normal);
1438        &:hover { @include button(hover); }
1439        &:active { @include button(active); }
1440        &:insensitive { @include button(insensitive); }
1441      }
1442    }
1443
1444    .button:not(.suggested-action):not(.destructive-action) {
1445      border-radius: 100px;
1446      outline-radius: 100px;
1447      &.text-button,
1448      &.flat.selection-menu {
1449        border-radius: 2px;
1450        outline-radius: 2px;
1451        &.image-button {
1452          border-radius: 100px;
1453          outline-radius: 100px;
1454        }
1455      }
1456    }
1457
1458    .entry {
1459      color: $inverted_secondary_fg_color;
1460      &:focus { color: $inverted_fg_color; }
1461      &:insensitive { color: $insensitive_inverted_secondary_fg_color; }
1462    }
1463
1464    .selection-menu {
1465      padding-left: 1.2em;
1466      padding-right: 1.2em;
1467
1468      GtkArrow { -GtkArrow-arrow-scaling: 1; }
1469
1470      .arrow { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1471    }
1472  }
1473
1474  // misc
1475  .tiled &  {
1476    @extend %tiled_integration;
1477    transition: none;
1478  }
1479  .maximized & {
1480    @extend %maxd_integration;
1481    transition: none;
1482  }
1483
1484  &.default-decoration { // FIXME: do not use scalable units
1485    padding: 5.3px;
1486    border-width: 0;
1487
1488    .title { // fade_effect doesn't work
1489      color: $inverted_fg_color;
1490      &:backdrop { color: gtkopacity($inverted_fg_color, 0.4); }
1491    }
1492
1493    .button.titlebutton {
1494      padding: 4px;
1495      color: $inverted_secondary_fg_color;
1496      &:hover,
1497      &:active { color: $inverted_fg_color; }
1498      &:backdrop { color: gtkopacity($inverted_fg_color, 0.4); }
1499    }
1500  }
1501}
1502
1503.header-bar { // draw hilight and shadows
1504  .csd &,
1505  GtkBox &:only-child {
1506    box-shadow: if($variant == 'light', $header-shadow-light,
1507                                        $header-shadow-dark);
1508
1509    .tiled &  { @extend %tiled_integration; }
1510    .maximized & { @extend %maxd_integration; }
1511  }
1512
1513  // override unwanted side-borders
1514  GtkBox &:not(:only-child):first-child,
1515  GtkBox &:not(:only-child):last-child {
1516    border-left-color: $inverted_dark_color;
1517    border-right-color: $inverted_dark_color;
1518
1519    .tiled &,
1520    .maximized & {
1521      border-left-color: $panel_bg_color;
1522      border-right-color: $panel_bg_color;
1523    }
1524  }
1525
1526  // Remove unneeded side shadows with dirty hacks
1527  GtkBox &:not(:only-child):last-child {
1528    &:dir(ltr) {
1529      box-shadow: if($variant == 'light', $sub-header-shadow-light-ltr,
1530                                          $sub-header-shadow-dark-ltr);
1531
1532      .tiled &  { @extend %tiled_integration; }
1533      .maximized & { @extend %maxd_integration; }
1534    }
1535    &:dir(rtl) {
1536      box-shadow: if($variant == 'light', $sub-header-shadow-light-rtl,
1537                                          $sub-header-shadow-dark-rtl);
1538
1539      .tiled &  { @extend %tiled_integration; }
1540      .maximized & { @extend %maxd_integration; }
1541    }
1542  }
1543
1544  // draw paned-separator with border
1545  GtkPaned &:not(:only-child):last-child {
1546    &:dir(ltr) {
1547      border-left: 1px solid $solid_dark_borders_color;
1548
1549      .tiled &  { @extend %tiled_integration; }
1550      .maximized & { @extend %maxd_integration; }
1551    }
1552    &:dir(rtl) {
1553      border-right: 1px solid $solid_dark_borders_color;
1554
1555      .tiled &  { @extend %tiled_integration; }
1556      .maximized & { @extend %maxd_integration; }
1557    }
1558  }
1559}
1560
1561.header-bar.selection-mode { // selection-mode specific
1562  GtkBox & { // Remove unneeded side shadows with dirty hacks
1563    &:not(:only-child):last-child {
1564      &:dir(ltr) {
1565        box-shadow: if($variant == 'light', $selected-header-shadow-light-ltr,
1566                                            $selected-header-shadow-dark-ltr);
1567
1568        .tiled &  { @extend %tiled_integration; }
1569        .maximized & { @extend %maxd_integration; }
1570      }
1571      &:dir(rtl) {
1572        box-shadow: if($variant == 'light', $selected-header-shadow-light-rtl,
1573                                            $selected-header-shadow-dark-rtl);
1574
1575        .tiled &  { @extend %tiled_integration; }
1576        .maximized & { @extend %maxd_integration; }
1577      }
1578    }
1579  }
1580}
1581
1582.header-bar,
1583.titlebar { // set rounded corners
1584  border-top-left-radius: 2px;
1585  border-top-right-radius: 2px;
1586
1587  GtkBox &:not(:last-child):not(.titlebar) {
1588    &:dir(ltr) {
1589      border-top-left-radius: 2px;
1590      border-top-right-radius: 0;
1591    }
1592    &:dir(rtl) {
1593      border-top-left-radius: 0;
1594      border-top-right-radius: 2px;
1595    }
1596  }
1597
1598  GtkBox &:last-child:not(.titlebar) {
1599    &:dir(ltr) { border-top-left-radius: 0; }
1600    &:dir(rtl) { border-top-right-radius: 0; }
1601  }
1602}
1603
1604// squared corners when the window is max'd or tiled
1605%tiled_integration {
1606  border-radius: 0;
1607  border-color: $panel_bg_color;
1608  border-width: 2px 0 0 0;
1609  border-top-color: $secondary_selected_bg_color;
1610  background-color: $panel_bg_color;
1611  box-shadow: none;
1612  &:backdrop { border-top-color: $track_color; }
1613}
1614
1615%maxd_integration {
1616  border-radius: 0;
1617  border-color: $panel_bg_color;
1618  border-width: 1px 0 0 0;
1619  background-color: $panel_bg_color;
1620  box-shadow: none;
1621}
1622
1623
1624/************
1625 * Pathbars *
1626 ************/
1627
1628.path-bar .button {
1629  padding: 0.3em 0.7em 0.4em;
1630
1631  &.image-button { padding: 0.7em; }
1632
1633  &:only-child { padding: 0.3em 0.7em 0.4em; }
1634
1635  // the following is for spacing the icon and the label inside the home button
1636  .label {
1637    &:last-child { padding-left: 2px; }
1638    &:first-child { padding-right: 2px; }
1639    &:only-child {
1640      padding-right: 0;
1641      padding-left: 0;
1642    }
1643  }
1644
1645  GtkImage { padding-top: 1px; }
1646}
1647
1648
1649/**************
1650 * Tree Views *
1651 **************/
1652
1653GtkTreeView.view {
1654  @at-root * {
1655    -GtkTreeView-horizontal-separator: 4;
1656    -GtkTreeView-grid-line-width: 1;
1657    -GtkTreeView-grid-line-pattern: '';
1658    -GtkTreeView-tree-line-width: 1;
1659    -GtkTreeView-tree-line-pattern: '';
1660    -GtkTreeView-expander-size: 16;
1661  }
1662
1663  border-left-color: $track_color;  // this is actually the tree lines color,
1664  border-top-color: $borders_color; // while this is the grid lines color,
1665                                    // better then nothing
1666
1667  &.rubberband { @extend .rubberband; } // to avoid borders being overridden
1668                                        // by the previously set props
1669
1670  border-radius: 0; // rest border radius in lists
1671
1672  &:hover,
1673  &:selected { border-radius: 0; }
1674
1675  // override foreground colours
1676  &, & .entry,
1677  & .entry > .label {
1678    color: $secondary_fg_color;
1679    &:hover,
1680    &:active,
1681    &:focus { color: $fg_color; }
1682    &:selected { color: $selected_fg_color; }
1683    &:insensitive {
1684      color: $insensitive_fg_color;
1685      &:selected { color: $insensitive_selected_fg_color; }
1686    }
1687  }
1688
1689  .separator {
1690    &, &:hover { color: $borders_color; }
1691  }
1692
1693  // clear backgrounds
1694  background-color: transparent;
1695  background-image: none;
1696  box-shadow: none;
1697
1698  &.dnd {
1699    border-style: solid none;
1700    border-width: 1px;
1701    border-color: mix($fg_color, $selected_bg_color, 50%);
1702  }
1703
1704  &.expander {
1705    -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1706    &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
1707    &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
1708    &:selected {
1709      color: gtkopacity($selected_fg_color, 0.75);
1710      &:hover, &:active { color: $selected_fg_color; }
1711    }
1712  }
1713
1714  &.progressbar { // progress bar in treeviews
1715    @extend %treeview_progressbar;
1716    border-color: $accent_color;
1717    &:selected { border-color: currentColor; }
1718  }
1719
1720  &.trough { // progress bar trough in treeviews
1721    @extend %treeview_progressbar;
1722    border-color: gtkopacity($accent_color, 0.2);
1723    &:selected { border-color: $track_color; }
1724  }
1725
1726  &, GtkPaned & { // redraw some stuff for RhythmBox
1727    background-color: $base_color;
1728
1729    &:hover,
1730   .list-row:hover { color: $fg_color; }
1731    &:selected,
1732    .list-row:selected { @extend %selected_items; }
1733  }
1734}
1735
1736column-header {
1737  .button {
1738    @extend .list-row.activatable;
1739    padding: 0.3em 0.4em 0.35em;
1740    border-style: none solid solid none;
1741    border-width: 1px;
1742    border-color: $borders_color;
1743    border-radius: 0;
1744    background-color: $base_color;
1745    color: $tertiary_fg_color;
1746    box-shadow: none;
1747    &:hover,
1748    &:active {
1749      color: $fg_color;
1750      box-shadow: none;
1751    }
1752    &:insensitive { background-color: $base_color; }
1753    &.dnd { @extend column-header.button.dnd; }
1754  }
1755
1756  &:last-child .button,
1757  &:last-child.button { // treeview-like derived widgets
1758                        // in Banshee and Evolution
1759    border-right-style: none;
1760  }
1761
1762  GtkPaned & { // redraw some stuff for RhythmBox
1763    .button {
1764      background-color: $base_color;
1765      // background-image: linear-gradient(to bottom, $bg_color);
1766      &:insensitive { background-color: $base_color; }
1767    }
1768
1769    &:not(:first-child):not(:last-child) {
1770      &.button,
1771      & .button { border-style: none solid solid none; }
1772    }
1773    &, &:only-child,
1774    &:first-child,
1775    &:last-child {
1776      &.button,
1777      & .button { border-style: none none solid none; }
1778    }
1779  }
1780}
1781
1782column-header.button.dnd { // for treeview-like derive widgets
1783  // transition: none;
1784  border-left-style: solid;
1785  color: $selected_bg_color;
1786}
1787
1788
1789/*********
1790 * Menus *
1791 *********/
1792
1793.menubar {
1794  -GtkWidget-window-dragging: true;
1795  padding: 0;
1796  box-shadow: $menubar-shadow;
1797  background-color: $inverted_dark_color;
1798  color: $inverted_secondary_fg_color; // FIXME: Gtk+3 firefox needs this!
1799
1800  & > .menuitem {
1801    padding: 0.4em 0.6em;
1802    color: $inverted_secondary_fg_color;
1803    &:hover { // Seems like it :hover even with keyboard focus
1804      color: $inverted_fg_color;
1805      box-shadow: inset 0 -2px $selected_bg_color;
1806    }
1807    &:insensitive {
1808      color: $insensitive_inverted_fg_color;
1809      box-shadow: none;
1810    }
1811  }
1812
1813  .tiled &,
1814  .maximized & {
1815    background-color: $panel_bg_color;
1816    box-shadow: none;
1817  }
1818}
1819
1820.menu {
1821  margin: 4px 0;
1822  padding: 4px 0;
1823  border-width: 1px; // adds borders in a non composited env
1824  border-style: solid;
1825  border-color: $base_color transparent transparent;
1826  background-color: $secondary_base_color;
1827
1828  .csd & { // axes borders in a composited env
1829    border-width: 1px;
1830    border-radius: 2px;
1831    border-color: $base_color transparent transparent;
1832  }
1833
1834  .menuitem {
1835    transition: none;
1836    padding: 0.4em 0.4em 0.5em;
1837    color: $secondary_fg_color;
1838    font: initial;
1839    text-shadow: none;
1840    &:hover {
1841      transition: none;
1842      color: $fg_color;
1843      background-color: gtkalpha(currentColor, 0.1);
1844    }
1845    &:insensitive { color: $insensitive_fg_color; }
1846
1847    // submenu indicators
1848    &.arrow {
1849      -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
1850      &:insensitive { color: $insensitive_fg_color; }
1851    }
1852    &.arrow:dir(rtl) {-gtk-icon-source:-gtk-icontheme('pan-end-symbolic-rtl'); }
1853  }
1854
1855  &.button { // overlow buttons
1856    border-style: none;
1857    border-radius: 0;
1858    background-color: $secondary_base_color;
1859    &:hover { background-color: $secondary_dark_color; }
1860    &:insensitive {
1861      color: transparent;
1862      background-color: transparent;
1863      border-color: transparent ;
1864    }
1865
1866    &.top { border-bottom: 1px solid $borders_color; }
1867    &.bottom { border-top: 1px solid $borders_color; }
1868  }
1869
1870  // use asymmetric separators
1871  GtkSeparatorMenuItem {
1872    &:dir(ltr) {
1873      padding-left: 2.4em;
1874      padding-right: 0;
1875    }
1876    &:dir(rtl) {
1877      padding-left: 0;
1878      padding-right: 2.4em;
1879    }
1880  }
1881}
1882
1883.menuitem {
1884  .accelerator { color: gtkalpha(currentColor, 0.55); }
1885
1886  .separator { color: $borders_color; }
1887}
1888
1889.csd.popup { border-radius: 2px; }
1890
1891
1892/***************
1893 * Popovers   *
1894 ***************/
1895
1896.popover {
1897  padding: 2px;
1898  border: 1px solid;
1899  border-color: $base_color $secondary_base_color $secondary_base_color;
1900  border-radius: 2px;
1901  background-color: $secondary_base_color;
1902  box-shadow:  $z-depth-3;
1903  &:backdrop { box-shadow: $z-depth-1; }
1904
1905  > .list,
1906  > .view,
1907  > .toolbar,
1908  &.osd > .toolbar {
1909    border-style: none;
1910    border-image: none;
1911    background-color: transparent;
1912    transition: none;
1913  }
1914
1915  .button.menuitem.flat,
1916  .button.flat {
1917    transition: none;
1918    background-color: transparent;
1919    background-size: 8em * 1 / 0.8 8em * 1 / 0.8, auto;
1920    color: $secondary_fg_color;
1921    font: initial;
1922    &:hover {
1923      background-color: transparent; // remove double-bg
1924      color: $fg_color;
1925    }
1926
1927    // FIXME: label padding is ugly
1928    // vertical padding of GtkMenuItem * 0.5
1929    .label { padding: 0.2em 0 0.25em; }
1930  }
1931
1932  .linked > .button {
1933    // @extend .button.flat;
1934    @include button(flat-normal);
1935    @extend %button_array;
1936    color: $secondary_fg_color;
1937    &:hover { @include button(flat-hover); }
1938    &:active { @include button(flat-active); }
1939    &:insensitive { @include button(flat-nsensitive); }
1940    &:checked {
1941      @include button(flat-checked);
1942      color: $fg_color;
1943      background-color: transparent;
1944    }
1945    &:checked:insensitive { @include button(flat-checked-insensitive); }
1946  }
1947
1948  // hide trough in popover
1949  .scrollbar.trough {
1950    background-color: transparent;
1951    border: 1px none transparent;
1952  }
1953
1954  &.osd { @extend %osd; }
1955}
1956
1957
1958/*****************
1959 * Notebooks and *
1960 * Tabs          *
1961 *****************/
1962
1963.notebook {
1964  // Through me you go to the grief wracked city;
1965  // Through me you go to everlasting pain;
1966  // Through me you go a pass among lost souls.
1967  // ...
1968  // Abandon all hope — Ye Who Enter Here
1969  padding: 0;
1970  background-color: $base_color;
1971  -GtkNotebook-initial-gap: 6;
1972  -GtkNotebook-arrow-spacing: 5;
1973  -GtkNotebook-tab-curvature: 0;
1974  -GtkNotebook-tab-overlap: 1;
1975  -GtkNotebook-has-tab-gap: false;
1976  -GtkWidget-focus-padding: 0;
1977  -GtkWidget-focus-line-width: 0;
1978
1979  &.frame {
1980    border: 1px solid $borders_color;
1981    @each $_tab, $_border in (top, top),
1982                             (bottom, bottom),
1983                             (left, left),
1984                             (right, right) {
1985      &.#{$_tab} {
1986        border-#{$_border}-color: $base_color;
1987      }
1988    }
1989  }
1990
1991  &.header {
1992    // FIXME: double borders in some case, can't fix it w/o a class tho
1993    // FIXME: doesn't work on dark var
1994    background-color: $bg_color;
1995
1996    // this is the shading of the header behind the tabs
1997    &.frame { border: none; }
1998
1999    @each $_header, $_border in (top, 0 -1px),
2000                                (bottom, 0 1px),
2001                                (left, -1px 0),
2002                                (right, 1px 0) {
2003      &.#{$_header} { box-shadow: inset #{$_border} $borders_color; }
2004    }
2005  }
2006
2007  tab {
2008    outline-offset: 0;
2009    border-width: 0;
2010    border-style: solid;
2011    border-color: transparent;
2012    background-color: transparent;
2013
2014    $tab_indicator_size: 2px;
2015    // vertical tab sizing
2016    $vt_vpadding: 0.5em;
2017    $vt_hpadding: 1.2em;
2018    // horizontal tab sizing
2019    $ht_vpadding: 0.5em;
2020    $ht_hpadding: 1.2em;
2021
2022    // FIXME: we get double border in some cases, not considering the broken
2023    // notebook content frame...
2024    &.top,
2025    &.bottom { padding: $vt_vpadding $vt_hpadding; }
2026    &.left,
2027    &.right { padding: $ht_vpadding $ht_hpadding; }
2028
2029    &.reorderable-page {
2030      -GtkNotebook-tab-overlap: 1;
2031      &.top,
2032      &.bottom {
2033        padding-left: 1.2em;  // for a nicer close button
2034        padding-right: 1.2em; // placement
2035        border-left-width: 1px;
2036        border-right-width: 1px;
2037      }
2038      &.left,
2039      &.right {
2040        border-bottom-width: 1px;
2041        border-top-width: 1px;
2042      }
2043    }
2044
2045    @each $_tab, $_border in (top, bottom),
2046                             (bottom, top),
2047                             (left, right),
2048                             (right, left) {
2049      &.#{$_tab} {
2050        // padding-#{$_border}: ($vt_vpadding -$tab_indicator_size);
2051        border-#{$_border}-width: $tab_indicator_size;
2052      }
2053    }
2054
2055    // here's the interesting stuff
2056    &:hover,
2057    &.prelight-page { border-color: $track_color; }
2058    &:active,
2059    &.active-page { border-color: $selected_bg_color; }
2060
2061    @each $_tab, $_border in (top, bottom),
2062                             (bottom, top),
2063                             (left, right),
2064                             (right, left) {
2065      &.reorderable-page.#{$_tab} {
2066        border-color: transparent;
2067        &:hover, &.prelight-page {
2068          border-color: $borders_color;
2069          border-#{$_border}-width: 1px;
2070          border-#{$_border}-color: $borders_color;
2071          background-color: $base_color;
2072          box-shadow: none;
2073        }
2074        &:active, &.active-page {
2075          border-color: $borders_color;
2076          border-#{$_border}-width: 2px;
2077          border-#{$_border}-color: $selected_bg_color;
2078          background-color: $base_color;
2079          box-shadow: if($variant == 'light', $tab-shadow-light,
2080                                              $tab-shadow-dark);
2081        }
2082      }
2083    }
2084
2085    .label { // tab text
2086      // needed for a nicer focus ring
2087      // and to prevent unexpected offset on reorderable-page,
2088      // set same padding with .button > GtkImage
2089      padding: 0.5em;
2090      font-weight: 700;
2091      color: $tertiary_fg_color;
2092    }
2093    .prelight-page .label,
2094    .label.prelight-page { // hover tab text
2095      color: $fg_color;
2096    }
2097    .active-page .label,
2098    .label.active-page { // active tab text
2099      color: $fg_color;
2100    }
2101
2102    .button { // tab close button
2103      @extend %image_button;
2104      padding: 0;
2105      background-size: 3em * 1 / 0.8 3em * 1 / 0.8, auto;
2106      @include button(flat-normal);
2107      color: $tertiary_fg_color;
2108      &:hover { @include button(flat-hover); }
2109      &:active { @include button(flat-active); }
2110      &:insensitive { @include button(flat-insensitive); }
2111
2112      & > GtkImage { // this is a hack which makes tabs grow
2113        padding: 0.6em;
2114      }
2115    }
2116    .prelight-page .button,
2117    &:hover .button { // hover tab close button
2118      color: $fg_color;
2119    }
2120    .active-page .button,
2121    &:hover .button { // active tab close button
2122      color: $fg_color;
2123    }
2124  }
2125
2126  &.arrow {
2127    color: $tertiary_fg_color;
2128    &:hover,
2129    &:active { color: $fg_color; }
2130    &:insensitive { color: $insensitive_secondary_fg_color; }
2131  }
2132
2133  &:not(.reorderable-page) > .entry { @extend .entry.flat; }
2134}
2135
2136
2137/**************
2138 * Scrollbars *
2139 **************/
2140
2141@keyframes slow_down_ltr {
2142  to { margin-right: 0; }
2143}
2144
2145@keyframes slow_down_rtl {
2146  to { margin-left: 0; }
2147}
2148
2149@keyframes slow_down_horz {
2150  to { margin-top: 0; }
2151}
2152
2153.scrollbar {
2154  -GtkRange-slider-width: 12;
2155  -GtkRange-trough-border: 0;
2156  -GtkScrollbar-has-backward-stepper: false;
2157  -GtkScrollbar-has-forward-stepper: false;
2158  -GtkScrollbar-min-slider-length: 32;
2159                                   // minimum size for the slider.
2160                                   // sadly can't be in '.slider'
2161                                   // where it belongs
2162  -GtkRange-stepper-spacing: 0;
2163  -GtkRange-trough-under-steppers: 1;
2164
2165  .button { border: none; }
2166
2167  &.overlay-indicator {
2168    &:not(.dragging):not(.hovering) { // Overlay scrolling indicator
2169      -GtkRange-slider-width: 10px; // actually 10 - 4 -> 6px slider
2170
2171      .slider {
2172        margin: 0;
2173        border: none;
2174      }
2175
2176      .trough {
2177        border-style: none;
2178        background-color: transparent;
2179      }
2180
2181      // w/o the following margin tweaks the slider shrinks when
2182      // hovering/dragging
2183      &.vertical .slider {
2184        margin-top: 0;
2185        margin-bottom: 0;
2186        &:dir(ltr) {
2187          margin-left: 0;
2188          margin-right: 6px;
2189        }
2190        &:dir(ltr) {
2191          margin-left: 6px;
2192          margin-right: 0;
2193        }
2194      }
2195      &.horizontal .slider {
2196        margin-top: 6px;
2197        margin-bottom: 0;
2198        margin-left: 0;
2199        margin-right: 0;
2200      }
2201    }
2202
2203    &.dragging,
2204    &.hovering {
2205      .trough { background-color: gtkopacity($base_color, 0.55); }
2206    }
2207
2208    &.hovering { // slow-down when deforming
2209      &.vertical .slider {
2210        &:dir(ltr) { animation: slow_down_ltr 0.2s linear forwards; }
2211        &:dir(rtl) { animation: slow_down_rtl 0.2s linear forwards; }
2212      }
2213      &.horizontal .slider { animation: slow_down_horz 0.2s linear forwards; }
2214    }
2215  }
2216
2217  // trough coloring
2218  .trough {
2219    border: none;
2220    background-color: $base_color;
2221  }
2222
2223  // slider coloring
2224  .slider {
2225    background-color: gtkopacity($tertiary_fg_color, 0.55);
2226    &:hover { background-color: gtkopacity($secondary_fg_color, 0.55); }
2227    &:active { background-color: $fg_color; }
2228    &:insensitive { opacity: 0.4; }
2229  }
2230
2231  // sizing
2232  .slider {
2233    border-radius: 0;
2234    margin: 0;
2235  }
2236
2237  &.fine-tune .slider { margin: 0; }
2238
2239  &.vertical {
2240    .slider { margin: 0; }
2241    &.fine-tune .slider { margin: 0; }
2242  }
2243
2244  &.horizontal {
2245    .slider { margin: 0; }
2246    &.fine-tune .slider { margin: 0; }
2247  }
2248}
2249
2250.scrollbars-junction,
2251.scrollbars-junction.frame { // the small square between two scrollbars
2252  border: none;
2253  background-color: $base_color;
2254}
2255
2256
2257/**********
2258 * Switch *
2259 **********/
2260
2261GtkSwitch {
2262  -GtkSwitch-slider-width: 20px; // 55px is the right value to make it as tall
2263                                 // as buttons, not doing that for now
2264  -GtkSwitch-slider-height: 20px;
2265
2266  outline-offset: -4px;
2267  outline-radius: 100px;
2268  font-size: 0;
2269
2270  &.trough {
2271    // similar to the .scale
2272    border: 8px solid transparent;
2273    border-radius: 100px;
2274    background-color: $track_color;
2275    &:active {
2276      background-color: gtkopacity($selected_bg_color, 0.2);
2277      &:insensitive { background-color: gtkopacity($selected_bg_color, 0.2); }
2278    }
2279    &:insensitive {
2280      color: $insensitive_fg_color;
2281      background-color: $track_color;
2282    }
2283  }
2284
2285  &.slider {
2286    padding: 4px;
2287    border-radius: 100px;
2288    outline-radius: 100px;
2289    @include button(normal);
2290    &:hover {
2291      @include button(hover);
2292      background-image: linear-gradient(to bottom,
2293                                        gtkalpha($selected_fg_color, 0.2));
2294    }
2295    &:active {
2296      @include button(checked);
2297      &:hover { box-shadow: $z-depth-2; }
2298      &:insensitive {
2299        @include button(checked-insensitive);
2300        // do not use any transparentized materials
2301        background-color: if($variant == 'light', #F0F2F3, #3F4E56);
2302        background-image: none;
2303        box-shadow: none;
2304      }
2305    }
2306    &:insensitive {
2307      background-color: if($variant == 'light', #F0F2F3, #3F4E56);
2308      background-image: none;
2309      box-shadow: none;
2310    }
2311  }
2312
2313  .list-row:selected & { // return to monochrome
2314    &.trough {
2315      background-color: $bg_color;
2316      &:active {
2317        background-color: $secondary_dark_color;
2318        &:insensitive { background-color: $secondary_dark_color; }
2319      }
2320    }
2321
2322    &.slider {
2323      background-color: $bg_color;
2324      &:hover {
2325        background-image: linear-gradient(to bottom,
2326                                          gtkalpha($selected_fg_color, 0.2));
2327      }
2328      &:active {
2329        background-color: $base_color;
2330        &:hover { box-shadow: $z-depth-2; }
2331      }
2332    }
2333  }
2334
2335  // special case inside the grid container,
2336  // need to protect geometry by using pixmaps images...
2337  GtkGrid & {
2338    -GtkSwitch-slider-width: 40;
2339    -GtkSwitch-slider-height: 20;
2340    font-size: 0;
2341    outline-color: transparent;
2342
2343    &.trough,
2344    &.slider { // reset all of default switches
2345      &,
2346      &:hover,
2347      &:active,
2348      &:active:hover,
2349      &:active:insensitive,
2350      &:insensitive {
2351        padding: 0;
2352        border: 4px solid transparent;
2353        color: transparent;
2354        background: none;
2355        background-image: none;
2356        background-size: 40px 20px;
2357        background-repeat: no-repeat;
2358        background-position: right center;
2359        box-shadow: none;
2360
2361        &:dir(rtl) { background-position: left center; }
2362      }
2363    }
2364
2365    &.trough { // use ugly pixmaps
2366      background-image: -gtk-scaled(
2367                        url("assets/toggle-off#{$asset_suffix}.png"),
2368                        url("assets/toggle-off#{$asset_suffix}@2.png"));
2369      &:hover {
2370        background-image: -gtk-scaled(
2371                          url("assets/toggle-off-hover#{$asset_suffix}.png"),
2372                          url("assets/toggle-off-hover#{$asset_suffix}@2.png"));
2373      }
2374      &:active {
2375        background-image: -gtk-scaled(url("assets/toggle-on.png"),
2376                                      url("assets/toggle-on@2.png"));
2377        &:hover {
2378          background-image: -gtk-scaled(url("assets/toggle-on-hover.png"),
2379                                        url("assets/toggle-on-hover@2.png"));
2380        }
2381        &:insensitive {
2382          background-image: -gtk-scaled(
2383                            url("assets/toggle-on-insensitive#{$asset_suffix}.png"),
2384                            url("assets/toggle-on-insensitive#{$asset_suffix}@2.png"));
2385        }
2386      }
2387      &:insensitive {
2388        background-image: -gtk-scaled(
2389                          url("assets/toggle-off-insensitive#{$asset_suffix}.png"),
2390                          url("assets/toggle-off-insensitive#{$asset_suffix}@2.png"));
2391      }
2392    }
2393  }
2394}
2395
2396
2397/*************************
2398 * Check and Radio items *
2399 *************************/
2400
2401// draw regular check and radio items using our PNG assets
2402// all assets are rendered from assets.svg. never add pngs directly
2403
2404@each $w,$a in ('check', 'checkbox'),
2405               ('radio','radio') {
2406
2407  // standard checks and radios
2408  @each $s,$as in ('','-unchecked'),
2409                  (':hover', '-unchecked-active'),
2410                  (':active', '-unchecked-active'),
2411                  (':insensitive','-unchecked-insensitive'),
2412                  (':inconsistent', '-mixed'),
2413                  (':inconsistent:hover', '-mixed-active'),
2414                  (':inconsistent:active', '-mixed-active'),
2415                  (':inconsistent:insensitive', '-mixed-insensitive'),
2416                  (':checked', '-checked'),
2417                  (':checked:hover', '-checked-active'),
2418                  (':checked:active', '-checked-active'),
2419                  (':checked:insensitive','-checked-insensitive') {
2420    .#{$w}#{$s} {
2421      -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}#{$asset_suffix}.png"),
2422                                    url("assets/#{$a}#{$as}#{$asset_suffix}@2.png"));
2423      icon-shadow: none;
2424    }
2425  }
2426
2427  // menu
2428  @each $s,$as in ('',''),
2429                  // (':active', '-checked'),
2430                  (':insensitive','-insensitive'),
2431                  (':inconsistent', '-mixed'),
2432                  // (':inconsistent:active', '-mixed'),
2433                  (':inconsistent:insensitive', '-mixed-insensitive'),
2434                  (':checked', '-checked'),
2435                  // (':checked:active', '-checked'),
2436                  (':checked:insensitive','-checked-insensitive') {
2437    .menu .menuitem.#{$w}#{$s} {
2438      -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-symbolic#{$asset_suffix}.png"),
2439                                    url("assets/#{$a}#{$as}-symbolic#{$asset_suffix}@2.png"));
2440      icon-shadow: none;
2441      &:hover {
2442        -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-symbolic#{$asset_suffix}.png"),
2443                                      url("assets/#{$a}#{$as}-symbolic#{$asset_suffix}@2.png"));
2444      }
2445    }
2446  }
2447}
2448
2449// check/radio inside selected-rows
2450@each $w,$a in ('check', 'checkbox'),
2451               ('radio','radio') {
2452
2453  // standard checks and radios
2454  @each $s,$as in ('','-unchecked'),
2455                  (':active', '-unchecked'),
2456                  (':inconsistent', '-mixed'),
2457                  (':inconsistent:active', '-mixed'),
2458                  (':checked', '-checked'),
2459                  (':checked:active', '-checked') {
2460    .view,
2461    .list-row,
2462    .list-row.activatable {
2463      .#{$w}:selected#{$s},
2464      .#{$w}:selected:focus#{$s} {
2465        -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-selected.png"),
2466                                      url("assets/#{$a}#{$as}-selected@2.png"));
2467        icon-shadow: none;
2468      }
2469      // use dark variant for insensitive states
2470      #{$w}:selected:insensitive,
2471      #{$w}:selected:focus:insensitive {
2472        -gtk-icon-source: -gtk-scaled(url("assets/#{$a}-unchecked-insensitive-dark.png"),
2473                                      url("assets/#{$a}-unchecked-insensitive-dark@2.png"));
2474      }
2475      #{$w}:selected:inconsistent:insensitive,
2476      #{$w}:selected:focus:inconsistent:insensitive {
2477        -gtk-icon-source: -gtk-scaled(url("assets/#{$a}-mixed-insensitive-dark.png"),
2478                                      url("assets/#{$a}-mixed-insensitive-dark@2.png"));
2479      }
2480      #{$w}:selected:checked:insensitive,
2481      #{$w}:selected:focus:checked:insensitive {
2482        -gtk-icon-source: -gtk-scaled(url("assets/#{$a}-checked-insensitive-dark.png"),
2483                                      url("assets/#{$a}-checked-insensitive-dark@2.png"));
2484      }
2485    }
2486  }
2487}
2488
2489// selection-mode
2490@each $s,$as in ('','-selectionmode'),
2491                  (':hover', '-active-selectionmode'),
2492                  (':active', '-active-selectionmode'),
2493                  (':insensitive', '-insensitive-selectionmode'),
2494                  (':checked', '-checked-selectionmode'),
2495                  (':checked:hover', '-checked-active-selectionmode'),
2496                  (':checked:active', '-checked-active-selectionmode'),
2497                  (':insensitive:checked', '-checked-insensitive-selectionmode') {
2498  .view.content-view.check#{$s}:not(.list) {
2499    -gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
2500                                  url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
2501    background-color: transparent;
2502  }
2503}
2504
2505GtkCheckButton.text-button,
2506GtkRadioButton.text-button {
2507  // this is for a nice focus on check and radios text
2508  padding: 0.2em 0.5em;
2509  outline-offset: 0;
2510  color: $secondary_fg_color;
2511  &:hover,
2512  &:active,
2513  &:checked { color: $fg_color; }
2514  &:insensitive,
2515  &:insensitive:active,
2516  &:insensitive:inconsistent {
2517    // set insensitive color, which is overriden otherwise
2518    color: $insensitive_fg_color;
2519  }
2520}
2521
2522
2523/************
2524 * GtkScale *
2525 ************/
2526
2527.scale,
2528.scale.scale-has-marks-above.scale-has-marks-below,
2529.scale.vertical.scale-has-marks-above.scale-has-marks-below {
2530  // FIXME: rationalize
2531  -GtkScale-slider-length: 20;
2532  -GtkRange-slider-width: 20;
2533  -GtkRange-trough-border: 2;
2534  outline-offset: -8px;
2535  outline-radius: 100px;
2536
2537  &.fine-tune {
2538    // outline-offset: -6px;
2539    &.slider { background-size: 80%; }
2540    &.trough {
2541      // margin: 8px;
2542      // border-radius: 100px;
2543    }
2544  }
2545
2546  &.slider {
2547    &:not(:hover):not(:active) { background-size: 80%; }
2548      // @include entry(normal);
2549      // border-radius: 50%;
2550      // background-color: $accent_color;
2551      @each $s,$as in ('',''),
2552                  //  (':hover','-hover'),
2553                      (':active','-active'),
2554                      (':insensitive','-insensitive') {
2555        &.slider#{$s} {
2556          $_url: 'assets/slider#{$as}#{$asset_suffix}';
2557          border-style: none;
2558          border-radius: 0;
2559          background-color: transparent;
2560          background-image: -gtk-scaled(url('#{$_url}.png'),
2561                            url('#{$_url}@2.png'));
2562          background-repeat: no-repeat;
2563          background-position: center;
2564          box-shadow: none;
2565        }
2566      }
2567    &:hover {
2568      // @include entry(focus);
2569      // border-radius: 50%; // needed for double marks scales
2570    }
2571    &:insensitive {
2572      // @include entry(insensitive);
2573      // border-radius: 50%;  // overridden
2574    }
2575
2576    // OSD sliders
2577    .osd & {
2578    }
2579  }
2580
2581  &.trough {
2582    margin: 11px;
2583    border-radius: 0;
2584    background-color: $track_color;
2585    &.highlight {
2586      background-color: $accent_color;
2587      &:insensitive { background-color: $track_color; }
2588    }
2589    &:insensitive { color: $insensitive_fg_color; }
2590
2591    // OSD troughs
2592    .osd & {
2593    }
2594  }
2595  // marks color
2596  &.separator { color: $track_color; }
2597
2598  // scales on selected list rows
2599  .list-row:selected & {
2600  }
2601}
2602
2603@each $d,$dn in ('', 'horz'),
2604                ('.vertical', 'vert') {
2605  @each $w,$we in  ('scale-has-marks-below','scale_marks_below'),
2606                   ('scale-has-marks-above','scale_marks_above') {
2607    .scale#{$d}.#{$w} {
2608      -GtkScale-slider-length: 20;
2609      -GtkRange-slider-width: 25;
2610      -GtkRange-trough-border: 1;
2611
2612      @extend %#{$we}_#{$dn};
2613
2614      @each $s,$as in ('',''),
2615                      // (':hover','-hover'),
2616                      (':active','-active'),
2617                      (':insensitive','-insensitive') {
2618        &.slider#{$s} {
2619          $_url: 'assets/slider-#{$dn}-#{$w}#{$as}#{$asset_suffix}';
2620          border-style: none;
2621          border-radius: 0;
2622          background-color: transparent;
2623          background-image: -gtk-scaled(url('#{$_url}.png'),
2624                            url('#{$_url}@2.png'));
2625          background-repeat: no-repeat;
2626          background-position: center;
2627          box-shadow: none;
2628        }
2629      }
2630    }
2631  }
2632}
2633
2634%scale_marks_above_horz {
2635  .trough { margin: 15px 10px 10px; }
2636  // &.fine-tune .trough { margin: 13px 8px 8px; }
2637}
2638%scale_marks_below_horz {
2639  .trough { margin: 10px 10px 15px; }
2640  // &.fine-tune .trough { margin: 8px 8px 13px; }
2641}
2642%scale_marks_above_vert {
2643  .trough { margin: 10px 10px 10px 15px; }
2644  // &.fine-tune .trough { margin: 8px 8px 8px 13px; }
2645}
2646%scale_marks_below_vert {
2647  .trough { margin: 10px 15px 10px 10px; }
2648  // &.fine-tune .trough { margin: 8px 13px 8px 8px; }
2649}
2650
2651
2652/*****************
2653 * Progress bars *
2654 *****************/
2655
2656GtkProgressBar {
2657  -GtkProgressBar-min-horizontal-bar-height: 4;
2658  -GtkProgressBar-min-vertical-bar-width: 4;
2659  padding: 0;
2660  font-size: 90%;
2661  color: $tertiary_fg_color;
2662
2663  &.osd {
2664    -GtkProgressBar-xspacing: 0;
2665    -GtkProgressBar-yspacing: 0;
2666    -GtkProgressBar-min-horizontal-bar-height: 4;
2667  }
2668
2669  &.trough { // background
2670    border-radius: 0;
2671    background-color: gtkopacity($accent_color, 0.2);
2672
2673    &.osd {
2674      border-style: none;
2675      box-shadow: none;
2676      background-color: gtkopacity($accent_color, 0.2);
2677    }
2678  }
2679}
2680
2681// moving bit
2682.progressbar {
2683  border-radius: 0;
2684  background-color: $accent_color;
2685
2686  &.left {
2687    border-top-left-radius: 0;
2688    border-bottom-left-radius: 0;
2689  }
2690  &.right {
2691    border-top-right-radius: 0;
2692    border-bottom-right-radius: 0;
2693  }
2694  &.left.right {
2695    box-shadow: none;
2696  }
2697
2698  &.vertical {
2699    &.top {
2700      border-top-left-radius: 0;
2701      border-top-right-radius: 0;
2702    }
2703    &.bottom {
2704      border-bottom-left-radius: 0;
2705      border-bottom-right-radius: 0;
2706      box-shadow: none;
2707    }
2708  }
2709
2710  &.osd {
2711    background-image: none;
2712    background-color: $accent_color;
2713    border-style: none;
2714    border-radius: 0;
2715  }
2716}
2717
2718%entry_progressbar { // progress inside .entry
2719  border-style: none none solid;
2720  border-width: 2px;
2721  border-image: -gtk-gradient(radial,
2722                              center bottom, 0,
2723                              center bottom, 0.5,
2724                              to($accent_color),
2725                              to(transparent))
2726                              0 0 2 / 0 0 2px;
2727  border-radius: 0;
2728  box-shadow: none;
2729  background-color: transparent;
2730  background-image: none;
2731}
2732
2733%treeview_progressbar { // progress inside GtkTreeView
2734  border-style: none none solid;
2735  border-width: 4px;
2736  border-radius: 0;
2737  box-shadow: none;
2738  background-color: transparent;
2739  background-image: none;
2740}
2741
2742
2743/*************
2744 * Level Bar *
2745 *************/
2746
2747.level-bar {
2748  box-shadow: $z-depth-1; // needs to be set here to avoid clipping
2749  -GtkLevelBar-min-block-width: 36;
2750  -GtkLevelBar-min-block-height: 4;
2751
2752  &.vertical {
2753    -GtkLevelBar-min-block-width: 4;
2754    -GtkLevelBar-min-block-height: 36;
2755  }
2756
2757  &.trough {
2758    padding: 2px;
2759    border-radius: 2px;
2760    box-shadow: $z-depth-1;
2761    &:insensitive { box-shadow: none; }
2762    &.indicator-discrete {
2763      &.horizontal { padding: 2px 1px; }
2764      &.vertical { padding: 1px 2px; }
2765    }
2766  }
2767
2768  &.fill-block {
2769    // FIXME: it would be nice to set make fill blocks bigger, but we'd need
2770    // :nth-child working on discrete indicators
2771    background-color: $accent_color;
2772    border-radius: 0;
2773    box-shadow: none;
2774    &.indicator-discrete {
2775      &.horizontal { margin: 0 1px; }
2776      &.vertical { margin: 1px 0; }
2777    }
2778    &.level-high { background-color: $success_color; }
2779    &.level-low { background-color: $accent_color; }
2780    &.empty-fill-block { background-color: $track_color; }
2781  }
2782}
2783
2784
2785/**********
2786 * Frames *
2787 **********/
2788
2789.frame {
2790  border: 1px solid $borders_color;
2791  padding: 0;
2792
2793  &.flat { border-style: none; }
2794
2795  &.action-bar {
2796    padding: 0.4em;
2797    border-width: 1px 0 0;
2798  }
2799}
2800
2801GtkScrolledWindow {
2802  GtkViewport.frame { // avoid double borders when viewport inside
2803                      // scrolled window
2804    border-style: none;
2805  }
2806}
2807
2808// vbox and hbox separators
2809.separator {
2810  // always disable separators
2811  // -GtkWidget-wide-separators: true;
2812  color: $borders_color;
2813
2814  // Font and File button separators
2815  GtkFileChooserButton &.vertical,
2816  GtkFontButton &.vertical {
2817    // always disable separators
2818    -GtkWidget-wide-separators: true;
2819  }
2820}
2821
2822
2823/*********
2824 * Lists *
2825 *********/
2826
2827.list {
2828  border-color: $borders_color;
2829  background-color: $base_color;
2830}
2831
2832.list-row,
2833.grid-child { padding: 2px; }
2834
2835.list-row.activatable {
2836  // let's take care of background colors
2837  background-image: -gtk-gradient(radial,
2838                                  center center, 0,
2839                                  center center, 0.5,
2840                                  to(gtkalpha(currentColor, 0)),
2841                                  to(transparent)),
2842                    linear-gradient(to bottom, gtkalpha(currentColor, 0));
2843  background-repeat: no-repeat;
2844  background-position: center, center;
2845  background-size: 192px * 1 / 0.8 192px * 1 / 0.8, auto;
2846  &:hover {
2847    background-image: -gtk-gradient(radial,
2848                                    center center, 0,
2849                                    center center, 0.5,
2850                                    to(gtkalpha(currentColor, 0)),
2851                                    to(transparent)),
2852                      linear-gradient(to bottom, gtkalpha(currentColor, 0.05));
2853  }
2854  &:active {
2855    animation: list_ripple_effect 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
2856  }
2857  &:insensitive {color: $insensitive_fg_color; }
2858}
2859
2860.list-row:selected {
2861  @extend %selected_items;
2862  .button {
2863    &:insensitive { color: $insensitive_secondary_selected_fg_color; }
2864    &.flat {
2865      color: $secondary_selected_fg_color;
2866      &:hover, &:active { color: $selected_fg_color; }
2867      &:insensitive { color: $insensitive_secondary_selected_fg_color; }
2868    }
2869  }
2870}
2871
2872// button spacing
2873.list-row {
2874  .button.image-button {
2875    padding: 0.4em;
2876    background-size: 2em * 1 / 0.8 2em * 1 / 0.8, auto;
2877  }
2878}
2879
2880// transition
2881.list-row {
2882  &:hover { transition: none; }
2883}
2884
2885
2886/*********************
2887 * App Notifications *
2888 *********************/
2889
2890.app-notification,
2891.app-notification.frame {
2892  @extend %osd;
2893  @extend .toolbar.osd;
2894  .button {
2895  }
2896}
2897
2898
2899/*************
2900 * Expanders *
2901 *************/
2902
2903.expander {
2904  -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2905
2906  &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
2907  &:not(:hover):not(:active) { color: gtkalpha(currentColor, 0.75); }
2908  &:selected { color: $selected_fg_color; }
2909
2910  &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
2911}
2912
2913
2914/************
2915 * Calendar *
2916 ***********/
2917
2918GtkCalendar {
2919  margin: 0.6em 0;
2920  padding: 0.4em 0.1em 0.2em;
2921  border: 1px solid $borders_color;
2922  color: $fg_color;
2923  &:selected {
2924    border: none;
2925    border-radius: 100px;
2926    color: $selected_fg_color;
2927    background-color: transparent;
2928    background-image: -gtk-scaled(url("assets/calendar-day-selected.png"),
2929                                  url("assets/calendar-day-selected@2.png"));
2930    background-size: 2em 2em;
2931    background-position: center top;
2932    background-repeat: no-repeat;
2933  }
2934
2935  &.header {
2936    border: 1px solid transparent;
2937    border-bottom-color: $borders_color;
2938    border-radius: 0;
2939  }
2940
2941  &.button {
2942    @include button(flat-normal);
2943    color: gtkalpha(currentColor, 0.20);
2944    &:hover { @include button(flat-hover); }
2945    &:active { @include button(flat-active); }
2946    &:insensitive { @include button(flat-insensitive); }
2947  }
2948
2949  &:inconsistent { color: gtkalpha(currentColor, 0.20); }
2950  &.highlight {
2951    color: gtkalpha(currentColor, 0.55);
2952    font-size: 90%;
2953    font-weight: 500;
2954  }
2955}
2956
2957
2958/***********
2959 * Dialogs *
2960 ***********/
2961
2962.message-dialog { // Message Dialog styling
2963  color: $inverted_fg_color;
2964
2965  &.background {
2966    background-color: $inverted_dark_color;
2967    opacity: 0.9;
2968  }
2969
2970  .titlebar {
2971    border-style: none;
2972    color: $inverted_fg_color;
2973    background-color: $inverted_dark_color;
2974  }
2975
2976  .entry {
2977    color: $inverted_fg_color;
2978    &:focus { color: $selected_fg_color; }
2979    &:insensitive { color: $insensitive_inverted_fg_color; }
2980  }
2981
2982  .button { // set foregrounds for fallback-mode
2983    color: $secondary_accent_color;
2984    &:hover,
2985    &:active,
2986    &:checked { color: $accent_color; }
2987    &:insensitive { color: $insensitive_inverted_fg_color; }
2988  }
2989  .linked > .button {
2990    border: 2px solid transparent;
2991    border-radius: 2px;
2992    border-image: none;
2993    box-shadow: none;
2994  }
2995
2996  // always use dark variant for check/radio icons
2997  @each $s,$as in ('','-unchecked'),
2998                  (':hover', '-unchecked-active'),
2999                  (':active', '-unchecked-active'),
3000                  (':insensitive','-unchecked-insensitive'),
3001                  (':inconsistent', '-mixed'),
3002                  (':inconsistent:hover', '-mixed-active'),
3003                  (':inconsistent:active', '-mixed-active'),
3004                  (':inconsistent:insensitive', '-mixed-insensitive'),
3005                  (':checked', '-checked'),
3006                  (':checked:hover', '-checked-active'),
3007                  (':checked:active', '-checked-active'),
3008                  (':checked:insensitive','-checked-insensitive') {
3009    .check#{$s} {
3010      -gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}-dark.png"),
3011                                    url("assets/checkbox#{$as}-dark@2.png"));
3012    }
3013    .radio#{$s} {
3014      -gtk-icon-source: -gtk-scaled(url("assets/radio#{$as}-dark.png"),
3015                                    url("assets/radio#{$as}-dark@2.png"));
3016    }
3017  }
3018
3019  GtkCheckButton.text-button,
3020  GtkRadioButton.text-button {
3021    color: $inverted_secondary_fg_color;
3022    &:hover,
3023    &:active,
3024    &:checked { color: $inverted_fg_color; }
3025    &:insensitive,
3026    &:insensitive:active,
3027    &:insensitive:inconsistent {
3028      // set insensitive color, which is overriden otherwise
3029      color: $insensitive_inverted_fg_color;
3030    }
3031  }
3032
3033  &.csd { // rounded bottom border styling for csd version
3034    &.background {
3035      // bigger radius for better antialiasing
3036      border-bottom-left-radius: 2px;
3037      border-bottom-right-radius: 2px;
3038    }
3039
3040    .dialog-action-area {
3041      .button,
3042      .linked > .button {
3043        @extend .button.flat;
3044        padding: 0.7em 1em 0.8em;
3045        border: 2px solid transparent;
3046        border-radius: 0;
3047        color: $secondary_accent_color;
3048        background-size: 192px * 1 / 0.8 192px * 1 / 0.8, auto;
3049        &:hover {
3050          @include button(flat-hover);
3051          color: $accent_color;
3052        }
3053        &:active {
3054          @include button(flat-active);
3055          color: $accent_color;
3056        }
3057        &:checked {
3058          @include button(flat-checked);
3059          color: $secondary_accent_color;
3060        }
3061        &:insensitive { @include button(flat-insensitive); }
3062
3063        &:first-child {
3064          border-bottom-left-radius: 2px;
3065          border-right-width: 0;
3066        }
3067        &:last-child {
3068          border-bottom-right-radius: 2px;
3069          border-left-width: 0;
3070        }
3071      }
3072    }
3073  }
3074}
3075
3076GtkFileChooserDialog {
3077  .search-bar {
3078    // background-color: $base_color;
3079    // border-color: $bg_color;
3080  }
3081
3082  .dialog-action-box { border-top: 1px solid $borders_color; }
3083}
3084
3085
3086/***********
3087 * Sidebar *
3088 ***********/
3089
3090.sidebar {
3091  border: none;
3092  color: $secondary_fg_color;
3093
3094  &, .list { // draw shadows
3095    &:dir(ltr) { box-shadow: if($variant == 'light', $sidebar-light-ltr,
3096                                                     $sidebar-dark-ltr);
3097    }
3098    &:dir(rtl) { box-shadow: if($variant == 'light', $sidebar-light-rtl,
3099                                                     $sidebar-dark-rtl);
3100    }
3101  }
3102
3103  // remove background from child-elements
3104  GtkTreeView.view,
3105  .frame,
3106  .list { background-color: transparent; }
3107
3108  GtkTreeView.view {
3109    box-shadow: none;
3110    &:selected,
3111    .list-row:selected { @extend %selected_items; }
3112  }
3113
3114  // fill actual background
3115  background-color: $secondary_dark_color;
3116  .frame .list { box-shadow: none; }
3117
3118  // disable shadows on overshoot/undershoot area
3119  // of gtk3-demo's sidebar
3120  .overshoot,
3121  .undershoot { box-shadow: none; }
3122}
3123
3124GtkSidebarRow {
3125  &.list-row {
3126    padding: 0; // Needs overriding of the GtkListBoxRow padding
3127    color: $secondary_fg_color;
3128    font-weight: 500;
3129    &:hover { color: $fg_color; }
3130    &:selected {
3131      color: $selected_bg_color;
3132      background-color: transparent;
3133    }
3134    &:backdrop { opacity: 1.0; }
3135  }
3136
3137  // Using margins/padding directly in the SidebarRow
3138  // will make the animation of the new bookmark row jump
3139  .sidebar-revealer { padding: 0.2em 1.1em 0.2em 1em; }
3140
3141  .sidebar-icon {
3142    opacity: 0.75; // dim the device icons
3143    &:dir(ltr) { padding-right: 0.6em; }
3144    &:dir(rtl) { padding-left: 0.6em; }
3145  }
3146
3147  .sidebar-label {
3148    &:dir(ltr) { padding-right: 0.1em; }
3149    &:dir(rtl) { padding-left: 0.1em; }
3150  }
3151}
3152
3153GtkPlacesSidebar.sidebar {
3154  // in the sidebar case it makes no sense to click the selected row
3155  // .list-row:selected:active { box-shadow: none; }
3156
3157  // looks like the label doesn't get all the states so work around
3158  .list-row:selected:insensitive .label { color: $insensitive_selected_fg_color; }
3159
3160  .list-row:selected { // 'eject' button
3161    .sidebar-button.button {
3162      color: $secondary_selected_bg_color;
3163      &:hover,
3164      &:active { color: $selected_bg_color; }
3165    }
3166  }
3167
3168  .sidebar-placeholder-row { border: solid 1px $selected_bg_color; }
3169
3170  .sidebar-new-bookmark-row { color: $selected_bg_color; }
3171
3172  // @at-root needded to not change the specificity making button styling
3173  // inheritance broken so istead of
3174  // "GtkPlacesSidebar.sidebar .sidebar-button.button" [specificity 0,0,3,1]
3175  // the extended selector ".sidebar-button.button" [specificity 0,0,2,0]
3176  @at-root .sidebar-button.button { 
3177    &.image-button {
3178      padding: 4px;
3179      color: $secondary_fg_color;
3180      &:hover,
3181      &:active,
3182      &:checked { color: $fg_color; }
3183    }
3184
3185    @extend .button.flat;
3186    // border-radius: 100%;
3187    // outline-radius: 100%;
3188  }
3189
3190  // this is for indicating which sidebar row generated a popover
3191  // see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3192  .has-open-popup {
3193    @extend .list-row.activatable:active;
3194    transition: none;
3195  }
3196}
3197
3198.sidebar-item {
3199  padding: 0.8em 0.6em;
3200  > .label {
3201    padding-left: 0.4em;
3202    padding-right: 0.4em;
3203  }
3204
3205  &.needs-attention > .label { @extend %needs_attention; }
3206}
3207
3208GtkStackSidebar {
3209  .sidebar-item {
3210    padding: 0.8em 0.6em;
3211    > .label {
3212      padding-left: 0.4em;
3213      padding-right: 0.4em;
3214    }
3215    color: $secondary_fg_color;
3216    font-weight: 500;
3217    &:hover { color: $fg_color; }
3218    &:selected {
3219      color: $selected_bg_color;
3220      background-color: transparent;
3221    }
3222    &:backdrop { opacity: 1.0; }
3223  }
3224
3225  .frame .list { // draw shadows
3226    // dim background with alpha-blending
3227    background-color: if($variant == 'light', rgba(12, 18, 0, 0.01),
3228                                              rgba(18, 22, 0, 0.04));
3229
3230    &:dir(ltr) { box-shadow: if($variant == 'light', $sidebar-light-ltr,
3231                                                     $sidebar-dark-ltr);
3232    }
3233    &:dir(rtl) { box-shadow: if($variant == 'light', $sidebar-light-rtl,
3234                                                     $sidebar-dark-rtl);
3235    }
3236  }
3237
3238  // remove unwanted separator
3239  .separator { -GtkWidget-wide-separators: true; }
3240}
3241
3242
3243/*********
3244 * Paned *
3245 *********/
3246
3247GtkPaned { // this is for the standard paned separator
3248
3249  -GtkPaned-handle-size: 1; // sets separator width
3250
3251  -gtk-icon-source: none; // removes handle decoration
3252  margin: 0 8px 8px 0; // drag area of the separator, not a real margin
3253  &:dir(rtl) {
3254    margin-right: 0;
3255    margin-left: 8px;
3256  }
3257  .pane-separator { background-color: $borders_color; }
3258}
3259
3260GtkPaned.wide { // this is for the paned with wide separator
3261  -GtkPaned-handle-size: 6; // wider separator here
3262  margin: 0; // no need of the invisible drag area so, reset margin
3263
3264  .pane-separator {
3265    background-color: transparent;
3266    border-style: none solid;
3267    border-color: $borders_color;
3268    border-width: 1px;
3269  }
3270
3271  &.vertical .pane-separator { border-style: solid none; }
3272}
3273
3274
3275/**************
3276 * GtkInfoBar *
3277 **************/
3278
3279GtkInfoBar {
3280  padding: 0.4em;
3281  border-width: 0 0 1px;
3282  border-style: solid;
3283  // do not use transparentize
3284  border-color: $solid_light_borders_color;
3285  background-color: $secondary_dark_color;
3286}
3287
3288.info,
3289.question,
3290.warning,
3291.error { // always use dark foreground colour
3292  color: $secondary_fixed_fg_color;
3293
3294  .button {
3295    @extend .button.flat;
3296    color: $secondary_fixed_fg_color;
3297    &:insensitive { color: $insensitive_fixed_fg_color; }
3298    &.flat {
3299      color: $secondary_fixed_fg_color;
3300      &:hover, &:active { color: $fixed_fg_color; }
3301      &:insensitive { color: $insensitive_fixed_fg_color; }
3302    }
3303  }
3304
3305  .label:selected,
3306  .label:selected:focus,
3307  .label:selected:hover {
3308    background-color: darken($selected_bg_color, 10%);
3309  }
3310
3311  // use 'white' bit and trough
3312  GtkProgressBar.trough { background-color: gtkopacity($selected_fg_color, 0.2); }
3313  .progressbar { background-color: $selected_fg_color; }
3314}
3315
3316.info { background-color: $info_bg_color; }
3317
3318.question { background-color: $question_bg_color; }
3319
3320.warning { background-color: $warning_bg_color; }
3321
3322.error { // use white text for this
3323  color: $selected_fg_color;
3324  background-color: $error_bg_color;
3325}
3326
3327
3328/************
3329 * Tooltips *
3330 ************/
3331
3332.tooltip {
3333  &.background {
3334    // background-color needs to be set this way otherwise it gets drawn twice
3335    // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
3336    background-color: gtkopacity($inverted_dark_color, 0.9);
3337  }
3338
3339  color: $inverted_fg_color;
3340  padding: 0.2em; // not working
3341  border-radius: 2px;
3342  box-shadow: none; // otherwise it gets inherited by windowframe.csd
3343
3344  // FIXME: we need a border or tooltips vanish on black background.
3345  &.window-frame.csd {
3346    background-color: transparent;
3347  }
3348}
3349
3350.tooltip * { // Yeah this is ugly
3351  padding: 0.2em;
3352  background-color: transparent;
3353  color: inherit; // just to be sure
3354}
3355
3356
3357/*****************
3358 * Color Chooser *
3359 *****************/
3360
3361GtkColorSwatch {
3362  // This widget is made of two boxes one on top of the other,
3363  // the lower box is GtkColorSwatch {} the other one is
3364  // GtkColorSwatch > .overlay {}, GtkColorSwatch has the programmatically
3365  // set background, so most of the style is applied to the overlay box.
3366
3367  box-shadow: $z-depth-1;
3368
3369  // we need to re-set the shadow here since it get axed by the previous bit
3370  &:selected {
3371  }
3372
3373  // base color corners rounding
3374  // to avoid the artifacts caused by rounded corner anti-aliasing the base
3375  // color sports a bigger radius.
3376  // nth-child is needed by the custom color strip.
3377  // The :not() madness is needed since actually the overlay is selectable
3378  // by GtkColorSwatch > .overlay and GtkColorSwatch.overlay,
3379  // I know it's weird, but this is gtk+, not a browser.
3380  &.top {
3381    border-top-left-radius: 2px;
3382    border-top-right-radius: 2px;
3383  }
3384  &.bottom {
3385    border-bottom-left-radius: 2px;
3386    border-bottom-right-radius: 2px;
3387  }
3388  &.left, &:first-child:not(.overlay):not(.top) {
3389    border-top-left-radius: 2px;
3390    border-bottom-left-radius: 2px;
3391  }
3392  &.right, &:last-child:not(.overlay):not(.bottom) {
3393    border-top-right-radius: 2px;
3394    border-bottom-right-radius: 2px;
3395  }
3396  &:only-child:not(.overlay) { border-radius: 2px; }
3397
3398  // overlay corner rounding
3399  &.top > .overlay {
3400    border-top-left-radius: 2px;
3401    border-top-right-radius: 2px;
3402  }
3403  &.bottom > .overlay {
3404    border-bottom-left-radius: 2px;
3405    border-bottom-right-radius: 2px;
3406  }
3407  &:first-child:not(.top) > .overlay {
3408    border-top-left-radius: 2px;
3409    border-bottom-left-radius: 2px;
3410  }
3411  &:last-child:not(.bottom) > .overlay {
3412    border-top-right-radius: 2px;
3413    border-bottom-right-radius: 2px;
3414  }
3415  &:only-child > .overlay { border-radius: 2px; }
3416
3417  // hover effect
3418  &:hover { box-shadow: $z-depth-2; }
3419
3420  // no hover effect for the colorswatch in the color editor
3421  GtkColorEditor & {
3422    border-radius: 2px; // same radius as the entry
3423    &:hover { box-shadow: $z-depth-1; }
3424  }
3425
3426  // indicator and keynav outline colors
3427  &.color-dark { color: #FFFFFF; }
3428  &.color-light { color: gtkopacity(#000000, 0.8); }
3429
3430  // border color
3431  &.overlay,
3432  &.overlay:selected {
3433  }
3434
3435  // make the add color button looks like, well, a button
3436  &#add-color-button {
3437  background-image: linear-gradient(to right,
3438                                    $error_bg_color 25%,
3439                                    $warning_bg_color 25%,
3440                                    $warning_bg_color 50%,
3441                                    $info_bg_color 50%,
3442                                    $info_bg_color 75%,
3443                                    $question_bg_color 75%);
3444  color: #FFFFFF;
3445  }
3446}
3447
3448
3449/********
3450 * Misc *
3451 ********/
3452
3453// content view (grid/list)
3454.content-view {
3455  background-color: $bg_color;
3456  // &:hover { -gtk-image-effect: highlight; }
3457
3458  &.rubberband { @extend .rubberband; }
3459}
3460
3461.scale-popup {
3462  .osd & { @extend %osd; }
3463
3464  .osd & .button.flat {  // FIXME: quick hack, redo properly
3465  }
3466
3467  .osd & .vertical .button,
3468  & .vertical .button { // +/- buttons on GtkVolumeButton popup
3469    border-radius: 100px;
3470    outline-radius: 100px;
3471    background-color: transparent;
3472    color: $secondary_fg_color;
3473    &:first-child { // '+' button
3474      &:hover {
3475        @include button(flat-hover);
3476        background: none;
3477        color: $success_color;
3478      }
3479      &:insensitive {
3480        @include button(flat-insensitive);
3481        background: none;
3482        color: gtkalpha($success_color, 0.4);
3483      }
3484    }
3485    &:last-child { // '-' button
3486      &:hover {
3487        @include button(flat-hover);
3488        background: none;
3489        color: $error_color;
3490      }
3491      &:insensitive {
3492        @include button(flat-insensitive);
3493        background: none;
3494        color: gtkalpha($error_color, 0.4);
3495      }
3496    }
3497  }
3498
3499  .osd & .button,
3500  .button {
3501    border-radius: 100px;
3502    outline-radius: 100px;
3503    background-color: transparent;
3504    color: $secondary_fg_color;
3505    &:first-child { // '-' button
3506      &:hover {
3507        @include button(flat-hover);
3508        background: none;
3509        color: $error_color;
3510      }
3511      &:insensitive {
3512        @include button(flat-insensitive);
3513        background: none;
3514        color: gtkalpha($error_color, 0.4);
3515      }
3516    }
3517    &:last-child { // '+' button
3518      &:hover {
3519        @include button(flat-hover);
3520        background: none;
3521        color: $success_color;
3522      }
3523      &:insensitive {
3524        @include button(flat-insensitive);
3525        background: none;
3526        color: gtkalpha($success_color, 0.4);
3527      }
3528    }
3529  }
3530}
3531
3532GtkScaleButton.button,
3533GtkVolumeButton.button {
3534  // I assume both are image-button *by default*
3535  // with the image-button/text-button classes automagically applied
3536  // depending on the button child these selectors can be deleted.
3537  @extend %image_button;
3538  @extend .button.flat;
3539  border-radius: 100px;
3540  outline-radius: 100px;
3541
3542  &.text-button {
3543    border-radius: 2px;
3544    outline-radius: 2px;
3545  }
3546}
3547
3548.floating-bar {
3549  @extend %osd;
3550  padding: 0.1em 0 0.2em;
3551  border: 1px solid transparent;
3552  border-radius: 0;
3553  color: $inverted_secondary_fg_color;
3554  background-color: $inverted_dark_color;
3555  transition: none;
3556
3557  .button {
3558    padding: 0.3em;
3559    margin: 0 0.3em;
3560    color: $secondary_accent_color;
3561    &:hover,
3562    &:active,
3563    &:checked { color: $accent_color; }
3564    &:insensitive { color: gtkopacity($accent_color, 0.4); }
3565  }
3566}
3567
3568.floating-bar.bottom {
3569  &.left { // axes left border and border radius
3570    border-width: 1px 1px 0 0;
3571    border-radius: 0 2px + 1px 0 0;
3572  }
3573
3574  &.right { // axes right border and border radius
3575    border-width: 1px 0 0 1px;
3576    border-radius: 2px + 1px 0 0 0;
3577  }
3578}
3579
3580
3581/**********************
3582 * Window Decorations *
3583 *********************/
3584
3585.window-frame {
3586  transition: none;
3587  border-radius: 2px 2px 0 0;
3588  box-shadow: $z-depth-4;
3589
3590  // FIXME: rationalize window-frame shadows
3591
3592  // this is used for the resize cursor area
3593  margin: 8px;
3594
3595  &:backdrop { box-shadow: $z-depth-2; }
3596
3597  &.maximized,
3598  &.tiled {
3599    border-radius: 0;
3600    transition: none;
3601
3602    &.ssd .titlebar { box-shadow: none; }
3603  }
3604
3605  &.popup { box-shadow: none; }
3606
3607  // server-side decorations as used by mutter
3608  &.ssd {
3609    // just doing borders, wm draws actual shadows
3610    // otherwise incorrect shadows are appeared
3611    box-shadow: 0 0 0 1px transparent;
3612
3613    .titlebar {
3614      // revive top-edge highlight border
3615      box-shadow: inset 0 1px $highlight_color;
3616    }
3617
3618    .tiled .titlebar {
3619      @extend %tiled_integration;
3620      transition: none;
3621    }
3622    .maximized .titlebar {
3623      @extend %maxd_integration;
3624      transition: none;
3625    }
3626  }
3627
3628  &.csd {
3629    &.popup {
3630      border-radius: 2px;
3631      box-shadow: $z-depth-3;
3632    }
3633    &.tooltip {
3634      border-radius: 2px;
3635      box-shadow: $z-depth-2;
3636    }
3637    &.message-dialog {
3638      border-radius: 2px;
3639      box-shadow: $z-depth-4;
3640      &:backdrop { box-shadow: $z-depth-2; }
3641    }
3642  }
3643
3644  &.solid-csd {
3645    border-radius: 2px 2px 0 0;
3646    margin: -1px;
3647    background-color: $bg_color;
3648    border: none;
3649    box-shadow: none;
3650  }
3651}
3652
3653// Window manager buttons
3654.csd .header-bar,
3655.csd .titlebar {
3656  & .button.titlebutton,
3657  &.selection-mode .button.titlebutton {
3658    @extend %image_button;
3659
3660    &.close,
3661    &.minimize,
3662    &.maximize {
3663      &:hover:backdrop,
3664      &:active:backdrop { opacity: 1.0; }
3665
3666      > GtkImage {
3667        color: transparent;
3668        background-size: 16px 16px;
3669        background-repeat: no-repeat;
3670        background-position: center;
3671      }
3672    }
3673
3674    // raised 'Close' button
3675    &.close {
3676      > GtkImage {
3677        background-image: -gtk-scaled(url("assets/window-close.png"),
3678                                      url("assets/window-close@2.png"));
3679      }
3680
3681      &:hover {
3682        @include button(hover);
3683        color: $selected_fg_color;
3684        background-color: $destructive_color;
3685
3686        > GtkImage {
3687          background-image: -gtk-scaled(url("assets/window-close-active.png"),
3688                                        url("assets/window-close-active@2.png"));
3689        }
3690      }
3691      &:active {
3692        @include button(active);
3693        color: $selected_fg_color;
3694        background-color: $selected_bg_color;
3695
3696        > GtkImage {
3697          background-image: -gtk-scaled(url("assets/window-close-active.png"),
3698                                        url("assets/window-close-active@2.png"));
3699        }
3700      }
3701    }
3702
3703    &.minimize {
3704      > GtkImage {
3705        background-image: -gtk-scaled(url("assets/window-minimize.png"),
3706                                      url("assets/window-minimize@2.png"));
3707      }
3708
3709      &:hover,
3710      &:active {
3711        > GtkImage {
3712          background-image: -gtk-scaled(url("assets/window-minimize-active.png"),
3713                                        url("assets/window-minimize-active@2.png"));
3714        }
3715      }
3716    }
3717
3718    &.maximize {
3719      > GtkImage {
3720        background-image: -gtk-scaled(url("assets/window-maximize.png"),
3721                                      url("assets/window-maximize@2.png"));
3722      }
3723
3724      &:hover,
3725      &:active {
3726        > GtkImage {
3727          background-image: -gtk-scaled(url("assets/window-maximize-active.png"),
3728                                        url("assets/window-maximize-active@2.png"));
3729        }
3730      }
3731    }
3732  }
3733}
3734
3735.maximized.csd .header-bar,
3736.maximized.csd .titlebar {
3737  .button.titlebutton,
3738  &.selection-mode .button.titlebutton {
3739    &.maximize {
3740      > GtkImage {
3741        background-image: -gtk-scaled(url("assets/window-unmaximize.png"),
3742                                      url("assets/window-unmaximize@2.png"));
3743      }
3744
3745      &:hover,
3746      &:active {
3747        > GtkImage {
3748          background-image: -gtk-scaled(url("assets/window-unmaximize-active.png"),
3749                                        url("assets/window-unmaximize-active@2.png"));
3750        }
3751      }
3752    }
3753  }
3754}
3755
3756// specific button styling for SSDs
3757.ssd .titlebar {
3758  .button.titlebutton {
3759    padding: 6px;
3760
3761    &.close,
3762    &.minimize,
3763    &.maximize { // reset styling
3764      color: transparent;
3765      background-size: 28px 28px;
3766      background-repeat: no-repeat;
3767      background-position: center;
3768      background: none;
3769      box-shadow: none;
3770      &:backdrop,
3771      &:hover:backdrop,
3772      &:active:backdrop { color: transparent; }
3773    }
3774
3775    @each $_class,
3776          $_state,
3777          $_shadow in ('', '', none),
3778                      (':hover', '-hover', $z-depth-2),
3779                      (':active', '-active', $z-depth-2),
3780                      (':backdrop', '-backdrop', none),
3781                      (':backdrop:hover', '-backdrop-hover', $z-depth-2),
3782                      (':backdrop:active', '-backdrop-active', $z-depth-2) {
3783      &.close#{$_class} {
3784        background-image: -gtk-scaled(
3785                          url("assets/window-close-ssd#{$_state}.png"),
3786                          url("assets/window-close-ssd#{$_state}@2.png"));
3787        box-shadow: #{$_shadow};
3788      }
3789    }
3790
3791    @each $_class, $_state in ('', ''),
3792                              (':hover', '-hover'),
3793                              (':active', '-active'),
3794                              (':backdrop', '-backdrop'),
3795                              (':backdrop:hover', '-backdrop-hover'),
3796                              (':backdrop:active', '-backdrop-active') {
3797      &.minimize#{$_class} {
3798        background-image: -gtk-scaled(
3799                          url("assets/window-minimize-ssd#{$_state}.png"),
3800                          url("assets/window-minimize-ssd#{$_state}@2.png"));
3801      }
3802    }
3803
3804    @each $_class, $_state in ('', ''),
3805                              (':hover', '-hover'),
3806                              (':active', '-active'),
3807                              (':backdrop', '-backdrop'),
3808                              (':backdrop:hover', '-backdrop-hover'),
3809                              (':backdrop:active', '-backdrop-active') {
3810      &.maximize#{$_class} {
3811        background-image: -gtk-scaled(
3812                          url("assets/window-maximize-ssd#{$_state}.png"),
3813                          url("assets/window-maximize-ssd#{$_state}@2.png"));
3814      }
3815    }
3816  }
3817}
3818
3819.maximized.ssd .titlebar {
3820  .button.titlebutton {
3821    @each $_class, $_state in ('', ''),
3822                              (':hover', '-hover'),
3823                              (':active', '-active'),
3824                              (':backdrop', '-backdrop'),
3825                              (':backdrop:hover', '-backdrop-hover'),
3826                              (':backdrop:active', '-backdrop-active') {
3827      &.maximize#{$_class} {
3828        background-image: -gtk-scaled(
3829                          url("assets/window-unmaximize-ssd#{$_state}.png"),
3830                          url("assets/window-unmaximize-ssd#{$_state}@2.png"));
3831      }
3832    }
3833  }
3834}
3835
3836// catch all extend :)
3837
3838%selected_items {
3839  background-color: $selected_bg_color;
3840  color: $selected_fg_color;
3841  &:insensitive { color: $insensitive_selected_fg_color; }
3842  &:backdrop {
3843    &:insensitive { color: $insensitive_selected_fg_color; }
3844  }
3845}
3846
3847.monospace {
3848  font-family: Monospace;
3849}
3850
3851
3852/**********************
3853 * Touch Copy & Paste *
3854 *********************/
3855
3856// touch selection handlebars for the Popover.osd above
3857.entry.cursor-handle,
3858.cursor-handle {
3859  border-style: none;
3860  background-color: $accent_color;
3861  background-image: none;
3862  box-shadow: none;
3863
3864  @each $s,$as in ('',''),
3865                  (':hover','-hover'),
3866                  (':active','-active') {
3867                    // no need for insensitive and backdrop
3868                    &.top#{$s}:dir(ltr),
3869                    &.bottom#{$s}:dir(rtl) {
3870                      $_url: 'assets/text-select-start#{$as}#{$asset_suffix}';
3871                      -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3872                                        url('#{$_url}@2.png'));
3873                      padding-left: 0.8em;
3874                    }
3875                    &.bottom#{$s}:dir(ltr),
3876                    &.top#{$s}:dir(rtl) {
3877                      $_url: 'assets/text-select-end#{$as}#{$asset_suffix}';
3878                      -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3879                                        url('#{$_url}@2.png'));
3880                      padding-right: 0.8em;
3881                    }
3882                    &.insertion-cursor#{$s}:dir(ltr),
3883                    &.insertion-cursor#{$s}:dir(rtl) {
3884                      $_url: 'assets/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}';
3885                      -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
3886                                        url('#{$_url}@2.png'));
3887     }
3888  }
3889}
3890
3891// Decouple the font of context menus from their entry/textview
3892.context-menu { font: initial; }
3893
3894.touch-selection {
3895  font: initial;
3896  color: $fg_color;
3897  background-color: $base_color;
3898  box-shadow: $z-depth-2;
3899  &:backdrop { box-shadow: $z-depth-1; }
3900
3901  .button {
3902  }
3903}
3904
3905// This is used by GtkScrolledWindow, when content is touch-dragged past
3906// boundaries. This draws a box on top of the content, the size changes
3907// programmatically.
3908.overshoot {
3909  &.top { @include overshoot(top); }
3910  &.bottom { @include overshoot(bottom); }
3911  &.left { @include overshoot(left); }
3912  &.right { @include overshoot(right); }
3913}
3914
3915// Overflow indication, works similarly to the overshoot,
3916// the size if fixed tho.
3917.undershoot {
3918  &.top { @include undershoot(top, $base_color); }
3919  &.bottom { @include undershoot(bottom, $base_color); }
3920  &.left { @include undershoot(left, $base_color); }
3921  &.right { @include undershoot(right, $base_color); }
3922
3923  GtkBox > GtkScrlledWindow & {
3924    &.top { @include undershoot(top, $bg_color); }
3925    &.bottom { @include undershoot(bottom, $bg_color); }
3926    &.left { @include undershoot(left, $bg_color); }
3927    &.right { @include undershoot(right, $bg_color); }
3928  }
3929
3930  .sidebar & {
3931    &.top { @include undershoot(top, $secondary_dark_color); }
3932    &.bottom { @include undershoot(bottom, $secondary_dark_color); }
3933    &.left { @include undershoot(left, $secondary_dark_color); }
3934    &.right { @include undershoot(right, $secondary_dark_color); }
3935  }
3936}
3937