User:SnorlaxMonster/GalleryTest.css

From Bulbapedia, the community-driven Pokémon encyclopedia.
< User:SnorlaxMonster
Revision as of 12:58, 16 November 2024 by SnorlaxMonster (talk | contribs) (Add some test styles for fancy packed galleries)
Jump to navigationJump to search
li.gallerybox div.thumb {
    border-radius: 20px;
}

/* Traditional galleries */
.mw-gallery-traditional.gallery-80 li.gallerybox div.thumb {
    background-color: hsl(78, 69.77%, 80%);
    border: 2px solid #C4E673;
}

.mw-gallery-traditional.gallery-light li.gallerybox div.thumb {
    background-color: hsl(78, 69.77%, 83%); /* {{bulba color light}} */
    border: 2px solid #C4E673;
}

.mw-gallery-traditional.gallery-85 li.gallerybox div.thumb {
    background-color: hsl(78, 69.77%, 85%);
    border: 2px solid #C4E673;
}

.mw-gallery-traditional.gallery-90 li.gallerybox div.thumb {
    background-color: hsl(78, 69.77%, 90%);
    border: 2px solid #C4E673;
}

.mw-gallery-traditional.gallery-95 li.gallerybox div.thumb {
    background-color: hsl(78, 69.77%, 95%);
    border: 2px solid #C4E673;
}

/* Packed galleries */
ul.mw-gallery-packed.fancy-packed {
  /* Remove default gallery styling */
  margin: unset;
  list-style: unset;
  
  border-radius: 20px;
  border: 2px solid #8E250D;
  background-color: #DA3914;
  color: #FFF;
  padding: 5px;
  
  display: flex;
  flex-wrap: wrap;
  column-gap: 5px;
  row-gap: 5px;
}

ul.mw-gallery-packed.fancy-packed li.gallerybox {
  /* Remove default gallery styling */
  width: unset !important;
  margin: unset;
  
  flex: 1;
  flex-basis: min-content;
}

ul.mw-gallery-packed.fancy-packed li.gallerybox > div {
  /* Remove default gallery styling */
  width: unset !important;
/*   width: min-content !important; */
}

ul.mw-gallery-packed.fancy-packed li.gallerybox div.thumb {
  /* Remove default gallery styling */
  width: unset !important;
  margin: unset;
  
  border: 2px solid #8E250D;
  border-radius: 20px;
  background-color: #E77E66;
  padding: 8px;
}

ul.mw-gallery-packed.fancy-packed li.gallerybox div.thumb img {
  /* Override default gallery styling */
  max-width: unset !important;
  width: auto !important;
  height: 220px !important;
}

ul.mw-gallery-packed.fancy-packed li.gallerybox .gallerytext p {
  margin: unset;
}