Packages
kino
0.5.1
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/data_table/main.css
.app {
font-family: "Inter";
padding: 0px 12px 12px 12px;
--gray-50: #f8fafc;
--gray-100: #f0f5f9;
--gray-200: #e1e8f0;
--gray-300: #cad5e0;
--gray-400: #91a4b7;
--gray-500: #61758a;
--gray-700: #304254;
--gray-800: #1c2a3a;
}
.navigation {
margin-bottom: 16px;
display: flex;
align-items: center;
}
.navigation > :not(:first-child) {
margin-left: 12px;
}
.navigation__name {
font-size: 1rem;
font-weight: 600;
color: var(--gray-800);
}
.navigation__space {
flex-grow: 1;
}
.pagination {
display: flex;
}
.pagination > :not(:first-child) {
margin-left: 8px;
}
.pagination__button {
font-family: inherit;
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
font-weight: 500;
font-size: 0.875rem;
color: var(--gray-400);
}
.pagination__button:hover {
color: var(--gray-800);
}
.pagination__button:focus {
outline: none;
}
.pagination__button:disabled {
pointer-events: none;
color: var(--gray-300);
}
.pagination__info {
padding: 6px 12px;
border: 1px solid var(--gray-300);
font-size: 0.875rem;
font-weight: 500;
color: var(--gray-400);
border-radius: 8px;
}
.table-container {
box-shadow: 0 0 25px -5px rgba(0, 0, 0, 0.1),
0 0 10px -5px rgba(0, 0, 0, 0.04);
border-radius: 8px;
max-width: 100%;
overflow-y: auto;
}
.table-container--loading {
opacity: 0.5;
pointer-events: none;
transition: opacity 0.25s ease-in-out;
}
.table {
width: 100%;
border-collapse: collapse;
}
.table__row {
border-bottom: 1px solid var(--gray-200);
white-space: nowrap;
}
.table__row--hover:hover {
background-color: var(--gray-50);
}
.table__row--no-trailing-border:last-child {
border-width: 0;
}
.table__cell {
text-align: left;
padding: 12px 24px;
color: var(--gray-500);
}
.table__head .table__cell {
color: var(--gray-700);
font-width: 600;
}
.table__cell--clickable {
cursor: pointer;
}
.table__cell-content {
display: flex;
align-items: center;
}
.table__cell-content > :not(:first-child) {
margin-left: 4px;
}
.icon-button {
background: none;
border: none;
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
color: var(--gray-400);
line-height: 1;
}
.icon-button:hover {
color: var(--gray-800);
}
.icon-button:focus {
outline: none;
background-color: var(--gray-100);
}
.icon-button:disabled {
color: var(--gray-300);
cursor: default;
}
.no-data {
color: var(--gray-700);
}
.invisible {
visibility: hidden;
}
.ri {
font-size: 1.25rem;
vertical-align: middle;
line-size: 1;
}
.tiny-scrollbar::-webkit-scrollbar {
width: 0.4rem;
height: 0.4rem;
}
.tiny-scrollbar::-webkit-scrollbar-thumb {
border-radius: 0.25rem;
background-color: var(--gray-400);
}
.tiny-scrollbar::-webkit-scrollbar-track {
background-color: var(--gray-100);
}