zotero/scss/components/_virtualized-table.scss

//
// Virtualized table
// --------------------------------------------------

/**
		<hbox class="virtualized-table-container" flex="1">
				<html:div id="virtualized-table-div"/>
		</hbox>
 */
.virtualized-table-container {
	display: flex;
	height: 0;
	flex-direction: column;

	> div {
		display: flex;
		flex: 1;
		overflow: hidden;
		position: relative;
	}
}

.virtualized-table, .drag-image-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	position: relative;

	&:focus {
		outline: none;
	}

	&.resizing {
		cursor: col-resize;

		.cell {
			cursor: col-resize;
		}
	}
	
	.cell {
		min-width: 30px;
		cursor: default;
		white-space: nowrap;
		flex-grow: 1;
		box-sizing: border-box;

		&.primary {
			display: flex;
			align-items: center;

			:not(.cell-text) {
				flex-shrink: 0
			}

			.cell-text {
				flex-grow: 1;
				text-overflow: ellipsis;
				overflow: hidden;
				margin-inline-start: 5px;
			}

			.twisty + .cell-text, .spacer-twisty + .cell-text {
				margin-inline-start: 0;
				margin-inline-end: 0;
			}

			// Put the margin on the other side if the directionality of the
			// .cell-text is the opposite of that of the table
			&:dir(ltr) .cell-text:dir(rtl),
			&:dir(rtl) .cell-text:dir(ltr) {
				margin-inline-start: 0;
				margin-inline-end: 6px;
			}

			&:dir(ltr) .cell-text {
				text-align: left;
			}

			&:dir(rtl) .cell-text {
				text-align: right;
			}
		}

		.cell-icon {
			min-width: 16px;
		}
	}

	.row {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
		border-radius: 5px;

		&.drop {
			color: var(--material-background) !important;
			background: var(--fill-secondary) !important;

			* {
				pointer-events: none !important;
			}
		}

		span.drop-before, span.drop-after {
			position: absolute;
			width: 20%;
			height: 1px;
			background-color: var(--fill-secondary);
			pointer-events: none;
		}

		span.drop-before {
			top: 0;
		}

		span.drop-after {
			bottom: -1px;
		}

		&.selected:not(.highlighted) {
			background-color: SelectedItem;
			color: SelectedItemText;

			@include state(".virtualized-table:not(:focus)") {
				color: var(--fill-primary);
				background-color: var(--fill-quarternary);
			}
		}

		&.highlighted {
			background: #FFFF99;
		}

		&.unread {
			font-weight: bold;
		}

		&.context-row {
			color: gray;
		}

		.spacer-twisty {
			display: inline-block;
			min-width: 16px;
		}

		.twisty {
			margin-inline-end: 0 !important;
			display: flex;
			align-items: center;
			transition: transform 0.125s ease;
			transform: rotate(-90deg);

			&.open {
				transform: rotate(0deg) !important;
			}

			&.icon-css {
				width: 16px;
				height: 16px;

				@include focus-states using ($color) {
					@include svgicon("chevron-8", $color, "8");
					background-size: 8px;
					background-repeat: no-repeat;
				}
			}
		}
	}

	.column-drag-marker {
		z-index: 99999;
		position: absolute;
		top: 0;
		height: 100%;
		width: 2px;
		background-color: #ccc;
	}
}

.virtualized-table.multi-select:focus {

	.row.focused {
		border: 1px dotted highlight;
		box-sizing: initial;
		margin: -1px 0;
		width: calc(100% - 2px);
		z-index: 10000;

		> *:first-child {
			margin-inline-start: -1px;
		}
		> *:last-child {
			margin-inline-end: -1px;
		}
	}
}

.virtualized-table-header {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: calc(100% - 11px);
	border-bottom: 1px solid #ccc;
	background: #f6f6f6;
	height: 1.8em;
	overflow: hidden;
	border-inline-end: 1px solid #ddd;

	&.static-columns {
		pointer-events: none;
	}

	.column-picker {
		text-align: center;
	}

	.cell {
		display: flex;
		position: relative;
		height: 100%;
		align-items: center;
		padding: 0 5px;

		&:hover {
			background: #fff;
		}

		&.dragging {
			background: #e9e9e9;
		}

		.resizer {
			background: linear-gradient(#ddd, #ddd) no-repeat center/1px 80%;
			cursor: col-resize;
			height: 100%;
			content: "\00a0";
			display: block;
			position: absolute;
			left: -5px;
			min-width: 10px;
		}

		.label {
			margin-inline-start: 5px;
			overflow: hidden;
			text-overflow: ellipsis;
			flex: 1;
		}
		&:first-child .label {
			margin-inline-start: 4px;
		}

		&.cell-icon {
			> .label {
				margin-inline-start: 0;
			}

			justify-content: center;
		}

		.sort-indicator {
			-moz-appearance: toolbarbutton-dropdown;
			display: block;
			margin-right: 10px;

			&.ascending {
				transform: rotate(180deg);
			}
		}
	}
}

.virtualized-table-body, .drag-image-container {
	flex: 1 0;
	max-width: 100%;
	overflow: auto;

	.cell {
		padding: 0 5px;
		text-overflow: ellipsis;
		overflow: hidden;
		max-height: 100%;
		// TEMP: Disables tooltip display for truncated cells, but without this rule
		// you cannot drag items before selecting them first because the ondrag event is
		// not called if any children under the drag element are removed for which 
		// pointer-events are enabled, and we need to rerender the rows for selection
		// before dragging.
		pointer-events: none;
	}
}

*[dir=rtl] {
	.virtualized-table-header {
		.cell .sort-indicator {
			left: 10px;
			right: initial;
		}

		.resizer {
			right: -5px;
			left: initial;
		}
	}

	.row .twisty {
		transform: rotate(90deg);
	}
}