logo

pleroma-fe

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

settings_modal.scss (2297B)

    

  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.     .btn:not(.dropdown-button) {
  14.       padding: 0 2em;
  15.     }
  17.     li {
  18.       margin-bottom: 0.5em;
  19.     }
  21.     .suboptions {
  22.       margin-top: 0.3em;
  23.     }
  25.     &.two-column {
  26.       column-count: 2;
  28.       > li {
  29.         break-inside: avoid;
  30.       }
  31.     }
  32.   }
  34.   .setting-description {
  35.     margin-top: 0.2em;
  36.     margin-bottom: 2em;
  37.     font-size: 70%;
  38.   }
  40.   .settings-modal-panel {
  41.     overflow: hidden;
  42.     transition: transform;
  43.     transition-timing-function: ease-in-out;
  44.     transition-duration: 300ms;
  45.     width: 1000px;
  46.     max-width: 90vw;
  47.     height: 90vh;
  49.     @media all and (max-width: 800px) {
  50.       max-width: 100vw;
  51.       height: 100%;
  52.     }
  54.     >.panel-body {
  55.       height: 100%;
  56.       overflow-y: hidden;
  58.       .btn {
  59.         min-height: 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.   &.-mobile {
  80.     .setting-list,
  81.     .option-list {
  82.       padding-left: 0.25em;
  84.       > li {
  85.         margin: 1em 0;
  86.         line-height: 1.5em;
  87.         vertical-align: center;
  88.       }
  90.       &.two-column {
  91.         column-count: 1;
  92.       }
  93.     }
  94.   }
  96.   &.peek {
  97.     .settings-modal-panel {
  98.       /* Explanation:
  99.        * Modal is positioned vertically centered.
  100.        * 100vh - 100% = Distance between modal's top+bottom boundaries and screen
  101.        * (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
  102.        * + 100% - we move modal completely off-screen, it's top boundary touches
  103.        *   bottom of the screen
  104.        * - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
  105.        */
  106.       transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));
  108.       @media all and (max-width: 800px) {
  109.         /* For mobile, the modal takes 100% of the available screen.
  110.            This ensures the minimized modal is always 50px above the browser bottom
  111.            bar regardless of whether or not it is visible.
  112.         */
  113.         transform: translateY(calc(100% - 50px));
  114.       }
  115.     }
  116.   }
  117. }