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

第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; }

/* 首页 · 直角玻璃风 */

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

/* 首页背景（玻璃需要背景才透得出效果）*/

.nc-stage {

background:

radial-gradient(circle at 15% 20%, rgba(120,160,200,.18), transparent 45%),

radial-gradient(circle at 85% 15%, rgba(200,150,170,.16), transparent 45%),

radial-gradient(circle at 50% 92%, rgba(150,180,150,.15), transparent 50%),

linear-gradient(160deg,#f0eee9,#e9e6df);

margin:-12px -16px 0;

padding:24px 16px 30px;

}

.nc-cards {

display:flex;

flex-wrap:wrap;

gap:18px;

align-items:stretch;

}

.nc-card {

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

flex:1;

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

min-width:215px;

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

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

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

backdrop-filter:blur(20px) saturate(160%);

display:flex; flex-direction:column;

-webkit-backdrop-filter:blur(20px) saturate(160%);

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

box-shadow:

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

0 8px 24px -12px rgba(40,50,70,.30);

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,.8),

0 16px 36px -14px rgba(40,50,70,.40);

}

.nc-card-head {

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

color:#fff;

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

font-weight:600;

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

font-size:1.05em;

padding:15px 18px;

letter-spacing:.4px;

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

}

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

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

.nc-card ul {

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

list-style:none !important;

margin:0 !important;

padding:7px 0 !important;

}

~~.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;

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

padding:9px 18px;

color:#2c2a26;

text-decoration:none;

transition:all .16s ease;

font-size:.97em;

}

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

.nc-card li a:hover {

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

background:rgba(120,140,180,.16);

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

padding-left:24px;

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

}

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

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

/* 四个分类标题条颜色（半透明彩色玻璃）*/

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

.nc-card-head.nc-c-lobby { background:linear-gradient(120deg,rgba(140,120,70,.92),rgba(168,148,90,.92)); }

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

.nc-card-head.nc-c-play { background:linear-gradient(120deg,rgba(60,100,150,.92),rgba(80,130,180,.92)); }

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

.nc-card-head.nc-c-comm { background:linear-gradient(120deg,rgba(120,80,140,.92),rgba(150,100,170,.92)); }

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

.nc-card-head.nc-c-apply { background:linear-gradient(120deg,rgba(160,80,75,.92),rgba(190,105,95,.92)); }

~~.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; }
+/*  首页 · 直角玻璃风                            */
+/* ============================================ */
+/* 首页背景（玻璃需要背景才透得出效果）*/
+.nc-stage {
+	background:
+		radial-gradient(circle at 15% 20%, rgba(120,160,200,.18), transparent 45%),
+		radial-gradient(circle at 85% 15%, rgba(200,150,170,.16), transparent 45%),
+		radial-gradient(circle at 50% 92%, rgba(150,180,150,.15), transparent 50%),
+		linear-gradient(160deg,#f0eee9,#e9e6df);
+	margin:-12px -16px 0;
+	padding:24px 16px 30px;
+}
+.nc-cards {
+	display:flex;
+	flex-wrap:wrap;
+	gap:18px;
+	align-items:stretch;
+}
 .nc-card {
-	flex:1; min-width:215px; background:#fff;
+	flex:1;
-	border:1px solid #ebe6dc; border-radius:0px; overflow:hidden;
+	min-width:215px;
-	box-shadow:0 2px 4px rgba(60,50,30,.04), 0 8px 24px -14px rgba(60,50,30,.18);
+	background:rgba(255,255,255,.55);
-	transition:transform .18s ease, box-shadow .18s ease;
+	backdrop-filter:blur(20px) saturate(160%);
-	display:flex; flex-direction:column;
+	-webkit-backdrop-filter:blur(20px) saturate(160%);
+	border:1px solid rgba(255,255,255,.65);
+	box-shadow:
+		inset 0 1px 0 rgba(255,255,255,.7),
+8px 24px -12px rgba(40,50,70,.30);
+	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,.8),
+16px 36px -14px rgba(40,50,70,.40);
+}
 .nc-card-head {
-	color:#fff; font-weight:600; font-size:1.06em; padding:14px 18px;
+	color:#fff;
-	letter-spacing:.5px; position:relative;
+	font-weight:600;
-	box-shadow:inset 0 -1px 0 rgba(255,255,255,.25);
+	font-size:1.05em;
+	padding:15px 18px;
+	letter-spacing:.4px;
+	box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
 }
-.nc-card-head::after {
-	content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
+.nc-card ul {
-	background:rgba(0,0,0,.12);
+	list-style:none !important;
+	margin:0 !important;
+	padding:7px 0 !important;
 }
-.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;
-	border-left:3px solid transparent; transition:all .14s ease; font-size:.97em;
+	padding:9px 18px;
+	color:#2c2a26;
+	text-decoration:none;
+	transition:all .16s ease;
+	font-size:.97em;
 }
-.nc-card li a:hover { background:#faf8f3; padding-left:24px; }
+.nc-card li a:hover {
-/* 各分类主题色:标题条 + 悬停竖条同色 */
+	background:rgba(120,140,180,.16);
-.nc-c-lobby .nc-card-head, .nc-card.t-lobby .nc-card-head { background:#7a6a3e; }
+	padding-left:24px;
-.nc-c-play  { } /* 占位 */
+}
-.nc-c-lobby { }
-.nc-card-head.nc-c-lobby { background:#7a6a3e; }
+/* 四个分类标题条颜色（半透明彩色玻璃）*/
-.nc-card-head.nc-c-play  { background:#345a8a; }
+.nc-card-head.nc-c-lobby { background:linear-gradient(120deg,rgba(140,120,70,.92),rgba(168,148,90,.92)); }
-.nc-card-head.nc-c-comm  { background:#6a4a7a; }
+.nc-card-head.nc-c-play  { background:linear-gradient(120deg,rgba(60,100,150,.92),rgba(80,130,180,.92)); }
-.nc-card-head.nc-c-apply { background:#8a4a44; }
+.nc-card-head.nc-c-comm  { background:linear-gradient(120deg,rgba(120,80,140,.92),rgba(150,100,170,.92)); }
-/* 悬停竖条颜色跟随卡片(用 has 选择器关联) */
+.nc-card-head.nc-c-apply { background:linear-gradient(120deg,rgba(160,80,75,.92),rgba(190,105,95,.92)); }
-.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; }