Guest User

userChrome.css

a guest
Aug 18th, 2021
150
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. :root {
  2.   --tab-curve-width: 30px;
  3.   --tabs-border: transparent !important;
  4. }
  5.  
  6. .arrowscrollbox-scrollbox {
  7.   padding-inline-start: 10px !important;
  8. }
  9.  
  10. /* To be able to see the top border of the tab */
  11. .tab-stack {
  12.   margin-top: 2px !important;
  13. }
  14.  
  15. /* When the window is maximized, the first pinned tab is properly displayed. */
  16. #TabsToolbar  {
  17.   padding-inline-start: 15px !important;
  18. }
  19.  
  20. #tabbrowser-tabs{
  21.     margin-left:-15px;
  22. }
  23.  
  24. .titlebar-placeholder {
  25.   border: none !important;
  26. }
  27.  
  28. /* Remove unneeded styles from Photon */
  29. .tabbrowser-tab::before,
  30. .tabbrowser-tab::after {
  31.   border: none !important;
  32. }
  33.  
  34. /* Windows 7 specific */
  35. @media (-moz-os-version: windows-win7) {
  36.   .tabbrowser-tab {
  37.     background-color: transparent !important;
  38.     border: none !important;
  39.   }
  40.  
  41.   @media (-moz-windows-default-theme) {
  42.     .tabbrowser-tab:not(:-moz-lwtheme) {
  43.       background-color: transparent !important;
  44.       border: none !important;
  45.     }
  46.   }
  47. }
  48.  
  49. .tabbrowser-tab > .tab-stack > .tab-background {
  50.   background-image: none !important;
  51.   -moz-box-orient: horizontal !important;
  52.   background-color: transparent !important;
  53.   margin-top: 1px !important;
  54. }
  55.  
  56. .tab-background[selected="true"] {
  57.   border: none !important;
  58.   pointer-events: none !important;
  59. }
  60.  
  61. .tab-line {
  62.   display: none !important;
  63. }
  64.  
  65. .tab-bottom-line {
  66.   display: none !important;
  67. }
  68.  
  69. /* Match height of new tab button (right svg) on hover */
  70. .tabs-newtab-button {
  71.   margin: 0 !important;
  72. }
  73.  
  74. /* overlap the tab curves */
  75. .tab-background {
  76.   -moz-margin-end: -15px !important;
  77.   -moz-margin-start: -15px !important;
  78. }
  79.  
  80. /* Begin tab background customizations */
  81. .tab-background[selected="true"]::before {
  82.   border: none !important;
  83.   content: "" !important;
  84.   width: 30px !important;
  85.   min-height: 30px !important;
  86.   display: -moz-box !important;
  87.   background-repeat: no-repeat !important;
  88. }
  89.  
  90. .tab-background[selected="true"]::after {
  91.   border: none !important;
  92.   content: "" !important;
  93.   width: 30px !important;
  94.   min-height: 30px !important;
  95.   display: -moz-box !important;
  96.   background-repeat: no-repeat !important;
  97. }
  98.  
  99. .tab-background[selected="true"] > spacer {
  100.   margin-top: 0px !important;
  101. }
  102.  
  103. #new-tab-button,
  104. .tabs-newtab-button {
  105.   width: calc(36px + 30px) !important;
  106.   margin-inline-start: -15px !important;
  107.   margin-top: 1px !important;
  108. }
  109.  
  110. /* Tab hover customizations */
  111.  
  112. /* Regular tabs */
  113. .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
  114.   display: -moz-box !important;
  115.   background-repeat: no-repeat !important;
  116.   content: "" !important;
  117.   width: 30px !important;
  118.   max-height: 30px !important;
  119.   background-color: transparent !important;
  120. }
  121.  
  122. .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
  123.   display: -moz-box !important;
  124.   background-repeat: no-repeat !important;
  125.   content: "" !important;
  126.   width: 30px !important;
  127.   max-height: 30px !important;
  128.   background-color: transparent !important;
  129. }
  130.  
  131. .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
  132.   margin-top: 0px !important;
  133. }
  134.  
  135. #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]),
  136. .tabs-newtab-button:hover,
  137. .tabs-newtab-button:hover::before,
  138. .tabs-newtab-button:hover::after {
  139.   background-color: transparent !important;
  140. }
  141.  
  142. /* New tab hover customizations */
  143. .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]), .tabs-newtab-button:hover {
  144.   background-position: 0px 2px, 30px 4px , 36px 2px !important;
  145.   background-repeat: no-repeat !important;
  146.   background-size: 30px 30px, calc(100% - (2 * 30px)) 30px, 30px !important;
  147. }
  148.  
  149. .tabs-newtab-button:hover > .toolbarbutton-icon {
  150.   background: none !important;
  151.   background-color: transparent !important;
  152. }
  153.  
  154. /* Color specific customizations */
  155. :root {
  156.   --svg-selected-before: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgb(50, 50, 52);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");
  157.  
  158.   --svg-selected-after: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgb(50, 50, 52);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");
  159.  
  160.   --background-selected-middle:
  161.     linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
  162.     linear-gradient(
  163.       transparent
  164.       2px,
  165.       rgb(50, 50, 52) 2px,
  166.       rgb(50, 50, 52)
  167.     ),
  168.     none !important;
  169.  
  170.   --svg-hover-before: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255, .1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");
  171.  
  172.   --svg-hover-after: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");
  173.  
  174.   --background-hover-middle:
  175.     linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
  176.     linear-gradient(
  177.       transparent
  178.       2px,
  179.       rgba(255,255,255,.1) 2px,
  180.       rgba(255,255,255,.1)
  181.     ),
  182.     none;
  183.  
  184.   --newtab-hover: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='30px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgba(255,255,255,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"),
  185.     linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)),
  186.     url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgba(255,255,255,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");
  187. }
  188.  
  189.  
  190. /* OS-specific color variables */
  191. @media screen and (-moz-windows-theme) {
  192.   :root {
  193.  
  194.   }
  195. }
  196.  
  197. @media not screen and (-moz-windows-theme) {
  198.   :root {
  199.  
  200.   }
  201. }
  202.  
  203. .tab-background[selected="true"]::before {
  204.   background-image: var(--svg-selected-before) !important;
  205. }
  206. .tab-background[selected="true"]::after {
  207.   background-image: var(--svg-selected-after) !important;
  208. }
  209.  
  210. .tab-background[selected="true"] > spacer {
  211.   background-image: var(--background-selected-middle) !important;
  212. }
  213.  
  214. .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
  215.   background-image: var(--svg-hover-before) !important;
  216. }
  217.  
  218. .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
  219.   background-image: var(--svg-hover-after) !important;
  220. }
  221.  
  222. .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
  223.   background-image: var(--background-hover-middle) !important;
  224. }
  225.  
  226. .tabs-newtab-button:hover {
  227.   background-image: var(--newtab-hover) !important;
  228. }
  229.  
  230. /* Hide separator, only show *** button after 2-sec hover */
  231.  
  232. #pageActionSeparator {
  233.  display: none !important;
  234.  
  235. }
  236.  
  237. #page-action-buttons #pageActionButton {
  238.  width: 0 !important;
  239.  padding: 4px !important;
  240.  transition: all 1s ease-in-out;
  241.  
  242. }
  243.  
  244. #appMenu-library-recentHighlights { display: none !important; }
  245.  
  246. #page-action-buttons:hover #pageActionButton {
  247.  width: 24px !important;
  248.  padding: 4px !important;
  249.  transition: all 1s ease-in-out 4s;
  250.  
  251. }
  252.  
  253. .tab-throbber[busy]::before {
  254.  background-image: url("chrome://global/skin/icons/loading.png") !important;
  255.  animation: unset !important;
  256. }
  257. .tab-throbber[busy]:not([progress])::before {
  258.  /* Grays the blue during "Connecting" state */
  259.  filter: grayscale(100%);
  260.  
  261. }
  262.  
  263. @media (min-resolution: 2dppx) {
  264.  
  265.  .tab-throbber[busy]::before {
  266.    background-image: url("chrome://global/skin/icons/loading@2x.png") !important;
  267. }
  268. }
RAW Paste Data