Alle Tabs weiter nach oben setzen

Woasnix

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.

2002Andreas

Zitat von Woasnix

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.

Woasnix

Danke für die Rückmeldung.

Die Höhe habe ich gegenüber der obigen Grafik schon wieder auf 35 abgeändert

CSS

/* 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: 20px !important;
   max-height: 35px !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) + 8px );
}

.titlebar-buttonbox-container {
  position: fixed;
  right: 0;
  visibility: visible;
  display: block;
}

#TabsToolbar .titlebar-buttonbox-container,
#TabsToolbar #window-controls {
  display: none;
}

Alles anzeigen

Ist es noch möglich die Schrift in den Tabs mittig anzuordnen?

2002Andreas

Zitat von Woasnix

Ist es noch möglich die Schrift in den Tabs mittig anzuordnen?

Teste bitte mal:

CSS

#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;
}

Alles anzeigen

Woasnix

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.

CSS

#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;
}

Alles anzeigen

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?

2002Andreas

Zitat von Woasnix

so wird das "i" abgeblendet.

CSS

/*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;
}

Zitat von Woasnix

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:

Woasnix

Vielen, viel Dank.

Hier&Dort noch ein paar Pixel hin-&her-geschoben, die Farbe angepasst, so sieht das schon sehr gut aus.

CSS

#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;
}

Alles anzeigen

Das I-Tüpfelchen wäre halt noch die vertikale Schriftmitte. Bei der Großschreibung im Tab fällt es deutlicher auf.

2002Andreas

Zitat von Woasnix

Das I-Tüpfelchen wäre halt noch

Teste bitte, und pass dir den Wert noch an:

CSS

.tab-label {
  margin-bottom: -5px !important;
}

Woasnix

Wunderbar, jetzt passt es!

Vielen Dank