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