Guest User

chrome.css

a guest
Oct 25th, 2019
111
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