eckige Tabs bei Quantum abrunden

spiderman

Hallo,

bin mit Quantum zufrieden, nur die eckige Tabs stören mein Surfkomfort. Wie kann ich die Tabs abrunden?

HT-Frogger

Für die userChrome.css:

CSS

#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

spiderman

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

CSS

#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?

Msfreak

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

Boersenfeger

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/Custom…ter/classic/css
..dann den gewünschten Teilbereich anklicken..

spiderman

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

CSS

#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?

Sören Hentzschel

Zitat von Msfreak

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.

HT-Frogger

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

CSS

/* 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;
}

Alles anzeigen

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

Boersenfeger

Dieser Code bewirkt hier keine Rundung der Tabs...
[attachment=0]Unbenannt.PNG[/attachment]

CSS

/* 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;
}

Alles anzeigen

HT-Frogger

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:
[attachment=0]Screenshot_20171114_200725.png[/attachment]
Gruß Harry

EffPeh

Zitat von HT-Frogger

[...]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:

CSS

#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;
}

Alles anzeigen

HT-Frogger

Zitat

!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

EffPeh

Zitat von HT-Frogger

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:

HT-Frogger

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

EffPeh

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...

Sören Hentzschel

Hat sich selfhtml denn mittlereile in den Griff bekommen? Ich verfolge das Projekt nicht mehr, aber das galt früher immer als ganz furchtbare Quelle, ähnlich wie w3schools.

Allerdings, was dieses Beispiel betrifft: der Test-Case zeigt doch nichts anderes als auf der verlinkten selfhtml-Seite auch steht. Wo genau liegt hier ein Missverständnis vor? Die zitierte Passage ist absolut korrekt.

Hingegen entspricht das Fazit "Nur bei höherer Gewichtung gewinnt die letzte Anweisung" nicht dem, was auf selfhtml steht.

EffPeh

Also ich habe schon ewig nicht mehr auf selfhtml irgendetwas nachgeschaut. Aber w3schools finde ich gar nicht so schlecht, um schnell mal etwas nachzuschlagen. Ist übersichtlicher als MDN, wie ich finde.
Ich denke, das Missverständnis liegt in diesem Satz begründet:

Zitat

In diesem Fall wird der Wert einer Eigenschaft nicht durch eine nachfolgende Deklaration mit identischer Gewichtung überschrieben.

HT-Frogger

Zitat

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 ( Korrekturangabe: jedoch ohne "wichtig"-Kennung ) überschrieben.

Der Text war vermutlich richtig gemeint, ich habe ihn jedoch falsch verstanden.

Gruß Harry

Ich habe jedenfalls was dazu gelernt...

Sören Hentzschel

EffPeh: w3schools hat sich gebessert, früher wurde ja extra dafür die Seite w3fools eingerichtet, weil da so viele Schwächen vorhanden waren. Gut möglich, dass es bei selfhtml ähnlich ist, das weiß ich nicht.

Was den Satz betrifft, der ist ja richtig. Wenn eine Eigenschaft mit !important verstärkt wird, tritt die Regel außer Kraft, dass bei gleicher Spezifität die letzte Regel gewinnt, weil !important quasi Trumpf ist. Hätten beide Regeln die gleiche Spezifikaten und beide ein !important, dann würde natürlich wieder die letzte Regel gewinnen.

EffPeh

Ich schätze an w3schools wirklich die übersichtliche Gestaltung und das dort häufig Beispiele zu finden sind, was für mich persönlich wichtig ist. Das mag nicht unbedingt jeder benötigen, aber ich bin Autodidakt und anhand von Beispielen ist bei mir der Lernfaktor höher. :wink:

Ja, deshalb schrieb ich auch: Vielleicht hat sich da aber auch nur jemand etwas unglücklich ausgedrückt.
Das ist einfach etwas missverständlich. Besser wäre es so gewesen, wie Harry es "korrigiert" hat.