Tab anpassen mit Linien und Form eckig

Monika Lu · Bildschirmfoto 2021-06-10 um 14.32.14.png

Liebes Forum, liebe Moderatoren

ich habe alles versucht, was mir möglich war, meine Tabs wieder so darzustellen, wie es vor FF 89.0 war. Ich habe viele Stunden daran gesessen, jedoch nicht den richtigen Schalter dafür gefunden. Alles andere hat sehr gut geklappt.

Bisher stellten sich meine Tabs unter Lesezeichen-Symbolleiste so dar:

Nach Aktualisierung auf FF 89.0 stellen sich die Tabs anders dar als vorher. Meine alte Ansicht hätte ich gerne wieder und wäre sehr dankbar, wenn mir jemand weiter helfen könnte.

Meine Bitte: einen Code hierfür für meine userChrome.

2002Andreas

Zitat von Monika Lu

einen Code hierfür für meine userChrome.

Wie lautet denn dein jetziger Code?

Bitte mal in deinen nächsten Beitrag/Antwort einfügen.

Monika Lu

meine Antwort ist leider etwas kompliziert:

in meiner alten userChrome habe ich gesucht, gesucht und gesucht, dabei nur die jeweiligen Farben in den Tabs der Tableiste gefunden. Was nach dem Update auf FF 89.0 erfolgte, war, dass ich keinerlei Rahmenlinien mehr um die Tabs hatte, besonders gefehlt hatte mir ein starker Balken auf dem aktiven Tab.

Zwischen meiner Frage habe ich weiter gebüffelt und im Forum gesucht und habe dabei folgenden Code gefunden, den ich auf meine Verhältnisse anpassen konnte.

Ich versuche einmal meine alte userChrome hier einzufügen, und wäre für den Hinweis dankbar, wo sich die Sache mit den Tabrahmen (Farbe hatte ich gefunden) nur befinden kann.

Der. 1. Quellcode ist der alte vor FF 89.0

CSS

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

     / * Mehrstufige Lesezeichen-Symbolleiste  */
     
    #PersonalToolbar {
         min-height: 20px !important;
    }
             
    #PersonalToolbar,
    #PlacesToolbarItems {
        max-height: calc(20px * 5) !important;
    }
    #personal-bookmarks,
    #PlacesToolbar,
    #PlacesToolbar > hbox {
        display: block;
    }
    #PersonalToolbar toolbarbutton {
        min-height: 25px !important;
        max-height: 25px !important;
    }
    #PlacesToolbarItems {
  display: flex;
        flex-wrap: wrap;
        overflow-x: visible;
        overflow-y: auto;        
    }
    #PlacesToolbarItems {
        -moz-window-dragging: no-drag;
    }
    #PlacesToolbar #PlacesChevron {
        display: none;
    }
 }

/* Schriftgröße Tabs */
.tab-text {
font-size:12px !important;
}

/* Aktiver Tab Schrift fett + schwarz */
.tabbrowser-tab[selected="true"]{
font-weight:bold;
color: black!important;
}

/* Aktiver Tab Hintergrund grey */
.tab-background[selected="true"]{
background: #cdc1c5!important;
}

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

[tabsintitlebar="true"][sizemode="maximized"] #navigator-toolbox {
padding-top: 8px !important;
}

#titlebar,#tabbrowser-tabs {
appearance: none !important;
}

[tabsintitlebar="true"] #TabsToolbar > .titlebar-buttonbox-container,
#main-window[inFullscreen="true"] #window-controls {
display: block;
}

/* Mehrreihige Tableiste, Anzahl der angezeigten Tabreihen = 6 Zeilen, weitere per Scrollbar */
box[class="scrollbox-clip"][orient="horizontal"],
tabs > arrowscrollbox { display: block; }
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
max-height: calc(var(--tab-min-height) * 3); /* Anzahl der angezeigten Tabreihen = 6 Zeilen */
overflow-x: hidden;
overflow-y: auto;
}

tabs tab[fadein]:not([pinned]) {
flex-grow: 1;
}

tabs tab,.tab-background {
height: var(--tab-min-height);
overflow: hidden;
}

tab > .tab-stack {
width: 100%;
}

box[class="scrollbox-clip"][orient="horizontal"] {
-moz-window-dragging: no-drag;
}

hbox.titlebar-spacer,
#alltabs-button,tabs tab:not([fadein]) {
display: none;
}

/* Feste Breite der einzelnen Tabs wenn gewünscht, sonst entfernen bzw. verbreitern */
tabs tab[fadein]:not([pinned]) {
min-width: 150px !important;/* Minimale Tabbreite 276px */
max-width: 150px !important;/* Maximale Tabbreite 325px */
}
}

/* move titlebar and its content (menubar, tabs toolbar) below navigation/bookmarks toolbar */
#titlebar {
  -moz-box-ordinal-group: 100 !important;
}

/* space above tabs toolbar */
#main-window[tabsintitlebar][sizemode="maximized"] * #titlebar {
  margin-top: -8px !important;
}

/* space for menubar above navigation toolbar (Firefox titlebar) */
#main-window[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
  margin-top: 24px !important;
}
#main-window[tabsintitlebar][sizemode="maximized"]:not([sizemode="fullscreen"]) #nav-bar {
  margin-top: 24px !important;
}

/* add 'drag' feature to space above navigation toolbar */
#main-window[tabsintitlebar] #navigator-toolbox,
#main-window[tabsintitlebar] #nav-bar {
  -moz-window-dragging: drag !important;
}

/* move menubar to the top and extend its with to full window width */
#toolbar-menubar {
  position: fixed !important;
  width: 100vw !important;
  -moz-window-dragging: drag !important;
}

/* move menubars / tab toolbars caption buttons to windows top right position */
#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
  position: fixed !important;
  right: 0 !important;
  visibility: visible !important;
  display: block !important;
}

/* menubar postion after moving to the top */
#toolbar-menubar {
  top: 0px !important;
}

/* Linux/macOS */
/* space above navigation toolbar (OS titlebar) */
/* set to '0', if no menubar is used */
#main-window:not([tabsintitlebar]):not([sizemode="fullscreen"]) #nav-bar {
  margin-top: 28px !important;
}

/* menubar postion in maximized mode after moving to the top */
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar {
  top: 0px !important;
}

/* caption button position in maximized mode after moving to the top */
#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
  top: -14px !important;
}

/* Windows */
@media (-moz-os-version:windows-win10), (-moz-os-version:windows-win8), (-moz-os-version:windows-win7) {
    /* set to '0', if no menubar is used */
    #main-window:not([tabsintitlebar]):not([sizemode="fullscreen"]) #nav-bar {
      margin-top: 18px !important;
    }
    /* set to '0', if no menubar is used */
    #main-window[tabsintitlebar][sizemode="maximized"]:not([sizemode="fullscreen"]) #nav-bar {
      margin-top: 32px !important;
    }
    #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar {
      top: 8px !important;
    }
    #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
      top: 0px !important;
    }
    #main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
      top: 8px !important;
    }
}

/* hide line above navigation toolbar appearing in some cases */
#main-window:not([tabsintitlebar]) #nav-bar,
#main-window:not([tabsintitlebar]) #navigator-toolbox {
  border-top: 0 !important;
  box-shadow: unset !important;
}

/* force buttons on menubar being very small to not break the toolbar */
#toolbar-menubar toolbaritem > toolbarbutton .toolbarbutton-icon,
#toolbar-menubar > toolbarpaletteitem toolbarbutton .toolbarbutton-icon,
#toolbar-menubar > toolbarbutton .toolbarbutton-icon {
  padding: 0px 0px !important;
  height: 16px !important;
  width: 16px !important;
}
#toolbar-menubar toolbaritem > toolbarbutton,
#toolbar-menubar > toolbarpaletteitem toolbarbutton,
#toolbar-menubar > toolbarbutton {
  position: relative !important;
  padding: 0px 0px !important;
  margin: 0px 0px !important;
}
#toolbar-menubar toolbaritem > toolbarbutton .toolbarbutton-icon,
#TabsToolbar-customization-target > toolbarpaletteitem toolbarbutton .toolbarbutton-icon,
#TabsToolbar-customization-target > toolbarbutton .toolbarbutton-icon {
  padding: unset !important;
  height: unset !important;
  width: unset !important;
}

/* Firefox Quantum userChrome.css tweaks ************************************************/

/* Github: https://github.com/aris-t2/customcssforfx ************************************/

/****************************************************************************************/





.tabbrowser-tab > .tab-stack > .tab-background:not([selected=true]) {

background-color: rgba(208,165,108,0.33) !important;

}

.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) {

background-color: rgba(207,208,210,0.48) !important;

}



#TabsToolbar[brighttext] .tabbrowser-tab > .tab-stack > .tab-background:not([selected=true]) {

background-color: rgba(255,255,255,0.2) !important;

}



#TabsToolbar[brighttext] .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) {

background-color: rgba(255,255,255,0.1) !important;

}



/* This nullifies the left separator animation making "hovering" tabs less distracting */

.tabbrowser-tab::after,

#tabbrowser-tabs[movingtab] > .tabbrowser-tab[visuallyselected]::before {

margin-top: 1px !important;

margin-bottom: 0px !important;

}

#main-menubar > *,
#PlacesToolbarItems > toolbarbutton{
font-size:13px!important;}

Alles anzeigen

Nachfolgend den Teil, den ich im Forum gefunden habe und auf meine Verhältnisse anpassen konnte:

CSS

/* Tabs in der Tableiste mit Linien und Farben */


#TabsToolbar .tabbrowser-tab .tab-background
{
    border-radius: unset !important;
    margin-block: unset !important;
}

.tabbrowser-tab:not([visuallyselected="true"])
{
    background-color: rgba(208,165,108,0.33) !important;
    border-right: 1px solid #444 !important;
    border-top: 0.5px solid #444 !important;
    border-bottom: 0.5px solid #444 !important;
}

.tabbrowser-tab:not([visuallyselected="true"]):hover
{
    border-top: 2px solid #757575 !important;
    background-color: rgba(255,255,255,0.1) !important;
    border-right: 1px solid #444 !important;
    border-top: 1px solid #444 !important;
}

.tabbrowser-tab[visuallyselected="true"]
{
    border-top: 2px solid #0A84FF !important;
    border-right: 1px solid #444 !important;
    border-bottom: 1px solid #444 !important;
}

.tabbrowser-tab .tab-background[selected="true"] {
    background-color: rgbargba(255,255,255,0.2) !important;
}


.tabbrowser-tab
{
    padding-inline: unset !important;
}

Alles anzeigen

Vielleicht findest Du ja in meiner alten userChrome den Text für die Tabs mit Rahmen. Über die Jahre hat sich sicherlich auch einiges angesammelt, was heute nicht mehr gültig ist. Kann ich evtl. Teile aus meiner alten userChrome entfernen?

Ich hoffe sehr auf eine Beratung.

Herzliche Grüße aus Niedersachen

Monika Lu

2002Andreas

Zitat von Monika Lu

Ich hoffe sehr auf eine Beratung.

Bitte mal alles aus deiner userChrome.css entfernen, und dieses dafür einfügen.

CSS

/* Tableiste mehrreihig unten */

@-moz-document url(chrome://browser/content/browser.xhtml) {
    
:root {
--tab-min-height: 37px !important; 
}

:root #tabbrowser-tabs {
--tab-min-height: 37px !important; 
} 

/* Feste Tabbreite */
.tabbrowser-tab:not([pinned]) {
min-width: 150px !important;
max-width: 150px !important;
}

/*Rahmen um Tabs*/
 tab.tabbrowser-tab stack.tab-stack vbox.tab-background {
border: 1px solid grey !important;
}

/* Aktiver Tab Schrift fett + schwarz */
.tabbrowser-tab[selected="true"]{
font-weight:bold;
color: black!important;
}

/* Aktiver Tab Hintergrund grey */
.tab-background[selected="true"]{
background: #cdc1c5!important;
}

/* Schriftgröße Tabs */
.tab-text {
font-size:12px !important;
}



#titlebar {
-moz-box-ordinal-group: 2!important;
}

/* Abstand nach oben - unten, und Höhe der Tableiste */
#titlebar {
margin-top: -28px !important;
margin-bottom: -28px !important;
}

#toolbar-menubar {
position: fixed;
display: inline-flex;
}

[sizemode="maximized"]:not([tabsintitlebar="true"]) #toolbar-menubar,
[sizemode="normal"] #toolbar-menubar {
top: 1px;
}

[sizemode="maximized"] #toolbar-menubar {
top: 8px;
}

#main-window[tabsintitlebar="true"] #navigator-toolbox:not([inFullscreen="true"]) {
border-top: solid 39px transparent !important;
}

#main-window:not([tabsintitlebar="true"]) #navigator-toolbox:not([inFullscreen="true"]) {
border-top: solid 34px transparent !important;
}

[tabsintitlebar="true"] #navigator-toolbox {
-moz-window-dragging: drag;
}

#navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls,
[tabsintitlebar="true"] .titlebar-buttonbox-container {
display: block;
position: fixed;
right: 0;
}

[tabsintitlebar="true"][sizemode="normal"] .titlebar-buttonbox-container {
top: 1px;
}

[tabsintitlebar="true"][sizemode="maximized"] .titlebar-buttonbox-container {
top: 8px;
}

#navigator-toolbox:not([style^="margin-top:"])[style=""][inFullscreen="true"] #window-controls {
top: 0;
}

#navigator-toolbox[inFullscreen="true"] #nav-bar {
padding-right: 109px !important;
}

box[class="scrollbox-clip"][orient="horizontal"],
tabs > arrowscrollbox {
display: block;
}

/* Mehrzeilige Tableiste, bei mehr als 2 Zeilen erscheint eine Scrollbar */
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
max-height: calc(var(--tab-min-height) * 2); /* Anzahl der Tabzeilen = 2 Zeilen */
overflow-x: hidden;
overflow-y: auto;
}

tabs tab[fadein]:not([pinned]) {
flex-grow: 1;
}

tabs tab,.tab-background {
height: var(--tab-min-height);
overflow: hidden;
}

tab > .tab-stack {
width: 100%;
}

box[class="scrollbox-clip"][orient="horizontal"] {
-moz-window-dragging: no-drag;
}

hbox.titlebar-spacer,
#alltabs-button,
tabs tab:not([fadein]) {
display: none; 
}
}

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

     / * Mehrstufige Lesezeichen-Symbolleiste  */
     
    #PersonalToolbar {
         min-height: 20px !important;
    }
             
    #PersonalToolbar,
    #PlacesToolbarItems {
        max-height: calc(20px * 5) !important;
    }
    #personal-bookmarks,
    #PlacesToolbar,
    #PlacesToolbar > hbox {
        display: block;
    }
    #PersonalToolbar toolbarbutton {
        min-height: 25px !important;
        max-height: 25px !important;
    }
    #PlacesToolbarItems {
  display: flex;
        flex-wrap: wrap;
        overflow-x: visible;
        overflow-y: auto;        
    }
    #PlacesToolbarItems {
        -moz-window-dragging: no-drag;
    }
    #PlacesToolbar #PlacesChevron {
        display: none;
    }
 }

Alles anzeigen

Dann den Firefox neu starten und testen.

Monika Lu · Bildschirmfoto 2021-06-10 um 20.38.53.png

Lieber Andreas,

gerade eine neue userChrome nach Deinem Text erstellt, leider funktioniert es bei mir nicht. Es ist eher so, dass alles so ist, als ob ich FF neu installiert hätte: Tableiste über Lesezeichen-Symbolleiste oben, Lesezeichen-Symbolleiste nur einreihig, die neuen Icons von FF 89.0.

Mir ging es eigentlich nur darum zu wissen, wo voher die Rahmen um die Tabs unter der Lesezeichen-Symbolleiste in der alten userChrome gestanden hatten, denn der aktive Tab hatte oben immer eine fette schwarze Linie. Meines Erachtens sollte eigentlich nicht viel falsch gestanden haben, denn ich habe bei nicht verständlichen Texten immer mal wieder getestet und festgestellt, dass sie funktionieren.

Eigentlich bin ich jetzt zufrieden, weis jedoch nur nicht, ob ich nicht Textteile enthalten habe, die hier nichts mehr zu suchen haben, weil vielleicht doppelt oder ähnliches.

Anliegend sende ich noch ein Foto von der Ansicht meines FF'es in der derzeitigen Ansicht.

Falls Dir also in der alten userChrome irgend etwas falsches auffallen sollte und Du Dir die Zeit nehmen kannst (es wird ja derzeit viel angefragt), dann wäre ich sehr glücklich.

Ich bin froh, dass es das Forum gibt, durch intensives Lesen finde ich oft die Dinge, die ich gerne in meiner userChrome hätte. Früher konnte man seine Anpassungen mehr oder weniger mit der Erweiterung "Tab mix plus" anpassen, diese gibt es ja nicht mehr. Und da ich nur laienhaft arbeiten kann, versuche jedoch immer alles zu verstehen (sonst lass ich es), kommen sicher Fehler vor. Ich könnte aufgrund meines Vorwissens keine eigene userChrome erstellen. Was ich dort drin stehen habe, habe ich mir alles im Forum hier angelesen und das Herzklopfen ist immer groß vor dem wirklichen Testen. <<<< dieses einmal zur Erläuterung meines Bildungsstandes>>>>>

Herzliche Grüße

Monika Lu

1 Bildschirmfoto meies jetzigen Standes sende ich noch nachträglich

CSS

/* Urlbar grün */

#urlbar {
--toolbar-field-focus-border-color: #0bb911 !important;
}


/* Tabs in der Tableiste mit Linien und Farben */


#TabsToolbar .tabbrowser-tab .tab-background
{
    border-radius: unset !important;
    margin-block: unset !important;
}

.tabbrowser-tab:not([visuallyselected="true"])
{
    background-color: rgba(208,165,108,0.33) !important;
    border-right: 1px solid #444 !important;
    border-top: 0.5px solid #444 !important;
    border-bottom: 0.5px solid #444 !important;
}

.tabbrowser-tab:not([visuallyselected="true"]):hover
{
    border-top: 2px solid #757575 !important;
    background-color: rgba(255,255,255,0.1) !important;
    border-right: 1px solid #444 !important;
    border-top: 1px solid #444 !important;
}

.tabbrowser-tab[visuallyselected="true"]
{
    border-top: 2px solid #0A84FF !important;
    border-right: 1px solid #444 !important;
    border-bottom: 1px solid #444 !important;
}

.tabbrowser-tab .tab-background[selected="true"] {
    background-color: rgbargba(255,255,255,0.2) !important;
}


.tabbrowser-tab
{
    padding-inline: unset !important;
}



/* Lesezeichen verwalten - Ordnericon FF_Folder */
@-moz-document url("chrome://browser/content/places/places.xhtml") {
treechildren::-moz-tree-image(container) {
    list-style-image: url("/Users/xxxxx/Documents/FF_Folder/blue_folder_25512.png") !important;
    }
}
    /* Lesezeichensymbolleiste - Ordnericon FF_Folder */
@-moz-document url-prefix(chrome://browser/content/browser.xhtml) {
.bookmark-item[container="true"] {
    list-style-image: url("/Users/xxxxx/Documents/FF_Folder/folder-damask-chartreuse-icon.png") !important;
    -moz-image-region: rect(440px 440px 440px 440px) !important;
    }
}

@-moz-document url("chrome://browser/content/places/bookmarksSidebar.xhtml") {
treechildren::-moz-tree-image(container) {
    list-style-image: url("/Users/xxxxx/Documents/FF_Folder/blue_folder_25512.png") !important;
    }
}





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

     / * Mehrstufige Lesezeichen-Symbolleiste  */
     
    #PersonalToolbar {
         min-height: 20px !important;
    }
             
    #PersonalToolbar,
    #PlacesToolbarItems {
        max-height: calc(20px * 5) !important;
    }
    #personal-bookmarks,
    #PlacesToolbar,
    #PlacesToolbar > hbox {
        display: block;
    }
    #PersonalToolbar toolbarbutton {
        min-height: 20px !important;
        max-height: 20px !important;
    }
    #PlacesToolbarItems {
  display: flex;
        flex-wrap: wrap;
        overflow-x: visible;
        overflow-y: auto;        
    }
    #PlacesToolbarItems {
        -moz-window-dragging: no-drag;
    }
    #PlacesToolbar #PlacesChevron {
        display: none;
    }
 }

/* Schriftgröße Tabs */
.tab-text {
font-size:12px !important;
}

/* Aktiver Tab Schrift fett + schwarz */
.tabbrowser-tab[selected="true"]{
font-weight:bold;
color: black!important;
}

/* Aktiver Tab Hintergrund grey */
.tab-background[selected="true"]{
background: #cdc1c5!important;
}

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

[tabsintitlebar="true"][sizemode="maximized"] #navigator-toolbox {
padding-top: 8px !important;
}

#titlebar,#tabbrowser-tabs {
appearance: none !important;
}

[tabsintitlebar="true"] #TabsToolbar > .titlebar-buttonbox-container,
#main-window[inFullscreen="true"] #window-controls {
display: block;
}



/* Abstand nach oben - unten, und Höhe der Tableiste */

#titlebar {
margin-top: -28px !important;
margin-bottom: -29px;

}

/* Mehrreihige Tableiste, Anzahl der angezeigten Tabreihen = 6 Zeilen, weitere per Scrollbar */
box[class="scrollbox-clip"][orient="horizontal"],
tabs > arrowscrollbox { display: block; }
scrollbox[part][orient="horizontal"] {
display: flex;
flex-wrap: wrap;
max-height: calc(var(--tab-min-height) * 3); /* Anzahl der angezeigten Tabreihen = 6 Zeilen */
overflow-x: hidden;
overflow-y: auto;
}

tabs tab[fadein]:not([pinned]) {
flex-grow: 1;
}

tabs tab,.tab-background {
height: var(--tab-min-height);
overflow: hidden;
}

tab > .tab-stack {
width: 100%;
}

box[class="scrollbox-clip"][orient="horizontal"] {
-moz-window-dragging: no-drag;
}

hbox.titlebar-spacer,
#alltabs-button,tabs tab:not([fadein]) {
display: none;
}




/* Feste Breite der einzelnen Tabs wenn gewünscht, sonst entfernen bzw. verbreitern */
tabs tab[fadein]:not([pinned]) {
min-width: 150px !important;/* Minimale Tabbreite 276px */
max-width: 150px !important;/* Maximale Tabbreite 325px */
}
}

/* move titlebar and its content (menubar, tabs toolbar) below navigation/bookmarks toolbar */
#titlebar {
  -moz-box-ordinal-group: 100 !important;
}

/* space above tabs toolbar */
#main-window[tabsintitlebar][sizemode="maximized"] * #titlebar {
  margin-top: -8px !important;
}

/* space for menubar above navigation toolbar (Firefox titlebar) */
#main-window[tabsintitlebar]:not([sizemode="fullscreen"]) #nav-bar {
  margin-top: 24px !important;
}
#main-window[tabsintitlebar][sizemode="maximized"]:not([sizemode="fullscreen"]) #nav-bar {
  margin-top: 24px !important;
}

/* add 'drag' feature to space above navigation toolbar */
#main-window[tabsintitlebar] #navigator-toolbox,
#main-window[tabsintitlebar] #nav-bar {
  -moz-window-dragging: drag !important;
}

/* move menubar to the top and extend its with to full window width */
#toolbar-menubar {
  position: fixed !important;
  width: 100vw !important;
  -moz-window-dragging: drag !important;
}

/* move menubars / tab toolbars caption buttons to windows top right position */
#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
  position: fixed !important;
  right: 0 !important;
  visibility: visible !important;
  display: block !important;
}

/* menubar postion after moving to the top */
#toolbar-menubar {
  top: 0px !important;
}

/* Linux/macOS Platz oberhalb der Lesezeichen-Symbolleiste bzw. unter dem Menü */
/* space above navigation toolbar (OS titlebar) */
/* set to '0', if no menubar is used */
#main-window:not([tabsintitlebar]):not([sizemode="fullscreen"]) #nav-bar {
  margin-top: 2px !important;
}

/* menubar postion in maximized mode after moving to the top */
#main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar {
  top: 0px !important;
}

/* caption button position in maximized mode after moving to the top */
#main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container,
#main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
  top: -14px !important;
}

/* Windows */
@media (-moz-os-version:windows-win10), (-moz-os-version:windows-win8), (-moz-os-version:windows-win7) {
    /* set to '0', if no menubar is used */
    #main-window:not([tabsintitlebar]):not([sizemode="fullscreen"]) #nav-bar {
      margin-top: 18px !important;
    }
    /* set to '0', if no menubar is used */
    #main-window[tabsintitlebar][sizemode="maximized"]:not([sizemode="fullscreen"]) #nav-bar {
      margin-top: 32px !important;
    }
    #main-window[tabsintitlebar][sizemode="maximized"] #toolbar-menubar {
      top: 8px !important;
    }
    #main-window[tabsintitlebar]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
      top: 0px !important;
    }
    #main-window[tabsintitlebar][sizemode="maximized"]:not([inDOMFullscreen="true"]) .titlebar-buttonbox-container {
      top: 8px !important;
    }
}

/* hide line above navigation toolbar appearing in some cases */
#main-window:not([tabsintitlebar]) #nav-bar,
#main-window:not([tabsintitlebar]) #navigator-toolbox {
  border-top: 0 !important;
  box-shadow: unset !important;
}

/* force buttons on menubar being very small to not break the toolbar */
#toolbar-menubar toolbaritem > toolbarbutton .toolbarbutton-icon,
#toolbar-menubar > toolbarpaletteitem toolbarbutton .toolbarbutton-icon,
#toolbar-menubar > toolbarbutton .toolbarbutton-icon {
  padding: 0px 0px !important;
  height: 16px !important;
  width: 16px !important;
}
#toolbar-menubar toolbaritem > toolbarbutton,
#toolbar-menubar > toolbarpaletteitem toolbarbutton,
#toolbar-menubar > toolbarbutton {
  position: relative !important;
  padding: 0px 0px !important;
  margin: 0px 0px !important;
}
#toolbar-menubar toolbaritem > toolbarbutton .toolbarbutton-icon,
#TabsToolbar-customization-target > toolbarpaletteitem toolbarbutton .toolbarbutton-icon,
#TabsToolbar-customization-target > toolbarbutton .toolbarbutton-icon {
  padding: unset !important;
  height: unset !important;
  width: unset !important;
}




/* This nullifies the left separator animation making "hovering" tabs less distracting */

.tabbrowser-tab::after,

#tabbrowser-tabs[movingtab] > .tabbrowser-tab[visuallyselected]::before {

margin-top: 0px !important;

margin-bottom: 0px !important;

}

#main-menubar > *,
#PlacesToolbarItems > toolbarbutton{
font-size:13px!important;}

Alles anzeigen

2002Andreas

Zitat von Monika Lu

gerade eine neue userChrome nach Deinem Text erstellt

Du solltest meinen Code nur in deine vorhandene Datei einfügen, und den alten Code/Text vorher entfernen.

Zitat von Monika Lu

dieses einmal zur Erläuterung meines Bildungsstandes

Alles ist gut

Monika Lu

Lieber Andreas,

ich habe es noch einmal kopiert in die vorhandene userChrome, aber es bleibt so, wie ich es in Beitrag #5 beschrieben habe.

Im Grunde genommen, bin ich jetzt absolut zufrieden, alles wie gewünscht. Meine Frage ging eigentlich nur dahin, in welchem der Bausteine von #3 (1. Code) der frühere Rahmen um die Tabs zu erkennen ist, denn in FF 88.0.1 gabs die Rahmen um die Tabs. Nach FF 89.0 war jedoch alles weg, auch die eingestellten Farben der Tabs.

Es ist schwierig auszudrücken: ich hatte nämlich nach dem Update auf FF 89.0 versucht die gesamte alte userChrome durchzusehen, wo die Linien von Früher sich verstecken. Ich habe den gesamten Text auf deutsch übersetzt, aber mir ist nichts aufgefallen, was auf die Einstellung für die Linien um die Tabs hindeutete.

Aber wie gesagt, ich habe ja einen neuen Code in Beitrag #5 für die Tab-Farben und die Linien, es funktioniert alles. Diesen Code habe ich aus einem gerade veröffentlichten Beitrag entnommen und auf meine Verhätnisse angepasst. Da, wo ich die ursprüngliche Einstellung für die Tabfarben hatte, habe ich den Textteil komplett gelöscht.

Aber ich glaube, es ist eine Zumutung für Dich als freiwilligen Helfer meine komplette userChrome mit den vielen Zeilen durchzulesen, das kann ja lange dauern.

Bisher bedanke ich mich außerordentlich für Deine Hilfe.

Herzliche Grüße

Monika Lu

grisu2099

Zitat von Monika Lu

in welchem der Bausteine von #3 (1. Code) der frühere Rahmen um die Tabs zu erkennen ist,

In deinem zweiten CSS-Code in #3

2002Andreas

Zitat von Monika Lu

wo voher die Rahmen um die Tabs unter der Lesezeichen-Symbolleiste in der alten userChrome gestanden hatten

CSS

.tabbrowser-tab:not([visuallyselected="true"])
{
    background-color: rgba(208,165,108,0.33) !important;
    border-right: 1px solid #444 !important;
    border-top: 0.5px solid #444 !important;
    border-bottom: 0.5px solid #444 !important;
}

.tabbrowser-tab:not([visuallyselected="true"]):hover
{
    border-top: 2px solid #757575 !important;
    background-color: rgba(255,255,255,0.1) !important;
    border-right: 1px solid #444 !important;
    border-top: 1px solid #444 !important;
}

.tabbrowser-tab[visuallyselected="true"]
{
    border-top: 2px solid #0A84FF !important;
    border-right: 1px solid #444 !important;
    border-bottom: 1px solid #444 !important;
}

Alles anzeigen

Ab Zeile 10 bis 31 im 2ten Code von dir.

Jeweils border

rechter Rand also border-right

Zitat von Monika Lu

bedanke ich mich außerordentlich für Deine Hilfe.

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

Tab anpassen mit Linien und Form eckig

Ähnliche Themen

Fx 133 > Tableiste unten per CSS-Code, oder per Skript.

Proton: Das wissen wir bereits über das neue Firefox-Design