Beiträge von klickman

klickman

Zitat von 2002Andreas

Es kann natürlich sein, dass sich da was ins Gehege kommt wie man so sagt. :-??

Das kann ich aus eigener Erfahrung bestätigen!

superbertel:
Wenn du den Aris-Code verwendest, dann dienen die Einträge in der userChrome.css dazu, je nach aktivierter Option, die Funktion mittels "@import" zu aktivieren.
Was genau hinter der Funktion steckt, erfährst du, wenn du der jeweiligen Pfadangabe in der Option in den angegebenen Unterordnerordner (im Ordner chrome > css oder image oder xml) folgst. In der entsprechenden (in der Option verlinkten) Datei steht dann der Code, der effektiv aktiviert wird. In einer dieser ist vermutlich der Hebel anzusetzen.

klickman · Bildschirmfoto 2017-12-04 um 20.47.41.jpg

Hallo Kollegern,

ich hatte hier danach gefragt:

Zitat

Stattdessen soll sich die Fortschrittsanzeige in der URL-Bar befinden. Bis FF56 war das durch die Erweiterung Status-4-Evar möglich und sah bei mir so aus:
[attachment=1]Fortschritt FF56.jpg[/attachment]

Nun habe ich dieses Script hier gefunden:

CSS

/* LoadingBar.uc.js */


(function(){
//Location Bar Enhancer5.1;Loading Bar0.3.0
	var cssStr = (function(){/*
			#urlbar {
				background-image: -moz-repeating-linear-gradient(top -45deg, rgba(255,255,255,0), rgba(255,255,255,0) 6px, rgba(255,255,255,1) 6px, rgba(255,255,255,1) 12px), -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(17,238,238,.7) 100%);
				background-size:0 0;
				background-repeat:repeat-x, no-repeat;
				transition: background-size 350ms ease 0s !important;
			}
			#urlbar:not([style="background-size: 0% 100%;"]) {
				animation: progress-bar-stripes 2s linear infinite;
			}
			@-moz-keyframes progress-bar-stripes {
				from {
					background-position: 0, 0;
				}
				to {
					background-position: 51px 0, 0;
				}
			}
	*/}).toString().replace(/^.+\s|.+$/,"");

	var style = document.createProcessingInstruction("xml-stylesheet", "type=\"text/css\"" + " href=\"data:text/css;base64," + btoa(cssStr) + "\"");
	var mainW = document.getElementById("main-window");
	document.insertBefore(style, mainW);


	function main(window) {
	  var {document, gBrowser} = window;
	  function $(id) document.getElementById(id);
	  var urlbar = $("urlbar");
	  let pageProgress = 0;
	  let async = makeWindowHelpers(window).async;
	  var LoadingBar = {
		listener: {
		  onChangeTab: function(e) {
			urlbar.style.backgroundSize = '0% 100%';
			pageProgress = 0;
		  },
		  onProgressChange: function(aBrowser,webProgress,request,curSelfProgress,maxSelfProgress,curTotalProgress,maxTotalProgress) {
			if (gBrowser.contentDocument === aBrowser.contentDocument) {
				var val = (curTotalProgress-1)/(maxTotalProgress-1);
				pageProgress = val;
				urlbar.style.backgroundSize = (100*val) + '% 100%';
				if (val > 0.9)
				  async(function() {
					if (pageProgress > 0.95)
						urlbar.style.backgroundSize = '100% 100%';
				}, 1000);
			}
		  },
		  onStateChange: function() {
			if (pageProgress > 0.95){
				async(function() {
					urlbar.style.backgroundSize = '0% 100%';
					pageProgress = 0;
				}, 1000);
			}else{
				urlbar.style.backgroundSize = '0% 100%';
			}
		  }
		}
	  };


	  gBrowser.tabContainer.addEventListener('TabSelect',LoadingBar.listener.onChangeTab,false);
	  gBrowser.addTabsProgressListener(LoadingBar.listener);


	  unload(function() {
		gBrowser.tabContainer.removeEventListener('TabSelect',LoadingBar.listener.onChangeTab,false);


		gBrowser.removeTabsProgressListener(LoadingBar.listener);
	  }, window);
	}






	watchWindows(main, "navigator:browser");


	function runOnLoad(window, callback, winType) {
	  window.addEventListener("load", function() {
		window.removeEventListener("load", arguments.callee, false);


		if (window.document.documentElement.getAttribute("windowtype") == winType)
		  callback(window);
	  }, false);
	}


	function runOnWindows(callback, winType) {
	  function watcher(window) {
		try {
		  callback(window);
		}
		catch(ex) {}
	  }


	  let browserWindows = Services.wm.getEnumerator(winType);
	  while (browserWindows.hasMoreElements()) {
		let browserWindow = browserWindows.getNext();
		if (browserWindow.document.readyState == "complete")
		  watcher(browserWindow);
		else
		  runOnLoad(browserWindow, watcher, winType);
	  }
	}


	function watchWindows(callback, winType) {
	  function watcher(window) {
		try {
		  callback(window);
		}
		catch(ex) {}
	  }


	  runOnWindows(callback, winType);


	  function windowWatcher(subject, topic) {
		if (topic == "domwindowopened")
		  runOnLoad(subject, watcher, winType);
	  }
	  Services.ww.registerNotification(windowWatcher);


	  unload(function() Services.ww.unregisterNotification(windowWatcher));
	}


	function unload(callback, container) {
	  let unloaders = unload.unloaders;
	  if (unloaders == null)
		unloaders = unload.unloaders = [];


	  if (callback == null) {
		unloaders.slice().forEach(function(unloader) unloader());
		unloaders.length = 0;
		return null;
	  }


	  if (container != null) {
		container.addEventListener("unload", removeUnloader, false);


		let origCallback = callback;
		callback = function() {
		  container.removeEventListener("unload", removeUnloader, false);
		  origCallback();
		}
	  }


	  function unloader() {
		try {
		  callback();
		}
		catch(ex) {}
	  }
	  unloaders.push(unloader);




	function removeUnloader() {
		let index = unloaders.indexOf(unloader);
		if (index != -1)
		  unloaders.splice(index, 1);
	  }
	  return removeUnloader;
	}

	function makeWindowHelpers(window) {
	  let {clearTimeout, setTimeout} = window;


	  function async(callback, delay) {
		delay = delay || 0;
		let timer = setTimeout(function() {
		  stopTimer();
		  callback();
		}, delay);


		function stopTimer() {
		  if (timer == null)
			return;
		  clearTimeout(timer);
		  timer = null;
		}
	  }


	  return {
		async: async,
	  };
	}


})();

Alles anzeigen

Bewirkt in meinem 57er folgendes:
[attachment=0]Bildschirmfoto 2017-12-04 um 20.47.41.jpg[/attachment]

Frage: Das Muster gefällt mir, nur wie lässt sich die Farbe ändern, z. B. in ein helles Grau?

klickman

Zitat von stronzo

Dankeschön.Den Code schreib ich dann wohin? In die userchrom.css?

Jein! Die Datei heißt userChrome.css und liegt im Ordner chrome im Profilordner..

klickman

Dato: Perfekt, vielen Dank!! :klasse:

klickman

Doch noch eine Frage: Kannst du mir bitte auch den Code für die inaktiven Tabs nennen? Vielen Dank!

klickman

Zitat von foto59

Aber die Datei userChrome.css habe ich ja schon, muss ich den Inhalt der neuen in meine vorhandene reinkopieren?

War bei mir auch so. Ich habe meine in chrome belassen und die aus dem Paket nicht kopiert. Auch nicht den Text übernommen.

klickman

Dein Code ist für mich jetzt wieder sichtbar. Mysteriös.

klickman

Seltsam, ich konnte den Code gerade noch kopieren und in die userChrome.css einfügen. :-?? Klappt tadellos im aktiven Tab.

klickman

Sorry, mea culpa. Im aktiven Tab meinte ich. Und danke, klappt wunderbar!

klickman

Zitat von foto59

In welche Datei muss ich den Hinweis auf die TabFocus.uc.js eintragen? Und in welcher Form?

Gar nicht. Browser neu starten, dann sollte das Script aktiv sein und arbeiten.

EDIT:
Und der Ordner sollte chrome heißen

klickman · Bildschirmfoto 2017-12-03 um 20.20.26.jpg

Kollegen, wie kann ich die Schrift in den Tabüberschriften vergrößern?

[attachment=0]Bildschirmfoto 2017-12-03 um 20.20.26.jpg[/attachment]

klickman

Dein Code, der den Throbber aus FF56 wieder herstellt, ist genau richtig für mich! Wahnsinn. Vielen herzlichen Dank!! :klasse:

klickman

Sensationell 2002Andreas, das ging ja in Lichtgeschwindigkeit! Vielen Dank! :klasse:
Solange es für die URL-Bar nichts gibt, werde ich zumindest den wandernden Punkt behalten. Dieser Farbschleier allerdings bleibt beerdigt.

klickman · Bildschirmfoto 2017-12-03 um 13.12.10.jpg

Hallo Kollegen,

nachdem ich meinen 57er mit eurer Hilfe nun schon recht ansehnlich und für mich brauchbar gestaltet habe, gehts hurtig weiter.
Ich verwende die CustomCSSforFx]CustomCSSforFx von Aris und die Curved Tabs von wilfredwee. Ich erwähne das, weil sich ev. in einem der beiden der Code für meine gewünschten Veränderungen verbirgt.

Mein Anliegen:
Ich hätte gerne die Fortschritts- bzw. Ladeanzeige direkt im Tab ausgeblendet. Das ist zum einen dieser links/rechts pendelnde Punkt
[attachment=2]Bildschirmfoto 2017-12-03 um 13.09.49.jpg[/attachment]

und zum anderen dieser Farbschleier, der während des Ladens von links nach rechts wandert
[attachment=1]Bildschirmfoto 2017-12-03 um 13.12.10.jpg[/attachment]

Stattdessen soll sich die Fortschrittsanzeige in der URL-Bar befinden. Bis FF56 war das durch die Erweiterung Status-4-Evar möglich und sah bei mir so aus:
[attachment=0]Fortschritt FF56.jpg[/attachment]

Lässt sich das irgendwie nachbauen?

klickman

Zitat von brick

Nein, muß er nicht, die "alte" Version läuft problemlos unter Linux, denn Linux ist nicht MacOS.

Danke für den Hinweis!

Dass Linux und macOS nicht das Gleiche ist, ist klar. Doch da der Unterbau bei beiden gleich ist, lag die Vermutung nahe. Wie dem auch sei, die von aborix angepasste config.js ist lt. seiner Aussage nun für alle Betriebssysteme nutzbar.

klickman

milupo:
Wobei er aus meiner Sicht allerdings die angepasste config.js (für macOS) verwenden müsste.

klickman · Bildschirmfoto 2017-12-03 um 16.42.04.jpg

Perfekt, danke! :klasse:

[attachment=0]Bildschirmfoto 2017-12-03 um 16.42.04.jpg[/attachment]

klickman · Bildschirmfoto 2017-12-03 um 16.34.39.jpg

Zitat von edvoldi

teste einmal diesen Code:

CSS

:root {
  --tab-curve-width: 30px;
  --tabs-border: transparent !important;
}


.arrowscrollbox-scrollbox {
  padding-inline-start: 10px !important;
}


/* To be able to see the top border of the tab */
.tab-stack {
  margin-top: 2px !important;
}


/* When the window is maximized, the first pinned tab is properly displayed. */
#TabsToolbar  {
  padding-inline-start: 15px !important;
}


.titlebar-placeholder {
  border: none !important;
}


/* Remove unneeded styles from Photon */
.tabbrowser-tab::before,
.tabbrowser-tab::after {
  border: none !important;
}


.tabbrowser-tab > .tab-stack > .tab-background {
  background-image: none !important;
  -moz-box-orient: horizontal !important;
  background-color: transparent !important;
  margin-top: 1px !important;
}


.tab-background[selected="true"] {
  border: none !important;
}


.tab-line {
  display: none !important;
}


.tab-bottom-line {
  display: none !important;
}


/* Match height of new tab button (right svg) on hover */
.tabs-newtab-button {
  margin: 0 !important;
}


/* overlap the tab curves */
.tab-background {
  -moz-margin-end: -15px !important;
  -moz-margin-start: -15px !important;
}


/* Begin tab background customizations */
.tab-background[selected="true"]::before {
  border: none !important;
  content: "" !important;
  width: 30px !important;
  min-height: 30px !important;
  display: -moz-box !important;
  background-repeat: no-repeat !important;
}


.tab-background[selected="true"]::after {
  border: none !important;
  content: "" !important;
  width: 30px !important;
  min-height: 30px !important;
  display: -moz-box !important;
  background-repeat: no-repeat !important;
}


.tab-background[selected="true"] > spacer {
  margin-top: 0px !important;
}


#new-tab-button,
.tabs-newtab-button {
  width: calc(36px + 30px) !important;
  margin-inline-start: -15px !important;
  margin-top: 1px !important;
}


/* Tab hover customizations */


/* Regular tabs */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
  display: -moz-box !important;
  background-repeat: no-repeat !important;
  content: "" !important;
  width: 30px !important;
  min-height: 30px !important;
  background-color: transparent !important;
}


.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
  display: -moz-box !important;
  background-repeat: no-repeat !important;
  content: "" !important;
  width: 30px !important;
  min-height: 30px !important;
  background-color: transparent !important;
}


.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
  margin-top: 0px !important;
}


#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]),
.tabs-newtab-button:hover,
.tabs-newtab-button:hover::before,
.tabs-newtab-button:hover::after {
  background-color: transparent !important;
}


/* New tab hover customizations */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]), .tabs-newtab-button:hover {
  background-position: 0px 2px, 30px 3px , right bottom !important;
  background-repeat: no-repeat !important;
  background-size: 30px 30px, calc(100% - (2 * 30px)) 30px, 30px !important;
}


.tabs-newtab-button:hover > .toolbarbutton-icon {
  background: none !important;
  background-color: transparent !important;
}


/* Color specific customizations */
.tab-background[selected="true"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgb(50, 50, 52);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important;
}
.tab-background[selected="true"]::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgb(50, 50, 52);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important;
}


.tab-background[selected="true"] > spacer {
  background-image:
  linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
  linear-gradient(
    transparent
    2px,
    rgb(50, 50, 52) 2px,
    rgb(50, 50, 52)
  ),
  none !important;
}


.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255, .1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important;
}


.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>") !important;
}


.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
  background-image:
  linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
  linear-gradient(
    transparent
    2px,
    rgba(255,255,255,.1) 2px,
    rgba(255,255,255,.1)
  ),
  none !important;
}


.tabs-newtab-button:hover {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgba(255,255,255,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"),
    linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgba(255,255,255,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>")
    !important;
}

Alles anzeigen

Gruß
EDV-Oldi

Spitze, EDV-Oldi! Das färbt mir nur den aktiven Tab ein, genau das wollte ich. :klasse:
Ich nehme an, du hast die Werte 50,50,52 verwendet?? Dann kann ich danach suchen und durch meine gewünschten (255,153,102) ersetzen.

EDIT:
Es müssten diese 4 Stellen sein, korrekt?
[attachment=0]Bildschirmfoto 2017-12-03 um 16.34.39.jpg[/attachment]

klickman

Zitat von edvoldi

Ich würde die Werte einmal drastisch verändert.
Z.B. 60,60,60,

An den Farbwerten liegts nicht, ich weiß, welche ich benutzen möchte. Die Frage ist bloß, welche bzw. wo die zu finden sind? Wie gesagt, ich finde den Abschnitt, den du gepostet hast, nirgendwo im Code.

klickman

Tut es aber nicht. Hier der gesamte wilfredwee-Code, den ich in meiner userChrome.css stehen hab:

CSS

/*Geschweifte Tabs nach wilfredwee*/


:root {
  --tab-curve-width: 30px;
  --tabs-border: transparent !important;
}


.arrowscrollbox-scrollbox {
  padding-inline-start: 10px !important;
}


/* To be able to see the top border of the tab */
.tab-stack {
  margin-top: 2px !important;
}


/* When the window is maximized, the first pinned tab is properly displayed. */
#TabsToolbar  {
  padding-inline-start: 15px !important;
}


.titlebar-placeholder {
  border: none !important;
}


/* Remove unneeded styles from Photon */
.tabbrowser-tab::before,
.tabbrowser-tab::after {
  border: none !important;
}


.tabbrowser-tab > .tab-stack > .tab-background {
  background-image: none !important;
  -moz-box-orient: horizontal !important;
  background-color: transparent !important;
  margin-top: 1px !important;
}


.tab-background[selected="true"] {
  border: none !important;
}


.tab-line {
  display: none !important;
}


.tab-bottom-line {
  display: none !important;
}


/* Match height of new tab button (right svg) on hover */
.tabs-newtab-button {
  margin: 0 !important;
}


/* overlap the tab curves */
.tab-background {
  -moz-margin-end: -15px !important;
  -moz-margin-start: -15px !important;
}


/* Begin tab background customizations */
.tab-background[selected="true"]::before {
  border: none !important;
  content: "" !important;
  width: 30px !important;
  min-height: 30px !important;
  display: -moz-box !important;
  background-repeat: no-repeat !important;
}


.tab-background[selected="true"]::after {
  border: none !important;
  content: "" !important;
  width: 30px !important;
  min-height: 30px !important;
  display: -moz-box !important;
  background-repeat: no-repeat !important;
}


.tab-background[selected="true"] > spacer {
  margin-top: 0px !important;
}


#new-tab-button,
.tabs-newtab-button {
  width: calc(36px + 30px) !important;
  margin-inline-start: -15px !important;
  margin-top: 1px !important;
}


/* Tab hover customizations */


/* Regular tabs */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
  display: -moz-box !important;
  background-repeat: no-repeat !important;
  content: "" !important;
  width: 30px !important;
  min-height: 30px !important;
  background-color: transparent !important;
}


.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
  display: -moz-box !important;
  background-repeat: no-repeat !important;
  content: "" !important;
  width: 30px !important;
  min-height: 30px !important;
  background-color: transparent !important;
}


.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
  margin-top: 0px !important;
}


#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]),
.tabs-newtab-button:hover,
.tabs-newtab-button:hover::before,
.tabs-newtab-button:hover::after {
  background-color: transparent !important;
}


/* New tab hover customizations */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected="true"]), .tabs-newtab-button:hover {
  background-position: 0px 2px, 30px 4px , 36px 2px !important;
  background-repeat: no-repeat !important;
  background-size: 30px 30px, calc(100% - (2 * 30px)) 30px, 30px !important;
}


.tabs-newtab-button:hover > .toolbarbutton-icon {
  background: none !important;
  background-color: transparent !important;
}




/* Color specific customizations */
:root {
  --svg-selected-before: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgb(249,249,250);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");


  --svg-selected-after: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgb(249, 249, 255);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");


  --background-selected-middle:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
    linear-gradient(
      transparent
      2px,
      rgb(249,249,255) 2px,
      rgb(249,249,255)
    ),
    none;


  --svg-hover-before: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='30px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='30' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255, .1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");


  --svg-hover-after: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgba(255, 255, 255,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");


  --background-hover-middle:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
    linear-gradient(
      transparent
      2px,
      rgba(255,255,255,.1) 2px,
      rgba(255,255,255,.1)
    ),
    none;


  --newtab-hover: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='30px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-start)'><div id='tab-background-fill' style='background-color:rgba(255,255,255,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>"),
  linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,.1)),
  url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg' width='30px' height='31px' preserveAspectRatio='none'><defs><svg:clipPath id='tab-curve-clip-path-start' clipPathUnits='objectBoundingBox'><svg:path d='m 1,0.0625 0.05,0 0,0.938 -1,0 0,-0.028 C 0.32082458,0.95840561 0.4353096,0.81970962 0.48499998,0.5625 0.51819998,0.3905 0.535,0.0659 1,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-curve-clip-path-end' clipPathUnits='objectBoundingBox'><svg:path d='m 0,0.0625 -0.05,0 0,0.938 1,0 0,-0.028 C 0.67917542,0.95840561 0.56569036,0.81970962 0.51599998,0.5625 0.48279998,0.3905 0.465,0.0659 0,0.0625 z'/></svg:clipPath><svg:clipPath id='tab-hover-clip-path' clipPathUnits='objectBoundingBox'><svg:path d='M 0,0.2 0,1 1,1, 1,0.2 z'/></svg:clipPath></defs><foreignObject width='30' height='31' clip-path='url(%23tab-curve-clip-path-end)'><div id='tab-background-fill' style='background-color:rgba(255,255,255,.1);background-repeat:no-repeat;height:100%;width:100%;' xmlns='http://www.w3.org/1999/xhtml'></div></foreignObject></svg>");
}




/* OS-specific color variables */
@media screen and (-moz-windows-theme) {
  :root {


  }
}


@media not screen and (-moz-windows-theme) {
  :root {


  }
}


.tab-background[selected="true"]::before {
  background-image: var(--svg-selected-before) !important;
}


.tab-background[selected="true"]::after {
  background-image: var(--svg-selected-after) !important;
}


.tab-background[selected="true"] > spacer {
  background-image: var(--background-selected-middle) !important;


}


.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::before {
  background-image: var(--svg-hover-before) !important;
}


.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true])::after {
  background-image: var(--svg-hover-after)  !important;
}


.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) > spacer {
  background-image: var(--background-hover-middle) !important;


}


.tabs-newtab-button:hover {
  background-image: var(--newtab-hover) !important;
}

Alles anzeigen

Beiträge von klickman

Höhe der Tabs ändern ?

LoadingBar.uc.js - Script für Ladefortschritt in URL-Bar: Farbe ändern?

Schriftgröße in den Tabreitern verändern?

Schriftgröße in den Tabreitern verändern?

Schriftgröße in den Tabreitern verändern?

TabMixPlus kleiner Ersatz

Schriftgröße in den Tabreitern verändern?

Schriftgröße in den Tabreitern verändern?

Schriftgröße in den Tabreitern verändern?

TabMixPlus kleiner Ersatz

Schriftgröße in den Tabreitern verändern?

Fortschrittanzeige und Animation im Tab ausblenden, dafür in URL-Bar

Fortschrittanzeige und Animation im Tab ausblenden, dafür in URL-Bar

Fortschrittanzeige und Animation im Tab ausblenden, dafür in URL-Bar

TabMixPlus kleiner Ersatz

TabMixPlus kleiner Ersatz

eckige Tabs bei Quantum abrunden

eckige Tabs bei Quantum abrunden

eckige Tabs bei Quantum abrunden

eckige Tabs bei Quantum abrunden