|
|
| (22 intermediate revisions by the same user not shown) |
| Line 32: |
Line 32: |
|
| |
|
|
| |
|
| | html { |
|
| |
|
| | background-color: white; |
|
| |
|
| /*
| |
| /* ===== 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;
| | body { |
| border-top-right-radius: 25px !important;
| |
| padding-top: 25px !important;
| |
| | |
| }
| |
|
| |
|
| body {
| |
| background-color: white; | | background-color: white; |
| margin-top: 15px;
| |
| }
| |
|
| |
|
|
| |
|
| .mw-content-container {
| | } |
| background-color: #F8FAFD;
| |
| padding-bottom: 2.25rem;
| |
| padding-right: 3.25rem;
| |
|
| |
|
|
| |
|
| }
| | .mw-logo-wordmark { |
| | |
| .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 { | | .vector-menu-content-list span { |
| background-color: #C2E7FF;
| |
|
| |
|
| } | | } |
|
| |
|
| .vector-pinnable-header { | | .vector-icon.mw-ui-icon-menu.mw-ui-icon-wikimedia-menu { |
| border-bottom: 1px solid #8b8b8b;
| |
| }
| |
|
| |
|
| .mw-page-container {
| | background-color: rgb(68, 71, 70) !important; |
| background-color: #F8FAFD; | |
| border-bottom-left-radius: 25px !important;
| |
| border-bottom-right-radius: 25px !important;
| |
| } | | } |
|
| |
|
| .vector-sitenotice-container { | | .vector-icon.mw-ui-icon-userAvatar.mw-ui-icon-wikimedia-userAvatar { |
| background-color: #F8FAFD;
| |
|
| |
|
| | background-color: rgb(68, 71, 70)!important; |
| } | | } |
|
| |
|
| .vector-column-start { | | .vector-icon.mw-ui-icon-watchlist.mw-ui-icon-wikimedia-watchlist { |
| background-color: #F8FAFD;
| | background-color: rgb(68, 71, 70)!important; |
| margin-left: 0;
| |
| } | | } |
|
| |
|
| | .vector-dropdown-label-text span { |
|
| |
|
| /* Inner footer containers get the same color so there’s no visible seam */
| | } |
| .vector-footer-container,
| |
|
| |
|
| .mw-footer {
| | #vector-user-links-dropdown-label::after { |
| background-color: #F8FAFD;
| |
| border-top: 1px solid #35a2c9;
| |
|
| |
|
| } | | } |
|
| |
|
| | .vector-header-container { |
| | width: 100%; |
| | background-color: #F8FAFD; |
|
| |
|
| | } |
|
| |
|
| .mw-footer-container { | | .vector-header.mw-header { |
| padding-left: 3.25rem;
| | background-color: #F8FAFD; |
| padding-right: 3.25rem;
| |
| | |
|
| |
|
| } | | } |
|
| |
|
|
| |
|
| | .mw-page-container { |
|
| |
|
| .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;
| |
| } | | } |
|
| |
|
| Line 145: |
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; |
| | 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; |
|
| |
|
| | } |
|
| |
|
| /* ===== 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 */ | | /* Fix your earlier typo so layout stays stable */ |
| .mw-logo, | | .cdx-search-input--has-end-button { |
| .mw-logo-wordmark,
| | border: 0; |
| .vector-sticky-header .mw-logo,
| | background: transparent; |
| .vector-sticky-header .mw-logo-wordmark {
| | display: flex; /* was 'display; flex;' */ |
| opacity: 1 !important;
| | gap: 7px; |
| } | | } |
|
| |
|
| /* ===== 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:focus-within, |
| .vector-header-end .cdx-text-input, | | #vector-sticky-header .cdx-text-input:focus-within, |
| #vector-sticky-header .cdx-text-input { | | .vector-header-end .cdx-text-input__input:focus, |
| border-radius: 14px !important; | | #vector-sticky-header .cdx-text-input__input:focus { |
| border: 1px solid #35a2c9 !important; | | background-color: #E9EEF6 !important; |
| | border: 0 !important; |
| | border-radius: 25px !important; |
| box-shadow: none !important; | | box-shadow: none !important; |
| background-color: #fff; | | outline: none !important; |
| }
| | height: 42px !important; |
| .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{ | | .cdx-button.cdx-search-input__end-button { |
| border-radius: 11px !important;
| | border-radius: 25px !important; |
| border: 1px solid #35a2c9 !important;
| | background-color: rgb(194, 231, 255); |
| | border: 0; |
| | color: rgb(0, 29, 53); |
| | letter-spacing: 0.5px; |
| } | | } |
|
| |
|
|
| |
|
| /* 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 ===== */ | | /* ===== 5. Heading font stack ===== */ |
| Line 250: |
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; |
| }
| |
|
| |
|
| /* ===== 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;
| |
| }
| |
|
| |
| */
| |
