logo

pleroma-fe

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

emoji_picker.scss (4289B)

    

  1. .emoji-picker {
  2.   --__emoji-picker-header: 2.2em;
  4.   width: 25em;
  5.   max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
  6.   display: flex;
  7.   flex-direction: column;
  9.   &-header-image {
  10.     display: inline-flex;
  11.     justify-content: center;
  12.     align-items: center;
  13.     width: var(--__emoji-picker-header);
  14.     max-width: var(--__emoji-picker-header);
  15.     height: var(--__emoji-picker-header);
  16.     max-height: var(--__emoji-picker-header);
  18.     .still-image {
  19.       width: var(--__emoji-picker-header);
  20.       max-width: var(--__emoji-picker-header);
  21.       height: var(--__emoji-picker-header);
  22.       max-height: var(--__emoji-picker-header);
  23.       object-fit: contain;
  25.       --_still_image-label-scale: 0.5;
  26.     }
  27.   }
  29.   .keep-open,
  30.   .too-many-emoji,
  31.   .hide-custom-emoji {
  32.     padding: 0.5em;
  33.     line-height: normal;
  34.   }
  36.   .hide-custom-emoji {
  37.     padding-top: 0;
  38.   }
  40.   .too-many-emoji {
  41.     display: flex;
  42.     flex-direction: column;
  43.   }
  45.   .keep-open-label {
  46.     padding: 0 0.5em;
  47.     display: flex;
  48.   }
  50.   .heading {
  51.     display: flex;
  52.     padding: 0.7em 0.5em 0;
  53.   }
  55.   .content {
  56.     display: flex;
  57.     flex-direction: column;
  58.     flex: 1 1 auto;
  59.     min-height: 0;
  60.   }
  62.   .emoji-tabs {
  63.     flex-grow: 1;
  64.     display: flex;
  65.     flex-flow: row nowrap;
  66.     overflow-x: auto;
  67.     overflow-y: hidden;
  68.   }
  70.   .additional-tabs {
  71.     display: flex;
  72.     border-left: 1px solid;
  73.     border-left-color: var(--border);
  74.     padding-left: 0.5em;
  75.     flex: 0 0 auto;
  76.   }
  78.   .additional-tabs,
  79.   .emoji-tabs {
  80.     flex-basis: auto;
  81.     display: flex;
  82.     align-content: center;
  83.     scrollbar-width: thin;
  85.     &-item {
  86.       padding: 0 0.5em;
  87.       cursor: pointer;
  88.       width: var(--__emoji-picker-header);
  89.       max-width: var(--__emoji-picker-header);
  90.       height: var(--__emoji-picker-header);
  91.       max-height: var(--__emoji-picker-header);
  92.       display: flex;
  93.       align-items: center;
  95.       .svg-inline--fa {
  96.         font-size: 1.85em;
  97.       }
  99.       &.disabled {
  100.         opacity: 0.5;
  101.         pointer-events: none;
  102.       }
  104.       &.toggled {
  105.         border-bottom: 0.2em solid;
  106.       }
  107.     }
  108.   }
  110.   .sticker-picker {
  111.     flex: 1 1 auto;
  112.   }
  114.   .stickers,
  115.   .emoji {
  116.     &-content {
  117.       display: flex;
  118.       flex-direction: column;
  119.       flex: 1 1 auto;
  120.       min-height: 0;
  122.       &.hidden {
  123.         opacity: 0;
  124.         pointer-events: none;
  125.         position: absolute;
  126.       }
  127.     }
  128.   }
  130.   .emoji {
  131.     &-search {
  132.       padding: 0.3em;
  133.       flex: 0 0 auto;
  135.       input {
  136.         width: 100%;
  137.       }
  138.     }
  140.     &-groups {
  141.       height: 100%;
  142.       min-height: 200px;
  143.       flex: 1 1 1px;
  144.       position: relative;
  145.       overflow: auto;
  146.       scrollbar-gutter: stable both-edges;
  147.       user-select: none;
  148.       mask:
  149.         linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
  150.         linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
  151.         linear-gradient(to top, white, white);
  152.       transition: mask-size 150ms;
  153.       mask-size: 100% 20px, 100% 20px, auto;
  154.       // Autoprefixed seem to ignore this one, and also syntax is different
  155.       mask-composite: xor;
  156.       mask-composite: exclude;
  158.       &.scrolled {
  159.         &-top {
  160.           mask-size: 100% 20px, 100% 0, auto;
  161.         }
  163.         &-bottom {
  164.           mask-size: 100% 0, 100% 20px, auto;
  165.         }
  166.       }
  167.     }
  169.     &-group {
  170.       display: flex;
  171.       align-items: center;
  172.       flex-wrap: wrap;
  173.       justify-content: left;
  175.       &-title {
  176.         font-size: 0.85em;
  177.         width: 100%;
  178.         margin: 0;
  179.         padding-left: 0.3em;
  181.         &.disabled {
  182.           display: none;
  183.         }
  184.       }
  185.     }
  187.     &-item {
  188.       width: var(--emoji-size);
  189.       height: var(--emoji-size);
  190.       box-sizing: border-box;
  191.       display: flex;
  192.       line-height: var(--emoji-size);
  193.       align-items: center;
  194.       justify-content: center;
  195.       margin: 0.2em;
  196.       cursor: pointer;
  198.       .emoji-picker-emoji.-custom {
  199.         object-fit: contain;
  200.         width: var(--emoji-size);
  201.         max-width: var(--emoji-size);
  202.         height: var(--emoji-size);
  203.         max-height: var(--emoji-size);
  205.         --_still_image-label-scale: 0.5;
  206.       }
  208.       .emoji-picker-emoji.-unicode {
  209.         font-size: 1.6em;
  210.         overflow: hidden;
  211.       }
  212.     }
  213.   }
  214. }