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

第36行：

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

/* 首页 · ~~直角白卡（干净版）~~ */

/* 首页 · 玻璃卡 + 鲜明渐变背景 */

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

.nc-stage {

~~background~~: ~~#f3f1ec~~;

position:relative;

margin:-12px -16px 0;

padding:~~26px~~ 18px ~~32px~~;

padding:30px 18px 36px;

background:

radial-gradient(circle at 12% 18%, #5b6fb5 0%, transparent 42%),

radial-gradient(circle at 88% 12%, #b56f8f 0%, transparent 40%),

radial-gradient(circle at 75% 88%, #5fa58a 0%, transparent 45%),

radial-gradient(circle at 30% 95%, #c79a5b 0%, transparent 42%),

linear-gradient(140deg,#3a4a7a,#6a4a72);

overflow:hidden;

}

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

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

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

box-shadow:0 1px ~~2px~~ rgba(60,50,30,.05), 0 ~~10px 28px~~ -~~16px~~ rgba(60,50,30,.30);

backdrop-filter:blur(24px) saturate(180%);

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

-webkit-backdrop-filter:blur(24px) saturate(180%);

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

box-shadow:

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

0 12px 32px -12px rgba(20,20,40,.45);

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

display:flex; flex-direction:column;

}

.nc-card:hover {

transform:translateY(-~~4px~~);

transform:translateY(-5px);

box-shadow:0 ~~2px 4px~~ rgba(60,50,30,.06), 0 ~~18px 36px~~ -~~16px~~ rgba(60,50,30,.40);

box-shadow:

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

0 20px 44px -14px rgba(20,20,40,.55);

}

.nc-card-head {

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

letter-spacing:.~~4px~~; ~~box~~-shadow:~~inset 0 -2px~~ 0 rgba(0,0,0,.12);

letter-spacing:.5px;

border-bottom:1px solid rgba(255,255,255,.25);

text-shadow:0 1px 4px rgba(0,0,0,.35);

}

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

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

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

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

.nc-card li a {

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

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

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

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

text-shadow:0 1px 3px rgba(0,0,0,.4);

}

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

.nc-card li a:hover { background:rgba(255,255,255,.18); padding-left:24px; }

/* ~~分类标题条（实色，沉稳）~~*/

.nc-card-head.nc-c-lobby { background:~~#8a7642~~; }

/* 分类标题条:半透明深色玻璃，透出背景色 */

.nc-card-head.nc-c-play { background:~~#3a5f8a~~; }

.nc-card-head.nc-c-lobby { background:rgba(120,95,45,.45); }

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

.nc-card-head.nc-c-play { background:rgba(45,80,130,.45); }

.nc-card-head.nc-c-apply { background:~~#9a5048; }~~

.nc-card-head.nc-c-comm { background:rgba(100,55,120,.45); }

~~/* 悬停竖条跟随卡片色 */~~

.nc-card-head.nc-c-apply { background:rgba(140,60,55,.45); }

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

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

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

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

@@ 第36行： / 第36行： @@
 /* ============================================ */
-/*  首页 · 直角白卡（干净版）                    */
+/*  首页 · 玻璃卡 + 鲜明渐变背景                 */
 /* ============================================ */
 .nc-stage {
-	background: #f3f1ec;
+	position:relative;
 	margin:-12px -16px 0;
-	padding:26px 18px 32px;
+	padding:30px 18px 36px;
+	background:
+		radial-gradient(circle at 12% 18%, #5b6fb5 0%, transparent 42%),
+		radial-gradient(circle at 88% 12%, #b56f8f 0%, transparent 40%),
+		radial-gradient(circle at 75% 88%, #5fa58a 0%, transparent 45%),
+		radial-gradient(circle at 30% 95%, #c79a5b 0%, transparent 42%),
+		linear-gradient(140deg,#3a4a7a,#6a4a72);
+	overflow:hidden;
 }
-.nc-cards { display:flex; flex-wrap:wrap; gap:20px; align-items:stretch; }
+.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 #e4ded2;
+	background:rgba(255,255,255,.18);
-	box-shadow:0 1px 2px rgba(60,50,30,.05), 0 10px 28px -16px rgba(60,50,30,.30);
+	backdrop-filter:blur(24px) saturate(180%);
-	transition:transform .18s ease, box-shadow .18s ease;
+	-webkit-backdrop-filter:blur(24px) saturate(180%);
+	border:1px solid rgba(255,255,255,.35);
+	box-shadow:
+		inset 0 1px 0 rgba(255,255,255,.45),
+12px 32px -12px rgba(20,20,40,.45);
+	transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s;
 	display:flex; flex-direction:column;
 }
 .nc-card:hover {
-	transform:translateY(-4px);
+	transform:translateY(-5px);
-	box-shadow:0 2px 4px rgba(60,50,30,.06), 0 18px 36px -16px rgba(60,50,30,.40);
+	box-shadow:
+		inset 0 1px 0 rgba(255,255,255,.6),
+20px 44px -14px rgba(20,20,40,.55);
 }
 .nc-card-head {
 	color:#fff; font-weight:600; font-size:1.06em; padding:15px 18px;
-	letter-spacing:.4px; box-shadow:inset 0 -2px 0 rgba(0,0,0,.12);
+	letter-spacing:.5px;
+	border-bottom:1px solid rgba(255,255,255,.25);
+	text-shadow:0 1px 4px rgba(0,0,0,.35);
 }
-.nc-card ul { list-style:none !important; margin:0 !important; padding:6px 0 !important; }
+.nc-card ul { list-style:none !important; margin:0 !important; padding:7px 0 !important; }
 .nc-card li { margin:0 !important; }
-.nc-card li + li a { border-top:1px solid #f4f1ea; }
 .nc-card li a {
-	display:block; padding:9px 18px; color:#3a3730; text-decoration:none;
+	display:block; padding:9px 18px; color:#fff; text-decoration:none;
-	border-left:3px solid transparent; transition:all .14s ease; font-size:.97em;
+	transition:all .15s ease; font-size:.97em;
+	text-shadow:0 1px 3px rgba(0,0,0,.4);
 }
-.nc-card li a:hover { background:#f7f4ee; padding-left:24px; }
+.nc-card li a:hover { background:rgba(255,255,255,.18); padding-left:24px; }
-/* 分类标题条（实色，沉稳）*/
-.nc-card-head.nc-c-lobby { background:#8a7642; }
+/* 分类标题条:半透明深色玻璃，透出背景色 */
-.nc-card-head.nc-c-play  { background:#3a5f8a; }
+.nc-card-head.nc-c-lobby { background:rgba(120,95,45,.45); }
-.nc-card-head.nc-c-comm  { background:#6e4a82; }
+.nc-card-head.nc-c-play  { background:rgba(45,80,130,.45); }
-.nc-card-head.nc-c-apply { background:#9a5048; }
+.nc-card-head.nc-c-comm  { background:rgba(100,55,120,.45); }
-/* 悬停竖条跟随卡片色 */
+.nc-card-head.nc-c-apply { background:rgba(140,60,55,.45); }
-.nc-card:has(.nc-c-lobby) li a:hover { border-left-color:#8a7642; }
-.nc-card:has(.nc-c-play)  li a:hover { border-left-color:#3a5f8a; }
-.nc-card:has(.nc-c-comm)  li a:hover { border-left-color:#6e4a82; }
-.nc-card:has(.nc-c-apply) li a:hover { border-left-color:#9a5048; }