Jump to content

MediaWiki:Vector-2022.css: Difference between revisions

From WikiFave
No edit summary
No edit summary
 
(35 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Vector 2022 CSS Styling */
/* Vector 2022 CSS Styling */


/* ===== 1. Header + footer background ===== */
 
.vector-header-container .vector-header,
.skin-vector-2022 #vector-main-menu-pinned-container {
.vector-sticky-header-container,
  display: none !important;
#vector-sticky-header {
    background-color: #F8FAFD;
 
}
}


.vector-header.mw-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;
}


border-top-left-radius: 25px !important;
/* Hide the Appearance trigger (glasses/moon icon + its label) */
border-top-right-radius: 25px !important;
.skin-vector-2022 [aria-label="Appearance"],
padding-top: 25px !important;
.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;
}
}


body {
/* Never show the sidebar Page tools, and remove pin/unpin UI */
background-color: white;
.skin-vector-2022 #vector-page-tools-pinned-container { display: none !important; }
margin-top: 15px;
.skin-vector-2022 .vector-pinnable-header-pin-button,
margin-bottom: 15px;
.skin-vector-2022 .vector-pinnable-header-unpin-button { display: none !important; }
}


.mw-content-container {
background-color: #F8FAFD;
padding-bottom: 2.25rem;
padding-right: 3.25rem;


html {


}
background-color:  white;


.mw-body #bodyContent {
background-color: white;
border-radius: 15px;
margin-top: 19px;
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 {
body {
background-color: #C2E7FF;


}
background-color: white;


.vector-pinnable-header {
border-bottom: 1px solid #8b8b8b;
}


.mw-page-container {
background-color: #F8FAFD;
}
}


.mw-page-container {
border-bottom-left-radius: 25px !important;
border-bottom-right-radius: 25px !important;
}


.vector-sitenotice-container {
.mw-logo-wordmark {
background-color: #F8FAFD;


}
}


.vector-column-start {
.vector-menu-content-list span {
    background-color: #F8FAFD;
 
margin-left: 0;
}
}


.vector-icon.mw-ui-icon-menu.mw-ui-icon-wikimedia-menu {


/* Inner footer containers get the same color so there’s no visible seam */
background-color: rgb(68, 71, 70) !important;
.vector-footer-container,
}


.mw-footer {
.vector-icon.mw-ui-icon-userAvatar.mw-ui-icon-wikimedia-userAvatar {
    background-color: #F8FAFD;
border-top: 1px solid #35a2c9;


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 {


.mw-footer-container {
}
padding-left: 3.25rem;
padding-right: 3.25rem;


#vector-user-links-dropdown-label::after {


}
}


.vector-header-container {
width: 100%;
background-color: #F8FAFD;


}


.mw-page-container {
.vector-header.mw-header {
padding-left: 0;
background-color: #F8FAFD;
padding-right: 0;
}


.vector-sticky-pinned-container::after {
    content: none !important;
    display: none !important;
    background: none !important;
    box-shadow: none !important;
}
}




.mw-page-container {




}




Line 118: Line 101:




/* ===== 2. Wordmark / site name next to logo ===== */
/* Keep the wrapper shape the same in all states */
.mw-logo-wordmark {
.vector-search-box .cdx-text-input {
    color: rgb(77, 77, 80);
  border: 0;
    font-size: 1.25rem !important;
  border-radius: 25px !important;
    font-weight: 600;
  background: transparent !important;
    letter-spacing: 1px;
  box-shadow: none !important;
    line-height: 1.2;
  transition: none !important;
}
}


/* ensure logo never looks faded */
/* On focus, don't change size; (optional) keep same border color to avoid flicker */
.mw-logo,
.vector-search-box .cdx-text-input:focus-within {
.mw-logo-wordmark,
  border: 0;
.vector-sticky-header .mw-logo,
  box-shadow: none !important;
.vector-sticky-header .mw-logo-wordmark {
    opacity: 1 !important;
}
}


/* ===== 3. "Hamburger" / main menu toggle button ===== */
/* Actual input: fixed height/bg/radius, no border */
#vector-main-menu-dropdown-label.cdx-button--icon-only {
.vector-search-box .cdx-text-input__input,
    background-color: rgb(32, 33, 36) !important;
#searchInput {
    color: #fff;
  height: 42px !important;
    border-radius: 4px;
  background-color: #E9EEF6 !important;
    padding: 4px 6px;
  border: 0;
}
  border-radius: 25px !important;
#vector-main-menu-dropdown-label .vector-icon {
  box-shadow: none !important;
    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;
}


/* Fix your earlier typo so layout stays stable */
.cdx-search-input--has-end-button {
.cdx-search-input--has-end-button {
border: 0px;
  border: 0;
background: transparent;
  background: transparent;
display; flex;
  display: flex;                      /* was 'display; flex;' */
gap: 3px;
  gap: 7px;
}
}


.cdx-button.cdx-search-input__end-button{
 
  border-radius: 11px !important;
.vector-header-end .cdx-text-input:focus-within,
  border: 1px solid #35a2c9 !important;
#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;
}
}




/* keep the pill shape consistent everywhere */
.cdx-button.cdx-search-input__end-button {
.vector-header-end .cdx-text-input,
border-radius: 25px !important;
#vector-sticky-header .cdx-text-input {
background-color: rgb(194, 231, 255);
    border-radius: 14px !important;
border: 0;
color: rgb(0, 29, 53);
letter-spacing: 0.5px;
}
}


/* 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 219: 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;
}
}

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;

}