health_manage/health-admin/src/main/resources/static/health/css/input-styles.css

/**
 * 输入框 复选框 CSS 样式
 * Copyright (c) 2024
 */

/* 基本样式 */
.styled-input {
	/*display: block; /* 使其独占一行 */
	width: 200px; /* 宽度为容器宽度 */
	height: 30px;
	padding: 6px; /* 内边距 */
	font-size: 14px; /* 字体大小 */
	color: #333; /* 字体颜色 */
	/*background-color: #fff; !* 背景颜色 *!*/
	border: 1px solid #ccc; /* 边框 */
	border-radius: 4px; /* 圆角边框 */
	outline: none; /* 移除轮廓 */
	transition: all 0.3s ease; /* 过渡动画 */
}

/*证件类型前面的小input*/
.styled-input.short {
	/*display: block; /* 使其独占一行 */
	width: 80px; /* 宽度为容器宽度 */
	height: 30px;
	padding: 6px; /* 内边距 */
	font-size: 14px; /* 字体大小 */
	color: #333; /* 字体颜色 */
	/*background-color: #fff; !* 背景颜色 *!*/
	border: 1px solid #ccc; /* 边框 */
	border-radius: 4px; /* 圆角边框 */
	outline: none; /* 移除轮廓 */
	transition: all 0.3s ease; /* 过渡动画 */
}
.styled-input.edit_inputs1 {
	/*display: block; /* 使其独占一行 */
	width: 400px; /* 宽度为容器宽度 */
	height: 30px;
	padding: 6px; /* 内边距 */
	font-size: 14px; /* 字体大小 */
	color: #333; /* 字体颜色 */
	/*background-color: #fff; !* 背景颜色 *!*/
	border: 1px solid #ccc; /* 边框 */
	border-radius: 4px; /* 圆角边框 */
	outline: none; /* 移除轮廓 */
	transition: all 0.3s ease; /* 过渡动画 */
}
.customize-form-group .styled-input.edit_inputs {
	/*display: block; /* 使其独占一行 */
	width: 480px; /* 宽度为容器宽度 */
	height: 30px;
	padding: 6px; /* 内边距 */
	font-size: 14px; /* 字体大小 */
	color: #333; /* 字体颜色 */
	/*background-color: #fff; !* 背景颜色 *!*/
	border: 1px solid #ccc; /* 边框 */
	border-radius: 4px; /* 圆角边框 */
	outline: none; /* 移除轮廓 */
	transition: all 0.3s ease; /* 过渡动画 */
}

/* 聚焦时的效果 */
.styled-input:focus {
	border-color: #55acee; /* 聚焦时边框颜色 */
	box-shadow: 0 0 5px rgba(85, 170, 238, 0.5); /* 阴影效果 */
}

/* 输入框有内容时的效果 */
/*.styled-input:not(:placeholder-shown) {
	border-color: #5cb85c; !* 输入框有内容时边框颜色 *!
}*/

/* 鼠标悬停时的效果 */
.styled-input:hover {
	border-color: #55acee; /* 悬停时边框颜色 */
}

/* 输入框禁用时的效果 */
.styled-input:disabled {
	background-color: #eee; /* 禁用时背景颜色 */
	color: #999; /* 禁用时字体颜色 */
	cursor: not-allowed; /* 禁用时鼠标光标 */
}

/* 已经改变过的下拉框样式 */
.styled-input.changed {
	border-color: #f6e5e5; /* 改变过的边框颜色 */
	box-shadow: 0 0 5px rgba(85, 170, 238, 0.5); /* 改变过的阴影 */
	background-color: rgb(232, 240, 254);
}
/* 名字后面的勾的状态*/
.customize-form-group .fa {
	position: relative;
	top: -7px; /* 根据需要调整这个值 */
}
/*判断为1的数据显示红色*/
.customize-form-group .fa-check {
	color: red;
}
/*勾后面字的位置*/
.customize-form-group .status {
	position: relative;
	top: -5px; /* 根据需要调整这个值 */
	width: 50px;
	border: none;
}
/*用于一行显示 数据不够填充长度*/
.span_line{
	width: 66px;
}

.input-groups {
	display: inline-flex; /* 使用inline-flex布局 */
	flex-wrap: nowrap; /* 防止单选按钮换行 */
	white-space: nowrap; /* 防止文字换行 */
	overflow: hidden; /* 当内容超出时隐藏多余部分 */
	text-overflow: ellipsis; /* 显示省略号表示被截断的内容 */
	width:480px;
	height: 30px;
	transform: translateY(20%); /* 向上移动一半的高度 */
	vertical-align: middle; /* 垂直居中对齐 */
}

.form-check-radio {
	margin-right: 0.5em; /* 调整单选按钮与文字间的距离 */
	margin: 1px 5px 10px 10px !important;
	margin-top: 1px;
	line-height: normal;
	position: relative;
}
/*这个是保险 input 多选方式宽度 */
.mySelectClass {
	width: 480px !important;
}

input{
	width: 15px;
}

input[type="text"]:focus {
	background-color: #55AAEE7F;
}
input[type="text"] {
	background-color: #fff;
}
input[type="text"] {
	transition: background-color 0.3s ease; /* 平滑过渡效果 */
}

input[type="text"]:not(.has-content):focus {
	background-color: #fff; /* 输入框无内容时获得焦点的背景颜色 */
}

input[type="text"].has-content:focus {
	background-color: #f0ad4e; /* 输入框有内容时获得焦点的背景颜色 */
}

input[type="text"].has-content:not(:focus) {
	background-color: rgb(232, 240, 254); /* 输入框有内容且失去焦点的背景颜色 */
}
li {
	/*background-color: lightblue; *//* 背景颜色 */
	/*padding: 1px; !* 内边距 *!*/
	text-align: left; /* 文本居中 */
}

/*---------页面查询表单自适应 样式-------------*/
.customize-search-form {
	display: flex; /* 使用 Flexbox 布局 */
	flex-direction: row; /* 主轴方向为从左到右 */
	flex-wrap: wrap; /* 允许子元素在必要时换行 */
	align-items: center; /* 在交叉轴上居中对齐子元素 */
	gap: 1em; /* 子元素之间的间隔 */
	max-width: 100%; /* 最大宽度为100%，防止超出父容器 */
	padding: 1em 1px 1px 1px; /* 上 右 下 左的内边距 */
	box-sizing: border-box; /* 包括边框和内边距在内的宽度计算 */
	position: relative; /* 添加相对定位，用于绝对定位的子元素 */
}

.customize-form-group-container {
	display: flex; /* 使用 Flexbox 布局 */
	flex-wrap: wrap; /* 允许子元素换行 */
	align-items: center; /* 垂直居中对齐子元素 */
	gap: 0.1em; /* 子元素之间的间隙 */
}

.customize-form-group {
	display: flex; /* 使用 Flexbox 布局 */
	align-items: end; /* 垂直居中对齐子元素 */
	flex-basis: calc(5% - 0.5em); /* 计算每个子元素的基础大小，减去一定的间隔 */
	margin-bottom: 0.5em; /* 每个子元素底部的外边距 */
}

.customize-form-group.edit {
	display: flex; /* 使用 Flexbox 布局 */
	align-items: end; /* 垂直居中对齐子元素 */
	flex-basis: calc(5% - 0.5em); /* 计算每个子元素的基础大小，减去一定的间隔 */
	margin-bottom: 0.5em; /* 每个子元素底部的外边距 */
}

/* 控制输入框前面的label 标签显示的内容 */
.customize-form-group label {
	width: 150px; /* 标签的宽度 */
	text-align: right; /* 文本右对齐 */
	margin-right: 0.5em; /* 标签右侧的外边距 */
}

.customize-form-group .styled-input,
.customize-form-group .time-input {
	flex-grow: 1; /* 输入框可以扩展以填充可用空间 */
	padding: 0.5em; /* 输入框内部的填充 */
	border: 1px solid #ccc; /* 输入框的边框 */
	border-radius: 4px; /* 输入框的圆角 */
}

.customize-form-group-container .select-time {
	flex-basis: calc(5% - 0.5em); /* 时间选择框的基础宽度，计算后减去一定的间隔 */
}

.customize-form-group-container .select-time label {
	/*margin-right: 1em; !* 时间选择框标签右侧的外边距 *!*/
}

.customize-form-group-container .select-time .time-input {
	width: 92px; /* 时间输入框的宽度 */
	/*margin-right: 0.5em;*/ /* 可选的右侧内边距 */
}
.time-input2 {
	width: 200px !important; /* 使用 !important 提高优先级 */ /* 时间输入框的宽度 */
}

/* 小屏幕设备 */
@media (max-width: 768px) {
	.customize-form-group {
		display: block; /* 取消 flex 布局，改为块级元素 */
		margin-bottom: 1em; /* 增加底部外边距 */
	}
	.customize-form-group.edit {
		display: block; /* 取消 flex 布局，改为块级元素 */
		margin-bottom: 1em; /* 增加底部外边距 */
	}
	.mySelectClass {
		width:285px !important;
	}
	.customize-form-group .styled-input.edit_inputs {
		/*display: block; !* 使其独占一行 *!*/
		width:285px; /* 宽度为容器宽度 */
		height: 30px;
		padding: 6px; /* 内边距 */
		font-size: 14px; /* 字体大小 */
		color: #333; /* 字体颜色 */
		/*background-color: #fff; !* 背景颜色 *!*/
		border: 1px solid #ccc; /* 边框 */
		border-radius: 4px; /* 圆角边框 */
		outline: none; /* 移除轮廓 */
		transition: all 0.3s ease; /* 过渡动画 */
	}
	.customize-form-group label {
		width: 100%; /* 标签占据整行 */
		text-align: left; /* 文本左对齐 */
		margin-bottom: 0.5em; /* 标签和输入框之间的间距 */
	}

	.customize-form-group .styled-input,
	.customize-form-group .time-input {
		width: 85%; /* 输入框占据整行 */
		white-space: normal; /* 允许换行 */
		word-break: break-all; /* 长单词或 URL 地址换行 */
	}

	.customize-search-form {
		display: block; /* 取消 flex 布局，改为块级元素 */
		margin-bottom: 1em; /* 增加底部外边距 */
	}

	.query-condition-container {
		display: block; /* 取消 flex 布局，改为块级元素 */
		align-items: flex-start; /* 对齐方式调整为左对齐 */
	}

	.query-condition-title {
		width: 100%; /* 查询条件标题占据整行 */
		margin-bottom: 0.5em; /* 增加底部外边距 */
	}

	.query-buttons {
		display: block; /* 取消 flex 布局，改为块级元素 */
		text-align: left; /* 查询按钮左对齐 */
		margin-top: 1em; /* 增加顶部外边距 */
	}
	.textareas{
		width: 100%!important;
	}
	.styled-input.short {
		/*display: block; /* 使其独占一行 */
		width: 20%; /* 宽度为容器宽度 */
		height: 30px;
		padding: 6px; /* 内边距 */
		font-size: 14px; /* 字体大小 */
		color: #333; /* 字体颜色 */
		/*background-color: #fff; !* 背景颜色 *!*/
		border: 1px solid #ccc; /* 边框 */
		border-radius: 4px; /* 圆角边框 */
		outline: none; /* 移除轮廓 */
		transition: all 0.3s ease; /* 过渡动画 */
	}
	.styled-input.edit_inputs1 {
		/*display: block; /* 使其独占一行 */
		width: 57%; /* 宽度为容器宽度 */
		height: 30px;
		padding: 6px; /* 内边距 */
		font-size: 14px; /* 字体大小 */
		color: #333; /* 字体颜色 */
		/*background-color: #fff; !* 背景颜色 *!*/
		border: 1px solid #ccc; /* 边框 */
		border-radius: 4px; /* 圆角边框 */
		outline: none; /* 移除轮廓 */
		transition: all 0.3s ease; /* 过渡动画 */
	}
	.input-groups {
		display: block; /* 改变为块级元素 */
		overflow-x: auto; /* 允许水平滚动 */
		flex-wrap: wrap; /* 允许内容换行 */
		white-space: normal; /* 允许文字换行 */
		overflow: visible; /* 不隐藏多余部分 */
		text-overflow: clip; /* 不显示省略号 */
		width: 100%; /* 宽度为100% */
		height: auto; /* 高度自动调整 */
		transform: none; /* 移除向上移动 */
		vertical-align: baseline; /* 默认对齐方式 */
	}
}

/* 固定表格布局 */
.fixed-layout-table {
	table-layout: fixed; /* 固定表格布局 */
}

.fixed-layout-table td, .fixed-layout-table th {
	min-width: 120px; /* 设置最小宽度 */
	width: 140px; /* 设置最小宽度 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 查询条件容器 */
.query-condition-container {
	display: flex; /* 使用 Flexbox 布局 */
	align-items: center; /* 在交叉轴上居中对齐子元素 */
	border-bottom: 1px solid #ccc; /* 底部边框 */
	padding-bottom: 0.5em; /* 底部内边距，使边框上方有一些空间 */
}

/* 查询条件标题 */
.query-condition-title {
	flex: 1; /* 占据剩余空间，使文本靠左 */
	text-align: left; /* 文本左对齐 */
}

/* 查询按钮容器 */
.query-buttons {
	flex: 1; /* 占据剩余空间，使按钮靠右 */
	display: flex; /* 使用 Flexbox 布局 */
	justify-content: flex-end; /* 在主轴上靠右对齐子元素 */
	margin-top: 0.2em; /* 顶部外边距 */
}
/*---------页面查询表单自适应 样式-------------*/

.fixed-layout-table {
	table-layout: fixed; /* 固定表格布局 */
}
.fixed-layout-table td, .fixed-layout-table th {
	min-width: 120px; /* 设置最小宽度 */
	/*word-wrap: break-word !important; !* 允许内容换行 *!*/
	width: 140px; /* 设置最小宽度 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}