MediaWiki:Common.css: Difference between revisions
Appearance
No edit summary |
No edit summary |
||
Line 41: | Line 41: | ||
/* Category Tiles Grid */ | /* Category Tiles Grid */ | ||
.category-tiles-container { | .category-tiles-container { | ||
--tile-min-width: 200px; | |||
--tile-image-size: 120px; | |||
--tile-font-size: 1.1em; | |||
--tile-gap: 1rem; | |||
display: grid; | display: grid; | ||
grid-template-columns: repeat( | grid-template-columns: repeat(auto-fit, minmax(var(--tile-min-width), 1fr)); | ||
gap: | gap: var(--tile-gap); | ||
margin: 0 auto; | margin: 0 auto; | ||
max-width: 1200px; | max-width: 1200px; | ||
} | } | ||
/* Size Variants - Override CSS Variables */ | |||
.category-tiles-size-small { | |||
--tile-min-width: 150px; | |||
--tile-image-size: 80px; | |||
--tile-font-size: 0.9em; | |||
} | |||
.category-tiles-size-large { | |||
--tile-min-width: 280px; | |||
--tile-image-size: 180px; | |||
--tile-font-size: 1.3em; | |||
} | |||
/* Tile Styling */ | |||
.category-tile { | .category-tile { | ||
background: var(--background-color-neutral-subtle); | background: var(--background-color-neutral-subtle); | ||
border-radius: 8px; | border-radius: 8px; | ||
border: 1px solid var(--border-color-subtle); | border: 1px solid var(--border-color-subtle); | ||
overflow: hidden; | overflow: hidden; | ||
transition: all 0.2s ease; | |||
} | } | ||
.category-tile:hover { | .category-tile:hover { | ||
background: var(--background-color-neutral); | background: var(--background-color-neutral); | ||
border: | border-color: var(--border-color-base); | ||
transform: translateY(-2px); | |||
} | } | ||
.category-tile a { | .category-tile a { | ||
display: block; | |||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
color: var(--color-base); | |||
text-decoration: none; | |||
} | } | ||
.tile-image { | .tile-image { | ||
text-align: center; | text-align: center; | ||
padding: 1rem; | |||
} | |||
.tile-image img { | |||
width: var(--tile-image-size); | |||
height: var(--tile-image-size); | |||
object-fit: cover; | |||
} | } | ||
.tile-title { | .tile-title { | ||
text-align: center; | text-align: center; | ||
font-weight: bold; | font-weight: bold; | ||
font-size: | font-size: var(--tile-font-size); | ||
padding: 0.75rem; | |||
border-top: 1px solid var(--border-color-subtle); | |||
} | } | ||
/* Responsive - Mobile First */ | |||
@media (max-width: 600px) { | |||
.category-tiles-container { | |||
--tile-gap: 0.75rem; | |||
} | |||
.category-tiles-size-small { | |||
--tile-min-width: 120px; | |||
--tile-image-size: 60px; | |||
} | |||
.category-tiles-size-large { | |||
--tile-min-width: 180px; | |||
--tile-image-size: 120px; | |||
} | |||
} | } | ||
@media (max-width: 400px) { | |||
@media (max-width: | |||
.category-tiles-container { | .category-tiles-container { | ||
grid-template-columns: repeat(2, 1fr); | grid-template-columns: repeat(2, 1fr); | ||
--tile-gap: 0.5rem; | |||
} | } | ||
} | } |
Revision as of 20:27, 19 July 2025
/* CSS placed here will be applied to all skins */ .pp-block-title { border:1px solid var(--border-color-subtle); text-align: center; background-color: var(--background-color-neutral); padding-bottom: 0.5rem !important; } /* Old infobox template */ .infobox { border: 1px solid var(--border-color-subtle); border-spacing: 3px; background-color: background-color: var(--background-color-neutral); black; margin: 0.5em 0 0.5em 1em; padding: 0.2em; float: right; clear: right; font-size: 88%; line-height: 1.5em; } .infobox caption { font-size: 125%; font-weight: bold; padding: 0.2em; background-color: background-color: var(--background-color-neutral); } .infobox td, .infobox th { vertical-align: top; text-align: left; } .infobox.bordered { border-collapse: collapse; } .infobox.bordered td, .infobox.bordered th { border: 1px solid var(--border-color-subtle); } .infobox.bordered .borderless td, .infobox.bordered .borderless th { border: 0; } /* Old navbox template */ .navbox { width: 100%; margin-top: 1.5rem; padding: 0.125rem; border: 1px solid var(--border-color-subtle); } .navbox td { padding: 0; } .navbox-inner { width: 100%; } .navbox-title { background-color: var(--background-color-neutral); } .navbox-title .plainlinks { display: none; } .navbox-group { background-color: var(--background-color-neutral); white-space: nowrap; text-align: right; padding-left: 5px; padding-right: 5px; } .navbox-list { border-left-width: 0px !important; } td.navbox-list ul { list-style-type: none; margin: 4px 0px 0px 10px; } td.navbox-list li { display: inline; padding-left: 4px; white-space: nowrap; } td.navbox-list li:before { content: "•"; padding-right: 4px; } /* Make galleries workable */ ul.mw-gallery-packed-hover li.gallerybox:hover div.gallerytextwrapper, ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper, ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper { max-height: 100%; top: 0; padding:0; } div.gallerytext { height: 120px; line-height: 120px; padding: 0; } div.gallerytextwrapper { width: 120px !important; } div.gallerytext a { line-height: normal; display: inline-block; vertical-align: middle; height: 120px;} /* Category Tiles Grid */ .category-tiles-container { --tile-min-width: 200px; --tile-image-size: 120px; --tile-font-size: 1.1em; --tile-gap: 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--tile-min-width), 1fr)); gap: var(--tile-gap); margin: 0 auto; max-width: 1200px; } /* Size Variants - Override CSS Variables */ .category-tiles-size-small { --tile-min-width: 150px; --tile-image-size: 80px; --tile-font-size: 0.9em; } .category-tiles-size-large { --tile-min-width: 280px; --tile-image-size: 180px; --tile-font-size: 1.3em; } /* Tile Styling */ .category-tile { background: var(--background-color-neutral-subtle); border-radius: 8px; border: 1px solid var(--border-color-subtle); overflow: hidden; transition: all 0.2s ease; } .category-tile:hover { background: var(--background-color-neutral); border-color: var(--border-color-base); transform: translateY(-2px); } .category-tile a { display: block; width: 100%; height: 100%; color: var(--color-base); text-decoration: none; } .tile-image { text-align: center; padding: 1rem; } .tile-image img { width: var(--tile-image-size); height: var(--tile-image-size); object-fit: cover; } .tile-title { text-align: center; font-weight: bold; font-size: var(--tile-font-size); padding: 0.75rem; border-top: 1px solid var(--border-color-subtle); } /* Responsive - Mobile First */ @media (max-width: 600px) { .category-tiles-container { --tile-gap: 0.75rem; } .category-tiles-size-small { --tile-min-width: 120px; --tile-image-size: 60px; } .category-tiles-size-large { --tile-min-width: 180px; --tile-image-size: 120px; } } @media (max-width: 400px) { .category-tiles-container { grid-template-columns: repeat(2, 1fr); --tile-gap: 0.5rem; } } @media (max-width: 300px) { .category-tiles-container { grid-template-columns: 1fr; } } /* Responsive banner styling */ .responsive-banner-container img.mw-file-element { max-width: 800px !important; width: 100% !important; height: auto !important; margin: 0 auto; display: block; }