Ich bin ein begnadeter Kopist. Einiges hat mir schon aus obigen Code schon weiter geholfen.
Jetzt hätte ich gern das orange TAB, sowie alle Tabs, weiter nach oben gesetzt und die Tableiste schmaler gestaltet.
Geht das?
Wenn ja, wäre ich um Hilfestellung sehr dankbar.
Geht das?
Hallo und Willkommen hier im Forum. 😊
Wie lautet denn dein kompl. genutzter Code?
PS:
Ich habe deine Frage mal abgetrennt und in einen eigenen Thread verschoben.
Ist es noch möglich die Schrift in den Tabs mittig anzuordnen?
Teste bitte mal:
#tabbrowser-arrowscrollbox {
margin-top: -7px !important;
}
/* Aktiver Tab Hintergrund orange */
.tab-background[selected="true"] {
background: orange !important;
}
#TabsToolbar {
position: absolute;
display: block;
bottom: 0;
width: 100vw;
background-clip: padding-box;
color: var(--toolbar-color);
}
/* Tabs Höhe ändern */
.tabbrowser-tab {
min-height: 35px !important;
max-height: 35px !important;
}
/*Tab schließen Button verschoben*/
.tab-close-button{
flex-shrink: 0 !important;
margin-right: -6px !important;
}
/*Tabtext zentriert*/
.tab-content {
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.tab-label-container {
margin: auto !important;
}
/* Tabtext wird nicht ausgeblendet */
.tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
.tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
mask-image: none !important;
}
/*Abgerundete Tabs*/
.tab-background {
border-radius: 5px !important;
}
/*Inaktiver Tab HG hellgrau*/
.tabbrowser-tab:not([visuallyselected="true"]) > .tab-stack > .tab-background {
background: white !important;
}
#tabbrowser-tabs {
width: 100vw;
}
#navigator-toolbox {
position: relative;
padding-bottom: calc( var(--tab-min-height) + 5px );
}
.titlebar-buttonbox-container {
position: fixed;
right: 0;
visibility: visible;
display: block;
}
#TabsToolbar .titlebar-buttonbox-container,
#TabsToolbar #window-controls {
display: none;
}Danke, das sieht schon sehr viel besser aus.
Die Schrift mittig, ich meinte das andere Mittig. Vertikal. Das ist mein Versehen
Ein paar Pixel noch verändert, das "andere Mittig" wieder gelöscht.
#tabbrowser-arrowscrollbox {
margin-top: -4px !important;
}
/* Aktiver Tab Hintergrund orange */
.tab-background[selected="true"] {
background: orange !important;
}
#TabsToolbar {
position: absolute;
display: block;
bottom: 0;
width: 100vw;
background-clip: padding-box;
color: var(--toolbar-color);
}
/* Tabs Höhe ändern */
.tabbrowser-tab {
min-height: 34px !important;
max-height: 34px !important;
}
/*Tab schließen Button verschoben*/
.tab-close-button{
flex-shrink: 0 !important;
margin-right: -6px !important;
}
.tab-label-container {
margin: auto !important;
}
/* Tabtext wird nicht ausgeblendet */
.tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
.tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
mask-image: none !important;
}
/*Abgerundete Tabs*/
.tab-background {
border-radius: 5px !important;
}
/*Inaktiver Tab HG hellgrau*/
.tabbrowser-tab:not([visuallyselected="true"]) > .tab-stack > .tab-background {
background: white !important;
}
#tabbrowser-tabs {
width: 100vw;
}
#navigator-toolbox {
position: relative;
padding-bottom: calc( var(--tab-min-height) + 5px );
}
.titlebar-buttonbox-container {
position: fixed;
right: 0;
visibility: visible;
display: block;
}
#TabsToolbar .titlebar-buttonbox-container,
#TabsToolbar #window-controls {
display: none;
}Vertikal mittig wäre ein wenig schöner.
Schönheitsfehler noch: Fährt mal die der Maus auf das Tab. so wird das "i" abgeblendet. Könnte das nicht dauerhaft sein?
Das würde weniger irritieren.
Diese Meldung " Wiedergabe" geht die noch weg?
so wird das "i" abgeblendet.
/*Tabtext nicht verkürzt bei hover*/
.tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-close-button {
padding-inline-start: 7px !important;
width: 24px !important;
}
.tabbrowser-tab[visuallyselected=true]:not(:hover),
#tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected=true]):not(:hover) {
--tab-label-mask-size: 1em !important;
}Diese Meldung " Wiedergabe" geht die noch weg?
Gib bitte mal
about:config
in die Adressleiste ein, mit Enter bestätigen.
Dann die Warnmeldung auch bestätigen.
Dann oben in die Leiste:
browser.tabs.secondaryTextUnsupportedLocales
eingeben.
Dann unten auf den Eintrag einen Doppelklick machen, und rechts am Ende den Zusatz:
.de
einfügen.
So sieht das dann aus:
Dann rechts auf den Haken klicken zum Speichern und den Firefox neu starten.
Sieht dann so aus bei einem Video:
Vielen, viel Dank.
Hier&Dort noch ein paar Pixel hin-&her-geschoben, die Farbe angepasst, so sieht das schon sehr gut aus.
#navigator-toolbox {
position: relative;
padding-bottom: calc( var(--tab-min-height) + 2px );
}
/* Tabs Höhe ändern */
.tabbrowser-tab {
min-height: 31px !important;
max-height: 31px !important;
}
#tabbrowser-arrowscrollbox {
margin-top: -1px !important;
}
/*Tabtext nicht verkürzt bei hover*/
.tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-close-button {
padding-inline-start: 7px !important;
width: 24px !important;
}
.tabbrowser-tab[visuallyselected=true]:not(:hover),
#tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected=true]):not(:hover) {
--tab-label-mask-size: 1em !important;
}
/* Aktiver Tab Hintergrund orange */
.tab-background[selected="true"] {
background: #FF4000 !important;
}
/*Inaktiver Tab HG weiß*/
.tabbrowser-tab:not([visuallyselected="true"]) > .tab-stack > .tab-background {
background: #A4A4A4 !important;
}
#TabsToolbar {
position: absolute;
display: block;
bottom: 0;
width: 100vw;
background-clip: padding-box;
color: var(--toolbar-color);
}
/*Tab schließen Button verschoben*/
.tab-close-button{
flex-shrink: 0 !important;
margin-right: -6px !important;
}
.tab-label-container {
margin: auto !important;
}
/* Tabtext wird nicht ausgeblendet */
.tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
.tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-moz-locale-dir(ltr) {
mask-image: none !important;
}
/*Abgerundete Tabs*/
.tab-background {
border-radius: 5px !important;
}
#tabbrowser-tabs {
width: 100vw;
}
.titlebar-buttonbox-container {
position: fixed;
right: 0;
visibility: visible;
display: block;
}
#TabsToolbar .titlebar-buttonbox-container,
#TabsToolbar #window-controls {
display: none;
} Das I-Tüpfelchen wäre halt noch die vertikale Schriftmitte. Bei der Großschreibung im Tab fällt es deutlicher auf.
Das I-Tüpfelchen wäre halt noch
Teste bitte, und pass dir den Wert noch an:
.tab-label {
margin-bottom: -5px !important;
}