"മീഡിയവിക്കി:Common.css" എന്ന താളിന്റെ പതിപ്പുകൾ തമ്മിലുള്ള വ്യത്യാസം
No edit summary |
Optimize the css |
||
| വരി 1: | വരി 1: | ||
/* CSS placed here will be applied to all skins | /* CSS placed here will be applied to all skins */ | ||
/* ───────────────────────────────────────────── | |||
BASE TYPOGRAPHY | |||
───────────────────────────────────────────── */ | |||
html, body { font-size: 1.1em !important; } | |||
p { | p { | ||
font-size:1.1em; | font-size: 1.1em; | ||
line-height:1.6; | line-height: 1.6; | ||
-webkit-hyphens: auto; | -webkit-hyphens: auto; | ||
hyphens: auto; | |||
hyphens: auto; | |||
} | } | ||
img { | |||
max-width: 100%; | |||
height: auto; | |||
} | } | ||
/* | /* ───────────────────────────────────────────── | ||
HIDE MAIN PAGE TITLE | |||
body.page-പ്രധാനതാൾ h1.firstHeading { display:none; } | ───────────────────────────────────────────── */ | ||
body.page-പ്രധാനതാൾ #breadcrumbs2 {display: none !important;} | |||
span.Uniq1234 a { color: #fff !important; font-size:0.9em; font-weight:normal; | .page-പ്രധാന_താൾ .firstHeading { display: none !important; } | ||
/* | body.page-പ്രധാനതാൾ h1.firstHeading { display: none; } | ||
.vector-header-container {border-bottom:3px solid #ccc;} | body.page-പ്രധാനതാൾ #breadcrumbs2 { display: none !important; } | ||
/* wikitable/prettytable | |||
span.Uniq1234 a { color: #fff !important; font-size: 0.9em; font-weight: normal; } | |||
/* ───────────────────────────────────────────── | |||
SITE HEADER | |||
───────────────────────────────────────────── */ | |||
.vector-header-container { border-bottom: 3px solid #ccc; } | |||
/* ───────────────────────────────────────────── | |||
TABLES — wikitable / prettytable | |||
───────────────────────────────────────────── */ | |||
table.wikitable, | table.wikitable, | ||
| വരി 34: | വരി 45: | ||
border: 1px #aaa solid; | border: 1px #aaa solid; | ||
border-collapse: collapse; | border-collapse: collapse; | ||
max-width: 100%; | |||
} | } | ||
| വരി 55: | വരി 67: | ||
} | } | ||
/* | /* ───────────────────────────────────────────── | ||
HORIZONTAL LISTS (hlist) | |||
───────────────────────────────────────────── */ | |||
.hlist dl, .hlist ol, .hlist ul { margin: 0; } | |||
.hlist dl, | .hlist dd, .hlist dt, .hlist li { | ||
.hlist ol, | display: inline; | ||
.hlist ul { | margin: 0; | ||
white-space: nowrap; | |||
.hlist dd, | |||
.hlist dt, | |||
.hlist li { | |||
} | } | ||
.hlist dl dl, .hlist ol ol, .hlist ul ul { display: inline; } | |||
.hlist dl dl dd:first-child:before, | |||
.hlist ol ol li:first-child:before, | .hlist dd dl, .hlist dt dl, .hlist li ol, .hlist li ul { white-space: normal; } | ||
.hlist ul ul li:first-child:before { | |||
.hlist dt::after { content: ":"; } | |||
.hlist dl dl dd:last-child:after, | .hlist dd::after, | ||
.hlist ol ol li:last-child:after, | .hlist li::after { content: " ·"; font-weight: bold; } | ||
.hlist ul ul li:last-child:after { | |||
.hlist dd:last-child::after, | |||
.hlist dt:last-child::after, | |||
} | .hlist li:last-child::after { content: none; } | ||
.hlist dl dl dd:first-child::before, | |||
.hlist ol ol li:first-child::before, | |||
.hlist ul ul li:first-child::before { content: "("; } | |||
.hlist dl dl dd:last-child::after, | |||
.hlist ol ol li:last-child::after, | |||
.hlist ul ul li:last-child::after { content: ")"; font-weight: normal; } | |||
.hlist.hnum ol li { counter-increment: level1; } | |||
.hlist.hnum ol li::before { content: counter(level1) " "; } | |||
.hlist.hnum ol ol li { counter-increment: level2; } | |||
.hlist.hnum ol ol li:first-child::before { content: "(" counter(level2) " "; } | |||
.hlist.hnum ol ol li::before { content: counter(level2) " "; } | |||
/* ───────────────────────────────────────────── | |||
UNBULLETED LISTS | |||
───────────────────────────────────────────── */ | |||
.plainlist ul { line-height: inherit; list-style: none; margin: 0; } | |||
.plainlist ul li { margin-bottom: 0; } | |||
/* | /* ───────────────────────────────────────────── | ||
NAVBOX | |||
───────────────────────────────────────────── */ | |||
.navbox { | |||
. | border: 1px solid #aaa; | ||
width: 100%; | |||
margin: auto; | |||
clear: both; | |||
font-size: 88%; | |||
text-align: center; | |||
padding: 1px; | |||
} | } | ||
.navbox-inner, | .navbox-inner, | ||
.navbox-subgroup { | .navbox-subgroup { width: 100%; } | ||
.navbox th, | .navbox th, | ||
.navbox-title, | .navbox-title, | ||
.navbox-abovebelow { | .navbox-abovebelow { | ||
text-align: center; | |||
padding-left: 1em; | |||
padding-right: 1em; | |||
} | } | ||
th.navbox-group { | |||
th.navbox-group { | |||
white-space: nowrap; | |||
text-align: right; /* @noflip */ | |||
} | } | ||
.navbox, .navbox-subgroup { background: #fdfdfd; } | |||
.navbox-list { border-color: #fdfdfd; } | |||
.navbox th, .navbox-title { background: #ccccff; } | |||
.navbox-abovebelow, | .navbox-abovebelow, | ||
th.navbox-group, | th.navbox-group, | ||
.navbox-subgroup .navbox-title { | .navbox-subgroup .navbox-title { background: #ddddff; } | ||
.navbox-subgroup .navbox-group, | .navbox-subgroup .navbox-group, | ||
.navbox-subgroup .navbox-abovebelow { | .navbox-subgroup .navbox-abovebelow { background: #e6e6ff; } | ||
.navbox-even { background: #f7f7f7; } | |||
.navbox-even { | .navbox-odd { background: transparent; } | ||
} | table.navbox + table.navbox { margin-top: -1px; } | ||
.navbox-odd { | |||
table.navbox + table.navbox { | |||
.navbox .hlist td dl, | .navbox .hlist td dl, | ||
.navbox .hlist td ol, | .navbox .hlist td ol, | ||
| വരി 207: | വരി 164: | ||
.navbox td.hlist dl, | .navbox td.hlist dl, | ||
.navbox td.hlist ol, | .navbox td.hlist ol, | ||
.navbox td.hlist ul { | .navbox td.hlist ul { padding: 0.125em 0; } | ||
ol + table.navbox, | ol + table.navbox, | ||
ul + table.navbox { | ul + table.navbox { margin-top: 0.5em; } | ||
} | /* ───────────────────────────────────────────── | ||
NAVBAR | |||
───────────────────────────────────────────── */ | |||
.navbar { display: inline; font-size: 88%; font-weight: normal; } | |||
.navbar ul { display: inline; white-space: nowrap; } | |||
.navbar li { word-spacing: -0.125em; } | |||
.navbar.mini li span { font-variant: small-caps; } | |||
.navbox .navbar { display: block; font-size: 100%; } | |||
.navbox-title .navbar { | .navbox-title .navbar { | ||
float: left; /* @noflip */ | |||
text-align: left; /* @noflip */ | |||
margin-right: 0.5em; /* @noflip */ | |||
width: 6em; | |||
} | } | ||
/* | /* ───────────────────────────────────────────── | ||
COLLAPSIBLE BUTTONS | |||
───────────────────────────────────────────── */ | |||
.collapseButton { | .collapseButton { | ||
float: right; /* @noflip */ | |||
font-weight: normal; | |||
margin-left: 0.5em; /* @noflip */ | |||
text-align: right; /* @noflip */ | |||
width: auto; | |||
/* | |||
} | } | ||
.navbox .collapseButton { width: 6em; } | |||
.mw-collapsible-toggle { | .mw-collapsible-toggle { | ||
font-weight: normal; | |||
text-align: right; /* @noflip */ | |||
} | } | ||
/* | .navbox .mw-collapsible-toggle { width: 6em; } | ||
/* ───────────────────────────────────────────── | |||
INFOBOX | |||
───────────────────────────────────────────── */ | |||
.infobox { | .infobox { | ||
border: 1px solid #aaa; | |||
background-color: #f9f9f9; | |||
color: black; | |||
margin-bottom: 0.5em; | |||
margin-left: 1em; | |||
padding: 0.2em; | |||
float: right; | |||
clear: right; | |||
max-width: 25em; | |||
} | } | ||
.infobox th{font-size:0.8em;font-weight:bold;} | |||
.infobox th { font-size: 0.8em; font-weight: bold; } | |||
.infobox td, | .infobox td, | ||
.infobox th { | .infobox th { | ||
vertical-align: top; | |||
border-top: solid 1px #ccd2d9; | |||
text-align: left; | |||
padding-left: 6px; | |||
font-size: 0.9em; | |||
} | } | ||
.infobox.sisterproject { | .infobox caption { font-size: larger; margin-left: inherit; } | ||
.infobox.bordered { border-collapse: collapse; } | |||
.infobox.bordered td, .infobox.bordered th { border: 1px solid #aaa; } | |||
} | .infobox.bordered .borderless td, .infobox.bordered .borderless th { border: 0; } | ||
.infobox.sisterproject { width: 20em; font-size: 90%; } | |||
.infobox.bordered .mergedtoprow td, | .infobox.bordered .mergedtoprow td, | ||
.infobox.bordered .mergedtoprow th { | .infobox.bordered .mergedtoprow th { | ||
border: 0; | |||
border-top: 1px solid #aaa; | |||
border-right: 1px solid #aaa; | |||
} | } | ||
.infobox.bordered .mergedrow td, | .infobox.bordered .mergedrow td, | ||
.infobox.bordered .mergedrow th { | .infobox.bordered .mergedrow th { | ||
border: 0; | |||
border-right: 1px solid #aaa; | |||
} | } | ||
.infobox.geography { | .infobox.geography { | ||
text-align: left; | |||
border-collapse: collapse; | |||
line-height: 1.2em; | |||
font-size: 90%; | |||
} | } | ||
.infobox.geography | .infobox.geography td, | ||
.infobox.geography | .infobox.geography th { border-top: solid 1px #aaa; padding: 0.4em 0.6em; } | ||
.infobox.geography .mergedtoprow td, | .infobox.geography .mergedtoprow td, | ||
.infobox.geography .mergedtoprow th { | .infobox.geography .mergedtoprow th { | ||
border-top: solid 1px #aaa; | |||
padding: 0.4em 0.6em 0.2em; | |||
} | } | ||
.infobox.geography .mergedrow td, | .infobox.geography .mergedrow td, | ||
.infobox.geography .mergedrow th { | .infobox.geography .mergedrow th { border: 0; padding: 0 0.6em 0.2em; } | ||
} | |||
.infobox.geography .mergedbottomrow td, | .infobox.geography .mergedbottomrow td, | ||
.infobox.geography .mergedbottomrow th { | .infobox.geography .mergedbottomrow th { | ||
border-top: 0; | |||
border-bottom: solid 1px #aaa; | |||
padding: 0 0.6em 0.4em; | |||
} | } | ||
.infobox.geography .maptable td, | .infobox.geography .maptable td, | ||
.infobox.geography .maptable th { | .infobox.geography .maptable th { border: 0; padding: 0; } | ||
/* ───────────────────────────────────────────── | |||
NOTICES | |||
───────────────────────────────────────────── */ | |||
.notice { margin: 1em; padding: 0.2em; } | |||
#disambig { background-color: #f4f4f4; font-size: 90%; } | |||
#spoiler { border-top: 2px solid #ddd; border-bottom: 2px solid #ddd; } | |||
/* ───────────────────────────────────────────── | |||
REDIRECT STYLING (Special:Allpages) | |||
───────────────────────────────────────────── */ | |||
.allpagesredirect a { | |||
background: url(http://upload.wikimedia.org/wikipedia/ml/5/5c/Allpagesredirect.gif) center left no-repeat; | |||
padding-left: 13px; | |||
} | } | ||
.allpagesredirect { background-color: #f0f0f0; font-style: italic; font-size: 90%; } | |||
/* | /* ───────────────────────────────────────────── | ||
. | EDITOR | ||
───────────────────────────────────────────── */ | |||
#wpSave { font-weight: bold; } | |||
#wikiEditor-0-dialog-summary { max-width: 400px; width: 100%; } | |||
#wpTextbox1 { font-size: 1.2em; } | |||
#t-upload { display: none !important; } | |||
/* ───────────────────────────────────────────── | |||
MISC HELPERS | |||
───────────────────────────────────────────── */ | |||
.hiddenStructure { display: inline !important; color: #f00; background-color: #0f0; } | |||
.nounderlines a { text-decoration: none; } | |||
.IPA a:link, .IPA a:visited { text-decoration: none; } | |||
.nowraplinks a { white-space: nowrap; } | |||
.template-documentation { | |||
clear: both; | |||
margin: 1em 0 0; | |||
border: 1px solid #aaa; | |||
background-color: #ecfcf4; | |||
padding: 5px; | |||
} | } | ||
/* ───────────────────────────────────────────── | |||
NAVFRAME | |||
───────────────────────────────────────────── */ | |||
div.NavFrame { | |||
margin: 0; | |||
padding: 4px; | |||
border: 1px solid #a2a9b1; | |||
text-align: center; | |||
border-collapse: collapse; | |||
font-size: 95%; | |||
} | } | ||
div.NavFrame + div.NavFrame { border-top: none; } | |||
. | |||
. | |||
div.NavPic { | |||
background-color: #fff; | |||
margin: 0; | |||
padding: 2px; | |||
float: left; /* @noflip */ | |||
} | |||
div.NavFrame div.NavHead { | |||
line-height: 1.6em; | |||
font-weight: bold; | font-weight: bold; | ||
background-color: #ccf; | |||
position: relative; | |||
} | } | ||
div.NavFrame p, | |||
. | div.NavFrame div.NavContent, | ||
div.NavFrame div.NavContent p { font-size: 100%; } | |||
div.NavEnd { margin: 0; padding: 0; line-height: 1px; clear: both; } | |||
a.NavToggle { | |||
position: absolute; | |||
top: 0; | |||
right: 3px; /* @noflip */ | |||
font-weight: normal; | |||
font-size: 90%; | |||
} | } | ||
/* | /* ───────────────────────────────────────────── | ||
. | MESSAGEBOX | ||
───────────────────────────────────────────── */ | |||
.messagebox { | |||
border: 1px solid #aaa; | |||
background-color: #f9f9f9; | |||
width: 80%; | |||
margin: 0 auto 1em; | |||
padding: 0.2em; | |||
} | } | ||
.messagebox.merge { border: 1px solid #c0b8cc; background-color: #f0e5ff; text-align: center; } | |||
. | .messagebox.cleanup { border: 1px solid #9f9fff; background-color: #efefff; text-align: center; } | ||
.messagebox.standard-talk { border: 1px solid #c0c090; background-color: #f8eaba; } | |||
} | |||
.messagebox.nested-talk { | |||
border: 1px solid #c0c090; | |||
background-color: #f8eaba; | |||
width: 100%; | |||
margin: 2px 4px; | |||
} | } | ||
.messagebox.small-talk { | .messagebox.small-talk { | ||
| വരി 439: | വരി 398: | ||
clear: both; | clear: both; | ||
margin: 0 0 1em 1em; | margin: 0 0 1em 1em; | ||
line-height: 1.25em; | line-height: 1.25em; | ||
background: # | background: #f8eaba; | ||
} | } | ||
/* | /* ───────────────────────────────────────────── | ||
MAIN PAGE BOXES | |||
───────────────────────────────────────────── */ | |||
div. | div.firstBoxes { | ||
font-size: 1.6em; | |||
margin: 0.5em 0; | |||
text-align: center; | |||
font-weight: bold; | |||
width: 25%; | |||
float: left; | |||
min-height: 200px; | |||
} | } | ||
div.firstBoxes a { font-size: 0.7em; line-height: 0.8; } | |||
. | |||
} | |||
/* | /* ───────────────────────────────────────────── | ||
HEADING & LOCATION | |||
───────────────────────────────────────────── */ | |||
#firstHeading { font-weight: 700; font-size: 2em; padding: 22px 12px !important; } | |||
} | |||
.location { position: absolute; top: -50px; right: 10px; } | |||
. | |||
} | |||
/* ───────────────────────────────────────────── | |||
WATCHLIST COLORS | |||
───────────────────────────────────────────── */ | |||
.mw-plusminus-pos { color: darkgreen; } | |||
. | .mw-plusminus-neg { color: darkred; } | ||
} | |||
/* ───────────────────────────────────────────── | |||
PRINT | |||
───────────────────────────────────────────── */ | |||
@media print { | |||
#stub, | |||
#footer-places, | |||
#privacy, | |||
#about, | |||
#disclaimer { display: none; } | |||
} | |||
.infobox.sisterproject { display: none; } | |||
. | |||
. | |||
} | |||
} | } | ||
/* ───────────────────────────────────────────── | |||
SITENOTICE | |||
───────────────────────────────────────────── */ | |||
.sw-sitenotice-outer { | .sw-sitenotice-outer { | ||
background: #ffffff; | background: #ffffff; | ||
| വരി 626: | വരി 456: | ||
} | } | ||
.sw-sitenotice-grid { | .sw-sitenotice-grid { | ||
max-width: 1100px; | max-width: 1100px; | ||
margin: 0 auto; | margin: 0 auto; | ||
padding: 10px 12px; | padding: 10px 12px; | ||
display: grid; | display: grid; | ||
grid-template-columns: 4fr 1fr; | grid-template-columns: 4fr 1fr; | ||
gap: 16px; | gap: 16px; | ||
align-items: start; | align-items: start; | ||
} | } | ||
.sw-main-card { | .sw-main-card { | ||
| വരി 651: | വരി 475: | ||
} | } | ||
.sw-main-image img { | .sw-main-image img { max-width: 64px; height: auto; } | ||
.sw-main-content { flex: 1; } | |||
} | |||
.sw-main-content { | |||
} | |||
.sw-main-title { | .sw-main-title { | ||
| വരി 665: | വരി 483: | ||
margin-bottom: 6px; | margin-bottom: 6px; | ||
line-height: 1.3; | line-height: 1.3; | ||
border-bottom:2px solid #aaa | border-bottom: 2px solid #aaa; | ||
} | } | ||
.sw-main-links { font-size: 90%; line-height: 1.6; } | |||
.sw-login-box { | .sw-login-box { | ||
| വരി 685: | വരി 496: | ||
} | } | ||
.sw-login-box div { | .sw-login-box div { margin: 6px 0; } | ||
.sw-login-box a { text-decoration: none; color: #0645ad; display: inline-block; } | |||
} | .sw-login-box a:hover { text-decoration: underline; } | ||
/* ───────────────────────────────────────────── | |||
COMMONS GALLERY | |||
───────────────────────────────────────────── */ | |||
.commons-gallery { width: 100%; margin: 1em 0; } | |||
.commons-gallery { | |||
} | |||
.commons-gallery-grid { | .commons-gallery-grid { | ||
| വരി 804: | വരി 512: | ||
} | } | ||
.commons-gallery-item { | .commons-gallery-item { margin: 0; } | ||
} | |||
.commons-gallery-item img { | .commons-gallery-item img { | ||
| വരി 813: | വരി 519: | ||
display: block; | display: block; | ||
border-radius: 4px; | border-radius: 4px; | ||
cursor: pointer; | |||
} | } | ||
| വരി 822: | വരി 529: | ||
} | } | ||
/* | /* ───────────────────────────────────────────── | ||
COMMONS GALLERY LIGHTBOX | |||
───────────────────────────────────────────── */ | |||
#commons-lightbox { | #commons-lightbox { | ||
| വരി 849: | വരി 538: | ||
display: none; | display: none; | ||
z-index: 9999; | z-index: 9999; | ||
user-select: none; | user-select: none; | ||
-webkit-user-select: none; | -webkit-user-select: none; | ||
} | } | ||
#commons-lightbox.active { | #commons-lightbox.active { display: block; } | ||
} | |||
#commons-lightbox .clb-backdrop { | #commons-lightbox .clb-backdrop { | ||
position: absolute; | position: absolute; | ||
| വരി 867: | വരി 550: | ||
} | } | ||
#commons-lightbox .clb-content { | #commons-lightbox .clb-content { | ||
position: absolute; | position: absolute; | ||
| വരി 876: | വരി 558: | ||
align-items: center; | align-items: center; | ||
padding: 1em; | padding: 1em; | ||
pointer-events: none; | |||
} | } | ||
#commons-lightbox .clb-image { | #commons-lightbox .clb-image { | ||
max-width: 95vw; | max-width: 95vw; | ||
| വരി 884: | വരി 566: | ||
object-fit: contain; | object-fit: contain; | ||
display: block; | display: block; | ||
pointer-events: auto; | |||
} | } | ||
#commons-lightbox .clb-caption { | #commons-lightbox .clb-caption { | ||
color: #ffffff; | color: #ffffff; | ||
| വരി 894: | വരി 576: | ||
line-height: 1.4; | line-height: 1.4; | ||
max-width: 90vw; | max-width: 90vw; | ||
pointer-events: auto; | |||
} | } | ||
#commons-lightbox .clb-close { | #commons-lightbox .clb-close { | ||
position: absolute; | position: absolute; | ||
top: 10px; | top: 10px; | ||
right: 14px; | right: 14px; | ||
font-size: | font-size: 2rem; | ||
color: #ffffff; | color: #ffffff; | ||
background: none; | background: none; | ||
| വരി 907: | വരി 589: | ||
cursor: pointer; | cursor: pointer; | ||
z-index: 2; | z-index: 2; | ||
padding: 8px; | |||
line-height: 1; | |||
pointer-events: auto; | |||
} | } | ||
#commons-lightbox .clb-prev, | #commons-lightbox .clb-prev, | ||
#commons-lightbox .clb-next { | #commons-lightbox .clb-next { | ||
| വരി 915: | വരി 599: | ||
top: 50%; | top: 50%; | ||
transform: translateY(-50%); | transform: translateY(-50%); | ||
font-size: | font-size: 2.25rem; | ||
color: #ffffff; | color: #ffffff; | ||
background: none; | background: none; | ||
border: none; | border: none; | ||
cursor: pointer; | cursor: pointer; | ||
padding: | padding: 12px; | ||
z-index: 2; | z-index: 2; | ||
pointer-events: auto; | |||
} | } | ||
#commons-lightbox .clb-prev { | #commons-lightbox .clb-prev { left: 10px; } | ||
#commons-lightbox .clb-next { right: 10px; } | |||
} | |||
@media (hover: hover) { | @media (hover: hover) { | ||
#commons-lightbox .clb-prev:hover, | #commons-lightbox .clb-prev:hover, | ||
#commons-lightbox .clb-next:hover, | #commons-lightbox .clb-next:hover, | ||
#commons-lightbox .clb-close:hover { | #commons-lightbox .clb-close:hover { opacity: 0.75; } | ||
} | |||
/* ═══════════════════════════════════════════════ | |||
RESPONSIVE — MOBILE FIRST | |||
═══════════════════════════════════════════════ */ | |||
/* ── Tablet (≤ 900px) ── */ | |||
@media screen and (max-width: 900px) { | |||
th.navbox-group { | |||
white-space: normal; | |||
text-align: left; | |||
} | |||
div.firstBoxes { | |||
width: 33%; | |||
min-height: auto; | |||
} | } | ||
} | } | ||
/* Mobile | /* ── Mobile (≤ 768px) ── */ | ||
@media (max-width: | @media screen and (max-width: 768px) { | ||
html, body { font-size: 1em !important; } | |||
p { font-size: 1em; line-height: 1.7; } | |||
#firstHeading { | |||
font-size: 1.4em !important; | |||
padding: 12px 8px !important; | |||
} | |||
/* Tables: horizontal scroll instead of overflow */ | |||
table.wikitable, | |||
table.prettytable { | |||
display: block; | |||
overflow-x: auto; | |||
-webkit-overflow-scrolling: touch; | |||
margin: 0.5em 0; | |||
} | |||
/* Infobox: full-width, no float */ | |||
.infobox { | |||
float: none !important; | |||
margin: 0.75em auto !important; | |||
width: 100% !important; | |||
max-width: 100%; | |||
} | |||
/* Messageboxes */ | |||
.messagebox { | |||
width: 100% !important; | |||
margin: 0.5em 0 !important; | |||
box-sizing: border-box; | |||
} | |||
.messagebox.small-talk { | |||
float: none !important; | |||
width: 100% !important; | |||
margin: 0.5em 0 !important; | |||
} | |||
/* Main-page boxes: 2-column */ | |||
div.firstBoxes { | |||
width: 50%; | |||
min-height: auto; | |||
font-size: 1.3em; | |||
} | |||
/* Location: remove absolute positioning */ | |||
.location { | |||
position: static !important; | |||
top: auto; | |||
right: auto; | |||
margin: 0.5em 0; | |||
} | |||
/* Sitenotice: stack columns */ | |||
.sw-sitenotice-grid { grid-template-columns: 1fr; } | |||
.sw-main-card { | |||
flex-direction: column; | |||
align-items: center; | |||
text-align: center; | |||
} | |||
.sw-main-image img { max-width: 56px; } | |||
.sw-login-box { text-align: center; font-size: 80%; } | |||
.sw-login-box div { margin: 4px 0; } | |||
/* Lightbox nav buttons */ | |||
#commons-lightbox .clb-prev, | #commons-lightbox .clb-prev, | ||
#commons-lightbox .clb-next { | #commons-lightbox .clb-next { font-size: 1.75rem; padding: 16px; } | ||
font-size: | } | ||
/* ── Small Mobile (≤ 480px) ── */ | |||
@media screen and (max-width: 480px) { | |||
html, body { font-size: 0.95em !important; } | |||
/* Stack all firstBoxes */ | |||
div.firstBoxes { | |||
width: 100% !important; | |||
float: none !important; | |||
min-height: auto; | |||
font-size: 1.2em; | |||
display: block; | |||
} | } | ||
.navbox { font-size: 82%; } | |||
.commons-gallery-grid { | |||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); | |||
gap: 6px; | |||
} | } | ||
.commons-gallery-item figcaption { font-size: 0.7em; } | |||
#commons-lightbox .clb-caption { font-size: 0.8em; } | |||
} | } | ||