MediaWiki:Chameleon.css:修订间差异
MediaWiki界面页面
更多操作
Maintenance script(留言 | 贡献) Update Chameleon component rehearsal style |
Maintenance script(留言 | 贡献) Polish Chameleon mobile brand mark |
||
| (未显示同一用户的9个中间版本) | |||
| 第23行: | 第23行: | ||
max-width: 78rem; | max-width: 78rem; | ||
padding: .75rem 1.1rem 2.5rem; | padding: .75rem 1.1rem 2.5rem; | ||
} | |||
body.skin-chameleon > .container.flex-fill .row { | |||
width: 100%; | |||
max-width: 100%; | |||
margin-right: 0; | |||
margin-left: 0; | |||
box-sizing: border-box; | |||
} | |||
body.skin-chameleon > .container.flex-fill .col, | |||
body.skin-chameleon > .container.flex-fill [class*="col-"] { | |||
min-width: 0; | |||
padding-right: 0; | |||
padding-left: 0; | |||
box-sizing: border-box; | |||
} | } | ||
body.skin-chameleon > .container.flex-fill > .row:first-child { | body.skin-chameleon > .container.flex-fill > .row:first-child { | ||
align-items: center; | align-items: center; | ||
width: 100%; | |||
max-width: 100%; | |||
min-height: 4.35rem; | min-height: 4.35rem; | ||
margin-right: 0; | |||
margin-left: 0; | |||
padding: .45rem 0 .65rem; | padding: .45rem 0 .65rem; | ||
border-bottom: 1px solid rgba(202, 213, 228, .85); | border-bottom: 1px solid rgba(202, 213, 228, .85); | ||
box-sizing: border-box; | |||
} | } | ||
| 第222行: | 第243行: | ||
align-items: stretch; | align-items: stretch; | ||
margin-bottom: 1.15rem; | margin-bottom: 1.15rem; | ||
border: 1px solid #d7e1ee; | |||
border-radius: 18px; | |||
padding: 1rem; | |||
background: | |||
linear-gradient(135deg, rgba(238, 246, 255, .78), rgba(255, 255, 255, .92) 42%), | |||
#fff; | |||
box-shadow: 0 18px 50px rgba(17, 24, 39, .055); | |||
} | } | ||
body.skin-chameleon .mucwiki-home-copy, | body.skin-chameleon .mucwiki-home-copy, | ||
| 第234行: | 第262行: | ||
box-shadow: 0 12px 36px rgba(17, 24, 39, .045); | box-shadow: 0 12px 36px rgba(17, 24, 39, .045); | ||
} | } | ||
body.skin-chameleon .mucwiki-home-copy { padding: 1. | body.skin-chameleon .mucwiki-home-copy { | ||
border: 0; | |||
background: transparent; | |||
box-shadow: none; | |||
padding: 1.15rem 1.2rem; | |||
} | |||
body.skin-chameleon .mucwiki-home-kicker { | body.skin-chameleon .mucwiki-home-kicker { | ||
margin: 0 0 .45rem; | margin: 0 0 .45rem; | ||
| 第256行: | 第289行: | ||
line-height: 1.68; | line-height: 1.68; | ||
} | } | ||
body.skin-chameleon .mucwiki-home-side { padding: | body.skin-chameleon .mucwiki-home-side { | ||
border: 0; | |||
background: transparent; | |||
box-shadow: none; | |||
padding: 0; | |||
} | |||
body.skin-chameleon .mucwiki-home-media { | body.skin-chameleon .mucwiki-home-media { | ||
overflow: hidden; | overflow: hidden; | ||
border: 1px solid #dce7f3; | |||
border-radius: 13px; | border-radius: 13px; | ||
background: #eef3f8; | background: #eef3f8; | ||
| 第277行: | 第316行: | ||
border-radius: 12px; | border-radius: 12px; | ||
padding: .65rem .55rem; | padding: .65rem .55rem; | ||
background: | background: rgba(255, 255, 255, .88); | ||
text-align: center; | text-align: center; | ||
} | } | ||
| 第442行: | 第481行: | ||
body.skin-chameleon .mucwiki-home-lede, | body.skin-chameleon .mucwiki-home-lede, | ||
body.skin-chameleon .mucwiki-home-copy p { font-size: .95rem; line-height: 1.56; } | body.skin-chameleon .mucwiki-home-copy p { font-size: .95rem; line-height: 1.56; } | ||
body.skin-chameleon .mucwiki-home-side { display: | body.skin-chameleon .mucwiki-home-side { | ||
display: grid; | |||
padding: .72rem; | |||
} | |||
body.skin-chameleon .mucwiki-home-media { | |||
max-height: 9.2rem; | |||
} | |||
body.skin-chameleon .mucwiki-home-media img { | |||
width: 100%; | |||
max-height: 9.2rem; | |||
object-fit: cover; | |||
} | |||
body.skin-chameleon .mucwiki-home-stats-grid { | |||
grid-template-columns: repeat(3, minmax(0, 1fr)); | |||
gap: .35rem; | |||
margin-top: .48rem; | |||
} | |||
body.skin-chameleon .mucwiki-home-stat { | |||
padding: .46rem .35rem; | |||
} | |||
body.skin-chameleon .mucwiki-home-stat strong, | |||
body.skin-chameleon .mucwiki-home-stat strong a { | |||
font-size: .95rem; | |||
} | |||
body.skin-chameleon .mucwiki-home-stat span { | |||
font-size: .72rem; | |||
} | |||
body.skin-chameleon .mucwiki-home-card { min-height: auto; padding: .8rem; } | body.skin-chameleon .mucwiki-home-card { min-height: auto; padding: .8rem; } | ||
body.skin-chameleon .mucwiki-home-section { margin-top: .8rem; } | body.skin-chameleon .mucwiki-home-section { margin-top: .8rem; } | ||
| 第863行: | 第934行: | ||
grid-template-columns: auto minmax(0, 1fr); | grid-template-columns: auto minmax(0, 1fr); | ||
gap: .9rem; | gap: .9rem; | ||
width: 100%; | |||
max-width: 100%; | |||
margin-right: 0; | |||
margin-left: 0; | |||
box-sizing: border-box; | |||
} | } | ||
| 第1,055行: | 第1,131行: | ||
body.skin-chameleon .mw-search-result-data { | body.skin-chameleon .mw-search-result-data { | ||
max-width: 100%; | max-width: 100%; | ||
} | |||
body.skin-chameleon .mw-search-results-container { | |||
float: none !important; | |||
width: 100% !important; | |||
max-width: 100% !important; | |||
} | } | ||
body.skin-chameleon .mw-search-results { | body.skin-chameleon .mw-search-results { | ||
display: grid; | display: grid; | ||
width: 100% !important; | |||
max-width: 100% !important; | |||
gap: .8rem; | gap: .8rem; | ||
padding-left: 0; | padding-left: 0; | ||
| 第1,065行: | 第1,149行: | ||
body.skin-chameleon .mw-search-result { | body.skin-chameleon .mw-search-result { | ||
display: block; | |||
width: 100% !important; | |||
max-width: 100% !important; | |||
border: 1px solid #dce6f2; | border: 1px solid #dce6f2; | ||
border-radius: 14px; | border-radius: 14px; | ||
| 第1,070行: | 第1,157行: | ||
background: #fff; | background: #fff; | ||
box-shadow: 0 8px 26px rgba(25, 35, 55, .035); | box-shadow: 0 8px 26px rgba(25, 35, 55, .035); | ||
} | |||
body.skin-chameleon .mw-search-result-heading, | |||
body.skin-chameleon .searchresult, | |||
body.skin-chameleon .mw-search-result-data { | |||
width: 100%; | |||
max-width: 100% !important; | |||
} | } | ||
| 第1,179行: | 第1,273行: | ||
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; | |||
width: 100%; | |||
max-width: 100%; | |||
min-height: 4.5rem; | |||
margin-right: 0; | |||
margin-left: 0; | |||
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); | |||
box-sizing: border-box; | |||
} | |||
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; | |||
width: 100%; | |||
max-width: 100%; | |||
margin-right: 0; | |||
margin-left: 0; | |||
padding: .5rem; | |||
border-radius: 14px; | |||
box-sizing: border-box; | |||
} | |||
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; | |||
} | |||
} | } | ||
| 第1,190行: | 第1,470行: | ||
body.skin-chameleon > .container.flex-fill > .row:first-child { | body.skin-chameleon > .container.flex-fill > .row:first-child { | ||
grid-template-columns: 2.5rem minmax(0, 1fr); | grid-template-columns: 2.5rem minmax(0, 1fr); | ||
width: 100%; | |||
max-width: 100%; | |||
margin-right: 0; | |||
margin-left: 0; | |||
box-sizing: border-box; | |||
} | } | ||
| 第1,229行: | 第1,514行: | ||
body.skin-chameleon.page-特殊_用户登录 .mw-htmlform { | body.skin-chameleon.page-特殊_用户登录 .mw-htmlform { | ||
max-width: 100%; | max-width: 100%; | ||
} | |||
} | |||
/* Final mobile shell rule: keep brand, account actions, search and page actions readable. */ | |||
@media (max-width: 767.98px) { | |||
body.skin-chameleon > .container.flex-fill > .row:first-child { | |||
grid-template-columns: minmax(7.5rem, 1fr) auto !important; | |||
gap: .38rem .55rem !important; | |||
} | |||
body.skin-chameleon #p-logo { | |||
grid-column: 1; | |||
grid-row: 1; | |||
min-width: 0; | |||
} | |||
body.skin-chameleon #p-logo a { | |||
width: max-content; | |||
max-width: 100%; | |||
min-height: 2.35rem; | |||
padding: .16rem .46rem; | |||
} | |||
body.skin-chameleon #p-logo a::after { | |||
display: none; | |||
} | |||
body.skin-chameleon #p-logo img { | |||
max-width: 2rem; | |||
max-height: 2rem; | |||
} | |||
body.skin-chameleon #p-personal { | |||
grid-column: 2; | |||
grid-row: 1; | |||
width: auto !important; | |||
min-width: max-content; | |||
margin-bottom: 0; | |||
} | |||
body.skin-chameleon #p-personal .p-personal-tools, | |||
body.skin-chameleon #p-personal ul { | |||
justify-content: flex-end; | |||
} | |||
body.skin-chameleon #p-search { | |||
grid-column: 1 / -1; | |||
grid-row: 2; | |||
width: 100%; | |||
min-width: 0; | |||
} | |||
body.skin-chameleon #p-search .input-group { | |||
grid-template-columns: minmax(0, 1fr) 2.35rem !important; | |||
max-width: none; | |||
width: 100%; | |||
} | |||
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.35rem !important; | |||
min-width: 2.35rem !important; | |||
} | |||
body.skin-chameleon #p-contentnavigation { | |||
display: flex !important; | |||
justify-content: flex-start !important; | |||
gap: .35rem !important; | |||
overflow-x: auto; | |||
padding-right: .75rem; | |||
padding-bottom: .18rem; | |||
scrollbar-width: thin; | |||
} | |||
body.skin-chameleon #p-contentnavigation #p-namespaces, | |||
body.skin-chameleon #p-contentnavigation #p-views, | |||
body.skin-chameleon #p-contentnavigation .tab-group { | |||
display: flex !important; | |||
flex: 0 0 auto; | |||
gap: .35rem; | |||
} | |||
body.skin-chameleon #p-contentnavigation .mw-list-item { | |||
display: block !important; | |||
flex: 0 0 auto; | |||
min-width: 0 !important; | |||
} | |||
body.skin-chameleon #p-contentnavigation a { | |||
width: auto !important; | |||
max-width: none !important; | |||
min-width: max-content !important; | |||
overflow: visible; | |||
text-overflow: clip; | |||
white-space: nowrap; | |||
} | } | ||
} | } | ||