User:SnorlaxMonster/GalleryTest.css: Difference between revisions

From Bulbapedia, the community-driven Pokémon encyclopedia.
Jump to navigationJump to search
m (Increase border width)
(Add some test styles for fancy packed galleries)
Line 3: Line 3:
}
}


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


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


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


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


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

Revision as of 12:58, 16 November 2024

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;
}