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 (4058B)

    

  1. $emoji-picker-header-height: 36px;
  2. $emoji-picker-header-picture-width: 32px;
  3. $emoji-picker-header-picture-height: 32px;
  4. $emoji-picker-emoji-size: 32px;
  6. .emoji-picker {
  7.   width: 25em;
  8.   max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
  9.   display: flex;
  10.   flex-direction: column;
  12.   &-header-image {
  13.     display: inline-flex;
  14.     justify-content: center;
  15.     align-items: center;
  16.     width: $emoji-picker-header-picture-width;
  17.     max-width: $emoji-picker-header-picture-width;
  18.     height: $emoji-picker-header-picture-height;
  19.     max-height: $emoji-picker-header-picture-height;
  21.     .still-image {
  22.       max-width: 100%;
  23.       max-height: 100%;
  24.       height: 100%;
  25.       width: 100%;
  26.       object-fit: contain;
  27.     }
  28.   }
  30.   .keep-open,
  31.   .too-many-emoji,
  32.   .hide-custom-emoji {
  33.     padding: 7px;
  34.     line-height: normal;
  35.   }
  37.   .hide-custom-emoji {
  38.     padding-top: 0;
  39.   }
  41.   .too-many-emoji {
  42.     display: flex;
  43.     flex-direction: column;
  44.   }
  46.   .keep-open-label {
  47.     padding: 0 7px;
  48.     display: flex;
  49.   }
  51.   .heading {
  52.     display: flex;
  53.     padding: 10px 7px 5px;
  54.   }
  56.   .content {
  57.     display: flex;
  58.     flex-direction: column;
  59.     flex: 1 1 auto;
  60.     min-height: 0;
  61.   }
  63.   .emoji-tabs {
  64.     flex-grow: 1;
  65.     display: flex;
  66.     flex-flow: row nowrap;
  67.     overflow-x: auto;
  68.   }
  70.   .additional-tabs {
  71.     display: flex;
  72.     border-left: 1px solid;
  73.     border-left-color: var(--border);
  74.     padding-left: 7px;
  75.     flex: 0 0 auto;
  76.   }
  78.   .additional-tabs,
  79.   .emoji-tabs {
  80.     flex-basis: auto;
  81.     display: flex;
  82.     align-content: center;
  84.     &-item {
  85.       padding: 0 7px;
  86.       cursor: pointer;
  87.       font-size: 1.85em;
  88.       width: $emoji-picker-header-picture-width;
  89.       max-width: $emoji-picker-header-picture-width;
  90.       height: $emoji-picker-header-picture-height;
  91.       max-height: $emoji-picker-header-picture-height;
  92.       display: flex;
  93.       align-items: center;
  95.       &.disabled {
  96.         opacity: 0.5;
  97.         pointer-events: none;
  98.       }
  100.       &.toggled {
  101.         border-bottom: 4px solid;
  102.       }
  103.     }
  104.   }
  106.   .sticker-picker {
  107.     flex: 1 1 auto;
  108.   }
  110.   .stickers,
  111.   .emoji {
  112.     &-content {
  113.       display: flex;
  114.       flex-direction: column;
  115.       flex: 1 1 auto;
  116.       min-height: 0;
  118.       &.hidden {
  119.         opacity: 0;
  120.         pointer-events: none;
  121.         position: absolute;
  122.       }
  123.     }
  124.   }
  126.   .emoji {
  127.     &-search {
  128.       padding: 5px;
  129.       flex: 0 0 auto;
  131.       input {
  132.         width: 100%;
  133.       }
  134.     }
  136.     &-groups {
  137.       height: 100%;
  138.       min-height: 200px;
  139.       flex: 1 1 1px;
  140.       position: relative;
  141.       overflow: auto;
  142.       user-select: none;
  143.       mask:
  144.         linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
  145.         linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
  146.         linear-gradient(to top, white, white);
  147.       transition: mask-size 150ms;
  148.       mask-size: 100% 20px, 100% 20px, auto;
  149.       // Autoprefixed seem to ignore this one, and also syntax is different
  150.       mask-composite: xor;
  151.       mask-composite: exclude;
  153.       &.scrolled {
  154.         &-top {
  155.           mask-size: 100% 20px, 100% 0, auto;
  156.         }
  158.         &-bottom {
  159.           mask-size: 100% 0, 100% 20px, auto;
  160.         }
  161.       }
  162.     }
  164.     &-group {
  165.       display: flex;
  166.       align-items: center;
  167.       flex-wrap: wrap;
  168.       padding-left: 5px;
  169.       justify-content: left;
  171.       &-title {
  172.         font-size: 0.85em;
  173.         width: 100%;
  174.         margin: 0;
  176.         &.disabled {
  177.           display: none;
  178.         }
  179.       }
  180.     }
  182.     &-item {
  183.       width: $emoji-picker-emoji-size;
  184.       height: $emoji-picker-emoji-size;
  185.       box-sizing: border-box;
  186.       display: flex;
  187.       line-height: $emoji-picker-emoji-size;
  188.       align-items: center;
  189.       justify-content: center;
  190.       margin: 4px;
  191.       cursor: pointer;
  193.       .emoji-picker-emoji.-custom {
  194.         object-fit: contain;
  195.         max-width: 100%;
  196.         max-height: 100%;
  197.       }
  199.       .emoji-picker-emoji.-unicode {
  200.         font-size: 24px;
  201.         overflow: hidden;
  202.       }
  203.     }
  204.   }
  205. }