nix-flake/home/ags-config/resources/styles/main.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;
}

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 {
      @include mixins.button-reactive-primary;
      background: colors.$bg-primary;
      border-radius: 12px;
      padding: 9px 6px;

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

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

  &.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 contents {
  background: wal.$background;
  border-radius: 14px;
  padding: 4px;

  & viewport > stack > * > * > * {
    & > 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 {
    $active-radius: 8px;
    $corner-radius: calc($active-radius + 2px);

    background: colors.$bg-secondary;
    margin: 0 1px;
    padding: 4px 6px;
    border-radius: 2px;
    transition: 120ms linear;

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

    &:active {
      border-radius: $active-radius;
    }

    &:first-child {
      margin-left: 0;

      &:not(:active) {
        border-top-left-radius: $corner-radius;
        border-bottom-left-radius: $corner-radius;
      }
    }

    &:last-child {
      margin-right: 0;

      &:not(:active) {
        border-top-right-radius: $corner-radius;
        border-bottom-right-radius: $corner-radius;
      }
    }
  }
}

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

trough slider {
  border-radius: 50%;
  margin: -4px 0;
  background: wal.$foreground;
  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;
    }
  }
}