Beiträge von Horstmann

    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 ? ;)

    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) :


    CSS
    /*  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 :


    CSS
    #placesContentTitle
    #placesContentUrl


    Aber 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 :




    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 .



    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 :


    CSS
    #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 ) :


    CSS
    #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 ) :


    CSS
    #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 ) :


    CSS
    #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 .


    CSS
    #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 :


    CSS
    #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 :


    CSS
    #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 :


    CSS
    #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 ?




    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 :



    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 :


    CSS
    #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 .


    CSS
    :root {
    --toolbar-bgcolor: red !important;
    }
    
    
    #navigator-toolbox {
    background-color: cyan !important;
    }


    Also hast du die Änderungen denn selber eingetragen, oder hat sich die userChrome.js plötzlich von alleine geändert ?

    Es liest ja der Eine oder Andere mit, und könnte von gemachten Erfahrungen profitieren ...


    Davon abgesehen funktionieren meine paar Scripts mit einer userChrome.js, die nach wie vor so aussieht :


    JavaScript
    // userChrome.js
    userChrome.ignoreCache = true;
    userChrome.import("*", "UChrm");

    Guten Morgen,


    und wie hast du den markierten Text grün bekommen?

    Guten Morgen,

    habe ich so gemacht.

    CSS
    #urlbar-container {
        --toolbar-field-focus-border-color:#486860 !important;
        }



    Moment, wäre das nicht nur die Farbe für die Umrandung ?


    Für den markierten Text benutze ich sowas :


    CSS
    /* Highlight color URL bar */
    #urlbar-input::selection {
    background-color: rgba(87, 80, 68, 0.2) !important;
    }

    Teste bitte mal die Kurzform.



    Danke, geht prima . :)

    Du hälst es gerne kurz und knackig, ist mir schon aufgefallen . ;)

    Ist auch besser so, es sammelt sich so schnell unnötiger Ballast an ...


    Ich habe oft ein paar Zeilen mehr als nötig in der userChrome.css während ich Dinge noch austeste, wegen der Übersichtlichkeit beim Bearbeiten ; idR gehe ich dann aber alle 1-2 Wochen über die Datei drüber und fasse Einträge zusammen etc. .