Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* Photon Australis - Curve Tabs CSS mod *********************************************************/
- /* by wilfredwee *********************************************************************************/
- /* with addional code by teijiIshida ************************************************************/
- /* Github: https://github.com/wilfredwee/photon-australis ***************************************/
- /************************************************************************************************/
- /************************************************************************************************/
- /* based on wilfredwee's Default theme CSS mod v0.3.0 *******************************************/
- /************************************************************************************************/
- :root {
- --tab-curve-width: 30px;
- --tabs-border: transparent !important;
- }
- .arrowscrollbox-scrollbox {
- padding-inline-start: 10px !important;
- }
- /* To be able to see the top border of the tab */
- .tab-stack {
- margin-top: 2px !important;
- }
- /* When the window is maximized, the first pinned tab is properly displayed. */
- #TabsToolbar {
- padding-inline-start: 15px !important;
- }
- .titlebar-spacer {
- border: none !important;
- }
- /* Remove unneeded styles from Photon */
- .tabbrowser-tab::before,
- .tabbrowser-tab::after {
- border: none !important;
- }
- .tabbrowser-tab > .tab-stack > .tab-background {
- background-image: none !important;
- flex-direction: row !important;
- background-color: transparent !important;
- margin-top: 1px !important;
- }
- .tab-background[selected="true"] {
- border: none !important;
- }
- .tab-line {
- display: none !important;
- }
- .tab-context-line {
- display: none !important;
- }
- /* Match height of new tab button (right svg) on hover */
- #tabs-newtab-button {
- margin: 0 !important;
- }
- /* overlap the tab curves */
- .tab-background {
- -moz-margin-end: -15px !important;
- -moz-margin-start: -15px !important;
- outline: none !important; /*Since Firefox 102 this is now needed, otherwise you get white line on top of tab */
- }
- /* Begin tab background customizations */
- .tab-background[selected="true"]::before {
- border: none !important;
- content: "" !important;
- width: 30px !important;
- min-height: 30px !important;
- display: flex !important;
- background-repeat: no-repeat !important;
- }
- .tab-background[selected="true"]::after {
- border: none !important;
- content: "" !important;
- width: 30px !important;
- min-height: 30px !important;
- display: flex !important;
- background-repeat: no-repeat !important;
- }
- .tab-background[selected="true"]{
- margin-top: 0px !important;
- }
- #new-tab-button,
- #tabs-newtab-button {
- width: calc(36px + 30px) !important;
- margin-inline-start: -15px !important;
- margin-top: 1px !important;
- }
- /* Tab hover customizations */
- .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
- display: flex !important;
- background-repeat: no-repeat !important;
- content: "" !important;
- width: 30px !important;
- min-height: 30px !important;
- background-color: transparent !important;
- }
- .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
- display: flex !important;
- background-repeat: no-repeat !important;
- content: "" !important;
- width: 30px !important;
- min-height: 30px !important;
- background-color: transparent !important;
- }
- .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > .tab-loading-burst{
- margin-top: 0px !important;
- }
- #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]),
- #tabs-newtab-button:hover,
- #tabs-newtab-button:hover::before,
- #tabs-newtab-button:hover::after {
- background-color: transparent !important;
- }
- /* New tab hover customizations */
- .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]), #tabs-newtab-button:hover {
- background-position: 0px 2px, 30px 4px , right bottom !important;
- background-repeat: no-repeat !important;
- background-size: 30px 30px, calc(100% - (2 * 30px)) 30px, 30px !important;
- }
- #tabs-newtab-button:hover > .toolbarbutton-icon {
- background: none !important;
- background-color: transparent !important;
- }
- /* Inactive tab customizations */
- .tab-background:not([selected])::before {
- border: none !important;
- content: "" !important;
- width: 30px !important;
- min-height: 30px !important;
- display: flex !important;
- background-repeat: no-repeat !important;
- }
- .tab-background:not([selected])::after {
- border: none !important;
- content: "" !important;
- width: 30px !important;
- min-height: 30px !important;
- display: flex !important;
- background-repeat: no-repeat !important;
- }
- .tab-background:not([selected]) > .tab-loading-burst{
- margin-top: 0px !important;
- }
- /******************************************** SVG: Color specific customizations ********************************************/
- /* ACTIVE Tab */
- .tab-background[selected="true"]::before {
- /* 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; */
- 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;
- }
- .tab-background[selected="true"]::after {
- /* 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; */
- 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;
- }
- .tab-background[selected="true"] > .tab-loading-burst{
- background-image:
- linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
- linear-gradient(
- transparent
- 2px,
- /*
- rgb(193, 193, 193) 2px,
- rgb(193, 193, 193)
- */
- rgb(67, 81, 104) 2px,
- rgb(67, 81, 104)
- ),
- none !important;
- }
- /* Hover Tab */
- .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
- 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;
- }
- .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
- 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;
- }
- .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > .tab-loading-burst{
- background-image:
- linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
- linear-gradient(
- transparent
- 2px,
- rgba(255,255,255, 0.8) 2px,
- rgba(255,255,255, 0.8)
- ),
- none !important;
- }
- #tabs-newtab-button:hover {
- 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>"),
- linear-gradient(rgba(255,255,255, 0.3), rgba(255,255,255, 0.3)),
- 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>")
- !important;
- }
- /* Inactive Tabs */
- .tab-background:not([selected])::before {
- 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;
- }
- .tab-background:not([selected])::after {
- 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;
- }
- .tab-background:not([selected]) > .tab-loading-burst{
- background-image:
- linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
- linear-gradient(
- transparent
- 2px,
- rgba(255,255,255, 0.6) 2px,
- rgba(255,255,255, 0.6)
- ),
- none !important;
- }
- /* Fix for first tab curve: INACTIVE */
- #tabbrowser-tabs tab:first-child > .tab-stack > .tab-background:not([selected])::before {
- 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;
- }
- #tabbrowser-tabs tab:first-child > .tab-stack > .tab-background:not([selected])::after {
- 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;
- }
- #tabbrowser-tabs tab:first-child > .tab-stack > .tab-background:not([selected]) > .tab-loading-burst {
- background-image:
- linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
- linear-gradient(
- transparent
- 2px,
- rgba(255,255,255, 0.6) 2px,
- rgba(255,255,255, 0.6)
- ),
- none !important;
- }
- /* Fix for first tab curve: HOVER */
- #tabbrowser-tabs tab:first-child:hover > .tab-stack > .tab-background:not([selected])::before {
- 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;
- }
- #tabbrowser-tabs tab:first-child:hover > .tab-stack > .tab-background:not([selected])::after {
- 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;
- }
- #tabbrowser-tabs tab:first-child:hover > .tab-stack > .tab-background:not([selected]) > .tab-loading-burst {
- background-image:
- linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
- linear-gradient(
- transparent
- 2px,
- rgba(255,255,255, 0.8) 2px,
- rgba(255,255,255, 0.8)
- ),
- none !important;
- }
- /* Change color of all tabs' text */
- /* Change color of in-active tab */
- #TabsToolbar .tabbrowser-tab:not([selected]){
- color: rgb(5, 36, 173) !important;
- }
- /* Bold ACTIVE tab and set its color to white */ /* Change color of active tab */
- #TabsToolbar .tabbrowser-tab[selected] {
- font-weight: bold !important;
- color: white !important;
- text-shadow: none;
- }
- :root{ --tab-block-margin: 0px !important; --tab-min-height: 31px !important; }
- .tab-background{ border-radius: 0 !important; box-shadow: none !important; }
- .tabbrowser-tab{ padding-inline: 0px !important; }
- #tabbrowser-tabs{ --scrollbutton-margin: 0px; }
- #scrollbutton-up,#scrollbutton-down{ border-block: var(--scrolllbutton-margin,initial) !important; }
Advertisement
Add Comment
Please, Sign In to add comment