1
0
mirror of https://github.com/lana-k/sqliteviz.git synced 2025-12-06 18:18:53 +08:00
Files
sqliteviz/src/assets/styles/tables.css
2024-01-06 16:51:35 +01:00

116 lines
2.3 KiB
CSS

.rounded-bg {
padding: 35px 5px 5px;
background-color: white;
border-radius: 5px;
position: relative;
border: 1px solid var(--color-border-light);
box-sizing: border-box;
}
.straight .rounded-bg {
border-radius: 0;
border-width: 0 0 1px 0;
}
.header-container {
overflow: hidden;
position: absolute;
top: -1px;
left: -1px;
width: calc(100% + 2px);
padding-left: 7px;
box-sizing: border-box;
background-color: var(--color-bg-dark);
border-radius: 5px 5px 0 0;
}
.straight .header-container {
border-radius: 0;
}
.straight {
height: 100%;
}
.straight .rounded-bg {
/* 27 - height of table footer */
height: calc(100% - 27px);
}
@supports (-moz-appearance:none) {
.header-container {
top: 0;
padding-left: 6px;
}
}
.header-container > div {
display: flex;
width: fit-content;
padding-right: 30px;
}
.table-container {
width: 100%;
max-height: 100%;
overflow: auto;
}
table.sqliteviz-table {
min-width: 100%;
margin-top: -35px;
border-collapse: collapse;
}
.sqliteviz-table thead th, .fixed-header {
font-size: 14px;
font-weight: 600;
box-sizing: border-box;
background-color: var(--color-bg-dark);
color: var(--color-text-light);
border-right: 1px solid var(--color-border-light);
overflow: hidden;
text-overflow: ellipsis;
}
.sqliteviz-table tbody td {
font-size: 13px;
background-color:white;
color: var(--color-text-base);
box-sizing: border-box;
border-bottom: 1px solid var(--color-border-light);
border-right: 1px solid var(--color-border-light);
}
.sqliteviz-table td,
.sqliteviz-table th,
.fixed-header {
padding: 8px 24px;
white-space: nowrap;
}
.sqliteviz-table tbody tr td:last-child,
.sqliteviz-table thead tr th:last-child,
.header-container div .fixed-header:last-child {
border-right: none;
}
.sqliteviz-table td > div.cell-data {
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.table-footer {
display: flex;
justify-content: space-between;
padding: 6px 12px;
}
.table-footer-count {
font-size: 11px;
color: var(--color-text-base);
}
.sqliteviz-table tbody td[data-isNull="true"],
.sqliteviz-table tbody td[data-isBlob="true"] {
color: var(--color-text-light-2);
font-style: italic;
}