Created
March 8, 2019 08:12
-
-
Save kanehekili/67310633464fccb1c9402def7ea98b2d to your computer and use it in GitHub Desktop.
Firefox round tabs and a colorful findbar
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --tab-curve-width: 30px; | |
| --tabs-border: transparent !important; | |
| } | |
| .tabbrowser-arrowscrollbox .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; | |
| } | |
| #tabbrowser-tabs{ | |
| margin-left:-15px; | |
| } | |
| .titlebar-placeholder { | |
| border: none !important; | |
| } | |
| /* Remove unneeded styles from Photon */ | |
| .tabbrowser-tab::before, | |
| .tabbrowser-tab::after { | |
| border: none !important; | |
| } | |
| /* Windows 7 specific */ | |
| @media (-moz-os-version: windows-win7) { | |
| .tabbrowser-tab { | |
| background-color: transparent !important; | |
| border: none !important; | |
| } | |
| @media (-moz-windows-default-theme) { | |
| .tabbrowser-tab:not(:-moz-lwtheme) { | |
| background-color: transparent !important; | |
| border: none !important; | |
| } | |
| } | |
| } | |
| .tabbrowser-tab > .tab-stack > .tab-background { | |
| background-image: none !important; | |
| -moz-box-orient: horizontal !important; | |
| background-color: transparent !important; | |
| margin-top: 1px !important; | |
| } | |
| .tab-background[selected="true"] { | |
| border: none !important; | |
| pointer-events: none !important; | |
| } | |
| .tab-line { | |
| display: none !important; | |
| } | |
| .tab-bottom-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; | |
| } | |
| /* Remove blue animation on tab on page load complete */ | |
| .tab-loading-burst { | |
| display: none !important; | |
| } | |
| /* Begin tab background customizations */ | |
| .tab-background[selected="true"]::before { | |
| border: none !important; | |
| content: "" !important; | |
| width: 30px !important; | |
| min-height: 30px !important; | |
| display: -moz-box !important; | |
| background-repeat: no-repeat !important; | |
| } | |
| .tab-background[selected="true"]::after { | |
| border: none !important; | |
| content: "" !important; | |
| width: 30px !important; | |
| min-height: 30px !important; | |
| display: -moz-box !important; | |
| background-repeat: no-repeat !important; | |
| } | |
| .tab-background[selected="true"] > spacer { | |
| 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 */ | |
| .close-icon:hover { | |
| border-radius: 50% !important; | |
| } | |
| /* Regular tabs */ | |
| .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before { | |
| display: -moz-box !important; | |
| background-repeat: no-repeat !important; | |
| content: "" !important; | |
| width: 30px !important; | |
| max-height: 30px !important; | |
| background-color: transparent !important; | |
| } | |
| .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after { | |
| display: -moz-box !important; | |
| background-repeat: no-repeat !important; | |
| content: "" !important; | |
| width: 30px !important; | |
| max-height: 30px !important; | |
| background-color: transparent !important; | |
| } | |
| .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer { | |
| 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 , 36px 2px !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; | |
| } | |
| /* Color specific customizations */ | |
| :root { | |
| --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(165,165,165);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"); | |
| --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(165,165,165);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"); | |
| --background-selected-middle: | |
| linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), | |
| linear-gradient( | |
| transparent | |
| 2px, | |
| rgb(165,165,165) 2px, | |
| rgb(165,165,165) | |
| ), | |
| none; | |
| --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='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='30' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255, .2);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"); | |
| --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,.2);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"); | |
| --background-hover-middle: | |
| linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), | |
| linear-gradient( | |
| transparent | |
| 2px, | |
| rgba(255,255,255,.2) 2px, | |
| rgba(255,255,255,.2) | |
| ), | |
| none; | |
| --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,.2);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"), | |
| linear-gradient(rgba(255,255,255,.2), rgba(255,255,255,.2)), | |
| 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,.2);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"); | |
| } | |
| /* OS-specific color variables */ | |
| @media screen and (-moz-windows-theme) { | |
| :root { | |
| } | |
| } | |
| @media not screen and (-moz-windows-theme) { | |
| :root { | |
| } | |
| } | |
| .tab-background[selected="true"]::before { | |
| background-image: var(--svg-selected-before) !important; | |
| } | |
| .tab-background[selected="true"]::after { | |
| background-image: var(--svg-selected-after) !important; | |
| } | |
| .tab-background[selected="true"] > spacer { | |
| background-image: var(--background-selected-middle) !important; | |
| } | |
| .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before { | |
| background-image: var(--svg-hover-before) !important; | |
| } | |
| .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after { | |
| background-image: var(--svg-hover-after) !important; | |
| } | |
| .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer { | |
| background-image: var(--background-hover-middle) !important; | |
| } | |
| .tabs-newtab-button:hover { | |
| background-image: var(--newtab-hover) !important; | |
| } | |
| /* findbar at bottom */ | |
| .browserContainer > findbar { | |
| background-color: #5C003Fff !important; | |
| color: white !important; | |
| } | |
| /* The match buttons */ | |
| .findbar-button { | |
| background: -moz-linear-gradient(top, #CFE782 0%, | |
| #9BCB2A 2%, | |
| #5DA331 97%, | |
| #659635 100%); !important; | |
| box-shadow: none !important; | |
| color: black !important; | |
| border: 1px solid blue; | |
| } | |
| .findbar-button:hover { | |
| background: #9BCB2A !important; | |
| box-shadow: none !important; | |
| border: 1px solid lightblue; | |
| } | |
| .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active){ | |
| background: -moz-linear-gradient(top, #659635 0%, | |
| #5DA331 2%, | |
| #9BCB2A 77%, | |
| #CFE782 100%); !important; | |
| border: 1px solid lightblue; | |
| } | |
| .findbar-textbox { | |
| width:20em !important; | |
| border-radius: 6px !important; | |
| } | |
| .findbar-find-next { | |
| -moz-border-end: none !important; | |
| -moz-margin-end: 0 !important; | |
| border-top-right-radius: 6px !important; | |
| border-bottom-right-radius: 6px !important; | |
| color: lightgreen !important; | |
| } | |
| .findbar-find-next:not([disabled=true]):hover { | |
| background:#FF00AE!important; | |
| } | |
| .findbar-find-previous:not([disabled=true]):hover { | |
| background:#FF00AE!important; | |
| } | |
| .findbar-find-previous { | |
| -moz-border-end: none; | |
| -moz-margin-start:2px !important; | |
| -moz-margin-end: 0 !important; | |
| border-top-left-radius: 6px !important; | |
| border-bottom-left-radius: 6px !important; | |
| color: lightgreen !important; | |
| } | |
| .findbar-closebutton { | |
| background: red !important; | |
| margin: 10px !important; | |
| border-radius: 10px !important; | |
| box-sizing: border-box !important; | |
| } | |
| .findbar-closebutton:hover { | |
| background: #FF7119 !important; | |
| border-radius: 10px !important; | |
| box-sizing: border-box !important; | |
| } | |
| .findbar-closebutton:active { | |
| background: #008000 !important; | |
| border-radius: 10px !important; | |
| } | |
| .findbar > .close-icon {background: #FF7119 !important; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment