MediaWiki:Templates.css

/*======= Template specific CSS =======*/

/*======= Pudding Header (User:Haruyo-koi) =======*/ /* .mainpage { background: #FFF; } =*/ .mainbg { background: url('https://vignette.wikia.nocookie.net/idolish7/images/8/82/Wiki-header.png/revision/latest?cb=20150925101432') repeat-x left center; }

.mainpudding { background: url('https://i.imgur.com/Vz56ijP.png') no-repeat left top; }

/*======= Image Hover [Beta] (User:Haruyo-koi) =======*/ .test { background-image: url("https://vignette.wikia.nocookie.net/idolish7/images/f/fc/Eita_Sugawara%2B.png/revision/latest/scale-to-width-down/250"); }

.test:hover { background-image: url("https://vignette.wikia.nocookie.net/idolish7/images/3/38/Eita_Sugawara%2B_%28base%29.png/revision/latest/scale-to-width-down/250"); }

/*======= 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; }

/*======= Template:IconCard/RabbitChatTV (User:Kudossko) =======*/ /*== Uses the same code as the above, but it's character-centric colored. ==*/ .backgroundTsumugi { background: url('https://i.imgur.com/8RMHeJI.png') no-repeat; }

.backgroundIdk { background: url('https://i.imgur.com/RqBPFzS.png') no-repeat; }

.backgroundIori { background: url('https://i.imgur.com/eitpGoV.png') no-repeat; }

.backgroundYamato { background: url('https://i.imgur.com/XUWVGdG.png') no-repeat; }

.backgroundMitsuki { background: url('https://i.imgur.com/pxJwaaj.png') no-repeat; }

.backgroundTamaki { background: url('https://i.imgur.com/ARiUCin.png') no-repeat; }

.backgroundSogo { background: url('https://i.imgur.com/tW5WaVW.png') no-repeat; }

.backgroundNagi { background: url('https://i.imgur.com/8bd4A4S.png') no-repeat; }

.backgroundRiku { background: url('https://i.imgur.com/08qQMtD.png') no-repeat; }

.backgroundGaku { background: url('https://i.imgur.com/fEdw1bv.png') no-repeat; }

.backgroundTenn { background: url('https://i.imgur.com/dMLLtYw.png') no-repeat; }

.backgroundRyunosuke { background: url('https://i.imgur.com/ZNiCakE.png') no-repeat; }

.backgroundMomo { background: url('https://i.imgur.com/NWVzK0g.png') no-repeat; }

.backgroundYuki { background: url('https://i.imgur.com/uUkkY7s.png') no-repeat; }

.backgroundBanri { background: url('https://i.imgur.com/X3NRJtD.png') no-repeat; }

.backgroundHaruka { background: url('https://i.imgur.com/LSXE3Kj.png') no-repeat; }

.backgroundToma { background: url('https://i.imgur.com/4FKN7qU.png') no-repeat; }

.backgroundMinami { background: url('https://i.imgur.com/fI0P1Eh.png') no-repeat; }

.backgroundTorao { background: url('https://i.imgur.com/zN5uoS1.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; }

/*======= REUNION Chara Infobox =======*/ .reunion { position:relative; float: right; width: 40%; border-radius: 0 20px 0 0; background-color: #fff; border: 0 solid #fff; overflow: visible; z-index:190; }

background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0.6), rgba(255,255,255,0)); height: 170px; width: 100%; position:relative; z-index:200; }
 * 1) reunion-header-gradient {

.reunion-header { border-radius: 0 20px 0 0; height: 170px; overflow:hidden; top: 0; position: absolute; z-index:199; }

.reunion-header img{ width:150%; height: auto; }

.reunion-header-text { padding: 5px; position:relative; text-align:center; font-variant: small-caps; font-family: georgia; font-size: 23px; line-height: 28px; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; }

.reunion-image { width: 90%; margin:auto; position:relative; z-index:201; }

.reunion-quote { width: 110%; background-color: rgba(255,255,255,0.7); box-shadow: 0 2px 4px rgba(85, 85, 85,0.4), 0 -1px 4px rgba(85, 85, 85,0.4); position:relative; top:-110px; text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; line-height: 17px; height:auto; padding: 8px 30px 8px 15px; left: -30px; font-family: georgia; z-index: 202; font-style:italic; }

.reunion-desc { background-color:#70c9e3; z-index: 203; position: relative; padding: 8px; line-height: 1.3em; text-align: center; font-weight: bold; color: #fff; box-shadow: 15px 0 15px -13px #fff inset, -15px 0 15px -13px #fff inset; text-shadow:0px 0px 3px #555, 0px 0px 3px #555; }

/*======= Template specific CSS from Dev.wiki =======*/ /*======= BackToTopButton =======*/ background: none; background-color:#2cd0ff!important; color: #fff; border: none; }
 * 1) backtotop button{

/*======= Progress Bar =======*/ .progress { background: #eee; position: relative; }

.progress > .bar { display: block; background: #ccc; text-align: right; /* label alignment */ }

.progress > .bar:after { content: '\00a0'; /* empty label */ }

.progress > .text { position: absolute; left: 5px; }