jodit/src/styles/modules/filebrowser/filebrowser.less

Jodit is awesome and usefully wysiwyg editor with filebrowser

/*!
 * Jodit Editor (https://xdsoft.net/jodit/)
 * Licensed under GNU General Public License version 2 or later or a commercial license or MIT;
 * For GPL see LICENSE-GPL.txt in the project root for license information.
 * For MIT see LICENSE-MIT.txt in the project root for license information.
 * For commercial licenses see https://xdsoft.net/jodit/commercial/
 * Copyright (c) 2013-2019 Valeriy Chupurnov. All rights reserved. https://xdsoft.net
 */
@import (reference) '../../variables';

@first_column: 31%;
@cols: 4;
@info-background: rgb(233, 233, 233);

.jodit_filebrowser {
	font-family: @font-default;
	height: 100%;
	display: flex;

	&_no_files {
		padding: 10px;
	}

	@media (max-width: @screen-xs) {
		flex-direction: column;
		flex-flow: column-reverse;
	}

	&_loader {
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;

		i {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-top: -@icon_loader_size / 2;
			margin-left: -@icon_loader_size / 2;
			font-style: normal;
			opacity: 0.7;
		}
	}

	&_status {
		position: absolute;
		font-size: 12px;
		padding: 6px;
		text-align: right;
		border-top: 1px solid rgba(127, 127, 127, 0.4);
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #4a4a4a;
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.3s linear;
		color: #b38888;
		word-break: break-all;

		&.success {
			color: #c5c5c5;
		}

		&.active {
			visibility: visible;
			opacity: 1;
		}
	}

	&_tree,
	&_files {
		display: none;
		vertical-align: top;
		height: 100%;
		position: relative;

		&.active {
			display: flex;
		}

		&::-webkit-scrollbar {
			width: 5px;
		}

		&::-webkit-scrollbar-track {
			-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
		}

		&::-webkit-scrollbar-thumb {
			background-color: darkgrey;
			outline: 1px solid slategrey;
		}
	}

	&_tree.active {
		flex-direction: column;
		width: @first_column;
		min-width: 200px;
		max-width: 290px;
		z-index: 2;

		@media (max-width: @screen-xs) {
			max-width: 100%;
			width: auto;
			height: 100px;
		}

		background-color: @color-background-filebrowser-folders;
		overflow-y: auto;

		&::-webkit-scrollbar {
			width: 5px;
		}

		&::-webkit-scrollbar-track {
			-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
		}

		&::-webkit-scrollbar-thumb {
			background-color: rgba(127, 127, 127, 0.5);
			outline: 1px solid slategrey;
		}

		.jodit_filebrowser_source_title {
			user-select: none;
			display: block;
			padding: 10px;
			color: #969696;
			border-bottom: 1px solid #484848;
			line-height: 17px;
			min-height: 38px;
			position: relative;
			word-break: break-all;
			background: #5a5a5a;
			font-size: 16px;
		}

		@text-color: #b1b1b1;

		.jodit_filebrowser_tree_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			min-height: 38px;
			padding: 5px 10px;

			text-decoration: none;
			color: @text-color;
			transition: background-color 0.2s ease 0s;
			border-bottom: 1px solid #474747;
			position: relative;
			word-break: break-all;

			&_title {
				flex: 1;
			}

			@icon-size: 12px;

			.jodit_icon_folder {
				margin-left: 5px;
				width: @icon-size + 4px;
				height: @icon-size + 4px;
				display: flex;
				justify-content: center;
				align-items: center;
				opacity: 0.3;

				& svg {
					width: @icon-size;
					height: @icon-size;
					stroke: @text-color !important;
					fill: @text-color !important;
				}

				&:hover {
					background: #696969;
				}
			}

			&:hover {
				color: #222;
				background-color: @color-background-button-hover;

				i.jodit_icon_folder {
					opacity: 0.6;
				}
			}
		}

		.jodit_button {
			cursor: pointer;
			background: #696969;
			text-align: center;
			width: auto;
			height: 38px;
			color: #969696;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;

			svg {
				margin: 0 5px;
				fill: #969696;
			}

			&:not(.disabled):hover {
				background-color: @color-background-button-hover;
			}

			&.disabled,
			&:hover i {
				opacity: 0.7;
			}
		}
	}

	@col_size: 150px;

	&_files.active {
		width: 100%;
		overflow-y: auto;
		padding: 5px;
		flex-wrap: wrap;
		align-content: flex-start;

		.jodit_filebrowser_source_title {
			user-select: none;
			margin: -10px -10px 0 -10px;
			display: block;
			padding: 10px;
			line-height: 17px;
			min-height: 38px;
			position: relative;
			word-break: break-all;
			background: #5a5a5a;
			font-size: 16px;
			color: #969696;
		}

		a + .jodit_filebrowser_source_title {
			margin-top: 10px;
		}

		.jodit_filebrowser_files_item {
			width: @col_size;
			height: @col_size;

			@media (max-width: @screen-xs) {
				width: calc(50% - 10px);
			}

			line-height: @col_size;
			text-align: center;
			border: 1px solid #ccc;
			margin: 5px;
			font-size: 0;
			overflow: hidden;
			transition: border 0.1s linear, bottom 0.1s linear;
			position: relative;

			img {
				max-width: 100%;
				vertical-align: middle;
			}

			&:hover {
				border-color: #433b5c;
			}

			&-active-true {
				border-color: @color-border-selected;
				background-color: @color-border-active;
			}

			&-info {
				position: absolute;
				right: 0;
				left: 0;
				bottom: 0;
				white-space: normal;
				opacity: 0.85;
				overflow: visible;
				padding: 0.3em 0.6em;
				transition: opacity 400ms ease;
				background-color: @info-background;
				color: rgb(51, 51, 51);
				text-shadow: rgb(238, 238, 238) 0 1px 0;
				font-size: 14px;
				line-height: 16px;
				text-align: left;

				> span {
					display: block;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					font-size: 0.75em;

					&.jodit_filebrowser_files_item-info-filename {
						font-weight: bold;
						font-size: 0.9em;
					}
				}
			}

			&-active-true {
				.jodit_filebrowser_files_item-info {
					background-color: @color-border-active;
					color: white;
					text-shadow: none;
				}
			}

			&:hover:not(.jodit_filebrowser_files_item-active-true) {
				.jodit_filebrowser_files_item-info {
					bottom: -100px;
				}
			}
		}

		&.jodit_filebrowser_files_view-list {
			scroll-behavior: smooth;

			a {
				display: block;
				width: 100%;
				height: 26px;
				line-height: 26px;
				margin: 0;
				border-width: 0 0 1px 0;
				text-align: left;
				white-space: nowrap;

				img {
					min-width: 16px;
					max-width: 16px;
					vertical-align: middle;
					display: inline-block;
					margin-left: 4px;
				}

				.jodit_filebrowser_files_item-info {
					padding: 0;
					position: static;
					display: inline-block;
					width: ~'calc(100% - 20px)';
					margin-left: 4px;
					background-color: transparent;
					height: 100%;
					line-height: inherit;
					vertical-align: middle;
					font-size: 0;

					> span {
						display: inline-block;
						height: 100%;
						font-size: 12px;

						&.jodit_filebrowser_files_item-info-filename {
							width: 50%;
						}

						&.jodit_filebrowser_files_item-info-filesize {
							width: 25%;
						}

						&.jodit_filebrowser_files_item-info-filechanged {
							width: 25%;
						}
					}
				}

				&:hover {
					background-color: #433b5c;

					.jodit_filebrowser_files_item-info {
						color: #fff;
						text-shadow: none;
					}
				}

				&:before {
					height: 100%;
					content: '';
					vertical-align: middle;
					display: inline-block;
				}
			}
		}
	}
}

.jodit_draghover {
	background-color: @color-background-button-hover;
}

.jodit_dialog_box .jodit_dialog_header-title {
	.jodit_upload_button {
		position: relative;
		width: 220px;

		border: 0;
		padding: 25px 0;
		margin: 10px 0;
		overflow: hidden;

		input {
			cursor: pointer;
			position: absolute;
			right: 0;
			top: 0;
			bottom: 0;
			margin: 0 -10px 0 0;
			padding: 0;
			opacity: 0;
			font-size: 400px;
		}
	}

	&.jodit_filebrowser_title_box {
		padding-left: @padding-default;
	}
}