API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 21st, 2025
52
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 33.04 KB | Source Code | 0 0
raw download clone embed print report
  1. @import './styles/_variables.css';
  2. @import './styles/_home.css';
  3. @import './styles/_global.css';
  4. @import './styles/_extensions.css';
  5. @import './devtools/chromeModernDevtools.css';
  6. /*! SHIMMMER v2.30 */
  7. /*? https://github.com/nuclearcodecat/shimmer */
  8.  
  9.  
  10. /* browser toolbox prompt hack - set devtools.debugger.prompt-connection to false */
  11.  
  12. /*? shimmer variables */
  13. :root {
  14.     /*? COLLAPSING SIDEBAR SETTINGS */
  15.     --shimmer-cbar-collapsed-width: 42px;
  16.     --shimmer-cbar-expanded-width: 300px;
  17.  
  18.     /*? urlbar border radius */
  19.     --shimmer-urlbar-rounding: 16px;
  20.     --shimmer-urlbar-inner-rounding: calc(var(--shimmer-urlbar-rounding) * .75);
  21.  
  22.     /*? max tab width */
  23.     --shimmer-tab-max-width: 13em;
  24.     /*? min tab width */
  25.     --shimmer-tab-min-width: 9em;
  26.     /*? selected tab width */
  27.     --shimmer-tab-selected-width: var(--shimmer-tab-max-width);
  28.  
  29.     /* --shimmer-tab-height: 32px; */
  30.     /* --shimmer-titlebar-height: calc(var(--shimmer-tab-height) + 6px); */
  31.     --shimmer-tab-border-radius: 12px;
  32.     --shimmer-browser-border-radius: 20px;
  33.     --shimmer-top-bottom-browser-margin: 4px;
  34.  
  35.     /* could be hardcoded in some places... */
  36.     --shimmer-btn-anim: background 0.075s linear, opacity 0.075s linear;
  37.  
  38.     /*? gap between window control buttons */
  39.     --shimmer-winctr-gap: 5px;
  40.     /*? margin around winctr buttons */
  41.     --shimmer-winctr-margin: 12px;
  42.  
  43.     --shimmer-sidebar-splitter-width: var(--shimmer-top-bottom-browser-margin);
  44. }
  45.  
  46. /*? overwritten variables */
  47. :root {
  48.     --arrowpanel-menuitem-margin-inline: 5px !important;
  49.     --arrowpanel-header-min-height: calc(calc(var(--arrowpanel-header-back-icon-full-width) + (var(--panel-separator-margin-horizontal) * 2)) * 0.5) !important;
  50.     --arrowpanel-menuitem-padding: 4px 8px !important;
  51.     --arrowpanel-border-radius: 12px !important;
  52.     --arrowpanel-menuitem-border-radius: calc(var(--arrowpanel-border-radius) / 1.65) !important;
  53.     /* --var-tab-min-height: 10px !important; */
  54.     /* --tab-border-radius: var(--shimmer-tab-border-radius) !important; */
  55.     /*? disable opacity change when tabbed out */
  56.     --inactive-titlebar-opacity: 1 !important;
  57.     --splitter-width: var(--shimmer-sidebar-splitter-width) !important;
  58. }
  59.  
  60. /*? customize context menu */
  61. /* #context-back, */
  62. /* #context-bookmarklink, */
  63. /* #context-bookmarkpage, */
  64. /* #context-forward, */
  65. /* #context-inspect, */
  66. #context-inspect-a11y,
  67. /* #context-navigation, */
  68. /* #context-openlink, */
  69. /* #context-openlinkintab, */
  70. /* #context-openlinkinusercontext-menu, */
  71. /* #context-openlinkprivate, */
  72. #context-pocket,
  73. /* #context-reload, */
  74. #context-savelink,
  75. #context-savelinktopocket,
  76. /* #context-savepage, */
  77. /* #context-searchselect, */
  78. /* #context-selectall, */
  79. /* #context-sendlinktodevice, */
  80. /* #context-sendpagetodevice, */
  81. /* #context-sep-navigation, */
  82. /* #context-sep-open, */
  83. /* #context-sep-selectall, */
  84. #context-sep-sendlinktodevice,
  85. #context-sep-sendpagetodevice,
  86. /* #context-sep-viewbgimage, */
  87. #context-sep-viewsource,
  88. /* #context-stop, */
  89. /* #context-viewbgimage, */
  90. /* #context-viewinfo, */
  91. #context-viewpartialsource-selection,
  92. #context-viewsource,
  93. /* #inspect-separator, */
  94. #screenshots_mozilla_org_create-screenshot {
  95.     display: none !important;
  96. }
  97.  
  98. /*? slim scrollbars everywhear!!!! */
  99. * {
  100.     scrollbar-width: thin !important;
  101. }
  102.  
  103. @media -moz-pref("shimmer.hide-sidebar-button") {
  104.     #sidebar-button {
  105.         display: none !important;
  106.     }
  107. }
  108.  
  109. /*! === titlebar === */
  110.  
  111. /*? fix theming issues */
  112. #main-window[titlepreface="​"] #nav-bar {
  113.     background: rgba(0, 0, 0, 0) !important;
  114. }
  115.  
  116. .toolbarbutton-animatable-box>image {
  117.     /*? change reload button animation length */
  118.     animation-duration: 0.7s !important;
  119.     animation-timing-function: ease-in-out !important;
  120. }
  121.  
  122. /*? change bookmark star button to yellow_ when starred */
  123. #star-button[starred="true"] {
  124.     fill: #f7e617 !important;
  125.     stroke: #000 !important;
  126.     stroke-width: 2px !important;
  127.     filter: drop-shadow(0px 0px 0.5px #000) !important;
  128. }
  129.  
  130. /*? taller navbar */
  131. @media not -moz-pref("shimmer.shorter-navbar") {
  132.     #navigator-toolbox, #nav-bar {
  133.         min-height: 50px !important;
  134.     }
  135. }
  136. #TabsToolbar {
  137.     height: 100% !important;
  138. }
  139.  
  140. /*? make extensions buttons reach the entire height of navbar */
  141. #nav-bar-customization-target toolbarbutton {
  142.     height: 100% !important;
  143. }
  144.  
  145. #urlbar {
  146.     margin: 0 !important;
  147. }
  148.  
  149. /*? move the window control buttons to the same row as urlbar */
  150. #main-window[titlepreface="​"] #navigator-toolbox {
  151.     display: grid !important;
  152.     grid-template-rows: repeat(4, auto);
  153. }
  154. #PersonalToolbar:not([collapsed="true"]) {
  155.     padding-bottom: calc(var(--shimmer-top-bottom-browser-margin) / 2) !important;
  156. }
  157. @media -moz-pref("shimmer.native-vertical-tabs") {
  158.     #PersonalToolbar {
  159.         grid-area: 4 / 1 / 5 / 3 !important;
  160.     }
  161. }
  162. @media not -moz-pref("shimmer.native-vertical-tabs") {
  163.     #main-window[titlepreface="​"] #PersonalToolbar {
  164.         grid-area: 4 / 1 / 5 / 3 !important;
  165.     }
  166. }
  167. @media -moz-pref("shimmer.native-vertical-tabs") {
  168.     #toolbar-menubar {
  169.         grid-area: 1 / 1 / 2 / 3 !important;
  170.     }
  171. }
  172. @media not -moz-pref("shimmer.native-vertical-tabs") {
  173.     #main-window[titlepreface="​"] #toolbar-menubar {
  174.         grid-area: 1 / 1 / 2 / 3 !important;
  175.     }
  176. }
  177. @media not -moz-pref("shimmer.reverse-winctr-buttons-side") {
  178.     #navigator-toolbox {
  179.         grid-template-columns: 1fr auto !important;
  180.     }
  181.  
  182.     @media -moz-pref("shimmer.native-vertical-tabs") {
  183.         #nav-bar {
  184.             grid-area: 3 / 1 / 4 / 2 !important;
  185.         }
  186.     }
  187.     #main-window[titlepreface="​"] #nav-bar {
  188.         grid-area: 3 / 1 / 4 / 2 !important;
  189.     }
  190.  
  191.     @media -moz-pref("shimmer.native-vertical-tabs") {
  192.         #TabsToolbar {
  193.             grid-area: 3 / 2 / 4 / 3 !important;
  194.         }
  195.     }
  196.     #main-window[titlepreface="​"] #TabsToolbar {
  197.         grid-area: 3 / 2 / 4 / 3 !important;
  198.     }
  199. }
  200. @media -moz-pref("shimmer.reverse-winctr-buttons-side") {
  201.     #navigator-toolbox {
  202.         grid-template-columns: auto 1fr !important;
  203.     }
  204.  
  205.     @media -moz-pref("shimmer.native-vertical-tabs") {
  206.         #nav-bar {
  207.             grid-area: 3 / 2 / 4 / 3 !important;
  208.         }
  209.     }
  210.     #main-window[titlepreface="​"] #nav-bar {
  211.         grid-area: 3 / 2 / 4 / 3 !important;
  212.     }
  213.  
  214.     @media -moz-pref("shimmer.native-vertical-tabs") {
  215.         #TabsToolbar {
  216.             grid-area: 3 / 1 / 4 / 2 !important;
  217.         }
  218.     }
  219.     #main-window[titlepreface="​"] #TabsToolbar {
  220.         grid-area: 3 / 1 / 4 / 2 !important;
  221.     }
  222.  
  223.     @supports (not (-moz-osx-font-smoothing: grayscale)) {
  224.         #TabsToolbar {
  225.             flex-direction: row-reverse !important;
  226.         }
  227.     }
  228. }
  229.  
  230. @supports (-moz-osx-font-smoothing: grayscale) {
  231.     .titlebar-buttonbox-container {
  232.         justify-content: space-evenly !important;
  233.         align-items: center !important;
  234.     }
  235.     .titlebar-buttonbox {
  236.         align-items: center !important;
  237.     }
  238.     .titlebar-button {
  239.         height: 100% !important;
  240.     }
  241. }
  242.  
  243.  
  244.  
  245. /*? make the window grabbable at the top, but not the window control buttons */
  246. /* #main-window[titlepreface="​"] #nav-bar {
  247.     border-top: 1px solid rgba(0, 0, 0, 0) !important;
  248. }
  249. #main-window[titlepreface=""] .toolbar-items {
  250.     margin-top: 1px !important;
  251. } */
  252.  
  253. /*? hide native tabs */
  254. @media -moz-pref("shimmer.native-vertical-tabs") {
  255.     #TabsToolbar > .toolbar-items {
  256.         display: none !important;
  257.     }
  258. }
  259. #main-window[titlepreface="​"] #TabsToolbar > .toolbar-items {
  260.     display: none !important;
  261. }
  262.  
  263. /*? make navigation buttons white_ when sidebar open */
  264. @media -moz-pref("shimmer.native-vertical-tabs") {
  265.     #navigator-toolbox, #nav-bar {
  266.         background: var(--toolbar-bgcolor) !important;
  267.     }
  268. }
  269. #main-window[titlepreface="​"] #navigator-toolbox {
  270.     background: var(--toolbar-bgcolor) !important;
  271. }
  272.  
  273. /*? hide spacers when sidebery open */
  274. @media -moz-pref("shimmer.native-vertical-tabs") {
  275.     #TabsToolbar .titlebar-spacer {
  276.         display: none;
  277.     }
  278. }
  279. #main-window[titlepreface="​"] #TabsToolbar .titlebar-spacer {
  280.     display: none;
  281. }
  282.  
  283. /*? smaller titlebar buttons */
  284. .toolbar-items {
  285.     & .toolbarbutton-icon {
  286.         padding: 4px !important;
  287.         width: 100% !important;
  288.         height: auto !important;
  289.     }
  290.     & .toolbarbutton-badge-stack {
  291.         padding: 0 !important;
  292.     }
  293. }
  294.  
  295. #firefox-view-button {
  296.     margin-left: 8px !important;
  297. }
  298.  
  299. @media -moz-pref("shimmer.hide-firefox-view-button") {
  300.     #firefox-view-button {
  301.         display: none !important;
  302.     }
  303. }
  304.  
  305. /*! === menubar === */
  306.  
  307. /*? hide regular winctr buttons when menubar is open */
  308. @supports (not (-moz-osx-font-smoothing: grayscale)) {
  309.     #toolbar-menubar:not([inactive]) ~ #TabsToolbar .titlebar-buttonbox-container {
  310.         display: none !important;
  311.     }
  312. }
  313.  
  314. #toolbar-menubar:not([inactive]) {
  315.     width: 100vw !important;
  316.     overflow: hidden !important;
  317.     min-height: 0 !important;
  318.     height: auto !important;
  319. }
  320.  
  321. /*? hide if sidebery open and stable release */
  322. @media not -moz-pref("shimmer.nightly") {
  323.     #main-window[titlepreface="​"] #titlebar #toolbar-menubar {
  324.         display: none !important;
  325.     }
  326. }
  327.  
  328. /*! === navbar === */
  329.  
  330. /*? rounded urlbar and box */
  331. :root[chromehidden*="menubar toolbar directories extrachrome"] #urlbar-background {
  332.     background: rgba(0, 0, 0, 0) !important;
  333.     border: 0 !important;
  334. }
  335. :root:not([chromehidden*="menubar toolbar directories extrachrome"]) #urlbar-background {
  336.     background: var(--toolbar-field-background-color) !important;
  337.     border: 1px solid var(--toolbar-field-border-color) !important;
  338. }
  339. #urlbar-background {
  340.     border-radius: var(--shimmer-urlbar-rounding) !important;
  341.     transition: all 0.1s linear !important;
  342. }
  343.  
  344. /*? rounded buttons inside urlbar (firefox logo on about pages, padlock, trans, etc.) */
  345. #identity-box > box, #tracking-protection-icon-container, #page-action-buttons > *, #urlbar-revert-button-container, #urlbar-searchmode-switcher {
  346.     border-radius: var(--shimmer-urlbar-rounding) !important;
  347. }
  348.  
  349. /*? needed for popup transition to work */
  350. #urlbar {
  351.     margin-top: 0 !important;
  352. }
  353.  
  354. /*? make the background of extended urlbar move down and BROKEN drop a blur behind */
  355. @media not -moz-pref("shimmer.disable-popover-urlbar") {
  356.     #urlbar[breakout-extend] {
  357.         position: fixed !important;
  358.         margin-top: 12vh !important;
  359.         /* backdrop-filter: blur(8px) !important; */
  360.         background: rgba(0, 0, 0, 0) !important;
  361.         /* border-radius: 20px; */
  362.     }  
  363. }
  364.  
  365. @media not -moz-pref("shimmer.disable-popover-transition") {
  366.     #urlbar[breakout-extend] {
  367.         transition: margin-top 0.45s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
  368.     }
  369.  
  370.     #urlbar {
  371.     transition: margin-top 0.45s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
  372.     }
  373. }
  374.  
  375. #urlbar[breakout-extend] {
  376.     z-index: 9999 !important;
  377.     left: 10% !important;
  378.     width: calc(100vw - 20%) !important;
  379. }
  380.  
  381. @media not -moz-pref("shimmer.disable-urlbar-background-transition") {
  382.     #urlbar[breakout-extend] #urlbar-background {
  383.         transition: all 0.1s linear !important;
  384.     }
  385. }
  386.  
  387. @media -moz-pref("shimmer.disable-urlbar-background-transition") {
  388.     #urlbar[breakout-extend] #urlbar-background {
  389.         transition: none !important;
  390.     }
  391. }
  392.  
  393. #urlbar[breakout-extend] #urlbar-background {
  394.     background: var(--toolbar-field-focus-background-color) !important;
  395. }
  396.  
  397. /*? urlbox backdrop */
  398. #urlbar[breakout-extend]::before{
  399.     content: '' !important;
  400.     width: 200vw !important;
  401.     height: 200vh !important;
  402.     position: fixed !important;
  403.     pointer-events: none !important;
  404.     overflow: hidden !important;
  405.     top: -30vh !important;
  406.     left: -30vw !important;
  407.     background: color-mix(in srgb, var(--toolbar-field-focus-background-color) 65%, rgba(0, 0, 0, 0)) !important;
  408. }
  409.  
  410. /*? urlbar bigger text */
  411. #urlbar[breakout-extend] #urlbar-input {
  412.     font-size: 1.4rem !important;
  413. }
  414.  
  415. /*? taller urlbar for bigger text when extended */
  416. #urlbar[breakout-extend] .urlbar-input-container {
  417.     height: 48px !important;
  418. }
  419.  
  420. @media (max-width: 600px) {
  421.     #urlbar[breakout-extend] #urlbar-input {
  422.         font-size: 1.25rem !important;
  423.     }
  424. }
  425.  
  426. /*? centered text when urlbar not in use */
  427. #urlbar:not(:is([breakout-extend])) #urlbar-input {
  428.     text-align: center !important;
  429. }
  430.  
  431. /*? hide search one offs */
  432. @media not -moz-pref("shimmer.show-search-one-offs") {
  433.     .search-one-offs {
  434.         display: none !important;
  435.     }
  436. }
  437.  
  438. /*? fix for floating urlbar */
  439. @media -moz-pref("shimmer.nightly") {
  440.     #urlbar:not([breakout-extend]) {
  441.         top: auto !important;
  442.     }
  443. }
  444.  
  445. /*? hide 1px line below urlbar */
  446. .urlbarView-body-inner {
  447.     border-top: none !important;
  448. }
  449.  
  450. /*? hide border below top bar */
  451. #navigator-toolbox {
  452.     border: 0px !important;
  453. }
  454.  
  455. /*? make rounded borders have nice color */
  456. #browser {
  457.     background: var(--toolbar-bgcolor) !important;
  458. }
  459.  
  460. /*? if popup window, make urlbar smaller and centered */
  461. #main-window[chromehidden*="toolbar"] #urlbar-container {
  462.     max-width: 90% !important;
  463.     margin-left: auto !important;
  464.     margin-right: auto !important;
  465. }
  466.  
  467. /*? bigger rounding for navbar buttons */
  468. #nav-bar {
  469.     toolbarbutton {
  470.         & > stack, & > image {
  471.             border-radius: 8px !important;
  472.         }
  473.     }
  474. }
  475.  
  476. /*! === findbar === */
  477.  
  478. findbar {
  479.     border: 0 !important;
  480.     /*? relative for margins */
  481.     position: relative !important;
  482.     border-radius: 12px !important;
  483.     bottom: 60px !important;
  484.     margin-left: auto !important;
  485.     margin-right: auto !important;
  486.     width: 40rem !important;
  487.     height: 3rem !important;
  488.     display: flex !important;
  489.     align-items: center !important;
  490.     /*? fix for relative positioning */
  491.     margin-top: -3rem !important;
  492.     border: 0 !important;
  493.     transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
  494.     overflow-x: visible !important;
  495.     box-shadow: 0 0 0px 1px var(--lwt-accent-color) !important;
  496. }
  497.  
  498. findbar[hidden]{
  499.     margin-bottom: 0 !important;
  500.     opacity: 0 !important;
  501.     background: rgba(0, 0, 0, 0) !important;
  502.     transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
  503. }
  504.  
  505. findbar:not([hidden]) {
  506.     opacity: 1 !important;
  507.     background: var(--toolbar-bgcolor, var(--toolbar-non-lwt-bgcolor)) !important;
  508.     -moz-appearance: none !important;
  509.     appearance: none !important;
  510. }
  511. .findbar-container, .findbar-container > hbox {
  512.     height: 100% !important;
  513. }
  514.  
  515. .findbar-container {
  516.     margin-left: 7px !important;
  517. }
  518.  
  519. /*? change text to icons for smaller findbar */
  520. .findbar-container checkbox::after {
  521.     height: 16px;
  522.     font-size: 14px;
  523.     background-size: cover;
  524.     display: flex;
  525.     align-items: center;
  526.     -moz-context-properties: fill;
  527.     fill: currentColor;
  528.     color: inherit;
  529. }
  530. .findbar-highlight::after {
  531.     content: '';
  532.     background: url(./assets/icons/hl.svg) no-repeat;
  533.     width: 18px;
  534.     background-position-y: -1px;
  535. }
  536. .findbar-match-diacritics::after {
  537.     content: 'ąâ';
  538.     font-weight: 600;
  539. }
  540. .findbar-entire-word::after {
  541.     content: '';
  542.     background: url(./assets/icons/word.svg) no-repeat;
  543.     width: 20px;
  544.     background-position-y: -2px;
  545. }
  546. .findbar-case-sensitive::after {
  547.     content: 'Aa';
  548.     font-weight: 600;
  549. }
  550.  
  551. /*? hide all text for findbar checkboxes */
  552. .findbar-container checkbox > .checkbox-label-box {
  553.     display: none !important;
  554. }
  555.  
  556. .findbar-textbox {
  557.     border-radius: 8px !important;
  558.     font-family: monospace !important;
  559.     padding: 5px 8px !important;
  560.     width: 12rem !important;
  561. }
  562.  
  563. .findbar-closebutton:hover {
  564.     opacity: 1 !important;
  565.     background: var(--toolbarbutton-hover-background) !important;
  566. }
  567. .findbar-closebutton {
  568.     opacity: 1 !important;
  569.     /* background: var(--lwt-accent-color) !important; */
  570.     /* wasn't square for some reason */
  571.     width: auto !important;
  572. }
  573. .findbar-closebutton image {
  574.     width: 16px;
  575.     height: 16px;
  576.     padding: 2px;
  577. }
  578.  
  579. /*? move matched amount below main findbar */
  580. .found-matches {
  581.     position: absolute !important;
  582.     padding: 1.8rem 0.7rem 0.2rem 0.6rem !important;
  583.     top: 14px !important;
  584.     background: var(--toolbar-bgcolor, var(--toolbar-non-lwt-bgcolor)) !important;
  585.     /* border: solid var(--arrowpanel-border-color) 1px !important; */
  586.     left: -12px !important;
  587.     border-bottom-left-radius: 12px !important;
  588.     border-bottom-right-radius: 12px !important;
  589.     z-index: 9 !important;
  590.     box-shadow: 0 0 0px 1px var(--lwt-accent-color);
  591.     clip-path: inset(0 -10px -5px -5px);
  592. }
  593. .findbar-find-status {
  594.     display: none !important;
  595. }
  596. .found-matches::before {
  597.     z-index: 8 !important;
  598. }
  599. .found-matches::after {
  600.     position: absolute;
  601.     display: block;
  602.     content: '';
  603.     width: 1rem;
  604.     height: 1.5rem;
  605.     background: var(--toolbar-bgcolor, var(--toolbar-non-lwt-bgcolor)) !important;
  606.     right: -0.5rem;
  607.     top: 0.8rem;
  608.     transform: rotate(45deg);
  609.     box-shadow: 0 0 0px 1px var(--lwt-accent-color);
  610.     clip-path: inset(0 -0.3rem 0 0);
  611. }
  612. .findbar-textbox {
  613.     z-index: 10 !important;
  614. }
  615.  
  616.  
  617. /*? compact private browsing indicator */
  618. #private-browsing-indicator-with-label > label, .private-browsing-indicator-label {
  619.     display: none !important;
  620. }
  621. .private-browsing-indicator-icon {
  622.     width: 24px !important;
  623.     height: 24px !important;
  624. }
  625.  
  626. #PanelUI-menu-button {
  627.     display: flex !important;
  628. }
  629.  
  630. @media (max-width: 620px) {
  631.     #PanelUI-menu-button {
  632.         display: none !important;
  633.     }
  634.  
  635.     #unified-extensions-button {
  636.         margin-right: 12px !important;
  637.     }
  638. }
  639.  
  640. /*? make the go button bigger in urlbar */
  641. .urlbar-go-button {
  642.     height: 100% !important;
  643.     width: auto !important;
  644.     padding: 1.5% !important;
  645.     border-radius: var(--shimmer-urlbar-inner-rounding) !important;
  646. }
  647.  
  648.  
  649. /*? rounded results */
  650. .urlbarView-row {
  651.     border-radius: var(--shimmer-urlbar-inner-rounding) !important;
  652. }
  653. /*? for some reason the results get clipped so adding some padding */
  654. .urlbarView {
  655.     padding: 0 5px !important;
  656. }
  657.  
  658. .urlbarView-row:hover {
  659.     background: var(--urlbar-box-hover-bgcolor) !important;
  660. }
  661.  
  662. /*? small separator between results and search bar */
  663. /* .urlbarView-body-outer {
  664.     border-top: 1px rgba(0, 0, 0, 0.15) solid !important;
  665. } */
  666. .urlbarView-body-outer::before {
  667.     content: '';
  668.     width: 95%;
  669.     margin-left: auto;
  670.     margin-right: auto;
  671.     height: 1px;
  672.     background: #aaa;
  673.     opacity: 0.2;
  674.     display: block;
  675.     mix-blend-mode: difference;
  676. }
  677. .urlbarView-body-inner {
  678.     border: 0 !important;
  679. }
  680.  
  681. /*? increase padding in urlbar */
  682. #urlbar-results {
  683.     padding-bottom: 8px !important;
  684. }
  685.  
  686. /*? seamless transition */
  687. /* #sidebar-box {
  688.     box-shadow: -10px -100px 0px 100px var(--toolbar-bgcolor),
  689.     0 0px 20px 15px var(--lwt-accent-color);
  690. } */
  691. /*? hide the hiding box shadow */
  692. /* #navigator-toolbox {
  693.     z-index: 2 !important;
  694. } */
  695.  
  696. /*? add margin to left of browser when sidebar hidden */
  697. #sidebar-box[hidden="true"] ~ #tabbrowser-tabpanels {
  698.     padding-left: 3px !important;
  699. }
  700.  
  701. #tabbrowser-tabpanels, #sidebar-box {
  702.     background: rgba(0, 0, 0, 0) !important;
  703. }
  704.  
  705. /*! === floating statuspanel === */
  706.  
  707. /*? move statuspanel */
  708. #statuspanel {
  709.     bottom: 11px !important;
  710.     left: 11px !important;
  711. }
  712. #statuspanel[mirror] {
  713.     left: auto !important;
  714.     right: 18px !important;
  715. }
  716.  
  717. /*? round statuspanel */
  718. #statuspanel-label {
  719.     border-radius: 7px !important;
  720.     box-shadow: 0 0 0px 1px var(--lwt-accent-color);
  721. }
  722.  
  723. /*? border and alternative statuspanel padding */
  724. #statuspanel-label {
  725.     padding: 3px 8px !important;
  726.     border: solid 1px var(--button-background-color-active) !important;
  727. }
  728.  
  729. /*? color the statuspanel */
  730. #statuspanel-label {
  731.     background: var(--toolbar-bgcolor, var(--toolbar-non-lwt-bgcolor)) !important;
  732.     color: var(--lwt-text-color) !important;
  733. }
  734.  
  735. #statuspanel, #statuspanel[type="overLink"] {
  736.     transition: opacity 75ms, visibility 75ms !important;
  737. }
  738.  
  739. /*! === tabs === */
  740.  
  741. @media -moz-pref("shimmer.remove-firefox-view-button") {
  742.     #firefox-view-button {
  743.         display: none !important;
  744.     }
  745. }
  746.  
  747. #alltabs-button {
  748.     margin-right: 0.3rem !important;
  749. }
  750.  
  751. /*? tab on titlebar that's not pinned */
  752. #tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab[fadein]:not([pinned]) {
  753.     /*? min tab width */
  754.     min-width: var(--shimmer-tab-min-width) !important;
  755.     /*? max tab width */
  756.     max-width: var(--shimmer-tab-max-width) !important;
  757. }
  758.  
  759. /*? make tab background round and small */
  760. .tab-background {
  761.     min-height: 0 !important;
  762.     border: solid 1px color-mix(in srgb, var(--tab-selected-bgcolor) 90%, #000);
  763.     box-shadow: 0 0 0 #fff !important;
  764. }
  765.  
  766. /*? show tab close buttons when hovering tab */
  767. #tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:not([pinned]):hover .tab-close-button {
  768.     display: block !important;
  769. }
  770.  
  771. /*? hide shadow on tabbrowser (overflow already indicated by arrow clickable) */
  772. spacer[part="overflow-end-indicator"], spacer[part="overflow-start-indicator"] {
  773.     display: none !important;
  774. }
  775.  
  776. /*? change tab background color */
  777. .tab-background {
  778.     background: color-mix(in srgb, var(--tab-selected-bgcolor) 20%, rgba(0, 0, 0, 0));
  779. }
  780.  
  781. /*? hide firefox view separator */
  782. #tabbrowser-tabs {
  783.     border: 0 !important;
  784. }
  785.  
  786. /*? tab height and x button pos */
  787. #tabbrowser-tabs[orient="vertical"] .tab-background {min-height: 28px !important;}
  788.  
  789. @media not -moz-pref("shimmer.taller-tabs") {
  790.     #tabbrowser-tabs[orient="horizontal"], .tabbrowser-tab {
  791.         min-height: 38px !important;
  792.         height: 38px !important;
  793.     }
  794.  
  795.     .tab-close-button {
  796.         margin-inline-end: -3px !important;
  797.         width: 20px !important;
  798.         height: 20px !important;
  799.         padding: 4px !important;
  800.     }
  801.  
  802.     .tab-background {
  803.         border-radius: var(--shimmer-tab-border-radius) !important;
  804.     }
  805. }
  806. @media -moz-pref("shimmer.taller-tabs") {
  807.     #tabbrowser-tabs[orient="horizontal"], .tabbrowser-tab {
  808.         min-height: 45px !important;
  809.         height: 45px !important;
  810.     }
  811.  
  812.     .tab-close-button {
  813.         margin-inline-end: -1px !important;
  814.         width: 24px !important;
  815.         height: 24px !important;
  816.         padding: 6px !important;
  817.     }
  818.  
  819.     .tab-background {
  820.         border-radius: calc(var(--shimmer-tab-border-radius) * 1.2) !important;
  821.     }
  822. }
  823.  
  824. /*? make inner tab html occupy whole height (for some reason wouldn't happen to pinned tab) */
  825. .tab-stack {
  826.     height: 100% !important;
  827. }
  828.  
  829. /*? don't change background behind tabs even when window inactive */
  830. /* --lwt-accent-color not defined on linux install */
  831. /* #navigator-toolbox, #navigator-toolox:-moz-window-inactive {
  832.     background: var(--lwt-accent-color) !important;
  833. } */
  834.  
  835. /*? rounded tab close button */
  836. .tab-close-button {
  837.     border-radius: calc(var(--shimmer-tab-border-radius) * 0.6) !important;
  838. }
  839.  
  840. .tab-close-button, .tab-close-button:hover {
  841.     transition: var(--shimmer-btn-anim) !important;
  842. }
  843.  
  844. /*? minimal selected tab width */
  845. @media not -moz-pref("shimmer.dont-expand-selected-tab") {
  846.     #tabbrowser-tabs[orient="horizontal"] .tabbrowser-tab:not([pinned])[selected] {
  847.         min-width: var(--shimmer-tab-selected-width) !important;
  848.     }
  849. }
  850.  
  851. /*? fix for moving tabs looking weird */
  852. #tabbrowser-tabs {
  853.     &[orient="horizontal"] {
  854.         &[movingtab] {
  855.             padding-bottom: 0 !important;
  856.             margin-bottom: 0 !important;
  857.         }
  858.     }
  859. }
  860.  
  861. /*! === sidebar === */
  862.  
  863. /*? hide header, or give good color */
  864. @media not -moz-pref("shimmer.show-sidebar-header") {
  865.     #sidebar-header {
  866.         display: none !important;
  867.     }
  868. }
  869. #sidebar-header {
  870.     background: var(--lwt-accent-color) !important;
  871. }
  872.  
  873. /*? remove ugly border below "tabs" text */
  874. #sidebar-header {
  875.     border-bottom: 0 !important;
  876. }
  877.  
  878. @media -moz-pref("shimmer.native-vertical-tabs") {
  879.     :root:not([chromehidden*="menubar toolbar directories extrachrome"]):not([inDOMFullscreen]) #tabbrowser-tabbox, :root:not([inDOMFullscreen]) #sidebar-main {
  880.         margin-bottom: var(--shimmer-top-bottom-browser-margin) !important;
  881.     }
  882. }
  883. @media not -moz-pref("shimmer.native-vertical-tabs") {
  884.     :root:not([chromehidden*="menubar toolbar directories extrachrome"]):not([inDOMFullscreen]) #sidebar-box:not([hidden]), :root:not([inDOMFullscreen]) #tabbrowser-tabbox {
  885.         margin-bottom: var(--shimmer-top-bottom-browser-margin) !important;
  886.     }
  887. }
  888.  
  889. #sidebar-splitter {
  890.     --sidebar-splitter: var(--shimmer-sidebar-splitter-width) !important;
  891.     width: var(--sidebar-splitter) !important;
  892.     min-width: var(--sidebar-splitter) !important;
  893.     background: rgba(0, 0, 0, 0) !important;
  894.     border: 0 !important;
  895.     margin: 0 !important;
  896. }
  897.  
  898. @media not -moz-pref("shimmer.show-sidebar-header-close-button") {
  899.     #sidebar-close {
  900.         display: none !important;
  901.     }
  902. }
  903.  
  904. #sidebar-close {
  905.     margin-right: 10px !important;
  906. }
  907.  
  908. /*? hide ugly border around tabbox */
  909. #tabbrowser-tabbox * {
  910.     border: 0 !important;
  911. }
  912.  
  913. /*? rounded browser on left edge */
  914. @media not -moz-pref("shimmer.native-vertical-tabs") {
  915.     :root:not([chromehidden*="menubar toolbar directories extrachrome"]):not([inDOMFullscreen]) #tabbrowser-tabbox {
  916.         border-radius: 0;
  917.         clip-path: inset(0% 0% 0% 0% round var(--shimmer-browser-border-radius) 0 0 var(--shimmer-browser-border-radius));
  918.         overflow: hidden !important;
  919.     }
  920. }
  921. @media -moz-pref("shimmer.native-vertical-tabs") {
  922.     :root:not([chromehidden*="menubar toolbar directories extrachrome"]):not([inDOMFullscreen]) #tabbrowser-tabbox {
  923.         border-radius: 0;
  924.         clip-path: inset(0% 0% 0% 0% round var(--shimmer-browser-border-radius) 0 0 var(--shimmer-browser-border-radius));
  925.         overflow: hidden !important;
  926.     }
  927. }
  928.  
  929. /*? rounded sidebar on right edge */
  930. :root:not([chromehidden*="menubar toolbar directories extrachrome"]):not([inDOMFullscreen]) #sidebar-box {
  931.     clip-path: inset(0% 0% 0% 0% round 0 var(--shimmer-browser-border-radius) var(--shimmer-browser-border-radius) 0);
  932.     overflow: hidden !important;
  933. }
  934. @media -moz-pref("shimmer.native-vertical-tabs") {
  935.     :root:not([chromehidden*="menubar toolbar directories extrachrome"]):not([inDOMFullscreen]) #sidebar-main {
  936.         clip-path: inset(0% 0% 0% 0% round 0 var(--shimmer-browser-border-radius) var(--shimmer-browser-border-radius) 0);
  937.     }
  938. }
  939.  
  940. @media -moz-pref("shimmer.sidebar-right-side") {
  941.     /*? rounded browser on right edge */
  942.     @media not -moz-pref("shimmer.native-vertical-tabs") {
  943.         :root:not([chromehidden*="menubar toolbar directories extrachrome"]):not([inDOMFullscreen]) #tabbrowser-tabbox {
  944.             border-radius: 0 !important;
  945.             clip-path: inset(0% 0% 0% 0% round 0 var(--shimmer-browser-border-radius) var(--shimmer-browser-border-radius) 0);
  946.         }
  947.     }
  948.     @media -moz-pref("shimmer.native-vertical-tabs") {
  949.         :root:not([chromehidden*="menubar toolbar directories extrachrome"]):not([inDOMFullscreen]) #tabbrowser-tabbox {
  950.             border-radius: 0 !important;
  951.             clip-path: inset(0% 0% 0% 0% round 0 var(--shimmer-browser-border-radius) var(--shimmer-browser-border-radius) 0);
  952.         }
  953.     }
  954.  
  955.     /*? rounded sidebar on left edge */
  956.     :root:not([chromehidden*="menubar toolbar directories extrachrome"]):not([inDOMFullscreen]) #sidebar-box {
  957.         border-radius: 0 !important;
  958.         clip-path: inset(0% 0% 0% 0% round var(--shimmer-browser-border-radius) 0 0 var(--shimmer-browser-border-radius));
  959.     }
  960.     @media -moz-pref("shimmer.native-vertical-tabs") {
  961.         :root:not([chromehidden*="menubar toolbar directories extrachrome"]):not([inDOMFullscreen]) #sidebar-main {
  962.             clip-path: inset(0% 0% 0% 0% round var(--shimmer-browser-border-radius) 0 0 var(--shimmer-browser-border-radius));
  963.         }
  964.     }
  965. }
  966.  
  967. /*? native vertical tabs background color */
  968. #sidebar-main {
  969.     background: var(--lwt-accent-color) !important;
  970. }
  971.  
  972. /*? collapsing sidebar */
  973. @media not -moz-pref("shimmer.disable-collapsing-sidebar") {
  974.     #sidebar-wrapper, #sidebar-box {
  975.         min-width: 0 !important;
  976.     }
  977.    
  978.     #sidebar-wrapper {
  979.         display: flex !important;
  980.         z-index: 999 !important;
  981.         position: absolute !important;
  982.         left: 0 !important;
  983.         top: 4 !important;
  984.         height: 100% !important;
  985.         margin-top: var(--shimmer-top-bottom-browser-margin) !important;
  986.         margin-bottom: var(--shimmer-top-bottom-browser-margin) !important;
  987.         transition: width 0.25s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
  988.     }
  989.    
  990.     #sidebar-box {
  991.     width: var(--shimmer-cbar-collapsed-width) !important;
  992.         transition: width 0.25s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
  993.     }
  994.    
  995.     #sidebar-box {
  996.         height: calc(100% - var(--shimmer-top-bottom-browser-margin)) !important;
  997.     }
  998.    
  999.     #sidebar-wrapper:hover, #sidebar-wrapper:hover #sidebar-box {
  1000.         width: var(--shimmer-cbar-expanded-width) !important;
  1001.     }
  1002.    
  1003.     :root:not([chromehidden*="menubar toolbar directories extrachrome"]):not([inDOMFullscreen]) #tabbrowser-tabbox {
  1004.         margin-left: calc(var(--shimmer-cbar-collapsed-width) + var(--shimmer-sidebar-splitter-width)) !important;;
  1005.     }
  1006.    
  1007.     #sidebar-splitter {
  1008.     display: none !important;
  1009.     }
  1010. }
  1011.  
  1012. /*! === menus === */
  1013. /*? consistent color for ctx menus */
  1014. .menupopup-arrowscrollbox, #searchmode-switcher-popup slot[part="content"] {
  1015.     background: var(--lwt-accent-color, var(--panel-background)) !important;
  1016.     border-radius: var(--arrowpanel-border-radius) !important;
  1017.     border: 0 !important;
  1018.     outline: solid 1px var(--lwt-tab-line-color) !important;
  1019. }
  1020.  
  1021. /*? round context menu items */
  1022. /* --panel-background */
  1023. menuitem, menu, .menu-iconic, #searchmode-switcher-popup tooblarbutton {
  1024.     border-radius: var(--arrowpanel-menuitem-border-radius) !important;
  1025.     /* margin-inline: var(--arrowpanel-menuitem-margin-inline) !important; */
  1026.     padding: var(--arrowpanel-menuitem-padding) !important;
  1027. }
  1028. /*? better hover color */
  1029. /* menuitem:hover, menu:hover, .menu-iconic:hover, #searchmode-switcher-popup:hover tooblarbutton {
  1030.     background: var(--panel-item-hover-bgcolor) !important;
  1031. } */
  1032. menu, menuitem {
  1033.     &:where([_moz-menuactive]) {
  1034.         &:not([disabled="true"]) {
  1035.             background: color-mix(in srgb, var(--lwt-accent-color, var(--panel-background)) 85%, var(--lwt-text-color, var(--panel-color))) !important;
  1036.         }
  1037.         background: color-mix(in srgb, var(--lwt-accent-color, var(--panel-background)) 92.5%, var(--lwt-text-color, var(--panel-color))) !important;
  1038.     }
  1039. }
  1040.  
  1041. /*? fading backgrounds on buttons */
  1042. menuitem, toolbarbutton > stack, toolbaritem, toolbarbutton, toolbarbutton > image, .urlbarView-row, menu,
  1043. menuitem:hover, toolbarbutton:hover > stack, toolbaritem:hover, toolbarbutton:hover, toolbarbutton:hover > image, .urlbarView-row:hover, menu:hover,
  1044. .findbar-closebutton, .findbar-closebutton:hover
  1045. {
  1046.     transition: var(--shimmer-btn-anim) !important;
  1047. }
  1048.  
  1049. /*?  */
  1050. #context-navigation menuitem {
  1051.     padding: 2px !important;
  1052. }
  1053.  
  1054. /*? smaller manage extensions button */
  1055. #unified-extensions-manage-extensions {
  1056.     padding: 5px 8px !important;
  1057.     margin-bottom: 5px !important;
  1058. }
  1059.  
  1060. /*? larger titles in panels like extensions */
  1061. .panel-header {
  1062.     font-size: 1.35rem !important;
  1063. }
  1064.  
  1065. /*? panelui smaller margin */
  1066. .panel-subview-body {
  1067.     margin-bottom: 5px !important;
  1068. }
  1069.  
  1070. .panel-subview-body {
  1071.     padding: 5px 0 0 0 !important;
  1072. }
  1073.  
  1074. treecol {
  1075.     transition: var(--shimmer-btn-anim) !important;
  1076. }
  1077.  
  1078. /*? fix for unreadable dropdown text (#34) */
  1079. #ContentSelectDropdown * {
  1080.     color: var(--lwt-text-color) !important;
  1081. }
  1082.  
  1083. /*? fix for unreadable disabled dropdown text (#35) */
  1084. #ContentSelectDropdownPopup menuitem[disabled] {
  1085.     background: color-mix(in srgb, var(--lwt-accent-color) 60%, var(--lwt-text-color)) !important;
  1086. }
  1087.  
  1088. /*! === autoscroller === */
  1089.  
  1090. /* why no work */
  1091. /* #autoscroller slot[part="content"] {
  1092.     --panel-background: var(--lwt-accent-color) !important;
  1093.  
  1094.     background-color: var(--panel-background) !important;
  1095.     background-image: var(--autoscroll-background-image) !important;
  1096.     background-size: cover !important;
  1097.     background-position: center !important;
  1098.     background-repeat: no-repeat !important;
  1099.     border-radius: 12px !important;
  1100. } */
  1101.  
  1102. /*! === compact, macos-like winctr buttons === */
  1103. @media not -moz-pref("shimmer.disable-compact-winctr-buttons") {
  1104.     #toolbar-menubar .titlebar-buttonbox > toolbarbutton {
  1105.         &:hover > image {
  1106.             padding: 2px 0 !important;
  1107.         }
  1108.     }
  1109.  
  1110.     #TabsToolbar .titlebar-buttonbox > toolbarbutton {
  1111.         &:hover > image {
  1112.             padding: 4px 0 !important;
  1113.         }
  1114.     }
  1115.  
  1116.     .titlebar-buttonbox > toolbarbutton {
  1117.         background: rgba(0, 0, 0, 0) !important;
  1118.         padding-top: 0 !important;
  1119.         padding-bottom: 0 !important;
  1120.    
  1121.         & > image {
  1122.             width: 14px !important;
  1123.             height: 14px !important;
  1124.             border-radius: 12px !important;
  1125.             transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
  1126.             list-style-image: none !important;
  1127.             box-sizing: content-box !important;
  1128.             padding: 0px !important;
  1129.             background: var(--toolbarbutton-hover-background) !important;
  1130.         }
  1131.    
  1132.         &:hover > image {
  1133.             transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) !important;
  1134.         }
  1135.     }
  1136.     .titlebar-close {
  1137.         /* background: hsl(355, 86%, 49%) url(chrome://browser/skin/window-controls/close.svg) no-repeat center !important; */
  1138.         &:hover > image {
  1139.             background: #fc5753 !important;
  1140.         }
  1141.         padding-right: calc(var(--shimmer-winctr-gap) + var(--shimmer-winctr-margin)) !important;
  1142.         padding-left: var(--shimmer-winctr-gap) !important;
  1143.     }
  1144.     .titlebar-min {
  1145.         &:hover > image {
  1146.             background: #fdbc40 !important;
  1147.         }
  1148.         padding-left: calc(var(--shimmer-winctr-gap) + var(--shimmer-winctr-margin)) !important;
  1149.         padding-right: var(--shimmer-winctr-gap) !important;
  1150.     }
  1151.     .titlebar-max, .titlebar-restore {
  1152.         &:hover > image {
  1153.             background: #33c748 !important;
  1154.         }
  1155.         padding: 0 var(--shimmer-winctr-gap) !important;
  1156.     }
  1157.     @media not -moz-pref("shimmer.reverse-winctr-buttons-side") {
  1158.         #main-window[titlepreface="​"] #toolbar-menubar:not([inactive]) #PanelUI-menu-button {
  1159.             padding-right: 0 !important;
  1160.         }
  1161.         @media -moz-pref("shimmer.native-vertical-tabs") {
  1162.             #toolbar-menubar:not([inactive]) #PanelUI-menu-button {
  1163.                 padding-right: 0 !important;
  1164.             }
  1165.         }
  1166.     }
  1167.     /* .titlebar-buttonbox-container {
  1168.         margin: 0 var(--shimmer-winctr-margin) 0 0 !important;
  1169.     } */
  1170. }
  1171.  
  1172. @media -moz-pref("shimmer.remove-winctr-buttons") {
  1173.     .titlebar-buttonbox, .titlebar-spacer[type="post-tabs"] {
  1174.         display: none !important;
  1175.     }
  1176. }
  1177.  
  1178. /*! === notif === */
  1179. #navigator-toolbox, #tab-notification-deck {
  1180.     z-index: 10 !important;
  1181. }
  1182.  
  1183. #tab-notification-deck > notification-message {
  1184.     position: fixed !important;
  1185.     z-index: 10 !important;
  1186.     top: 9rem !important;
  1187.     right: 0 !important;
  1188.     margin-right: 2rem !important;
  1189.     box-shadow: 0px 1px 3px 2px rgba(0,0,0,.15) !important;
  1190. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!