MediaWiki:Chameleon.css：修订间差异
MediaWiki界面页面
更多操作
Maintenance script（留言 | 贡献） Restore mobile Chameleon home media |
Maintenance script（留言 | 贡献） Polish Chameleon app shell |
||
| 第1,211行： | 第1,211行： | ||
background: #fff; | background: #fff; | ||
box-shadow: 0 8px 24px rgba(25, 35, 55, .032); | box-shadow: 0 8px 24px rgba(25, 35, 55, .032); | ||
} | |||
/* Chameleon app-shell hardening: make the skin read like a designed product surface. */ | |||
body.skin-chameleon > .container.flex-fill { | |||
max-width: 80rem; | |||
} | |||
body.skin-chameleon > .container.flex-fill > .row:first-child { | |||
display: grid; | |||
grid-template-columns: auto minmax(0, 1fr); | |||
gap: 1rem; | |||
min-height: 4.5rem; | |||
border: 1px solid #dbe4ef; | |||
border-radius: 16px; | |||
padding: .6rem .75rem; | |||
background: rgba(255, 255, 255, .98); | |||
box-shadow: 0 14px 42px rgba(17, 24, 39, .05); | |||
} | |||
body.skin-chameleon #p-logo { | |||
align-self: center; | |||
} | |||
body.skin-chameleon #p-logo a { | |||
min-height: 2.8rem; | |||
border-radius: 12px; | |||
padding: .22rem .5rem; | |||
background: #f8fbff; | |||
text-decoration: none; | |||
} | |||
body.skin-chameleon #p-logo a::after { | |||
content: "MUC Wiki"; | |||
margin-left: .55rem; | |||
color: #0f172a; | |||
font-size: 1.02rem; | |||
font-weight: 900; | |||
line-height: 1; | |||
white-space: nowrap; | |||
} | |||
body.skin-chameleon #p-logo img { | |||
max-width: 2.35rem; | |||
max-height: 2.35rem; | |||
} | |||
body.skin-chameleon #p-personal { | |||
margin-bottom: .36rem; | |||
} | |||
body.skin-chameleon #p-personal a { | |||
min-height: 1.95rem; | |||
padding: .28rem .54rem; | |||
font-size: .88rem; | |||
} | |||
body.skin-chameleon #p-search { | |||
margin-top: 0; | |||
} | |||
body.skin-chameleon #p-search form { | |||
align-items: center; | |||
} | |||
body.skin-chameleon #p-search .input-group { | |||
display: grid; | |||
grid-template-columns: minmax(14rem, 1fr) 2.55rem; | |||
gap: .28rem; | |||
max-width: 25rem; | |||
margin-left: auto; | |||
} | |||
body.skin-chameleon #p-search .input-group > input, | |||
body.skin-chameleon #p-search .input-group > .form-control { | |||
grid-column: 1; | |||
width: 100% !important; | |||
} | |||
body.skin-chameleon #p-search .input-group > .input-group-append { | |||
grid-column: 2; | |||
width: 2.55rem; | |||
} | |||
body.skin-chameleon #p-search .input-group .btn, | |||
body.skin-chameleon #p-search .input-group button, | |||
body.skin-chameleon #p-search .input-group input[type="submit"] { | |||
width: 2.55rem; | |||
min-width: 2.55rem; | |||
padding: 0; | |||
} | |||
body.skin-chameleon #mw-navigation { | |||
margin: .75rem 0 .62rem !important; | |||
border-radius: 16px; | |||
padding: .36rem .45rem; | |||
box-shadow: 0 10px 30px rgba(17, 24, 39, .04); | |||
} | |||
body.skin-chameleon #mw-navigation .navbar-nav { | |||
gap: .25rem; | |||
} | |||
body.skin-chameleon #mw-navigation .nav-link, | |||
body.skin-chameleon #mw-navigation .dropdown-toggle { | |||
min-height: 2.1rem; | |||
padding: .38rem .68rem; | |||
} | |||
body.skin-chameleon #p-contentnavigation { | |||
justify-content: center; | |||
margin-bottom: .95rem !important; | |||
} | |||
body.skin-chameleon #p-contentnavigation a { | |||
min-height: 2rem; | |||
border-color: #e1e9f4; | |||
background: rgba(255, 255, 255, .78); | |||
} | |||
body.skin-chameleon #p-contentnavigation .selected a { | |||
border-color: #bad0eb; | |||
background: #eef6ff; | |||
} | |||
@media (max-width: 767.98px) { | |||
body.skin-chameleon > .container.flex-fill { | |||
padding: .5rem .75rem 1.75rem; | |||
} | |||
body.skin-chameleon > .container.flex-fill > .row:first-child { | |||
grid-template-columns: minmax(0, 1fr); | |||
gap: .42rem; | |||
padding: .5rem; | |||
border-radius: 14px; | |||
} | |||
body.skin-chameleon #p-logo a { | |||
width: max-content; | |||
min-height: 2.2rem; | |||
padding: .16rem .38rem; | |||
} | |||
body.skin-chameleon #p-logo a::after { | |||
font-size: .9rem; | |||
} | |||
body.skin-chameleon #p-logo img { | |||
max-width: 1.85rem; | |||
max-height: 1.85rem; | |||
} | |||
body.skin-chameleon #p-personal { | |||
margin-bottom: .14rem; | |||
} | |||
body.skin-chameleon #p-personal .p-personal-tools, | |||
body.skin-chameleon #p-personal ul { | |||
justify-content: flex-start; | |||
} | |||
body.skin-chameleon #p-search .input-group { | |||
grid-template-columns: minmax(0, 1fr) 2.2rem; | |||
max-width: none; | |||
} | |||
body.skin-chameleon #p-search .input-group > .input-group-append, | |||
body.skin-chameleon #p-search .input-group .btn, | |||
body.skin-chameleon #p-search .input-group button, | |||
body.skin-chameleon #p-search .input-group input[type="submit"] { | |||
width: 2.2rem !important; | |||
min-width: 2.2rem !important; | |||
} | |||
body.skin-chameleon #mw-navigation { | |||
margin: .46rem 0 .44rem !important; | |||
} | |||
} | } | ||