frontend/style/pages/viewer/PlayerSpec.css

.blueSpecHolder {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
}

.redSpecHolder {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%);
}

.playerspec {
    background-color: black;
    color: white;
    height: 42px;
    width: 200px;
    position: relative;
    font-family: sans-serif;
    margin-bottom: 2px;
    user-select: none;

    &.uber {
        height: 28px;
    }

    & .class-icon, .steam-avatar, & .disguise {
        width: 42px;
        height: 42px;
        display: inline-block;
        position: absolute;
        top: 0;
        left: 0;
        background-position: top left;
        background-size: 100% 100%;

        &.uber {
            height: 28px;
            background-size: 28px 28px;
            background-repeat: no-repeat;
            background-position: 50% 50%;
        }

        &.disguise {
            background-size: 28px 28px;
            background-repeat: no-repeat;
            background-position: 50% 25%;
        }
    }

    & .player-name {
        display: inline-block;
        position: relative;
        padding: 0 5px;
        white-space: nowrap;
        width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    & .health-container {
        display: inline-block;
        position: absolute;
        left: 42px;
        top: 0;
        height: 28px;
        width: calc(100% - 42px);
        line-height: 28px;
        font-weight: bold;

        & .health {
            position: relative;
            float: right;
            padding: 0 5px;
        }

        & .healthbar {
            position: absolute;
            top: 0;
            left: 0;
            height: 28px;
        }
    }

    & .disguise.scout {
        background-image: url('inline://images/class_portraits/disguises/scout.webp');
    }

    & .disguise.soldier {
        background-image: url('inline://images/class_portraits/disguises/soldier.webp');
    }

    & .disguise.pyro {
        background-image: url('inline://images/class_portraits/disguises/pyro.webp');
    }

    & .disguise.demoman {
        background-image: url('inline://images/class_portraits/disguises/demoman.webp');
    }

    & .disguise.engineer {
        background-image: url('inline://images/class_portraits/disguises/engineer.webp');
    }

    & .disguise.heavy {
        background-image: url('inline://images/class_portraits/disguises/heavy.webp');
    }

    & .disguise.medic {
        background-image: url('inline://images/class_portraits/disguises/medic.webp');
    }

    & .disguise.sniper {
        background-image: url('inline://images/class_portraits/disguises/sniper.webp');
    }

    & .disguise.spy {
        background-image: url('inline://images/class_portraits/disguises/spy.webp');
    }

    &.red {
        & .health-container {
            background-color: #a75d50aa;
        }

        & .healthbar {
            background-color: #a75d50;
        }

        & .class-icon.scout {
            background-image: url('inline://images/class_portraits/Icon_scout.webp');
        }

        & .class-icon.soldier {
            background-image: url('inline://images/class_portraits/Icon_soldier.webp');
        }

        & .class-icon.pyro {
            background-image: url('inline://images/class_portraits/Icon_pyro.webp');
        }

        & .class-icon.demoman {
            background-image: url('inline://images/class_portraits/Icon_demoman.webp');
        }

        & .class-icon.engineer {
            background-image: url('inline://images/class_portraits/Icon_engineer.webp');
        }

        & .class-icon.heavy {
            background-image: url('inline://images/class_portraits/Icon_heavy.webp');
        }

        & .class-icon.medic {
            background-image: url('inline://images/class_portraits/Icon_medic.webp');
        }

        & .class-icon.sniper {
            background-image: url('inline://images/class_portraits/Icon_sniper.webp');
        }

        & .class-icon.spy {
            background-image: url('inline://images/class_portraits/Icon_spy.webp');
        }

        & .class-icon.uber {
            background-image: url('inline://images/charge_red.svg');
        }

        & .class-icon, & .steam-avatar, & .disguise {
            right: 0;
            left: auto;
        }

        & .health-container {
            right: 42px;
            left: auto;
        }

        & .health {
            float: left;
        }

        & .player-name {
            float: right;
            direction: ltr;
            text-align: right;
        }
    }

    &.blue {
        & .health-container {
            background-color: #5b818faa;
        }

        & .healthbar {
            background-color: #5b818f;
        }

        & .class-icon.scout {
            background-image: url('inline://images/class_portraits/Icon_scout_blue.webp');
        }

        & .class-icon.soldier {
            background-image: url('inline://images/class_portraits/Icon_soldier_blue.webp');
        }

        & .class-icon.pyro {
            background-image: url('inline://images/class_portraits/Icon_pyro_blue.webp');
        }

        & .class-icon.demoman {
            background-image: url('inline://images/class_portraits/Icon_demoman_blue.webp');
        }

        & .class-icon.engineer {
            background-image: url('inline://images/class_portraits/Icon_engineer_blue.webp');
        }

        & .class-icon.heavy {
            background-image: url('inline://images/class_portraits/Icon_heavy_blue.webp');
        }

        & .class-icon.medic {
            background-image: url('inline://images/class_portraits/Icon_medic_blue.webp');
        }

        & .class-icon.sniper {
            background-image: url('inline://images/class_portraits/Icon_sniper_blue.webp');
        }

        & .class-icon.spy {
            background-image: url('inline://images/class_portraits/Icon_spy_blue.webp');
        }

        & .class-icon.uber {
            background-image: url('inline://images/charge_blue.svg');
        }
    }

    &.highlighted:not(.dead) {
        outline: white 2px solid;
    }

    &.overhealed {
        & .health {
            color: #79d297;
        }

        & .health:after {
            position: absolute;
            top: 21px;
            right: 0;
            padding: 0 5px;
            font-size: 10px;
            font-weight: bold;
            content: 'OVERHEALED'
        }

        &.red .health:after {
            position: absolute;
            top: 21px;
            left: 0;
            right: auto;
        }
    }

    &.dead {
        & .healthbar, & .health {
            display: none;
        }

        & .health-container {
            background-color: transparent;
        }

        & .class-icon {
            opacity: 0.5;
        }
    }
}