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
Sören Hentzschel
Administrator
Beiträge: 15933
Registriert: Mi, 23. Nov 2011 0:39
Wohnort: Salzburg
Kontaktdaten:

Re: eckige Tabs bei Quantum abrunden

#16

Beitrag von Sören Hentzschel » Di, 14. Nov 2017 22:01

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
Senior-Mitglied
Beiträge: 603
Registriert: Mi, 04. Okt 2017 10:22

Re: eckige Tabs bei Quantum abrunden

#17

Beitrag von EffPeh » Di, 14. Nov 2017 22:10

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:
In diesem Fall wird der Wert einer Eigenschaft nicht durch eine nachfolgende Deklaration mit identischer Gewichtung überschrieben.
Windows10 | FF 57.0 (64-Bit)

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

Re: eckige Tabs bei Quantum abrunden

#18

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

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...
FF aktuell/beta/nightly, 64Bit, Linux, openSUSE Leap mit KDE

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

Re: eckige Tabs bei Quantum abrunden

#19

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

@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
Senior-Mitglied
Beiträge: 603
Registriert: Mi, 04. Okt 2017 10:22

Re: eckige Tabs bei Quantum abrunden

#20

Beitrag von EffPeh » Di, 14. Nov 2017 22:26

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. :)
Windows10 | FF 57.0 (64-Bit)

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

Re: eckige Tabs bei Quantum abrunden

#21

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

An w3schools gefällt mir die Sprache nicht, ich lese ja auch keine chinesischen Texte.

Aber wir kommen so langsam ganz vom Thema ab, funktionieren denn nun die runden Ecken endlich? Das ist doch an sich eine der leichteren Übungen...

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

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

Re: eckige Tabs bei Quantum abrunden

#22

Beitrag von EffPeh » Di, 14. Nov 2017 22:39

Ich habe doch einen funktionierenden Code gepostet... :D
An w3schools gefällt mir die Sprache nicht, ich lese ja auch keine chinesischen Texte.
Muss ich das verstehen?... :)
Windows10 | FF 57.0 (64-Bit)

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

Re: eckige Tabs bei Quantum abrunden

#23

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

Ich sehe da nur englisch, gibt es w3schools auch auf deutsch? Hamburger Platt würde ich auch verstehen...

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

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

Re: eckige Tabs bei Quantum abrunden

#24

Beitrag von EffPeh » Di, 14. Nov 2017 22:55

Nö, nicht das ich wüsste. Höchstens google translated. Das ist dann für mich wie Hamburger Platt. Whaaat?... :P
Windows10 | FF 57.0 (64-Bit)

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

Re: eckige Tabs bei Quantum abrunden

#25

Beitrag von spiderman Themen-Starter » Mi, 15. Nov 2017 7:46

Danke für die Hilfe. Ausgerechnet beim aktiven Tab, das hervorsticht, sind die Rundungsanweisungen unwirksam. Ärgerlich. Ich habe mich dann letztendlich für diese Light-Version entschieden, wo dann nur beim hover-Ereignis die Ecken abgerundet werden.

Code: Alles auswählen

/* TAB bei Mauskontakt:
 * Hintergrundfarbe + Schriftfarbe
 */
#TabsToolbar .tabbrowser-tab:hover {
  border: 1px solid !important;
  border-bottom: none !important;
  border-radius: 10px 10px 0 0 !important;
   margin: 0px 3px 0px 0px !important;
  padding: 0px 0 !important;
}
Wenn jemand eine Idee hat, wie man die Ecken beim hover-Ereignis abrunden kann - her damit :-).
Dateianhänge
123.png
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
2002Andreas
Moderator
Beiträge: 35491
Registriert: Fr, 04. Jul 2008 19:25
Wohnort: Niedersachsen

Re: eckige Tabs bei Quantum abrunden

#26

Beitrag von 2002Andreas » Mi, 15. Nov 2017 10:19

spiderman hat geschrieben:
Mi, 15. Nov 2017 7:46
Ausgerechnet beim aktiven Tab
Teste bitte:

Code: Alles auswählen

.tabbrowser-tab[selected="true"]{
  border: 1px solid !important;
  border-bottom: none !important;
  border-radius: 20px 20px 0 0 !important;
   margin: 0px 3px 0px 0px !important;
  padding: 0px 0 !important;
}
.tab-background[selected="true"]{
  background: none!important;
} 

.tab-line[selected=true] { 
  display:none!important
}
Werte wenn dann anpassen bitte.
Mit freundlichem Gruß
Andreas
Mein System    Meine Add-ons

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

Re: eckige Tabs bei Quantum abrunden

#27

Beitrag von EffPeh » Mi, 15. Nov 2017 10:31

Abgerundet und mit angepasster .tab-line.
Die Angaben in var() bitte durch eigene Farbangaben ersetzen. :)

Code: Alles auswählen

#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: 10px 10px 0px 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: 10px 10px 0px 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 11px 0px 11px !important;
}
Windows10 | FF 57.0 (64-Bit)

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

Re: eckige Tabs bei Quantum abrunden

#28

Beitrag von spiderman Themen-Starter » Mi, 15. Nov 2017 10:57

@2002Andreas: Danke! Habe .tab-background[selected="true"] um border: 0px solid !important; ergänzt und :hover -Ereignis hinzugefügt. Jetzt bleibt noch den Streifen oben im Tab loszuwerden und das Wackeln beim Plus-Zeichen beim .hover-Ereignis. Hat jemand Ideen, wie ich das bewerkstelligen kann?

Code: Alles auswählen

 .tabbrowser-tab[selected="true"]{
  border: 1px solid !important;
  border-bottom: none !important;
  border-radius: 10px 10px 0 0 !important;
   margin: 0px 3px 0px 0px !important;
  padding: 0px 0 !important;
}

.tab-background[selected="true"]{
  background: none!important;
  border: 0px solid !important;	
} 

.tab-line[selected=true] { 
  display:none!important
}
 

 .tabbrowser-tab:hover {
  border: 1px solid !important;
  border-bottom: none !important;
  border-radius: 10px 10px 0 0 !important;
   margin: 0px 0px 0px 0px !important;
  padding: 0px 0 !important;

}

.tab-background[selected="true"]:hover{
  background: none!important;
  border: 1px solid !important;	
} 
.tab-line[selected=true]:hover { 
  display:none!important
}
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
2002Andreas
Moderator
Beiträge: 35491
Registriert: Fr, 04. Jul 2008 19:25
Wohnort: Niedersachsen

Re: eckige Tabs bei Quantum abrunden

#29

Beitrag von 2002Andreas » Mi, 15. Nov 2017 11:38

Teste bitte mal:

Code: Alles auswählen

 .tabbrowser-tab[selected="true"],.tabbrowser-tab{
  border: 1px solid !important;
  border-bottom: none !important;
  border-radius: 10px 10px 0 0 !important;
   margin: 0px 3px 0px 0px !important;
  padding: 0px 0 !important;
}

.tab-background[selected="true"]{
  background: none!important;
  border: 0px solid !important;	
} 

.tabbrowser-tab{
  background: none!important;
  border: 1px solid transparent!important;	
} 

.tab-line[selected=true] { 
  display:none!important
}
 

 .tabbrowser-tab:hover {
  border: 1px solid !important;
  border-bottom: none !important;
  border-radius: 10px 10px 0 0 !important;
   margin: 0px 3px 0px 0px !important;
  padding: 0px 0 !important;

}

.tab-background[selected="true"]:hover{
  background: none!important;
  border: 1px solid !important;	
} 
.tab-line[selected=true]:hover { 
  display:none!important
}
Mit freundlichem Gruß
Andreas
Mein System    Meine Add-ons

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

Re: eckige Tabs bei Quantum abrunden

#30

Beitrag von spiderman Themen-Starter » Mi, 15. Nov 2017 11:42

@2002Andreas. Danke! Ja das Pluszeichen wackelt nicht mehr. Nur wäre noch herausfinden, wie man dafür sorgt, dass der Streifen oben beim hofer mit dem Tabstreifen abgerundet übereinstimmt. Ich nehme an, wen man den Streifen wegbekommt, wackelt auch der Text nicht mehr von oben nach unten beim hover-Ereignis.
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

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 3 Gäste