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-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); }

.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(247, 236, 215, 1); color: #ffffff; } .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; }