MediaWiki:Templates.css


 * root {

--color-iori: #0044ab; --color-yamato: #00b050; --color-mitsuki: #f0930e; --color-tamaki: #00b0f0; --color-sogo: #825aae; --color-nagi: #ddbe00; --color-riku: #d01703; --color-gaku: #a0a0a0; --color-tenn: #ff69b4; --color-ryunosuke: #325e88; --color-momo: #fe00b6; --color-yuki: #78b240; --color-haruka: #6aa484; --color-toma: #8a2236; --color-minami: #bfb492; --color-torao: #8a5b5b; --color-banri: #5dd7d7; }

/*======= 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 { 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: 0 0 auto; margin: 0.5em; max-width: 250px; min-width: 190px; padding: 0 1em 1em; text-align: center; width: fit-content; }

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

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

.card-grid .card-grid-title { contain: inline-size; }

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

/*== Card List ==*/ table.card-list { width: 100%; margin: 7px auto auto 0px; padding: 6px 12px; border-collapse: collapse; border: 1px solid #2cd0ff; text-align: center; }

.card-list th { padding: 6px 12px; background-color: #2cd0ff; color: #fff; border: none; }

.card-list td { background-color: #fff; border-bottom: 1px #2cd0ff solid; padding: 6px 12px; }

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

/*======= Puchinana CSS =======*/ .puchinana * { box-sizing: border-box; padding: 0; margin: 0; }

.puchinana { margin-bottom: 3rem; }

.puchinana > * { display: flex; flex-direction: row; }

.puchinana .header { color: #fff; padding: 0.4em 0.5rem; text-align: left; border-bottom: 0.2em solid #c8ccd1; font-weight: bold; }

.puchinana .content { text-align: left; padding: 0.4em 0.5rem; margin-bottom: 1.5em; }

.puchinana .scroll { overflow-x: auto; display: flex; flex-direction: row; column-gap: 2em; }

.puchinana .scroll > * { min-width: 12em; flex: 1; }

.puchinana .details { font-weight: bold; padding: 0 0.5em 0.5em 0.5em; }

.puchinana .left { width: 25%; }

.puchinana .right { width: 75%; }

@media (max-width: 640px) { .puchinana > * { display: flex; flex-direction: column; }

.puchinana .left { width: 100%; }

.puchinana .right { width: 100%; } }

.puchinana-table { border-collapse: collapse; width: 100%; }

.puchinana-table th, .puchinana-table td { padding: 0.5em; text-align: left; }

.puchinana-table tr { border-bottom: 1px solid black; }

.puchinana[data-character="Iori Izumi"] .header { background-color: var(--color-iori); } .puchinana[data-character="Yamato Nikaido"] .header { background-color: var(--color-yamato); } .puchinana[data-character="Mitsuki Izumi"] .header { background-color: var(--color-mitsuki); } .puchinana[data-character="Tamaki Yotsuba"] .header { background-color: var(--color-tamaki); } .puchinana[data-character="Sogo Osaka"] .header { background-color: var(--color-sogo); } .puchinana[data-character="Nagi Rokuya"] .header { background-color: var(--color-nagi); } .puchinana[data-character="Riku Nanase"] .header { background-color: var(--color-riku); } .puchinana[data-character="Gaku Yaotome"] .header { background-color: var(--color-gaku); } .puchinana[data-character="Tenn Kujo"] .header { background-color: var(--color-tenn); } .puchinana[data-character="Ryunosuke Tsunashi"] .header { background-color: var(--color-ryunosuke); } .puchinana[data-character="Momo"] .header { background-color: var(--color-momo); } .puchinana[data-character="Yuki"] .header { background-color: var(--color-yuki); } .puchinana[data-character="Haruka Isumi"] .header { background-color: var(--color-haruka); } .puchinana[data-character="Toma Inumaru"] .header { background-color: var(--color-toma); } .puchinana[data-character="Minami Natsume"] .header { background-color: var(--color-minami); } .puchinana[data-character="Torao Mido"] .header { background-color: var(--color-torao); }

.puchinana[data-character="Iori Izumi"] .details { color: var(--color-iori); } .puchinana[data-character="Yamato Nikaido"] .details { color: var(--color-yamato); } .puchinana[data-character="Mitsuki Izumi"] .details { color: var(--color-mitsuki); } .puchinana[data-character="Tamaki Yotsuba"] .details { color: var(--color-tamaki); } .puchinana[data-character="Sogo Osaka"] .details { color: var(--color-sogo); } .puchinana[data-character="Nagi Rokuya"] .details { color: var(--color-nagi); } .puchinana[data-character="Riku Nanase"] .details { color: var(--color-riku); } .puchinana[data-character="Gaku Yaotome"] .details { color: var(--color-gaku); } .puchinana[data-character="Tenn Kujo"] .details { color: var(--color-tenn); } .puchinana[data-character="Ryunosuke Tsunashi"] .details { color: var(--color-ryunosuke); } .puchinana[data-character="Momo"] .details { color: var(--color-momo); } .puchinana[data-character="Yuki"] .details { color: var(--color-yuki); } .puchinana[data-character="Haruka Isumi"] .details { color: var(--color-haruka); } .puchinana[data-character="Toma Inumaru"] .details { color: var(--color-toma); } .puchinana[data-character="Minami Natsume"] .details { color: var(--color-minami); } .puchinana[data-character="Torao Mido"] .details { color: var(--color-torao); }

/*======= Card Page CSS =======*/

.card, .card *:not(.card .tabber *) { box-sizing: border-box; padding: 0; margin: 0; }

.card table { width: 100%; }

.card { display: flex; flex-direction: row; gap: 10px; padding: 10px; }

.card .col { width: 50%; display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 768px) { .card { flex-direction: column; }

.card .col { width: 100%; } }

.card .box { width: 100%; padding: 1px; }

.card[data-attribute="Shout"] .box { background-color: #feeded; border: 1px solid #ff6344; }

.card[data-attribute="Beat"] .box { background-color: #f1fbee; border: 1px solid #3aba00; }

.card[data-attribute="Melody"] .box { background-color: #eaf8ff; border: 1px solid #00a0ee; }

.card .colortext { background-color: #fff; }

.card[data-attribute="Shout"] .colortext { color: #ff6344; }

.card[data-attribute="Beat"] .colortext { color: #3aba00; }

.card[data-attribute="Melody"] .colortext { color: #00a0ee; }

.card .colorbg { color: #fff; }

.card[data-attribute="Shout"] .colorbg { background-color: #ff6344; }

.card[data-attribute="Beat"] .colorbg { background-color: #3aba00; }

.card[data-attribute="Melody"] .colorbg { background-color: #00a0ee; }

/*======= Rabbit Chat CSS =======*/

.rabbitchattv { background-color: #ffeafa; width: 100%; border: 1px solid #ff5baf; border-radius: 1em 0em 1em 0em; box-sizing: border-box; }

.rabbitchattv td { background-color: #fff; padding: 0.5em; text-align: left; color: #ff5baf; }

.rabbitchattv th { background-color: #ff5baf; padding: 0.5em; text-align: left; color: #fff; }

/*======= Song Infobox CSS (User:Ylimegirl) =======*/ .pi-theme-i7-song { font-family:'メイリオ'; background:#86001a; box-shadow:0 0 0 5px #4d0000; border:1px #bf9e5d ridge; color:white; --pi-background:#86001a; --pi-secondary-background:transparent; --pi-border-color:#bf9e5d; --pi-item-spacing:2px; }

.pi-theme-i7-song .pi-title { background:#86001a; color:#bf9e5d; text-align:center; text-shadow:0 0 10px black; }

.pi-theme-i7-song h2.pi-title::after, .pi-theme-i7-song h2.pi-header::after { border-bottom:0; }

.pi-theme-i7-song .pi-tab-link { border-color:#bf9e5d; padding:2px 5px; }

.pi-theme-i7-song .pi-media-collection .pi-tab-link.current { background:#bf9e5d; }

.pi-theme-i7-song .pi-data { border-bottom:0; align-content:flex-end; }

.pi-theme-i7-song .pi-data-label { background-color: #bf9e5d; font-weight: unset !important; padding: 3px; border-radius: 0 8px 8px 0; }

.pi-theme-i7-song .pi-data-value { border-bottom:1px solid var(--pi-border-color); text-align:right; padding-right:3px; align-self:flex-end; }

.pi-theme-i7-song .pi-header { text-align:center; text-shadow:0 0 10px black; color:#bf9e5d; }

.pi-theme-i7-song .pi-header::before, .pi-theme-i7-song .pi-header::after { content:' 'url('https://static.miraheze.org/idolish7wiki/thumb/0/03/REUNION_Bullet.png/10px-REUNION_Bullet.png')' '; display:inline; }

.pi-theme-i7-song .pi-group { border-bottom:0; }

.pi-theme-i7-song .pi-horizontal-group-item.pi-data-value { text-align:center; }

.pi-theme-i7-song .pi-data-label { flex-basis:100px; overflow:clip; }

/*======= Unit Infobox CSS (User:VentusBDaPlayer) =======*/ .pi-theme-i7-unit { font-family: 'メイリオ'; border: 1px solid #bf9e5d; outline: 3px solid #86001a; background: #073250; --pi-background: #073250; --pi-secondary-background: #86001a; --pi-border-color: #bf9e5d; --pi-item-spacing: 4px; } .pi-theme-i7-unit .pi-header, .pi-theme-i7-unit .pi-title { background: #86001a; color: #bf9e5d; text-align: center; text-shadow: 0 0 10px black; } .pi-theme-i7-unit h2.pi-title::after, .pi-theme-i7-unit h2.pi-header::after { border-bottom: 0; } .pi-theme-i7-unit .pi-header::before, .pi-theme-i7-unit .pi-header::after { content: ' 'url('https://static.miraheze.org/idolish7wiki/thumb/0/03/REUNION_Bullet.png/10px-REUNION_Bullet.png')' '!important; display: inline !important; } .pi-theme-i7-unit .pi-media { padding: 5px; } .pi-theme-i7-unit .pi-group { border-bottom:0; } .pi-theme-i7-unit .pi-data-label { color: white; border-radius: 0 8px 8px 0; background: #bf9e5d; padding: 3px; display: flex; font-weight: 300 !important; } .pi-theme-i7-unit .pi-data-label > span { align-self: center; } .pi-theme-i7-unit .pi-data-value { color: #fff; border-bottom: 1px solid #bf9e5d; display: flex; align-items: flex-end; flex-direction: column; } .pi-theme-i7-unit .pi-data-value a[href|="/wiki/Iori_Izumi"], .pi-theme-i7-unit .pi-data-value a:visited[href|="/wiki/Iori_Izumi"] { color: #487dcd; } .pi-theme-i7-unit .pi-data-value a[href|="/wiki/Ryunosuke_Tsunashi"], .pi-theme-i7-unit .pi-data-value a:visited[href|="/wiki/Ryunosuke_Tsunashi"] { color: #5585b3; } .pi-theme-i7-unit .pi-data-value a[href|="/wiki/Toma_Inumaru"], .pi-theme-i7-unit .pi-data-value a:visited[href|="/wiki/Toma_Inumaru"] { color: #d74360; } .pi-theme-i7-unit .pi-data { border-bottom: 0; } .pi-theme-i7-unit .pi-group div:last-of-type .pi-data-value { border-bottom: 0; }

/*======= Character Infobox CSS (User:VentusBDaPlayer) =======*/ .pi-theme-i7-char { font-family: 'メイリオ'; border: 1px solid #bf9e5d; outline: 5px solid #4d0000; background: #86001a; --pi-background: #86001a; --pi-secondary-background: #073250; --pi-border-color: #bf9e5d; --pi-item-spacing: 4px; }

.pi-theme-i7-char .pi-header, .pi-theme-i7-char .pi-title { background: #86001a; color: #bf9e5d; text-align: center; text-shadow: 0 0 10px black; }

.pi-theme-i7-char .pi-header { padding: 5px 0; background: #073250; margin: 5px 0; }

.pi-theme-i7-char h2.pi-title::after, .pi-theme-i7-char h2.pi-header::after { border-bottom: 0; }

.pi-theme-i7-char .pi-header::before, .pi-theme-i7-char .pi-header::after { content: ' 'url('https://static.miraheze.org/idolish7wiki/thumb/0/03/REUNION_Bullet.png/10px-REUNION_Bullet.png')' '!important; display: inline !important; }

.pi-theme-i7-char .pi-media { padding: 5px; }

.pi-theme-i7-char .pi-group { border-bottom: 0; }

.pi-theme-i7-char .pi-data { border-bottom: 0; padding: 4px 0; align-items: center; }

.pi-theme-i7-char .pi-data-label { color: white; border-radius: 0 8px 8px 0; background: #bf9e5d; padding: 3px 3px 3px 5px; display: flex; font-weight: 300 !important; align-self: stretch; }

.pi-theme-i7-char .pi-data-label > span { align-self: center; }

.pi-theme-i7-char .pi-data-value { color: #fff; border-bottom: 1px solid #bf9e5d; display: flex; align-self: stretch; flex-direction: column; text-align: right; padding-right: 5px; }

.pi-theme-i7-char .pi-data-value span { margin: auto 0; }

.pi-theme-i7-char .hex-row { display:flex; flex-direction:row; align-items:center; justify-content: right; } .pi-theme-i7-char .hex-box { display:inline-block; border:1px solid #bf9e5d; width:20px; height:20px; } .pi-theme-i7-char .pi-data { border-bottom: 0; }

.pi-theme-i7-char .pi-group div:last-of-type .pi-data-value { border-bottom: 0; }

.pi-theme-i7-char a:hover { color: #fff; }

/*======= Template:Main Page/Countdown (User:VentusBDaPlayer) =======*/ .cd-container { display: flex; justify-content: center; flex-wrap: wrap; flex-direction: row; text-align:center; margin-top: 10px; gap: 10px; width: 95%; }

.cd-game { flex-basis: 25em; }

.cd-game.event, .cd-game.gacha { display: flex; flex-wrap: wrap; justify-content: center; align-content: baseline; gap: 5px; }

.cd-headline { font-size: 130%; font-weight: bold; text-decoration: underline; }

.cd-wiki { text-align: left; margin-top: 10px; }

/*======= Template:Brooch (User:Hiyoriiii) =======*/ .brooch, .brooch * { box-sizing: border-box; } .brooch[data-type="Pink"] { border: 1px solid #f8aed2; background-color: #fff7fb; } .brooch[data-type="Pink"] .header { background-color: #f8aed2; } .brooch[data-type="Blue"] { border: 1px solid #97aceb; background-color: #f0f4ff; } .brooch[data-type="Blue"] .header { background-color: #97aceb; } .brooch .header { color: #ffffff; } .brooch .content { flex-direction: row; } .brooch .col-left { width: 120px; border-radius: 0 0 0 1em; } .brooch .col-right { width: calc(100% - 120px); border-radius: 0 0 0 0; } @media (max-width: 640px) { .brooch .content { flex-direction: column; }   .brooch .col-left { width: 100%; border-radius: 0 0 0 0; }   .brooch .col-right { width: 100%; }   .brooch .effect-header { border-radius: 0 0 0 1em; } }