colorshell/ags/style.scss

@use "sass:color";

@use "./style/wal";
@use "./style/mixins";
@use "./style/functions";
@use "./style/colors";

@use "./style/bar";
@use "./style/osd";
@use "./style/control-center";
@use "./style/center-window";
@use "./style/float-notifications";
@use "./style/logout-menu";
@use "./style/apps-window";
@use "./style/runner";


* {
  @include mixins.reset-props;

  /*&:focus {
    box-shadow: inset 0 0 0 2px colors.$fg-primary;
  }*/
}

entry {
  background: colors.$bg-primary;
  padding: 10px 9px;
  border-radius: 12px;

  &:focus {
    box-shadow: inset 0 0 0 2px colors.$bg-secondary;
  }

  & image.left {
    margin-right: 6px;
  }
}

.custom-dialog-container {
  background: colors.$bg-translucent;
  padding: 18px;
  border-radius: 24px;

  & .title {
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 10px;
  }

  & .text {
    font-size: 16px;
    font-weight: 400;
  }

  & .options {
    & button {
      background: colors.$bg-primary;
      border-radius: 12px;
      padding: 9px 6px;

      & label {
        font-size: 16px;
        font-weight: 600;
      }

      margin: {
        left: 4px;
        right: 4px;
      };

      &:hover, &:focus {
        background: colors.$bg-secondary;
      }
    }
  }

  &.entry-popup-box entry {
    margin-bottom: 10px;

    &.password {
      font-size: 14px;
      font-family: "Adwaita Mono", "Cantarell Mono", "Noto Sans Mono", monospace;
      font-weight: 400;
    }
  }
}

.notification {
  background: colors.$bg-translucent-secondary;
  border-radius: 16px;

  & > .top {
    padding: 8px;
    padding-bottom: 0;

    & .app-icon {
      margin-right: 6px;
    }

    & .app-name {
      font-size: 12px;
    }


    & label.time {
      font-size: 11px;
      font-weight: 500;
      color: colors.$fg-disabled;
      margin-right: 6px;
    }

    & button.close {
      padding: 2px;
      border-radius: 8px;

      &:hover, &:focus {
        background: colors.$bg-secondary;
      }
    }

    & icon.close {
      font-size: 16px;
    }
  }

  & .content {
    padding: 6px;
    padding-top: 0;

    & .image {
      $size: 78px;
      min-width: $size;
      min-height: $size;
      background-size: cover;
      background-position: center;
      margin: 6px;
      border-radius: 8px;
    }

    & .summary {
      font-size: 17.3px;
      font-weight: 700;
      margin-bottom: 4px;
    }

    & .body {
      font-size: 14.5px;
      font-weight: 400;
    }
  }

  & .actions {
    padding: 6px;

    & button.action {
      @include mixins.hover-shadow;

      border-radius: 4px;
      background: colors.$bg-secondary;
      padding: 6px;

      & label {
        font-size: 14px;
        font-weight: 600;
      }

      &:first-child {
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
      }
      &:last-child {
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
      }
    }
  }
}

tooltip {
  padding: 16px;

  & > box {
    padding: 7px 8px;
    border-radius: 10px;
    background: rgba(colors.$bg-primary, .98);
    font-size: 13.1px;
    font-weight: 500;
    color: colors.$fg-primary;
    box-shadow: 0 1px 4px 1px rgba(colors.$bg-primary, .6);
  }
}

menu {
  padding: 4px;
  background: wal.$background;
  border-radius: 14px;
                               
  & separator {
    margin: 0 4px;
    color: wal.$background;
  }
                               
  & menuitem {
    padding: 8px 16px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
                               
    &:hover, &:focus {
      background: wal.$color1;
    }
  }
}

.button-row {
  & > button {
    background: colors.$bg-secondary;
    margin: 0 1px;
    padding: 4px 6px;
    border-radius: 2px;

    &:hover {
      background: colors.$bg-tertiary;
    }

    &:first-child {
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      margin-left: 0;
    }

    &:last-child {
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      margin-right: 0;
    }
  }
}

selection {
  background: colors.$bg-tertiary;
}

label.nf,
button.nf label {
  font-size: 12px;
  font-family: "Symbols Nerd Font Mono", "Noto Sans Nerd Font Mono",
    "0xProto Nerd Font Mono", "Fira Code Nerd Font Mono", 
    "Symbols Nerd Font", "Noto Sans Nerd Font", "Fira Code Nerd Font",
    "Font Awesome";
}

trough {
  background: functions.toRGB(color.adjust($color: wal.$color1, $lightness: -20%));
  border-radius: 8px;
  margin: 2px 0;
}

trough highlight {
  background: wal.$color1;
  min-height: .9em;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}

trough slider {
  border-radius: 50%;
  margin: -2px 0;
  background: wal.$foreground;
  margin-left: -1px;
  min-width: 1.2em;
  min-height: 1.2em;
}

scrollbar trough {
  @include mixins.reset-props;

  background: colors.$bg-translucent;
  border-radius: 8px;

  & slider {
    @include mixins.reset-props;

    min-width: .45em;
    background: colors.$bg-tertiary;
    border-radius: 12px;

    &:hover, &:active, &:focus {
      margin: 0 2px;
    }
  }

  &:hover, &:active, &:focus {
    padding: 0 2px;
  }
}

slider, scale {
  & marks mark {
    & indicator {
      color: colors.$fg-disabled;
      min-width: 1px;
      min-height: 6px;
    }

    & label {
      font-size: 11px;
      font-weight: 400;
      color: colors.$fg-disabled;
    }
  }
}