MediaWiki:Common.css: Difference between revisions

No edit summary
No edit summary
 
(25 intermediate revisions by the same user not shown)
Line 209: Line 209:
}
}
/* =========================
/* =========================
   MOBILE SEARCH BOX FULL WIDTH FIX (REAL)
   MOBILE INPUTBOX SEARCH FIX
   ========================= */
   ========================= */


@media screen and (max-width: 768px) {
@media screen and (max-width: 768px) {


   /* Target ALL search forms on home */
   /* InputBox outer wrapper */
   body.page-Main_Page form,
   .mw-inputbox-centered,
   body.page-Home form {
  .mw-inputbox-inline,
   .mw-inputbox {
     width: 100% !important;
     width: 100% !important;
     max-width: 100% !important;
     max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
     box-sizing: border-box !important;
     box-sizing: border-box !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
   }
   }


   /* Target ALL input fields inside forms */
   /* The actual input field */
   body.page-Main_Page input[type="search"],
   .mw-inputbox-centered input,
   body.page-Home input[type="search"],
   .mw-inputbox-inline input,
  body.page-Main_Page input[type="text"],
   .mw-inputbox input {
   body.page-Home input[type="text"] {
     width: 100% !important;
     width: 100% !important;
     max-width: 100% !important;
     max-width: 100% !important;
     box-sizing: border-box !important;
     box-sizing: border-box !important;
     display: block !important;
     display: block !important;
    font-size: 18px !important;
    padding: 10px 12px !important;
   }
   }


   /* Make search container full width */
   /* The search button */
   body.page-Main_Page .searchbox,
   .mw-inputbox-centered button,
   body.page-Home .searchbox,
   .mw-inputbox-inline button,
   body.page-Main_Page .mw-search,
   .mw-inputbox button,
   body.page-Home .mw-search {
   .mw-inputbox-centered input[type="submit"] {
     width: 100% !important;
     width: 100% !important;
     max-width: 100% !important;
     max-width: 100% !important;
    margin-top: 10px !important;
    font-size: 18px !important;
    padding: 10px 0 !important;
   }
   }


}
/* =========================
  MOBILE CREATE PAGE LINK STYLE
  ========================= */
@media screen and (max-width: 768px) {
  .mw-mobile-create-page {
    color: #0645ad !important;
    cursor: pointer;
    text-decoration: underline;
  }
}
/* MediaWiki-style WhatsApp Support link (external link) */
.mw-parser-output a.external[href^="https://wa.me/"] {
  position: relative;
  padding-left: 26px;
  color: #0645ad;
  text-decoration: none;
}
/* WhatsApp icon exactly like MediaWiki action icons */
.mw-parser-output a.external[href^="https://wa.me/"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
/* Remove external link arrow for WhatsApp support */
.mw-parser-output a.external[href^="https://wa.me/"]::after {
  display: none !important;
}
/* Hide page title only on Home page */
.page-Home .firstHeading {
    display: none;
}
/* =================================================
  HIDE SPECIAL PAGES & UPLOAD FOR NON-ADMIN USERS
  ================================================= */
/* 1️⃣ Guest users (logged-out) */
body.mw-user-anon #n-specialpages,
body.mw-user-anon #t-upload {
    display: none !important;
}
/* 2️⃣ Logged-in normal users (NOT admin, NOT editor) */
body.mw-user-loggedin:not(.mw-group-sysop):not(.mw-group-editor) #n-specialpages,
body.mw-user-loggedin:not(.mw-group-sysop):not(.mw-group-editor) #t-upload {
    display: none !important;
}
#toc {
    display: none;
}
.infobox.biography {
    float: right;
    clear: right;
    width: 320px;
    margin: 0 0 1em 1em;
    border: 1px solid #a2a9b1;
    border-collapse: collapse;
    background: #ffffff;
    color: #202122;
    font-size: 88%;
    line-height: 1.5em;
}
.infobox.biography th,
.infobox.biography td {
    border: 1px solid #eaecf0;
    padding: 8px;
    vertical-align: top;
}
.infobox-title {
    background: #eaecf0;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    padding: 10px;
}
.infobox-image {
    text-align: center;
    background: #ffffff !important;
    padding: 10px;
}
.infobox-image img {
    background: #ffffff !important;
    border: none;
    box-shadow: none;
}
.infobox-caption {
    text-align: center;
    font-size: 90%;
    background: #ffffff;
}
.infobox.biography th {
    width: 120px;
    background: #f8f9fa;
    text-align: left;
    font-weight: bold;
}
/* Mobile responsive infobox */
@media screen and (max-width: 768px) {
    .infobox.biography {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 15px 0 !important;
        box-sizing: border-box;
        overflow-x: auto;
    }
    .infobox.biography table {
        width: 100% !important;
    }
    .infobox.biography th {
        width: 35% !important;
        word-break: break-word;
    }
    .infobox.biography td {
        width: 65% !important;
        word-break: break-word;
    }
    .infobox-image img {
        max-width: 100% !important;
        height: auto !important;
    }
    .infobox-title {
        font-size: 22px !important;
    }
}
}