logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://anongit.hacktivis.me/git/pleroma-fe.git/

action_button.scss (1890B)

    

  1. @import "../../mixins";
  2. /* stylelint-disable declaration-no-important */
  4. .quick-action {
  5.   justify-content: space-between;
  6.   display: flex;
  7.   align-items: baseline;
  8.   align-items: center;
  9.   height: 1.5em;
  11.   .action-counter {
  12.     overflow-x: hidden;
  13.     text-overflow: ellipsis;
  14.     white-space: nowrap;
  15.     margin-left: 1em;
  16.   }
  18.   .action-button-inner,
  19.   .extra-button {
  20.     margin: -0.5em;
  21.     padding: 0.5em;
  22.   }
  24.   .separator {
  25.     display: block;
  26.     align-self: stretch;
  27.     width: 1px;
  28.     background-color: var(--icon);
  29.     margin-left: 1em;
  30.     margin-right: 0.5em;
  31.   }
  33.   &.-pin {
  34.     margin: calc(-2px - 0.25em);
  35.     padding: 0.25em;
  36.     border: 2px dashed var(--icon);
  37.     border-radius: var(--roundness);
  38.     grid-template-columns: minmax(max-content, 1fr) auto;
  40.     .chevron-icon,
  41.     .extra-button,
  42.     .separator {
  43.       display: none;
  44.     }
  45.   }
  47.   .action-button-inner {
  48.     display: grid;
  49.     grid-gap: 1em;
  50.     grid-template-columns: max-content;
  51.     grid-auto-flow: column;
  52.     grid-auto-columns: max-content;
  53.     align-items: center;
  55.     @include unfocused-style {
  56.       .focus-marker {
  57.         visibility: hidden;
  58.       }
  60.       .active-marker {
  61.         visibility: visible;
  62.       }
  63.     }
  65.     @include focused-style {
  66.       .focus-marker {
  67.         visibility: visible;
  68.       }
  70.       .active-marker {
  71.         visibility: hidden;
  72.       }
  73.     }
  74.   }
  75. }
  77. .action-button {
  78.   display: grid;
  79.   grid-auto-flow: column;
  80.   align-items: center;
  81.   padding: 0;
  83.   .action-button-inner {
  84.     &:hover,
  85.     &.-active {
  86.       &.reply-button:not(.disabled) {
  87.         .svg-inline--fa {
  88.           color: var(--cBlue);
  89.         }
  90.       }
  92.       &.retweet-button:not(.disabled) {
  93.         .svg-inline--fa {
  94.           color: var(--cGreen);
  95.         }
  96.       }
  98.       &.favorite-button:not(.disabled) {
  99.         .svg-inline--fa {
  100.           color: var(--cOrange);
  101.         }
  102.       }
  103.     }
  104.   }
  105. }