Aktiver Tab hat schwarze Umrandung

Mr. Cutty

Der aktive Tab hat nun eine schwarze Umrandung.

Das ist mir dann doch zu extrem. Welchen CSS-Code brauche ich um eine andere Farbe zu nutzen?

Sören Hentzschel

Hallo,

vom Firefox Standard-Theme kommt das nicht. Welches Theme und / oder userChrome.css-Anpassung nutzt du denn für deine Tabs?

Mr. Cutty

Shades of Firefox

CSS

/* ---------------------------- */
/* Aktiver Tab mit fetten Titel */
/* ---------------------------- */

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



/* -------------------------- */
/*  Inaktiver Tab Umrandung   */
/* -------------------------- */

.tabbrowser-tab .tab-background:not([selected]):not([multiselected]) {
  border: 1px solid #C4C4C4 !important;
  opacity: .6 !important;
}

Alles anzeigen

Sören Hentzschel

Von dem Code kommt das nicht. Das ist aber auch recht wenig Code für die Tabs, der ist nicht alleine für diese Optik verantwortlich. Meinem Eindruck nach ist das nicht das Standard-Theme von Firefox.

Mr. Cutty

Das Theme ist "Shades of Firefox" und diese schwarze Umrandung ist erst durch FF 96 entstanden.

So sah es noch unter Firefox 95.0.2 aus:

2002Andreas

Teste bitte mal:

CSS

.tabbrowser-tab .tab-background[selected="true"] {
  border: 1px solid black !important;
  opacity: .2 !important;
}

Sören Hentzschel

Zitat von Mr. Cutty

Das Theme ist "Shades of Firefox" und diese schwarze Umrandung ist erst durch FF 96 entstanden.

Ich bestreite nicht, dass das Problem erst seit Firefox 96 besteht. Nichtstdestominder kommt die Umrandung nicht vom Standard-Theme, sondern von deinem genutzten Theme, was ich eben getestet habe und bestätigen kann.

Mr. Cutty

Danke. Funktioniert.

2002Andreas

Zitat von Mr. Cutty

Danke. Funktioniert.

Freut mich wenn ich dir damit helfen konnte, war gern geschehen

Mira_Belle

Kleine Info!

Ich hatte witzigerweise einen weißen Rand um meinen aktiven Tab.

Aber dank der Veröffentlichung von Code und ein kleines bisschen Nachdenken

habe ich für mich eine Lösung gefunden.

CSS

    /* -------------------------------------------------*/
    /************* aktiven Tab einfärben ****************/
    /* -------------------------------------------------*/

    .tab-background[selected="true"] {                                                                                            
        background:rgba(255, 148, 0, 0.4) !important;                        /* Orange */                                                        
        box-shadow: inset  0px 0px 5px 0px #ff9400 !important;                /* Orange */
        border: hidden !important;                                            /* Rand ausblenden */
    }

Man beachte letzte Zeile.

Gruß

Mira

seipe

CSS

/************* Tab-Höhe *************/
 .tabbrowser-tab {
    min-height: 28px !important;
    max-height: 28px !important;
    vertical-align: bottom !important;
    margin-top: 1px !important;
    margin-bottom: 1px !important;
}

/************ Abstand zur Menüleiste ************/
#TabsToolbar {
   margin-top: -8px !important;
}

/************* aktiven Tab einfärben ****************/
/* aktiven Tab einfärben */
.tab-background[selected="true"]{
background-color:transparent!important;
box-shadow: inset 0px 0px 40px 1px orange !important;
}
/********** Umrandung Tab Aktiv **********/
.tabbrowser-tab:is([visuallyselected="true"], [multiselected]) > .tab-stack > .tab-background {
  border: 1px solid !important;
}

/**********Umrandung Tab Inaktiv **********/
.tabbrowser-tab .tab-background:not([selected]):not([multiselected]) {
   border:1px solid !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: -4px !important;
margin-bottom: 0px !important;
padding: 0 !important;
color: white !important;
}
#TabsToolbar .tab-close-button {
height: 14px !important;
width: 14px !important;
background-color: red !important;
border-radius: 4px !important;
}

/* Tab-Schließen-Button bei angewähltem TAB (aktiv):
* Hintergrundfarbe.
*/
#TabsToolbar .tab-close-button[selected="true"],
 #TabsToolbar .tab-close-button:not([selected="true"]) {
background-color: red !important;
}


/*Abstände der Einträge im Kontext wieder schmaler*/
menupopup > menuitem,
menupopup > menu {
  padding-block: 0 !important;
  padding-inline-start: 12px !important;
}


/* This file can be used to customize the look of Mozilla's user interface
 * You should consider using !important on rules which you want to override default settings.
 */

/* Do not remove the @namespace line -- it's required for correct functioning */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xhtml"); /* set default namespace to xhtml */

/* Lesezeichen Sidebar - Ordnericon liegend gelb */
@-moz-document url-prefix(chrome://browser/content/browser.xhtml), 
url("chrome://browser/content/places/places.xhtml") {
    treechildren::-moz-tree-image(container) {
        list-style-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0IxNUY5NjNFRkY0MTFFN0EwMjNCOEY1NDJGNTM0MUYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0IxNUY5NjRFRkY0MTFFN0EwMjNCOEY1NDJGNTM0MUYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozQjE1Rjk2MUVGRjQxMUU3QTAyM0I4RjU0MkY1MzQxRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozQjE1Rjk2MkVGRjQxMUU3QTAyM0I4RjU0MkY1MzQxRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpiI9NIAAAHKSURBVHjalFJNaxRBEH3VXT07u2MkKgREb4GA4CUQz8EfIAS95u7JS075CQEFvebsISd/gH8gCkogHuIxEAj5IAkJuonZzUz7umZ21w0k4DA1XTP95tWr1yU/P79c6vfKRecchMEbAs8cyO5MfQohfHw8934HN1z6++R48enzN0z5h0s/Bouzgy2c7X551Qt3J7i5fBOBfFub35iZfYbyzw7E53CaQ7QD7Uzj9LiLi6NNmKwEFqkjlVNh6KqO88WGFqj6e5i8X+DBoxcEtuvPLCA+o8IWizzE/ubb13req7Cx/tX690GRvFD1yLMMGhL/d6j37E6RtQtiJpB17lFCYZU0p5TZhQ+IZTeVIBGDK8ty1Xp12rTAle7avlxi/8c72M7F3pp54HyS1jYPnBZwgcFcQmEEPu15tqPEhSdUGKDjDojJMsskDnweptFUpESGXrnxM4kjK5tHrDkt5BqOp3CN4D+v5Nc4QUxnPDhKaeTHW0lGBI2+Gi/DkRh0ExtQ/Aecnupc/eLzaTocbEhsGjk0kIqiWiRtvC4Z1RX65SFxXZsdPT08WNnd3l6OVWXDEmOFVoejnAUzqZW3bcBGfY+qX57/Wv0rwAApZm2AlTI82wAAAABJRU5ErkJggg==')
        !important; }
}

/* Lesezeichen verwalten - Ordnericon liegend gelb */
@-moz-document url-prefix("chrome://browser/content/places/places.xhtml") {
    treechildren::-moz-tree-image(container) {
        list-style-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0IxNUY5NjNFRkY0MTFFN0EwMjNCOEY1NDJGNTM0MUYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0IxNUY5NjRFRkY0MTFFN0EwMjNCOEY1NDJGNTM0MUYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozQjE1Rjk2MUVGRjQxMUU3QTAyM0I4RjU0MkY1MzQxRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozQjE1Rjk2MkVGRjQxMUU3QTAyM0I4RjU0MkY1MzQxRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpiI9NIAAAHKSURBVHjalFJNaxRBEH3VXT07u2MkKgREb4GA4CUQz8EfIAS95u7JS075CQEFvebsISd/gH8gCkogHuIxEAj5IAkJuonZzUz7umZ21w0k4DA1XTP95tWr1yU/P79c6vfKRecchMEbAs8cyO5MfQohfHw8934HN1z6++R48enzN0z5h0s/Bouzgy2c7X551Qt3J7i5fBOBfFub35iZfYbyzw7E53CaQ7QD7Uzj9LiLi6NNmKwEFqkjlVNh6KqO88WGFqj6e5i8X+DBoxcEtuvPLCA+o8IWizzE/ubb13req7Cx/tX690GRvFD1yLMMGhL/d6j37E6RtQtiJpB17lFCYZU0p5TZhQ+IZTeVIBGDK8ty1Xp12rTAle7avlxi/8c72M7F3pp54HyS1jYPnBZwgcFcQmEEPu15tqPEhSdUGKDjDojJMsskDnweptFUpESGXrnxM4kjK5tHrDkt5BqOp3CN4D+v5Nc4QUxnPDhKaeTHW0lGBI2+Gi/DkRh0ExtQ/Aecnupc/eLzaTocbEhsGjk0kIqiWiRtvC4Z1RX65SFxXZsdPT08WNnd3l6OVWXDEmOFVoejnAUzqZW3bcBGfY+qX57/Wv0rwAApZm2AlTI82wAAAABJRU5ErkJggg==')
        !important; }
}

/* Lesezeichen - Ordnericon gelb */
@-moz-document url-prefix("chrome://browser/content/browser.xhtml") {
    .bookmark-item[container="true"] {
        list-style-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAYAAAAmL5yKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0IxNUY5NjNFRkY0MTFFN0EwMjNCOEY1NDJGNTM0MUYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0IxNUY5NjRFRkY0MTFFN0EwMjNCOEY1NDJGNTM0MUYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozQjE1Rjk2MUVGRjQxMUU3QTAyM0I4RjU0MkY1MzQxRiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozQjE1Rjk2MkVGRjQxMUU3QTAyM0I4RjU0MkY1MzQxRiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PpiI9NIAAAHKSURBVHjalFJNaxRBEH3VXT07u2MkKgREb4GA4CUQz8EfIAS95u7JS075CQEFvebsISd/gH8gCkogHuIxEAj5IAkJuonZzUz7umZ21w0k4DA1XTP95tWr1yU/P79c6vfKRecchMEbAs8cyO5MfQohfHw8934HN1z6++R48enzN0z5h0s/Bouzgy2c7X551Qt3J7i5fBOBfFub35iZfYbyzw7E53CaQ7QD7Uzj9LiLi6NNmKwEFqkjlVNh6KqO88WGFqj6e5i8X+DBoxcEtuvPLCA+o8IWizzE/ubb13req7Cx/tX690GRvFD1yLMMGhL/d6j37E6RtQtiJpB17lFCYZU0p5TZhQ+IZTeVIBGDK8ty1Xp12rTAle7avlxi/8c72M7F3pp54HyS1jYPnBZwgcFcQmEEPu15tqPEhSdUGKDjDojJMsskDnweptFUpESGXrnxM4kjK5tHrDkt5BqOp3CN4D+v5Nc4QUxnPDhKaeTHW0lGBI2+Gi/DkRh0ExtQ/Aecnupc/eLzaTocbEhsGjk0kIqiWiRtvC4Z1RX65SFxXZsdPT08WNnd3l6OVWXDEmOFVoejnAUzqZW3bcBGfY+qX57/Wv0rwAApZm2AlTI82wAAAABJRU5ErkJggg==')
        !important;
        -moz-image-region: rect(0px 16px 16px 0px) !important; }
}

Alles anzeigen

An unsere Schrauber die Bitte gerichtet. Was muss hier geändert werden, um den schwarzen Rand des aktiven Tabs weg zu bekommen?

2002Andreas

Zitat von seipe

den schwarzen Rand des aktiven Tabs weg zu bekommen?

Ab Zeile 21 - 24:

CSS

    /* -------------------------------------------------*/
    /************* aktiven Tab einfärben ****************/
    /* -------------------------------------------------*/

    .tab-background[selected="true"] {                                                                                            
        background:rgba(255, 148, 0, 0.4) !important;                        /* Orange */                                                        
        box-shadow: inset  0px 0px 5px 0px #ff9400 !important;                /* Orange */
        border: hidden !important;                                            /* Rand ausblenden */
    }

seipe

Hallo 2002Andreas. Was heißt ab Zeile 21 - 24. Wie muss ich das eintragen?

Danke Andreas, habe es selbst gelöst. Danke dafür.

2002Andreas

Zitat von seipe

Danke Andreas,

Gerne doch

seipe

Andreas, das gleiche bräuchte ich bitte auch noch beim inaktiven Tab.

2002Andreas

Zitat von seipe

beim inaktiven Tab.

Teste bitte:

CSS

/**********Umrandung Tab Inaktiv **********/
.tabbrowser-tab .tab-background:not([selected]):not([multiselected]) {
    border: hidden !important;
}

seipe

Perfekt Andreas. Dankeschön.

2002Andreas

Zitat von seipe

Perfekt Andreas. Dankeschön.

Freut mich wenn du zufrieden bist, war gern geschehen

Aktiver Tab hat schwarze Umrandung

Ähnliche Themen

Fx 133 > Tableiste unten per CSS-Code, oder per Skript.

Tab Leiste an andere Stelle (unter Lesezeichenliste) verschieben? Firefox 95.0.2

Anpassungen wegen Proton

...und eine weitere Bitte um userChrome.css-Anpassung für FX 89

Tab - Darstellung ändern

FF 89 Tab's oben mit Anpassungen