|
|
| 第1行： |
第1行： |
| /* ===== 明日方舟终末地风格 WIKI 首页样式 ===== */
| | .wiki-main { |
| /* 适用于任何深色科技感主题的MediaWiki首页，由用户提供并适配 */
| | max-width: 1200px; |
| /* 1. 隐藏首页标题（仅针对首页） */
| | margin: 0 auto; |
| body.page-首页 .firstHeading {
| |
| display: none;
| |
| } | | } |
| body {
| | .notice { |
| background-image: url('/wikibg/1.jpg'); /* 根目录下的图片 */
| | background: #eef2f8; |
| background-size: cover;
| |
| background-attachment: fixed;
| |
| background-position: center;
| |
| background-repeat: no-repeat;
| |
| } | | } |
| .mw-body, | | .left-column table { |
| .mw-body-content,
| | border-collapse: collapse; |
| .mw-page-container {
| |
| background-image: url('/wikibg/1.jpg') !important; /* 与您首页的深色背景一致 */
| |
| background-size: cover;
| |
| background-attachment: fixed;
| |
| background-position: center;
| |
| background-repeat: no-repeat;
| |
| /* 如果内容区有其他背景图，也会被覆盖 */
| |
| } | | } |
| /* 2. 顶部固定导航栏 */
| | .left-column th, .left-column td { |
| .zmd-top-nav {
| | padding: 8px 12px; |
| background: #0a0c10; /* 纯色背景，不透明 */
| | border: 1px solid #ddd; |
| border-bottom: 1px solid rgba(72, 187, 160, 0.4);
| |
| padding: 12px 24px;
| |
| display: flex;
| |
| justify-content: center;
| |
| gap: 32px;
| |
| font-weight: 500;
| |
| /* 移除 position: fixed 和相关定位属性 */
| |
| }
| |
| .zmd-top-nav a,
| |
| .zmd-top-nav a:link,
| |
| .zmd-top-nav a:visited {
| |
| color: #e0e3e9;
| |
| text-decoration: none;
| |
| padding: 6px 12px;
| |
| border-radius: 20px;
| |
| transition: 0.2s;
| |
| display: inline-block;
| |
| }
| |
| | |
| /* 悬停效果 */
| |
| .zmd-top-nav a:hover {
| |
| background: rgba(72, 187, 160, 0.2);
| |
| color: #48bba0;
| |
| text-decoration: none;
| |
| }
| |
| | |
| /* 内容区不再需要为固定导航留出上边距 */
| |
| .zmd-wiki-home {
| |
| margin-top: 0;
| |
| background: rgba(0,0,0,0.6);
| |
| }
| |
| | |
| .zmd-card {
| |
| background: rgba(20, 24, 30, 0.85);
| |
| backdrop-filter: blur(2px);
| |
| border-radius: 20px;
| |
| border: 1px solid rgba(72, 187, 160, 0.3);
| |
| margin-bottom: 24px;
| |
| overflow: hidden;
| |
| transition: 0.2s;
| |
| }
| |
| .zmd-card:hover {
| |
| border-color: #48bba0;
| |
| box-shadow: 0 6px 14px rgba(0,0,0,0.3);
| |
| }
| |
| .zmd-card-header {
| |
| padding: 14px 20px;
| |
| background: rgba(0, 0, 0, 0.4);
| |
| border-bottom: 1px solid rgba(72, 187, 160, 0.4);
| |
| font-weight: bold;
| |
| font-size: 1.2rem;
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 8px;
| |
| }
| |
| .zmd-card-content {
| |
| padding: 16px 20px;
| |
| }
| |
| .version-badge {
| |
| margin-left: auto;
| |
| font-size: 0.75rem;
| |
| background: #1e3a3a;
| |
| padding: 4px 12px;
| |
| border-radius: 40px;
| |
| font-weight: normal;
| |
| }
| |
| .header-icon {
| |
| font-size: 1.3rem;
| |
| }
| |
| | |
| /* 网格布局 */
| |
| /* 三栏布局：左侧栏 260px，中间自适应，右侧栏 280px */
| |
| /* 4. 改为两栏布局（中间 + 右侧） */
| |
| .zmd-grid {
| |
| display: grid;
| |
| grid-template-columns: 1fr 300px; /* 中间自适应，右侧固定300px */
| |
| gap: 24px;
| |
| margin-top: 10px;
| |
| }
| |
| | |
| /* 响应式 */
| |
| @media (max-width: 800px) {
| |
| .zmd-grid {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| .zmd-top-nav {
| |
| gap: 16px;
| |
| padding: 10px 16px;
| |
| flex-wrap: wrap;
| |
| }
| |
| .zmd-wiki-home {
| |
| margin-top: 100px; /* 手机端导航栏可能换行，适当增加留空 */
| |
| }
| |
| }
| |
| | |
| /* 活动条目内的列表样式 */
| |
| .event-col ul {
| |
| list-style: none;
| |
| padding-left: 0;
| |
| }
| |
| .event-col h4 {
| |
| margin: 0 0 8px 0;
| |
| color: #b9f3e2;
| |
| }
| |
| | |
| /* 统计区域 */
| |
| .wiki-stats {
| |
| background: #1e2128;
| |
| padding: 12px;
| |
| border-radius: 12px;
| |
| margin: 15px 0;
| |
| display: flex;
| |
| justify-content: space-around;
| |
| text-align: center;
| |
| }
| |
| .wiki-stats b {
| |
| font-size: 1.3rem;
| |
| color: #48bba0;
| |
| }
| |
| | |
| /* 角色图鉴网格 */
| |
| .character-grid {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| gap: 12px;
| |
| }
| |
| .char-item[href*="www.war3whj.top/war3wiki/index.php?title=棋子"] .char-avatar {
| |
| background-image: url('/wikiqz/1.jpg') !important;
| |
| }
| |
| .char-avatar {
| |
| width: 70px;
| |
| height: 70px;
| |
| background: #2f3e46;
| |
| border-radius: 50%;
| |
| margin: 0 auto;
| |
| background-size: cover;
| |
| background-position: center;
| |
| }
| |
| .char-avatar.more-bg {
| |
| background: #3a4a52;
| |
| line-height: 70px;
| |
| text-align: center;
| |
| font-size: 24px;
| |
| }
| |
| .char-name {
| |
| margin-top: 5px;
| |
| font-size: 0.85rem;
| |
| }
| |
| | |
| /* 链接列表样式 */
| |
| .link-list {
| |
| display: flex;
| |
| flex-direction: column;
| |
| gap: 8px;
| |
| }
| |
| .plain-list {
| |
| padding-left: 20px;
| |
| }
| |
| .plain-list a, .guide-list a, .link-list a {
| |
| color: #7fc1b0;
| |
| text-decoration: none;
| |
| }
| |
| .plain-list a:hover, .guide-list a:hover, .link-list a:hover {
| |
| color: #c0f0e2;
| |
| text-decoration: underline;
| |
| }
| |
| | |
| /* 双列攻略列表 */
| |
| .two-columns {
| |
| display: grid;
| |
| grid-template-columns: 1fr 1fr;
| |
| gap: 16px;
| |
| }
| |
| .guide-list {
| |
| list-style: none;
| |
| padding-left: 0;
| |
| margin: 0;
| |
| }
| |
| .guide-list li {
| |
| margin-bottom: 8px;
| |
| }
| |
| | |
| /* 新闻列表 */
| |
| .news-list {
| |
| list-style: none;
| |
| padding: 0;
| |
| margin: 0;
| |
| }
| |
| .news-list li {
| |
| padding: 10px 0;
| |
| border-bottom: 1px dashed rgba(255,255,255,0.1);
| |
| display: flex;
| |
| align-items: baseline;
| |
| gap: 12px;
| |
| }
| |
| .news-list .date {
| |
| font-family: monospace;
| |
| background: #1e2a2a;
| |
| padding: 2px 8px;
| |
| border-radius: 14px;
| |
| font-size: 0.75rem;
| |
| color: #b9f3e2;
| |
| }
| |
| .more-link {
| |
| margin-top: 12px;
| |
| text-align: right;
| |
| }
| |
| | |
| /* QQ群样式 */
| |
| .qq-group {
| |
| background: #2a2e3a;
| |
| border-radius: 30px;
| |
| padding: 8px 16px;
| |
| display: inline-block;
| |
| margin-top: 8px;
| |
| }
| |
| | |
| /* 页面操作栏 */
| |
| .page-toolbar {
| |
| display: flex;
| |
| justify-content: flex-end;
| |
| gap: 12px;
| |
| margin: 10px 0 20px;
| |
| font-size: 0.9rem;
| |
| }
| |
| .mw-ui-button {
| |
| display: inline-block;
| |
| padding: 6px 12px;
| |
| border-radius: 2px;
| |
| background: #2a2e3a;
| |
| color: #e0e3e9;
| |
| border: 1px solid #4a5b6e;
| |
| cursor: default;
| |
| }
| |
| .mw-ui-quiet {
| |
| background: transparent;
| |
| border-color: transparent;
| |
| }
| |
| | |
| /* 底部 */
| |
| .zmd-footer {
| |
| margin-top: 40px;
| |
| padding: 20px 0;
| |
| text-align: center;
| |
| border-top: 1px solid #2e3a44;
| |
| font-size: 0.85rem;
| |
| color: #8a9bb0;
| |
| }
| |
| | |
| /* 响应式 */
| |
| @media (max-width: 768px) {
| |
| .zmd-grid {
| |
| grid-template-columns: 1fr !important;
| |
| }
| |
| .event-grid {
| |
| flex-direction: column;
| |
| }
| |
| .two-columns {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| }
| |
| .character-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(7, minmax(70px, 1fr));
| |
| gap: 16px 12px;
| |
| justify-items: center;
| |
| align-items: center;
| |
| }
| |
| | |
| /* 单个角色卡片 */
| |
| .char-item {
| |
| text-align: center;
| |
| width: 100%;
| |
| max-width: 80px;
| |
| text-decoration: none;
| |
| color: #dce5f0;
| |
| }
| |
| .char-avatar {
| |
| width: 70px;
| |
| height: 70px;
| |
| background: #2f3e46;
| |
| border-radius: 50%;
| |
| margin: 0 auto;
| |
| background-size: cover;
| |
| background-position: center;
| |
| }
| |
| .char-avatar.more-bg {
| |
| background: #3a4a52;
| |
| line-height: 70px;
| |
| text-align: center;
| |
| font-size: 24px;
| |
| }
| |
| .char-name {
| |
| margin-top: 5px;
| |
| font-size: 0.85rem;
| |
| word-break: keep-all;
| |
| } | | } |
