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 {
        background: colors.$bg-secondary;
      }

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

  &.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 {
        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 {
      border-radius: 4px;
      background: colors.$bg-secondary;
      padding: 6px;

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

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

      &: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 > box {
  padding: 7px 8px;
  margin: 12px;
  margin-top: 0;
  border-radius: 12px;
  background: rgba(colors.$bg-primary, .98);
  box-shadow: 0 5px 6px 1px colors.$bg-translucent-primary;

  & label {
    font-size: 13.1px;
    font-weight: 500;
    color: colors.$fg-primary;
  }
}

popover.menu {
  background: wal.$background;
  border-radius: 14px;
  $padding: 4px;

  & contents {
    & viewport > stack > * {
      padding: 4px;
      padding-top: 0;

      & > * > * {
        & > separator {
          min-height: .5px;
          margin: 3px 2px;
          background: rgba(colors.$fg-disabled, .1);
        }
        & > *:not(separator) > * {
          padding: 6px;
          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;
}

trough {
  background: color.adjust($color: colors.$bg-primary, $lightness: -5%);
  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: 2px;
    }
  }

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

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;
    }
  }
}