epicyon/epicyon-graph.css

body, table, input, select, textarea {

}

.graph {
    margin-bottom:1em;
    font:normal 100%/150% arial,helvetica,sans-serif;
}

.graph caption {
    font:bold 150%/120% arial,helvetica,sans-serif;
    padding-bottom:0.33em;
}

.graph tbody th {
    text-align:right;
}

@supports (display:grid) {

    @media (min-width:32em) {

	.graph {
	    display:block;
	    width:100%;
	    height:300px;
	}

	.graph caption {
	    display:block;
	}

	.graph thead {
	    display:none;
	}

	.graph tbody {
	    position:relative;
	    display:grid;
	    grid-template-columns:repeat(auto-fit, minmax(2em, 1fr));
	    column-gap:2.5%;
	    align-items:end;
	    height:100%;
	    margin:3em 0 1em 2.8em;
	    padding:0 1em;
	    border-bottom:2px solid rgba(0,0,0,0.5);
	    background:repeating-linear-gradient(
		180deg,
		rgba(170,170,170,0.7) 0,
		rgba(170,170,170,0.7) 1px,
		transparent 1px,
		transparent 20%
	    );
	}

	.graph tbody:before,
	.graph tbody:after {
	    position:absolute;
	    left:-3.2em;
	    width:2.8em;
	    text-align:right;
	    font:bold 80%/120% arial,helvetica,sans-serif;
	}

	.graph tbody:before {
	    content:"Max";
	    top:-0.6em;
	}

	.graph tbody:after {
	    content:"0";
	    bottom:-0.6em;
	}

	.graph tr {
	    position:relative;
	    display:block;
	}

	.graph tr:hover {
	    z-index:999;
	}

	.graph th,
	.graph td {
	    display:block;
	    text-align:center;
	}

	.graph tbody th {
	    position:absolute;
	    top:-3em;
	    left:0;
	    width:100%;
	    font-weight:normal;
	    text-align:center;
	    white-space:nowrap;
	    text-indent:0;
	    transform:rotate(-45deg);
	}

	.graph tbody th:after {
	    content:"";
	}

	.graph td {
	    width:100%;
	    height:100%;
	    background:#F63;
	    border-radius:0.5em 0.5em 0 0;
	    transition:background 0.5s;
	}

	.graph tr:hover td {
	    opacity:0.7;
	}

	.graph td span {
	    overflow:hidden;
	    position:absolute;
	    left:50%;
	    top:50%;
	    width:0;
	    padding:0.5em 0;
	    margin:-1em 0 0;
	    font:normal 85%/120% arial,helvetica,sans-serif;
	    /* 			background:white; */
	    /* 			box-shadow:0 0 0.25em rgba(0,0,0,0.6); */
	    font-weight:bold;
	    opacity:0;
	    transition:opacity 0.5s;
	    color:white;
	}
	.toggleGraph:checked + table td span,
	.graph tr:hover td span {
	    width:4em;
	    margin-left:-2em;
	    opacity:1;
	}
    }
}