MediaWiki:Common.css
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的变更的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Internet Explorer或Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5
- Opera：按 Ctrl-F5。
```css id="qf7x2m"
/* =========================================================
Griffin Wiki
MediaWiki:Common.css
Global Wiki Visual Foundation
---------------------------------------------------------
本文件用于全站通用样式。
Vector 2022 专属样式请放在 MediaWiki:Vector.css。
========================================================= */
/* =========================================================
01. GLOBAL VARIABLES
========================================================= */
:root {
/* Griffin Wiki 主色 */
--griffin-blue: #3366cc;
--griffin-blue-dark: #2956b8;
--griffin-indigo: #6f7cff;
--griffin-pink: #ff4fa3;
/* 基础颜色 */
--griffin-text: #202122;
--griffin-text-secondary: #54595d;
--griffin-background: #ffffff;
--griffin-surface: #f8f9fa;
--griffin-surface-light: #fbfbfb;
--griffin-border: #eaecf0;
--griffin-border-dark: #c8ccd1;
/* 阴影 */
--griffin-shadow-small:
0 2px 8px rgba(0, 0, 0, 0.04);
--griffin-shadow-medium:
0 6px 18px rgba(0, 0, 0, 0.08);
--griffin-shadow-large:
0 10px 28px rgba(0, 0, 0, 0.12);
/* 圆角 */
--griffin-radius-small: 6px;
--griffin-radius-medium: 10px;
--griffin-radius-large: 14px;
/* 动画 */
--griffin-transition-fast:
0.15s ease;
--griffin-transition:
0.2s ease;
--griffin-transition-slow:
0.3s ease;
}
/* =========================================================
02. GLOBAL BASE
========================================================= */
html {
background:
var(--griffin-background);
}
body {
color:
var(--griffin-text);
background:
var(--griffin-background);
}
/* =========================================================
03. TEXT SELECTION
========================================================= */
::selection {
background:
rgba(51, 102, 255, 0.18);
}
::-moz-selection {
background:
rgba(51, 102, 255, 0.18);
}
/* =========================================================
04. LINKS
========================================================= */
a {
transition:
color var(--griffin-transition-fast);
}
a:hover {
color:
var(--griffin-blue-dark);
}
/* =========================================================
05. GENERAL CARDS
========================================================= */
/*
可以给普通 Wiki 内容添加：
class="griffin-card"
*/
.griffin-card {
background:
var(--griffin-background);
border:
1px solid var(--griffin-border);
border-radius:
var(--griffin-radius-medium);
box-shadow:
var(--griffin-shadow-small);
padding:
18px 20px;
transition:
transform var(--griffin-transition),
box-shadow var(--griffin-transition),
border-color var(--griffin-transition);
}
.griffin-card:hover {
transform:
translateY(-2px);
border-color:
#d5daf0;
box-shadow:
var(--griffin-shadow-medium);
}
/* =========================================================
06. GENERAL SECTION
========================================================= */
.griffin-section {
margin:
20px 0;
padding:
18px 20px;
background:
var(--griffin-surface);
border:
1px solid var(--griffin-border);
border-radius:
var(--griffin-radius-medium);
}
/* =========================================================
07. COLOR ACCENTS
========================================================= */
.griffin-blue {
color:
var(--griffin-blue);
}
.griffin-pink {
color:
var(--griffin-pink);
}
.griffin-indigo {
color:
var(--griffin-indigo);
}
/* =========================================================
08. GRADIENT TITLE
========================================================= */
.griffin-gradient-text {
background:
linear-gradient(
90deg,
var(--griffin-blue),
var(--griffin-indigo),
var(--griffin-pink)
);
-webkit-background-clip:
text;
background-clip:
text;
color:
transparent;
}
/* =========================================================
09. TABLES
========================================================= */
.wikitable {
border:
1px solid var(--griffin-border-dark);
border-collapse:
separate;
border-spacing:
0;
border-radius:
var(--griffin-radius-small);
overflow:
hidden;
background:
#ffffff;
}
/* 表头 */
.wikitable > tr > th,
.wikitable > * > tr > th {
background:
var(--griffin-surface);
color:
var(--griffin-text);
border-color:
var(--griffin-border-dark);
font-weight:
600;
}
/* 单元格 */
.wikitable > tr > td,
.wikitable > * > tr > td {
border-color:
var(--griffin-border);
transition:
background-color var(--griffin-transition-fast);
}
/* Hover */
.wikitable > tr:hover > td,
.wikitable > * > tr:hover > td {
background:
rgba(51, 102, 255, 0.025);
}
/* =========================================================
10. INFOBOX GLOBAL POLISH
========================================================= */
.infobox {
border-radius:
var(--griffin-radius-small);
box-shadow:
var(--griffin-shadow-small);
transition:
transform var(--griffin-transition),
box-shadow var(--griffin-transition),
border-color var(--griffin-transition);
}
.infobox:hover {
box-shadow:
var(--griffin-shadow-medium);
}
/* =========================================================
11. NOTICE / MESSAGE BOXES
========================================================= */
.messagebox {
border-radius:
var(--griffin-radius-small);
box-shadow:
var(--griffin-shadow-small);
transition:
box-shadow var(--griffin-transition);
}
.messagebox:hover {
box-shadow:
var(--griffin-shadow-medium);
}
/* =========================================================
12. AMBOX
========================================================= */
.ambox {
border-radius:
var(--griffin-radius-small);
box-shadow:
var(--griffin-shadow-small);
transition:
box-shadow var(--griffin-transition);
}
.ambox:hover {
box-shadow:
var(--griffin-shadow-medium);
}
/* =========================================================
13. TOC
========================================================= */
.toc {
background:
var(--griffin-surface);
border:
1px solid var(--griffin-border);
border-radius:
var(--griffin-radius-small);
box-shadow:
var(--griffin-shadow-small);
transition:
box-shadow var(--griffin-transition),
border-color var(--griffin-transition);
}
.toc:hover {
border-color:
#d5daf0;
box-shadow:
var(--griffin-shadow-medium);
}
/* =========================================================
14. CODE BLOCKS
========================================================= */
pre,
.mw-code {
border:
1px solid var(--griffin-border);
border-radius:
var(--griffin-radius-small);
background:
#f8f9fa;
box-shadow:
var(--griffin-shadow-small);
transition:
border-color var(--griffin-transition);
}
pre:hover,
.mw-code:hover {
border-color:
#d5daf0;
}
/* =========================================================
15. INLINE CODE
========================================================= */
code {
padding:
2px 5px;
border-radius:
4px;
background:
#f8f9fa;
border:
1px solid #eaecf0;
}
/* =========================================================
16. THUMBNAILS
========================================================= */
.thumbinner {
background:
#f8f9fa;
border:
1px solid var(--griffin-border);
border-radius:
var(--griffin-radius-small);
box-shadow:
var(--griffin-shadow-small);
transition:
transform var(--griffin-transition),
box-shadow var(--griffin-transition);
}
.thumbinner:hover {
transform:
translateY(-2px);
box-shadow:
var(--griffin-shadow-medium);
}
/* =========================================================
17. IMAGE CAPTIONS
========================================================= */
.thumbcaption {
color:
var(--griffin-text-secondary);
line-height:
1.5;
}
/* =========================================================
18. GALLERY
========================================================= */
.gallerybox {
transition:
transform var(--griffin-transition),
box-shadow var(--griffin-transition);
}
.gallerybox:hover {
transform:
translateY(-2px);
box-shadow:
var(--griffin-shadow-small);
}
/* =========================================================
19. CATEGORY LINKS
========================================================= */
.catlinks {
background:
var(--griffin-surface);
border:
1px solid var(--griffin-border);
border-radius:
var(--griffin-radius-small);
padding:
8px 12px;
}
/* =========================================================
20. HORIZONTAL RULE
========================================================= */
hr {
border:
0;
border-top:
1px solid var(--griffin-border);
margin:
24px 0;
}
/* =========================================================
21. BLOCKQUOTES
========================================================= */
blockquote {
margin:
16px 0;
padding:
12px 18px;
border-left:
4px solid var(--griffin-blue);
background:
var(--griffin-surface);
border-radius:
0 var(--griffin-radius-small)
var(--griffin-radius-small) 0;
color:
var(--griffin-text-secondary);
}
/* =========================================================
22. SMALL UI LABEL
========================================================= */
.griffin-label {
display:
inline-block;
padding:
3px 9px;
border-radius:
999px;
background:
rgba(51, 102, 255, 0.08);
color:
var(--griffin-blue);
font-size:
0.85em;
font-weight:
600;
}
/* =========================================================
23. STATUS LABEL
========================================================= */
.griffin-status {
display:
inline-flex;
align-items:
center;
gap:
6px;
padding:
4px 9px;
border-radius:
999px;
background:
#f8f9fa;
border:
1px solid var(--griffin-border);
font-size:
0.85em;
}
.griffin-status::before {
content:
"";
width:
7px;
height:
7px;
border-radius:
50%;
background:
#36a269;
}
/* =========================================================
24. SPECIAL HIGHLIGHT BOX
========================================================= */
.griffin-highlight {
position:
relative;
padding:
18px 20px;
background:
linear-gradient(
135deg,
rgba(51, 102, 255, 0.055),
rgba(255, 79, 163, 0.035)
);
border:
1px solid rgba(51, 102, 255, 0.12);
border-radius:
var(--griffin-radius-medium);
overflow:
hidden;
}
/* Highlight 左侧装饰 */
.griffin-highlight::before {
content:
"";
position:
absolute;
left:
0;
top:
0;
bottom:
0;
width:
3px;
background:
linear-gradient(
180deg,
var(--griffin-blue),
var(--griffin-pink)
);
}
/* =========================================================
25. PAGE NOTICE
========================================================= */
.griffin-notice {
padding:
14px 18px;
margin:
15px 0;
background:
#f8f9fa;
border:
1px solid var(--griffin-border);
border-left:
4px solid var(--griffin-blue);
border-radius:
0 var(--griffin-radius-small)
var(--griffin-radius-small) 0;
}
/* =========================================================
26. SIMPLE FADE ANIMATION
========================================================= */
.griffin-fade {
animation:
griffinGlobalFade 0.4s ease-out;
}
@keyframes griffinGlobalFade {
from {
opacity:
0;
}
to {
opacity:
1;
}
}
/* =========================================================
27. SIMPLE FLOAT ANIMATION
========================================================= */
.griffin-float {
animation:
griffinFloat 4s ease-in-out infinite;
}
@keyframes griffinFloat {
0%,
100% {
transform:
translateY(0);
}
50% {
transform:
translateY(-3px);
}
}
/* =========================================================
28. SCROLLBAR
========================================================= */
/*
只在支持自定义 scrollbar 的浏览器中生效。
*/
::-webkit-scrollbar {
width:
9px;
height:
9px;
}
::-webkit-scrollbar-track {
background:
#f8f9fa;
}
::-webkit-scrollbar-thumb {
background:
#c8ccd1;
border-radius:
999px;
border:
2px solid #f8f9fa;
}
::-webkit-scrollbar-thumb:hover {
background:
#a2a9b1;
}
/* =========================================================
29. RESPONSIVE
========================================================= */
@media (max-width: 640px) {
.griffin-card,
.griffin-section {
padding:
14px 15px;
}
.wikitable {
font-size:
0.95em;
}
.griffin-highlight {
padding:
15px 16px;
}
}
/* =========================================================
30. REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration:
0.001ms !important;
animation-iteration-count:
1 !important;
transition-duration:
0.001ms !important;
}
}
/* =========================================================
END OF GRIFFIN WIKI COMMON.CSS
========================================================= */
```