eckige Tabs bei Quantum abrunden

Schrauberecke: Hier geht es um optische und funktionelle Veränderungen (ohne Themes oder Personas) von Firefox oder von Webseiten per CSS-Codes oder JavaScript.
Benutzeravatar
Tommy Tulpe
Junior-Mitglied
Beiträge: 14
Registriert: Sa, 29. Mär 2014 9:21

Re: eckige Tabs bei Quantum abrunden

#166

Beitrag von Tommy Tulpe » Sa, 02. Dez 2017 20:40

:wink: Nee, dass ist ein Mix aus Beidem, Aris + wilfred...
Und das Theme-Design nennt sich "blueNight"

https://addons.mozilla.org/de/firefox/addon/bluenight/

Benutzeravatar
klickman
Mitglied
Beiträge: 449
Registriert: Di, 26. Apr 2005 16:12

Re: eckige Tabs bei Quantum abrunden

#167

Beitrag von klickman » Sa, 02. Dez 2017 20:54

Tommy Tulpe hat geschrieben:
Sa, 02. Dez 2017 20:40
:wink: Nee, dass ist ein Mix aus Beidem, Aris + wilfred...
Also doch auch Aris. Hast du den Code irgendwie zerpfückt, oder beide (Aris und wilfred), so wie sie im Download angeboten werden, in die userChrome.css kopiert? Klar, bei Aris muss dann die komplette Konfiguration noch angepasst werden.
Gruß
Manfred

FF60 Beta in aktueller Version, auf MacBook Pro unter macOS Sierra 10.12.6

EffPeh
Senior-Mitglied
Beiträge: 1287
Registriert: Mi, 04. Okt 2017 10:22

Re: eckige Tabs bei Quantum abrunden

#168

Beitrag von EffPeh » Sa, 02. Dez 2017 21:00

Eins nach dem anderen. :)
Wenn ich das richtig sehe, wäre der Code von wilfredwee richtig, was die Form angeht. Also übernimm den einfach mal so. Die Farben passt du dann noch so an, wie du das gerne möchtest.
Die Buttons sind eine andere Geschichte.
Windows 10 | FF 61.0 (64-Bit) / FF 60.0 (64-Bit)

Benutzeravatar
klickman
Mitglied
Beiträge: 449
Registriert: Di, 26. Apr 2005 16:12

Re: eckige Tabs bei Quantum abrunden

#169

Beitrag von klickman » Sa, 02. Dez 2017 21:07

EffPeh hat geschrieben:
Sa, 02. Dez 2017 21:00
Eins nach dem anderen. :)
Wenn ich das richtig sehe, wäre der Code von wilfredwee richtig, was die Form angeht. Also übernimm den einfach mal so. Die Farben passt du dann noch so an, wie du das gerne möchtest.
Die Buttons sind eine andere Geschichte.
Ja, das siehst du völlig richtig! Ich begebe mich mal in die Tiefen der userChrome.css... ;-)
Gruß
Manfred

FF60 Beta in aktueller Version, auf MacBook Pro unter macOS Sierra 10.12.6

Benutzeravatar
Tommy Tulpe
Junior-Mitglied
Beiträge: 14
Registriert: Sa, 29. Mär 2014 9:21

Re: eckige Tabs bei Quantum abrunden

#170

Beitrag von Tommy Tulpe » Sa, 02. Dez 2017 21:09

Meine userChrome.css ist nur die "Schaltzentrale" für einzelne Codes, von Ari so übernommen.
Den Code von Wilfred nach Aris Art eingefügt/hinzugefügt...

Benutzeravatar
klickman
Mitglied
Beiträge: 449
Registriert: Di, 26. Apr 2005 16:12

Re: eckige Tabs bei Quantum abrunden

#171

Beitrag von klickman » Sa, 02. Dez 2017 21:28

Tommy Tulpe hat geschrieben:
Sa, 02. Dez 2017 21:09
Meine userChrome.css ist nur die "Schaltzentrale" für einzelne Codes, von Ari so übernommen.
Den Code von Wilfred nach Aris Art eingefügt/hinzugefügt...
"Schaltzentrale" soll heißen, du hast die userChrome:css so von Aris übernommen und die diversen Optionen mittels "/*" aktiv geschaltet bzw. inaktiv, korrekt? Also so z. B.:

Aktiv:

Code: Alles auswählen

@import url(./css/tabs/classic_squared_tabs_australized_aero.css); /**/	/* <-- AERO colors */
Inaktiv:

Code: Alles auswählen

/* @import url(./css/tabs/classic_squared_tabs_australized_aero.css); /**/	/* <-- AERO colors */
Gruß
Manfred

FF60 Beta in aktueller Version, auf MacBook Pro unter macOS Sierra 10.12.6

Benutzeravatar
Tommy Tulpe
Junior-Mitglied
Beiträge: 14
Registriert: Sa, 29. Mär 2014 9:21

Re: eckige Tabs bei Quantum abrunden

#172

Beitrag von Tommy Tulpe » Sa, 02. Dez 2017 21:30

Jepp :klasse:

Benutzeravatar
klickman
Mitglied
Beiträge: 449
Registriert: Di, 26. Apr 2005 16:12

Re: eckige Tabs bei Quantum abrunden

#173

Beitrag von klickman » Sa, 02. Dez 2017 21:54

Tommy Tulpe hat geschrieben:
Sa, 02. Dez 2017 21:30
Jepp :klasse:
Ok, doch der userChrome.css-Code von wilfredwee sieht ja komplett anders aus und funktioniert nicht nach diesem "@import"-System des Aris-Codes. Hast du dir den "umgebastelt", um auch mit "@import" zu arbeiten? Sorry, wenn ich mich sehr laienhaft ausdrücke, ich hab von der Materie so gut wie keine Ahnung. ;-)
Gruß
Manfred

FF60 Beta in aktueller Version, auf MacBook Pro unter macOS Sierra 10.12.6

Benutzeravatar
klickman
Mitglied
Beiträge: 449
Registriert: Di, 26. Apr 2005 16:12

Re: eckige Tabs bei Quantum abrunden

#174

Beitrag von klickman » Sa, 02. Dez 2017 21:57

Ich hab es mittlerweile geschafft, Aris' und wilfredwees Code zu kombinieren, ohne dass sie einander stören. :D Eine aktiv geschaltete Option im Aris-Code war der Übeltäter. Nämlich diese hier:

Code: Alles auswählen

/* @import url(./css/tabs/classic_squared_tabs_australized_aero.css); /**/	/* <-- AERO colors */
Vorweg siehts mal so aus:
Bildschirmfoto 2017-12-02 um 21.54.42.jpg
Gruß
Manfred

FF60 Beta in aktueller Version, auf MacBook Pro unter macOS Sierra 10.12.6

Benutzeravatar
klickman
Mitglied
Beiträge: 449
Registriert: Di, 26. Apr 2005 16:12

Re: eckige Tabs bei Quantum abrunden

#175

Beitrag von klickman » So, 03. Dez 2017 14:17

Tommy Tulpe hat geschrieben:
Sa, 02. Dez 2017 20:28
@klickman
Ich habe die Tabs "gefärbt" und "gerundet" mit dem Code von https://github.com/wilfredwee/photon-australis.
In diesem Code habe ich die Farbwerte geändert... :wink:

Bild
Verrätst du mir bitte, was genau du wo für die orange Färbung des aktiven Tabs geändert hast?
Gruß
Manfred

FF60 Beta in aktueller Version, auf MacBook Pro unter macOS Sierra 10.12.6

Benutzeravatar
edvoldi
Senior-Mitglied
Beiträge: 1866
Registriert: Mo, 18. Aug 2008 13:40

Re: eckige Tabs bei Quantum abrunden

#176

Beitrag von edvoldi » So, 03. Dez 2017 14:20

Hallo klickmann,
siehe Beitrag #121

Gruß
EDV-Oldi
WIN10 pro & WIN10 Home Version 1803 (Build17134.112)
Firefox 60.0.2 x64
Thunderbird 52.8.0 / Lightning 5.4.8
Meine Erweiterungen

Benutzeravatar
klickman
Mitglied
Beiträge: 449
Registriert: Di, 26. Apr 2005 16:12

Re: eckige Tabs bei Quantum abrunden

#177

Beitrag von klickman » So, 03. Dez 2017 14:42

Danke für den Hinweis, Beitrag 121 habe ich schon gesehen. Bloß ist das mit der Zeilennummer ein Problem, da bei unterschiedlicher Größe meines Texteditorfenster entweder mehr oder weniger Zeilen angezeigt werden und ich dadurch keine Ahnung habe, wo welche Werte angepasst werden sollen. :-???

EDIT:
Ich schätze, es müsste irgendwo in diesem Abschnitt sein? Hab null Ahnung von dem, was da drinnen steht. :roll:

Code: Alles auswählen

/* 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>");
}
Gruß
Manfred

FF60 Beta in aktueller Version, auf MacBook Pro unter macOS Sierra 10.12.6

Benutzeravatar
edvoldi
Senior-Mitglied
Beiträge: 1866
Registriert: Mo, 18. Aug 2008 13:40

Re: eckige Tabs bei Quantum abrunden

#178

Beitrag von edvoldi » So, 03. Dez 2017 14:47

Im Dark CSS sieht der Code so aus:

Code: Alles auswählen

.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)
  ),
Jetzt muss Du diesen Code (50, 50, 52) durch eine andre Farbe ersetzen.
Ich habe alle mit diesem Code durch 220, 220, 220) ersetzt.

Gruß
EDV-Oldi
WIN10 pro & WIN10 Home Version 1803 (Build17134.112)
Firefox 60.0.2 x64
Thunderbird 52.8.0 / Lightning 5.4.8
Meine Erweiterungen

Benutzeravatar
klickman
Mitglied
Beiträge: 449
Registriert: Di, 26. Apr 2005 16:12

Re: eckige Tabs bei Quantum abrunden

#179

Beitrag von klickman » So, 03. Dez 2017 15:21

Danke, doch abgesehen davon, dass ich das Standard-Theme und demnach die "default-css" verwende, finde ich im kompletten Code keinen Abschnitt, der dem deinen gleicht.
Es gibt zwar ein paar Abschnitte, in denen rgb-Werte eingetragen sind, doch keine Ahnung, welche die nötigen sind. Ich werde mal mittels "trial and error" durchtesten.
Gruß
Manfred

FF60 Beta in aktueller Version, auf MacBook Pro unter macOS Sierra 10.12.6

Benutzeravatar
edvoldi
Senior-Mitglied
Beiträge: 1866
Registriert: Mo, 18. Aug 2008 13:40

Re: eckige Tabs bei Quantum abrunden

#180

Beitrag von edvoldi » So, 03. Dez 2017 15:27

Das

Code: Alles auswählen

.tab-background[selected="true"] > spacer {
  background-image:
  linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
  linear-gradient(
    transparent
    2px,
    rgb(255,255,255) 2px,
    rgb(255,255,255)
  ),
sollte beim default Thema stehen.


Gruß
EDV-Oldi
WIN10 pro & WIN10 Home Version 1803 (Build17134.112)
Firefox 60.0.2 x64
Thunderbird 52.8.0 / Lightning 5.4.8
Meine Erweiterungen

Antworten

Wer ist online?

Mitglieder in diesem Forum: Boersenfeger und 6 Gäste