Hallo Horstmann,
schau mal da → #CustomJSforFx/addonbar_vertical.uc.js at master · Aris-t2/CustomJSforFx · GitHub.
Vielen Dank für die Antwort . 
Ich hätte erwähnen sollen, dass ich dieses eine Script schon habe, ist aber etwas temperamentvoll in der Anwendung . 
Meine Hoffnung war auf eine Art heruntergekochte Basis-Version, v.a. ohne die ganzen CSS bezogenen Störer für den Button etc., ; aber das ist wohl eher was für einen neuen Thread ; oder vielleicht was das hierzu passen könnte . 
Hm,
ändern die bei Dir ihre Größe?
Ich habe den Button meines Scripts für die Entwickler-Werkzeuge z.B. damit * angepasst, steht in meine Fall in dem Script für die vertikale Symbolleiste.
Sorry dass ich hier reingrätsche - hättest Du vielleicht einen Link zum Script für diese vertikale Symbolleiste ?
Ich habe mir schon den Wolf gesucht, aber nichts gefunden ...
Nicht drängeln Leute, bitte, hier kommt jeder dran !
Vielleicht war meine ursprüngliche Erklärung der Angelegenheit wieder mal etwas unverständlich ; es geht hier um einen CSS Code, der die Lesezeichenleiste als vertikale Liste an die Seite plaziert, wie oben schon erwähnt .
Im Prinzip hätte ich gern dass diese Leiste genauso wie die Sidebars Leiste agiert : ist die Sidebar offen, wird der Browserinhalt/ die gerade offene Webseite um die Breite der offenen Sidebar reduziert.
Schliesst man die Sidebar, expandiert der Browserinhalt/Webseiteninhalt zurück auf die volle Browserbreite .
Mit dem vertikalen Lesezeichenleisten CSS funtioniert das auch nach einer Modifikation, aber nur bedingt .
Hier ist der CSS Code für die vertikale Lesezeichenleiste; in der Form ist sie permant sichtbar; auch nach Verstecken der Lesezeichenleiste bleibt eine Lücke am Browserrand zurück, wie in der ersten Post beschrieben und bebildert :
/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/vertical_bookmarks_toolbar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */
/* Makes bookmarks toolbar appear vertically at the left side of the window */
@-moz-document url(chrome://browser/content/browser.xhtml){
:root:not([inDOMFullscreen]){
--uc-vertical-toolbar-width: 60px;
}
#PersonalToolbar{
position: fixed;
display: flex;
flex-direction: column;
left: 0;
width: var(--uc-vertical-toolbar-width,0);
/* These create a empty area to the bottom of the toolbar, which is to mask a fact that we don't know exactly how high the toolbar should be */
height: 100vh;
max-height: 100vh !important;
padding-bottom: 120px !important;
}
#personal-bookmarks{ overflow-y: auto; scrollbar-width: none;}
#PersonalToolbar > #personal-bookmarks > #PlacesToolbar > hbox{ -moz-box-orient: vertical !important; }
#PersonalToolbar #PlacesToolbarItems{
display: flex;
flex-direction: column;
}
#PersonalToolbar #PlacesToolbarItems > toolbarseparator{
height: 7px;
background-color: currentColor;
background-clip: padding-box;
border-block: 3px solid transparent !important;
}
#PersonalToolbar .toolbarbutton-1{ padding-block: 10px !important }
#PersonalToolbar #PlacesToolbarItems > .bookmark-item{ padding-block: 4px !important; }
body > #browser,
body > #browser-bottombox,
#customization-container{
margin-left: var(--uc-vertical-toolbar-width,0);
}
}Um eine Anpassung des Browserinhalts bei geschlossener Lesezeichenleiste zu ermöglichen, hat der wohlbekannte Mr. Other Guy netterweise auf meine Frage dazu mit einem (experimentellen) Lösungsvorschlag geantwortet :
#navigator-toolbox-background:has(#PersonalToolbar[collapsed="true"]) + #browser {
margin-left: 0 !important;
}Das funtioniert tatsächlich ; hat nur einen Haken - ich muss jedesmal das Fenster Symbolleiste anpassen öffnen , bevor der Effekt in Kraft tritt .
Also Webseite ist offen , Vertikale Lesezeichenleiste offen , Webseiteninhalt komprimiert um die Breite der Lesezeichenleiste .
Dann 'schliesse` ich die Lesezeichenleiste - über Rechtsklickmenü oder Tastaturkürzel auf Lesezeichensymbolleiste -> Nie anzeigen - der Inhalt, die Lesezeichen an sich, verschwinden dann, aber die Leiste selber bleibt, der Webseiteninhalt bleibt komprimiert ( s Screenshots in erster Post ).
Seltsam ist jetzt, dass wenn ich nun Symbolleiste anpassen aktiviere - was dann ja ein neues Tab mit eben den Anpassungsfunktionen öffnet - und dann ohne irgendwas zu machen einfach nur auf meine alte Tab zurückgehe - dann hat sich die Leiste komplett geschlossen , und der Webseiteninhalt ist auf voller Breite sichtbar .
Umgekehrt genauso, beim Öffne einer geschlossenen Lesezeichenleiste passt sich der Webseiteninhalt in der Breite an - aber immer nur nach dem Umweg über Symbolleiste anpassen öffnen ....
Getestet in vielen Varianten, inkl. einem Profil ohne weitere CSS oder Script Modifikationen .
Ideen willkkommen !
Herzlichen Glückwunsch zum Geburtstag, Horstmann !
Dankeschön !!!!
Im ewigen Kampf um die optimale Darstellung der Lesezeichenleiste, bin ich kürzlich auf eine weitere mögliche Lösung gestossen .
Diese CSS positioniert die Lesezeichenleiste als vertikale Liste an die Seite , und funktioniert nach anfänglichen Tests auch prima .
Es gibt nur einen Haken - im Gegensatz zur normalen, horizontalen Lesezeichenleiste, die beim Ausblenden aus dem Browserfenster verschwindet und den Webseiteninhalt freigibt - bleibt bei dieser Variante eine Lücke, bzw. eine Art Platzhalter zurück .
Der Browserinhalt bzw. der Webseiteninhalt passen sich nicht darauf an, dass die Lesezeichenleiste eigenlich nicht mehr da ist - im Gegensatz zum genannten Verhalten der Standard Lesezeichenleiste .
Ich hatte die Frage auch schon auf Reddit gestellt, und der Author der CSS hat sich netterweise dazu mit einem Lösungsvorschlag geäussert, nur funktioniert die Geschichte auch damit noch nicht .
Hättet Ihr dazu eine Idee ?
Anbei die Screenshots zum Thema; ich hoffe das macht Sinn .
PS: Idealerweise würde das Ganze auch mit dem Script zum Verstecken der Lesezeichenleiste funtionieren - das ich übrigens absolut liebe .
Ich glaube das heisst Nicht Hirntot , oder Hirnlos Tot , oder Vereinte Nationen Hirntot .
Mir ging es nicht um eine Wort-für-Wort-Übersetzung, die so ja ganz offensichtlich keinen Sinn ergibt, sondern um die konkrete Bedeutung im Kontext dieses Scripts. Ich kann nur erahnen, dass der Themenersteller eigentlich etwas völlig anderes meinen muss, was mehr Sinn ergibt.
Jessas, das war ein Scherzchen ! 
Muss man das wirklich dazuschreiben, wenn's so offensichtlich Blödsinn ist ?
PS: Was soll denn „Unbraindead“ heißen?
Ich glaube das heisst Nicht Hirntot , oder Hirnlos Tot , oder Vereinte Nationen Hirntot .
So der so, gutes Englisch ist das nicht .
Ah, verstehe; danke für Mühe !
Weil ich gerade einen neuen Screenshot gebastelt habe zum besseren Verständnis, hänge ich den trotzdem mal hier an ; das wäre das gewünschte Ergebnis, aber geht ja wohl leider nicht .
Danke für Eure Antworten !
Funktioniert nur leider nicht ; es geht mir im Prinzip darum den/die grauen Balken zu beschneiden .
Wie im Screenshot zu sehen, sind diese 'Balken' rechts und links beschnitten, bzw. eingerückt .
Aber eben über die gesamte Liste, nicht in den einzelnen Spalten .
Wo der Pfeil in der Mitte hinzeigt würde ich gerne eine Lücke in den Balken haben .
Eine Frage hätte ich hier noch zum Thema : Ist es möglich für die einzelnen Spalten im Bibliotheksfenster eine Lücke bzw. Abstand auf beiden Seiten festzulegen ?
Ich habe mir alles zum Thema hier mehrfach durchgelesen, komme aber nicht dahinter .
Für die gesamte Spaltenansicht funktioniert das hier ( s. Screenshot) :
/* Library Listen Luecke Seiten */
treechildren::-moz-tree-row {
margin-inline: 8px !important;
}Damit habe ich eine Lücke rechts und links für eben die gesamte Spalte ; für die einzelnen Spalten habe ich zB diese IDs hier gesehen :
#placesContentTitle
#placesContentUrlAber wie ich die benutzen könnte um ein Margin zu erzeugen , das habe ich nach vielem Testen nicht herausgefunden .
Mit den Browser Werkzeugen schaffe ich es auch nicht diese Spalten bzw. deren Einträge spezifisch zu finden ...
So , jetzt geht's dann doch .
Zumindest in meinem speziellen Fall, wo der Kanten-Verlauf nur links sitzen muss .
Ich versuch's gar nicht erst im Detail zu erklären - mich versteht ja eh keiner , es ist auch nicht 100% perfekt , aber so lässte sich zumindest die selektierte Tab mit einem Schattenverlauf ( obere Kante ) versehen - und nur wenn sie links steht - und die unselektierten Tabs haben nur eine dezente Schattenkante ohne Verlauf - und vor allem keinen Verlauf in den unselektierten, transparenten Tabs selber .
Der einzige Nachteil ist, dass ich den Kantenverlauf in der selektierten Tab nicht mehr in Prozentwerten angeben kann , sondern in festen Pixelwerten, weil die selektierte Tab sich ja in der Breite verändert, je nach Gesamtanzahl der Tabs ( bei mir ) .
Aber weil sich der Verlauf eh nach dem Logo links richtet, ist das auch kein Drama .
Die gesamte CSS sieht dann so aus, vielleicht hat ja jemand mal Verwendung für so was :
#nav-bar {
border-bottom: 1px solid !important;
border-image: linear-gradient(to right, transparent 1.5%, rgba(0, 0, 0, 0.2) 10%) 1 !important;
}
#PersonalToolbar {
border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.7) !important;
mask-image: linear-gradient(to right, transparent 2%, black 13%) !important;
mask-clip: no-clip !important;
}
.tabbrowser-tab:not([selected]) .tab-background, #tabs-newtab-button {
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.3) !important;
}
.tabbrowser-tab[selected] .tab-background {
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.7) !important;
}
.tabbrowser-tab[selected]:where(:first-of-type) .tab-background {
mask-image: linear-gradient(to right, transparent 36px, black 236px) !important;
}
.browserContainer > findbar {
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.7) !important;
}
Herzlichen Dank nochmal für Eure Mühen ; ich hab's wirklich schlecht erklärt .
Bzw. hätte ich dazusagen sollen, dass ich prinzipell die Linien inklusive Verläufe schon habe , oder auf meiner früheren Thread zu dem Thema verweisen sollen .
Damit hier bekomme ich eine dunkelgraue Linie / border unten in den einzelnen Leisten , plus eine helle Linie / box-shadow für die jeweils darunterliegende Leiste ; s. Screenshots mit jeweils ( der hellen ) aktiven Tab und der ununselektierten Tab .
Alle der Linien haben über ihr mask-image ( alpha ) einen Verauf von links ( unsichtbar ) nach rechts ( sichtbar ) .
Soweit genau nach Plan .
#nav-bar {
border-bottom: 1px solid rgba(0, 0, 0, 0.3) !important;
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.9) !important;
mask-image: linear-gradient(to right, transparent 1.5%, black 10%) !important;
mask-clip: no-clip !important;
z-index: 1 !important;
}
#PersonalToolbar {
border-bottom: 1px solid rgba(0, 0, 0, 0.3) !important;
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.9) !important;
mask-image: linear-gradient(to right, transparent 2%, black 13%) !important;
mask-clip: no-clip !important;
}
#TabsToolbar {
mask-image: linear-gradient(0deg, black 25px, transparent 25px) !important;
}Das mask-image in #TabsToolbar ist nichtmal nötig, es dämpft nur den hellen Schatten von oben in den Tabs etwas ab .
Weil es visuell ein klein weniger besser aussieht, wenn ich den untersten hellen 'Schatten' direkt in die Tabs/Tableiste baue, habe ich auch das versucht, wie oben erwähnt :
#TabsToolbar {
box-shadow: inset 0px 1px 0px 0px rgba(255, 0, 0, 0.9) !important;
mask-image: linear-gradient(to right, transparent 2%, black 13%) !important;
}Dann läuft aber die Maske auch in die unselektierten Tabs rein, und das scheint sich nicht umgehen zu lassen , weil eben diese Tabs semi-transparent sind ( und bleiben sollen ) , wie BrokenHeart und Andreas auch erläutert haben .
Den Screenshot dazu hänge ich auch nochmal mit an, hier mit rotem statt weissem 'Schatten' nur zu Testzwecken .
Und eben diesen Verlauf in die Tabs hinein wäre ich gerne losgeworden .
Man könnte in der Tableiste ein border-image statt dem Schatten benutzen, border-image lässte eine Verlaufskante zu ohne eine Maske , aber dann gibt's u.U. Ärger mit dem Tab Inhalt ; border ist ja quasi ein 'physisches' Element , box-shadow nur ein Layer .
Das müsste ich mir aber evtl. nochmal anschauen .
Vielen Dank für Eure Antworten !
Habe schon geahnt dass ich das nur schwer erklären kann, ich fummele daran schon eine Weile rum ohne zum Ende zu kommen .
Ich denke ich habe wie schon oft Probleme damit zu verstehen, wie die verschiedenen Ebenen aufeinander liegen in Firefox , und was welche Elemente wie überlagert .
In Photoshop ist das einfacher - oben ist oben, unten ist unten, Masken kann man verketten .
Im Prinzip suche ich nach einem Weg, oben einen nach rechts verlaufenden box-shadow zu haben über die Tableiste - ohne ein border-image zu benutzen, nur mit mask-image .
Das geht auch prima - aber jedes mask-image läuft eben auch über die Tabs, nicht nur den box-shadow ... 
Zum Beispiel, s. Screenshot - Verlauf transparent zu Farbe für den box-shadow ( prima ) ; Verlauf transparent zu Farbe auf linker Tab ( nicht prima ) :
#TabsToolbar {
box-shadow: inset 0px 1px 0px 0px rgba(255, 0, 0, 0.9) !important;
mask-image: linear-gradient(to right, transparent 2%, black 13%) !important;
}Eine solide Farbe für die Tabs würde das Problem lösen, wie anfangs erwähnt und auch von Andreas vorgeschlagen - aber meine Tabs sind semi-transparent, farblich abgestuft und sollen auch so bleiben .
Daher die Frage, ob man in irgendeiner Form die Tabs von ihrem Hintergrund bzw. Umgebung komplett entkopplen kann , oder umgekehrt .
Oder - es würde ja schon reichen wenn die Tab ganz links keine Verlauf hätte - hmmm ...
Meine Frage in die Runde : lässt sich der Hintergrund der gesamten Tableiste ändern, ohne dass die anderen Elemente in der Tableiste mit betroffen werden ?
Im Screenshot unten liegt ein Verlauf über der Tableiste; mit Ausnahme des aktiven Tab haben alle Elemente diesen Hintergrund .
Um z.B. alle Tabs auszuschliessen habe ich folgendes probiert ( getestet in einer userChrome.css mit nur diesem Eintrag ) :
#TabsToolbar:not(tab.tabbrowser-tab) {
background: linear-gradient(to right, powderblue 20%, yellow 60%) !important;
}Funktioniert aber nicht ...
Was geht wäre einzelnen Elementen jeweils ihren eigene Hintergrund zuzuweisen , wie z.B. so ( Screenshot #2 ) :
#TabsToolbar {
background: linear-gradient(to right, powderblue 20%, yellow 60%) !important;
}
#tabs-newtab-button {
background: red !important;
}Weil aber meine gesamte CSS Geschichte etwas komplexer ist als dieser Test, und ich einen Masken-Verlauf über einen Schatten innerhalb der Tableiste legen will - über alles ausser den Tabs - wäre die Frage ob man generell die Tabs etc. vom Hintergrund ausschliessen kann .
Konkret geht es um so einen Fall, wo die Maske zwar wie gewollt den Schatten beschneidet , aber eben auch die ( teils transparenten) Tabs mit überlagert .
Wie gesagt ist die gesamte CSS etwas aufwendiger, deshalb das einfachere Beispiel oben .
#TabsToolbar {
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.9) !important;
mask-image: linear-gradient(to right, transparent 2%, black 13%) !important;
}
Hallelujah, das war eine schwere Geburt, aber jetzt funktioniert's dann doch .
Mit Tante Google ging's schliesslich hierhin .
Damit deckt jetzt die Maske nicht mehr den unteren der beiden 'Schatten' ab, der ausserhalb der eigentlichen Lesezeichenleiste liegt :
#PersonalToolbar {
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.9),
0px 1px 0px 0px rgba(255, 255, 255, 0.9) !important;
mask-image: linear-gradient(to right, transparent 2%, black 13%) !important;
mask-clip: no-clip !important;
}
Für einen Moment dachte ich schon ich hätte es - aber nicht ganz ...
Damit bekomme ich wieder zwei durchgehende helle Kanten, diesmal nur unter Benutzung der Lesezeichenleiste :
#PersonalToolbar {
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.9),
0px 1px 0px 0px rgba(255, 255, 255, 0.9) !important;
}Das sieht dann genauso aus wie im Screenshot #2 von oben ( hängt unten nochmal an ) .
Also denke ich mir, ich lege eine Maske über das Ganze, damit diese helle Kanten links etwas abgeschnitten werden :
#PersonalToolbar {
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.9),
0px 1px 0px 0px rgba(255, 255, 255, 0.9) !important;
mask-image: linear-gradient(to right, transparent 2%, black 13%) !important;
}Das mask-image geht von links nach rechts, und schneidet die obere helle Kante auch wie gewünscht links etwas ab - dummerweise geht damit die untere helle Kante komplett verloren ( s. zweiter Screenshot ) !
Wo ist hier mein Denkfehler, die Maske sollte doch eigentlich nur die linke Seite abdecken ?
Danke für den Tip, funktioniert aber leider nicht so sauber wie farblich klar definierte Linien .
In meiner userChrome.css habe ich unten eine Border eingebaut für jeweils die nav-bar, PersonalToolbar und die ( unten sitzende ) TabsToolbar .
Für die ersten beiden ist diese untere Border ein Verlauf von links ( transparent ) nach rechts ( hellgrau ) , s. Screenshot #1 .
Das CSS dafür ist dieses :
/* Navbar, Gradient Border */
#nav-bar {
border-bottom: 1px solid !important;
border-image: linear-gradient(to right, transparent 1.5%, rgba(0, 0, 0, 0.2) 10%) 1 !important;
}
/* Bookmarks bar, Gradient Border */
#PersonalToolbar {
border-bottom: 1px solid !important;
border-image: linear-gradient(to right, transparent 2.0%, rgba(0, 0, 0, 0.2) 13%) 1 !important;
}
/* Tab Leiste Border */
#TabsToolbar {
border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
}Jetzt dachte ich mir , es wäre nett mal auszuprobieren, ob eine helle Kante direkt unter diesen verlaufenden Trennlinien nicht auch nett wäre ; für einen altmodischen 3D Effekt .
Was auch nicht so schwierig ist - im Prinzip .
Das Beste was ich geschafft habe, ist eine helle Kante über die gesamte Breite, aber leider bekomme ich keinen Verlauf für diese zweite Kante hin .
Das aktuelle CSS für die zusätzliche Border , nach erfolglosen Versuchen mit diversen background/border-image etc. Varianten :
#PersonalToolbar {
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.9) !important;
}
#TabsToolbar {
box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.9) !important;
}Funktioniert , aber halt leider kein Verlauf von transparent links nach weiss rechts , s. Screenshot #2 .
Zum testen kannst du auch mal Folgendes in die userChrome.css kopieren, und nur das ; wenn das Ergebnis nicht komisch aussieht , hast du irgendwo einen Fehler drin.
Und wie oben schon erwähnt - die Datei muss userChrome.css heissen, mit grossem C , in einem Ordner namens chrome , im aktiven Profilordner ; und nach Änderungen Firefox beenden und neustarten .
Mit Linux kenne ich mich nicht aus, aber du solltest Dateiendungen anzeigen oder ähnliches im OS aktiviert haben, und die userChrome.css Datei als reinen Text formatieren .
:root {
--toolbar-bgcolor: red !important;
}
#navigator-toolbox {
background-color: cyan !important;
}