MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
Apply shared header, model groups and article reading styles |
Wrap staging navigation pills on phones and tablets |
||
| (8 intermediate revisions by the same user not shown) | |||
| Line 58: | Line 58: | ||
.seloc-wiki-article .mw-parser-output h2 { color:#075b2b; border-color:#d9b300; } | .seloc-wiki-article .mw-parser-output h2 { color:#075b2b; border-color:#d9b300; } | ||
@media print { .seloc-wiki-shell { display:none; } } | @media print { .seloc-wiki-shell { display:none; } } | ||
/* Keep the standalone A–Z page, and omit its transclusion on the homepage. */ | |||
body.page-SELOC_TechWiki #mw-content-text .mw-allpages-body, | |||
body.page-SELOC_TechWiki #mw-content-text .mw-allpages-nav { display: none; } | |||
body.page-SELOC_TechWiki .seloc-wiki-welcome { padding: .75rem 1rem; } | |||
body.page-SELOC_TechWiki .seloc-wiki-enhanced .seloc-wiki-welcome p { margin: .35rem 0; } | |||
#n-seloc-article-index a { font-weight: 700; } | |||
/* Forumsug visual language for the staging TechWiki. */ | |||
.seloc-wiki-themed.skin-vector-legacy { background:#075b2b; } | |||
.seloc-wiki-themed.skin-vector-legacy #mw-page-base { background:#075b2b; } | |||
.seloc-wiki-themed #mw-panel .portal { background:#f3f7f4; border-radius:.35rem; margin:.45rem .4rem; padding:.45rem .6rem; } | |||
.seloc-wiki-themed #p-logo { background:white; border-radius:.5rem; } | |||
.seloc-wiki-themed #p-personal { background:#f3f7f4; border-radius:.3rem; padding:0 .4rem; } | |||
.seloc-wiki-themed #content { border-color:#d9b300; } | |||
.seloc-wiki-themed #footer { background:#f3f7f4; border-radius:.35rem; } | |||
.seloc-wiki-shell { border:1px solid #d9b300; border-radius:.65rem; background:#075b2b; } | |||
.seloc-wiki-shell .seloc-wiki-brand { display:flex; align-items:center; gap:.65rem; padding:.55rem .8rem; min-height:2.65rem; background:#fff; color:#17281e; font-weight:700; font-size:1.12rem; } | |||
.seloc-wiki-mark { width:2.45rem; height:2.45rem; flex:none; background-size:contain; background-position:center; background-repeat:no-repeat; } | |||
.seloc-wiki-shell .seloc-wiki-primary { padding:.5rem .7rem; gap:.4rem; } | |||
.seloc-wiki-shell .seloc-wiki-primary a { font-size:.9rem; } | |||
.seloc-wiki-shell .seloc-wiki-secondary { border-top:1px solid #caaa00; padding:.4rem .7rem; gap:.35rem; } | |||
.seloc-wiki-shell .seloc-wiki-secondary a { background:transparent; color:#ffdc24; border:1px solid #d9b300; font-size:.8rem; padding:.28em .7em; } | |||
.seloc-wiki-shell nav a:hover { text-decoration:underline; } | |||
.seloc-wiki-shell nav a:focus-visible { outline:2px solid #fff; outline-offset:2px; } | |||
.seloc-wiki-shell form { border:0; border-top:1px solid #d9b300; } | |||
body.page-SELOC_TechWiki .seloc-wiki-enhanced .seloc-wiki-welcome { padding:.45rem 0; border:0; background:transparent; } | |||
.seloc-wiki-directory h2 { background:#ffdc24; color:#153d23; border:0; border-radius:.35rem; padding:.45rem .65rem; } | |||
.seloc-wiki-directory .seloc-wiki-card { background:#f3f7f4; border-color:#b5c9b9; } | |||
.seloc-wiki-directory .seloc-wiki-card:hover { border-color:#075b2b; } | |||
@media (max-width:700px) { | |||
.seloc-wiki-themed #content { padding:.7rem; } | |||
.seloc-wiki-themed #p-search { float:none; width:auto; margin:0; } | |||
.seloc-wiki-themed #simpleSearch { width:auto; max-width:none; } | |||
.seloc-wiki-shell nav { row-gap:.35rem; } | |||
.seloc-wiki-shell .seloc-wiki-primary a { font-size:.82rem; } | |||
} | |||
/* The shared header provides branding and search on enhanced pages. */ | |||
.seloc-wiki-themed #p-logo, .seloc-wiki-themed #p-search { display:none; } | |||
@media (min-width:701px) { .seloc-wiki-themed #mw-panel { padding-top:3.4rem; } } | |||
/* Consistent landscape photo panels and larger subject artwork. */ | |||
.seloc-wiki-directory .seloc-card-art { width:min(100%, 5.75rem); height:4.25rem; } | |||
.seloc-wiki-directory .seloc-card-art img { width:100%; height:100%; max-height:none; object-fit:contain; } | |||
.seloc-wiki-directory .seloc-card-art > span { display:block; width:100%; height:100%; } | |||
.seloc-wiki-directory .seloc-card-art a { display:block; width:100%; height:100%; padding:0; } | |||
.seloc-wiki-directory .seloc-car-art { width:min(100%, 14rem); height:auto; aspect-ratio:16 / 10; background:#fff; border-radius:.3rem; overflow:hidden; } | |||
.seloc-wiki-directory .seloc-car-art img { width:100%; height:100%; object-fit:contain; } | |||
.seloc-wiki-directory .seloc-model-group .seloc-wiki-cards { grid-template-columns:repeat(auto-fit,minmax(min(100%, 12rem),1fr)); } | |||
/* Keep model photos the same size even when groups have different numbers of cards. */ | |||
@media (min-width:1000px) { .seloc-wiki-directory .seloc-model-group .seloc-wiki-cards { grid-template-columns:repeat(4,minmax(0,1fr)); } } | |||
@media (min-width:700px) and (max-width:999px) { .seloc-wiki-directory .seloc-model-group .seloc-wiki-cards { grid-template-columns:repeat(3,minmax(0,1fr)); } } | |||
@media (min-width:420px) and (max-width:699px) { .seloc-wiki-directory .seloc-model-group .seloc-wiki-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } } | |||
/* Fit even tall originals entirely inside the reserved icon area. */ | |||
.seloc-wiki-directory .seloc-card-art { position:relative; display:block; overflow:hidden; } | |||
.seloc-wiki-directory .seloc-card-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; } | |||
/* Match the forum's two navigation rows and reclaim the sidebar space. */ | |||
.seloc-wiki-compact-nav #mw-panel { display:none; } | |||
.seloc-wiki-compact-nav.skin-vector-legacy #content, | |||
.seloc-wiki-compact-nav.skin-vector-legacy #footer { margin-left:0; } | |||
.seloc-wiki-compact-nav.skin-vector-legacy #left-navigation { margin-left:0; } | |||
.seloc-wiki-shell .seloc-wiki-tools { color:#ffdc24; font-size:.8rem; } | |||
.seloc-wiki-shell .seloc-wiki-tools summary { cursor:pointer; border:1px solid #d9b300; border-radius:2em; padding:.28em .7em; font-weight:700; } | |||
.seloc-wiki-shell .seloc-wiki-tools[open] { flex-basis:100%; } | |||
.seloc-wiki-shell .seloc-wiki-tools[open] summary { display:inline-block; } | |||
.seloc-wiki-shell .seloc-wiki-tools ul { display:flex; flex-wrap:wrap; gap:.35rem; list-style:none; padding:0; margin:.45rem 0 0; } | |||
.seloc-wiki-shell .seloc-wiki-tools li { margin:0; } | |||
.seloc-wiki-shell .seloc-wiki-tools li a { display:block; } | |||
.seloc-wiki-shell .seloc-wiki-tools summary:focus-visible { outline:2px solid #fff; outline-offset:2px; } | |||
@media (max-width:700px) { | |||
.seloc-wiki-compact-nav.skin-vector-legacy #mw-page-base { height:0; } | |||
.seloc-wiki-compact-nav.skin-vector-legacy #mw-head { width:100%; box-sizing:border-box; } | |||
.seloc-wiki-compact-nav.skin-vector-legacy #p-personal, | |||
.seloc-wiki-compact-nav.skin-vector-legacy #left-navigation, | |||
.seloc-wiki-compact-nav.skin-vector-legacy #right-navigation { width:auto; max-width:100%; box-sizing:border-box; } | |||
.seloc-wiki-compact-nav.skin-vector-legacy #p-personal ul { display:flex; flex-wrap:wrap; } | |||
} | |||
/* Keep the shared pills inside the reading column on phones and tablets. */ | |||
@media screen and (max-width: 1024px) { | |||
.seloc-wiki-compact-nav #content { margin-left: 0; min-width: 0; } | |||
.seloc-wiki-shell { box-sizing: border-box; max-width: 100%; } | |||
.seloc-wiki-shell nav.seloc-wiki-primary, | |||
.seloc-wiki-shell nav.seloc-wiki-secondary { | |||
display: flex; | |||
flex-wrap: wrap; | |||
box-sizing: border-box; | |||
min-width: 0; | |||
} | |||
.seloc-wiki-shell nav > a { max-width: 100%; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; } | |||
} | |||
Latest revision as of 12:31, 6 November 2026
/* SELOC staging theme. Keep the native MediaWiki navigation and editor. */
body.skin-vector-legacy { background: #edf3ee; color: #17281e; }
.skin-vector-legacy #mw-page-base { background: linear-gradient(#fff, #edf3ee); }
.skin-vector-legacy #content { border-color: #a9c4b0; background: #fff; }
.skin-vector-legacy #firstHeading { color: #075b2b; border-color: #a9c4b0; }
.skin-vector-legacy a:focus-visible { outline: 2px solid #075b2b; outline-offset: 3px; }
.seloc-wiki-welcome { padding: 1rem; border: 1px solid #a9c4b0; border-top: 4px solid #075b2b; border-radius: .5rem; background: #f3f7f4; }
.seloc-wiki-pills { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 .75rem; }
.seloc-wiki-pills span { display: inline-flex; }
.seloc-wiki-pills a.external { padding: .4em .9em; border-radius: 2em; background: #ffdc24; color: #153d23; font-weight: bold; }
.seloc-wiki-pills a.external:hover { background: #f0cd19; text-decoration: underline; }
.seloc-wiki-welcome p { margin: .55em 0 0; }
.seloc-wiki-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12em), 1fr)); gap: .45rem; }
.seloc-wiki-card { border: 1px solid #c8d7cd; border-left: 3px solid #075b2b; border-radius: .25rem; background: #f3f7f4; }
.seloc-wiki-card a { display: block; padding: .55em .8em; }
@media print { .seloc-wiki-pills { display: none; } }
/* TechWiki directory and search */
.skin-vector-legacy #firstHeading,
.skin-vector-legacy .mw-parser-output h2 { font-family: Verdana, Arial, sans-serif; }
.skin-vector-legacy #firstHeading { font-size: clamp(1.55rem, 3vw, 2.15rem); font-weight: 700; }
.seloc-wiki-welcome, .seloc-wiki-directory { font-family: Verdana, Arial, sans-serif; }
.seloc-wiki-directory h2 { color: #075b2b; font-weight: 700; border-bottom: 2px solid #e5bd00; margin: 1.5rem 0 .65rem; padding-bottom: .35rem; }
.seloc-wiki-directory .seloc-wiki-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: .65rem; }
.seloc-wiki-directory .seloc-wiki-card { border: 1px solid #c8d7cd; border-radius: .5rem; text-align: center; padding: .75rem .55rem; }
.seloc-wiki-directory .seloc-wiki-card a { color: #000080; font-weight: 700; padding: .2rem 0; }
.seloc-wiki-card .seloc-card-art { display: grid; place-items: center; height: 3rem; margin: 0 auto .45rem; }
.seloc-wiki-card .seloc-car-art { height: 5.25rem; }
.seloc-card-art img { display: block; max-width: 100%; max-height: 3rem; width: auto; height: auto; object-fit: contain; }
.seloc-car-art img { max-height: 5.25rem; }
.seloc-card-detail { font-size: .87em; color: #39473d; line-height: 1.45; }
.seloc-wiki-search a { display: inline-block; background: #075b2b; color: #fff; border-radius: .4rem; padding: .45rem .8rem; font-weight: 700; }
.seloc-wiki-search a:visited { color: #fff; }
.skin-vector-legacy #simpleSearch { border-color: #789885; }
.skin-vector-legacy #searchInput { font-size: 1rem; }
@media (min-width: 1000px) { .skin-vector-legacy #p-search { width: 21rem; } .skin-vector-legacy #simpleSearch { max-width: none; } }
@media (max-width: 700px) { .skin-vector-legacy #content { margin-left: 0; margin-top: 0; padding: 1rem; } .skin-vector-legacy #mw-head { position: static; display: flex; flex-direction: column; gap: .5rem; padding: .5rem; } .skin-vector-legacy #mw-head-base { display: none; } .skin-vector-legacy #p-personal { position: static; } .skin-vector-legacy #left-navigation, .skin-vector-legacy #right-navigation { float: none; margin: 0; } .skin-vector-legacy #mw-panel { position: static; width: auto; padding: .5rem 1rem; } .skin-vector-legacy #p-logo { display: none; } .skin-vector-legacy #footer { margin-left: 0; } }
/* Shared SELOC reading and search layout */
.seloc-wiki-shell { margin: 0 0 1.25rem; border-radius: .65rem; overflow: hidden; font: 1rem Verdana, Arial, sans-serif; }
.seloc-wiki-shell nav, .seloc-wiki-shell form { display:flex; flex-wrap:wrap; align-items:center; gap:.55rem; padding:.7rem; }
.seloc-wiki-shell nav { background:#075b2b; }
.seloc-wiki-shell nav a { background:#ffdc24; color:#153d23; font-weight:700; padding:.4em .9em; border-radius:2em; }
.seloc-wiki-shell nav a[aria-current] { text-decoration:underline; }
.seloc-wiki-shell form { background:#f3f7f4; border:1px solid #a9c4b0; }
.seloc-wiki-shell input[type=search] { flex:1 1 14rem; min-width:0; padding:.55rem; border:1px solid #789885; border-radius:.3rem; font:inherit; }
.seloc-wiki-shell button { background:#075b2b; color:white; border:0; border-radius:.3rem; padding:.6rem .8rem; font:inherit; cursor:pointer; }
.seloc-wiki-enhanced .seloc-wiki-pills, .seloc-wiki-enhanced .seloc-wiki-search { display:none; }
.seloc-model-group { margin:1rem 0; }
.seloc-model-group h3 { color:#075b2b; font:700 1.02rem Verdana,Arial,sans-serif; }
.seloc-model-group ul { display:flex; flex-wrap:wrap; list-style:none; padding:0; margin:.45rem 0; gap:.45rem; }
.seloc-model-group li { margin:0; }
.seloc-model-group li a { display:block; background:#f3f7f4; border:1px solid #a9c4b0; border-radius:.35rem; padding:.4em .7em; }
.seloc-wiki-article #bodyContent { font: 1rem/1.65 Verdana,Arial,sans-serif; }
.seloc-wiki-article .mw-parser-output { max-width: 68rem; }
.seloc-wiki-article .mw-parser-output img { max-width:100%; height:auto; }
.seloc-wiki-article .toc { border-color:#a9c4b0; border-radius:.4rem; background:#f3f7f4; }
.seloc-wiki-article .mw-parser-output h2 { color:#075b2b; border-color:#d9b300; }
@media print { .seloc-wiki-shell { display:none; } }
/* Keep the standalone A–Z page, and omit its transclusion on the homepage. */
body.page-SELOC_TechWiki #mw-content-text .mw-allpages-body,
body.page-SELOC_TechWiki #mw-content-text .mw-allpages-nav { display: none; }
body.page-SELOC_TechWiki .seloc-wiki-welcome { padding: .75rem 1rem; }
body.page-SELOC_TechWiki .seloc-wiki-enhanced .seloc-wiki-welcome p { margin: .35rem 0; }
#n-seloc-article-index a { font-weight: 700; }
/* Forumsug visual language for the staging TechWiki. */
.seloc-wiki-themed.skin-vector-legacy { background:#075b2b; }
.seloc-wiki-themed.skin-vector-legacy #mw-page-base { background:#075b2b; }
.seloc-wiki-themed #mw-panel .portal { background:#f3f7f4; border-radius:.35rem; margin:.45rem .4rem; padding:.45rem .6rem; }
.seloc-wiki-themed #p-logo { background:white; border-radius:.5rem; }
.seloc-wiki-themed #p-personal { background:#f3f7f4; border-radius:.3rem; padding:0 .4rem; }
.seloc-wiki-themed #content { border-color:#d9b300; }
.seloc-wiki-themed #footer { background:#f3f7f4; border-radius:.35rem; }
.seloc-wiki-shell { border:1px solid #d9b300; border-radius:.65rem; background:#075b2b; }
.seloc-wiki-shell .seloc-wiki-brand { display:flex; align-items:center; gap:.65rem; padding:.55rem .8rem; min-height:2.65rem; background:#fff; color:#17281e; font-weight:700; font-size:1.12rem; }
.seloc-wiki-mark { width:2.45rem; height:2.45rem; flex:none; background-size:contain; background-position:center; background-repeat:no-repeat; }
.seloc-wiki-shell .seloc-wiki-primary { padding:.5rem .7rem; gap:.4rem; }
.seloc-wiki-shell .seloc-wiki-primary a { font-size:.9rem; }
.seloc-wiki-shell .seloc-wiki-secondary { border-top:1px solid #caaa00; padding:.4rem .7rem; gap:.35rem; }
.seloc-wiki-shell .seloc-wiki-secondary a { background:transparent; color:#ffdc24; border:1px solid #d9b300; font-size:.8rem; padding:.28em .7em; }
.seloc-wiki-shell nav a:hover { text-decoration:underline; }
.seloc-wiki-shell nav a:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.seloc-wiki-shell form { border:0; border-top:1px solid #d9b300; }
body.page-SELOC_TechWiki .seloc-wiki-enhanced .seloc-wiki-welcome { padding:.45rem 0; border:0; background:transparent; }
.seloc-wiki-directory h2 { background:#ffdc24; color:#153d23; border:0; border-radius:.35rem; padding:.45rem .65rem; }
.seloc-wiki-directory .seloc-wiki-card { background:#f3f7f4; border-color:#b5c9b9; }
.seloc-wiki-directory .seloc-wiki-card:hover { border-color:#075b2b; }
@media (max-width:700px) {
.seloc-wiki-themed #content { padding:.7rem; }
.seloc-wiki-themed #p-search { float:none; width:auto; margin:0; }
.seloc-wiki-themed #simpleSearch { width:auto; max-width:none; }
.seloc-wiki-shell nav { row-gap:.35rem; }
.seloc-wiki-shell .seloc-wiki-primary a { font-size:.82rem; }
}
/* The shared header provides branding and search on enhanced pages. */
.seloc-wiki-themed #p-logo, .seloc-wiki-themed #p-search { display:none; }
@media (min-width:701px) { .seloc-wiki-themed #mw-panel { padding-top:3.4rem; } }
/* Consistent landscape photo panels and larger subject artwork. */
.seloc-wiki-directory .seloc-card-art { width:min(100%, 5.75rem); height:4.25rem; }
.seloc-wiki-directory .seloc-card-art img { width:100%; height:100%; max-height:none; object-fit:contain; }
.seloc-wiki-directory .seloc-card-art > span { display:block; width:100%; height:100%; }
.seloc-wiki-directory .seloc-card-art a { display:block; width:100%; height:100%; padding:0; }
.seloc-wiki-directory .seloc-car-art { width:min(100%, 14rem); height:auto; aspect-ratio:16 / 10; background:#fff; border-radius:.3rem; overflow:hidden; }
.seloc-wiki-directory .seloc-car-art img { width:100%; height:100%; object-fit:contain; }
.seloc-wiki-directory .seloc-model-group .seloc-wiki-cards { grid-template-columns:repeat(auto-fit,minmax(min(100%, 12rem),1fr)); }
/* Keep model photos the same size even when groups have different numbers of cards. */
@media (min-width:1000px) { .seloc-wiki-directory .seloc-model-group .seloc-wiki-cards { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:700px) and (max-width:999px) { .seloc-wiki-directory .seloc-model-group .seloc-wiki-cards { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:420px) and (max-width:699px) { .seloc-wiki-directory .seloc-model-group .seloc-wiki-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* Fit even tall originals entirely inside the reserved icon area. */
.seloc-wiki-directory .seloc-card-art { position:relative; display:block; overflow:hidden; }
.seloc-wiki-directory .seloc-card-art img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
/* Match the forum's two navigation rows and reclaim the sidebar space. */
.seloc-wiki-compact-nav #mw-panel { display:none; }
.seloc-wiki-compact-nav.skin-vector-legacy #content,
.seloc-wiki-compact-nav.skin-vector-legacy #footer { margin-left:0; }
.seloc-wiki-compact-nav.skin-vector-legacy #left-navigation { margin-left:0; }
.seloc-wiki-shell .seloc-wiki-tools { color:#ffdc24; font-size:.8rem; }
.seloc-wiki-shell .seloc-wiki-tools summary { cursor:pointer; border:1px solid #d9b300; border-radius:2em; padding:.28em .7em; font-weight:700; }
.seloc-wiki-shell .seloc-wiki-tools[open] { flex-basis:100%; }
.seloc-wiki-shell .seloc-wiki-tools[open] summary { display:inline-block; }
.seloc-wiki-shell .seloc-wiki-tools ul { display:flex; flex-wrap:wrap; gap:.35rem; list-style:none; padding:0; margin:.45rem 0 0; }
.seloc-wiki-shell .seloc-wiki-tools li { margin:0; }
.seloc-wiki-shell .seloc-wiki-tools li a { display:block; }
.seloc-wiki-shell .seloc-wiki-tools summary:focus-visible { outline:2px solid #fff; outline-offset:2px; }
@media (max-width:700px) {
.seloc-wiki-compact-nav.skin-vector-legacy #mw-page-base { height:0; }
.seloc-wiki-compact-nav.skin-vector-legacy #mw-head { width:100%; box-sizing:border-box; }
.seloc-wiki-compact-nav.skin-vector-legacy #p-personal,
.seloc-wiki-compact-nav.skin-vector-legacy #left-navigation,
.seloc-wiki-compact-nav.skin-vector-legacy #right-navigation { width:auto; max-width:100%; box-sizing:border-box; }
.seloc-wiki-compact-nav.skin-vector-legacy #p-personal ul { display:flex; flex-wrap:wrap; }
}
/* Keep the shared pills inside the reading column on phones and tablets. */
@media screen and (max-width: 1024px) {
.seloc-wiki-compact-nav #content { margin-left: 0; min-width: 0; }
.seloc-wiki-shell { box-sizing: border-box; max-width: 100%; }
.seloc-wiki-shell nav.seloc-wiki-primary,
.seloc-wiki-shell nav.seloc-wiki-secondary {
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
min-width: 0;
}
.seloc-wiki-shell nav > a { max-width: 100%; box-sizing: border-box; white-space: normal; overflow-wrap: anywhere; }
}