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_picker.scss (4631B)

    

  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.     flex-direction: column;
  53.     padding: 0.7em 0.5em 0;
  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.     overflow-y: hidden;
  69.   }
  71.   .additional-tabs {
  72.     display: flex;
  73.     border-left: 1px solid;
  74.     border-left-color: var(--border);
  75.     padding-left: 0.5em;
  76.     flex: 0 0 auto;
  77.   }
  79.   .additional-tabs,
  80.   .emoji-tabs {
  81.     flex-basis: auto;
  82.     display: flex;
  83.     align-content: center;
  84.     scrollbar-width: thin;
  86.     &-item {
  87.       padding: 0 0.5em;
  88.       cursor: pointer;
  89.       width: var(--__emoji-picker-header);
  90.       max-width: var(--__emoji-picker-header);
  91.       height: var(--__emoji-picker-header);
  92.       max-height: var(--__emoji-picker-header);
  93.       display: flex;
  94.       align-items: center;
  96.       .svg-inline--fa {
  97.         font-size: 1.85em;
  98.       }
  100.       &.disabled {
  101.         opacity: 0.5;
  102.         pointer-events: none;
  103.       }
  105.       &.toggled {
  106.         border-bottom: 0.2em solid;
  107.       }
  108.     }
  109.   }
  111.   .sticker-picker {
  112.     flex: 1 1 auto;
  113.   }
  115.   .stickers,
  116.   .emoji {
  117.     &-content {
  118.       display: flex;
  119.       flex-direction: column;
  120.       flex: 1 1 auto;
  121.       min-height: 0;
  123.       &.hidden {
  124.         opacity: 0;
  125.         pointer-events: none;
  126.         position: absolute;
  127.       }
  128.     }
  129.   }
  131.   .emoji {
  132.     &-search {
  133.       padding-bottom: 0.5em;
  134.       flex: 0 0 auto;
  136.       input {
  137.         width: 100%;
  138.       }
  139.     }
  141.     &-groups {
  142.       height: 100%;
  143.       min-height: 200px;
  144.       flex: 1 1 1px;
  145.       position: relative;
  146.       overflow: auto;
  147.       scrollbar-gutter: stable both-edges;
  148.       user-select: none;
  149.       mask:
  150.         linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
  151.         linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
  152.         linear-gradient(to top, white, white);
  153.       transition: mask-size 150ms;
  154.       mask-size: 100% 20px, 100% 20px, auto;
  155.       // Autoprefixed seem to ignore this one, and also syntax is different
  156.       mask-composite: xor;
  157.       mask-composite: exclude;
  159.       &.scrolled {
  160.         &-top {
  161.           mask-size: 100% 20px, 100% 0, auto;
  162.         }
  164.         &-bottom {
  165.           mask-size: 100% 0, 100% 20px, auto;
  166.         }
  167.       }
  168.     }
  170.     &-item {
  171.       width: var(--emoji-size);
  172.       height: var(--emoji-size);
  173.       box-sizing: border-box;
  174.       display: flex;
  175.       line-height: var(--emoji-size);
  176.       align-items: center;
  177.       justify-content: center;
  178.       margin: 0.2em;
  179.       cursor: pointer;
  181.       .emoji-picker-emoji.-custom {
  182.         object-fit: contain;
  183.         width: var(--emoji-size);
  184.         max-width: var(--emoji-size);
  185.         height: var(--emoji-size);
  186.         max-height: var(--emoji-size);
  188.         --_still_image-label-scale: 0.5;
  189.       }
  191.       .emoji-picker-emoji.-unicode {
  192.         font-size: calc(var(--emoji-size) * 0.8);
  193.         overflow: hidden;
  194.       }
  195.     }
  197.     &-group {
  198.       display: grid;
  199.       grid-template-columns: repeat(var(--__amount), 1fr);
  200.       align-items: center;
  201.       justify-items: center;
  202.       justify-content: center;
  203.       grid-template-rows: repeat(1, auto);
  205.       &.first-row {
  206.         grid-template-rows: repeat(2, auto);
  208.         .emoji-item {
  209.           grid-row: 2;
  210.         }
  211.       }
  213.       &-title {
  214.         font-size: 0.85em;
  215.         grid-column: span var(--__amount);
  216.         width: 100%;
  217.         margin: 0;
  218.         padding-left: 0.3em;
  220.         &.disabled {
  221.           display: none;
  222.         }
  223.       }
  224.     }
  225.   }
  226. }