MediaWiki:Common.css: Difference between revisions

From TechWiki
Jump to navigation Jump to search
Match SELOC typography and improve the directory, images and search layout
Apply shared header, model groups and article reading styles
Line 36: Line 36:
@media (min-width: 1000px) { .skin-vector-legacy #p-search { width: 21rem; } .skin-vector-legacy #simpleSearch { max-width: none; } }
@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; } }
@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; } }

Revision as of 21:16, 5 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; } }