Beiträge von Mira_Belle

  • Tabform

    Okey, @Horstmann Deine Kritik hat mir keine Ruhe gelassen!

    Was sagst Du dazu?

  • Tabform

    Zitat von Horstmann
    Zitat von Mira_Belle

    Code für Tabs unten

    Da habe ich lange für gebraucht, dass das Ergebnis gut ausschaut.

    Bei allen anderen Ideen, die ich hatte, war nie das Ergebnis zufriedenstellend.

    Andere Baustelle, aber der Code ist ... Müll. Sorry. ;)

    Hast Du eine bessere Lösung?

    Bin immer offen für Verbesserungen.


    CSS
        .tab-background {
        margin-block: calc(2 * var(--tab-block-margin)) 0 !important;
    }
    CSS
        .tabbrowser-tab .tab-background::before {
        left: calc(0px - var(--ug-corner-size) / 2);
        background-image: var(--ug-corner-image) !important;
    }
    CSS
        /*  right  */
    .tabbrowser-tab:is([visuallyselected], :last-of-type) .tab-background::after {
        right: calc(0px - var(--ug-corner-size) / 2);
        background-image: var(--ug-corner-image) !important;
        transform: scaleX(-1) !important;
    }
    CSS
        /* Base values ; tab padding, margin */
    #tabbrowser-tabs {
        --ug-tab_Pad: calc(8px + var(--ug-corner-size) / 2);                    /* 26px */
        --ug-tab_Marge: calc(0px - var(--ug-corner-size) - 12px);          /* -48px */
        /*--tab-min-width:  120px !important;*/
    }
    CSS
        /* Buttons smaller by 2px */
    #TabsToolbar {
        --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 2px) !important;
    }
    CSS
        /* Button rund, smaller */
    #tabbrowser-arrowscrollbox-periphery #tabs-newtab-button .toolbarbutton-icon {
        border-radius: 50% !important;
        --toolbarbutton-inner-padding: calc((var(--tab-min-height) - 16px) / 2 - 3px) !important;
        padding-block: 6px 8px !important;
    }

    Irgendwie komme ich mir blöd vor, Dir all diese Codeschnipsel raus suchen zu müssen.

    Die sind in dem CSS aus Beitrag #130.

    Und ich hätte gerne gewusst, wo diese Formeln herkommen.

    Wieso werden diese Werte berechnet, bzw, so?

    Ginge doch auch anders!

    Die Tableiste nach untenverschieben.

    Den Code für das verschieben der Tabbar habe ich ursprünglich von 2002Andreas,

    deshalb rufen ich ihn mal zur Hilfe.

    2002Andreas, kannst Du bitte mal über den Codeschnipsel schauen,

    der dafür sorgt, dass die Tableiste nach unten verschoben wird.

    Hast Du dafür eventuell eine neuere, schönere Version?

    Und das,

    soll dabei rauskommen.

    Zu beachten ist, dass normalerweise die Tableiste NICHT über die ganze breite geht.

    somit normalerweise auch der dicke, oragene Balken nicht.

    Deshalb left & right = 0px. Mir ist leider nichts besseres eingefallen, bzw. habe nichts besseres gefunden.

    Des weiteren habe ich die Tabs ein wenig nach oben verschoben (6px),

    damit eben dieser "Balken" darunter passt und nicht die schönen Vektorgrafiken verdeckt.

    Und auch dieser "Balken", bzw. die Tabs mussten eben mit margin-bottom & padding-bottom noch richtig gerückt werden.

    Zitat von Horstmann
    Zitat von Mira_Belle

    Bugs.

    Wieder die fehlenden Vektorgrafiken.

    Korrektur:

    Da kann entweder die Grafik komplett fehlen, und dann macht dieser geänderte CSS Code gar keinen Unterschied, weil er nur die Kanten der Grafik betrifft.

    Habe nun, nur noch einmal aus interresse die Zeilen raus genommen.

    Ergebnis:

    Und gleich noch mal ein Test vom Original ohne Veränderungen.

    Und nun mit dem Code zum Verschieben.

    Nun mit meinem Fix.

  • Tabform

    Zitat von Horstmann

    Prima! :)

    Was für Bugs hast du denn selber noch gefunden/geändert, gibt ja bestimmt noch einige?

    Die Border unten war in meinem Setup aber so gewollt, macht die seitlichen runden Kanten sauberer, aber das hängt von den anderen Farben etc. ab.

    Sonst hab ich auf den ersten Blick nichts gesehen, ausser dass dein Code für Tabs unten bei mir gar nicht funktioniert, aber das ist nur weil ich auf einem Mac bin. ;)

    Trotzdem sieht der Code dafür nicht dolle aus, würd ich bei Gelegenheit nochmal rangehen.

    Bugs.

    Wieder die fehlenden Vektorgrafiken.

    Korrektur:

    Code für Tabs unten

    Da habe ich lange für gebraucht, dass das Ergebnis gut ausschaut.

    Bei allen anderen Ideen, die ich hatte, war nie das Ergebnis zufriedenstellend.

    Kommen wir zu guterletzt noch zu einer Sache, die mir Kopfschmerzen bereitet!

    Es gib an mehreren Stellen im Code eine Formel.

    z.B.

    calc( var(--tab-min-height) + 10px );

    calc(0px - var(--ug-corner-size) / 2);

    calc(-10px + var(--ug-corner-size) / 2);

    calc(38px - var(--ug-corner-size) - 12px);

    und auch

    calc((var(--tab-min-height) - 16px) / 2 - 2px);

    Wo kommen die her und wie leiten sie sich ab?

  • Tabform

    @Horstmann 

    Die letzte, neue Version gefiel mir sehr gut, vielen Dank.
    Ich habe noch ein paar Kleinigkeiten verändert, klitzekleine Bugs beseitigt und Farben angepasst.

    Hier das komplette CSS:

  • Tabform

    @Horstmann

    Hey, jetzt mach aber mal 'nen Punkt.

    Du hast großartiges geleistet und ich bezweifle, dass dieses Problem so ganz ohne Javascript zu lösen ist.

    Da nun an dieser Stelle die Entwicklung eingestellt wird, kann ich mich ja beruhigt an eine verbesserte Version

    der meinigen machen. Da sind ja noch ein Kuddelmuddel, das hast Du in Deine späteren Versionen

    viel, viel schöner umgesetzt und daran werde ich mich orientieren.

    Vielen lieben Dank noch mal.

  • Tabform

    Und was genau hast Du geändert?

    Denn rein von der Optik sehe ich keinen Unterschied

    und auch das Überlaufproblem besteht noch.

    Wobei, wenn ich genau hinschaue, es ist nicht mehr gar so krass.

  • Tabform

    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?

  • Tabform

    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!

  • Tabform

    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".

  • Tabform

    @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.

  • Tabform

    Zitat von Horstmann

    ...

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

    Ich bin mal so frei!

    Funktioniert,

    wenn man den kleinen Fehler in Zeile 93 korrigiert.

  • Tabform

    Ich habe in "meinem" Code einfach mal die Selektoren

    Zeile 185

    CSS
    .tabbrowser-tab:not([pinned]):last-of-type .tab-background::after,
.tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background::after

    gegen

    CSS
    .tabbrowser-tab[visuallyselected] .tab-background::after,
.tabbrowser-tab:last-of-type .tab-background::after

    getauscht.

    Funktioniert :!:

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

    Funktioniert auch.

  • Tabform

    Ich möchte mich mal ganz, ganz <3lich bei @Horstmann bedanken.

    Nicht nur, dass er recht oft am Code herumgefeilt hat, ohne ihn hätte ich das nie geschafft!

    :*

    Auch einen großen Dank an 2002Andreas , hat er sich doch die Zeit genommen und diverse Tests durchgeführt.

    <3lichen Dank.

    Ja und ohne Sören Hentzschel wäre das alles sowieso nicht möglich, denn dann gäbe es dieses Forum gar nicht.

    Auch Dir ein ganz fetter Dank.

  • Tabform

    Nun bin ich auch in "meiner" Version diesen Bug los!

    Ihr wisst schon, Multiselekt und dann einen anderen Tab als den zuletzt Aktiven anklicken.

    Was bei mir noch nicht so ganz hinhaut, bei Multiselekt die Rahmen des Tabs direkt nach dem Aktiven!

    Der Selektor dafür ist auch so ein "Monster" und ich bin noch nicht dahintergekommen,

    wie der zu zerlegen ist.


    Es ist vollbracht!

    Was für eine Geburt :!:

    Die Selektoren musste ich mir erarbeiten.

    .tabbrowser-tab:is([visuallyselected]):not([pinned]) + .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background

    Der erste Tab direkt nach dem aktiven Tab bei Multi :!:

    Dann musste ich ja auch noch die unteren "Bögen" der nachfolgenden Tabs anpassen,

    hier der Selektor dafür:

    .tabbrowser-tab:is([selected], [multiselected]) .tab-background

    Himmel war das schwer.

    /*************************************************************************/

    Korrektur!

    Wenn auch der letzt Tab im Mult ausgewäht wird (wurde), war da ein kleiner Strich (Rahmen)

    am Ende vor der Grafik zu sehen. Da gehört aber nichts hin!

    CSS
        .tabbrowser-tab:is( [multiselected]):last-of-type .tab-background {
        border-right: none !important;
    }

    Habe ich nach getragen :!:

    /*************************************************************************/

    Hier nun der komplette Code basierend auf eine ältere Version von Horstmanns Vorlagen.

    (Beitrag #56)

    Sorry, ist noch am Ende nicht bereinigt, bzw, die Selektoren noch nicht richtig plaziert.

    Und die Vektorgrafik ist im Beitrag #56 zu finden.

  • Tabform

    Zitat von Horstmann
    ...

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

    Quatsch.

    Ein bisschen was muss doch zum Hirnschmalz anstrengen auch für andere übrigbleiben.

    Und ich glaube, ich habe eine Lösung.

    Muss noch ein paar Tests machen.

    Hat geklappt!

    Der Code muss nur wie folgt abgeändert werden:

    Aus

    CSS
    .tabbrowser-tab:not([pinned]):is([visuallyselected], :last-of-type) .tab-background::after {    
        right: calc(0px - var(--ug-corner-size) / 2);
    /*    background-image: url(icons/tab_corner_ug.svg) !important; */
        background-image: url("../tabs_5/tab_corner_ug.svg") !important;
        transform: scaleX(-1) !important;
    }

    wird

    CSS
    .tabbrowser-tab:not([pinned]):last-of-type .tab-background::after,
.tabbrowser-tab:is([visuallyselected], [pinned]) .tab-background::after {    
        right: calc(0px - var(--ug-corner-size) / 2);
    /*    background-image: url(icons/tab_corner_ug.svg) !important; */
        background-image: url("../tabs_5/tab_corner_ug.svg") !important;
        transform: scaleX(-1) !important;
    }

    Verwendet habe ich den Code aus Beitrag #69