Jump to content

MediaWiki:Vector-2022.css: Difference between revisions

From WikiFave
No edit summary
No edit summary
 
(3 intermediate revisions by the same user not shown)
Line 96: Line 96:




/* ===== 4. Search field styling (rounded pill look) ===== */
.vector-header-end .cdx-text-input,
#vector-sticky-header .cdx-text-input {
    border-radius: 25px !important;
    box-shadow: none !important;


 
}








/* 0) Clean duplicates (pick ONE radius). I’m using 25px everywhere. */
/* Keep the wrapper shape the same in all states */
.vector-header-end .cdx-text-input,
#vector-sticky-header .cdx-text-input {
  border-radius: 25px !important;
  box-shadow: none !important;
}
 
/* 1) Keep the WRAPPER border width constant so height never pops on focus */
.vector-search-box .cdx-text-input {
.vector-search-box .cdx-text-input {
   border: 1px solid #c5d0e3 !important; /* constant width */
   border: 0;
   border-radius: 25px !important;
   border-radius: 25px !important;
   background: transparent !important;
   background: transparent !important;
Line 124: Line 110:
}
}


/* On hover/focus-within, keep the same dimensions (optional: tint border) */
/* On focus, don't change size; (optional) keep same border color to avoid flicker */
.vector-search-box .cdx-text-input:hover,
.vector-search-box .cdx-text-input:focus-within {
.vector-search-box .cdx-text-input:focus-within {
   border: 1px solid #7aa2ff !important;  /* or #c5d0e3 if you want zero change */
   border: 0;
  border-radius: 25px !important;
  background: transparent !important;
   box-shadow: none !important;
   box-shadow: none !important;
  transition: none !important;
}
}


/* 2) The ACTUAL input element (your #searchInput is here in the header) */
/* Actual input: fixed height/bg/radius, no border */
.vector-search-box .cdx-text-input__input,
.vector-search-box .cdx-text-input__input,
#searchInput {
#searchInput {
  box-sizing: border-box !important;
   height: 42px !important;
   height: 42px !important;
  line-height: 42px !important;
   background-color: #E9EEF6 !important;
  padding: 0 14px !important;
   border: 0;
   background-color: #E9EEF6 !important;  /* stop white flash */
  color: #1f1f1f !important;
   border: 0 !important;                   /* border lives on wrapper */
   border-radius: 25px !important;
   border-radius: 25px !important;
  outline: none !important;
   box-shadow: none !important;
   box-shadow: none !important;
  transition: none !important;
 
}
}


/* Keep the same bg/shape when hovered/focused */
.vector-search-box .cdx-text-input:hover .cdx-text-input__input,
.vector-search-box .cdx-text-input:focus-within .cdx-text-input__input,
.vector-search-box .cdx-text-input__input:focus,
.vector-search-box .cdx-text-input__input:focus-visible {
  background-color: #E9EEF6 !important;
  border-radius: 25px !important;
  outline: none !important;
  box-shadow: none !important;
  transition: none !important;
}


/* 3) Make sure the Search button doesn’t force layout changes */
/* Fix your earlier typo so layout stays stable */
.cdx-search-input--has-end-button {
.cdx-search-input--has-end-button {
   border: 0;
   border: 0;
   background: transparent;
   background: transparent;
   display: flex;     /* (fixed your typo) */
   display: flex;                     /* was 'display; flex;' */
   gap: 7px;
   gap: 7px;
}
}


/* Harmonize button height with the input */
 
.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 {
.cdx-button.cdx-search-input__end-button {
  height: 42px !important;
border-radius: 25px !important;
  line-height: 42px !important;
background-color: rgb(194, 231, 255);
  padding: 0 14px !important;
border: 0;
  border-radius: 12px !important;         /* your style */
color: rgb(0, 29, 53);
  background-color: rgb(194, 231, 255) !important;
letter-spacing: 0.5px;
  border: 0 !important;
  color: rgb(0, 29, 53) !important;
  letter-spacing: 0.5px !important;
  box-shadow: none !important;
  transition: none !important;
}
}


/* 4) If there’s a start (magnifier) icon, keep padding stable */
 
.cdx-text-input--has-start-icon .cdx-text-input__input {
 
  padding-left: 36px !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;

}