logo

pleroma-fe

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

App.scss (18446B)

    

  1. // stylelint-disable rscss/class-format
  2. /* stylelint-disable no-descending-specificity */
  3. @import "./panel";
  5. :root {
  6.   --status-margin: 0.75em;
  7.   --post-line-height: 1.4;
  8.   // Z-Index stuff
  9.   --ZI_media_modal: 9000;
  10.   --ZI_modals_popovers: 8500;
  11.   --ZI_modals: 8000;
  12.   --ZI_navbar_popovers: 7500;
  13.   --ZI_navbar: 7000;
  14.   --ZI_popovers: 6000;
  16.   // Fallback for when stuff is loading
  17.   --background: var(--bg);
  18. }
  20. html {
  21.   font-size: var(--textSize, 14px);
  23.   --navbar-height: var(--navbarSize, 3.5rem);
  24.   --emoji-size: var(--emojiSize, 32px);
  25.   --panel-header-height: var(--panelHeaderSize, 3.2rem);
  26.   // overflow-x: clip causes my browser's tab to crash with SIGILL lul
  27. }
  29. body {
  30.   font-family: sans-serif;
  31.   font-family: var(--font);
  32.   margin: 0;
  33.   color: var(--text);
  34.   -webkit-font-smoothing: antialiased;
  35.   -moz-osx-font-smoothing: grayscale;
  36.   overscroll-behavior-y: none;
  37.   overflow-x: clip;
  38.   overflow-y: scroll;
  40.   &.hidden {
  41.     display: none;
  42.   }
  43. }
  45. // ## Custom scrollbars
  46. // Only show custom scrollbars on devices which
  47. // have a cursor/pointer to operate them
  48. @media (any-pointer: fine) {
  49.   * {
  50.     scrollbar-color: var(--fg) transparent;
  52.     &::-webkit-scrollbar {
  53.       background: transparent;
  54.     }
  56.     &::-webkit-scrollbar-corner {
  57.       background: transparent;
  58.     }
  60.     &::-webkit-resizer {
  61.       /* stylelint-disable-next-line declaration-no-important */
  62.       background-color: transparent !important;
  63.       background-image:
  64.         linear-gradient(
  65.           135deg,
  66.           transparent calc(50% - 1px),
  67.           var(--textFaint) 50%,
  68.           transparent calc(50% + 1px),
  69.           transparent calc(75% - 1px),
  70.           var(--textFaint) 75%,
  71.           transparent calc(75% + 1px),
  72.         );
  73.     }
  75.     &::-webkit-scrollbar-button,
  76.     &::-webkit-scrollbar-thumb {
  77.       box-shadow: var(--shadow);
  78.       border-radius: var(--roundness);
  79.     }
  81.     // horizontal/vertical/increment/decrement are webkit-specific stuff
  82.     // that indicates whether we're affecting vertical scrollbar, increase button etc
  83.     // stylelint-disable selector-pseudo-class-no-unknown
  84.     &::-webkit-scrollbar-button {
  85.       --___bgPadding: 2px;
  87.       color: var(--text);
  88.       background-repeat: no-repeat, no-repeat;
  90.       &:horizontal {
  91.         background-size: 50% calc(50% - var(--___bgPadding)), 50% calc(50% - var(--___bgPadding));
  93.         &:increment {
  94.           background-image:
  95.             linear-gradient(45deg, var(--text) 50%, transparent 51%),
  96.             linear-gradient(-45deg, transparent 50%, var(--text) 51%);
  97.           background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
  98.         }
  100.         &:decrement {
  101.           background-image:
  102.             linear-gradient(45deg, transparent 50%, var(--text) calc(50% + 1px)),
  103.             linear-gradient(-45deg, var(--text) 50%, transparent 51%);
  104.           background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
  105.         }
  106.       }
  108.       &:vertical {
  109.         background-size: calc(50% - var(--___bgPadding)) 50%, calc(50% - var(--___bgPadding)) 50%;
  111.         &:increment {
  112.           background-image:
  113.             linear-gradient(-45deg, transparent 50%, var(--text) 51%),
  114.             linear-gradient(45deg, transparent 50%, var(--text) 51%);
  115.           background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
  116.         }
  118.         &:decrement {
  119.           background-image:
  120.             linear-gradient(-45deg, var(--text) 50%, transparent 51%),
  121.             linear-gradient(45deg, var(--text) 50%, transparent 51%);
  122.           background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
  123.         }
  124.       }
  125.     }
  126.     // stylelint-enable selector-pseudo-class-no-unknown
  127.   }
  128.   // Body should have background to scrollbar otherwise it will use white (body color?)
  129.   html {
  130.     scrollbar-color: var(--fg) var(--wallpaper);
  131.     background: var(--wallpaper);
  132.   }
  133. }
  135. a {
  136.   text-decoration: none;
  137.   color: var(--link);
  138. }
  140. h4 {
  141.   margin: 0;
  142. }
  144. .iconLetter {
  145.   display: inline-block;
  146.   text-align: center;
  147.   font-weight: 1000;
  148. }
  150. i[class*="icon-"],
  151. .svg-inline--fa,
  152. .iconLetter {
  153.   color: var(--icon);
  154. }
  156. nav {
  157.   z-index: var(--ZI_navbar);
  158.   box-shadow: var(--shadow);
  159.   box-sizing: border-box;
  160.   height: var(--navbar-height);
  161.   font-size: calc(var(--navbar-height) / 3.5);
  162.   position: fixed;
  163. }
  165. #sidebar {
  166.   grid-area: sidebar;
  167. }
  169. #modal {
  170.   position: absolute;
  171.   z-index: var(--ZI_modals);
  172. }
  174. .column.-scrollable {
  175.   top: var(--navbar-height);
  176.   position: sticky;
  177. }
  179. #main-scroller {
  180.   grid-area: content;
  181.   position: relative;
  182. }
  184. #notifs-column {
  185.   grid-area: notifs;
  186. }
  188. .app-bg-wrapper {
  189.   position: fixed;
  190.   height: 100%;
  191.   top: var(--navbar-height);
  192.   z-index: -1000;
  193.   left: 0;
  194.   right: -20px;
  195.   background-size: cover;
  196.   background-repeat: no-repeat;
  197.   background-color: var(--wallpaper);
  198.   background-image: var(--body-background-image);
  199.   background-position: 50%;
  200. }
  202. .underlay {
  203.   grid-column: 1 / span 3;
  204.   grid-row: 1 / 1;
  205.   pointer-events: none;
  206.   background-color: var(--underlay);
  207.   z-index: -1000;
  208. }
  210. .app-layout {
  211.   --miniColumn: 25rem;
  212.   --maxiColumn: 45rem;
  213.   --columnGap: 1rem;
  214.   --effectiveSidebarColumnWidth: minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn)));
  215.   --effectiveNotifsColumnWidth: minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn)));
  216.   --effectiveContentColumnWidth: minmax(var(--miniColumn), var(--contentColumnWidth, var(--maxiColumn)));
  218.   position: relative;
  219.   display: grid;
  220.   grid-template-columns:
  221.     var(--effectiveSidebarColumnWidth)
  222.     var(--effectiveContentColumnWidth);
  223.   grid-template-areas: "sidebar content";
  224.   grid-template-rows: 1fr;
  225.   box-sizing: border-box;
  226.   margin: 0 auto;
  227.   align-content: flex-start;
  228.   flex-wrap: wrap;
  229.   justify-content: center;
  230.   min-height: 100vh;
  231.   overflow-x: clip;
  233.   .column {
  234.     --___columnMargin: var(--columnGap);
  236.     display: grid;
  237.     grid-template-columns: 100%;
  238.     box-sizing: border-box;
  239.     grid-row: 1 / 1;
  240.     margin: 0 calc(var(--___columnMargin) / 2);
  241.     padding: calc(var(--___columnMargin)) 0;
  242.     row-gap: var(--___columnMargin);
  243.     align-content: start;
  245.     &:not(.-scrollable) {
  246.       margin-top: var(--navbar-height);
  247.     }
  249.     &:hover {
  250.       z-index: 2;
  251.     }
  253.     &.-full-height {
  254.       margin-bottom: 0;
  255.       padding-top: 0;
  256.       padding-bottom: 0;
  257.     }
  259.     &.-scrollable {
  260.       --___paddingIncrease: calc(var(--columnGap) / 2);
  262.       position: sticky;
  263.       top: var(--navbar-height);
  264.       max-height: calc(100vh - var(--navbar-height));
  265.       overflow-y: auto;
  266.       overflow-x: hidden;
  267.       margin-left: calc(var(--___paddingIncrease) * -1);
  268.       padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
  270.       // On browsers that don't support hiding scrollbars we enforce "show scrolbars" mode
  271.       // might implement old style of hiding scrollbars later if there's demand
  272.       @supports (scrollbar-width: none) or (-webkit-text-fill-color: initial) {
  273.         &:not(.-show-scrollbar) {
  274.           scrollbar-width: none;
  275.           margin-right: calc(var(--___paddingIncrease) * -1);
  276.           padding-right: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
  278.           &::-webkit-scrollbar {
  279.             display: block;
  280.             width: 0;
  281.           }
  282.         }
  283.       }
  285.       .panel-heading.-sticky {
  286.         top: calc(var(--columnGap) / -1);
  287.       }
  288.     }
  289.   }
  291.   &.-has-new-post-button {
  292.     .column {
  293.       padding-bottom: 10rem;
  294.     }
  295.   }
  297.   &.-no-sticky-headers {
  298.     .column {
  299.       .panel-heading.-sticky {
  300.         position: relative;
  301.         top: 0;
  302.       }
  303.     }
  304.   }
  306.   .column-inner {
  307.     display: grid;
  308.     grid-template-columns: 100%;
  309.     box-sizing: border-box;
  310.     row-gap: 1em;
  311.     align-content: start;
  312.   }
  314.   &.-reverse:not(.-wide, .-mobile) {
  315.     grid-template-columns:
  316.       var(--effectiveContentColumnWidth)
  317.       var(--effectiveSidebarColumnWidth);
  318.     grid-template-areas: "content sidebar";
  319.   }
  321.   &.-wide {
  322.     grid-template-columns:
  323.       var(--effectiveSidebarColumnWidth)
  324.       var(--effectiveContentColumnWidth)
  325.       var(--effectiveNotifsColumnWidth);
  326.     grid-template-areas: "sidebar content notifs";
  328.     &.-reverse {
  329.       grid-template-columns:
  330.         var(--effectiveNotifsColumnWidth)
  331.         var(--effectiveContentColumnWidth)
  332.         var(--effectiveSidebarColumnWidth);
  333.       grid-template-areas: "notifs content sidebar";
  334.     }
  335.   }
  337.   &.-mobile {
  338.     grid-template-columns: 100vw;
  339.     grid-template-areas: "content";
  340.     padding: 0;
  342.     .column {
  343.       padding-top: 0;
  344.       margin: var(--navbar-height) 0 0 0;
  345.     }
  347.     .panel-heading,
  348.     .panel-heading::after,
  349.     .panel-heading::before,
  350.     .panel,
  351.     .panel::after {
  352.       border-top-left-radius: 0;
  353.       border-top-right-radius: 0;
  354.     }
  356.     #sidebar,
  357.     #notifs-column {
  358.       display: none;
  359.     }
  360.   }
  362.   &.-normal {
  363.     #notifs-column {
  364.       display: none;
  365.     }
  366.   }
  367. }
  369. .text-center {
  370.   text-align: center;
  371. }
  373. .button-default {
  374.   user-select: none;
  375.   color: var(--text);
  376.   border: none;
  377.   cursor: pointer;
  378.   background-color: var(--background);
  379.   box-shadow: var(--shadow);
  380.   font-size: 1em;
  381.   font-family: sans-serif;
  382.   font-family: var(--font);
  384.   &::-moz-focus-inner {
  385.     border: none;
  386.   }
  388.   &:disabled {
  389.     cursor: not-allowed;
  390.   }
  391. }
  393. .menu-item,
  394. .list-item {
  395.   display: block;
  396.   box-sizing: border-box;
  397.   border: none;
  398.   outline: none;
  399.   text-align: initial;
  400.   font-size: inherit;
  401.   font-family: inherit;
  402.   font-weight: 400;
  403.   cursor: pointer;
  404.   color: inherit;
  405.   clear: both;
  406.   position: relative;
  407.   white-space: nowrap;
  408.   border-color: var(--border);
  409.   border-style: solid;
  410.   border-width: 0;
  411.   border-top-width: 1px;
  412.   width: 100%;
  413.   line-height: var(--__line-height);
  414.   padding: var(--__vertical-gap) var(--__horizontal-gap);
  415.   background: transparent;
  417.   --__line-height: 1.5em;
  418.   --__horizontal-gap: 0.75em;
  419.   --__vertical-gap: 0.5em;
  421.   &.-non-interactive {
  422.     cursor: auto;
  423.   }
  425.   &.-active,
  426.   &:hover {
  427.     border-top-width: 1px;
  428.     border-bottom-width: 1px;
  429.   }
  431.   &.-active + &,
  432.   &:hover + & {
  433.     border-top-width: 0;
  434.   }
  436.   &:hover + .menu-item-collapsible:not(.-expanded) + &,
  437.   &.-active + .menu-item-collapsible:not(.-expanded) + & {
  438.     border-top-width: 0;
  439.   }
  441.   &[aria-expanded="true"] {
  442.     border-bottom-width: 1px;
  443.   }
  445.   a,
  446.   button:not(.button-default) {
  447.     text-align: initial;
  448.     padding: 0;
  449.     background: none;
  450.     border: none;
  451.     outline: none;
  452.     display: inline;
  453.     font-size: 100%;
  454.     font-family: inherit;
  455.     line-height: unset;
  456.     color: var(--text);
  457.   }
  459.   &:first-child {
  460.     border-top-right-radius: var(--roundness);
  461.     border-top-left-radius: var(--roundness);
  462.     border-top-width: 0;
  463.   }
  465.   &:last-child {
  466.     border-bottom-right-radius: var(--roundness);
  467.     border-bottom-left-radius: var(--roundness);
  468.     border-bottom-width: 0;
  469.   }
  470. }
  472. .button-unstyled {
  473.   border: none;
  474.   outline: none;
  475.   display: inline;
  476.   text-align: initial;
  477.   font-size: 100%;
  478.   font-family: inherit;
  479.   box-shadow: var(--shadow);
  480.   background-color: transparent;
  481.   padding: 0;
  482.   line-height: unset;
  483.   cursor: pointer;
  484.   box-sizing: content-box;
  485.   color: inherit;
  487.   &.-link {
  488.     /* stylelint-disable-next-line declaration-no-important */
  489.     color: var(--link) !important;
  490.   }
  491. }
  493. input,
  494. textarea {
  495.   border: none;
  496.   display: inline-block;
  497.   outline: none;
  498. }
  500. .input {
  501.   &.unstyled {
  502.     border-radius: 0;
  503.     /* stylelint-disable-next-line declaration-no-important */
  504.     background: none !important;
  505.     box-shadow: none;
  506.     height: unset;
  507.   }
  509.   --_padding: 0.5em;
  511.   border: none;
  512.   background-color: var(--background);
  513.   color: var(--text);
  514.   box-shadow: var(--shadow);
  515.   font-family: var(--font);
  516.   font-size: 1em;
  517.   margin: 0;
  518.   box-sizing: border-box;
  519.   display: inline-block;
  520.   position: relative;
  521.   line-height: 2;
  522.   hyphens: none;
  523.   padding: 0 var(--_padding);
  525.   &:disabled,
  526.   &[disabled="disabled"],
  527.   &.disabled {
  528.     cursor: not-allowed;
  529.   }
  531.   &[type="range"] {
  532.     background: none;
  533.     border: none;
  534.     margin: 0;
  535.     box-shadow: none;
  536.     flex: 1;
  537.   }
  539.   &[type="radio"] {
  540.     display: none;
  542.     &:checked + label::before {
  543.       box-shadow: var(--shadow);
  544.       background-color: var(--background);
  545.       color: var(--text);
  546.     }
  548.     &:disabled {
  549.       &,
  550.       & + label,
  551.       & + label::before {
  552.         opacity: 0.5;
  553.       }
  554.     }
  556.     + label::before {
  557.       flex-shrink: 0;
  558.       display: inline-block;
  559.       content: "•";
  560.       transition: box-shadow 200ms;
  561.       width: 1.1em;
  562.       height: 1.1em;
  563.       border-radius: 100%; // Radio buttons should always be circle
  564.       background-color: var(--background);
  565.       box-shadow: var(--shadow);
  566.       margin-right: 0.5em;
  567.       vertical-align: top;
  568.       text-align: center;
  569.       line-height: 1.1;
  570.       font-size: 1.1em;
  571.       box-sizing: border-box;
  572.       color: transparent;
  573.       overflow: hidden;
  574.     }
  575.   }
  577.   &[type="checkbox"] {
  578.     &:checked + label::before {
  579.       color: var(--text);
  580.       background-color: var(--background);
  581.       box-shadow: var(--shadow);
  582.     }
  584.     &:disabled {
  585.       &,
  586.       & + label,
  587.       & + label::before {
  588.         opacity: 0.5;
  589.       }
  590.     }
  592.     + label::before {
  593.       flex-shrink: 0;
  594.       display: inline-block;
  595.       content: "✓";
  596.       transition: color 200ms;
  597.       width: 1.1em;
  598.       height: 1.1em;
  599.       border-radius: var(--roundness);
  600.       box-shadow: var(--shadow);
  601.       margin-right: 0.5em;
  602.       vertical-align: top;
  603.       text-align: center;
  604.       line-height: 1.1;
  605.       font-size: 1.1em;
  606.       box-sizing: border-box;
  607.       color: transparent;
  608.       overflow: hidden;
  609.     }
  610.   }
  612.   &.resize-height {
  613.     resize: vertical;
  614.   }
  615. }
  617. .input,
  618. .button-default {
  619.   --_roundness-left: var(--roundness);
  620.   --_roundness-right: var(--roundness);
  622.   border-top-left-radius: var(--_roundness-left);
  623.   border-bottom-left-radius: var(--_roundness-left);
  624.   border-top-right-radius: var(--_roundness-right);
  625.   border-bottom-right-radius: var(--_roundness-right);
  626. }
  628. // Textareas should have stock line-height + vertical padding instead of huge line-height
  629. textarea.input {
  630.   padding: var(--_padding);
  631.   line-height: var(--post-line-height);
  632. }
  634. option {
  635.   color: var(--text);
  636.   background-color: var(--background);
  637. }
  639. .hide-number-spinner {
  640.   appearance: textfield;
  642.   &[type="number"]::-webkit-inner-spin-button,
  643.   &[type="number"]::-webkit-outer-spin-button {
  644.     opacity: 0;
  645.     display: none;
  646.   }
  647. }
  649. .cards-list {
  650.   list-style: none;
  651.   display: grid;
  652.   grid-auto-flow: row dense;
  653.   grid-template-columns: 1fr 1fr;
  655.   li {
  656.     border: 1px solid var(--border);
  657.     border-radius: var(--roundness);
  658.     padding: 0.5em;
  659.     margin: 0.25em;
  660.   }
  661. }
  663. .btn-block {
  664.   display: block;
  665.   width: 100%;
  666. }
  668. .btn-group {
  669.   position: relative;
  670.   display: inline-flex;
  671.   vertical-align: middle;
  673.   > *,
  674.   > * .button-default {
  675.     --_roundness-left: 0;
  676.     --_roundness-right: 0;
  678.     position: relative;
  679.     flex: 1 1 auto;
  680.   }
  682.   > *:first-child,
  683.   > *:first-child .button-default {
  684.     --_roundness-left: var(--roundness);
  685.   }
  687.   > *:last-child,
  688.   > *:last-child .button-default {
  689.     --_roundness-right: var(--roundness);
  690.   }
  691. }
  693. .fa {
  694.   color: grey;
  695. }
  697. .mobile-shown {
  698.   display: none;
  699. }
  701. .badge {
  702.   box-sizing: border-box;
  703.   display: inline-block;
  704.   border-radius: 99px;
  705.   max-width: 10em;
  706.   min-width: 1.7em;
  707.   height: 1.3em;
  708.   padding: 0.15em;
  709.   vertical-align: middle;
  710.   font-weight: normal;
  711.   font-style: normal;
  712.   font-size: 0.9em;
  713.   line-height: 1;
  714.   text-align: center;
  715.   white-space: nowrap;
  716.   overflow: hidden;
  717.   text-overflow: ellipsis;
  719.   &.-dot,
  720.   &.-counter {
  721.     margin: 0;
  722.     position: absolute;
  723.   }
  725.   &.-dot {
  726.     min-height: 8px;
  727.     max-height: 8px;
  728.     min-width: 8px;
  729.     max-width: 8px;
  730.     padding: 0;
  731.     line-height: 0;
  732.     font-size: 0;
  733.     left: calc(50% - 4px);
  734.     top: calc(50% - 4px);
  735.     margin-left: 6px;
  736.     margin-top: -6px;
  737.   }
  739.   &.-counter {
  740.     border-radius: var(--roundness);
  741.     font-size: 0.75em;
  742.     line-height: 1;
  743.     text-align: right;
  744.     padding: 0.2em;
  745.     min-width: 0;
  746.     left: calc(50% - 0.5em);
  747.     top: calc(50% - 0.4em);
  748.     margin-left: 0.7em;
  749.     margin-top: -1em;
  750.   }
  751. }
  753. .alert {
  754.   margin: 0 0.35em;
  755.   padding: 0 0.25em;
  756.   border-radius: var(--roundness);
  757.   border: 1px solid var(--border);
  758. }
  760. .faint {
  761.   --text: var(--textFaint);
  762.   --link: var(--linkFaint);
  764.   color: var(--text);
  765. }
  767. .visibility-notice {
  768.   padding: 0.5em;
  769.   border: 1px solid var(--textFaint);
  770.   border-radius: var(--roundness);
  771. }
  773. .notice-dismissible {
  774.   padding-right: 4rem;
  775.   position: relative;
  777.   .dismiss {
  778.     position: absolute;
  779.     top: 0;
  780.     right: 0;
  781.     padding: 0.5em;
  782.     color: inherit;
  783.   }
  784. }
  786. .fa-scale-110 {
  787.   &.svg-inline--fa,
  788.   &.iconLetter {
  789.     font-size: 1.1em;
  790.   }
  792.   &.svg-inline--fa {
  793.     vertical-align: -0.15em;
  794.   }
  795. }
  797. .fa-old-padding {
  798.   &.iconLetter,
  799.   &.svg-inline--fa,
  800.   &-layer {
  801.     padding: 0 0.3em;
  802.   }
  803. }
  805. .veryfaint {
  806.   opacity: 0.25;
  807. }
  809. .timeago {
  810.   --link: var(--text);
  811.   --linkFaint: var(--textFaint);
  812. }
  814. .login-hint {
  815.   text-align: center;
  817.   @media all and (min-width: 801px) {
  818.     display: none;
  819.   }
  821.   a {
  822.     display: inline-block;
  823.     padding: 1em 0;
  824.     width: 100%;
  825.   }
  826. }
  828. .btn.button-default {
  829.   min-height: 2em;
  830. }
  832. .new-status-notification {
  833.   position: relative;
  834.   font-size: 1.1em;
  835.   z-index: 1;
  836.   flex: 1;
  837. }
  839. @media all and (max-width: 800px) {
  840.   .mobile-hidden {
  841.     display: none;
  842.   }
  843. }
  845. @keyframes spin {
  846.   0% {
  847.     transform: rotate(0deg);
  848.   }
  850.   100% {
  851.     transform: rotate(359deg);
  852.   }
  853. }
  855. @keyframes shakeError {
  856.   0% {
  857.     transform: translateX(0);
  858.   }
  860.   15% {
  861.     transform: translateX(0.375rem);
  862.   }
  864.   30% {
  865.     transform: translateX(-0.375rem);
  866.   }
  868.   45% {
  869.     transform: translateX(0.375rem);
  870.   }
  872.   60% {
  873.     transform: translateX(-0.375rem);
  874.   }
  876.   75% {
  877.     transform: translateX(0.375rem);
  878.   }
  880.   90% {
  881.     transform: translateX(-0.375rem);
  882.   }
  884.   100% {
  885.     transform: translateX(0);
  886.   }
  887. }
  889. // Vue transitions
  890. .fade-enter-active,
  891. .fade-leave-active {
  892.   transition: opacity 0.3s;
  893. }
  895. .fade-enter-from,
  896. .fade-leave-active {
  897.   opacity: 0;
  898. }
  899. /* stylelint-enable no-descending-specificity */
  901. .visible-for-screenreader-only {
  902.   display: block;
  903.   width: 1px;
  904.   height: 1px;
  905.   margin: -1px;
  906.   overflow: hidden;
  907.   visibility: visible;
  908.   clip: rect(0 0 0 0);
  909.   padding: 0;
  910.   position: absolute;
  911. }
  913. *::selection {
  914.   color: var(--selectionText);
  915.   background-color: var(--selectionBackground);
  916. }