Beiträge von Horstmann

  • Tabform

    Zitat von Mira_Belle

    Na da bin ich aber mal gespannt. 8o Kann es kaum erwarten.

    Und betrifft es wieder den kompletten Code,

    oder nur einen bestimmten Teil, bestimmte Selektoren?

    Ich habe am Rest natürlich auch wieder rumgefummelt ;) , aber generell ist der Code in der Basis der selbe.

    Du solltest eigentlich - ohne irgendwo unten reinzugehen - alle Farben im oberen General adjustments Block einstellen können.

    Die unter Tableisten Kante hab ich mal rausgeworfen und mit was Anderem ersetzt, es geht ja nur um Abrenzung, oder?

    Aber das kann man aufbauen wie man will, da gibt es zig Möglichkeiten.

    Hier ist mein momentaner Testcode; den hab ich nur kurz in Fx119 getestet, ist immer ein Akt das System anzuwerfen, aber sah ok aus.

    Die Grafik ist hier auch wieder eingebunden.

  • Blauer Rahmen um Tabbar oder Titlebar

    Zitat von Nikolaus2001at

    Hallo zusammen,

    nachdem ich gestern abend in Bastellaune war hab ich mir mit unten stehenden css Code einen blauen Rahmen um meine Tabbar oder Titlebar gebaut.

    Warum so kompliziert; der Rahmen soll jeweils einmal rund um die Tableiste und die Navbar gehen, korrekt?

    Border würde ich dazu eher nicht benutzen, weil das ins Layout eingreift (v.a. in der Navbar, sieht man gut an deinem Screenshot) und Grössen verändert; vielleicht eher sowas?

    CSS
     /* Tab-Bar, Navbar: Blauer Rahmen  */

#TabsToolbar, #nav-bar {
    /*border: 2px solid #00bbff !important;*/
    border-image:  linear-gradient(#00bbff, #00bbff) 1 / 2px !important;
}

  • Tabform

    Auf den Punkt getroffen! :)

    Ich habe eine Lösung für den Überlauf, aber dann verändern sich die Breiten je nach gewählter/nicht gewählter etc. Tab.

    Dafür hab ich im Prinzip auch eine Lösung - aber die hat noch einen massiven Bug... :/

  • Tabform

    Zitat von Mitleser
    Zitat von Horstmann

    Wenn du einen direkt mit dem Code anwendbaren, und für den Code funktionierenden Vorschlag für eine Lösung hast

    Nö, habe ich nicht. Damit habe und werde ich mich auch nicht beschäftigen, 'form follows funktion' ist bei diesem Thema auch nicht Programm, sondern eher 'mir ist gerade langweilig'. Entschuldigung für den vorherigen Beitrag.

    Also mal kurz vorbeigeschaut um über unser nutzloses Getue die Nase zu rümpfen, hmm? 8)

    Vielleicht nicht ganz im Geiste dieses Unter-Forums, aber was weiss ich schon. ;)

    Zitat von Mira_Belle

    Apropos, Du hast zwar --ug-color3 definiert, aber diese "Farbe" kommt gar nicht zur Anwendung!

    Die soll wohl für die Linie zwischen den Tabs und dem Fensterinhalt sein, richtig?

    Richtig; einiges an Einträgen wird nicht benutzt, ist aber noch da als eventuelle Option und weil es halt immer noch ein Test ist, kein fertiger Code.

    Sorry dass es so kompliziert ist und sich dauernd ändert, aber es hängt halt so vieles zusammen und voneinander ab... ?(

    Wenn es denn je fertig wird... ;)

    Der Overflow ist die ultimative Hürde; das nervt wirklich.

    Ich bin momentan dabei die Tabs komplett neu aufzubauen, mit den Rundungen innerhalb vom Tab selber, aber erst mal schauen ob was geht damit.

    Der letzte Code sollte eigentlich fast funktionieren im Overflow, mit wenigen Ausnahmen, aber ist halt wirklich übles Gehacke; das muss besser gehen. :!: ;)

  • Tabform

    Danke, hab ich aber alles schon (zumindest kurz) probiert, leider ohne Erfolg.

    Wenn du einen direkt mit dem Code anwendbaren, und für den Code funktionierenden Vorschlag für eine Lösung hast - nur zu! :thumbup: :)

  • Tabform

    Zitat von Mira_Belle

    Das ist in allen Versionen des CSS so, schon ab der Ersten.

    Daran habe ich mich auch schon versucht, ohne bisher eine Lösung dafür zu haben.

    Ich hab mal beim Chef ;) nachgefragt, der freundlicherweise prompt geantwortet hat.

    Das Problem ist tatsächlich dass die Ecken eigentlich innerhalb der Tabs an sich sein müssten, nicht aussen angehängt.

    Hatte ich auch schon probiert, aber hatte nicht geklappt, muss ich evtl. nochmal ran.

    Ich weiss nicht ob der eingebaute svg code, den ich für diesen schnellen Test benutzt habe, auf Windows funktioniert, aber hier wäre ein ganz grober erster Versuch nur mit Abständen.

    Die neuen Anpassungen sind zum Grossteil ganz unten.

  • Tabform

    Danke an alle für die Mithilfe. :)

    Das Bessere ist ja des Guten Feind, also eine neue Version. ;)

    Ein paar Bugs beseitigt, aber ein Problem kann ich auf Teufel komm raus nicht in den Griff bekommen: wenn die Tabs überlaufen, werden die angesetzten Tab-Ecken abgeschnitten am Anfang und Ende des "Scrollfensters" mit Ausnahme des ersten und letzten Tabs, wenn diese nicht versteckt sind in Overflow.

    Diese beiden sind aber ja auch im Code schon mit Abstand nach aussen versehen.

    Alle anderen Tabs an den extremen Enden werden nicht komplett angezeigt.

    Ich habe jeden möglichen und unmöglichen Selektor und alle umgebenden Elemente probiert, um dieses "Fenster" im Overflow etwas breiter zu bekommen, bzw. die Tabs am Anfang und Ende anders abgeschnitten zu bekommen - nix hat funktioniert... :/

    Wenn dazu jemand eine Idee hätte, das wäre prima. :)

    Hier erstmal der mit Spannung erwartete ;) , zart aktualisierte Code mit den erwähnten Bug Korrekturen, Grafik wie gehabt.

    tab_corner_ug.svg.zip

  • Tabform

    Ahh, danke für die Rückmeldung! :)

    Ich bin mir zu 99% sicher dass das Problem bei [pinned] liegt, das ist glaube ich in Fx119 anders eingebunden.

    .tabbrowser-tab:is([visuallyselected]) ist im Prinzip das gleiche wie .tabbrowser-tab[visuallyselected], nur mit höherer Priorität und eigentlich für andere Zwecke gedacht, die wir hier aber nicht brauchen.

    Was du nochmal schauen könntest, ist ob angeheftete Tab sauber aussehen oder plötzlich auch untere Ecken haben.

  • Tabform

    Zitat von 2002Andreas

    Ergibt hier:

    Vielen Dank für's Testen - dann fällt mir aber nichts mehr dazu ein. :/

    Die oben genannten Probleme habe ich alle gesehen in Fx119 nachdem es hier lief, und der letzte Code hat das auf meiner Seite repariert.

    Wenn jetzt der linke statt der rechte Bogen fehlt, dann bin ich ratlos.

    Oder es ist ein OS Ding? :/

    Wenn ich dich nochmal belästigen dürfte: ;)

  • Tabform

    Ich hätte noch einen anderen Vorschlag, ich glaube es braucht nur eine kleine Änderung; bitte kurz testen wenn's passt. :)

    Nachdem ich ein altes Laptop gehackt habe um Fx119 zum Laufen zu bekommen, scheint sowas halbwegs zu funktionieren.

    Das gehackte System läuft auf einer externen USB 2.0 Platte, daher läuft alles etwas zäh und die Anpassungen sind mangels Geduld vermutlich suboptimal. ;)

    Dateipfade wieder anpassen, Grafik wie zuvor, häng ich auch nochmal an; Randfarben hier jetzt für ein helles Theme eingestellt.

    svg.context-properties.content.enabled auf true setzen für die volle Funktion.

    tab_corner_ug.svg.zip

  • Tabform

    Zitat von Sören Hentzschel

    Ich denke nicht. Der Grund, wieso es diese Option gibt und diese standardmäßig auf false steht, ist der, dass diese Funktionalität kein Teil eines Webstandards ist und daher nicht für Websites zur Verfügung stehen soll. Für den chrome-Prozess und damit auch für Aufrufe via chrome:// oder resource:// steht die Funktionalität immer zur Verfügung, unabhängig von dieser Option.

    Danke! :)

  • Tabform

    Zitat von Mira_Belle

    Wenn ich wenigstens den "Krempel" ab Zeile 146 verstehen würde, ...

    Ich glaube die Lösung ist ziemlich einfach, nur kann ich sie ohne Fx119 nicht finden... ?(

    Vermutlich liegt das Problem eher in Zeile 232 abwärts, erstmal muss die rechte Ecke auftauchen, den Rest kann man dann regeln.

    Bei Interesse müsste sich momentan jemand mit 119 der Sache annehmen, oder halt mit den anfangs erwähnten Codes von Mrotherguy oder Godie arbeiten.

    Aris hat bestimmt auch etwas im Programm, der hat ja alles, nur wird mir dabei immer schwindlig. ;)

    Ich konnte in diesen Codes nichts finden das mit Transparenz und Outlines funktioniert, teils weil diese Codes nicht alle Tabs Varianten einzeln ansprechen, nur deshalb die ganze Übung.

    Meine Entschuldigung für die Verwirrung; ich hätte nicht Codes rauswerfen sollen ohne eine aktuelle Version benutzen zu können. :(

  • Tabform

    Ich fürchte ich bin hier an die Grenzen dessen gestossen, was ich mit 115esr noch beitragen kann.... ;(

    Ich denke Fx 119 lässt sich mit meinem auf 115 basierenden CSS Code nicht mehr komplett manipulieren, vermutlich braucht es nur ein paar mehr spezifische Selektoren, weil ein Teil ja funktioniert, aber das kann ich halt nicht testen... ?(

    Ganz grob geraten könnte ich nur noch sowas zu Testen für 119+ vorschlagen, aber das ist komplett ein Schuss ins Blaue (Grafik gleich, Dateipfade wieder anpassen):

  • Tabform

    Zitat von Sören Hentzschel
    Zitat von Horstmann

    Bei mir in der 115esr funktionieren die .svgs auch ohne svg.context-properties.content.enabled auf true zu setzen; anscheinend benötigt man diese Option aber für 119. :/


    Was Mist ist, weil ich mich vage daran erinnere, dass dadurch möglicherweise Sicherheitsrisiken entstehen können. X/

    Womit uns vielleicht Sören Hentzschel weiterhelfen könnte? ;)

    Wenn ich dazu etwas sagen soll, bitte ein einfaches Test-Szenario bereitstellen, welches ich prüfen kann. Ich möchte mich nicht durch vier Seiten durcharbeiten, bis ich weiß, worum es bei dem Problem geht. Und wenn da noch ganz viele andere Änderungen dran hängen, die mit dem Problem nichts zu tun haben, hilft mir das auch nicht, den Überblick zu behalten. Danke. ;)

    Der Code und die Grafik, finden sich hier.

    Die Frage speziell an dich ist aber eher die, ob svg.context-properties.content.enabled auf true zu setzen in Fx 119 ein Sicherheitsrisiko mit sich bringt.

    Und nur falls ja, ob du einen anderen Weg kennst, .svg Properties (context-fill, context-stroke etc.) von eigenen .svg Grafik mit CSS zu steuern, ohne diese Option zu aktivieren.

    In meinem 115esr sind .svg Properties erlaubt für eigene .svg Grafiken für den Grossteil des UI, ohne svg.context-properties.content.enabled zu benutzen, aber nicht für externe .svg Grafiken, falls ich das richtig interpretiere.

    Die Frage stellt sich deshalb, weil ohne die Benutzung von .svg Properties wie eben context-fill oder context-strok , eigene .svg Grafiken nur eingeschränkt nutzbar wären.

    Zitat von Mira_Belle

    Neu getestet! Ich habe nun nur noch den Fehler mit der fehlenden Grafik bei aktivem Tab,

    wenn dieser nicht der Letzte ist!

    Ich sehe das auch bei den Screenshots von Andreas - ausser in denen von 115esr ... :/

    Jede selektierte Tab muss rechts und links die Grafik haben, egal wo sie positioniert ist, hat es bei mir auch...

    Hat es mit früheren Code Versionen bei dir funktioniert, oder gab es das gleiche Problem?

    Hmm, schau ich mir an...

  • Tabform

    Zitat von 2002Andreas
    Zitat von Mira_Belle

    Wärst Du mal so lieb und könntest Du auch mal testen?

    Na klar ;)

    Vielen Dank für den Test! :)

    Bei mir in der 115esr funktionieren die .svgs auch ohne svg.context-properties.content.enabled auf true zu setzen, das hatte ich schon am Anfang getestet; anscheinend benötigt man diese Option aber für 119. :/

    Was Mist ist, weil ich mich vage daran erinnere, dass dadurch möglicherweise Sicherheitsrisiken entstehen können. X/

    Womit uns vielleicht Sören Hentzschel weiterhelfen könnte? ;)

    Danke für die Erläuterung :) - schaut von meiner Seite so aus, als ob Code und Grafik ok wären, aber eben die erwähnte Option aktiviert sein muss für Fx119.

    Ich bin u.a. dadurch auf die mögliche Problematik aufmerksam geworden.

    Weil ich momentan auf meinem alten Mac nur 115esr benutzen kann, kann ich das Problem leider nicht weiter verfolgen... X/