Ein letztes Update, bevor FF90 uns vor neue Herausforderungen stellt. Meinen Code von #289 habe ich nochmal gründlich aufgepeppt. Ein paar Ergänzungen, damit es auch für nicht-Proton und Firefox 88 und früher kompatibel ist, geht mindestens bis FF76, noch weiter zurück wären weitere Anpassungen nötig. Die Farben trotzen jetzt auch dem Dark Mode des Betriebssystems und werden nur noch dann gesetzt, wenn bei Firefox das System-Theme ausgewählt ist. Wer andere Farben braucht, nimmt also einfach ein anderes Theme.
RRM
CSS
/* FF89+ - TABS: on bottom */
/* RRM 20210707 - Version 7 */
#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) #titlebar{
height: 25px !important;
}
.titlebar-buttonbox-container{
position: fixed !important;
right: 0px !important;
visibility: visible !important;
display: block !important;
}
#TabsToolbar .titlebar-buttonbox-container,
#TabsToolbar #window-controls{
display: none !important;
}
#TabsToolbar{
position: absolute !important;
display: block !important;
bottom: 0px !important;
}
:root{
--tab-min-height: 27px !important; /* increase if you want higher tabs */
}
#navigator-toolbox{
position: relative !important;
padding-bottom: var(--tab-min-height) !important;
/* border: none !important; */ /* you might need it here in case you skip it at the end of the code */
}
#TabsToolbar, #tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
.tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]{
max-height: var(--tab-min-height) !important;
}
#tabbrowser-tabs{
width: 100vw !important;
}
/* end of the essential part */
/* next part needed for compatibility with Windows 7 and non-Proton and FF88 and previous */
.tab-background{
/* margin-block: 0px !important; */ /* if you don't want Proton tabs in FF themes - also uncomment line 33 */
box-shadow: none !important;
border: none !important;
}
#TabsToolbar > .toolbar-items{
padding-top: 0px !important;
margin-top: 0px !important;
}
.tab-line{
display: none !important;
}
.tabbrowser-tab::after,
.tabbrowser-tab::before{
border: none !important;
}
/* next part for slim style of tabs */
/* you may insert your own code instead */
.tabbrowser-tab{
padding-inline: 0px !important;
margin-left: 1px !important;
min-height: 4px !important;
border: none !important;
}
.tabbrowser-tab[selected]{
border-radius: 3px !important;
}
.tab-background[selected]{
border-radius: 3px !important;
}
.tabbrowser-tab:not([selected]){
border-radius: 3px !important;
}
.tab-background:not([selected]){
border-radius: 3px !important;
}
.tabbrowser-tab .tab-label{
font-size: 12px !important;
}
.tabbrowser-tab .tab-label[selected]{
font-size: 12px !important;
}
#TabsToolbar .tab-icon-image{
height: 16px !important;
width: 16px !important;
margin-left: -2px !important;
margin-bottom: 2px !important;
}
toolbarbutton#scrollbutton-up,
toolbarbutton#scrollbutton-down{
margin-top: -2px !important;
margin-bottom: -2px !important;
}
@media not (-moz-proton){
.tab-close-button{
width: 17px !important;
}}
/* and now let's go for colours */
/* this one is TARDIS-blueish in case of FF System-Theme */
/* select another theme in FF if you want different colours */
/* for example if you need to adapt to a dark mode of your OS */
/* or you can skip or replace this part of the code by your own */
.tabbrowser-tab[selected]:not(:-moz-lwtheme) .tab-content{
background-color: #DAD7D0 !important;
}
.tabbrowser-tab:not([selected]):not(:-moz-lwtheme){
background-color: #ACBDD7 !important;
}
#tabbrowser-tabs:not([fokus]):not(:-moz-lwtheme){
opacity: 1 !important;
}
.tabbrowser-tab .tab-label:not(:-moz-lwtheme){
color: white !important;
}
.tabbrowser-tab .tab-label[selected]:not(:-moz-lwtheme){
color: black !important;
}
.tab-close-button:not(:-moz-lwtheme){
color: white !important;
}
.tab-close-button[selected]:not(:-moz-lwtheme){
color: black !important;
}
#urlbar-search-mode-indicator-close:not(:-moz-lwtheme),
#nav-bar:not(:-moz-lwtheme) toolbarbutton,
#PersonalToolbar:not(:-moz-lwtheme) toolbarbutton,
#TabsToolbar:not(:-moz-lwtheme) #new-tab-button,
#tabs-newtab-button:not(:-moz-lwtheme),
#alltabs-button:not(:-moz-lwtheme),
toolbarbutton#scrollbutton-up:not(:-moz-lwtheme),
toolbarbutton#scrollbutton-down:not(:-moz-lwtheme){
fill: #5B5B66 !important; /* FF89 - you can use both */
color: #5B5B66 !important; /* FF88 - you can use both */
}
#urlbar:not(:-moz-lwtheme), #searchbar:not(:-moz-lwtheme){
color: black !important;
}
#urlbar-background:not(:-moz-lwtheme), #searchbar:not(:-moz-lwtheme){
background-color: white !important;
}
#urlbar-search-mode-indicator:not(:-moz-lwtheme){
background-color: #D6EBFF !important;
outline: 1px solid #0060DF !important;
color: #0060DF !important;
}
:root:not(:-moz-lwtheme){
--button-hover-bgcolor: #B0C4E9 !important;
}
:root{
--menubar-bgcolor1: #B4C8E4 !important;
--menubar-bgcolor2: #B4C8E4 !important;
}
@media(-moz-windows-glass){
:root[tabsintitlebar]{
--menubar-bgcolor2: transparent !important;
}}
@media(-moz-os-version: windows-win10){
:root[tabsintitlebar]{
--menubar-bgcolor1: transparent !important;
--menubar-bgcolor2: transparent !important;
}}
#navigator-toolbox:not(:-moz-lwtheme){
-moz-appearance: none !important;
background-image: linear-gradient(to right, var(--menubar-bgcolor1), var(--menubar-bgcolor2)) !important;
border: none !important;
}
#nav-bar:not(:-moz-lwtheme){
-moz-appearance: none !important;
background-image: none !important;
background-color: #C2D3ED !important;
}
#PersonalToolbar:not(:-moz-lwtheme){
-moz-appearance: none !important;
background-image: none !important;
background-color: #CADBF2 !important;
color: black !important;
}
#TabsToolbar:not(:-moz-lwtheme){
-moz-appearance: none !important;
background-image: none !important;
background-color: #D2E3F2 !important;
}
/* by Real Radioactiveman */
/* enjoy */
Alles anzeigen