MediaWiki:Common.css

/* CSS placed here will be applied to all skins */

/* Gradient color variables */
 * root {

--light-grad-red:   #FBCDF2; --light-grad-orange: #FEE3E2; --light-grad-yellow: #FCF4C9; --light-grad-green: #BBF3C0; --light-grad-blue:  #ABBFFF; --light-grad-purple: #E8BEFA; --dark-grad-red:    #FF6355; --dark-grad-orange: #FBA949; --dark-grad-yellow: #FAE442; --dark-grad-green:  #8BD448; --dark-grad-blue:   #2AA8F2; --dark-grad-purple: #9C4F96; }

/* Infobox styling */ .theme-fandomdesktop-light .portable-infobox { --pi-background: var(--theme-page-background-color--secondary); --pi-secondary-background: linear-gradient(to bottom right,var(--light-grad-purple) 0%, var(--light-grad-red) 34%, var(--light-grad-orange) 52%, var(--light-grad-yellow) 68%, var(--light-grad-green) 84%, var(--light-grad-blue) 100%); --pi-secondary-background--label: var(--theme-accent-label-color); --pi-border-color: transparent; border-radius: 3px; border-style: solid; border-width: 2px; border-image: linear-gradient(to bottom right,var(--light-grad-purple) 0%, var(--light-grad-red) 34%, var(--light-grad-orange) 52%, var(--light-grad-yellow) 68%, var(--light-grad-green) 84%, var(--light-grad-blue) 100%); border-image-slice: 1; }

.theme-fandomdesktop-dark .portable-infobox { --pi-background: var(--theme-page-background-color--secondary); --pi-secondary-background: linear-gradient(to bottom right,var(--dark-grad-purple) 0%, var(--dark-grad-red) 34%, var(--dark-grad-orange) 52%, var(--dark-grad-yellow) 68%, var(--dark-grad-green) 84%, var(--dark-grad-blue) 100%); --pi-secondary-background--label: var(--theme-accent-label-color); --pi-border-color: transparent; border-radius: 3px; border-style: solid; border-width: 2px; border-image: linear-gradient(to bottom right,var(--dark-grad-purple) 0%, var(--dark-grad-red) 34%, var(--dark-grad-orange) 52%, var(--dark-grad-yellow) 68%, var(--dark-grad-green) 84%, var(--dark-grad-blue) 100%); border-image-slice: 1; } .theme-fandomdesktop-dark .pi-title, .theme-fandomdesktop-dark .pi-header { color:#000; }

.portable-infobox .pi-data-label { display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: flex; -ms-flex-preferred-size:40%; -webkit-flex-basis:40%; -moz-flex-basis:40%; flex-basis: 40%; }

/* TOC styling */ .theme-fandomdesktop-light .page-content .toc, .theme-fandomdesktop-light .portable-infobox { border-width: 2px; border-image: linear-gradient(to bottom right,var(--light-grad-purple) 0%, var(--light-grad-red) 34%, var(--light-grad-orange) 52%, var(--light-grad-yellow) 68%, var(--light-grad-green) 84%, var(--light-grad-blue) 100%); border-image-slice: 1; }

.theme-fandomdesktop-dark .page-content .toc, .theme-fandomdesktop-dark .portable-infobox { border-image: linear-gradient(to bottom right,var(--dark-grad-purple) 0%, var(--dark-grad-red) 34%, var(--dark-grad-orange) 52%, var(--dark-grad-yellow) 68%, var(--dark-grad-green) 84%, var(--dark-grad-blue) 100%); border-image-slice: 1; }

/* New article button styling */ .theme-fandomdesktop-light .style { background: linear-gradient(to bottom right,var(--light-grad-purple) 0%, var(--light-grad-red) 34%, var(--light-grad-orange) 52%, var(--light-grad-yellow) 68%, var(--light-grad-green) 84%, var(--light-grad-blue) 100%); }

.theme-fandomdesktop-dark .style { background: linear-gradient(to bottom right,var(--dark-grad-purple) 0%, var(--dark-grad-red) 34%, var(--dark-grad-orange) 52%, var(--dark-grad-yellow) 68%, var(--dark-grad-green) 84%, var(--dark-grad-blue) 100%); color:#000000; } .theme-fandomdesktop-dark .style a { color:#000000; }

/* Inverting images in dark mode */ .theme-fandomdesktop-dark img[data-image-name="Nonbinary Gender Symbol.svg"], .theme-fandomdesktop-dark img[data-image-name="Pulse logo.png"], .theme-fandomdesktop-dark img[data-image-name="Xenogender Symbol.svg"], .theme-fandomdesktop-dark img[data-image-name="Xenogender Flag Symbol.svg"], .theme-fandomdesktop-dark img[data-image-name="Questioning Symbol.png"], .theme-fandomdesktop-dark .invert img { filter: invert(1); }

/* Template:MessageBox styling */ .mbox { margin-bottom: 2em; }

.theme-fandomdesktop-light .mbox, .theme-fandomdesktop-light .stub-box, .theme-fandomdesktop-light .disclaimer-box { border-width: 2px; border-image: linear-gradient(to bottom right,var(--light-grad-purple) 0%, var(--light-grad-red) 34%, var(--light-grad-orange) 52%, var(--light-grad-yellow) 68%, var(--light-grad-green) 84%, var(--light-grad-blue) 100%); border-image-slice: 1; border-style: solid; }

.theme-fandomdesktop-dark .mbox, .theme-fandomdesktop-dark .stub-box, .theme-fandomdesktop-dark .disclaimer-box { border-width: 2px; border-image: linear-gradient(to bottom right,var(--dark-grad-purple) 0%, var(--dark-grad-red) 34%, var(--dark-grad-orange) 52%, var(--dark-grad-yellow) 68%, var(--dark-grad-green) 84%, var(--dark-grad-blue) 100%); border-image-slice: 1; border-style: solid; }

/* For Template:Warning */ .warning-box { border-width: 2px; border-image: linear-gradient(to bottom right,var(--dark-grad-red) 0%, var(--dark-grad-orange) 50%); border-image-slice: 1; border-style: solid; padding: 7px; margin-bottom: 2em; color: var(--theme-body-text-color); clear: both; } .warning-icon { padding-right: 1em; } .warning-title { font-weight: bold; color: var(--dark-grad-red); }

/* For Template:Stub and others */ .stub-box, .disclaimer-box { padding: 7px; margin-bottom: 2em; color: var(--theme-body-text-color); display: flex; }

/* Image border to avoid color blending with background */ .thumb a .thumbimage { border:1px solid var(--theme-border-color); }

/*Quote styling */ flex-basis: 100%; position: relative; padding: 0 2em; font-size: 1.1em; }
 * 1) content .pull-quote__text {

content: "—"; }
 * 1) content .pull-quote__source::before {

font-style: normal; font-weight: 500; }
 * 1) content .pull-quote__source {

/* Hatnotes, ex. */ .hatnote { font-weight: 500; font-style: italic; } .hatnote a::after { padding-left: 5px; content: "\2794"; font-style: normal; } .seealso { margin-left: 1.75em; }

/* Main page */

/** Gradients **/

.lgbt-grad-mp { background: linear-gradient(90deg, var(--dark-grad-red) 16.66%, var(--dark-grad-orange) 16.66%, 33.32%, var(--dark-grad-yellow) 33.32%, 49.98%, var(--dark-grad-green) 49.98%, 66.64%, var(--dark-grad-blue) 66.64%, 83.3%, var(--dark-grad-purple) 83.3%); }

.gender-grad-mp { background: linear-gradient(90deg, #5BCEFA 16.66%, #F1A8B8 16.66%, 33.32%, #FFFFFF 33.32%, 49.98%, #FEF332 49.98%, 66.64%, #9C58D1 66.64%, 83.3%, #000000 83.3%); }

.sexor-grad-mp { background: linear-gradient(90deg, #E8488B 16.66%, #FCD933 16.66%, 33.32%, #46B4FB 33.32%, 49.98%, #EE9ACD 49.98%, 66.64%, #210F44 66.64%, 83.3%, #675EFC 83.3%); }

.romor-grad-mp { background: linear-gradient(90deg, #E84889 16.66%, #FCD833 16.66%, 33.32%, #45B2FB 33.32%, 49.98%, #4E9A35 49.98%, 66.64%, #734F94 66.64%, 83.3%, #0039A7 83.3%); }

.circular--50 img { object-fit: cover; border-radius: 50%; height: 50px; width: 50px; }

/* WikiaBarWrapper styling */ .WikiaBarWrapper { background-image:linear-gradient(90deg,var(--dark-grad-purple) 0%, var(--dark-grad-red) 34%, var(--dark-grad-orange) 52%, var(--dark-grad-yellow) 68%, var(--dark-grad-green) 84%, var(--dark-grad-blue) 100%); background-size: auto 100%; } .WikiaBarWrapper .tools .wds-dropdown__toggle>a, .WikiaBarWrapper .tools>li>a, .WikiaBarWrapper .tools .wds-dropdown__toggle>svg, .WikiaBarWrapper .tools>li>svg { color:#fff; filter: drop-shadow(0px 0px 1px #000) drop-shadow(0px 0px 0px #000) drop-shadow(0px 0px 0px #000); } .WikiaBarWrapper .arrow .close-icon { background-color:#FFFFFF; color:#360b52; }

/* Custom Scrollbar */
 * -webkit-scrollbar {

background-color: var(--theme-body-background-color); }
 * -webkit-scrollbar-thumb {

background: linear-gradient(155deg,var(--dark-grad-purple) 0%, var(--dark-grad-red) 34%, var(--dark-grad-orange) 52%, var(--dark-grad-yellow) 68%, var(--dark-grad-green) 84%, var(--dark-grad-blue) 100%); }

/* H2 bottom line styling */ .theme-fandomdesktop-light .page-content h2 { border-bottom-width: 2px; border-image: linear-gradient(90deg, var(--light-grad-purple) 0%, var(--light-grad-red) 34%, var(--light-grad-orange) 52%, var(--light-grad-yellow) 68%, var(--light-grad-green) 84%, var(--light-grad-blue) 100%); border-image-slice: 1; } .theme-fandomdesktop-dark .page-content h2 { border-bottom-width: 2px; border-image: linear-gradient(90deg, var(--dark-grad-purple) 0%, var(--dark-grad-red) 34%, var(--dark-grad-orange) 52%, var(--dark-grad-yellow) 68%, var(--dark-grad-green) 84%, var(--dark-grad-blue) 100%); border-image-slice: 1; }

/* Rainbowbox class styling */ .theme-fandomdesktop-light .rainbowbox { border-radius: 3px; border-style: solid; border-width: 2px; border-image: linear-gradient(to bottom right,var(--light-grad-purple) 0%, var(--light-grad-red) 34%, var(--light-grad-orange) 52%, var(--light-grad-yellow) 68%, var(--light-grad-green) 84%, var(--light-grad-blue) 100%); border-image-slice: 1; padding:10px; }

.theme-fandomdesktop-dark .rainbowbox { border-radius: 3px; border-style: solid; border-width: 2px; border-image: linear-gradient(to bottom right,var(--dark-grad-purple) 0%, var(--dark-grad-red) 34%, var(--dark-grad-orange) 52%, var(--dark-grad-yellow) 68%, var(--dark-grad-green) 84%, var(--dark-grad-blue) 100%); border-image-slice: 1; padding:10px; }

/* Languages styling */ .page-footer__languages { margin: 1em; padding: 0 1em; } .wds-collapsible-panel__content { padding-bottom: 1em; }

.theme-fandomdesktop-light .page-footer__languages { border-width: 1px; border-image: linear-gradient(to bottom right,var(--light-grad-purple) 0%, var(--light-grad-red) 34%, var(--light-grad-orange) 52%, var(--light-grad-yellow) 68%, var(--light-grad-green) 84%, var(--light-grad-blue) 100%); border-image-slice: 1; }

.theme-fandomdesktop-dark .page-footer__languages { border-width: 1px; border-image: linear-gradient(to bottom right,var(--dark-grad-purple) 0%, var(--dark-grad-red) 34%, var(--dark-grad-orange) 52%, var(--dark-grad-yellow) 68%, var(--dark-grad-green) 84%, var(--dark-grad-blue) 100%); border-image-slice: 1; }