The editors' meeting has been canceled for technical reasons.

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

来自NeuroWiki
跳转到导航 跳转到搜索
无编辑摘要
标签移动版编辑 移动版网页编辑
无编辑摘要
 
(未显示同一用户的4个中间版本)
第109行: 第109行:


/* 表格页通用样式 */
/* 表格页通用样式 */
/* 移动端 */
.neuro{
@media only screen and (max-width: 768px) {
background:#e3c3ad;
  /* 表格容器 */
  .open-block {
    width: 100%; /* 容器宽度与屏幕宽度一致 */
    overflow-x: hidden; /* 启用横向滚动以防非常长的内容 */
    overflow:visible;
  }
 
  /* 表格整体缩放 */
  table {
    width: auto; /* 表格内容宽度自由 */
    max-width:none;
    transform: scale(0.8); /* 表格缩放为 80% */
    transform-origin: top left; /* 缩放起点为左上角 */
    display: inline-block; /* 让表格在容器内居中缩放 */
    border-collapse: collapse;
  }
 
  /* 单元格文字默认大小 */
  th, td {
    white-space: nowrap; /* 禁止文字换行 */
    font-size: 16px; /* 设置基础字体大小 */
    padding: 6px; /* 减少单元格内边距 */
    text-align: left; /* 左对齐文字 */
  }
}
}
 
.evil{
@media only screen and (max-width: 480px) {
background:#B30239;
  /* 针对更小的屏幕进一步缩放 */
text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;
  table {
}
    transform: scale(0.6); /* 表格缩放为 60% */
.neuro-evil{
  }
background:#cb6273;
 
text-shadow:-1px -1px 0 #e3c3ad,1px -1px 0 #e3c3ad,-1px 1px 0 #e3c3ad,1px 1px 0 #e3c3ad;
  th, td {
}
    font-size: 14px; /* 设置更小的基础字体 */
.neuro-vedal{
  }
background:#96ba8c;
text-shadow:-1px -1px 0 #4ab06b,1px -1px 0 #4ab06b,-1px 1px 0 #4ab06b,1px 1px 0 #4ab06b;
}
.evil-vedal{
background:#7e5952;
text-shadow:-1px -1px 0 #4ab06b,1px -1px 0 #4ab06b,-1px 1px 0 #4ab06b,1px 1px 0 #4ab06b;
}
.vedal{
background:#4ab06b;
}
.neuro-evil-vedal{
background:#a07c70;
color:#fff;
}
}

2024年12月3日 (二) 19:37的最新版本

.title_block{
	padding: 2px;
	padding-left: 8px;
	background-color: #9147ff;
	display: flex;
	box-shadow: 0 2px 5px #aaa;
	height: 32px;
	align-items: center;
	color: #fff;
}
/* 父容器样式 */
.base_block {
	border: 2px outset #9147ff;
	background-color: rgba(255, 255, 255, 0.1);
	box-shadow: 0 2px 5px #aaa;
	display: flex;
	justify-content: space-between; /* 确保子元素均匀分布 */
	flex-wrap: wrap; /* 允许子元素换行 */
	padding: 15px;
	gap: 10px; /* 子元素之间的间距 */
}
/* 子元素样式 */
.item {
	flex: 1 1 20%; /* 每行最多 4 个子元素 */
	max-width: 360px; /* 最大宽度 */
	min-width: 290px; /* 最小宽度 */
	height: 124px;
	padding: 0;
	display: flex;
	box-shadow: 0 2px 5px #aaa;
	transition: all 0.3s ease-in-out;
	overflow: hidden;
	position: relative;
	margin: 3px;
}
.item1{
	background-color: rgba(145, 71, 255, 0.8);
}
.item2{
	background-color: rgba(255, 50, 80, 0.8);
}
.item3{
	background-color: rgba(50, 100, 255, 0.8);
}
.item4{
	background-color: rgba(255, 220, 50, 0.8);
}
.item5{
	background-color: rgba(50, 255, 150, 0.8);
}
.item6{
	background-color: rgba(50, 230, 255, 0.8);
}
.item7{
	background-color: rgba(120, 120, 120, 0.8);
}
.item > a{
	position: relative;
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: right;
	align-items: flex-end;
	font-size: 42px;
	color: #ffffff;
	transition: all 0.3s ease-in-out;
	padding-right:0;
	text-decoration: none;
}
.item:hover > a{
	padding-right:26px;
	text-decoration: none;
}
a > .long{
	max-width:90%;
	font-size: 24px;
	text-align: right;
}
.item:hover{
	background-color: rgba(0, 0, 0, 0.6);
}
.item > .img{
	position: absolute;
	mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
	transition: all 1.3s ease-in-out;
}
.item:hover > .img{
	mask-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

@media screen and (max-width: 1770px) {
	.base_block {
		padding-left:15px;
		padding-right:15px;
	}
	.item7{
		max-width:100%;
	}
}
@media screen and (min-width: 1770px) {
	.base_block {
		padding-left:250px;
		padding-right:250px;
	}
	.item7{
		max-width:46.5%;
	}
}

/* 表格页通用样式 */
.neuro{
	background:#e3c3ad;
}
.evil{
	background:#B30239;
	text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;
}
.neuro-evil{
	background:#cb6273;
	text-shadow:-1px -1px 0 #e3c3ad,1px -1px 0 #e3c3ad,-1px 1px 0 #e3c3ad,1px 1px 0 #e3c3ad;
}
.neuro-vedal{
	background:#96ba8c;
	text-shadow:-1px -1px 0 #4ab06b,1px -1px 0 #4ab06b,-1px 1px 0 #4ab06b,1px 1px 0 #4ab06b;
}
.evil-vedal{
	background:#7e5952;
	text-shadow:-1px -1px 0 #4ab06b,1px -1px 0 #4ab06b,-1px 1px 0 #4ab06b,1px 1px 0 #4ab06b;
}
.vedal{
	background:#4ab06b;
}
.neuro-evil-vedal{
	background:#a07c70;
	color:#fff;
}