@shower/material/styles/blocks/badge.css

Material theme for Shower HTML presentation engine

/* Badge */

.badge {
    align-content: center;
    justify-items: center;
    outline:
        calc(var(--slide-scale) * 8px)
        dashed rgba(0 0 0 / 20%);
    outline-offset: calc(
        -1 * var(--slide-scale) * 8px
    );
    line-height: 1;
    font-size: calc(
        var(--slide-scale) * 48px
    );
}

/* Elements */

.badge a {
    display: inline-block;
    margin-left: 4em;
    color: var(--color-medium);
    text-decoration: none;
}

.badge a:hover,
.badge a:focus {
    outline: none;
    color: var(--color-key);
}

.badge svg {
    position: absolute;
    margin: -1.1em 0 0 -4.5em;
    width: 4em;
    height: 4em;
    fill: currentcolor;
}

/* List */

.shower.list .badge {
    display: grid;
}

/* Full */

.shower.full .badge {
    display: none;
}

/* Print */

@media print {
    .shower.list .badge,
    .shower.full .badge {
        display: none;
    }
}