SHARE
TWEET

chrome.css

a guest Oct 25th, 2019 89 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. .tabbrowser-arrowscrollbox .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. .titlebar-spacer {
  29.   border: none !important;
  30. }
  31.  
  32. /* Remove unneeded styles from Photon */
  33. .tabbrowser-tab::before,
  34. .tabbrowser-tab::after {
  35.   border: none !important;
  36. }
  37.  
  38. /* Windows 7 specific */
  39. @media (-moz-os-version: windows-win7) {
  40.   .tabbrowser-tab {
  41.     background-color: transparent !important;
  42.     border: none !important;
  43.   }
  44.  
  45.   @media (-moz-windows-default-theme) {
  46.     .tabbrowser-tab:not(:-moz-lwtheme) {
  47.       background-color: transparent !important;
  48.       border: none !important;
  49.     }
  50.   }
  51. }
  52.  
  53. .tabbrowser-tab > .tab-stack > .tab-background {
  54.   background-image: none !important;
  55.   -moz-box-orient: horizontal !important;
  56.   background-color: transparent !important;
  57.   margin-top: 1px !important;
  58. }
  59.  
  60. .tab-background[selected="true"] {
  61.   border: none !important;
  62. }
  63.  
  64. .tab-background {
  65.   pointer-events: none !important;
  66. }
  67.  
  68. .tab-line {
  69.   display: none !important;
  70. }
  71.  
  72. .tab-bottom-line {
  73.   display: none !important;
  74. }
  75.  
  76. /* Match height of new tab button (right svg) on hover */
  77. .tabs-newtab-button {
  78.   margin: 0 !important;
  79. }
  80.  
  81. /* overlap the tab curves */
  82. .tab-background {
  83.   -moz-margin-end: -15px !important;
  84.   -moz-margin-start: -15px !important;
  85. }
  86.  
  87. /* Remove blue animation on tab on page load complete */
  88. .tab-loading-burst {
  89.   display: none !important;
  90. }
  91.  
  92. /* Begin tab background customizations */
  93. .tab-background[selected="true"]::before {
  94.   border: none !important;
  95.   content: "" !important;
  96.   width: 30px !important;
  97.   min-height: 30px !important;
  98.   display: -moz-box !important;
  99.   background-repeat: no-repeat !important;
  100. }
  101.  
  102. .tab-background[selected="true"]::after {
  103.   border: none !important;
  104.   content: "" !important;
  105.   width: 30px !important;
  106.   min-height: 30px !important;
  107.   display: -moz-box !important;
  108.   background-repeat: no-repeat !important;
  109. }
  110.  
  111. .tab-background[selected="true"] > spacer {
  112.   margin-top: 0px !important;
  113. }
  114.  
  115. #new-tab-button,
  116. .tabs-newtab-button {
  117.   width: calc(36px + 30px) !important;
  118.   margin-inline-start: -15px !important;
  119.   margin-top: 1px !important;
  120. }
  121.  
  122. /* Tab hover customizations */
  123. .close-icon:hover {
  124.   border-radius: 50% !important;
  125. }
  126.  
  127. /* Regular tabs */
  128. .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
  129.   display: -moz-box !important;
  130.   background-repeat: no-repeat !important;
  131.   content: "" !important;
  132.   width: 30px !important;
  133.   max-height: 30px !important;
  134.   background-color: transparent !important;
  135. }
  136.  
  137. .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
  138.   display: -moz-box !important;
  139.   background-repeat: no-repeat !important;
  140.   content: "" !important;
  141.   width: 30px !important;
  142.   max-height: 30px !important;
  143.   background-color: transparent !important;
  144. }
  145.  
  146. .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
  147.   margin-top: 0px !important;
  148. }
  149.  
  150. #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]),
  151. .tabs-newtab-button:hover,
  152. .tabs-newtab-button:hover::before,
  153. .tabs-newtab-button:hover::after {
  154.   background-color: transparent !important;
  155. }
  156.  
  157. /* New tab hover customizations */
  158. .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]), .tabs-newtab-button:hover {
  159.   background-position: 0px 2px, 30px 4px , 36px 2px !important;
  160.   background-repeat: no-repeat !important;
  161.   background-size: 30px 30px, calc(100% - (2 * 30px)) 30px, 30px !important;
  162. }
  163.  
  164. .tabs-newtab-button:hover > .toolbarbutton-icon {
  165.   background: none !important;
  166.   background-color: transparent !important;
  167. }
  168.  
  169. /* Color specific customizations */
  170. :root {
  171.   --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.065 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.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -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.065 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>");
  172.  
  173.   --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.065 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.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -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.065 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>");
  174.  
  175.   --background-selected-middle:
  176.     linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
  177.     linear-gradient(
  178.       transparent
  179.       2px,
  180.       rgb(50, 50, 52) 2px,
  181.       rgb(50, 50, 52)
  182.     ),
  183.     none !important;
  184.  
  185.   --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.065 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.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -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.065 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>");
  186.  
  187.   --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.065 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.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -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.065 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>");
  188.  
  189.   --background-hover-middle:
  190.     linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
  191.     linear-gradient(
  192.       transparent
  193.       2px,
  194.       rgba(255,255,255,.1) 2px,
  195.       rgba(255,255,255,.1)
  196.     ),
  197.     none;
  198.  
  199.   --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.065 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.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -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.065 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>"),
  200.     linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)),
  201.     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.065 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.065 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.065 -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.065 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>");
  202. }
  203.  
  204.  
  205. /* OS-specific color variables */
  206. @media screen and (-moz-windows-theme) {
  207.   :root {
  208.  
  209.   }
  210. }
  211.  
  212. @media not screen and (-moz-windows-theme) {
  213.   :root {
  214.  
  215.   }
  216. }
  217.  
  218. @media (-moz-windows-accent-color-in-titlebar) {
  219.   :root[tabsintitlebar]:not(:-moz-window-inactive) {
  220.     background-color: #000000 !important;
  221.   }
  222. }
  223.  
  224.  
  225. .tab-background[selected="true"]::before {
  226.   background-image: var(--svg-selected-before) !important;
  227. }
  228. .tab-background[selected="true"]::after {
  229.   background-image: var(--svg-selected-after) !important;
  230. }
  231.  
  232. .tab-background[selected="true"] > spacer {
  233.   background-image: var(--background-selected-middle) !important;
  234. }
  235.  
  236. .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
  237.   background-image: var(--svg-hover-before) !important;
  238. }
  239.  
  240. .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
  241.   background-image: var(--svg-hover-after) !important;
  242. }
  243.  
  244. .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
  245.   background-image: var(--background-hover-middle) !important;
  246. }
  247.  
  248. .tabs-newtab-button:hover {
  249.   background-image: var(--newtab-hover) !important;
  250. }
RAW Paste Data
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
 
Top