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
spiderman
Mitglied
Beiträge: 391
Registriert: Fr, 09. Mai 2003 13:23

eckige Tabs bei Quantum abrunden

#1

Beitrag von spiderman Themen-Starter » Di, 14. Nov 2017 17:04

Hallo,

bin mit Quantum zufrieden, nur die eckige Tabs stören mein Surfkomfort. Wie kann ich die Tabs abrunden?
Demo-Zugang Hubzilla-Installation https://demo.hubzilla.org username: demo, password: hubzillademo
Was ist Hubzilla? - https://project.hubzilla.org/help/about
Hubzilla-Features - https://project.hubzilla.org/help/features
Hubzilla verbindet Menschen - https://hub.libranet.de/page/hucope/hub ... _theses_de

Benutzeravatar
HT-Frogger
Senior-Mitglied
Beiträge: 686
Registriert: Mo, 18. Jan 2016 22:14
Wohnort: Hamburg

Re: eckige Tabs bei Quantum abrunden

#2

Beitrag von HT-Frogger » Di, 14. Nov 2017 17:16

Für die userChrome.css:

Code: Alles auswählen

#TabsToolbar .tabbrowser-tab {
  border-radius: 10px 10px 0 0 !important;
}
Damit sind sie oben abgerundet, den Wert bitte anpassen. Das geschwungene ist mir zu schwierig...

Gruß Harry
FF aktuell/beta/nightly, 64Bit, Linux, openSUSE Leap mit KDE

Benutzeravatar
spiderman
Mitglied
Beiträge: 391
Registriert: Fr, 09. Mai 2003 13:23

Re: eckige Tabs bei Quantum abrunden

#3

Beitrag von spiderman Themen-Starter » Di, 14. Nov 2017 17:41

Ich habe in diesem Pfad
Profilepfad\ft9jgz6l.profilname\chrome\ eine userChrome.css erstellt und das hier

Code: Alles auswählen

#TabsToolbar .tabbrowser-tab {
  border-radius: 10px 10px 0 0 !important;
}
erfasst und Firefox neu gestartet. Die Tabs sind immer noch eckig. Habe probeweise die border-radius:-Werte vergrößert und den Browser neu gestartet - ohne Ergebnis. Was mache ich falsch?
Demo-Zugang Hubzilla-Installation https://demo.hubzilla.org username: demo, password: hubzillademo
Was ist Hubzilla? - https://project.hubzilla.org/help/about
Hubzilla-Features - https://project.hubzilla.org/help/features
Hubzilla verbindet Menschen - https://hub.libranet.de/page/hucope/hub ... _theses_de

Benutzeravatar
Msfreak
Senior-Mitglied
Beiträge: 924
Registriert: Mo, 14. Aug 2017 16:33
Wohnort: Hamburg

Re: eckige Tabs bei Quantum abrunden

#4

Beitrag von Msfreak » Di, 14. Nov 2017 17:45

Ich bin froh dass die runden "Dinger" wieder weg sind (ein Abklatsch von Google Chrome) und außerdem Firefox 57 :klasse: :klasse: :klasse:
Aber, Mozilla kann es eben nicht jeden recht machen. Kommt was Neues, schreien viele nach dem Alten (Classic Themen Restorer), aber dafür gibt es hier unsere Spezis mir ihren Scripten 8)
Gruß Micha

Ich beantworte keine technische Fragen per PN, ICQ, Email, sondern nur in diesem Forum!

Benutzeravatar
Boersenfeger
Senior-Mitglied
Beiträge: 51430
Registriert: So, 21. Mär 2004 13:21
Wohnort: Brunswiek anne Oker dranne

Re: eckige Tabs bei Quantum abrunden

#5

Beitrag von Boersenfeger » Di, 14. Nov 2017 17:49

und Aris, der ja durchaus weiter bastelt...
https://github.com/Aris-t2/CustomCSSforFx
Einzelne Codes können kopiert und eingesetzt werden..
https://github.com/Aris-t2/CustomCSSfor ... lassic/css
..dann den gewünschten Teilbereich anklicken.. :)
Stand 22.6.2018
Mozilla/5.0 (Windows NT 6.1 Win64 x64 rv:60.0) 20100101 Firefox/60.0.2
Mozilla/5.0 (Windows NT 6.1 Win64 x64 rv:61.0) 20180621 Firefox/61.0rc3
Mozilla/5.0 (Windows NT 6.1 Win64 x64 rv:62.0) 20180622 Firefox/62.0a1

Meine Füchse|Fehlersuche|Anleitung für Fragen im Forum|Sicherheitskonzept für Windowsnutzer

Benutzeravatar
spiderman
Mitglied
Beiträge: 391
Registriert: Fr, 09. Mai 2003 13:23

Re: eckige Tabs bei Quantum abrunden

#6

Beitrag von spiderman Themen-Starter » Di, 14. Nov 2017 18:10

Ich wäre für detailliertere Beschreibung dankbar. Ich habe probeweise von hier die classic_squared_tabs_transparent.css eingebunden. Hat scheinbar funktioniert. Dann habe ich eine round.css mit diesem Inhalt

Code: Alles auswählen

#TabsToolbar .tabbrowser-tab {
  border-radius: 10px 10px 0 0 !important;
}
erstellt und genauso wie classic_squared_tabs_transparent.css eingebunden. Hat leider nichts gebracht. Passende CSS hier hier sehe ich nicht. Wie komme ich weiter?
Demo-Zugang Hubzilla-Installation https://demo.hubzilla.org username: demo, password: hubzillademo
Was ist Hubzilla? - https://project.hubzilla.org/help/about
Hubzilla-Features - https://project.hubzilla.org/help/features
Hubzilla verbindet Menschen - https://hub.libranet.de/page/hucope/hub ... _theses_de

Benutzeravatar
Sören Hentzschel
Administrator
Beiträge: 17502
Registriert: Mi, 23. Nov 2011 0:39
Wohnort: Salzburg
Kontaktdaten:

Re: eckige Tabs bei Quantum abrunden

#7

Beitrag von Sören Hentzschel » Di, 14. Nov 2017 18:17

Msfreak hat geschrieben:
Di, 14. Nov 2017 17:45
Ich bin froh dass die runden "Dinger" wieder weg sind (ein Abklatsch von Google Chrome)
Huch? Die "runden Tabs" von Firefox vor Quantum haben sich aber schon deutlich von den Tabs in Chrome unterschieden. Natürlich in dem beschränkten Rahmen, der für mögliche Tab-Formen nun einmal gegeben ist, da gibt es ja nur eine Hand Voll Möglichkeiten. Aber von einem "Abklatsch" war das weit entfernt, zumal zur Form selbst ja auch noch die unterschiedlichen Tab-Breiten und das unterschiedliche Verhalten der Tab-Leiste dazu kommen, was sich alles zur User Experience, die Tabs betreffend, addiert. Also da bestand null Verwechslungsgefahr zwischen Firefox und Chrome. ;)


Relaunch Q3|2018 ;)

Benutzeravatar
HT-Frogger
Senior-Mitglied
Beiträge: 686
Registriert: Mo, 18. Jan 2016 22:14
Wohnort: Hamburg

Re: eckige Tabs bei Quantum abrunden

#8

Beitrag von HT-Frogger » Di, 14. Nov 2017 19:59

Also bei mir wirkt das gut. Hier nochmal ausführlich:

Code: Alles auswählen

/* TAB normal (inaktiv):
 * Hintergrundfarbe, Schriftfarbe,
 * Rahmen um die TABs, oben abgerundet und Abstände angepaßt,
 * unten kein Rahmen -> Abschlußrahmen vom Container.
 */
#TabsToolbar .tabbrowser-tab {
  background: yellow !important;
  color: red !important;
  border: 1px solid !important;
  border-bottom: none !important;
  border-color: gray !important;
  border-radius: 10px 10px 0 0 !important;
  margin: 3px 1px 1px 2px !important;
  padding: 1px 0 !important;
}

/* TAB bei Mauskontakt:
 * Hintergrundfarbe + Schriftfarbe
 */
#TabsToolbar .tabbrowser-tab:hover {
  background: green !important;
  color: red !important;
}

/* TAB bei bei angewähltem TAB (aktiv):
 * Hintergrundfarbe + Schriftfarbe
 */
#TabsToolbar .tabbrowser-tab[selected="true"] {
  background: red !important;
  color: yellow !important;
}
Farben und Werte ändern und nicht benötigtes löschen...
Hast Du den Fux neu gestartet? Und die Groß/Kleinschreibung bei Datei und Verzeichnis beachtet?

Gruß Harry
FF aktuell/beta/nightly, 64Bit, Linux, openSUSE Leap mit KDE

Benutzeravatar
Boersenfeger
Senior-Mitglied
Beiträge: 51430
Registriert: So, 21. Mär 2004 13:21
Wohnort: Brunswiek anne Oker dranne

Re: eckige Tabs bei Quantum abrunden

#9

Beitrag von Boersenfeger » Di, 14. Nov 2017 20:25

Dieser Code bewirkt hier keine Rundung der Tabs...
Unbenannt.PNG

Code: Alles auswählen

/* Tabs angepasst*/

/* disable tab top border roundness */

#TabsToolbar .tabs-newtab-button,
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-stack,
#TabsToolbar .tabbrowser-tab .tab-background,
#TabsToolbar .tabbrowser-tab .tab-content,
#TabsToolbar .tabbrowser-tab::after,
#TabsToolbar .tabbrowser-tab::before,
:root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide=true] ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab::after,
:root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide=true] ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab::before,
#TabsToolbar .tabbrowser-tab:hover::before,
#TabsToolbar .tabbrowser-tab[last-visible-tab]:hover::after,
#TabsToolbar #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[afterhovered]::before {
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
}
#TabsToolbar .tabbrowser-tab {
  border-radius: 10px 10px 0 0 !important;
  margin: 3px 1px 1px 2px !important;
  padding: 1px 0 !important;
}
Stand 22.6.2018
Mozilla/5.0 (Windows NT 6.1 Win64 x64 rv:60.0) 20100101 Firefox/60.0.2
Mozilla/5.0 (Windows NT 6.1 Win64 x64 rv:61.0) 20180621 Firefox/61.0rc3
Mozilla/5.0 (Windows NT 6.1 Win64 x64 rv:62.0) 20180622 Firefox/62.0a1

Meine Füchse|Fehlersuche|Anleitung für Fragen im Forum|Sicherheitskonzept für Windowsnutzer

Benutzeravatar
HT-Frogger
Senior-Mitglied
Beiträge: 686
Registriert: Mo, 18. Jan 2016 22:14
Wohnort: Hamburg

Re: eckige Tabs bei Quantum abrunden

#10

Beitrag von HT-Frogger » Di, 14. Nov 2017 20:38

@Boersenfeger: Wenn Du border-radius erst auf 0 setzt (border-top-left-radius: 0px !important; und border-top-right-radius: 0px !important;) kannst Du ihn hinterher nicht wieder größer (border-radius: 10px 10px 0 0 !important;) machen. Mit !important Angabe wirkt CSS anders als normal... die erste Angabe siegt meist...
Bei mir sieht es so aus:
Screenshot_20171114_200725.png
Screenshot_20171114_200725.png (41.09 KiB) 2149 mal betrachtet
Gruß Harry
FF aktuell/beta/nightly, 64Bit, Linux, openSUSE Leap mit KDE

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

Re: eckige Tabs bei Quantum abrunden

#11

Beitrag von EffPeh » Di, 14. Nov 2017 21:13

HT-Frogger hat geschrieben:
Di, 14. Nov 2017 20:38
[...]Mit !important Angabe wirkt CSS anders als normal... die erste Angabe siegt meist...[...]
Nee, Harry, das stimmt so nicht. !important priorisiert zwar in jedem Fall eine normale Deklaration, aber eine !important-Anweisung, die nachfolgt, überschreibt alle vorangegangenen Angaben. :)

Ich habe hier meinem Tab-Code mal kurz in der letzten Anweisung einen border-radius vergeben und wie du siehst, wird vorher der mit 0 und !important deklarierte border-radius ebenfalls überschrieben: :wink:

Code: Alles auswählen

#TabsToolbar {
	box-shadow: 0px 10px 10px 0px var(--uc-black-3) !important;
	border-bottom: 1px solid var(--uc-grad-3) !important;
}

#TabsToolbar .tabbrowser-tab[visuallyselected="true"],
#TabsToolbar .tabbrowser-tab,
#TabsToolbar .tabbrowser-tab .tab-background {
	background: unset !important;
	border: unset !important;
	outline: none !important;
	border-radius: 0px !important;
}

.tab-content {
	background: var(--uc-tab-content-gradient) !important;
	margin: 4px 1px 0px 1px !important;
	color: #333 !important;
	text-shadow: 0px 1px 1px var(--uc-black-3) !important;
	border: 1px solid var(--uc-white-9) !important;
	border-radius: 0px !important;
}

.tabbrowser-tab[selected='true'] .tab-content , .tabbrowser-tab:hover .tab-content {
	background: var(--uc-tab-content-gradient-hover) !important;
	color: var(--uc-black-9) !important;
	font-weight: bold !important;
	margin: 4px 1px 0px 1px !important;
	box-shadow: 0px 0px 4px 0px var(--uc-black-3) !important;
	border-radius: 0px !important;
}

.tabbrowser-tab[selected='true'] {
	background-color: transparent !important;
}

.tabbrowser-tab {
	margin-bottom: 1px !important;
}

.tab-line , .tab-bottom-line {
	background-color: var(--uc-white-8) !important;
	margin: 1px 1px 0px 1px !important;
}

tab .tab-icon, .tab-icon-image {
  filter: saturate(0.333); /* grayscale(1) invert(0.9) saturate(0.5) brightness(0.9) contrast(1) sepia(.9) */
}

.tab-content , .tabbrowser-tab[selected='true'] .tab-content , .tabbrowser-tab:hover .tab-content {
	border-radius: 10px 10px 0px 0px !important;
}
Windows 10 | FF 61.0 (64-Bit) / FF 60.0 (64-Bit)

Benutzeravatar
HT-Frogger
Senior-Mitglied
Beiträge: 686
Registriert: Mo, 18. Jan 2016 22:14
Wohnort: Hamburg

Re: eckige Tabs bei Quantum abrunden

#12

Beitrag von HT-Frogger » Di, 14. Nov 2017 21:21

!important

Wird eine Eigenschaft mehrfach deklariert, so gilt in der Regel der zuletzt festgelegte Wert. Da dies auch unabsichtlich geschehen kann, existiert die Möglichkeit, einen bestimmten Wert als wichtig zu kennzeichnen. In diesem Fall wird der Wert einer Eigenschaft nicht durch eine nachfolgende Deklaration mit identischer Gewichtung überschrieben.

Ein Wert wird als wichtig gekennzeichnet, indem nach dem Wert selbst ein Leerzeichen, ein Ausrufezeichen (!) sowie das Schlüsselwort important notiert werden.
Das stammt aus: https://wiki.selfhtml.org/wiki/CSS/Kaskade

Nur bei höherer Gewichtung gewinnt die letzte Anweisung.

Gruß Harry
FF aktuell/beta/nightly, 64Bit, Linux, openSUSE Leap mit KDE

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

Re: eckige Tabs bei Quantum abrunden

#13

Beitrag von EffPeh » Di, 14. Nov 2017 21:30

HT-Frogger hat geschrieben:
Di, 14. Nov 2017 21:21
Das stammt aus: https://wiki.selfhtml.org/wiki/CSS/Kaskade

Nur bei höherer Gewichtung gewinnt die letzte Anweisung.

Gruß Harry
Tja, da kannst du mal sehen.
Schau' bitte mal hier: https://jsfiddle.net/sqjk000r/
Und jetzt?... :wink:
Windows 10 | FF 61.0 (64-Bit) / FF 60.0 (64-Bit)

Benutzeravatar
HT-Frogger
Senior-Mitglied
Beiträge: 686
Registriert: Mo, 18. Jan 2016 22:14
Wohnort: Hamburg

Re: eckige Tabs bei Quantum abrunden

#14

Beitrag von HT-Frogger » Di, 14. Nov 2017 21:38

hmmm... ich habe das auch gerade ausprobiert... und war baff erstaunt! Ich dachte immer auf selfhtml.org wäre Verlaß?

Danke für die Aufklärung, ich nehme also meine Beauptung voll zurück!

Gruß Harry
FF aktuell/beta/nightly, 64Bit, Linux, openSUSE Leap mit KDE

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

Re: eckige Tabs bei Quantum abrunden

#15

Beitrag von EffPeh » Di, 14. Nov 2017 21:46

Grundsätzlich ist selfhtml auch keine schlechte Quelle. Aber die Seite wendet sich in erster Linie an Anfänger und wird auch nicht jede kleine Änderung der Spezifikationen berücksichtigen (können). Vielleicht hat sich da aber auch nur jemand etwas unglücklich ausgedrückt. Passiert mir auch ständig... :P
Windows 10 | FF 61.0 (64-Bit) / FF 60.0 (64-Bit)

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast