Adding key during update

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

.error,
.info,
.success,
.warning {
	border-left: 5px solid transparent;
	margin-top: 20px;
	
	@include screen-md-up {
		padding: 10px 20px;
	}
	
	@include screen-sm-down {
		padding: 10px;
	}
}

.error {
	background-color: $wcfStatusErrorBackground;
	border-color: $wcfStatusErrorBorder;
	color: $wcfStatusErrorText;
	
	a {
		color: $wcfStatusErrorLink;
		
		&:hover {
			color: $wcfStatusErrorLinkActive;
		}
	}
}

.info {
	background-color: $wcfStatusInfoBackground;
	border-color: $wcfStatusInfoBorder;
	color: $wcfStatusInfoText;
	
	a {
		color: $wcfStatusInfoLink;
		
		&:hover {
			color: $wcfStatusInfoLinkActive;
		}
	}
}

.success {
	background-color: $wcfStatusSuccessBackground;
	border-color: $wcfStatusSuccessBorder;
	color: $wcfStatusSuccessText;
	
	a {
		color: $wcfStatusSuccessLink;
		
		&:hover {
			color: $wcfStatusSuccessLinkActive;
		}
	}
}

.warning {
	background-color: $wcfStatusWarningBackground;
	border-color: $wcfStatusWarningBorder;
	color: $wcfStatusWarningText;
	
	a {
		color: $wcfStatusWarningLink;
		
		&:hover {
			color: $wcfStatusWarningLinkActive;
		}
	}
}

.innerError,
.innerInfo {
	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: 101;
	}
}

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

	&::before {
		border-bottom-color: rgb(242, 222, 222);
	}
	
	a {
		color: $wcfStatusErrorLink;
		
		&:hover {
			color: $wcfStatusErrorLinkActive;
		}
	}
}

/* sticky footer notices */
.pageFooterStickyNotice {
	bottom: 0;
	left: 0;
	right: 0;
	position: fixed;
	
	.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;
		}
	}
}

/* inline infos */
.innerInfo {
	background-color: $wcfStatusInfoBackground;
	color: $wcfStatusInfoText;

	&::before {
		border-bottom-color: $wcfStatusInfoBorder;
	}
	
	a {
		color: $wcfStatusInfoLink;
		
		&:hover {
			color: $wcfStatusInfoLinkActive;
		}
	}
}