Skip to content

Instantly share code, notes, and snippets.

@Alimir
Created November 11, 2021 22:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Alimir/44b0175a1e9c568c5a8453194d602184 to your computer and use it in GitHub Desktop.
Save Alimir/44b0175a1e9c568c5a8453194d602184 to your computer and use it in GitHub Desktop.
Change wp ulike clapping template colors
:root {
--clapping-custom-primary-color: #bdc3c7;
--clapping-custom-secondary-color: #ff6d6f;
--clapping-custom-dot-color: rgba(149, 165, 166, 0.5);
--clapping-custom-triangle-color: rgba(211, 84, 0, 0.5);
--clapping-custom-shockwave-color: #fc573b;
}
.wpulike.wpulike-clapping .wp_ulike_btn {
border-color: var(--clapping-custom-primary-color);
}
.wpulike.wpulike-clapping .wp_ulike_btn:hover {
border-color: var(--clapping-custom-secondary-color);
}
.wpulike.wpulike-clapping .wp_ulike_btn.wp_ulike_btn_is_active {
border-color: var(--clapping-custom-primary-color);
}
.wpulike.wpulike-clapping .wp_ulike_btn.wp_ulike_btn_is_active:hover {
border-color: var(--clapping-custom-secondary-color);
}
.wpulike.wpulike-clapping .wp_ulike_btn.wp_ulike_btn_is_active .clap-icon .clap-icon-svg {
fill: var(--clapping-custom-secondary-color);
stroke: #fff;
stroke-width: 1px;
}
.wpulike.wpulike-clapping .clap-icon .clap-icon-svg {
stroke: var(--clapping-custom-secondary-color);
stroke-width: 2px;
}
.wpulike.wpulike-clapping .count-box {
color: var(--clapping-custom-primary-color);
}
.wpulike.wpulike-clapping .clap-radial-dot {
background-color: var(--clapping-custom-dot-color);
}
.wpulike.wpulike-clapping .clap-radial-triangle {
border-left-color: var(--clapping-custom-triangle-color);
}
.wpulike.wpulike-clapping .wp_ulike_btn:hover:after {
animation: customshockwave 1s ease-in infinite;
}
@keyframes customshockwave {
0% {
transform: scale(1);
box-shadow: 0 0 2px var(--clapping-custom-secondary-color);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0;
box-shadow: 0 0 50px var(--clapping-custom-shockwave-color), inset 0 0 10px var(--clapping-custom-secondary-color);
}
}
#buddypress #activity-stream .activity-comments .wpulike.wpulike-clapping .wp_ulike_btn,
#buddypress #activity-stream .activity-inner .wpulike.wpulike-clapping .wp_ulike_btn {
border-color: var(--clapping-custom-primary-color);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment