Beiträge von Horstmann

  • Tabform

    Zitat von Mira_Belle

    Gib mir doch bitte mal Deine Vektorgrafiken.

    Tab-corner-left2a.svg & Tab-corner-top2.svg

    Die Grafiken sind ganz unten hier anghängt, hast du die benutzt?

    Gehören dann in den Ordner Icons im Profilordner, bzw den Ordener in dem die zugehörige CSS Datei ist.

    Was den Code angeht, ich denke nicht dass du nur einen Teil benutzen kannst, falls du das probiert hast.

    Zumindest für diesen Test ist das meiste miteinander verbunden, also alles oder nix. ;)

    Abgesehen von deinem Code für Tabs unten, wobei da auch nichts drin sein darf was die Tab Höhe etc. beeinflusst, sonst passt es nicht.

    In meinem Beispiel wird die Höhe der Tableiste auch etwas verringert; das kann ich rauseditieren und anderen Einträge universeller machen, aber erstmal ist es so im Testcode.

    Ich hätte hier noch einen leicht variierten Code, mit neuen .svgs; immer noch in der Testphase und etwas wirr; die Icons hänge ich als zip ganz unten an.

    icons.zip

  • Tabform

    Zitat von Mira_Belle

    Das ist das Hintergrundbild des Themes!

    Ist echt nicht schön, aber ich nutze ja den Firefox nie im Vollformat.

    Super getestet, das Theme. ;)

    Kannst das hier probieren (eine oder beide der Regeln), kommt aber bestimmt einigen anderen Themes in die Quere, und ich weisst nicht wie man es auf nur das eine Theme eingrenzen kann.

    CSS
    #navigator-toolbox {
    background-image: url(icons/orange-blue-images_fix.jpg) !important;
    /*background-position: right top -380px, var(--lwt-background-alignment) !important;*/
}


    Für den anderen CSS Code habe ich noch das hier eingefügt, aber das ist generell ja nur ein grober Test:

    CSS
    /* Annoying fix to prevent hovering of last tab to trigger tab overflow, better solution wanted */
/* https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/curved_tabs.css  */

.tabbrowser-tab:last-of-type {
    margin-inline-end: 11px !important;
}

  • Tabform

    Nicht doch, ich hacke hier nur rum. :| Aber Danke. ;)

    Es spielt hier alles zusammen - wie meistens - und wird wie erwähnt schnell komplex wenn man sehr dünne Trennlinien, nach aussen zeigende runde Ecken, Transparenz und Überlappungen zusammenbringt.

    Und dann wird alles noch verschieden gerendert...

    Natürlich will man auch noch die Buttons mit anpassen, alles soll sauber passen, etc..

    Viel Spass damit, ich hab mir schon den Wolf gebastelt um wenigstens so weit zu kommen. ;)

    Aber wieder Einiges dazugelernt.

    Übrigens - bekommst du auch einen seltsamen schrägen Strich mit deinem Theme, oben links, und nur in Vollformat oder maximierter Ansicht?

    Ich hab's auch ohne CSS probiert, gleiches Spiel. :/

  • Tabform

    Zitat von Mira_Belle

    Zwischenstopp :!:

    Meine Tabs sehen z.Z. so aus.

    Ich finde ja der Charme liegt in dem Zusammenspiel von seitlich komplett abgerundeten Tabs mit den teils unten ausgestellten Tabs.

    Was auch die Herausforderung ist...

    Kannst ja mal in meinen CSS Code schauen (nicht dass er dolle wäre), mit background size und position , sowie height/width und Positionierung der gesamten before/after Elemente kann man da rumschieben und anpassen.

    Mit den Close buttons und dem Icon hat dir Andreas ja schon geholfen; ist in meinem CSS aber etwas anders.

    Es kommt daher dass deine Rundungen zusätzlich an den Seiten zu den Tabs angestückkelt werden.

    Hier wäre mein momentaner Code, ungefähr wie ich es nach meinem Geschmack machen würde; dazu braucht es wie üblich noch die .svgs im Ordner  /icons.

    Sogar eine auskommentierte Soft Version ist dabei ;) , aber nur grob angefangen.

    icons.zip

  • Tabform

    Nochmal etwas verfeinert, Rundungen und Trennlinien noch Baustelle:

    Das .svg dazu ist das gleiche wie hier.

  • Tabform

    Zitat von Mira_Belle

    OK, die Grafik ist hier mein Problem.

    Hmm, die Sucht war wieder stärker... X/

    Die Rundungen passen noch nicht ganz, und die Kanten bzw. Trennlinien links/rechts sind wirklich eine Pest, aber kannst ja mal probieren.

  • Tabform

    Zitat von Mira_Belle

    Ich schrieb ja schon, dass ich das irgendwie, also die Rundungen, mit Grafiken machen möchte.

    Die Frage, mach ich das dann mit "Bildchen" (*.png) oder besser doch mit Vektorgrafiken.

    ......

    Was ich mich nun frage, ist es möglich auch innerhalb des SVG-Codes Farbverläufe zu definieren?

    Wobei min. eine Farbe von außen per CSS festgelegt werden sollte.

    Also doch wieder rund untenrum? ;)

    Bzgl. Farbveräufen in .svgs, weiss ich nicht, mit .pngs oder jpgs kannst du's natürlich machen, aber dann kannst du mit CSS nicht den Farbinhalt einzelner Bestandteile steuern.

    Ich wollte nochmal auf Godie verweisen; hier gibt's eine CSS für Tab Shapes und Hinweise für about:config Änderungen, und hier eine Menge .svg Icons für alle möglichen Rundungen.

    Geht erstmal ganz ok mit deinem Theme, du müsstest aber noch rausfinden wie Umrandungen und Hintergründe für hover/unselektierte und multiselektierte Tabs klappen, evtl. braucht's dafür noch mehr von seinem Style als nur die Tab Shapes CSS Datei - ich hab nur die kurz getestet.

    Das Ding ist, die runden Ecken sind ja nur der Anfang, dann muss das Ganze auch noch zusammenarbeiten, und sich sauber ineinander fügen und überlappen.

  • Tabform

    Zitat von Mira_Belle

    Horstmann & 2002Andreas

    Ihr seid doof.

    Macht Euch nur lustig über mich, aber das macht mir gar nichts aus. :P

    Andreas hat angefangen! ;)

    Was die Tabs angeht, ich würde dabei gerne helfen wenn ich kann, aber du müsstest dich halt für einen Look entscheiden.

    Wie erwähnt, die nach aussen gehenden Rundungen unten sind die grösste Herrausvorderung, aber machbar; danach kommt Rundungen mit zusätzlicher Tab Hintergrund Transparenz, das ist ziemlich fies.

    Wenn die unteren Rundungen wegfallen, dann sollte es eigentlich nicht so schwer sein den Rest nach Belieben anzupassen - du musst nur klar sagen was du möchtest, es gibt so viele mögliche Varianten.

    Am besten wäre ein Mockup oder ein Screenshot mit Kommentaren.

  • Tabform

    Also jetzt plötzlich keine Rundungen mehr unten? :/

    Was soll's denn nun werden?

  • Tabform

    Unter anderem deswegen hab ich ja auch meinen eigenen Code gebastelt, s. oben. ;)

    Übrigens mit ziemlich aufwendigen Trennlinien, für die ich auch noch Varianten in petto hätte, die man aber halt anpassen muss je nach gewünschter Optik, zusammen mit dem Rest vom Code.


    Die Trennlinien sind die grösste Schwierigkeit, gefolgt von transparenten Tab Hintergründen, ohne ist relativ einfach.


    .

  • Tabform

    Zitat von .DeJaVu

    Wie oben bereits geschrieben, wurden die Ecken mit Grafiken erstellt, rechts, links, dazwischen, also mindestens drei.

    Danke für die Links. :)

    Als Grafik braucht man generell eigentlich nur eine; das einzige Problem sind abgerundete Umrandungen, die sind recht kompliziert zu bauen, und rendern evtl. nicht sauber wenn man es nicht komplett mit Grafiken macht.

  • Tabform

    Zitat von Mira_Belle

    Besser bekomme ich es nicht hin.

    ....

    Irgendwie gefällt es mir nicht.

    Es ist wirklich schwer zu sagen wie man es machen sollte, ohne zu wissen was für eine Optik du am Ende haben möchtest.

    Aber hier ist etwas das du mal probieren könntest; den oberen Teil (ERSETZEN) müsstest du dir anpassen, der Rest ist dann halt Geschmackssache.

    Sieht nicht dolle aus im Moment, ist nur ein Test, aber man kann es unendlich anpassen, man muss halt wie gesagt wissen wie das Ergebnis aussehen soll.

    Das benötigte .svg für die unteren Ecken häng ich als Code unten an, das geht hier nicht mit dem Format.

    Tab-corner-left.svg :

    Code
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
  <path d="M0 17 L0 16 A16 16 0 0 0 16 0 L 18 0 L 18 17 Z" fill="context-fill"/>
  <path d="M0 16 A16 16 0 0 0 16 0" fill="transparent" stroke="context-stroke" stroke-width="1"/>

</svg>

    Oder du kannst es hier runterladen (nettes Tool auch), und dann halt zu Tab-corner-left.svg umbenennen.

  • Tabform

    Ähem - dein CSS sieht bei mir in 115esr einfach nur verhunzt aus.

    Nicht mal die unteren Bögen sind noch da, was ja irgendwie der Sinn der Übung ist.

    Ausgehend vom originalen CSS Code, was willst du denn ändern und wie?

    Am besten mit Screenshots.

  • Tabform

    Ein Ansatz wäre das hier.

    Es gibt verschiedene Styles die ähnliches CSS benutzen, ist aber immer etwas kompliziert wegen der unteren, nach aussen gerichteten Rundung der Tabs.

    Auch gut ist generell der CSS Code von Godie, der hat sowas in Extras, aber das müsstest du dir raussuchen und zusammenbasteln.

  • Keine Hervorhebung der Tabs, wieso?

    Zitat von Sören Hentzschel
    Zitat von Horstmann

    Nur aus Neugier: ist es anzuraten .tabbrowser-tab:not([visuallyselected]) statt nur .tabbrowser-tab:not([selected]) zu benutzen? :/

    Dass es beide Attribute gibt, hängt mit der Multiprozessarchitektur zusammen. Damit beim Tabwechsel nicht der alte Inhalt für den Bruchteil einer Sekunde angezeigt wird, nachdem die Tableiste aktualisiert wurde, wird zunächst der Tab ausgewählt, ohne den visuellen Status zu aktualisieren (selected), damit andere Teile des Systems quasi Bescheid wissen, dass der Tab ausgewählt ist, und sobald es intern die Bestätigung gibt, dass der Inhalt „gezeichnet“ wurde, wird der Tab auch visuell selektiert (visuallyselected).

    Wenn es darum geht, was man verwenden sollte (falls man überhaupt einen Unterschied wahrnimmt), würde ich mich generell immer an dem orientieren, was Firefox selbst verwendet.

    Dankeschön! :) :thumbup: