MediaWiki:Common.css
From MWDHPedia - The Magical Warrior Diamond Heart Wiki ♡
Jump to navigationJump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* CSS placed here will be applied to all skins */
/*
* This is the CSS common to all desktop skins on en.Wikipedia.
* Styling inside .mw-parser-output should generally use TemplateStyles.
*/
/******************
FONTS
******************/
@import "/load.php?mode=articles&articles=u:dev:MediaWiki:FontAwesome.css&only=styles";
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500..700&display=swap');
@font-face {
font-family: 'Pacifico';
src: url(Pacifico-Regular.woff2) format('woff2'),
url('Pacifico-Regular.ttf') format('truetype');
}
.pacifico-regular {
font-family: "Pacifico", serif;
font-weight: 400;
font-style: normal;
}
/* Reset italic styling set by user agent */
cite,
dfn {
font-style: inherit;
}
/* =========================================================
DARK MODE — logged in + logged out (single source of truth)
========================================================= */
.client-darkmode,
.skin-theme-clientpref-night,
.clientpref-night {
/* marker only, no styles here */
}
/* Content container */
.client-darkmode #content.mw-body,
.skin-theme-clientpref-night #content.mw-body,
.clientpref-night #content.mw-body {
background-color: #18131b; /* jewel-black, not void-black */
color: #f3e6ff; /* soft lavender-white */
box-shadow: 0 0 11px 2px rgba(0, 0, 0, 0.66);
}
/* Links */
.client-darkmode a,
.skin-theme-clientpref-night a,
.clientpref-night a {
color: #5c8bfa;
}
.client-darkmode a:visited,
.skin-theme-clientpref-night a:visited,
.clientpref-night a:visited {
color: #9153d0;
}
/* Body text */
.client-darkmode #bodyContent,
.skin-theme-clientpref-night #bodyContent,
.clientpref-night #bodyContent {
color: #cab7db;
}
/* Tables */
.client-darkmode table,
.skin-theme-clientpref-night table,
.clientpref-night table {
background-color: transparent !important;
}
/* Portable infobox */
.client-darkmode .portable-infobox,
.skin-theme-clientpref-night .portable-infobox,
.clientpref-night .portable-infobox {
border: 1px solid #000;
color: #cab7db;
background-color: #32113f;
}
.client-darkmode .portable-infobox .pi-header,
.client-darkmode .portable-infobox h2,
.client-darkmode .portable-infobox .pi-title,
.skin-theme-clientpref-night .portable-infobox .pi-header,
.skin-theme-clientpref-night .portable-infobox h2,
.skin-theme-clientpref-night .portable-infobox .pi-title,
.clientpref-night .portable-infobox .pi-header,
.clientpref-night .portable-infobox h2,
.clientpref-night .portable-infobox .pi-title {
background-color: #721968;
color: #ecb6eb !important;
}
.client-darkmode .portable-infobox .pi-data-label,
.skin-theme-clientpref-night .portable-infobox .pi-data-label,
.clientpref-night .portable-infobox .pi-data-label {
color: #c569c8;
}
/* Headings */
.client-darkmode .mw-body .mw-heading,
.client-darkmode .mw-body h1,
.client-darkmode .mw-body h2,
.client-darkmode .mw-body h3,
.skin-theme-clientpref-night .mw-body .mw-heading,
.skin-theme-clientpref-night .mw-body h1,
.skin-theme-clientpref-night .mw-body h2,
.skin-theme-clientpref-night .mw-body h3,
.clientpref-night .mw-body .mw-heading,
.clientpref-night .mw-body h1,
.clientpref-night .mw-body h2,
.clientpref-night .mw-body h3 {
color: #b942ac !important;
}
/* TOC */
.client-darkmode #toc,
.client-darkmode toc,
.skin-theme-clientpref-night #toc,
.skin-theme-clientpref-night toc,
.clientpref-night #toc,
.clientpref-night toc {
background-color: #660e8657;
border: 1px solid #000;
}
/* Sidebar boxes */
.client-darkmode #p-search,
.client-darkmode #p-navigation,
.client-darkmode #p-tb,
.client-darkmode #p-lang,
.client-darkmode #p-sb,
.skin-theme-clientpref-night #p-search,
.skin-theme-clientpref-night #p-navigation,
.skin-theme-clientpref-night #p-tb,
.skin-theme-clientpref-night #p-lang,
.skin-theme-clientpref-night #p-sb,
.clientpref-night #p-search,
.clientpref-night #p-navigation,
.clientpref-night #p-tb,
.clientpref-night #p-lang,
.clientpref-night #p-sb {
background: url(/wiki/images/rainbowtileb.png);
background-size: 100% auto;
box-shadow: none;
overflow: visible;
border-radius: 15px;
}
/* =========================================================
GLOBAL BACKGROUND — DARK MODE (all users)
========================================================= */
.client-darkmode body.mediawiki,
.skin-theme-clientpref-night body.mediawiki,
.clientpref-night body.mediawiki {
background: url('https://images.pyonkotchi.com/valphone bg tileb.png');
background-attachment: fixed;
}
/* HARD STOP: kill MediaWiki inversion */
.client-darkmode,
.client-darkmode *,
.skin-theme-clientpref-night,
.skin-theme-clientpref-night *,
.clientpref-night,
.clientpref-night * {
filter: none !important;
-webkit-filter: none !important;
}
q {
font-size: .90em;
}
dd {
font-size: .84em;
}
/******************
MOBILE RESPONSIVE
******************/
/* common breakpoints:
mobile: 320px - 720px (max-width: 720px)
tablet: 720px - 1000px (min-width: 720px, max-width: 1000px)
desktop: 1000px; wide desktop: 1200px; extrawide desktop: 2000px; (min-width: 1000px)
*/
/* mobile */
@media screen and (max-width: 720px) {
.desktopresponsive, .desktopblock, .desktoptable, .desktopgrid, .desktopcell {
display: none;
}
.mobileresponsive, .mobileblock {
display: block;
}
.mobiletable {
display: table;
}
.mobilecell {
display: table-cell;
}
ul {
margin: 0.2em 0.5em !important;
padding-left: 0.4em;
line-height: 1.4em;
}
li {
margin-bottom: 0.3em;
}
.eventtable {
text-align: right;
}
.eventdiv {
margin: 0.3em 0 1.2em 0;
}
}
/* desktop */
@media screen and (min-width: 720px) {
.mobileresponsive, .mobileblock, .mobiletable, .mobilecell {
display: none;
}
.desktopresponsive, .desktopblock {
display: block;
}
.desktoptable {
display: table;
}
.desktopgrid {
display: grid;
}
ul {
margin: 0.1em 0 0 1.2em;
}
.eventtable {
text-align: right;
margin-right: 10%;
margin-top: -0.5em;
}
.eventdiv {
margin:0;
margin-bottom: 1.5em;
}
}
.home-category > tbody > tr > td {
padding: 0.7em 1em;
}
.home-section > tbody > tr > td {
padding: 0.1em 0.3em;
}
.home-section .noicon {
padding: 0.2em 0.3em;
}
/******************
GENERAL
******************/
.portable-infobox .type-game {
width: 200px;
}
/* Background */
body.mediawiki {
background: url('https://images.pyonkotchi.com/valphone bg tile2.png');
/**dark red: background: linear-gradient(45deg, #650000, #8e1212) !important;**/
z-index: 0;
background-attachment: fixed;
}
@keyframes fadeIn {
to {
opacity: 1;
}
}
#mw-page-base { background: transparent; }
.mw-wiki-logo {
width: 225 !important;
}
@media screen and (min-width: 551px) {
body.skin--responsive #p-logo a, body.skin--responsive #p-logo a:hover {
height: 175px!important;
width: 12.2em;
background-position: 35% 50% !important;
}
}
/* Override visible logo while keeping OG image intact */
#p-logo .mw-wiki-logo {
background-image: url("https://mwdh.pyonkotchi.com/lore/images/val_glasses.png") !important;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.client-darkmode #p-logo .mw-wiki-logo {
background-image:url(https://mwdh.pyonkotchi.com/wiki/images/5/51/Val_glasses_dark.png) !important;
background-size:contain;
background-repeat:no-repeat;
background-position:center
}
/* Blockquotes */
blockquote {
border-left: 4px solid #eaecf0;
padding-left: 1em;
}
/* Avoid collision of blockquote with floating elements by swapping margin and padding */
blockquote {
overflow: hidden;
margin: 1em 0;
padding: 0 40px;
}
/* Clearfix */
/*.mw-parser-output {
overflow: auto;
}*/
/* Straight quote marks for <q> */
q {
quotes: '"' '"' "'" "'";
}
/* ===============================
PORTAL / TEMPLATE BOX (LIGHT)
=============================== */
.mw-portalbox {
width: 90%;
margin: 1.5em auto;
padding: 12px 18px;
border: 4px dotted #ed51b7;
border-radius: 10px;
background: #ffe7f3b2;
font-family: "Quicksand", sans-serif;
color: #7a0360;
}
.mw-portalbox-title {
margin-bottom: 12px;
padding: 15px 10px;
border: 2px solid #ffffff;
border-radius: 9px;
background: #ff9ed3 url(/wiki/images/rainbowtile.png);
background-size: 100% auto;
text-align: center;
font-family: "Pacifico", cursive;
font-size: 32px;
font-weight: 400;
color: white;
letter-spacing: 2px;
text-shadow: #d82ccd 2px 1px 2px;
}
.mw-portalbox-body {
font-size: 16px;
line-height: 1.4em;
padding: 5px 8px;
}
/* ===============================
PORTAL / TEMPLATE BOX (DARK)
=============================== */
.client-darkmode .mw-portalbox,
.skin-theme-clientpref-night .mw-portalbox,
.clientpref-night .mw-portalbox {
background: #2a1c2f;
border-color: #b24aa5;
color: #e6d6f0;
}
.client-darkmode .mw-portalbox-title,
.skin-theme-clientpref-night .mw-portalbox-title,
.clientpref-night .mw-portalbox-title {
background: #721968 url(/wiki/images/rainbowtileb.png);
background-size: 170% auto;
border-color: #000;
text-shadow: #000 2px 1px 2px;
}
.client-darkmode .mw-portalbox-body,
.skin-theme-clientpref-night .mw-portalbox-body,
.clientpref-night .mw-portalbox-body {
color: #cab7db;
}
/********* [[Template:Spoiler]] *********/
.spoiler-content {
background-color: #fff;
transition: all 0.3s;
cursor: pointer;
overflow: auto;
}
@supports not (color:color-mix(in srgb, #000, transparent)) {
.spoiler-content {
background-color: #333;
}
}
.spoiler-content > * {
pointer-events: none;
opacity: 0;
transition: all 0.3s;
}
.spoiler-content.show {
background-color: transparent;
}
.spoiler-content.show > * {
pointer-events: unset;
opacity: 1;
}
dl {
margin-left: 2em;
}
/******************
HEADINGS + TOC
******************/
#toc {
padding: 7px;
background-color: #FFFFFF;
border: 1px solid #00000;
margin: 1.5em 0 1em;
}
.tabbertoc {
float: left;
width: 220px;
max-height: 75%;
margin-right: 10px;
margin: 10px 20px 10px 0px;
background-color: #ffdef3;
border: 1px solid #ff9ed3;
border-radius: 15px;
overflow: auto;
}
/***** Internal Links *****/
a {
text-decoration: none;
color: #d621ac;
background: none
}
a:visited {
color:#912edd;
}
/* Navigation Background */
/* FONT PROPERTIES FOR BODY */
/* Consistent size for <small>, <sub> and <sup> */
small {
font-size: 85%;
}
.mw-body-content sub,
.mw-body-content sup {
font-size: 80%;
}
/*a {
cursor: url(https://images.pyonkotchi.com/cursorglow.png), default;
}*/
/*body {
cursor: url(https://images.pyonkotchi.com/cursor.png), default;
}*/
.mw-body h1 {
color: #f02c97;
font-family: "Pacifico", cursive;
width: 100%;
text-decoration: none;
font-weight: 400;
font-style: normal;
font-size: 40px;
}
.mw-body h2,
.h2,
.mw-heading2,
mw-headline {
color: #f02c97;
font-family: "Pacifico", cursive;
text-decoration: none;
font-weight: 400;
font-style: normal;
font-size: 30px;
}
.mw-heading3,
mw-headline {
font-family: "Pacifico", cursive;
font-size: 25px;
color: #f02c97;
border-bottom: 1px solid #f4a5d1;
}
.mw-body h3 {
font-weight: 500;
font-size: 25px;
margin: auto 0;
font-family: "Pacifico";
}
@media screen {
pre, code, .mw-code {
background-color: #fff0f8;
color: #801168;
border: 2px dotted#F389C3;
border-radius: 10px;
}
.mw-content-ltr.mw-highlight-lines pre, .mw-content-ltr.content .mw-highlight-lines pre {
padding-left: 3.5em;
box-shadow: inset 2.75em 0 0 #fae1ee;
}
@media screen {
.mw-body .mw-heading,
.mw-body h1,
.mw-body h2 {
color: #f02c97;
font-family: "Pacifico", cursive;
text-decoration: none;
font-weight: 400;
font-style: normal;
font-size: 30px;
/*border-bottom: 1px solid #f4a5d1;*/
}
.mw-body dt {
color: #f02c97;
text-decoration: none;
font-style: normal;
font-size: 20px;
border-bottom: 1px solid #f4a5d1;
}
.mw-body h4,
.mw-body h5,
.mw-body h6 {
color: #7a0360;
font-family: "Quicksand", sans serif;
text-decoration: none;
font-style: normal;
font-size: 20px;
}
.mw-heading4, h4 {
font-size: 20px;
color: #7a0360;
}
.mw-heading1,
h1,
.mw-heading2,
h2 {
margin-bottom: 0.6em;
border-bottom: 1px solid #f4a5d1;
}
}
/* Same spacing for indented and unindented paragraphs on talk pages */
.ns-talk .mw-body-content dd {
margin-top: 0.4em;
margin-bottom: 0.4em;
}
/* Reduce page jumps by hiding collapsed/dismissed content */
.client-js .collapsible:not(.mw-made-collapsible).collapsed>tbody>tr:not(:first-child),
/* Avoid FOUC/reflows on collapsed elements. */
/* This copies MediaWiki's solution for T42812 to apply to innercollapse/outercollapse (T325115). */
/* TODO: Use :is() selector at some reasonable future when support is good for Most Clients */
/* Reference: https://gerrit.wikimedia.org/g/mediawiki/core/+/ecda06cb2aef55b77c4b4d7ecda492d634419ead/resources/src/jquery/jquery.makeCollapsible.styles.less#75 */
.client-js .outercollapse .innercollapse.mw-collapsible:not(.mw-made-collapsible)>p,
.client-js .outercollapse .innercollapse.mw-collapsible:not(.mw-made-collapsible)>table,
.client-js .outercollapse .innercollapse.mw-collapsible:not(.mw-made-collapsible)>thead+tbody,
.client-js .outercollapse .innercollapse.mw-collapsible:not(.mw-made-collapsible) tr:not( :first-child),
.client-js .outercollapse .innercollapse.mw-collapsible:not(.mw-made-collapsible) .mw-collapsible-content,
/* Hide charinsert base for those not using the gadget */
#editpage-specialchars {
display: none;
}
/* Different margin on references */
.references {
margin-bottom: 0.5em;
}
/* Cite customizations for Parsoid
* Once everything uses the one true parser these are just customizations
*/
span[ rel="mw:referencedBy"] {
counter-reset: mw-ref-linkback 0;
}
span[ rel='mw:referencedBy']>a::before {
content: counter(mw-ref-linkback, lower-alpha);
font-size: 80%;
font-weight: bold;
font-style: italic;
}
a[ rel="mw:referencedBy"]::before {
font-weight: bold;
content: "^";
}
span[ rel="mw:referencedBy"]::before {
content: "^ ";
}
/* These blocks need review after [[phab:T371839]] or related are complete */
.mw-ref>a[style~="mw-Ref"][data-mw-group=lower-alpha]::after {
content: '[' counter(mw-Ref, lower-alpha) ']';
}
.mw-ref>a[style~="mw-Ref"][data-mw-group=upper-alpha]::after {
content: '[' counter(mw-Ref, upper-alpha) ']';
}
.mw-ref>a[style~="mw-Ref"][data-mw-group=decimal]::after {
content: '[' counter(mw-Ref, decimal) ']';
}
.mw-ref>a[style~="mw-Ref"][data-mw-group=lower-roman]::after {
content: '[' counter(mw-Ref, lower-roman) ']';
}
.mw-ref>a[style~="mw-Ref"][data-mw-group=upper-roman]::after {
content: '[' counter(mw-Ref, upper-roman) ']';
}
.mw-ref>a[style~="mw-Ref"][data-mw-group=lower-greek]::after {
content: '[' counter(mw-Ref, lower-greek) ']';
}
/* Styling for jQuery makeCollapsible, matching that of collapseButton */
.mw-parser-output .mw-collapsible-toggle:not(.mw-ui-button) {
font-weight: normal;
padding-right: 0.2em;
padding-left: 0.2em;
}
/* Lists in wikitable data cells are always left-aligned */
.wikitable td ul,
.wikitable td ol,
.wikitable td dl {
/* @noflip */
text-align: left;
}
/* Change the external link icon to a PDF icon for all PDF files */
.mw-parser-output a[href$=".pdf"].external,
.mw-parser-output a[href*=".pdf?"].external,
.mw-parser-output a[href*=".pdf#"].external,
.mw-parser-output a[href$=".PDF"].external,
.mw-parser-output a[href*=".PDF?"].external,
.mw-parser-output a[href*=".PDF#"].external {
background: url("//upload.wikimedia.org/wikipedia/commons/4/4d/Icon_pdf_file.png") no-repeat right;
/* @noflip */
padding: 8px 18px 8px 0;
}
/* System messages styled similarly to fmbox */
/* for .mw-warning-with-logexcerpt, behavior of this line differs between
* the edit-protected notice and the special:Contribs for blocked users
* The latter has specificity of 3 classes so we have to triple up here.
*/
.mw-warning-with-logexcerpt.mw-warning-with-logexcerpt.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning,
div#mw-protect-cascadeon {
clear: both;
margin: 0.2em 0;
border: 1px solid #bb7070;
background-color: var(--background-color-error-subtle, #ffdbdb);
padding: 0.25em 0.9em;
box-sizing: border-box;
}
/* default colors for partial block message */
/* gotta get over the hump introduced by the triple class above */
.mw-contributions-blocked-notice-partial .mw-warning-with-logexcerpt.mw-warning-with-logexcerpt {
border-color: #fc3;
background-color: var(--background-color-warning-subtle, #fef6e7);
}
/* Minimum thumb width */
@media (min-width: 640px) {
figure[typeof~='mw:File/Thumb'],
figure[typeof~='mw:File/Frame'],
.thumbinner {
min-width: 100px;
}
}
/* Prevent floating boxes from overlapping any category listings,
file histories, edit previews, and edit [Show changes] views. */
#mw-subcategories,
#mw-pages,
#mw-category-media,
#filehistory,
#wikiPreview,
#wikiDiff {
clear: both;
}
/* Hide stuff meant for accounts with special permissions. Made visible again in
[[MediaWiki:Group-checkuser.css]], [[MediaWiki:Group-sysop.css]], [[MediaWiki:Group-abusefilter.css]],
[[MediaWiki:Group-abusefilter-helper.css]], [[MediaWiki:Group-patroller.css]],
[[MediaWiki:Group-templateeditor.css]], [[MediaWiki:Group-extendedmover.css]],
[[MediaWiki:Group-extendedconfirmed.css]], and [[Mediawiki:Group-autoconfirmed.css]]. */
.checkuser-show,
.sysop-show,
.abusefilter-show,
.abusefilter-helper-show,
.patroller-show,
.templateeditor-show,
.extendedmover-show,
.extendedconfirmed-show,
.autoconfirmed-show,
.user-show {
display: none;
}
/* Hide the redlink generated by {{Editnotice}},
this overrides the ".sysop-show { display: none; }" above that applies
to the same link as well. See [[phab:T45013]]
Hide the images in editnotices to keep them readable in VE view.
Long term, editnotices should become a core feature so that they can be designed responsive. */
.ve-ui-mwNoticesPopupTool-item .editnotice-redlink,
.ve-ui-mwNoticesPopupTool-item .mbox-image,
.ve-ui-mwNoticesPopupTool-item .mbox-imageright {
display: none !important;
}
/* Remove bullets when there are multiple edit page warnings */
ul.permissions-errors {
margin: 0;
}
.portable-infobox ul {
padding-left: 3%;
list-style-type: none !important;
list-style: none !important;
li:before {
content: '\2665';
margin-right: 10px;
color: #ff58c5;
}
}
ul.permissions-errors>li {
list-style: none;
}
/* larger inline math */
span.mwe-math-mathml-inline {
font-size: 118%;
}
/* Make <math display="block"> be left aligned with one space indent for
* compatibility with style conventions
*/
.mwe-math-fallback-image-display,
.mwe-math-mathml-display {
margin-left: 1.6em !important;
margin-top: 0.6em;
margin-bottom: 0.6em;
}
.mwe-math-mathml-display math {
display: inline;
}
@media screen {
/* Put a chequered background behind images, only visible if they have transparency,
* except on main, user, and portal namespaces
body:not(.ns-0):not(.ns-2):not(.ns-100) .gallerybox .thumb img {
background: #fff url(//upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png) repeat;
}*/
li.gallerybox div.thumb {
background-color: #ffeffd;
border: 1px solid #ffa2d5;
border-radius: 10px;
}
/* Make the list of references smaller
* Keep in sync with Template:Refbegin/styles.css
* And Template:Reflist/styles.css
*/
.references {
font-size: 90%;
}
}
/* Hide FlaggedRevs notice UI when there are no pending changes */
.flaggedrevs_draft_synced,
.flaggedrevs_stable_synced,
/* "Temporary" to remove links in sidebar T255381 */
#t-upload,
/* Hide broken download box on Special:Book pending T285400 */
.mw-special-Book #coll-downloadbox {
display: none;
}
#toc,
toc {
float: left;
width: 220px;
max-height: 75%;
margin-right: 10px;
/* margin: 10px 20px 10px 0px;*/
background-color: #ffdef3;
border: 1px solid #ff9ed3;
border-radius: 15px;
overflow: auto;
}
.toc ul {
list-style: none;
margin: 0 1em;
padding: 0;
text-align: start;
}
.tocnumber { display: none !important; }
.tocnumber, .toctext {
display: inline;
text-decoration: inherit;
}
.toctext {
margin-left: -10px;
}
@media screen and (max-width:850px) {
#toc,
toc {
width: 80%;
}
}
/*
* BELOW HERE THERE BE SOONTOBE TEMPLATESTYLES THINGS;
* SEE [[MediaWiki talk:Common.css/to do]]
* CSS is separated by component (which is why media queries are not joined)
*/
.title-header {
background: #ff9ed3;
color: #7a0360;
font-family: "Pacifico", cursive;
width: 100%;
text-decoration: none;
font-weight: 400;
font-style: normal;
font-size: 25px !important;
}
.nv-title2 {
background: #fec423 url(images/rainbowtile.png) left top repeat-x;
color: #7a0360;
font-family: "Quicksand";
width: 100%;
text-decoration: none;
font-weight: 400;
font-style: normal;
font-size: 20px !important;
padding-top: 0px;
}
.navbox-title {
background: #ff9ed3 url(/lore/images/rainbowtile.png);
background-size: 100% auto;
color: #7a0360;
font-family: "Pacifico",cursive;
/* width: 100%; */
text-decoration: none;
font-weight: 400;
font-style: normal;
font-size: 25px !important;
padding: 0.3em;
text-align: center !important;
border-radius: 9px;
border: white 2px solid;
}
.title-background-3 { background:#ffdcf2; }
.mw-collapsible span.mw-collapsible-toggle {
border: none;
outline: none;
background-image: none;
}
.mw-customtoggle-tvt {
border: 1px solid white;
border-radius: 4px;
clear:both;
margin-top:15px;
cursor:pointer;
padding:8px;
}
.mw-collapsible-toggle-default .mw-collapsible-text {
color: #ac69e3;
border-radius: 0.25em;
text-decoration: none;
}
.mw-collapsible-toggle-default .mw-collapsible-text:hover {
color: #e214a5 !important;
text-decoration: underline;
}
.mw-collapsible-toggle-default {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: none;
margin: 0;
padding: 0;
border: 0;
font-size: 90%;
font-weight: 600 !important;
font-family: "Quicksand" !important;
color: #7a0360 !important;
}
.mw-collapsible span.mw-collapsible-toggle {
float:left !important;
margin-left:0;
margin-right:1em;
text-align:left;
}
/* Infoboxes */
.infobox {
border: 1px solid #a2a9b1;
color: black;
padding: 0.2em;
font-size: 88%;
line-height: 1.5em;
border-spacing: 3px;
background-color: #ffdef3;
border-radius: 15px;
}
.pi-theme-floatleft {
float: left;
margin: 15px 15px 15px 15px !important;
}
.portable-infobox {
border: 1px solid #ff9ed3;
color: #801168;
width: 330px !important;
line-height: 2em;
border-spacing: 3px;
background-color: #ffdef3;
border-radius: 15px;
margin: 0px 10px 15px 15px;
}
.portable-infobox .pi-title {
border:0;
margin:0;
font-family:inherit;
font-size:1.60em;
line-height:1.5;
}
.portable-infobox .pi-border-color {
border-color: #f894ca;
}
.portable-infobox h2 {
color: #99126b !important;
}
.pi-section-navigation .pi-section-tab.pi-section-active, .pi-section-navigation .pi-section-tab.current, .pi-media-collection .pi-tab-link.current {
background: #eaecf0;
background: #ff9ed380;
font-weight: bold;
border-color: #f894ca;
}
.pi-section-navigation .pi-section-tab, .pi-media-collection .pi-tab-link {
border-width: 1px;
border-style: solid;
border-color: #f894ca6b;
background-color: #fff6;
}
.portable-infobox .pi-media {
margin: 0;
width: 100%;
text-align: center;
}
.pi-image-thumbnail {
width: 300px;
height: auto;
}
}
/* THUMBNAIL SIZES FOR THE INFOBOXES */
/* Default: character portraits */
[data-source="image250px"] .pi-image-thumbnail {
max-width: 250px;
}
/* Small supporting images (weapons, icons) */
[data-source="image200px"] .pi-image-thumbnail {
max-width: 200px;
}
[data-source="image150px"] .pi-image-thumbnail {
max-width: 150px;
}
/* Banner-style images (menus, headers) */
[data-source="image-banner"] .pi-image-thumbnail {
max-width: 100%;
width: 100%;
display: block;
}
.infobox-header,
.pi-header {
background-color: #ff9ed3;
text-align: center;
color: #7a0360;
font-family: "Quicksand", serif !important;
}
.portable-infobox .pi-data-label {
color: #801168;
}
.portable-infobox .pi-header {
background-color: #ff9ed3;
color: #7a0360;
padding: 10px 0px;
}
.pi-data-label {
font-family: "Quicksand" !important;
font-weight: 600 !important;
text-align: left;
}
.pi-title {
background-color: #ff9ed3;
padding: 0;
color: #7a0360;
font-family: "Pacifico", cursive !important;
max-width: 350px;
text-decoration: none;
font-weight: 400;
font-style: normal;
font-size: 20px;
padding-top: 0px;
text-align: center;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.portable-infobox .pi-title {
color: #7a0360 !important;
}
.infobox-title {
color: #7a0360;
font-family: "Pacifico", cursive !important;
width: 350px;
text-decoration: none;
font-weight: 400;
font-style: normal;
font-size: 20px;
padding-top: 0;
text-align: center;
}
@media screen {
.infobox {
background-color: #f8f9fa;
}
}
@media (max-width: 640px) {
.infobox {
width: 100%;
}
.infobox .nowrap {
white-space: normal;
}
}
@media (min-width: 640px) {
.infobox {
/* @noflip */
margin: 0.5em 0 0.5em 1em;
/* @noflip */
float: right;
/* @noflip */
clear: right;
width: 22em;
}
}
.documentation-container {
margin: 1em 0 0 0;
padding: 1em;
border: 4px dotted #ed51b7;
background-color: #ffe7f7;
border-radius: 15px;
}
.mw-parser-output .documentation,
.mw-parser-output .documentation-metadata {
border: none !important;
;
background-color: rgba(255, 255, 255, 0.87) !important;
border-radius: 15px;
clear: both;
}
.infobox-header,
.infobox-label,
.infobox-above,
.infobox-full-data,
.infobox-data,
.infobox-below,
.infobox-subheader,
.infobox-image,
.infobox-navbar,
/* Remove element selector when every .infobox thing is using the standard module/templates */
.infobox th,
.infobox td {
vertical-align: top;
}
.infobox-label,
.infobox-data,
/* Remove element selector when every .infobox thing is using the standard module/templates */
.infobox th,
.infobox td {
/* @noflip */
text-align: left;
}
/* Remove .infobox when element selectors above are removed */
.infobox .infobox-above,
.infobox .infobox-title,
/* Remove element selector when every .infobox thing is using the standard module/templates */
.infobox caption {
font-size: 125%;
font-weight: bold;
text-align: center;
}
.infobox-title,
/* Remove element selector when every .infobox thing is using the standard module/templates */
.infobox caption {
padding: 0.2em;
}
/* Remove .infobox when element selectors above are removed */
.infobox .infobox-header,
.infobox .infobox-subheader,
.infobox .infobox-image,
.infobox .infobox-full-data,
.infobox .infobox-below {
text-align: center;
}
/* Remove .infobox when element selectors above are removed */
.infobox .infobox-navbar {
/* @noflip */
text-align: right;
}
/* Normal font styling for wikitable row headers with scope="row" tag */
.wikitable.plainrowheaders th[scope=row],
.wikitable.plainrowheaders th[scope=rowgroup] {
font-weight: normal;
/* @noflip */
text-align: left;
}
/* Remove underlines from certain links */
.nounderlines a,
.IPA a:link,
.IPA a:visited {
text-decoration: none !important;
}
/* Prevent line breaks in silly places where desired (nowrap)
and links when we don't want them to (nowraplinks a) */
.nowrap,
.nowraplinks a {
white-space: nowrap;
}
/* But allow wrapping where desired: */
.wrap,
.wraplinks a {
white-space: normal;
}
/* texhtml class for inline math (based on generic times-serif class) */
/* remove spans when this is TemplateStyled */
span.texhtml {
font-family: "Nimbus Roman No9 L", "Times New Roman", Times, serif;
font-size: 118%;
line-height: 1;
/* Force tabular and lining display for texhtml */
font-variant-numeric: lining-nums tabular-nums;
font-kerning: none;
}
span.texhtml span.texhtml {
font-size: 100%;
}
@media (min-width: 640px) {
span.texhtml {
white-space: nowrap;
}
}
/* Prevent flags in tables from collapsing: Fix for T116318
* TODO: Remove when [[phab:T368469]] merges [[phab:T367463]] for the other skins
*/
@media (max-width: 640px) {
.flagicon a>img,
.flagicon noscript>img {
max-width: none !important;
}
}
.social-icons {
margin: 1em;
}
.social-icons a:hover {
color: #ffffff !important;
text-shadow: 0 0 10px rgba(255, 101, 199, 0.751);
transform: translateY(-10px) !important !important;
transition: transform 0.5s ease, text-shadow 0.5s ease !important;
}
.social-icons a {
margin: 0.5em;
line-height: 2.5em;
color: #fb4fb9 !important;
}
@media screen and (max-width: 551px) {
.mp_char_img img {
width: 120px !important;
height: 120px !important;
padding: 0.3em;
}
.mw-body {
padding: 0 !important;
margin: 0 !important;
}
#bodyContent {
max-width: 90% !important;
margin: 0 auto;
}
.pi-image-thumbnail {
width: 100%;
height: auto;
}
.portable-infobox {
max-width: 90% !important;
}
.mw-body h2,
.h2,
.mw-heading2,
mw-headline {
text-align: center;
}
}
@media screen {
.nochecker .gallerybox .thumb img {
background-image: none;
}
}
.mp_char_container {
margin: 10px;
text-align:center;
display: flex;
flex-wrap: wrap;
justify-content: center;
overflow: hidden;
}
/*!.mp_char_container div {
flex:1; *//*! flex-wrap:wrap
}*/
/*!.mp_char_bg {
position:relative; *//*! display:inline-block; *//*! width:200px; *//*! height:200px;
} */
/*! .mp_char_img {
position:absolute; *//*! top:50%; *//*! left:50%; *//*! transform:translate(-50%,-50%);
}*/
.mp_char_img img {
width: 170px;
height: 170px;
transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.mp_char_img img:hover {
transform: scale(1.075);
}
.mp_char_name {
position: absolute;
top: 0;
right: 5%;
font: oblique bold 20px/1 Softsoul Bold, Impact;
text-shadow: 0 0 5px #000;
z-index: 99;
}
.filtertoggle {
margin: auto;
display: flex;
text-align: center;
}
.filtertoggle div {
flex: 1;
}
/* Auto fullwidth images folllowing parent div size - From BanG Dream! Wiki */
.container_img img {
width: 100%;
height: 100%;
}
/*if overflow is set to auto or scroll */
.container_img::-webkit-scrollbar {
display: none;
}
/******* Drop Shadows - From BanG Dream! Wiki *******/
.drop-shadow_pink {
filter: drop-shadow(0 0 0.2rem #FF7FBB);
}
.drop-shadow_purple {
filter: drop-shadow(0 0 0.2rem #D17ADB);
}
.drop-shadow_blue {
filter: drop-shadow(0 0 0.2rem #73C5E7);
}
.drop-shadow_green {
filter: drop-shadow(0 0 0.2rem #77C14F);
}
.tablechart {
height: auto;
width: 150px;
margin-left: auto;
margin-right: auto;
background-repeat: no-repeat;
background-size: auto 100%;
background-position: center;
border: 1px #e13995;
position: relative;
cursor: url(https://images.pyonkotchi.com/cursorglow.png), default;
text-align: center;
border-collapse: separate;
border-spacing: 0;
border-radius: 15px;
overflow: hidden;
}
.tablechart td img {
display: block;
margin-left: auto;
margin-right: auto
}
.tablechart tr th,
.tablechart tr td {
border-right: 1px solid #f4a5d1;
border-bottom: 1px solid #f4a5d1
}
.tablechart tr th:first-child,
.tablechart tr td:first-child {
border-left: 1px solid #f4a5d1;
}
.tablechart tr th {
background: #eee;
border-top: 1px solid #f4a5d1;
text-align: center;
font-weight: 400;
}
.tablechart th {
background: #ff9ed3 !important;
padding: 10px 0;
border-right: 1px solid #f4a5d1
}
th {
font-weight: 400;}
.tablechart th:first-child {
background: #ff9ed3 !important;
border-right: 1px solid #f4a5d1;
}
/* top-left border-radius */
.tablechart tr:first-child th:first-child {
border-top-left-radius: 15px;
}
/* top-right border-radius */
.tablechart tr:first-child th:last-child {
border-top-right-radius: 15px;
}
/* bottom-left border-radius */
.tablechart tr:last-child td:first-child {
border-bottom-left-radius: 15px;
}
/* bottom-right border-radius */
.tablechart tr:last-child td:last-child {
border-bottom-right-radius: 15px;
}
.tablechart td,
.tablechart th {
text-align: center;
border-right: 1px solid #f4a5d1
}
.tablechart tr:nth-child(odd) {
background-color: #ffe7f7
}
.tablechart tr:nth-child(even) {
background-color: #ffdcf2
}
.tablehead {
color: #7a0360;
font-family: "Pacifico", cursive;
text-decoration: none;
font-weight: 400;
font-style: normal;
font-size: 20px;
}
.wikitable {
background-color: #f8f9fa;
color: #801168;
margin: 1em 0;
border: 1px solid #aaa;
border-collapse: collapse
}
.wikitable>tr>th,
.wikitable>*>tr>th {
background-color: #eaecf0;
color: #801168;
}
.mw_metadata td,
.mw_metadata th {
border: 1px solid #f672bb;
padding-left: 6px;
padding-right: 6px;
}
@media screen {
.wikitable>tr>th,
.wikitable>tr>td,
.wikitable>*>tr>th,
.wikitable>*>tr>td {
border: 1px solid #f672bb;
padding: 0.2em 0.4em;
}
}
@media screen and (min-width: 720px) {
.navbox-data {padding: 0 20%;}
}
/*Tabs for Gallery*/
ul.gallerytabs {
align-content: center;
align-items: center;
display: flex;
flex-flow: row wrap;
margin: 0;
}
.gallerytabs li {
display: block;
margin: 0 0 0 2px;
}
.gallerytabs li > :only-child {
border: 1px solid; border-bottom: none;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
display: block; min-width: 5.0em;
padding: 0.5em;
text-align: center;
text-decoration: none;
}
.gallerytabs li > :only-child {
background-color: #ff9ed3;
border-color: #ffdef3;
color: #ffffff;
}
.gallerytabs li > :only-child:hover {
box-shadow: inset 0 -2px 0 0 #63b6ff;
color: var(--color-progressive--hover,#447ff5);
background-color: #88c7ff;
}
.gallerytabs li > :only-child a,
.gallerytabs li > .selflink:only-child a {
color: #ffffff;
}
.gallerytabs li > .selflink:only-child {
box-shadow: 0 -2px 0 #9c74f4 inset;
background-color: #cd93ff;
color: #ffffff;
font-weight: bold;
}
/* TABBER */
.tabber__tab {
padding: 0.5em 0.75em;
font-weight: bold;
white-space: nowrap;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
border: 1px solid #ffdef3;
background-color: #ff9ed3;
margin-top: 5px;
margin-right: 5px;
}
.tabber__tab[aria-selected="true"] {
box-shadow: 0 -2px 0 #9c74f4 inset;
background-color: #cd93ff;
}
.tabber__tab[aria-selected="true"], .tabber__tab[aria-selected="true"]:visited {
color: #fff;
}
.tabber__tab, .tabber__tab:visited {
color: #801168;
}
.tabber__tab:hover {
box-shadow: inset 0 -2px 0 0 #63b6ff;
color: var(--color-progressive--hover,#447ff5);
background-color: #88c7ff;
}
a:where(:not([role="button"])):visited:hover {
color: #63ceff;
}
a:hover, a:focus {
text-decoration: underline;
color: #63ceff;
}
.tabber__header {
box-shadow: inset 0 -1px 0 0 rgba(212, 51, 182, 0.49);
}
.mw-hide-empty-elt .mw-parser-output:not(.mw-show-empty-elt) .mw-empty-elt {
display: inherit;
}
.tabber__panel2 {
height: max-content;
overflow-x: auto;
scroll-snap-align: start;
background-color: rgba(255, 210, 234, 0.226);
border-radius: 15px;
}
.mw-parser-output .fake-heading {
background: none;
margin: 0;
overflow: visible !important;
padding-bottom: 0.17em;
page-break-after: avoid;
padding-top: 0.5em;
color: #f02c97;
font-family: "Pacifico",cursive !important;
text-decoration: none;
font-weight: 400;
font-style: normal;
}
.h1:after,
.h2:after,
.h3:after {
content: "";
display: flex;
max-width: 100%;
margin-top:0.17em;
margin-bottom: 5px;
border-bottom: 1px solid #f4a5d1;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.h2,
.h3,
.h4 {
color: #f02c97;
font-family: "Pacifico", cursive;
width: 100%;
text-decoration: none;
font-weight: 400;
font-style: normal;
padding-top: 10px;
padding-bottom: 0.17em;
}
.h2 {
font-size: 30px;
}
.h3,
.h4 {
font-size: 25px;
}
/* Episode thing? */
:root {
--dark-episodelist-tr-color: #5F0743;
--light-episodelist-info-border: #ffb5de;
--dark-episodelist-info-border: #960b6a;
--episodelist-col: calc(100% / 12);
}
.episodelist .episode__synopsis2 td, .episodelist .episode__info3 td:not(:first-child) {
border: 3px dotted var(--light-episodelist-info-border);
padding: 5px;
}
.episodelist .episode__info, .episodelist .episode__info2 {
text-align: center
}
.episodelist .episode__info3 {
text-align: left;
}
.episodelist .episode__info td:first-of-type, .episodelist .episode__info3 td:first-of-type {
background: #ffb5de;
border-radius: 5px;
text-align: center;
}
.episodelist .episode__info2 td:first-of-type {
background: #ffd0ea;
border-radius: 5px;
}
.episodelist .episode__info2 td:not(:first-child) {
border: 2px solid var(--light-episodelist-info-border);
}
.episodelist {
border: 3px dotted #ed51b7;
background: rgba(255,210,234,0.226);
text-align: left;
color: #801168;
border-radius: 5px;
padding: 5px;
width: 90%;
margin: 1em auto 1em auto;
}
.episodelist th {
text-align: center;}
.episodelist > tbody > tr:first-of-type {
background: linear-gradient(to bottom,#ff9ed3,#ff80d3);
}
.episodelist .episode__info td:not(:first-child) {
border: 2px solid var(--light-episodelist-info-border);
}
.episodelist .episode__synopsis td {
border: 2px solid var(--light-episodelist-info-border);
padding: 5px;
}
.episodelist th:first-of-type {
min-width: calc(var(--episodelist-col) * 1.5);
}
.episodelist th:nth-child(2) {
min-width: calc(var(--episodelist-col) * 7);
}
.episodelist th:nth-child(3) {
min-width: calc(var(--episodelist-col) * 1.75);
}
.episodelist th:last-of-type {
min-width: calc(var(--episodelist-col) * 1.75);
}
/* five column fixes */
.episodelist.el_5col th:nth-child(2) {min-width: calc(var(--episodelist-col) * 6.5)}
.episodelist.el_5col th:nth-child(3) {min-width: calc(var(--episodelist-col) * 1.5)}
.episodelist.el_5col th:last-of-type {min-width: calc(var(--episodelist-col) * 1)}
.episodelist.el_5col th:nth-child(4):not(:last-of-type) {min-width: calc(var(--episodelist-col) * 1.5)}
/*
* Put anything you mean to be a sitewide addition above the TemplateStyles
* comment above.
*/