Guest User

Updated firefox 113 style script

a guest
May 10th, 2023
141
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 23.57 KB | None | 0 0
  1. /* Photon Australis - Curve Tabs CSS mod *********************************************************/
  2. /* by wilfredwee *********************************************************************************/
  3. /* with addional code by teijiIshida ************************************************************/
  4. /* Github: https://github.com/wilfredwee/photon-australis ***************************************/
  5. /************************************************************************************************/
  6.  
  7. /************************************************************************************************/
  8. /* based on wilfredwee's Default theme CSS mod v0.3.0 *******************************************/
  9. /************************************************************************************************/
  10.  
  11. :root {
  12.   --tab-curve-width: 30px;
  13.   --tabs-border: transparent !important;
  14. }
  15.  
  16. .arrowscrollbox-scrollbox {
  17.   padding-inline-start: 10px !important;
  18. }
  19.  
  20. /* To be able to see the top border of the tab */
  21. .tab-stack {
  22.   margin-top: 2px !important;
  23. }
  24.  
  25. /* When the window is maximized, the first pinned tab is properly displayed. */
  26. #TabsToolbar  {
  27.   padding-inline-start: 15px !important;
  28. }
  29.  
  30. .titlebar-spacer {
  31.   border: none !important;
  32. }
  33.  
  34. /* Remove unneeded styles from Photon */
  35. .tabbrowser-tab::before,
  36. .tabbrowser-tab::after {
  37.   border: none !important;
  38. }
  39.  
  40. .tabbrowser-tab > .tab-stack > .tab-background {
  41.   background-image: none !important;
  42.   flex-direction: row !important;
  43.   background-color: transparent !important;
  44.   margin-top: 1px !important;
  45. }
  46.  
  47. .tab-background[selected="true"] {
  48.   border: none !important;
  49. }
  50.  
  51. .tab-line {
  52.   display: none !important;
  53. }
  54.  
  55. .tab-context-line {
  56.   display: none !important;
  57. }
  58.  
  59. /* Match height of new tab button (right svg) on hover */
  60. #tabs-newtab-button {
  61.   margin: 0 !important;
  62. }
  63.  
  64. /* overlap the tab curves */
  65. .tab-background {
  66.   -moz-margin-end: -15px !important;
  67.   -moz-margin-start: -15px !important;
  68.   outline: none !important; /*Since Firefox 102 this is now needed, otherwise you get white line on top of tab */
  69. }
  70.  
  71. /* Begin tab background customizations */
  72. .tab-background[selected="true"]::before {
  73.   border: none !important;
  74.   content: "" !important;
  75.   width: 30px !important;
  76.   min-height: 30px !important;
  77.   display: flex !important;
  78.   background-repeat: no-repeat !important;
  79. }
  80.  
  81. .tab-background[selected="true"]::after {
  82.   border: none !important;
  83.   content: "" !important;
  84.   width: 30px !important;
  85.   min-height: 30px !important;
  86.   display: flex !important;
  87.   background-repeat: no-repeat !important;
  88. }
  89.  
  90. .tab-background[selected="true"]{
  91.   margin-top: 0px !important;
  92. }
  93.  
  94. #new-tab-button,
  95. #tabs-newtab-button {
  96.   width: calc(36px + 30px) !important;
  97.   margin-inline-start: -15px !important;
  98.   margin-top: 1px !important;
  99. }
  100.  
  101. /* Tab hover customizations */
  102. .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
  103.   display: flex !important;
  104.   background-repeat: no-repeat !important;
  105.   content: "" !important;
  106.   width: 30px !important;
  107.   min-height: 30px !important;
  108.   background-color: transparent !important;
  109. }
  110.  
  111. .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
  112.   display: flex !important;
  113.   background-repeat: no-repeat !important;
  114.   content: "" !important;
  115.   width: 30px !important;
  116.   min-height: 30px !important;
  117.   background-color: transparent !important;
  118. }
  119.  
  120. .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) >  .tab-loading-burst{
  121.   margin-top: 0px !important;
  122. }
  123.  
  124. #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]),
  125. #tabs-newtab-button:hover,
  126. #tabs-newtab-button:hover::before,
  127. #tabs-newtab-button:hover::after {
  128.   background-color: transparent !important;
  129. }
  130.  
  131. /* New tab hover customizations */
  132. .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]), #tabs-newtab-button:hover {
  133.   background-position: 0px 2px, 30px 4px , right bottom !important;
  134.   background-repeat: no-repeat !important;
  135.   background-size: 30px 30px, calc(100% - (2 * 30px)) 30px, 30px !important;
  136. }
  137.  
  138. #tabs-newtab-button:hover > .toolbarbutton-icon {
  139.   background: none !important;
  140.   background-color: transparent !important;
  141. }
  142.  
  143.  
  144. /* Inactive tab customizations */
  145. .tab-background:not([selected])::before {
  146.   border: none !important;
  147.   content: "" !important;
  148.   width: 30px !important;
  149.   min-height: 30px !important;
  150.   display: flex !important;
  151.   background-repeat: no-repeat !important;
  152. }
  153.  
  154. .tab-background:not([selected])::after {
  155.   border: none !important;
  156.   content: "" !important;
  157.   width: 30px !important;
  158.   min-height: 30px !important;
  159.   display: flex !important;
  160.   background-repeat: no-repeat !important;
  161. }
  162.  
  163. .tab-background:not([selected]) >  .tab-loading-burst{
  164.   margin-top: 0px !important;
  165. }
  166.  
  167.  
  168. /******************************************** SVG: Color specific customizations ********************************************/
  169. /* ACTIVE Tab */
  170. .tab-background[selected="true"]::before {
  171.     /* background-image: 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(193, 193, 193);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important; */
  172.    background-image: 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(67, 81, 104);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important;
  173. }
  174.  
  175. .tab-background[selected="true"]::after {
  176.    /* background-image: 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(193, 193, 193);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important; */
  177.   background-image: 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(67, 81, 104);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important;
  178. }
  179.  
  180. .tab-background[selected="true"] > .tab-loading-burst{
  181.   background-image:
  182.   linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
  183.   linear-gradient(
  184.     transparent
  185.     2px,
  186.     /*
  187.     rgb(193, 193, 193) 2px,
  188.     rgb(193, 193, 193)
  189.     */
  190.     rgb(67, 81, 104) 2px,
  191.     rgb(67, 81, 104)
  192.   ),
  193.   none !important;
  194. }
  195.  
  196. /* Hover Tab */
  197. .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
  198.   background-image: 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.69,0.0625 0.05,0 0,0.938 -0.9,0 0,-0.028 C 0.75,0.95840561 0.5453096,0.81970962 0.53499998,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='30' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255, 0.8);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important;
  199. }
  200.  
  201. .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
  202.   background-image: 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, 0.8);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important;
  203. }
  204.  
  205. .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) >  .tab-loading-burst{
  206.   background-image:
  207.   linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
  208.   linear-gradient(
  209.     transparent
  210.     2px,
  211.     rgba(255,255,255, 0.8) 2px,
  212.     rgba(255,255,255, 0.8)
  213.   ),
  214.   none !important;
  215. }
  216.  
  217. #tabs-newtab-button:hover {
  218.   background-image: 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.68,0.0625 0.05,0 0,0.938 -0.9,0 0,-0.028 C 0.75,0.95840561 0.5453096,0.81970962 0.53499998,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, 0.3);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"),
  219.     linear-gradient(rgba(255,255,255, 0.3), rgba(255,255,255, 0.3)),
  220.                     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.68,0.0625 0.05,0 0,0.938 -0.9,0 0,-0.028 C 0.75,0.95840561 0.5453096,0.81970962 0.53499998,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, 0.3);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>")
  221.     !important;
  222. }
  223.  
  224.  
  225. /* Inactive Tabs */
  226. .tab-background:not([selected])::before {
  227.   background-image: 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.77,0.0625 0.05,0 0,0.938 -0.9,0 0,-0.028 C 0.75,0.95840561 0.5453096,0.81970962 0.53499998,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,0.6);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important;
  228. }
  229.  
  230. .tab-background:not([selected])::after {
  231.   background-image: 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, 0.6);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important;
  232. }
  233.  
  234. .tab-background:not([selected]) > .tab-loading-burst{
  235.   background-image:
  236.   linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
  237.   linear-gradient(
  238.     transparent
  239.     2px,
  240.     rgba(255,255,255, 0.6) 2px,
  241.     rgba(255,255,255, 0.6)
  242.   ),
  243.   none !important;
  244. }
  245.  
  246.  
  247. /* Fix for first tab curve: INACTIVE */
  248. #tabbrowser-tabs tab:first-child > .tab-stack > .tab-background:not([selected])::before {
  249.     background-image: 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,0.6);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important;
  250. }
  251.  
  252. #tabbrowser-tabs tab:first-child > .tab-stack > .tab-background:not([selected])::after {
  253.   background-image: 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, 0.6);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important;
  254. }
  255.  
  256. #tabbrowser-tabs tab:first-child > .tab-stack > .tab-background:not([selected]) >  .tab-loading-burst {
  257.   background-image:
  258.   linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
  259.   linear-gradient(
  260.     transparent
  261.     2px,
  262.     rgba(255,255,255, 0.6) 2px,
  263.     rgba(255,255,255, 0.6)
  264.   ),
  265.   none !important;
  266. }
  267.  
  268.  
  269. /* Fix for first tab curve: HOVER */
  270. #tabbrowser-tabs tab:first-child:hover > .tab-stack > .tab-background:not([selected])::before {
  271.     background-image: 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,0.8);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important;
  272. }
  273.  
  274. #tabbrowser-tabs tab:first-child:hover > .tab-stack > .tab-background:not([selected])::after {
  275.   background-image: 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, 0.8);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important;
  276. }
  277.  
  278. #tabbrowser-tabs tab:first-child:hover > .tab-stack > .tab-background:not([selected]) > .tab-loading-burst {
  279.   background-image:
  280.   linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
  281.   linear-gradient(
  282.     transparent
  283.     2px,
  284.     rgba(255,255,255, 0.8) 2px,
  285.     rgba(255,255,255, 0.8)
  286.   ),
  287.   none !important;
  288. }
  289.  
  290.  
  291. /* Change color of all tabs' text */
  292.  
  293. /* Change color of in-active tab */
  294. #TabsToolbar .tabbrowser-tab:not([selected]){
  295.     color: rgb(5, 36, 173) !important;
  296. }
  297.  
  298.  
  299. /* Bold ACTIVE tab and set its color to white */ /* Change color of active tab */
  300. #TabsToolbar .tabbrowser-tab[selected] {
  301.     font-weight: bold !important;
  302.     color: white !important;
  303.     text-shadow: none;
  304. }
  305. :root{ --tab-block-margin: 0px !important; --tab-min-height: 31px !important; }
  306. .tab-background{ border-radius: 0 !important; box-shadow: none !important; }
  307. .tabbrowser-tab{ padding-inline: 0px !important; }
  308. #tabbrowser-tabs{ --scrollbutton-margin: 0px; }
  309. #scrollbutton-up,#scrollbutton-down{ border-block: var(--scrolllbutton-margin,initial) !important; }
Advertisement
Add Comment
Please, Sign In to add comment