Merge branch '6.0'

[GitHub/WoltLab/WCF.git] / wcfsetup / install / files / style / ui / alert.scss

.error,
.info,
.success,
.warning {
	border: 1px solid transparent;
	border-radius: var(--wcfBorderRadius);
	margin-top: 20px;

	@include screen-md-up {
		padding: 10px 20px;
	}

	@include screen-sm-down {
		padding: 10px;
	}

	a {
		@include wcfFontBold;

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

.error {
	background-color: var(--wcfStatusErrorBackground);
	border-color: var(--wcfStatusErrorBorder);
	color: var(--wcfStatusErrorText);

	a {
		color: var(--wcfStatusErrorLink);

		&:hover {
			color: var(--wcfStatusErrorLinkActive);
		}
	}
}

.info {
	background-color: var(--wcfStatusInfoBackground);
	border-color: var(--wcfStatusInfoBorder);
	color: var(--wcfStatusInfoText);

	a {
		color: var(--wcfStatusInfoLink);

		&:hover {
			color: var(--wcfStatusInfoLinkActive);
		}
	}
}

.success {
	background-color: var(--wcfStatusSuccessBackground);
	border-color: var(--wcfStatusSuccessBorder);
	color: var(--wcfStatusSuccessText);

	a {
		color: var(--wcfStatusSuccessLink);

		&:hover {
			color: var(--wcfStatusSuccessLinkActive);
		}
	}
}

.warning {
	background-color: var(--wcfStatusWarningBackground);
	border-color: var(--wcfStatusWarningBorder);
	color: var(--wcfStatusWarningText);

	a {
		color: var(--wcfStatusWarningLink);

		&:hover {
			color: var(--wcfStatusWarningLinkActive);
		}
	}
}

.innerError,
.innerInfo,
.innerSuccess,
.innerWarning {
	display: table;
	line-height: 1.5;
	margin-top: 8px;
	padding: 5px 10px;
	position: relative;

	/* pointer */
	&::before {
		border: 6px solid transparent;
		border-top-width: 0;
		content: "";
		display: inline-block;
		left: 10px;
		position: absolute;
		top: -6px;
		z-index: 99;
	}
}

/* inline messages */
.innerError {
	background-color: rgb(242, 222, 222);
	color: rgb(169, 68, 66);

	&::before {
		border-bottom-color: rgb(242, 222, 222);
	}

	a {
		color: var(--wcfStatusErrorLink);

		&:hover {
			color: var(--wcfStatusErrorLinkActive);
		}
	}
}
.innerSuccess {
	background-color: var(--wcfStatusSuccessBackground);
	color: var(--wcfStatusSuccessText);

	&::before {
		border-bottom-color: var(--wcfStatusSuccessBackground);
	}

	a {
		color: var(--wcfStatusSuccessLink);

		&:hover {
			color: var(--wcfStatusSuccessLinkActive);
		}
	}
}
.innerWarning {
	background-color: var(--wcfStatusWarningBackground);
	color: var(--wcfStatusWarningText);

	&::before {
		border-bottom-color: var(--wcfStatusWarningBackground);
	}

	a {
		color: var(--wcfStatusWarningLink);

		&:hover {
			color: var(--wcfStatusWarningLinkActive);
		}
	}
}

/* sticky footer notices */
.pageFooterStickyNotice {
	bottom: 0;
	left: 0;
	right: 0;
	position: fixed;
	z-index: 600;

	.error,
	.info,
	.success,
	.warning {
		border-left-width: 0;
		border-top-width: 1px;
		border-top-style: solid;
		margin-top: 0;
		padding: 10px 0;

		@include screen-sm-down {
			@include wcfFontSmall;
		}
	}

	.cookiePolicyNotice {
		.layoutBoundary {
			display: flex;
			align-items: center;

			@include screen-sm-down {
				flex-wrap: wrap;
			}
		}

		.cookiePolicyNoticeText {
			flex: 1 1 auto;

			@include screen-sm-down {
				flex-basis: 100%;
				margin-bottom: 5px;
			}
		}

		.cookiePolicyNoticeMoreInformation,
		.cookiePolicyNoticeDismiss {
			flex: 0 0 auto;
		}

		.cookiePolicyNoticeDismiss {
			margin-left: 5px;
		}
	}
}

/* dialogs */
.dialogContent,
.dialog__content {
	.error,
	.info,
	.success,
	.warning {
		&:first-child {
			margin-bottom: 20px;
			margin-top: 0;
		}
	}
}

/* inline infos */
.innerInfo {
	background-color: var(--wcfStatusInfoBackground);
	color: var(--wcfStatusInfoText);

	&::before {
		border-bottom-color: var(--wcfStatusInfoBackground);
	}

	a {
		color: var(--wcfStatusInfoLink);

		&:hover {
			color: var(--wcfStatusInfoLinkActive);
		}
	}
}

/* dismiss icon */
.noticeDismissible > .jsDismissNoticeButton {
	float: right;

	@include screen-md-down {
		font-size: 18px;
		height: 24px;
		line-height: 24px;
		width: 24px;
	}
}

.userExceptionMessage {
	align-self: center;
}