logo

pleroma-fe

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

update_notification.scss (2583B)

    

  1. .UpdateNotification {
  2.   overflow: hidden;
  3. }
  5. .UpdateNotificationModal {
  6.   --__top-fringe: 15em; // how much pleroma-tan should stick her head above
  7.   --__bottom-fringe: 80em; // just reserving as much as we can, number is mostly irrelevant
  8.   --__right-fringe: 8em;
  10.   font-size: 15px;
  11.   position: relative;
  12.   transition: transform;
  13.   transition-timing-function: ease-in-out;
  14.   transition-duration: 500ms;
  16.   .text {
  17.     max-width: 40em;
  18.     padding-left: 1em;
  19.   }
  21.   @media all and (max-width: 800px) {
  22.     /* For mobile, the modal takes 100% of the available screen.
  23.        This ensures the minimized modal is always 50px above the browser
  24.        bottom bar regardless of whether or not it is visible.
  25.    */
  26.     width: 100vw;
  27.   }
  29.   @media all and (max-height: 600px) {
  30.     display: none;
  31.   }
  33.   .content {
  34.     overflow: hidden;
  35.     margin-top: calc(-1 * var(--__top-fringe));
  36.     margin-bottom: calc(-1 * var(--__bottom-fringe));
  37.     margin-right: calc(-1 * var(--__right-fringe));
  39.     &.-noImage {
  40.       .text {
  41.         padding-right: var(--__right-fringe);
  42.       }
  43.     }
  44.   }
  46.   .panel-body {
  47.     border-width: 0 0 1px;
  48.     border-style: solid;
  49.     border-color: var(--border);
  50.   }
  52.   .panel-footer {
  53.     z-index: 22;
  54.     position: relative;
  55.     border-width: 0;
  56.     grid-template-columns: auto;
  57.   }
  59.   .pleroma-tan {
  60.     object-fit: cover;
  61.     object-position: top;
  62.     transition: position, left, right, top, bottom, max-width, max-height;
  63.     transition-timing-function: ease-in-out;
  64.     transition-duration: 500ms;
  65.     width: 25em;
  66.     float: right;
  67.     z-index: 20;
  68.     position: relative;
  69.     shape-margin: 0.5em;
  70.     filter: drop-shadow(5px 5px 10px rgb(0 0 0 / 50%));
  71.     pointer-events: none;
  72.   }
  74.   .spacer-top {
  75.     min-height: var(--__top-fringe);
  76.   }
  78.   .spacer-bottom {
  79.     min-height: var(--__bottom-fringe);
  80.   }
  82.   .extra-info-group {
  83.     transition: max-height, padding, height;
  84.     transition-timing-function: ease-in;
  85.     transition-duration: 700ms;
  86.     max-height: 70vh;
  87.     mask:
  88.       linear-gradient(to top, white, transparent) bottom/100% 2px no-repeat,
  89.       linear-gradient(to top, white, white);
  90.   }
  92.   .art-credit {
  93.     text-align: right;
  94.   }
  96.   &.-peek {
  97.     /* Explanation:
  98.    * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
  99.    * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
  100.    */
  101.     transform: translateY(calc(((100vh - 100%) / 2)));
  103.     .pleroma-tan {
  104.       float: right;
  105.       z-index: 10;
  106.       shape-image-threshold: 70%;
  107.     }
  109.     .extra-info-group {
  110.       max-height: 0;
  111.     }
  112.   }
  113. }