568c1cd86b
This lets default light theme to use toolbar-bgcolor for the selected theme as well as make the line atop of selected tab (with default light theme) show as blue as per Photon styling.
92 lines
No EOL
3.6 KiB
CSS
92 lines
No EOL
3.6 KiB
CSS
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/non_floating_sharp_tabs.css made available under Mozilla Public License v. 2.0
|
|
See the above repository for updates as well as full license text. */
|
|
|
|
/* This style makes tabs and related items non-rounded and connects tabs to toolbars like in previous Firefox versions. */
|
|
|
|
/* It's not strictly a requirement, but this style expects compact_proton.css to be loaded before it. */
|
|
|
|
:root[id]{
|
|
--proton-tab-block-margin: 0px !important;
|
|
--tab-block-margin: 0px !important;
|
|
--tabs-shadow-size: 1px !important;
|
|
|
|
/* Remove next line if you want selected tab to have color other than toolbar background - then it follows your theme color */
|
|
--lwt-selected-tab-background-color: var(--toolbar-bgcolor) !important;
|
|
}
|
|
|
|
/* Uncomment next line to force specific color for tab top line */
|
|
/* #tabbrowser-tabs{ --tab-line-color: blue !important; } */
|
|
|
|
/* These next two rules set a color for border around tabs and between tabs & navigation toolbars. Set to transparent to remove the border.*/
|
|
#nav-bar{
|
|
/* This overrides value in compact_proton.css */
|
|
box-shadow: 0 -1px 0 0 color-mix(in srgb, currentcolor 30%, transparent) !important;
|
|
}
|
|
.tab-background[selected]{
|
|
border-inline: 1px solid color-mix(in srgb, currentcolor 30%, transparent) !important;
|
|
}
|
|
|
|
#TabsToolbar{
|
|
--toolbarbutton-inner-padding: 7px !important;
|
|
}
|
|
/* Few exceptions for default light theme */
|
|
#navigator-toolbox:not([movingtab]):-moz-lwtheme > #titlebar > #TabsToolbar{
|
|
--toolbar-bgcolor: transparent;
|
|
}
|
|
#TabsToolbar:not(:-moz-lwtheme){ --tab-line-color: transparent; }
|
|
.tab-background[selected]:not(:-moz-lwtheme){ background: var(--toolbar-bgcolor) !important; }
|
|
|
|
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-badge-stack,
|
|
#TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon{ border-radius: 2px !important; }
|
|
|
|
/* tabs newtab button needs some special styling... */
|
|
#tabs-newtab-button{ padding-inline: 0 !important; }
|
|
#tabbrowser-arrowscrollbox > #tabs-newtab-button > .toolbarbutton-icon{
|
|
border-radius: 0 !important;
|
|
width: initial !important;
|
|
height: initial !important;
|
|
padding: 9px !important;
|
|
}
|
|
:root[uidensity="compact"] #tabbrowser-arrowscrollbox > #tabs-newtab-button > .toolbarbutton-icon{
|
|
padding: 7px !important;
|
|
}
|
|
|
|
#scrollbutton-up,
|
|
#scrollbutton-down{ border-radius: 0 !important; border-width: 0 !important; padding-inline: 3px !important; }
|
|
|
|
/* tab shaping */
|
|
.tabbrowser-tab{ padding-inline: 0 !important; }
|
|
|
|
:root[uidensity="compact"] #tabbrowser-tabs[positionpinnedtabs] .tabbrowser-tab[pinned]{ min-height: calc(var(--tab-min-height) + 2px) !important; }
|
|
|
|
.tab-content[pinned]{ padding-inline: 11px !important; }
|
|
|
|
.tab-background{
|
|
border-radius: 0 !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
/* Line to mark selected tab */
|
|
.tab-background[selected]::before,
|
|
.tabbrowser-tab:hover > stack > .tab-background::before{
|
|
display: -moz-box;
|
|
height: 2px;
|
|
content: "";
|
|
}
|
|
.tab-stack:hover > .tab-background::before{
|
|
background-color: inherit;
|
|
}
|
|
.tab-stack > .tab-background[selected]::before{
|
|
background-color: highlight;
|
|
background-image: linear-gradient(var(--tab-line-color),var(--tab-line-color));
|
|
}
|
|
/* Photon-like tab on hover animation for the top line */
|
|
@keyframes tab-onhover-line-anim{ from{ margin-inline: 20px } to { margin-inline: 0 } }
|
|
|
|
.tab-stack:hover > .tab-background::before{ animation: tab-onhover-line-anim 160ms }
|
|
|
|
/* Disable animation for selected and pinned tabs */
|
|
.tabbrowser-tab:is([pinned],[selected]) > .tab-stack > .tab-background::before{ animation: none }
|
|
|
|
/* moves context-line to the bottom */
|
|
.tab-context-line{ -moz-box-ordinal-group: 2; margin-inline: 10px !important; } |