Beiträge von Mira_Belle

Mira_Belle

Danke.

Weil aber, ... siehe selbst:

CSS

  .topReactionShort,
  .reactionCountButton {
    &::before {
      content: "\f164" !important;
      font-family: "Font Awesome 6 Free" !important;
      font-size: 20px !important;
    }

    img {
      display: none;
    }
  }

  .reactionCountButton {
    &::before {
      color: #5c5c5c !important; /* für die Farbe des Symbols */
    }
  }

  .topReactionShort {
    &::before {
      color: #e23838 !important;
    }
  }

Alles anzeigen

Mira_Belle

Zitat von Sören Hentzschel

... Und wenn du das noch etwas schöner ausrichten möchtest, dass die Zahl daneben optimal mittig zum Icon platziert ist, was nicht mehr der Fall ist, sobald du die Schrift so stark vergrößerst, kann die Lösung so aussehen: ...

Wow. Habe ich etwas umständlicher gelöst.
Hoffe aber, dass andere auch von dieser schweren Geburt was haben,

Daher hier "mein" kompletter Code.

CSS

  [data-tooltip="Inhalt melden"]::after {
    content: "Inhalt melden" !important;
    margin-right: 10px !important;
    font-size: 13px !important;
  }
  [data-tooltip="Inhalt melden"]:hover::after {
    color: #ff0000 !important;
  }

  [data-tooltip="Zitieren"]::after {
    content: "Zitieren" !important;
    margin-right: 10px !important;
    font-size: 13px !important;
  }
  [data-tooltip="Zitieren"]:hover::after {
    color: #ff0000 !important;
  }

  .reactButton {
    width: 120px !important;
    padding-top: 5px !important;

    &::before {
      content: "\f164" !important;
      font-weight: 400 !important;
      scale: 1.4 !important;
    }

    &::after {
      content: "Gefällt mir" !important;
      padding-left: 5px !important;
      padding-top: 4px !important;
    }

    &:hover {
        color: #00be00 !important;
    }

    &.active {
        color: #333333 !important;
    }

    &.active:hover {
        color: #ff0000 !important;
    }
  }

  .reactionSummary .selected .reactionCount {
    font-weight: 700 !important;
    color: #5c5c5c !important;          /* für die Farbe des Zählwertes */
    padding-bottom: 5px !important;
  }

  .reactionCountButton {

    &::before {
      content: '\f164' !important;
      font-family: 'Font Awesome 6 Free' !important;
      font-size: 20px !important; 
      color: #5c5c5c !important;        /* für die Farbe des Symbols */
    }
    
    img {
      display: none;
    }
  }

Alles anzeigen

PS: Die Farbwerte am Ende, weil beim "hovern" bei mir der Text von dem dunklen Grau zu Schwarz gewechselt hat.

Ich entschuldige mich für meine extremst lange Leitung,
und bedanke mich noch einmal ausdrücklich bei Euch beiden.
2002Andreas & Sören Hentzschel

Mira_Belle

Sören Hentzschel Vielen Dank.
Das sieht, also der Code, ganz toll aus,
aber jetzt habe ich andere Probleme!

Die Größe des Symbols, mit "scale: 1.4 !important;" komm ich da nicht bei.

Ich kann nicht alles haben, und mit dem "langen" Code passt es ja.

AHHH! "font-size: 20px !important;"

Na dann, nehmen wir doch den viel schöneren und kompakteren Code.

Mira_Belle

Zitat von 2002Andreas

Wenn du nur den zusätzlichen Text einfügst, dann brauchst du Zeile 6 - 8 und 15 - 17 nicht mit hover.

Funktioniert aber bei mir nicht so!
Mir grätscht der Code der style-5.css dazwischen,
und dann werden zwar die Symbole rot, aber der Text wird orange.

2002Andreas

Mir bereitet eher das letzte Anliegen Kopfzerbrechen.

Das ist eine Grafik (like.svg) und einfach den Code so um zu schreiben,
dass da .reactionType { content: "\f164" !important; } steht anstatt des "langen" Code,
funktioniert irgendwie nicht, oder halt anders als ich mir das gerade so vorstelle.

Wäre jetzt aber nicht wirklich so schlimm, der komplette Code scheint ja zu funktionieren.
Es war halt einfach nur so eine Idee.

Mira_Belle

Ich habe mal die Farben geändert, und so funktioniert es auch, so wie ich mir das Vorstelle.

Vielen lieben Dank.

Der komplette Code schaut z.Z. so aus:

CSS

  [data-tooltip="Inhalt melden"]::after {
    content: "Inhalt melden" !important;
    margin-right: 10px !important;
    font-size: 13px !important;
  }
  [data-tooltip="Inhalt melden"]:hover::after {
    color: #ff0000 !important;
  }

  [data-tooltip="Zitieren"]::after {
    content: "Zitieren" !important;
    margin-right: 10px !important;
    font-size: 13px !important;
  }
  [data-tooltip="Zitieren"]:hover::after {
    color: #ff0000 !important;
  }

  .reactButton {
    width: 120px !important;
    padding-top: 5px !important;

    &::before {
      content: "\f164" !important;
      font-weight: 400 !important;
      scale: 1.4 !important;
    }

    &::after {
      content: "Gefällt mir" !important;
      padding-left: 5px !important;
      padding-top: 4px !important;
    }

    &:hover {
        color: #00be00 !important;
    }

    &.active {
        color: #333333 !important;
    }

    &.active:hover {
        color: #ff0000 !important;
    }
  }

  .reactionSummary .reactionCountButton {
    margin-top: 10px !important;
  }
  .reactionType {
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M323.8 34.8c-38.2-10.9-78.1 11.2-89 49.4l-5.7 20c-3.7 13-10.4 25-19.5 35l-51.3 56.4c-8.9 9.8-8.2 25 1.6 33.9s25 8.2 33.9-1.6l51.3-56.4c14.1-15.5 24.4-34 30.1-54.1l5.7-20c3.6-12.7 16.9-20.1 29.7-16.5s20.1 16.9 16.5 29.7l-5.7 20c-5.7 19.9-14.7 38.7-26.6 55.5c-5.2 7.3-5.8 16.9-1.7 24.9s12.3 13 21.3 13L448 224c8.8 0 16 7.2 16 16c0 6.8-4.3 12.7-10.4 15c-7.4 2.8-13 9-14.9 16.7s.1 15.8 5.3 21.7c2.5 2.8 4 6.5 4 10.6c0 7.8-5.6 14.3-13 15.7c-8.2 1.6-15.1 7.3-18 15.2s-1.6 16.7 3.6 23.3c2.1 2.7 3.4 6.1 3.4 9.9c0 6.7-4.2 12.6-10.2 14.9c-11.5 4.5-17.7 16.9-14.4 28.8c.4 1.3 .6 2.8 .6 4.3c0 8.8-7.2 16-16 16H286.5c-12.6 0-25-3.7-35.5-10.7l-61.7-41.1c-11-7.4-25.9-4.4-33.3 6.7s-4.4 25.9 6.7 33.3l61.7 41.1c18.4 12.3 40 18.8 62.1 18.8H384c34.7 0 62.9-27.6 64-62c14.6-11.7 24-29.7 24-50c0-4.5-.5-8.8-1.3-13c15.4-11.7 25.3-30.2 25.3-51c0-6.5-1-12.8-2.8-18.7C504.8 273.7 512 257.7 512 240c0-35.3-28.6-64-64-64l-92.3 0c4.7-10.4 8.7-21.2 11.8-32.2l5.7-20c10.9-38.2-11.2-78.1-49.4-89zM32 192c-17.7 0-32 14.3-32 32V448c0 17.7 14.3 32 32 32H96c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32H32z"/></svg>') !important;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 18px !important;
    background-color: #ff0000 !important;
    margin-top: -2px !important;
    margin-left: -1px !important;
  }

Alles anzeigen

Was ich noch am Code verändern möchte, wenn ich meine Pause beende, den letzten Abschnitt.

.reactionType, das soll dann auch mit Unicode umgesetzt werden.

Mira_Belle

OK, ein bisschen habe ich noch gebastelt!

CSS

[data-tooltip="Inhalt melden"]::after {
	content: "Inhalt melden" !important;
	margin-right: 10px !important;
	font-size: 13px !important;
}
[data-tooltip="Inhalt melden"]:hover::after {
	color: red !important;    
}

[data-tooltip="Zitieren"]::after {
	content: "Zitieren" !important;
	margin-right: 10px !important;
	font-size: 13px !important;    
}
[data-tooltip="Zitieren"]:hover::after {
  	color: red !important;    
}

.reactButton {
  width: 120px !important;
  padding-top: 5px !important;

   &::before {
    content: '\f164' !important;
    font-weight: 400 !important;
    scale: 1.3 !important;

  }
  
  &::after {
    content: 'Gefällt mir' !important;
    padding-left: 5px !important;
    padding-top: 4px !important;
  }
}


.reactionSummary .reactionCountButton {
  margin-top: 10px !important;
}
.reactionType {
	-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M323.8 34.8c-38.2-10.9-78.1 11.2-89 49.4l-5.7 20c-3.7 13-10.4 25-19.5 35l-51.3 56.4c-8.9 9.8-8.2 25 1.6 33.9s25 8.2 33.9-1.6l51.3-56.4c14.1-15.5 24.4-34 30.1-54.1l5.7-20c3.6-12.7 16.9-20.1 29.7-16.5s20.1 16.9 16.5 29.7l-5.7 20c-5.7 19.9-14.7 38.7-26.6 55.5c-5.2 7.3-5.8 16.9-1.7 24.9s12.3 13 21.3 13L448 224c8.8 0 16 7.2 16 16c0 6.8-4.3 12.7-10.4 15c-7.4 2.8-13 9-14.9 16.7s.1 15.8 5.3 21.7c2.5 2.8 4 6.5 4 10.6c0 7.8-5.6 14.3-13 15.7c-8.2 1.6-15.1 7.3-18 15.2s-1.6 16.7 3.6 23.3c2.1 2.7 3.4 6.1 3.4 9.9c0 6.7-4.2 12.6-10.2 14.9c-11.5 4.5-17.7 16.9-14.4 28.8c.4 1.3 .6 2.8 .6 4.3c0 8.8-7.2 16-16 16H286.5c-12.6 0-25-3.7-35.5-10.7l-61.7-41.1c-11-7.4-25.9-4.4-33.3 6.7s-4.4 25.9 6.7 33.3l61.7 41.1c18.4 12.3 40 18.8 62.1 18.8H384c34.7 0 62.9-27.6 64-62c14.6-11.7 24-29.7 24-50c0-4.5-.5-8.8-1.3-13c15.4-11.7 25.3-30.2 25.3-51c0-6.5-1-12.8-2.8-18.7C504.8 273.7 512 257.7 512 240c0-35.3-28.6-64-64-64l-92.3 0c4.7-10.4 8.7-21.2 11.8-32.2l5.7-20c10.9-38.2-11.2-78.1-49.4-89zM32 192c-17.7 0-32 14.3-32 32V448c0 17.7 14.3 32 32 32H96c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32H32z"/></svg>') !important;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: 18px !important;
	background-color: red !important;
	margin-top: -2px !important;
	margin-left: -1px !important;
}

Alles anzeigen

Das klappt so weit!

Was ich noch, aber jetzt wirklich später, einbauen möchte,
ist das mit dem "hovern" in ROT und GRÜN.

Mira_Belle

Ein allerletzter Versuch, und es geht in die richtige Richtung!

CSS

.reactButton {
  width: 120px !important;

   &::before {
    content: '\f164' !important;
    font-weight: bold !important;
  }
  
  &::after {
    content: 'Gefällt mir' !important;
    padding-left: 5px !important;
  }
}

[data-tooltip="Inhalt melden"]::after {
    content: "Inhalt melden" !important;
    margin-right: 10px !important;
    font-size: 13px !important;
}
[data-tooltip="Inhalt melden"]:hover::after {
	color: red !important;    
}

[data-tooltip="Zitieren"]::after {
    content: "Zitieren" !important;
    margin-right: 10px !important;
    font-size: 13px !important;    
}
[data-tooltip="Zitieren"]:hover::after {
  	color: red !important;    
}

Alles anzeigen

Wenn ich nun "geliked" habe ist das Symbol und der Text orange, ist OK.
Was ich aber noch ändern möchte, wenn inaktiv, also nicht "geliked" beim "hovern" grün,
wenn "geliked" beim "hovern" rot.

Das Symbol hätte ich auch gerne einen Tick größer und habe mit scale: 1.1 gespielt,
aber dann verschwindet die Umrandung.

Ich mache jetzt aber erst einmal eine Pause.
Und ich möchte mich noch einmal ganz lich bei Euch beiden bedanken.

Mira_Belle

Nein.

Mir grätscht folgender code der style-5.css dazwischen!

CSS

html:not(.touch) .button:hover, html:not(.touch) a.button:hover {
  background-color: var(--wcfButtonBackgroundActive);
  color: var(--wcfButtonTextActive);
  text-decoration: none;
}

Da wird der Text "Zitieren" beim Drüberfahren orange und nicht rot!

Ich nutzte einfach mal nur diesen Code:

CSS

[data-tooltip="Inhalt melden"]::after {
    content: "Inhalt melden" !important;
    margin-right: 10px !important;
    font-size: 13px !important;
}

[data-tooltip="Zitieren"]::after {
    content: "Zitieren" !important;
    margin-right: 10px !important;
    font-size: 13px !important;    
}

Alles anzeigen

Und auch wenn ich dann noch den Code erweitere, bleibt es dabei,
Text "Zitieren" wird orange, und das ganze dann verzögert!

CSS

[data-tooltip="Zitieren"].hover::after {
	color: red !important;    
}

Ich denke, es ist besser, ich höre auf.
Mache da schon seit Montag rum, war so einigermaßen mit der alten Lösung zufrieden,
nur jetzt klappt nichts mehr und ich rege mich nur auf, (und merke, dass das mir nicht guttut)

Mira_Belle

OK, bin scheinbar zu blöd und bekomme die gegebenen Hinweise und Hilfestellungen nicht auf die Kette.

Werde es lassen so wie es ist. Danke für die Mühe.

Mira_Belle

Im Grunde möchte ich, dass es so ausschaut:

Jedoch sollte man es vermeiden, mit dem Zeiger drüberzufahren!

CSS

.messageFooterButtonsExtra > li:last-child .button {
    color: #3f3f3f !important;
}
.messageFooterButtonsExtra > li:last-child .button::after {
    content: "Inhalt melden" !important;
}
.messageFooterButtonsExtra > li:last-child .button:hover::after {
    color: red !important;
}


  .messageFooterGroup > .messageFooterButtonsExtra + .messageFooterButtons > li:first-child::after {
    content: "Zitieren" !important;
      margin-right: 10px !important;
    font-size: 13px !important;
    padding-top: 6px !important;
      
}
  .messageFooterGroup > .messageFooterButtonsExtra + .messageFooterButtons > li:first-child:hover::after {
    color: red !important;
}


.messageFooterGroup .reactButton {
		-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M323.8 34.8c-38.2-10.9-78.1 11.2-89 49.4l-5.7 20c-3.7 13-10.4 25-19.5 35l-51.3 56.4c-8.9 9.8-8.2 25 1.6 33.9s25 8.2 33.9-1.6l51.3-56.4c14.1-15.5 24.4-34 30.1-54.1l5.7-20c3.6-12.7 16.9-20.1 29.7-16.5s20.1 16.9 16.5 29.7l-5.7 20c-5.7 19.9-14.7 38.7-26.6 55.5c-5.2 7.3-5.8 16.9-1.7 24.9s12.3 13 21.3 13L448 224c8.8 0 16 7.2 16 16c0 6.8-4.3 12.7-10.4 15c-7.4 2.8-13 9-14.9 16.7s.1 15.8 5.3 21.7c2.5 2.8 4 6.5 4 10.6c0 7.8-5.6 14.3-13 15.7c-8.2 1.6-15.1 7.3-18 15.2s-1.6 16.7 3.6 23.3c2.1 2.7 3.4 6.1 3.4 9.9c0 6.7-4.2 12.6-10.2 14.9c-11.5 4.5-17.7 16.9-14.4 28.8c.4 1.3 .6 2.8 .6 4.3c0 8.8-7.2 16-16 16H286.5c-12.6 0-25-3.7-35.5-10.7l-61.7-41.1c-11-7.4-25.9-4.4-33.3 6.7s-4.4 25.9 6.7 33.3l61.7 41.1c18.4 12.3 40 18.8 62.1 18.8H384c34.7 0 62.9-27.6 64-62c14.6-11.7 24-29.7 24-50c0-4.5-.5-8.8-1.3-13c15.4-11.7 25.3-30.2 25.3-51c0-6.5-1-12.8-2.8-18.7C504.8 273.7 512 257.7 512 240c0-35.3-28.6-64-64-64l-92.3 0c4.7-10.4 8.7-21.2 11.8-32.2l5.7-20c10.9-38.2-11.2-78.1-49.4-89zM32 192c-17.7 0-32 14.3-32 32V448c0 17.7 14.3 32 32 32H96c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32H32z"/></svg>') !important;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-position: center;
		-webkit-mask-size: 18px !important;
		background-color: #3f3f3f !important;
    margin-right: 95px !important;

  &:hover {
    background-color: orange !important;
  }
  
  .active {
		background-color: red!important;
		opacity: 1 !important;
  }
}

	.messageFooterGroup:has(.reactButton)::after {
		content: "Gefällt mir" !important;
		padding-right: 20px !important;
		padding-top: 8px !important;
		margin-left: -95px !important;
		color: #3f3f3f !important;
		font-weight: bold !important;
    font-size: 13px !important;
	}
	.messageFooterGroup:has(.reactButton):hover::after {
    color: orange !important;
}

Alles anzeigen

Die erste Schaltfläche verhält sich normal!

Bei der zweiten Schaltfläche ist schon der Wurm drinnen, das Symbol ist unabhängig vom Schriftzug!
Des Weiteren reagiert auch der dritte Schriftzug "Gefällt mir".
Und auch bei der letzten Schaltfläche reagieren Symbol und Schriftzug ganz unabhängig voneinander.

Daher habe ich es mit weiteren Anpassungen erst einmal gelassen!

Mira_Belle

Sören Hentzschel Der Unicode '\f164' ist für dieses Symbol => thumbs-up-solid.svg

Der Code in meinem Beispiel aber für dieses hier => thumbs-up-regular.svg

Beide haben aber den gleichen Unicode.

Mira_Belle

Zitat von Sören Hentzschel

...

Zitat von Mira_Belle

und wie ich dann das Symbol z.B. in der Größe verändere?

Der naheliegendste Weg wäre font-size, denn das ist Schrift.

Ah, Danke.

Zitat von Sören Hentzschel

Zitat von Mira_Belle

Was muss ich machen, wenn ich z.B. ein Symbol von meiner Festplatte einbinden will.
oder ein Symbol, dass per url('data:image/svg+xml,<svg xmlns=.....)?

Dann musst du wie gehabt einen Weg über background-image oder mask-image wählen. Der nun umgesetzte Weg macht Gebrauch von der Icon-Schrift, die auch sonst überall hier im Forum verwendet wird und daher ohnehin mit der Software ausgeliefert wird.

Aha, okey.

Dann wähle ich wohl den einfacheren Weg, auch wenn damit die Möglichkeiten etwas eingeschränkter sind.

Denn

Code

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M323.8 34.8c-38.2-10.9-78.1 11.2-89 49.4l-5.7 20c-3.7 13-10.4 25-19.5 35l-51.3 56.4c-8.9 9.8-8.2 25 1.6 33.9s25 8.2 33.9-1.6l51.3-56.4c14.1-15.5 24.4-34 30.1-54.1l5.7-20c3.6-12.7 16.9-20.1 29.7-16.5s20.1 16.9 16.5 29.7l-5.7 20c-5.7 19.9-14.7 38.7-26.6 55.5c-5.2 7.3-5.8 16.9-1.7 24.9s12.3 13 21.3 13L448 224c8.8 0 16 7.2 16 16c0 6.8-4.3 12.7-10.4 15c-7.4 2.8-13 9-14.9 16.7s.1 15.8 5.3 21.7c2.5 2.8 4 6.5 4 10.6c0 7.8-5.6 14.3-13 15.7c-8.2 1.6-15.1 7.3-18 15.2s-1.6 16.7 3.6 23.3c2.1 2.7 3.4 6.1 3.4 9.9c0 6.7-4.2 12.6-10.2 14.9c-11.5 4.5-17.7 16.9-14.4 28.8c.4 1.3 .6 2.8 .6 4.3c0 8.8-7.2 16-16 16l-97.5 0c-12.6 0-25-3.7-35.5-10.7l-61.7-41.1c-11-7.4-25.9-4.4-33.3 6.7s-4.4 25.9 6.7 33.3l61.7 41.1c18.4 12.3 40 18.8 62.1 18.8l97.5 0c34.7 0 62.9-27.6 64-62c14.6-11.7 24-29.7 24-50c0-4.5-.5-8.8-1.3-13c15.4-11.7 25.3-30.2 25.3-51c0-6.5-1-12.8-2.8-18.7C504.8 273.7 512 257.7 512 240c0-35.3-28.6-64-64-64l-92.3 0c4.7-10.4 8.7-21.2 11.8-32.2l5.7-20c10.9-38.2-11.2-78.1-49.4-89zM32 192c-17.7 0-32 14.3-32 32L0 448c0 17.7 14.3 32 32 32l64 0c17.7 0 32-14.3 32-32l0-224c0-17.7-14.3-32-32-32l-64 0z"/></svg>

lässt sich dann ja nur über background-image oder mask-image auswählen.

Mira_Belle

Zitat von grisu2099

Zitat von Mira_Belle

abe wo kommt '\f164' her,

Beitrag #41 gelesen (und verstanden)?

Ja habe ich! Aber wohl nicht richtig.

Mh, content: url('data:image/svg+xml,<svg xmlns=..... ') !important; funktioniert schon einmal nicht!

Mit background-image: url('data:image/svg+xml,<svg xmlns=..... ') !important; tut sich zwar was, aber ....

Für heute ist's genug.

Mira_Belle

Ok, aber wo kommt '\f164' her, bzw. wie setzt sich der Code zusammen?

Was muss ich machen, wenn ich z.B. ein Symbol von meiner Festplatte einbinden will.

oder ein Symbol, dass per url('data:image/svg+xml,<svg xmlns=.....)?

Ich komme mir gerade ziemlich ... vor die Wand gewetzt vor.

Mira_Belle

Kann mir jemand das '\f164' erklären, bitte,

und wie ich dann das Symbol z.B. in der Größe verändere?

Mira_Belle

Zitat von Sören Hentzschel

Die Icon-Implementierung werde ich heute Abend übrigens vermutlich noch einmal übarbeiten

Dann werde ich abwarten! Denn ich habe das bisher auch noch nicht so hinbekommen, wie ich mir das so vorstelle.

Mira_Belle

CSS

.messageFooterGroup:has(.reactButton)::after {
	content: "Gefällt mir" !important;
	margin-left: 5px !important;
}

Dann steht "Gefällt mir" etwas hinter dem Button.

Mira_Belle

Zitat von 2002Andreas

Zitat von Mira_Belle

Es darf gespielt werden!

Das hast du sehr schön gemacht, danke

Danke

Zitat von 2002Andreas
Teste bitte:
Code
 .reactionType {
  -webkit-mask-image: url(...)
}

Und danke für diesen Code. Hätt' ich eigentlich auch drauf kommen müssen,
stand dann aber wohl zur späten Stunde auf dem Schlauch.

Mira_Belle

Das ganz links ausblenden bekomme ich hin!
Aber wie "austauschen

Da möchte ich auch den "Daumen hoch".

Mira_Belle

Es darf gespielt werden!

CSS

.messageFooterGroup .reactButton {
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M323.8 34.8c-38.2-10.9-78.1 11.2-89 49.4l-5.7 20c-3.7 13-10.4 25-19.5 35l-51.3 56.4c-8.9 9.8-8.2 25 1.6 33.9s25 8.2 33.9-1.6l51.3-56.4c14.1-15.5 24.4-34 30.1-54.1l5.7-20c3.6-12.7 16.9-20.1 29.7-16.5s20.1 16.9 16.5 29.7l-5.7 20c-5.7 19.9-14.7 38.7-26.6 55.5c-5.2 7.3-5.8 16.9-1.7 24.9s12.3 13 21.3 13L448 224c8.8 0 16 7.2 16 16c0 6.8-4.3 12.7-10.4 15c-7.4 2.8-13 9-14.9 16.7s.1 15.8 5.3 21.7c2.5 2.8 4 6.5 4 10.6c0 7.8-5.6 14.3-13 15.7c-8.2 1.6-15.1 7.3-18 15.2s-1.6 16.7 3.6 23.3c2.1 2.7 3.4 6.1 3.4 9.9c0 6.7-4.2 12.6-10.2 14.9c-11.5 4.5-17.7 16.9-14.4 28.8c.4 1.3 .6 2.8 .6 4.3c0 8.8-7.2 16-16 16H286.5c-12.6 0-25-3.7-35.5-10.7l-61.7-41.1c-11-7.4-25.9-4.4-33.3 6.7s-4.4 25.9 6.7 33.3l61.7 41.1c18.4 12.3 40 18.8 62.1 18.8H384c34.7 0 62.9-27.6 64-62c14.6-11.7 24-29.7 24-50c0-4.5-.5-8.8-1.3-13c15.4-11.7 25.3-30.2 25.3-51c0-6.5-1-12.8-2.8-18.7C504.8 273.7 512 257.7 512 240c0-35.3-28.6-64-64-64l-92.3 0c4.7-10.4 8.7-21.2 11.8-32.2l5.7-20c10.9-38.2-11.2-78.1-49.4-89zM32 192c-17.7 0-32 14.3-32 32V448c0 17.7 14.3 32 32 32H96c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32H32z"/></svg>') !important;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 18px !important;
  background-color: #3f3f3f !important;
}
.messageFooterGroup .reactButton:hover {
	background-color: #00ff00 !important;
}
.reactButton.active {
background-color: rgb(102, 255, 0) !important;
	opacity: 1 !important;
}

Alles anzeigen

Beiträge von Mira_Belle

Forum: Gefällt mir Button austauschen

Forum: Gefällt mir Button austauschen

Forum: Gefällt mir Button austauschen

Forum: Gefällt mir Button austauschen

Forum: Gefällt mir Button austauschen

Forum: Gefällt mir Button austauschen

Forum: Gefällt mir Button austauschen

Forum: Gefällt mir Button austauschen

Forum: Gefällt mir Button austauschen

Forum: Gefällt mir Button austauschen

Forum: Gefällt mir Button austauschen

Forum: Gefällt mir Button austauschen

Forum: Gefällt mir Button austauschen

Forum: Gefällt mir Button austauschen

Forum: Gefällt mir Button austauschen

Forum: Gefällt mir Button austauschen

Forum: Gefällt mir Button austauschen

Forum: Gefällt mir Button austauschen

Forum: Gefällt mir Button austauschen

Forum: Gefällt mir Button austauschen