logo

pleroma-fe

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

attachment.scss (4225B)

    

  1. .Attachment {
  2.   display: inline-flex;
  3.   flex-direction: column;
  4.   position: relative;
  5.   align-self: flex-start;
  6.   line-height: 0;
  7.   height: 100%;
  8.   border-style: solid;
  9.   border-width: 1px;
  10.   border-radius: var(--roundness);
  11.   border-color: var(--border);
  13.   .attachment-wrapper {
  14.     flex: 1 1 auto;
  15.     height: 100%;
  16.     position: relative;
  17.     overflow: hidden;
  18.   }
  20.   .description-container {
  21.     flex: 0 1 0;
  22.     display: flex;
  23.     padding-top: 0.5em;
  24.     z-index: 1;
  26.     p {
  27.       flex: 1;
  28.       text-align: center;
  29.       line-height: 1.5;
  30.       padding: 0.5em;
  31.       margin: 0;
  32.       white-space: nowrap;
  33.       text-overflow: ellipsis;
  34.       overflow: hidden;
  35.     }
  37.     &.-static {
  38.       position: absolute;
  39.       left: 0;
  40.       right: 0;
  41.       bottom: 0;
  42.       padding-top: 0;
  43.       background: var(--popover);
  44.       box-shadow: var(--popupShadow);
  45.     }
  46.   }
  48.   .description-field {
  49.     flex: 1;
  50.     min-width: 0;
  51.   }
  53.   & .placeholder-container,
  54.   & .image-container,
  55.   & .audio-container,
  56.   & .video-container,
  57.   & .flash-container,
  58.   & .oembed-container {
  59.     display: flex;
  60.     justify-content: center;
  61.     width: 100%;
  62.     height: 100%;
  63.   }
  65.   .image-container {
  66.     .image {
  67.       width: 100%;
  68.       height: 100%;
  69.     }
  70.   }
  72.   & .flash-container,
  73.   & .video-container {
  74.     & .flash,
  75.     & video {
  76.       width: 100%;
  77.       height: 100%;
  78.       object-fit: contain;
  79.       align-self: center;
  80.     }
  81.   }
  83.   .video-container {
  84.     border: none;
  85.     outline: none;
  86.     color: inherit;
  87.     background: transparent;
  88.   }
  90.   .audio-container {
  91.     display: flex;
  92.     align-items: flex-end;
  94.     audio {
  95.       width: 100%;
  96.       height: 100%;
  97.     }
  98.   }
  100.   .placeholder-container {
  101.     display: flex;
  102.     flex-direction: column;
  103.     align-items: center;
  104.     justify-content: center;
  105.     padding-top: 0.5em;
  106.   }
  108.   .play-icon {
  109.     position: absolute;
  110.     font-size: 64px;
  111.     top: calc(50% - 32px);
  112.     left: calc(50% - 32px);
  113.     color: rgb(255 255 255 / 75%);
  114.     text-shadow: 0 0 2px rgb(0 0 0 / 40%);
  116.     &::before {
  117.       margin: 0;
  118.     }
  119.   }
  121.   .attachment-buttons {
  122.     display: flex;
  123.     position: absolute;
  124.     right: 0;
  125.     top: 0;
  126.     margin-top: 0.5em;
  127.     margin-right: 0.5em;
  128.     z-index: 1;
  130.     .attachment-button {
  131.       padding: 0;
  132.       border-radius: var(--roundness);
  133.       text-align: center;
  134.       width: 2em;
  135.       height: 2em;
  136.       margin-left: 0.5em;
  137.       font-size: 1.25em;
  138.     }
  139.   }
  141.   &.-contain-fit {
  142.     img,
  143.     canvas {
  144.       object-fit: contain;
  145.     }
  146.   }
  148.   &.-cover-fit {
  149.     img,
  150.     canvas {
  151.       object-fit: cover;
  152.     }
  153.   }
  155.   .oembed-container {
  156.     line-height: 1.2em;
  157.     flex: 1 0 100%;
  158.     width: 100%;
  159.     margin-right: 15px;
  160.     display: flex;
  162.     img {
  163.       width: 100%;
  164.     }
  166.     .image {
  167.       flex: 1;
  169.       img {
  170.         border: 0;
  171.         border-radius: 5px;
  172.         height: 100%;
  173.         object-fit: cover;
  174.       }
  175.     }
  177.     .text {
  178.       flex: 2;
  179.       margin: 8px;
  180.       word-break: break-all;
  182.       h1 {
  183.         font-size: 1rem;
  184.         margin: 0;
  185.       }
  186.     }
  187.   }
  189.   &.-size-small {
  190.     .play-icon {
  191.       zoom: 0.5;
  192.       opacity: 0.7;
  193.     }
  195.     .attachment-buttons {
  196.       zoom: 0.7;
  197.       opacity: 0.5;
  198.     }
  199.   }
  201.   &.-editable {
  202.     padding: 0.5em;
  204.     & .description-container,
  205.     & .attachment-buttons {
  206.       margin: 0;
  207.     }
  208.   }
  210.   &.-placeholder {
  211.     display: inline-block;
  212.     color: var(--link);
  213.     overflow: hidden;
  214.     white-space: nowrap;
  215.     height: auto;
  216.     line-height: 1.5;
  218.     &:not(.-editable) {
  219.       border: none;
  220.     }
  222.     &.-editable {
  223.       display: flex;
  224.       flex-direction: row;
  225.       align-items: baseline;
  227.       & .description-container,
  228.       & .attachment-buttons {
  229.         margin: 0;
  230.         padding: 0;
  231.         position: relative;
  232.       }
  234.       .description-container {
  235.         flex: 1;
  236.         padding-left: 0.5em;
  237.       }
  239.       .attachment-buttons {
  240.         order: 99;
  241.         align-self: center;
  242.       }
  243.     }
  245.     a {
  246.       display: inline-block;
  247.       max-width: 100%;
  248.       overflow: hidden;
  249.       text-overflow: ellipsis;
  250.     }
  252.     svg {
  253.       color: inherit;
  254.     }
  255.   }
  257.   &.-loading {
  258.     cursor: progress;
  259.   }
  261.   &.-compact {
  262.     .placeholder-container {
  263.       padding-bottom: 0.5em;
  264.     }
  265.   }
  266. }