logo

pleroma-fe

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

settings_modal.scss (2052B)

    

  1. .settings-modal {
  2.   overflow: hidden;
  4.   h4 {
  5.     margin-bottom: 0.5em;
  6.   }
  8.   .setting-list,
  9.   .option-list {
  10.     list-style-type: none;
  11.     padding-left: 2em;
  13.     li {
  14.       margin-bottom: 0.5em;
  15.     }
  17.     .suboptions {
  18.       margin-top: 0.3em;
  19.     }
  21.     &.two-column {
  22.       column-count: 2;
  24.       > li {
  25.         break-inside: avoid;
  26.       }
  27.     }
  28.   }
  30.   .setting-description {
  31.     margin-top: 0.2em;
  32.     margin-bottom: 2em;
  33.     font-size: 70%;
  34.   }
  36.   .settings-modal-panel {
  37.     overflow: hidden;
  38.     transition: transform;
  39.     transition-timing-function: ease-in-out;
  40.     transition-duration: 300ms;
  41.     width: 1000px;
  42.     max-width: 90vw;
  43.     height: 90vh;
  45.     @media all and (max-width: 800px) {
  46.       max-width: 100vw;
  47.       height: 100%;
  48.     }
  50.     >.panel-body {
  51.       height: 100%;
  52.       overflow-y: hidden;
  54.       .btn {
  55.         min-height: 2em;
  56.       }
  58.       .btn:not(.dropdown-button) {
  59.         padding: 0 2em;
  60.       }
  61.     }
  62.   }
  64.   .settings-footer {
  65.     display: flex;
  66.     flex-wrap: wrap;
  67.     line-height: 2;
  69.     >* {
  70.       margin-right: 0.5em;
  71.     }
  73.     .extra-content {
  74.       display: flex;
  75.       flex-grow: 1;
  76.     }
  77.   }
  79.   &.peek {
  80.     .settings-modal-panel {
  81.       /* Explanation:
  82.        * Modal is positioned vertically centered.
  83.        * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
  84.        * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
  85.        * + 100% - we move modal completely off-screen, it's top boundary touches
  86.        *   bottom of the screen
  87.        * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
  88.        */
  89.       transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
  91.       @media all and (max-width: 800px) {
  92.         /* For mobile, the modal takes 100% of the available screen.
  93.            This ensures the minimized modal is always 50px above the browser bottom
  94.            bar regardless of whether or not it is visible.
  95.         */
  96.         transform: translateY(calc(100% - 50px));
  97.       }
  98.     }
  99.   }
  100. }