logo

pleroma-fe

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

chat_list_item.scss (1210B)

    

  1. .chat-list-item {
  2.   display: flex;
  3.   flex-direction: row;
  4.   overflow: hidden;
  5.   box-sizing: border-box;
  6.   cursor: pointer;
  8.   :focus {
  9.     outline: none;
  10.   }
  12.   .chat-list-item-left {
  13.     margin-right: 1em;
  14.   }
  16.   .chat-list-item-center {
  17.     width: 100%;
  18.     box-sizing: border-box;
  19.     overflow: hidden;
  20.     word-wrap: break-word;
  21.   }
  23.   .heading {
  24.     width: 100%;
  25.     display: flex;
  26.     justify-content: space-between;
  27.     line-height: 1em;
  28.   }
  30.   .heading-right {
  31.     white-space: nowrap;
  32.   }
  34.   .name-and-account-name {
  35.     text-overflow: ellipsis;
  36.     white-space: nowrap;
  37.     overflow: hidden;
  38.     flex-shrink: 1;
  39.     line-height: var(--post-line-height);
  40.   }
  42.   .chat-preview {
  43.     display: flex;
  44.     overflow: hidden;
  45.     white-space: nowrap;
  46.     text-overflow: ellipsis;
  47.     margin: 0.35em 0;
  48.     color: var(--textFaint);
  49.     width: 100%;
  50.   }
  52.   a {
  53.     color: var(--linkFaint);
  54.     text-decoration: none;
  55.     pointer-events: none;
  56.   }
  58.   &:hover .animated.avatar {
  59.     canvas {
  60.       display: none;
  61.     }
  63.     img {
  64.       visibility: visible;
  65.     }
  66.   }
  68.   .chat-preview-body {
  69.     --emoji-size: 1.4em;
  71.     padding-right: 1em;
  72.   }
  74.   .time-wrapper {
  75.     line-height: var(--post-line-height);
  76.   }
  77. }