tooltip_manager.css

/* set global variables */
:root {
    --tooltip-width: 25em;
}


/* settings for the tooltips */
.tooltip {
    position: absolute;
    border: 1px solid white;
    border-radius: 0;
    font-size: 1em;
    color: #e0e0e0;
    background-color: #111;
    z-index: 301;
}

.tooltip {
    pointer-events: auto;
}

.tooltip[stuck="1"] {
    border-color: #3299db;
}

.ability-tooltip {
	text-align: left;
	float: left;
	width: var(--tooltip-width);
    height: auto;
	padding: 10px;
}

.talent-tooltip { 
    width: auto; 
    height: auto; 
    display: inline-block; 
    text-align: center;
    padding: 0;
    margin: 0;
}

.avatar-tooltip { 
    width: var(--tooltip-width); 
    height: auto; 
}

.ability-name {
    font-size: 1.25em;
    font-weight: bold;
    text-transform: uppercase;
}


.ability-tooltip hr {
    border-top: 1px solid white;
    margin-bottom: 0.5em;
}

.details-list {
    font-size: 1em;
    margin-top: 0em;
    margin-bottom: 0em;
    padding: 0px;
}

.extra-desc p {
    color: #A9CCE3;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    padding: 0em;
}

.detail-value {
    color: #757575;
}

.core-desc {
    font-weight: bold;
}

.scepter-desc {
    color: #d7be5b; 
}

.lore {
    color: #757575;
    font-size: 1em;
}


table.talent {font-size: 1em; white-space: nowrap; }
.talent-left {text-align: right; border-right: 1px solid white; white-space: nowrap; }
.talent-right {text-align: left; white-space: nowrap; }
.talent-left[lvl="1"] {color: #d7be5b;}
.talent-right[lvl="1"] {color: #d7be5b;}


.avatar-tooltip hr {
    border-top: 1px solid white;
    margin-bottom: 0.5em;
}


.avatar-tooltip .name img {
    height: 5em;
    min-height: 5em;
    width: auto;
    float: left;
    padding-right: 0.5rem;
    margin-top: 0;
}


.avatar-tooltip .name {
    font-size: 1.25em;
    font-weight: bold;
}


.avatar-tooltip .ico img {
    height: 1em;
    min-height: 1em;
    width: auto;
    padding-right: 0.5em;
}


.avatar-tooltip .vgv_avbarct {
    position: relative;
    height: 1.2em;
    background-color: #3a3a3a;
    padding: 0;
    overflow: hidden;
    margin-top: 2px;
}


.avatar-tooltip .vgv_avbarfg {
    position: absolute;
    left: 0;
    height: 100%;
    width: 0;
}


.avatar-tooltip .vgv_avbarfg[stat="hp"] { background-color: #396026; }
.avatar-tooltip .vgv_avbarfg[stat="mana"] { background-color: #22486E; }

.avatar-tooltip .vgv_avbartxt {
    position: absolute;
    left: 0;
    font-weight: 200;
    padding-left: 0.25em;
}

.avatar-tooltip .vgvavtt_clickable {
    font-weight: bold;
    user-select: none;
}

.avatar-tooltip .vgvavtt_clickable:hover {
    cursor: pointer;
}

.vgvavtt-ai {
    display: inline-block;
    padding: 0;
}

.vgvavtt-ai img {
    position: relative;
    height: 3em;
    width: auto;
}


/* settings for youtube player elements */
.vgv-container {
    position: relative;
    display: block;
    border: none;
    background: none;
    z-index: 101;
    pointer-events: none;
}


.hero-name-container {
    position: absolute;
    z-index: 102;
    left: 29.4%;
    top: 85.1%;
    height: 1.4%;
    width: 10.6%;
}


.game-clock {
    position: absolute;
    z-index: 102;
    left: 48.0%;
    top: 2.4%;
    height: 1.0%;
    width: 4.0%;
}

.hoverbox {
    position: absolute;
    border-style: solid;
    border-width: 1px;
    border-color: white;
    z-index: 300;
    pointer-events: auto;
}


/* four-slot heroes */
/* abilities */
.s-4 {width: 2.7%; height: 4.9%; top: 87.7%;}
.s-4-0 {left: 44.1%;}
.s-4-1 {left: 47.5%;}
.s-4-2 {left: 51.0%;}
.s-4-3 {left: 54.2%;}

/* items */
.i-4  {width: 3.0%; height: 4.0%;}
.i-4-0 {left: 57.9%; top: 87.3%;}
.i-4-1 {left: 61.3%; top: 87.3%;}
.i-4-2 {left: 64.7%; top: 87.3%;}
.i-4-3 {left: 57.9%; top: 91.8%;}
.i-4-4 {left: 61.3%; top: 91.8%;}
.i-4-5 {left: 64.7%; top: 91.8%;}

/* backpack items */
.b-4 {width: 3.0%; height: 2.6%; top: 96.5%}
.b-4-0 {left: 57.9%;}
.b-4-1 {left: 61.3%;}
.b-4-2 {left: 64.7%;}

/* talents */
.t-4 {width: 2.8%; height: 5.2%; top: 87.3%; left: 40.6%;}
.t-5 {width: 2.8%; height: 5.2%; top: 87.3%; left: 39.9%;}
.t-6 {width: 2.8%; height: 5.2%; top: 87.3%; left: 38.3%;}


/* five-slot heroes */
/* abilities */
.s-5 {width: 2.7%; height: 4.91%; top: 87.4%;}
.s-5-0 {left: 43.1%;}
.s-5-1 {left: 46.1%;}
.s-5-2 {left: 49.1%;}
.s-5-3 {left: 52.1%;}
.s-5-4 {left: 55.2%;}

/* items */
.i-5  {width: 3.0%; height: 4.0%;}
.i-5-0 {left: 58.7%; top: 87.3%;}
.i-5-1 {left: 62.1%; top: 87.3%;}
.i-5-2 {left: 65.5%; top: 87.3%;}
.i-5-3 {left: 58.7%; top: 91.8%;}
.i-5-4 {left: 62.1%; top: 91.8%;}
.i-5-5 {left: 65.5%; top: 91.8%;}

/* backpack items */
.b-5 {width: 3.0%; height: 2.6%; top: 96.5%}
.b-5-0 {left: 58.7%;}
.b-5-1 {left: 62.1%;}
.b-5-2 {left: 65.5%;}

/* six-slot heroes */
/* abilities */
.s-6 {width: 2.7%; height: 4.9%; top: 87.4%;}
.s-6-0 {left: 41.5%;}
.s-6-1 {left: 44.5%;}
.s-6-2 {left: 47.6%;}
.s-6-3 {left: 50.6%;}
.s-6-4 {left: 53.7%;}
.s-6-5 {left: 56.6%;}

/* items */
.i-6  {width: 3.0%; height: 4.0%;}
.i-6-0 {left: 60.3%; top: 87.3%;}
.i-6-1 {left: 63.6%; top: 87.3%;}
.i-6-2 {left: 67.0%; top: 87.3%;}
.i-6-3 {left: 60.3%; top: 91.8%;}
.i-6-4 {left: 63.6%; top: 91.8%;}
.i-6-5 {left: 67.0%; top: 91.8%;}
   
/* backpack items */
.b-6 {width: 3.0%; height: 2.6%; top: 96.5%}
.b-6-0 {left: 60.3%;}
.b-6-1 {left: 63.6%;}
.b-6-2 {left: 67.0%;}

/* top-screen hero avatar hoverboxes */
.avatar {
    width: 3.13%;
    height: 3.82%;
    top: 0%;
}

.a-0 {left: 28.13%;}
.a-1 {left: 31.48%;}
.a-2 {left: 34.77%;}
.a-3 {left: 38.09%;}
.a-4 {left: 41.29%;}
.a-5 {left: 55.62%;}
.a-6 {left: 58.91%;}
.a-7 {left: 62.15%;}
.a-8 {left: 65.39%;}
.a-9 {left: 68.75%;}