pleroma-fe

action_button.scss (1811B)

@import "../../mixins";
/* stylelint-disable declaration-no-important */
.quick-action {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr);
  grid-gap: 0.25em;
  align-items: center;
  height: 1.5em;
  .action-counter {
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .action-button-inner,
  .extra-button {
    margin: -0.5em;
    padding: 0.5em;
  }
  .separator {
    display: block;
    align-self: stretch;
    width: 1px;
    background-color: var(--icon);
    margin-right: 0.5em;
  }
  &.-pin {
    margin: calc(-2px - 0.25em);
    padding: 0.25em;
    border: 2px dashed var(--icon);
    border-radius: var(--roundness);
    grid-template-columns: minmax(max-content, 1fr) auto;
    .extra-button,
    .separator {
      display: none;
    }
  }
  .action-button-inner {
    display: grid;
    grid-gap: 1em;
    grid-template-columns: max-content 1fr;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
  }
}
.action-button {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  padding: 0;
  .action-button-inner {
    &:hover,
    &.-active {
      &.reply-button:not(.disabled) {
        .svg-inline--fa {
          color: var(--cBlue);
        }
      }
      &.retweet-button:not(.disabled) {
        .svg-inline--fa {
          color: var(--cGreen);
        }
      }
      &.favorite-button:not(.disabled) {
        .svg-inline--fa {
          color: var(--cOrange);
        }
      }
    }
  }
  @include unfocused-style {
    .focus-marker {
      visibility: hidden;
    }
    .active-marker {
      visibility: visible;
    }
  }
  @include focused-style {
    .focus-marker {
      visibility: visible;
    }
    .active-marker {
      visibility: hidden;
    }
  }
}