eckige Tabs bei Quantum abrunden

HT-Frogger

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

EffPeh

Ich habe doch einen funktionierenden Code gepostet...

Zitat

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

Muss ich das verstehen?...

HT-Frogger

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

Gruß Harry

EffPeh

Nö, nicht das ich wüsste. Höchstens google translated. Das ist dann für mich wie Hamburger Platt. Whaaat?...

spiderman

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.

CSS

/* 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 :-).

2002Andreas

Zitat von spiderman

Ausgerechnet beim aktiven Tab

Teste bitte:

CSS

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

Alles anzeigen

Werte wenn dann anpassen bitte.

EffPeh

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

CSS

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

Alles anzeigen

spiderman

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?

CSS

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

Alles anzeigen

2002Andreas

Teste bitte mal:

CSS

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

Alles anzeigen

spiderman

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.

2002Andreas

Zitat von spiderman

wen man den Streifen wegbekommt

Welchen denn :-??

Hier sieht das so aus mit dem Code:

[attachment=0]Screenshot (77).png[/attachment]

spiderman

Bei mir sieht es so aus: Streifen zwischen medienwerkstatt und dem Tabrand

2002Andreas

Den habe ich hier nicht :-??

Funkt dir evtl. ein anderer Code dazwischen?

[attachment=0]Screenshot (78).png[/attachment]

EffPeh

Also mal ehrlich: Testest du die Codes auch, die man hier postet? Ich habe dir weiter oben eine Komplettlösung gepostet, bei der du im Prinzip nur die Farben anpassen musst.

spiderman

Zitat von EffPeh

Also mal ehrlich: Testest du die Codes auch, die man hier postet?

Das habe ich gleich gemacht. Das sieht bei mir so aus - s. Screenshot. Und da ich zu diesem Zeitpunkt bereits das Ergebnis von 2002Andreas hatte, habe ich angefangen diese andere Lösung zu tunen. Ich habe jetzt probeweise in deinem Code versucht, den Tabrand sichtbar zu machen ohne Erfolg - s. Code unten. EffPeh - danke für dein Post. Ich habe keine Möglichkeit, beide Lösungen bei mir zum Laufen zu bringen. Ich möchte ja mit dem Firefox auch was "richtiges" machen und solche Tuningsanpassungen haben ein Suchtpotenzial :-).

CSS

#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(black) !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;
}

Alles anzeigen

spiderman

Zitat von 2002Andreas

Den habe ich hier nicht :-??

Bitte über einen anderen als aktives Tab ein hover-Ereignis auslösen

Zitat von 2002Andreas

Funkt dir evtl. ein anderer Code dazwischen?

An Erweiterungen habe ich nur das hier.

EffPeh

Wie ich bereits in meinem Code-Post geschrieben habe, musst du natürlich alle Variablen in dem Code durch deine Farbangaben austauschen.
Also alles was beispielsweise so ausschaut...

CSS

background: var(--uc-tab-content-gradient) !important;

...musst du durch deine Farbwünsche ersetzen...

CSS

background: red !important;

Variablen beginnen immer mit var, gefolgt von einer öffnenden Klammer, einen Variablennamen und einer abschliessenden Klammer.

HT-Frogger

Wenn der Strich oben auf dem aktiven Tab noch da ist, zusätzlich:

CSS

#TabsToolbar .tabbrowser-tab * {
  background: none !important;
}

Gruß Harry

spiderman

HT-Frogger, es ist nicht der aktive, sondern der Tab, das ich g'rade mit der Maus überfahre. Dabei erscheint ein fetter horizontaler Strich - Bild vergrößern

Boersenfeger

Dieser Code zusammengebastelt aus diesem Thread, ergibt bei mir dieses Ergebnis..
[attachment=0]Tabsgestaltung.PNG[/attachment]

CSS

/* Tabs angepasst*/


#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: white !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: 0px !important;
}


.tab-line , .tab-bottom-line {
	background-color: white !important;
	margin: 1px 11px 0px 1px !important;
}


tab .tab-icon, .tab-icon-image {
  filter: contrast (1); /* 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: 20px 20px 0px 0px !important;
}


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

Alles anzeigen

Keine Rundung und die Tableiste ist monströs breit. Ohne Code ist die Tableiste oben und unten gefühlt jeweils 1 cm schmaler.. Was kann man ändern?