MediaWiki:Vector.css:修訂間差異

出自災厄繁中 Wiki
跳至導覽 跳至搜尋
Dazhi233​(留言 | 貢獻)
從專案原稿更新
Dazhi233​(留言 | 貢獻)
從專案原稿更新
 
(未顯示同一使用者於中間所作的 1次修訂)
第1行: 第1行:
/* 災厄繁中 Wiki:舊版 Vector 的整站深色外觀(仿 wiki.gg 版型,背景與 Logo 為本站自製)
/* 災厄繁中 Wiki:舊版 Vector 外觀(仿 wiki.gg 版型)
   Logo:images/cz/logo-banner.png,微軟正黑體+翻譯 MOD 圖示配色(米色 #f5ebd2、藍 #285abe、白字藍框)。 */
   配色取自翻譯 MOD 圖示:米色 #f5ebd2、藍 #285abe、白;Logo 為 images/cz/logo-banner.png(微軟正黑體)。 */


/* ---------- 底色與背景光暈 ---------- */
:root {
html, body { background-color: #0b0709; }
--cz-page: #f5ebd2;      /* 米色底 */
--cz-paper: #fffdf8;    /* 面板 */
--cz-blue: #285abe;      /* 主色:框線、標題列 */
--cz-blue-dark: #1b3f8a;
--cz-blue-soft: #dfe7f7;
--cz-line-soft: #c7d3ec;
--cz-text: #1f2a40;
--cz-text-muted: #5c6782;
}
 
/* ---------- 底色 ---------- */
html, body { background-color: var(--cz-page); }
body {
body {
color: #e6dfe8;
color: var(--cz-text);
background:
background:
radial-gradient(60% 420px at 50% 0%, rgba(214, 52, 24, .55) 0%, rgba(120, 20, 12, .25) 45%, transparent 75%),
radial-gradient(55% 380px at 50% 0%, rgba(40, 90, 190, .16) 0%, transparent 75%),
radial-gradient(35% 300px at 15% 10%, rgba(255, 120, 40, .18) 0%, transparent 70%),
repeating-linear-gradient(45deg, rgba(40, 90, 190, .035) 0 2px, transparent 2px 14px),
radial-gradient(35% 300px at 85% 12%, rgba(160, 30, 60, .22) 0%, transparent 70%),
var(--cz-page);
linear-gradient(180deg, #1a0a0b 0%, #0b0709 520px);
background-attachment: fixed;
background-attachment: fixed;
}
}
第16行: 第26行:
#mw-head-base { height: 190px; margin-top: -190px; }
#mw-head-base { height: 190px; margin-top: -190px; }


/* ---------- 頂端 Logo 橫幅(置中) ---------- */
/* ---------- 頂端 Logo 橫幅(置中) ----------
/* #p-logo 在 #mw-panel 裡;panel 從頁面左緣 0 開始,所以用 50vw 置中於整頁 */
  #p-logo 在 #mw-panel 裡;panel 從頁面左緣 0 開始,所以用 50vw 置中於整頁 */
#p-logo {
#p-logo {
position: absolute; top: 14px; left: 50vw; transform: translateX(-50%);
/* 高度 128px、底部在 140px,跟 150px 開始的分頁籤(頁面/討論)留 10px 空隙 */
width: min(600px, 70vw); height: 150px; margin: 0; z-index: 2;
position: absolute; top: 12px; left: 50vw; transform: translateX(-50%);
width: min(600px, 70vw); height: 128px; margin: 0; z-index: 2;
}
}
#p-logo a.mw-wiki-logo {
#p-logo a.mw-wiki-logo {
第32行: 第43行:
/* ---------- 內容面板 ---------- */
/* ---------- 內容面板 ---------- */
.mw-body, #content {
.mw-body, #content {
background: rgba(22, 15, 20, .94);
background: var(--cz-paper);
color: #e6dfe8;
color: var(--cz-text);
border: 1px solid #6b2a1f;
border: 2px solid var(--cz-blue);
box-shadow: 0 0 24px rgba(0, 0, 0, .6);
border-radius: 0 10px 10px 10px;
box-shadow: 0 2px 10px rgba(27, 63, 138, .12);
}
}
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6,
.mw-body h1, .mw-body h2, .mw-body .firstHeading { color: var(--cz-blue-dark); border-color: var(--cz-line-soft); }
.mw-body .firstHeading { color: #f4ead7; border-color: #4a2a2a; }
.mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6 { color: var(--cz-blue-dark); }
#siteSub, #contentSub, #contentSub2, .mw-body .mw-indicators { color: #b9aec4; }
#siteSub, #contentSub, #contentSub2 { color: var(--cz-text-muted); }


a, a:visited { color: #7db7ff; }
a { color: var(--cz-blue); }
a:visited { color: #b49cff; }
a:visited { color: #5a3fa8; }
a.new, a.new:visited { color: #ff6d5e; }
a.new, a.new:visited { color: #c0392b; }
a.external, a.external:visited { color: #8fd0ff; }
a.external { color: #1f6fb2; }
.mw-body a:hover { color: #ffd27a; }
.mw-body a:hover { color: var(--cz-blue-dark); }


/* ---------- 左側選單(一格一格的方框) ---------- */
/* ---------- 左側選單(一格一格的方框) ---------- */
#mw-panel .vector-menu-portal {
#mw-panel .vector-menu-portal {
background: rgba(22, 15, 20, .94); border: 1px solid #6b2a1f;
background: var(--cz-paper); border: 2px solid var(--cz-blue); border-radius: 8px;
margin: 0 0 10px 8px; padding: 6px 8px 8px;
margin: 0 0 10px 8px; padding: 0 0 6px; overflow: hidden;
}
}
#mw-panel .vector-menu-portal .vector-menu-heading {
#mw-panel .vector-menu-portal .vector-menu-heading {
color: #f4ead7; font-weight: 700; font-size: .82em; background: none;
display: block; background: var(--cz-blue); color: #fff; font-weight: 700; font-size: .85em;
margin: 0 0 4px; padding: 0; border-bottom: 1px solid #4a2a2a;
margin: 0 0 4px; padding: 4px 8px; border: 0;
}
}
#mw-panel .vector-menu-portal .vector-menu-content { margin-left: 0; }
#mw-panel .vector-menu-portal .vector-menu-content { margin: 0 8px; }
#mw-panel .vector-menu-portal .vector-menu-content li { padding: .2em 0; }
#mw-panel .vector-menu-portal .vector-menu-content li { padding: .2em 0; }
#mw-panel .vector-menu-portal .vector-menu-content li a { color: #7db7ff; }
#mw-panel .vector-menu-portal .vector-menu-content li a { color: var(--cz-blue); }
#p-navigation .vector-menu-heading { display: block; }


/* ---------- 上方頁籤 ---------- */
/* ---------- 上方頁籤 ---------- */
第65行: 第76行:
.vector-menu-tabs-legacy .selected { background-image: none; }
.vector-menu-tabs-legacy .selected { background-image: none; }
.vector-menu-tabs li {
.vector-menu-tabs li {
background: rgba(30, 20, 26, .95); border: 1px solid #6b2a1f; border-bottom: 0;
background: var(--cz-blue-soft); border: 2px solid var(--cz-blue); border-bottom: 0;
margin-right: 2px;
border-radius: 8px 8px 0 0; margin-right: 3px;
}
}
.vector-menu-tabs li a { color: #7db7ff; }
.vector-menu-tabs li a { color: var(--cz-blue); }
.vector-menu-tabs .selected { background: rgba(22, 15, 20, .94); }
.vector-menu-tabs .selected { background: var(--cz-paper); }
.vector-menu-tabs .selected a, .vector-menu-tabs .selected a:visited { color: #f4ead7; }
.vector-menu-tabs .selected a, .vector-menu-tabs .selected a:visited { color: var(--cz-text); font-weight: 700; }
.vector-menu-tabs .new a, .vector-menu-tabs .new a:visited { color: #ff6d5e; }
.vector-menu-tabs .new a, .vector-menu-tabs .new a:visited { color: #c0392b; }
.vector-menu-dropdown .vector-menu-heading { color: #e6dfe8; }
.vector-menu-dropdown .vector-menu-content { background: var(--cz-paper); border-color: var(--cz-blue); }
.vector-menu-dropdown .vector-menu-content { background: #1e151b; border-color: #6b2a1f; }
#p-personal li a, #p-personal li a:visited { color: var(--cz-blue-dark); }
#p-personal li a, #p-personal li a:visited { color: #f4ead7; }


/* ---------- 搜尋框 ---------- */
/* ---------- 搜尋框 ---------- */
#simpleSearch, .vector-search-box-input {
#simpleSearch, .vector-search-box-input { background: #fff; color: var(--cz-text); border-color: var(--cz-blue); }
background: #120c10; color: #e6dfe8; border-color: #6b2a1f;
}
.vector-search-box-input::placeholder { color: #8f8398; }


/* ---------- 表格、程式碼、目錄 ---------- */
/* ---------- 表格、程式碼、目錄 ---------- */
.wikitable { background: #1b1218; color: #e6dfe8; border-color: #4a2a2a; }
.wikitable { background: #fff; color: var(--cz-text); border-color: var(--cz-line-soft); }
.wikitable > tr > th, .wikitable > * > tr > th { background: #2b1b24; color: #f4ead7; border-color: #4a2a2a; }
.wikitable > tr > th, .wikitable > * > tr > th { background: var(--cz-blue-soft); color: var(--cz-blue-dark); border-color: var(--cz-line-soft); }
.wikitable > tr > td, .wikitable > * > tr > td { border-color: #4a2a2a; }
.wikitable > tr > td, .wikitable > * > tr > td { border-color: var(--cz-line-soft); }
pre, code, .mw-code { background: #120c10; color: #f0e6f5; border-color: #4a2a2a; }
pre, code, .mw-code { background: #f6f8fd; color: var(--cz-text); border-color: var(--cz-line-soft); }
.toc, #toc { background: #1b1218; border-color: #4a2a2a; }
.toc, #toc { background: #f6f8fd; border-color: var(--cz-line-soft); }
.catlinks { background: #1b1218; border-color: #4a2a2a; }
.catlinks { background: #f6f8fd; border-color: var(--cz-line-soft); }
.mw-editsection, .mw-editsection a { color: #8f8398; }


/* ---------- 頁尾 ---------- */
/* ---------- 頁尾 ---------- */
#footer, #footer li { color: #b9aec4; }
#footer, #footer li { color: var(--cz-text-muted); }
#footer { background: transparent; }
 
/* ---------- 編輯畫面與一般表單 ---------- */
textarea, .mw-ui-input, .cdx-text-input__input {
background: #120c10; color: #e6dfe8; border-color: #4a2a2a;
}

2026年10月12日 (一) 10:04的最新修訂

/* 災厄繁中 Wiki:舊版 Vector 外觀(仿 wiki.gg 版型)
   配色取自翻譯 MOD 圖示:米色 #f5ebd2、藍 #285abe、白;Logo 為 images/cz/logo-banner.png(微軟正黑體)。 */

:root {
	--cz-page: #f5ebd2;      /* 米色底 */
	--cz-paper: #fffdf8;     /* 面板 */
	--cz-blue: #285abe;      /* 主色:框線、標題列 */
	--cz-blue-dark: #1b3f8a;
	--cz-blue-soft: #dfe7f7;
	--cz-line-soft: #c7d3ec;
	--cz-text: #1f2a40;
	--cz-text-muted: #5c6782;
}

/* ---------- 底色 ---------- */
html, body { background-color: var(--cz-page); }
body {
	color: var(--cz-text);
	background:
		radial-gradient(55% 380px at 50% 0%, rgba(40, 90, 190, .16) 0%, transparent 75%),
		repeating-linear-gradient(45deg, rgba(40, 90, 190, .035) 0 2px, transparent 2px 14px),
		var(--cz-page);
	background-attachment: fixed;
}
#mw-page-base { background: transparent; height: 190px; }
#mw-head-base { height: 190px; margin-top: -190px; }

/* ---------- 頂端 Logo 橫幅(置中) ----------
   #p-logo 在 #mw-panel 裡;panel 從頁面左緣 0 開始,所以用 50vw 置中於整頁 */
#p-logo {
	/* 高度 128px、底部在 140px,跟 150px 開始的分頁籤(頁面/討論)留 10px 空隙 */
	position: absolute; top: 12px; left: 50vw; transform: translateX(-50%);
	width: min(600px, 70vw); height: 128px; margin: 0; z-index: 2;
}
#p-logo a.mw-wiki-logo {
	width: 100%; height: 100%;
	background-size: contain; background-position: center; background-repeat: no-repeat;
}
#mw-panel { top: 0; padding-top: 190px; }
#left-navigation, #right-navigation { margin-top: 150px; }
#p-personal { top: 6px; z-index: 3; }

/* ---------- 內容面板 ---------- */
.mw-body, #content {
	background: var(--cz-paper);
	color: var(--cz-text);
	border: 2px solid var(--cz-blue);
	border-radius: 0 10px 10px 10px;
	box-shadow: 0 2px 10px rgba(27, 63, 138, .12);
}
.mw-body h1, .mw-body h2, .mw-body .firstHeading { color: var(--cz-blue-dark); border-color: var(--cz-line-soft); }
.mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6 { color: var(--cz-blue-dark); }
#siteSub, #contentSub, #contentSub2 { color: var(--cz-text-muted); }

a { color: var(--cz-blue); }
a:visited { color: #5a3fa8; }
a.new, a.new:visited { color: #c0392b; }
a.external { color: #1f6fb2; }
.mw-body a:hover { color: var(--cz-blue-dark); }

/* ---------- 左側選單(一格一格的方框) ---------- */
#mw-panel .vector-menu-portal {
	background: var(--cz-paper); border: 2px solid var(--cz-blue); border-radius: 8px;
	margin: 0 0 10px 8px; padding: 0 0 6px; overflow: hidden;
}
#mw-panel .vector-menu-portal .vector-menu-heading {
	display: block; background: var(--cz-blue); color: #fff; font-weight: 700; font-size: .85em;
	margin: 0 0 4px; padding: 4px 8px; border: 0;
}
#mw-panel .vector-menu-portal .vector-menu-content { margin: 0 8px; }
#mw-panel .vector-menu-portal .vector-menu-content li { padding: .2em 0; }
#mw-panel .vector-menu-portal .vector-menu-content li a { color: var(--cz-blue); }

/* ---------- 上方頁籤 ---------- */
.vector-menu-tabs-legacy, .vector-menu-tabs-legacy li,
.vector-menu-tabs-legacy .selected { background-image: none; }
.vector-menu-tabs li {
	background: var(--cz-blue-soft); border: 2px solid var(--cz-blue); border-bottom: 0;
	border-radius: 8px 8px 0 0; margin-right: 3px;
}
.vector-menu-tabs li a { color: var(--cz-blue); }
.vector-menu-tabs .selected { background: var(--cz-paper); }
.vector-menu-tabs .selected a, .vector-menu-tabs .selected a:visited { color: var(--cz-text); font-weight: 700; }
.vector-menu-tabs .new a, .vector-menu-tabs .new a:visited { color: #c0392b; }
.vector-menu-dropdown .vector-menu-content { background: var(--cz-paper); border-color: var(--cz-blue); }
#p-personal li a, #p-personal li a:visited { color: var(--cz-blue-dark); }

/* ---------- 搜尋框 ---------- */
#simpleSearch, .vector-search-box-input { background: #fff; color: var(--cz-text); border-color: var(--cz-blue); }

/* ---------- 表格、程式碼、目錄 ---------- */
.wikitable { background: #fff; color: var(--cz-text); border-color: var(--cz-line-soft); }
.wikitable > tr > th, .wikitable > * > tr > th { background: var(--cz-blue-soft); color: var(--cz-blue-dark); border-color: var(--cz-line-soft); }
.wikitable > tr > td, .wikitable > * > tr > td { border-color: var(--cz-line-soft); }
pre, code, .mw-code { background: #f6f8fd; color: var(--cz-text); border-color: var(--cz-line-soft); }
.toc, #toc { background: #f6f8fd; border-color: var(--cz-line-soft); }
.catlinks { background: #f6f8fd; border-color: var(--cz-line-soft); }

/* ---------- 頁尾 ---------- */
#footer, #footer li { color: var(--cz-text-muted); }