Fix livechat toggle UI issue

Fix livechat toggle UI issue

@header-min-height: 30px;
@footer-min-height: 55px;
@link-font-color: #008ce3;
@primary-font-color: #444444;
@secondary-font-color: #7f7f7f;
@info-font-color: #aaaaaa;

.flex-list {
	.active {
		background-color: rgba(255, 255, 255, 0.075);
	}
}

.trigger-option,
.trigger-value {
	float: left;
	display: inline-block;
}

.trigger-option {
	width: 30%;
	max-width: 300px;
	padding-right: 4px;
}

.trigger-value {
	width: 70%;

	input {
		display: inline-block !important;
		width: auto !important;
	}
}

.livechat-code {
	width: 90%;
	max-width: 750px;
	text-align: right;

	textarea {
		text-align: left;
		width: 100%;
		height: 200px;
		background-color: #efefef;
		font-family: courier;
		font-size: 12px;
		display: block;
	}
}

.preview-mode {
	width: auto;
	margin-bottom: 1em;
}

.livechat-settings-div,
.livechat-preview-div {
	width: 50%;
	float: left;
	height: 95%;
	margin-bottom: 0 !important;
	padding: 1em;
}

.livechat-settings-div {
	border-right: 1px solid #cccccc;
}

.livechat-preview {
	width: 340px;
	height: 350px;
	margin: 0 auto;
	border-bottom: 1px solid #cccccc;
	position: relative;

	.preview-wrapper {
		position: absolute;
		width: 100%;
		padding: 0 20px;
		height: 300px;
		bottom: 0;
		font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif, "Meiryo UI";
		font-size: 0.8rem;
		color: @primary-font-color;
		-webkit-font-smoothing: antialiased;
		line-height: 1rem;

		input,
		button,
		select,
		textarea {
			font-family: inherit;
			font-size: inherit;
			line-height: inherit;
			padding: 5px;
			margin: 5px 0;
			border: 1px solid #e7e7e7;
			border-radius: 5px;
			outline: none;
		}

		input {
			height: 28px;
		}

		input:focus {
			outline: none;
			box-shadow: 0 0 0;
		}

		.button {
			&:extend(.unselectable);
			display: inline-block;
			padding: 9px 12px;
			font-weight: 500;
			font-size: 13px;
			margin: 4px;
			text-transform: uppercase;
			word-spacing: 0;
			box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.125);
			border: none;
			border-radius: 0;
			line-height: 16px;
			position: relative;
			cursor: pointer;
			color: rgba(255, 255, 255, 0.85);

			span {
				position: relative;
				z-index: 2;
			}

			&::before {
				background-color: rgba(0, 0, 0, 0.1);
				content: " ";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
				z-index: 1;
				transition: opacity 0.1s ease-out;
			}

			&:hover {
				text-decoration: none;
				color: #ffffff;

				&::before {
					opacity: 1;
				}
			}

			&.clean {
				font-size: 14px;
				box-shadow: 0 0 3px rgba(0, 0, 0, 0.08);

				&.primary {
					font-weight: 600;
				}
			}

			&.button-block {
				display: block;
				width: 100%;
			}
		}

		.livechat-room {
			display: flex;
			flex-direction: column;
			height: 100%;

			.title {
				flex: 1 0 @header-min-height;
				line-height: @header-min-height;
				border-top-right-radius: 5px;
				border-top-left-radius: 5px;
				color: #ffffff;
				z-index: 10;
				cursor: pointer;

				h1 {
					margin: 0;
					padding: 0 5px;
					font-size: 9pt;
					display: inline-block;
					text-transform: none;
				}

				.toolbar {
					display: inline-block;
					float: right;
					padding-right: 5px;
				}
			}

			.messages {
				flex: 1 1 100%;
				background-color: #ffffff;
				border-left: 1px solid #e7e7e7;
				border-right: 1px solid #e7e7e7;
				overflow-y: auto;

				.wrapper {
					padding-bottom: 6px;

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

						li {
							padding: 0;
						}
					}

					.message {
						font-size: 12px;
						padding-left: 40px;
						position: relative;
						line-height: 18px;
						margin: 12px 10px 0;
						min-height: 36px;

						&:nth-child(1) {
							margin-top: 0;
						}

						&.new-day {
							margin-top: 60px;

							&::before {
								content: attr(data-date);
								display: block;
								position: absolute;
								top: -30px;
								left: calc(~'50% - 70px');
								font-size: 10px;
								font-weight: 600;
								text-align: center;
								color: @secondary-font-color;
								z-index: 10;
								padding: 0 10px;
								background-color: #ffffff;
								min-width: 120px;
							}

							&::after {
								content: " ";
								display: block;
								position: absolute;
								top: -20px;
								left: 0;
								width: 100%;
								border-top: 1px solid #dddddd;
							}
						}

						.edit-message {
							display: none;
							cursor: pointer;
						}

						&.own:hover:not(.system) .edit-message {
							display: inline-block;
						}

						.delete-message {
							display: none;
							cursor: pointer;
						}

						&.own:hover:not(.system) .delete-message {
							display: inline-block;
						}

						.user {
							display: inline-block;
							font-weight: 600;
							color: #444444;
							margin-right: 5px;
							outline: none;

							&:hover {
								color: #333333;
							}
						}

						.thumb {
							position: absolute;
							left: 0;
							top: 0;
							display: block;
							width: 30px;
							height: 30px;
						}

						.info {
							font-size: 10px;
							color: @info-font-color;
						}

						&.sequential {
							padding-top: 5px;
							margin-top: 0;
							margin-bottom: 0;
							min-height: 20px;

							.user {
								display: none;
							}

							.thumb {
								display: none;
							}

							.info {
								position: absolute;
								text-align: right;
								left: -20px;
								width: 55px;

								.time {
									display: none;
								}

								.edited {
									display: inline-block;
								}

								.edit-message {
									float: left;
									margin-left: 1px;
								}

								.delete-message {
									float: left;
								}
							}

							&:hover {
								.time {
									display: inline-block;
								}

								.edited {
									display: none;
								}
							}
						}

						&.system {
							.body {
								color: @info-font-color;
								font-style: italic;
								text-transform: lowercase;

								em {
									font-weight: 600;
								}
							}
						}

						.avatar-initials {
							line-height: 40px;
						}

						a {
							color: @link-font-color;
							font-weight: 400;

							&:hover {
								color: darken(@link-font-color, 10%);
								text-decoration: underline;
							}
						}

						.body {
							opacity: 1;
							transition: opacity 1s linear;
						}

						&.temp .body {
							opacity: 0.5;
						}

						&.msg-error .body {
							text-decoration: line-through;
						}

						.avatar .avatar-image {
							height: 100%;
							width: 100%;
							min-height: 20px;
							min-width: 20px;
							display: block;
							position: relative;
							background-color: transparent;
							background-size: cover;
							background-repeat: no-repeat;
							background-position: center;
							border-radius: 4px;
						}
					}
				}

				.new-message {
					margin: 0 -65px;
					position: absolute;
					background: #428bca;
					border-radius: 20px;
					width: 130px;
					height: 30px;
					text-align: center;
					color: #ffffff;
					line-height: 30px;
					font-size: 0.8em;
					cursor: pointer;
					bottom: 8px;
					left: 50%;
					z-index: 5;
					transition: transform 0.3s ease-out;
					transform: translateY(-40px);

					&.not {
						transform: translateY(100%);
					}
				}

				.error {
					bottom: 40px;
					position: fixed;
					width: 100%;
					background-color: #f7d799;
					padding: 5px;
					z-index: 8;
					transition: transform 0.2s ease-out;
					transform: translateY(100%);

					&.show {
						transform: translateY(0);
					}
				}
			}

			.footer {
				flex: 1 0 @footer-min-height;
				z-index: 10;
				background-color: #fcfcfc;
				border-top: 1px solid #e7e7e7;
				border-left: 1px solid #e7e7e7;
				border-right: 1px solid #e7e7e7;

				.input-wrapper {
					padding: 6px 6px 0;
					padding-right: 30px;

					textarea {
						display: block;
						padding: 6px 8px;
						padding-right: 38px;
						overflow-y: auto;
						resize: none;
						border: 1px solid #e7e7e7;
						border-radius: 5px;
						max-height: 200px;
						width: 100%;
						font-size: 12px;
						-webkit-appearance: none;
						height: 28px;
						line-height: normal;
						background-color: #ffffff;
						position: relative;
						outline: none;
					}
				}

				.send-button {
					float: right;
					position: relative;
					right: 7px;
					top: -28px;
					color: @secondary-font-color;
					cursor: pointer;
					transition: color 0.15s ease-out;

					&:hover {
						color: @primary-font-color;
					}
				}
			}

			.offline {
				flex: 1 1 100%;
				background-color: white;
				padding: 1em 10px;
				border-left: 1px solid #e7e7e7;
				border-right: 1px solid #e7e7e7;

				.offline-message {
					padding: 1em 0;
				}

				.message-sent {
					text-align: center;
				}

				form {
					input,
					textarea {
						display: block;
						width: 100%;
					}

					textarea {
						height: 3.5em;
					}

					.buttons {
						text-align: center;
					}

					.error {
						display: none;
						background-color: #f7d799;
						padding: 5px;

						&.show {
							display: block;
						}
					}
				}
			}
		}
	}

	&.closed,
	&.closed-offline {
		.preview-wrapper {
			height: 32px;

			.livechat-room .title .toolbar {
				display: none;
			}

			.messages {
				display: none;
			}

			.footer {
				display: none;
			}

			.offline {
				display: none;
			}
		}
	}
}

.department-agents {
	list-style-type: none;

	li {
		display: inline-block;
		background-color: #dddddd;
		border-radius: 10px;
		padding: 2px 8px 2px 2px;
		margin: 1px 0;
		cursor: pointer;

		.icon-plus-circled {
			opacity: 0.5;
			font-size: 0.8rem;
		}
	}
}

.agent-info {
	input[type='text'] {
		width: auto;
		line-height: 24px;
		height: 24px;
	}
}

.visitor-custom-fields {
	padding: 0 20px;
}

.visitor-navigation,
.visitor-custom-fields {
	.visitor-scroll {
		height: 130px;
		overflow-y: auto;
		border: 1px solid #e7e7e7;
		border-radius: 4px;
		padding: 4px;
		margin-top: 4px;
		margin-bottom: 20px;

		ul {
			li {
				white-space: nowrap;

				a {
					text-overflow: ellipsis;
					display: block;
					overflow: hidden;
					color: @secondary-font-color;
					text-decoration: underline;

					&:hover {
						text-decoration: none;
					}
				}
			}
		}
	}
}

.livechat-section {
	margin-bottom: 32px;
}

.livechat-status {
	float: right;
	margin-right: 16px;
	font-size: 20px;
	line-height: 18px;
	color: #9d9fa3;
}

.external-message {
	padding: 10px;
	position: relative;

	&::after {
		content: " ";
		position: absolute;
		border-bottom: 1px solid #cccccc;
		left: 10px;
		right: 10px;
		bottom: 0;
	}
}

.user-view {
	li {
		color: @secondary-font-color;
		line-height: 18px;
		font-size: 12px;
		font-weight: 300;
	}

	nav.centered-buttons {
		text-align: center;
		margin-bottom: 1em;

		button {
			display: inline-block;
			width: auto;
		}
	}
}

.rooms-list {
	.inquiries {
		.opt {
			display: none;
		}
	}
}

.visitor-edit {
	padding: 20px;

	h3 {
		font-size: 24px;
		margin-bottom: 8px;
		line-height: 22px;
	}
}

.queue-department {
	.show-offline {
		vertical-align: middle;
	}
}

@header-min-height: 30px;
@footer-min-height: 55px;
@link-font-color: #008ce3;
@primary-font-color: #444444;
@secondary-font-color: #7f7f7f;
@info-font-color: #aaaaaa;

.flex-list {
	.active {
		background-color: rgba(255, 255, 255, 0.075);
	}
}

.trigger-option,
.trigger-value {
	float: left;
	display: inline-block;
}

.trigger-option {
	width: 30%;
	max-width: 300px;
	padding-right: 4px;
}

.trigger-value {
	width: 70%;

	input {
		display: inline-block !important;
		width: auto !important;
	}
}

.livechat-code {
	width: 90%;
	max-width: 750px;
	text-align: right;

	textarea {
		text-align: left;
		width: 100%;
		height: 200px;
		background-color: #efefef;
		font-family: courier;
		font-size: 12px;
		display: block;
	}
}

.preview-mode {
	width: auto;
	margin-bottom: 1em;
}

.livechat-settings-div,
.livechat-preview-div {
	width: 50%;
	float: left;
	height: 95%;
	margin-bottom: 0 !important;
	padding: 1em;
}

.livechat-settings-div {
	border-right: 1px solid #cccccc;
}

.livechat-preview {
	width: 340px;
	height: 350px;
	margin: 0 auto;
	border-bottom: 1px solid #cccccc;
	position: relative;

	.preview-wrapper {
		position: absolute;
		width: 100%;
		padding: 0 20px;
		height: 300px;
		bottom: 0;
		font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif, "Meiryo UI";
		font-size: 0.8rem;
		color: @primary-font-color;
		-webkit-font-smoothing: antialiased;
		line-height: 1rem;

		input,
		button,
		select,
		textarea {
			font-family: inherit;
			font-size: inherit;
			line-height: inherit;
			padding: 5px;
			margin: 5px 0;
			border: 1px solid #e7e7e7;
			border-radius: 5px;
			outline: none;
		}

		input {
			height: 28px;
		}

		input:focus {
			outline: none;
			box-shadow: 0 0 0;
		}

		.button {
			&:extend(.unselectable);
			display: inline-block;
			padding: 9px 12px;
			font-weight: 500;
			font-size: 13px;
			margin: 4px;
			text-transform: uppercase;
			word-spacing: 0;
			box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.125);
			border: none;
			border-radius: 0;
			line-height: 16px;
			position: relative;
			cursor: pointer;
			color: rgba(255, 255, 255, 0.85);

			span {
				position: relative;
				z-index: 2;
			}

			&::before {
				background-color: rgba(0, 0, 0, 0.1);
				content: " ";
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
				z-index: 1;
				transition: opacity 0.1s ease-out;
			}

			&:hover {
				text-decoration: none;
				color: #ffffff;

				&::before {
					opacity: 1;
				}
			}

			&.clean {
				font-size: 14px;
				box-shadow: 0 0 3px rgba(0, 0, 0, 0.08);

				&.primary {
					font-weight: 600;
				}
			}

			&.button-block {
				display: block;
				width: 100%;
			}
		}

		.livechat-room {
			display: flex;
			flex-direction: column;
			height: 100%;

			.title {
				flex: 1 0 @header-min-height;
				line-height: @header-min-height;
				border-top-right-radius: 5px;
				border-top-left-radius: 5px;
				color: #ffffff;
				z-index: 10;
				cursor: pointer;

				h1 {
					margin: 0;
					padding: 0 5px;
					font-size: 9pt;
					display: inline-block;
					text-transform: none;
				}

				.toolbar {
					display: inline-block;
					float: right;
					padding-right: 5px;
				}
			}

			.messages {
				flex: 1 1 100%;
				background-color: #ffffff;
				border-left: 1px solid #e7e7e7;
				border-right: 1px solid #e7e7e7;
				overflow-y: auto;

				.wrapper {
					padding-bottom: 6px;

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

						li {
							padding: 0;
						}
					}

					.message {
						font-size: 12px;
						padding-left: 40px;
						position: relative;
						line-height: 18px;
						margin: 12px 10px 0;
						min-height: 36px;

						&:nth-child(1) {
							margin-top: 0;
						}

						&.new-day {
							margin-top: 60px;

							&::before {
								content: attr(data-date);
								display: block;
								position: absolute;
								top: -30px;
								left: calc(~'50% - 70px');
								font-size: 10px;
								font-weight: 600;
								text-align: center;
								color: @secondary-font-color;
								z-index: 10;
								padding: 0 10px;
								background-color: #ffffff;
								min-width: 120px;
							}

							&::after {
								content: " ";
								display: block;
								position: absolute;
								top: -20px;
								left: 0;
								width: 100%;
								border-top: 1px solid #dddddd;
							}
						}

						.edit-message {
							display: none;
							cursor: pointer;
						}

						&.own:hover:not(.system) .edit-message {
							display: inline-block;
						}

						.delete-message {
							display: none;
							cursor: pointer;
						}

						&.own:hover:not(.system) .delete-message {
							display: inline-block;
						}

						.user {
							display: inline-block;
							font-weight: 600;
							color: #444444;
							margin-right: 5px;
							outline: none;

							&:hover {
								color: #333333;
							}
						}

						.thumb {
							position: absolute;
							left: 0;
							top: 0;
							display: block;
							width: 30px;
							height: 30px;
						}

						.info {
							font-size: 10px;
							color: @info-font-color;
						}

						&.sequential {
							padding-top: 5px;
							margin-top: 0;
							margin-bottom: 0;
							min-height: 20px;

							.user {
								display: none;
							}

							.thumb {
								display: none;
							}

							.info {
								position: absolute;
								text-align: right;
								left: -20px;
								width: 55px;

								.time {
									display: none;
								}

								.edited {
									display: inline-block;
								}

								.edit-message {
									float: left;
									margin-left: 1px;
								}

								.delete-message {
									float: left;
								}
							}

							&:hover {
								.time {
									display: inline-block;
								}

								.edited {
									display: none;
								}
							}
						}

						&.system {
							.body {
								color: @info-font-color;
								font-style: italic;
								text-transform: lowercase;

								em {
									font-weight: 600;
								}
							}
						}

						.avatar-initials {
							line-height: 40px;
						}

						a {
							color: @link-font-color;
							font-weight: 400;

							&:hover {
								color: darken(@link-font-color, 10%);
								text-decoration: underline;
							}
						}

						.body {
							opacity: 1;
							transition: opacity 1s linear;
						}

						&.temp .body {
							opacity: 0.5;
						}

						&.msg-error .body {
							text-decoration: line-through;
						}

						.avatar .avatar-image {
							height: 100%;
							width: 100%;
							min-height: 20px;
							min-width: 20px;
							display: block;
							position: relative;
							background-color: transparent;
							background-size: cover;
							background-repeat: no-repeat;
							background-position: center;
							border-radius: 4px;
						}
					}
				}

				.new-message {
					margin: 0 -65px;
					position: absolute;
					background: #428bca;
					border-radius: 20px;
					width: 130px;
					height: 30px;
					text-align: center;
					color: #ffffff;
					line-height: 30px;
					font-size: 0.8em;
					cursor: pointer;
					bottom: 8px;
					left: 50%;
					z-index: 5;
					transition: transform 0.3s ease-out;
					transform: translateY(-40px);

					&.not {
						transform: translateY(100%);
					}
				}

				.error {
					bottom: 40px;
					position: fixed;
					width: 100%;
					background-color: #f7d799;
					padding: 5px;
					z-index: 8;
					transition: transform 0.2s ease-out;
					transform: translateY(100%);

					&.show {
						transform: translateY(0);
					}
				}
			}

			.footer {
				flex: 1 0 @footer-min-height;
				z-index: 10;
				background-color: #fcfcfc;
				border-top: 1px solid #e7e7e7;
				border-left: 1px solid #e7e7e7;
				border-right: 1px solid #e7e7e7;

				.input-wrapper {
					padding: 6px 6px 0;
					padding-right: 30px;

					textarea {
						display: block;
						padding: 6px 8px;
						padding-right: 38px;
						overflow-y: auto;
						resize: none;
						border: 1px solid #e7e7e7;
						border-radius: 5px;
						max-height: 200px;
						width: 100%;
						font-size: 12px;
						-webkit-appearance: none;
						height: 28px;
						line-height: normal;
						background-color: #ffffff;
						position: relative;
						outline: none;
					}
				}

				.send-button {
					float: right;
					position: relative;
					right: 7px;
					top: -28px;
					color: @secondary-font-color;
					cursor: pointer;
					transition: color 0.15s ease-out;

					&:hover {
						color: @primary-font-color;
					}
				}
			}

			.offline {
				flex: 1 1 100%;
				background-color: white;
				padding: 1em 10px;
				border-left: 1px solid #e7e7e7;
				border-right: 1px solid #e7e7e7;

				.offline-message {
					padding: 1em 0;
				}

				.message-sent {
					text-align: center;
				}

				form {
					input,
					textarea {
						display: block;
						width: 100%;
					}

					textarea {
						height: 3.5em;
					}

					.buttons {
						text-align: center;
					}

					.error {
						display: none;
						background-color: #f7d799;
						padding: 5px;

						&.show {
							display: block;
						}
					}
				}
			}
		}
	}

	&.closed,
	&.closed-offline {
		.preview-wrapper {
			height: 32px;

			.livechat-room .title .toolbar {
				display: none;
			}

			.messages {
				display: none;
			}

			.footer {
				display: none;
			}

			.offline {
				display: none;
			}
		}
	}
}

.department-agents {
	list-style-type: none;

	li {
		display: inline-block;
		background-color: #dddddd;
		border-radius: 10px;
		padding: 2px 8px 2px 2px;
		margin: 1px 0;
		cursor: pointer;

		.icon-plus-circled {
			opacity: 0.5;
			font-size: 0.8rem;
		}
	}
}

.agent-info {
	input[type='text'] {
		width: auto;
		line-height: 24px;
		height: 24px;
	}
}

.visitor-custom-fields {
	padding: 0 20px;
}

.visitor-navigation,
.visitor-custom-fields {
	.visitor-scroll {
		height: 130px;
		overflow-y: auto;
		border: 1px solid #e7e7e7;
		border-radius: 4px;
		padding: 4px;
		margin-top: 4px;
		margin-bottom: 20px;

		ul {
			li {
				white-space: nowrap;

				a {
					text-overflow: ellipsis;
					display: block;
					overflow: hidden;
					color: @secondary-font-color;
					text-decoration: underline;

					&:hover {
						text-decoration: none;
					}
				}
			}
		}
	}
}

.livechat-section {
	margin-bottom: 32px;
}

.livechat-status {
	float: right;
	margin-right: 16px;
	font-size: 20px;
	line-height: 20px;
	color: #9d9fa3;
}

.external-message {
	padding: 10px;
	position: relative;

	&::after {
		content: " ";
		position: absolute;
		border-bottom: 1px solid #cccccc;
		left: 10px;
		right: 10px;
		bottom: 0;
	}
}

.user-view {
	li {
		color: @secondary-font-color;
		line-height: 18px;
		font-size: 12px;
		font-weight: 300;
	}

	nav.centered-buttons {
		text-align: center;
		margin-bottom: 1em;

		button {
			display: inline-block;
			width: auto;
		}
	}
}

.rooms-list {
	.inquiries {
		.opt {
			display: none;
		}
	}
}

.visitor-edit {
	padding: 20px;

	h3 {
		font-size: 24px;
		margin-bottom: 8px;
		line-height: 22px;
	}
}

.queue-department {
	.show-offline {
		vertical-align: middle;
	}
}


Use visibility style in comments too

Use visibility style in comments too

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/visallo/visallo.git/'


LF-23267: Improve text color to compliment the background.

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Livefyre/livefyre-bootstrap.git/'


Do not show the drag cursor over a non-draggable item

// ========== display ========== //
.ad-display-inline-block {
  display: inline-block;
}
// ========== layout ========== //
.ad-fixed-layout {
  table-layout: fixed;
}
// ========== margins ========== //
.ad-margin-none {
  margin: 0;
}

.ad-margin-top-none {
  margin-top: 0;
}

.ad-margin-left-none {
  margin-left: 0;
}

.ad-margin-bottom-none {
  margin-bottom: 0;
}

.ad-margin-right-none {
  margin-right: 0;
}

.ad-padding-none {
  padding: 0;
}

.ad-padding-top-none {
  padding-top: 0;
}

.ad-padding-left-none {
  padding-left: 0;
}

.ad-padding-bottom-none {
  padding-bottom: 0;
}

.ad-padding-right-none {
  padding-right: 0;
}

// ========== cursor ========== //
.ad-cursor-pointer {
  cursor: pointer;
}

// ========== user select ========== //
.ad-user-select-none {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

// ========== text overflow ========== //
.ad-text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// ========== spinner ========== //
.ad-spin {
  -webkit-animation: spin 2s infinite linear;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}

// ========= dragdrop ========== //
[ad-drag=true] {
  &.ad-draggable {
    cursor: move;
    [ad-prevent-drag] {
      cursor: default;
    }
  }

  &> .ad-drag-handle {
    cursor: move;
  }

  &.ad-dragging {
    opacity: 0.5;
  }
}

@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(359deg);
  }
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
  }
}

@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(359deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

// ========== display ========== //
.ad-display-inline-block {
  display: inline-block;
}
// ========== layout ========== //
.ad-fixed-layout {
  table-layout: fixed;
}
// ========== margins ========== //
.ad-margin-none {
  margin: 0;
}

.ad-margin-top-none {
  margin-top: 0;
}

.ad-margin-left-none {
  margin-left: 0;
}

.ad-margin-bottom-none {
  margin-bottom: 0;
}

.ad-margin-right-none {
  margin-right: 0;
}

.ad-padding-none {
  padding: 0;
}

.ad-padding-top-none {
  padding-top: 0;
}

.ad-padding-left-none {
  padding-left: 0;
}

.ad-padding-bottom-none {
  padding-bottom: 0;
}

.ad-padding-right-none {
  padding-right: 0;
}

// ========== cursor ========== //
.ad-cursor-pointer {
  cursor: pointer;
}

// ========== user select ========== //
.ad-user-select-none {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

// ========== text overflow ========== //
.ad-text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// ========== spinner ========== //
.ad-spin {
  -webkit-animation: spin 2s infinite linear;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}

// ========= dragdrop ========== //
[ad-drag=true].ad-draggable {
  cursor: move;
}
[ad-drag=true] > .ad-drag-handle {
  cursor: move;
}

[ad-drag=true].ad-dragging {
  opacity: 0.5;
}

@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(359deg);
  }
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
  }
}

@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(359deg);
  }
}

@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}


fix(v4skin): the context-menu no longer breaks long entries

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/artemeon/core.git/'


cleaned up

cleaned up

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Digipalvelutehdas/APIKA.git/'


responsive styling of member management form. WIP

.member-list-item-form {
    display: flex;
    flex-direction: column;

    > div {
        margin-top: 15px;
    }

    &__toggle {
        min-width: 200px;
    }

    &__input {
        flex: 1;
    }
}

.tablet-layout({

    .member-list-item-form {
        &__save {
            display: flex;
            justify-content: flex-end;
        }
    }

});

.desktop-layout({

    .member-list-item-form {
        flex-direction: row;

        &__input {
            margin: 0 15px;
        }
    }

});

error: pathspec 'less/components/MemberListItemForm.less' did not match any file(s) known to git


[IMP] CSS of column options

[IMP] CSS of column options

@o-kanban-record-margin: 4px;
@o-kanban-group-padding: 4px;

@o-kanban-default-record-width: 300px;
@o-kanban-small-record-width: 240px;

@o-kanban-image-width: 64px;
@o-kanban-inside-gutter: 8px;

// mixins
.o-kanban-icon() {
    // Share the style of `.o_kanban_quick_add` and `o_kanban_config`.
    height: 50px;
    width: 50px;
    line-height: 1.8;
    text-align: center;
    color: white;
    padding: 8px;
    font-size: 22px;
    cursor: pointer;
}

// LAYOUT
.o_kanban_view {
    .o-flex-display();
    .o-align-content(stretch);

    overflow-x: visible;
    @media (max-width: @screen-xs-max) {
        overflow-x: auto;
        padding: 0px;
    }

    .o_kanban_record {
        .clearfix();
        &:after, &:before {
            width: 0;
            height: 0;
        }

        position: relative;
        min-width: 150px;
        margin: 4px;

        .o_kanban_image {
            float: left;
            width: @o-kanban-image-width;

            + div {
                padding-left: @o-kanban-image-width + @o-kanban-inside-gutter;
            }
        }

        .oe_kanban_details {
            width: 100%;
            > ul {
                margin-bottom: 0;
            }
        }

        .o_dropdown_kanban {
            float: right;
            @media (max-width: @screen-xs-max) {
                visibility: visible;
            }

            // Open the dropdown a the left side of the dropdown toggle
            > .dropdown-menu {
                left: auto;
                right: 0;
                padding: 3px;
            }
        }

        .o_kanban_footer {
            .o-flex-display();
            .o-justify-content(space-between);
            > * {
                .o-flex(0, 0, auto);
            }
        }

        .oe_kanban_footer_left {
            float: left;
        }

        .oe_kanban_bottom_right {
            float: right;
        }

        .oe_kanban_bottom_left {
            float: left;
        }

        .o_kanban_tags {
            margin-left: -8px;
            height: 9px;
            .o_tag {
                width: 50px;
                height: 9px;
                display: inline-block;
                vertical-align: top;
            }
        }
        .o_form_field_many2manytags {
            display: block;
        }
    }

    .o_kanban_quick_create {
        margin: 0 @o-kanban-record-margin @o-kanban-record-margin @o-kanban-record-margin;
        padding: 3px;
        input {
            width: 100%;
            margin: 4px 0;
        }
    }

    .o_kanban_group {
        .o-flex(0, 0, auto);
        padding: 0 @o-kanban-group-padding;
        &:not(.o_column_folded) {
            width: @o-kanban-default-record-width + 2*@o-kanban-group-padding + 2*@o-kanban-record-margin;
        }

        .o_kanban_header + .o_kanban_record {
            margin-top: 0;  // no margin top from the first card after kanban_header
        }
    }

    &.o_kanban_ungrouped {
        .o-flex-flow(row, wrap);
        .o-justify-content(flex-start);

        padding: @o-kanban-record-margin @odoo-horizontal-padding - @o-kanban-record-margin;
        @media (max-width: @screen-xs-max) {
            padding: 0;
        }

        .o_kanban_record {
            .o-flex(1, 1, @o-kanban-default-record-width);
            @media (max-width: @screen-xs-max) {
                margin: 0 0 1px 0;
                .o-flex(1, 0, 100%);
                box-shadow: none;
            }

            &.o_kanban_ghost {
                height: 0;
                min-height: 0!important; // to prevent view writers to override this height
                visibility: hidden;
                margin-top: 0;
                margin-bottom: 0;
                padding: 0;
            }
        }
    }

    &.o_kanban_grouped {
        min-height: 100%;
        padding: 0 @odoo-horizontal-padding - @o-kanban-group-padding - @o-kanban-record-margin;
        .o_kanban_record {
            width: @o-kanban-default-record-width;
        }
        &.o_kanban_small_column .o_kanban_group {
            &:not(.o_column_folded) {
                width: @o-kanban-small-record-width + 2*@o-kanban-group-padding + 2*@o-kanban-record-margin;
                .o_kanban_record {
                    width: @o-kanban-small-record-width;
                }
            }
        }
    }

    &.o_kanban_mobile {
        .o_kanban_record {
            width: 400px;
        }
        span {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            display: block;
        }
    }

    .o_column_quick_create {
        .o-flex(0, 0, auto);
        margin: 0;
        padding: 8px;
        position: relative;

        .o_kanban_quick_create {
            display: none;
            width: 180px;
        }
    }
}

// STYLE
.o_kanban_view {

    .o_kanban_record {
        background-color: white;
        box-shadow: 0px 0px 1px 1px lighten(@odoo-main-text-color, 10%);
        padding: @o-kanban-inside-gutter;

        &:hover .o_dropdown_kanban {
            visibility: visible;
        }

        &.oe_kanban_global_click, &.oe_kanban_global_click_edit {
            cursor: pointer;
        }

        &.ui-sortable-helper {
            transform: rotate(3deg);
            opacity: 0.9;
        }

        &.o_kanban_two_column_tags {
            .o_kanban_image > img {
                box-shadow: none;
            }
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        .o_kanban_title {
            font-weight: bold;
            margin-bottom: 3px;
        }

        .o_kanban_image {
            text-align: center;

            img {
                max-width: 100%;
                box-shadow: none;
            }
        }

        .o_kanban_button {
            margin-top: 15px;

            > button, > a {
                .o-position-absolute(@right: @o-kanban-inside-gutter, @bottom: @o-kanban-inside-gutter);
            }
        }

        .o_dropdown_kanban {
            > a {
                padding: 3px;
                color: @odoo-main-text-color;
            }
            &.open {
                visibility: visible;
            }
        }
        .oe_kanban_avatar {
            .img-rounded;
            margin-left: 2px;
        }

        .oe_kanban_avatar_smallbox {
            height: 40px;
            width: 40px;
            box-shadow: 0 1px 4px @gray-light;
        }

        .o_kanban_attachment_image {
            // The image should take the whole card
            margin: -8px;
            > img {
                width: 100%;
            }
        }
        .o_progressbar {
            .o-flex-display();
            height: 20px;

            .o_progressbar_title {
                .o-flex(0, 0, auto);
            }
            .o_progress {
                .o-flex(1, 1, auto);
                margin-top: 3px;
            }
            .o_progressbar_value {
                .o-flex(0, 0, auto);
                text-align: right;
                width: auto;
                height: 100%;
            }
            input.o_progressbar_value {
                width: 15%;
                margin-left: 8px;
            }
        }

        .oe_kanban_colorpicker {
            margin: 0;

            > li {
                display: inline-block;
                margin-right: 1px;

                > a {
                    width: 15px;
                    height: 15px;
                    display: block;
                }

                &:first-child > a {
                    border: 1px solid #ccc;
                }
            }
        }
        .o_dropdown_kanban {
            visibility: hidden;
        }
    }

    .o_kanban_group {
        background-color: @odoo-webclient-background-color;
        &:nth-child(odd) {
            background-color: darken(@odoo-webclient-background-color, 3%);
        }
        &.ui-sortable-helper ~ .o_kanban_group, // Invert odd/even rule for groups which follows the helper (fixed)
        &.ui-sortable-placeholder ~ .o_kanban_group.ui-sortable-helper { // Invert odd/even rule for the helper if the placeholder is before (so that it keep the same color)
            background-color: @odoo-webclient-background-color;
            &:nth-child(even) {
                background-color: darken(@odoo-webclient-background-color, 3%);
            }
        }

        &.o_kanban_dragged {
            background-color: @odoo-main-text-color;
            .o_kanban_record {
                visibility: hidden;
            }
        }

       .o_kanban_header {
            color: white;
            margin: 0 @o-kanban-record-margin;
            height: 50px;
            line-height: 2.2;
            cursor: move;
            .o-flex-display();
            .o_column_unfold {
                display: none;
            }
            .o_column_title {
                font-size: 18px;
                font-weight: 300;
                .o-flex(1, 1, auto);
                white-space: nowrap;
                padding-top: 5px;
            }
            .o_kanban_quick_add.oe_tip_show_element i {
                color: @odoo-brand-optional;
            }
            .o_kanban_quick_add i {
                .o-kanban-icon;
                &:hover {
                    background-color: @odoo-brand-optional;
                    color: white !important;
                }
            }
            &:hover .o_kanban_config i {
                visibility: visible;
            }
            .o_kanban_config i {
                .o-kanban-icon;
                visibility: hidden;
                color: #ccc;
                &:hover {
                    background-color: darken(@gray-light, 10%);
                }
            }

            .o_kanban_number {
                color: @odoo-main-text-color;
                text-align: center;
            }
        }

        &.o_column_folded {
            position: relative;
            border-right: 1px solid @odoo-main-text-color;
            margin: 0;

            .o_column_title {
                line-height: 1.3;
                text-transform: uppercase;
                transform-origin: left bottom;
                transform: rotate(90deg);
                top: 40px;
                left: 15px;
                position: absolute;
            }
            > .o_kanban_record, .o_kanban_quick_add, .o_kanban_config, .o_kanban_load_more {
                display: none;
            }
            &:hover {
                cursor: pointer;
                background-color:  darken(@gray-light, 10%);
            }
            &.o_kanban_hover {
                background-color: darken(@gray-light, 10%);
            }
            .o_column_unfold {
                display: block;
                padding: 0 10px;

                > i {
                    font-size: 22px;
                    padding-top: 15px;
                }

            }
            background-color: @gray-light;
        }

        .o_kanban_quick_create {
            background-color: white;
            box-shadow: 0px 0px 1px 1px lighten(@odoo-main-text-color, 10%);
        }

        .o_kanban_load_more {
            text-align: center;
            a {
                color: white;
                font-weight: 300;
            }
        }
    }

    .o_column_quick_create {
        background-color:  @odoo-main-text-color;
        cursor: pointer;

        &:hover {
            background-color:  darken(@gray-light, 10%);
        }
        .o_column_header {
            .o_kanban_add_column {
                padding: 0 10px;
                color: white;

                > i {
                    font-size: 22px;
                    padding-top: 7px;
                }
            }
            .o_kanban_title {
                font-size: 18px;
                font-weight: 300;
                white-space: nowrap;
                color: @gray-lighter;
                text-transform: uppercase;
                transform-origin: left bottom;
                transform: rotate(90deg);
                top: 40px;
                left: 15px;
                position: absolute;
            }
        }
        .o_kanban_quick_create {
            background-color: white;
            box-shadow: 0px 0px 1px 1px lighten(@odoo-main-text-color, 10%);
        }
    }

    .oe_kanban_color_0 {
        background-color: #FFFFFF;
        color: #5a5a5a;
    }
    .oe_kanban_color_1 {
        background-color: #d8d8d8;
        color: #5e5e5e;
    }
    .oe_kanban_color_2 {
        background-color: #e5d8e3;
        color: #7a3737;
    }
    .oe_kanban_color_3 {
        background-color: #ece9c2;
        color: #756832;
    }
    .oe_kanban_color_4 {
        background-color: #dee180;
        color: #5d6937;
    }
    .oe_kanban_color_5 {
        background-color: #abd4cc;
        color: #1a7759;
    }
    .oe_kanban_color_6 {
        background-color: #b8e3e8;
        color: #1a5d83;
    }
    .oe_kanban_color_7 {
        background-color: #f4ddab;
        color: #5e5e5e;
    }
    .oe_kanban_color_8 {
        background-color: #7f637d;
        color: #a5a5a5;
    }
    .oe_kanban_color_9 {
        background-color: #d8c5d5;
        color: #5e5e5e;
    }
    .oe_kanban_color_10 {
        background-color: #46C265;
        color: #639B89;
    }
}

// necessary outside kanban views (for example, edit column form in task kanban view)
// ideally, it should be made generic (.o_status, .o_status_green, ...)
.oe_kanban_status {
    display: inline-block;
    height: 12px;
    width: 12px;
    border-radius: 6px;

    background-color: @odoo-brand-secondary;

    &.oe_kanban_status_green {
        background-color: @brand-success;
    }
    &.oe_kanban_status_red {
        background-color: @brand-danger;
    }
}

@o-kanban-record-margin: 4px;
@o-kanban-group-padding: 4px;

@o-kanban-default-record-width: 300px;
@o-kanban-small-record-width: 240px;

@o-kanban-image-width: 64px;
@o-kanban-inside-gutter: 8px;

// mixins
.o-kanban-icon() {
    // Share the style of `.o_kanban_quick_add` and `o_kanban_config`.
    height: 50px;
    width: 50px;
    line-height: 1.8;
    text-align: center;
    color: white;
    padding: 8px;
    font-size: 22px;
    cursor: pointer;
}

// LAYOUT
.o_kanban_view {
    .o-flex-display();
    .o-align-content(stretch);

    overflow-x: visible;
    @media (max-width: @screen-xs-max) {
        overflow-x: auto;
        padding: 0px;
    }

    .o_kanban_record {
        .clearfix();
        &:after, &:before {
            width: 0;
            height: 0;
        }

        position: relative;
        min-width: 150px;
        margin: 4px;

        .o_kanban_image {
            float: left;
            width: @o-kanban-image-width;

            + div {
                padding-left: @o-kanban-image-width + @o-kanban-inside-gutter;
            }
        }

        .oe_kanban_details {
            width: 100%;
            > ul {
                margin-bottom: 0;
            }
        }

        .o_dropdown_kanban {
            float: right;
            @media (max-width: @screen-xs-max) {
                visibility: visible;
            }

            // Open the dropdown a the left side of the dropdown toggle
            > .dropdown-menu {
                left: auto;
                right: 0;
                padding: 3px;
            }
        }

        .o_kanban_footer {
            .o-flex-display();
            .o-justify-content(space-between);
            > * {
                .o-flex(0, 0, auto);
            }
        }

        .oe_kanban_footer_left {
            float: left;
        }

        .oe_kanban_bottom_right {
            float: right;
        }

        .oe_kanban_bottom_left {
            float: left;
        }

        .o_kanban_tags {
            margin-left: -8px;
            height: 9px;
            .o_tag {
                width: 50px;
                height: 9px;
                display: inline-block;
                vertical-align: top;
            }
        }
        .o_form_field_many2manytags {
            display: block;
        }
    }

    .o_kanban_quick_create {
        margin: 0 @o-kanban-record-margin @o-kanban-record-margin @o-kanban-record-margin;
        padding: 3px;
        input {
            width: 100%;
            margin: 4px 0;
        }
    }

    .o_kanban_group {
        .o-flex(0, 0, auto);
        padding: 0 @o-kanban-group-padding;
        &:not(.o_column_folded) {
            width: @o-kanban-default-record-width + 2*@o-kanban-group-padding + 2*@o-kanban-record-margin;
        }

        .o_kanban_header + .o_kanban_record {
            margin-top: 0;  // no margin top from the first card after kanban_header
        }
    }

    &.o_kanban_ungrouped {
        .o-flex-flow(row, wrap);
        .o-justify-content(flex-start);

        padding: @o-kanban-record-margin @odoo-horizontal-padding - @o-kanban-record-margin;
        @media (max-width: @screen-xs-max) {
            padding: 0;
        }

        .o_kanban_record {
            .o-flex(1, 1, @o-kanban-default-record-width);
            @media (max-width: @screen-xs-max) {
                margin: 0 0 1px 0;
                .o-flex(1, 0, 100%);
                box-shadow: none;
            }

            &.o_kanban_ghost {
                height: 0;
                min-height: 0!important; // to prevent view writers to override this height
                visibility: hidden;
                margin-top: 0;
                margin-bottom: 0;
                padding: 0;
            }
        }
    }

    &.o_kanban_grouped {
        min-height: 100%;
        padding: 0 @odoo-horizontal-padding - @o-kanban-group-padding - @o-kanban-record-margin;
        .o_kanban_record {
            width: @o-kanban-default-record-width;
        }
        &.o_kanban_small_column .o_kanban_group {
            &:not(.o_column_folded) {
                width: @o-kanban-small-record-width + 2*@o-kanban-group-padding + 2*@o-kanban-record-margin;
                .o_kanban_record {
                    width: @o-kanban-small-record-width;
                }
            }
        }
    }

    &.o_kanban_mobile {
        .o_kanban_record {
            width: 400px;
        }
        span {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            display: block;
        }
    }

    .o_column_quick_create {
        .o-flex(0, 0, auto);
        margin: 0;
        padding: 8px;
        position: relative;

        .o_kanban_quick_create {
            display: none;
            width: 180px;
        }
    }
}

// STYLE
.o_kanban_view {

    .o_kanban_record {
        background-color: white;
        box-shadow: 0px 0px 1px 1px lighten(@odoo-main-text-color, 10%);
        padding: @o-kanban-inside-gutter;

        &:hover .o_dropdown_kanban {
            visibility: visible;
        }

        &.oe_kanban_global_click, &.oe_kanban_global_click_edit {
            cursor: pointer;
        }

        &.ui-sortable-helper {
            transform: rotate(3deg);
            opacity: 0.9;
        }

        &.o_kanban_two_column_tags {
            .o_kanban_image > img {
                box-shadow: none;
            }
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        .o_kanban_title {
            font-weight: bold;
            margin-bottom: 3px;
        }

        .o_kanban_image {
            text-align: center;

            img {
                max-width: 100%;
                box-shadow: none;
            }
        }

        .o_kanban_button {
            margin-top: 15px;

            > button, > a {
                .o-position-absolute(@right: @o-kanban-inside-gutter, @bottom: @o-kanban-inside-gutter);
            }
        }

        .o_dropdown_kanban {
            > a {
                padding: 3px;
                color: @odoo-main-text-color;
            }
            &.open {
                visibility: visible;
            }
        }
        .oe_kanban_avatar {
            margin-left: 2px;
        }

        .oe_kanban_avatar_smallbox {
            height: 40px;
            width: 40px;
            box-shadow: 0 1px 4px @gray-light;
        }

        .o_kanban_attachment_image {
            // The image should take the whole card
            margin: -8px;
            > img {
                width: 100%;
            }
        }
        .o_progressbar {
            .o-flex-display();
            height: 20px;

            .o_progressbar_title {
                .o-flex(0, 0, auto);
            }
            .o_progress {
                .o-flex(1, 1, auto);
                margin-top: 3px;
            }
            .o_progressbar_value {
                .o-flex(0, 0, auto);
                text-align: right;
                width: auto;
                height: 100%;
            }
            input.o_progressbar_value {
                width: 15%;
                margin-left: 8px;
            }
        }

        .oe_kanban_colorpicker {
            margin: 0;

            > li {
                display: inline-block;
                margin-right: 1px;

                > a {
                    width: 15px;
                    height: 15px;
                    display: block;
                }

                &:first-child > a {
                    border: 1px solid #ccc;
                }
            }
        }
        .o_dropdown_kanban {
            visibility: hidden;
        }
    }

    .o_kanban_group {
        background-color: @odoo-webclient-background-color;
        &:nth-child(odd) {
            background-color: darken(@odoo-webclient-background-color, 3%);
        }
        &.ui-sortable-helper ~ .o_kanban_group, // Invert odd/even rule for groups which follows the helper (fixed)
        &.ui-sortable-placeholder ~ .o_kanban_group.ui-sortable-helper { // Invert odd/even rule for the helper if the placeholder is before (so that it keep the same color)
            background-color: @odoo-webclient-background-color;
            &:nth-child(even) {
                background-color: darken(@odoo-webclient-background-color, 3%);
            }
        }

        &.o_kanban_dragged {
            background-color: @odoo-main-text-color;
            .o_kanban_record {
                visibility: hidden;
            }
        }

       .o_kanban_header {
            color: white;
            margin: 0 @o-kanban-record-margin;
            height: 50px;
            line-height: 2.2;
            cursor: move;
            .o-flex-display();
            .o_column_unfold {
                display: none;
            }
            .o_column_title {
                font-size: 18px;
                font-weight: 300;
                .o-flex(1, 1, auto);
                white-space: nowrap;
                padding-top: 5px;
            }
            .o_kanban_quick_add.oe_tip_show_element i {
                color: @odoo-brand-optional;
            }
            .o_kanban_quick_add i {
                .o-kanban-icon;
                &:hover {
                    background-color: @odoo-brand-optional;
                    color: white !important;
                }
            }
            .o_kanban_config i {
                .o-kanban-icon;
                &:hover {
                    background-color: darken(@gray-light, 10%);
                }
            }

            .o_kanban_number {
                color: @odoo-main-text-color;
                text-align: center;
            }
        }

        &.o_column_folded {
            position: relative;
            border-right: 1px solid @odoo-main-text-color;
            margin: 0;

            .o_column_title {
                line-height: 1.3;
                text-transform: uppercase;
                transform-origin: left bottom;
                transform: rotate(90deg);
                top: 40px;
                left: 15px;
                position: absolute;
            }
            > .o_kanban_record, .o_kanban_quick_add, .o_kanban_config, .o_kanban_load_more {
                display: none;
            }
            &:hover {
                cursor: pointer;
                background-color:  darken(@gray-light, 10%);
            }
            &.o_kanban_hover {
                background-color: darken(@gray-light, 10%);
            }
            .o_column_unfold {
                display: block;
                padding: 0 10px;

                > i {
                    font-size: 22px;
                    padding-top: 15px;
                }

            }
            background-color: @gray-light;
        }

        .o_kanban_quick_create {
            background-color: white;
            box-shadow: 0px 0px 1px 1px lighten(@odoo-main-text-color, 10%);
        }

        .o_kanban_load_more {
            text-align: center;
            a {
                color: white;
                font-weight: 300;
            }
        }
    }

    .o_column_quick_create {
        background-color:  @odoo-main-text-color;
        cursor: pointer;

        &:hover {
            background-color:  darken(@gray-light, 10%);
        }
        .o_column_header {
            .o_kanban_add_column {
                padding: 0 10px;
                color: white;

                > i {
                    font-size: 22px;
                    padding-top: 7px;
                }
            }
            .o_kanban_title {
                font-size: 18px;
                font-weight: 300;
                white-space: nowrap;
                color: @gray-lighter;
                text-transform: uppercase;
                transform-origin: left bottom;
                transform: rotate(90deg);
                top: 40px;
                left: 15px;
                position: absolute;
            }
        }
        .o_kanban_quick_create {
            background-color: white;
            box-shadow: 0px 0px 1px 1px lighten(@odoo-main-text-color, 10%);
        }
    }

    .oe_kanban_color_0 {
        background-color: #FFFFFF;
        color: #5a5a5a;
    }
    .oe_kanban_color_1 {
        background-color: #d8d8d8;
        color: #5e5e5e;
    }
    .oe_kanban_color_2 {
        background-color: #e5d8e3;
        color: #7a3737;
    }
    .oe_kanban_color_3 {
        background-color: #ece9c2;
        color: #756832;
    }
    .oe_kanban_color_4 {
        background-color: #dee180;
        color: #5d6937;
    }
    .oe_kanban_color_5 {
        background-color: #abd4cc;
        color: #1a7759;
    }
    .oe_kanban_color_6 {
        background-color: #b8e3e8;
        color: #1a5d83;
    }
    .oe_kanban_color_7 {
        background-color: #f4ddab;
        color: #5e5e5e;
    }
    .oe_kanban_color_8 {
        background-color: #7f637d;
        color: #a5a5a5;
    }
    .oe_kanban_color_9 {
        background-color: #d8c5d5;
        color: #5e5e5e;
    }
    .oe_kanban_color_10 {
        background-color: #46C265;
        color: #639B89;
    }
}

// necessary outside kanban views (for example, edit column form in task kanban view)
// ideally, it should be made generic (.o_status, .o_status_green, ...)
.oe_kanban_status {
    display: inline-block;
    height: 12px;
    width: 12px;
    border-radius: 6px;

    background-color: @odoo-brand-secondary;

    &.oe_kanban_status_green {
        background-color: @brand-success;
    }
    &.oe_kanban_status_red {
        background-color: @brand-danger;
    }
}


Refactored site.less into arragrocms-management

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Arragro/ArragroCMS.Examples.git/'


docs: fix header font

docs: fix header font

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
// bootstrap customization
@import "./variables.less";

// bootstrap
@import (npm) "twbs/less/mixins.less";
@import (npm) "twbs/less/normalize.less";
@import (npm) "twbs/less/print.less";
@import (npm) "twbs/less/scaffolding.less";
@import (npm) "twbs/less/type.less";
@import (npm) "twbs/less/code.less";
@import (npm) "twbs/less/grid.less";
@import (npm) "twbs/less/tables.less";
@import (npm) "twbs/less/forms.less";
@import (npm) "twbs/less/buttons.less";
@import (npm) "twbs/less/component-animations.less";
@import (npm) "twbs/less/glyphicons.less";
@import (npm) "twbs/less/dropdowns.less";
@import (npm) "twbs/less/button-groups.less";
@import (npm) "twbs/less/input-groups.less";
@import (npm) "twbs/less/navs.less";
@import (npm) "twbs/less/navbar.less";
@import (npm) "twbs/less/breadcrumbs.less";
@import (npm) "twbs/less/pagination.less";
@import (npm) "twbs/less/pager.less";
@import (npm) "twbs/less/labels.less";
@import (npm) "twbs/less/badges.less";
@import (npm) "twbs/less/jumbotron.less";
@import (npm) "twbs/less/thumbnails.less";
@import (npm) "twbs/less/alerts.less";
@import (npm) "twbs/less/progress-bars.less";
@import (npm) "twbs/less/media.less";
@import (npm) "twbs/less/list-group.less";
@import (npm) "twbs/less/panels.less";
@import (npm) "twbs/less/wells.less";
@import (npm) "twbs/less/close.less";
@import (npm) "twbs/less/modals.less";
@import (npm) "twbs/less/tooltip.less";
@import (npm) "twbs/less/popovers.less";
@import (npm) "twbs/less/carousel.less";
@import (npm) "twbs/less/utilities.less";
@import (npm) "twbs/less/responsive-utilities.less";

// react-forms bootstrap theme
@import (npm) "react-forms/themes/bootstrap/";
@import (npm) "react-forms/themes/bootstrap/RadioButtonGroup";
@import (npm) "react-forms/themes/bootstrap/CheckboxGroup";

@color-bg: lighten(#445878, 60%);
@color-txt: lighten(#445878, 0%);
@color-hx: lighten(#445878, 10%);

@padding-section: 2em 1em;

html, body {
  font-family: 'Open Sans', sans-serif;
  background: @color-bg;
  color: @color-txt;
  line-height: 1.5em;
}

body {
  padding-top: 50px;
}

h1, h2, h3, h4, h5, h6 {
  color: @color-hx;
  font-weight: bold;
  margin-top: 1.5em;
  margin-bottom: 1em;
}

h1, h2, h3 {
  text-shadow: 0px 0px 2px lighten(@color-hx, 20%);
}

a {
  @txt: @color-txt;
  @bg: @color-bg;

  color: @txt;
  background: @bg;
  padding: 0px 3px;
  border-bottom: 1px solid lighten(@txt, 30%);

  &:hover {
    color: @bg;
    background: lighten(@txt, 20%);
    border-bottom: 1px solid lighten(@txt, 20%);
    text-decoration: none;
  }
}

ul {
  list-style: square;
}

p, pre, ul, ol {
  margin-bottom: 1.5em;
}

.container, .container-fluid {
  max-width: 900px;
}

pre {
  padding: 15px;
  border: none;
}

code, pre, .Code {
  border: none;
  color: @color-txt;
  background: #fff;
}

.Index {

  .HeaderWrapper {
    @bg: @color-bg;
    @txt: @color-txt;

    background: @bg;

    .Header {
      text-align: left;
      padding: @padding-section;

      h1 {
        font-weight: bold;
        margin-bottom: 0.5em;
      }

      p {
        color: @txt;
      }
    }
  }

  @bg: @color-bg;
  @txt: @color-txt;

  background: @bg;

  .Usage {
    padding: @padding-section;

    color: @txt;

    .Text {
      color: @txt;
      h4 {
        font-weight: bold;
      }
      text-align: right;
    }
  }

  .Footer {
    padding: @padding-section;
    opacity: 0.7;
    font-size: 90%;
  }

}

.Content {
  padding: @padding-section;
}

.Section {
  padding: 1em;
}

.NavigationBar {
  @txt: @color-txt;
  @bg: @color-bg;
  @bg-hover: lighten(@txt, 20%);
  @txt-hover: @bg;

  background: @bg;
  border: none;
  box-shadow: 0px 0px 10px 1px darken(@bg, 10%);

  .divider {
    background-color: darken(@bg, 20%);
  }

  .dropdown-header {
    color: darken(@bg, 10%);
    padding-bottom: 10px;
  }

  &.navbar-default .navbar-brand {
    text-shadow: 0px 0px 1px lighten(@bg, 40%);
    font-weight: bold;
  }

  .nav li {
    cursor: default;
  }

  .dropdown-menu {
    background: @bg;
    border: none;
    box-shadow: 0 4px 7px -2px rgba(0, 0, 0, 0.175);
  }

  &.navbar-default li.dropdown {
    background: @bg;
    & > .dropdown-menu a {
      color: @txt-hover;
      background: @bg-hover;
      &:hover {
        background: @txt;
        color: @bg;
      }
    }

    &:hover {
      & > .dropdown-menu {
        color: @txt-hover;
        background: @bg-hover;
        display: block;
      }
    }
  }

  &.navbar-default {
    background: @bg;
    .navbar-header, li {
      & > a {
        border: none;
        color: @txt;
      }
      &:hover > a {
        text-shadow: none;
        background: @bg-hover;
        color: @txt-hover;
        border: none;
      }
    }
  }
}

.ArrayEditor {
  .Item {
    position: relative;
    padding-right: 40px;
  }
  .Remove {
    color: @gray;
    font-size: 190%;
    position: absolute;
    top: 8px;
    right: 15px;
    background: none;
    border: none;
  }
}

.SortableImage {
  background: white;
  padding: 15px;
  box-shadow: 2px 2px 15px 0px #ccc;
}

.SortableRepeatingFieldset {
  .react-forms-repeating-fieldset-item {
    position: relative;
  }

  .SortablePlaceholder {
    .form-group();
    border: 3px dashed darken(@color-bg, 10%);

  }
  .SortableHandle {
    background: url(sortable.svg);
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    color: lighten(@gray, 30%);
    top: 8px;
    left: 15px;
    height: 20px;
    cursor: move;
    padding: 0px 25px;
    font-size: 80%;
    text-transform: uppercase;
  }
  &.SortableActive {
    cursor: move;
    .SortableHandle {
    }
  }
}

.ShowValue {
  .ShowValueValue .text,
  .ShowValueComponent .text {
    font-size: 80%;
  }

  .ShowValueValue {
    padding: 10px 0;

    .value {
      border: none;
      background: #fff;
      color: @gray-light;
    }
  }

  .ShowDebugInfoToggle {
    font-size: 70%;
    float: right;
    & > label {
      cursor: pointer;
      font-weight: normal;
    }
  }
}

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
// bootstrap customization
@import "./variables.less";

// bootstrap
@import (npm) "twbs/less/mixins.less";
@import (npm) "twbs/less/normalize.less";
@import (npm) "twbs/less/print.less";
@import (npm) "twbs/less/scaffolding.less";
@import (npm) "twbs/less/type.less";
@import (npm) "twbs/less/code.less";
@import (npm) "twbs/less/grid.less";
@import (npm) "twbs/less/tables.less";
@import (npm) "twbs/less/forms.less";
@import (npm) "twbs/less/buttons.less";
@import (npm) "twbs/less/component-animations.less";
@import (npm) "twbs/less/glyphicons.less";
@import (npm) "twbs/less/dropdowns.less";
@import (npm) "twbs/less/button-groups.less";
@import (npm) "twbs/less/input-groups.less";
@import (npm) "twbs/less/navs.less";
@import (npm) "twbs/less/navbar.less";
@import (npm) "twbs/less/breadcrumbs.less";
@import (npm) "twbs/less/pagination.less";
@import (npm) "twbs/less/pager.less";
@import (npm) "twbs/less/labels.less";
@import (npm) "twbs/less/badges.less";
@import (npm) "twbs/less/jumbotron.less";
@import (npm) "twbs/less/thumbnails.less";
@import (npm) "twbs/less/alerts.less";
@import (npm) "twbs/less/progress-bars.less";
@import (npm) "twbs/less/media.less";
@import (npm) "twbs/less/list-group.less";
@import (npm) "twbs/less/panels.less";
@import (npm) "twbs/less/wells.less";
@import (npm) "twbs/less/close.less";
@import (npm) "twbs/less/modals.less";
@import (npm) "twbs/less/tooltip.less";
@import (npm) "twbs/less/popovers.less";
@import (npm) "twbs/less/carousel.less";
@import (npm) "twbs/less/utilities.less";
@import (npm) "twbs/less/responsive-utilities.less";

// react-forms bootstrap theme
@import (npm) "react-forms/themes/bootstrap/";
@import (npm) "react-forms/themes/bootstrap/RadioButtonGroup";
@import (npm) "react-forms/themes/bootstrap/CheckboxGroup";

@color-bg: lighten(#445878, 60%);
@color-txt: lighten(#445878, 0%);
@color-hx: lighten(#445878, 10%);

@padding-section: 2em 1em;

html, body {
  font-family: 'Open Sans', sans-serif;
  background: @color-bg;
  color: @color-txt;
  line-height: 1.5em;
}

body {
  padding-top: 50px;
}

h1, h2, h3, h4, h5, h6 {
  color: @color-hx;
  font-weight: bold;
  margin-top: 1.5em;
  margin-bottom: 1em;
}

h1, h2, h3 {
  text-shadow: 0px 0px 2px lighten(@color-hx, 20%);
}

a {
  @txt: @color-txt;
  @bg: @color-bg;

  color: @txt;
  background: @bg;
  padding: 0px 3px;
  border-bottom: 1px solid lighten(@txt, 30%);

  &:hover {
    color: @bg;
    background: lighten(@txt, 20%);
    border-bottom: 1px solid lighten(@txt, 20%);
    text-decoration: none;
  }
}

ul {
  list-style: square;
}

p, pre, ul, ol {
  margin-bottom: 1.5em;
}

.container, .container-fluid {
  max-width: 900px;
}

pre {
  padding: 15px;
  border: none;
}

code, pre, .Code {
  border: none;
  color: @color-txt;
  background: #fff;
}

.Index {

  .HeaderWrapper {
    @bg: @color-bg;
    @txt: @color-txt;

    background: @bg;

    .Header {
      text-align: left;
      padding: @padding-section;

      h1 {
        color: @txt;
        font-weight: bold;
        margin-bottom: 0.5em;
      }

      p {
        color: @txt;
      }
    }
  }

  @bg: @color-bg;
  @txt: @color-txt;

  background: @bg;

  .Usage {
    padding: @padding-section;

    color: @txt;

    .Text {
      color: @txt;
      h4 {
        font-weight: bold;
      }
      text-align: right;
    }
  }

  .Footer {
    padding: @padding-section;
    opacity: 0.7;
    font-size: 90%;
  }

}

.Content {
  padding: @padding-section;
}

.Section {
  padding: 1em;
}

.NavigationBar {
  @txt: @color-txt;
  @bg: @color-bg;
  @bg-hover: lighten(@txt, 20%);
  @txt-hover: @bg;

  background: @bg;
  border: none;
  box-shadow: 0px 0px 10px 1px darken(@bg, 10%);

  .divider {
    background-color: darken(@bg, 20%);
  }

  .dropdown-header {
    color: darken(@bg, 10%);
    padding-bottom: 10px;
  }

  &.navbar-default .navbar-brand {
    text-shadow: 0px 0px 1px lighten(@bg, 40%);
    font-weight: bold;
  }

  .nav li {
    cursor: default;
  }

  .dropdown-menu {
    background: @bg;
    border: none;
    box-shadow: 0 4px 7px -2px rgba(0, 0, 0, 0.175);
  }

  &.navbar-default li.dropdown {
    background: @bg;
    & > .dropdown-menu a {
      color: @txt-hover;
      background: @bg-hover;
      &:hover {
        background: @txt;
        color: @bg;
      }
    }

    &:hover {
      & > .dropdown-menu {
        color: @txt-hover;
        background: @bg-hover;
        display: block;
      }
    }
  }

  &.navbar-default {
    background: @bg;
    .navbar-header, li {
      & > a {
        border: none;
        color: @txt;
      }
      &:hover > a {
        text-shadow: none;
        background: @bg-hover;
        color: @txt-hover;
        border: none;
      }
    }
  }
}

.ArrayEditor {
  .Item {
    position: relative;
    padding-right: 40px;
  }
  .Remove {
    color: @gray;
    font-size: 190%;
    position: absolute;
    top: 8px;
    right: 15px;
    background: none;
    border: none;
  }
}

.SortableImage {
  background: white;
  padding: 15px;
  box-shadow: 2px 2px 15px 0px #ccc;
}

.SortableRepeatingFieldset {
  .react-forms-repeating-fieldset-item {
    position: relative;
  }

  .SortablePlaceholder {
    .form-group();
    border: 3px dashed darken(@color-bg, 10%);

  }
  .SortableHandle {
    background: url(sortable.svg);
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
    color: lighten(@gray, 30%);
    top: 8px;
    left: 15px;
    height: 20px;
    cursor: move;
    padding: 0px 25px;
    font-size: 80%;
    text-transform: uppercase;
  }
  &.SortableActive {
    cursor: move;
    .SortableHandle {
    }
  }
}

.ShowValue {
  .ShowValueValue .text,
  .ShowValueComponent .text {
    font-size: 80%;
  }

  .ShowValueValue {
    padding: 10px 0;

    .value {
      border: none;
      background: #fff;
      color: @gray-light;
    }
  }

  .ShowDebugInfoToggle {
    font-size: 70%;
    float: right;
    & > label {
      cursor: pointer;
      font-weight: normal;
    }
  }
}