und oben in der Adresszeile ist rechts o ein symbol mti 3 Punkten udn ein stern udn ein Häkchen was vorher nicht war
Das ist neu in Firefox 57.
und oben in der Adresszeile ist rechts o ein symbol mti 3 Punkten udn ein stern udn ein Häkchen was vorher nicht war
Das ist neu in Firefox 57.
ok mist, ok schade
das ist nicht gut, sowas auch
dann noch ein problem meine tabs oben die sind so dass man gar nicht sieht die Grenze, verstehst du was ic meine? früher ewar das immer so dss ich wußte da hört das Tab auf, jetzt geht alles in eins über, das möchte ich nun auch nicht. siehe bild
@ BlackRitus
vielen Dank für deine Anleitung
hatte zwar auch erst einen kleinen Fehler gemacht (wer zu schnell liest, oder nicht alles, hat dann Probleme :lol: )
habe dann aber nicht gleich drauflos geschrieben: das geht nicht ...
eine Frage hätte ich aber noch zu dieser Änderung
bleibt das nach einem updapte so, oder muss da jedesmal wieder was gebastelt werden ?
Gruß Meinsein <;)
bleibt das nach einem updapte so
Hallo und Willkommen hier im Forum.
Der Code funktioniert so lange, bis Mozilla etwas an den Bezeichnungen ändern würde.
Und das ist sehr unwahrscheinlich, und wenn dann müsste der Code eben angepasst werden.
Ein (normales) Update ändert daran nichts.
@ 2002Andreas
das ging aber schnell
Danke für die schnelle Antwort
wollte gerade noch was dabei schreiben zu meinem Post:
das ich mich auch für die anderen Post und auch deinen sehr gefreut habe :klasse:
ZitatHallo und Willkommen hier im Forum.
hatte gerade nach einer Uservorstellung im Forum gesucht, gibt es da eine?
nach einer Uservorstellung im Forum gesucht, gibt es da eine?
Nein, sowas gibt es hier nicht.
Aber wenn du das möchtest ist das ok, dann erstell einfach unter Smalltalk ein neues Thema.
Um wieder runde Tabs zu erhalten, füge das alles darunter ein.
meine sind auch leider nicht mehr rund, bekommt man den code unter Firefox 57 wieder zum leuchten?
alt:
[Blockierte Grafik: https://picload.org/thumbnail/dddcdici/oldff56.jpg]
neu:
[Blockierte Grafik: https://picload.org/thumbnail/dddcdipw/neuff57.jpg]
code alt:
/* Change color of active tab */
.tab-background, .tab-background-middle {
background-color: transparent!important;
}
.tab-background .tab-background-middle[selected=true]{
background-image: url("chrome://browser/skin/customizableui/background-noise-toolbar.png"),url(chrome://browser/skin/tabbrowser/tab-active-middle.png), linear-gradient(#FFFFFF, rgba(255,255,255,0.1));
background-size: auto 100% !important;
}
.tab-background-start[selected=true]::before{
clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start) !important;
}
.tab-background-end[selected=true]::before{
clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end) !important;
}
.tab-background .tab-background-start[selected=true]::before,.tab-background .tab-background-end[selected=true]::before{
content: "" !important;
display: -moz-box !important;
background-color: transparent!important;
background-image: url("chrome://browser/skin/customizableui/background-noise-toolbar.png"), linear-gradient(#FFFFFF, rgba(255,255,255,0.1)) !important;
}
Alles anzeigen
:-??
Ja, ich wollte dir per pn weiterhelfen, damit das hier nicht weiter zugemüllt wird.
Hat nämlich schon lange nichts mehr mit dem Thema zu tun.Füge alles aus dem pastebin link in deine userChrome.css und du hast
- Gelbe statt graue Ordner
- Die Tabs unterhalb der Adresszeile statt oberhalb
- Die Tabs mit abgerundeten EckenSo wie du es wolltest.
Ich mach dann mal ein Päuschen...
funktioniert danke. Hast du noch ne Idee wie man die Hintergrundfarbe vom aktiven Tab anpassen kann?
:?
die Hintergrundfarbe vom aktiven Tab anpassen kann
Die Farbe musst du dir anpassen.
Der Strich oben noch... border-top-color.
Auszug original:
.tab-background[selected="true"] {
border-top-color: var(--tabs-border-color);
background-color: var(--toolbar-bgcolor);
background-image: var(--toolbar-bgimage);
background-repeat: repeat-x;
}
Einfach das nach dem Doppelpunkt ersetzen. Oder du machst dir ein Bild rein
danke für die Infos.
In einer leeren userChrome.css geht es auf diese weise prima, aber im Code mit den abgerundeten Ecken tu ich mich schwer.
hab schon viele Zeilen editiert, man kann vieles farblich ändern, aber den leeren bzw. aktiven runden Tab zu ändern finde ich nicht.
:?
: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;
}
/* Windows 7 specific */
@media (-moz-os-version: windows-win7) {
.tabbrowser-tab {
background-color: transparent !important;
border: none !important;
}
@media (-moz-windows-default-theme) {
.tabbrowser-tab:not(:-moz-lwtheme) {
background-color: transparent !important;
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;
max-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;
max-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
runden Tab zu ändern finde ich nicht
Das lässt sich auch nicht einfach ändern bzw. einfärben, weil der Hintergrund der Tabs aus 3 verschiedenen Bildern besteht.
Teste bitte mal diesen kompl. Code:
: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;
}
/* Windows 7 specific */
@media (-moz-os-version: windows-win7) {
.tabbrowser-tab {
background-color: transparent !important;
border: none !important;
}
@media (-moz-windows-default-theme) {
.tabbrowser-tab:not(:-moz-lwtheme) {
background-color: transparent !important;
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: 2px !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;
max-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;
max-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:red;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:red;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
0px,
rgb(255,000,000) 0px,
rgb(255,000,000)
),
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
[attachment=0]Zwischenablage01.jpg[/attachment]
super geht klasse ( in 59.0.1) so hab ich es auch gemeint.
:klasse:
wo hast du alles geschraubt, ich möchte ne Reihe grau Töne mal mit der zeit testen, was mir am besten gefällt?
lg
wo hast du alles geschraubt,
Da der Hintergrund der Tabs aus 3 Bildern besteht, die als svg Grafik gespeichert sind, kann man da die Farbe ändern.
Und zwar unter:
--svg-selected-before, --svg-selected-after und --background-selected-middle
Bei den beiden ersten ist es jeweils kurz vor dem Ende des Codes der Text:
style='background-color:red
Im 3ten Eintrag dann einfach nur die Farbe eintragen.
Recht und Links hab ich gefunden, und die Mitte meinst du richtig auskommentieren nach
--background-selected-middle:
z.b background-color: #777777 !important;
oder nur als grey schreiben, oder wie meinst du das mit nur rein schreiben?
Das ist der mittlere Teil:
--background-selected-middle:
linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
linear-gradient(
transparent
0px,
rgb(255,000,000) 0px,
rgb(255,000,000)
),
und das die Farbe rot als rgb Wert.
ok und der rgb Wert für grau, hast du denn gerade parat
da gibt es ja zich verschiedene, ich fang an mit suchen...
danke für deine hilfe
lg
Jetzt passt alles ,hab es mit einem Color Grabber gesucht :wink:
klasse Support :klasse: