logo

pleroma-fe

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

App.scss (18052B)

    

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