logo

pleroma-fe

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

chat_message.scss (2347B)

    

  1. .chat-message-wrapper {
  2.   &.hovered-message-chain {
  3.     .animated.Avatar {
  4.       canvas {
  5.         display: none;
  6.       }
  8.       img {
  9.         visibility: visible;
  10.       }
  11.     }
  12.   }
  14.   .chat-message-menu {
  15.     transition: opacity 0.1s;
  16.     opacity: 0;
  17.     position: absolute;
  18.     top: -0.8em;
  20.     button {
  21.       padding-top: 0.2em;
  22.       padding-bottom: 0.2em;
  23.     }
  24.   }
  26.   .menu-icon {
  27.     cursor: pointer;
  28.   }
  30.   .popover {
  31.     width: 12em;
  32.   }
  34.   .chat-message {
  35.     display: flex;
  36.     padding-bottom: 0.5em;
  38.     .status-body:hover {
  39.       --_still-image-img-visibility: visible;
  40.       --_still-image-canvas-visibility: hidden;
  41.       --_still-image-label-visibility: hidden;
  42.     }
  43.   }
  45.   .avatar-wrapper {
  46.     margin-right: 0.72em;
  47.     width: 32px;
  48.   }
  50.   .link-preview,
  51.   .attachments {
  52.     margin-bottom: 1em;
  53.   }
  55.   .status {
  56.     background-color: var(--background);
  57.     color: var(--text);
  58.     border-radius: var(--roundness);
  59.     display: flex;
  60.     padding: 0.75em;
  61.     border: 1px solid var(--border);
  62.   }
  64.   .created-at {
  65.     position: relative;
  66.     float: right;
  67.     font-size: 0.8em;
  68.     margin: -1em 0 -0.5em;
  69.     font-style: italic;
  70.     opacity: 0.8;
  71.   }
  73.   .without-attachment {
  74.     .message-content {
  75.       // TODO figure out how to do it properly
  76.       .RichContent::after {
  77.         margin-right: 5.4em;
  78.         content: " ";
  79.         display: inline-block;
  80.       }
  81.     }
  82.   }
  84.   .pending {
  85.     .status-content.media-body,
  86.     .created-at {
  87.       color: var(--faint);
  88.     }
  89.   }
  91.   .error {
  92.     .status-content.media-body,
  93.     .created-at {
  94.       color: var(--badgeNotification);
  95.     }
  96.   }
  98.   .chat-message-inner {
  99.     display: flex;
  100.     flex-direction: column;
  101.     align-items: flex-start;
  102.     max-width: 80%;
  103.     min-width: 10em;
  104.     width: 100%;
  105.   }
  107.   .outgoing {
  108.     display: flex;
  109.     flex-flow: row wrap;
  110.     align-content: end;
  111.     justify-content: flex-end;
  113.     .chat-message-inner {
  114.       align-items: flex-end;
  115.     }
  117.     .chat-message-menu {
  118.       right: 0.4rem;
  119.     }
  120.   }
  122.   .incoming {
  123.     .chat-message-menu {
  124.       left: 0.4rem;
  125.     }
  126.   }
  128.   .chat-message-inner.with-media {
  129.     width: 100%;
  131.     .status {
  132.       width: 100%;
  133.     }
  134.   }
  136.   .visible {
  137.     opacity: 1;
  138.   }
  139. }
  141. .chat-message-date-separator {
  142.   text-align: center;
  143.   margin: 1.4em 0;
  144.   font-size: 0.9em;
  145.   user-select: none;
  146.   color: var(--textFaint);
  147. }