MediaWiki:Common.css：修订间差异 - 诺布百科

（未显示同一用户的14个中间版本）

第1行：

/* —— Noblecraft ~~格式面板美化 ——~~ */

/* ============================================ */

/* Noblecraft Wiki · Common.css */

/* ============================================ */

/* —— Noblecraft 格式面板美化（编辑器下拉菜单）—— */

.wikiEditor-ui-toolbar .booklet .index div {

border-radius: 4px 4px 0 0;

第8行：

第12行：

color: #fff !important;

}

~~/* 面板里的按钮:做成圆角小标签,带间距和悬停 */~~

.wikiEditor-ui-toolbar .booklet .pages .page-characters span {

display: inline-block;

第26行：

第29行：

border-color: #0f4c5c;

}

~~/* 颜色按钮各自带色 */~~

.wikiEditor-ui-toolbar .booklet .pages span.nc-红 { color:#c0392b; border-color:#e8b5ad; }

.wikiEditor-ui-toolbar .booklet .pages span.nc-绿 { color:#27866b; border-color:#a9d6c8; }

第33行：

第35行：

.wikiEditor-ui-toolbar .booklet .pages span.nc-高亮 { color:#b8860b; border-color:#e8d9a0; }

/* ===== 首页 · ~~精修简约卡片~~ ===== */

/* —— 全站页面背景 —— */

.nc-cards { display:flex; flex-wrap:wrap; gap:~~20px~~; align-items:stretch; }

body {

background:

radial-gradient(circle at 18% 15%, #ffffff 0%, transparent 45%),

radial-gradient(circle at 85% 12%, #f0f1f4 0%, transparent 45%),

radial-gradient(circle at 75% 92%, #eceef1 0%, transparent 48%),

linear-gradient(150deg,#f5f6f8,#eaecf0) !important;

background-attachment:fixed !important;

}

/* ============================================ */

/* 首页 · 素玻璃（白 + 灰） */

/* ============================================ */

.nc-stage {

margin:14px 0 0;

padding:0;

background:transparent;

}

.nc-cards { display:flex; flex-wrap:wrap; gap:18px; align-items:stretch; position:relative; z-index:1; }

.nc-card {

flex:1; min-width:215px; background:~~#fff~~;

flex:1; min-width:215px;

~~border~~:~~1px solid #ebe6dc~~; ~~border~~-~~radius~~:~~12px~~; ~~overflow~~:~~hidden~~;

background:rgba(255,255,255,.55);

box-shadow:0 ~~2px 4px~~ rgba(60,50,30,.04), 0 ~~8px 24px~~ -14px rgba(60,50,30,.18);

backdrop-filter:blur(22px) saturate(140%);

transition:transform .~~18s ease~~, box-shadow .~~18s ease~~;

-webkit-backdrop-filter:blur(22px) saturate(140%);

border:1px solid rgba(255,255,255,.7);

box-shadow:

inset 0 1px 0 rgba(255,255,255,.8),

0 10px 30px -14px rgba(60,65,80,.40);

transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s;

display:flex; flex-direction:column;

}

.nc-card:hover { transform:translateY(-4px); box-shadow:0 ~~4px 8px~~ rgba(60,50,30,.06), 0 16px ~~32px -14px~~ rgba(60,50,30,.26); }

.nc-card:hover {

transform:translateY(-4px);

box-shadow:

inset 0 1px 0 rgba(255,255,255,.9),

0 18px 40px -16px rgba(60,65,80,.50);

}

.nc-card-head {

color:#~~fff~~; font-weight:600; font-size:1.06em; padding:~~14px~~ 18px;

color:#33373d; font-weight:600; font-size:1.06em; padding:15px 18px;

letter-spacing:.5px~~; position:relative~~;

letter-spacing:.5px;

~~box~~-~~shadow~~:~~inset 0 -~~1px 0 rgba(~~255~~,~~255~~,~~255~~,.25);

border-bottom:1px solid rgba(120,125,135,.2);

}

~~.nc-card-head::after {~~

~~content:""; position:absolute; left:0; right:0; bottom:0; height:3px;~~

.nc-card ul { list-style:none !important; margin:0 !important; padding:7px 0 !important; }

~~background:rgba(0,0,0,.12);~~

}

.nc-card ul { list-style:none !important; margin:0 !important; padding:~~6px~~ 0 !important; }

.nc-card li { margin:0 !important; }

~~.nc-card li + li a { border-top:1px solid #f3f0ea; }~~

.nc-card li a {

display:block; padding:9px 18px; color:#~~3d3a34~~; text-decoration:none;

display:block; padding:9px 18px; color:#3a3d42; text-decoration:none;

~~border-left:3px solid transparent;~~ transition:all .~~14s~~ ease; font-size:.97em;

transition:all .15s ease; font-size:.97em;

}

.nc-card li a:hover { background:~~#faf8f3~~; padding-left:24px; }

.nc-card li a:hover { background:rgba(120,130,150,.14); padding-left:24px; }

/* ~~各分类主题色:~~标题条 ~~+ 悬停竖条同色 */~~

~~.nc-c-lobby .nc-card-head, .nc-card.t-lobby .nc-card-head { background~~:~~#7a6a3e; }~~

/* 标题条:统一的素灰玻璃，靠左侧一道细色条区分分类 */

~~.nc-c-play { } /* 占位~~ */

.nc-card-head { background:rgba(255,255,255,.4); border-left:4px solid #9aa0a8; }

~~.nc-c-lobby { }~~

.nc-card-head.nc-c-lobby { border-left-color:#8a7642; }

.nc-card-head~~.nc-c-lobby~~ { background:~~#7a6a3e; }~~

.nc-card-head.nc-c-play { border-left-color:#4a6a90; }

.~~nc-card-head.nc-c-play { background:#345a8a~~; }

.nc-card-head.nc-c-comm { border-left-color:#6e4a82; }

~~.nc~~-~~card-head.nc-c-comm { background~~:#~~6a4a7a~~; }

.nc-card-head.nc-c-apply { border-left-color:#9a5048; }

.nc-card-head~~.nc-c-apply { background:#8a4a44; }~~

~~/* 悬停竖条颜色跟随卡片(用 has 选择器关联) */~~

~~.nc-card:has(~~.nc-c-lobby~~) li a:hover~~ { border-left-color:#~~7a6a3e~~; }

.nc-card~~:has(~~.nc-c-play) ~~li a:hover~~ { border-left-color:#~~345a8a~~; }

.nc-card~~:has(~~.nc-c-comm) ~~li a:hover~~ { border-left-color:#~~6a4a7a~~; }

.nc-card~~:has(~~.nc-c-apply~~) li a:hover~~ { border-left-color:#~~8a4a44~~; }

@@ 第1行： / 第1行： @@
-/* —— Noblecraft 格式面板美化 —— */
+/* ============================================ */
+/*  Noblecraft Wiki · Common.css                */
+/* ============================================ */
+/* —— Noblecraft 格式面板美化（编辑器下拉菜单）—— */
 .wikiEditor-ui-toolbar .booklet .index div {
 	border-radius: 4px 4px 0 0;
@@ 第8行： / 第12行： @@
 	color: #fff !important;
 }
-/* 面板里的按钮:做成圆角小标签,带间距和悬停 */
 .wikiEditor-ui-toolbar .booklet .pages .page-characters span {
 	display: inline-block;
@@ 第26行： / 第29行： @@
 	border-color: #0f4c5c;
 }
-/* 颜色按钮各自带色 */
 .wikiEditor-ui-toolbar .booklet .pages span.nc-红   { color:#c0392b; border-color:#e8b5ad; }
 .wikiEditor-ui-toolbar .booklet .pages span.nc-绿   { color:#27866b; border-color:#a9d6c8; }
@@ 第33行： / 第35行： @@
 .wikiEditor-ui-toolbar .booklet .pages span.nc-高亮 { color:#b8860b; border-color:#e8d9a0; }
-/* ===== 首页 · 精修简约卡片 ===== */
+/* —— 全站页面背景 —— */
-.nc-cards { display:flex; flex-wrap:wrap; gap:20px; align-items:stretch; }
+body {
+	background:
+		radial-gradient(circle at 18% 15%, #ffffff 0%, transparent 45%),
+		radial-gradient(circle at 85% 12%, #f0f1f4 0%, transparent 45%),
+		radial-gradient(circle at 75% 92%, #eceef1 0%, transparent 48%),
+		linear-gradient(150deg,#f5f6f8,#eaecf0) !important;
+	background-attachment:fixed !important;
+}
+/* ============================================ */
+/*  首页 · 素玻璃（白 + 灰）                     */
+/* ============================================ */
+.nc-stage {
+	margin:14px 0 0;
+	padding:0;
+	background:transparent;
+}
+.nc-cards { display:flex; flex-wrap:wrap; gap:18px; align-items:stretch; position:relative; z-index:1; }
 .nc-card {
-	flex:1; min-width:215px; background:#fff;
+	flex:1; min-width:215px;
-	border:1px solid #ebe6dc; border-radius:12px; overflow:hidden;
+	background:rgba(255,255,255,.55);
-	box-shadow:0 2px 4px rgba(60,50,30,.04), 0 8px 24px -14px rgba(60,50,30,.18);
+	backdrop-filter:blur(22px) saturate(140%);
-	transition:transform .18s ease, box-shadow .18s ease;
+	-webkit-backdrop-filter:blur(22px) saturate(140%);
+	border:1px solid rgba(255,255,255,.7);
+	box-shadow:
+		inset 0 1px 0 rgba(255,255,255,.8),
+10px 30px -14px rgba(60,65,80,.40);
+	transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s;
 	display:flex; flex-direction:column;
 }
-.nc-card:hover { transform:translateY(-4px); box-shadow:0 4px 8px rgba(60,50,30,.06), 0 16px 32px -14px rgba(60,50,30,.26); }
+.nc-card:hover {
+	transform:translateY(-4px);
+	box-shadow:
+		inset 0 1px 0 rgba(255,255,255,.9),
+18px 40px -16px rgba(60,65,80,.50);
+}
 .nc-card-head {
-	color:#fff; font-weight:600; font-size:1.06em; padding:14px 18px;
+	color:#33373d; font-weight:600; font-size:1.06em; padding:15px 18px;
-	letter-spacing:.5px; position:relative;
+	letter-spacing:.5px;
-	box-shadow:inset 0 -1px 0 rgba(255,255,255,.25);
+	border-bottom:1px solid rgba(120,125,135,.2);
 }
-.nc-card-head::after {
-	content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
+.nc-card ul { list-style:none !important; margin:0 !important; padding:7px 0 !important; }
-	background:rgba(0,0,0,.12);
-}
-.nc-card ul { list-style:none !important; margin:0 !important; padding:6px 0 !important; }
 .nc-card li { margin:0 !important; }
-.nc-card li + li a { border-top:1px solid #f3f0ea; }
 .nc-card li a {
-	display:block; padding:9px 18px; color:#3d3a34; text-decoration:none;
+	display:block; padding:9px 18px; color:#3a3d42; text-decoration:none;
-	border-left:3px solid transparent; transition:all .14s ease; font-size:.97em;
+	transition:all .15s ease; font-size:.97em;
 }
-.nc-card li a:hover { background:#faf8f3; padding-left:24px; }
+.nc-card li a:hover { background:rgba(120,130,150,.14); padding-left:24px; }
-/* 各分类主题色:标题条 + 悬停竖条同色 */
-.nc-c-lobby .nc-card-head, .nc-card.t-lobby .nc-card-head { background:#7a6a3e; }
+/* 标题条:统一的素灰玻璃，靠左侧一道细色条区分分类 */
-.nc-c-play  { } /* 占位 */
+.nc-card-head { background:rgba(255,255,255,.4); border-left:4px solid #9aa0a8; }
-.nc-c-lobby { }
+.nc-card-head.nc-c-lobby { border-left-color:#8a7642; }
-.nc-card-head.nc-c-lobby { background:#7a6a3e; }
+.nc-card-head.nc-c-play  { border-left-color:#4a6a90; }
-.nc-card-head.nc-c-play  { background:#345a8a; }
+.nc-card-head.nc-c-comm  { border-left-color:#6e4a82; }
-.nc-card-head.nc-c-comm  { background:#6a4a7a; }
+.nc-card-head.nc-c-apply { border-left-color:#9a5048; }
-.nc-card-head.nc-c-apply { background:#8a4a44; }
-/* 悬停竖条颜色跟随卡片(用 has 选择器关联) */
-.nc-card:has(.nc-c-lobby) li a:hover { border-left-color:#7a6a3e; }
-.nc-card:has(.nc-c-play)  li a:hover { border-left-color:#345a8a; }
-.nc-card:has(.nc-c-comm)  li a:hover { border-left-color:#6a4a7a; }
-.nc-card:has(.nc-c-apply) li a:hover { border-left-color:#8a4a44; }