Toggle search
Toggle menu
41
155
5
1.5K
Wizards and Warlords
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Common.css: Difference between revisions

MediaWiki interface page
More actions
← Older editNewer edit →
Aurelian (talk | contribs)
Bureaucrats, Interface administrators, Administrators
1,509 edits
No edit summary
No edit summary
Line 4: Line 4:
.toc-page .toc {
.toc-page .toc {
float: right;
float: right;
width: 26%;
width: 320px;
max-width: 320px;
min-width: 220px;
margin: 0 0 16px 24px;
margin: 0 0 16px 24px;
clear: right;
clear: right;
Line 21: Line 19:
.toc-page > h2:first-of-type,
.toc-page > h2:first-of-type,
.toc-page > .mw-heading2:first-of-type {
.toc-page > .mw-heading2:first-of-type {
width: calc(74% - 24px);
width: calc(100% - 344px);
}
}


@media (max-width: 700px) {
.toc-page #toc,
.toc-page .toc {
float: none;
width: auto;
max-width: none;
min-width: 0;
margin: 0 0 20px 0;
}


.toc-page > h2:first-of-type,
/* PAGE BANNER */
.toc-page > .mw-heading2:first-of-type {
/* ----------- */
width: auto;
}
}
 
/* PAGE BANNERS */
/* ------------ */
.page-banner {
.page-banner {
text-align: left;
text-align: left;
margin: 0 0 16px 0;
margin: 0 0 20px 0;
}
}


Line 50: Line 33:
display: block;
display: block;
width: 100%;
width: 100%;
max-width: 1600px;
height: auto;
height: auto;
margin: 0;
margin: 0;
}
}


.page-banner-desktop {
display: block;
}
.page-banner-desktop img {
max-width: 1600px;
}
.page-banner-mobile {
display: none;
}
.page-banner-mobile img {
max-width: 900px;
}
@media (max-width: 700px) {
.page-banner-desktop {
display: none;
}
.page-banner-mobile {
display: block;
}
}


/* MAIN INTRO */
/* MAIN INTRO */
/* ---------- */
/* ---------- */
.main-intro {
.main-intro {
margin: 0 0 24px 0;
margin: 0 0 28px 0;
text-align: left;
text-align: left;
font-size: 1.3em;
font-size: 1.3em;
line-height: 1.65;
line-height: 1.65;
max-width: none;
}
}


Line 93: Line 51:
margin: 0 0 14px 0;
margin: 0 0 14px 0;
}
}


/* PAGE INTRO */
/* PAGE INTRO */
/* ---------- */
/* ---------- */
.page-intro {
.page-intro {
margin: 0 0 24px 0;
margin: 0 0 28px 0;
font-size: 1.2em;
font-size: 1.2em;
line-height: 1.65;
line-height: 1.65;
Line 106: Line 65:
margin: 0 0 14px 0;
margin: 0 0 14px 0;
}
}




Line 112: Line 70:
/* ------------------ */
/* ------------------ */
.home-section {
.home-section {
margin: 0 0 24px 0;
margin: 0 0 28px 0;
}
}


Line 128: Line 86:


.home-section-intro {
.home-section-intro {
margin: 0 0 28px 0;
margin: 0 0 20px 0;
font-size: 1.25em;
font-size: 1.25em;
line-height: 1.65;
line-height: 1.65;
text-align: left;
text-align: left;
max-width: none;
}
}


/* SHARED GRID RULES */
/* SHARED GRID RULES */
Line 139: Line 97:
.grid-item {
.grid-item {
width: 100%;
width: 100%;
min-width: 0;
display: flex;
display: flex;
flex-direction: column;
flex-direction: column;
align-items: stretch;
align-items: stretch;
}
.grid-item img {
display: block;
width: 100%;
height: auto;
margin: 0 auto;
border: 1px solid #777;
}
}


Line 158: Line 107:
line-height: 1.1;
line-height: 1.1;
text-align: left;
text-align: left;
margin: 0 0 10px 0;
margin: 0 0 8px 0;
overflow-wrap: break-word;
font-family: Arial, Helvetica, sans-serif !important;
word-break: normal;
}
}


Line 167: Line 115:
}
}


.grid-text {
.grid-media {
margin-top: 12px;
font-size: 1.15em;
line-height: 1.6;
text-align: left;
overflow-wrap: break-word;
word-break: normal;
}
 
.grid-four .image,
.grid-three .image,
.grid-two-image,
.grid-one-image {
display: block;
display: block;
line-height: 0;
line-height: 0;
}
.grid-four .image img,
.grid-three .image img,
.grid-two-image img,
.grid-one-image img {
display: block;
margin: 0;
margin: 0;
padding: 0;
}
}


.grid-four .grid-item > p,
.grid-media p {
.grid-three .grid-item > p {
margin: 0;
margin: 0;
padding: 0;
line-height: 0;
}
}


.grid-four .grid-item > p .image,
.grid-media .image,
.grid-three .grid-item > p .image {
.grid-media a.image {
display: block;
display: block;
margin: 0;
padding: 0;
line-height: 0;
line-height: 0;
}
}


/* GRID FOUR */
.grid-media img {
/* --------- */
.grid-four {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
width: 100%;
align-items: start;
margin-bottom: 12px;
}
 
.grid-four .grid-item {
display: flex;
flex-direction: column;
align-items: stretch;
min-width: 0;
}
 
.grid-four .grid-title {
font-weight: bold;
font-size: 28px;
line-height: 1.1;
text-align: left;
margin: 0 0 6px 0;
min-height: 2.2em;
max-height: 2.2em;
overflow: hidden;
overflow-wrap: anywhere;
word-break: normal;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
 
.grid-four .grid-item img {
display: block;
display: block;
width: 100%;
width: 100%;
Line 245: Line 144:
}
}


.grid-four .grid-text {
.grid-text {
margin-top: 12px;
margin: 12px 0 0 0;
font-size: 1.1em;
font-size: 1.15em;
line-height: 1.6;
line-height: 1.6;
text-align: left;
text-align: left;
overflow-wrap: anywhere;
overflow-wrap: break-word;
}
}


@media (max-width: 1450px) {
.grid-four {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}


.grid-four .grid-title {
/* GRID FOUR */
font-size: 24px;
/* --------- */
min-height: 2.2em;
.grid-four {
max-height: 2.2em;
display: grid;
}
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
width: 100%;
align-items: start;
margin: 0 0 12px 0;
}
}


Line 275: Line 173:
width: 100%;
width: 100%;
align-items: start;
align-items: start;
}
margin: 0 0 12px 0;
 
.grid-three .grid-item {
display: flex;
flex-direction: column;
align-items: stretch;
min-width: 0;
}
}


.grid-three .grid-title {
.grid-three .grid-title {
font-weight: bold;
font-size: 30px;
font-size: 26px;
line-height: 1.1;
text-align: left;
margin: 0 0 6px 0;
min-height: 2.2em;
max-height: 2.2em;
overflow: hidden;
overflow-wrap: anywhere;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
 
.grid-three .grid-item img {
display: block;
width: 100%;
height: auto;
margin: 0;
border: 1px solid #777;
}
}


.grid-three .grid-text {
.grid-three .grid-text {
margin-top: 12px;
font-size: 1.08em;
font-size: 1.08em;
line-height: 1.6;
text-align: left;
}
@media (max-width: 1200px) {
.grid-three {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.grid-three .grid-title {
font-size: 24px;
}
}
}


Line 334: Line 193:
width: 100%;
width: 100%;
align-items: start;
align-items: start;
margin: 0 0 12px 0;
}
}


.grid-two-item {
.grid-two-item {
width: 100%;
width: 100%;
min-width: 0;
display: grid;
grid-template-rows: 90px auto;
align-items: start;
}
}


Line 349: Line 205:
line-height: 1.1;
line-height: 1.1;
text-align: left;
text-align: left;
margin: 0 0 12px 0;
margin: 0 0 10px 0;
height: 90px;
font-family: Arial, Helvetica, sans-serif !important;
display: flex;
align-items: end;
overflow-wrap: break-word;
word-break: normal;
}
}


Line 362: Line 214:
gap: 18px;
gap: 18px;
align-items: start;
align-items: start;
}
.grid-two-image,
.grid-two-image p,
.grid-two-image .image,
.grid-two-image a.image {
display: block;
margin: 0;
padding: 0;
line-height: 0;
}
}


Line 368: Line 230:
width: 100%;
width: 100%;
height: auto;
height: auto;
margin: 0 auto;
margin: 0;
border: 1px solid #777;
border: 1px solid #777;
}
}
Line 376: Line 238:
font-size: 1.08em;
font-size: 1.08em;
line-height: 1.6;
line-height: 1.6;
overflow-wrap: break-word;
word-break: normal;
}
@media (max-width: 1000px) {
.grid-two {
grid-template-columns: 1fr;
}
.grid-two-item {
grid-template-rows: auto auto;
}
.grid-two-title {
height: auto;
font-size: 28px;
}
.grid-two-row {
grid-template-columns: 1fr;
}
}
}


Line 415: Line 256:
line-height: 1.1;
line-height: 1.1;
text-align: left;
text-align: left;
margin: 0 0 16px 0;
margin: 0 0 12px 0;
overflow-wrap: break-word;
font-family: Arial, Helvetica, sans-serif !important;
word-break: normal;
}
}


Line 425: Line 265:
gap: 20px;
gap: 20px;
align-items: start;
align-items: start;
}
.grid-one-image,
.grid-one-image p,
.grid-one-image .image,
.grid-one-image a.image {
display: block;
margin: 0;
padding: 0;
line-height: 0;
}
}


Line 431: Line 281:
width: 100%;
width: 100%;
height: auto;
height: auto;
margin: 0 auto;
margin: 0;
border: 1px solid #777;
border: 1px solid #777;
}
}
Line 439: Line 289:
font-size: 1.08em;
font-size: 1.08em;
line-height: 1.6;
line-height: 1.6;
overflow-wrap: break-word;
word-break: normal;
}
@media (max-width: 1000px) {
.grid-one-title {
font-size: 30px;
}
.grid-one-row {
grid-template-columns: 1fr;
}
}
}
Retrieved from "https://wizlords.wiki/MediaWiki:Common.css"