MediaWiki:Common.css: Difference between revisions
From AbhiprayaVedi
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* ===== | /* ===== CLEAN TIMESS SKIN CSS - NO DUPLICATIONS ===== */ | ||
/* 1. TITLE - | /* 1. TITLE - CENTERED, TIGHT SPACING */ | ||
h1#firstHeading, | h1#firstHeading, | ||
#mw-content-text .firstHeading, | #mw-content-text .firstHeading, | ||
.mw-parser-output .firstHeading { | .mw-parser-output .firstHeading { | ||
| Line 9: | Line 8: | ||
font-size: 2.2em !important; | font-size: 2.2em !important; | ||
text-align: center !important; | text-align: center !important; | ||
margin | margin: 0 0 0.1em 0 !important; | ||
line-height: 1.1 !important; | line-height: 1.1 !important; | ||
} | } | ||
| Line 17: | Line 16: | ||
.mw-parser-output .article-meta { | .mw-parser-output .article-meta { | ||
text-align: center !important; | text-align: center !important; | ||
margin: 0 | margin: 0 0 0.4em 0 !important; | ||
font-size: 1.1em !important; | font-size: 1.1em !important; | ||
font-weight: bold !important; | font-weight: bold !important; | ||
color: #444 !important; | color: #444 !important; | ||
line-height: 1.1 !important; | line-height: 1.1 !important; | ||
} | } | ||
.article-meta p { display: inline !important; margin: 0 !important; } | |||
.meta-line { | |||
display: inline-flex !important; | display: inline-flex !important; | ||
align-items: baseline !important; | align-items: baseline !important; | ||
| Line 36: | Line 30: | ||
gap: 0.5em !important; | gap: 0.5em !important; | ||
} | } | ||
.meta-sep { margin: 0 0.3em !important; } | |||
.meta-sep { | |||
} | |||
/* 3. MAIN WRAPPER */ | /* 3. MAIN WRAPPER */ | ||
| Line 51: | Line 42: | ||
} | } | ||
.article- | /* 4. CONTENT - PERFECT FLOW */ | ||
margin- | .article-content { | ||
font-size: 1.1em; | |||
overflow: visible !important; | |||
margin-top: 0 !important; | |||
padding-top: 0 !important; | |||
clear: both !important; | |||
} | } | ||
.article-content p { | .article-content p { | ||
text-indent: 0 !important; | text-indent: 0 !important; | ||
margin: 0. | margin: 0.1em 0 0.8em 0 !important; | ||
padding: 0 !important; | padding: 0 !important; | ||
} | } | ||
.article-content p:first-of-type, | |||
.article-content p:first-child, | |||
#mw-content-block .article-content p:first-child { | |||
.article-content p:first-child { | |||
margin-top: 0 !important; | margin-top: 0 !important; | ||
padding-top: 0 !important; | padding-top: 0 !important; | ||
} | } | ||
/* 5. FLOATBOX - RIGHT SIDE */ | |||
/* 5. FLOATBOX - | |||
.article-floatbox { | .article-floatbox { | ||
float: right !important; | float: right !important; | ||
width: 220px !important; | width: 220px !important; | ||
margin: | margin: -10px 0 1em 1.5em !important; | ||
background: #f8f9fa; | background: #f8f9fa; | ||
padding: 12px; | padding: 12px; | ||
border-left: 4px solid #dee2e6; | border-left: 4px solid #dee2e6; | ||
position: relative; | |||
z-index: 2; | |||
} | } | ||
| Line 99: | Line 86: | ||
float: none !important; | float: none !important; | ||
width: 100% !important; | width: 100% !important; | ||
} | } | ||
| Line 120: | Line 106: | ||
} | } | ||
/* 6. | /* 6. IMAGE1 - TEXT WRAP */ | ||
.thumb { | |||
float: left !important; | |||
margin: 0.1em 1em 0.5em 0 !important; | |||
clear: none !important; | |||
} | |||
/* 7. OTHER SECTIONS */ | |||
.article-intro { | .article-intro { | ||
font-size: 1.2em; | font-size: 1.2em; | ||
| Line 129: | Line 122: | ||
} | } | ||
.article-author-bio { | .article-author-bio { | ||
margin-top: 30px; | margin-top: 30px; | ||
| Line 147: | Line 139: | ||
} | } | ||
/* 8. MOBILE | /* 8. MOBILE */ | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.article-wrapper { | .article-wrapper { max-width: 100%; padding: 10px; } | ||
.article-floatbox { | |||
float: none !important; | |||
width: 100% !important; | |||
.article-floatbox { | margin: 10px 0 !important; | ||
float: none !important; | |||
width: 100% !important; | |||
margin: 10px 0 !important; | |||
} | } | ||
} | } | ||
Revision as of 13:28, 1 February 2026
/* ===== CLEAN TIMESS SKIN CSS - NO DUPLICATIONS ===== */
/* 1. TITLE - CENTERED, TIGHT SPACING */
h1#firstHeading,
#mw-content-text .firstHeading,
.mw-parser-output .firstHeading {
font-family: Georgia, serif !important;
font-size: 2.2em !important;
text-align: center !important;
margin: 0 0 0.1em 0 !important;
line-height: 1.1 !important;
}
/* 2. META - SINGLE LINE, MINIMAL SPACE */
#mw-content-text .article-meta,
.mw-parser-output .article-meta {
text-align: center !important;
margin: 0 0 0.4em 0 !important;
font-size: 1.1em !important;
font-weight: bold !important;
color: #444 !important;
line-height: 1.1 !important;
}
.article-meta p { display: inline !important; margin: 0 !important; }
.meta-line {
display: inline-flex !important;
align-items: baseline !important;
white-space: nowrap !important;
gap: 0.5em !important;
}
.meta-sep { margin: 0 0.3em !important; }
/* 3. MAIN WRAPPER */
.article-wrapper {
max-width: 900px;
margin: 0 auto;
padding: 15px;
font-family: Georgia, serif;
line-height: 1.6;
background: #fdfcfc;
}
/* 4. CONTENT - PERFECT FLOW */
.article-content {
font-size: 1.1em;
overflow: visible !important;
margin-top: 0 !important;
padding-top: 0 !important;
clear: both !important;
}
.article-content p {
text-indent: 0 !important;
margin: 0.1em 0 0.8em 0 !important;
padding: 0 !important;
}
.article-content p:first-of-type,
.article-content p:first-child,
#mw-content-block .article-content p:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* 5. FLOATBOX - RIGHT SIDE */
.article-floatbox {
float: right !important;
width: 220px !important;
margin: -10px 0 1em 1.5em !important;
background: #f8f9fa;
padding: 12px;
border-left: 4px solid #dee2e6;
position: relative;
z-index: 2;
}
.article-floatbox h3 {
margin: 0 0 8px 0 !important;
font-size: 0.95em !important;
}
/* HIGHLIGHTS BELOW THUMBNAIL */
.article-highlights {
margin-top: 12px !important;
float: none !important;
width: 100% !important;
}
.article-highlights ul {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.article-highlights li {
margin-bottom: 10px !important;
padding-bottom: 6px !important;
border-bottom: 1px solid #dee2e6 !important;
font-size: 0.9em;
}
.article-highlights li:last-child {
margin-bottom: 0 !important;
border-bottom: none !important;
}
/* 6. IMAGE1 - TEXT WRAP */
.thumb {
float: left !important;
margin: 0.1em 1em 0.5em 0 !important;
clear: none !important;
}
/* 7. OTHER SECTIONS */
.article-intro {
font-size: 1.2em;
background: #f8f9fa;
padding: 16px;
border-left: 5px solid #adb5bd;
margin-bottom: 18px;
}
.article-author-bio {
margin-top: 30px;
font-size: 0.9em;
font-style: normal !important;
background: #f1f3f4;
padding: 15px;
border-radius: 6px;
border-top: 2px solid #dee2e6;
}
.article-source {
margin-top: 25px;
font-size: 0.9em;
border-top: 1px solid #dee2e6;
padding-top: 15px;
}
/* 8. MOBILE */
@media (max-width: 768px) {
.article-wrapper { max-width: 100%; padding: 10px; }
.article-floatbox {
float: none !important;
width: 100% !important;
margin: 10px 0 !important;
}
}