diff --git a/userChrome-breeze-dark.css b/userChrome-breeze-dark.css new file mode 100644 index 0000000..3737d40 --- /dev/null +++ b/userChrome-breeze-dark.css @@ -0,0 +1,209 @@ +: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-placeholder { + 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; + -moz-box-orient: horizontal !important; + background-color: transparent !important; + margin-top: 1px !important; +} + +.tab-background[selected="true"] { + border: 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; +} + +/* 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 */ + +/* 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; + min-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; + min-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-selected-after: url("data:image/svg+xml;utf8,
"); + + --background-selected-middle: + linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), + linear-gradient( + transparent + 2px, + rgb(79, 83, 88) 2px, + rgb(79, 83, 88) + ), + none !important; + + --svg-hover-before: url("data:image/svg+xml;utf8,
"); + + --svg-hover-after: url("data:image/svg+xml;utf8,
"); + + --background-hover-middle: + linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)), + linear-gradient( + transparent + 2px, + rgba(255,255,255,.1) 2px, + rgba(255,255,255,.1) + ), + none; + + --newtab-hover: url("data:image/svg+xml;utf8,
"), + linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)), + url("data:image/svg+xml;utf8,
"); +} + + +/* 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; +} +