eckige Tabs bei Quantum abrunden

  • Bis auf pingelig genaue Schreibweise ist sonst nichts nötig. Den genauen Profilorder (vielleicht gibt es ja noch einige alte Überbleibsel?) erfährt man mit Hilfe - Informationen zur Fehlerbehebung - Profilverzeichnis -> Ordner öffnen. Darunter dann der Ordner "chrome" und darin die reine Textdatei "userChrome.css". Nicht mit Word bearbeiten sondern mit Notepad oder ähnlichem.

    FF aktuell, 64Bit, Linux, Manjaro mit KDE

  • In der "userChrome.css" habe folgendes Codes drinnen:


    Vielleicht siehst Du, wo bei den Codes etwas verkehrt ist.
    Ich weiß mir keinen Rat mehr.
    Der chrome Ordner ist bei mir dort wie Du es beschrieben hast.

    Gruß Martin

    Windows 11 Home

    FF 116.0.3 (64-Bit)

  • Oha. :D
    Mal abgesehen davon, dass in einem deiner base64-Icons ein Zeilenumbruch drin war, genügt es, wenn @-moz-document url-prefix(){} einmal drin ist. Alle Anweisungen werden innerhalb davon eingegeben. :)
    Teste mal, ob das so hinhaut:

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

  • Hallo Martin, dieser Code (aus Beitrag 52, leicht modifiziert und mit den "schiefen" Ecken) alleine funktioniert. Wenn noch anderer Code dazu kommt, kann sich was "beißen". Da muß man schauen ob die gleichen Elemente auch angesprochen werden und was dann gültig ist. Vor allem die @namespace-Zeile nur einmal und am Anfang. Kann aber glaube ich auch weg...

    Gruß Harry

    FF aktuell, 64Bit, Linux, Manjaro mit KDE

  • Hallo Harry, hallo EffPeh,

    vielen Dank für Eure Hilfe! :D:klasse:
    Der Code von EffPeh hat mir letzten endes weiter geholfen.
    Wenn es dieses Forum mit Euch Helfern nicht geben würde, wären Menschen wie ich aufgeschmissen!!

    Gruß Martin

    Windows 11 Home

    FF 116.0.3 (64-Bit)

  • Danke an Tommy Tulpe und an alle, die hier solche hübsche CSS hochgeladen und verlinkt haben. Ich hätte gern, dass die Farbe der Leiste (Pfeil von unten - s. Screenshot) und die Farbe des Tabs (Pfeil von oben) gleich sind. Wie erreiche ich das?


    [attachment=0]2017-11-19.png[/attachment]

  • Einen oder beide Farbwerte anpassen:

    CSS
    #TabsToolbar .tabbrowser-tab[selected="true"] {
      background: yellow !important;
    }
    #nav-bar {
      background: yellow !important;
    }


    So in etwa (ungetestet)...

    Gruß Harry

    FF aktuell, 64Bit, Linux, Manjaro mit KDE

  • Sorry, da hatte ich übersehen. Aber den fremden Code analysieren - das dauert...

    Aber wenn man nur die Leistenfarbe an die bestehende Farbe des Tabs anpaßt muß es doch gehen, oder?

    Gruß Harry

    FF aktuell, 64Bit, Linux, Manjaro mit KDE


  • die Leistenfarbe an die bestehende Farbe des Tabs anpaßt


    Du kannst beiden die gleiche Farbe geben, das ist nicht das Problem.
    Das Problem sind eben die abgerundeten Tabs.
    Früher hieß das:
    tab-start
    tab-middle
    tab-end
    und waren 3 verschiedene Grafiken.

    Und die sind es wohl jetzt auch noch:

    CSS
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgb(255,255,255);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important;
  • Der Hintergrund des Tabs auf dem Bild ist doch weiß? Dann braucht es doch nur noch:

    CSS
    #nav-bar {
      background: #fff !important;
    }


    Dann ist die Nav-Leiste auch weiß und beides ist doch gleich?

    Gruß Harry

    FF aktuell, 64Bit, Linux, Manjaro mit KDE

  • Hier mal ein Bild wenn der Tab schwarz werden soll, es ist nur die linke Hälfte wie du sehen kannst.

    Code
    data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgb(50, 50, 52);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>
  • Hilft eine höhere Gewichtung weiter?

    CSS
    #main-window #navigator-toolbox #nav-bar {
      background: #fff !important;
    }


    oder ist in der nav-bar auch ein Hintergrundbild? Dann dieses abschalten mit background-image: none;
    Gruß Harry

    FF aktuell, 64Bit, Linux, Manjaro mit KDE