eckige Tabs bei Quantum abrunden

Moin, moin...
mal was Neues, für die, die es interessiert: Ein User hat den Code von Wilfred etwas modifiziert und ihn zur Verfügung gestellt.
https://github.com/wilfredwee/photon-australis/issues/22
Das Ergebnis ist als Bild eingefügt, und es funktioniert auch, wenn die Tabs "unten" sind :klasse:
Das "einfärben" des aktiven Tabs funktioniert auch wie vorher, an der richtigen Stelle im Code.

Seit gut einer Woche existiert auch ein neuer Code (Fix) für Windows 7 User, kann ich aber nix zu sagen...

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

der ist besser als der auf Seite 1 denn hier sind auch die unteren Rundungungen am Reiter.
Was mir an dem auf Seite 1 besser gefiel war oben der blaue Strichhintergrund aber man kann ja nicht alles haben dafür ist der aktive jetzt grün mit schwarzem Strichhintergrund mit (45,153,102) hinbekommen aber den werde ich noch etwas auf hellen gibt es irgendwo eine Seite im www wo man die Farben direkt ausprobieren kann
und wenn es nicht zu viel Aufwand ist wie man das schwarze wieder blau bekommt, aber wirklich nur wenn es nicht zu viel Aufwand ist

Zitat von Charmante Piper

gibt es irgendwo eine Seite im www wo man die Farben direkt ausprobieren kann

So was hier? http://drpeterjones.com/colorcalc/

danke Manfred das wäre mal gelöst den Reiter-Hintergrund werde ich vielleicht selbst lösen (googeln oder mein html-wissen erweitern

Zitat von Charmante Piper

den Reiter-Hintergrund werde ich vielleicht selbst lösen (googeln oder mein html-wissen erweitern

Ohne jetzt genau nachgelesen zu haben, was du genau verändern möchtest, hier der Inhalt meiner "custom_tab_color_settings.css", mit der alle möglichen Farben von allen möglichen Arten von Tabs verändert werden können, entnommen von hier: https://github.com/aris-t2/customcssforfx
Vielleicht hilft dir das eine oder andere Codeschnippsel weiter. Farben kannst du individuell anpassen.
Empfehle dir auch, die komplette "customcssforfx"-Geschichte anzusehen. Damit kannst du extrem vieles am Aussehen des FF manipulieren.

/* Firefox Quantum userChrome.css tweaks ************************************************/
/* Github: https://github.com/aris-t2/customcssforfx ************************************/
/****************************************************************************************/




/* color names, hexcodes, rgb(a) and hsl(a) and gradients can be used */


:root {
	--default_tabs_bg_selected: linear-gradient(to bottom,#FF8800,#FFCC99);
	--default_tabs_toolbar_background: linear-gradient(to bottom,#FFCC99,#FFCC99);
	--default_tabs_bg_hovered: linear-gradient(to bottom,#FF9900,#FF6600);
	--default_tabs_bg_unloaded: linear-gradient(to bottom,#FFCC99,#CCCCCC);
	--default_tabs_bg_newtab: linear-gradient(to bottom,#FFCC99,#CCCCCC);
	--default_tabs_bg_newtab_hovered: linear-gradient(to bottom,#FF9900,#FF6600);
}




/* selected tab ****************************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[selected] .tab-content {
  background: var(--default_tabs_bg_selected) !important;
}
/* background color on toolbars */
/*#main-window #navigator-toolbox toolbar:not(#TabsToolbar):not(#toolbar-menubar) {
  background: var(--default_tabs_toolbar_background) !important;
}*/


/* background color for 'tabs below navigation toolbar' option */
/*#main-window #navigator-toolbox #TabsToolbar {
  background: var(--default_tabs_toolbar_background) !important;
}*/


/* default tab *****************************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab .tab-content {
  background: var(--default_tabs_bg_default) !important;
}


/* hovered tab ****************************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab:hover:not([selected]) .tab-content {
  background: var(--default_tabs_bg_hovered) !important;
}


/* unloaded/pending tab ********************/
#TabsToolbar #tabbrowser-tabs .tabbrowser-tab[pending] .tab-content {
  background: var(--default_tabs_bg_unloaded) !important;
}


/* new tab *********************************/
#TabsToolbar #tabbrowser-tabs .tabs-newtab-button {
  background: var(--default_tabs_bg_newtab) !important;
}


/* hovered new tab *************************/
#TabsToolbar #tabbrowser-tabs .tabs-newtab-button:hover {
  background: var(--default_tabs_bg_newtab_hovered) !important;
}

https://technikblog.gerhard-kerner.at/index.php?/arc…ordmitteln.html
/* Farbe für inaktiven Tab */

.tabbrowser-tabs tab {
background:#5f6acc !important;
}
hat nichts gebracht

aber ich habe die richtige Stelle gefunden meine Inaktiven tabs sind jetzt blau:
wo die Farbe steht stand: transparent

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

Zitat von spiderman

Die Ecken werden aber nicht abgerundet. Was mache ich evtl. falsch?

Zitat von spiderman

LÖSUNG gefunden:

Was denn nun? Besteht das Problem noch oder nicht?

Zitat

Einmal editiert, zuletzt von spiderman (Vor 5 Stunden) aus folgendem Grund: [gelöst]

Ach so, habe ich überlesen. Hätte er aber dennoch klarer in seinem Beitrag formulieren können, z. B. „Problem hat sich erledigt.“