eckige Tabs bei Quantum abrunden

  • An w3schools gefällt mir die Sprache nicht, ich lese ja auch keine chinesischen Texte.

    Aber wir kommen so langsam ganz vom Thema ab, funktionieren denn nun die runden Ecken endlich? Das ist doch an sich eine der leichteren Übungen...

    Gruß Harry, n8

    FF aktuell, 64Bit, Linux, Manjaro mit KDE

  • Ich habe doch einen funktionierenden Code gepostet... :D

    Zitat

    An w3schools gefällt mir die Sprache nicht, ich lese ja auch keine chinesischen Texte.


    Muss ich das verstehen?... :)

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)

  • Nö, nicht das ich wüsste. Höchstens google translated. Das ist dann für mich wie Hamburger Platt. Whaaat?... :P

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)

  • Danke für die Hilfe. Ausgerechnet beim aktiven Tab, das hervorsticht, sind die Rundungsanweisungen unwirksam. Ärgerlich. Ich habe mich dann letztendlich für diese Light-Version entschieden, wo dann nur beim hover-Ereignis die Ecken abgerundet werden.

    CSS
    /* TAB bei Mauskontakt:
     * Hintergrundfarbe + Schriftfarbe
     */
    #TabsToolbar .tabbrowser-tab:hover {
      border: 1px solid !important;
      border-bottom: none !important;
      border-radius: 10px 10px 0 0 !important;
       margin: 0px 3px 0px 0px !important;
      padding: 0px 0 !important;
    }

    Wenn jemand eine Idee hat, wie man die Ecken beim hover-Ereignis abrunden kann - her damit :-).


  • Ausgerechnet beim aktiven Tab


    Teste bitte:

    Werte wenn dann anpassen bitte.

  • Abgerundet und mit angepasster .tab-line.
    Die Angaben in var() bitte durch eigene Farbangaben ersetzen. :)

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)

  • 2002Andreas: Danke! Habe .tab-background[selected="true"] um border: 0px solid !important; ergänzt und :hover -Ereignis hinzugefügt. Jetzt bleibt noch den Streifen oben im Tab loszuwerden und das Wackeln beim Plus-Zeichen beim .hover-Ereignis. Hat jemand Ideen, wie ich das bewerkstelligen kann?

  • Teste bitte mal:

  • Also mal ehrlich: Testest du die Codes auch, die man hier postet? Ich habe dir weiter oben eine Komplettlösung gepostet, bei der du im Prinzip nur die Farben anpassen musst.

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)


  • Also mal ehrlich: Testest du die Codes auch, die man hier postet?

    Das habe ich gleich gemacht. Das sieht bei mir so aus - s. Screenshot. Und da ich zu diesem Zeitpunkt bereits das Ergebnis von 2002Andreas hatte, habe ich angefangen diese andere Lösung zu tunen. Ich habe jetzt probeweise in deinem Code versucht, den Tabrand sichtbar zu machen ohne Erfolg - s. Code unten. EffPeh - danke für dein Post. Ich habe keine Möglichkeit, beide Lösungen bei mir zum Laufen zu bringen. Ich möchte ja mit dem Firefox auch was "richtiges" machen und solche Tuningsanpassungen haben ein Suchtpotenzial :-).

  • Wie ich bereits in meinem Code-Post geschrieben habe, musst du natürlich alle Variablen in dem Code durch deine Farbangaben austauschen. :)
    Also alles was beispielsweise so ausschaut...

    CSS
    background: var(--uc-tab-content-gradient) !important;


    ...musst du durch deine Farbwünsche ersetzen...

    CSS
    background: red !important;


    Variablen beginnen immer mit var, gefolgt von einer öffnenden Klammer, einen Variablennamen und einer abschliessenden Klammer.

    Windows 10 | FF 62.0 (64-Bit) / FF 61.0 (64-Bit) / FF 63.0 (64-Bit)

  • Dieser Code zusammengebastelt aus diesem Thread, ergibt bei mir dieses Ergebnis..
    [attachment=0]Tabsgestaltung.PNG[/attachment]


    Keine Rundung und die Tableiste ist monströs breit. Ohne Code ist die Tableiste oben und unten gefühlt jeweils 1 cm schmaler.. Was kann man ändern?