https://dev.eiffel.com/index.php?action=history&feed=atom&title=MediaWiki%3AVector-2022.css 2026-10-24T04:10:04Z Revision history for this page on the wiki MediaWiki 1.43.11 https://dev.eiffel.com/index.php?title=MediaWiki:Vector-2022.css&diff=16043&oldid=prev 2026-10-21T21:18:19Z

<p>Eiffel look: legacy Vector default skin (left sidebar), fix Vector 2022 dropdown clipping</p> <table style="background-color: #fff; color: #202122;" data-mw="interface"> <col class="diff-marker" /> <col class="diff-content" /> <col class="diff-marker" /> <col class="diff-content" /> <tr class="diff-title" lang="en"> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td> <td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 21:18, 21 October 2026</td> </tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l13">Line 13:</td> <td colspan="2" class="diff-lineno">Line 13:</td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>body.skin-vector-2022 .vector-sticky-header {</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>body.skin-vector-2022 .vector-sticky-header {</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> background: var(--eiffel-navy);</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> background: var(--eiffel-navy);</div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">}</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">/* Full-width bar without clipping: the old clip-path trick also clipped the header dropdowns (main menu,</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">  user menu), which then appeared cut off / behind the page content. */</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">html {</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> overflow-x: hidden;</ins></div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>}</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>}</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>body.skin-vector-2022 .vector-header-container {</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>body.skin-vector-2022 .vector-header-container {</div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> <del style="font-weight: bold; text-decoration: none;">box</del>-<del style="font-weight: bold; text-decoration: none;">shadow</del>: 0 0 <del style="font-weight: bold; text-decoration: none;">0 100vmax var</del>(-<del style="font-weight: bold; text-decoration: none;">-eiffel-navy</del>);</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> <ins style="font-weight: bold; text-decoration: none;">position: relative;</ins></div></td></tr> <tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> <del style="font-weight: bold; text-decoration: none;">clip-path</del>: <del style="font-weight: bold; text-decoration: none;">inset</del>( <del style="font-weight: bold; text-decoration: none;">0 </del>-<del style="font-weight: bold; text-decoration: none;">100vmax </del>);</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> z</ins>-<ins style="font-weight: bold; text-decoration: none;">index: 3;  /* header and its dropdowns above the page content */</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">}</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">body.skin-vector-2022 .vector-header-container::before {</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> content: '';</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> position: absolute;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> top</ins>: 0<ins style="font-weight: bold; text-decoration: none;">;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> bottom: </ins>0<ins style="font-weight: bold; text-decoration: none;">;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> left: calc</ins>( <ins style="font-weight: bold; text-decoration: none;">50% </ins>- <ins style="font-weight: bold; text-decoration: none;">50vw </ins>);</div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> <ins style="font-weight: bold; text-decoration: none;">width: 100vw;</ins></div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> background</ins>: <ins style="font-weight: bold; text-decoration: none;">var</ins>(-<ins style="font-weight: bold; text-decoration: none;">-eiffel-navy</ins>);</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> border-bottom: 3px solid var(--eiffel-gold);</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> border-bottom: 3px solid var(--eiffel-gold);</div></td></tr> <tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> z-index: -1;</ins></div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>}</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>}</div></td></tr> <tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>body.skin-vector-2022 .vector-sticky-header .vector-sticky-header-context-bar-primary,</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>body.skin-vector-2022 .vector-sticky-header .vector-sticky-header-context-bar-primary,</div></td></tr> <!-- diff cache key dev_eiffel_com_db_5scXgV:diff:1.41:old-16040:rev-16043:php=table --> </table>

Maintenance script https://dev.eiffel.com/index.php?title=MediaWiki:Vector-2022.css&diff=16040&oldid=prev 2026-10-21T21:08:20Z

<p>MediaWiki 1.43 upgrade: Eiffel look for Vector</p> <p><b>New page</b></p><div>/* dev.eiffel.com - Eiffel Software look for Vector 2022 (palette from the 2013 eiffelsoftware_origo skin) */<br /> :root {<br /> --eiffel-navy: #173A7B;<br /> --eiffel-blue: #2153B0;<br /> --eiffel-light: #CBDDFF;<br /> --eiffel-pale: #F2F6FF;<br /> --eiffel-gold: #fabd23;<br /> }<br /> <br /> /* Header bar (full window width, also when the header is sticky) */<br /> body.skin-vector-2022 .vector-header-container,<br /> body.skin-vector-2022 .vector-header-container .mw-header,<br /> body.skin-vector-2022 .vector-sticky-header {<br /> background: var(--eiffel-navy);<br /> }<br /> body.skin-vector-2022 .vector-header-container {<br /> box-shadow: 0 0 0 100vmax var(--eiffel-navy);<br /> clip-path: inset( 0 -100vmax );<br /> border-bottom: 3px solid var(--eiffel-gold);<br /> }<br /> body.skin-vector-2022 .vector-sticky-header .vector-sticky-header-context-bar-primary,<br /> body.skin-vector-2022 .vector-sticky-header a {<br /> color: #fff;<br /> }<br /> .vector-header-container .mw-logo-wordmark,<br /> .vector-header-container .mw-logo-container,<br /> .vector-header-container .vector-main-menu-dropdown .vector-dropdown-label,<br /> .vector-header-container .vector-user-links a,<br /> .vector-header-container .vector-user-links .vector-dropdown-label {<br /> color: #fff;<br /> }<br /> .vector-header-container .mw-logo-wordmark {<br /> font-family: &#039;Trebuchet MS&#039;, &#039;Lucida Grande&#039;, Verdana, Arial, sans-serif;<br /> font-size: 1.15em;<br /> font-weight: bold;<br /> }<br /> .vector-header-container .cdx-button__icon,<br /> .vector-header-container .vector-icon {<br /> filter: invert( 1 );<br /> }<br /> .vector-header-container .cdx-text-input__input,<br /> .vector-header-container .cdx-search-input__input-wrapper input {<br /> border-color: var(--eiffel-light);<br /> }<br /> <br /> /* Links */<br /> .mw-body a:not( .new ):not( .external ),<br /> .vector-toc a {<br /> color: var(--eiffel-blue);<br /> }<br /> .mw-body a:not( .new ):hover,<br /> .vector-toc a:hover {<br /> color: var(--eiffel-navy);<br /> }<br /> .mw-body a:visited:not( .new ) {<br /> color: #3b5fa8;<br /> }<br /> <br /> /* Headings */<br /> .mw-body h1, .mw-body h2, .mw-body h3, .mw-first-heading {<br /> color: var(--eiffel-navy);<br /> font-family: &#039;Trebuchet MS&#039;, &#039;Lucida Grande&#039;, Verdana, Arial, sans-serif;<br /> }<br /> .mw-body h1, .mw-body h2 {<br /> border-bottom-color: var(--eiffel-light);<br /> }<br /> <br /> /* Active tabs */<br /> .vector-menu-tabs .selected a,<br /> .vector-menu-tabs .mw-list-item.selected a {<br /> color: var(--eiffel-navy);<br /> box-shadow: inset 0 -2px 0 var(--eiffel-gold);<br /> }<br /> <br /> /* Footer */<br /> .mw-footer {<br /> border-top: 3px solid var(--eiffel-light);<br /> }</div>

Maintenance script