|
|
| Line 30: |
Line 30: |
| .skin-vector-2022 .vector-pinnable-header-pin-button, | | .skin-vector-2022 .vector-pinnable-header-pin-button, |
| .skin-vector-2022 .vector-pinnable-header-unpin-button { display: none !important; } | | .skin-vector-2022 .vector-pinnable-header-unpin-button { display: none !important; } |
|
| |
|
| |
|
| |
|
| |
| /*
| |
| /* ===== 1. Header + footer background ===== */
| |
| .vector-header-container .vector-header,
| |
| .vector-sticky-header-container,
| |
| #vector-sticky-header {
| |
| background-color: #F8FAFD;
| |
|
| |
| }
| |
|
| |
| .vector-header.mw-header {
| |
|
| |
| border-top-left-radius: 25px !important;
| |
| border-top-right-radius: 25px !important;
| |
| padding-top: 25px !important;
| |
|
| |
| }
| |
|
| |
| body {
| |
| background-color: white;
| |
| margin-top: 15px;
| |
| }
| |
|
| |
|
| |
| .mw-content-container {
| |
| background-color: #F8FAFD;
| |
| padding-bottom: 2.25rem;
| |
| padding-right: 3.25rem;
| |
|
| |
|
| |
| }
| |
|
| |
| .mw-body #bodyContent {
| |
| background-color: white;
| |
| border-radius: 15px;
| |
| margin-top: 28px;
| |
| padding: 15px;
| |
| }
| |
|
| |
| .vector-pinned-container {
| |
| border-radius: 7px;
| |
| padding-left:20px;
| |
| padding-right:20px;
| |
| padding-top:17px;
| |
| padding-bottom:17px;
| |
| background-color: #F8FAFD;
| |
| }
| |
|
| |
| .vector-pinnable-header-toggle-button {
| |
| background-color: #C2E7FF;
| |
|
| |
| }
| |
|
| |
| .vector-pinnable-header {
| |
| border-bottom: 1px solid #8b8b8b;
| |
| }
| |
|
| |
| .mw-page-container {
| |
| background-color: #F8FAFD;
| |
| border-bottom-left-radius: 25px !important;
| |
| border-bottom-right-radius: 25px !important;
| |
| }
| |
|
| |
| .vector-sitenotice-container {
| |
| background-color: #F8FAFD;
| |
|
| |
| }
| |
|
| |
| .vector-column-start {
| |
| background-color: #F8FAFD;
| |
| margin-left: 0;
| |
| }
| |
|
| |
|
| |
| /* Inner footer containers get the same color so there’s no visible seam */
| |
| .vector-footer-container,
| |
|
| |
| .mw-footer {
| |
| background-color: #F8FAFD;
| |
| border-top: 1px solid #35a2c9;
| |
|
| |
| }
| |
|
| |
|
| |
|
| |
| .mw-footer-container {
| |
| padding-left: 3.25rem;
| |
| padding-right: 3.25rem;
| |
|
| |
|
| |
| }
| |
|
| |
|
| |
|
| |
| .mw-page-container {
| |
| padding-left: 0;
| |
| padding-right: 0;
| |
| }
| |
|
| |
| .vector-sticky-pinned-container::after {
| |
| content: none !important;
| |
| display: none !important;
| |
| background: none !important;
| |
| box-shadow: none !important;
| |
| }
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
| |
| /* ===== 2. Wordmark / site name next to logo ===== */
| |
| .mw-logo-wordmark {
| |
| color: rgb(77, 77, 80);
| |
| font-size: 1.25rem !important;
| |
| font-weight: 600;
| |
| letter-spacing: 1px;
| |
| line-height: 1.2;
| |
| }
| |
|
| |
| /* ensure logo never looks faded */
| |
| .mw-logo,
| |
| .mw-logo-wordmark,
| |
| .vector-sticky-header .mw-logo,
| |
| .vector-sticky-header .mw-logo-wordmark {
| |
| opacity: 1 !important;
| |
| }
| |
|
| |
| /* ===== 3. "Hamburger" / main menu toggle button ===== */
| |
| #vector-main-menu-dropdown-label.cdx-button--icon-only {
| |
| background-color: rgb(32, 33, 36) !important;
| |
| color: #fff;
| |
| border-radius: 4px;
| |
| padding: 4px 6px;
| |
| }
| |
| #vector-main-menu-dropdown-label .vector-icon {
| |
| filter: invert(1);
| |
| }
| |
|
| |
| /* ===== 4. Search field styling (rounded pill look) ===== */
| |
| .vector-header-end .cdx-text-input,
| |
| #vector-sticky-header .cdx-text-input {
| |
| border-radius: 14px !important;
| |
| border: 1px solid #35a2c9 !important;
| |
| box-shadow: none !important;
| |
| background-color: #fff;
| |
| }
| |
| .vector-header-end .cdx-text-input__input,
| |
| #vector-sticky-header .cdx-text-input__input {
| |
| border-radius: 14px !important;
| |
| border: 0 !important;
| |
| }
| |
|
| |
| .cdx-search-input--has-end-button {
| |
| border: 0px;
| |
| background: transparent;
| |
| display; flex;
| |
| gap: 3px;
| |
| }
| |
|
| |
| .cdx-button.cdx-search-input__end-button{
| |
| border-radius: 11px !important;
| |
| border: 1px solid #35a2c9 !important;
| |
| }
| |
|
| |
|
| |
| /* keep the pill shape consistent everywhere */
| |
| .vector-header-end .cdx-text-input,
| |
| #vector-sticky-header .cdx-text-input {
| |
| border-radius: 14px !important;
| |
| }
| |
|
| |
| /* force the inner <input> to match, and remove its own border */
| |
| .vector-header-end .cdx-text-input__input,
| |
| #vector-sticky-header .cdx-text-input__input {
| |
| border-radius: 14px !important;
| |
| border: 0 !important;
| |
| outline: none !important;
| |
| box-shadow: none !important;
| |
| background-color: transparent !important; /* don't draw a second layer */
| |
| }
| |
|
| |
| /* when focused: only draw ONE highlight (outer), not two stacked borders */
| |
| .vector-header-end .cdx-text-input:focus-within,
| |
| #vector-sticky-header .cdx-text-input:focus-within {
| |
| border-radius: 14px !important;
| |
|
| |
| /* pick the color you like for active state */
| |
| border: 1px solid #2a70d6 !important;
| |
|
| |
| /* if you want the "glow", keep box-shadow. if you hate the double edge,
| |
| you can make it a softer single glow that doesn't create a sharp second ring */
| |
| box-shadow: 0 0 0 1px rgba(42,112,214,0.15) !important;
| |
|
| |
| background-color: rgba(255,255,255,0.9) !important;
| |
| }
| |
|
| |
| /* also kill any extra outline the <input> itself tries to add on focus */
| |
| .vector-header-end .cdx-text-input__input:focus,
| |
| #vector-sticky-header .cdx-text-input__input:focus {
| |
| outline: none !important;
| |
| box-shadow: none !important;
| |
| }
| |
|
| |
| /* ===== 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;
| |
| }
| |
|
| |
| /* ===== 6. Slightly slimmer header bar ===== */
| |
| .vector-header {
| |
| padding-top: 0.4rem;
| |
| padding-bottom: 0.4rem;
| |
| }
| |
| #vector-sticky-header {
| |
| padding-top: 0.4rem;
| |
| padding-bottom: 0.4rem;
| |
| }
| |
|
| |
| */
| |
