logo

mastofe

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

emoji_picker.scss (3376B)

    

  1. .emoji-mart {
  2.   &,
  3.   * {
  4.     box-sizing: border-box;
  5.     line-height: 1.15;
  6.   }
  8.   font-size: 13px;
  9.   display: inline-block;
  10.   color: $ui-base-color;
  12.   .emoji-mart-emoji {
  13.     padding: 6px;
  14.   }
  15. }
  17. .emoji-mart-bar {
  18.   border: 0 solid darken($ui-secondary-color, 8%);
  20.   &:first-child {
  21.     border-bottom-width: 1px;
  22.     border-top-left-radius: 5px;
  23.     border-top-right-radius: 5px;
  24.     background: $ui-secondary-color;
  25.   }
  27.   &:last-child {
  28.     border-top-width: 1px;
  29.     border-bottom-left-radius: 5px;
  30.     border-bottom-right-radius: 5px;
  31.     display: none;
  32.   }
  33. }
  35. .emoji-mart-anchors {
  36.   display: flex;
  37.   justify-content: space-between;
  38.   padding: 0 6px;
  39.   color: $ui-primary-color;
  40.   line-height: 0;
  41. }
  43. .emoji-mart-anchor {
  44.   position: relative;
  45.   flex: 1;
  46.   text-align: center;
  47.   padding: 12px 4px;
  48.   overflow: hidden;
  49.   transition: color .1s ease-out;
  50.   cursor: pointer;
  52.   &:hover {
  53.     color: darken($ui-primary-color, 4%);
  54.   }
  55. }
  57. .emoji-mart-anchor-selected {
  58.   color: darken($ui-highlight-color, 3%);
  60.   &:hover {
  61.     color: darken($ui-highlight-color, 3%);
  62.   }
  64.   .emoji-mart-anchor-bar {
  65.     bottom: 0;
  66.   }
  67. }
  69. .emoji-mart-anchor-bar {
  70.   position: absolute;
  71.   bottom: -3px;
  72.   left: 0;
  73.   width: 100%;
  74.   height: 3px;
  75.   background-color: darken($ui-highlight-color, 3%);
  76. }
  78. .emoji-mart-anchors {
  79.   i {
  80.     display: inline-block;
  81.     width: 100%;
  82.     max-width: 22px;
  83.   }
  85.   svg {
  86.     fill: currentColor;
  87.     max-height: 18px;
  88.   }
  89. }
  91. .emoji-mart-scroll {
  92.   overflow-y: scroll;
  93.   height: 270px;
  94.   max-height: 35vh;
  95.   padding: 0 6px 6px;
  96.   background: $simple-background-color;
  97.   will-change: transform;
  99.   &::-webkit-scrollbar-track:hover,
  100.   &::-webkit-scrollbar-track:active {
  101.     background-color: rgba($base-overlay-background, 0.3);
  102.   }
  103. }
  105. .emoji-mart-search {
  106.   padding: 10px;
  107.   padding-right: 45px;
  108.   background: $simple-background-color;
  110.   input {
  111.     font-size: 14px;
  112.     font-weight: 400;
  113.     padding: 7px 9px;
  114.     font-family: inherit;
  115.     display: block;
  116.     width: 100%;
  117.     background: rgba($ui-secondary-color, 0.3);
  118.     color: $ui-primary-color;
  119.     border: 1px solid $ui-secondary-color;
  120.     border-radius: 4px;
  122.     &::-moz-focus-inner {
  123.       border: 0;
  124.     }
  126.     &::-moz-focus-inner,
  127.     &:focus,
  128.     &:active {
  129.       outline: 0 !important;
  130.     }
  131.   }
  132. }
  134. .emoji-mart-category .emoji-mart-emoji {
  135.   cursor: pointer;
  137.   span {
  138.     z-index: 1;
  139.     position: relative;
  140.     text-align: center;
  141.   }
  143.   &:hover::before {
  144.     z-index: 0;
  145.     content: "";
  146.     position: absolute;
  147.     top: 0;
  148.     left: 0;
  149.     width: 100%;
  150.     height: 100%;
  151.     background-color: rgba($ui-secondary-color, 0.7);
  152.     border-radius: 100%;
  153.   }
  154. }
  156. .emoji-mart-category-label {
  157.   z-index: 2;
  158.   position: relative;
  159.   position: -webkit-sticky;
  160.   position: sticky;
  161.   top: 0;
  163.   span {
  164.     display: block;
  165.     width: 100%;
  166.     font-weight: 500;
  167.     padding: 5px 6px;
  168.     background: $simple-background-color;
  169.   }
  170. }
  172. .emoji-mart-emoji {
  173.   position: relative;
  174.   display: inline-block;
  175.   font-size: 0;
  177.   span {
  178.     width: 22px;
  179.     height: 22px;
  180.   }
  181. }
  183. .emoji-mart-no-results {
  184.   font-size: 14px;
  185.   text-align: center;
  186.   padding-top: 70px;
  187.   color: $ui-primary-color;
  189.   .emoji-mart-category-label {
  190.     display: none;
  191.   }
  193.   .emoji-mart-no-results-label {
  194.     margin-top: .2em;
  195.   }
  197.   .emoji-mart-emoji:hover::before {
  198.     content: none;
  199.   }
  200. }
  202. .emoji-mart-preview {
  203.   display: none;
  204. }