nextcloud/apps/files_sharing/src/style/sharetabview.scss

.app-files .shareTabView {
	min-height: 100px;
}

.share-autocomplete-item {
	display: flex;

	&.merged {
		margin-left: 32px;
	}
	.autocomplete-item-text {
		margin-left: 10px;
		margin-right: 10px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		line-height: 32px;
		vertical-align: middle;
		flex-grow: 1;
		.ui-state-highlight {
			border: none;
			margin: 0;
		}
	}
	&.with-description {
		.autocomplete-item-text {
			line-height: 100%;
		}
	}
	.autocomplete-item-details {
		display: block;
		line-height: 130%;
		font-size: 90%;
		opacity: 0.7;
	}

	.icon {
		opacity: .7;
		margin-right: 7px;
	}
}

.shareTabView {
	.oneline {
		white-space: nowrap;
		position: relative;
	}
	.shareWithLoading {
		padding-left: 10px;
		right: 35px;
		top: 3px;
	}
	.shareWithConfirm {
		position: absolute;
		right: 2px;
		top: 6px;
		padding: 14px;
		opacity: 0.5;
	}
	.shareWithField:focus ~ .shareWithConfirm {
		opacity: 1;
	}
	.linkMore {
		position: absolute;
		right: -7px;
		top: -4px;
		padding: 14px;
	}
	.popovermenu {
		.linkPassMenu {
			.share-pass-submit {
				width: auto !important;
			}
			.icon-loading-small {
				background-color: var(--color-main-background);
				position: absolute;
				right: 8px;
				margin: 3px;
				padding: 10px;
				width: 32px;
				height: 32px;
				z-index: 10;
			}
		}
		.datepicker {
			margin-left: 35px;
		}
		.share-add {
			input.share-note-delete {
				border: none;
				background-color: transparent;
				width: 44px !important;
				padding: 0;
				flex: 0 0 44px;
				margin-left: auto;
				&.hidden {
					display: none;
				}
			}
		}
		// note
		.share-note-form {
			span.icon-note {
				position: relative;
			}
			textarea.share-note {
				margin: 0;
				width: 200px;
				min-height: 70px;
				resize: none;
				+ input.share-note-submit {
					position: absolute;
					width: 44px !important;
					height: 44px;
					bottom: 0px;
					right: 10px;
					margin: 0;
					background-color: transparent;
					border: none;
					opacity: .7;
					&:hover,
					&:focus,
					&:active {
						opacity: 1;
					}
				}
			}
			// fix for popover link share
			&.share-note-link {
				margin-bottom: 10px;
			}
		}

		/* Border above last entry '+ Add another share' to separate it from current link settings */
		.new-share {
			border-top: 1px solid var(--color-border);
		}
	}
	.linkPass .icon-loading-small {
		margin-right: 0px;
	}
	.icon {
		background-size: 16px 16px;
	}
	.shareWithList .icon-loading-small:not(.hidden) + span,
	.linkShareView .icon-loading-small:not(.hidden) + input + label:before {
		/* Hide if loader is visible */
		display: none !important;
	}
	input {
		&[type='checkbox'] {
			margin: 0 3px 0 8px;
			vertical-align: middle;
		}
		&[type='text'] {
			&.shareWithField,
			&.emailField {
				width: 100%;
				box-sizing: border-box;
				padding-right: 32px;
				text-overflow: ellipsis;
			}
		}
		&[type='text'].linkText
		&[type='password'].linkPassText,
		&[type='password'].passwordField {
			width: 180px !important;
		}
	}
	form {
		font-size: 100%;
		margin-left: 0;
		margin-right: 0;
	}
	// share note on the sidebar
	.share-note {
		border-radius: var(--border-radius);
		margin-bottom: 10px;
		margin-left: 37px;
	}
}

// Sharing tab users list
.shareWithList {
	list-style-type: none;
	display: flex;
	flex-direction: column;
	> li {
		height: 44px;
		white-space: normal;
		display: inline-flex;
		align-items: center;
		position: relative;
		.avatar {
			width: 32px;
			height: 32px;
			background-color: var(--color-primary);
		}
	}
	.unshare img {
		vertical-align: text-bottom;
		/* properly align icons */
	}
	.sharingOptionsGroup {
		margin-left: auto;
		display: flex;
		align-items: center;
		white-space: nowrap;

		// icons
		> .icon:not(.hidden),
		.share-menu > .icon:not(.hidden) {
			padding: 14px;
			height: 44px;
			width: 44px;
			opacity: .5;
			display: block;
			cursor: pointer;

			&:hover,
			&:focus,
			&:active {
				opacity: .7;;
			}
		}

		// more menu
		> .share-menu  {
			position: relative;
			display: block;
		}
	}
	.username {
		padding: 0 8px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}

.ui-autocomplete {
	/* limit dropdown height to 6 1/2 entries */
	max-height: calc(36px * 6.5);
	overflow-y: auto;
	overflow-x: hidden;
	z-index: 1550 !important;
}

.notCreatable {
	padding-left: 12px;
	padding-top: 12px;
	color: var(--color-text-lighter);
}

.contactsmenu-popover {
	left: -6px;
	right: auto;
	padding: 3px 6px;
	top: 100%;
	margin-top: 0;
	li.hidden {
		display: none !important;
	}
	&:after {
		left: 8px;
		right: auto;
	}
}

.reshare,
#link label,
#expiration label {
	display: inline-flex;
	align-items: center;
	.avatar {
		margin-right: 5px;
	}
}

.resharerInfoView.subView {
	position: relative;
}