all repos — dotfiles @ 9f75d2d58fd38724d41485cf8f17fb6a84fac143

my *nix dotfiles

themes/whitey/gtk-3.22/_common.scss (view raw)

   1//
   2// Suffix
   3//
   4
   5$asset_suffix: if($variant == 'dark', '-dark', '');
   6
   7
   8//
   9// Background sizing
  10//
  11
  12$text_button_large: rem(213px) * 1 / 0.8 rem(213px) * 1 / 0.8, auto;
  13$text_button_small: rem(106px) * 1 / 0.8 rem(106px) * 1 / 0.8, auto;
  14$image_button_large: rem(40px) * 1 / 0.8 rem(40px) * 1 / 0.8, auto;
  15$image_button_small: rem(26px) * 1 / 0.8 rem(26px) * 1 / 0.8, auto;
  16$attention: rem(5.3px) rem(5.3px);
  17$scale: 80%;
  18$separator_narrow: 1px 1px;
  19$separator_wide: 1px 1px, 1px 1px;
  20
  21
  22//
  23// transitions
  24//
  25
  26%transition {
  27  // do not include sizing factors and text colors/shadows
  28  transition-property: opacity,
  29                       border-color,
  30                       border-image,
  31                       background-color,
  32                       background-image,
  33                       box-shadow,
  34                       icon-shadow;
  35  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  36  transition-duration: 0.2s;
  37}
  38
  39
  40/*****************
  41 * Common States *
  42 *****************/
  43
  44* {
  45  @extend %transition; // global transition setting
  46
  47  padding: 0;
  48  background-clip: padding-box;
  49
  50  -GtkToolButton-icon-spacing: 4;
  51  -GtkTextView-error-underline-color: $error_color;
  52
  53  // The size for scrollbars. The slider is 2px smaller, but we keep it
  54  // up so that the whole area is sensitive to button presses for the
  55  // slider. The stepper button is larger in both directions, the slider
  56  // only in the width
  57
  58  -GtkScrolledWindow-scrollbar-spacing: 0;
  59
  60  -GtkToolItemGroup-expander-size: 11;
  61
  62  -GtkWidget-text-handle-width: 16;
  63  -GtkWidget-text-handle-height: 16;
  64
  65  -GtkDialog-button-spacing: 4;
  66  -GtkDialog-action-area-border: 0;
  67
  68  // We use the outline properties to signal the focus properties
  69  // to the adwaita engine: using real CSS properties is faster,
  70  // and we don't use any outlines for now.
  71
  72  outline-style: solid;
  73  outline-width: 2px;
  74  outline-color: $track_color;
  75  outline-offset: rem(-4px);
  76  -gtk-outline-radius: 2px;
  77
  78  -gtk-secondary-caret-color: $selected_bg_color;
  79
  80  // disable drop-shadows as default
  81  text-shadow: none;
  82  -gtk-icon-shadow: none;
  83}
  84
  85
  86/***************
  87 * Base States *
  88 ***************/
  89
  90.background {
  91  background-color: $bg_color;
  92  color: $fg_color;
  93}
  94
  95// These wildcard seems unavoidable, need to investigate.
  96// Wildcards are bad and troublesome, use them with care,
  97// or better, just don't.
  98// Everytime a wildcard is used a kitten dies, painfully.
  99
 100*:disabled { -gtk-icon-effect: dim; }
 101
 102// for backdrop, tone down element surfaces with transparentize
 103%fade_effect {
 104  *:backdrop {
 105    opacity: 0.75;
 106    transition: 0.2s;
 107  }
 108}
 109
 110.gtkstyle-fallback {
 111  background-color: $bg_color;
 112  color: $fg_color;
 113  &:hover {
 114    background-color: darken($bg_color, 5%);
 115    color: $fg_color;
 116  }
 117  &:active {
 118    background-color: darken($bg_color, 10%);
 119    color: $fg_color;
 120  }
 121  &:disabled {
 122    background-color: $bg_color;
 123    color: $insensitive_fg_color;
 124  }
 125  &:selected {
 126    background-color: $selected_bg_color;
 127    color: $selected_fg_color;
 128  }
 129}
 130
 131.view,
 132%view {
 133  @extend row.activatable;
 134  background-color: $base_color;
 135  color: $fg_color;
 136  &:hover,
 137  &:active,
 138  &:selected {
 139    border-radius: 2px;
 140    -gtk-outline-radius: 2px;
 141  }
 142  &:disabled { color: $insensitive_fg_color; }
 143  &:backdrop {
 144  }
 145  &:selected,
 146  &:selected:focus { @extend %selected_items; }
 147}
 148
 149.view,
 150textview {
 151  text {
 152    @extend %view;
 153
 154    selection {
 155      &, &:focus { @extend %selected_items; }
 156    }
 157  }
 158}
 159
 160textview border {
 161  background-color: $bg_color;
 162}
 163
 164iconview { @extend .view; }
 165
 166rubberband {
 167  border: 1px solid $secondary_selected_bg_color;
 168  background-color: gtkopacity($secondary_selected_bg_color, 0.2);
 169}
 170
 171flowbox {
 172  rubberband { @extend rubberband; }
 173
 174  flowboxchild {
 175    padding: rem(2px);
 176    border-radius: 2px;
 177    -gtk-outline-radius: 2px;
 178    &:selected {
 179      @extend %selected_items;
 180      outline-offset: rem(-2px);
 181    }
 182  }
 183}
 184
 185label {
 186  caret-color: currentColor; // this shouldn't be needed.
 187
 188  &.separator {
 189    @extend .dim-label;
 190    color: transparent;
 191  }
 192
 193  &:selected,
 194  row:selected & { @extend %nobg_selected_items; }
 195
 196  selection,
 197  selection:focus { @extend %selected_items; }
 198
 199  &:disabled {
 200    color: $insensitive_fg_color;
 201
 202    selection { @extend %selected_items:disabled; }
 203  }
 204
 205  // always use dark foreground in Gnome-Software
 206  &.kudo-label {
 207    color: $fixed_fg_color;
 208  }
 209}
 210
 211.dim-label {
 212  opacity: 0.55;
 213}
 214
 215assistant {
 216  // sidebar styling
 217  .sidebar {
 218    padding: rem(6.7px) 0;
 219    background-color: $secondary_dark_color;
 220    &:dir(ltr) { border-right: 1px solid $borders_color; }
 221    &:dir(rtl) { border-left: 1px solid $borders_color; }
 222  }
 223
 224  &.csd .sidebar { border-top-style: none; }
 225
 226  .sidebar label {
 227    padding: rem(5.3px) rem(8px) rem(6.7px);
 228    color: $secondary_fg_color;
 229    font-weight: 500;
 230    &.highlight { color: $selected_bg_color; }
 231  }
 232
 233  // header-bar styling
 234  headerbar {
 235    // apply suggested-action button for "Next" and "Back"
 236    // last -> "cancel", nth -> "Next" and "Back", that's weird.
 237    button.flat:not(:last-child) {
 238      @include button(normal);
 239      background-color: $suggested_color;
 240      color: $secondary_selected_fg_color;
 241      &:hover {
 242        @include button(hover);
 243        color: $selected_fg_color;
 244      }
 245      &:active {
 246        @include button(active);
 247        color: $selected_fg_color;
 248        background-color: $selected_bg_color;
 249      }
 250      &:checked {
 251        @include button(checked);
 252        background-color: $suggested_color;
 253        color: $inverted_fg_color;
 254      }
 255      &:disabled { @include button(insensitive); }
 256    }
 257  }
 258}
 259
 260// button box is always shown with flat-buttons
 261buttonbox {
 262  &, &.dialog-action-area {
 263    button {
 264      @include button(flat-normal);
 265      color: $secondary_accent_color;
 266      font-weight: 700;
 267      &:hover {
 268        @include button(flat-hover);
 269        color: $accent_color;
 270      }
 271      &:active {
 272        @include button(flat-active);
 273        color: $accent_color;
 274      }
 275      &:disabled { @include button(flat-insensitive); }
 276      &:checked {
 277        @include button(flat-checked);
 278        color: $accent_color;
 279      }
 280      &:checked:disabled {
 281        @include button(flat-checked-insensitive);
 282        color: gtkopacity($accent_color, 0.4);
 283      }
 284    }
 285  }
 286}
 287
 288%osd, .osd { opacity: 0.9; }
 289
 290
 291/*********************
 292 * Spinner Animation *
 293 *********************/
 294
 295@keyframes colorful_bar {
 296  0% {
 297    -gtk-icon-source: url("assets/bar-red.svg");
 298    -gtk-icon-transform: scale(0, 1.0);
 299  }
 300  24.9% {
 301    -gtk-icon-source: url("assets/bar-red.svg");
 302    -gtk-icon-transform: scale(1.0, 1.0);
 303  }
 304  25% {
 305    -gtk-icon-source: url("assets/bar-yellow.svg");
 306    -gtk-icon-transform: scale(1.0, 1.0);
 307  }
 308  49.9% {
 309    -gtk-icon-source: url("assets/bar-yellow.svg");
 310    -gtk-icon-transform: scale(0, 1.0);
 311  }
 312  50% {
 313    -gtk-icon-source: url("assets/bar-green.svg");
 314    -gtk-icon-transform: scale(0, 1.0);
 315  }
 316  74.9% {
 317    -gtk-icon-source: url("assets/bar-green.svg");
 318    -gtk-icon-transform: scale(1.0, 1.0);
 319  }
 320  75% {
 321    -gtk-icon-source: url("assets/bar-blue.svg");
 322    -gtk-icon-transform: scale(1.0, 1.0);
 323  }
 324  99.9% {
 325    -gtk-icon-source: url("assets/bar-blue.svg");
 326    -gtk-icon-transform: scale(0, 1.0);
 327  }
 328  100% {
 329    -gtk-icon-source: url("assets/bar-red.svg");
 330    -gtk-icon-transform: scale(0, 1.0);
 331  }
 332}
 333
 334spinner {
 335  min-height: rem(16px);
 336  min-width: rem(16px);
 337  // FIXME: workaround for 3.20.1. Needs vertical padding more than 4px?
 338  padding: rem(5.3px) 0 rem(5.3px);
 339  margin: 0;
 340  background: none;
 341  opacity: 0; // non spinning spinner makes no sense
 342  -gtk-icon-source: url("assets/bar-red.svg");
 343  &:checked {
 344    opacity: 1.0;
 345    animation: colorful_bar 2s linear infinite;
 346    &:disabled { opacity: 0.4; }
 347    &:backdrop { opacity: 1.0; }
 348  }
 349  &:backdrop { opacity: 0; }
 350}
 351
 352
 353/****************
 354 * Text Entries *
 355 ****************/
 356
 357entry {
 358  min-height: rem(13.3px);
 359  min-width: rem(33.3px);
 360  padding: rem(9.3px) rem(8px) rem(10.7px);
 361  @include entry(normal);
 362
 363  &:focus { @include entry(focus); }
 364  &:disabled { @include entry(insensitive); }
 365
 366  &.flat {
 367    border-radius: 0;
 368    @include entry(flat-normal);
 369    &:focus { @include entry(flat-focus); }
 370    &:disabled { @include entry(flat-insensitive); }
 371  }
 372
 373  selection {
 374    &, &:focus { @extend %selected_items; }
 375  }
 376
 377  image { // icons inside the entry
 378    padding-left: rem(4px);
 379    padding-right: rem(4px);
 380  }
 381
 382  progress { @extend %entry_progressbar; }
 383
 384  .linked > &:not(.flat),
 385  .linked.vertical > &:not(.flat) {
 386    @extend entry.flat;
 387    border-radius: 0;
 388    -gtk-outline-radius: 0;
 389  }
 390
 391  // entry error, warning and missing style
 392  @each $e_type, $e_color in (error, $error_color),
 393                             (warning, $warning_color),
 394                             (search-missing, $error_color) {
 395    &.#{$e_type} {
 396      @include entry(normal, $e_color);
 397      &:focus { @include entry(focus, $e_color); }
 398      &:disabled { @include entry(insensitive, $e_color); }
 399      &.flat {
 400        @include entry(flat-normal, $e_color);
 401        &:focus { @include entry(flat-focus, $e_color); }
 402        &:disabled { @include entry(flat-insensitive, $e_color); }
 403      }
 404    }
 405  }
 406
 407  & image { // entry icons colors
 408    &:not(:hover):not(:active) { color: gtkalpha(currentColor, 0.75); }
 409    &:active { color: $selected_bg_color; }
 410    &:disabled { color: gtkalpha(currentColor, 0.55); }
 411  }
 412
 413  &:drop(active) {
 414    &, &:focus {
 415      border-color: $drop_target_color;
 416      box-shadow: inset 0 0 0 1px $drop_target_color;
 417    }
 418  }
 419
 420  treeview & { // reset styling inside tree-view
 421    &, &.flat:focus {
 422      padding: 1px;
 423      border-radius: 0;
 424      border-image: none;
 425      background-color: $base_color;
 426      color: $fg_color;
 427      box-shadow: none;
 428      transition-property: color,
 429                           background;
 430
 431      &:selected { @extend %selected_items; }
 432    }
 433  }
 434
 435  .osd & {
 436  }
 437}
 438
 439
 440/***********
 441 * Buttons *
 442 ***********/
 443
 444// stuff for .needs-attention
 445@keyframes needs_attention {
 446  from {
 447    background-image: -gtk-gradient(radial,
 448                                    center center, 0,
 449                                    center center, 0.001,
 450                                    to($selected_bg_color),
 451                                    to(transparent));
 452  }
 453  to {
 454    background-image: -gtk-gradient(radial,
 455                                    center center, 0,
 456                                    center center, 0.5,
 457                                    to($selected_bg_color),
 458                                    to(transparent));
 459  }
 460}
 461
 462button {
 463  min-height: rem(13.3px);
 464  min-width: rem(33.3px);
 465  padding: rem(9.3px) rem(13.3px) rem(10.7px);
 466  border-radius: 2px;
 467  -gtk-outline-radius: 2px;
 468  background-repeat: no-repeat;
 469  background-position: center, center;
 470  background-size: $text_button_small;
 471  font-weight: 500;
 472  @include button(normal);
 473  &:hover { @include button(hover); }
 474  &:active { @include button(active); }
 475  &:disabled { @include button(insensitive); }
 476  &:checked { @include button(checked); }
 477  &:checked:disabled { @include button(checked-insensitive); }
 478  &.flat {
 479    @include button(flat-normal);
 480    &:hover { @include button(flat-hover); }
 481    &:active { @include button(flat-active); }
 482    &:disabled { @include button(flat-insensitive); }
 483    &:checked { @include button(flat-checked); }
 484    &:checked:disabled { @include button(flat-checked-insensitive); }
 485    .linked > & {
 486      border-radius: 2px;
 487      -gtk-outline-radius: 2px;
 488      &.image-button {
 489        border-radius: 100px;
 490        -gtk-outline-radius: 100px;
 491      }
 492    }
 493  }
 494
 495  // big standalone buttons like in Documents pager
 496  &.osd {
 497    &.image-button {
 498      @extend button.flat;
 499      @extend %image_button;
 500      padding: rem(17.3px);
 501      background-color: $inverted_dark_color;
 502      background-size: $image_button_large;
 503      &:not(:active):not(:disabled):not(hover) {
 504        color: $secondary_accent_color;
 505      }
 506      &:hover {
 507        color: $accent_color;
 508        background-color: gtkopacity($inverted_dark_color, 0.7);
 509        background-image: linear-gradient(to bottom, $track_color, $track_color);
 510      }
 511      &:active {
 512        color: $accent_color;
 513        background-color: gtkopacity($inverted_dark_color, 0.7);
 514        background-image: linear-gradient(to bottom, $accent_fill_color, $accent_fill_color);
 515      }
 516    }
 517    &:disabled { opacity: 0; }
 518  }
 519
 520  // overlay / OSD style
 521  .osd & {
 522  }
 523
 524  // Suggested and Destructive Action buttons
 525  @each $b_type, $b_color in (suggested-action, $suggested_color),
 526                             (destructive-action, $destructive_color) {
 527    &.#{$b_type} {
 528      background-color: $b_color;
 529      background-size: $text_button_small;
 530      color: $selected_fg_color;
 531      &:hover {
 532        @include button(hover);
 533        background-color: $b_color;
 534        color: $selected_fg_color;
 535      }
 536      &:active {
 537        @include button(active);
 538        background-color: $selected_bg_color;
 539        color: $selected_fg_color;
 540      }
 541      &:checked { background-color: mix($selected_fg_color, $b_color, 20%); }
 542      &:disabled {
 543        @include button(insensitive, $b_color,
 544                                     $insensitive_selected_fg_color);
 545      }
 546      &.flat {
 547        background-color: transparent;
 548        color: $b_color;
 549        &:hover { @include button(flat-hover, $track_color, $b_color); }
 550        &:active {
 551          @include button(flat-active);
 552          background-color: gtkalpha($selected_bg_color, 0.2);
 553          color: $selected_bg_color;
 554        }
 555        &:checked { @include button(flat-checked, $b_color, $selected_fg_color); }
 556        &:disabled {
 557          @include button(flat-insensitive, $b_color,
 558                                            $insensitive_selected_fg_color);
 559        }
 560      }
 561    }
 562  }
 563
 564  &.image-button {
 565    @extend %image_button;
 566    min-width: rem(13.3px);
 567    min-height: rem(13.3px);
 568  }
 569
 570  &.text-button {
 571    padding: rem(9.3px) rem(13.3px) rem(10.7px);
 572    border-radius: 2px;
 573    -gtk-outline-radius: 2px;
 574    font-weight: 700;
 575  }
 576
 577  &.text-button.image-button {
 578    // those buttons needs uneven horizontal padding, we want the icon side
 579    // to have the image-button padding, while the text side the text-button
 580    // one, so we're adding the missing padding to the label depending on
 581    // its position inside the button
 582    padding-left: rem(13.3px);
 583    padding-right: rem(13.3px);
 584    border-radius: 2px;
 585    -gtk-outline-radius: 2px;
 586
 587    label {
 588      padding-left: rem(4px);
 589      padding-right: rem(4px);
 590    }
 591
 592    image {
 593      padding-left: rem(4px);
 594      padding-right: rem(4px);
 595    }
 596
 597    &:drop(active) {
 598      color: $drop_target_color;
 599      background-color: $drop_target_fill_color;
 600    }
 601  }
 602
 603  separator { // remove vertical separator
 604    @extend separator.wide;
 605    min-height: 0;
 606    min-width: 0;
 607    border-color: transparent;
 608    background-color: transparent;
 609    color: transparent;
 610  }
 611
 612  stackswitcher & { // do not shrink buton width
 613    &.text-button {
 614      min-height: rem(17.3px);
 615      min-width: rem(112px);
 616    }
 617  }
 618
 619  .stack-switcher > & {
 620    // to position the needs attention dot, padding is added to the button
 621    // child, a label needs just lateral padding while an icon needs vertical
 622    // padding added too.
 623
 624    outline-offset: rem(-2.6px); // needs to be set or it gets overriden
 625                                 // by GtkRadioButton outline-offset
 626
 627    > label {
 628      padding-left: rem(8px);  // label padding
 629      padding-right: rem(8px); //
 630    }
 631
 632    > image {
 633      padding-left: rem(8px);     // image padding
 634      padding-right: rem(8px);    //
 635      padding-top: rem(2.7px);    //
 636      padding-bottom: rem(2.7px); //
 637    }
 638
 639    &.text-button {
 640      // compensate text-button paddings
 641      padding-left: rem(13.3px);
 642      padding-right: rem(13.3px);
 643      border-radius: 2px;
 644      -gtk-outline-radius: 2px;
 645    }
 646
 647    &.image-button {
 648      // we want image buttons to have a 1:1 aspect ratio, so compensation
 649      // of the padding added to the image is needed
 650      padding-left: rem(8px);
 651      padding-right: rem(8px);
 652    }
 653
 654    &.needs-attention > label,
 655    &.needs-attention > image { @extend %needs_attention; }
 656    &.needs-attention:active > label,
 657    &.needs-attention:active > image,
 658    &.needs-attention:checked > label,
 659    &.needs-attention:checked > image {
 660      animation: none;
 661      background-image: none;
 662    }
 663  }
 664
 665  // mimic tab-switcher-like button array
 666  // horizontal array
 667  .linked > &:not(.flat):not(:only-child) { @extend %linked_middle; }
 668  .linked > &,
 669  .linked > & .image-button,
 670  .linked > & .text-button {
 671    @extend %linked_middle;
 672    @extend %button_array;
 673    min-width: rem(13.3px);
 674    padding: rem(9.3px) rem(5.3px) rem(10.7px);
 675
 676    label {
 677      padding-left: rem(4px);
 678      padding-right: rem(4px);
 679    }
 680
 681    image {
 682      padding-left: rem(4px);
 683      padding-right: rem(4px);
 684    }
 685  }
 686  // vertical array
 687  .linked.vertical > &:not(:only-child) { @extend %linked_vertical_middle; }
 688  .linked.vertical > &,
 689  .linked.vertical > & .image-button,
 690  .linked.vertical > & .text-button {
 691    @extend %linked_vertical_middle;
 692    @extend %button_vertical_array;
 693    min-height: rem(13.3px);
 694    min-width: rem(22.6px);
 695    padding: rem(10px) rem(6.7px) rem(10px);
 696  }
 697
 698  // generic switcher image buttons
 699  .linked > &.image-button.radio,
 700  .linked.vertical > &.image-button.radio {
 701      min-width: rem(13.3px);
 702      min-height: rem(13.3px);
 703      padding: rem(8px);
 704  }
 705
 706  // inline-toolbar and action-bar buttons
 707  .inline-toolbar &,
 708  actionbar {
 709    &, &:not(.text-button).image-button {
 710      @include button(flat-normal);
 711      min-width: rem(13.3px);
 712      min-height: rem(13.3px);
 713      padding: rem(10px);
 714      border-radius: 100px;
 715      -gtk-outline-radius: 100px;
 716      background-size: $image_button_small;
 717      &:hover { @include button(flat-hover); }
 718      &:active { @include button(flat-active); }
 719      &:disabled { @include button(flat-insensitive); }
 720      &:checked { @include button(flat-checked); }
 721      &:checked:disabled { @include button(flat-checked-insensitive); }
 722    }
 723    &.text-button {
 724      border-radius: 2px;
 725      -gtk-outline-radius: 2px;
 726    }
 727  }
 728  .inline-toolbar .linked > &,
 729  actionbar .linked > & {
 730    &, &:not(.text-button).image-button {
 731      min-width: rem(13.3px);
 732      min-height: rem(13.3px);
 733      padding: rem(6.7px);
 734      border-radius: 100px;
 735      -gtk-outline-radius: 100px;
 736    }
 737    &.image-button.toggle {
 738      min-width: rem(13.3px);
 739      min-height: rem(13.3px);
 740      padding: rem(8px) rem(4px) rem(8px);
 741      border-radius: 100px;
 742      -gtk-outline-radius: 100px;
 743    }
 744    &.text-button {
 745      border-radius: 2px;
 746      -gtk-outline-radius: 2px;
 747    }
 748  }
 749
 750  .primary-toolbar & { -gtk-icon-shadow: none; } // tango icons don't need shadows
 751}
 752
 753%button_array {
 754  @include button(flat-normal);
 755  border-radius: 0;
 756  -gtk-outline-radius: 0;
 757  color: $secondary_fg_color;
 758  border-image: -gtk-gradient(radial,
 759                              center bottom, 0,
 760                              center bottom, 0.5,
 761                              to($track_color),
 762                              to(transparent))
 763                              0 0 1 / 0 0 1px;
 764  &:hover {
 765    @include button(flat-hover);
 766    border-radius: 0;
 767    border-image: -gtk-gradient(radial,
 768                                center bottom, 0,
 769                                center bottom, 0.5,
 770                                to($track_color),
 771                                to(transparent))
 772                                0 0 2 / 0 0 2px;
 773  }
 774  &:active,
 775  &:checked {
 776    color: $fg_color;
 777    background-color: transparent;
 778    border-image: -gtk-gradient(radial,
 779                                center bottom, 0,
 780                                center bottom, 0.5,
 781                                to($selected_bg_color),
 782                                to(transparent))
 783                                0 0 2 / 0 0 2px;
 784    &:disabled {
 785      color: $insensitive_fg_color;
 786      background-color: transparent;
 787      border-image: -gtk-gradient(radial,
 788                                  center bottom, 0,
 789                                  center bottom, 0.5,
 790                                  to(gtkopacity($selected_bg_color, 0.2)),
 791                                  to(transparent))
 792                                  0 0 2 / 0 0 2px;
 793      > label { color: inherit; }
 794    }
 795  }
 796  &:disabled {
 797    color: $insensitive_fg_color;
 798    background-color: transparent;
 799    border-image: -gtk-gradient(radial,
 800                                center bottom, 0,
 801                                center bottom, 0.5,
 802                                to($track_color),
 803                                to(transparent))
 804                                0 0 1 / 0 0 1px;
 805  }
 806}
 807
 808%button_vertical_array {
 809  @include button(flat-normal);
 810  border-image: none;
 811  border-width: 0;
 812  -gtk-outline-radius: 0;
 813  color: $secondary_fg_color;
 814  &:dir(ltr) { box-shadow: inset 1px 0 $track_color; }
 815  &:dir(rtl) { box-shadow: inset -1px 0 $track_color; }
 816  &:hover {
 817    @include button(flat-hover);
 818    &:dir(ltr) { box-shadow: inset 2px 0 $track_color; }
 819    &:dir(rtl) { box-shadow: inset -2px 0 $track_color; }
 820  }
 821  &:active,
 822  &:checked {
 823    color: $fg_color;
 824    background-color: transparent;
 825    &:dir(ltr) { box-shadow: inset 2px 0 $selected_bg_color; }
 826    &:dir(rtl) { box-shadow: inset -2px 0 $selected_bg_color; }
 827    &:disabled {
 828      color: $insensitive_fg_color;
 829      background-color: $track_color;
 830      &:dir(ltr) { box-shadow: inset 2px 0 gtkopacity($selected_bg_color, 0.2); }
 831      &:dir(ltr) { box-shadow: inset -2px 0 gtkopacity($selected_bg_color, 0.2); }
 832      > label { color: inherit; }
 833    }
 834  }
 835  &:disabled {
 836    color: $insensitive_fg_color;
 837    background-color: $track_color;
 838    &:dir(ltr) { box-shadow: inset 1px 0 $track_color; }
 839    &:dir(rtl) { box-shadow: inset -1px 0 $track_color; }
 840  }
 841}
 842
 843%image_button {
 844  padding: rem(10px);
 845  border-radius: 100px;
 846  -gtk-outline-radius: 100px;
 847  background-size: $image_button_large;
 848}
 849
 850%needs_attention {
 851  transition: none;
 852  animation: needs_attention 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
 853  background-repeat: no-repeat;
 854  background-position: right rem(3px);
 855  background-size: $attention;
 856  &:dir(rtl) { background-position: left rem(3px); }
 857}
 858
 859// all the following is for the +|- buttons on inline toolbars, that way
 860// should really be deprecated...
 861toolbar.inline-toolbar toolbutton > button { // redefining the button look is
 862                                             // needed since those are flat...
 863}
 864
 865// More inline toolbar buttons
 866toolbar.inline-toolbar toolbutton {
 867  // & > button.flat { @extend %linked_middle; }
 868  // &:first-child > button.flat { @extend %linked:first-child; }
 869  // &:last-child > button.flat { @extend %linked:last-child; }
 870  // &:only-child > button.flat { @extend %linked:only-child; }
 871}
 872
 873%linked_middle { border-radius: 0; }
 874
 875%linked {
 876  -gtk-outline-radius: 2px;
 877  @extend %linked_middle;
 878  &:first-child {
 879    border-top-left-radius: 2px;
 880    border-bottom-left-radius: 2px;
 881  }
 882  &:last-child {
 883    border-top-right-radius: 2px;
 884    border-bottom-right-radius: 2px;
 885  }
 886  &:only-child { border-radius: 2px; }
 887}
 888
 889%linked_vertical_middle { border-radius: 0; }
 890
 891%linked_vertical{
 892  -gtk-outline-radius: 2px;
 893  @extend %linked_vertical_middle;
 894  &:first-child {
 895    border-top-left-radius: 2px;
 896    border-top-right-radius: 2px;
 897  }
 898  &:last-child {
 899    border-bottom-left-radius: 2px;
 900    border-bottom-right-radius: 2px;
 901  }
 902  &:only-child { border-radius: 2px; }
 903}
 904
 905// menu buttons on GtkPopover
 906modelbutton.flat,
 907menuitem button.flat {
 908  @include button(flat-normal);
 909  min-height: rem(26.6px);
 910  margin-left: rem(10px);
 911  margin-right: rem(10px);
 912  outline-offset: rem(-1px);
 913  background-size: $text_button_small;
 914  transition: none;
 915  &:hover { @include button(flat-hover); }
 916  &:active { @include button(flat-active); }
 917  &:disabled { @include button(flat-insensitive); }
 918  &:checked { @include button(flat-checked); }
 919  &:checked:disabled { @include button(flat-checked-insensitive); }
 920
 921  check,
 922  radio {
 923    &:first-child { margin-right: rem(13.3px); }
 924    &:last-child { margin-left: rem(13.3px); }
 925  }
 926}
 927
 928modelbutton.flat arrow {
 929  background: none;
 930  &:hover { background: none; }
 931  &.left { -gtk-icon-source: -gtk-icontheme("pan-start-symbolic"); }
 932  &.right { -gtk-icon-source: -gtk-icontheme("pan-end-symbolic"); }
 933}
 934
 935button.color {
 936  min-width: rem(33.3px);
 937  min-height: rem(20px);
 938  padding: rem(6.7px) rem(8px) rem(6.7px); // Uniform padding on the GtkColorButton
 939
 940  > colorswatch:first-child:last-child { // :first-child:last-child for
 941                                         // a specificity bump, it gets
 942                                         // overridden by the colorpicker style
 943    &, overlay {
 944      border-radius: 2px;
 945      -gtk-outline-radius: 2px;
 946    }
 947    box-shadow: $z-depth-1;
 948  }
 949
 950  &,
 951  GtkColorSwatch {
 952    &:disabled {
 953      box-shadow: none;
 954      opacity: 0.4;
 955    }
 956  }
 957}
 958
 959// toolpalette buttons
 960toolpalette {
 961  toolitemgroup {
 962    > button {
 963      border-top: 1px solid $borders_color;
 964      border-radius: 0;
 965    }
 966  }
 967
 968  toolbutton {
 969    > button.toggle { // use square buttons
 970      border-radius: 2px;
 971      -gtk-outline-radius: 2px;
 972    }
 973  }
 974}
 975
 976
 977/*********
 978 * Links *
 979 *********/
 980
 981*:link {
 982  color: $link_color;
 983  &:hover,
 984  &:active { color: $link_color; }
 985  &:visited {
 986    color: $link_visited_color;
 987    &:hover,
 988    &:active { color: $link_visited_color; }
 989    *:selected & { color: mix($selected_fg_color, $selected_bg_color, 60%); }
 990  }
 991  &:selected,
 992  *:selected & { color: mix($selected_fg_color, $selected_bg_color, 80%); }
 993  &:disabled { opacity: 0.4; }
 994}
 995
 996button:link,
 997button:visited {
 998  // FIXME: aggregate with buttons
 999  @extend *:link;
1000  & > label { text-decoration-line: underline; }
1001}
1002
1003
1004/*****************
1005 * GtkSpinButton *
1006 *****************/
1007
1008@keyframes spin_hover {
1009  from {
1010    background-image: -gtk-gradient(radial,
1011                                    center center, 0,
1012                                    center center, 0.01,
1013                                    to(gtkalpha(currentColor, 0)),
1014                                    to(transparent));
1015  }
1016  to {
1017    background-image: -gtk-gradient(radial,
1018                                    center center, 0,
1019                                    center center, 0.5,
1020                                    to(gtkalpha(currentColor, 0.1)),
1021                                    to(transparent));
1022  }
1023}
1024
1025@keyframes spin_active {
1026  from {
1027    background-image: -gtk-gradient(radial,
1028                                    center center, 0,
1029                                    center center, 0.5,
1030                                    to(gtkalpha(currentColor, 0.2)),
1031                                    to(transparent));
1032  }
1033  to {
1034    background-image: -gtk-gradient(radial,
1035                                    center center, 0,
1036                                    center center, 0.01,
1037                                    to(gtkalpha(currentColor, 0)),
1038                                    to(transparent));
1039  }
1040}
1041
1042spinbutton {
1043  &:not(.vertical) {
1044    // in this horizontal configuration, the whole spinbutton
1045    // behaves as the entry, so we extend the entry styling
1046    // and nuke the style on the internal entry
1047    @extend entry;
1048    padding: 0;
1049
1050    // FIXME: this should not be set at all, but otherwise it gets the wrong
1051    // color
1052    &:disabled { color: $insensitive_fg_color; }
1053
1054    entry {
1055      margin: 0;
1056      background: none;
1057      border: none;
1058      box-shadow: none;
1059    }
1060
1061    button {
1062      @include button(flat-normal);
1063      min-width: rem(13.3px);
1064      min-height: rem(13.3px);
1065      padding: 0 rem(7.3px) 0;
1066      border: solid rem(2.7px) transparent;
1067      border-radius: 100px;
1068      -gtk-outline-radius: 100px;
1069      background: none;
1070      background-size: contain;
1071      color: $secondary_fg_color;
1072      box-shadow: none;
1073      transition-property: opacity,
1074                           color,
1075                           background-color,
1076                           background-image,
1077                           box-shadow;
1078
1079      &:not(:last-child) { // '-' button
1080        &:hover {
1081          @include button(flat-hover);
1082          background: none;
1083          color: $error_color;
1084          animation: spin_hover 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
1085        }
1086        &:active {
1087          @include button(flat-active);
1088          background: none;
1089          color: $error_color;
1090          animation: spin_active 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
1091          transition-duration: 0.15s;
1092        }
1093        &:disabled {
1094          @include button(flat-insensitive);
1095          background: none;
1096          color: $insensitive_fg_color;
1097        }
1098      }
1099      &:last-child { // '+' button
1100        &:hover {
1101          @include button(flat-hover);
1102          background: none;
1103          color: $success_color;
1104          animation: spin_hover 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
1105        }
1106        &:active {
1107          @include button(flat-active);
1108          background: none;
1109          color: $success_color;
1110          animation: spin_active 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
1111          transition-duration: 0.15s;
1112        }
1113        &:disabled {
1114          @include button(flat-insensitive);
1115          background: none;
1116          color: $insensitive_fg_color;
1117        }
1118      }
1119    }
1120  }
1121
1122  .osd &,
1123  .osd &.vertical {
1124    &,
1125    button,
1126    entry {
1127      color: $inverted_secondary_fg_color;
1128      &:focus { color: $inverted_fg_color; }
1129      &:disabled { color: $insensitive_inverted_secondary_fg_color; }
1130    }
1131  }
1132
1133  &.vertical { // FIXME: try using linking templates for
1134               // vertically linked stuff
1135    entry {
1136      min-width: rem(33.3px);
1137      min-height: rem(33.3px);
1138      padding: 0;
1139      border-radius: 0;
1140    }
1141
1142    button {
1143      min-width: rem(26.7px);
1144      min-height: rem(26.7px);
1145      padding: rem(2.7px);
1146      border: rem(2.7px) solid transparent;
1147      border-radius: 200px;
1148      -gtk-outline-radius: 200px;
1149      background: none;
1150      background-size: contain;
1151      color: $secondary_fg_color;
1152      box-shadow: none;
1153      transition-property: opacity,
1154                           color,
1155                           background-color,
1156                           background-image,
1157                           box-shadow;
1158
1159      &.up { // '+' button
1160        &:hover {
1161          @include button(flat-hover);
1162          background: none;
1163          color: $success_color;
1164          animation: spin_hover 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
1165        }
1166        &:active {
1167          @include button(flat-active);
1168          background: none;
1169          color: $success_color;
1170          animation: spin_active 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
1171          transition-duration: 0.15s;
1172        }
1173        &:disabled {
1174          @include button(flat-insensitive);
1175          background: none;
1176          color: $insensitive_fg_color;
1177        }
1178      }
1179      &.down { // '-' button
1180        &:hover {
1181          @include button(flat-hover);
1182          background: none;
1183          color: $error_color;
1184          animation: spin_hover 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
1185        }
1186        &:active {
1187          @include button(flat-active);
1188          background: none;
1189          color: $error_color;
1190          animation: spin_active 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
1191          transition-duration: 0.15s;
1192        }
1193        &:disabled {
1194          @include button(flat-insensitive);
1195          background: none;
1196          color: $insensitive_fg_color;
1197        }
1198      }
1199    }
1200  }
1201
1202  // Misc
1203  treeview & {
1204    & entry:focus {
1205      padding: 1px;
1206      border-radius: 0;
1207      border-width: 0;
1208      background-color: $base_color;
1209      color: $fg_color;
1210      box-shadow: none;
1211      &:selected { @extend %selected_items; }
1212    }
1213  }
1214}
1215
1216
1217/**************
1218 * ComboBoxes *
1219 **************/
1220
1221combobox {
1222  arrow {
1223    -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1224    min-height: rem(16px);
1225    min-width: rem(16px);
1226  }
1227
1228  &.linked {
1229    button:nth-child(2) {
1230      &:dir(ltr) { @extend %linked:last-child; }
1231      &:dir(rtl) { @extend %linked:first-child; }
1232    }
1233  }
1234
1235  &:drop(active) {
1236    button.combo { @extend button:drop(active); }
1237  }
1238
1239  & menu { padding: rem(3.3px) 0; }
1240  & menu > menuitem { padding: rem(4.7px) rem(5.3px) rem(6px); }
1241
1242  entry.combo {
1243  }
1244
1245  button.combo { // button spacing
1246    min-height: rem(13.3px);
1247    min-width: rem(17.3px);
1248    padding: rem(8px) rem(5.3px) rem(8.7px);
1249
1250    arrow { padding: 0 rem(4px) 0; }
1251
1252    label {
1253      padding-left: rem(4px);
1254      padding-right: rem(4px);
1255    }
1256
1257    image {
1258      min-height: rem(16px);
1259      min-width: rem(16px);
1260      padding-left: rem(4px);
1261      padding-right: rem(4px);
1262    }
1263  }
1264
1265  button.combo { // button styling
1266    @include button(flat-normal);
1267    color: $secondary_fg_color;
1268    background: transparent;
1269    border-image: -gtk-gradient(radial,
1270                                center bottom, 0,
1271                                center bottom, 0.5,
1272                                to($track_color),
1273                                to(transparent))
1274                                0 0 1 / 0 0 1px;
1275    &:hover,
1276    &:active {
1277      @include button(flat-hover);
1278      border-radius: 0;
1279      color: $fg_color;
1280      background: transparent;
1281      border-image: -gtk-gradient(radial,
1282                                  center bottom, 0,
1283                                  center bottom, 0.5,
1284                                  to($selected_bg_color),
1285                                  to(transparent))
1286                                  0 0 2 / 0 0 2px;
1287    }
1288    &:disabled,
1289    &:checked:disabled {
1290      @include button(flat-insensitive);
1291      color: $insensitive_fg_color;
1292      background: transparent;
1293      border-image: -gtk-gradient(radial,
1294                                  center bottom, 0,
1295                                  center bottom, 0.5,
1296                                  to($track_color),
1297                                  to(transparent))
1298                                  0 0 1 / 0 0 1px;
1299
1300    }
1301  }
1302
1303  button.combo:not(:only-child) {
1304  }
1305  button.combo:only-child {
1306  }
1307}
1308
1309.linked > combobox > box > button.combo {
1310  // the combo is a composite widget so the way we do button linking doesn't
1311  // work, special case needed. See
1312  // https://bugzilla.gnome.org/show_bug.cgi?id=733979
1313  &:dir(ltr),
1314  &:dir(rtl) { @extend %linked_middle; } // specificity bump
1315}
1316
1317.linked > combobox:first-child > button.combo {
1318  @extend %linked:first-child;
1319}
1320.linked > combobox:last-child > button.combo {
1321  @extend %linked:last-child;
1322}
1323.linked > combobox:only-child > button.combo {
1324  @extend %linked:only-child;
1325}
1326
1327.linked.vertical > combobox > button.combo {
1328  @extend %linked_vertical_middle;
1329}
1330.linked.vertical > combobox:first-child > button.combo {
1331  @extend %linked_vertical:first-child;
1332}
1333.linked.vertical > combobox:last-child > button.combo {
1334  @extend %linked_vertical:last-child;
1335}
1336.linked.vertical > combobox:only-child > button.combo {
1337  @extend %linked_vertical:only-child;
1338}
1339
1340
1341/************
1342 * Toolbars *
1343 ************/
1344
1345toolbar {
1346  -GtkWidget-window-dragging: true;
1347
1348  padding: rem(5.3px);
1349  background-color: $bg_color;
1350  color: $secondary_fg_color;
1351  box-shadow: if($variant == 'light', $toolbar-shadow-light,
1352                                      $toolbar-shadow-dark);
1353
1354  &.vertical,
1355  .inline-toolbar &,
1356  paned &,
1357  paned &.primary-toolbar,
1358  grid &.primary-toolbar { // stop drawing fake-shadows
1359    box-shadow: none;
1360  }
1361
1362  // on OSD
1363  .osd & { background-color: transparent; }
1364
1365  .osd &,
1366  &.osd {
1367    padding: 3px;
1368    border-style: solid;
1369    border-width: 9px;
1370    border-radius: 2px;
1371    border-image: -gtk-scaled(url("assets/osd-shadow#{$asset_suffix}.png"),
1372                              url("assets/osd-shadow#{$asset_suffix}@2.png"))
1373                  10 / 10px stretch;
1374    box-shadow: none;
1375    color: $inverted_fg_color;
1376    background-color: $inverted_dark_color;
1377    &:backdrop {
1378      border-image: -gtk-scaled(url("assets/osd-shadow-backdrop#{$asset_suffix}.png"),
1379                                url("assets/osd-shadow-backdrop#{$asset_suffix}@2.png"))
1380                    10 / 10px stretch;
1381    }
1382
1383    button {
1384      @extend button.flat;
1385      &:not(:active):not(:disabled):not(hover) {
1386        color: $secondary_accent_color;
1387      }
1388      &:hover,
1389      &:active { color: $accent_color; }
1390      &:active,
1391      &:checked {
1392        border-image: none;
1393        box-shadow: none;
1394      }
1395      &:disabled { color: gtkopacity($accent_color, 0.4); }
1396    }
1397
1398    .linked > button {
1399      &, &.image-button {
1400        border-image: none;
1401        box-shadow: none;
1402        &:hover { background-color: transparent; }
1403        &:not(:checked) {
1404          border-radius: 100px;
1405          -gtk-outline-radius: 100px;
1406        }
1407      }
1408
1409      &.image-button {
1410        min-width: rem(13.3px);
1411        min-height: rem(29.3px);
1412        padding: 0 rem(6.7px) 0;
1413        border-radius: 100px;
1414        -gtk-outline-radius: 100px;
1415      }
1416    }
1417
1418    label { padding: 0 1em; }
1419  }
1420
1421  button { // use flat-buttons
1422    @extend button.flat;
1423    background-size: $text_button_small;
1424    box-shadow: none;
1425    border-image: -gtk-gradient(radial,
1426                                center bottom, 0,
1427                                center bottom, 0.001,
1428                                to($track_color),
1429                                to(transparent))
1430                                0 0 0 / 0 0 0px;
1431    color: $secondary_fg_color;
1432    &:hover {
1433      box-shadow: none;
1434      border-image: none;
1435      color: $fg_color;
1436    }
1437    &:checked {
1438      box-shadow: none;
1439      border-image: -gtk-gradient(radial,
1440                                  center bottom, 0,
1441                                  center bottom, 0.5,
1442                                  to($selected_bg_color),
1443                                  to(transparent))
1444                                  0 0 2 / 0 0 2px;
1445      background-color: transparent;
1446      color: $fg_color;
1447      &:disabled {
1448        box-shadow: none;
1449        background-color: transparent;
1450        color: $insensitive_fg_color;
1451        border-image: none;
1452        > label { color: inherit; }
1453      }
1454    }
1455    &:disabled {
1456      box-shadow: none;
1457      background-color: transparent;
1458      color: $insensitive_secondary_fg_color;
1459      border-image: none;
1460    }
1461
1462    button,
1463    button.flat { // set specific roundness
1464      &,
1465      &.text-button,
1466      &.text-button.image-button {
1467        border-radius: 2px;
1468	-gtk-outline-radius: 2px;
1469      }
1470      &.image-button {
1471        border-radius: 100px;
1472	-gtk-outline-radius: 100px;
1473      }
1474    }
1475
1476    .text-button,
1477    .image-button.text-button {
1478      min-width: rem(13.3px);
1479      min-height: rem(29.3px);
1480      padding: 0 rem(13.3px) 0;
1481      background-size: $text_button_small;
1482    }
1483
1484    .image-button {
1485      min-width: rem(13.3px);
1486      min-height: rem(29.3px);
1487      padding: 0 rem(6.7px) 0;
1488      background-size: $image_button_large;
1489    }
1490
1491    &.toggle { // remove double-background
1492      &:hover,
1493      &:active,
1494      &:checked {
1495        background-color: transparent;
1496        box-shadow: none;
1497      }
1498    }
1499  }
1500
1501  .linked > button { // remove double-background and underlines
1502    &, &.image-button {
1503      border-image: none;
1504      box-shadow: none;
1505      &:hover,
1506      &:active {
1507        border-image: none;
1508        background-color: transparent;
1509        box-shadow: none;
1510      }
1511      &:not(:disabled) { // revive roundness
1512        border-radius: 100px;
1513        -gtk-outline-radius: 100px;
1514      }
1515    }
1516
1517    .image-button {
1518      min-width: rem(13.3px);
1519      min-height: rem(29.3px);
1520      padding: 0 rem(6.7px) 0;
1521      border-radius: 100px;
1522      -gtk-outline-radius: 100px;
1523    }
1524  }
1525  .linked > button.text-button:not(.image-button) { // revive underlines
1526    @extend %button_array;
1527  }
1528
1529  // toolbar separators
1530  separator {
1531    color: transparent;
1532    background: none;
1533  }
1534  &.horizontal {
1535    separator { margin: 0 rem(6px); }
1536  }
1537  &.vertical {
1538    separator { margin: rem(6px) 0; }
1539  }
1540}
1541
1542// searchbar, location-bar & inline-toolbar
1543.inline-toolbar {
1544  padding: rem(5.3px);
1545  border-style: solid;
1546  border-width: 0 1px 1px;
1547  border-color: $borders_color;
1548  background-color: $secondary_dark_color;
1549  box-shadow: if($variant == 'light', $inline-shadow-light,
1550                                      $inline-shadow-dark);
1551}
1552
1553searchbar,
1554.location-bar {
1555  padding: rem(5.3px);
1556  border-style: solid;
1557  border-width: 0 0 1px;
1558  border-color: $borders_color;
1559  background-color: $secondary_dark_color;
1560
1561  .linked > button.image-button {
1562    padding-top: rem(9.3px);
1563    padding-bottom: rem(10.7px);
1564  }
1565
1566  button.flat.close.raised {
1567    min-width: rem(13.3px);
1568    min-height: rem(13.3px);
1569    padding: rem(10px);
1570    border-radius: 100px;
1571    -gtk-outline-radius: 100px;
1572  }
1573}
1574
1575
1576/***************
1577 * Header bars *
1578 ***************/
1579
1580.titlebar,
1581headerbar {
1582  @extend %fade_effect;
1583  background-color: $inverted_dark_color;
1584  background-clip: border-box;
1585
1586  // text colours
1587  color: $inverted_secondary_fg_color;
1588  label,
1589  image {
1590    // &:hover { color: $inverted_fg_color; }
1591    // &:focus,
1592    // &:active,
1593    &:checked {
1594    // color: $inverted_fg_color;
1595      &:disabled { color: $insensitive_inverted_fg_color; }
1596    }
1597    button:disabled > &,
1598    .linked > button:disabled > &,
1599    &:disabled { color: $insensitive_inverted_secondary_fg_color; }
1600  }
1601
1602  // titles
1603  .title {
1604    padding-left: rem(13.3px);
1605    padding-right: rem(13.3px);
1606    color: $inverted_fg_color;
1607    font-weight: 700;
1608    &:backdrop { @extend .dim-label; }
1609  }
1610
1611  .subtitle {
1612    @extend .dim-label;
1613    padding-left: rem(13.3px);
1614    padding-right: rem(13.3px);
1615    color: $inverted_secondary_fg_color;
1616    font-size: 90%;
1617    &:backdrop { @extend .dim-label; }
1618  }
1619
1620  // separators
1621  & separator.vertical,
1622  & > box > separator.vertical,
1623  & > box > box > separator.vertical {
1624    border: 0 none transparent;
1625    color: transparent;
1626    background-color: transparent;
1627  }
1628
1629  // button styling
1630  button:not(.suggested-action):not(.destructive-action) {
1631    @extend button.flat;
1632    border-image: -gtk-gradient(radial,
1633                                center bottom, 0,
1634                                center bottom, 0.001,
1635                                to($selected_bg_color),
1636                                to(transparent))
1637                                0 0 0 / 0 0 0px;
1638    color: $inverted_secondary_fg_color;
1639    background-size: $text_button_small;
1640    &:hover { color: $inverted_fg_color; }
1641    &:checked {
1642      border-image: -gtk-gradient(radial,
1643                                  center bottom, 0,
1644                                  center bottom, 0.5,
1645                                  to($selected_bg_color),
1646                                  to(transparent))
1647                                  0 0 2 / 0 0 2px;
1648      // box-shadow: inset 0 -2px $selected_bg_color;
1649      background-color: transparent;
1650      color: $inverted_fg_color;
1651      // transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1),
1652      //             box-shadow 0 cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
1653      //             color 0;
1654      // &:active { transition: none; }
1655      &:disabled {
1656        background-color: transparent;
1657        color: $insensitive_inverted_fg_color;
1658        > label { color: inherit; }
1659      }
1660    }
1661  }
1662
1663  // force to draw circle flat buttons as default
1664  button:not(.suggested-action):not(.destructive-action) {
1665    border-radius: 100px;
1666    -gtk-outline-radius: 100px;
1667    &.text-button {
1668      border-radius: 2px;
1669      -gtk-outline-radius: 2px;
1670      &.image-button {
1671        border-radius: 2px;
1672        -gtk-outline-radius: 2px;
1673        background-size: $text_button_small;
1674      }
1675    }
1676  }
1677
1678  // adjust spacing for finer aspect-ratio
1679  .linked > button {
1680    &.image-button {
1681      min-width: rem(17.3px);
1682      min-height: rem(37.3px);
1683      padding: 0 rem(6.7px) 0;
1684    }
1685  }
1686  button.toggle {
1687    min-width: rem(17.3px);
1688    min-height: rem(37.3px);
1689    padding: 0 rem(10px) 0;
1690
1691    label { padding: rem(9.3px) rem(8px) rem(10.7px); }
1692    menu menuitem { // reset padding
1693      label { padding: 0; }
1694    }
1695  }
1696
1697  button,
1698  .linked > button,
1699  button.suggested-action,
1700  button.destructive-action {
1701    &, & label.text-button {
1702      color: $inverted_secondary_fg_color;
1703      &:hover { color: $inverted_fg_color; }
1704      &:checked {
1705        color: $inverted_fg_color;
1706        &:disabled { color: $insensitive_inverted_fg_color; }
1707      }
1708      &:disabled { color: $insensitive_inverted_secondary_fg_color; }
1709    }
1710    label.text-button { // workaround for Gnome-Software
1711      border-image: none;
1712      box-shadow: none;
1713    }
1714  }
1715
1716  // entry styling
1717  entry,
1718  .linked > entry {
1719    color: $inverted_secondary_fg_color;
1720    caret-color: $inverted_secondary_fg_color;
1721    &:focus {
1722      color: $inverted_fg_color;
1723      caret-color: $inverted_fg_color;
1724    }
1725    &:disabled { color: $insensitive_inverted_secondary_fg_color; }
1726  }
1727
1728  // combobox styling
1729  combobox,
1730  .linked > combobox {
1731    & > entry.combo {
1732      color: $inverted_secondary_fg_color;
1733      caret-color: $inverted_secondary_fg_color;
1734      &:focus {
1735        color: $inverted_fg_color;
1736        caret-color: $inverted_fg_color;
1737      }
1738      &:disabled { color: $insensitive_inverted_secondary_fg_color; }
1739      &:backdrop { opacity: 0.5; }
1740    }
1741    & > button.combo {
1742      color: $inverted_secondary_fg_color;
1743      &:hover { color: $inverted_fg_color; }
1744      &:checked {
1745        color: $inverted_fg_color;
1746        &:disabled { color: $insensitive_inverted_fg_color; }
1747      }
1748      &:disabled { color: $insensitive_inverted_secondary_fg_color; }
1749      &:backdrop { opacity: 0.5; }
1750    }
1751  }
1752
1753  // menu styling
1754  menu menuitem { // reset text colour
1755    color: $secondary_fg_color;
1756    &:hover { color: $fg_color; }
1757    label {
1758      &:disabled { color: $insensitive_fg_color; }
1759    }
1760    & accelerator { color: gtkalpha(currentColor, 0.55); }
1761    & separator { color: $borders_color; }
1762  }
1763
1764  // pop-over styling
1765  popover button.flat {
1766    color: $secondary_fg_color;
1767    &:hover { color: $fg_color; }
1768    label {
1769      &:hover { color: $fg_color; }
1770      &:disabled { color: $insensitive_fg_color; }
1771    }
1772  }
1773
1774  // switch styling
1775  switch {
1776    margin: rem(2.7px) 0;
1777    color: $inverted_secondary_fg_color;
1778    background-color: gtkopacity($inverted_secondary_fg_color, 0.1);
1779    &:checked {
1780      background-color: gtkopacity($selected_bg_color, 0.2);
1781      &:disabled { background-color: gtkopacity($selected_bg_color, 0.2); }
1782    }
1783    &:disabled {
1784      color: $insensitive_inverted_fg_color;
1785      background-color: $track_color;
1786    }
1787
1788    slider { background-color: $inverted_bg_color; }
1789    &:hover slider {
1790      background-image: linear-gradient(to bottom,
1791                                        gtkalpha($selected_fg_color, 0.2),
1792                                        gtkalpha($selected_fg_color, 0.2));
1793    }
1794    &:checked slider {
1795      background-color: $selected_bg_color;
1796      &:disabled { background-color: #3F4E56; }
1797    }
1798    &:disabled slider { background-color: #3F4E56; }
1799  }
1800
1801  // spinner spacing
1802  spinner {
1803    min-width: rem(13.3px);
1804    min-height: rem(13.3px);
1805    margin: rem(-5.3px);
1806  }
1807
1808  // selection-mode styling
1809  &.selection-mode {
1810    border-width: 1px 0 1px 0; // remove side borders
1811    border-top-color: $highlight_color;
1812    border-bottom-color: transparent;
1813    background-color: $selected_bg_color;
1814    color: $selected_fg_color;
1815
1816    .subtitle:link { @extend *:link:selected;  }
1817
1818    button,
1819    button.image-button {
1820      border-image: -gtk-gradient(radial,
1821                                  center bottom, 0,
1822                                  center bottom, 0.001,
1823                                  to($selected_fg_color),
1824                                  to(transparent))
1825                                  0 0 0 / 0 0 0px;
1826      color: $secondary_selected_fg_color;
1827      &:hover,
1828      &:active,
1829      &:checked { color: $selected_fg_color; }
1830      &:disabled { color: $insensitive_inverted_secondary_fg_color; }
1831      &:checked {
1832        border-image: -gtk-gradient(radial,
1833                                    center bottom, 0,
1834                                    center bottom, 0.5,
1835                                    to($selected_fg_color),
1836                                    to(transparent))
1837                                    0 0 2 / 0 0 2px;
1838        color: $selected_fg_color;
1839        background-color: transparent;
1840        &:disabled {
1841          color: $insensitive_selected_fg_color;
1842          > label { color: inherit; }
1843        }
1844      }
1845      &.suggested-action {
1846        // NOTE: do not use @extend button;
1847        @include button(normal);
1848        &:hover { @include button(hover); }
1849        &:active { @include button(active); }
1850        &:disabled { @include button(insensitive); }
1851      }
1852
1853      // text-button foreground colors
1854      &.text-button,
1855      &.suggested-action {
1856        color: $secondary_selected_fg_color;
1857        &:hover,
1858        &:active,
1859        &:checked { color: $selected_fg_color; }
1860        &:disabled { color: $insensitive_selected_fg_color; }
1861      }
1862    }
1863
1864    button:not(.suggested-action):not(.destructive-action) {
1865      border-radius: 100px;
1866      -gtk-outline-radius: 100px;
1867      &.text-button,
1868      &.flat.selection-menu {
1869        border-radius: 2px;
1870        -gtk-outline-radius: 2px;
1871        &.image-button {
1872          border-radius: 100px;
1873          -gtk-outline-radius: 100px;
1874        }
1875      }
1876    }
1877
1878    entry {
1879      color: $inverted_secondary_fg_color;
1880      &:focus { color: $inverted_fg_color; }
1881      &:disabled { color: $insensitive_inverted_secondary_fg_color; }
1882    }
1883
1884    .selection-menu {
1885      padding-left: rem(16px);
1886      padding-right: rem(16px);
1887      &, &.popup {
1888        color: $secondary_selected_fg_color;
1889        &:hover,
1890        &:active,
1891        &:checked { color: $selected_fg_color; }
1892        &:disabled { color: $insensitive_inverted_secondary_fg_color; }
1893        &:checked {
1894          border-image: -gtk-gradient(radial,
1895                                      center bottom, 0,
1896                                      center bottom, 0.5,
1897                                      to($selected_fg_color),
1898                                      to(transparent))
1899                                      0 0 2 / 0 0 2px;
1900          background-color: transparent;
1901          &:disabled {
1902            color: $insensitive_selected_fg_color;
1903            > label { color: inherit; }
1904          }
1905        }
1906      }
1907
1908      GtkArrow { -GtkArrow-arrow-scaling: 1.0; }
1909
1910      .arrow {
1911        -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
1912        color: $secondary_selected_fg_color;
1913      }
1914    }
1915  }
1916
1917  // misc
1918  .tiled & {
1919    @extend %tiled_integration;
1920    transition: none;
1921  }
1922  .maximized & {
1923    @extend %maxd_integration;
1924    transition: none;
1925  }
1926
1927  &.default-decoration {
1928    min-height: 26.7px;
1929    padding: 5.3px;
1930    border-width: 0;
1931
1932    .title { // fade_effect doesn't work
1933      color: $inverted_fg_color;
1934      &:backdrop { color: gtkopacity($inverted_fg_color, 0.4); }
1935    }
1936
1937    button.titlebutton {
1938      min-width: 26.7px;
1939      min-height: 26.7px;
1940      margin: 0;
1941      padding: 0;
1942      color: $inverted_secondary_fg_color;
1943      background-size: $image_button_small;
1944      &:hover,
1945      &:active { color: $inverted_fg_color; }
1946      &:backdrop { color: gtkopacity($inverted_fg_color, 0.4); }
1947    }
1948  }
1949}
1950
1951headerbar {
1952  // draw borders
1953  border-width: 1px 0 1px;
1954  border-style: solid;
1955  // do not use transparentize
1956  border-top-color: $top_edge_border_color;
1957  border-bottom-color: $solid_dark_borders_color;
1958
1959  // To avoid double-padding, set it only for titlebar in case it
1960  // is placed on the header-bar.
1961  &.titlebar,
1962  .csd &,
1963  box &:only-child {
1964    padding: rem(5.3px);
1965    // draw hilight and shadows
1966    box-shadow: if($variant == 'light', $header-shadow-light,
1967                                        $header-shadow-dark);
1968
1969    .tiled &  { @extend %tiled_integration; }
1970    .maximized & { @extend %maxd_integration; }
1971  }
1972
1973  // override unwanted side-borders
1974  box &:not(:only-child):first-child,
1975  box &:not(:only-child):last-child {
1976    border-left-color: $inverted_dark_color;
1977    border-right-color: $inverted_dark_color;
1978
1979    .tiled &,
1980    .maximized & {
1981      border-left-color: $panel_bg_color;
1982      border-right-color: $panel_bg_color;
1983    }
1984  }
1985
1986  box & { // Remove unneeded side shadows with dirty hacks
1987    &:not(:only-child):last-child {
1988      &:dir(ltr) {
1989        box-shadow: if($variant == 'light', $sub-header-shadow-light-ltr,
1990                                            $sub-header-shadow-dark-ltr);
1991
1992        .tiled &  { @extend %tiled_integration; }
1993        .maximized & { @extend %maxd_integration; }
1994      }
1995      &:dir(rtl) {
1996        box-shadow: if($variant == 'light', $sub-header-shadow-light-rtl,
1997                                            $sub-header-shadow-dark-rtl);
1998
1999        .tiled &  { @extend %tiled_integration; }
2000        .maximized & { @extend %maxd_integration; }
2001      }
2002    }
2003  }
2004
2005  // paned-separator is actually drawn by paned itself
2006  paned &:not(:only-child):last-child {
2007    &:dir(ltr) {
2008      // border-left: 1px solid $solid_dark_borders_color;
2009
2010      .tiled &  { @extend %tiled_integration; }
2011      .maximized & { @extend %maxd_integration; }
2012    }
2013    &:dir(rtl) {
2014      // border-right: 1px solid $solid_dark_borders_color;
2015
2016      .tiled &  { @extend %tiled_integration; }
2017      .maximized & { @extend %maxd_integration; }
2018    }
2019  }
2020}
2021
2022headerbar.selection-mode { // selection-mode specific
2023  box & { // Remove unneeded side shadows with dirty hacks
2024    &:not(:only-child):last-child {
2025      &:dir(ltr) {
2026        box-shadow: if($variant == 'light', $selected-header-shadow-light-ltr,
2027                                            $selected-header-shadow-dark-ltr);
2028
2029        .tiled &  { @extend %tiled_integration; }
2030        .maximized & { @extend %maxd_integration; }
2031      }
2032      &:dir(rtl) {
2033        box-shadow: if($variant == 'light', $selected-header-shadow-light-rtl,
2034                                            $selected-header-shadow-dark-rtl);
2035
2036        .tiled &  { @extend %tiled_integration; }
2037        .maximized & { @extend %maxd_integration; }
2038      }
2039    }
2040  }
2041}
2042
2043headerbar,
2044.titlebar { // set rounded corners
2045  border-top-left-radius: 2px;
2046  border-top-right-radius: 2px;
2047
2048  box &:not(:last-child):not(.titlebar) {
2049    &:dir(ltr) {
2050      border-top-left-radius: 2px;
2051      border-top-right-radius: 0;
2052    }
2053    &:dir(rtl) {
2054      border-top-left-radius: 0;
2055      border-top-right-radius: 2px;
2056    }
2057  }
2058
2059  box &:last-child:not(.titlebar) {
2060    &:dir(ltr) { border-top-left-radius: 0; }
2061    &:dir(rtl) { border-top-right-radius: 0; }
2062  }
2063}
2064
2065// force using rounded corners in case of paned titlebars
2066window:not(.maximized):not(.tiled) {
2067  paned.titlebar {
2068    border-top-left-radius: 2px;
2069    border-top-right-radius: 2px;
2070
2071    > headerbar:not(:last-child) {
2072      &:dir(ltr) {
2073        border-top-left-radius: 2px;
2074        border-top-right-radius: 0;
2075      }
2076      &:dir(rtl) {
2077        border-top-left-radius: 0;
2078        border-top-right-radius: 2px;
2079      }
2080    }
2081    > headerbar:last-child {
2082      &:dir(ltr) {
2083        border-top-left-radius: 0;
2084        border-top-right-radius: 2px;
2085      }
2086      &:dir(rtl) {
2087        border-top-left-radius: 2px;
2088        border-top-right-radius: 0;
2089      }
2090    }
2091  }
2092}
2093
2094// revive top-edge highlight border for SSDs
2095.ssd decoration {
2096  .titlebar {
2097    border-top: 1px solid $highlight_color;
2098    box-shadow: none;
2099  }
2100}
2101
2102// squared corners when the window is max'd or tiled
2103%tiled_integration {
2104  border-radius: 0;
2105  border-color: $panel_bg_color;
2106  border-width: 2px 0 0 0;
2107  border-top-color: $secondary_selected_bg_color;
2108  background-color: $panel_bg_color;
2109  box-shadow: none;
2110  &:backdrop { border-top-color: $track_color; }
2111}
2112
2113%maxd_integration {
2114  border-radius: 0;
2115  border-color: $panel_bg_color;
2116  border-width: 1px 0 0 0;
2117  background-color: $panel_bg_color;
2118  box-shadow: none;
2119}
2120
2121
2122/************
2123 * Pathbars *
2124 ************/
2125
2126.linked.path-bar,
2127.path-bar {
2128  button {
2129    &, &.text-button {
2130      padding: 0 rem(1.3px) 0;
2131      -gtk-outline-radius: 2px;
2132    }
2133    &.image-button { padding: 0 rem(5.3px) 0; }
2134
2135    &.text-button.image-button {
2136      -gtk-outline-radius: 2px;
2137      label {
2138        padding-left: 0;
2139        padding-right: 0;
2140      }
2141    }
2142
2143    &.text-button.image-button {
2144      label { // FIXME: is it still needed?
2145        &:last-child { padding-right: rem(5.3px); }
2146        &:first-child { padding-left: rem(5.3px); }
2147      }
2148    }
2149
2150    image { padding: rem(1.3px) rem(5.3px) 0; }
2151
2152    &.slider-button, // FIXME: workaround for Nautilus 3.20.0
2153    &.image-button.text-button.toggle {
2154      min-height: rem(17.3px);
2155      padding: 0 rem(1.3px) 0;
2156      -gtk-outline-radius: 2px;
2157    }
2158  }
2159}
2160
2161
2162/**************
2163 * Tree Views *
2164 **************/
2165
2166treeview.view {
2167  @at-root * {
2168    -GtkTreeView-horizontal-separator: 4;
2169    -GtkTreeView-grid-line-width: 1;
2170    -GtkTreeView-grid-line-pattern: '';
2171    -GtkTreeView-tree-line-width: 1;
2172    -GtkTreeView-tree-line-pattern: '';
2173    -GtkTreeView-expander-size: 16;
2174  }
2175
2176  border-left-color: $track_color;   // this is actually the tree lines color,
2177  border-top-color: $borders_color;  // while this is the grid lines color,
2178                                     // better then nothing
2179
2180  rubberband { @extend rubberband; } // to avoid borders being overridden
2181                                     // by the previously set props
2182
2183  border-radius: 0; // rest border radius in lists
2184
2185  &:hover,
2186  &:active { border-radius: 0; }
2187  &:selected {
2188    border-radius: 0;
2189    @extend %selected_items;
2190  }
2191
2192  // override foreground colours
2193  &, entry,
2194  entry > label {
2195    color: $secondary_fg_color;
2196    &:hover,
2197    &:active,
2198    &:focus { color: $fg_color; }
2199    &:selected { color: $selected_fg_color; }
2200    &:disabled {
2201      color: $insensitive_fg_color;
2202      &:selected { color: $insensitive_selected_fg_color; }
2203    }
2204  }
2205
2206  .separator {
2207    &, &:hover {
2208      color: transparent;
2209      background-color: $borders_color;
2210    }
2211  }
2212
2213  // clear backgrounds
2214  background-color: transparent;
2215  background-image: none;
2216  box-shadow: none;
2217
2218  &.dnd {
2219    border-style: solid none;
2220    border-width: 1px;
2221    border-color: mix($fg_color, $selected_bg_color, 50%);
2222  }
2223
2224  expander {
2225    arrow {
2226      -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2227      &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
2228      &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
2229      &:selected {
2230        color: gtkopacity($selected_fg_color, 0.75);
2231        &:hover,
2232        &:active { color: $selected_fg_color; }
2233      }
2234    }
2235  }
2236
2237  &.progressbar { // progressbar bit in treeviews
2238    box-shadow: inset 0 -4px $accent_color;
2239    &:selected { box-shadow: inset 0 -4px $selected_fg_color; }
2240  }
2241
2242  &.trough { // progressbar trough in treeviews
2243    box-shadow: inset 0 -4px gtkalpha($accent_color, 0.2);
2244    &:selected { box-shadow: inset 0 -4px gtkalpha($selected_fg_color, 0.2); }
2245  }
2246
2247  &, paned & { // redraw some stuff for RhythmBox
2248    background-color: $base_color;
2249    &:hover,
2250    row:hover { color: $fg_color; }
2251    &:selected,
2252    row:selected { @extend %selected_items; }
2253  }
2254
2255  // see tests/testaccel to test
2256  acceleditor > label { background-color: $selected_bg_color; }
2257
2258  header {
2259    button {
2260      @extend row.activatable;
2261      min-height: rem(20px);
2262      padding: 0 rem(6.7px) 0;
2263      border-style: none solid solid none;
2264      border-width: 1px;
2265      border-color: $borders_color;
2266      border-radius: 0;
2267      box-shadow: none;
2268      background-color: $base_color;
2269      // font-weight: 700;
2270      color: $tertiary_fg_color;
2271    }
2272    &:hover,
2273    &:active {
2274      color: $fg_color;
2275      box-shadow: none;
2276    }
2277    &:disabled { background-color: $base_color; }
2278    &.dnd { @extend column-header.button.dnd; }
2279  }
2280  & button:last-child,
2281  &:last-child button { // treeview-like derived widgets in Banshee
2282                        // and Evolution
2283    border-right-style: none;
2284  }
2285
2286  &.separator {
2287    min-height: rem(2px);
2288    color: transparent;
2289    background-color: $borders_color;
2290  }
2291}
2292
2293column-header.button.dnd { // for treeview-like derive widgets
2294  transition: none;
2295  border-left-style: solid;
2296  color: $selected_bg_color;
2297}
2298
2299
2300/*********
2301 * Menus *
2302 *********/
2303
2304.menubar,
2305menubar {
2306  -GtkWidget-window-dragging: true;
2307  padding: 0;
2308  box-shadow: $menubar-shadow;
2309  background-color: $inverted_dark_color;
2310  color: $inverted_secondary_fg_color; // FIXME: Gtk+3 firefox needs this!
2311
2312  .tiled &,
2313  .maximized & {
2314    background-color: $panel_bg_color;
2315    box-shadow: none;
2316    transition: none;
2317  }
2318
2319  > menuitem {
2320    min-height: rem(20px);
2321    padding: rem(5.3px) rem(8px) rem(6.7px);
2322    color: $inverted_secondary_fg_color;
2323    background-color: transparent;
2324    &:hover { // Seems like it :hover even with keyboard focus
2325      color: $inverted_fg_color;
2326      box-shadow: inset 0 -2px $selected_bg_color;
2327    }
2328    &:disabled {
2329      color: $insensitive_inverted_fg_color;
2330      box-shadow: none;
2331    }
2332  }
2333}
2334
2335.menu,
2336.context-menu,
2337menu {
2338  margin: rem(4px) 0;
2339  padding: rem(4px) 0;
2340  border-width: 1px; // adds borders in a non composited env
2341  border-style: solid;
2342  border-color: $base_color transparent transparent;
2343  background-color: $secondary_base_color;
2344
2345  .csd & { // axes borders in a composited env
2346    border-width: 1px;
2347    border-radius: 2px;
2348    border-color: $base_color transparent transparent;
2349  }
2350
2351  .menuitem,
2352  menuitem {
2353    min-height: rem(20px);
2354    min-width: rem(40px);
2355    padding: rem(5.3px) rem(8px) rem(6.7px);
2356    color: $secondary_fg_color;
2357    font: initial;
2358    text-shadow: none;
2359    transition: none;
2360    &:hover {
2361      color: $fg_color;
2362      background-color: gtkalpha(currentColor, 0.1);
2363      transition: none;
2364    }
2365    &:disabled { color: $insensitive_fg_color; }
2366
2367    // submenu indicators
2368    arrow {
2369      min-height: rem(16px);
2370      min-width: rem(16px);
2371
2372      &:dir(ltr) {
2373        -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
2374        margin-left: rem(10.7px);
2375      }
2376      &:dir(rtl) {
2377        -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl');
2378        margin-right: rem(10.7px);
2379      }
2380    }
2381
2382    // avoids labels color being overridden, see
2383    // https://bugzilla.gnome.org/show_bug.cgi?id=767058
2384    label {
2385      &:dir(rtl),
2386      &:dir(ltr) { color: inherit; }
2387    }
2388  }
2389
2390  > arrow { // overflow buttons
2391    @extend button.flat;
2392    min-height: rem(16px);
2393    min-width: rem(16px);
2394    padding: rem(4px);
2395    border-style: none;
2396    border-radius: 0;
2397    background-color: $secondary_base_color;
2398    &.top {
2399      margin-top: rem(-5.3px);
2400      -gtk-icon-source: -gtk-icontheme('pan-up-symbolic');
2401      border-bottom: 1px solid $borders_color;
2402    }
2403    &.bottom {
2404      margin-bottom: rem(-5.3px);
2405      -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
2406      border-top: 1px solid $borders_color;
2407    }
2408    &:hover { background-color: $secondary_dark_color; }
2409    &:disabled {
2410      color: transparent;
2411      background-color: transparent;
2412      border-color: transparent ;
2413    }
2414  }
2415
2416  > separator {
2417    &:dir(ltr) { margin-left: rem(32px); }
2418    &:dir(rtl) { margin-right: rem(32px); }
2419  }
2420}
2421
2422menuitem {
2423  accelerator { color: gtkalpha(currentColor, 0.55); }
2424
2425  separator {
2426    color: transparent;
2427    background: none;
2428    border-top: 1px solid $borders_color;
2429    &:dir(ltr) { margin-left: rem(32px); }
2430    &:dir(rtl) { margin-right: rem(32px); }
2431  }
2432}
2433
2434// round corners for CSD menus
2435.csd.popup { border-radius: 2px; }
2436
2437
2438/************
2439 * Popovers *
2440 ************/
2441
2442popover.background {
2443  padding: 2px;
2444  background-color: $secondary_base_color;
2445  box-shadow:  $z-depth-3;
2446
2447  .csd &,
2448  & {
2449    border: 1px solid;
2450    border-color: $base_color $secondary_base_color $secondary_base_color;
2451    border-radius: 2px + 1px;
2452  }
2453
2454  &:backdrop { box-shadow: $z-depth-1; }
2455
2456  > list,
2457  > .view,
2458  > toolbar,
2459  &.osd > toolbar {
2460    border-style: none;
2461    border-image: none;
2462    background-color: transparent;
2463  }
2464
2465  button menuitem.flat,
2466  button.flat {
2467    transition: none;
2468    padding: 0 rem(10px) 0;
2469    background-color: transparent;
2470    background-size: $text_button_small;
2471    color: $secondary_fg_color;
2472    font: initial;
2473    &:hover {
2474      background-color: transparent; // remove double-bg
2475      color: $fg_color;
2476    }
2477
2478    // FIXME: label padding is ugly
2479    // vertical padding of GtkMenuItem * 0.5
2480    label { padding: rem(2.7px) 0 rem(3.3px); }
2481  }
2482
2483  button.image-button { padding: rem(6.7px); }
2484
2485  button.model.image-button { min-height: rem(26.7px); }
2486
2487  .linked > button {
2488    @include button(flat-normal);
2489    @extend %button_array;
2490    color: $secondary_fg_color;
2491    &:hover { @include button(flat-hover); }
2492    &:active { @include button(flat-active); }
2493    &:disabled { @include button(flat-insensitive); }
2494    &:checked {
2495      @include button(flat-checked);
2496      color: $fg_color;
2497      background-color: transparent;
2498    }
2499    &:checked:disabled { @include button(flat-checked-insensitive); }
2500  }
2501
2502  .csd &,
2503  & {
2504    &.touch-selection,
2505    &.magnifier {
2506      @extend %osd;
2507      button { @include button(flat-normal); }
2508    }
2509  }
2510
2511  &.osd { @extend %osd; }
2512
2513  separator { margin: rem(3px) 0; }
2514}
2515
2516
2517/*************
2518 * Notebooks *
2519 *************/
2520
2521notebook {
2522  padding: 0;
2523
2524  &.frame {
2525    border: 1px solid $solid_light_borders_color;
2526    transition: none;
2527
2528    // remove madness borders around header
2529    > header {
2530      &, &.frame { border-style: none; }
2531      @each $_header, $_margin in (top, -1px -1px 0 -1px),
2532                                  (bottom, 0 -1px -1px -1px),
2533                                  (left, -1px 0 -1px -1px),
2534                                  (right, -1px -1px -1px 0) {
2535        &.#{$_header} { margin: #{$_margin}; }
2536      }
2537    }
2538  }
2539
2540  > stack {
2541    transition: none;
2542    &:only-child {
2543      border: none;
2544      background-color: transparent;
2545      box-shadow: none;
2546    }
2547
2548    // the :not(:only-child) is for "hidden" notebooks
2549    &:not(:only-child),
2550    &:not(:first-child),
2551    &:not(:last-child) {
2552      border: none;
2553      background-color: $base_color;
2554      box-shadow: inset 0 0 0 1px $base_color;
2555    }
2556  }
2557
2558  > header {
2559    $tab_indicator_size: 2px;
2560    // vertical tab sizing
2561    $vt_vpadding: rem(5.3px);
2562    $vt_hpadding: rem(16px);
2563    // horizontal tab sizing
2564    $ht_vpadding: rem(5.3px);
2565    $ht_hpadding: rem(10px);
2566
2567    background-color: $bg_color;
2568    tabs { background-color: transparent; }
2569
2570    @each $_header, $_border in (top, 0 1px),
2571                                (bottom, 0 -1px),
2572                                (left, 1px 0),
2573                                (right, -1px 0) {
2574      &.#{$_header} {
2575        // FIXME: outset borders
2576        box-shadow: #{$_border} $borders_color;
2577      }
2578    }
2579
2580    &.top {
2581      > tabs {
2582        margin: 0 rem(6px) -1px rem(6px);
2583        > tab {
2584          margin: 0 -1px 0 -1px; // 1px horizontal overlap
2585          padding: $vt_vpadding $vt_hpadding;
2586          border-bottom-width: $tab_indicator_size;
2587          box-shadow: none;
2588          &.reorderable-page {
2589            padding-left: rem(10px);  // for a nicer close button
2590            padding-right: rem(10px); // placement
2591            border-left-width: 1px;
2592            border-right-width: 1px;
2593          }
2594        }
2595      }
2596    }
2597    &.bottom {
2598      > tabs {
2599        margin: -1px rem(6px) 0 rem(6px);
2600        > tab {
2601          margin: 0 -1px 0 -1px;
2602          padding: $vt_vpadding $vt_hpadding;
2603          border-top-width: $tab_indicator_size;
2604          box-shadow: none;
2605          &.reorderable-page {
2606            padding-left: rem(16px);
2607            padding-right: rem(16px);
2608            border-left-width: 1px;
2609            border-right-width: 1px;
2610          }
2611        }
2612      }
2613    }
2614    &.left {
2615      > tabs {
2616        margin: rem(6px) -1px rem(6px) 0;
2617        > tab {
2618          margin: -1px 0 -1px 0; // 1px vertical overlap
2619          padding: $ht_vpadding $ht_hpadding;
2620          border-right-width: $tab_indicator_size;
2621          box-shadow: none;
2622          &.reorderable-page {
2623            border-bottom-width: 1px;
2624            border-top-width: 1px;
2625          }
2626        }
2627      }
2628    }
2629    &.right {
2630      > tabs {
2631        margin: rem(6px) 0 rem(6px) -1px;
2632        > tab {
2633          margin: -1px 0 -1px 0;
2634          padding: $ht_vpadding $ht_hpadding;
2635          border-left-width: $tab_indicator_size;
2636          box-shadow: none;
2637          &.reorderable-page {
2638            border-bottom-width: 1px;
2639            border-top-width: 1px;
2640          }
2641        }
2642      }
2643    }
2644
2645    // Reorderable-page
2646    @each $_tab, $_border in (top, bottom),
2647                             (bottom, top),
2648                             (left, right),
2649                             (right, left) {
2650      &.#{$_tab} tab.reorderable-page {
2651        border-#{$_border}-width: 2px;
2652        border-#{$_border}-color: transparent;
2653        &:hover {
2654          border-color: $borders_color;
2655          border-#{$_border}-width: 2px;
2656          border-#{$_border}-color: $borders_color;
2657          background-color: $base_color;
2658          box-shadow: none;
2659        }
2660        &:checked {
2661          border-color: $borders_color;
2662          border-#{$_border}-width: 2px;
2663          border-#{$_border}-color: $selected_bg_color;
2664          background-color: $base_color;
2665          box-shadow: if($variant == 'light', $tab-shadow-light,
2666                                              $tab-shadow-dark);
2667        }
2668      }
2669    }
2670
2671    // Arrow buttons
2672    &.top, &.bottom {
2673      // & tabs arrow.up { -gtk-icon-source:
2674      //                   -gtk-icontheme('pan-end-symbolic');
2675      // }
2676      // & tabs arrow.down { -gtk-icon-source:
2677      //                     -gtk-icontheme('pan-start-symbolic');
2678      // }
2679    }
2680    &.left, &.right {
2681      // & tabs arrow.up { -gtk-icon-source:
2682      //                   -gtk-icontheme('pan-down-symbolic');
2683      // }
2684      // & tabs arrow.down { -gtk-icon-source:
2685      //                     -gtk-icontheme('pan-up-symbolic');
2686      // }
2687    }
2688    & > tabs > arrow {
2689      transition: none;
2690      min-height: rem(16px);
2691      min-width: rem(16px);
2692      margin: 0 rem(6.7px);
2693      border-radius: 0;
2694      color: $tertiary_fg_color;
2695      &:hover,
2696      &:active { color: $fg_color; }
2697      &:disabled { color: $insensitive_fg_color; }
2698    }
2699
2700    &.top, &.bottom,
2701    &.left, &.right { // button outside the tabs
2702      button {
2703        min-height: rem(16px);
2704        min-width: rem(16px);
2705        padding: 0;
2706        border-radius: 100px;
2707        -gtk-outline-radius: 100px;
2708        & > image { padding: rem(6.7px); }
2709      }
2710    }
2711  }
2712
2713  tab {
2714    border-width: 0;
2715    border-style: solid;
2716    border-color: transparent;
2717    background-color: transparent;
2718
2719    outline-offset: rem(-6px);
2720
2721    // here's the interesting stuff
2722    &:hover { border-color: $track_color; }
2723    &:checked { border-color: $selected_bg_color; }
2724
2725    label { // tab text
2726      padding: rem(1.3px);
2727      font-weight: 700;
2728      color: $tertiary_fg_color;
2729    }
2730    &.reorderable-page label { // reorderable-page tab text
2731      padding: rem(5.3px) 0 rem(5.3px);
2732    }
2733    &:hover label {
2734      // hover tab text
2735      color: $fg_color;
2736    }
2737    &:checked label {
2738      // active tab text
2739      color: $fg_color;
2740    }
2741
2742    button { // tab close button
2743      @include button(flat-normal);
2744      min-width: rem(16px);
2745      min-height: rem(16px);
2746      padding: 0;
2747      border-radius: 100px;
2748      -gtk-outline-radius: 100px;
2749      background-size: $image_button_small;
2750      color: $tertiary_fg_color;
2751      &:hover { @include button(flat-hover); }
2752      &:active { @include button(flat-active); }
2753      &:disabled { @include button(flat-insensitive); }
2754      & > image { // this is a hack which makes tabs grow
2755        padding: rem(6.7px);
2756      }
2757    }
2758    &:hover button,
2759    &:checked button { // close button colours
2760      color: $fg_color;
2761      image { color: $fg_color; }
2762    }
2763    &:disabled button {
2764      color: $insensitive_fg_color;
2765      image { color: $insensitive_fg_color; }
2766    }
2767
2768    // special case for Gedit's tab 'close' button
2769    button.flat.image-button.small-button {
2770      min-width: rem(16px);
2771      min-height: rem(16px);
2772      padding: 0;
2773      // weird wdiget gets in our way
2774      & > widget > box > image { padding: rem(6.7px); }
2775    }
2776  }
2777
2778  &:not(.reorderable-page) > entry { @extend entry.flat; }
2779}
2780
2781
2782/**************
2783 * Scrollbars *
2784 **************/
2785
2786$_slider_min_width: rem(12px);
2787$_slider_min_length: rem(32px);
2788
2789@keyframes slow_down_vert {
2790  from {min-width: $_slider_min_width - rem(6px); }
2791  to { min-width: $_slider_min_width; }
2792}
2793
2794@keyframes slow_down_horz {
2795  from {min-height: $_slider_min_width - rem(6px); }
2796  to { min-height: $_slider_min_width; }
2797}
2798
2799scrollbar,
2800.scrollbar {
2801  // disable steppers
2802  @at-root * {
2803    -GtkScrollbar-has-backward-stepper: false;
2804    -GtkScrollbar-has-forward-stepper: false;
2805  }
2806
2807  background-color: gtkopacity($base_color, 0.55);
2808  transition-duration: 0.2s;
2809
2810  // scrollbar border
2811  &.top,
2812  &.bottom,
2813  &.left,
2814  &.right {
2815    &, .trough { border: none; }
2816  }
2817
2818  // slider
2819  slider,
2820  .slider {
2821    margin: 0;
2822    border-radius: 0;
2823    border: 0 none transparent;
2824    background-color: gtkopacity($tertiary_fg_color, 0.55);
2825    &:hover { background-color: gtkopacity($secondary_fg_color, 0.55); }
2826    &:active { background-color: $fg_color; }
2827    &:disabled { opacity: 0.4; }
2828  }
2829
2830  &.fine-tune slider { margin: 0; }
2831
2832  &.vertical {
2833    slider,
2834    .slider {
2835      min-width: $_slider_min_width;
2836      min-height: $_slider_min_length;
2837      margin: 0;
2838    }
2839    &.fine-tune slider { margin: 0; }
2840  }
2841  &.horizontal {
2842    slider,
2843    .slider {
2844      min-width: $_slider_min_length;
2845      min-height: $_slider_min_width;
2846      margin: 0;
2847    }
2848    &.fine-tune slider { margin: 0; }
2849  }
2850
2851  &.overlay-indicator {
2852    &:not(.dragging):not(.hovering) { // Overlay scrolling indicator
2853      border-color: transparent;
2854      background-color: transparent;
2855
2856      slider {
2857        margin: 0;
2858        border: 0 none transparent;
2859      }
2860
2861      button {
2862        min-width: $_slider_min_width;
2863        min-height: $_slider_min_width;
2864        background-color: gtkopacity($tertiary_fg_color, 0.55);
2865        border-radius: 0;
2866        border: none;
2867        -gtk-icon-source: none;
2868      }
2869
2870      // w/o the following margin tweaks the slider shrinks
2871      // when hovering/dragging
2872      &.vertical {
2873        slider {
2874          min-width: $_slider_min_width - rem(6px);
2875          min-height: $_slider_min_length;
2876          margin: 0;
2877        }
2878
2879        button {
2880          min-width: rem(6px);
2881          margin: 0;
2882        }
2883      }
2884
2885      &.horizontal {
2886        slider {
2887          min-width: $_slider_min_length;
2888          min-height: $_slider_min_width - rem(6px);
2889          margin: 0;
2890        }
2891
2892        button {
2893          min-height: rem(6px);
2894          margin: 0;
2895        }
2896      }
2897    }
2898
2899    &.dragging,
2900    &.hovering { opacity: 0.8; }
2901
2902    &.hovering { // slow-down when deforming
2903      &.vertical slider { animation: slow_down_vert 0.2s linear forwards; }
2904      &.horizontal slider { animation: slow_down_horz 0.2s linear forwards; }
2905    }
2906  }
2907}
2908
2909
2910/**********
2911 * Switch *
2912 **********/
2913
2914switch {
2915  outline-offset: rem(-4px);
2916  font-size: 0;
2917  // similar to the scale
2918  border: rem(10px) solid transparent;
2919  border-radius: 100px;
2920  -gtk-outline-radius: 100px;
2921  background-color: $track_color;
2922
2923  &:disabled { color: $insensitive_fg_color; }
2924  &:checked {
2925    background-color: gtkopacity($selected_bg_color, 0.2);
2926    &:disabled { background-color: gtkopacity($selected_bg_color, 0.2); }
2927  }
2928  &:disabled {
2929    color: $insensitive_fg_color;
2930    background-color: $track_color;
2931  }
2932
2933  // slider styling
2934  // switch slider doesn't respond to its own states
2935  // but relies on the switch ones
2936  slider {
2937    @include button(normal);
2938    min-width: rem(20px);
2939    min-height: rem(20px);
2940    margin: rem(-4px) rem(-1px);
2941    padding: 0;
2942    border-radius: 100px;
2943    -gtk-outline-radius: 100px;
2944  }
2945  &:hover slider {
2946    @include button(hover);
2947    background-image: linear-gradient(to bottom,
2948                                      gtkalpha($selected_fg_color, 0.2),
2949                                      gtkalpha($selected_fg_color, 0.2));
2950  }
2951  &:checked slider { @include button(checked); }
2952  &:checked:hover slider {
2953    @include button(checked);
2954    background-image: linear-gradient(to bottom,
2955                                      gtkalpha($selected_fg_color, 0.2),
2956                                      gtkalpha($selected_fg_color, 0.2));
2957    box-shadow: $z-depth-2,
2958                inset 0 1px $highlight_color;
2959  }
2960  &:checked:disabled slider {
2961    @include button(checked-insensitive);
2962    // do not use any transparentize
2963    background-color: if($variant == 'light', #F0F2F3, #3F4E56);
2964    background-image: none;
2965    box-shadow: none;
2966  }
2967  &:disabled slider {
2968    background-color: if($variant == 'light', #F0F2F3, #3F4E56);
2969    background-image: none;
2970    box-shadow: none;
2971 }
2972
2973  row:selected & { // return to monochrome
2974    background-color: $bg_color;
2975    &:checked {
2976      background-color: $secondary_dark_color;
2977      &:disabled { background-color: $secondary_dark_color; }
2978    }
2979
2980    slider { background-color: $bg_color; }
2981    &:hover slider {
2982      background-image: linear-gradient(to bottom,
2983                                        gtkalpha($selected_fg_color, 0.2),
2984                                        gtkalpha($selected_fg_color, 0.2));
2985    }
2986    &:checked slider { background-color: $base_color; }
2987    &:checked:disabled slider { background-color: $secondary_dark_color; }
2988  }
2989
2990  // special case inside the grid container,
2991  // need to protect geometry by using pixmaps images...
2992  grid & {
2993    margin: rem(6px) rem(5px);
2994    font-size: 0;
2995    outline-color: transparent;
2996
2997    slider {
2998      min-width: rem(40px);
2999      min-height: rem(20px);
3000    }
3001
3002    // reset all of default troughs
3003    &,
3004    &:hover,
3005    &:checked,
3006    &:checked:hover,
3007    &:checked:disabled,
3008    &:disabled {
3009      margin: rem(6px) rem(5px);
3010      border: none;
3011      color: transparent;
3012      background: none;
3013      background-image: none;
3014      background-size: 40px 20px;
3015      background-repeat: no-repeat;
3016      background-position: right center;
3017      box-shadow: none;
3018
3019      &:dir(rtl) { background-position: left center; }
3020    }
3021
3022    // reset all of default sliders
3023    slider,
3024    &:hover slider,
3025    &:checked slider,
3026    &:checked:hover slider,
3027    &:checked:disabled slider,
3028    &:disabled slider {
3029      margin: 0;
3030      border: none;
3031      border-radius: 0;
3032      color: transparent;
3033      background: none;
3034      background-image: none;
3035      background-size: 40px 20px;
3036      background-repeat: no-repeat;
3037      background-position: right center;
3038      box-shadow: none;
3039
3040      &:dir(rtl) { background-position: left center; }
3041    }
3042
3043    // use ugly pixmaps
3044    &:not(:hover):not(:checked):not(:disabled) {
3045      background-image: -gtk-scaled(
3046                        url("assets/toggle-off#{$asset_suffix}.png"),
3047                        url("assets/toggle-off#{$asset_suffix}@2.png"));
3048    }
3049    &:hover {
3050      background-image: -gtk-scaled(
3051                        url("assets/toggle-off-hover#{$asset_suffix}.png"),
3052                        url("assets/toggle-off-hover#{$asset_suffix}@2.png"));
3053    }
3054    &:checked {
3055      background-image: -gtk-scaled(url("assets/toggle-on.png"),
3056                                    url("assets/toggle-on@2.png"));
3057      &:hover {
3058        background-image: -gtk-scaled(url("assets/toggle-on-hover.png"),
3059                                      url("assets/toggle-on-hover@2.png"));
3060      }
3061      &:disabled {
3062        background-image: -gtk-scaled(
3063                          url("assets/toggle-on-insensitive#{$asset_suffix}.png"),
3064                          url("assets/toggle-on-insensitive#{$asset_suffix}@2.png"));
3065      }
3066    }
3067    &:disabled {
3068      background-image: -gtk-scaled(
3069                        url("assets/toggle-off-insensitive#{$asset_suffix}.png"),
3070                        url("assets/toggle-off-insensitive#{$asset_suffix}@2.png"));
3071    }
3072  }
3073}
3074
3075
3076/*************************
3077 * Check and Radio items *
3078 *************************/
3079
3080@keyframes check_radio_hover {
3081  from {
3082    background-image: -gtk-gradient(radial,
3083                                    center center, 0,
3084                                    center center, 0.001,
3085                                    to(gtkalpha($secondary_fg_color, 0.1)),
3086                                    to(transparent));
3087  }
3088  to {
3089    background-image: -gtk-gradient(radial,
3090                                    center center, 0,
3091                                    center center, 0.5,
3092                                    to(gtkalpha($secondary_fg_color, 0.1)),
3093                                    to(transparent));
3094  }
3095}
3096
3097@keyframes check_radio_active {
3098  from {
3099    background-image: -gtk-gradient(radial,
3100                                    center center, 0,
3101                                    center center, 0.001,
3102                                    to(gtkalpha($selected_bg_color, 0.1)),
3103                                    to(transparent));
3104  }
3105  to {
3106    background-image: -gtk-gradient(radial,
3107                                    center center, 0,
3108                                    center center, 0.5,
3109                                    to(gtkalpha($selected_bg_color, 0.1)),
3110                                    to(transparent));
3111  }
3112}
3113
3114@keyframes check_radio_active_reverse {
3115  from {
3116    background-image: -gtk-gradient(radial,
3117                                    center center, 0,
3118                                    center center, 0.5,
3119                                    to(gtkalpha($selected_bg_color, 0.2)),
3120                                    to(transparent));
3121  }
3122  to {
3123    background-image: -gtk-gradient(radial,
3124                                    center center, 0,
3125                                    center center, 0.001,
3126                                    to(gtkalpha($selected_bg_color, 0)),
3127                                    to(transparent));
3128  }
3129}
3130
3131// draw regular check and radio items using our PNG assets
3132// all assets are rendered from assets.svg. never add pngs directly
3133
3134@each $w,$a in ('check', 'checkbox'),
3135               ('radio','radio') {
3136
3137  // standard checks and radios
3138  @each $s,$as in ('','-unchecked'),
3139                  (':hover', '-unchecked-active'),
3140                  (':active', '-unchecked-active'),
3141                  (':disabled','-unchecked-insensitive'),
3142                  (':indeterminate', '-mixed'),
3143                  (':indeterminate:hover', '-mixed-active'),
3144                  (':indeterminate:active', '-mixed-active'),
3145                  (':indeterminate:disabled', '-mixed-insensitive'),
3146                  (':checked', '-checked'),
3147                  (':checked:hover', '-checked-active'),
3148                  (':checked:active', '-checked-active'),
3149                  (':checked:disabled','-checked-insensitive') {
3150    #{$w}#{$s},
3151    .#{$w}#{$s} {
3152      -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}#{$asset_suffix}.png"),
3153                                    url("assets/#{$a}#{$as}#{$asset_suffix}@2.png"));
3154      -gtk-icon-shadow: none;
3155    }
3156  }
3157
3158  // menu
3159  @each $s,$as in ('',''),
3160                  // (':active', '-checked'),
3161                  (':disabled','-insensitive'),
3162                  (':indeterminate', '-mixed'),
3163                  // (':indeterminate:active', '-mixed'),
3164                  (':indeterminate:disabled', '-mixed-insensitive'),
3165                  (':checked', '-checked'),
3166                  // (':checked:active', '-checked'),
3167                  (':checked:disabled','-checked-insensitive') {
3168    menu menuitem #{$w}#{$s},
3169    menu menuitem .#{$w}#{$s} {
3170      -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-symbolic#{$asset_suffix}.png"),
3171                                    url("assets/#{$a}#{$as}-symbolic#{$asset_suffix}@2.png"));
3172      -gtk-icon-shadow: none;
3173      &:hover {
3174        -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-symbolic#{$asset_suffix}.png"),
3175                                      url("assets/#{$a}#{$as}-symbolic#{$asset_suffix}@2.png"));
3176        animation: none;
3177        -gtk-icon-shadow: none;
3178        transition: none;
3179      }
3180    }
3181  }
3182}
3183
3184// check/radio inside treeview
3185treeview.view check,
3186treeview.view radio {
3187  &, &:only-child {
3188    // margin: rem(-6.7px);
3189    // padding: rem(6.7px);
3190    padding: 0; // FIXME: negative margin doesn't work.
3191  }
3192}
3193
3194// check/radio inside selected-rows
3195@each $w,$a in ('check', 'checkbox'),
3196               ('radio','radio') {
3197
3198  // standard checks and radios
3199  @each $s,$as in ('','-unchecked'),
3200                  (':active', '-unchecked'),
3201                  (':indeterminate', '-mixed'),
3202                  (':indeterminate:active', '-mixed'),
3203                  (':checked', '-checked'),
3204                  (':checked:active', '-checked') {
3205    treeview.view,
3206    row,
3207    row.activatable {
3208      #{$w}:selected#{$s},
3209      #{$w}:selected:focus#{$s} {
3210        -gtk-icon-source: -gtk-scaled(url("assets/#{$a}#{$as}-selected.png"),
3211                                      url("assets/#{$a}#{$as}-selected@2.png"));
3212        -gtk-icon-shadow: none;
3213      }
3214      // use dark variant for insensitive states
3215      #{$w}:selected:disabled,
3216      #{$w}:selected:focus:disabled {
3217        -gtk-icon-source: -gtk-scaled(url("assets/#{$a}-unchecked-insensitive-dark.png"),
3218                                      url("assets/#{$a}-unchecked-insensitive-dark@2.png"));
3219      }
3220      #{$w}:selected:indeterminate:disabled,
3221      #{$w}:selected:focus:indeterminate:disabled {
3222        -gtk-icon-source: -gtk-scaled(url("assets/#{$a}-mixed-insensitive-dark.png"),
3223                                      url("assets/#{$a}-mixed-insensitive-dark@2.png"));
3224      }
3225      #{$w}:selected:checked:disabled,
3226      #{$w}:selected:focus:checked:disabled {
3227        -gtk-icon-source: -gtk-scaled(url("assets/#{$a}-checked-insensitive-dark.png"),
3228                                      url("assets/#{$a}-checked-insensitive-dark@2.png"));
3229      }
3230    }
3231  }
3232}
3233
3234// selection-mode
3235@each $s,$as in ('','-selectionmode'),
3236                  (':hover', '-active-selectionmode'),
3237                  (':active', '-active-selectionmode'),
3238                  (':disabled', '-insensitive-selectionmode'),
3239                  (':checked', '-checked-selectionmode'),
3240                  (':checked:hover', '-checked-active-selectionmode'),
3241                  (':checked:active', '-checked-active-selectionmode'),
3242                  (':disabled:checked', '-checked-insensitive-selectionmode') {
3243  .view.content-view check#{$s}:not( list) {
3244    -gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}#{$asset_suffix}.png"),
3245                                  url("assets/checkbox#{$as}#{$asset_suffix}@2.png"));
3246    background-color: transparent;
3247  }
3248}
3249
3250checkbutton.text-button,
3251radiobutton.text-button {
3252  // this is for a nice focus on check and radios text
3253  padding: rem(2.7px) rem(6.7px);
3254  outline-offset: 0;
3255  color: $secondary_fg_color;
3256  &:hover,
3257  &:active,
3258  &:checked { color: $fg_color; }
3259  &:disabled,
3260  &:disabled:active,
3261  &:disabled:indeterminate {
3262    // set insensitive color, which is overriden otherwise
3263    // color: $insensitive_fg_color;
3264  }
3265}
3266
3267radio,
3268.radio,
3269check,
3270.check {
3271  min-width: rem(16px);
3272  min-height: rem(16px);
3273  // margin: 0 rem(6.7px) 0 rem(6.7px);
3274  margin: rem(-10px) rem(-3.3px);
3275  padding: rem(10px);
3276
3277  &:hover {
3278    animation: check_radio_hover 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
3279  }
3280  &:active {
3281    animation: check_radio_active_reverse 0.15s cubic-bezier(0.4, 0, 0.2, 1) forwards;
3282    transition-duration: 0.15s;
3283  }
3284  &:hover:checked,
3285  &:hover:indeterminate {
3286    animation: check_radio_active 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
3287  }
3288
3289  menu menuitem & {
3290    min-width: rem(16px);
3291    min-height: rem(16px);
3292    margin: 0;
3293    padding: 0;
3294    &:dir(ltr) { margin-right: rem(8px); }
3295    &:dir(rtl) { margin-left: rem(8px); }
3296
3297    &, &:hover, &:disabled { //FIXME: use button reset mixin
3298      border-color: transparent;
3299      background-image: none;
3300      background-color: transparent;
3301      box-shadow: none;
3302      -gtk-icon-shadow: none;
3303      color: inherit;
3304      animation: none;
3305    }
3306  }
3307}
3308
3309
3310/************
3311 * GtkScale *
3312 ************/
3313
3314@keyframes scale_enlarge {
3315  from { background-size: $scale; }
3316  to { background-size: 100%; }
3317}
3318
3319%scale_trough {
3320  border: 1px solid transparent;
3321  border-radius: 0;
3322  background-color: $track_color;
3323  box-shadow: none;
3324  &:disabled {
3325    color: $insensitive_fg_color;
3326    background-color: $track_color;
3327  }
3328
3329  &:backdrop {
3330  }
3331
3332  // OSD
3333  .osd & {
3334  }
3335}
3336
3337%scale_highlight {
3338  border: 1px solid transparent;
3339  border-radius: 0;
3340  background-color: $accent_color;
3341  &:disabled {
3342    color: $insensitive_fg_color;
3343    background-color: $track_color;
3344  }
3345
3346  &:backdrop {
3347  }
3348
3349  // OSD
3350  .osd & {
3351  }
3352}
3353
3354$_marks_lenght: 6px;
3355$_marks_distance: 6px;
3356
3357scale {
3358  // remove ugly outlines
3359  // outline-offset: -4px;
3360  // -gtk-outline-radius: 100px;
3361  outline-offset: 0;
3362  outline-width: 0;
3363
3364  min-height: 10px;
3365  min-width: 10px;
3366  padding: 10px;
3367
3368  &.fine-tune {
3369    // remove ugly outlines
3370    // outline-offset: rem(-4px);
3371    outline-offset: 0;
3372    outline-width: 0;
3373    &.horizontal {
3374      padding-top: 9px;
3375      padding-bottom: 9px;
3376      min-height: 10px;
3377    }
3378
3379    &.vertical {
3380      padding-left: 9px;
3381      padding-right: 9px;
3382      min-width: 10px;
3383    }
3384
3385    // to make the trough grow in fine-tune mode
3386    slider { margin: -9px; }
3387
3388    highlight,
3389    fill,
3390    trough {
3391    }
3392  }
3393
3394  slider {
3395    min-height: 20px;
3396    min-width: 20px;
3397    margin: -9px;
3398
3399    &:not(:hover):not(:active) { background-size: $scale; }
3400    // @include entry(normal);
3401    // border-radius: 50%;
3402    // background-color: $success_color;
3403    @each $s,$as in ('',''),
3404                    // (':hover','-hover'),
3405                    (':active','-active'),
3406                    (':disabled','-insensitive') {
3407      &#{$s} {
3408        $_url: 'assets/slider#{$as}#{$asset_suffix}';
3409        border-style: none;
3410        border-radius: 0;
3411        background-color: transparent;
3412        background-image: -gtk-scaled(url('#{$_url}.png'),
3413                                      url('#{$_url}@2.png'));
3414        background-repeat: no-repeat;
3415        background-position: center;
3416        box-shadow: none;
3417      }
3418    }
3419    &:hover {
3420      animation: scale_enlarge 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
3421    }
3422    &:disabled {
3423    }
3424    // OSD sliders
3425    .osd & {
3426    }
3427  }
3428
3429  // the backing bit sizing
3430  trough,
3431  fill,
3432  highlight {
3433    min-height: 2px;
3434    min-width: 2px;
3435    border-radius: 0;
3436    border-width: 0;
3437  }
3438
3439  // the backing bit styling
3440  trough { @extend %scale_trough; }
3441
3442  // the colored part of the backing bit
3443  highlight { @extend %scale_highlight; }
3444
3445  // this is another differently styled part of the backing bit,
3446  // the most relevant use case is for example in media player
3447  // to indicate how much video stream as been cached
3448  fill {
3449    @extend %scale_trough;
3450
3451    background-color: $accent_fill_color;
3452
3453    &:disabled {
3454      border-color: transparent;
3455      background-color: transparent;
3456    }
3457  }
3458
3459  // same opacity value with dim-label
3460  value { color: gtkalpha(currentColor, 0.55); }
3461
3462  separator {
3463    color: transparent;
3464    background-color: $track_color;
3465  }
3466
3467  // scales on selected list rows
3468  row:selected & {
3469  }
3470}
3471
3472scale { // marks color
3473  marks {
3474    color: gtkalpha(currentColor, 0.55);
3475    @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
3476                                                     (bottom, bottom, top),
3477                                                     (top, left, right),
3478                                                     (bottom, right, left) {
3479      &.#{$marks_class} {
3480        margin-#{$marks_margin}: $_marks_distance;
3481        margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght);
3482      }
3483    }
3484  }
3485
3486  &.fine-tune marks {
3487    @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom),
3488                                                     (bottom, bottom, top),
3489                                                     (top, left, right),
3490                                                     (bottom, right, left) {
3491      &.#{$marks_class} {
3492        margin-#{$marks_margin}: $_marks_distance;
3493        margin-#{$marks_pos}: -($_marks_distance + $_marks_lenght - 3px);
3494      }
3495    }
3496  }
3497
3498  &.horizontal {
3499    indicator {
3500      min-height: $_marks_lenght;
3501      min-width: 1px;
3502    }
3503
3504    &.fine-tune indicator { min-height: ($_marks_lenght - 3px); }
3505  }
3506
3507  &.vertical {
3508    indicator {
3509      min-height: 1px;
3510      min-width: $_marks_lenght;
3511    }
3512
3513    &.fine-tune indicator { min-width: ($_marks_lenght - 3px); }
3514  }
3515}
3516
3517// scale with marks
3518@each $d,$dn in ('horizontal', 'horz'),
3519                ('vertical', 'vert') {
3520  @each $ws,$w,$we in  (':last-child:not(:only-child)',
3521                        'scale-has-marks-above', 'scale_marks_above'),
3522                       (':first-child:not(:only-child)',
3523                        'scale-has-marks-below', 'scale_marks_below') {
3524    scale.#{$d} {
3525      %#{$w}-#{$dn},
3526      contents#{$ws} > trough > slider {
3527        @each $s,$as in ('',''),
3528                        // (':hover','-hover'),
3529                        (':active','-active'),
3530                        (':disabled','-insensitive') {
3531          &#{$s} {
3532            @extend %#{$we}_#{$dn}; // negative margin makes trough shrinking
3533            $_url: 'assets/slider-#{$dn}-#{$w}#{$as}#{$asset_suffix}';
3534            border-style: none;
3535            border-radius: 0;
3536            background-color: transparent;
3537            background-image: -gtk-scaled(url('#{$_url}.png'),
3538                                          url('#{$_url}@2.png'));
3539            background-repeat: no-repeat;
3540            background-position: center;
3541            box-shadow: none;
3542          }
3543        }
3544      }
3545      &.fine-tune {
3546        %#{$w}-#{$dn}-fine-tune,
3547        contents#{$ws} > tough > slider {
3548          @each $s,$as in ('',''),
3549                          // (':hover','-hover'),
3550                          (':active','-active'),
3551                          (':disabled','-insensitive') {
3552            &#{$s} { @extend %#{$we}_#{$dn}_ft; }
3553	  }
3554        }
3555      }
3556    }
3557  }
3558}
3559
3560scale { // scales for colour
3561  &.color {
3562    min-height: 0;
3563    min-width: 0;
3564
3565    // not actual trough colour
3566    trough {
3567      min-width: 2px;
3568      min-height: 2px;
3569      border-radius: 0;
3570      background-color: transparent;
3571    }
3572
3573    &.horizontal {
3574      padding: 0 0 10px 0;
3575
3576      trough { padding-bottom: 5px; }
3577
3578      slider {
3579        &, &:hover, &:disabled {
3580          @extend %scale-has-marks-above-horz;
3581          margin-top: 5px;
3582          margin-bottom: -10px;
3583        }
3584      }
3585    }
3586
3587    &.vertical {
3588      &:dir(ltr) {
3589        padding: 0 0 0 10px;
3590
3591        trough { padding-left: 5px; }
3592
3593        slider {
3594          &, &:hover, &:disabled {
3595            @extend %scale-has-marks-below-vert;
3596            margin-left: -10px;
3597            margin-right: 5px;
3598          }
3599        }
3600      }
3601
3602      &:dir(rtl) {
3603        padding: 0 10px 0 0;
3604
3605        trough { padding-right: 5px; }
3606
3607        slider {
3608          &, &:hover, &:disabled {
3609            @extend %scale-has-marks-above-vert;
3610            margin-left: 5px;
3611            margin-right: -10px;
3612          }
3613        }
3614      }
3615    }
3616
3617    &.fine-tune {
3618      &.horizontal {
3619        padding: 0 0 10px 0;
3620
3621        trough { padding-bottom: 5px; }
3622
3623        slider {
3624          @extend %scale-has-marks-above-horz-fine-tune;
3625          margin-top: 5px;
3626          margin-bottom: -10px;
3627        }
3628      }
3629
3630      &.vertical {
3631        &:dir(ltr) {
3632          padding: 0 0 0 10px;
3633
3634          trough { padding-left: 5px; }
3635
3636          slider {
3637            @extend %scale-has-marks-below-vert-fine-tune;
3638            margin-left: -10px;
3639            margin-right: 5px;
3640          }
3641        }
3642
3643        &:dir(rtl) {
3644          padding: 0 10px 0 0;
3645
3646          trough { padding-right: 5px; }
3647
3648          slider {
3649            @extend %scale-has-marks-above-vert-fine-tune;
3650            margin-left: 5px;
3651            margin-right: -10px;
3652          }
3653        }
3654      }
3655    }
3656  }
3657}
3658
3659%scale_marks_above_horz { margin: -15px -10px -10px -10px; }
3660%scale_marks_below_horz { margin: -10px -10px -15px -10px; }
3661%scale_marks_above_vert { margin: -10px -10px -10px -15px; }
3662%scale_marks_below_vert { margin: -10px -15px -10px -10px; }
3663%scale_marks_above_horz_ft { margin: -15px -10px -10px -10px; }
3664%scale_marks_below_horz_ft { margin: -10px -10px -15px -10px; }
3665%scale_marks_above_vert_ft { margin: -10px -10px -10px -15px; }
3666%scale_marks_below_vert_ft { margin: -10px -15px -10px -10px; }
3667
3668
3669/*****************
3670 * Progress bars *
3671 *****************/
3672
3673progressbar {
3674  // sizing
3675  &.horizontal {
3676    trough,
3677    progress { min-height: 4px; }
3678  }
3679
3680  &.vertical {
3681    trough,
3682    progress { min-width: 4px; }
3683  }
3684
3685  // the progress node is positioned after the trough border
3686  // this moves it over it.
3687  &.horizontal progress { margin: 0 -1px; }
3688  &.vertical progress { margin: -1px 0; }
3689
3690
3691  // FIXME: insensitive state missing and some other state
3692  // should be set probably
3693  font-size: 90%;
3694  color: $tertiary_fg_color;
3695
3696  trough {
3697    box-shadow: none;
3698    border-radius: 0;
3699    background-color: gtkopacity($accent_color, 0.2);
3700  }
3701
3702  progress {
3703    box-shadow: none;
3704    border-radius: 0;
3705    background-color: $accent_color;
3706    &.left {
3707      border-top-left-radius: 0;
3708      border-bottom-left-radius: 0;
3709    }
3710    &.right {
3711      border-top-right-radius: 0;
3712      border-bottom-right-radius: 0;
3713    }
3714    &.top {
3715      border-top-left-radius: 0;
3716      border-top-right-radius: 0;
3717    }
3718    &.bottom {
3719      border-bottom-left-radius: 0;
3720      border-bottom-right-radius: 0;
3721    }
3722  }
3723
3724  &.osd {
3725    min-width: 4px;
3726    min-height: 4px;
3727    trough {
3728      border-style: none;
3729      box-shadow: none;
3730      background-color: gtkopacity($accent_color, 0.2);
3731    }
3732    progress {
3733      background-image: none;
3734      background-color: $accent_color;
3735      border-style: none;
3736      border-radius: 0;
3737    }
3738  }
3739}
3740
3741%entry_progressbar { // progress inside entry
3742  margin: -10px -6px;
3743  border-style: none none solid;
3744  border-width: 2px;
3745  border-image: -gtk-gradient(radial,
3746                              center bottom, 0,
3747                              center bottom, 0.5,
3748                              to($accent_color),
3749                              to(transparent))
3750                              0 0 2 / 0 0 2px;
3751  border-radius: 0;
3752  box-shadow: none;
3753  background-color: transparent;
3754  background-image: none;
3755}
3756
3757
3758/*************
3759 * Level Bar *
3760 *************/
3761
3762levelbar {
3763  box-shadow: $z-depth-1; // needs to be set here to avoid clipping
3764
3765  block {
3766    min-width: rem(36px);
3767    min-height: rem(4px);
3768  }
3769
3770  &.vertical block {
3771    min-width: rem(4px);
3772    min-height: rem(36px);
3773  }
3774
3775  trough {
3776    padding: rem(2px);
3777    border-radius: 2px;
3778    box-shadow: $z-depth-1;
3779    &:disabled { box-shadow: none; }
3780    &.horizontal { padding: rem(2px) rem(1px); }
3781    &.vertical { padding: rem(1px) rem(2px); }
3782  }
3783
3784  &.horizontal.discrete block { margin: 0 rem(1px); }
3785  &.vertical.discrete block { margin: rem(1px) 0; }
3786
3787  block {
3788    border-radius: 0;
3789    border: none;
3790    box-shadow: none;
3791  }
3792
3793  block.low { background-color: $warning_color; }
3794
3795  block:not(.empty),
3796  block.high { background-color: $selected_bg_color; }
3797
3798  block.full { background-color: $success_color; }
3799
3800  block.empty { background-color: $track_color; }
3801}
3802
3803
3804/****************
3805 * Print dialog *
3806*****************/
3807
3808printdialog {
3809  paper {
3810    padding: 0;
3811    color: $fg_color;
3812    border: 1px solid $borders_color;
3813    background-color: white;
3814  }
3815
3816  .dialog-action-box { margin: rem(12px); }
3817}
3818
3819
3820/**********
3821 * Frames *
3822 **********/
3823
3824frame > border,
3825.frame {
3826  margin: 0;
3827  padding: 0;
3828  border-radius: 0;
3829  border: 1px solid $borders_color;
3830  box-shadow: none;
3831  &.flat { border-style: none; }
3832}
3833
3834actionbar > frame > border { border-width: 1px 0 0; }
3835
3836actionbar > revealer > box {
3837  padding: rem(5.3px);
3838  border-top: 1px solid $borders_color;
3839}
3840
3841placessidebar,
3842scrolledwindow {
3843  viewport.frame { // avoid double borders when viewport inside
3844                   // scrolled window
3845    border-style: none;
3846  }
3847
3848  // This is used by GtkScrolledWindow,
3849  // when content is touch-dragged past boundaries.
3850  // This draws a box on top of the content, the size changes programmatically.
3851  overshoot {
3852    &.top {
3853      @include overshoot(top);
3854    }
3855    &.bottom {
3856    @include overshoot(bottom);
3857    }
3858    &.left {
3859      @include overshoot(left);
3860    }
3861    &.right {
3862      @include overshoot(right);
3863    }
3864  }
3865
3866  // Overflow indication, works similarly to the overshoot,
3867  // the size if fixed tho.
3868  undershoot {
3869    &.top {
3870      @include undershoot(top, $base_color);
3871    }
3872    &.bottom {
3873    @include undershoot(bottom, $base_color);
3874    }
3875    &.left {
3876      @include undershoot(left, $base_color);
3877    }
3878    &.right {
3879      @include undershoot(right, $base_color);
3880    }
3881  }
3882
3883  junction { // the small square between two scrollbars
3884    border-color: transparent;
3885    // the border image is used to add the missing dot 
3886    // between the borders, details, details, details...
3887    border-image: linear-gradient(to bottom,
3888                                  $borders_color 1px,
3889                                  transparent 1px) 0 0 0 1 / 0 1px stretch;
3890    background-color: $base_color;
3891
3892    &:dir(rtl) { border-image-slice: 0 1 0 0; }
3893  }
3894}
3895
3896// vbox and hbox separators
3897separator {
3898  // always disable separators
3899  color: transparent;
3900  background-color: $borders_color;
3901  min-width: 1px;
3902  min-height: 1px;
3903}
3904
3905
3906/*********
3907 * Lists *
3908 *********/
3909
3910list {
3911  border-color: $borders_color;
3912  background-color: $base_color;
3913}
3914
3915row {
3916  padding: 2px;
3917}
3918
3919row.activatable {
3920  // let's take care of background colors
3921  background-image: -gtk-gradient(radial,
3922                                    center center, 0,
3923                                    center center, 0.5,
3924                                    to(gtkalpha(currentColor, 0)),
3925                                    to(transparent)),
3926                      linear-gradient(to bottom, gtkalpha(currentColor, 0), gtkalpha(currentColor, 0));
3927  background-repeat: no-repeat;
3928  background-position: center, center;
3929  background-size: $text_button_large;
3930  &.has-open-popup, // this is for indicating which sidebar row
3931                    // generated a popover
3932  &:hover {         // see https://bugzilla.gnome.org/show_bug.cgi?id=754411
3933    transition: none;
3934    background-image: -gtk-gradient(radial,
3935                                    center center, 0,
3936                                    center center, 0.5,
3937                                    to(gtkalpha(currentColor, 0)),
3938                                    to(transparent)),
3939                      linear-gradient(to bottom, gtkalpha(currentColor, 0.05), gtkalpha(currentColor, 0.05));
3940  }
3941
3942  &:active {
3943    animation: list_ripple_effect 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
3944  }
3945}
3946
3947// button spacing
3948row {
3949  & button.image-button {
3950    padding: rem(8px);
3951    background-size: $image_button_small;
3952  }
3953
3954  & button.circular {
3955    min-width: rem(13.3px);
3956    min-height: rem(13.3px);
3957    padding: rem(8px);
3958    background-size: $image_button_small;
3959  }
3960}
3961
3962row:selected {
3963  @extend %selected_items;
3964  button {
3965    &:disabled { color: $insensitive_secondary_selected_fg_color; }
3966    &.flat {
3967      color: $secondary_selected_fg_color;
3968      &:hover, &:active { color: $selected_fg_color; }
3969      &:disabled { color: $insensitive_secondary_selected_fg_color; }
3970    }
3971  }
3972}
3973
3974// transition
3975row {
3976  &:hover { transition: none; }
3977}
3978
3979
3980/*********************
3981 * App Notifications *
3982 *********************/
3983
3984.app-notification,
3985.app-notification.frame {
3986  @extend %osd;
3987  @extend toolbar.osd;
3988  button {
3989  }
3990  border { border: none; }
3991}
3992
3993
3994/*************
3995 * Expanders *
3996 *************/
3997
3998expander {
3999  padding: rem(2.7px) rem(4px) rem(3.3px);
4000
4001  arrow {
4002    -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');
4003    min-width: rem(16px);
4004    min-height: rem(16px);
4005    &:dir(rtl) { -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl'); }
4006    &:checked { -gtk-icon-source: -gtk-icontheme('pan-down-symbolic'); }
4007    &:not(:hover):not(:active) { color: gtkalpha(currentColor, 0.75); }
4008    &:selected { color: $selected_fg_color; }
4009  }
4010
4011  label {
4012    color: $secondary_fg_color;
4013    &:hover,
4014    &:active { color: $fg_color; }
4015    &:selected { color: $selected_fg_color; }
4016  }
4017}
4018
4019
4020/************
4021 * Calendar *
4022 ***********/
4023
4024calendar {
4025  margin: rem(8px) 0;
4026  padding: rem(5.3px) rem(1.3px) rem(2.7px);
4027  border: 1px solid $borders_color;
4028  color: $fg_color;
4029  &:selected {
4030    border: none;
4031    border-radius: 100px;
4032    color: $selected_bg_color;
4033    background-color: transparent;
4034    background-image: -gtk-scaled(url("assets/calendar-day-selected.png"),
4035                                  url("assets/calendar-day-selected@2.png"));
4036    background-size: rem(19.3px) rem(19.3px);
4037    background-position: center top;
4038    background-repeat: no-repeat;
4039  }
4040
4041  &.header {
4042    border: 1px solid transparent;
4043    border-bottom-color: $borders_color;
4044    border-radius: 0;
4045  }
4046
4047  &.button,
4048  &.header.button {
4049    @include button(flat-normal);
4050    color: gtkalpha(currentColor, 0.20);
4051    background-size: $image_button_small;
4052    &:hover { @include button(flat-hover); }
4053    &:active { @include button(flat-active); }
4054    &:disabled { @include button(flat-insensitive); }
4055  }
4056
4057  &:indeterminate { color: gtkalpha(currentColor, 0.20); }
4058  &.highlight {
4059    color: gtkalpha(currentColor, 0.55);
4060    font-size: 90%;
4061    font-weight: 500;
4062  }
4063}
4064
4065
4066/***********
4067 * Dialogs *
4068 ***********/
4069
4070messagedialog { // Message Dialog styling
4071  .titlebar {
4072    min-height: rem(20px);
4073    border-style: none;
4074    border-top-left-radius: 2px;
4075    border-top-right-radius: 2px;
4076    color: $inverted_secondary_fg_color;
4077    background-color: $inverted_dark_color;
4078  }
4079
4080  entry {
4081    &, &:focus {
4082      color: $inverted_fg_color;
4083      caret-color: $inverted_fg_color;
4084    }
4085    &:disabled { color: $insensitive_inverted_fg_color; }
4086  }
4087
4088  button { // set foregrounds for fallback-mode
4089    color: $secondary_accent_color;
4090    &:hover,
4091    &:active,
4092    &:checked { color: $accent_color; }
4093    &:disabled { color: $insensitive_inverted_fg_color; }
4094  }
4095  .linked > button {
4096    border: 2px solid transparent;
4097    border-radius: 2px;
4098    border-image: none;
4099    box-shadow: none;
4100  }
4101
4102  @each $s,$as in ('','-unchecked'),
4103                  (':hover', '-unchecked-active'),
4104                  (':active', '-unchecked-active'),
4105                  (':disabled','-unchecked-insensitive'),
4106                  (':indeterminate', '-mixed'),
4107                  (':indeterminate:hover', '-mixed-active'),
4108                  (':indeterminate:active', '-mixed-active'),
4109                  (':indeterminate:disabled', '-mixed-insensitive'),
4110                  (':checked', '-checked'),
4111                  (':checked:hover', '-checked-active'),
4112                  (':checked:active', '-checked-active'),
4113                  (':checked:disabled','-checked-insensitive') {
4114    check#{$s} { // always use dark variant
4115      -gtk-icon-source: -gtk-scaled(url("assets/checkbox#{$as}-dark.png"),
4116                                    url("assets/checkbox#{$as}-dark@2.png"));
4117    }
4118
4119    radio#{$s} {
4120      -gtk-icon-source: -gtk-scaled(url("assets/radio#{$as}-dark.png"),
4121                                    url("assets/radio#{$as}-dark@2.png"));
4122    }
4123  }
4124
4125  checkbutton.text-button,
4126  radiobutton.text-button {
4127    color: $inverted_secondary_fg_color;
4128    &:hover,
4129    &:active,
4130    &:checked { color: $inverted_fg_color; }
4131    &:disabled,
4132    &:disabled:active,
4133    &:disabled:indeterminate { color: $insensitive_inverted_fg_color; }
4134  }
4135
4136  &.csd { // rounded bottom border styling for csd version
4137    &.background {
4138      // bigger radius for better antialiasing
4139      border-bottom-left-radius: 2px;
4140      border-bottom-right-radius: 2px;
4141    }
4142  }
4143
4144  &.background,
4145  &.csd.background {
4146    color: $inverted_secondary_fg_color;
4147    background-color: $inverted_dark_color;
4148    opacity: 0.9;
4149
4150    .dialog-action-area {
4151      button,
4152      .linked > button {
4153        @include button(flat-normal);
4154        border: 2px solid transparent;
4155        border-radius: 0;
4156        color: $inverted_secondary_fg_color;
4157        font-size: initial;
4158        font-weight: 700;
4159        background-size: $text_button_small;
4160        box-shadow: none;
4161        // &:first-child { border-bottom-left-radius: 2px; }
4162        // &:last-child { border-bottom-right-radius: 2px; }
4163
4164        background-color: transparent;
4165        color: $secondary_accent_color;
4166        &:hover {
4167          @include button(flat-hover);
4168          color: $accent_color;
4169        }
4170        &:active {
4171          @include button(flat-active);
4172          color: $accent_color;
4173        }
4174        &:checked {
4175          @include button(flat-checked);
4176          color: $secondary_accent_color;
4177        }
4178        &:disabled { @include button(flat-insensitive); }
4179
4180        &:first-child {
4181          border-radius: 0 0 0 2px;
4182          border-right-width: 0;
4183        }
4184        &:last-child {
4185          border-radius: 0 0 2px 0;
4186          border-left-width: 0;
4187        }
4188      }
4189    }
4190  }
4191}
4192
4193filechooser {
4194  .dialog-action-box { border-top: 1px solid $borders_color; }
4195
4196  #pathbarbox { border-bottom: 1px solid $bg_color; }
4197}
4198
4199filechooserbutton:drop(active) {
4200  box-shadow: none;
4201  border-color: transparent;
4202}
4203
4204
4205/***********
4206 * Sidebar *
4207 ***********/
4208
4209.sidebar {
4210  border: none;
4211  color: $secondary_fg_color;
4212
4213  &, list { // draw shadows
4214     &:dir(ltr) { box-shadow: if($variant == 'light', $sidebar-light-ltr,
4215                                                      $sidebar-dark-ltr);
4216    }
4217    &:dir(rtl) { box-shadow: if($variant == 'light', $sidebar-light-rtl,
4218                                                     $sidebar-dark-rtl);
4219    }
4220  }
4221
4222  // remove background from child-elements
4223  treeview.view,
4224  .frame,
4225  list { background-color: transparent; }
4226
4227  treeview.view {
4228    box-shadow: none;
4229    &:selected,
4230    row:selected { @extend %selected_items; }
4231  }
4232
4233  // fill actual background
4234  background-color: $secondary_dark_color;
4235  .frame list { box-shadow: none; }
4236
4237  list,
4238  row,
4239  row.activatable {
4240    color: $secondary_fg_color;
4241    background-color: transparent;
4242    font-weight: 500;
4243    &:hover { color: $fg_color; }
4244    &:selected {
4245      color: $selected_bg_color;
4246      background-color: transparent;
4247
4248      label { color: $selected_bg_color; }
4249    }
4250  }
4251
4252  // disable shadows on overshoot/undershoot area
4253  // of gtk3-demo's sidebar
4254  overshoot,
4255  undershoot { box-shadow: none; }
4256}
4257
4258stacksidebar {
4259  row,
4260  row.activatable {
4261    padding: rem(5.3px) rem(8px) rem(6.7px);
4262
4263    > label {
4264      padding-left: rem(5.3px);
4265      padding-right: rem(5.3px);
4266    }
4267
4268    color: $secondary_fg_color;
4269    background-color: transparent;
4270    font-weight: 500;
4271    &:hover { color: $fg_color; }
4272    &:selected {
4273      color: $selected_bg_color;
4274      background-color: transparent;
4275
4276      label { color: $selected_bg_color; }
4277    }
4278    &:backdrop { opacity: 1.0; }
4279
4280    &.needs-attention > label { @extend %needs_attention; }
4281  }
4282
4283  .frame list { // draw shadows
4284    // dim background with alpha-blending
4285    background-color: if($variant == 'light', rgba(12, 18, 0, 0.01),
4286                                              rgba(18, 22, 0, 0.04));
4287
4288    &:dir(ltr) { box-shadow: if($variant == 'light', $sidebar-light-ltr,
4289                                                     $sidebar-dark-ltr);
4290    }
4291    &:dir(rtl) { box-shadow: if($variant == 'light', $sidebar-light-rtl,
4292                                                     $sidebar-dark-rtl);
4293    }
4294  }
4295
4296  // remove unwanted separator
4297  separator,
4298  .separator {
4299    @extend separator.wide;
4300    min-height: 0;
4301    border-color: transparent;
4302    background-color: transparent;
4303    color: transparent;
4304  }
4305}
4306
4307
4308/****************
4309 * File chooser *
4310 ****************/
4311
4312placessidebar {
4313  @extend scrolledwindow; // needs for overshoot / undershoot
4314
4315  list,
4316  row {
4317    // Background color for Nautilus and FileChooser sidebar
4318    background-color: $secondary_dark_color;
4319  }
4320
4321  row {
4322    // Needs overriding of the GtkListBoxRow padding
4323    padding: rem(5.3px) 0 rem(6.7px);
4324
4325    // Using margins/padding directly in the row
4326    // will make the animation of the new bookmark row jump
4327    & > revealer {
4328      padding: rem(4px) rem(14px) rem(4px) rem(12px);
4329    }
4330
4331    & image.sidebar-icon {
4332      opacity: 0.75; // dim the device icons
4333      &:dir(ltr) { padding-right: rem(6.7px); }
4334      &:dir(rtl) { padding-left: rem(6.7px); }
4335    }
4336
4337    & label.sidebar-label {
4338      &:dir(ltr) { padding-right: rem(2px); }
4339      &:dir(rtl) { padding-left: rem(2px); }
4340    }
4341
4342    button {
4343      &.image-button { // Eject button for removable storages
4344        padding: rem(6.7px); // Same as of placessidebar row
4345        @extend button.flat;
4346      }
4347    }
4348
4349    &:selected {
4350      color: $selected_bg_color;
4351
4352      label { color: $selected_bg_color; }
4353
4354      button.image-button {
4355        color: $secondary_selected_bg_color;
4356        &:hover,
4357        &:active { color: $selected_bg_color; }
4358      }
4359    }
4360
4361    // in the sidebar case it makes no sense to click the selected row
4362    // &:selected:active { box-shadow: none; }
4363
4364    // looks like the label doesn't get all the states so work around
4365    &:selected:disabled label { @extend %selected_items:disabled; }
4366    // &:selected:backdrop:disabled label {
4367    //   @extend %selected_items:backdrop:disabled;
4368    // }
4369
4370    &.sidebar-placeholder-row {
4371      border: solid 1px $selected_bg_color;
4372    }
4373
4374    &.sidebar-new-bookmark-row {
4375      color: $selected_bg_color;
4376    }
4377
4378    &:drop(active):not(:disabled) {
4379      color: $drop_target_color;
4380      box-shadow: inset 0 1px $drop_target_color,
4381                  inset 0 -1px $drop_target_color;
4382
4383      &:selected {
4384        color: $selected_fg_color;
4385        background-color: $drop_target_color;
4386      }
4387    }
4388  }
4389}
4390
4391placesview {
4392  .server-list-button > image {
4393  }
4394
4395  .server-list-button:checked > image {
4396  }
4397
4398  row.activatable:hover { background-color: transparent; }
4399
4400  // this selects the "connect to server" label
4401  > actionbar > revealer > box > label {
4402    padding-left: rem(8px);
4403    padding-right: rem(8px);
4404  }
4405}
4406
4407
4408/*********
4409 * Paned *
4410 *********/
4411
4412paned {
4413  > separator {
4414    min-width: 1px;
4415    min-height: 1px;
4416    border-style: none;
4417    background-color: transparent;
4418    -gtk-icon-source: none; // defeats the ugly default handle decoration
4419    // using background instead of a border
4420    // since the border will get rendered twice (?)
4421    background-image: image($borders_color);
4422    background-size: $separator_narrow;
4423    transition: none;
4424
4425    &:backdrop,
4426    &:selected { // FIXME: is this needed?
4427      background-image: image($solid_light_borders_color);
4428      transition: none;
4429    }
4430
4431    window & {
4432      // do not across over GtkHeaderBar with solid border
4433      &,
4434      &:backdrop,
4435      &:selected {
4436        // FIXME: still happaned double-border though
4437        background-image: image($paned_borders_color);
4438        transition: none;
4439      }
4440    }
4441
4442    window > grid.vertical & { // do not use transparentize
4443      &,
4444      &:backdrop,
4445      &:selected {
4446        background-image: image($solid_light_borders_color);
4447        transition: none;
4448      }
4449    }
4450
4451    &.wide {
4452      min-width: rem(6px);
4453      min-height: rem(6px);
4454      margin: 0;
4455      padding: 0;
4456      // FIXME: use opaque borders to avoid double-border
4457      background-color: $bg_color;
4458      background-image: image($solid_light_borders_color),
4459                        image($solid_light_borders_color);
4460      background-size: $separator_wide;
4461
4462      &:backdrop,
4463      &:selected { // FIXME: is this needed?
4464        // background-image: none;
4465        background-image: image($solid_light_borders_color),
4466                          image($solid_light_borders_color);
4467      }
4468    }
4469  }
4470
4471  &.horizontal > separator {
4472    background-repeat: repeat-y;
4473
4474    &:dir(ltr) {
4475      margin: 0 rem(-8px) 0 0;
4476      padding: 0 rem(8px) 0 0;
4477    }
4478    &:dir(rtl) {
4479      margin: 0 0 0 rem(-8px);
4480      padding: 0 0 0 rem(8px);
4481    }
4482
4483    &.wide {
4484      background-repeat: repeat-y, repeat-y;
4485      background-position: left, right;
4486    }
4487  }
4488
4489  &.vertical > separator {
4490    margin: 0 0 rem(-8px) 0;
4491    padding: 0 0 rem(8px) 0;
4492    background-repeat: repeat-x;
4493    background-position: top;
4494
4495    &.wide {
4496      background-repeat: repeat-x, repeat-x;
4497      background-position: bottom, top;
4498    }
4499  }
4500}
4501
4502
4503/**************
4504 * GtkInfoBar *
4505 **************/
4506
4507infobar {
4508  padding: rem(5.3px);
4509  border-width: 0 0 1px;
4510  border-style: solid;
4511  // do not use transparentize
4512  border-color: $solid_light_borders_color;
4513  background-color: $secondary_dark_color;
4514}
4515
4516.info,
4517.question,
4518.warning,
4519.error {
4520  // always use dark forefground
4521  &:not(.error) {
4522    color: if($variant == 'light', $secondary_fg_color,
4523                                   $secondary_fixed_fg_color);
4524  }
4525
4526  button {
4527    @include button(flat-normal);
4528    color: $secondary_fixed_fg_color;
4529    &:hover {
4530      @include button(flat-hover);
4531      color: $fixed_fg_color;
4532    }
4533    &:active {
4534      @include button(flat-active);
4535      color: $fixed_fg_color;
4536    }
4537    &:checked {
4538      @include button(flat-checked);
4539      color: $fixed_fg_color;
4540    }
4541    &:disabled { color: $insensitive_fixed_fg_color; }
4542    &.flat {
4543      color: $secondary_fixed_fg_color;
4544      &:hover, &:active { color: $fixed_fg_color; }
4545      &:disabled { color: $insensitive_fixed_fg_color; }
4546    }
4547
4548    &.image-button {
4549      min-height: rem(13.3px);
4550      min-width: rem(13.3px);
4551      padding: rem(6.7px) rem(2.7px) rem(6.7px);
4552      border-radius: 100px;
4553      -gtk-outline-radius: 100px;
4554    }
4555  }
4556
4557  selection { background-color: darken($selected_bg_color, 10%); }
4558
4559  progressbar { // use 'white' bit and trough
4560    trough { background-color: gtkopacity($selected_fg_color, 0.2); }
4561    progress { background-color: $selected_fg_color; }
4562  }
4563}
4564
4565.info { background-color: $info_bg_color; }
4566
4567.question { background-color: $question_bg_color; }
4568
4569.warning { background-color: $warning_bg_color; }
4570
4571.error { // use white test for this
4572  color: $selected_fg_color;
4573  background-color: $error_bg_color;
4574}
4575
4576
4577/************
4578 * Tooltips *
4579 ************/
4580
4581tooltip {
4582  &.background {
4583    // background-color needs to be set this way otherwise it gets drawn twice
4584    // see https://bugzilla.gnome.org/show_bug.cgi?id=736155 for details.
4585    border: 1px solid gtkopacity($inverted_dark_color, 0.9);
4586    background-color: gtkopacity($inverted_dark_color, 0.9);
4587    background-clip: padding-box;
4588  }
4589
4590  color: $inverted_fg_color;
4591  padding: rem(4px);
4592  border-radius: 2px;
4593  box-shadow: none; // otherwise it gets inherited by windowframe.csd
4594
4595  // FIXME: we need a border or tooltips vanish on black background.
4596  decoration { background-color: transparent; }
4597
4598  * { // Yeah this is ugly
4599    background-color: transparent;
4600    color: $inverted_fg_color;
4601  }
4602}
4603
4604
4605/*****************
4606 * Color Chooser *
4607 *****************/
4608
4609colorswatch {
4610  // This widget is made of two boxes one on top of the other,
4611  // the lower box is colorswatch {} the other one is
4612  // colorswatch > .overlay {}, colorswatch has the programmatically set
4613  // background, so most of the style is applied to the overlay box.
4614
4615  box-shadow: $z-depth-1;
4616
4617  // we need to re-set the shadow here since it get axed by the previous bit
4618  &:selected { }
4619
4620  // base color corners rounding
4621  // to avoid the artifacts caused by rounded corner anti-aliasing
4622  // the base color sports a bigger radius.
4623  // nth-child is needed by the custom color strip.
4624  // The :not() madness is needed since actually the overlay is
4625  // selectable by colorswatch > .overlay and colorswatch.overlay,
4626  // I know it's weird, but this is gtk+, not a browser.
4627  &.top {
4628    border-top-left-radius: 2px;
4629    border-top-right-radius: 2px;
4630  }
4631  &.bottom {
4632    border-bottom-left-radius: 2px;
4633    border-bottom-right-radius: 2px;
4634  }
4635  &.left, &:first-child:not(.overlay):not(.top) {
4636    border-top-left-radius: 2px;
4637    border-bottom-left-radius: 2px;
4638  }
4639  &.right, &:last-child:not(.overlay):not(.bottom) {
4640    border-top-right-radius: 2px;
4641    border-bottom-right-radius: 2px;
4642  }
4643  &:only-child:not(.overlay) { border-radius: 2px; }
4644
4645  // overlay corner rounding
4646  &.top > .overlay {
4647    border-top-left-radius: 2px;
4648    border-top-right-radius: 2px;
4649  }
4650  &.bottom > .overlay {
4651    border-bottom-left-radius: 2px;
4652    border-bottom-right-radius: 2px;
4653  }
4654  &:first-child:not(.top) > .overlay {
4655    border-top-left-radius: 2px;
4656    border-bottom-left-radius: 2px;
4657  }
4658  &:last-child:not(.bottom) > .overlay {
4659    border-top-right-radius: 2px;
4660    border-bottom-right-radius: 2px;
4661  }
4662  &:only-child > .overlay { border-radius: 2px; }
4663
4664  // hover effect
4665  &:hover { box-shadow: $z-depth-2; }
4666
4667  // no hover effect for the colorswatch in the color editor
4668  GtkColorEditor & {
4669    border-radius: 2px; // same radius as the entry
4670    &:hover { box-shadow: $z-depth-1; }
4671  }
4672
4673  // indicator and keynav outline colors
4674  &.color-dark {
4675    color: white;
4676  }
4677  &.color-light {
4678    color: gtkopacity(black, 0.8);
4679  }
4680
4681  // border color
4682  &.overlay,
4683  &.overlay:selected {
4684  }
4685
4686  // make the add color button looks like, well, a button
4687  &#add-color-button {
4688  background-image: linear-gradient(to right,
4689                                    $error_bg_color 25%,
4690                                    $warning_bg_color 25%, $warning_bg_color 50%,
4691                                    $info_bg_color 50%, $info_bg_color 75%,
4692                                    $question_bg_color 75%);
4693  color: white;
4694  }
4695}
4696
4697// colorscale popup
4698colorchooser .popover.osd {
4699  padding: 3px;
4700  border-style: solid;
4701  border-width: 9px;
4702  border-radius: 2px;
4703  border-image: -gtk-scaled(url("assets/osd-shadow#{$asset_suffix}.png"),
4704                            url("assets/osd-shadow#{$asset_suffix}@2.png"))
4705                10 / 10px stretch;
4706  box-shadow: none;
4707  color: $inverted_fg_color;
4708  background-color: $inverted_dark_color;
4709  &:backdrop {
4710    border-image: -gtk-scaled(url("assets/osd-shadow-backdrop#{$asset_suffix}.png"),
4711                              url("assets/osd-shadow-backdrop#{$asset_suffix}@2.png"))
4712                  10 / 10px stretch;
4713  }
4714
4715  label {
4716    color: $accent_color;
4717    font-weight: 700;
4718  }
4719}
4720
4721
4722/********
4723 * Misc *
4724 ********/
4725
4726// content view (grid/list)
4727.content-view {
4728  background-color: $bg_color;
4729  // &:hover { -gtk-icon-effect: highlight; }
4730  & rubberband { @extend rubberband; }
4731}
4732
4733@keyframes volume_hover {
4734  from {
4735    background-image: -gtk-gradient(radial,
4736                                    center center, 0,
4737                                    center center, 0.001,
4738                                    to(gtkalpha(currentColor, 0)),
4739                                    to(transparent));
4740  }
4741  to {
4742    background-image: -gtk-gradient(radial,
4743                                    center center, 0,
4744                                    center center, 0.5,
4745                                    to(gtkalpha(currentColor, 0.1)),
4746                                    to(transparent));
4747  }
4748}
4749
4750.scale-popup {
4751   .osd & { @extend %osd; }
4752
4753   .osd & button.flat { // FIXME: quick hack, redo properly
4754   }
4755
4756  .osd & .vertical button,
4757  & .vertical button { // +/- buttons on GtkVolumeButton popup
4758    // padding: rem(10.7px);
4759    border-radius: 100px;
4760    -gtk-outline-radius: 100px;
4761    background-color: transparent;
4762    color: $secondary_fg_color;
4763
4764    &:first-child { // '+' button
4765      &:hover {
4766        @include button(flat-hover);
4767        background: none;
4768        color: $success_color;
4769        animation: volume_hover 0.2s linear forwards;
4770      }
4771      &:disabled {
4772        @include button(flat-insensitive);
4773        background: none;
4774        color: gtkalpha($success_color, 0.4);
4775      }
4776    }
4777    &:last-child { // '-' button
4778      &:hover {
4779        @include button(flat-hover);
4780        background: none;
4781        color: $error_color;
4782        animation: volume_hover 0.2s linear forwards;
4783      }
4784      &:disabled {
4785        @include button(flat-insensitive);
4786        background: none;
4787        color: gtkalpha($error_color, 0.4);
4788      }
4789    }
4790  }
4791  .osd & button,
4792  button {
4793    border-radius: 100px;
4794    -gtk-outline-radius: 100px;
4795    background-color: transparent;
4796    color: $secondary_fg_color;
4797
4798    &:first-child { // '-' button
4799      &:hover {
4800        @include button(flat-hover);
4801        background: none;
4802        color: $error_color;
4803        animation: spin_hover 0.2s linear forwards;
4804      }
4805      &:disabled {
4806        @include button(flat-insensitive);
4807        background: none;
4808        color: gtkalpha($error_color, 0.4);
4809      }
4810    }
4811    &:last-child { // '+' button
4812      &:hover {
4813        @include button(flat-hover);
4814        background: none;
4815        color: $success_color;
4816        animation: spin_hover 0.2s linear forwards;
4817      }
4818      &:disabled {
4819        @include button(flat-insensitive);
4820        background: none;
4821        color: gtkalpha($success_color, 0.4);
4822      }
4823    }
4824  }
4825}
4826
4827button.flat.scale { // standalone Speaker/Mic buttons
4828  // I assume both are image-button *by default*
4829  // with the image-button/text-button classes automagically applied
4830  // depending on the button child these selectors can be deleted.
4831  // @extend %image_button;
4832  min-width: rem(17.3px);
4833  min-height: rem(17.3px);
4834  padding: rem(10px);
4835  border-radius: 100px;
4836  -gtk-outline-radius: 100px;
4837}
4838
4839.nautilus-window .floating-bar {
4840  @extend %osd;
4841  // @extend toolbar.osd;
4842  padding: rem(1.3px) 0 rem(2.7px);
4843  border: 1px solid transparent;
4844  border-radius: 0;
4845  color: $inverted_secondary_fg_color;
4846  background-color: $inverted_dark_color;
4847  transition: none;
4848
4849  button {
4850    min-height: rem(13.3px);
4851    min-width: rem(13.3px);
4852    padding: rem(4px);
4853    margin: 0 rem(4px);
4854    color: $secondary_accent_color;
4855    &:hover,
4856    &:active,
4857    &:checked { color: $accent_color; }
4858    &:disabled { color: gtkopacity($accent_color, 0.4); }
4859  }
4860
4861  spinner {
4862    min-height: rem(12px);
4863    min-width: rem(12px);
4864    padding: rem(6.7px) 0 rem(6.7px);
4865    margin: 0 rem(-1px);
4866  }
4867}
4868
4869// axes left border and border radius
4870.nautilus-window .floating-bar.bottom.left {
4871  border-width: 1px 1px 0 0;
4872  border-radius: 0 2px + 1px 0 0;
4873  // border-width: 8px 8px 0 0;
4874  // border-image-width: 10px 10px 0 0;
4875}
4876
4877// axes right border and border radius
4878.nautilus-window .floating-bar.bottom.right {
4879  border-width: 1px 0 0 1px;
4880  border-radius: 2px + 1px 0 0 0;
4881  // border-width: 8px 0 0 8px;
4882  // border-image-width: 10px 0 0 10px;
4883}
4884
4885
4886/**********************
4887 * Window Decorations *
4888 *********************/
4889
4890decoration {
4891  transition: none;
4892  border-radius: 2px 2px 0 0;
4893  // lamefun trick to get rounded borders regardless of CSD use
4894  border-width: 0;
4895  box-shadow: $z-depth-4;
4896
4897  // FIXME rationalize shadows
4898
4899  // this is used for the resize cursor area
4900  margin: 8px;
4901
4902  &:backdrop {
4903    // the transparent shadow here is to enforce that the shadow extents don't
4904    // change when we go to backdrop, to prevent jumping windows.
4905    // The biggest shadow should be in the same order then in the active state
4906    // or the jumping will happen during the transition.
4907    box-shadow: $z-depth-2-backdrop;
4908    transition: none;
4909  }
4910
4911  .fullscreen &,
4912  .maximized &,
4913  .tiled & {
4914    border-radius: 0;
4915    transition: none;
4916  }
4917
4918  .popup & { box-shadow: none; }
4919
4920  // server-side decorations as used by mutter
4921  .ssd & {
4922    button {
4923      @extend button.flat;
4924      border-radius: 100px;
4925      -gtk-outline-radius: 100px;
4926    }
4927
4928    // just doing borders, wm draws actual shadows
4929    // otherwise incorrect shadows are appeared
4930    box-shadow: $z-depth-1-backdrop;
4931
4932    .tiled & .titlebar {
4933      @extend %tiled_integration;
4934      transition: none;
4935    }
4936    .maximized & .titlebar {
4937      @extend %maxd_integration;
4938      transition: none;
4939    }
4940  }
4941
4942  .csd.popup & {
4943    border-radius: 2px;
4944    box-shadow: $z-depth-3;
4945  }
4946  tooltip.csd & {
4947    border-radius: 2px;
4948    box-shadow: $z-depth-2;
4949  }
4950  message-dialog.csd & {
4951    border-radius: 2px;
4952    box-shadow: $z-depth-4;
4953    &:backdrop {
4954      box-shadow: $z-depth-2-backdrop;
4955      transition: none;
4956    }
4957  }
4958
4959  .solid-csd & {
4960    border-radius: 2px 2px 0 0;
4961    margin: -1px;
4962    background-color: $bg_color;
4963    border: none;
4964    box-shadow: none;
4965  }
4966}
4967
4968// Window manager buttons
4969.csd headerbar,
4970.csd .titlebar {
4971  button.titlebutton,
4972  &.selection-mode button.titlebutton {
4973    @extend %fade_effect;
4974    @extend button.flat;
4975    min-width: rem(13.3px);
4976    min-height: rem(13.3px);
4977    padding: rem(10px);
4978    border-radius: 100px;
4979    -gtk-outline-radius: 100px;
4980    
4981
4982    &.close,
4983    &.minimize,
4984    &.maximize {
4985      &:hover:backdrop,
4986      &:active:backdrop { opacity: 1.0; }
4987
4988      > image {
4989        min-height: 16px;
4990	min-width: 16px;
4991        color: transparent;
4992        background-size: 16px 16px;
4993        background-repeat: no-repeat;
4994        background-position: center;
4995      }
4996    }
4997
4998    // raised 'Close' button
4999    &.close {
5000      > image {
5001        background-image: -gtk-scaled(url("assets/window-close.png"),
5002                                      url("assets/window-close@2.png"));
5003      }
5004
5005      &:hover {
5006        @include button(hover);
5007        color: $selected_fg_color;
5008        background-color: $destructive_color;
5009
5010        > image {
5011          background-image: -gtk-scaled(url("assets/window-close-active.png"),
5012                                        url("assets/window-close-active@2.png"));
5013        }
5014      }
5015      &:active {
5016        @include button(active);
5017        color: $selected_fg_color;
5018        background-color: $selected_bg_color;
5019
5020        > image {
5021          background-image: -gtk-scaled(url("assets/window-close-active.png"),
5022                                        url("assets/window-close-active@2.png"));
5023        }
5024      }
5025    }
5026
5027    &.minimize {
5028      > image {
5029        background-image: -gtk-scaled(url("assets/window-minimize.png"),
5030                                      url("assets/window-minimize@2.png"));
5031      }
5032
5033      &:hover,
5034      &:active {
5035        > image {
5036          background-image: -gtk-scaled(url("assets/window-minimize-active.png"),
5037                                        url("assets/window-minimize-active@2.png"));
5038        }
5039      }
5040    }
5041
5042    &.maximize {
5043      > image {
5044        background-image: -gtk-scaled(url("assets/window-maximize.png"),
5045                                      url("assets/window-maximize@2.png"));
5046      }
5047
5048      &:hover,
5049      &:active {
5050        > image {
5051          background-image: -gtk-scaled(url("assets/window-maximize-active.png"),
5052                                        url("assets/window-maximize-active@2.png"));
5053        }
5054      }
5055    }
5056  }
5057}
5058
5059.csd.maximized headerbar,
5060.csd.maximized .titlebar {
5061  & button.titlebutton,
5062  &.selection-mode button.titlebutton {
5063    &.maximize {
5064      > image {
5065        background-image: -gtk-scaled(url("assets/window-unmaximize.png"),
5066                                      url("assets/window-unmaximize@2.png"));
5067      }
5068
5069      &:hover,
5070      &:active {
5071        > image {
5072          background-image: -gtk-scaled(url("assets/window-unmaximize-active.png"),
5073                                        url("assets/window-unmaximize-active@2.png"));
5074        }
5075      }
5076    }
5077  }
5078}
5079
5080// specific button styling for SSDs
5081.ssd .titlebar {
5082  button.titlebutton {
5083    &.close,
5084    &.minimize,
5085    &.maximize { // reset styling
5086      color: transparent;
5087      background-size: 28px 28px;
5088      background-repeat: no-repeat;
5089      background-position: center;
5090      background: none;
5091      box-shadow: none;
5092      &:backdrop,
5093      &:hover:backdrop,
5094      &:active:backdrop { color: transparent; }
5095    }
5096
5097    @each $_class,
5098          $_state,
5099          $_shadow in ('', '', none),
5100                      (':hover', '-hover', $z-depth-2),
5101                      (':active', '-active', $z-depth-2),
5102                      (':backdrop', '-backdrop', none),
5103                      (':backdrop:hover', '-backdrop-hover', $z-depth-2),
5104                      (':backdrop:active', '-backdrop-active', $z-depth-2) {
5105      &.close#{$_class} {
5106        background-image: -gtk-scaled(
5107                          url("assets/window-close-ssd#{$_state}.png"),
5108                          url("assets/window-close-ssd#{$_state}@2.png"));
5109        box-shadow: #{$_shadow};
5110      }
5111    }
5112
5113    @each $_class, $_state in ('', ''),
5114                              (':hover', '-hover'),
5115                              (':active', '-active'),
5116                              (':backdrop', '-backdrop'),
5117                              (':backdrop:hover', '-backdrop-hover'),
5118                              (':backdrop:active', '-backdrop-active') {
5119      &.minimize#{$_class} {
5120        background-image: -gtk-scaled(
5121                          url("assets/window-minimize-ssd#{$_state}.png"),
5122                          url("assets/window-minimize-ssd#{$_state}@2.png"));
5123      }
5124    }
5125
5126    @each $_class, $_state in ('', ''),
5127                              (':hover', '-hover'),
5128                              (':active', '-active'),
5129                              (':backdrop', '-backdrop'),
5130                              (':backdrop:hover', '-backdrop-hover'),
5131                              (':backdrop:active', '-backdrop-active') {
5132      &.maximize#{$_class} {
5133        background-image: -gtk-scaled(
5134                          url("assets/window-maximize-ssd#{$_state}.png"),
5135                          url("assets/window-maximize-ssd#{$_state}@2.png"));
5136      }
5137    }
5138  }
5139}
5140
5141.maximized.ssd .titlebar {
5142  button.titlebutton {
5143    @each $_class, $_state in ('', ''),
5144                              (':hover', '-hover'),
5145                              (':active', '-active'),
5146                              (':backdrop', '-backdrop'),
5147                              (':backdrop:hover', '-backdrop-hover'),
5148                              (':backdrop:active', '-backdrop-active') {
5149      &.maximize#{$_class} {
5150        background-image: -gtk-scaled(
5151                          url("assets/window-unmaximize-ssd#{$_state}.png"),
5152                          url("assets/window-unmaximize-ssd#{$_state}@2.png"));
5153      }
5154    }
5155  }
5156}
5157
5158.ssd decoration .titlebar {
5159  // shrink titlebar height for SSD
5160  button.titlebutton {
5161    min-width: 26.7px;
5162    min-height: 26.7px;
5163    padding: 0;
5164  }
5165}
5166
5167// catch all extend :)
5168%selected_items {
5169  background-color: $selected_bg_color;
5170
5171  @at-root %nobg_selected_items, & {
5172    color: $selected_fg_color;
5173    &:disabled { color: $insensitive_selected_fg_color; }
5174    &:backdrop {
5175      // color: $backdrop_selected_fg_color;
5176      &:disabled { color: $insensitive_selected_fg_color; }
5177    }
5178  }
5179}
5180
5181.monospace { font-family: Monospace; }
5182
5183
5184/**********************
5185 * Touch Copy & Paste *
5186 *********************/
5187
5188// touch selection handlebars for the Popover.osd above
5189cursor-handle {
5190  background-color: $success_color;
5191  background-image: none;
5192  box-shadow: none;
5193  border-style: none;
5194  @each $s,$as in ('',''),
5195                  (':hover','-hover'),
5196                  (':active','-active') { // no need for insensitive
5197                                          // and backdrop
5198                    &.top#{$s}:dir(ltr), &.bottom#{$s}:dir(rtl) {
5199                      $_url: 'assets/text-select-start#{$as}#{$asset_suffix}';
5200                      -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
5201                                                    url('#{$_url}@2.png'));
5202                      padding-left: 10px;
5203                    }
5204                    &.bottom#{$s}:dir(ltr), &.top#{$s}:dir(rtl) {
5205                      $_url: 'assets/text-select-end#{$as}#{$asset_suffix}';
5206                      -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
5207                                                    url('#{$_url}@2.png'));
5208                      padding-right: 10px;
5209                    }
5210                    &.insertion-cursor#{$s}:dir(ltr),
5211                    &.insertion-cursor#{$s}:dir(rtl) {
5212                      $_url: 'assets/slider-horz-scale-has-marks-above#{$as}#{$asset_suffix}';
5213                      -gtk-icon-source: -gtk-scaled(url('#{$_url}.png'),
5214                                                    url('#{$_url}@2.png'));
5215     }
5216  }
5217}
5218
5219// Decouple the font of context menus from their entry/textview
5220.context-menu {
5221  font: initial;
5222}
5223
5224popover.touch-selection {
5225  font: initial;
5226  color: $fg_color;
5227  background-color: $base_color;
5228  box-shadow: $z-depth-2;
5229  &:backdrop { box-shadow: $z-depth-1; }
5230  button {
5231  }
5232}
5233
5234button.circular {
5235  border-radius: 100px;
5236  -gtk-outline-radius: 100px;
5237
5238  label { padding: 0; }
5239}
5240
5241// shortcut window keys
5242.keycap {
5243  min-width: rem(20px);
5244  min-height: rem(26px);
5245  margin-top: rem(2.7px);
5246  margin-bottom: rem(3.3px);
5247  padding: 0 rem(6px);
5248  border: none;
5249  border-radius: 2px;
5250  color: $fg_color;
5251  background-color: $base_color;
5252  box-shadow: $z-depth-1;
5253  font-size: 90%;
5254  font-weight: 500;
5255}
5256
5257// FIXME: needs to be done widget by widget,
5258// this wildcard should really die
5259*:drop(active):focus,
5260*:drop(active) {
5261  border-color: $drop_target_color;
5262  box-shadow: inset 0 0 0 1px $drop_target_color;
5263  caret-color: $drop_target_color;
5264}
5265
5266// FIXME: aggregate with buttons
5267stackswitcher button.circular,
5268stackswitcher button.text-button.circular {
5269  min-width: rem(37.3px);
5270  min-height: rem(37.3px);
5271  padding: 0;
5272}
5273
5274// undershoot for speciic-cases
5275undershoot {
5276  box > scrolledwindow & {
5277    &.top { @include undershoot(top, $bg_color); }
5278    &.bottom { @include undershoot(bottom, $bg_color); }
5279    &.left { @include undershoot(left, $bg_color); }
5280    &.right { @include undershoot(right, $bg_color); }
5281  }
5282
5283  placessidebar &,
5284  .sidebar & {
5285    &.top { @include undershoot(top, $secondary_dark_color); }
5286    &.bottom { @include undershoot(bottom, $secondary_dark_color); }
5287    &.left { @include undershoot(left, $secondary_dark_color); }
5288    &.right { @include undershoot(right, $secondary_dark_color); }
5289  }
5290}
5291