Neuer Tab Pluszeichen einfärben funktioniert nicht mehr

Webmark

Sieht für mich aufgrund der Größe eher wie ein Kreuz, als ein Pluszeichen aus, doch Hauptsache dir gefällt es nun.

2002Andreas

Zitat von Boersenfeger

dir einen schönen Abend und nochmals Dankeschön!

Danke, das wünsche ich dir auch, war gern geschehen

Wenn du mal Lust hast, dann teste doch mal diesen veränderten Code.

Damit ist z.B. der Tabtext auch wieder mittig, wie er sein soll laut deinem 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], [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 !important;
    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 */

 .tabbrowser-tab[visuallyselected] .tab-label-container {
   margin: auto !important;  /*nur wenn Tabs schmaler gemacht sind, sonst auskommentieren*/
  height: unset !important;
  display: grid !important;
  justify-items: safe center !important;
  justify-content: safe center !important;
} 
    
/*     .tab-content {    
    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;
    }
	
	#tabs-newtab-button {
  margin-left: 10px !important;
  }

Alles anzeigen

Boersenfeger

Guten Morgen,

Dein Code hat hier in meinem Nightly folgende Auswirkung:

Mein bisheriger Code:

2002Andreas

Zitat von Boersenfeger

folgende Auswirkung:

Ok, dann vergiss ihn bitte wieder, war ein Versuch.

Boersenfeger

Jetzt stimmt allerdings der Abstand vom Pluszeichen zum letzten Tab nicht mehr...

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;
	}
	
	/* Tab Pluszeichen einfärben */
	
	#tabs-newtab-button, #TabsToolbar #new-tab-button {	
    fill: red!important;
    scale: 1.8 !important;
    }
	#tabs-newtab-button {
	margin-left: 10px !important;
	}

Alles anzeigen

..auch das Verändern des Wertes in Zeile 221 auf zum Beispiel 50px bewirkt nichts

2002Andreas

Zitat von Boersenfeger

Jetzt stimmt allerdings der Abstand vom Pluszeichen zum letzten Tab nicht mehr...

K.A. was das bei dir immer ist

Hier sieht das mit dem Code so aus:

bei nur einem Tab:

Bei 20 Tabs:

Boersenfeger

Ich habe jetzt das Schließkreuz ein paar Pixel nach links gerückt und den PlusButton verkleinert, so komme ich dann wohl zurecht. 😇

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: -4px !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;
	}
	
	/* Tab Pluszeichen einfärben */
	
	#tabs-newtab-button, #TabsToolbar #new-tab-button {	
    fill: red!important;
    scale: 1.0 !important;
    }
    #tabs-newtab-button {
	margin-left: 10px !important;
	}

Alles anzeigen

2002Andreas

Zitat von Boersenfeger

so komme ich dann wohl zurecht.

Wenn dir das so reicht, ok.

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!