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 (22093B)

    

  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.   line-height: var(--__line-height);
  395.   font-family: inherit;
  396.   font-weight: 400;
  397.   font-size: 100%;
  398.   cursor: pointer;
  400.   a,
  401.   button:not(.button-default) {
  402.     color: var(--text);
  403.     font-size: 100%;
  404.   }
  406.   &.disabled {
  407.     cursor: not-allowed;
  408.   }
  409. }
  411. .list-item {
  412.   border-color: var(--border);
  413.   border-style: solid;
  414.   border-width: 0;
  415.   border-top-width: 1px;
  417.   &.-active,
  418.   &:hover {
  419.     border-top-width: 1px;
  420.     border-bottom-width: 1px;
  421.   }
  423.   &.-active + &,
  424.   &:hover + & {
  425.     border-top-width: 0;
  426.   }
  428.   &:hover + .menu-item-collapsible:not(.-expanded) + &,
  429.   &.-active + .menu-item-collapsible:not(.-expanded) + & {
  430.     border-top-width: 0;
  431.   }
  433.   &[aria-expanded="true"] {
  434.     border-bottom-width: 1px;
  435.   }
  437.   &:first-child {
  438.     border-top-right-radius: var(--roundness);
  439.     border-top-left-radius: var(--roundness);
  440.     border-top-width: 0;
  441.   }
  443.   &:last-child {
  444.     border-bottom-right-radius: var(--roundness);
  445.     border-bottom-left-radius: var(--roundness);
  446.     border-bottom-width: 0;
  447.   }
  448. }
  450. .menu-item,
  451. .list-item {
  452.   display: block;
  453.   box-sizing: border-box;
  454.   border: none;
  455.   outline: none;
  456.   text-align: initial;
  457.   color: inherit;
  458.   clear: both;
  459.   position: relative;
  460.   white-space: nowrap;
  461.   width: 100%;
  462.   padding: var(--__vertical-gap) var(--__horizontal-gap);
  463.   background: transparent;
  465.   --__line-height: 1.5em;
  466.   --__horizontal-gap: 0.75em;
  467.   --__vertical-gap: 0.5em;
  469.   &.-non-interactive {
  470.     cursor: auto;
  471.   }
  473.   a,
  474.   button:not(.button-default) {
  475.     text-align: initial;
  476.     padding: 0;
  477.     background: none;
  478.     border: none;
  479.     outline: none;
  480.     display: inline;
  481.     font-family: inherit;
  482.     line-height: unset;
  483.   }
  484. }
  486. .button-unstyled {
  487.   border: none;
  488.   outline: none;
  489.   display: inline;
  490.   text-align: initial;
  491.   font-size: 100%;
  492.   font-family: inherit;
  493.   box-shadow: var(--shadow);
  494.   background-color: transparent;
  495.   padding: 0;
  496.   line-height: unset;
  497.   cursor: pointer;
  498.   box-sizing: content-box;
  499.   color: inherit;
  501.   &.-link {
  502.     /* stylelint-disable-next-line declaration-no-important */
  503.     color: var(--link) !important;
  504.   }
  505. }
  507. input,
  508. textarea {
  509.   border: none;
  510.   display: inline-block;
  511.   outline: none;
  512. }
  514. .input {
  515.   &.unstyled {
  516.     border-radius: 0;
  517.     /* stylelint-disable-next-line declaration-no-important */
  518.     background: none !important;
  519.     box-shadow: none;
  520.     height: unset;
  521.   }
  523.   --_padding: 0.5em;
  525.   border: none;
  526.   background-color: var(--background);
  527.   color: var(--text);
  528.   box-shadow: var(--shadow);
  529.   font-family: var(--font);
  530.   font-size: 1em;
  531.   margin: 0;
  532.   box-sizing: border-box;
  533.   display: inline-block;
  534.   position: relative;
  535.   line-height: 2;
  536.   hyphens: none;
  537.   padding: 0 var(--_padding);
  539.   &:disabled,
  540.   &[disabled="disabled"],
  541.   &.disabled {
  542.     cursor: not-allowed;
  543.   }
  545.   &[type="range"] {
  546.     background: none;
  547.     border: none;
  548.     margin: 0;
  549.     box-shadow: none;
  550.     flex: 1;
  551.   }
  553.   &[type="radio"] {
  554.     display: none;
  556.     &:checked + label::before {
  557.       box-shadow: var(--shadow);
  558.       background-color: var(--background);
  559.       color: var(--text);
  560.     }
  562.     &:disabled {
  563.       &,
  564.       & + label,
  565.       & + label::before {
  566.         opacity: 0.5;
  567.       }
  568.     }
  570.     + label::before {
  571.       flex-shrink: 0;
  572.       display: inline-block;
  573.       content: "•";
  574.       transition: box-shadow 200ms;
  575.       width: 1.1em;
  576.       height: 1.1em;
  577.       border-radius: 100%; // Radio buttons should always be circle
  578.       background-color: var(--background);
  579.       box-shadow: var(--shadow);
  580.       margin-right: 0.5em;
  581.       vertical-align: top;
  582.       text-align: center;
  583.       line-height: 1.1;
  584.       font-size: 1.1em;
  585.       box-sizing: border-box;
  586.       color: transparent;
  587.       overflow: hidden;
  588.     }
  589.   }
  591.   &[type="checkbox"] {
  592.     &:checked + label::before {
  593.       color: var(--text);
  594.       background-color: var(--background);
  595.       box-shadow: var(--shadow);
  596.     }
  598.     &:disabled {
  599.       &,
  600.       & + label,
  601.       & + label::before {
  602.         opacity: 0.5;
  603.       }
  604.     }
  606.     + label::before {
  607.       flex-shrink: 0;
  608.       display: inline-block;
  609.       content: "✓";
  610.       transition: color 200ms;
  611.       width: 1.1em;
  612.       height: 1.1em;
  613.       border-radius: var(--roundness);
  614.       box-shadow: var(--shadow);
  615.       margin-right: 0.5em;
  616.       vertical-align: top;
  617.       text-align: center;
  618.       line-height: 1.1;
  619.       font-size: 1.1em;
  620.       box-sizing: border-box;
  621.       color: transparent;
  622.       overflow: hidden;
  623.     }
  624.   }
  626.   &.resize-height {
  627.     resize: vertical;
  628.   }
  629. }
  631. .input,
  632. .button-default {
  633.   --_roundness-left: var(--roundness);
  634.   --_roundness-right: var(--roundness);
  636.   border-top-left-radius: var(--_roundness-left);
  637.   border-bottom-left-radius: var(--_roundness-left);
  638.   border-top-right-radius: var(--_roundness-right);
  639.   border-bottom-right-radius: var(--_roundness-right);
  640. }
  642. // Textareas should have stock line-height + vertical padding instead of huge line-height
  643. textarea.input {
  644.   padding: var(--_padding);
  645.   line-height: var(--post-line-height);
  646. }
  648. option {
  649.   color: var(--text);
  650.   background-color: var(--background);
  651. }
  653. .hide-number-spinner {
  654.   appearance: textfield;
  656.   &[type="number"]::-webkit-inner-spin-button,
  657.   &[type="number"]::-webkit-outer-spin-button {
  658.     opacity: 0;
  659.     display: none;
  660.   }
  661. }
  663. .cards-list {
  664.   list-style: none;
  665.   display: grid;
  666.   grid-auto-flow: row dense;
  667.   grid-template-columns: 1fr 1fr;
  669.   li {
  670.     border: 1px solid var(--border);
  671.     border-radius: var(--roundness);
  672.     padding: 0.5em;
  673.     margin: 0.25em;
  674.   }
  675. }
  677. .btn-block {
  678.   display: block;
  679.   width: 100%;
  680. }
  682. .btn-group {
  683.   position: relative;
  684.   display: inline-flex;
  685.   vertical-align: middle;
  687.   > *,
  688.   > * .button-default {
  689.     --_roundness-left: 0;
  690.     --_roundness-right: 0;
  692.     position: relative;
  693.     flex: 1 1 auto;
  694.   }
  696.   > *:first-child,
  697.   > *:first-child .button-default {
  698.     --_roundness-left: var(--roundness);
  699.   }
  701.   > *:last-child,
  702.   > *:last-child .button-default {
  703.     --_roundness-right: var(--roundness);
  704.   }
  705. }
  707. .fa {
  708.   color: grey;
  709. }
  711. .mobile-shown {
  712.   display: none;
  713. }
  715. .badge {
  716.   box-sizing: border-box;
  717.   display: inline-block;
  718.   border-radius: 99px;
  719.   max-width: 10em;
  720.   min-width: 1.7em;
  721.   height: 1.3em;
  722.   padding: 0.15em;
  723.   vertical-align: middle;
  724.   font-weight: normal;
  725.   font-style: normal;
  726.   font-size: 0.9em;
  727.   line-height: 1;
  728.   text-align: center;
  729.   white-space: nowrap;
  730.   overflow: hidden;
  731.   text-overflow: ellipsis;
  733.   &.-dot,
  734.   &.-counter {
  735.     margin: 0;
  736.     position: absolute;
  737.   }
  739.   &.-dot {
  740.     min-height: 8px;
  741.     max-height: 8px;
  742.     min-width: 8px;
  743.     max-width: 8px;
  744.     padding: 0;
  745.     line-height: 0;
  746.     font-size: 0;
  747.     left: calc(50% - 4px);
  748.     top: calc(50% - 4px);
  749.     margin-left: 6px;
  750.     margin-top: -6px;
  751.   }
  753.   &.-counter {
  754.     border-radius: var(--roundness);
  755.     font-size: 0.75em;
  756.     line-height: 1;
  757.     text-align: right;
  758.     padding: 0.2em;
  759.     min-width: 0;
  760.     left: calc(50% - 0.5em);
  761.     top: calc(50% - 0.4em);
  762.     margin-left: 0.7em;
  763.     margin-top: -1em;
  764.   }
  766.   &.-neutral {
  767.     background-color: var(--badgeNeutral);
  768.     color: white;
  769.     color: var(--badgeNeutralText, white);
  770.   }
  771. }
  773. .alert {
  774.   margin: 0 0.35em;
  775.   padding: 0 0.25em;
  776.   border-radius: var(--roundness);
  777.   border: 1px solid var(--border);
  778. }
  780. .faint {
  781.   --text: var(--textFaint);
  782.   --link: var(--linkFaint);
  784.   color: var(--text);
  785. }
  787. .visibility-notice {
  788.   padding: 0.5em;
  789.   border: 1px solid var(--textFaint);
  790.   border-radius: var(--roundness);
  791. }
  793. .notice-dismissible {
  794.   padding-right: 4rem;
  795.   position: relative;
  797.   .dismiss {
  798.     position: absolute;
  799.     top: 0;
  800.     right: 0;
  801.     padding: 0.5em;
  802.     color: inherit;
  803.   }
  804. }
  806. .fa-scale-110 {
  807.   &.svg-inline--fa,
  808.   &.iconLetter {
  809.     font-size: 1.1em;
  810.   }
  812.   &.svg-inline--fa {
  813.     vertical-align: -0.15em;
  814.   }
  815. }
  817. .fa-old-padding {
  818.   &.iconLetter,
  819.   &.svg-inline--fa,
  820.   &-layer {
  821.     padding: 0 0.3em;
  822.   }
  823. }
  825. .veryfaint {
  826.   opacity: 0.25;
  827. }
  829. .timeago {
  830.   --link: var(--text);
  831.   --linkFaint: var(--textFaint);
  832. }
  834. .login-hint {
  835.   text-align: center;
  837.   @media all and (min-width: 801px) {
  838.     display: none;
  839.   }
  841.   a {
  842.     display: inline-block;
  843.     padding: 1em 0;
  844.     width: 100%;
  845.   }
  846. }
  848. .btn.button-default {
  849.   min-height: 2em;
  850. }
  852. .new-status-notification {
  853.   position: relative;
  854.   font-size: 1.1em;
  855.   z-index: 1;
  856.   flex: 1;
  857. }
  859. @media all and (max-width: 800px) {
  860.   .mobile-hidden {
  861.     display: none;
  862.   }
  863. }
  865. @keyframes spin {
  866.   0% {
  867.     transform: rotate(0deg);
  868.   }
  870.   100% {
  871.     transform: rotate(359deg);
  872.   }
  873. }
  875. @keyframes shakeError {
  876.   0% {
  877.     transform: translateX(0);
  878.   }
  880.   15% {
  881.     transform: translateX(0.375rem);
  882.   }
  884.   30% {
  885.     transform: translateX(-0.375rem);
  886.   }
  888.   45% {
  889.     transform: translateX(0.375rem);
  890.   }
  892.   60% {
  893.     transform: translateX(-0.375rem);
  894.   }
  896.   75% {
  897.     transform: translateX(0.375rem);
  898.   }
  900.   90% {
  901.     transform: translateX(-0.375rem);
  902.   }
  904.   100% {
  905.     transform: translateX(0);
  906.   }
  907. }
  909. // Vue transitions
  910. .fade-enter-active,
  911. .fade-leave-active {
  912.   transition: opacity 0.3s;
  913. }
  915. .fade-enter-from,
  916. .fade-leave-active {
  917.   opacity: 0;
  918. }
  919. /* stylelint-enable no-descending-specificity */
  921. .visible-for-screenreader-only {
  922.   display: block;
  923.   width: 1px;
  924.   height: 1px;
  925.   margin: -1px;
  926.   overflow: hidden;
  927.   visibility: visible;
  928.   clip: rect(0 0 0 0);
  929.   padding: 0;
  930.   position: absolute;
  931. }
  933. *::selection {
  934.   color: var(--selectionText);
  935.   background-color: var(--selectionBackground);
  936. }
  938. #splash {
  939.   pointer-events: none;
  940.   transition: opacity 2s;
  941.   opacity: 1;
  943.   &.hidden {
  944.     opacity: 0;
  945.   }
  947.   #status {
  948.     &.css-ok {
  949.       &::before {
  950.         display: inline-block;
  951.         content: "CSS OK";
  952.       }
  953.     }
  955.     .initial-text {
  956.       display: none;
  957.     }
  958.   }
  960.   #throbber {
  961.     animation-duration: 3s;
  962.     animation-name: bounce;
  963.     animation-iteration-count: infinite;
  964.     animation-direction: normal;
  965.     transform-origin: bottom center;
  967.     &.dead {
  968.       animation-name: dead;
  969.       animation-duration: 2s;
  970.       animation-iteration-count: 1;
  971.       transform: rotateX(90deg) rotateY(0) rotateZ(-45deg);
  972.     }
  974.     @keyframes dead {
  975.       0% {
  976.         transform: rotateX(0) rotateY(0) rotateZ(0);
  977.       }
  979.       5% {
  980.         transform: rotateX(0) rotateY(0) rotateZ(1deg);
  981.       }
  983.       10% {
  984.         transform: rotateX(0) rotateY(0) rotateZ(-2deg);
  985.       }
  987.       15% {
  988.         transform: rotateX(0) rotateY(0) rotateZ(3deg);
  989.       }
  991.       20% {
  992.         transform: rotateX(0) rotateY(0) rotateZ(0);
  993.       }
  995.       25% {
  996.         transform: rotateX(0) rotateY(0) rotateZ(0);
  997.       }
  999.       30% {
  1000.         transform: rotateX(10deg) rotateY(0) rotateZ(0);
  1001.       }
  1003.       35% {
  1004.         transform: rotateX(-10deg) rotateY(0) rotateZ(0);
  1005.       }
  1007.       40% {
  1008.         transform: rotateX(10deg) rotateY(0) rotateZ(0);
  1009.       }
  1011.       45% {
  1012.         transform: rotateX(-10deg) rotateY(0) rotateZ(0);
  1013.       }
  1015.       50% {
  1016.         transform: rotateX(10deg) rotateY(0) rotateZ(0);
  1017.       }
  1019.       100% {
  1020.         transform: rotateX(90deg) rotateY(0) rotateZ(-45deg);
  1021.         transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); /* easeInQuint */
  1022.       }
  1023.     }
  1025.     @keyframes bounce {
  1026.       0% {
  1027.         scale: 1 1;
  1028.         translate: 0 0;
  1029.         animation-timing-function: ease-out;
  1030.       }
  1032.       10% {
  1033.         scale: 1.2 0.8;
  1034.         translate: 0 0;
  1035.         transform: rotateZ(var(--defaultZ));
  1036.         animation-timing-function: ease-out;
  1037.       }
  1039.       30% {
  1040.         scale: 0.9 1.1;
  1041.         translate: 0 -40%;
  1042.         transform: rotateZ(var(--defaultZ));
  1043.         animation-timing-function: ease-in;
  1044.       }
  1046.       40% {
  1047.         scale: 1.1 0.9;
  1048.         translate: 0 -50%;
  1049.         transform: rotateZ(var(--defaultZ));
  1050.         animation-timing-function: ease-in;
  1051.       }
  1053.       45% {
  1054.         scale: 0.9 1.1;
  1055.         translate: 0 -45%;
  1056.         transform: rotateZ(var(--defaultZ));
  1057.         animation-timing-function: ease-in;
  1058.       }
  1060.       50% {
  1061.         scale: 1.05 0.95;
  1062.         translate: 0 -40%;
  1063.         animation-timing-function: ease-in;
  1064.       }
  1066.       55% {
  1067.         scale: 0.985 1.025;
  1068.         translate: 0 -35%;
  1069.         transform: rotateZ(var(--defaultZ));
  1070.         animation-timing-function: ease-in;
  1071.       }
  1073.       60% {
  1074.         scale: 1.0125 0.9985;
  1075.         translate: 0 -30%;
  1076.         transform: rotateZ(var(--defaultZ));
  1077.         animation-timing-function: ease-in;
  1078.       }
  1080.       80% {
  1081.         scale: 1.0063 0.9938;
  1082.         translate: 0 -10%;
  1083.         transform: rotateZ(var(--defaultZ));
  1084.         animation-timing-function: ease-in-ou;
  1085.       }
  1087.       90% {
  1088.         scale: 1.2 0.8;
  1089.         translate: 0 0;
  1090.         transform: rotateZ(var(--defaultZ));
  1091.         animation-timing-function: ease-out;
  1092.       }
  1094.       100% {
  1095.         scale: 1 1;
  1096.         translate: 0 0;
  1097.         transform: rotateZ(var(--defaultZ));
  1098.         animation-timing-function: ease-out;
  1099.       }
  1100.     }
  1101.   }
  1102. }