MediaWiki:Common.css:修订间差异
外观
无编辑摘要 |
无编辑摘要 |
||
| 第1行: | 第1行: | ||
/**************************************************** | |||
* 次元企鹅百科 · 分类导航网格(美观卡片样式) | |||
****************************************************/ | |||
/* 卡片网格布局 */ | /* 卡片网格布局 */ | ||
.beautiful-grid { | .beautiful-grid { | ||
| 第5行: | 第9行: | ||
gap: 20px; | gap: 20px; | ||
margin: 20px 0; | margin: 20px 0; | ||
padding: 0; | |||
box-sizing: border-box; | |||
} | } | ||
/* | /* 卡片容器 */ | ||
.home-card { | .home-card { | ||
background: #ffffff; | background: #ffffff; | ||
| 第13行: | 第19行: | ||
border-radius: 14px; | border-radius: 14px; | ||
padding: 0; | padding: 0; | ||
box-shadow: 0 2px 8px rgba(0,0,0,.05); | box-shadow: 0 2px 8px rgba(0,0,0,0.05); | ||
transition: .25s; | transition: all .25s ease; | ||
overflow: hidden; | |||
} | } | ||
/* | /* 卡片内的链接(真正可点击部分) */ | ||
.home-card > a { | .home-card > a { | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
gap: | gap: 12px; | ||
padding: 18px | padding: 18px 22px; | ||
font-size: 17px; | font-size: 17px; | ||
font-weight: 600; | font-weight: 600; | ||
color: #1b4d7a; | color: #1b4d7a !important; | ||
text-decoration: none; | text-decoration: none; | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
box-sizing: border-box; | |||
} | |||
/* 让图标稳定显示 */ | |||
.home-card > a::before { | |||
font-size: 22px; | |||
width: 26px; | |||
text-align: center; | |||
flex-shrink: 0; | |||
} | } | ||
/* | /* 各卡片图标(自动配对) */ | ||
.home-card:nth-child(1) > a::before { content: "📺" | .home-card:nth-child(1) > a::before { content: "📺"; } | ||
.home-card:nth-child(2) > a::before { content: "🧍" | .home-card:nth-child(2) > a::before { content: "🧍"; } | ||
.home-card:nth-child(3) > a::before { content: "🎬" | .home-card:nth-child(3) > a::before { content: "🎬"; } | ||
.home-card:nth-child(4) > a::before { content: "🌍" | .home-card:nth-child(4) > a::before { content: "🌍"; } | ||
.home-card:nth-child(5) > a::before { content: "🎞️" | .home-card:nth-child(5) > a::before { content: "🎞️"; } | ||
.home-card:nth-child(6) > a::before { content: "📚" | .home-card:nth-child(6) > a::before { content: "📚"; } | ||
/* | /* Hover 视觉效果 */ | ||
.home-card:hover { | .home-card:hover { | ||
transform: translateY(- | transform: translateY(-4px); | ||
box-shadow: 0 6px 14px rgba(0,0,0,.12); | box-shadow: 0 6px 14px rgba(0,0,0,.12); | ||
border-color: #bcd7ff; | border-color: #bcd7ff; | ||
background: #f8fbff; | background: #f8fbff; | ||
} | } | ||
2025年11月6日 (四) 16:59的版本
/****************************************************
* 次元企鹅百科 · 分类导航网格(美观卡片样式)
****************************************************/
/* 卡片网格布局 */
.beautiful-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
margin: 20px 0;
padding: 0;
box-sizing: border-box;
}
/* 卡片容器 */
.home-card {
background: #ffffff;
border: 1px solid #e3e8f0;
border-radius: 14px;
padding: 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
transition: all .25s ease;
overflow: hidden;
}
/* 卡片内的链接(真正可点击部分) */
.home-card > a {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 22px;
font-size: 17px;
font-weight: 600;
color: #1b4d7a !important;
text-decoration: none;
width: 100%;
height: 100%;
box-sizing: border-box;
}
/* 让图标稳定显示 */
.home-card > a::before {
font-size: 22px;
width: 26px;
text-align: center;
flex-shrink: 0;
}
/* 各卡片图标(自动配对) */
.home-card:nth-child(1) > a::before { content: "📺"; }
.home-card:nth-child(2) > a::before { content: "🧍"; }
.home-card:nth-child(3) > a::before { content: "🎬"; }
.home-card:nth-child(4) > a::before { content: "🌍"; }
.home-card:nth-child(5) > a::before { content: "🎞️"; }
.home-card:nth-child(6) > a::before { content: "📚"; }
/* Hover 视觉效果 */
.home-card:hover {
transform: translateY(-4px);
box-shadow: 0 6px 14px rgba(0,0,0,.12);
border-color: #bcd7ff;
background: #f8fbff;
}