MediaWiki:Common.css:修订间差异
MediaWiki界面页面
更多操作
ContentBot2(留言 | 贡献) QQ X5 flexbox gap 兼容:改用 margin 替代 gap 标签:已被回退 |
ContentBot2(留言 | 贡献) 移动优先:手机单列 block 布局,宽屏 Flexbox/Grid 双列,彻底兼容 X5 标签:已被回退 |
||
| 第45行: | 第45行: | ||
.robuddy-hero-title { font-size:1.8em; font-weight:700; background:linear-gradient(135deg,#2a4b8a,#00b4d8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } | .robuddy-hero-title { font-size:1.8em; font-weight:700; background:linear-gradient(135deg,#2a4b8a,#00b4d8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } | ||
.robuddy-hero-sub { color:#666; margin-top:0.5em; font-size:1.05em; } | .robuddy-hero-sub { color:#666; margin-top:0.5em; font-size:1.05em; } | ||
/* | /* 首页卡片 — 移动优先单列(兼容所有浏览器含 QQ X5) */ | ||
.robuddy-hero-title { color:#2a4b8a; } | .robuddy-hero-title { color:#2a4b8a; } | ||
/* | .robuddy-grid { display:block; margin:1.5em 0 2em; } | ||
.robuddy-card { display:block; box-sizing:border-box; margin-bottom:1.2em; } | |||
/* 宽屏(≥640px)→ 双列 Flexbox */ | |||
@media (min-width:640px) { | |||
.robuddy-grid { display:flex; flex-wrap:wrap; justify-content:space-between; } | |||
.robuddy-card { flex:0 0 calc(50% - 0.6em); margin-bottom:1.2em; } | |||
} | |||
/* Grid + 渐变文字增强(仅现代浏览器) */ | |||
@supports (display: grid) and (-webkit-background-clip: text) { | @supports (display: grid) and (-webkit-background-clip: text) { | ||
.robuddy-grid { display:grid; grid-template-columns: | @media (min-width:640px) { | ||
.robuddy-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.2em; } | |||
.robuddy-hero-title { background:linear-gradient(135deg,#2a4b8a,#00b4d8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text | .robuddy-card { flex:unset; margin-bottom:0; } | ||
} | |||
.robuddy-hero-title { color:transparent; background:linear-gradient(135deg,#2a4b8a,#00b4d8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } | |||
} | } | ||
.robuddy-card { position:relative; padding:1.8em 1.5em; border-radius:12px; border:1px solid #e0e4ea; background:#fff; transition:all 0.3s ease; overflow:hidden; text-decoration:none; color:inherit; display:block; } | .robuddy-card { position:relative; padding:1.8em 1.5em; border-radius:12px; border:1px solid #e0e4ea; background:#fff; transition:all 0.3s ease; overflow:hidden; text-decoration:none; color:inherit; display:block; } | ||
| 第69行: | 第76行: | ||
/* 深色-night */ | /* 深色-night */ | ||
html.skin-theme-clientpref-night .robuddy-hero-sub{color:#888} | html.skin-theme-clientpref-night .robuddy-hero-sub{color:#888} | ||
html.skin-theme-clientpref-night .robuddy-hero-title{color:#4a90d9} | |||
html.skin-theme-clientpref-night .robuddy-card{background:#1c2028;border-color:#2a3040} | html.skin-theme-clientpref-night .robuddy-card{background:#1c2028;border-color:#2a3040} | ||
html.skin-theme-clientpref-night .robuddy-card:hover{box-shadow:0 8px 30px rgba(0,180,216,0.15);border-color:#00b4d8} | html.skin-theme-clientpref-night .robuddy-card:hover{box-shadow:0 8px 30px rgba(0,180,216,0.15);border-color:#00b4d8} | ||
| 第75行: | 第83行: | ||
html.skin-theme-clientpref-night .robuddy-card-links a{color:#4a90d9} | html.skin-theme-clientpref-night .robuddy-card-links a{color:#4a90d9} | ||
html.skin-theme-clientpref-night .robuddy-notice{background:#182230;border-color:#2a3a50;color:#8ab4e0} | html.skin-theme-clientpref-night .robuddy-notice{background:#182230;border-color:#2a3a50;color:#8ab4e0} | ||
/* 深色-os */ | /* 深色-os */ | ||
@media(prefers-color-scheme:dark){html.skin-theme-clientpref-os .robuddy-hero-sub{color:#888}html.skin-theme-clientpref-os .robuddy-card{background:#1c2028;border-color:#2a3040}html.skin-theme-clientpref-os .robuddy-card:hover{box-shadow:0 8px 30px rgba(0,180,216,0.15);border-color:#00b4d8}html.skin-theme-clientpref-os .robuddy-card-title{color:#e0e4ea}html.skin-theme-clientpref-os .robuddy-card-desc{color:#888}html.skin-theme-clientpref-os .robuddy-card-links a{color:#4a90d9}html.skin-theme-clientpref-os .robuddy-notice{background:#182230;border-color:#2a3a50;color:#8ab4e0 | @media(prefers-color-scheme:dark){html.skin-theme-clientpref-os .robuddy-hero-sub{color:#888}html.skin-theme-clientpref-os .robuddy-hero-title{color:#4a90d9}html.skin-theme-clientpref-os .robuddy-card{background:#1c2028;border-color:#2a3040}html.skin-theme-clientpref-os .robuddy-card:hover{box-shadow:0 8px 30px rgba(0,180,216,0.15);border-color:#00b4d8}html.skin-theme-clientpref-os .robuddy-card-title{color:#e0e4ea}html.skin-theme-clientpref-os .robuddy-card-desc{color:#888}html.skin-theme-clientpref-os .robuddy-card-links a{color:#4a90d9}html.skin-theme-clientpref-os .robuddy-notice{background:#182230;border-color:#2a3a50;color:#8ab4e0}} | ||
2026年7月19日 (日) 20:19的版本
/* 隐藏页脚底部徽章和编辑提示,保留品牌链接 */
.citizen-footer__bottom { display:none; }
/* 浅色模式 */
.robuddy-infobox { float:right; margin-left:1em; margin-bottom:1em; width:280px; border:1px solid #c8ccd1; border-collapse:collapse; background:#fff; border-radius:8px; overflow:hidden; }
.robuddy-infobox-title { background:#2a4b8a; color:#fff; text-align:center; padding:10px 8px; font-weight:bold; }
.robuddy-infobox-image { text-align:center; padding:8px; }
.robuddy-infobox-row { background:#f6f7f9; }
.robuddy-infobox-row:nth-child(even) { background:#eef0f3; }
.robuddy-infobox-label { width:90px; font-weight:bold; padding:5px 10px; color:#333; }
.robuddy-infobox-value { padding:5px 10px; color:#222; }
.robuddy-infobox-en { font-size:smaller; color:#666; }
.robuddy-warning, .robuddy-note, .robuddy-danger { padding:10px 14px; margin:0.6em 0; border-radius:6px; border-left:4px solid; }
.robuddy-warning { background:#fffbf0; border-color:#e5a800; color:#5c4800; }
.robuddy-note { background:#f0f7ff; border-color:#3b82f6; color:#1e3a5f; }
.robuddy-danger { background:#fff0f0; border-color:#dc2626; color:#7f1d1d; }
/* 深色模式 - 手动切换(night) */
html.skin-theme-clientpref-night .robuddy-infobox { border-color:#333a44; background:#1c2028; }
html.skin-theme-clientpref-night .robuddy-infobox-title { background:#2e3a4e; color:#dce4f0; }
html.skin-theme-clientpref-night .robuddy-infobox-row { background:#222830; }
html.skin-theme-clientpref-night .robuddy-infobox-row:nth-child(even) { background:#1c2028; }
html.skin-theme-clientpref-night .robuddy-infobox-label { color:#a0aab8; }
html.skin-theme-clientpref-night .robuddy-infobox-value { color:#c8d0dc; }
html.skin-theme-clientpref-night .robuddy-infobox-en { color:#7a8494; }
html.skin-theme-clientpref-night .robuddy-warning { background:#2a2518; border-color:#c49a30; color:#d4b060; }
html.skin-theme-clientpref-night .robuddy-note { background:#182230; border-color:#4a90d9; color:#7ab8e8; }
html.skin-theme-clientpref-night .robuddy-danger { background:#2a1a1a; border-color:#c44040; color:#e08080; }
/* 深色模式 - 跟随系统(os) */
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .robuddy-infobox { border-color:#333a44; background:#1c2028; }
html.skin-theme-clientpref-os .robuddy-infobox-title { background:#2e3a4e; color:#dce4f0; }
html.skin-theme-clientpref-os .robuddy-infobox-row { background:#222830; }
html.skin-theme-clientpref-os .robuddy-infobox-row:nth-child(even) { background:#1c2028; }
html.skin-theme-clientpref-os .robuddy-infobox-label { color:#a0aab8; }
html.skin-theme-clientpref-os .robuddy-infobox-value { color:#c8d0dc; }
html.skin-theme-clientpref-os .robuddy-infobox-en { color:#7a8494; }
html.skin-theme-clientpref-os .robuddy-warning { background:#2a2518; border-color:#c49a30; color:#d4b060; }
html.skin-theme-clientpref-os .robuddy-note { background:#182230; border-color:#4a90d9; color:#7ab8e8; }
html.skin-theme-clientpref-os .robuddy-danger { background:#2a1a1a; border-color:#c44040; color:#e08080; }
}
/* === 首页卡片 === */
.robuddy-hero { text-align:center; padding:2em 0 1em; }
.robuddy-hero-title { font-size:1.8em; font-weight:700; background:linear-gradient(135deg,#2a4b8a,#00b4d8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.robuddy-hero-sub { color:#666; margin-top:0.5em; font-size:1.05em; }
/* 首页卡片 — 移动优先单列(兼容所有浏览器含 QQ X5) */
.robuddy-hero-title { color:#2a4b8a; }
.robuddy-grid { display:block; margin:1.5em 0 2em; }
.robuddy-card { display:block; box-sizing:border-box; margin-bottom:1.2em; }
/* 宽屏(≥640px)→ 双列 Flexbox */
@media (min-width:640px) {
.robuddy-grid { display:flex; flex-wrap:wrap; justify-content:space-between; }
.robuddy-card { flex:0 0 calc(50% - 0.6em); margin-bottom:1.2em; }
}
/* Grid + 渐变文字增强(仅现代浏览器) */
@supports (display: grid) and (-webkit-background-clip: text) {
@media (min-width:640px) {
.robuddy-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.2em; }
.robuddy-card { flex:unset; margin-bottom:0; }
}
.robuddy-hero-title { color:transparent; background:linear-gradient(135deg,#2a4b8a,#00b4d8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
}
.robuddy-card { position:relative; padding:1.8em 1.5em; border-radius:12px; border:1px solid #e0e4ea; background:#fff; transition:all 0.3s ease; overflow:hidden; text-decoration:none; color:inherit; display:block; }
.robuddy-card:hover { transform:translateY(-4px); box-shadow:0 8px 30px rgba(42,75,138,0.15); border-color:#00b4d8; }
.robuddy-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#2a4b8a,#00b4d8); opacity:0; transition:opacity 0.3s; }
.robuddy-card:hover::before { opacity:1; }
.robuddy-card-icon { font-size:2em; margin-bottom:0.5em; }
.robuddy-card-title { font-size:1.2em; font-weight:700; color:#1a1a2e; margin-bottom:0.4em; }
.robuddy-card-desc { font-size:0.9em; color:#555; line-height:1.6; }
.robuddy-card-links { margin-top:0.8em; font-size:0.85em; }
.robuddy-card-links a { color:#2a4b8a; text-decoration:none; margin-right:0.8em; }
.robuddy-card-links a:hover { color:#00b4d8; text-decoration:underline; }
.robuddy-notice { text-align:center; margin:1em 0; padding:0.8em; border-radius:8px; background:#f0f7ff; border:1px solid #b8d4f0; font-size:0.9em; }
.robuddy-notice a { color:#2a4b8a; font-weight:600; }
/* 深色-night */
html.skin-theme-clientpref-night .robuddy-hero-sub{color:#888}
html.skin-theme-clientpref-night .robuddy-hero-title{color:#4a90d9}
html.skin-theme-clientpref-night .robuddy-card{background:#1c2028;border-color:#2a3040}
html.skin-theme-clientpref-night .robuddy-card:hover{box-shadow:0 8px 30px rgba(0,180,216,0.15);border-color:#00b4d8}
html.skin-theme-clientpref-night .robuddy-card-title{color:#e0e4ea}
html.skin-theme-clientpref-night .robuddy-card-desc{color:#888}
html.skin-theme-clientpref-night .robuddy-card-links a{color:#4a90d9}
html.skin-theme-clientpref-night .robuddy-notice{background:#182230;border-color:#2a3a50;color:#8ab4e0}
/* 深色-os */
@media(prefers-color-scheme:dark){html.skin-theme-clientpref-os .robuddy-hero-sub{color:#888}html.skin-theme-clientpref-os .robuddy-hero-title{color:#4a90d9}html.skin-theme-clientpref-os .robuddy-card{background:#1c2028;border-color:#2a3040}html.skin-theme-clientpref-os .robuddy-card:hover{box-shadow:0 8px 30px rgba(0,180,216,0.15);border-color:#00b4d8}html.skin-theme-clientpref-os .robuddy-card-title{color:#e0e4ea}html.skin-theme-clientpref-os .robuddy-card-desc{color:#888}html.skin-theme-clientpref-os .robuddy-card-links a{color:#4a90d9}html.skin-theme-clientpref-os .robuddy-notice{background:#182230;border-color:#2a3a50;color:#8ab4e0}}