MediaWiki:Common.css:修订间差异
MediaWiki界面页面
更多操作
修复链接颜色 |
更新样式 |
||
| 第1行: | 第1行: | ||
/** | /** | ||
* MediaWiki:Common.css | * MediaWiki:Common.css | ||
* | * DOL ShipMaker Wiki - 大航海时代风格深色主题 | ||
*/ | */ | ||
/* ── | /* ── 首页 Hero 横幅 ─────────────────────────────────────── | ||
: | * 图片占位:hero-banner.jpg | ||
--color- | * 建议尺寸:1920×500px,海洋/船只场景,横向构图 | ||
--color- | * 上传后替换 url() 里的路径 | ||
--color | */ | ||
--color- | .wiki-hero { | ||
--color- | position: relative; | ||
--color-border: | width: 100%; | ||
height: 420px; | |||
background: | |||
linear-gradient(to bottom, rgba(10,22,40,0.3) 0%, rgba(10,22,40,0.85) 100%), | |||
url('/images/hero-banner.jpg') center center / cover no-repeat; | |||
/* 无图时显示深海渐变占位 */ | |||
background-color: #0a1628; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
text-align: center; | |||
margin: -1rem -1rem 2rem -1rem; | |||
} | |||
.wiki-hero-logo { | |||
width: 80px; | |||
height: 80px; | |||
margin-bottom: 1rem; | |||
/* 占位:logo.png,建议 200×200px,透明背景 PNG */ | |||
background: rgba(201,168,76,0.2); | |||
border-radius: 50%; | |||
border: 2px solid #c9a84c; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
font-size: 2.5rem; | |||
} | |||
.wiki-hero-title { | |||
font-size: 2.2rem; | |||
font-weight: bold; | |||
color: #c9a84c; | |||
text-shadow: 0 2px 8px rgba(0,0,0,0.8); | |||
margin-bottom: 0.5rem; | |||
letter-spacing: 2px; | |||
} | |||
.wiki-hero-subtitle { | |||
font-size: 1rem; | |||
color: #b0c4d8; | |||
text-shadow: 0 1px 4px rgba(0,0,0,0.8); | |||
margin-bottom: 1.5rem; | |||
} | |||
.wiki-hero-search { | |||
display: flex; | |||
gap: 0.5rem; | |||
} | |||
.wiki-hero-search a { | |||
background: #c9a84c; | |||
color: #0a1628; | |||
padding: 0.6rem 1.8rem; | |||
border-radius: 24px; | |||
font-weight: bold; | |||
text-decoration: none; | |||
font-size: 1rem; | |||
transition: background 0.2s; | |||
} | |||
.wiki-hero-search a:hover { | |||
background: #e0c070; | |||
color: #0a1628; | |||
} | |||
/* ── 分类图片卡片导航 ───────────────────────────────────── | |||
* 每张卡片图片:建议 320×120px,横向构图 | |||
* 图片命名和位置见下方各卡片注释 | |||
*/ | |||
.wiki-nav-grid { | |||
display: grid; | |||
grid-template-columns: repeat(4, 1fr); | |||
gap: 0.6rem; | |||
margin: 0 0 2rem 0; | |||
} | |||
@media (max-width: 768px) { | |||
.wiki-nav-grid { grid-template-columns: repeat(2, 1fr); } | |||
.wiki-hero { height: 300px; } | |||
.wiki-hero-title { font-size: 1.5rem; } | |||
} | |||
.wiki-nav-card { | |||
position: relative; | |||
height: 90px; | |||
border-radius: 6px; | |||
overflow: hidden; | |||
border: 1px solid #2a4a6c; | |||
transition: transform 0.2s, box-shadow 0.2s; | |||
cursor: pointer; | |||
} | |||
.wiki-nav-card:hover { | |||
transform: translateY(-2px); | |||
box-shadow: 0 4px 16px rgba(74,158,255,0.3); | |||
border-color: #c9a84c; | |||
} | |||
.wiki-nav-card a { | |||
display: flex; | |||
align-items: flex-end; | |||
width: 100%; | |||
height: 100%; | |||
text-decoration: none; | |||
padding: 0.5rem 0.7rem; | |||
background: linear-gradient(to top, rgba(10,22,40,0.9) 40%, rgba(10,22,40,0.2) 100%); | |||
color: #e8eaf0; | |||
font-weight: bold; | |||
font-size: 0.95rem; | |||
} | |||
.wiki-nav-card a.new, | |||
.wiki-nav-card a.new:visited { | |||
color: #e8eaf0; | |||
} | |||
/* 各卡片背景图占位(无图时显示渐变色块) | |||
* card-ships: 图片 nav-ships.jpg 320×120px 船只场景 | |||
* card-equipment: 图片 nav-equipment.jpg 320×120px 装备/配件特写 | |||
* card-guide: 图片 nav-guide.jpg 320×120px 航海地图/罗盘 | |||
* card-community: 图片 nav-community.jpg 320×120px 港口/人群场景 | |||
*/ | |||
.wiki-nav-card.card-ships { background-color: #1a3a5c; background-image: url('/images/nav-ships.jpg'); background-size: cover; background-position: center; } | |||
.wiki-nav-card.card-equipment { background-color: #1a2a4c; background-image: url('/images/nav-equipment.jpg'); background-size: cover; background-position: center; } | |||
.wiki-nav-card.card-guide { background-color: #0f2a3c; background-image: url('/images/nav-guide.jpg'); background-size: cover; background-position: center; } | |||
.wiki-nav-card.card-community { background-color: #1a1a3c; background-image: url('/images/nav-community.jpg'); background-size: cover; background-position: center; } | |||
/* ── 精选内容区 ───────────────────────────────────────────*/ | |||
.wiki-featured { | |||
margin-bottom: 2rem; | |||
} | |||
.wiki-featured-title { | |||
font-size: 1rem; | |||
color: #7a9ab8; | |||
text-transform: uppercase; | |||
letter-spacing: 2px; | |||
margin-bottom: 1rem; | |||
padding-bottom: 0.4rem; | |||
border-bottom: 1px solid #2a4a6c; | |||
} | } | ||
.wiki-featured-grid { | |||
.wiki- | |||
display: grid; | display: grid; | ||
grid-template-columns: | grid-template-columns: 2fr 1fr; | ||
gap: | gap: 0.8rem; | ||
} | } | ||
.wiki- | @media (max-width: 768px) { | ||
.wiki-featured-grid { grid-template-columns: 1fr; } | |||
} | |||
.wiki-featured-card { | |||
position: relative; | |||
border-radius: 8px; | border-radius: 8px; | ||
overflow: hidden; | |||
border: 1px solid #2a4a6c; | |||
background: #111e30; | |||
min-height: 200px; | |||
} | } | ||
.wiki- | /* 精选主卡片图片:featured-main.jpg,建议 640×240px */ | ||
.wiki-featured-card.featured-main { | |||
background-image: url('/images/featured-main.jpg'); | |||
background-size: cover; | |||
background-position: center; | |||
min-height: 240px; | |||
} | } | ||
.wiki- | .wiki-featured-card-body { | ||
position: absolute; | |||
bottom: 0; | |||
left: 0; | |||
right: 0; | |||
padding: 1rem; | |||
background: linear-gradient(to top, rgba(10,22,40,0.95) 60%, transparent 100%); | |||
} | } | ||
.wiki- | .wiki-featured-card-tag { | ||
font-size: | display: inline-block; | ||
background: #c9a84c; | |||
color: #0a1628; | |||
font-size: 0.7rem; | |||
font-weight: bold; | font-weight: bold; | ||
padding: 2px 8px; | |||
border-radius: 3px; | |||
margin-bottom: 0.4rem; | margin-bottom: 0.4rem; | ||
text-transform: uppercase; | |||
} | } | ||
.wiki-featured-card-title { | |||
.wiki- | font-size: 1.2rem; | ||
.wiki- | font-weight: bold; | ||
.wiki- | color: #e8eaf0; | ||
.wiki- | margin-bottom: 0.3rem; | ||
} | |||
.wiki-featured-card-desc { | |||
font-size: 0.85rem; | |||
color: #b0c4d8; | |||
line-height: 1.4; | |||
} | |||
.wiki-featured-card a, | |||
.wiki-featured-card a.new { | |||
color: inherit; | color: inherit; | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
.wiki- | /* ── 快速导航链接 ─────────────────────────────────────────*/ | ||
.wiki-quicklinks { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 0.5rem; | |||
margin-bottom: 2rem; | |||
} | } | ||
.wiki- | .wiki-quicklinks a, | ||
.wiki-quicklinks a.new { | |||
background: #1a3a5c; | |||
border: 1px solid #2a4a6c; | |||
color: #b0c4d8; | |||
padding: 0.3rem 0.9rem; | |||
border-radius: 16px; | |||
font-size: 0.85rem; | font-size: 0.85rem; | ||
text-decoration: none; | |||
transition: background 0.2s, border-color 0.2s; | |||
} | } | ||
/* ── | .wiki-quicklinks a:hover { | ||
background: #2a4a6c; | |||
border-color: #c9a84c; | |||
color: #c9a84c; | |||
} | |||
/* ── 船只信息卡(Template:ShipInfobox)────────────────────*/ | |||
.infobox-ship { | .infobox-ship { | ||
float: right; | float: right; | ||
| 第77行: | 第255行: | ||
min-width: 260px; | min-width: 260px; | ||
max-width: 320px; | max-width: 320px; | ||
background: | background: #1a3a5c; | ||
border: 1px solid | border: 1px solid #c9a84c; | ||
border-radius: 6px; | border-radius: 6px; | ||
font-size: 0.9rem; | font-size: 0.9rem; | ||
| 第87行: | 第265行: | ||
font-size: 1.1rem; | font-size: 1.1rem; | ||
font-weight: bold; | font-weight: bold; | ||
color: | color: #c9a84c; | ||
padding-bottom: 0.5rem; | padding-bottom: 0.5rem; | ||
border-bottom: 1px solid | border-bottom: 1px solid #2a4a6c; | ||
margin-bottom: 0.6rem; | margin-bottom: 0.6rem; | ||
} | } | ||
.infobox-ship table { | .infobox-ship table { width: 100%; border-collapse: collapse; } | ||
.infobox-ship td { padding: 3px 6px; border-bottom: 1px solid rgba(42,74,108,0.5); } | |||
.infobox-ship td:first-child { font-weight: bold; color: #c9a84c; white-space: nowrap; width: 45%; } | |||
} | |||
.infobox-ship td { | |||
} | |||
/* ── 物品图标网格(Template:ItemIconGrid)────────────────*/ | |||
/* ── | |||
.item-icon-grid { | .item-icon-grid { | ||
display: grid; | display: grid; | ||
| 第119行: | 第284行: | ||
.item-icon-grid .item-card { | .item-icon-grid .item-card { | ||
background: | background: #1a3a5c; | ||
border: 1px solid | border: 1px solid #2a4a6c; | ||
border-radius: 6px; | border-radius: 6px; | ||
padding: 0.6rem; | padding: 0.6rem; | ||
| 第127行: | 第292行: | ||
} | } | ||
.item-icon-grid .item-card img { | .item-icon-grid .item-card img { max-width: 64px; max-height: 64px; margin-bottom: 0.3rem; } | ||
} | |||
.wikitable.equipment-table | /* ── 装备数据表(Template:EquipmentTable)────────────────*/ | ||
.wikitable.equipment-table th { background: #1a3a5c; color: #c9a84c; border-color: #2a4a6c; } | |||
} | .wikitable.equipment-table td { border-color: #2a4a6c; } | ||
2026年4月14日 (二) 20:14的版本
/**
* MediaWiki:Common.css
* DOL ShipMaker Wiki - 大航海时代风格深色主题
*/
/* ── 首页 Hero 横幅 ───────────────────────────────────────
* 图片占位:hero-banner.jpg
* 建议尺寸:1920×500px,海洋/船只场景,横向构图
* 上传后替换 url() 里的路径
*/
.wiki-hero {
position: relative;
width: 100%;
height: 420px;
background:
linear-gradient(to bottom, rgba(10,22,40,0.3) 0%, rgba(10,22,40,0.85) 100%),
url('/images/hero-banner.jpg') center center / cover no-repeat;
/* 无图时显示深海渐变占位 */
background-color: #0a1628;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin: -1rem -1rem 2rem -1rem;
}
.wiki-hero-logo {
width: 80px;
height: 80px;
margin-bottom: 1rem;
/* 占位:logo.png,建议 200×200px,透明背景 PNG */
background: rgba(201,168,76,0.2);
border-radius: 50%;
border: 2px solid #c9a84c;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
}
.wiki-hero-title {
font-size: 2.2rem;
font-weight: bold;
color: #c9a84c;
text-shadow: 0 2px 8px rgba(0,0,0,0.8);
margin-bottom: 0.5rem;
letter-spacing: 2px;
}
.wiki-hero-subtitle {
font-size: 1rem;
color: #b0c4d8;
text-shadow: 0 1px 4px rgba(0,0,0,0.8);
margin-bottom: 1.5rem;
}
.wiki-hero-search {
display: flex;
gap: 0.5rem;
}
.wiki-hero-search a {
background: #c9a84c;
color: #0a1628;
padding: 0.6rem 1.8rem;
border-radius: 24px;
font-weight: bold;
text-decoration: none;
font-size: 1rem;
transition: background 0.2s;
}
.wiki-hero-search a:hover {
background: #e0c070;
color: #0a1628;
}
/* ── 分类图片卡片导航 ─────────────────────────────────────
* 每张卡片图片:建议 320×120px,横向构图
* 图片命名和位置见下方各卡片注释
*/
.wiki-nav-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0.6rem;
margin: 0 0 2rem 0;
}
@media (max-width: 768px) {
.wiki-nav-grid { grid-template-columns: repeat(2, 1fr); }
.wiki-hero { height: 300px; }
.wiki-hero-title { font-size: 1.5rem; }
}
.wiki-nav-card {
position: relative;
height: 90px;
border-radius: 6px;
overflow: hidden;
border: 1px solid #2a4a6c;
transition: transform 0.2s, box-shadow 0.2s;
cursor: pointer;
}
.wiki-nav-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(74,158,255,0.3);
border-color: #c9a84c;
}
.wiki-nav-card a {
display: flex;
align-items: flex-end;
width: 100%;
height: 100%;
text-decoration: none;
padding: 0.5rem 0.7rem;
background: linear-gradient(to top, rgba(10,22,40,0.9) 40%, rgba(10,22,40,0.2) 100%);
color: #e8eaf0;
font-weight: bold;
font-size: 0.95rem;
}
.wiki-nav-card a.new,
.wiki-nav-card a.new:visited {
color: #e8eaf0;
}
/* 各卡片背景图占位(无图时显示渐变色块)
* card-ships: 图片 nav-ships.jpg 320×120px 船只场景
* card-equipment: 图片 nav-equipment.jpg 320×120px 装备/配件特写
* card-guide: 图片 nav-guide.jpg 320×120px 航海地图/罗盘
* card-community: 图片 nav-community.jpg 320×120px 港口/人群场景
*/
.wiki-nav-card.card-ships { background-color: #1a3a5c; background-image: url('/images/nav-ships.jpg'); background-size: cover; background-position: center; }
.wiki-nav-card.card-equipment { background-color: #1a2a4c; background-image: url('/images/nav-equipment.jpg'); background-size: cover; background-position: center; }
.wiki-nav-card.card-guide { background-color: #0f2a3c; background-image: url('/images/nav-guide.jpg'); background-size: cover; background-position: center; }
.wiki-nav-card.card-community { background-color: #1a1a3c; background-image: url('/images/nav-community.jpg'); background-size: cover; background-position: center; }
/* ── 精选内容区 ───────────────────────────────────────────*/
.wiki-featured {
margin-bottom: 2rem;
}
.wiki-featured-title {
font-size: 1rem;
color: #7a9ab8;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 1rem;
padding-bottom: 0.4rem;
border-bottom: 1px solid #2a4a6c;
}
.wiki-featured-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 0.8rem;
}
@media (max-width: 768px) {
.wiki-featured-grid { grid-template-columns: 1fr; }
}
.wiki-featured-card {
position: relative;
border-radius: 8px;
overflow: hidden;
border: 1px solid #2a4a6c;
background: #111e30;
min-height: 200px;
}
/* 精选主卡片图片:featured-main.jpg,建议 640×240px */
.wiki-featured-card.featured-main {
background-image: url('/images/featured-main.jpg');
background-size: cover;
background-position: center;
min-height: 240px;
}
.wiki-featured-card-body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 1rem;
background: linear-gradient(to top, rgba(10,22,40,0.95) 60%, transparent 100%);
}
.wiki-featured-card-tag {
display: inline-block;
background: #c9a84c;
color: #0a1628;
font-size: 0.7rem;
font-weight: bold;
padding: 2px 8px;
border-radius: 3px;
margin-bottom: 0.4rem;
text-transform: uppercase;
}
.wiki-featured-card-title {
font-size: 1.2rem;
font-weight: bold;
color: #e8eaf0;
margin-bottom: 0.3rem;
}
.wiki-featured-card-desc {
font-size: 0.85rem;
color: #b0c4d8;
line-height: 1.4;
}
.wiki-featured-card a,
.wiki-featured-card a.new {
color: inherit;
text-decoration: none;
}
/* ── 快速导航链接 ─────────────────────────────────────────*/
.wiki-quicklinks {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 2rem;
}
.wiki-quicklinks a,
.wiki-quicklinks a.new {
background: #1a3a5c;
border: 1px solid #2a4a6c;
color: #b0c4d8;
padding: 0.3rem 0.9rem;
border-radius: 16px;
font-size: 0.85rem;
text-decoration: none;
transition: background 0.2s, border-color 0.2s;
}
.wiki-quicklinks a:hover {
background: #2a4a6c;
border-color: #c9a84c;
color: #c9a84c;
}
/* ── 船只信息卡(Template:ShipInfobox)────────────────────*/
.infobox-ship {
float: right;
clear: right;
margin: 0 0 1rem 1.5rem;
padding: 0.8rem;
min-width: 260px;
max-width: 320px;
background: #1a3a5c;
border: 1px solid #c9a84c;
border-radius: 6px;
font-size: 0.9rem;
}
.infobox-ship .infobox-title {
text-align: center;
font-size: 1.1rem;
font-weight: bold;
color: #c9a84c;
padding-bottom: 0.5rem;
border-bottom: 1px solid #2a4a6c;
margin-bottom: 0.6rem;
}
.infobox-ship table { width: 100%; border-collapse: collapse; }
.infobox-ship td { padding: 3px 6px; border-bottom: 1px solid rgba(42,74,108,0.5); }
.infobox-ship td:first-child { font-weight: bold; color: #c9a84c; white-space: nowrap; width: 45%; }
/* ── 物品图标网格(Template:ItemIconGrid)────────────────*/
.item-icon-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 0.8rem;
margin: 1rem 0;
}
.item-icon-grid .item-card {
background: #1a3a5c;
border: 1px solid #2a4a6c;
border-radius: 6px;
padding: 0.6rem;
text-align: center;
font-size: 0.8rem;
}
.item-icon-grid .item-card img { max-width: 64px; max-height: 64px; margin-bottom: 0.3rem; }
/* ── 装备数据表(Template:EquipmentTable)────────────────*/
.wikitable.equipment-table th { background: #1a3a5c; color: #c9a84c; border-color: #2a4a6c; }
.wikitable.equipment-table td { border-color: #2a4a6c; }