style = html`
<div></div>
<style>
.theme-adb input {
accent-color: "#4f80ff";
}
.theme-adb form {
width: auto;
}
.${ns} div label {
background-color: #eff3f5;
margin: 10px;
padding: 0.5rem 0.5rem;
border-radius: 0.5rem;
}
.${ns} div label:hover,
.${ns} div label:active,
.${ns} div label:focus {
background-color: #99AFC2;
}
figure {
margin-left: 0px;
margin-right: 0px;
padding: 0px;
}
.mode {
color: #0f151a;
background-color: #ffffff;
}
p, span, label, .inputs-3a86ea select, .inputs-3a86ea-input>input[type=number], .oi-3a86ea select, .oi-3a86ea-input>input[type=number]
{
font-size: 12px;
font-weight: 400;
font-family: InterRegular;
color: #0f151a;
}
@font-face {
font-family: Source Serif Pro;
src: url(https://static.rndtech.de/share/rnd/jchrist/SourceSerifPro-Regular.ttf);
}
@font-face {
font-display: swap;
font-family: 'DIN Next LT Pro';
font-style: normal;
font-weight: 700;
src: url(https://static.rndtech.de/share/rnd/jchrist/DINNextLTPro-Bold.woff2) format("woff2"),
url(https://static.rndtech.de/share/rnd/jchrist/DINNextLTPro-Bold.woff) format("woff"),
url(https://static.rndtech.de/share/rnd/jchrist/DINNextLTPro-Bold.ttf) format("truetype")
}
@font-face {
font-display: swap;
font-family: 'InterRegular';
font-style: normal;
font-weight: 400;
src: url(https://static.rndtech.de/share/rnd/jchrist/Inter-Regular.woff2) format("woff2"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Regular.woff) format("woff"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Regular.ttf) format("truetype")
}
@font-face {
font-display: swap;
font-family: 'InterMedium';
font-style: normal;
font-weight: 500;
src: url(https://static.rndtech.de/share/rnd/jchrist/Inter-Medium.woff2) format("woff2"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Medium.woff) format("woff"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Medium.ttf) format("truetype")
}
@font-face {
font-display: swap;
font-family: 'InterBold';
font-style: normal;
font-weight: 700;
src: url(https://static.rndtech.de/share/rnd/jchrist/Inter-Bold.woff2) format("woff2"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Bold.woff) format("woff"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Bold.ttf) format("truetype")
}
h2 {
color: rgb(15, 21, 26);
font-family: "DIN Next LT Pro", sans-serif;
font-weight: 700;
font-size: 22px;
margin: 0px 0px 0px 0px;
}
.title {
color: rgb(15, 21, 26);
font-family: "DIN Next LT Pro", sans-serif;
font-weight: 700;
font-size: 22px;
margin: 0px 0px 0px 0px;
}
.subtitle {
font-family: "Source Serif Pro", serif;
font-size: 17px;
font-weight: 400;
color: rgb(41, 56, 69);
}
.credits {
font-size: 12px;
color: #99AFC2;
font-family: InterRegular, sans-serif;
font-weight: 400;
position: relative;
}
body {
display: block;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 0px;
}
svg {
background-color: white !important;
color: #0f151a !important;
}
g:not([font-size], [font-weight]) text {
font-size: 12px;
line-height: 125%;
font-weight: 400;
font-family: InterRegular;
color: #0f151a;
background-color: #ffffff;
}
.box {
display: flex;
flex-wrap: wrap;
}
.box_left {
width: calc(50% - 10px);
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 10px;
}
.box_right {
width: calc(50% - 12px);
padding-top: 0px;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 0px;
border-left: 2px dotted #c5d2dd;
}
.mode {
color: #0f151a;
background-color: #ffffff;
}
@media (prefers-color-scheme: dark) {
.${ns} div label {
background-color: #99AFC2;
margin: 10px;
padding: 0.25rem 0.5rem;
border-radius: 0.5rem;
}
.${ns} div label:hover,
.${ns} div label:active,
.${ns} div label:focus {
background-color: #435b70;
}
p, span, label, .inputs-3a86ea select, .inputs-3a86ea-input>input[type=number], .oi-3a86ea select, .oi-3a86ea-input>input[type=number]
{
font-size: 12px;
font-weight: 400;
font-family: InterRegular;
color: #ffffff;
background-color: #293845;
}
.mode {
color: #ffffff;
background-color: #293845;
}
.subtitle {
font-family: "Source Serif Pro", serif;
font-size: 17px;
font-weight: 400;
color: #ffffff;
}
g:not([font-size], [font-weight]) text {
font-size: 12px;
font-weight: 400;
font-family: InterRegular;
color: #ffffff;
background-color: #293845;
}
svg {
background-color: #293845 !important;
color: white !important;
}
.subtitle {
font-family: "Source Serif Pro", serif;
font-size: 17px;
font-weight: 400;
color: #ffffff;
}
g:not([font-size], [font-weight]) text {
font-size: 12px;
line-height: 125%;
font-weight: 400;
font-family: InterRegular;
color: #ffffff;
background-color: #293845;
}
}
</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.
