112 lines
2.5 KiB
SCSS
112 lines
2.5 KiB
SCSS
|
/**
|
||
|
|
* This is the styling for the API index page (`api/index`), in particular for the API
|
||
|
|
* search table. It involves overriding the style sheet of DataTables which does not
|
||
|
|
* fit well into the theme, especially in dark theme; see https://datatables.net/
|
||
|
|
*/
|
||
|
|
|
||
|
|
.dt-container {
|
||
|
|
margin-bottom: 2rem;
|
||
|
|
|
||
|
|
// Fix the selection box for entries per page
|
||
|
|
select.dt-input {
|
||
|
|
padding: 0 !important;
|
||
|
|
margin-right: 0.4rem !important;
|
||
|
|
|
||
|
|
> option {
|
||
|
|
color: var(--pst-color-text-base);
|
||
|
|
background-color: var(--pst-color-background);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Fix the search box
|
||
|
|
input.dt-input {
|
||
|
|
width: 50%;
|
||
|
|
line-height: normal;
|
||
|
|
padding: 0.1rem 0.3rem !important;
|
||
|
|
margin-left: 0.4rem !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
table.dataTable {
|
||
|
|
th {
|
||
|
|
// Avoid table header being too tall
|
||
|
|
p {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Fix the ascending/descending order buttons in the header
|
||
|
|
span.dt-column-order {
|
||
|
|
&::before,
|
||
|
|
&::after {
|
||
|
|
color: var(--pst-color-text-base);
|
||
|
|
line-height: 0.7rem !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
td {
|
||
|
|
// Fix color of text warning no records found
|
||
|
|
&.dt-empty {
|
||
|
|
color: var(--pst-color-text-base) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Unset bottom border of the last row
|
||
|
|
tr:last-child > * {
|
||
|
|
border-bottom: unset !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
div.dt-paging button.dt-paging-button {
|
||
|
|
padding: 0 0.5rem;
|
||
|
|
|
||
|
|
&.disabled {
|
||
|
|
color: var(--pst-color-border) !important;
|
||
|
|
|
||
|
|
// Overwrite the !important color assigned by DataTables because we must keep
|
||
|
|
// the color of disabled buttons consistent with and without hovering
|
||
|
|
&:hover {
|
||
|
|
color: var(--pst-color-border) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Fix colors of paging buttons
|
||
|
|
&.current,
|
||
|
|
&:not(.disabled):not(.current):hover {
|
||
|
|
color: var(--pst-color-on-surface) !important;
|
||
|
|
border-color: var(--pst-color-surface) !important;
|
||
|
|
background: var(--pst-color-surface) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Highlight the border of the current selected paging button
|
||
|
|
&.current {
|
||
|
|
border-color: var(--pst-color-text-base) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Styling the object description cells in the table
|
||
|
|
div.sk-apisearch-desc {
|
||
|
|
p {
|
||
|
|
margin-bottom: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.caption > p {
|
||
|
|
a,
|
||
|
|
code {
|
||
|
|
color: var(--pst-color-text-muted);
|
||
|
|
}
|
||
|
|
|
||
|
|
code {
|
||
|
|
padding: 0;
|
||
|
|
font-size: 0.7rem;
|
||
|
|
font-weight: var(--pst-font-weight-caption);
|
||
|
|
background-color: transparent;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sd-badge {
|
||
|
|
font-size: 0.7rem;
|
||
|
|
margin-left: 0.3rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|