Styles from Descript web application
html`
<div class="playground">
Hello, <span>World!</span>
</div>
`
html`
<div class="playground">
Hello, <span class="active">World!</span>
</div>
`
html`
<div class="playground">
<span class="playhead" data-time="00:00"></span>
Hello, <span>World!</span>
</div>
`
html`
<style>
.playground {
position: relative;
font-family: var(--sans-serif);
font-size: 120%;
padding: 10px 20px;
}
.playground .active {
position: relative;
color: white;
}
.playground .active::before {
content: "";
z-index: -1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: blue;
}
.playground .active::before {
border-radius: 4px;
padding-left: 4px;
margin-left: -4px;
padding-right: 4px;
margin-right: -4px;
}
.playground .playhead {
position: relative;
background-image: url(${await FileAttachment("resting-playhead.svg").url()});
background-position: bottom;
background-repeat: no-repeat;
background-size: 120%;
padding-left: 4px;
margin-left: -4px;
padding-bottom: 2px;
}
.playground .playhead:after {
content: attr(data-time);
font-size: 8pt;
color: silver;
text-align: center;
font-variant-numeric: tabular-nums;
position: absolute;
top: -14px;
left: -28px;
width: 60px;
cursor: default;
pointer-events: none;
user-select: none;
}
</style>
`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
