MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
Apply SELOC colours and responsive navigation styles to the staging TechWiki |
Match SELOC typography and improve the directory, images and search layout |
||
| Line 15: | Line 15: | ||
.seloc-wiki-card a { display: block; padding: .55em .8em; } | .seloc-wiki-card a { display: block; padding: .55em .8em; } | ||
@media print { .seloc-wiki-pills { display: none; } } | @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; } } | |||
Revision as of 21:05, 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; } }