Jump to content

MediaWiki:Mainpage.css: Difference between revisions

From ZelocoreCMS Wiki
← Older edit

Digiwayen (talk | contribs)

3 user groups
102 edits
No edit summary
Tag: Reverted
Undid 3 revisions from 102 until 106
Tag: Undo
 
Line 1: Line 1:
/* MediaWiki:Mainpage.css - Improved for current Main Page structure */
/* MediaWiki:Mainpage.css - Dedicated CSS for the Main Page layout */


/* =========================================================
/* Hide the page title on Main_Page */
  MAIN PAGE ONLY
#firstHeading, .firstHeading, .mw-page-title-main, .page-header__title { display: none !important; }
  ========================================================= */
 
body.page-Main_Page #firstHeading,
body.page-Main_Page .firstHeading,
body.page-Main_Page .mw-page-title-main,
body.page-Main_Page .page-header__title {
display: none !important;
}
 
body.page-Main_Page .mw-parser-output {
font-size: 100%;
line-height: 1.6;
}
 
/* =========================================================
  TOP BANNER
  ========================================================= */


/* Top banner */
#mp-topbanner {
#mp-topbanner {
background: #cee0f2;
  background: #cee0f2;
border: 1px solid #a2a9b1;
  border: 1px solid #a2a9b1;
padding: 12px 16px;
  padding: 12px 16px;
margin: 0 0 14px 0;
  margin-bottom: 14px;
text-align: center;
  text-align: center;
font-size: 1.05em;
  font-size: 1.05em;
line-height: 1.5;
box-sizing: border-box;
}
}


#mp-topbanner small {
/* Two-column layout */
display: block;
margin-top: 4px;
font-size: 0.92em;
}
 
/* =========================================================
  UPPER TWO-COLUMN AREA
  ========================================================= */
 
#mp-upper {
#mp-upper {
display: flex;
  display: flex;
flex-wrap: nowrap;
  flex-wrap: wrap;
gap: 15px;
  gap: 15px;
margin: 0 0 14px 0;
  margin-bottom: 14px;
align-items: flex-start;
  align-items: flex-start;
}
}


#mp-left {
#mp-left {
flex: 1 1 55%;
  flex: 1 1 55%;
min-width: 0;
  min-width: 300px;
}
}


#mp-right {
#mp-right {
flex: 1 1 45%;
  flex: 1 1 40%;
min-width: 0;
  min-width: 300px;
}
}


/* =========================================================
/* Headings */
  SECTION HEADERS
  ========================================================= */
 
.mp-h2 {
.mp-h2 {
background: #cee0f2;
  background: #cee0f2;
border: 1px solid #a2a9b1;
  border: 1px solid #a2a9b1;
border-bottom: none;
  border-bottom: none;
padding: 6px 10px;
  padding: 5px 10px;
margin: 0;
  font-size: 1em;
font-size: 1em;
  font-weight: bold;
font-weight: 700;
  color: #202122;
line-height: 1.4;
  margin: 0;
color: #202122;
}
}
.mp-h2-yellow { background: #fef6e7; }
.mp-h2-green  { background: #ecf5ec; }
.mp-h2-gray  { background: #dce3ee; }


.mp-h2-yellow {
/* Body of sections */
background: #fef6e7;
}
 
.mp-h2-green {
background: #ecf5ec;
}
 
.mp-h2-gray {
background: #dce3ee;
}
 
/* =========================================================
  SECTION BODY
  ========================================================= */
 
.mp-body {
.mp-body {
background: #ffffff;
  background: #ffffff;
border: 1px solid #a2a9b1;
  border: 1px solid #a2a9b1;
border-top: none;
  border-top: none;
padding: 10px 12px;
  padding: 10px 12px;
margin: 0 0 12px 0;
  margin-bottom: 12px;
font-size: 0.95em;
  font-size: 0.9em;
line-height: 1.65;
  line-height: 1.6;
color: #202122;
  color: #202122;
box-sizing: border-box;
  overflow-x: auto; /* Allow tables to scroll on small screens */
word-wrap: break-word;
overflow-wrap: break-word;
}
 
/* Text */
.mp-body p {
margin: 0 0 0.8em 0;
}
 
.mp-body p:last-child {
margin-bottom: 0;
}
 
.mp-body small {
display: inline-block;
margin-top: 6px;
}
 
/* Lists */
.mp-body ul,
.mp-body ol {
margin: 0.3em 0 0.8em 1.4em;
padding: 0;
}
 
.mp-body li {
margin: 0.2em 0;
}
 
.mp-body li:empty {
display: none;
}
 
/* Links */
.mp-body a {
text-decoration: none;
}
 
.mp-body a:hover {
text-decoration: underline;
}
 
/* Images */
.mp-body img {
max-width: 100%;
height: auto;
}
 
/* =========================================================
  WIKITABLES INSIDE MAIN PAGE
  ========================================================= */
 
.mp-body .wikitable {
width: 100% !important;
margin: 0.4em 0 0.8em 0 !important;
border-collapse: collapse;
font-size: 0.95em;
background: #fff;
}
 
.mp-body .wikitable th,
.mp-body .wikitable td {
padding: 8px 10px;
border: 1px solid #c8ccd1;
vertical-align: top;
line-height: 1.45;
}
 
.mp-body .wikitable th {
background: #eaecf0;
text-align: left;
font-weight: 700;
}
 
.mp-body .wikitable td {
background: #fff;
}
 
/* Scroll tables only when needed */
.mp-body .wikitable {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
.mp-body ul { margin: 0; padding-left: 1.5em; }


/* =========================================================
/* Portal grid */
  BROWSE BY CATEGORY TABLE
  ========================================================= */
 
/* Style the plain wiki table used in the category section */
.mp-body > table {
width: 100% !important;
border-collapse: collapse;
margin: 0;
}
 
.mp-body > table td {
width: 50%;
vertical-align: top;
padding: 0 6px 0 0;
}
 
.mp-body > table td:last-child {
padding-right: 0;
padding-left: 6px;
}
 
.mp-body > table ul {
margin-top: 0;
margin-bottom: 0;
}
 
/* =========================================================
  PORTALS
  ========================================================= */
 
#mp-portals {
#mp-portals {
margin-top: 14px;
  margin-top: 14px;
border: 1px solid #a2a9b1;
  border: 1px solid #a2a9b1;
box-sizing: border-box;
background: #ffffff;
}
}
#mp-portals-header {
#mp-portals-header {
background: #dce3ee;
  background: #dce3ee;
border-bottom: 1px solid #a2a9b1;
  border-bottom: 1px solid #a2a9b1;
padding: 6px 12px;
  padding: 6px 12px;
font-weight: 700;
  font-weight: bold;
font-size: 0.95em;
  font-size: 0.95em;
line-height: 1.4;
color: #202122;
}
}
.mp-portal-grid {
.mp-portal-grid {
display: flex;
  display: flex;
flex-wrap: wrap;
  flex-wrap: wrap;
background: #ffffff;
  background: #ffffff;
}
}
.mp-portal-cell {
.mp-portal-cell {
flex: 1 1 15%;
  flex: 1 1 15%;
min-width: 120px;
  min-width: 120px;
border-right: 1px solid #eaecf0;
  border-right: 1px solid #eaecf0;
border-bottom: 1px solid #eaecf0;
  border-bottom: 1px solid #eaecf0;
padding: 10px 8px;
  padding: 10px 8px;
text-align: center;
  text-align: center;
font-size: 0.9em;
  font-size: 0.85em;
line-height: 1.45;
box-sizing: border-box;
transition: background-color 0.15s ease-in-out;
}
 
.mp-portal-cell:hover {
background: #eaf3fb;
}
 
.mp-portal-cell a {
color: #3366cc;
font-weight: 700;
display: block;
text-decoration: none;
}
 
.mp-portal-cell a:hover {
text-decoration: underline;
}
 
.mp-portal-icon {
display: block;
font-size: 1.8em;
line-height: 1;
margin-bottom: 4px;
}
 
.mp-portal-desc {
display: block;
margin-top: 2px;
color: #54595d;
font-size: 0.85em;
font-weight: 400;
line-height: 1.4;
}
 
/* =========================================================
  RESPONSIVE
  ========================================================= */
 
@media screen and (max-width: 1000px) {
#mp-upper {
display: block;
margin-bottom: 0;
}
 
#mp-left,
#mp-right {
width: 100%;
display: block;
margin-bottom: 15px;
}
 
.mp-portal-cell {
flex: 1 1 30%;
}
}
 
@media screen and (max-width: 700px) {
.mp-body > table,
.mp-body > table tbody,
.mp-body > table tr,
.mp-body > table td {
display: block;
width: 100% !important;
}
 
.mp-body > table td {
padding: 0 0 8px 0 !important;
}
}
 
@media screen and (max-width: 600px) {
#mp-topbanner {
padding: 10px;
font-size: 0.98em;
}
 
.mp-h2 {
padding: 6px 8px;
font-size: 0.98em;
}
 
.mp-body {
padding: 8px 10px;
font-size: 0.95em;
}
 
.mp-body ul,
.mp-body ol {
margin-left: 1.2em;
}
 
.mp-portal-cell {
flex: 1 1 45%;
padding: 10px 6px;
}
}
}
.mp-portal-cell:hover { background: #eaf3fb; }
.mp-portal-cell a { color: #3366cc; font-weight: bold; display: block; text-decoration: none; }
.mp-portal-icon { font-size: 1.8em; display: block; margin-bottom: 4px; }
.mp-portal-desc { display: block; color: #54595d; font-size: 0.85em; margin-top: 2px; font-weight: normal; }


@media screen and (max-width: 400px) {
/* Responsive adjustments */
.mp-portal-cell {
@media screen and (max-width: 768px) {
flex: 1 1 100%;
  #mp-upper { display: block; }
}
  #mp-left, #mp-right { width: 100%; display: block; }
  .mp-portal-cell { flex: 1 1 45%; }
}
}

Latest revision as of 13:26, 29 July 2026

/* MediaWiki:Mainpage.css - Dedicated CSS for the Main Page layout */

/* Hide the page title on Main_Page */
#firstHeading, .firstHeading, .mw-page-title-main, .page-header__title { display: none !important; }

/* Top banner */
#mp-topbanner {
  background: #cee0f2;
  border: 1px solid #a2a9b1;
  padding: 12px 16px;
  margin-bottom: 14px;
  text-align: center;
  font-size: 1.05em;
}

/* Two-column layout */
#mp-upper {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 14px;
  align-items: flex-start;
}

#mp-left {
  flex: 1 1 55%;
  min-width: 300px;
}

#mp-right {
  flex: 1 1 40%;
  min-width: 300px;
}

/* Headings */
.mp-h2 {
  background: #cee0f2;
  border: 1px solid #a2a9b1;
  border-bottom: none;
  padding: 5px 10px;
  font-size: 1em;
  font-weight: bold;
  color: #202122;
  margin: 0;
}
.mp-h2-yellow { background: #fef6e7; }
.mp-h2-green  { background: #ecf5ec; }
.mp-h2-gray   { background: #dce3ee; }

/* Body of sections */
.mp-body {
  background: #ffffff;
  border: 1px solid #a2a9b1;
  border-top: none;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 0.9em;
  line-height: 1.6;
  color: #202122;
  overflow-x: auto; /* Allow tables to scroll on small screens */
}
.mp-body ul { margin: 0; padding-left: 1.5em; }

/* Portal grid */
#mp-portals {
  margin-top: 14px;
  border: 1px solid #a2a9b1;
}
#mp-portals-header {
  background: #dce3ee;
  border-bottom: 1px solid #a2a9b1;
  padding: 6px 12px;
  font-weight: bold;
  font-size: 0.95em;
}
.mp-portal-grid {
  display: flex;
  flex-wrap: wrap;
  background: #ffffff;
}
.mp-portal-cell {
  flex: 1 1 15%;
  min-width: 120px;
  border-right: 1px solid #eaecf0;
  border-bottom: 1px solid #eaecf0;
  padding: 10px 8px;
  text-align: center;
  font-size: 0.85em;
}
.mp-portal-cell:hover { background: #eaf3fb; }
.mp-portal-cell a { color: #3366cc; font-weight: bold; display: block; text-decoration: none; }
.mp-portal-icon { font-size: 1.8em; display: block; margin-bottom: 4px; }
.mp-portal-desc { display: block; color: #54595d; font-size: 0.85em; margin-top: 2px; font-weight: normal; }

/* Responsive adjustments */
@media screen and (max-width: 768px) {
  #mp-upper { display: block; }
  #mp-left, #mp-right { width: 100%; display: block; }
  .mp-portal-cell { flex: 1 1 45%; }
}
Retrieved from "https://zelocorecms.org/index.php?title=MediaWiki:Mainpage.css&oldid=107"