Mark as complete on Circle communities

gistfile1.txt

<style>
/* Add "Completed" to like buttons */
.view-space-in-group--88671 .action-link,
.view-space-in-group--88671 .action-like.action-item {
    background-color: var(--brand);
    padding: 4px 8px;
    border-radius: 11px;
    opacity: 1;
}

.view-space-in-group--88671 .action-link:hover,
.view-space-in-group--88671 .action-like.action-item:hover {
    opacity: .8;
}

.view-space-in-group--88671 .action-link.liked:hover,
.view-space-in-group--88671 .action-like.liked.action-item:hover {
    opacity: 1;
}

.view-space-in-group--88671 .action-link.liked,
.view-space-in-group--88671 .action-like.action-item.liked {
    background-color: inherit;
}

.view-space-in-group--88671 .action-link.liked .icon-like use,
.view-space-in-group--88671 .action-like.liked .icon-like use {
    fill: var(--color-text-dark)!important;
}


.view-space-in-group--88671 .action-link .icon-like use,
.view-space-in-group--88671 .action-like .icon-like use {
    fill: var(--white)!important;
}

.view-space-in-group--88671 .action-link .action__label,
.view-space-in-group--88671 .action-like .count {
    visibility: hidden;
    width: inherit;
}

.view-space-in-group--88671 .action-link .action__label {
    text-indent: -1.5em;
}

.view-space-in-group--88671 .action-link .action__label:before,
.view-space-in-group--88671 .action-like .count:before {
    content: "Mark as Completed";
    visibility: visible;
    font-weight: 700;
    color: var(--white)!important;
}

.view-space-in-group--88671 .action-link .action__label:before {
    position: relative;
    left: 1.5em;
}


.view-space-in-group--88671 .action-link.liked .action__label:before,
.view-space-in-group--88671 .action-like.liked .count:before {
    content: "Completed";
    font-weight: 500;
    color: var(--color-text-dark)!important;
}
</style>

This works with both the new and the old Circle layout