Beiträge von Mira_Belle

  • Tabform

    Zitat von Horstmann

    Das kenn ich gut; Stunden am CSS basteln an irgendeiner Ecke, ein paar Wochen später die Frage was, wie und warum überhaupt? ;)

    Für Verläufe gibt's zig Möglichkeiten; kuck mal: ;)

    Schaut interessant aus. :)

    Was die Formeln betrifft, vielen Dank für Deine Erklärungen.

    Wenn ich das jetzt nun richtig verstanden haben, stammen die ursprünglich aus dem "Sourcecode" vom Firefox.

    Wofür sie unter bestimmten Selektoren eingesetzt werden, hast Du auch schön erklärt.

    Meine Frage, so ungenau gestellt, sollte aber was anderes klären.

    Ich kann doch das Ergebnis einer Formel berechnen,

    Setze ich diesen Wert direkt ein, was ich testweise auch teilweise gemacht habe, bekomme ich das gleiche Resultat!

    OK, mir gehen dann aber die Variablen verloren!

    Und nun dachte ich, wenn ich zur Berechnung des richtigen Wertes nur die Variable und eben die richtigen Zahlen

    addiere, subtrahiere oder was auch immer, ist doch so "eine" Formel, also die "neue" Berechnung viel, viel einfacher

    und besser nachvollziehbar, als so manche kryptische Originalformel.

    Das Ergebnis muss doch nur stimmen!

    Ich werde das bei Gelegenheit mal austesten, aber vorher ein Backup des nun tollen CSS, machen.

    Übrigens, Danke dafür.


    Ach, und den Fix-Code habe ich mal an die richtige Stelle verschoben,

    denn der gehörte ja weiter hoch zu

    /* Colors, outlines: selected / multiselected / hover */.
    und nicht unter

    /*** tabs corners ***/

    Zitat von Horstmann

    ...

    Hast du multiselected Tabs mal probiert, gibt's da evtl. auch Ärger?

    Die sind zumindest in meinem Code nämlich aufwendig getrennt farblich.

    Da treten keine Ungereimtheiten auf, also alles Bestens!

  • Tabform

    Zitat von Horstmann
    ...

    Kapier ich nicht, da fehlt die rechte Ecke in der selektierten Tab, in der letzten Tab ist sie da - bei mir aber nicht. :/

    Hast du das mal in einem Testprofil probiert - ohne das ganze andere CSS und Scripts?

    In dem Screenshot ist noch eine Menge anderes CSS etc. beteiligt.

    ...

    Gerade eben!

    Leider ...

    ... auch da, und wirklich ohne andere Anpassungen.

    Zitat von 2002Andreas
    Zitat von Mira_Belle

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

    Hallo Mira, nein, habe ich nicht.

    Aber teste doch mal mit einem Skript statt per CSS.

    Funktioniert im Testprofil bestens!

    Danke.

    Werde ich wahrscheinlich ins Hauptprofil übernehmen UND

    mal schauen, ob ich da noch etwas CSS mit hineinpacken werde.

  • Tabform

    Zitat von Horstmann
    ...

    Für eine dicke Kante würde ich sowas probieren, ohne das ganze Padding und Margin unten und Verschieben (Ausnahme:

    #navigator-toolbox padding erhöht um Borderbreite), das geht auch bei mir im groben Schnelltest (aber: am Mac !):

    Ah, daher weht der Wind!

    Ja, stimmt schon, schaut schöner aus und ist wohl auch pflegeleichter.

    Aber weißt Du, ich wollte mir die Spielerei aufheben, mit dem Farbverlauf und so.

    So was vergesse ich doch sonst, wenn ich es "lösche" und nicht hin und wieder ausprobiere!!

    "Für was war das nochmal so? Muss ich testen. Achja, jetzt weiß ich es wieder!" Selbstgespräch Ende.

  • Tabform

    :/

    Noch besser bekomme ich es jetzt wirklich nicht mehr hin!

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