Beiträge von Horstmann

  • FFX 118 | Tableiste GANZ unten (unter Fenster) CSS-Code + Skript ?

    Zitat von ^L^

    Danke erstmal. Das Tabs-in-der-Mitte.CSS funktioniert leider (noch) nicht. Hab ein weiteres CSS gefunden,

    das aber auch nicht greift ...

    Dieser Code ist für den einzelnen Tab Inhalt, nicht für die Tabsleiste selber.

    Probier mal den hier, wobei hier mein obiger Code auch geht:

    CSS
    /* Tabs in Tableiste mittig */

scrollbox:not(#PlacesToolbarItems) {
    justify-content: center !important;
}
    Zitat von ^L^

    ZWISCHENSTAND: Bin fast durch, der alte ESR Chrome-Ordner (siehe oben) dient als Basis.

    Geht doch! :) :thumbup:

    Zitat von ^L^

    NOCH OFFEN: Die mittigen Tabs fehlen noch, und ganz rechts ist ein leeres Feld ...

    Das Feld ist vermutlich der rechte Spacer, damit wären beide rechts und links ausgeschaltet, oder du suchst dir nur einen aus:

    CSS
    .titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"] {
  display: none !important;
}

    Oder du änderst einfach die Breite nach Wunsch, 40px sind Fx Standard (Farbe nur zum Testen):

    CSS
    .titlebar-spacer[type="pre-tabs"], .titlebar-spacer[type="post-tabs"] {
    background-color: darkorange !important; 
    width: 12px !important; 
}


    Für die schmale Tab Breite könntest du deinen entsprechenden CSS Code (Zeile 30-33) damit ersetzen:

    CSS
    #tabbrowser-tabs tab {
    height: 22px !important;
}

/*Tabbreite*/
#tabbrowser-tabs .tabbrowser-tab:not([pinned]) {
    min-width: 60px !important;
    flex: 0 !important;
}

  • FFX 118 | Tableiste GANZ unten (unter Fenster) CSS-Code + Skript ?

    Zitat von ^L^
    Zitat von 2002Andreas

    PS:

    Oder willst du jetzt, dass sich hier ein user die Arbeit macht, alles raussucht, und dir dann auf dem silberen Tablet eine .zip Datei erstellt, während du gemütlich einen Kaffee trinkst ;)

    So in der Art. Ich suche halt (hoffe auf) eine(n) ''Tüftler(in)'', der/die sowas gern macht und als Hobby sieht ... :whistling:

    Man hilft ja gerne, aber wie Andreas schon gesagt hat, ein Minimum an Bemühung sollte schon da sein. :/

    Wer das nicht mitbringt, sollte vielleicht keine Modifikationen benutzen; auch mit aller Unterstützung regeln sich solche Anpassungen sowieso nie von alleine.

    Dazu kommt, dass es auch wirklich wichtig ist bei der Fragestellung möglichst viel an Information zu liefern; du hast noch nicht einmal die Fragen dazu hier beantwortet. X/

    Ohne die richtigen Fragen gibt's halt keine guten Antworten.


    Aber um dich nicht ganz hängen zu lassen, für die Tableiste ganz unten könntest du das hier mal probieren, für zentrierte Tabs irgendwas in der Art (nur grob getestet in 115esr, es gibt's bestimmt Besseres) :

  • FFX 118 | Tableiste GANZ unten (unter Fenster) CSS-Code + Skript ?

    Zitat von ^L^

    Ich suche passendes Blankoprofil - also alle nötigen Dateien, Einstellungen, Anweisungen als ZIP-Paket für Version 118.0.2

    BEISPIEL: Screenshot meiner ESR Version - so sollte es dann unter FFX 188 auch aussehen ...

    Hmmm, um ein bisschen eigene Arbeit wirst du wohl nicht herumkommen... :/

    Was ist denn deine ESR Version eigentlich, 115 oder noch 112?

    Und welcher CSS Code klappt denn in deiner ESR, aber nicht in 118?

  • Variablen in CSS nutzen

    Zitat von Speravir
    Zitat von Horstmann

    Etwas wie :has wäre da schon was Anderes.

    Äähm, layout.css.has-selector.enabled existiert. Ich weiß aber nicht, seit wann es diese Einstellung gibt. Ich nutze den Selektor auch aktiv.

    Ich hatte :has auch schon benutzt, wollte aber warten bis es offiziell von Fx unterstützt wird und sauber implentiert ist.

    Bei mir gab's ein paar seltsame Funktionen beim Testen, und generell wohl. Einschränkungen (- zumindest in 104/105(?) -), da hatte ich es einfach mal beiseite geschoben.

  • Variablen in CSS nutzen

    Zitat von Sören Hentzschel
    Zitat von Horstmann

    Muss aber wirklich bald mal neue Macs anschaffen...


    Das ist Off-Topic, aber vielleicht ist der OpenCore Legacy Patcher einen Versuch wert?

    https://dortania.github.io/OpenCore-Legacy-Patcher/

    Der bringt aktuelle macOS-Versionen auch auf alte Macs, die schon lange aus der offiziellen Unterstützung raus sind.

    Danke für den Tip, da schau ich rein. :) :thumbup:

    Ich glaube aber da war ich schon, und es gibt Einschränkungen jenseits von High Sierra, was ich ohne Probleme auf meinem alten, aufgerüsteten MacPro 4.1 (5.1 Patch) und ähnlich alten Macbooks am laufen habe, mit diesen Patchern.

    Es macht am meisten Sinn, meine Macs einfach mit einem aktuellen Mac Studio und MacBook Air zu ersetzen, was meine Erfordernisse komplett bedienen würde - sobald es das Budget erlaubt. ;)

  • Variablen in CSS nutzen

    Zitat von Sören Hentzschel
    Zitat von Horstmann

    Das Nesting hört sich interessant an, auch wenn ich mich noch etwas schwer tue für das Ganze eine wirklich hilfreiche Nutzung im Browser CSS zu finden.

    Solange du kein neueres macOS und damit keine Firefox-Version größer als 115 einsetzen kannst, hilft es dir auch nicht. ;) Aber ab Firefox 117 sollte man das grundlegende Konzept verstehen, um das CSS von Firefox zu verstehen, falls man seinen Browser in einem Bereich anpasst, in dem Firefox Gebrauch davon macht. Tendenz in jedem Fall steigend. Die Basis der Anpassungen liegt ja darin, sich das CSS von Firefox mit den Entwicklerwerkzeugen anzusehen und dann zu verändern.

    Salz in die Wunde! ;)

    Muss aber wirklich bald mal neue Macs anschaffen...

    Zitat von Sören Hentzschel
    Zitat von Horstmann

    Etwas wie :has wäre da schon was Anderes.

    Das ist wiederum eine ganz eigene Baustelle, zumal die Verschachtelung ja vor allem sogenannter syntactic sugar ist und anders als :has keine neuen Anwendungsfälle eröffnet. Aber für's Protokoll: Die Unterstützung für :has ist seit 13 Tagen standardmäßig in Firefox Nightly aktiviert. In einer finalen Version wird das definitiv nichts vor Firefox 120. Ausgehend von den Web Platform Tests (WPT) könnte das sogar noch klappen:

    https://wpt.fyi/results/css/se…nterop-2023-has

    Prima, danke für die Info. :)

    Zitat von Sören Hentzschel

    Ergänzend, da gerade im Nightly-Blog gesehen:

    Also falls jemand noch nicht geglaubt hat, dass das die Zukunft von CSS in Firefox ist… ;)

    Für aktuelle bestehende, eigene CSS Anpassungen, könnte das evtl. bedeuten dass u.U. (kleinere) Probleme mit der Spezifität auftreten können, wenn der Fx Code das Nesting implentiert?

    Dass also die Spezifität im eigenen CSS Code hier und da evtl. angepasst werden müsste, um Fx CSS zu überschreiben?

    Eine hypothetische Frage zu diesem Zeitpunkt, nur so aus Interesse.

  • Variablen in CSS nutzen

    Kommen wir hier vielleicht etwas vom Thema ab? :/

    Das Nesting hört sich interessant an, auch wenn ich mich noch etwas schwer tue für das Ganze eine wirklich hilfreiche Nutzung im Browser CSS zu finden.

    Etwas wie :has wäre da schon was Anderes.

    Aber einen massgeblichen Bezug zur Verwendung von Variablen sehe ich nicht momentan.

  • neue Schaltfläche "Einheitliche Erweiterungen"

    Zitat von Thomas S.
    Zitat von Horstmann

    Geht das denn bei dir?

    Jein. ?(

    Gleiches Verhalten, aber wenn man nur ein "Mousedown" macht und die Maus vom Menü in die Auflistung führt, geht es.

    Danke für die Rückmeldung, deine Art der Anwendung funktioniert hier so auch; schade dass das Script diese Ausnahme für die Funktion hat.

    Obwohl ich es ausser in Testprofilen eh nicht mehr benutze, seit man den Button in der Navbar verschieben kann; da habe ich es einfach nur bei hover sichtbar..

  • :hover pseudo-class einem Element hinzufügen mit Javascript?

    Zitat von Sören Hentzschel
    Zitat von Horstmann

    Das Icon selber soll aber nur dann einen Hover-Effekt haben, wenn genau über das Icon gehovert wird


    Aber wieso, wenn das überhaupt keine Funktion erfüllt? Was soll der Effekt dann aussagen? Das trägt dann ja höchstens zur Irritation bei.

    Muss man angewendet haben mit einem breiten Button um's nachzuvollziehen, und dann ist es oft immer noch subjektives Empfinden.

    Design-relevante Wahrnehmung ist ein spannendes Thema (nicht dass ich ein Experte wäre), sprengt aber evtl. hier etwas den Rahmen.

    Jetzt stell ich aber erstmal den Icon HG für :hover wieder auf transparent um für den einen Button; einfach weil es mich nervt, und der Button schon einen extra HG hat bei Hover.

  • :hover pseudo-class einem Element hinzufügen mit Javascript?

    Zitat von BrokenHeart
    Zitat von Sören Hentzschel

    Ich verstehe den Anwendungsfall nicht.

    Das war auch mein erster Gedanke. Wenn etwas sein Aussehen beim 'hovern' verändert, dann weiß ich, dass für das gesamte Element (in dem Fall Button) eine definierte Aktion erfolgt. Wenn ich als Anwender aber beim Drüberfahren mit der Maus nur bei dem Icon eine sichtbare Änderung sehe, dann denke ich doch, ich muss also immer auf das kleine Icon klicken, damit etwas passiert, was ja so nicht stimmt. Von der Benutzerführung her, nicht sehr einleuchtend... :/

    Jungens, es ist nur ein Designfaktor. ;)

    Du und Sören Hentzschel habt völlig recht, dass es für die Anwendung evtl. nicht zwingend Sinn macht.


    Aber: Ihr habt einen verbreiterten Button in der Navbar.

    Der Button ist verbreitert damit man ihn einfacher treffen kann mit der Maus, evtl. weil der Button auch nur bei :hover sichtbar ist.

    Der Button an sich hat auch einen Hintergrund oder ein border-image etc. gebastelt bekommen, was nur bei :hover auftaucht.

    Also wird der gesamte Button zB bei :hover auf eine bestimmte Art und Weise angezeigt.

    Das Icon selber soll aber nur dann einen Hover-Effekt haben, wenn genau über das Icon gehovert wird, und eben nicht wenn wenn über den gesamten Button gehovert wird (der ja schon seinen eigenen Hover Effekt hat).

    Dann macht es schon Sinn - nicht für die Funktion des Buttons, die bleibt gleich und soll es auch - aber für die visuelle Erscheinung und teilweise für die Anwendung.


    Die Frage war aber ob es geht; nach den Antworten hier und anhand meiner Recherchen könnte oder müsste man anscheinend relativ massiv mit Javascript eingreifen, was ich nicht kann und die Sache nicht wert ist.

    Thema mal wieder erledigt. ;)

  • Variablen in CSS nutzen

    Zitat von Mira_Belle

    Echt toll, wenn ich dann mit nur einer Änderung das komplette Farbdesign ändern kann.

    Und das ist nur der Anfang; wenn man damit anfängt komplexe Kalkulationen mit Variablen zu bedienen, oder (auch mit Script selber gemachte) Klassen etc. gegeneinander auszuspielen, dann gibt's kein Halten mehr. =O

    Die meisten meiner eher aufwendigeren Modifikationen haben im Kern eigene Klassen in einem Script zugefügt, und der Rest wird mit CSS Variablen berechnet und plaziert.

    Obwohl das Fehlerpotential recht hoch sein kann, der erste Aufwand auch; aber Spass macht's schon, und die Möglichkeiten sind fast unbegrenzt. ;)

  • :hover pseudo-class einem Element hinzufügen mit Javascript?

    Zitat von BrokenHeart

    Prinzipiell geht das schon:


    Wenn man z.B. beim Icon des 'about:config'-Buttons :hover hinzugefügt und in der Entwicklungsumgebung den :hover-Filter einschaltet, dann sieht man, dass der Selektor funktioniert (nur inline beim 'about:config'-Button über Stilbearbeitung).

    CSS
    toolbar .toolbarbutton-1 > .toolbarbutton-icon:hover {
    filter: brightness(200%) contrast(200%) !important;
}

    Das Problem ist, dass das Icon den hover-Event gar nicht bekommt, weil dieser vorher vom toolbarbutton "konsumiert" wird.

    Hmm, verstehe.

    Ich hatte auch schon mit pointer-events rumprobiert, das wäre dann aber zu viel des Guten, ging aber eh nicht.

    CSS
    .toolbarbutton-1 {
    pointer-events: none !important;
}

.toolbarbutton-1 .toolbarbutton-icon {
    pointer-events: auto !important;
}

    Das Ziel wäre eben dass Sowas in der Art funktioniert; getrenntes :hover Verhalten für Button und Icon im Button:

    CSS
    .toolbarbutton-1:hover .toolbarbutton-icon {
    background-color: transparent !important;
}

.toolbarbutton-1 .toolbarbutton-icon:hover {
    background-color: lightgrey !important;
}

    Nur um das nochmal verständlicher zu erklären.

    Naja, war nur so eine Idee.

  • Variablen in CSS nutzen

    Zitat von Sören Hentzschel
    Zitat von Horstmann

    CSS liest von unten nach oben, wenn ich mich nicht ganz vertue. :/


    Wie auch immmer, auf jeden Fall hat eine Regel die weiter unten steht Präferenz über die darüber.

    Richtige Beobachtung, falsche Schlussfolgerung. ;) Bei gleicher Spezifität hat eine Regel, die weiter unten steht, Präferenz gegenüber einer Regel, die weiter oben steht. Und zwar, weil CSS von oben nach unten geht, nicht umgekehrt. Die „untere“ Regel überschreibt dann die „obere“ Regel, weil sie danach kommt.

    Wo ich das nur her habe mit von unten nach oben, irgenwo hab ich das mal gelesen...? :/

    Solange das Prinzip funktioniert, ist halb daneben aber ja immer noch ein Treffer. ;)

    Spezifität ist ein gutes Stichwort, damit kann man viel anstellen mit Variablen.

  • :hover pseudo-class einem Element hinzufügen mit Javascript?

    Zitat von Sören Hentzschel

    Rein von der Logik her, wie ich mir vorstelle, was du vorhast, gehört das :hover eh auf das Button-Element, also so in der Art: toolbarbutton:hover .toolbarbutton-icon, wie in deinem ersten Beispiel. Was genau ist denn das Problem damit?

    Das hier, von dem ersten Beitrag: ;)

    Zitat von Horstmann

    Das kam mir schon öfters in die Quere, weil ich gerne mal mit Buttons spiele zum Verbreitern etc., aber die Hoverfunktion nur auf den ganzen Button, nicht aber nur auf das Icon anwenden kann.

    Ich benutze mehrere überbreite Buttons, bei denen ich gerne eine separate Hoverfunktion für Button und Icon hätte, v.a. aus gestalterischen Gründen (Hintergrund etc.).

    Wenn's nicht geht, geht's halt nicht.


  • :hover pseudo-class einem Element hinzufügen mit Javascript?

    Zitat von Sören Hentzschel
    Zitat von Horstmann

    Das hier funktioniert nicht mit CSS, weil .toolbarbutton-icon diese Klasse eben nicht zugewiesen hat:

    Ich denke, dass du hier ein bisschen kompliziert denkst. Ergänze doch einfach die CSS-Regel, die dir fehlt. Du kannst schließlich nicht nur Selektoren verwenden, die es im originalen CSS gibt. Wozu braucht es da überhaupt JavaScript?

    Danke für die Antwort; aber wie kann man zB für .toolbarbutton-icon eine hover spezifische Regel mit CSS hinzufügen?

    Attribute oder sowas in der Art? :/