MediaWiki:Common.css

/* CSS placed here will be applied to all skins */ /* This governs the sections on the Community portal */ @import url('https://fonts.googleapis.com/css?family=Alegreya+Sans');

.cpbox { display: flex; flex-direction: row-reverse; flex-wrap: wrap; }

.cpbox #admins { box-sizing: border-box; width: calc(33% - 10px); margin: 5px; flex-grow: 1; min-width: 300px; }

.cpbox #help { box-sizing: border-box; width: calc(67% - 10px); margin: 5px; flex-grow: 1; }

/* Template documentation styles */ /* If modifying these styles, be sure to update the mobile skin! */ .doc { margin: 0em auto 1em; background-color: rgba(0, 0, 0, 0.1); border: 2px solid #BDCAC3; border-radius: 1em; padding: 1em; }

.doc-header { padding-bottom: 3px; border-bottom: 1px solid #BDCAC3; margin-bottom: 1ex; }

.doc-footer { margin: 0; background-color: rgba(0, 0, 0, 0.1); border: 2px solid #BDCAC3; border-radius: 1em; padding: 1em; }

/* Classes permitting setting of alignment on desktop only or differently on desktop and mobile */ /* (See .mobileleft, .mobilecenter, .mobileright in MediaWiki:Mobile.css for the mobile equivalents */ .desktopleft {   text-align: left; }

.desktopcenter { text-align: center; }

.desktopright { text-align: right; }

/****************** /* General styles * /******************/ span.bullet { background: transparent no-repeat center 60%; width: 9px; font-size: 11px; vertical-align: baseline; }

.dablink { padding: 2px 36px 10px 36px; font-style: italic; }

span.ghost { color: #777777; /* For any text that appear fainter for some reason */ }

.columns { padding: 0; margin: 10px 0 0 0; overflow: hidden; }

.columns .leftcol { float: left; width: 50%; margin: 0; padding: 0; }

.columns .centercol { float: left; margin: 0; padding: 0; }

.columns .rightcol { float: right; width: 50%; margin: 0; padding: 0; }

/* Front page structure */ .fpbox { margin: 5px; padding: 5px; overflow: auto; width: calc(100% - 2px); }

.fpbox.plain { background: transparent; border: none; box-shadow: none; }

.fpbox .heading, .fpbox .mainheading, .fpbox .welcome { margin: 0 0 10px; padding: 0 0 5px; overflow: auto; }

.fpbox .mainheading, .fpbox .welcome { font-size: 150%; font-weight: bold; }

.fpbox .heading { text-align: center; font-size: 132%; }

.linkslabel { margin: 15px 5px 5px; padding: 0 0 5px; }

/* Template:FP links styles */ .fplinks { display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: stretch; text-align: center; }

.fplink-outer { padding: 5px; flex-basis: calc(25% - 10px); width: calc(25% - 15px); min-width: 115px; display: inline-block; vertical-align: middle; }

.fplink-wide { flex-basis: calc(33% - 10px); width: calc(33% - 15px); }

.fplink-fullwidth { flex-basis: 100%; width: calc(100% - 15px); font-weight: bold; }

.fplink { padding: 0.5em; box-sizing: border-box; width: 100%; height: 100%; display: table; }

.fplink-plain { background: transparent; border-radius: 0; border: 0; box-shadow: none; }

.fplink-inner { display: table-row; }

.fplink a { display: table-cell; vertical-align: middle; }

.fplink img { max-width: 150px; width: 100%; height: auto; } /* Auto-resize front page video to fit smaller columns */ .fpbox .embedvideowrap { width: 100%!important; max-width: 480px; margin: 0 auto; }

.fpbox .embedvideowrap iframe { width: 100%!important; }

/* Multi-column box support */ .fp-container main .columns .leftcol, .fp-container .columns .rightcol { width: 100%; margin: 0; padding: 0; }

@media (min-width: 990px) { .fp-container .columns .leftcol { float: left; width: 50%; }

.fp-container .columns .rightcol { float: right; width: 50%; } }

/* This CSS governs the responsive 2 column main page layout */ min-height:calc(325px + 2.3em); }
 * 1) fptweets {

display: grid; grid-template-areas: "a" "b" "c" "d"; grid-template-columns: 100%; } @media screen and (min-width:990px) { #fp-2column.fp-container { grid-template-areas: "a c" "d d" "b b"; grid-template-columns: 50% 50%; } } @media screen and (min-width:1350px) { #fp-2column.fp-container { grid-template-areas: "a c c" "a b b" "d b b"; grid-template-columns: 33.3% 33.3% 33.3%; } }
 * 1) fp-2column.fp-container {

.fp-section { display: flex; flex-wrap: wrap; }

grid-area: a; }
 * 1) fp-1 {

grid-area: b; }
 * 1) fp-2 {

grid-area: c; }
 * 1) fp-3 {

grid-area: d; }
 * 1) fp-4 {

.fp-header { background:var(--theme-sticky-nav-background-color); border:1px solid var(--theme-accent-color); color:var(--theme-sticky-nav-text-color); font-size:150%; margin-bottom:5px; padding: 1px; text-align:center; }

.headerdd2 { background:var(--theme-sticky-nav-background-color); border:1px solid var(--theme-accent-color); color:var(--theme-sticky-nav-text-color); font-size:150%; margin-bottom:5px; padding: 1px; text-align:center; }

.fp-archives { display: flex; flex-wrap:wrap; margin: 0 auto; justify-content: center; }

.fp-archives > div { width: 95px; text-align: center; }

.fp-archivesdd2 { display: flex; flex-wrap:wrap; margin: 0 auto; justify-content: center; }

.fp-archivesdd2 > div { width: 170px; text-align: center; }

.fp-heroes { display: flex; flex-wrap: wrap; margin: 0 auto; justify-content: center; }

.fp-heroes > div { width: 100px; text-align: center; margin: 5px; }

.fp-classes { display: flex; flex-wrap: wrap; max-width: 500px; margin: 0 auto; justify-content: center; }

.fp-classes > div { width: 120px; margin: 2.5px; }

/* Colors (to ensure readability on light and dark skins) */ .Header { background: rgba(117, 0, 0, 0.83); color: #ffffff; }

.theme-fandomdesktop-light .Header { background: rgba(255, 0, 0, 0.83); color: #000000; }

.theme-fandomdesktop-light .headerdd2 { background: rgba(158, 168, 210, 1); color: #000000;

}

.theme-fandomdesktop-dark .headerdd2 { background: rgba(25,26,39,1); color: #ffffff; border-color:#7D80A0; border-width: 1px }

.infoboxmajorheader, .wikitable > * > tr > .infoboxmajorheader, .ooui-theme-fandomooui .wikitable > * > tr > .infoboxmajorheader { background: #610804; color: #ffffff; }

.infoboxminorheader, .wikitable > * > tr > .infoboxminorheader, .ooui-theme-fandomooui .wikitable > * > tr > .infoboxminorheader { background: #787878; }

.theme-fandomdesktop-light .infoboxminorheader, .theme-fandomdesktop-light .wikitable > * > tr > .infoboxminorheader, .theme-fandomdesktop-light .ooui-theme-fandomooui .wikitable > * > tr > .infoboxminorheader { background: #aaaaaa; }

.infoboxproheader, .wikitable > * > tr > .infoboxproheader, .ooui-theme-fandomooui .wikitable > * > tr > .infoboxproheader { background: #008000; }

.theme-fandomdesktop-light .infoboxproheader, .theme-fandomdesktop-light .wikitable > * > tr > .infoboxproheader, .theme-fandomdesktop-light .ooui-theme-fandomooui .wikitable > * > tr > .infoboxproheader { background: #00ff00; }

.infoboxconheader, .wikitable > * > tr > .infoboxconheader, .ooui-theme-fandomooui .wikitable > * > tr > .infoboxconheader { background: #9d160c; }

.theme-fandomdesktop-light .infoboxconheader, .theme-fandomdesktop-light .wikitable > * > tr > .infoboxconheader, .theme-fandomdesktop-light .ooui-theme-fandomooui .wikitable > * > tr > .infoboxconheader { background: #f58880; }

.infoboxcellaccent, .wikitable > * > tr > .infoboxcellaccent, .ooui-theme-fandomooui .wikitable > * > tr > .infoboxcellaccent { background: #0d0d0d; }

.theme-fandomdesktop-light .infoboxcellaccent, .theme-fandomdesktop-light .wikitable > * > tr > .infoboxcellaccent, .theme-fandomdesktop-light .ooui-theme-fandomooui .wikitable > * > tr > .infoboxcellaccent { background: #eeeeee; }

.tablebg, .wikitable.tablebg, .wikitable > * > tr > .tablebg, .ooui-theme-fandomooui .wikitable > * > tr > .tablebg { background-color: rgba(0, 0, 0, 0.6); }

.theme-fandomdesktop-light .tablebg, .theme-fandomdesktop-light .wikitable.tablebg, .theme-fandomdesktop-light .wikitable > * > tr > .tablebg, .theme-fandomdesktop-light .ooui-theme-fandomooui .wikitable > * > tr > .tablebg { background-color: rgba(224, 224, 224, 0.6); }

.tablebgdd2, .wikitable.tablebgdd2, .wikitable > * > tr > .tablebgdd2, .ooui-theme-fandomooui .wikitable > * > tr > .tablebgdd2 { background-color: rgba(13, 13, 13, 1); color:#BBB9AEFF; }

.theme-fandomdesktop-light .tablebgdd2, .theme-fandomdesktop-light .wikitable.tablebgdd2, .theme-fandomdesktop-light .wikitable > * > tr > .tablebgdd2, .theme-fandomdesktop-light .ooui-theme-fandomooui .wikitable > * > tr > .tablebgdd2 { background-color: rgba(224, 223, 203, 1); color: #000000; }

.tabletitle, .wikitable > * > tr > .tabletitle, .ooui-theme-fandomooui .wikitable > * > tr > .tabletitle, .majortableheader, .wikitable > * > tr > .majortableheader, .ooui-theme-fandomooui .wikitable > * > tr > .majortableheader { background-color: #312424; }

.theme-fandomdesktop-light .tabletitle, .theme-fandomdesktop-light .wikitable > * > tr > .tabletitle, .theme-fandomdesktop-light .ooui-theme-fandomooui .wikitable > * > tr > .tabletitle, .theme-fandomdesktop-light .majortableheader, .theme-fandomdesktop-light .wikitable > * > tr > .majortableheader, .theme-fandomdesktop-light .ooui-theme-fandomooui .wikitable > * > tr > .majortableheader { background-color: #e0d5d5; }

.tabletitle2, .wikitable > * > tr > .tabletitle2, .ooui-theme-fandomooui .wikitable > * > tr > .tabletitle2, .majortableheader2, .wikitable > * > tr > .majortableheader2, .ooui-theme-fandomooui .wikitable > * > tr > .majortableheader2 { background-color: #290404; }

.theme-fandomdesktop-light .tabletitle2, .theme-fandomdesktop-light .wikitable > * > tr > .tabletitle2, .theme-fandomdesktop-light .ooui-theme-fandomooui .wikitable > * > tr > .tabletitle2, .theme-fandomdesktop-light .majortableheader2, .theme-fandomdesktop-light .wikitable > * > tr > .majortableheader2, .theme-fandomdesktop-light .ooui-theme-fandomooui .wikitable > * > tr > .majortableheader2 { background-color: #fcdede; }

.healtitle, .wikitable > * > tr > .healtitle, .ooui-theme-fandomooui .wikitable > * > tr > .healtitle { background-color: #005C00; color: #ffffff; }

.bufftitle, .wikitable > * > tr > .bufftitle, .ooui-theme-fandomooui .wikitable > * > tr > .bufftitle { background-color: #267396; color: #ffffff; }

.destroytitle, .wikitable > * > tr > .destroytitle, .ooui-theme-fandomooui .wikitable > * > tr > .destroytitle { background-color: #610804; color: #ffffff; }

.accent1tableheader, .wikitable > * > tr > .accent1tableheader, .ooui-theme-fandomooui .wikitable > * > tr > .accent1tableheader { background-color: #0d0d0d; }

.theme-fandomdesktop-light .accent1tableheader, .theme-fandomdesktop-light .wikitable > * > tr > .accent1tableheader, .theme-fandomdesktop-light .ooui-theme-fandomooui .wikitable > * > tr > .accent1tableheader { background-color: #eeeeee; }

.accent1tablecell, .wikitable > * > tr > .accent1tablecell, .ooui-theme-fandomooui .wikitable > * > tr > .accent1tablecell { background-color: #171010; }

.theme-fandomdesktop-light .accent1tablecell, .theme-fandomdesktop-light .wikitable > * > tr > .accent1tablecell, .theme-fandomdesktop-light .ooui-theme-fandomooui .wikitable > * > tr > .accent1tablecell { background-color: #fff9f9; }

.accent2tablecell, .wikitable > * > tr > .accent2tablecell, .ooui-theme-fandomooui .wikitable > * > tr > .accent2tablecell { background-color: #222222; }

.theme-fandomdesktop-light .accent2tablecell, .theme-fandomdesktop-light .wikitable > * > tr > .accent2tablecell, .theme-fandomdesktop-light .ooui-theme-fandomooui .wikitable > * > tr > .accent2tablecell { background-color: #dddddd; }

.accent3tablecell, .wikitable > * > tr > .accent3tablecell, .ooui-theme-fandomooui .wikitable > * > tr > .accent3tablecell { background-color: #787878; }

.theme-fandomdesktop-light .accent3tablecell, .theme-fandomdesktop-light .wikitable > * > tr > .accent3tablecell, .theme-fandomdesktop-light .ooui-theme-fandomooui .wikitable > * > tr > .accent3tablecell { background-color: #999999; }

.darkiconcell, .wikitable > * > tr > .darkiconcell, .ooui-theme-fandomooui .wikitable > * > tr > .darkiconcell { background-color: #000000; color: #ffffff; }

.negative { color: #AE1B14; }

.positive { color: #FAFF90; }

.theme-fandomdesktop-light .positive { color: #848b00; }

.great { color: #88db88; }

.theme-fandomdesktop-light .great { color: #3bc23b; }

.better { color: #a3dba3; }

.theme-fandomdesktop-light .better { color: #5abe5a; }

.good { color: #badbba; }

.theme-fandomdesktop-light .good { color: #56a656; }

.poor { color: #dba3a3; }

.theme-fandomdesktop-light .poor { color: #be5a5a; }

.bad { color: #db7575; }

.theme-fandomdesktop-light .bad { color: #ba3030; }

/* Rarity and status colors */ .verycommon, .common { color: #a8a8a8; }

.uncommon { color: #60954b; }

.rare { color: #3b61a7; }

.veryrare { color: #c24500; }

.shrieker, .ancestral, .darkestdungeon { color: #e02700; }

.crimsoncourt { color: #b11900; }

.backer { color: #4dbf7a; }

.trophy { color: #deb669; }

.theme-fandomdesktop-light .trophy { color: #d5a03f; }

.crystalline, .keepsake { color: #a3ffee; }

.theme-fandomdesktop-light .crystalline, .theme-fandomdesktop-light .keepsake { color: #00f0c4; }

.ringmaster { color: #c11900; }

.thing { color: #4a929c; }

.bleed, .death, .mark, .dd, .afflict { color: #c41c1c; }

.blight { color: #bdc241; }

.theme-fandomdesktop-light .blight { color: #9a9d33; }

.debuff, .riposte { color: #c3630f; }

.stun, .daze { color: #c99c45; }

.theme-fandomdesktop-light .stun, .theme-fandomdesktop-light .daze { color: #aa8231; }

.disease { color: #798d45; }

.theme-fandomdesktop-light .disease { color: #5b6b34; }

.move, .knockback, .pull, .back, .forward { color: #4c8ba2; }

.trap { color: #8860b2; }

.death { color: #c41c1c; }

.heal, .restore { color: #87c241; }

.theme-fandomdesktop-light .heal, .theme-fandomdesktop-light .restore { color: #6d9d33; }

.buff, .guard, .guarding, .guarded, .bypass, .shuffle { color: #5ec9d6; }

.theme-fandomdesktop-light .buff, .theme-fandomdesktop-light .guard, .theme-fandomdesktop-light .guarding, .theme-fandomdesktop-light .guarded, .theme-fandomdesktop-light .bypass, .theme-fandomdesktop-light .shuffle { color: #35bacc; }

.scouting, .surprise { color: #55998b; }

.ranged, .melee { color: #8d7b5f; }

.stealth { color: #443f86; }

.duration, .modifier { color: #a8a8a8; }

.theme-fandomdesktop-light .duration, .theme-fandomdesktop-light .modifier { color: #666666; }

.item-table-header, .wikitable > * > tr > .item-table-header, .ooui-theme-fandomooui .wikitable > * > tr > .item-table-header { text-align: center; color: #fff; background-color: #444f61; padding: 10px 20px 10px 20px; border-width: 2px; border-color: #111; }

.theme-fandomdesktop-light .item-table-header, .theme-fandomdesktop-light .wikitable > * > tr > .item-table-header, .theme-fandomdesktop-light .ooui-theme-fandomooui .wikitable > * > tr > .item-table-header { color: #fff; background-color: #fff; border-color: #B2AB9E; }

.item-table-cell, .wikitable > * > tr > .item-table-cell, .ooui-theme-fandomooui .wikitable > * > tr > .item-table-cell { text-align: center; color: #BBB9AE; background-color: #131313; padding: 10px 20px 10px 20px; border-width: 2px; border-color: #0D0D0D; }

.theme-fandomdesktop-light .item-table-cell, .theme-fandomdesktop-light .wikitable > * > tr > .item-table-cell, .theme-fandomdesktop-light .ooui-theme-fandomooui .wikitable > * > tr > .item-table-cell { color: #444; background-color: #E6DEC8; border-color: #B2AB9E; }

/*Font Colors for DD2 Stuff*/

.red-dd2 { color: #970700; }

.blue-dd2 { color: #2364C6; }

.green-dd2 { color: #6BE042; }

.yellow-dd2 { color: #AD802F; }

.white-dd2 { color: #FFFFFF; }

.neutral-dd2 { color: #AEACA2; }

.notable-dd2 { color: #b0935e; }

.harmful-dd2 { color: #3b6196; }

.health-dd2 { color: #970700; }

.stress-dd2 { color: #E0DDCE; }

.stun-dd2 { color: #C59944; }

.move-dd2 { color: #685F91; }

.blight-dd2 { color: #D1F869; }

.bleed-dd2 { color: #B10000; }

.burn-dd2 { color: #DF4917; }

.debuff-dd2 { color: #3b6196; }

.buff-dd2 { color: #AE915D; }

.theme-fandomdesktop-light .buff-dd2 { color:#80853F; }

.mark-dd2 { color: #B10000; }

.deathdoor-dd2 { color: #B10000; }

.deathblow-dd2 { color: #FE7600; }

.heal-dd2 { color: #52FE6F; }

.theme-fandomdesktop-light .heal-dd2 { color:#598657; }

.combo-dd2 { color: #9147E2; }

.stealth-dd2 { color: #433E83; }

.damage-dd2 { color: #FF0000; }

.crit-dd2 { color: #FE7600; }

.item-nameline-dd2 { color: #B19F61; }

.item-typeline-dd2 { color: #4D4B49; }

.item-effectline-dd2 { color: #BBB9AE; }

.item-discardline-dd2 { color: #666666; }

.item-combat-dd2 { color: #722519; }

.item-rest-dd2 { color: #4a5331; }

.item-rest-hero-dd2 { color: #60633D; }

.item-coach-dd2 { color: #663d20; }

.item-trophy-dd2 { color: #4D4C68; }

.item-deliverable-dd2 { color: #4D324E; }

.item-pet-dd2 { color: #925518; }

.item-infernal-dd2 { color: #414C9D; }

.item-radiant-dd2 { color: #D5BE7C; }

.set-bonus-dd2 { color: #83932C; }

.stat-buff-dd2 { color: #b0935e; }

.stat-reg-dd2 { color: #555555; }

.stat-debuff-dd2 { color: #3b6196; }

.positive-quirk-dd2 { color: #b0935e; }

.negative-quirk-dd2 { color: #3b6196; }

.negative-quirk-dark-dd2 { color: #0e1e37; }

.disease-quirk-dd2 { color: #707823; }

.trinket-common-dd2 { color: #54595C; }

.trinket-rare-dd2 { color: #3B6062; }

.trinket-epic-dd2 { color: #b0935e; }

.trinket-cultist-dd2 { color: #677E9D; }

.ignited-dd2 { color: #D52300; }

.strangle-dd2 { color: #DAFFAF; }

.mastery-dd2 { color: #379596; }

.path-verbose-dd2 { color: #677E9D; }

.combo-token-dd2 { color: #55B5A2; }

.wanderer-path-dd2 { color: #444f61; }

.reserve-path-dd2 { color: #444f61; }

.class-path-dd2 { color: #A08556; }

.master-path-dd2 { color: #215855; }

/* DD2 Skills */ .dd2-rank-self { font-variant: small-caps; }

/* There is currently a nasty bug in Fandom's mobile image renderer that inserts extra spaces around images. Something that gets rendered as   or in Desktop gets rendered instead as  . The extra spaces mess up the dot layout. The way to fix this right now is to set "font-size: 0" to effectively make the spaces invisible. However this also has some other unintended consequences, like messing up the vertical alignment. Hence the last two lines of the dd2-rank specification are here as a kludge to fix Fandom's bugs; hopefully they can be removed at some point in the future. .dd2-rank { display: inline-block; min-width: 53px; font-size: 0; vertical-align: middle; }

.dd2-skill-box { width: fit-content; --theme-border-color: transparent; --theme-page-background-color--secondary: #171010; }

.dd2-skill-name { text-align: center; font-weight: bold; }

.dd2-skill-basic-info { text-align: center; margin: auto; --theme-page-background-color--secondary: transparent; }

.dd2-skill-basic-info tr:last-child { vertical-align: top; }

.dd2-skill-data { text-align: center; width: 100%; }

.dd2-skill-effect { display: inline-block; width: fit-content; text-align: left }

.dd2-skill-notes { display: flex; }

.dd2-skill-notes div { flex-grow: 1; width: 0; }