packages/styles/scss/components/_file-preview.scss

   1 @use 'sass:map';
   2
   3 .file-preview {
   4         position: fixed;
   5         inset: 0;
   6         z-index: map.get($z-indexes, 'previewer');
   7         display: flex;
   8         flex: 1 1 auto;
   9         flex-direction: column;
  10         background-color: var(--file-preview-background-color, var(--background-norm));
  11         color: var(--file-preview-text-color);
  12
  13         &-container {
  14                 position: relative;
  15                 display: flex;
  16                 inline-size: 100%;
  17                 overflow: auto;
  18                 flex-flow: column wrap;
  19                 flex: 1 1 0;
  20         }
  21
  22         &-filename {
  23                 max-inline-size: calc(50% - 5em);
  24         }
  25
  26         &-text {
  27                 inline-size: 100%;
  28                 max-inline-size: rem(800);
  29                 padding: 2rem;
  30                 margin-inline: auto;
  31                 margin-block: var(--space-1) var(--space-8); // So the highlight in case of textarea is fully visible on the top too.
  32                 background-color: whitesmoke;
  33                 color: black;
  34                 flex: 1 1 auto;
  35                 word-break: break-word;
  36                 white-space: pre-wrap;
  37         }
  38
  39         &-image {
  40                 position: absolute;
  41                 inset-block-start: 0;
  42                 inset-inline-start: 0;
  43                 margin: auto;
  44                 max-inline-size: none;
  45                 object-fit: contain;
  46
  47                 &-out {
  48                         animation: anime-image-preview-out 0.2s ease-in-out forwards;
  49                 }
  50         }
  51
  52         &-loading {
  53                 position: absolute;
  54                 inset-block-end: 0;
  55                 block-size: 2.5em;
  56         }
  57 }
  58
  59 @keyframes anime-image-preview-out {
  60         from {
  61                 opacity: 1;
  62         }
  63
  64         to {
  65                 opacity: 0;
  66         }
  67 }