css 响应式页面提醒

Posted 2021-05-13

/* Responsive Alert Message */
.page-alert-message {
	background-color: #fff!important;
	-moz-border-radius: 10px!important;
	-webkit-border-radius: 5px!important;
	-ms-border-radius: 5px!important;
	border-radius: 5px!important;
	-webkit-border-radius: 5px!important;
	color: black!important;
	position: absolute!important;
	text-align: left!important;
	width: 100%;
	max-width: 450px;
	z-index: 99999!important;
	padding: 20px!important;
	box-shadow: 0px 0px 0px 10px rgba(0,0,0,.175)!important;
	border: none!important;
    margin-left: 0 !important;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

div.page-alert-message div.controls input[type=submit] {
	border: 0;
	outline: 0;
	width: 100%;
	padding: 10px;
	border-radius: 4px;
	color: #fff;
	background-color: #b02d31;
	-webkit-transition: 0.2s ease-out;
	-moz-transition: 0.2s ease-out;
	transition: 0.2s ease-out;
}

div.page-alert-message div.controls input[type=submit]:hover {
	background-color: #A6262A;
}

.pageAlertWrapper {
	position: absolute!important;
	top: 0!important;
	left: 0!important;
	height: 100%!important;
	width: 100%!important;
}

.page-alert-wrapper {
	background: #202020!important;
}

@media (max-width: 650px) {
	.page-alert-message {
		width: 100%!important;
		max-width: 400px;
	}
}