MediaWiki:Templates.css

/*======= Template specific CSS =======*/ /*======= Pudding Header (User:Haruyo-koi) =======*/ .puddingheaderbg { background: url('https://static.miraheze.org/idolish7wiki/6/6e/Pudding_Header.png') repeat-x left center; }

.puddingheadericon { background: url('https://i.imgur.com/Vz56ijP.png') no-repeat left top; } /*======= Template:IconCard (User:Haruyo-koi) =======*/ .backgroundShout { background: url('https://i.imgur.com/D7HG69N.png') no-repeat; } .backgroundMelody { background: url('https://i.imgur.com/m36OZCN.png') no-repeat; } .backgroundBeat { background: url('https://i.imgur.com/9zlJs7K.png') no-repeat; } .frameN { background: url('https://i.imgur.com/XnwURT3.png') no-repeat; } .frameR { background: url('https://i.imgur.com/5uxLpO4.png') no-repeat; } .frameSR { background: url('https://i.imgur.com/pzepTls.png') no-repeat; } .frameSSR { background: url('https://i.imgur.com/26LR3Cr.png') no-repeat; } .frameUR { background: url('https://i.imgur.com/iWqGLMs.png') no-repeat; } .logoN { background: url('https://i.imgur.com/SH4GFUw.png') no-repeat; } .logoR { background: url('https://i.imgur.com/qSLuJrs.png') no-repeat; } .logoSR { background: url('https://i.imgur.com/adVTNyJ.png') no-repeat; } .logoSSR { background: url('https://i.imgur.com/ntDiO7c.png') no-repeat; } .logoUR { background: url('https://i.imgur.com/VnFOfKd.png') no-repeat; } /*======= Card Grid CSS (User:Kudossko) =======*/ /*== Original code from BSDMayoi.wiki ==*/

/*== Buttons ==*/ .btn-group.header { display: flex; justify-content: center; margin-bottom: 0.5em; }

.header .button { background: #333; border-color: #333; display: inline-block; font-weight: bold; margin: 0; padding: 7px 12px; text-transform: uppercase; }

.header .button.secondary { background: none; }

.button a { color: inherit; }

.character-filters { display: flex; flex-wrap: wrap; justify-content: center; }

.character-filters > div { margin: 5px; }

.character-filters .button { background: #f0f0f0; font-weight: bold; padding: 8px 12px; }

.character-filters .button:hover { background: #bbb; }

.character-filters .button.active { background: #333; border-color: #333; color: white; }

.btn-group > :first-child { border-radius: 4px 0 0 4px; }

.btn-group > :not(:first-child) { border-radius: 0; border-left: 0; }

.btn-group > :last-child { border-radius: 0 4px 4px 0; }

.select-group { background: #f0f0f0; border-radius: 4px; border: 1px solid #ccc; display: flex; flex-direction: column; max-height: 100px; overflow-y: scroll; padding: 4px 0; }

.select.button { background: none; border-radius: 0; border: none; color: #3a3a3a; padding: 0 8px; }

/*== Card Grid Itself ==*/ .card-grid { display: flex; flex-wrap: wrap; justify-content: space-around; }

.card-grid .card-entry { background: white; border: 1px solid #ccc; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; box-sizing: border-box; flex: 1 0 auto; margin: 0.5em; max-width: 250px; padding: 0 1em 1em; text-align: center; width: 170px; }

.card-grid-image { margin: 0 -1em 0.5em; }

.card-grid-image img { height: auto; width: 100%; }

.card-grid-icons img { margin: 0.25em 0.25em 0; }

/*======= Story Page CSS =======*/ /*== Cover (User:Kudossko) ==*/ .story-cover { height:320px; overflow:hidden; position:relative; }

.story-cover img { width:100%; height:auto; }

.story-cover-image { width:100%; position:absolute; left:0; z-index:1; opacity:1; }

.story-cover-banner { width:100%; position:absolute; bottom:20px; right:0px; height:26px; padding:0 0 0 20px; z-index:4; }