h5ai/src/_h5ai/css/inc/extended.less

#extended.details-view {
	display: none;

	ul {
		margin: 0;
		padding: 0;
		list-style: none;

		li {
			position: relative;
			white-space: nowrap;
			clear: both;

			&.header {
				a, a:active, a:visited {
					padding-bottom: 18px;
					color: #555;
					text-decoration: none;
					opacity: 0.4;
					cursor: pointer;
					.transition(all 0.2s ease-in-out);

					img.ascending, img.descending {
						position: relative;
						top: -2px;
						display: none;
						width: 12px;
						height: 12px;
						padding: 0 8px;
					}
					&:hover {
						color: #555;
						opacity: 0.9;
					}
					&.ascending img.ascending {
						display: inline;
					}
					&.descending img.descending {
						display: inline;
					}
				}
			}
			&.entry {

				a, a:active, a:visited {
					display: block;
					color: #555;
					text-decoration: none;
					cursor: pointer;
					border-bottom: 1px solid #ddd;

					&:hover, &.hover {
						background-color: #f6f6f6;
						color: #e80;
					}
					&.selected:not(.selecting), &.selecting:not(.selected) {
						border-color: rgba(240,100,0,0.2);
						background-color: rgba(240,100,0,0.2);
					}
				}
				&.error {
					a, a:active, a:visited {
						color: #aaa;

						.label {
							.hint {
								margin-left: 12px;
								font-size: 0.9em;
								color: #c55;
							}
						}
						&:hover, &.hover {
							opacity: 1;
							background-color: #f6f6f6;
							color: #e80;
						}
					}
				}
				&.folder-parent {
					.date, .size {
						display: none;
					}
				}
				&.folder {
					.size {
						display: none;
					}
				}
			}
			.icon, .label, .date, .size {
				padding: 6px;
			}
			.icon {
				display: inline-block;
				position: absolute;
				left: 0;
				top: -2px;
				width: 16px;

				img {
					width: 16px;
					height: 16px;
					&.thumb {
						border: 1px solid #eee;
					}
				}
			}
			.icon.big {
				display: none;
			}
			.label {
				display: block;
				margin: 0 270px 0 24px;
				overflow: hidden;
				white-space: nowrap;
				text-align: left;
			}
			.date {
				position: absolute;
				right: 100px;
				top: 0;
				text-align: right;
				width: 160px;
				white-space: nowrap;
			}
			.size {
				position: absolute;
				right: 0;
				top: 0;
				text-align: right;
				width: 80px;
				white-space: nowrap;
			}
			&.entry.thumb .icon.small {
				overflow: hidden;
				padding: 5px;

				img {
					background-color: #eee;
					width: 16px;
					height: 16px;
					border: 1px solid #ddd;
					overflow: hidden;
				}
			}
		}
	}
	.empty, .no-match {
		text-align: center;
		margin: 50px 0;
		color: #ddd;
		font-size: 5em;
		font-weight: bold;
	}
	.no-match {
		display: none;
	}
}


#selection-rect {
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	border: 1px dashed rgba(240,100,0,0.5);
	background-color: rgba(240,100,0,0.2);
}


#extended.icons-view {
	display: none;
	padding: 3px;

	ul {
		margin: 0;
		padding: 0;
		list-style: none;

		li {
			&.header {
				display: none;
			}
			&.entry {
				float: left;

				a, a:active, a:visited {
					display: block;
					margin: 8px;
					padding: 8px;
					width: 100px;
					height: 120px;
					float: left;
					text-align: center;
					text-decoration: none;
					overflow: hidden;
					border-radius: 5px;
					color: #555;
					cursor: pointer;
					border: 2px solid rgba(0,0,0,0);

					&:hover, &.hover {
						color: #e80;
						border-color: #eee;
						background-color: #f6f6f6;
					}
					&.selected:not(.selecting), &.selecting:not(.selected) {
						border-color: rgba(240,100,0,0.2);
						background-color: rgba(240,100,0,0.2);
					}
					.icon {
						display: block;

						img {
							max-width: 100px;
							height: 48px;
							margin-bottom: 8px;
							&.thumb {
								border: 1px solid #eee;
							}
						}
					}
					.icon.small {
						display: none;
					}
					.label {
						display: block;
						word-wrap: break-word;
					}
					.date, .size {
						display: none;
					}
				}
				&.error {
					a, a:active, a:visited {
						color: #aaa;
						text-decoration: none;

						.label {
							.hint {
								padding: 0 6px;
								font-size: 0.9em;
								color: #c55;
							}
						}
						&:hover, &.hover {
							color: #e80;
							border-color: #eee;
							background-color: #f6f6f6;
						}
					}
				}
			}
			&.entry.thumb .icon.big {
				width: 100px;
				height: 58px;
				overflow: hidden;

				img {
					background-color: #eee;
					min-width: 46px;
					min-height: 46px;
					min-width: 12px;
					min-height: 12px;
					border: 1px solid #ddd;
					overflow: hidden;
				}
			}
		}
	}
	.empty, .no-match {
		margin: 0 120px;
		padding: 16px;
		height: 120px;
		text-align: center;
		color: #ddd;
		font-size: 5em;
		font-weight: bold;
	}
	.no-match {
		display: none;
	}
}