MediaWiki:Common.css

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

/* Additional fonts */ @font-face { font-family: 'Ubuntu-M'; src: local('Ubuntu-M'), local('Ubuntu-M'), url('/media/hydra/fonts/Ubuntu-M.ttf') format('truetype'); }

/* This governs the sections on the Community portal */ .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; }

/* Front page structure */ .fpmain { width: 100%; overflow: hidden; }

.fpbox { margin: 5px; padding: 5px; overflow: auto; }

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

/* CARD TEMPLATE LINKS */ span.cardlink-main { display: inline-block; position: relative; height: 20px; border: 1px solid #cac9c9; font-weight: bold; font-size: 0.9em; padding-right: 10px; } span.cardlink-main > span:nth-of-type(1), span.cardlink-main > span:nth-of-type(2) { display: inline-block; position: absolute; top: 0; left: 0; height: inherit; clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%); width: 35px; } span.cardlink-main > span:nth-of-type(2) { background: white; width: 30px; text-align: center; line-height: 130%; font-size: 1.2em; color: #595555; } span.cardlink-main > span:nth-of-type(3) { display: inline-block; padding-left: 3px; margin-left: 40px; height: inherit; color: white; text-shadow: -1px -1px 0 #484848, 1px -1px 0 #484848, -1px 1px 0 #484848, 1px 1px 0 #484848; white-space: nowrap; } /* END CARD TEMPLATE LINKS */

/* HOMEPAGE */ max-width: 1000px; margin: 0px auto; } /* END HOMEPAGE */
 * 1) mainpage-categories {

/* LIMIT TOC LEVELS */ .toclimit-2 .toclevel-1 ul,.toclimit-3 .toclevel-2 ul,.toclimit-4 .toclevel-3 ul,.toclimit-5 .toclevel-4 ul,.toclimit-6 .toclevel-5 ul,.toclimit-7 .toclevel-6 ul{ display:none } /* END LIMIT TOC LEVELS */

/* HOMEPAGE TILES */ .home-tile { display: inline-flex; position: relative; margin: 0.5em; border: none; font-weight: bold; font-size: 1.2em; height: 100px; width: 150px; transition: 0.3s; } .home-tile:hover { box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4); } .home-tile-image, .home-tile-inner { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .home-tile-image { object-fit: cover; } .home-tile-inner { display: inline-flex; align-items: center; justify-content: space-around; background-color: rgba(0, 0, 0, 0.4); transition: 0.3s; } .home-tile-inner:hover { background-color: rgba(0, 0, 0, 0.0); } .tile-link { color: white; font-size: larger; text-shadow: 2px 2px 4px #000, 0px 0px 2px #000; } /* END HOMEPAGE TILES */

/* COLLAPSIBLE LISTS FOR WALK-THROUGHS */ dt.collapsible-wt { position: relative; display: table; /* limits width to content without going inline */ } dt.collapsible-wt:after { content: "▼"; color: black; position: absolute; top: 0; right: -20px; } /* END COLLAPSIBLE LISTS FOR WALK-THROUGHS */

/* SHOWCARD */ .showcard-wrapper { position: relative; display: inline-flex; width: calc(var(--card-width) + 25px); margin: 0 1.5em 1.5em 0; text-align: center; font-family: Ubuntu-M, sans-serif; --card-width: 200px; filter: drop-shadow(0 0 5px rgba(0,0,0,0.6)); } /* rarity */ .showcard-wrapper::after { content: ''; position: absolute; width: 12px; height: 35px; top: 58px; left: 13px; clip-path: polygon(0 0,100% 25%,100% 100%,0% 75%); } .showcard-Common::after { display: none; } .showcard-Rare::after { background: #65a4df; } .showcard-Legendary::after { background: #ce61be; } .showcard-Mythic::after { background: #f9d135; } /* cost */ .showcard-cost { position: absolute; top: 10px; left: 0px; z-index: 2; width: 50px; height: 28.87px; background-color: #00c6ff; margin: 14.43px 0; color: white; font-size: xx-large; font-weight: bold; line-height: 90%; text-shadow: -1px -1px 2px #484848,1px 1px 2px #484848,-1px 1px 2px #484848,1px 1px 2px #484848; } .showcard-cost:before, .showcard-cost:after { content: ""; position: absolute; z-index: 1; width: 35.36px; height: 35.36px; -webkit-transform: scaleY(0.5774) rotate(-45deg); -ms-transform: scaleY(0.5774) rotate(-45deg); transform: scaleY(0.5774) rotate(-45deg); background-color: inherit; left: 7.3223px; } .showcard-cost:before { top: -17.6777px; } .showcard-cost:after { bottom: -17.6777px; } /*cover up extra shadows*/ .showcard-cost span { display: block; position: absolute; top:0px; left: 0; width:50px; height:28.8675px; z-index: 2; background: inherit; color: white; } /* main */ .showcard { clip-path: polygon(0 0, 88% 0, 100% 10%, 100% 90%, 88% 100%, 0 100%); width: var(--card-width); height: calc(var(--card-width) * (512/356)); position: relative; margin: 25px 0 0 25px; font-size: medium; } .showcard-Leader { background: #42324d; } .showcard-Convoy { background: #0c3742; } /* image */ .showcard-img-box { height: 50%; background: #637579; position: relative; } .showcard-img { width: 100%; height: 100%; } .showcard-statbg { width: 100%; height: 100%; position: absolute; left: 0; } /* name and stats */ .showcard-name { position: relative; height: 25px; line-height: 1.4; } .showcard-name a { font-size: large; color: #fdfdfd; font-weight: normal; } .showcard-Leader .showcard-name { background: #844f8c; } .showcard-Convoy .showcard-name { background: #2b95ab; } .showcard-stat { position: absolute; top: -1.8em; right: 1em; width: 35%; font-weight: bold; font-size: 1.2em; color: #fdfdfd; text-shadow: -1px -1px 2px #484848, 1px 1px 2px #484848, -1px 1px 2px #484848, 1px 1px 2px #484848; } .showcard-Leader .showcard-stat { display: none; } .showcard-construct .showcard-stat { /* Constructs need stats */ display: unset; } .showcard-attack { padding-left: 0.4em; left: 0.5em; } .showcard-health { padding-right: 0.4em; right: 0.5em; } /* description and tag */ .showcard-desc-bg { height: 40%; background-size: 40%; background-repeat: no-repeat; background-position: 50% 30%; opacity: 0.25; } .showcard-desc-bg.showcard-Bandit {background-image: url(https://gamepedia.cursecdn.com/nowhereprophet_gamepedia_en/8/8e/Faction_bandits.png);} .showcard-desc-bg.showcard-Beast {background-image: url(https://gamepedia.cursecdn.com/nowhereprophet_gamepedia_en/3/37/Faction_beasts.png);} .showcard-desc-bg.showcard-Crusader {background-image: url(https://gamepedia.cursecdn.com/nowhereprophet_gamepedia_en/c/c4/Faction_crusaders.png);} .showcard-desc-bg.showcard-Cultist {background-image: url(https://gamepedia.cursecdn.com/nowhereprophet_gamepedia_en/0/0f/Faction_cultists.png);} .showcard-desc-bg.showcard-Drone {background-image: url(https://gamepedia.cursecdn.com/nowhereprophet_gamepedia_en/5/52/Faction_drones.png);} .showcard-desc-bg.showcard-Hilltribe {background-image: url(https://gamepedia.cursecdn.com/nowhereprophet_gamepedia_en/7/71/Faction_hilltribes.png);} .showcard-desc-bg.showcard-Leper {background-image: url(https://gamepedia.cursecdn.com/nowhereprophet_gamepedia_en/b/b3/Faction_lepers.png);} .showcard-desc-bg.showcard-Machinist {background-image: url(https://gamepedia.cursecdn.com/nowhereprophet_gamepedia_en/2/24/Faction_machinists.png);} .showcard-desc-bg.showcard-RoyalGuard {background-image: url(https://gamepedia.cursecdn.com/nowhereprophet_gamepedia_en/8/8f/Faction_royalguard.png);} .showcard-desc-bg.showcard-Workers {background-image: url(https://gamepedia.cursecdn.com/nowhereprophet_gamepedia_en/c/cd/Faction_workers.png);}

.showcard-desc { position: absolute; top: 170px; width: 182px; padding: 0.3em 0.6em; color: #cecbcb; } .showcard-desc-m { font-size: 0.9em; line-height: 130%; } .showcard-desc-l { font-size: 0.8em; line-height: 130%; } .showcard-desc-xl { font-size: 0.75em; line-height: 130%; } .showcard-desc-xxl { font-size: 0.75em; line-height: 120%; } .showcard-tag { position: absolute; bottom: 0; padding-bottom: 0.1em; width: 100%; color: #cecbcb; font-size: 0.8em; } .showcard-desc a, .showcard-tag a { text-decoration: underline dotted; color: inherit; } /* END SHOWCARD */

/* ABILITY-BOX */ div.ability-box, div.ability-blurb { display: inline-flex; flex-wrap: wrap; align-items: center; line-height: 1.4; padding: 0.7em; margin: 0.1em; } div.ability-box { background-color: black; border: 1px solid grey; } div.ability-blurb { border: 1px solid RGB(225, 221, 217); background-color: RGB(249, 248, 247); } img.ability-box-icon, img.ability-blurb-icon { width: 45px; height: 45px; margin-right: 1em; box-sizing: border-box; } img.ability-box-icon.active-ability, img.ability-blurb-icon.active-ability { border: 4px solid #00c6ff; border-radius: 50%; } .ability-box-title { font-weight: bold; color: #f9f5f5; } .ability-blurb-title { font-weight: bold; } .ability-box-note { color: #aaa6a6; } .ability-blurb-note { color: #6f6f6f; } .ability-box-desc { color: #e3e0e0; } .ability-blurb-desc { color: inherit; } span.ability-box a, span.ability-blurb a { color: inherit; font-style: italic; font-weight: bold; text-decoration: underline dotted; } /* Color filters for icons */ .fuschia-filter { filter: brightness(50%) sepia(100%) saturate(200%) hue-rotate(279deg) brightness(90%) saturate(190%); } .yellow-filter { filter: brightness(50%) sepia(100%) saturate(1000%) hue-rotate(20deg) brightness(130%); } .blue-filter { filter: brightness(50%) sepia(100%) saturate(1000%) hue-rotate(190deg) brightness(120%); } /* END ABILITY-BOX */

/* USESPERLEVEL */ table.usesperlevel { border-collapse: collapse; margin: 0.5em 0.1em; border-radius: 2px; overflow: hidden; border: 1px solid #e1e1e1; } table.usesperlevel th { background-color: #d6ddec; padding: 0.1em 0.55em; } table.usesperlevel td { background-color: #f8f9fa; } /* END USESPERLEVEL */

/* ALL CARDS TABLE */ table.all-cards { border-collapse: collapse; } table.all-cards tbody tr:nth-child(even) { background-color: #ffffff; } table.all-cards tbody tr:nth-child(odd) { background-color: #f9f9f9; } table.all-cards tbody tr:hover { background-color: whitesmoke; } table.all-cards th { padding: 1em; border-bottom: 1px solid #111; } table.all-cards th, table.all-cards td { padding: 1em; } table.all-cards td { border-top: 1px solid #ddd; } table.all-cards tbody tr:first-child td { border-top: none; } table.all-cards .Rare { color: #0071db; } table.all-cards .Legendary { color: #bf12a6; } table.all-cards .Mythic { color: #d2aa0a; } /* END ALL CARDS TABLE */

/* SORTABLE DECK LIST */ table.sortabledeck tr { display: block; } table.sortabledeck td:not(:first-child) { display: none; } table.sortabledeck .cardlink-main { width: 220px; } /* END SORTABLE DECK LIST */