l5rx-chiaroscuro/system/styles/scss/dices-chat.scss

// Dice in chat
&.chat.dice-roll {

    .chat-dice {
        display: inline;
        position: relative;
        padding: 0;
        margin: 0;
        &:after {
            content: "";
            position: absolute;
            bottom: 0;
            right: 0;
            border-radius: 0.15rem;
            padding: 0 0.15rem;
            font-size: 0.65em;
            line-height: 1rem;
            //width: 1em;
            text-align: center;
            color: white;
            background: transparent;
        }
        &:last-of-type,
        &:nth-child(6),
        &:nth-child(12),
        &:nth-child(18) {
            &:after {
                padding: 0 0.175rem 0 0.15rem;
            }
        }
        &.rerolled {
            > img {
                border-bottom: 0 none;
            }
            &:after {
                content: "\f2f9";
                background: orangered;
            }
        }

        &.swapped {
            > img {
                border-bottom: 0 none;
            }
            &:after {
                content: "\f337";
                background: fuchsia;
            }
        }

        > img {
            border: 1px solid transparent;
            height: auto;
        }
    }
    td {
        .chat-dice {
        }
    }

    .chat-profil {
        text-align: center;
        vertical-align: middle;

        .profile-img {
            margin: 0.25rem 0.25rem 0 0;
        }

        &-stance {
            font-size: 2.5rem;
            line-height: 2.5rem;
            margin: 0.25rem;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
        }
        &-element {
            flex-wrap: wrap;
            flex-grow: 1;

            &-skill {
                flex-grow: 3;
            }
            &:last-child {
                flex-grow: 2;
            }
        }
    }
    .dice-formula,
    .dice-total {
        background: rgba(255, 255, 255, 0.1);
        border: rgba(255, 255, 255, 0.75);
        text-align: center;
        margin: 0.5rem 0;
        padding: 0.25rem 0.5rem 0.25rem 0.25rem;
        &-rnk {
            line-height: 2rem;
            i {
                margin-left: 0.5rem;
            }
        }
    }
    button {
        justify-self: center;
        &.chat-dice-rnk {
            cursor: url("../assets/cursors/pointer.webp"), pointer;
            color: $white;
            background: linear-gradient(
                $l5r5e-linear-gradient-third,
                $l5r5e-linear-gradient-third-dark,
                $l5r5e-linear-gradient-third
            );
            background-origin: padding-box;
            border-image: url("../assets/ui/macro-button.webp") 10 repeat;
            border-image-width: 0.5rem;
            border-image-outset: 0px;
            margin: 0.5rem 0 0;
            &:hover {
                background: linear-gradient(
                    $l5r5e-linear-gradient-first-dark,
                    $l5r5e-linear-gradient-first,
                    $l5r5e-linear-gradient-first-dark
                );
            }
        }
        &.chat-dice-rnk-ended {
            background: linear-gradient(
                $l5r5e-linear-gradient-second,
                $l5r5e-linear-gradient-second-dark,
                $l5r5e-linear-gradient-second
            );
        }
    }
    .dice-result-rnk {
        background: rgba(0, 0, 255, 0.1);
        border: 1px solid rgba(55, 55, 155, 0.75);
        padding: 0.25rem;
        color: rgba(55, 55, 155, 0.75);
        text-align: center;
        font-weight: bold;
        text-shadow: 0 0 0 $black;
        &.success {
            background: rgba(0, 255, 0, 0.1);
            border-color: rgba(55, 155, 55, 0.75);
            color: rgba(55, 155, 55, 0.75);
            i.i_success {
                font-size: 1rem;
            }
        }
        &.unknown {
            background: rgba(121, 121, 121, 0.1);
            border-color: rgba(124, 124, 124, 0.75);
            color: rgba(91, 91, 91, 0.75);
        }
        &.fail {
            background: rgba(255, 0, 0, 0.1);
            border-color: rgba(155, 55, 55, 0.75);
            color: rgba(155, 55, 55, 0.75);
        }
    }
    .target,
    .item-infos {
        display: flex;
        align-items: center;
        flex: 0 0 100%;
        margin: 0.5rem 0;
        padding: 0.25rem 0.5rem 0.25rem 0.25rem;
        background: rgba(255, 255, 255, 0.1);
        border: solid 1px rgba(100, 0, 0, 0.75);
        border-radius: 3px;
        .profile {
            flex: 1;
            margin: 0.25rem 0.25rem 0 0;
            position: relative;
            .profile-img {
                position: relative;
                border: none;
                filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.66));
            }
        }
        .name {
            flex: 6;
            font-family: "BrushtipTexe", sans-serif;
        }
        .content-link {
            background: unset;
            border: unset;
            i {
                display: none;
            }
        }
    }
    .item-infos {
        border: solid 1px rgba(0, 78, 100, 0.75);
        i {
            font-size: var(--font-size-12);
        }
    }

    .dice-container {
        display: flex;
    }
}