Public
Edited
Jun 25, 2024
1 star
ns = Inputs.text().classList[0]
html`<style>
/* all */
.${ns}{
background-color: #f7f7f7;
}
/* labels */
.${ns} label {
background-color: #f0f0f0;
padding: 5px;
border-radius: 10px;
border-style: none;
}
.${ns} label:hover {
background-color: #ffefe0;
color: blue;
}
/* right side */
.${ns} div {
background-color: #red;
padding: 5px;
border-radius: 10px;
}
/* right side: label */
.${ns} div label {
background-color: #ccdbff;
padding: 0px;
border-radius: 10px;
font-style: italic;
}
.${ns} div label:hover,
.${ns} div label:active,
.${ns} div label:focus {
background-color: #303030;
color: #f7f7f7;
}
/* right side: input */
.${ns} input {
background-color: black;
color: white;
accent-color: red;
border-radius: 10px;
border-style: none;
}
/* other */
.${ns} button {
background-color: green;
color: white;
border-radius: 10px;
border-style: none;
}
.${ns} select {
background-color: green;
color: white;
border-radius: 10px;
border-style: none;
width: 450px
font-family: "Roboto Mono";
}
.${ns} textarea {
background-color: black;
color: white;
border-radius: 10px;
border-style: none;
}
.${ns} table {
background-color: white;
color: gray;
border-radius: 10px;
border-style: none;
font-family: "Roboto Mono";
font-size: 10px;
}
</style>`
html`<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">`
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.
