Packages
kino
0.12.2
0.19.0
0.18.0
0.17.0
0.16.1
0.16.0
0.15.3
0.15.2
0.15.1
0.15.0
0.14.2
0.14.1
0.14.0
0.13.2
0.13.1
0.13.0
0.12.3
0.12.2
0.12.1
0.12.0
0.11.3
0.11.2
0.11.1
0.11.0
0.10.0
0.9.4
0.9.3
0.9.2
0.9.1
0.9.0
0.8.1
0.8.0
0.7.0
0.6.2
0.6.1
0.6.0
retired
0.5.2
0.5.1
0.5.0
0.4.1
0.4.0
0.3.1
0.3.0
0.2.3
0.2.2
0.2.1
0.2.0
0.1.3
0.1.2
0.1.1
0.1.0
Interactive widgets for Livebook
Current section
Files
Jump to
Current section
Files
lib/assets/remote_execution_cell/main.css
.app {
font-family: "Inter";
box-sizing: border-box;
--gray-50: #f8fafc;
--gray-100: #f0f5f9;
--gray-200: #e1e8f0;
--gray-300: #cad5e0;
--gray-400: #91a4b7;
--gray-500: #61758a;
--gray-600: #445668;
--gray-800: #1c2a3a;
--blue-100: #ecf0ff;
--blue-600: #3e64ff;
--yellow-100: #fff7ec;
--yellow-600: #ffa83f;
--red--300: #f1a3a6;
}
input,
select,
textarea,
button {
font-family: inherit;
}
.header {
display: flex;
flex-wrap: wrap;
align-items: stretch;
justify-content: flex-start;
background-color: var(--blue-100);
padding: 8px 16px;
border-left: solid 1px var(--gray-300);
border-top: solid 1px var(--gray-300);
border-right: solid 1px var(--gray-300);
border-bottom: solid 1px var(--gray-200);
border-radius: 0.5rem 0.5rem 0 0;
gap: 16px;
}
.input {
padding: 8px 12px;
background-color: var(--gray-50);
font-size: 0.875rem;
border: 1px solid var(--gray-200);
border-radius: 0.5rem;
color: var(--gray-600);
}
.input::placeholder {
color: var(--gray-400);
}
.input:focus {
outline: none;
}
.input--md {
width: auto;
max-width: 175px;
}
.input--xs {
width: auto;
max-width: 110px;
}
.input--text {
max-width: 50%;
}
.input-label {
display: block;
margin-bottom: 2px;
font-size: 0.875rem;
color: var(--gray-800);
font-weight: 500;
}
.inline-input-label {
display: block;
margin-bottom: 2px;
color: var(--gray-600);
font-weight: 500;
padding-right: 6px;
font-size: 0.875rem;
text-transform: uppercase;
position: relative;
top: 2px;
}
.input-container {
flex-grow: 1;
display: flex;
align-items: center;
}
.field {
display: flex;
flex-direction: column;
}
.inline-field {
display: flex;
flex-direction: row;
align-items: center;
}
.required {
border: 1px solid var(--red--300);
}
.grow {
flex-grow: 1;
}
select.input {
appearance: none;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik01Ljk5OTg5IDQuOTc2NzFMMTAuMTI0OSAwLjg1MTcwOEwxMS4zMDMyIDIuMDMwMDRMNS45OTk4OSA3LjMzMzM3TDAuNjk2NTU1IDIuMDMwMDRMMS44NzQ4OSAwLjg1MTcwOEw1Ljk5OTg5IDQuOTc2NzFaIiBmaWxsPSIjNjE3NThBIi8+Cjwvc3ZnPgo=");
background-repeat: no-repeat;
background-position: center right 10px;
background-size: 10px;
padding-right: 28px;
}
.hidden-checkbox-input {
display: none;
}
.input-icon {
border: 1px solid var(--gray-200);
outline: none;
padding: 8px 12px 8px 42px;
max-width: 175px;
}
.input-icon:hover {
cursor: pointer;
}
.input-icon.unavailable {
border-color: var(--red-300);
}
.input-icon-container {
position: relative;
}
.icon-container {
position: absolute;
top: 20px;
left: 4px;
padding: 5px 6px;
border-right: 1px solid var(--gray-200);
width: 22px;
height: 23px;
background-color: var(--gray-200);
border-radius: 0.5rem;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
margin-left: 1px;
}
.icon-container.inline {
position: absolute;
top: 1px;
}
.icon-container.inline.md {
left: 59px;
}
.icon-container.inline.sm {
left: 46px;
}
.icon-container:hover {
cursor: pointer;
background-color: var(--gray-300);
}
.input-icon-text {
border: 1px solid var(--gray-200);
outline: none;
padding: 8px 12px 8px 42px;
max-width: 175px;
}
.input-icon.required {
border: 1px solid var(--red--300);
}
.input-icon-text.required {
border: 1px solid var(--red--300);
}
.hidden-checkbox:hover {
cursor: pointer;
}