library_manage_system/WebContent/public/css/component.css

/* 设置全局样式，适用于所有模态框 */
.md-perspective,
.md-perspective body {
	height: 100%; /* 设置高度为100% */
	overflow: hidden; /* 隐藏溢出内容 */
}

/* 容器样式，用于包裹页面内容以实现透视效果 */
.container {
	background: steelblue; /* 设置背景颜色为钢蓝色 */
	min-height: 100%; /* 最小高度为100% */
	width:100%; /* 宽度为100% */
}

/* 模态框基本样式 */
.md-modal {
	position: fixed; /* 固定定位 */
	top: 50%; /* 距离顶部50% */
	left: 50%; /* 距离左侧50% */
	width: 50%; /* 宽度为50% */
	max-width: 630px; /* 最大宽度为630px */
	min-width: 320px; /* 最小宽度为320px */
	height: auto; /* 高度自动 */
	z-index: 2000; /* z轴索引为2000 */
	visibility: hidden; /* 初始不可见 */
	-webkit-backface-visibility: hidden; /* Webkit浏览器隐藏背面 */
	-moz-backface-visibility: hidden; /* Firefox浏览器隐藏背面 */
	backface-visibility: hidden; /* 标准方式隐藏背面 */
	-webkit-transform: translateX(-50%) translateY(-50%); /* Webkit浏览器居中 */
	-moz-transform: translateX(-50%) translateY(-50%); /* Firefox浏览器居中 */
	-ms-transform: translateX(-50%) translateY(-50%); /* IE浏览器居中 */
	transform: translateX(-50%) translateY(-50%); /* 标准方式居中 */
}

/* 显示模态框时的样式 */
.md-show {
	visibility: visible; /* 设置为可见 */
}

/* 遮罩层样式 */
.md-overlay {
	position: fixed; /* 固定定位 */
	width: 100%; /* 宽度为100% */
	height: 100%; /* 高度为100% */
	visibility: hidden; /* 初始不可见 */
	top: 0; /* 距离顶部0 */
	left: 0; /* 距离左侧0 */
	z-index: 1000; /* z轴索引为1000 */
	opacity: 0; /* 初始透明度为0 */
	background: rgba(232, 232, 232, 0.5); /* 背景色和透明度 */
	-webkit-transition: all 0.3s; /* Webkit浏览器过渡效果 */
	-moz-transition: all 0.3s; /* Firefox浏览器过渡效果 */
	transition: all 0.3s; /* 标准方式过渡效果 */
}

/* 当模态框显示时，遮罩层的样式 */
.md-show ~ .md-overlay {
	opacity: 1; /* 透明度为1 */
	visibility: visible; /* 设置为可见 */
}

/* 内容区域样式 */
.md-content {
	color: black; /* 文字颜色为黑色 */
	background: lightblue; /* 背景色为浅蓝色 */
	position: relative; /* 相对定位 */
	border-radius: 3px; /* 圆角半径为3px */
	margin: 0 auto; /* 水平居中 */
}

/* 标题样式 */
.md-content h3 {
	margin: 0; /* 外边距为0 */
	padding: 0.4em; /* 内边距为0.4em */
	text-align: center; /* 文本居中 */
	font-size: 2.4em; /* 字体大小为2.4em */
	font-weight: 300; /* 字体粗细为300 */
	opacity: 0.8; /* 透明度为0.8 */
	background: rgba(0,0,0,0.1); /* 背景色和透明度 */
	border-radius: 3px 3px 0 0; /* 圆角半径，上左和上右为3px，下左和下右为0 */
}

/* 内容区域的子元素样式 */
.md-content > div {
	padding: 15px 40px 30px; /* 内边距 */
	margin: 0; /* 外边距为0 */
	font-weight: 300; /* 字体粗细为300 */
	font-size: 1.15em; /* 字体大小为1.15em */
}

/* 内容区域内的段落样式 */
.md-content > div p {
	margin: 0; /* 外边距为0 */
	padding: 10px 0; /* 内边距为10px 0 */
}

/* 内容区域内的无序列表样式 */
.md-content > div ul {
	margin: 0; /* 外边距为0 */
	padding: 0 0 30px 20px; /* 内边距为0 0 30px 20px */
}

/* 列表项样式 */
.md-content > div ul li {
	padding: 5px 0; /* 内边距为5px 0 */
}

/* 按钮样式 */
.md-content button {
	display: block; /* 块级显示 */
	margin: 0 auto; /* 水平居中 */
	font-size: 0.8em; /* 字体大小为0.8em */
}

/* 特效13：3D切片效果 */
.md-effect-13.md-modal {
	-webkit-perspective: 1300px; /* Webkit浏览器透视效果 */
	-moz-perspective: 1300px; /* Firefox浏览器透视效果 */
	perspective: 1300px; /* 标准方式透视效果 */
}

/* 特效13的内容样式 */
.md-effect-13 .md-content {
	-webkit-transform-style: preserve-3d; /* Webkit浏览器保留3D变换 */
	-moz-transform-style: preserve-3d; /* Firefox浏览器保留3D变换 */
	transform-style: preserve-3d; /* 标准方式保留3D变换 */
	-webkit-transform: translateZ(-3000px) rotateY(90deg); /* Webkit浏览器初始位置和旋转角度 */
	-moz-transform: translateZ(-3000px) rotateY(90deg); /* Firefox浏览器初始位置和旋转角度 */
	-ms-transform: translateZ(-3000px) rotateY(90deg); /* IE浏览器初始位置和旋转角度 */
	transform: translateZ(-3000px) rotateY(90deg); /* 标准方式初始位置和旋转角度 */
	opacity: 0; /* 初始透明度为0 */
}

/* 显示特效13时的动画效果 */
.md-show.md-effect-13 .md-content {
	-webkit-animation: slit .7s forwards ease-out; /* Webkit浏览器动画效果 */
	-moz-animation: slit .7s forwards ease-out; /* Firefox浏览器动画效果 */
	animation: slit .7s forwards ease-out; /* 标准方式动画效果 */
}

/* Webkit浏览器的动画关键帧 */
@-webkit-keyframes slit {
	50% { -webkit-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -webkit-animation-timing-function: ease-out;} /* 中间状态 */
	100% { -webkit-transform: translateZ(0) rotateY(0deg); opacity: 1; } /* 结束状态 */
}

/* Firefox浏览器的动画关键帧 */
@-moz-keyframes slit {
	50% { -moz-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -moz-animation-timing-function: ease-out;} /* 中间状态 */
	100% { -moz-transform: translateZ(0) rotateY(0deg); opacity: 1; } /* 结束状态 */
}

/* IE浏览器的动画关键帧 */
@-ms-keyframes slit {
	50% { -ms-transform: translateZ(-250px) rotateY(89deg); opacity: .5; -ms-animation-timing-function: ease-out;} /* 中间状态 */
	100% { -ms-transform: translateZ(0) rotateY(0deg); opacity: 1; } /* 结束状态 */
}

/* 标准方式的动画关键帧 */
@keyframes slit {
	50% { transform: translateZ(-250px) rotateY(89deg); opacity:1; animation-timing-function: ease-in;} /* 中间状态 */
	100% { transform: translateZ(0) rotateY(0deg); opacity: 1; } /* 结束状态 */
}

/* 如果屏幕宽度小于或等于32em，则调整字体大小 */
@media screen and (max-width: 32em) {
	body { font-size: 75%; } /* 字体大小缩小到75% */
}