Rocket.Chat/app/webdav/client/webdavFilePicker.css

.webdav {
	display: flex;
	flex-direction: column;

	height: 60vh;

	padding: 0;

	.file-picker-loading .loading-animation > .bounce {
		background-color: #444444;
	}

	.current-folder-path {
		display: flex;
		flex-direction: row;

		height: 25px;

		.webdav_parent_folder {
			padding: 0 5px;

			cursor: pointer;

			border-radius: 5px;
			background-color: #e0e0e0;
		}
	}

	.webdav-table-header {
		display: flex;
		flex-direction: row;

		margin-bottom: 8px;

		color: #444444;

		font-size: 0.9rem;
		font-weight: 500;
		line-height: 1rem;
		align-items: center;

		i {
			color: #5b5b5b;

			font-size: 16px;
		}

		.webdav-path-breadcrumb {
			display: flex;
			overflow-x: auto;

			white-space: nowrap;
			align-items: center;
			flex-flow: row nowrap;
			-ms-overflow-style: none;

			/* scrollbar-width: none; */

			&::-webkit-scrollbar {
				display: none;
			}

			.webdav-breadcrumb-item {
				padding: 3px 0;

				&:last-child {
					padding-right: 30px;
				}

				.webdav-breadcrumb-folder {
					overflow: hidden;

					max-width: 100px;
					padding: 4px 3px;

					cursor: pointer;

					transition: all 0.2s ease-in-out;
					white-space: nowrap;
					text-overflow: ellipsis;

					color: inherit;

					font-family: inherit;
					font-size: inherit;
					font-weight: inherit;
					line-height: inherit;

					&:hover,
					&:focus {
						max-width: 300px;

						border-radius: 5px;
						background: #f1f3f4;
					}
				}
			}
		}

		.webdav-header-spacer {
			flex: 1;
		}

		.webdav-search {
			position: relative;

			&::before {
				position: absolute;
				z-index: 5;
				top: 0;
				left: -40px;

				width: 40px;
				height: 100%;

				content: '';
				pointer-events: none;

				background: linear-gradient(to right, transparent, white);
			}

			.webdav-search-input {
				width: 36px;
				padding: 4px 6px 4px 32px;

				cursor: pointer;
				transition: width 0.3s ease-in-out;

				border: none;
				outline: none;

				font-family: inherit;
				font-size: 0.85rem;
				font-weight: 400;

				&:focus {
					width: 200px;
					padding-left: 40px;

					cursor: auto;
				}
			}

			.webdav-search-icon {
				position: absolute;
				z-index: 5;
				top: 0;
				left: 6px;

				padding: 4px 3px;

				cursor: pointer;

				&:hover,
				&:focus {
					border-radius: 5px;
					background: #f1f3f4;
				}
			}
		}

		.list-grid-mode {
			margin-right: 5px;
			padding: 4px 3px;

			cursor: pointer;

			&:hover,
			&:focus {
				border-radius: 5px;
				background: #f1f3f4;
			}
		}
	}

	.rc-table-content {
		display: flex;
		overflow-x: auto;
		flex-direction: column;
		flex: 1 1 100%;

		border-top: 1px solid rgba(216, 216, 216, 0.4);

		.webdav {
			&__file-icon,
			&__file-name,
			&__file-date {
				overflow: hidden;

				white-space: nowrap;
				text-overflow: ellipsis;
			}

			&__file-name,
			&__file-size,
			&__file-date {
				min-width: 80px;
			}

			&__file-icon {
				width: 36px;
			}
		}

		& tr {
			color: #444444;

			.table-file-avatar {
				overflow: hidden;

				height: 15px;

				.file-preview {
					width: 15px;
					height: 15px;
					margin-left: 1px;

					border-radius: 1px;
				}
			}
		}

		& .js-sort {
			cursor: pointer;

			&.is-sorting .table-fake-th .rc-icon {
				opacity: 1;
			}
		}

		& .table-fake-th {
			color: #444444;

			&:hover .rc-icon {
				opacity: 1;
			}

			& .rc-icon {
				transition: opacity 0.3s;

				opacity: 0;

				font-size: 1rem;
			}

			& .webdav-grid-back-icon .rc-icon {
				cursor: pointer;

				opacity: 1;
			}
		}

		& .table-tr-dummy {
			height: 10px;
		}

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

		.webdav-grid-header {

			padding: 0.5rem 0;

			color: #444444;
			border-bottom: 1px solid rgba(216, 216, 216, 0.4);

			font-size: 0.75rem;
			font-weight: 500;
			line-height: 1rem;

			.webdav-grid-back-icon {
				float: left;

				.rc-icon {
					cursor: pointer;

					opacity: 1;

					font-size: 1rem;
				}
			}

			.webdav-sort {
				float: right;

				height: auto;

				border: none;

				.webdav-sort-direction {
					cursor: pointer;
				}

				.rc-select__element {
					width: 120px;
					padding: 0 5px;

					cursor: pointer;

					color: #444444;

					font-family: inherit;
					font-size: 0.75rem;
					font-weight: 500;
					line-height: 1rem;
				}
			}
		}

		.webdav-grid {
			display: grid;

			margin: 15px 0;

			text-align: center;
			grid-gap: 15px 0;
			grid-template-columns: 190px 190px 190px;

			.grid-file-avatar {
				overflow: hidden;

				height: 64px;

				color: #5d5d5d;

				font-size: 64px;

				.file-preview {
					width: 60px;
					height: 60px;

					border-radius: 2px;
				}
			}

			.grid-item {
				overflow: hidden;

				padding: 0.5rem 0;

				cursor: pointer;
				white-space: nowrap;
				text-overflow: ellipsis;

				color: #444444;

				font-size: 0.9rem;

				font-weight: 500;
				line-height: 1rem;

				&:hover,
				&:focus {
					border-radius: 5px;
					background: #f1f3f4;
				}
			}

			.grid-empty {
				color: #444444;

				font-size: 0.9rem;
				font-weight: 500;
				line-height: 1rem;
				grid-column: span 3;
			}
		}
	}

	@media (width <= 980px) {
		.webdav {
			height: 60vh;

			.rc-table-content {
				& th:not(:first-child),
				& td:not(:first-child) {
					display: none;
				}
			}
		}
	}
}