NeuroWiki

直播记录/styles.css：修订间差异

←上一编辑下一编辑→
小无编辑摘要
标签：已被回退
小无编辑摘要
标签：已被回退
第1行： 第1行：
/* 父容器样式 */
/* 父容器样式 */
.base_block {
.base_block {
display: grid; /* 使用 CSS Grid 布局 */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 根据子元素宽度动态排列 */
gap: 10px; /* 子元素之间的间距 */
border: 2px outset #9147ff;
border: 2px outset #9147ff;
background-color: rgba(255, 255, 255, 0.1);
background-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 2px 5px #aaa;
box-shadow: 0 2px 5px #aaa;
display: flex;
justify-content: space-around; /* 确保子元素均匀分布 */
flex-wrap: wrap; /* 允许子元素换行 */
padding: 15px;
padding: 15px;
gap: 10px; /* 子元素之间的间距 */
}
}
@media screen and (max-width: 982px) {
@media screen and (max-width: 982px) {
第24行： 第23行：
/* 子元素样式 */
/* 子元素样式 */
.item {
.item {
flex: 1 1 calc((100% - 40px) / 4); /* 每行最多 4 个子元素 */
max-width: 360px; /* 限制子元素最大宽度 */
max-width: 360px; /* 最大宽度 */
min-width: 200px; /* 限制子元素最小宽度 */
min-width: 200px; /* 最小宽度 */
height: 124px; /* 固定高度 */
height: 124px;
background-color: #0078d7;
padding: 0;
color: white;
display: flex;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px #aaa;
box-shadow: 0 2px 5px #aaa;
transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
overflow: hidden;
text-align: center;
position: relative;
margin: 0; /* Grid 的间距通过 gap 设置，不需要 margin */
margin: 3px;
}
}
/* 占位符样式（伪元素） */
/* 父容器补充伪元素 */
.base_block::after {
.base_block::after {
content: ''; /* 添加空白内容 */
content: ''; /* 添加空白内容 */
flex: 1 1 calc((100% - 40px) / 4); /* 占位符的宽度与其他子元素一致 */
display: block;
min-width: 200px; /* 与子元素宽度一致 */
max-width: 360px;
max-width: 360px;
min-width: 200px;
height: 124px; /* 高度与子元素一致 */
height: 124px; /* 高度与子元素一致 */
margin: 3px;
background: rgba(0, 0, 0, 0.1); /* 占位符背景颜色 */
background-color: rgba(220, 220, 220, 0.8); /* 占位符背景透明 */
background-color: rgba(220, 220, 220, 0.8); /* 占位符背景透明 */
mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
检索自“http://zh.neurosama.info/wiki/直播记录/styles.css”