Tabform

    Zitat von Mira_Belle
    Aber, müsste es nicht .tabbrowser-tab:is([visuallyselected]) .tab-background::after heißen?

    Funktioniert auch.

    Muss nicht unbedingt, ist das Gleiche. Um bei der originalen Version zu bleiben:

    CSS
    .tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background::after {
  /* CSS */
}


    Das ist identisch zu:

    CSS
    .tabbrowser-tab {
  &[visuallyselected], &[pinned] {
    .tab-background::after {
      /* CSS */
    }
  }
}


    oder:

    CSS
    .tabbrowser-tab[visuallyselected] .tab-background::after,
.tabbrowser-tab[pinned] .tab-background::after {
  /* CSS */
}

    Wenn du jetzt den Selektor mit [pinned] rausnimmst, bleibt:

    CSS
    .tabbrowser-tab[visuallyselected] .tab-background::after {
  /* CSS */
}


    Kurz gesagt: Wenn innerhalb von :is() nur ein einziger Selektor steht, ist das nicht notwendig. Die Pseudoklasse :is() dient nur der Vereinfachung, wenn man mehr als einen Selektor ansprechen möchte.

    Ein Extrem-Beispiel aus den MDN Web Docs:


    Ist das Gleiche wie:

    CSS
    :is(ol, ul, menu, dir) :is(ol, ul, menu, dir) :is(ul, menu, dir) {
  list-style-type: square;
}

    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

    Horstmann

    Ach, das ist der "Overflow" :!: Ich Dummerchen, habe mich nicht getraut nachzufragen.

    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.

    Mit <3lichem Gruß

    Mira

    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.

    Einmal editiert, zuletzt von Horstmann (9. November 2023 um 18:05)

    Mir ist aufgefallen. dass du nicht:

    #tabbrowser-tabs[haspinnedtabs]

    #tabbrowser-tabs[positionpinnedtabs]

    #tabbrowser-arrowscrollbox[overflowing]

    nutzt.

    Ein Beisp. wäre:

    CSS
    #tabbrowser-tabs[haspinnedtabs] > #tabbrowser-arrowscrollbox[overflowing] > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) { 
    margin-inline-start: .... !important;
}

    Ich mach mir die Welt, wie sie mir gefällt. [Pippi Langstrumpf/Astrid Lindgren]

    Einmal editiert, zuletzt von Mitleser (9. November 2023 um 20:39)

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

    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.

    Ich mach mir die Welt, wie sie mir gefällt. [Pippi Langstrumpf/Astrid Lindgren]

    Zitat von Horstmann

    ...

    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.

    ...

    Scheint zu funktionieren!

    Habe auch eine Deiner älteren Vektorgrafik benutzt,

    scheint auch damit zu klappen.

    Werde aber erst zum Samstag oder gar Sonntag dazu kommen, Deinen neuen Code wieder zu zerlegen.

    Auch werde ich mich erst dann wieder da reinknien, wenn der Code dann von Dir als Final bezeichnet wird.

    Die vielen Optimierungen und Änderungen machen mir zu schaffen und ich habe den Uberblick verloren.

    DAS liegt aber nicht an Dir!! Also nicht falsch verstehen.

    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?

    Was mir aber gerade aufgefallen ist,

    die Tabbreite ändert sich, je nachdem welcher Tab gerade aktiv ist.

    Das fand ich vorher irgendwie schöner und besser.

    Da veränderten sich nur die "Bögen".

    Mit <3lichem Gruß

    Mira

    Einmal editiert, zuletzt von Mira_Belle (9. November 2023 um 22:55)

    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. :!: ;)

    Einmal editiert, zuletzt von Horstmann (10. November 2023 um 09:20)

    Hi, ein kleines Résumé!

    Ich hatte mir gestern Abend kurz die Zeit genommen und ALLE Variationen erneut durchprobiert!

    Mh, :/ , wie sage ich es jetzt?

    Also, ich bin der Meinung, der von mir modifizierte Code, basierend auf den aus Beitrag #56,

    glaube ich, am besten funktioniert.

    (Mit meinen Modifikationen #93) + (Modifikation #99)

    Zwar ist da der "Bug" mit dem "Überlauf" vorhanden, aber es braucht min. zwei Dutzend Tabs,

    bis der Overflow überhaupt einsetzt.

    Dann sind die ganzen Tabs eh schon auf Erbsengröße geschrumpft. :D

    Ich habe den Beitrag und die Erklärung vom Chef gelesen, verstanden und kann es nun,

    anhand meiner Beobachtungen bestätigen.

    Die angehängten Vektorgrafiken werden von der Overflow-Funktion nicht berücksichtigt,

    daher sieht es so aus, als ob der Tab abgeschnitten wird.

    Was die anderen Versionen angeht, so haben diese alle irgendwelche "Ungereimtheiten", die ich nicht so schön finde.

    Mal verändert sich die Tabbreite, wenn man einen Tab aktiviert, mal ist es was anderes.

    (Da war noch etwas, komme nur gerade nicht drauf, sorry)

    Das mit dem "Überlauf" scheint wohl eine ganz besonders harte Nuss zu sein!

    Mit <3lichem Gruß

    Mira

    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... :/

    Zitat von Horstmann

    ...

    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... :/

    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?

    Mit <3lichem Gruß

    Mira

    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.