Jump to content

MediaWiki:Common.css: Difference between revisions

From WikiHikmah
No edit summary
No edit summary
(2 intermediate revisions by the same user not shown)
Line 25: Line 25:
     margin: 1.25em auto !important;
     margin: 1.25em auto !important;
     box-sizing: border-box !important;
     box-sizing: border-box !important;
    border-left: 4px solid var(--wk-green) !important;
   }
   }


Line 42: Line 43:
   .mw-parser-output > ol {
   .mw-parser-output > ol {
     clear: both;
     clear: both;
  }
  #content {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
   }
   }


   .mw-body,
   .mw-body,
  #content,
   .vector-body,
   .vector-body,
  .mw-body-content,
  #bodyContent,
   .mw-parser-output {
   .mw-parser-output {
     padding-left: 1rem !important;
     padding-left: 0 !important;
     padding-right: 1rem !important;
     padding-right: 0 !important;
     box-sizing: border-box;
    margin-left: 0 !important;
    margin-right: 0 !important;
     box-sizing: border-box !important;
   }
   }


   .mw-body h1,
   .mw-body h1,
   .mw-parser-output h1 {
   .mw-parser-output h1 {
     font-size: 2.4rem;
     font-size: 2rem;
     line-height: 1.12;
     line-height: 1.12;
     margin-top: 0.6em;
     margin-top: 0.6em;
Line 72: Line 82:
   table.navbox ul {
   table.navbox ul {
     padding-left: 1.3em;
     padding-left: 1.3em;
  }
}
The key changes are:
width: calc(100% - 1.5rem) !important;
max-width: 34rem !important;
margin: 1.25em auto !important;
That stops the box from touching the sides and makes it feel more intentional.
3. Optional: reduce that green vertical stripe
The green stripe is visually very strong on mobile. If it is part of the series box styling, soften it.
Add this inside the same mobile block:
@media screen and (max-width: 768px) {
  .infobox,
  .navbox,
  table.infobox,
  table.navbox {
    border-left: 4px solid var(--wk-green) !important;
   }
   }
}
}

Revision as of 18:38, 1 May 2026

/* CSS placed here will be applied to all skins */

/* =========================================================
   Mobile fixes
   Prevent infoboxes / series boxes from crushing article text
   ========================================================= */

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

  .infobox,
  .navbox,
  .vertical-navbox,
  .metadata,
  table.infobox,
  table.navbox,
  table[style*="float:right"],
  table[style*="float: right"],
  div[style*="float:right"],
  div[style*="float: right"] {
    float: none !important;
    clear: both !important;
    width: calc(100% - 1.5rem) !important;
    max-width: 34rem !important;
    min-width: 0 !important;
    margin: 1.25em auto !important;
    box-sizing: border-box !important;
    border-left: 4px solid var(--wk-green) !important;
  }

  .infobox img,
  .navbox img,
  table.infobox img,
  table.navbox img {
    max-width: 80% !important;
    height: auto !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .mw-parser-output > p,
  .mw-parser-output > ul,
  .mw-parser-output > ol {
    clear: both;
  }

   #content {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  .mw-body,
  .vector-body,
  .mw-body-content,
  #bodyContent,
  .mw-parser-output {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  .mw-body h1,
  .mw-parser-output h1 {
    font-size: 2rem;
    line-height: 1.12;
    margin-top: 0.6em;
    margin-bottom: 0.55em;
  }

  .mw-body h2,
  .mw-parser-output h2 {
    font-size: 1.55rem;
    line-height: 1.2;
  }

  .infobox ul,
  .navbox ul,
  table.infobox ul,
  table.navbox ul {
    padding-left: 1.3em;
  }
}