MediaWiki:Vector-2022.css: Difference between revisions

No edit summary
No edit summary
 
(4 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;


 
 
 
 
 
/* 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 {
#searchInput {
    background-color: #E9EEF6 !important;
  height: 42px !important;
height: 43px;
  background-color: #E9EEF6 !important;
color: rgb(31, 31, 31);
  border: 0;
letter-spacing: 0.5px;
  border-radius: 25px !important;
  box-shadow: none !important;
 
}
}




.vector-header-end .cdx-text-input__input,
/* Fix your earlier typo so layout stays stable */
#vector-sticky-header .cdx-text-input__input {
.cdx-search-input--has-end-button {
    border: 0 !important;
  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-search-input--has-end-button {
border: 0px;
background: transparent;
display; flex;
gap: 7px;
}


.cdx-button.cdx-search-input__end-button{
.cdx-button.cdx-search-input__end-button {
  border-radius: 12px !important;
border-radius: 25px !important;
width: 80px;
background-color: rgb(194, 231, 255);
  background-color: rgb(194, 231, 255);
border: 0;
border: 0;
color: rgb(0, 29, 53);
color: rgb(0, 29, 53);
letter-spacing: 0.5px;
letter-spacing: 0.5px;
}
}