MediaWiki:Common.css：修订间差异

2026年7月16日 (四) 07:55的版本

/* ===== 游戏资讯 - 纯CSS Tab ===== */

/* 隐藏radio按钮 */
.gi-wrap input[type="radio"] {
  display: none;
}

/* Tab导航栏 */
.gi-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 0;
  flex-wrap: wrap;
}

/* 单个Tab标签 - 各自颜色 */
.gi-tab {
  padding: 10px 18px;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.05em;
  border-radius: 8px 8px 0 0;
  transition: all 0.3s ease;
  border-bottom: 4px solid transparent;
  user-select: none;
}

/* 五栏渐变色 */
.gi-tab-base { background: linear-gradient(135deg, #e3f2fd, #bbdefb); color: #0d47a1; }
.gi-tab-gear { background: linear-gradient(135deg, #fce4ec, #f8bbd9); color: #b71c1c; }
.gi-tab-skill { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); color: #1b5e20; }
.gi-tab-event { background: linear-gradient(135deg, #fff3e0, #ffe0b2); color: #bf360c; }
.gi-tab-other { background: linear-gradient(135deg, #e0f7fa, #b2ebf2); color: #006064; }

/* 未选中时半透明 */
.gi-tab {
  opacity: 0.6;
}

/* 选中时高亮 + 底部深色指示条 */
.gi-wrap input#gi-base:checked ~ .gi-tabs label[for="gi-base"],
.gi-wrap input#gi-gear:checked ~ .gi-tabs label[for="gi-gear"],
.gi-wrap input#gi-skill:checked ~ .gi-tabs label[for="gi-skill"],
.gi-wrap input#gi-event:checked ~ .gi-tabs label[for="gi-event"],
.gi-wrap input#gi-other:checked ~ .gi-tabs label[for="gi-other"] {
  opacity: 1;
  border-bottom: 4px solid #333;
}

/* 面板容器 */
.gi-panels {
  background: rgba(255, 255, 255, 0.85);
  border-radius: 0 0 8px 8px;
  padding: 16px 20px;
  min-height: 80px;
  line-height: 2;
  border: 1px solid #ddd;
  border-top: none;
}

/* 所有面板默认隐藏 */
.gi-panel {
  display: none;
}

/* 选中哪个radio就显示对应的面板 */
#gi-base:checked ~ .gi-panels #panel-base,
#gi-gear:checked ~ .gi-panels #panel-gear,
#gi-skill:checked ~ .gi-panels #panel-skill,
#gi-event:checked ~ .gi-panels #panel-event,
#gi-other:checked ~ .gi-panels #panel-other {
  display: block;
}

/* 面板内链接美化 */
.gi-panel a {
  display: inline-block;
  padding: 2px 6px;
  margin: 2px;
  border-radius: 4px;
  transition: background 0.2s;
  text-decoration: none;
}

.gi-panel a:hover {
  background: #e0e0e0;
}

/* 面板标题 */
.gi-panel p, .gi-panel b, .gi-panel strong {
  display: block;
  margin-bottom: 8px;
  font-size: 1.1em;
}
/* ===== 游戏资讯 Tab ===== */
.gi-wrap input[type="radio"] { display: none; }

.gi-tabs {
  display: flex; gap: 4px; margin-bottom: 0; flex-wrap: wrap; }

.gi-tab {
  padding: 10px 18px; cursor: pointer; font-weight: bold;
  font-size: 1.05em; border-radius: 8px 8px 0 0;
  transition: all 0.3s ease; opacity: 0.6;
  border-bottom: 4px solid transparent; user-select: none; }

.gi-tab-base { background: linear-gradient(135deg,#e3f2fd,#bbdefb); color: #0d47a1; }
.gi-tab-gear { background: linear-gradient(135deg,#fce4ec,#f8bbd9); color: #b71c1c; }
.gi-tab-skill { background: linear-gradient(135deg,#e8f5e9,#c8e6c9); color: #1b5e20; }
.gi-tab-event { background: linear-gradient(135deg,#fff3e0,#ffe0b2); color: #bf360c; }
.gi-tab-other { background: linear-gradient(135deg,#e0f7fa,#b2ebf2); color: #006064; }

#gi-base:checked ~ .gi-tabs label[for="gi-base"],
#gi-gear:checked ~ .gi-tabs label[for="gi-gear"],
#gi-skill:checked ~ .gi-tabs label[for="gi-skill"],
#gi-event:checked ~ .gi-tabs label[for="gi-event"],
#gi-other:checked ~ .gi-tabs label[for="gi-other"] {
  opacity: 1; border-bottom: 4px solid #333; }

.gi-panels {
  background: rgba(255,255,255,0.85);
  border-radius: 0 0 8px 8px; padding: 16px 20px;
  min-height: 80px; line-height: 2; }

.gi-panel { display: none; }

#gi-base:checked ~ .gi-panels #panel-base,
#gi-gear:checked ~ .gi-panels #panel-gear,
#gi-skill:checked ~ .gi-panels #panel-skill,
#gi-event:checked ~ .gi-panels #panel-event,
#gi-other:checked ~ .gi-panels #panel-other {
  display: block; }