.ctv-time-chart {
line-height: normal;
font-size: 12px;
position: relative;
font-family: sans-serif;
min-height: 100px;
width: 100%;
max-width: 420px;
/* background-color: #eee; */
display: flex;
flex-direction: column;
gap: 0.5em;
padding: 6px 6px 0;
margin-bottom: 24px;
}
.ctv-time-chart h3 {
font-family: "CTVSans-Bold", "CTV Sans Bold", sans-serif;
font-weight: normal;
font-size: 1.6em;
margin: 0;
}
.ctv-time-chart p {
font-family: sans-serif;
font-size: 12px;
margin-bottom: 0;
}
.ctv-time-chart .year-container {
--rad: 6px;
position: relative;
display: flex;
font-size: 12px;
justify-content: space-around;
gap: 1px;
/* padding-top: calc(var(--rad) / 2); */
margin-top: var(--rad);
border-top: 1px solid #ddd;
}
.ctv-time-chart .year-container .marker {
position: absolute;
top: calc(-1 * var(--rad) + 1px);
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 var(--rad) calc(var(--rad) * 1.5) var(--rad);
border-color: transparent transparent #222 transparent;
transform: rotate(180deg);
margin-left: calc(-1 * var(--rad));
}
.ctv-time-chart .year {
font-size: 0.85em;
flex: 1 1 0px;
opacity: 0.3;
transition-duration: 0.5s;
display: flex;
align-items: center;
justify-content: center;
height: 2rem;
text-align: center;
user-select: none;
}
.ctv-time-chart .year:hover {
transition-delay: 0ms;
opacity: 1;
}
.ctv-time-chart .year.highlight {
font-size: 1.2em;
font-weight: 700;
opacity: 1;
/* background-color: #eee; */
}
.ctv-time-chart .row-container {
min-height: 240px;
position: relative;
overflow: hidden;
}
.ctv-time-chart .row {
display: flex;
gap: 0.5em;
position: absolute;
width: 100%;
/* background-color: #fff; */
}
.ctv-time-chart .bar-container {
flex-grow: 1;
display: flex;
align-items: center;
gap: 4px;
background-color: #eee;
}
.ctv-time-chart .bar {
position: relative;
background-color: #366850;
}
.ctv-time-chart .row .name {
width: 80px;
flex-grow: 0;
text-wrap: nowrap;
text-align: right;
display: flex;
align-items: center;
justify-content: flex-end;
}
.ctv-time-chart .row .number {
font-variant-numeric: tabular-nums;
opacity: 1;
display: flex;
align-items: center;
font-size: 0.9em;
position: absolute;
left: calc(100% + 4px);
right: auto;
height: 100%;
transition-duration: 0.25s;
}
.ctv-time-chart .row .number.inside {
opacity: 0;
left: unset;
text-align: right;
right: 4px;
color: #fff;
}
.ctv-time-chart .row .bar.inside .number.inside {
opacity: 1;
}
.ctv-time-chart .row .bar.inside .number.outside {
opacity: 0;
}
.ctv-time-chart .controls {
display: flex;
justify-content: center;
align-items: center;
gap: 1em;
}
.ctv-time-chart button {
background-color: #e1e1e1;
border: none;
font-size: 18px;
width: 1.5em;
height: 1.5em;
border-radius: 1px;
background-repeat: no-repeat;
background-size: 1em;
background-position: 50%;
}
.ctv-time-chart button.play {
font-size: 24px;
background-image: url('data:image/svg+xml,');
}
.ctv-time-chart button.play.playing {
background-image: url('data:image/svg+xml,');
}
.ctv-time-chart button.prev {
background-image: url('data:image/svg+xml,');
}
.ctv-time-chart button.next {
background-image: url('data:image/svg+xml,');
}
.ctv-time-chart button.pause {
background-image: url('data:image/svg+xml,');
}
.ctv-time-chart button.replay {
background-image: url('data:image/svg+xml,');
}