API tools faq
paste
Advertisement
lauriset

userChrome.css

lauriset
May 12th, 2023
98
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.25 KB | None | 0 0
raw download clone embed print report
  1. /*
  2. * GaugeK's userChrome.css
  3. * github.com/GaugeK/dots
  4. */
  5.  
  6. :root {
  7. /* ---- */
  8. --bg0: #EDF9F9;
  9. --bg1: #EDF9F9;
  10. --bg2: #EDF9F9;
  11. --bg3: #EDF9F9;
  12. --bg4: #EDF9F9;
  13. --button: #eeeeee;
  14. /* ---- */
  15. --fg2: #1F5E5E;
  16. --fg1: #1F5E5E;
  17. --disabled: #313415;
  18. /* ---- */
  19. --accent: #d3daca;
  20. --accent2: #d3daca;
  21. --contrast: #000000;
  22. --red: #ffccc9;
  23. /* ---- */
  24. }
  25.  
  26. :root {
  27. --font : Inconsolata Nerd Font;
  28. --font-size : 13px;
  29. --font-weight : regular;
  30. --icon-size : 13px !important;
  31. --button-size : 12px !important;
  32. --tab-min-height : 34px !important;
  33. --toolbar-bgimage : none !important;
  34. --arrowpanel-dimmed : transparent !important;
  35. }
  36.  
  37. /* Floating Tabs/Navbar */
  38. #navigator-toolbox {
  39. padding: 0px;
  40. margin-bottom: 0px;
  41. padding-bottom: 0px;
  42. }
  43.  
  44. /*** Hide some stuff ***/
  45. /* Hide tab line */
  46. .tab-line { display: none !important; }
  47.  
  48. /* Remove gap left by tab-line if hidden */
  49. .tabbrowser-tab { margin-top: -1px !important; }
  50.  
  51. /* Hide tab seperator line */
  52. .tabbrowser-tab::after, .tabbrowser-tab::before { border-left: none !important; }
  53.  
  54. /* Hide tab title update indicator (Glowing blue circle under tab icon) */
  55. .tab-content { background-image: none !important; }
  56.  
  57. .urlbar-go-button,
  58. /*#back-button,
  59. #forward-button,*/
  60. #stop-button,
  61. #reload-button,
  62. #tracking-protection-icon-container,
  63. .urlbar-history-dropmarker,
  64. #pageActionButton,
  65. #pocket-button-box,
  66. #permissions-granted-icon,
  67. #identity-box > *:not(#identity-icon),
  68. #pageActionSeparator, #pocket-button {
  69. display: none !important;
  70. }
  71.  
  72. #navigator-toolbox #nav-bar * #star-button,
  73. #identity-icon {
  74. display: block !important;
  75. width: 10px !important;
  76. list-style-image: none !important;
  77. }
  78.  
  79. #identity-icon,
  80. #identity-box {
  81. padding: 0px !important;
  82. }
  83.  
  84. /* Remove 2px border from the bottom of the titlebar */
  85. #navigator-toolbox { border: none !important; }
  86.  
  87. /* Remove small border from above the navbar*/
  88. #nav-bar { box-shadow: none !important; }
  89.  
  90. #urlbar { border: none !important; }
  91.  
  92. #urlbar:not(:focus-within) { box-shadow: none !important; }
  93.  
  94.  
  95.  
  96.  
  97. /* Make tab close buttons appear on tab hover, replacing the tab icon */
  98. .tabbrowser-tab .tab-close-button {
  99. -moz-box-ordinal-group: 0 !important;
  100. margin: 2px 6px 0px 0px !important;
  101. }
  102.  
  103. .tabbrowser-tab:not([pinned="true"]):hover .tab-icon-image,
  104. .tabbrowser-tab:not([pinned="true"]):hover .tab-throbber {
  105. display: none;
  106. }
  107.  
  108. .tabbrowser-tab .tab-close-button { display: none !important; }
  109. .tabbrowser-tab:not([pinned="true"]):hover .tab-close-button {
  110. display: -moz-box !important;
  111. }
  112. .tabbrowser-tab:not([pinned="true"]):hover .tab-text {
  113. padding-right: calc( var(--icon-size) + 6px) !important;
  114. }
  115.  
  116.  
  117. /* small shadow on tabs */
  118. .tabbrowser-tab[selected="true"] {
  119. box-shadow: 0px 8px 9px -1px rgba(0,0,0,0.45);
  120. }
  121.  
  122. #titlebar {
  123. box-shadow: inset 0 -8px 13px -8px rgba(0,0,0,0.25);
  124. }
  125.  
  126. /* rounded tabs */
  127. #navigator-toolbox .tab-background {
  128. border-radius: 5px 5px 0 0 !important;
  129. }
  130.  
  131. /* https://github.com/muckSponge/MaterialFox */
  132. .tab-background::before,
  133. .tab-background::after {
  134. content: "" !important;
  135. display: block !important;
  136. position: absolute !important;
  137. width: 8px !important;
  138. height: 8px !important;
  139. bottom: 0 !important;
  140. pointer-events: none !important;
  141. transition: box-shadow 0s var(--tab-transition-duration) var(--ease-basic) !important;
  142. }
  143.  
  144. .tab-background[selected]::before {
  145. border-bottom-right-radius: 3px !important;
  146. left: 0 !important;
  147. transform: translateX(-8px) !important;
  148. box-shadow: 2px 2px 0 2px var(--bg1) !important;
  149. }
  150.  
  151. .tab-background[selected]::after {
  152. border-bottom-left-radius: 3px !important;
  153. right: 0 !important;
  154. transform: translateX(8px) !important;
  155. box-shadow: -2px 2px 0 2px var(--bg1) !important;
  156. }
  157.  
  158.  
  159. /*** Tabs-only OneLiner ***/
  160. /** Navbar is above tabs, hidden until focus **/
  161. /*#nav-bar:not([customizing]) {
  162. -moz-box-ordinal-group: 0 !important;
  163. margin-bottom: 10px;
  164. margin-top: calc(var(--tab-min-height) * -1 - 10px) !important;
  165. transition: all 200ms !important;
  166. }
  167. #navigator-toolbox:not([customizing]):focus-within #nav-bar {
  168. margin-top: 0 !important;
  169. }
  170. /** Navbar is on the same line as tabs **/
  171. #nav-bar:not([customizing]) {
  172. margin-top: calc(var(--tab-min-height) * -1 - 16px) !important;
  173. z-index: 2 !important;
  174. pointer-events: none;
  175. transition: all 200ms, z-index 0ms !important;
  176. padding-top:0 !important;
  177. margin-bottom:16px !important;
  178. opacity: 0;
  179. }
  180.  
  181. #navigator-toolbox:not([customizing]):focus-within #nav-bar {
  182. pointer-events: auto;
  183. margin-top: calc(var(--tab-min-height) * -1) !important;
  184. margin-bottom: 0px !important;
  185. opacity: 1 !important;
  186. max-height: 32px;
  187. }
  188.  
  189. /* Navbar is above tabs */
  190. /*#nav-bar:not([customizing]) {
  191. -moz-box-ordinal-group: 0 !important;
  192. margin-bottom: 4px !important;
  193. }*/
  194.  
  195. #urlbar[breakout] {
  196. position: unset !important;
  197. }
  198. #urlbar[breakout][breakout-extend] {
  199. top: 0;
  200. left: 0;
  201. width: 100%;
  202. }
  203.  
  204.  
  205.  
  206. /* Fix some moving tab problems with the tabs-only oneliner */
  207.  
  208. #TabsToolbar[movingtab] > .tabbrowser-tabs {
  209. padding-bottom: 0px !important;
  210. margin-bottom: 0px !important;
  211. }
  212.  
  213. #navigator-toolbox[movingtab],
  214. #tabbrowser-tabs[movingtab] {
  215. margin: 0 !important;
  216. }
  217.  
  218. #TabsToolbar[movingtab] { padding-bottom: 0px !important; }
  219. #tabbrowser-tabs[movingtab] { margin-bottom: -2px !important; }
  220.  
  221.  
  222. .tabbrowser-tab { margin-right: 0 !important; }
  223.  
  224.  
  225.  
  226. /* Hide newtab button in right padding */
  227. #tabs-newtab-button > image { display: none !important; }
  228. #tabbrowser-tabs { margin-right: -15px !important; }
  229.  
  230. #tabs-newtab-button {
  231. display: block !important;
  232. position: absolute !important;
  233. margin-right: 0px !important;
  234. right: 0px !important;
  235. width: 10px !important;
  236. max-width: 15px !important;
  237. }
  238.  
  239.  
  240.  
  241.  
  242.  
  243.  
  244.  
  245.  
  246. /* Tabs are de-saturated and transparent when inactive */
  247. /*.tabbrowser-tab:not([selected=true]):not(:hover) * .tab-icon-image {
  248. filter: grayscale(50%) !important;
  249. }*/
  250. .tabbrowser-tab:not([selected])[pinned] { opacity: 0.60 !important; }
  251. /*.tabbrowser-tab:hover { opacity: 1 !important; }
  252. .tabbrowser-tab[selected] { opacity: 1 !important; }*/
  253.  
  254.  
  255. /* Hide tab icon from non-pinned tabs */
  256. .tab-icon-image:not([pinned]) { display: none; }
  257.  
  258. /* Desaturate tab icon on non-selected tabs */
  259. .tab-icon-image:not([selected]) {
  260. filter: grayscale(100%) brightness(80%) !important;
  261. }
  262.  
  263. /* Round Tabs */
  264. .tabbrowser-tab .tab-background {
  265. border-radius: 0px !important;
  266. }
  267.  
  268.  
  269.  
  270.  
  271. /* Desaturate and italic pending tabs */
  272. .tabbrowser-tab[pending] {
  273. font-style: Inconsolata Nerd Font;
  274. filter: grayscale(100%) !important;
  275. }
  276.  
  277.  
  278.  
  279.  
  280.  
  281.  
  282.  
  283. /* Run javascript files */
  284. toolbarbutton#alltabs-button {
  285. -moz-binding: url("userChrome.xml#js");
  286. }
  287.  
  288.  
  289.  
  290.  
  291.  
  292. /***
  293. * Custom icons
  294. * Enable `svg.context-properties.content.enabled` in about:config
  295. ***/
  296. .toolbarbutton-animatable-image {
  297. animation-duration: 0ms !important;
  298. }
  299.  
  300. #home-button .toolbarbutton-icon,
  301. #back-button .toolbarbutton-icon,
  302. #reload-button .toolbarbutton-icon,
  303. #forward-button .toolbarbutton-icon {
  304. -moz-context-properties: fill, stroke;
  305. fill: currentColor !important;
  306. stroke: currentColor !important;
  307. }
  308.  
  309.  
  310. #reload-button .toolbarbutton-icon {
  311. list-style-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 8.467 8.467'%3E%3Cpath fill='none' stroke='context-fill' stroke-dashoffset='100' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.058' d='M6.269 6.12a2.852 2.852 0 0 1-3.28.677A2.852 2.852 0 0 1 1.326 3.89a2.852 2.852 0 0 1 2.247-2.483 2.852 2.852 0 0 1 3.059 1.365'/%3E%3Ccircle cx='6.543' cy='2.385' r='1.323' fill='context-fill' fill-rule='evenodd'/%3E%3C/svg%3E");;
  312. }
  313.  
  314. #home-button .toolbarbutton-icon {
  315. list-style-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 8.467 8.467'%3E%3Cg fill='none' stroke='context-fill' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.058'%3E%3Cpath d='M1.884 3.73v2.557c0 .595.336.888.882.888l3.013-.02c.578 0 .792-.394.792-.871l.012-2.553'/%3E%3Cpath d='M1.227 4.298l3.006-3.006L7.24 4.298'/%3E%3C/g%3E%3C/svg%3E");
  316. }
  317.  
  318. #back-button .toolbarbutton-icon {
  319. list-style-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 8.467 8.467'%3E%3Cpath fill='none' stroke='context-fill' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.058' d='M5.774.973L2.57 4.175l3.32 3.319'/%3E%3C/svg%3E");
  320. }
  321.  
  322. #forward-button .toolbarbutton-icon {
  323. list-style-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 8.467 8.467'%3E%3Cpath fill='none' stroke='context-fill' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.058' d='M2.693.973l3.203 3.202-3.32 3.319'/%3E%3C/svg%3E");
  324. }
  325.  
  326.  
  327.  
  328.  
  329.  
  330.  
  331.  
  332. /* Font stuff */
  333. * {
  334. font-family: var(--font) !important;
  335. font-weight: var(--font-weight) !important;
  336. font-size: var(--font-size) !important;
  337. }
  338.  
  339. #urlbar-input {
  340. text-align: center !important;
  341. }
  342.  
  343.  
  344. /* Make sure selected stuff in the autocomplete popup is bold and everything else is normal */
  345. #urlbar-results * {
  346. font-weight: normal !important;
  347. }
  348.  
  349. #navigator-toolbox * .urlbarView-title,
  350. #navigator-toolbox * #urlbarView-row-0 * strong {
  351. font-weight: bold !important;
  352. }
  353.  
  354. .urlbarView-title,
  355. .urlbarView-secondary,
  356. .urlbarView-title-separator {
  357. line-height: 16px !important;
  358. }
  359.  
  360. .tab-text { margin-top: 2px !important; }
  361.  
  362.  
  363.  
  364.  
  365.  
  366. /* Center tab text */
  367. .tab-label {
  368. -moz-box-flex: 1 !important;
  369. text-align: center !important;
  370. }
  371.  
  372.  
  373.  
  374.  
  375. /* Make urlbar megabar appear more compact */
  376. /* Set the pref browser.urlbar.megabar to true */
  377. #urlbar.megabar[breakout]{
  378. margin-inline-start: 0px !important;
  379. width: 100% !important;
  380. left: 0 !important;
  381. top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
  382. }
  383.  
  384. #urlbar.megabar[breakout]:not([open]) {
  385. bottom: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
  386. }
  387.  
  388. .urlbarView.megabar { margin-inline: 0 !important; width: auto !important; }
  389. .urlbarView-row { padding-inline: 4px !important; }
  390. #urlbar-background { animation: none !important; }
  391. #urlbar-input-container { padding: 0 !important; height: 100% !important; }
  392.  
  393.  
  394. /* Align megabar a bit better */
  395. #navigator-toolbox * #urlbar.megabar { top: 0 !important; }
  396.  
  397. #urlbar:not([open]) #urlbar-input-container { margin-top: 1px !important; }
  398. #urlbar[open] #urlbar-input-container { margin-top: 3px !important; }
  399.  
  400.  
  401.  
  402.  
  403.  
  404.  
  405.  
  406.  
  407.  
  408. /*** Change colours of a few items ***/
  409. :root {
  410. /* Toolbar */
  411. --toolbar-color: var(--fg1) !important;
  412. --lwt-text-color: var(--fg1) !important;
  413. --toolbar-bgcolor: var(--bg3) !important;
  414. --lwt-accent-color: var(--bg1) !important;
  415. --lwt-toolbarbutton-icon-fill: var(--fg1) !important;
  416. --lwt-toolbar-field-focus-color: var(--fg1) !important;
  417.  
  418. /* Autocomplete Popup */
  419. --panel-disabled-color: var(--fg2) !important;
  420. --autocomplete-popup-color: var(--fg1) !important;
  421. --urlbar-popup-url-color: var(--accent) !important;
  422. --urlbar-popup-action-color: var(--accent) !important;
  423. --autocomplete-popup-background: var(--bg2) !important;
  424. --autocomplete-popup-highlight-color: var(--fg1) !important;
  425. --autocomplete-popup-highlight-background: var(--button) !important;
  426. --lwt-toolbar-field-background-color: var(--bg3) !important;
  427. --panel-separator-color: transparent !important;
  428. --lwt-toolbar-field-focus: var(--bg2) !important;
  429.  
  430. /* Sidebar */
  431. --lwt-sidebar-text-color: var(--fg1) !important;
  432. --lwt-sidebar-background-color: var(--bg1) !important;
  433.  
  434. /* Popups */
  435. --arrowpanel-background: var(--bg1) !important;
  436. --arrowpanel-color: var(--fg1) !important;
  437. }
  438.  
  439. :root:-moz-window-inactive #navigator-toolbox {
  440. background-color: var(--fg2) !important;
  441. }
  442. #navigator-toolbox {
  443. background-color: var(--fg1) !important;
  444. }
  445. :root:not(:-moz-window-inactive) .tab-content:not([selected="true"]) .tab-label {
  446. color: var(--bg1) !important;
  447. }
  448.  
  449. /* When the only tab is the pinned tab, make the rest of the tab bar the same colour */
  450. /*.tabbrowser-tab[pinned="true"]:only-of-type::after {
  451. content: '';
  452. display: block !important;
  453. width: 100vw !important;
  454. height: var(--tab-min-height) !important;
  455. margin: 0 !important;
  456. background-color: var(--bg1) !important;
  457. position: absolute;
  458. top: 1px;
  459. left: 0;
  460. bottom: 0;
  461. padding-right: 1px;
  462. z-index: -2;
  463. pointer-events: none !important;
  464. }*/
  465.  
  466. menu[disabled="true"],
  467. menuitem[disabled="true"] {
  468. color: var(--disabled) !important;
  469. }
  470.  
  471. #sidebar-box {
  472. --sidebar-background-color: var(--bg1) !important;
  473. --sidebar-text-color: var(--fg1) !important;
  474. --arrowpanel-color: var(--fg1) !important;
  475. }
  476.  
  477. .toolbarbutton-icon, .toolbarbutton-badge-stack {
  478. --toolbarbutton-hover-background: var(--button) !important;
  479. --toolbarbutton-active-background: var(--button) !important;
  480. }
  481.  
  482. .findbar-textbox,
  483. #findbar-textbox-wrapper {
  484. background-color: var(--bg2) !important;
  485. }
  486.  
  487. #urlbar,
  488. .tabbrowser-tab .tab-content .tab-text,
  489. .findbar-textbox,
  490. .close-icon {
  491. color: var(--fg1) !important;
  492. }
  493.  
  494. .tab-content:not([selected="true"]) .tab-text,
  495. .tab-content:not([selected="true"]),
  496. #titlebar .close-icon:not([selected="true"]) {
  497. color: var(--bg1) !important;
  498. }
  499.  
  500. #urlbar:not(:focus-within) #urlbar-background {
  501. background-color: transparent !important;
  502. }
  503.  
  504. #urlbar,
  505. findbar {
  506. background-image: none !important;
  507. background-color: transparent !important;
  508. }
  509.  
  510. .findbar-button[checked] { background-color: var(--button) !important; }
  511.  
  512. /* Change colour of fill animation when tab has finished loading */
  513. .tabbrowser-tab { --tab-loading-fill: var(--accent) !important; }
  514. .tab-throbber::before { fill: var(--accent) !important; }
  515.  
  516.  
  517. /* Prevents White pre-load flash */
  518. #browser vbox#appcontent tabbrowser,
  519. #content,
  520. #tabbrowser-tabpanels,
  521. browser[type=content-primary],
  522. browser[type=content] > html {
  523. background: var(--bg1) !important
  524. }
  525. #tabbrowser-tabpanels {
  526. background: var(--bg1) !important;
  527. }
  528.  
  529. /*
  530. .tabbrowser-tab[selected] .tab-background {
  531. background: linear-gradient(to right, var(--accent) 60%, var(--false) 100%) !important;
  532. opacity: 20% !important;
  533. border-radius: 6px !important;
  534. }*/
  535.  
  536. .tabbrowser-tab[selected] .tab-background {
  537. background: var(--bg1) !important;
  538. }
  539.  
  540. .tab-background {
  541. border-top-color: transparent !important;
  542. }
  543.  
  544. #urlbar-background {
  545. box-shadow: none !important;
  546. }
  547.  
  548.  
  549.  
  550. /* Change size of a few items */
  551. #navigator-toolbox * #urlbar-zoom-button {
  552. width: auto !important;
  553. max-width: 100px !important;
  554. }
  555.  
  556. #navigator-toolbox * toolbarbutton:not(#urlbar-zoom-button):not(.webextension-browser-action):not(#PanelUI-menu-button),
  557. #navigator-toolbox * toolbarbutton:not(#tabs-newtab-button) image,
  558. #navigator-toolbox * toolbarbutton:not(#downloads-button):not(#tabs-newtab-button) stack {
  559. width: calc(var(--button-size) + 10px) !important;
  560. max-height: var(--tab-min-height) !important;
  561. height: auto !important;
  562. padding: 5px 5px 5px 5px !important;
  563. margin: 0px 0px 0px 0px !important;
  564. }
  565. #urlbar-zoom-button {
  566. max-height: var(--tab-min-height) !important;
  567. height: auto !important;
  568. padding: 5px 10px 5px 10px !important;
  569. margin: 0px 0px 0px 0px !important;
  570. }
  571.  
  572. .webextension-browser-action {
  573. margin: 0 5px !important;
  574. }
  575.  
  576. .toolbarbutton-badge {
  577. margin-top: 0px !important;
  578. margin-right: 0px !important;
  579. }
  580.  
  581. #PanelUI-menu-button {
  582. margin: 0px 5px !important;
  583. }
  584.  
  585. #navigator-toolbox * toolbarbutton:not(.webextension-browser-action):not(#PanelUI-menu-button) #downloads-indicator-anchor {
  586. padding-top: 0px !important;
  587. }
  588.  
  589.  
  590. #navigator-toolbox #downloads-indicator-anchor #downloads-indicator-progress-outer #downloads-indicator-progress-inner,
  591. #navigator-toolbox #downloads-indicator-anchor #downloads-indicator-progress-outer {
  592. margin-left: 0px !important;
  593. }
  594.  
  595. #identity-icon,
  596. .tab-icon-image,
  597. .tab-close-button {
  598. height: var(--icon-size) !important;
  599. width: var(--icon-size) !important;
  600. }
  601.  
  602. #identity-icon { padding: 2px; }
  603.  
  604. #TabsToolbar,
  605. #nav-bar,
  606. #titlebar,
  607. .tabbrowser-tab,
  608. #tabbrowser-tabs {
  609. height: var(--tab-min-height) !important;
  610. min-height: var(--tab-min-height) !important;
  611. }
  612.  
  613. #main-window #urlbar {
  614. min-height: 90% !important;
  615. max-height: 90% !important;
  616. height: 90% !important;
  617. }
  618.  
  619. #main-window #urlbar #urlbar-input-container {
  620. padding-block: 0 !important;
  621. padding-inline: 0 !important;
  622. }
  623.  
  624. #tabbrowser-tabs > .tabbrowser-arrowscrollbox {
  625. height: var(--tab-min-height);
  626. min-height: var(--tab-min-height);
  627. }
  628.  
  629. #urlbar-input { padding-left: 5px !important; }
  630. #urlbar-background { border: none !important; }
  631.  
  632. /* Tab width */
  633. .tabbrowser-tab[fadein]:not([pinned]) { max-width: 90% !important; }
  634.  
  635. /* add padding to urlbar results */
  636. .urlbarView-row { height: 35px !important; }
  637. .urlbarView-body-inner { border: none !important; }
  638. .urlbarView-row-inner { margin-top: 3px !important; }
  639.  
  640.  
  641.  
  642. /* fix context menu automatically selecting the first item when window isn't maximized */
  643. /* @TODO fix hard-coded width */
  644. /*#main-window:not([width="1920"]) * #contentAreaContextMenu {
  645. margin: 15px 0 0 15px !important;
  646. }*/
  647.  
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!