MediaWiki:Common.css: Difference between revisions

← Older edit

@@ Line 27: / Line 27: @@
 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 Grid */
 .category-tiles-container {
-    display: grid;
+  --tile-image-size: 120px;
-    grid-template-columns: repeat(3, 1fr);
+  --tile-font-size: 1.1em;
-    gap: 20px;
+  --tile-gap: 0.75rem;
-    margin: 0 auto;
-    max-width: 1200px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(calc(var(--tile-image-size) + 2px), 1fr));
+  gap: var(--tile-gap);
+  margin: 0 auto;
+  max-width: 100%;
+  width: fit-content;
 }
-.category-tile {
+/* Size Variants - Override CSS Variables */
-    position: relative;
+.category-tiles-size-small {
-    background: var(--background-color-neutral-subtle);
+  --tile-image-size: 80px;
-    border-radius: 8px;
+  --tile-font-size: 0.9em;
-    border: 1px solid var(--border-color-subtle);
-    overflow: hidden;
 }
-.tile-image {
+.category-tiles-size-large {
-    text-align: center;
+  --tile-image-size: 180px;
+  --tile-font-size: 1.3em;
 }
-.tile-image img.tile-img {
+/* Tile Styling */
-    width: 100%;
+.category-tile {
-    height: 100%;
+  background: var(--background-color-neutral-subtle);
-    object-fit: cover;
+  border-radius: 8px;
-    display: block;
+  border: 1px solid var(--border-color-subtle);
+  overflow: hidden;
+  text-align: center;
 }
-.tile-title {
+.category-tile:hover {
-    padding: 15px;
+  background: var(--background-color-neutral);
-    text-align: center;
+  border-color: var(--border-color-base);
-    font-weight: bold;
-    font-size: 1.1em;
-    background: var(--background-color-base);
-    color: var(--color-base);
 }
-.tile-title a {
+.category-tile a {
-    color: var(--color-base);
+  display: block;
-    text-decoration: none;
+  width: 100%;
+  height: 100%;
+  color: var(--color-base);
+  text-decoration: none;
 }
-.tile-title a:hover {
-    text-decoration: none;
+.tile-image img {
+  width: var(--tile-image-size) !important;
+  height: var(--tile-image-size) !important;
+  object-fit: cover;
 }
-/* Responsive adjustments */
+.tile-title {
-@media (max-width: 768px) {
+  font-weight: bold;
-    .category-tiles-container {
+  font-size: var(--tile-font-size);
-        grid-template-columns: repeat(2, 1fr);
+  border-top: 1px solid var(--border-color-muted);
-    }
+  height: 100%;
 }
-@media (max-width: 480px) {
+.tile-title span {
-    .category-tiles-container {
+  padding: 0.25rem 0.5rem;
-        grid-template-columns: 1fr;
-    }
-    .tile-image {
-        height: 140px;
-    }
 }
-/* Responsive banner styling */
+/* Responsive - Mobile First */
-.responsive-banner-container {
+@media (max-width: 600px) {
-     width: 100%;
+  .category-tiles-container {
-     text-align: center;
+     --tile-gap: 0.5rem;
-     margin-bottom: 20px;
+  }
-    overflow: hidden; /* Prevent content from spilling out */
+  .category-tiles-size-small {
+     --tile-image-size: 60px;
+  }
+  .category-tiles-size-large {
+     --tile-image-size: 120px;
+  }
 }
-/* Target the actual image element */
+/* Responsive banner styling */
 .responsive-banner-container img.mw-file-element {
-     max-width: 600px !important;
+     max-width: 800px !important;
      width: 100% !important;
      height: auto !important;
@@ Line 120: / Line 118: @@
 }
-/* Target the span wrappers that MediaWiki adds */
-.responsive-banner-container span {
+/* top bar category icons */
-    display: block;
+#pp-symbols {
-    max-width: 100%;
+  display: flex;
+  justify-content: center;
+  gap: 0.25rem;
+  flex-grow: 1;
+}
+/* hide top bar category icons on small screens */
+@media (max-width: 970px)
+{
+  #pp-symbols { display: none; }
 }