deemixer/src/styles/scss/globals/_tables.scss

$vertical-separator: 7px;
$table-border-radius: 3px;

.table {
	width: 100%;
	-webkit-border-horizontal-spacing: 0px;
	-webkit-border-vertical-spacing: 0px;

	tbody {
		tr:not(.table__row-no-highlight):hover {
			background: var(--table-highlight);
		}
	}

	tr {
		background: var(--table-bg);
		transition: background-color 175ms ease-in-out;

		&:nth-child(even) {
			background: var(--table-zebra);
			transition: background-color 175ms ease-in-out;
		}

		&:not(:last-child) {
			border-bottom: 1px solid var(--table-highlight);
		}
	}

	td,
	th {
		vertical-align: middle;
	}

	th {
		.sortable {
			-webkit-user-select: none;
			user-select: none;
		}

		.sort-asc,
		.sort-desc {
			&::after {
				font-size: 0.7em;
				padding-left: 3px;
				line-height: 0.7em;
			}
		}

		.sort-asc::after {
			content: '\25b2';
		}

		.sort-desc::after {
			content: '\25bc';
		}
	}

	td {
		padding: $vertical-separator 10px;

		&:first-child {
			padding: $vertical-separator 10px $vertical-separator 20px;
		}

		&:last-child {
			padding: $vertical-separator 20px $vertical-separator 10px;
		}

		img {
			vertical-align: middle;
		}
	}

	/* === Tracks Table === */
	&--tracks {
		border-collapse: collapse;

		thead {
			border-bottom: 2px solid var(--table-highlight);
		}

		th {
			padding-bottom: 10px;
			height: 45px;
		}

		td {
			height: 35px;

			&.breakline {
				word-break: break-word;
			}
		}

		tr {
			&:first-child {
				td {
					&:first-child {
						border-top-left-radius: $table-border-radius;
					}

					&:last-child {
						border-top-right-radius: $table-border-radius;
					}
				}
			}

			&:last-child {
				td {
					&:first-child {
						border-bottom-left-radius: $table-border-radius;
					}

					&:last-child {
						border-bottom-right-radius: $table-border-radius;
					}
				}
			}
		}
	}

	/* === Tracklist Table === */
	&--tracklist {
		thead {
			border-bottom: 2px solid var(--table-highlight);
		}

		th {
			height: 45px;
			padding: $vertical-separator 10px;

			&:first-child {
				padding: $vertical-separator 10px $vertical-separator 20px;
			}

			&:last-child {
				padding: $vertical-separator 20px $vertical-separator 10px;
			}
		}

		td {
			height: 35px;
		}
	}

	/* === Charts Table === */
	&--charts {
		td {
			height: 35px;
		}
	}

	.table__icon {
		box-sizing: content-box;
		width: 32px;

		&--big {
			width: 48px;
			text-align: center;
		}
	}

	.table__cell {
		&--x-small {
			width: 0.32%;
		}

		&--small {
			width: 3.2%;
		}

		&--medium {
			width: 28.7%;
		}

		&--large {
			width: 50%;
		}

		&--left {
			text-align: left;
		}

		&--center {
			text-align: center;
		}

		&--right {
			text-align: right;
		}

		&--download {
			cursor: pointer;

			i.material-icons {
				transition: color 175ms ease-in-out;
			}

			&:hover {
				i.material-icons {
					color: var(--table-bg);
				}
			}
		}
	}

	.table__cell-content {
		&.table__cell-content--vertical-center {
			// Wrap cell content in this to center vertically cells
			// with material icons or both material icons and text
			display: flex;
			align-items: center;
		}
	}
}

.track_row {
	> td > img {
		width: 32px;
		height: 32px;
	}

	> td > a > img {
		width: 56px;
		height: 56px;
	}
}

// @todo Remove
.top-tracks-position {
	padding: 12px;
	text-align: center;
	cursor: default;
}