Neuer Tab Pluszeichen einfärben funktioniert nicht mehr

Boersenfeger

Moin, seit einiger Zeit funktioniert dieser CSS-Codeschnipsel nicht mehr:

CSS

/* Tab Pluszeichen einfärben*/
	
	#tabs-newtab-button {
    color: red !important;
	font-size: 100px !important;
	font-weight: bold !important;
    }

Nur bei mir so?

2002Andreas

Zitat von Boersenfeger

Nur bei mir so?

Nö.

Teste bitte:

CSS

/* Tab Pluszeichen einfärben*/
	
	#tabs-newtab-button {
   fill: red !important;
   scale: 1.5 !important;
    }

Boersenfeger

Hm, da tut sich nix... ich poste mal den ganzen Code, dein Vorschlag ist am Ende eingefügt..

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], [multiselected]) > .tab-stack > .tab-background {
    background: red !important;
    border-radius: 18px !important;
    margin-top: 2px !important;  
    border: none !important;
    color: black ! important; 
    margin-bottom: 0 !important;
    }
    
	.tab-background {
    outline: none !important;
    }

    /* Schliessen-Button nur wenn angewählt */

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

    /* Schriftgröße Tabs */

    .tab-text {
    font-size: 18px !important;
    }

    /* Damit wird der Tabtext am Ende schleichend 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 1em) !important; 
    }
    
    /* Doppelte Schliessung ausblenden */

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

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

    #TabsToolbar .tabbrowser-tab:not([selected]) {
    border-radius: 16px !important;
    height: 22px ! important;
    margin-top: 5px !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: -2px !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 angepasst */
 
    #TabsToolbar .tab-close-button {
    margin-right: -6px !important; 
    font-weight: bold !important;    
    color: black !important; 
    }

    #TabsToolbar .tab-close-button .toolbarbutton-icon {
    height: 6px !important;
    width:  6px !important;    
    background-color: red !important;
    border-radius: 12px !important;
    }
    
    /* Aktiver Tab breiter */
    
    .tabbrowser-tab:not([pinned]):not([selected]) {
    min-width: 185px !important;
	min-height: 30px !important;
	max-height: 40px !important;
    flex-grow: 0 !important;
    }
	
    .tabbrowser-tab:not([pinned])[selected] {
    min-width: 200px !important;
	min-height: 30px !important;
	max-height: 40px !important;
    flex-grow: 0 !important;
    }

	/* Lautsprechersymbol größer und ohne Hintergrund */
	
	.tab-audio-button[soundplaying] {
	--button-icon-fill: blue !important;
	scale: 1.8 !important;  
	border: none !important;
	--button-background-color-ghost-hover: transparent !important;
	}
	
	/* Lautsprechersymbol blauviolett bei Sound */
	
	[soundplaying] {
		fill: blueviolet !important;
	}
  
	/* Lautsprechersymbol gelb bei stumm */
		
	.tab-audio-button[muted] {
	--button-icon-fill: yellow !important;
	scale: 1.8 !important;  
	border: none !important;
	--button-background-color-ghost-hover: transparent !important;
	}
		
    /* Tab Beschriftung mittig */
    
    .tab-content {
    display: flex !important; 
    margin-top: -6px !important;
    justify-content: center !important;
    align-items: center !important;
    }
    
    #TabsToolbar .tabbrowser-tab[selected] .tab-content {
    margin-top: 2px !important;
    }

	.tabbrowser-tab {
	min-height: 40px !important;
	max-height: 40px !important;
	}

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

    .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
    padding: 0  !important; 
    width: 17px !important;
	height: 17px !important;
    }

    #TabsToolbar .toolbarbutton-1 {
    min-height: 34px !important;    
    margin-top: 2px !important;    
    margin-bottom: 2px !important;
    } 
    
    #TabsToolbar .tabbrowser-tab:not([selected])  {
    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;
    }

	/* Fortschrittsanzeige für das Laden der Seite */

	.tabbrowser-tab:not([usercontextid]) > .tab-stack > .tab-background > .tab-context-line {
    opacity: 0;
    background-color: #00ff00;
    height: 6px;
	margin-inline: 8px;
    margin-top: 2px;
	border-radius: 90px;
	}
	.tabbrowser-tab:is([busy], [progress]) > .tab-stack > .tab-background > .tab-context-line {
    opacity: 1;
    transform-origin: left center;
    animation: 2s ease-in-out scale;
	}
	.tabbrowser-tab[bursting] > .tab-stack > .tab-background > .tab-context-line {
    transition: opacity 2s ease-out;
	}
	@keyframes scale {
    0% {transform: scaleX(0);}
    100% {transform: scaleX(1);}
	}

	/* Tabs mittig */

	#tabbrowser-tabs:not([overflow], [orient="vertical"]) .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
    margin-left: auto !important;
	}
	#tabbrowser-tabs:not([overflow], [orient="vertical"]) #tabbrowser-arrowscrollbox-periphery {
    margin-right: auto !important;
	
	}

	/* 1.Tababstand vom linken Rand */
	
	.tabbrowser-tab:first-child {
	margin-left: 20px !important;
	}
	
	/* Tab Pluszeichen einfärben */
	
	#tabs-newtab-button {
    fill: red !important;
    scale: 1.5 !important;
    }

Alles anzeigen

2002Andreas

Zitat von Boersenfeger

ich poste mal den ganzen Code

Sieht damit so aus:

Boersenfeger

Komisch, auch wenn ich diesen Code noch deaktiviere, bleibt das Pluszeichen schwarz...

CSS

/* Tabs runter, Tableiste schmaler */ 

	*|*:root { 
	--tab-toolbar-navbar-overlap: 0px !important;  
	--tab-min-height: 27px !important;
}

	#TabsToolbar {
	position: absolute !important;
	display: flex !important;
	bottom: 0;
	width: 100vw;
	background-clip: padding-box;
	color: var(--toolbar-color);
}

	#navigator-toolbox {
    position: relative;
    padding-bottom: calc( var(--tab-min-height) + 14px );
}

	.titlebar-buttonbox-container {
    position: fixed;
    right: 0;
    visibility: visible;
    display: block;
}

	#TabsToolbar .titlebar-buttonbox-container,
	#TabsToolbar #window-controls {
    display: none;
}

	#main-menubar {
    height: 28px !important;
}  

/*...................Ab hier nur Privater Modus...................*/

/* Das lila Icon für privaten Modus oben rechts eingefügt */

	#main-window[privatebrowsingmode=temporary] #PanelUI-button::before {
    margin-left: 0px!important;
    margin-right: 0px !important;
    content: '' !important;
    display: block !important;
    width: 20px !important;
    height: 30px !important;
    background: url("chrome://global/skin/icons/indicator-private-browsing.svg") !important;
    background-repeat: no-repeat !important;
    background-position: 0px 8px !important;
    background-size: 25px 17px !important;
}

/* Der neue zusätzliche Eintrag: Privater Modus unter dem Tab entfernt */

	#private-browsing-indicator-with-label {
    display: none !important;
} 

	.tab-line {
   display: none;
}

/	.tab-close-button {
   color: red!important;
}

Alles anzeigen

Ebenso, wenn ich mein Theme deaktiviere und das System-Theme (Hell) aktiv ist.
Na dann gehts halt nicht...

2002Andreas

Zitat von Boersenfeger

Na dann gehts halt nicht..

Es muss aber einen Grund dafür bei dir geben.

Sieht hier mit dem weiteren Code so aus:

Ansonsten:

Dein Code aus Beitrag Nr. 1 funktioniert schon seit Fx 91 nicht mehr, eben mal getestet

Das funktioniert so auch nicht.

Erstens vorne der / und statt color muss es fill sein.

Boersenfeger

Zitat von 2002Andreas

Ansonsten:
Dein Code aus Beitrag Nr. 1 funktioniert schon seit Fx 91 nicht mehr, eben mal geteste
Das funktioniert so auch nicht.

Erstens vorne der / und statt color muss es fill sein.

Wie vorne der / ?
im Code aus #1 stand das so nicht...
habe nun alle alleinstehenden "Color" in "Fill" umgewandelt, aber ohne Erfolg.

Sören Hentzschel

Zitat von Boersenfeger

Wie vorne der / ?
im Code aus #1 stand das so nicht...

Aber in deinem Code in Beitrag #5. Und das gehört weg.

2002Andreas

Zitat von Boersenfeger

aber ohne Erfolg.

Dann funkt dir irgendein anderer Code dazwischen.

Zur anderen Frage hat dir Sören ja schon geantwortet.

Boersenfeger

Danke, der Codeteil aus #5 bezog sich auf den Privat-Modus, den ich eh nicht nutze.

Es funktioniert, aber nur, wenn die geöffneten Tabs nicht die gesamte Breite der Tabs-Toolbar einnehmen.

2002Andreas

Zitat von Boersenfeger

der Codeteil aus #5 bezog sich auf den Privat-Modus

Wenn das x zum Schließen nur im privaten Modus rot sein soll, dann müsste der Code so aussehen:

CSS

#main-window[privatebrowsingmode] .tab-close-button {
  fill: red !important;
}

Zitat von Boersenfeger

Ich gehe morgen mal auf die Suche.

mach das

Nikolaus2001at

Zitat von Boersenfeger

Es funktioniert, aber nur, wenn die geöffneten Tabs nicht die gesamte Breite der Tabs-Toolbar einnehmen.

Das kann ich bestätigen. Aber das das hier (wegen schmaler Tabs) erst ab dem 20sten Tab so ist, kann ich gut damit leben.

2002Andreas

Zitat von Boersenfeger

Es funktioniert, aber nur, wenn die geöffneten Tabs nicht die gesamte Breite der Tabs-Toolbar einnehmen.

Ich lese das jetzt erst, sorry.

Hättest du gleich schreiben sollen

Teste:

CSS

	#tabs-newtab-button, #TabsToolbar #new-tab-button {
    fill: red !important;
    scale: 1.5 !important;
    }

Boersenfeger

Zitat von 2002Andreas

Ich lese das jetzt erst, sorry.
Hättest du gleich schreiben sollen

Ich hatte meine Antwort nach 3 Minuten editiert.

Aber vielen Dank, jetzt ist alles schick!

2002Andreas

Zitat von Boersenfeger

nach 3 Minuten editiert.

Und das habe ich nicht mitbekommen

Zitat von Boersenfeger

jetzt ist alles schick!

Boersenfeger

2002Andreas ... also fast...

Das Pluszeichen sollte vielleicht doch ca. 5 bis 10 Pixel rechts vom aktivierten, zu schließenden Tab positioniert sein, da man sonst das X des Tabs nicht trifft und statt des Schließens ein neuer Tab geöffnet wird. Geht das?

2002Andreas

Zitat von Boersenfeger

da man sonst das X des Tabs nicht trifft

So sieht das hier mit deinen Codes aus:

Poste doch bitte mal deinen kompl. genutzten Code.

Boersenfeger

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], [multiselected]) > .tab-stack > .tab-background {
    background: red !important;
    border-radius: 18px !important;
    margin-top: 2px !important;  
    border: none !important;
    fill: black ! important; 
    margin-bottom: 0 !important;
    }
    
	.tab-background {
    outline: none !important;
    }

    /* Schliessen-Button nur wenn angewählt */

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

    /* Schriftgröße Tabs */

    .tab-text {
    font-size: 18px !important;
    }

    /* Damit wird der Tabtext am Ende schleichend 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 1em) !important; 
    }
    
    /* Doppelte Schliessung ausblenden */

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

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

    #TabsToolbar .tabbrowser-tab:not([selected]) {
    border-radius: 16px !important;
    height: 22px ! important;
    margin-top: 5px !important;
    padding: 0 !important;
    fill: 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: -2px !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 angepasst */
 
    #TabsToolbar .tab-close-button {
    margin-right: -6px !important; 
    font-weight: bold !important;    
    fill: black !important; 
    }

    #TabsToolbar .tab-close-button .toolbarbutton-icon {
    height: 6px !important;
    width:  6px !important;    
    background-color: red !important;
    border-radius: 12px !important;
    }
    
    /* Aktiver Tab breiter */
    
    .tabbrowser-tab:not([pinned]):not([selected]) {
    min-width: 185px !important;
	min-height: 30px !important;
	max-height: 40px !important;
    flex-grow: 0 !important;
    }
	
    .tabbrowser-tab:not([pinned])[selected] {
    min-width: 200px !important;
	min-height: 30px !important;
	max-height: 40px !important;
    flex-grow: 0 !important;
    }

	/* Lautsprechersymbol größer und ohne Hintergrund */
	
	.tab-audio-button[soundplaying] {
	--button-icon-fill: blue !important;
	scale: 1.8 !important;  
	border: none !important;
	--button-background-color-ghost-hover: transparent !important;
	}
	
	/* Lautsprechersymbol blauviolett bei Sound */
	
	[soundplaying] {
		fill: blueviolet !important;
	}
  
	/* Lautsprechersymbol gelb bei stumm */
		
	.tab-audio-button[muted] {
	--button-icon-fill: yellow !important;
	scale: 1.8 !important;  
	border: none !important;
	--button-background-color-ghost-hover: transparent !important;
	}
		
    /* Tab Beschriftung mittig */
    
    .tab-content {
    display: flex !important; 
    margin-top: -6px !important;
    justify-content: center !important;
    align-items: center !important;
    }
    
    #TabsToolbar .tabbrowser-tab[selected] .tab-content {
    margin-top: 2px !important;
    }

	.tabbrowser-tab {
	min-height: 40px !important;
	max-height: 40px !important;
	}

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

    .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button {
    padding: 0  !important; 
    width: 17px !important;
	height: 17px !important;
    }

    #TabsToolbar .toolbarbutton-1 {
    min-height: 34px !important;    
    margin-top: 2px !important;    
    margin-bottom: 2px !important;
    } 
    
    #TabsToolbar .tabbrowser-tab:not([selected])  {
    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;
    }

	/* Fortschrittsanzeige für das Laden der Seite */

	.tabbrowser-tab:not([usercontextid]) > .tab-stack > .tab-background > .tab-context-line {
    opacity: 0;
    background-color: #00ff00;
    height: 6px;
	margin-inline: 8px;
    margin-top: 2px;
	border-radius: 90px;
	}
	.tabbrowser-tab:is([busy], [progress]) > .tab-stack > .tab-background > .tab-context-line {
    opacity: 1;
    transform-origin: left center;
    animation: 2s ease-in-out scale;
	}
	.tabbrowser-tab[bursting] > .tab-stack > .tab-background > .tab-context-line {
    transition: opacity 2s ease-out;
	}
	@keyframes scale {
    0% {transform: scaleX(0);}
    100% {transform: scaleX(1);}
	}

	/* Tabs mittig */

	#tabbrowser-tabs:not([overflow], [orient="vertical"]) .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
    margin-left: auto !important;
	}
	#tabbrowser-tabs:not([overflow], [orient="vertical"]) #tabbrowser-arrowscrollbox-periphery {
    margin-right: auto !important;
	
	}

	/* 1. Tababstand vom linken Rand */
	
	.tabbrowser-tab:first-child {
	margin-left: 120px !important;
	}
	
	/* Tab Pluszeichen einfärben */
	
	#tabs-newtab-button, #TabsToolbar #new-tab-button {	
    fill: red!important;
    scale: 1.8 !important;
    }

Alles anzeigen

2002Andreas

Zitat von Boersenfeger

Das Pluszeichen sollte

Ok, teste bitte, Wert evtl. anpassen:

CSS

#tabs-newtab-button {
  margin-left: 10px !important;
}

Boersenfeger

So sieht das jetzt aber wirklich guuut aus... dir einen schönen Abend und nochmals Dankeschön!

Neuer Tab Pluszeichen einfärben funktioniert nicht mehr

Ähnliche Themen

Das Script "QuickLinkButton-about-config.uc.js" funktioniert nicht mehr.

FocusSearchBox.uc.js funktioniert nicht mehr

Nach Start von FF soll sich der Fokus/Cursor im Suchfeld der Symbolleiste befinden.

Internetsuche auf der Startseite seit Version 148 außer Betrieb?

Private Tabs funktionieren nicht mehr ...

Das "DeepL-Skript" funktioniert nicht mehr richtig!