one-dark/gtk-3.0/sass/ui/other.scss

//
// GtkScale
//
scale {
  $_marks_length: 3px;
  $_marks_distance: 1px;

  min-height: 15px;
  min-width: 15px;
  padding: 3px;

  &.horizontal {
    trough {
      padding: 0 4px;
    }
    highlight,
    fill {
      margin: 0 -4px;
    }
  }

  &.vertical {
    trough {
      padding: 4px 0;
    }
    highlight,
    fill {
      margin: -4px 0;
    }
  }

  // The slider is inside the trough, negative margin to make it bigger
  slider {
    min-height: 15px;
    min-width: 15px;
    margin: -6px;
  }

  // Click-and-hold the slider to activate
  &.fine-tune {
    // Make the trough grow in fine-tune mode
    slider {
      margin: -4px;
    }

    fill,
    highlight,
    trough {
      border-radius: 5px;
      -gtk-outline-radius: 7px;
    }
  }

  slider {
    $_slider_border: darken($button_border, 2%);

    background-clip: border-box;
    background-color: $button_bg;
    border: 1px solid $_slider_border;
    border-radius: 50%;
    box-shadow: none;

    &:disabled {
      background-color: mix($entry_bg, $bg_color, 55%);
      border-color: transparentize($_slider_border, 0.2);
    }
    &:active {
      background-color: $selected_bg_color;
      border-color: $selected_bg_color;
    }
    //OSD sliders
    .osd & {
      background-color: $osd_bg_color;
      border-color: $selected_bg_color;

      &:hover {
        background-color: $selected_bg_color;
      }
      &:active {
        background-color: darken($selected_bg_color, 10%);
        border-color: darken($selected_bg_color, 10%);
      }
    }
    //selected list-row and infobar sliders
    menuitem:hover &,
    row:selected &,
    infobar & {
      background-color: $selected_fg_color;
      border-color: $selected_fg_color;

      &:hover {
        background-color: mix($selected_fg_color, $selected_bg_color, 85%);
        border-color: mix($selected_fg_color, $selected_bg_color, 85%);
      }
      &:active {
        background-color: mix($selected_fg_color, $selected_bg_color, 50%);
        border-color: mix($selected_fg_color, $selected_bg_color, 50%);
      }
      &:disabled {
        background-color: mix($selected_fg_color, $selected_bg_color, 55%);
        border-color: mix($selected_fg_color, $selected_bg_color, 55%);
      }
    }
  }

  trough {
    $_scale_trough_bg: darken($bg_color, 5%);

    outline-offset: 2px;
    -gtk-outline-radius: 4.5px;

    border-radius: 2.5px;
    background-color: $_scale_trough_bg;

    &:disabled {
      background-color: transparentize($_scale_trough_bg, 0.45);
    }

    //OSD troughs
    .osd & {
      background-color: lighten($osd_bg_color, 7%);
      outline-color: transparentize($osd_fg_color, 0.8);
      highlight {
        background-color: $selected_bg_color;
      }

      &:disabled {
      }
    }
    // troughs in selected list-rows and infobars
    menuitem:hover & row:selected &,
    infobar & {
      background-color: transparentize(black, 0.8);

      highlight {
        background-color: $selected_fg_color;

        &:disabled {
          background-color: mix($selected_fg_color, $selected_bg_color, 55%);
        }
      }

      &:disabled {
        background-color: transparentize(black, 0.9);
      }
    }
  }

  // The colored part of the trough
  highlight {
    border-radius: 2.5px;
    background-color: $selected_bg_color;

    &:disabled {
      background-color: transparentize($selected_bg_color, 0.45);
    }
  }

  // this is another differently styled part of the trough, the most relevant use case is for example
  // in media player to indicate how much video stream as been cached
  fill {
    border-radius: 2.5px;
    background-color: transparentize($selected_bg_color, 0.5);

    &:disabled {
      background-color: transparent;
    }
  }

  value {
    color: gtkalpha(currentColor, 0.4);
  }

  marks {
    color: gtkalpha(currentColor, 0.4);

    @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom), (bottom, bottom, top),
      (top, left, right), (bottom, right, left)
    {
      &.#{$marks_class} {
        margin-#{$marks_margin}: $_marks_distance;
        margin-#{$marks_pos}: -($_marks_distance + $_marks_length);
      }
    }
  }

  &.fine-tune marks {
    @each $marks_class, $marks_pos, $marks_margin in (top, top, bottom), (bottom, bottom, top),
      (top, left, right), (bottom, right, left)
    {
      &.#{$marks_class} {
        margin-#{$marks_margin}: ($_marks_distance - 1px);
        margin-#{$marks_pos}: -($_marks_distance + $_marks_length - 2px);
      }
    }
  }
  &.horizontal {
    indicator {
      min-height: $_marks_length;
      min-width: 1px;
    }

    &.fine-tune indicator {
      min-height: ($_marks_length - 1px);
    }
  }
  &.vertical {
    indicator {
      min-height: 1px;
      min-width: $_marks_length;
    }

    &.fine-tune indicator {
      min-width: ($_marks_length - 1px);
    }
  }
}

//
// Progress bars
//
progressbar {
  padding: 0;
  font-size: smaller;
  color: transparentize($fg_color, 0.3);

  &.osd {
    min-width: 3px;
    min-height: 3px;
    background-color: transparent;

    trough {
      border-style: none;
      background-color: transparent;
      box-shadow: none;
    }
  }

  // Moving bit
  progress {
    background-color: $selected_bg_color;
    border-radius: 0px;
    box-shadow: none; //needed for clipping

    row:selected &,
    infobar & {
      background-color: $selected_fg_color;
    }
  }

  // Trough
  trough {
    border: 1px solid $button_border;
    border-radius: 2px;
    background-color: $trough_color;

    row:selected &,
    infobar & {
      background-color: transparentize(black, 0.8);
    }
  }
}

// Needed by the Mate osd when Marco with compositing is enabled
.osd {
  .progressbar {
    background-color: $selected_bg_color;
  }
  .trough {
    background-color: lighten($osd_bg_color, 75%);
  }
}

//
// Level Bar
//
levelbar {
  block {
    min-width: 32px;
    min-height: 1px;
  }
  &.vertical block {
    min-width: 1px;
    min-height: 32px;
  }

  trough {
    border: none;
    padding: 3px;
    border-radius: 3px;
    background-color: darken($bg_color, 5%);
  }

  &.horizontal.discrete block {
    margin: 0 1px;
  }
  &.vertical.discrete block {
    margin: 1px 0;
  }

  block:not(.empty) {
    border: 1px solid $selected_bg_color;
    background-color: $selected_bg_color;
    border-radius: 2px;
  }
  block.low {
    border-color: $warning_color;
    background-color: $warning_color;
  }
  block.high {
    border-color: $selected_bg_color;
    background-color: $selected_bg_color;
  }
  block.full {
    border-color: $success_color;
    background-color: $success_color;
  }
  block.empty {
    background-color: $base_color;
    border-color: $base_color;
  }
}



//vbox and hbox separators
separator {
  background-color: transparentize(black, 0.9);
  min-width: 1px;
  min-height: 1px;
}
















//
// App Notifications
//
.app-notification {
  padding: 10px;
  color: $osd_fg_color;
  background-color: $osd_bg_color;
  background-clip: border-box;
  border-radius: 0 0 2px 2px;
  border-width: 0 1px 1px 1px;
  border-style: solid;
  border-color: darken($osd_bg_color, 10%);

  border {
    border: none;
  }

  button {
    @include button(osd);
    &.flat {
      @extend %undecorated_button;
      border-color: transparentize($selected_bg_color, 1);
      &:disabled {
        @extend %undecorated_button;
      }
    }
    &:hover {
      @include button(osd-hover);
    }
    &:active,
    &:checked {
      @include button(osd-active);
      background-clip: padding-box;
    }
    &:disabled {
      @include button(osd-insensitive);
    }
  }
}

//
// Expanders
//
expander {
  arrow {
    min-width: 16px;
    min-height: 16px;
    -gtk-icon-source: -gtk-icontheme('pan-end-symbolic');

    &:dir(rtl) {
      -gtk-icon-source: -gtk-icontheme('pan-end-symbolic-rtl');
    }
    &:hover {
      color: lighten($fg_color, 30%);
    } //only lightens the arrow
    &:checked {
      -gtk-icon-source: -gtk-icontheme('pan-down-symbolic');
    }
  }
}