website/_sass/_datacoop.scss

.badge {
    font-family: monospace;
    border: .1em solid #000;
    border-radius: 1.1em;
    width: 2em;
    height: 2em;
    margin-bottom: -.6em;
    margin-right: .5em;
    overflow: hidden;
    display: inline-block;
    text-indent: 10em;
    background: #ccc center center;
    background-size: contain;
}

.badge-positive {
    background-color: #4c4;
}

.badge-partial {
    background-color: #fd4;
}

.badge-negative {
    background-color: #f44;
}

.badge-stable{
    background-image: url(/images/badges/stable.svg);
}

.badge-secure-connection{
    background-image: url(/images/badges/secure-connection.svg);
}

.badge-encrypted-data-storage{
    background-image: url(/images/badges/encrypted-data-storage.svg);
}

.badge-zero-knowledge{
    background-image: url(/images/badges/zero-knowledge.svg);
}

.badge-backup{
    background-image: url(/images/badges/backup.svg);
}

.badge-logging{
    background-image: url(/images/badges/logging.svg);
}

.badge-anonymous-access {
    background-image: url(/images/badges/anonymous-access.svg);
}

.badge-credits,
.badge-notes {
    color: #888;
    font-size: .75em;
}

.service-details ul.badges {
    list-style-type: none;
    margin: 0 0 0 .5em;
    padding: 0;
}

.service-details ul.badges li {
    margin: .5em 0;
}

.hidden {
    display: none;
}

.service {
    text-indent: 2.25em;
    background-size: contain;
    background-position: top left;
    background-repeat: no-repeat;
}

.service.nextcloud {
    background-image: url(/images/logos/nextcloud.png);
}

.service.gitea {
    background-image: url(/images/logos/gitea.png);
}

.service.passit {
    background-image: url(/images/logos/passit.png);
}