erpnext/public/less/hub.less

@import "variables.less";
@import (reference) "desk.less";

body[data-route*="marketplace"] {
	.layout-side-section {
		padding-top: 25px;
		padding-left: 5px;
		padding-right: 25px;
	}

	[data-route], [data-action] {
		cursor: pointer;
	}

	.layout-main-section {
		border: none;
		font-size: @text-medium;
		padding-top: 25px;

		@media (max-width: @screen-xs) {
			padding-left: 20px;
			padding-right: 20px;
		}
	}

	input, textarea {
		font-size: @text-medium;
	}

	.hub-image {
		height: 200px;
	}

	.hub-image-loading, .hub-image-broken {
		content: " ";
		position: absolute;
		left: 0;
		height: 100%;
		width: 100%;
		background-color: var(--bg-light-gray);
		display: flex;
		align-items: center;
		justify-content: center;

		span {
			font-size: 32px;
			color: @text-extra-muted;
		}
	}

	.progress-bar {
		background-color: #89da28;
	}

	.subpage-title.flex {
		align-items: flex-start;
		justify-content: space-between;
	}

	.hub-card {
		margin-bottom: 25px;
		position: relative;
		border: 1px solid @border-color;
		border-radius: 4px;
		overflow: hidden;

		&:hover .hub-card-overlay {
			display: block;
		}
	}

	.hub-card.is-local {
		&.active {
			.hub-card-header {
				background-color: #f4ffe5;
			}

			.octicon-check {
				display: inline;
			}
		}

		.octicon-check {
			display: none;
			position: absolute;
			font-size: 20px;
			right: 15px;
			top: 50%;
			transform: translateY(-50%);
		}
	}

	.hub-card-header {
		position: relative;
		padding: 12px 15px;
		height: 60px;
		border-bottom: 1px solid @border-color;
	}

	.hub-card-body {
		position: relative;
		height: 200px;
	}

	.hub-card-overlay {
		display: none;
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.05);
	}

	.hub-card-overlay-body {
		position: relative;
		height: 100%;
	}

	.hub-card-overlay-button {
		position: absolute;
		right: 15px;
		bottom: 15px;
	}

	.hub-card-image {
		position: relative;
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.hub-search-container {
		margin-bottom: 20px;

		input {
			height: 32px;
		}
	}

	.hub-sidebar {
		padding-top: 25px;
		padding-right: 15px;
	}

	.hub-sidebar-group {
		margin-bottom: 10px;
	}

	.hub-sidebar-item {
		padding: 5px 8px;
		margin-bottom: 3px;
		border-radius: 4px;
		border: 1px solid transparent;

		&.active, &:hover:not(.is-title) {
			border-color: @border-color;
		}
	}

	.hub-item-image {
		position: relative;
		border: 1px solid @border-color;
		border-radius: 4px;
		overflow: hidden;
		height: 200px;
		width: 200px;
		display: flex;
		align-items: center;
	}

	.hub-item-skeleton-image {
		border-radius: 4px;
		background-color: @light-bg;
		overflow: hidden;
		height: 200px;
		width: 200px;
	}

	.hub-skeleton {
		background-color: @light-bg;
		color: @light-bg;
		max-width: 500px;
	}

	.hub-item-seller img {
		width: 50px;
		height: 50px;
		border-radius: 4px;
		border: 1px solid @border-color;
	}

	.register-title {
		font-size: @text-regular;
	}

	.register-form {
		border: 1px solid @border-color;
		border-radius: 4px;
		padding: 15px 25px;
	}

	.publish-area.filled {
		.empty-items-container {
			display: none;
		}
	}

	.publish-area.empty {
		.hub-items-container {
			display: none;
		}
	}

	.publish-area-head {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20px;
	}

	.hub-list-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 1px solid @border-color;
		margin-bottom: -1px;
		overflow: hidden;
	}

	.hub-list-item:first-child {
		border-top-left-radius: 4px;
		border-top-right-radius: 4px;
	}
	.hub-list-item:last-child {
		border-bottom-left-radius: 4px;
		border-bottom-right-radius: 4px;
	}

	.hub-list-left {
		display: flex;
		align-items: center;
		max-width: 90%;
	}

	.hub-list-right {
		padding-right: 15px;
	}

	.hub-list-image {
		position: relative;
		width: 58px;
		height: 58px;
		border-right: 1px solid @border-color;

		&::after {
			font-size: 12px;
		}
	}

	.hub-list-body {
		padding: 12px 15px;
	}

	.hub-list-title {
		font-weight: bold;
	}

	.hub-list-subtitle {
		color: @text-muted;
	}

	.selling-item-message-card {
		max-width: 500px;
		margin-bottom: 15px;
		border-radius: 3px;
		border: 1px solid @border-color;
		.selling-item-detail {
			overflow: auto;
			.item-image {
				float: left;
				height: 80px;
				width: 80px;
				object-fit: contain;
				margin: 5px;
			}
			.item-name {
				margin-left: 10px;
			}
		}
		.received-message-container {
			clear: left;
			background-color: @light-bg;
			.received-message {
				border-top: 1px solid @border-color;
				padding: 10px;
			}
			.frappe-timestamp {
				float: right;
			}
		}
	}

	.form-container {
		.frappe-control {
			max-width: 100% !important;
		}
	}

	.form-message {
		padding-top: 0;
		padding-bottom: 0;
		border-bottom: none;
	}

	.hub-items-container {
		.hub-items-header {
			justify-content: space-between;
			align-items: baseline;
		}
	}

	.hub-item-container {
		overflow: hidden;
	}

	.hub-item-review-container {
		margin-top: calc(30vh);
	}

	.hub-item-dropdown {
		margin-top: 20px;
	}

	/* messages page */

	.message-list-item {
		display: flex;
		align-items: center;
		padding: 8px 12px;

		&:not(.active) {
			filter: grayscale(1);
			color: @text-muted;
		}

		&:hover {
			background-color: @light-bg;
		}

		.list-item-left {
			width: 30px;
			border-radius: 4px;
			overflow: hidden;
			margin-right: 15px;
		}

		.list-item-body {
			font-weight: bold;
			padding-bottom: 1px;
		}
	}

	.message-container {
		display: flex;
		flex-direction: column;
		border: 1px solid @border-color;
		border-radius: 3px;
		height: calc(100vh - 300px);
		justify-content: space-between;
		padding: 15px;
	}

	.message-list {
		overflow: scroll;
	}
}