logo

pleroma-fe

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

chat.scss (1826B)

    

  1. .chat-view {
  2.   display: flex;
  3.   height: 100%;
  5.   .chat-view-inner {
  6.     height: auto;
  7.     width: 100%;
  8.     overflow: visible;
  9.     display: flex;
  10.   }
  12.   .chat-view-body {
  13.     box-sizing: border-box;
  14.     display: flex;
  15.     flex-direction: column;
  16.     width: 100%;
  17.     overflow: visible;
  18.     min-height: calc(100vh - var(--navbar-height));
  19.     margin: 0;
  20.     border-radius: var(--roundness);
  21.     border-bottom-left-radius: 0;
  22.     border-bottom-right-radius: 0;
  24.     &::after {
  25.       border-radius: 0;
  26.     }
  27.   }
  29.   .message-list {
  30.     padding: 0 0.8em;
  31.     height: 100%;
  32.     display: flex;
  33.     flex-direction: column;
  34.     justify-content: end;
  35.   }
  37.   .footer {
  38.     position: sticky;
  39.     bottom: 0;
  40.     z-index: 1;
  41.   }
  43.   .chat-view-heading {
  44.     grid-template-columns: auto minmax(50%, 1fr);
  45.   }
  47.   .go-back-button {
  48.     text-align: center;
  49.     line-height: 1;
  50.     height: 100%;
  51.     align-self: start;
  52.     width: var(--__panel-heading-height-inner);
  53.   }
  55.   .jump-to-bottom-button {
  56.     width: 2.5em;
  57.     height: 2.5em;
  58.     border-radius: 100%;
  59.     position: absolute;
  60.     right: 1.3em;
  61.     top: -3.2em;
  62.     display: flex;
  63.     justify-content: center;
  64.     align-items: center;
  65.     box-shadow: 0 1px 1px rgb(0 0 0 / 30%), 0 2px 4px rgb(0 0 0 / 30%);
  66.     z-index: 10;
  67.     transition: 0.35s all;
  68.     transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
  69.     opacity: 0;
  70.     visibility: hidden;
  71.     cursor: pointer;
  73.     &.visible {
  74.       opacity: 1;
  75.       visibility: visible;
  76.     }
  78.     .unread-message-count {
  79.       font-size: 0.8em;
  80.       left: 50%;
  81.       margin-top: -1rem;
  82.       padding: 0.1em;
  83.       border-radius: 50px;
  84.       position: absolute;
  85.     }
  87.     .chat-loading-error {
  88.       width: 100%;
  89.       display: flex;
  90.       align-items: flex-end;
  91.       height: 100%;
  93.       .error {
  94.         width: 100%;
  95.       }
  96.     }
  97.   }
  98. }