Template:首页导航：修订间差异

@@ 第1行： / 第1行： @@
 <div id="mainpagenav" style="
-max-width:98%;
+  max-width: 100%;
-margin:16px auto;
+  margin: 16px auto;
-border:1px solid #e0e0e0;
+  border: 1px solid var(--border-color-base, #a2a9b1);
-border-radius:8px;
+  background-color: var(--color-surface-0, #ffffff);
-background:#ffffff;
+  color: var(--color-base, #202122);
-"><!-- 标题区域 -->
+  box-sizing: border-box;
+">
+  <!-- 标题区域 -->
+  <div style="
+    background-color: var(--color-primary, #36c);
+    color: #ffffff;
+    padding: 12px 16px;
+    font-weight: 700;
+    font-size: 1.1em;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    border-bottom: 1px solid var(--border-color-subtle, #004bb3);
+  ">
+<span style="margin-right: 8px;">&#x1F5FA;</span>精简导航
+</div>
+  <!-- 主内容区：使用 Flexbox 模拟网格 -->
+  <div style="
+    display: flex;
+    flex-wrap: wrap;
+    background-color: var(--color-surface-0, #ffffff);
+  ">
+    <!-- 栏目1：动物园 -->
+    <div style="
+      flex: 1 1 280px;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--border-color-subtle, #eaecf0);
+      border-right: 1px solid var(--border-color-subtle, #eaecf0);
+      border-left: 5px solid #4CAF50;
+      box-sizing: border-box;
+    ">
+      <div style="
+        font-weight: 700;
+        margin-bottom: 12px;
+        color: var(--color-base, #202122);
+        font-size: 1.05em;
+        padding-bottom: 6px;
+        border-bottom: 1px solid var(--border-color-subtle, #eee);
+      ">
+[[导航:泛ACG亚文化百科/动物园文化＆吉吉国文化|&#x267f; 动物园 & 吉吉国]]
+</div>
+<div style="line-height: 1.8; font-size: 0.95em;">
+        <div style="display:flex; align-items:center;">
+<span style="display:inline-block; width:8px; height:8px; background:#2196F3; margin-right:8px; flex-shrink:0;"></span>
+[[导航:泛ACG亚文化百科/动物园文化＆吉吉国文化/电棍otto|电棍otto]]
+        </div>
+        <div style="display:flex; align-items:center;">
+<span style="display:inline-block; width:8px; height:8px; background:#d32f2f; margin-right:8px; flex-shrink:0;"></span>
+[[导航:泛ACG亚文化百科/动物园文化＆吉吉国文化/山泥若|山泥若]]
+</div>
+<div style="display:flex; align-items:center;">
+<span style="display:inline-block; width:8px; height:8px; background:#e6ac23; margin-right:8px; flex-shrink:0;"></span>
+[[导航:泛ACG亚文化百科/动物园文化＆吉吉国文化/炫神|炫神]]
+</div>
+<div style="margin-top:6px; font-weight:600; font-size:0.9em; opacity:0.8;">
+[[导航:泛ACG亚文化百科/动物园文化＆吉吉国文化/重要人物＆重要团体|→ 更多动物园人物]]
+</div>
+</div>
+</div>
+    <!-- 栏目2：蕾忍宗 -->
+    <div style="
+      flex: 1 1 280px;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--border-color-subtle, #eaecf0);
+      border-right: 1px solid var(--border-color-subtle, #eaecf0);
+      border-left: 5px solid #757575;
+      box-sizing: border-box;
+    ">
+      <div style="
+        font-weight: 700;
+        margin-bottom: 12px;
+        color: var(--color-base, #202122);
+        font-size: 1.05em;
+        padding-bottom: 6px;
+        border-bottom: 1px solid var(--border-color-subtle, #eee);
+      ">
+[[导航:泛ACG亚文化百科/蕾忍宗|&#x1F977; 蕾忍宗]]
+      </div>
+      <div style="line-height: 1.8; font-size: 0.95em;">
+<div>&#x1F539; [[忍者]]</div>
+<div>&#x1F539; [[安奈师傅]]</div>
+<div>&#x1F539; [[叛忍999]]</div>
+        <div style="visibility:hidden;">.</div>
+      </div>
+    </div>
+    <!-- 栏目3：豌豆笑传 -->
+    <div style="
+      flex: 1 1 280px;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--border-color-subtle, #eaecf0);
+      border-left: 5px solid #ef6c00;
+      box-sizing: border-box;
+    ">
+      <div style="
+        font-weight: 700;
+        margin-bottom: 12px;
+        color: var(--color-base, #202122);
+        font-size: 1.05em;
+        padding-bottom: 6px;
+        border-bottom: 1px solid var(--border-color-subtle, #eee);
+      ">
+[[导航:泛ACG亚文化百科/豌豆笑传|&#x1F418; 豌豆笑传]]
+      </div>
+      <div style="line-height: 1.8; font-size: 0.95em;">
+<div>&#x1F539; [[袁伟江]]</div>
+<div>&#x1F539; [[栗瑞明]]</div>
+<div>&#x1F539; [[豌豆]]</div>
+<div>&#x1F539; [[大蓝象]] / [[踩踩背]]</div>
+      </div>
+    </div>
+  </div>
+  <!-- 底部区域 -->
 <div style="
-background-color:#3266cc;
+    padding: 12px;
-color:white;
+    background-color: var(--color-surface-1, #f8f9fa); /* 浅灰背景，深色模式下会变深灰 */
-padding:16px;
+    text-align: right;
-text-align:center;
+    border-top: 1px solid var(--border-color-base, #a2a9b1);
-border-radius:8px 8px 0 0;
+    display: flex;
-">&#x1F5FA;精简导航</div><!-- 主内容区 -->
+    align-items: center;
-<div style="
+    justify-content: flex-end;
-display:flex;
+    gap: 10px;
-flex-wrap:wrap;
+  ">
-border-bottom:1px solid #e0e0e0;
+<span style="font-size: 0.85em; color: var(--color-subtle, #54595d);">需要查找更多内容？</span>
-"><!-- 栏目1 -->
+{{CustomButton|泛ACG亚文化百科|查看完整导航 →|class=mw-ui-progressive}}
-<div style="
+  </div>
-flex:1 0 25%;
+</div>
-min-width:200px;
-padding:16px;
-border-right:1px solid #e0e0e0;
-border-bottom:1px solid #e0e0e0;
-box-sizing:border-box;
-"><div style="
-text-align:center;
-margin-bottom:12px;
-padding-bottom:8px;
-border-bottom:2px solid #4CAF50;
-color:#2E7D32;
-">[[导航:泛ACG亚文化百科/动物园文化＆吉吉国文化|'''&#x1F418;动物园文化＆吉吉国文化''']]</div><div>
-<div>[[导航:泛ACG亚文化百科/动物园文化＆吉吉国文化/电棍otto|{{color|blue|&#x1F539;电棍otto}}]]</div>
-<div>[[导航:泛ACG亚文化百科/动物园文化＆吉吉国文化/山泥若|{{color|darkred|&#x1F539;山泥若}}]]</div>
-<div>[[导航:泛ACG亚文化百科/动物园文化＆吉吉国文化/炫神|{{color|#e6ac23|&#x1F539;炫神}}]]</div>
-<div>[[导航:泛ACG亚文化百科/动物园文化＆吉吉国文化/重要人物＆重要团体|&#x1F538;动物园UP主]]</div>
-</div></div><!-- 栏目2 -->
-<div style="
-flex:1 0 25%;
-min-width:200px;
-padding:16px;
-border-right:1px solid #e0e0e0;
-border-bottom:1px solid #e0e0e0;
-box-sizing:border-box;
-"><div style="
-text-align:center;
-margin-bottom:12px;
-padding-bottom:8px;
-border-bottom:2px solid #5e5e5e;
-color:#424242;
-">[[导航:泛ACG亚文化百科/蕾忍宗|'''&#x1F977;蕾忍宗''']]</div><div>
-<div><!--[[LexBurner|{{color|silver|&#x1F539;LexBurner}}]]--></div>
-<div>[[忍者|{{color|#5e5e5e|&#x1F539;忍者}}]]</div>
-<div>[[安奈师傅|{{color|#5e5e5e|&#x1F539;安奈师傅}}]]</div>
-<div>[[叛忍999|{{color|#5e5e5e|&#x1F539;叛忍999}}]]</div>
-</div></div><!-- 栏目4 -->
-<div style="
-flex:1 0 25%;
-min-width:200px;
-padding:16px;
-border-bottom:1px solid #e0e0e0;
-box-sizing:border-box;
-"><div style="
-text-align:center;
-margin-bottom:12px;
-padding-bottom:8px;
-border-bottom:2px solid #ff9800;
-color:#ef6c00;
-">[[导航:泛ACG亚文化百科/豌豆笑传|'''&#x1F604;豌豆笑传''']]</div><div>
-<div>[[袁伟江|&#x1F539;袁伟江]]</div>
-<div>[[栗瑞明|&#x1F539;栗瑞明]]</div>
-<div>[[豌豆|&#x1F539;豌豆]]</div>
-<div>[[大蓝象|&#x1F539;大蓝象]]</div>
-<div>[[踩踩背|&#x1F539;踩踩背]]</div>
-</div></div></div><!-- 底部区域 -->
-<div style="
-padding:16px;
-text-align:center;
-">{{CustomButton|泛ACG亚文化百科|查看完整导航 →|class=mw-ui-progressive}}</div></div>
 [[分类:首页模板]]

棍牧典​（留言 | 贡献）

2025年12月5日 (五) 12:06的版本

棍牧典（留言 | 贡献）