MediaWiki:Common.css

来自Helldivers资料站
Lyx（讨论 | 贡献）2026年7月12日 (日) 17:06的版本
跳转到导航 跳转到搜索

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的变更的影响。

  • Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
  • Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
  • Internet Explorer或Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5
  • Opera：按 Ctrl-F5。
/* ===== 页面背景大图设置 ===== */
body {
    background-image: url("https://helldivers-zh.wiki/wiki/images/f/f9/%E8%B5%84%E6%96%99%E7%AB%99%E8%83%8C%E6%99%AF.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
    background-color: #2c3e50;
}

/* ===== 所有内容区域透明 ===== */
#content,
#footer {
    background-color: transparent;
}

/* ===== 头部（header）透明 ===== */
#mw-page-base {
    background-color: transparent !important;
    background-image: none !important;
}

#mw-head {
    background-color: transparent !important;
    background-image: none !important;
}

#mw-head-base {
    background-color: transparent !important;
    background-image: none !important;
}

/* ===== 主内容区白色半透明（毛玻璃效果） ===== */
.mw-body {
    background-color: rgba(255, 255, 255, 0.88) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important;
    margin: 10px 20px 10px 0 !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ===== 左侧导航面板 - 毛玻璃半透明效果 ===== */
#mw-panel {
    background-color: rgba(255, 255, 255, 0.75) !important;
    border-radius: 12px !important;
    margin: 10px 0 10px 10px !important;
    padding: 10px 5px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

#mw-panel .portal {
    background-color: transparent !important;
    border-radius: 8px;
    padding: 5px 0;
}

#mw-panel .portal .body {
    background-color: transparent !important;
}

#mw-panel .portal h3 {
    color: #1a1a2e;
    font-weight: 600;
    padding-left: 12px;
}

#mw-panel .portal .body ul li a {
    color: #2c3e50;
    border-radius: 6px;
    padding: 3px 12px;
    transition: all 0.2s ease;
}

#mw-panel .portal .body ul li a:hover {
    background-color: rgba(44, 62, 80, 0.15);
    color: #1a1a2e;
    text-decoration: none;
}

/* ===== Logo底衬 ===== */
#p-logo {
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    padding: 8px;
    margin: 0 0 10px 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ===== 个人工具菜单（右上角）透明 ===== */
#p-personal {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    padding: 5px 14px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

#p-personal li a {
    color: #1a1a2e;
    transition: color 0.2s ease;
}

#p-personal li a:hover {
    color: #e74c3c;
    text-decoration: none;
}

/* ===== 底部透明 ===== */
#footer {
    background-color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 12px;
    padding: 12px 20px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.05);
}

/* ============================================================
   编辑按钮（查看源代码、编辑、讨论等）风格美化
   ============================================================ */

/* 顶部标签栏（页面、讨论、编辑、查看源代码等） */
#p-views ul li a,
#p-cactions ul li a {
    background-color: rgba(255, 255, 255, 0.6) !important;
    border: none !important;
    border-radius: 8px 8px 0 0 !important;
    padding: 8px 16px !important;
    margin: 0 2px !important;
    color: #2c3e50 !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

#p-views ul li a:hover,
#p-cactions ul li a:hover {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #e74c3c !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 当前选中的标签页（高亮） */
#p-views ul li.selected a,
#p-cactions ul li.selected a {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #1a1a2e !important;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08) !important;
    font-weight: 600 !important;
}

/* 编辑按钮特殊样式（让编辑按钮更突出） */
#ca-edit a {
    background-color: rgba(231, 76, 60, 0.15) !important;
    border-radius: 8px 8px 0 0 !important;
    color: #c0392b !important;
    font-weight: 600 !important;
}

#ca-edit a:hover {
    background-color: rgba(231, 76, 60, 0.3) !important;
    color: #e74c3c !important;
}

/* 查看源代码按钮 */
#ca-viewsource a {
    background-color: rgba(52, 73, 94, 0.12) !important;
    color: #2c3e50 !important;
    font-weight: 500 !important;
}

#ca-viewsource a:hover {
    background-color: rgba(52, 73, 94, 0.25) !important;
}

/* ===== 搜索框美化 ===== */
#searchInput {
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    background-color: rgba(255, 255, 255, 0.7) !important;
    padding: 6px 16px !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: all 0.3s ease;
}

#searchInput:focus {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.2);
}

/* 搜索按钮 */
#searchButton {
    border-radius: 20px !important;
    background-color: rgba(231, 76, 60, 0.8) !important;
    border: none !important;
    color: white !important;
    padding: 6px 18px !important;
    transition: all 0.3s ease !important;
}

#searchButton:hover {
    background-color: #e74c3c !important;
    transform: scale(1.02);
}





/* 图标列 - 自适应宽度 */
.wikitable .icon-cell {
    width: 1%;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
}

/* 图标容器 - 固定大小并居中裁剪大图 */
.wikitable .icon-cell img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* ===== 战略配备 - 引用卡片样式 ===== */
.stratagem-card {
  flex: 1;
  border: 2px solid #ffd700;
  border-radius: 8px;
  padding: 16px 20px;
  /* 暖灰深色渐变 - 从深灰到暖黑 */
  background: linear-gradient(160deg, #2a2a2a, #1a1a1a, #121212);
  color: #fff;
  font-family: Arial, sans-serif;
}

.stratagem-badge {
  font-size: 18px;
  color: #ffd700;
  font-weight: bold;
  margin-bottom: -6px;	
}

.stratagem-title {
  font-size: 28px;
  font-weight: bold;
  margin-top: 8px;
}

.stratagem-desc {
  font-size: 14px;
  color: #aaa;
}

/* common.css */

.stratagem-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 18px;
}

.stratagem-table td {
  padding: 6px 8px;
  border: none;
  vertical-align: middle;
}

.stratagem-table tr {
  border-top: 1px solid #333;
}

.stratagem-table tr:first-child {
  border-top: none;
}

/* "数据"和"满级舰船模块"保持灰色 */
.label-main {
  color: #888;
}

/* "呼叫时间""使用次数""冷却时间"白色 */

/* 标签颜色条 */
.label-sub {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

.label-sub .color-bar {
    display: inline-block;
    width: 6px;
    height: 1em;
    background: #ffffff;
    flex-shrink: 0;
    margin-right: 4px;
    transform: translateY(-1px); /* 上移2px，如果还不够就继续加大数值 */
}

/* 数值列白色加粗 */
.stratagem-table td:nth-child(2),
.stratagem-table td:nth-child(4),
.stratagem-table td:nth-child(6) {
  color: #fff;
  font-weight: bold;
  text-align: right;
}





/* ===== 战略配备弹头属性表格样式 ===== */
.table-stratagem {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    border: 1px solid #ccc;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.table-stratagem .header-title {
    background-color: #f5f5f5;
    color: #222;
    font-size: 20px;
    font-weight: bold;
    padding: 12px 10px;
    border-bottom: 2px solid #ccc;
}

.table-stratagem .header-col {
    background-color: #e9e9e9;
    color: #222;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 10px 12px;
    border-bottom: 1px solid #ccc;
}

.table-stratagem .header-col-left {
    border-right: 1px solid #ccc;
}

.table-stratagem .cell-key {
    background-color: #f9f9f9;
    color: #222;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
}

.table-stratagem .cell-value {
    background-color: #ffffff;
    color: #222;
    font-size: 14px;
    text-align: center;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
}

.table-stratagem .cell-value .main-value {
    font-weight: bold;
}

.table-stratagem .cell-value .desc {
    color: #888;
    font-size: 12px;
    font-weight: 400;
}







/* ===== 伤害属性表格样式 ===== */
.table-damage {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    border: 1px solid #ccc;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.table-damage .header-title {
    background-color: #f5f5f5;
    color: #222;
    font-size: 20px;
    font-weight: bold;
    padding: 12px 10px;
    border-bottom: 2px solid #ccc;
}

.table-damage .header-col {
    background-color: #e9e9e9;
    color: #222;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 10px 12px;
    border-bottom: 1px solid #ccc;
}

.table-damage .header-col-left {
    border-right: 1px solid #ccc;
}

.table-damage .cell-key {
    background-color: #f9f9f9;
    color: #222;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
}

.table-damage .cell-value {
    background-color: #ffffff;
    color: #222;
    font-size: 14px;
    text-align: center;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
}

.table-damage .cell-value .main-value {
    font-weight: bold;
}

.table-damage .cell-value .desc {
    color: #888;
    font-size: 12px;
    font-weight: 400;
}

/* 为伤害数值添加颜色标识（可选） */
.table-damage .cell-value .main-value[data-type="damage"] { color: #d32f2f; }
.table-damage .cell-value .main-value[data-type="penetration"] { color: #1976d2; }






/* ===== 爆炸属性表格样式 ===== */
.table-explosion {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    border: 1px solid #ccc;
    font-family: 'Segoe UI', Arial, sans-serif;
}

.table-explosion .header-title {
    background-color: #f5f5f5;
    color: #222;
    font-size: 20px;
    font-weight: bold;
    padding: 12px 10px;
    border-bottom: 2px solid #ccc;
}

.table-explosion .header-col {
    background-color: #e9e9e9;
    color: #222;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    padding: 10px 12px;
    border-bottom: 1px solid #ccc;
}

.table-explosion .header-col-left {
    border-right: 1px solid #ccc;
}

.table-explosion .cell-key {
    background-color: #f9f9f9;
    color: #222;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
}

.table-explosion .cell-value {
    background-color: #ffffff;
    color: #222;
    font-size: 14px;
    text-align: center;
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
}

.table-explosion .cell-value .main-value {
    font-weight: bold;
}

.table-explosion .cell-value .desc {
    color: #888;
    font-size: 12px;
    font-weight: 400;
}

/* 为不同数值类型添加颜色标识（可选） */
.table-explosion .cell-value .main-value[data-type="radius"] { color: #1976d2; }
.table-explosion .cell-value .main-value[data-type="boolean"] { color: #2e7d32; }
.table-explosion .cell-value .main-value[data-type="id"] { color: #d32f2f; }






/* 舰船模块升级表格 */
.ship-module-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    background: linear-gradient(160deg, #2a2a2a, #1a1a1a, #121212);
    color: #fff;
    border: 2px solid #ffd700;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
}

.ship-module-table th,
.ship-module-table td {
    padding: 10px 12px;
    border: none;
    background: transparent;
}

.ship-module-table th {
    color: #ffd700;
    font-weight: bold;
    border-bottom: 2px solid #ffd700;
}

.ship-module-table td {
    border-bottom: 1px solid #444;
}

.ship-module-table tr:last-child td {
    border-bottom: none;
}

.ship-module-table .title-row {
    font-size: 22px;
    font-weight: bold;
    color: #ffd700;
    text-align: center;
    border-bottom: 2px solid #ffd700;
}

.ship-module-table .col-name {
    color: #fff;
    font-weight: bold;
}

.ship-module-table .col-effect {
    color: #ccc;
}

.ship-module-table .col-type {
    color: #ffd700;
}

.ship-module-table .col-center {
    text-align: center;
    color: #fff;
}

.ship-module-table .col-zero {
    text-align: center;
    color: #666;
}

.ship-module-table .col-upgrade {
    color: #4caf50;
    font-weight: bold;
}
蜀ICP备2026037366号-2
取自“http://helldivers-zh.wiki/wiki/index.php?title=MediaWiki:Common.css&oldid=679”