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

Boersenfeger

Nur im Nightly im aktiven Tab (rot) erscheint der viereckige Rahmen seit einigen Tagen....

Liegts am Code für die Anpassung der Tabs?

CSS

    /* Tabs rund und farbig */

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

    /* TAB normal (inaktiv):
    * Hintergrundfarbe, Schriftfarbe,
    * Rahmen um die TABs, oben abgerundet und Abstände angepaßt,
    * unten kein Rahmen -> Abschlußrahmen vom Container.*/

   
    #TabsToolbar .tabbrowser-tab {
    color: black !important;
    border: 1px solid !important;
    border-bottom: 1px solid black !important;
    border-radius: 16px 16px !important;
    margin-top: 0px !important;
    padding: 0px !important;
    }

    /* TAB bei bei angewähltem TAB (aktiv):
    * Hintergrundfarbe, Rahmen,
    * Schriftfarbe. */
 
    #TabsToolbar .tabbrowser-tab[selected="true"] {
    background: red !important;
    border-radius: 16px 16px !important;
    margin-top: 0px !important;
    padding: 0px !important;
    font-weight: bold !important;   
    color: black ! important; 
    }

    #TabsToolbar .tabbrowser-tab:not([selected="true"]) {
    border-radius: 16px 16px !important;
    margin-top: 0px !important;
    padding: 0px !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: -5px !important;  
    color: black !important; 
    }

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

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

    /* Alle anderen Elemente in den TABs ohne Hintergrund. */

    #TabsToolbar .tabbrowser-tab * {
    background: 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]):-moz-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: 0px !important;
    --proton-tab-block-margin: 0px !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: 2px !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;
    }     

    .tabbrowser-tab[label*=" - YouTube"] .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"] .tab-content {
    background-image: linear-gradient(to bottom, red 0%, red 14%, red 14%, red 100%) !important;
    }
    
    .tabbrowser-tab[label*=" - YouTube"][selected="true"] .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"][selected="true"] .tab-content {
    background-image: linear-gradient(to bottom, green 0%, green 14%, red 14%, red 100%) !important;
    }
    
    .tabbrowser-tab[label*=" - YouTube"]:hover .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"]:hover .tab-content {
    background-image: linear-gradient(to bottom, saddlebrown 0%, saddlebrown 14%, saddlebrown 14%, saddlebrown 100%) !important;
    }
    
    .tabbrowser-tab[label*=" - YouTube"][selected="true"]:hover .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"][selected="true"]:hover .tab-content {
    background-image: linear-gradient(to bottom, green 0%, green 14%, saddlebrown 14%, saddlebrown 100%) !important;
    } 

    .tabbrowser-tab .tab-content vbox.tab-label-container.proton {
    -moz-box-orient: horizontal !important;
    } 
    
    /*Lautsprechersymbol violet bei Sound*/
    
    .tab-icon-overlay[soundplaying] {
    fill: blueviolet !important;
    }

    /*Lautsprechersymbol gelb bei Stumm*/
    
    .tab-icon-overlay[muted] {
    fill: yellow !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: 0px !important; 
    padding-top: -5px!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;
    padding-right: -4px !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: 0px !important;
    --focus-outline-color: transparent !important;
    --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color)!important;
    }

Alles anzeigen

Sören Hentzschel

An den aktiven Tabs wurde vor knapp zwei Wochen was geändert:

1734128 - Tab border thicker on 2 sides then on the other 2

RESOLVED (achurchwell) in Firefox - Tabbed Browser. Last updated 2021-11-10.

bugzilla.mozilla.org

Ich würde fast drauf wetten, dass dein Problem in Zusammenhang mit dieser Änderung steht. Allerdings wird es in jedem Fall noch eine weitere Änderung geben, da die obige Änderung mindestens zwei Regressions hervorgerufen hat. Wenn du deinen CSS-Code also jetzt anpasst, kann es gut sein, dass in ein paar Tagen noch einmal eine Anpassung vorzunehmen ist.

.DeJaVu

Nicht ?, sondern !

Es wurde was geändert, was dein CSS nicht erfasste bisher.

Was sagen die Browser-Werkzeuge?

Boersenfeger

Zitat von .DeJaVu

Was sagen die Browser-Werkzeuge?

Die nutze ich nicht, da für mich zu kompliziert...

@ Sören Hentschel

Dann werde ich mal zuwarten...

Ggf. hat das dann auch mit meinem anderen Problem zu tun!?

Beitrag

RE: Fx 117 > Tableiste unten per CSS-Code, nicht per Skript!

Der CSS-Code aus Beitrag 1 funktioniert mit Nightly seit heute nicht mehr... das Alternativ-Script schon. Kann das jemand bestätigen?

Boersenfeger

13. November 2021 um 14:47

.DeJaVu

Muss ich nix zu sagen, oder?

Stylus hat auch schon zwei Fehler gefunden

padding-top: -5px!important;

padding-right: -4px !important;

Es gibt kein negatives padding, das kann nur margin.

Von daher wäre erst mal ein fehlerfreies css wichtig.

PS

padding: 0px<-- weglassen, 0 bleibt Null, egal, was dahinter steht.

CSS

#TabsToolbar:not([brighttext]) #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background
{
    border: none !important;
}

2002Andreas

Zitat von Boersenfeger

Dann werde ich mal zuwarten...

Auf die Schnelle, teste bitte mal.

CSS

    /* Tabs rund und farbig */

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

    /* TAB normal (inaktiv):
    * Hintergrundfarbe, Schriftfarbe,
    * Rahmen um die TABs, oben abgerundet und Abstände angepaßt,
    * unten kein Rahmen -> Abschlußrahmen vom Container.*/

   
    #TabsToolbar .tabbrowser-tab {
    color: black !important;
    border: 1px solid !important;
    border-bottom: 1px solid black !important;
    border-radius: 16px 16px !important;
    margin-top: 0px !important;
    padding: 0px !important;
    }

    /* 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: 0px !important;
    font-weight: bold !important;   
    color: black ! important; 
    }

    #TabsToolbar .tabbrowser-tab:not([selected="true"]) {
    border-radius: 16px 16px !important;
    margin-top: 0px !important;
    padding: 0px !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: -5px !important;  
    color: black !important; 
    }

    #TabsToolbar .tab-close-button .toolbarbutton-icon {
    height: 20px !important;
    width:  20px !important;    
    background-color: red !important;
    border-radius: 14px !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]):-moz-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: 0px !important;
    --proton-tab-block-margin: 0px !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: 0px !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;
    }     

    .tabbrowser-tab[label*=" - YouTube"] .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"] .tab-content {
    background-image: linear-gradient(to bottom, red 0%, red 14%, red 14%, red 100%) !important;
    }
    
    .tabbrowser-tab[label*=" - YouTube"][selected="true"] .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"][selected="true"] .tab-content {
    background-image: linear-gradient(to bottom, green 0%, green 14%, red 14%, red 100%) !important;
    }
    
    .tabbrowser-tab[label*=" - YouTube"]:hover .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"]:hover .tab-content {
    background-image: linear-gradient(to bottom, saddlebrown 0%, saddlebrown 14%, saddlebrown 14%, saddlebrown 100%) !important;
    }
    
    .tabbrowser-tab[label*=" - YouTube"][selected="true"]:hover .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"][selected="true"]:hover .tab-content {
    background-image: linear-gradient(to bottom, green 0%, green 14%, saddlebrown 14%, saddlebrown 100%) !important;
    } 

    .tabbrowser-tab .tab-content vbox.tab-label-container.proton {
    -moz-box-orient: horizontal !important;
    } 
    
    /*Lautsprechersymbol violet bei Sound*/
    
    .tab-icon-overlay[soundplaying] {
    fill: blueviolet !important;
    }

    /*Lautsprechersymbol gelb bei Stumm*/
    
    .tab-icon-overlay[muted] {
    fill: yellow !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: 0px !important; 
    padding-top: 0px!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;
    padding-right: 0px !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;
    }

Alles anzeigen

.DeJaVu

Nachtrag: Ich hatte das bei mir schon vor ein paar Tagen eingetragen, weil ich auch unter Windows 8 einen Rahmen hatte:

CSS

.tabbrowser-tab:is([visuallyselected="true"]) .tab-stack > .tab-background
{
    border: none !important;
}

(Windows 10 hat nur die Final)

PS auch hier, der gleiche "Fehler"

Zitat

padding-top: 0px!important;

Boersenfeger

Zitat von 2002Andreas

Auf die Schnelle, teste bitte mal.

Danke, das hat mich weiter gebracht... habe nochmal selber einiges probiert... jetzt

habe ich noch dies Problem

Im aktiven Tab füllt die rote Farbe nicht den ganzen Tab

CSS

    /* Tabs rund und farbig */

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

    /* TAB normal (inaktiv):
    * Hintergrundfarbe, Schriftfarbe,
    * Rahmen um die TABs, oben abgerundet und Abstände angepaßt,
    * unten kein Rahmen -> Abschlußrahmen vom Container.*/

   
    #TabsToolbar .tabbrowser-tab {
    color: black !important;
    border: 1px solid !important;
    border-bottom: 1px solid black !important;
    border-radius: 16px 16px !important;
    margin-top: 0px !important;
    padding: 0px !important;
    }

    /* 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: 0px !important;  
    border: none !important;
    color: black ! important; 
    }

    #TabsToolbar .tabbrowser-tab:not([selected="true"]) {
    border-radius: 16px 16px !important;
    margin-top: 0px !important;
    padding: 0px !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]):-moz-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: 0px !important;
    --proton-tab-block-margin: 0px !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: 0px !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;
    }     

    .tabbrowser-tab[label*=" - YouTube"] .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"] .tab-content {
    background-image: linear-gradient(to bottom, red 0%, red 14%, red 14%, red 100%) !important;
    }
    
    .tabbrowser-tab[label*=" - YouTube"][selected="true"] .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"][selected="true"] .tab-content {
    background-image: linear-gradient(to bottom, green 0%, green 14%, red 14%, red 100%) !important;
    }
    
    .tabbrowser-tab[label*=" - YouTube"]:hover .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"]:hover .tab-content {
    background-image: linear-gradient(to bottom, saddlebrown 0%, saddlebrown 14%, saddlebrown 14%, saddlebrown 100%) !important;
    }
    
    .tabbrowser-tab[label*=" - YouTube"][selected="true"]:hover .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"][selected="true"]:hover .tab-content {
    background-image: linear-gradient(to bottom, green 0%, green 14%, saddlebrown 14%, saddlebrown 100%) !important;
    } 

    .tabbrowser-tab .tab-content vbox.tab-label-container.proton {
    -moz-box-orient: horizontal !important;
    } 
    
    /*Lautsprechersymbol violet bei Sound*/
    
    .tab-icon-overlay[soundplaying] {
    fill: blueviolet !important;
    padding-left: -9px !important;
    }

    /*Lautsprechersymbol gelb bei Stumm*/
    
    .tab-icon-overlay[muted] {
    fill: yellow !important;
    padding-left: -9px !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: 0px !important; 
    padding-top: 0px!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: 0px !important;
    --focus-outline-color: transparent !important;
    --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color)!important;
    }

Alles anzeigen

.DeJaVu: wenn ich die 0px bei padding weglasse, ergeben sich andere unschöne Begleitumstände.

grisu2099

Zitat von Boersenfeger

wenn ich die 0px bei padding weglasse

Du sollst nur "px" weglassen, wenn der Wert 0 ist...

Boersenfeger

Ah, ok... danke,werde ich einarbeiten

milupo

Zeilen 156 und 163: Ein negativer padding-Wert ist nicht erlaubt.

2002Andreas

Zitat von Boersenfeger

Im aktiven Tab füllt die rote Farbe nicht den ganzen Tab

Hier sieht das so aus:

Boersenfeger

milupo ist 2x auf

CSS

margin-left: -5px !important;

geändert.

2002Andreas:

Wo könnte ich denn was probieren?

Auch das im ausgewählten Tab die Tabbeschriftung nicht fett ist, fehlt noch

Hier nochmal der ganze Code nach der Anpassung wg milupos Hinweis

CSS

    /* Tabs rund und farbig */

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

    /* TAB normal (inaktiv):
    * Hintergrundfarbe, Schriftfarbe,
    * Rahmen um die TABs, oben abgerundet und Abstände angepaßt,
    * unten kein Rahmen -> Abschlußrahmen vom Container.*/

   
    #TabsToolbar .tabbrowser-tab {
    color: black !important;
    border: 1px solid !important;
    border-bottom: 1px solid black !important;
    border-radius: 16px 16px !important;
    margin-top: 0px !important;
    padding: 0 !important;
    }

    /* 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: 0px !important;  
    border: none !important;
    color: black ! important; 
    }

    #TabsToolbar .tabbrowser-tab:not([selected="true"]) {
    border-radius: 16px 16px !important;
    margin-top: 0px !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]):-moz-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: 0px !important;
    --proton-tab-block-margin: 0px !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;
    }     

    .tabbrowser-tab[label*=" - YouTube"] .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"] .tab-content {
    background-image: linear-gradient(to bottom, red 0%, red 14%, red 14%, red 100%) !important;
    }
    
    .tabbrowser-tab[label*=" - YouTube"][selected="true"] .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"][selected="true"] .tab-content {
    background-image: linear-gradient(to bottom, green 0%, green 14%, red 14%, red 100%) !important;
    }
    
    .tabbrowser-tab[label*=" - YouTube"]:hover .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"]:hover .tab-content {
    background-image: linear-gradient(to bottom, saddlebrown 0%, saddlebrown 14%, saddlebrown 14%, saddlebrown 100%) !important;
    }
    
    .tabbrowser-tab[label*=" - YouTube"][selected="true"]:hover .tab-content,
    .tabbrowser-tab[label*="YouTube - youtube.com"][selected="true"]:hover .tab-content {
    background-image: linear-gradient(to bottom, green 0%, green 14%, saddlebrown 14%, saddlebrown 100%) !important;
    } 

    .tabbrowser-tab .tab-content vbox.tab-label-container.proton {
    -moz-box-orient: horizontal !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; 
    padding-top: 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: 0px !important;
    --focus-outline-color: transparent !important;
    --focus-outline: var(--focus-outline-width) solid var(--focus-outline-color)!important;
    }

Alles anzeigen

milupo

Zitat von grisu2099

Du sollst nur "px" weglassen, wenn der Wert 0 ist...

Boersenfeger Übrigens gilt das für alle Eigenschaften, die den Wert 0 annehmen können, nicht nur für padding.

2002Andreas

Zitat von Boersenfeger

der ganze Code nach der Anpassung wg milupos Hinweis

Damit sieht das hier so aus:

Evtl. funkt dir also ein anderer Code dann dazwischen

milupo

Zeilen 187 und 188: padding: 0 setzt alle Seitenabstände auf 0. padding-top: 0 ist daher überflüssig.

Zeilen 11 - 18 und 101 -107 sind Regeln für den gleichen Selektor.

Zitat von Boersenfeger

Auch das im ausgewählten Tab die Tabbeschriftung nicht fett ist, fehlt noch

Ist auch nirgendwo festgelegt. Lediglich für den Schließen-Button ist in Zeile 56 fett festgelegt.

2002Andreas

Zitat von Boersenfeger

im ausgewählten Tab die Tabbeschriftung nicht fett ist, fehlt noch

War die denn mal fett?

Wenn ja, nutzt du unterschiedliche CSS Codes

.DeJaVu

äh, das geht? border: 0.2px solid transparent !important;

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

Transparent könnte man dann auch mit einem erweiterten Padding um 1px in alle Richtungen ersetzen und border: none, allerdings kenne ich den gesamten Kontext nicht.

Was ist mit dem hier?

-moz-box-pack: center !important;

-moz?

-moz-box-pack - CSS | MDN

Siehe Flexbox (en-US) für mehr Informationen.

developer.mozilla.org

Zitat

Achtung:: Dies ist eine Eigenschaft des ursprünglichen CSS Flexible Box Layout Moduls, welches durch einen neuen Standard ersetzt wurde.

dito: -moz-box-orient

Boersenfeger

Danke für die Beiträge!

Alles bereinigt, zusätzlich noch die Einträge, die sich nur mit YouTube beschäftigten, entfernt.

@ Fettschrift des aktiven Tabs: Eigentlich dachte ich, das das vorher mal so war... wo müsste ich das definieren?

Suche jetzt noch einen einflussnehmenden anderen CSS-Code...

2002Andreas

Zitat von Boersenfeger

wo müsste ich das definieren?

CSS

.tabbrowser-tab[visuallyselected="true"] .tab-label {
  font-weight:  bold !important;
}

oder auch so:

CSS

.tabbrowser-tab[visuallyselected="true"] {
  font-weight: bold !important;
}

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

RE: Fx 117 > Tableiste unten per CSS-Code, nicht per Skript!

Ähnliche Themen

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