seitime-frappe/frappe/public/scss/desk/form.scss

.form-control {
	border: none;
	font-size: var(--text-md);
}

.form-section {
	margin: 0px;

	.form-section-description {
		margin-bottom: 10px;
	}

	.section-head {
		@extend .head-title;
		width: 100%;
		padding: var(--padding-sm) var(--padding-md);
		margin: 0;
		margin-bottom: var(--margin-sm);
		cursor: pointer;

		.collapse-indicator {
			color: $text-muted;
			margin-left: 10px;
			position: relative;
			bottom: -1px;
		}

		.collapse-indicator.octicon-chevron-up {
			bottom: -2px;
		}
	}

	.section-head.collapsed {
		margin-bottom: 0px;
	}

	.section-body {
		width: 100%;
		@extend .row;
		margin: 0;
		&:first-child {
			margin-top: var(--margin-sm);
		}
	}
}

.empty-section {
	display: none !important;
	border: 0 !important;
}

.form-section.card-section,
.form-dashboard-section {
	margin-bottom: var(--margin-lg);
	@extend .frappe-card;
}

.form-dashboard {
	.section-body:first-child {
		margin-top: 0;
	}
	.section-head {
		padding-left: 0;
		padding-right: 0;
	}
	.form-dashboard-section {
		padding-left: calc(var(--padding-lg) + var(--padding-xs));
		padding-right: calc(var(--padding-lg) + var(--padding-xs));
		padding-bottom: var(--padding-lg);
	}
}

.control-label,
.grid-heading-row {
	color: var(--text-light);
	font-size: var(--text-sm);
}

.form-inner-toolbar {
	padding-top: var(--padding-md);
	text-align: right;
}

.form-control.bold {
	font-weight: 500;
}

.like-disabled-input {
	@extend .form-control;
	border-radius: $border-radius;
	font-weight: 400;
	cursor: default;
	color: var(--gray-500);
	background-color: var(--control-bg);
}

.comment-box {
	@include card();
	padding: 25px var(--padding-xl);
	.comment-input-header {
		@extend .head-title;
		margin-bottom: var(--margin-sm);
	}
	.comment-input-container {
		.frappe-control {
			margin-bottom: var(--margin-xs);
		}
		.ql-editor {
			background-color: var(--control-bg);
		}
	}

	.btn-comment {
		margin-top: var(--margin-md);
	}
}

.form-dashboard-wrapper {
	width: 100%;
}

.form-links {
	color: var(--text-color);
	.form-link-title {
		margin-top: var(--margin-md);
		margin-bottom: var(--margin-sm);
		font-weight: var(--text-bold);
	}
	.row:first-child {
		.form-link-title {
			margin-top: 0;
		}
	}
	.document-link {
		margin-bottom: var(--margin-sm);
		display: flex;
		.document-link-badge,
		.report-link-badge {
			font-size: var(--text-sm);
			padding: var(--padding-xs) var(--padding-sm);
			border-radius: var(--border-radius);
			background-color: var(--control-bg);
			.count {
				font-size: var(--text-xs);
				background-color: var(--gray-500);
				border-radius: var(--border-radius-sm);
				color: var(--gray-50);
				padding: 0 var(--padding-xs);
				margin-right: var(--margin-xs);
			}
			.badge-link:hover:not([disabled="disabled"]),
			.report-link:hover:not([disabled="disabled"]) {
				text-decoration: underline;
			}
		}
		.open-notification {
			display: inline-flex;
			align-items: center;
			background-color: var(--indicator-red-bg);
			font-size: var(--text-xs);
			padding: 0 var(--padding-sm);
			color: var(--indicator-red);
			border-radius: var(--border-radius);
			cursor: pointer;
		}
		.btn-new,
		.open-notification {
			margin-left: var(--margin-sm);
		}
		.btn-new {
			box-shadow: none;
		}
	}
}

.inline-graph {
	.inline-graph-half {
		width: 48%;
		display: inline-block;
		position: relative;
		height: 30px;

		.inline-graph-count {
			font-size: 10px;
			position: absolute;
			left: 0;
			right: 0;
			top: 3px;
			padding: 0px 5px;
			text-align: left;
		}
		.inline-graph-bar {
			position: absolute;
			left: 0;
			right: 0;
			top: 20px;
		}
		.inline-graph-bar-inner {
			display: block;
			float: left;
			background-color: var(--border-color);
			height: 6px;
			border-radius: 0px 3px 3px 0px;
		}
		.inline-graph-bar-inner.dark {
			background-color: var(--primary-color);
		}
	}
	.inline-graph-half:first-child {
		border-right: 1px solid var(--border-color);
		margin-right: -3px;

		.inline-graph-count {
			text-align: right;
		}

		.inline-graph-bar-inner {
			float: right;
			border-radius: 3px 0px 0px 3px;
		}
	}
}

@mixin form-message-background($color) {
	background: var(--bg-#{$color});
	color: var(--text-on-#{$color});
}

.form-message {
	border-radius: var(--border-radius);
	padding: var(--padding-md) var(--padding-xl);
	font-size: var(--text-md, 13px);
	margin-bottom: var(--margin-md);

	&.blue {
		@include form-message-background("blue");
	}

	&.green {
		@include form-message-background("green");
	}

	&.yellow {
		@include form-message-background("yellow");
	}

	&.orange {
		@include form-message-background("orange");
	}

	&.red {
		@include form-message-background("red");
	}
}

.help-box {
	margin-top: 4px;
	margin-bottom: 8px;
	line-height: 1.6;
}

.form-group:last-child.frappe-control[data-fieldtype="Table"] {
	margin-bottom: 0;
}

.form-footer {
	position: relative;
	.scroll-to-top {
		position: absolute;
		height: 28px;
		right: 0;
	}
}