MediaWiki:Common.css：修订间差异

2026年6月16日 (二) 08:35的版本

/* ============================================ */
/*  Noblecraft Wiki · Common.css                */
/* ============================================ */

/* —— Noblecraft 格式面板美化（编辑器下拉菜单）—— */
.wikiEditor-ui-toolbar .booklet .index div {
	border-radius: 4px 4px 0 0;
	font-weight: bold;
}
.wikiEditor-ui-toolbar .booklet .index .current {
	background: #0f4c5c !important;
	color: #fff !important;
}
.wikiEditor-ui-toolbar .booklet .pages .page-characters span {
	display: inline-block;
	margin: 4px;
	padding: 4px 12px !important;
	border: 1px solid #c8c2b4;
	border-radius: 4px;
	background: #faf7f2;
	cursor: pointer;
	font-size: 13px;
	transition: all .15s;
	width: auto !important;
}
.wikiEditor-ui-toolbar .booklet .pages .page-characters span:hover {
	background: #0f4c5c;
	color: #fff;
	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; }
.wikiEditor-ui-toolbar .booklet .pages span.nc-蓝   { color:#2c6fb3; border-color:#aecbe8; }
.wikiEditor-ui-toolbar .booklet .pages span.nc-橙   { color:#d35400; border-color:#f0c2a0; }
.wikiEditor-ui-toolbar .booklet .pages span.nc-高亮 { color:#b8860b; border-color:#e8d9a0; }


.wikiEditor-ui-toolbar .group-format .tool[rel="nccolorpicker"] {
	width:auto !important; padding:0 8px !important; text-indent:0 !important;
	background-image:none !important; font-size:16px;
}
.nc-colorpop { position:absolute; z-index:1000; background:#fff; border:1px solid #c8c2b4;
	border-radius:8px; box-shadow:0 10px 30px -8px rgba(40,40,40,.35); padding:10px; }
.nc-colorpop-grid { display:grid; grid-template-columns:repeat(8,22px); gap:6px; margin-bottom:8px; }
.nc-swatch { width:22px; height:22px; border:1px solid rgba(0,0,0,.15); border-radius:4px; cursor:pointer; padding:0; }
.nc-swatch:hover { transform:scale(1.12); }
.nc-colorpop-row { display:flex; align-items:center; gap:6px; font-size:13px; }
.nc-colorpop-row input[type="color"] { width:34px; height:26px; padding:0; border:1px solid #c8c2b4; border-radius:4px; cursor:pointer; }
.nc-colorpop-ok { margin-left:auto; padding:3px 12px; border:1px solid #1a6b7d; background:#1a6b7d; color:#fff; border-radius:4px; cursor:pointer; }


/* —— 全站页面背景 —— */
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:rgba(255,255,255,.55);
	backdrop-filter:blur(22px) saturate(140%);
	-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:
		inset 0 1px 0 rgba(255,255,255,.9),
		0 18px 40px -16px rgba(60,65,80,.50);
}



.nc-card ul { list-style:none !important; margin:0 !important; padding:7px 0 !important; }
.nc-card li { margin:0 !important; }
.nc-card li a {
	display:block;
	padding:9px 18px;
	color:#3a3d42;
	text-decoration:none;
	transition:background .15s ease, padding-left .15s ease, color .15s ease;
	font-size:.97em;
	border-radius:0;
}

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

/* 标题条：多色斜向渐变 + 悬停流动 */
.nc-card-head {
	color:#fff; font-weight:700; font-size:1.06em; padding:15px 18px;
	letter-spacing:.5px;
	border:none; border-radius:0;
	background-size:220% 220% !important;
	background-position:0% 50%;
	transition:background-position .8s ease, filter .4s ease;
}
.nc-card-head.nc-c-lobby { background-image:linear-gradient(135deg,#f0b94a,#e89038,#d9772e) !important; }
.nc-card-head.nc-c-play  { background-image:linear-gradient(135deg,#4a6fd4,#5ec5d4,#6a4ed4) !important; }
.nc-card-head.nc-c-comm  { background-image:linear-gradient(135deg,#7d4ed4,#c44ec4,#4a6fd4) !important; }
.nc-card-head.nc-c-apply { background-image:linear-gradient(135deg,#d44a5e,#e0723a,#c44e8a) !important; }

.nc-card:hover .nc-card-head {
	background-position:100% 50% !important;
	filter:brightness(1.12) saturate(1.15);
}



/* ===== CommentStreams 评论区美化 ===== */
/* 标题：弱化成小号次要文字（压住可能的 h 标签样式） */
.cs-comment-title,
.cs-comment-title * {
	font-size: 0.92em !important;
	font-weight: 600 !important;
	color: #666 !important;
	margin: 0 0 2px 0 !important;
	line-height: 1.4 !important;
}

/* 头部：去掉背景，标题作者贴紧 */
.cs-comment-header {
	background: transparent !important;
	padding: 0 !important;
}

/* 正文：主体，正常黑字 */
.cs-comment-body {
	font-size: 1em !important;
	color: #202122 !important;
	margin: 4px 0 8px 0 !important;
	padding: 0 !important;
	line-height: 1.65 !important;
}

/* 整条评论：浅灰圆角框 */
.cs-comment {
	background: #fafbfc !important;
	border: 1px solid #e3e6e8 !important;
	border-radius: 6px !important;
	padding: 10px 14px !important;
	margin: 8px 0 !important;
}

/* 作者与时间：小灰字 */
.cs-comment-details,
.cs-comment-author,
.cs-comment-author-anonymous {
	font-size: 0.82em !important;
	color: #888 !important;
}

/* 回复（子评论）：缩进 + 左侧竖线表示层级 */
.cs-reply-comment {
	margin-left: 28px !important;
	border-left: 3px solid #d0d7de !important;
	background: #ffffff !important;
}

/* 首页：诺布娘柔和展示，克制版 */
.nc-mascot {
	text-align: center;
	margin: 0 auto 10px;
	padding: 4px 0 0;
}

.nc-mascot figure,
.nc-mascot .mw-halign-center {
	margin-left: auto !important;
	margin-right: auto !important;
}

.nc-mascot .mw-file-description {
	display: inline-block;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.nc-mascot img,
.nc-mascot .mw-file-element {
	width: min(520px, 82vw) !important;
	height: auto !important;
	filter: drop-shadow(0 16px 22px rgba(45,52,68,.18));
}


 /* 视频外链卡 */
.nc-video-card {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	max-width: 640px;
	margin: 12px 0 18px !important;
	padding: 14px 16px !important;
	background: rgba(255,255,255,.62);
	border: 1px solid rgba(210,216,222,.9);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 14px 32px -26px rgba(45,52,68,.55);
}

.nc-video-icon {
	flex: 0 0 42px !important;
	width: 42px !important;
	height: 42px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #0f4c5c;
	color: #fff;
	font-size: 1.2em;
	font-weight: 800;
}

.nc-video-body {
	flex: 1 1 auto !important;
	min-width: 0;
}

.nc-video-title {
	color: #24282f;
	font-size: 1.05em;
	font-weight: 800;
	line-height: 1.45;
}

.nc-video-link {
	margin-top: 5px;
	font-size: .94em;
}

.nc-video-platform {
	margin-top: 4px;
	color: #7a828d;
	font-size: .86em;
	font-weight: 650;
}

@media (max-width: 560px) {
	.nc-video-card {
		align-items: flex-start !important;
	}
}

.nc-video-cover {
	flex: 0 0 180px !important;
	width: 180px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #e8ecef;
}

.nc-video-cover img,
.nc-video-cover .mw-file-element {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

 /* 图片集 */
/* Noblecraft Portfolio Gallery V2 */
.nc-portfolio-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 18px;
	margin: 14px 0 32px;
}

.nc-art-card {
	position: relative;
	background: rgba(255,255,255,.54);
	border: 1px solid rgba(218,224,230,.72);
	box-shadow: 0 16px 34px -30px rgba(45,52,68,.5);
	overflow: hidden;
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.nc-art-card:hover {
	transform: translateY(-2px);
	border-color: rgba(190,200,210,.92);
	box-shadow: 0 22px 44px -32px rgba(45,52,68,.72);
}

.nc-art-image {
	height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px;
	background: rgba(255,255,255,.34);
}

.nc-art-image img,
.nc-art-image .mw-file-element {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain;
}

.nc-art-caption {
	padding: 12px 12px 14px;
	text-align: center;
	background: rgba(246,248,251,.62);
	color: #263039;
	font-weight: 800;
	line-height: 1.45;
}

.nc-art-caption span {
	display: inline-block;
	margin-top: 3px;
	color: #7a828d;
	font-size: .88em;
	font-weight: 600;
}

/* Official character art: taller, illustration-first cards. */
.nc-character-grid {
	grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
}

.nc-character-grid .nc-art-image {
	height: 330px;
	padding: 16px;
	background:
		linear-gradient(180deg, rgba(255,255,255,.56), rgba(246,248,251,.42));
}

/* Logo assets: shorter, cleaner, material-display cards. */
.nc-logo-grid {
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.nc-logo-grid .nc-art-image {
	height: 190px;
	padding: 20px;
	background:
		linear-gradient(135deg, rgba(255,255,255,.62), rgba(238,242,246,.55));
}

.nc-logo-grid .nc-art-caption {
	background: rgba(240,244,248,.70);
}

/* Player creations: slightly softer, community-gallery feel. */
.nc-fanart-grid {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.nc-fanart-grid .nc-art-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #d89038, #4c8fbd, #8d62b8);
	opacity: .45;}

.nc-fanart-grid .nc-art-image {
	height: 300px;
	background: rgba(255,255,255,.42);
}

.nc-logo-mosaic {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 18px;
	margin: 14px 0 34px;
}

.nc-logo-card {
	background: rgba(255,255,255,.54);
	border: 1px solid rgba(218,224,230,.72);
	box-shadow: 0 16px 34px -30px rgba(45,52,68,.5);
	overflow: hidden;
}

.nc-logo-image {
	height: 190px;
	padding: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(255,255,255,.62), rgba(238,242,246,.48));
	box-sizing: border-box;
	overflow: hidden;
}

.nc-logo-dark {
	background: #202124;
}

.nc-logo-small .nc-logo-image {
	height: 240px;
}

.nc-logo-image .mw-file-description,
.nc-logo-image a.image {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	max-width: 100% !important;
	max-height: 100% !important;
}

.nc-logo-image img,
.nc-logo-image .mw-file-element {
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
}

.nc-logo-mosaic .nc-art-caption {
	padding: 12px 12px 14px;
	text-align: center;
	background: rgba(246,248,251,.68);
	color: #263039;
	font-weight: 800;
	line-height: 1.45;
}

.nc-logo-mosaic .nc-art-caption span {
	display: inline-block;
	margin-top: 3px;
	color: #7a828d;
	font-size: .88em;
	font-weight: 600;
}

/* Portfolio visual polish */
.nc-art-card {
	border-color: rgba(220,226,232,.55);
	box-shadow: 0 18px 40px -34px rgba(45,52,68,.45);
}

.nc-art-card:hover {
	transform: translateY(-1px);
	box-shadow: 0 20px 42px -34px rgba(45,52,68,.58);
}

.nc-art-image {
	background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(246,248,251,.42));
}

.nc-art-caption {
	background: rgba(248,250,252,.48);
	font-weight: 760;
}

.nc-art-caption span {
	color: #8a929c;
	font-weight: 560;
}

.nc-logo-mosaic .nc-art-caption {
	padding: 10px 12px 12px;
}

.nc-fanart-grid .nc-art-card::before {
	opacity: .24;
}

.nc-fanart-grid .nc-art-image {
	height: 290px;
}
/* Portfolio style: white-background friendly section colors */

/* 基础卡片：清爽、轻阴影 */
.nc-art-card,
.nc-logo-card {
	background: rgba(255,255,255,.78);
	border: 1px solid rgba(190,201,213,.56);
	box-shadow: 0 16px 38px -34px rgba(28,43,58,.62);
	position: relative;
	overflow: hidden;
}

.nc-art-card:hover,
.nc-logo-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 24px 52px -40px rgba(28,43,58,.76);
}

/* 图片区：接近纯白，避免白底图片突兀 */
.nc-art-image,
.nc-logo-image,
.nc-character-grid .nc-art-image,
.nc-fanart-grid .nc-art-image {
	background:
		linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,252,254,.92)) !important;
	box-shadow: inset 0 -1px 0 rgba(218,225,232,.55);
}

/* 夜间 LOGO 保留深色展示底 */
.nc-logo-dark {
	background: #202124 !important;
}

/* 说明区：轻微分区感 */
.nc-art-caption,
.nc-logo-mosaic .nc-art-caption {
	background: rgba(246,249,252,.84);
	border-top: 1px solid rgba(218,225,232,.72);
	color: #23313d;
}

.nc-art-caption span,
.nc-logo-mosaic .nc-art-caption span {
	color: #75818d;
	font-weight: 620;
}

/* 官方设定图：冰蓝，只保留在边框和底线 */
.nc-character-grid .nc-art-card {
	border-color: rgba(112,173,196,.42);
}

.nc-character-grid .nc-art-card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, #0f7c8c, #72c7d4);
	opacity: .58;
}

/* LOGO 区：石墨灰 / 金色 */
.nc-logo-card {
	border-color: rgba(165,154,135,.42);
}

.nc-logo-card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, #343a40, #c59b47);
	opacity: .52;
}

/* 玩家创作：暖橙 / 紫粉 */
.nc-fanart-grid .nc-art-card {
	border-color: rgba(203,156,190,.40);
}

.nc-fanart-grid .nc-art-card::before {
	opacity: 0;
}

.nc-fanart-grid .nc-art-card::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, #e08a3e, #c45fa0, #7d6bd6);
	opacity: .58;
}

/* Homepage cards: Noblecraft blue-white soft wiki style */
body.page-首页 .nc-card {
  background: rgba(255,255,255,.84) !important;
  border: 1px solid rgba(74,105,170,.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 14px 34px -22px rgba(35,55,105,.26) !important;
  backdrop-filter: blur(10px) saturate(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(1.08);
}

body.page-首页 .nc-card:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 20px 44px -24px rgba(35,55,105,.34) !important;
}

/* 关键：覆盖原本的四色渐变标题条 */
body.page-首页 .nc-card-head,
body.page-首页 .nc-card-head.nc-c-lobby,
body.page-首页 .nc-card-head.nc-c-play,
body.page-首页 .nc-card-head.nc-c-comm,
body.page-首页 .nc-card-head.nc-c-apply {
  color: #263f78 !important;
  background-image: linear-gradient(
    180deg,
    rgba(248,251,255,.92),
    rgba(232,239,250,.86)
  ) !important;
  border-bottom: 1px solid rgba(74,105,170,.18);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.8);
}

body.page-首页 .nc-card:hover .nc-card-head {
  background-position: 0 50% !important;
  filter: none !important;
}

body.page-首页 .nc-card li a {
  color: #343842 !important;
}

body.page-首页 .nc-card li a:hover {
  background: rgba(74,105,170,.10) !important;
  color: #1e3264 !important;
}