qwc2/components/style/AttributeTableWidget.css

QGIS Web Client

div.AttributeTable {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

div.attribtable-overlay {
    position: absolute;
    left: 0;
    right: 0;
    top: 2.25em;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(200, 200, 200);
    z-index: 4;
}

div.attribtable-overlay > div.spinner {
    width: 4em;
    height: 4em;
    margin-right: 1em;
}

div.attribtable-toolbar {
    display: flex;
    align-items: center;
    margin-bottom: 0.125em;
}

div.attribtable-toolbar > * {
    margin: 0.125em;
}

div.attribtable-contents {
    flex: 1 1 auto;
    background-color: var(--list-bg-color);
    overflow: auto;
    border: 1px solid var(--border-color);
}

table.attribtable-table {
    min-width: 100%;
}

table.attribtable-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0;
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    box-shadow: inset -1px 0 0 var(--border-color),
                inset 0 -1px 0 var(--border-color);
    overflow: hidden;
}

table.attribtable-table th:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    width: 2em;
}

table.attribtable-table th > span {
    margin: 0 0 -1px -1px;
    padding: 0.25em;
    display: flex;
    align-items: center;
    position: relative;
}

table.attribtable-table th > span > span.icon {
    position: absolute;
    right: 1px;
    background-color: var(--button-bg-color);
}

span.attribtable-table-headername {
    flex: 1 1 auto;
    text-align: left;
}

table.attribtable-table th > span > span.icon {
    flex: 0 0 auto;
    margin-left: 0.5em;
}

table.attribtable-table tr:nth-child(even) {
    background-color: var(--list-item-bg-color-even);
}

table.attribtable-table tr:hover:not(.row-disabled) {
    background-color: var(--list-item-bg-color-hover);
    color: var(--list-item-text-color-hover);
}

table.attribtable-table td:first-child {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    align-items: center;
    padding: 0.25em 0.5em;
    background-clip: padding-box;
    position: sticky;
    left: 0;
    z-index: 1;
    width: 2.5em;
}

span.attribtable-table-ldraghandle,
span.attribtable-table-rdraghandle {
    touch-action: none;
    display: block;
    position: absolute;
    width: 4px;
    top: 0;
    bottom: 0;
    cursor: ew-resize;
}

span.attribtable-table-ldraghandle {
    left: -1px;
}

span.attribtable-table-rdraghandle {
    right: 0px;
}

span.attribtable-table-tdraghandle,
span.attribtable-table-bdraghandle {
    touch-action: none;
    display: block;
    position: absolute;
    height: 4px;
    left: 0;
    right: 0;
    cursor: ns-resize;
}

span.attribtable-table-tdraghandle {
    top: -1px;
}

span.attribtable-table-bdraghandle {
    bottom: 0px;
}

table.attribtable-table {
    table-layout: fixed;
    width: 100%;
}

table.attribtable-table td {
    border: 1px solid var(--border-color);
    text-align: center;
    height: 2em;
}

table.attribtable-table td:first-child {
    border-left-width: 0;
}

table.attribtable-table td > input:not([type=checkbox]),
table.attribtable-table td > select,
table.attribtable-table td > div.TextInput,
table.attribtable-table td > div.number-input,
table.attribtable-table td > div.edit-multi-select,
table.attribtable-table td > span.edit-upload-field,
table.attribtable-table td > span.edit-upload-field-input {
    min-width: 100%;
    width: 0;
    border: none!important;
    background-color: transparent!important;
    margin: 0;
    height: 100%;
}

table.attribtable-table td > div.TextInput,
table.attribtable-table td > div.TextInput > pre {
    min-height: 2em;
}

table.attribtable-table tr.row-disabled td > *:disabled,
table.attribtable-table tr.row-disabled,
table.attribtable-table tr.row-disabled * {
    color: var(--text-color-disabled);
    cursor: not-allowed!important;
}

div.attribtable-footbar {
    display: flex;
    align-items: center;
    margin: 0 -0.25em;
}

div.attribtable-footbar > div {
    margin: 0.25em;
}

div.attribtable-filter {
    flex: 1 1 auto;
}

div.attribtable-filter div.TextInput {
    flex: 1 1 auto;
}

body.ewresizing, body.ewresizing * {
    cursor: ew-resize!important;
    user-select: none;
}

body.nsresizing, body.nsresizing * {
    cursor: ns-resize!important;
    user-select: none;
}