logo

pleroma-fe

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

status_body.scss (2963B)

    

  1. .StatusBody {
  2.   display: flex;
  3.   flex-direction: column;
  5.   .emoji {
  6.     --_still_image-label-scale: 0.5;
  7.   }
  9.   .attachments {
  10.     margin-top: 0.5em;
  11.   }
  13.   & .text,
  14.   & .summary {
  15.     white-space: pre-wrap;
  16.     overflow-wrap: break-word;
  17.     word-wrap: break-word;
  18.     word-break: break-word;
  19.     line-height: var(--post-line-height);
  20.   }
  22.   .summary {
  23.     display: block;
  24.     font-style: italic;
  25.     padding-bottom: 0.5em;
  26.   }
  28.   .text {
  29.     &.-single-line {
  30.       white-space: nowrap;
  31.       text-overflow: ellipsis;
  32.       overflow: hidden;
  33.       height: 1.4em;
  34.     }
  35.   }
  37.   .summary-wrapper {
  38.     margin-bottom: 0.5em;
  39.     border-style: solid;
  40.     border-width: 0 0 1px;
  41.     border-color: var(--border);
  42.     flex-grow: 0;
  44.     &.-tall {
  45.       position: relative;
  47.       .summary {
  48.         max-height: 2em;
  49.         overflow: hidden;
  50.         white-space: nowrap;
  51.         text-overflow: ellipsis;
  52.       }
  53.     }
  54.   }
  56.   .text-wrapper {
  57.     display: flex;
  58.     flex-flow: column nowrap;
  60.     &.-tall-status {
  61.       position: relative;
  62.       height: 220px;
  63.       overflow-x: hidden;
  64.       overflow-y: hidden;
  65.       z-index: 1;
  67.       .media-body {
  68.         min-height: 0;
  69.         mask:
  70.           linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
  71.           linear-gradient(to top, white, white);
  73.         /* Autoprefixed seem to ignore this one, and also syntax is different */
  74.         mask-composite: xor;
  75.         mask-composite: exclude;
  76.       }
  77.     }
  78.   }
  80.   & .tall-status-hider,
  81.   & .tall-subject-hider,
  82.   & .status-unhider,
  83.   & .cw-status-hider {
  84.     display: inline-block;
  85.     word-break: break-all;
  86.     width: 100%;
  87.     text-align: center;
  88.   }
  90.   .tall-status-hider {
  91.     position: absolute;
  92.     height: 70px;
  93.     margin-top: 150px;
  94.     line-height: 110px;
  95.     z-index: 2;
  96.   }
  98.   .tall-subject-hider {
  99.     // position: absolute;
  100.     padding-bottom: 0.5em;
  101.   }
  103.   & .status-unhider,
  104.   & .cw-status-hider {
  105.     word-break: break-all;
  107.     svg {
  108.       color: inherit;
  109.     }
  110.   }
  112.   &.-compact {
  113.     align-items: top;
  114.     flex-direction: row;
  116.     --emoji-size: 16px;
  118.     & .body,
  119.     & .attachments {
  120.       max-height: 3.25em;
  121.     }
  123.     .body {
  124.       overflow: hidden;
  125.       white-space: normal;
  126.       min-width: 5em;
  127.       flex: 5 1 auto;
  128.       mask-size: auto 3.5em, auto auto;
  129.       mask-position: 0 0, 0 0;
  130.       mask-repeat: repeat-x, repeat;
  131.       mask-image: linear-gradient(to bottom, white 2em, transparent 3em);
  133.       /* Autoprefixed seem to ignore this one, and also syntax is different */
  134.       mask-composite: xor;
  135.       mask-composite: exclude;
  136.     }
  138.     .attachments {
  139.       margin-top: 0;
  140.       flex: 1 1 0;
  141.       min-width: 5em;
  142.       height: 100%;
  143.       margin-left: 0.5em;
  144.     }
  146.     .summary-wrapper {
  147.       .summary::after {
  148.         content: ": ";
  149.       }
  151.       line-height: inherit;
  152.       margin: 0;
  153.       border: none;
  154.       display: inline-block;
  155.     }
  157.     .text-wrapper {
  158.       display: inline-block;
  159.     }
  160.   }
  161. }