logo

pleroma-fe

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

emoji_reactions.scss (2310B)

    

  1. @use "../../mixins";
  3. .EmojiReactions {
  4.   display: flex;
  5.   margin-top: 0.25em;
  6.   flex-wrap: wrap;
  8.   --emoji-size: calc(var(--emojiSize, 1.25em) * var(--emojiReactionsScale, 1));
  10.   .emoji-reaction-container {
  11.     display: flex;
  12.     align-items: stretch;
  13.     margin-top: 0.5em;
  14.     margin-right: 0.5em;
  16.     .emoji-reaction-popover {
  17.       padding: 0;
  19.       .emoji-reaction-count-button {
  20.         margin: 0;
  21.         height: 100%;
  22.         border-top-left-radius: 0;
  23.         border-bottom-left-radius: 0;
  24.         box-sizing: border-box;
  25.         min-width: 2em;
  26.         display: inline-flex;
  27.         justify-content: center;
  28.         align-items: center;
  29.       }
  30.     }
  31.   }
  33.   .emoji-reaction {
  34.     padding-left: 0.5em;
  35.     display: flex;
  36.     align-items: center;
  37.     justify-content: center;
  38.     box-sizing: border-box;
  39.     border-top-right-radius: 0;
  40.     border-bottom-right-radius: 0;
  41.     margin: 0;
  43.     .reaction-emoji {
  44.       width: var(--emoji-size);
  45.       height: var(--emoji-size);
  46.       margin-right: 0.25em;
  47.       line-height: var(--emoji-size);
  48.       display: flex;
  49.       justify-content: center;
  50.       align-items: center;
  52.       --_still_image-label-scale: 0.3;
  53.     }
  55.     .reaction-emoji-content {
  56.       max-width: 100%;
  57.       max-height: 100%;
  58.       width: var(--emoji-size);
  59.       height: var(--emoji-size);
  60.       line-height: inherit;
  61.       overflow: hidden;
  62.       font-size: calc(var(--emoji-size) * 0.8);
  63.       margin: 0;
  65.       img {
  66.         object-fit: contain;
  67.       }
  68.     }
  70.     &:focus {
  71.       outline: none;
  72.     }
  74.     .svg-inline--fa {
  75.       color: var(--text);
  76.     }
  78.     &.-picked-reaction {
  79.       .svg-inline--fa {
  80.         color: var(--accent);
  81.       }
  82.     }
  84.     @include mixins.unfocused-style {
  85.       .focus-marker {
  86.         visibility: hidden;
  87.       }
  89.       .active-marker {
  90.         visibility: visible;
  91.       }
  92.     }
  94.     @include mixins.focused-style {
  95.       .svg-inline--fa {
  96.         color: var(--accent);
  97.       }
  99.       .focus-marker {
  100.         visibility: visible;
  101.       }
  103.       .active-marker {
  104.         visibility: hidden;
  105.       }
  106.     }
  107.   }
  109.   .emoji-reaction-expand {
  110.     padding: 0 0.5em;
  111.     margin-right: 0.5em;
  112.     margin-top: 0.5em;
  113.     display: flex;
  114.     align-items: center;
  115.     justify-content: center;
  117.     &:hover {
  118.       text-decoration: underline;
  119.     }
  120.   }
  121. }