Tabs angepasst, jetzt im Nightly zusätzlicher Rahmen zu sehen

Boersenfeger

Das passt... Danke!

Weitersuchen....

Sören Hentzschel

Zitat von .DeJaVu

0.2 Pixel? Echt jetzt? Das wird aufgerundet und stellt 1px dar (eben ausprobiert)

Das kann ich mir beim besten Willen nicht vorstellen. Auch Werte kleiner als 1 sind möglich. Zu einem Rundungsverhalten bei der Darstellung mag es grundsätzlich kommen, wenn Dezimalstellen im Spiel sind, aber dass 0.2px wirklich identisch zu 1px sein soll, ist doch sehr unwahrscheinlich, weil das so dicht jetzt auch nicht beieinander liegt, dass das nicht unterschiedlich darstellbar wäre.

Zitat von .DeJaVu

Was ist mit dem hier?
-moz-box-pack: center !important;
-moz?
[…
dito: -moz-box-orient

Es kommt auch darauf an, ob man sich im XUL- oder HTML-Namensraum bewegt. Für XUL kann man nicht einfach 1:1 etwas aus dem neueren Flexbox-Standard für HTML verwenden, weil der sich anders verhält. Nicht grundlos hat box-pack noch immer 211 Entsprechungen im Firefox-Quellcode und box-orient sogar noch 297 Entsprechungen. Da muss dann auch zwingend -moz- dabei stehen.

Boersenfeger

.DeJaVu

Zitat von .DeJaVu

Was ist mit dem hier?
-moz-box-pack: center !important;
dito: -moz-box-orient

Ohne moz funktioniert das nicht...

moz-box-orient finde ich in meinem Code nicht

Sören Hentzschel

box-pack und box-orient gibt es auch nicht ohne -moz- davor. Wenn dann müsste man eine ganz anders aussehende Eigenschaft dafür verwenden. Aber wie gesagt, bedient man sich aus dem neueren Flexbox-Standard, kann es zu Verhaltensunterschieden kommen und dann braucht man ggfs. weitere Anpassungen. Zielführend ist es nicht, zwei verschiedene Flex-Modelle zu vermischen. Es ist schon in Ordnung, XUL-spezifische Eigenschaften für XUL zu verwenden. Das ist nicht wie andere Fälle, wo es eine Eigenschaft ohne -moz- gibt, die identisch zur Eigenschaft mit -moz- ist.

Boersenfeger

Zitat von Boersenfeger

Weitersuchen....

Schluss für heute, die Arbeit ruft!

Leider ohne Erfolg.. immerhin ist der Code jetzt schlanker und wohl auch fehlerarmer..

Der sieht dann am Ende des Tages so aus:

CSS

    /* Tabs rund und farbig */

    /* Angaben für die TAB-Leiste*/

    /* TAB bei bei angewähltem TAB (aktiv):
    * Hintergrundfarbe, Rahmen,
    * Schriftfarbe. */
 
   .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background {
    background: red !important;
    border-radius: 16px 16px !important;
    margin-top: 0 !important;  
    border: none !important;
    color: black ! important; 
    }
    
    .tabbrowser-tab[visuallyselected="true"] .tab-label {
    font-weight:  bold !important;
    }

    #TabsToolbar .tabbrowser-tab:not([selected="true"]) {
    border-radius: 16px 16px !important;
    margin-top: 0 !important;
    padding: 0 !important;
    color: black ! important; 
    }

    /* Tab-Icon etwas größer,
    * links weniger, unten etwas mehr Abstand zum TAB-Rand.*/
 
    #TabsToolbar .tab-icon-image {
    height: 20px !important;
    width:  20px !important;
    margin-left: -5px !important;    
    margin-bottom: 2px !important;
    }
        
    /* Tab-Schließen-Button:
    * Rechts weniger Abstand zum TAB-Rand, etwas größer,
    * Textfarbe (Kreuz)
    * Hintergrundfarbe, an den Eckenradius des Buttons angepaßt */
 
    #TabsToolbar .tab-close-button {
    margin-right: -8px !important; 
    font-weight: bold !important;    
    color: black !important; 
    }

    #TabsToolbar .tab-close-button .toolbarbutton-icon {
    height: 20px !important;
    width:  20px !important;    
    background-color: red !important;
    border-radius: 12px !important; 
    }
    
    /* Schliessen-Button nur wenn angewählt */

    tab:not([selected]) .tab-close-button {display: none !important; 
    }

 
    /* Schriftgröße Tabs */

    .tab-text {
    font-size:15px !important;
    }
    
    /* Damit wird der Tabtext am Ende nicht ausgeblendet */
    
    .tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
    .tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-locale-dir(ltr) {
    direction: ltr;
    mask-image: linear-gradient(to left, transparent, black 0em) !important; 
    }
    
    /* Doppelte Schliessung ausblenden */

    #TabsToolbar > .titlebar-buttonbox-container {
    display:none !important; 
    }

    /* Tabs Proton-Design */

    :root {
    --proton-tab-radius: 0 !important;
    --proton-tab-block-margin: 0 !important;
    --inline-tab-padding: 10px !important;
    }

    #TabsToolbar .tabbrowser-tab {
    max-height: 34px !important;    
    border-top: 1px solid #B2B2B2 !important;
    border-bottom: 1px solid #B2B2B2 !important; 
    margin-bottom: 1px !important;
    padding-left: 0 !important;
    }

    #TabsToolbar .toolbarbutton-1 {
    margin-top: 2px !important;    
    margin-bottom: 2px !important;
    }

    #TabsToolbar .toolbarbutton-1 > image {
    padding: 2px 4px !important;
    }

    /* Rahmen um die Tableiste durchsichtig */

    #TabsToolbar {
    border: 0.2px solid transparent !important;
    }
     
    #TabsToolbar:hover {
    border: 0.2px solid transparent !important;
    }
    
    /*Lautsprechersymbol violet bei Sound*/
    
    .tab-icon-overlay[soundplaying] {
    fill: blueviolet !important;
    margin-left: -5px !important;
    }

    /*Lautsprechersymbol gelb bei Stumm*/
    
    .tab-icon-overlay[muted] {
    fill: yellow !important;
    margin-left: -5px !important;
    }
  
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-blocked-label"],
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-playing-label"],
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-muted-label"] {
    display: none !important;
    }

    /* Tab Beschriftung mittig */
    
    .tab-content {
    display: flex !important; 
    margin-top: -4px !important;
    justify-content: center !important;
    align-items: center !important;
    }

    .tab-label-container {
    margin: auto !important;
    }

    .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
    flex-shrink: 0 !important; 
    padding: 0 !important; 
    width: 16px !important;
    }

    /* Tabs in Tableiste mittig */
    
    scrollbox:not(#PlacesToolbarItems) {
    -moz-box-pack: center !important;
    }
    
    /* Lautsprechersymbol größer */
    
    .tab-icon-overlay {
    transform: scale(1.9, 1.9) !important;
    }
    
    image.tab-icon-overlay {
    margin-top: 3px !important;
    }
    
    
    /* Aktiver Tab breiter */
    
    .tabbrowser-tab:not([pinned]):not([selected]) {
    min-width: 200px !important;
    max-width: 200px !important;
    }
    .tabbrowser-tab:not([pinned])[selected] {
    min-width: 256px !important;
    max-width: 256px !important;
    }
    
    /* Kein Schatten drum */
    
    #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"],
    [multiselected]) > .tab-stack > .tab-background
    {
    box-shadow: none !important;
    }
    
    /* Kein blauer Kasten */
    
    tab.tabbrowser-tab {
    --focus-outline-width: 0 !important;
    --focus-outline-color: transparent !important;
    --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color)!important;
    }

Alles anzeigen

Mit diesem Ergebnis:

Unter/hinter dem roten, aktiven Tab sieht man einen viereckigen Rahmen und dieser verhindert wohl die korrekte Größenanzeige des abgerundeten Tabs und Füllung

Danke an alle Beteiligten!

2002Andreas

Zitat von Boersenfeger

sieht man einen viereckigen Rahmen

In Zeile 92 und 93 fügst du einen border dazu.

CSS

    #TabsToolbar .tabbrowser-tab {
    max-height: 34px !important;    
    border-top: 1px solid #B2B2B2 !important;
    border-bottom: 1px solid #B2B2B2 !important;
    margin-bottom: 1px !important;
    padding-left: 0 !important;
    }

~~Entferne den mal und teste dann.~~

Mit border:

Ohne border:

Oder besser noch so:

CSS

    #TabsToolbar .tabbrowser-tab:not([selected="true"])  {
    max-height: 34px !important;    
    border-top: 1px solid #B2B2B2 !important;
    border-bottom: 1px solid #B2B2B2 !important; 
    border-left: 1px solid #B2B2B2 !important; 
    border-right: 1px solid #B2B2B2 !important; 
    margin-bottom: 1px !important;
}

Kurzform wäre dann:

CSS

    #TabsToolbar .tabbrowser-tab:not([selected="true"])  {
    max-height: 34px !important;    
    border: 1px solid #B2B2B2 !important;
    }

.DeJaVu

Zitat von Sören Hentzschel

Das kann ich mir beim besten Willen nicht vorstellen.

Ich hab das hier ad hok im Forum ausprobiert, wohl in Rot - Ergebnis war ein sichtbarer Rand mit 1px, der identisch aussah wie mit dem Wert 1px. "transparent" sieht man nicht, deswegen geht das unter, es ist aber da.

Sören Hentzschel

Dann weiß ich nicht, welche Einschränkungen beim Rendering auf deinem System (oder Augen ) existieren, denn der Unterschied zwischen 0,2px und 1px ist normalerweise deutlich sichtbar.

.DeJaVu

Ich hab jetzt nicht mit der Lupe nachgeschaut.

jetzt: Bei mir ist das genau ein Pixel, bei nativer Auflösung, nicht mal mit Subpixeln.

Boersenfeger

Im Prinzip ists jetzt so, wie ich mir das vorstelle...

Einzig der via Mauszeiger ausgewählte Tab ist noch zu schmal und ich kriege es nicht hin...

Hier nochmal der ganze Code:

CSS

    /* Tabs rund und farbig */

    /* Angaben für die TAB-Leiste*/

    /* TAB bei bei angewähltem TAB (aktiv):
    * Hintergrundfarbe, Rahmen,
    * Schriftfarbe. */
 
   .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background {
    background: red !important;
    border-radius: 18px 18px !important;
    margin-top: 1px !important;  
    border: none !important;
    color: black ! important; 
    }
    
    .tabbrowser-tab[visuallyselected="true"] .tab-label {
    font-weight:  bold !important;
    }

    #TabsToolbar .tabbrowser-tab:not([selected="true"]) {
    border-radius: 16px 16px !important;
    height: 20px ! important;
    margin-top: 0 !important;
    padding: 0 !important;
    color: black ! important; 
    }

    /* Tab-Icon etwas größer,
    * links weniger, unten etwas mehr Abstand zum TAB-Rand.*/
 
    #TabsToolbar .tab-icon-image {
    height: 20px !important;
    width:  20px !important;
    margin-left: -5px !important;    
    margin-bottom: 2px !important;
    }
        
    /* Tab-Schließen-Button:
    * Rechts weniger Abstand zum TAB-Rand, etwas größer,
    * Textfarbe (Kreuz)
    * Hintergrundfarbe, an den Eckenradius des Buttons angepaßt */
 
    #TabsToolbar .tab-close-button {
    margin-right: -8px !important; 
    font-weight: bold !important;    
    color: black !important; 
    }

    #TabsToolbar .tab-close-button .toolbarbutton-icon {
    height: 20px !important;
    width:  20px !important;    
    background-color: red !important;
    border-radius: 12px !important; 
    }
    
    /* Schliessen-Button nur wenn angewählt */

    tab:not([selected]) .tab-close-button {display: none !important; 
    }

 
    /* Schriftgröße Tabs */

    .tab-text {
    font-size:15px !important;
    }
    
    /* Damit wird der Tabtext am Ende nicht ausgeblendet */
    
    .tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
    .tab-label-container[textoverflow]:not([labeldirection]):not([pinned]):-locale-dir(ltr) {
    direction: ltr;
    mask-image: linear-gradient(to left, transparent, black 0em) !important; 
    }
    
    /* Doppelte Schliessung ausblenden */

    #TabsToolbar > .titlebar-buttonbox-container {
    display:none !important; 
    }

    /* Tabs Proton-Design */

    :root {
    --proton-tab-radius: 0 !important;
    --proton-tab-block-margin: 0 !important;
    --inline-tab-padding: 10px !important;
    }

    #TabsToolbar .toolbarbutton-1 {
    min-height: 34px !important;    
    margin-top: 2px !important;    
    margin-bottom: 2px !important;
    }
    
    #TabsToolbar .tabbrowser-tab:not([selected="true"])  {
    min-height: 34px !important;
    border: 1px solid #B2B2B2 !important;
    }

    #TabsToolbar .toolbarbutton-1 > image {
    padding: 2px 4px !important;
    }

    /* Rahmen um die Tableiste durchsichtig */

    #TabsToolbar {
    border: 0.2px solid transparent !important;
    }
     
    #TabsToolbar:hover {
    border: 0.2px solid transparent !important;
    }
    
    /*Lautsprechersymbol violet bei Sound*/
    
    .tab-icon-overlay[soundplaying] {
    fill: blueviolet !important;
    margin-left: -5px !important;
    }

    /*Lautsprechersymbol gelb bei Stumm*/
    
    .tab-icon-overlay[muted] {
    fill: yellow !important;
    margin-left: -5px !important;
    }
  
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-blocked-label"],
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-playing-label"],
    .tabbrowser-tab .tab-content vbox.tab-label-container.proton label[class="tab-icon-sound-label tab-icon-sound-muted-label"] {
    display: none !important;
    }

    /* Tab Beschriftung mittig */
    
    .tab-content {
    display: flex !important; 
    margin-top: -4px !important;
    justify-content: center !important;
    align-items: center !important;
    }

    .tab-label-container {
    margin: auto !important;
    }

    .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
    flex-shrink: 0 !important; 
    padding: 0 !important; 
    width: 16px !important;
    }

    /* Tabs in Tableiste mittig */
    
    scrollbox:not(#PlacesToolbarItems) {
    -moz-box-pack: center !important;
    }
    
    /* Lautsprechersymbol größer */
    
    .tab-icon-overlay {
    transform: scale(1.9, 1.9) !important;
    }
    
    image.tab-icon-overlay {
    margin-top: 3px !important;
    }
    
    
    /* Aktiver Tab breiter */
    
    .tabbrowser-tab:not([pinned]):not([selected]) {
    min-width: 200px !important;
    max-width: 200px !important;
    }
    .tabbrowser-tab:not([pinned])[selected] {
    min-width: 256px !important;
    max-width: 256px !important;
    }
    
    /* Kein Schatten drum */
    
    #TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"],
    [multiselected]) > .tab-stack > .tab-background
    {
    box-shadow: none !important;
    }
    
    /* Kein blauer Kasten */
    
    tab.tabbrowser-tab {
    --focus-outline-width: 0 !important;
    --focus-outline-color: transparent !important;
    --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color)!important;
    }

Alles anzeigen

2002Andreas

Zitat von Boersenfeger

ausgewählte Tab ist noch zu schmal

Füg bitte nach Zeile 15 das noch dazu, Wert evtl. anpassen und testen.

margin-bottom: 0px !important;

milupo

Zitat von 2002Andreas

margin-bottom: 0px !important;

Da hat sich doch wieder etwas hineingemogelt.

2002Andreas

Zitat von milupo

etwas hineingemogelt.

Wer weiß schon was er mal wieder irgendwo kopiert und eingefügt hat

Ich habe an meinen CSS Codes im Nightly schon lange nichts mehr anpassen müssen.

milupo

Zitat von 2002Andreas

Wer weiß schon was er mal wieder irgendwo kopiert und eingefügt hat

Ist denn das keine zusätzliche Zeile von dir? Ich habe das so verstanden.

2002Andreas

Zitat von milupo

Ist denn das keine zusätzliche Zeile von dir?

Doch, die habe ich neu eingefügt.

Aber bei Bf weiß man ja nie, was er selber vorher geändert hat.

milupo

Es ist nur, weil grisu2099 und ich darauf hingewiesen haben, dass man bei 0 die Maßeinheit weglässt. Wenn wir sie jetzt doch schreiben, kommt dann eine Anfrage.

Boersenfeger

da gehts aber wohl um 0 px

... der Code ist der Treffer...

jetzt müsste noch im ausgewählten Tab die Beschriftung mittig..

2002Andreas

Zitat von milupo

die Maßeinheit weglässt.

Ach das meinst du

Natürlich hast du recht damit, ich dachte nur Bf weiß dann besser was gemeint ist.

Und sollte er den Wert für sich dann doch noch anpassen müssen, dann kann er das px nicht vergessen

milupo

Vielleicht merkt er es nicht einmal.

2002Andreas

Zitat von Boersenfeger

im ausgewählten Tab die Beschriftung mittig..

ist sie doch

In deinem Code ist der Eintrag doch vorhanden..

Tabs angepasst, jetzt im Nightly zusätzlicher Rahmen zu sehen

Ähnliche Themen

Proton: Das wissen wir bereits über das neue Firefox-Design