MediaWiki:Vector-2022.css: Difference between revisions
Appearance
No edit summary |
No edit summary |
||
| (39 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
/* Vector 2022 CSS Styling */ | /* Vector 2022 CSS Styling */ | ||
.vector- | .skin-vector-2022 #vector-main-menu-pinned-container { | ||
display: none !important; | |||
} | } | ||
.vector-header. | /* Remove the pin/unpin buttons so nobody can toggle it */ | ||
.skin-vector-2022 .vector-pinnable-header-pin-button, | |||
.skin-vector-2022 .vector-pinnable-header-unpin-button { | |||
display: none !important; | |||
} | |||
/* Hide the Appearance trigger (glasses/moon icon + its label) */ | |||
.skin-vector-2022 [aria-label="Appearance"], | |||
.skin-vector-2022 .vector-appearance, | |||
.skin-vector-2022 #vector-appearance, | |||
.skin-vector-2022 .vector-appearance-menu, | |||
.skin-vector-2022 .vector-dropdown.vector-appearance { | |||
display: none !important; | |||
} | |||
/* If your site language isn't English, also hide by title text */ | |||
.skin-vector-2022 [title="Appearance"] { | |||
display: none !important; | |||
} | } | ||
/* Never show the sidebar Page tools, and remove pin/unpin UI */ | |||
.skin-vector-2022 #vector-page-tools-pinned-container { display: none !important; } | |||
.skin-vector-2022 .vector-pinnable-header-pin-button, | |||
.skin-vector-2022 .vector-pinnable-header-unpin-button { display: none !important; } | |||
html { | |||
background-color: white; | |||
} | } | ||
body { | |||
background-color: white; | background-color: white; | ||
} | } | ||
. | |||
.mw-logo-wordmark { | |||
} | } | ||
.vector- | .vector-menu-content-list span { | ||
} | } | ||
.vector- | .vector-icon.mw-ui-icon-menu.mw-ui-icon-wikimedia-menu { | ||
background-color: rgb(68, 71, 70) !important; | |||
background-color: | |||
} | } | ||
.vector- | .vector-icon.mw-ui-icon-userAvatar.mw-ui-icon-wikimedia-userAvatar { | ||
background-color: rgb(68, 71, 70)!important; | |||
} | } | ||
.vector- | .vector-icon.mw-ui-icon-watchlist.mw-ui-icon-wikimedia-watchlist { | ||
background-color: rgb(68, 71, 70)!important; | |||
} | } | ||
.vector-dropdown-label-text span { | |||
} | |||
#vector-user-links-dropdown-label::after { | |||
} | } | ||
. | .vector-header-container { | ||
width: 100%; | |||
background-color: #F8FAFD; | |||
} | } | ||
.vector-header.mw-header { | |||
background-color: #F8FAFD; | |||
} | } | ||
.mw-page-container { | |||
} | |||
| Line 111: | Line 101: | ||
/* | /* Keep the wrapper shape the same in all states */ | ||
. | .vector-search-box .cdx-text-input { | ||
border: 0; | |||
border-radius: 25px !important; | |||
background: transparent !important; | |||
box-shadow: none !important; | |||
transition: none !important; | |||
} | } | ||
/* | /* On focus, don't change size; (optional) keep same border color to avoid flicker */ | ||
.vector-search-box .cdx-text-input:focus-within { | |||
border: 0; | |||
.vector- | box-shadow: none !important; | ||
} | } | ||
/* | /* Actual input: fixed height/bg/radius, no border */ | ||
.vector-search-box .cdx-text-input__input, | |||
#searchInput { | |||
height: 42px !important; | |||
background-color: #E9EEF6 !important; | |||
border: 0; | |||
border-radius: 25px !important; | |||
box-shadow: none !important; | |||
} | } | ||
/* Fix your earlier typo so layout stays stable */ | |||
.cdx-search-input--has-end-button { | .cdx-search-input--has-end-button { | ||
border: | border: 0; | ||
background: transparent; | background: transparent; | ||
display; flex; | display: flex; /* was 'display; flex;' */ | ||
gap: | gap: 7px; | ||
} | } | ||
.cdx- | |||
.vector-header-end .cdx-text-input:focus-within, | |||
#vector-sticky-header .cdx-text-input:focus-within, | |||
.vector-header-end .cdx-text-input__input:focus, | |||
#vector-sticky-header .cdx-text-input__input:focus { | |||
background-color: #E9EEF6 !important; | |||
border: 0 !important; | |||
border-radius: 25px !important; | |||
box-shadow: none !important; | |||
outline: none !important; | |||
height: 42px !important; | |||
} | } | ||
.cdx-button.cdx-search-input__end-button { | |||
. | border-radius: 25px !important; | ||
background-color: rgb(194, 231, 255); | |||
border: 0; | |||
color: rgb(0, 29, 53); | |||
letter-spacing: 0.5px; | |||
} | } | ||
/* ===== 5. Heading font stack ===== */ | /* ===== 5. Heading font stack ===== */ | ||
| Line 212: | Line 173: | ||
h6 { | h6 { | ||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; | font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; | ||
} | } | ||
Latest revision as of 17:39, 4 November 2025
/* Vector 2022 CSS Styling */
.skin-vector-2022 #vector-main-menu-pinned-container {
display: none !important;
}
/* Remove the pin/unpin buttons so nobody can toggle it */
.skin-vector-2022 .vector-pinnable-header-pin-button,
.skin-vector-2022 .vector-pinnable-header-unpin-button {
display: none !important;
}
/* Hide the Appearance trigger (glasses/moon icon + its label) */
.skin-vector-2022 [aria-label="Appearance"],
.skin-vector-2022 .vector-appearance,
.skin-vector-2022 #vector-appearance,
.skin-vector-2022 .vector-appearance-menu,
.skin-vector-2022 .vector-dropdown.vector-appearance {
display: none !important;
}
/* If your site language isn't English, also hide by title text */
.skin-vector-2022 [title="Appearance"] {
display: none !important;
}
/* Never show the sidebar Page tools, and remove pin/unpin UI */
.skin-vector-2022 #vector-page-tools-pinned-container { display: none !important; }
.skin-vector-2022 .vector-pinnable-header-pin-button,
.skin-vector-2022 .vector-pinnable-header-unpin-button { display: none !important; }
html {
background-color: white;
}
body {
background-color: white;
}
.mw-logo-wordmark {
}
.vector-menu-content-list span {
}
.vector-icon.mw-ui-icon-menu.mw-ui-icon-wikimedia-menu {
background-color: rgb(68, 71, 70) !important;
}
.vector-icon.mw-ui-icon-userAvatar.mw-ui-icon-wikimedia-userAvatar {
background-color: rgb(68, 71, 70)!important;
}
.vector-icon.mw-ui-icon-watchlist.mw-ui-icon-wikimedia-watchlist {
background-color: rgb(68, 71, 70)!important;
}
.vector-dropdown-label-text span {
}
#vector-user-links-dropdown-label::after {
}
.vector-header-container {
width: 100%;
background-color: #F8FAFD;
}
.vector-header.mw-header {
background-color: #F8FAFD;
}
.mw-page-container {
}
/* Keep the wrapper shape the same in all states */
.vector-search-box .cdx-text-input {
border: 0;
border-radius: 25px !important;
background: transparent !important;
box-shadow: none !important;
transition: none !important;
}
/* On focus, don't change size; (optional) keep same border color to avoid flicker */
.vector-search-box .cdx-text-input:focus-within {
border: 0;
box-shadow: none !important;
}
/* Actual input: fixed height/bg/radius, no border */
.vector-search-box .cdx-text-input__input,
#searchInput {
height: 42px !important;
background-color: #E9EEF6 !important;
border: 0;
border-radius: 25px !important;
box-shadow: none !important;
}
/* Fix your earlier typo so layout stays stable */
.cdx-search-input--has-end-button {
border: 0;
background: transparent;
display: flex; /* was 'display; flex;' */
gap: 7px;
}
.vector-header-end .cdx-text-input:focus-within,
#vector-sticky-header .cdx-text-input:focus-within,
.vector-header-end .cdx-text-input__input:focus,
#vector-sticky-header .cdx-text-input__input:focus {
background-color: #E9EEF6 !important;
border: 0 !important;
border-radius: 25px !important;
box-shadow: none !important;
outline: none !important;
height: 42px !important;
}
.cdx-button.cdx-search-input__end-button {
border-radius: 25px !important;
background-color: rgb(194, 231, 255);
border: 0;
color: rgb(0, 29, 53);
letter-spacing: 0.5px;
}
/* ===== 5. Heading font stack ===== */
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}