Fx 117 > Tableiste unten per CSS-Code, nicht per Skript!

milupo

Zitat von myfire

vertikale Höhe

Höhe ist immer vertikal.

myfire

Zitat von milupo

Zitat von myfire

vertikale Höhe

Höhe ist immer vertikal.

ja, doppelt gemoppelt....ist mir dann auch aufgefallen

2002Andreas

Zitat von myfire

für die vertikale Höhe der Tabs?

Ich nutze den Code aus Beitrag Nr. 1 für Tableiste unten.

Beitrag

Fx 117 > Tableiste unten per CSS-Code, nicht per Skript!

Mit diesem Code ist die Tableiste wieder unter der Lesezeichensymbolleiste.

(Quelltext, 50 Zeilen)

camp-firefox.de/attachment/38863/

Wichtiger Hinweis:

Bei einigen Nutzern des Codes tritt ein mir unbekannter Fehler auf.

Und zwar wird der Raum nicht wieder freigegeben, wenn mittlere Tabs geschlossen werden.

Das passiert wohl oft dann, wenn es eine eigene festgelegte Breite für die Tabs gibt.

In diesem Fall bitte mal zusätzlich das in den Code einfügen, und den eigenen Code für die feste Breite…

2002Andreas

7. Dezember 2019 um 18:38

Da muss normalerweise dann nichts mehr verändert werden.

milupo

Zitat von 2002Andreas

Da muss normalerweise dann nichts mehr verändert werden.

Für #tabbrowser-tabs ist standardmäßig ein Wert von 36px für die CSS-Variable --tab-min-height definiert, die für min-height verwendet wird.

myfire

Zitat von milupo

Zitat von 2002Andreas

Da muss normalerweise dann nichts mehr verändert werden.

Für #tabbrowser-tabs ist standardmäßig ein Wert von 36px für die CSS-Variable --tab-min-height definiert, die für min-height verwendet wird.

Dein Code Ist schon gut, nur möchte die Tabs in der Höhe reduzieren.

Habe aus

padding-bottom: calc( var(--tab-min-height) + 8px );

ein

padding-bottom: 29px;

gemacht und in alle Tabs die Höhe eingefügt

height: 25px !important;

Das hat für den aktiven Button die falsche Anzeige wie im Screenshot zu sehen die Folge.

Die inaktiven Tabs schauen gut aus, hier würde ich gerne den Tab-Text vertikal zentrieren, genauso wie dann beim aktiven Tab.

Wie würde ich da vorgehen?

2002Andreas

Evtl. kannst du damit ja einiges für dich noch ändern:

CSS

@-moz-document url(chrome://browser/content/browser.xhtml) {

#PopupSearchAutoComplete menuseparator.searchbar-separator {
    display: none !important;                /* horizontale Linie bei Suchen ausblenden */
}

#TabsToolbar {
  position: absolute;
  display: block;
  bottom: -2px !important;
  width: 100vw;
  background-clip: padding-box;
  color: var(--toolbar-color);
}

#tabbrowser-tabs {
  width: 100vw;
}

#navigator-toolbox {
  position: relative;
  padding-bottom: calc( var(--tab-min-height) + -3px );
}

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

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

.tabbrowser-tab:not([selected="true"]) {
color: #000000 !important;                   /* Inaktiver Tab: Schriftfarbe */
background: #DDDDDD !important;              /* Inaktiver Tab: Hintergrundfarbe */
width: 130px !important;                     /* Inaktiver Tab: Breite */
border: 1px solid #D4D4D4 !important;        /* Inaktiver Tab: Rahmen Breite, Art und Farbe */
}

.tabbrowser-tab[selected] .tab-content {
color: #000000 !important;                   /* Aktiver Tab: Schriftfarbe */
background: #FFFFFF !important;              /* Aktiver Tab: Hintergrundfarbe */
width: 130px !important;                     /* Aktiver Tab: Breite */
border: 1px solid #D4D4D4 !important;        /* Aktiver Tab: Rahmen Breite, Art und Farbe */
}

.tabbrowser-tab:not([pinned]) {
-moz-box-flex: 0!important;
width: 130px !important;                     /* Hintergrundfläche der Tabs: Breite */
}

#toolbar-menubar .titlebar-button {
padding-bottom: 4px !important;
}

.tab-icon-overlay {
transform: scale(1.5, 1.5) !important;       /* Lautsprechersymbol größer */
}

.tab-close-button {
color: red !important;
}

/* Neuer Tabbutton verschoben*/
#TabsToolbar #tabs-newtab-button {
  margin-top: -8px !important;
  margin-bottom: -15px !important;
  margin-left: -5px !important;
}
  
/*Höhe der Tabs*/
.tabbrowser-tab {
  min-height: 33px !important;
  max-height: 33px !important;
  box-shadow: none !important; 
}
}

Alles anzeigen

myfire

Zitat von 2002Andreas

Evtl. kannst du damit ja einiges für dich noch ändern:

Danke, schaut gut aus, da habe ich was zum ausprobieren

milupo

myfire Bitte mach keine Vollzitate. Zitiere nur das Wesentliche, worauf du dich beziehst. Achte bitte auch darauf, dass du Text nicht versehentlich in den Zitatkasten schreibst.

razap

Servus,

bin total begeistert von den tabs unten. Hat alles wunderbar funktioniert.

Hab auch winzige Veränderungen (Farbe,Anzahl) vorgenommen. Perfekt.

Vielen Dank dafür.

Lediglich im privaten Fenster überlagert der dunkle OO Balken die unteren Tabs.

Habe leider nichts darüber im Forum gefunden.

Gibts da ne einfache Lösung zum hochsetzen oder zum nichtaktivieren der css nur bei privatem Fenster?

Hier die userchrome:

CSS

.tab-background[selected="true"] {
  background: blue !important; 
  border-radius: 2px !important; 
  border:none!important;
    }




.tabbrowser-tab:not([pinned]) {
    margin-left:1px !important;
    max-height: 29px !important;
    -moz-box-flex: 0 !important;
    width: 90px !important;
}

:root {
  --space_below_content: 33px;
}

:root[uidensity=compact]  {
  --space_below_content: 29px;
}

#main-window:not([inDOMFullscreen="true"])  #browser-bottombox {
  margin-bottom: var(--space_below_content) !important;
}

#TabsToolbar {
  position: fixed !important;
  display:block !important;
  bottom: 0px !important;
  width: 100% !important;
}

#main-window #navigator-toolbox #TabsToolbar > toolbarpaletteitem,
#main-window #navigator-toolbox #TabsToolbar > .toolbarbutton-1 {
  position: relative !important;
  bottom: -2px !important;
  width: unset !important;
  height: unset !important;
}

#TabsToolbar toolbarbutton .toolbarbutton-badge-stack,
#TabsToolbar > toolbarpaletteitem {
  min-height: unset !important;
  padding: unset !important;
  margin: 0 2px !important;
}

#TabsToolbar > toolbarbutton {
  min-height: unset !important;
  margin: 0 !important;
  padding: 0 !important;
}

Alles anzeigen

Vielen Dank für weiterführende Gedanken.

2002Andreas

Zitat von razap

Gibts da ne einfache Lösung

Hallo und Willkommen hier im Forum. 😊

Du könntest das lila Icon einfach ausblenden:

Dazu diesen Code in deinen zusätzlich einfügen:

CSS

:root:not([accessibilitymode]) .private-browsing-indicator, .accessibility-indicator {
  display: none !important;
}

razap

Hallo Andreas,

mit bestem Dank , Problem gelöst, funktioniert einwandfrei.

Gruß razap

2002Andreas

Zitat von razap

funktioniert einwandfrei.

Freut mich wenn ich dir damit helfen konnte, war gern geschehen

2002Andreas

Zitat von razap

Problem gelöst

Zur besseren Erkennung ob du im privaten Modus bist, kannst du dir das lila Icon auch z.B. links neben den Button mit den 3 Strichen/Hamburger-Menü legen.

Dazu einfach diesen Code auch noch einfügen.

CSS

#main-window[privatebrowsingmode=temporary] #PanelUI-menu-button::before {
    margin-left: 0px!important;
    margin-right: 0px !important;
    content: '' !important;
    display: block !important;
    width: 19px !important;
    height: 19px !important;
    background: url("chrome://global/skin/icons/indicator-private-browsing.svg") !important;
    background-repeat: no-repeat !important;
    background-position: 0px 2px !important;
    background-size: 15px 15px !important;
    }

Alles anzeigen

razap

Das ist die ultimative Hilfe, ich bin platt. Vielen Dank.

Jetzt ist das kleine Zeichen da rechts oben. Super.

Danke für deinen Aufwand.

Alles was wir geben kommt auch wieder zu uns zurück!

Gruß razap

2002Andreas

Zitat von razap

Danke für deinen Aufwand.

Alles ist gut

Freut mich wenn du damit zufrieden bist, war gern geschehen.

universum123

"Nabend"

hab da ein kleines "Problem"

CSS

@-moz-document url(chrome://browser/content/browser.xhtml) {


#TabsToolbar {
    background: #104e8b !important;
    position: absolute !important;
    display: block !important;
    top: 122px !important; /*Abstand nach oben*/
    width: 100% !important;
    }

#TabsToolbar :-moz-any(.tabs-newtab-button,#tabs-newtab-button) {
   min-width: 0px !important;
   width: 25px !important;
   margin-bottom: -5px !important;
   }

#tabbrowser-tabs {
   width: 100vw !important;
   }
        
#main-window:not([chromehidden*="toolbar"]) #navigator-toolbox {
   padding-bottom: 28px !important;
   }


 :root {

--tab-min-height: 25px !important; /* 30 25 20*/

 }


:root #tabbrowser-tabs {

--tab-min-height: 20px !important; /* 30 25 15*/

} 


.tabbrowser-tab:not([selected="true"]) {

color: blue !important;

background: lightgrey !important;

font-weight: bold !important;

}


/* Aktiver Tab */


.tabbrowser-tab[selected] .tab-content {

color: white !important;

background: blue !important;

font-weight: bold !important;

}


.tabbrowser-tab:not([pinned]) {

-moz-box-flex: 0!important;

width: 200px!important;  /*original 157px*/

}

}

Alles anzeigen

seit der Beta 101 sind die nicht geöffneten Tabs (Reiter) nicht mehr "lesbar" - siehe Bilder

Beta 100

Beta 101

wo könnte der Fehler liegen

keine *.js und *.css Änderungen gemacht

idee?

bleibt ruhig hat zeit

gruß uni

2002Andreas

Zitat von universum123

wo könnte der Fehler liegen

Teste bitte mal:

CSS

@-moz-document url(chrome://browser/content/browser.xhtml) {


#TabsToolbar {
  background: #104e8b !important;
  position: absolute;
  display: block;
  bottom: 0;
  width: 100vw;
  background-clip: padding-box;
  color: var(--toolbar-color);
}

#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;
}
  
:root {

--tab-min-height: 25px !important; /* 30 25 20*/

 }

:root #tabbrowser-tabs {

--tab-min-height: 20px !important; /* 30 25 15*/

} 

.tabbrowser-tab:not([selected="true"]) {

color: blue !important;

background: lightgrey !important;

font-weight: bold !important;

}

/* Aktiver Tab */


.tabbrowser-tab[selected] .tab-content {

color: white !important;

background: blue !important;

font-weight: bold !important;

}

.tabbrowser-tab:not([pinned]) {

-moz-box-flex: 0!important;

width: 200px!important;  /*original 157px*/

}

}

Alles anzeigen

universum123

hi Andreas

siehe ab Tab 8 gehts wieder los

gruß uni

grisu2099

Da funkt dir wohl noch ein anderes css dazwischen. Auf fast allen Tabs ist noch ein zweites Icon zu erkennen, welches im obigen css nicht definiert ist...

universum123

hi

kennzeichnet nur nich angesehene tabs

Fx 117 > Tableiste unten per CSS-Code, nicht per Skript!

Fx 117 > Tableiste unten per CSS-Code, nicht per Skript!

Ähnliche Themen

FAQ: Menü-, Adress- und Tableiste unterhalb des Fensters anzeigen? (FF 71+)

Firefox 70 - Tabs wieder oben

Firefox Nightly 71.0a1 vom 07.10. Leerfläche unter Tableiste?

Tabs nach unten machen

Tableiste ist über der Adressleiste?