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)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* ================================================= */
/* = Eternal Card Game Wiki CSS = */
/* = ---------------------------------- = */
/* = = */
/* = Custom CSS for: = */
/* = Style Customization = */
/* = Portable Infoboxes = */
/* = Card Hover Popups = */
/* = Tooltip Hover Popups = */
/* = Sprite Icons & Animations = */
/* = Spoiler Galleries = */
/* ================================================= */
/* == Imported CSS == */
/* !! Be sure this section is placed above all other CSS sections !! */
/***********************************************************************/
/* Customize 'Wiki Activity' page styling (from the Dev Wiki)
Further customized in a later section */
@import "/load.php?mode=articles&articles=u:dev:MediaWiki:ModernWikiActivity.css&only=styles";
/* == General Style Customization == */
/***********************************************************************/
/* Variables for setting reusable settings */
:root {
--wiki-bg-color: #474646;
--wiki-text-color: #d5d4d4;
}
/* Standard Wiki Accent Color
Initially background color was: #303536;*/
.eWikiColor {
background-color: #3a3941;
border: thin solid #737383;
}
/* Add text-width bottom border to h3 headers */
h3 .mw-headline {
border-bottom: solid 1px #6c6b6b;
}
/* Style for quote-style text blocks and top hats notices (for use with eWikiColor) */
.topHat {
padding:6px 12px;
/* center on page */
margin:12px auto;
/* fit width to content (fallback to 80%) */
width:80%;
width:-webkit-fill-available;
width:-webkit-fit-content;
width:-moz-fit-content;
width: fit-content;
min-width:60%;
}
.WikiaArticle blockquote.topHat { /* fix for Wikia blockquote margin setting */
margin:12px auto;
}
/* Color wds-style buttons
Manually set to match wiki's theme */
.wds-button.wds-is-secondary.button-is-themed {
border-color: #D5D4D4;
color: #D5D4D4;
}
/* Set mainpage twitter feed to match wiki text colors */
.timeline-Header-title,
.timeline-Widget {
color: #d5d4d4;
}
.timeline-Header-byline a {
color: #70b8ff;
}
.customisable-highlight:hover {
color: #70b8ff;
text-decoration: underline;
}
/* Table of Contents limiter (from www.mediawiki.org/wiki/Manual:Table_of_contents#Depth) */
/*
* Allow limiting of which header levels are shown in a TOC;
* <div class="toclimit-3">, for instance, will limit to
* showing ==headings== and ===headings=== but no further.
* Used in [[Template:TOC]]
*/
.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;
}
.toclimit-2 .toclevel-1 ol,
.toclimit-3 .toclevel-2 ol,
.toclimit-4 .toclevel-3 ol,
.toclimit-5 .toclevel-4 ol,
.toclimit-6 .toclevel-5 ol,
.toclimit-7 .toclevel-6 ol {
display: none;
}
/* == Mainpage Styles == */
/***********************************************************************/
/* Sidebar */
.mainpage-side {
border: 1px #6c6b6b solid;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
width: 275px
background-color:inherit;
margin: 12px auto;
}
.mainpage-side p {
padding: 0 10px;
}
.mainpage-side h1 {
background-color: #3a3941;
border: 1px #6c6b6b solid;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
padding: 4px 11px 8px;
margin: 0 0 -5px;
display: inline-block;
position: relative;
left: -10px;
top: -5px;
font-size: 24px;
}
.mainpage-side h2 {
background-color:#3a3941;
border-top: 1px #6c6b6b solid;
border-bottom: 1px #6c6b6b solid;
padding: 4px;
margin: 7px 0 4px;
text-align: center;
font-size: 18px;
line-height: 28px;
}
.mainpage-side-container {
background-color: #3a3941;
border: 1px solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 5px 10px;
}
.article-start .widget-twitter {/* using testing class ".article-start" wrapper for now */
margin: 0 15px 0 20px;
display: inline-block;
}
/* Lists */
.mainpage-side ul {
display: table;
margin: 0 20px 5px;
}
.mainpage-side li {
display: table-row;
}
li .social a {
display: table-cell;
vertical-align: middle;
padding: 0px 10px 0px 0px !important;
}
/* Icons */
.social img {
margin: 5px;
opacity: .5;
/* -webkit-filter: grayscale(100%);*/
/* filter: grayscale(100%);*/
transition: opacity .25s ease/*, greyscale .25s ease;*/
width: 16px;
height: auto;
}
.social:hover img {
opacity: .9;
/* -webkit-filter: grayscale(0%);*/
/* filter: grayscale(0%);*/
transition: opacity .25s ease/*, greyscale .25s ease;*/
}
.social-container {
margin-top: 12px;
display: flex;
align-items: center;
justify-content: center;
}
.social-container .social {
width: 35px;
margin: 0px 5px;
}
.social-container .social img {
display: block;
width: 24px;
margin: auto;
}
/* == Mainpage Section ("Card Effect" sections) - Test 1 == */
/***********************************************************************/
.mainpage-section { /* Consider removing this later, and using the 'lobotobized owl' selector instead */
margin: 30px 0 0 0;
}
.mainpage-header h2 {
display: inline-block;
position: relative; left: -10px; top: -5px;
padding: 4px 11px 8px; margin: 0 0 -5px;
border: 1px #6c6b6b solid; box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
font-size: 24px;
background-color: #3a3941;
}
.mainpage-card-grid.test-1 {
display: -webkit-box; display: -ms-flexbox;
display: flex;
overflow-x: hidden;
}
.test-1 .mainpage-card {
position: relative; z-index: 0;
-webkit-flex: 1; -ms-flex: 1; /* Safari 6.1+ & IE 10 */
flex: 1;
min-height: 200px; max-width: 250px;
padding: 0; margin: 0;
border: 1px #6c6b6b solid; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
color:white;
background: black;
-webkit-transition: .2s;
transition: .2s;
display: -webkit-box; display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column;
flex-direction: column;
}
/*.test-1 .mainpage-card-title {
margin-bottom: auto;
}*/
.test-1 .mainpage-card-title h2 {
background-color: rgba(0, 0, 0, 0.8);
padding: 1rem 1.5rem; margin: 0;
}
.test-1 .mainpage-card:hover .mainpage-card-title h2 {
background-color: transparent;
}
.test-1 .mainpage-card-content {
padding: 1rem 1.5rem; margin: 0;
}
/* Card Image Placeholder */
/*.test-1 .mainpage-card::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
margin: 0;
width: 100%;
height: 100%;
opacity: 1;
}*/
/* Stack Effects */
/* Move up & darken background on hover */
/* .test-1 .mainpage-card:focus-within, .test-1 .mainpage-card:hover {
-webkit-transform: translate(0,-1rem);
transform: translate(0,-1rem);
} */
/*.test-1 .mainpage-card:hover::before {
opacity: .2;
}*/
/* Hide card content while not hovered */
.test-1 .mainpage-card:not(:hover) .mainpage-card-content {
visibility: hidden;
}
/* Stack cards after the 1st */
.test-1 .mainpage-card:not(:first-child) {
margin-left: -90px;
}
/* Expose hovered card by moving following cards */
.test-1 .mainpage-card:focus-within ~ .mainpage-card, .test-1 .mainpage-card:hover ~ .mainpage-card {
-webkit-transform: translateX(90px);
transform: translateX(90px);
}
/* Card Images - Examples */
/*.test-1 .mainpage-card:nth-child(3n-2)::before {
background: url(https://vignette.wikia.nocookie.net/eternalcardgame/images/b/b0/Art_-_Honored_Skyguard.jpg/revision/latest?cb=20180615184252) no-repeat top left;
}
.test-1 .mainpage-card:nth-child(3n-1)::before {
background: url(https://vignette.wikia.nocookie.net/eternalcardgame/images/4/41/Full_Art_-_Alpine_Tracker.png/revision/latest?cb=20170511190124) no-repeat top left;
}
.test-1 .mainpage-card:nth-child(3n)::before {
background: url(https://vignette.wikia.nocookie.net/eternalcardgame/images/7/78/Full_Art_-_Maul.png/revision/latest?cb=20190106210350) no-repeat top left;
}*/
/* == Mainpage Section (grid) - Test 2 == */
/***********************************************************************/
.mainpage-card-grid.test-2 {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-gap: 2em;
}
.test-2 .mainpage-card {
background: black;
border: 1px #6c6b6b solid;
height: 100px;
}
/* == Experimental Text Blockqotes == */
/***********************************************************************/
/* This will likely need to be cleaned up/merged with the other quote CSS */
/* Used with {{Quote/sandbox}} */
blockquote.quoteblock {
margin: 1.5em 40px 1.5em 10px;
padding-left: 40px;
border-left: lightgrey 2px solid;
}
.quoteblock .quote.italic {
font-style: italic;
}
.quoteblock .quotations {
position: relative;
}
.quoteblock .quotations::before {
position: absolute;
left: -.6em;
top: -.4em;
content: open-quote;
font-size: 3em;
font-weight: bold;
}
/* Right-quotation mark has issues with floated neighbors */
/*.quoteblock .quotations:after {*/
/* position: absolute;*/
/* right: 0px;*/
/* content: close-quote;*/
/* font-size: 3em;*/
/* font-weight:bold; */
/*}*/
.quoteblock .quote-footer {
margin-top: .5em;
text-align: right;
font-size: .9em;
}
.quoteblock .quote-footer::before {
font-size: .9em;
content: '\2014\00A0';
}
/* == Image Blockquotes (for the {{ImageQuote}} template)== */
/***********************************************************************/
/* Layers a blockquote text over an image. A semi-transparent black backround keeps the white text legible over the image. An optional 'frosted' background effect may be added (see its section below).
The amount of text is constrained by the image area, too much will be cut off at the top. If this happens, use less text, a larger image size, or different image.
Using the template parameter 'type=banner', image height may be limited to between 200-250px. This adjusts automatically according to pre-defined @media breakpoints. */
/* Defaults for image blockquote and some children. 'float' and 'height' may be added and 'width' overwritten manually by template parameters. */
.imageQuote {
position:relative;
font-size: 16px;
font-family: 'Times New Roman', serif;
overflow: hidden;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
max-width: -webkit-fit-content;
max-width: -moz-fit-content;
max-width: fit-content;
margin: 0 auto 1em auto;
/* CSS variable to be used by child elements to adjust the visible portion of the image(s) vertically. Defaults to 0px (no changes) but may be overwritten with a template parameter. */
--adjustY: 0px;
/* Transform used to make sure the 'frosted' background image aligns with the main image. This results from a hacky quirk that lets a grandchild element with 'position:fixed;' fix to this element rather than the root page. Backup compatibility styles included. */
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.imageQuote img {
max-width: 100%;
height: auto;
margin-top: var(--adjustY); /* Adjust position along y-axis */
}
/* The quote textbox should fit the image width, align along the image's bottom, and automatically adjust upward to fit the quote text content. */
.imageQuote .quoteblock {
display: block;
position: absolute;
bottom: 0;
margin: 0;
width: 100%;
text-align: center;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.8);
overflow: hidden;
clip: rect(0,1000vw,1000vw,0); /* depricated, but fallback where clip-path is unsupported */
clip-path: inset(0 -10px);
}
/* 'Fade to black' background effect */
.imageQuote .quoteContent::before {
content: "";
position: absolute;
z-index: -1;
bottom: -20px;
left: 0;
right: 0;
margin: 0;
width: 100%;
height: 80%;
max-height: 80px;
background: rgb(0,0,0);
-webkit-filter: blur(20px);
filter: blur(20px);
}
/* Quote text positioning */
.imageQuote .quoteContent {
z-index: 3;
position: relative;
padding: 10px 80px;
}
.imageQuote .cite {
display: block;
margin-top: 5px;
text-align: right;
font-size: .9em;
}
/* Add quotation marks around quote text & dash preceding citation */
.imageQuote .quote:before {
position: absolute;
left: 40px;
content: open-quote;
font-size: 2.5em;
font-weight:bold;
}
.imageQuote .quote:after {
position: absolute;
right: 40px;
content: close-quote;
font-size: 2.5em;
font-weight:bold;
}
.imageQuote .cite:before {
content: '\2014\00A0';
font-size: .9em;
}
/* Max-height for banner-style image quotes. Height is variable, depending on standard wikia breakpoints */
@media only screen and (min-width: 1024px) and (max-width: 1083px) {
.imageQuote.iqBanner {max-height: 200px;}
}
@media only screen and (min-width: 1084px) and (max-width: 1596px), (max-width: 1023px) {
.imageQuote.iqBanner {max-height: 210px;}
}
@media only screen and (min-width: 1596px) {
.imageQuote.iqBanner {max-height: 250px;}
}
/* 'Frosted' background effect. Must be manually set on an individual basis.
Wiki users may specify the target id (set with the 'cssID' template parameter), but the styling must be added here (by an admin) for it to work. For testing purposes, users may add the style to their personal css page (User:<<username>>/common.css) before contacting an admin for addition to the site-wide wiki css.
Use the direct url (rather than the image file name) of the image used by the template. */
/* Custom images */
#example.quoteblock::before {
background-image: url(https://vignette.wikia.nocookie.net/eternalcardgame/images/1/1f/Mainpage_Gallery_-_Set_4_Spoiler.jpg/revision/latest?cb=20180517173440);
}
#deadreckoning.quoteblock::before {
background-image: url(https://vignette.wikia.nocookie.net/eternalcardgame/images/6/6e/Banner_-_Icaria%2C_Valkyrie_Captain.jpg/revision/latest?cb=20180708030031);
}
#thefallofargenport.quoteblock::before {
background-image: url(https://vignette.wikia.nocookie.net/eternalcardgame/images/8/8c/Banner_-_Sack_the_City.png/revision/latest?cb=20180724025503);
}
#intoshadow.quoteblock::before {
background-image: url(https://vignette.wikia.nocookie.net/eternalcardgame/images/1/1e/Banner_-_Vara%2C_Vengeance-Seeker.png/revision/latest?cb=20181012164948);
}
/* Effect styling */
.imageQuote .quoteblock::before {
content: "";
position: fixed; /* Fixed to grandparent because of Tranforms */
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-size: 100% auto;
background-repeat: no-repeat;
-webkit-filter: blur(10px) brightness(50%);
filter: blur(10px) brightness(50%);
/* Aligned by default to the top edge, may adjust position along y-axis */
background-position: 100% calc(0px + var(--adjustY));
}
/* == Misc == */
/***********************************************************************/
/* Fluid Images */
/* Sets image width to up to 100% of the available space. Wikitext images ([[File:Image.png|parameter|paramter]]) cannot be given a custom CSS class so this work around points to img tags inside another container.
!!Use sparingly!! This must skip Wikia's image optimization, which resizes images before loading them. Use only in situations where the image size should be variable and span the article's width, such as banner images. */
.fluidImg img {
max-width: 100%;
height: auto;
}
/* Drop shadow effect for image gallery thumbnails and slider galleries*/
.wikia-gallery .thumb,
.wikiaPhotoGallery-slider-body {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* == Portable Infobox Customization == */
/***********************************************************************/
/* ==== General Styling ==== */
/* PI Background & Border */
.portable-infobox {
border: 1px #6c6b6b solid;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
width: 250px;
}
.portable-infobox .pi-border-color {
border-color: #6c6b6b;
}
.portable-infobox.pi-background {
background-color:#474646;
}
/* Title Customization */
.portable-infobox .pi-title {
background-color:#3a3941;
border-top: 1px #6c6b6b solid;
border-bottom: 1px #6c6b6b solid;
padding: 4px;
margin: 7px 0 4px;
text-align: center;
}
/* To get Hover Tooltips to work with infoboxes: */
.portable-infobox .pi-data,
.portable-infobox .pi-item h3 {
overflow: visible;
}
.portable-infobox .pi-secondary-background {
background-color:transparent;
}
.portable-infobox {
position: relative;
display: inline-block;
}
/* Hide 'Art' header on desktop
(header added when alt-art card images are used) */
.pi-panel .pi-header[data-item-name="image-header"] {
display: none;
}
/* Header tags
Don't format 'group-label'-tagged headers */
.portable-infobox .pi-header:not([data-item-name="faux-data-label"]) {
background-color:#3a3941;
border-bottom: 1px #6c6b6b solid;
padding: 4px;
text-align: center;
}
/* <Group> faux-label tag styled <headers>
should match regular <data> label tag styles */
/* Override smart-group styles to mimic default <data> flexbox */
.pi-group[data-item-name="faux-data-tag"] {
display: flex;
padding: 5px 10px;
}
.portable-infobox .pi-header[data-item-name="faux-data-label"] {
flex-basis: 65px;
padding: 0;
}
.pi-group[data-item-name="faux-data-tag"] .pi-smart-group,
.pi-group[data-item-name="faux-data-tag"] .pi-group {
-ms-flex-preferred-size: 180px;
-webkit-flex-basis: 180px;
-moz-flex-basis: 180px;
flex-basis: 180px;
padding-left: 10px;
text-align: left;
}
.pi-group[data-item-name="faux-data-tag"] .pi-smart-group-body {
display: flex;
}
.pi-group[data-item-name="faux-data-tag"] .pi-smart-data-value {
padding: 0;
float: left;
width: auto !important;
}
.pi-group[data-item-name="faux-data-tag"] .pi-smart-data-value:first-child {
padding-right: 10px;
}
.pi-group[data-item-name="faux-data-tag"] .pi-smart-data-value:not(:first-child) {
border: none;
}
.pi-group[data-item-name="formats"] .pi-data {
padding-left: 0;
}
.pi-group[data-item-name="formats"] .pi-data:first-child {
padding-top: 0;
}
.pi-group[data-item-name="formats"] .pi-data:last-child {
padding-bottom: 0;
}
/* Hide sub-headers on costs (power/influence) & stats (str/hp/db) on desktop */
.pi-group[data-item-name="faux-data-tag"] .pi-smart-group-head {
display: none;
}
/* ==== SetInfobox 'setbox' Theme ==== */
/* Label Column set minimum, allow larger
.pi-theme-setbox .pi-data-label {
width: 90px;
flex-basis: auto;
} -- not working like I thought, leaving as default for now */
/* Image Size */
.pi-theme-setbox .pi-image-thumbnail {
max-width: 250px; /* Fit to infobox size */
height: auto;
border-bottom: 1px #6c6b6b solid;
}
/* Stylize Lists */
.portable-infobox.pi-theme-cardbox .pi-data-value ul {
list-style-type: disc;
}
/* ==== CardInfobox 'cardbox' Theme ==== */
/* Label Column Size */
.pi-theme-cardbox .pi-data-label {
flex-basis: 65px;
}
/* Image Size & Background */
.pi-theme-cardbox .pi-image-thumbnail {
max-width: 180px; /* Image width used with original infoboxes */
height: auto;
}
.pi-theme-cardbox .pi-image-collection-tab-content {
background-color: inherit;
}
/* Image Gallery Tabs*/
.pi-theme-cardbox .pi-image-collection-tabs li {
border: 1px #6c6b6b solid;
margin: 0;
}
.pi-theme-cardbox .pi-image-collection-tabs li.current {
background: #3a3941;
}
.pi-theme-cardbox .pi-image-collection-tabs li:not(.current) {
transition: background-color .3s;
}
.pi-theme-cardbox .pi-image-collection-tabs li:hover:not(.current) {
background-color: #565454;
}
/* Image Caption/Flavor Text Customization
Use of the 'flavor' parameter is preferred, but the 'imagecaption' parameter
is also available. They should appear nearly identicle visually - the difference
being that 'flavor' uses a modified header tag, to be able to preserve text
formatting like line breaks.
*marked for deletion after testing infobox update
.pi-theme-cardbox .pi-caption {
background-color: #3a3941;
border: 1px solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 5px 10px;
}*/
/* Note that this flavor text area customization requires its infobox <data> tag have a 'name=flavor' attribute */
.pi-theme-cardbox .pi-item[data-item-name=flavor] {
background-color: #3a3941;
border: 1px solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 5px 10px;
width: auto;
/* copied from defauolt .pi-caption text formatting */
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
color: #a3a3a3;
font-size: 12px;
font-style: italic;
text-align: left;
word-wrap: break-word;
}
/* Keep Hover Tooltips working inside flavor boxes: */
.portable-infobox.pi-theme-cardbox .pi-item[data-item-name=flavor] {
overflow:visible;
}
/* Customize external database links into 'buttons' */
.portable-infobox.pi-theme-cardbox .pi-data[data-source="databaseURL"] ul {
list-style-type: none;
height: 100%;
display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 1em;
align-items: center;
}
.portable-infobox.pi-theme-cardbox .pi-data[data-source="databaseURL"] li {
height: 2rem;
background-color: #3a3941;
border: 1px solid grey;
}
.portable-infobox.pi-theme-cardbox .pi-data[data-source="databaseURL"] li a {
width: 100%; height: 100%;
display: flex;
justify-content: center; align-items: center;
}
.portable-infobox.pi-theme-cardbox .pi-data[data-source="databaseURL"] li:hover {
background-color: #565454;
border-color: #8f8f8f;
}
.portable-infobox.pi-theme-cardbox .pi-data[data-source="databaseURL"] li a::before {
content: "";
background: no-repeat top left;
background-size: 1.5em;
width: 1.5em; height: 1.5em;
display: inline-block;
margin: 0 5px -.5em 0;
opacity: 0.8;
}
.portable-infobox.pi-theme-cardbox .pi-data[data-source="databaseURL"] li a[href*="cards"]::before {
background-image: url(https://vignette.wikia.nocookie.net/eternalcardgame/images/8/85/Icon_-_Cards.svg/revision/latest?cb=20190202195518);
}
.portable-infobox.pi-theme-cardbox .pi-data[data-source="databaseURL"] li a[href*="deck"]::before {
background-image: url(https://vignette.wikia.nocookie.net/eternalcardgame/images/0/0e/Icon_-_Deck.svg/revision/latest?cb=20190217040840);
}
.portable-infobox.pi-theme-cardbox .pi-data[data-source="databaseURL"] .hoverLink img {
opacity: .8;
margin-top: -.3em;
}
.portable-infobox.pi-theme-cardbox .pi-data[data-source="databaseURL"] .hoverLink .tooltipText {
font-size: 14px;
font-weight: normal;
}
/* 'plainlinks' fix to remove external link icon */
.portable-infobox.pi-theme-cardbox .pi-data[data-source="databaseURL"] li a::after {
display: none;
}
/* == Hover Popups - General == */
/***********************************************************************/
/* The class to modify Wikia articles in Eternal Wiki. */
/* Lets images etc. overflow over the edge of an article.
Needed in order to have hoverCard pop-ups visible. */
.WikiaArticle {
overflow: visible;
}
/* == Hover Popups - Cards == */
/***********************************************************************/
/* This is a container for the desired link (or a piece of text).
Basically it just sets the position for the hover picture that will be
added. Works best with span or other inline element. */
.hoverLink {
position: relative;
display: inline-block;
}
/* This part is for the hidden image (works with text too).
This is where you can finetune the position and appearance of the pop-up
image with "top:50%", "left: 100%", "background: black" etc. properties.*/
.hoverLink .hoverCard {
visibility: hidden;
/* Opacity and transition are a little fading gimmick for appearing hoverCard*/
opacity: 0;
transition: opacity 0.35s;
/* Position the pop-up */
position: absolute;
z-index: 1;
top: -295px;
left: -10px;
/* margin-top: -23em; */ /* Old positioning */
/* margin-left: 8em; */ /* Old positioning */
}
/* Alternate hover position, meant for few times the hover image would appear at
the top of the page. */
.hoverLink .hoverCard.hc-top {
top: 25px;
left: -10px;
}
/* Makes the pop-up visible when hovering */
.hoverLink:hover .hoverCard {
visibility: visible;
opacity: 1;
position: absolute;
}
/* = Hover Popups - Tooltips = */
/***********************************************************************/
/* Note: Re-uses existing .hoverLink Tooltip container from Card Hover CSS */
/* Credit: Modified from http://sacredseasons2.wikia.com/wiki/MediaWiki:Wikia.css */
/* Container for the hidden tooltip. Meant for text or token images. */
.hoverLink .hoverTooltip,
.pi-theme-cardbox .infoboxTooltip {
/* Make sure these styles are cleared.
Will be overwritten later for text sections with .tooltopText */
border: none; !important;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
box-shadow: none;
background-color: inherit;
box-sizing: none;
padding: 0;
/* Commenting these out for now, back_drop-filter has been temporarily banned.
due to a recent Safari/iOS bug.
Remove the underscore (_) when reinstating the effect.
-webkit-back_drop-filter: blur(5px);
back_drop-filter: blur(5px);
*/
/* Fading gimmick */
opacity: 0;
transition: opacity 0.35s;
/* Position the tooltip */
visibility: hidden;
position: absolute;
z-index: 99;
}
/* Position tooltip */
.pi-theme-cardbox .infoboxTooltip {
right: 100%;
}
/* Style tooltip text box */
.hoverLink .tooltipText,
.pi-theme-cardbox .infoboxTooltipText {
border: thin solid #737383; !important;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
background-color: #3a3941;
width: 250px;
box-sizing: border-box;
padding: 5px 10px;
/* Tooltip text: Re-size to page default
(otherwise tooltip text in infoboxes is too small)
!!May need to revisit - tooltip text seems slightly larger than page text*/
font-size: initial;
}
/* Force tooltips inside divs to display correctly */
.hoverLink .tooltipText div,
.pi-theme-cardbox .infoboxTooltipText div{
display: inline block;
}
/* Show the tooltip text when you mouse over the tooltip container */
.hoverLink:hover .hoverTooltip,
.pi-theme-cardbox:hover .infoboxTooltip {
visibility: visible;
opacity: 1;
}
/* = Hover Popups - Cards & Tooltips Indicator Icon = */
/***********************************************************************/
/* Using sprites from wikia (such as the (i) that appears when
hovering over thumbnail images) as indicators for hover-able links */
.hoverLink.kwHover::after {
content:'';
display: inline-block;
width: 1em;
height: 1em;
background: url(https://vignette.wikia.nocookie.net/eternalcardgame/images/f/f3/Icon_-_Info.svg) no-repeat top left/.6em;
opacity: .8;
margin: 0 -.35em 0 .1em;
}
.hoverLink.cdHover::after {
content:'';
display: inline-block;
width: 1em;
height: 1em;
background: url(https://vignette.wikia.nocookie.net/eternalcardgame/images/4/45/Icon_-_Eye.svg) no-repeat top left/.65em;
opacity: .8;
margin: 0 -.25em 0 0;
}
/* = Hover Popups - Cards (Legacy) = */
/***********************************************************************/
/* Legacy CSS for original CardHover, now stored under Template:CardHover/old
/* Credit: http://mathmagician.wikia.com/wiki/CSS_hover_example?oldid=5619 */
/* tooltip start*/
.tooltip {
cursor: default;
display:inline;
}
.tooltip span {
margin-left: -99em;
position: relative;
}
.tooltip:hover span {
z-index: 99;
position: absolute;
margin-top: -29em;
margin-left: 9em;
}
/* tooltip end Very Glitchy. Don't know enough to fix, meant for images.*/
/*show-hover start*/
.show-hover {
display: none;
}
.hover-container:hover .show-hover {
display:inline;
}
.hover-container:hover .hide-hover {
display:none;
}
/*show-hover end More straightfoward. */
/* == Sprites - Icons & Animations == */
/***********************************************************************/
/* Configure wrapper DIV */
.set-section-wrapper {
width:620px;
margin: 0 auto;
}
/* Configure container DIV */
.set-container {
float: left;
width: 300px;
height: auto;
}
/* Configure icon DIV & animations */
.icon-set {
background-repeat: no-repeat;
background-position: 0px 0px;
display: inline-block;
width: 300px;
height: 83px;
}
.icon-set:hover {
background-position: 0px -83px;
}
/* Set Icon sprite images */
.set_icon-The_Empty_Throne {
background-image: url('https://vignette.wikia.nocookie.net/eternalcardgame/images/2/22/Sprite_-_Set_Button_-_The_Empty_Throne.png/revision/latest');
}
.set_icon-Jekk_s_Bounty {
background-image: url('https://vignette.wikia.nocookie.net/eternalcardgame/images/5/52/Sprite_-_Set_Button_-_Jekk%27s_Bounty.png/revision/latest');
}
.set_icon-Omens_of_the_Past {
background-image: url('https://vignette.wikia.nocookie.net/eternalcardgame/images/9/92/Sprite_-_Set_Button_-_Omens_of_the_Past.png/revision/latest');
}
.set_icon-The_Tale_of_Horus_Traver {
background-image: url('https://vignette.wikia.nocookie.net/eternalcardgame/images/8/8c/Sprite_-_Set_Button_-_The_Tale_of_Horus_Traver.png/revision/latest');
}
.set_icon-The_Dusk_Road {
background-image: url('https://vignette.wikia.nocookie.net/eternalcardgame/images/e/e4/Sprite_-_Set_Button_-_The_Dusk_Road.png/revision/latest');
}
.set_icon-Dead_Reckoning {
background-image: url('https://vignette.wikia.nocookie.net/eternalcardgame/images/2/2e/Sprite_-_Set_Button_-_Dead_Reckoning.png/revision/latest');
}
.set_icon-The_Fall_of_Argenport {
background-image: url('https://vignette.wikia.nocookie.net/eternalcardgame/images/6/62/Sprite_-_Set_Button_-_The_Fall_of_Argenport.png/revision/latest');
}
.set_icon-Into_Shadow {
background-image: url('https://vignette.wikia.nocookie.net/eternalcardgame/images/0/03/Sprite_-_Set_Button_-_Into_Shadow.png/revision/latest');
}
.set_icon-Defiance {
background-image: url('https://vignette.wikia.nocookie.net/eternalcardgame/images/e/e8/Sprite_-_Set_Button_-_Defiance.png/revision/latest');
}
.set_icon-Homecoming {
background-image: url('https://vignette.wikia.nocookie.net/eternalcardgame/images/8/8a/Sprite_-_Set_Button_-_Homecoming.png/revision/latest');
}
.set_icon-Dark_Frontier {
background-image: url('https://vignette.wikia.nocookie.net/eternalcardgame/images/a/af/Sprite_-_Set_Button_-_Dark_Frontier.png/revision/latest');
}
.set_icon-The_Trials_of_Grodov {
background-image: url('https://vignette.wikia.nocookie.net/eternalcardgame/images/2/2f/Sprite_-_Set_Button_-_The_Trials_of_Grodov.png/revision/latest');
}
.set_icon-The_Flame_of_Xulta {
background-image: url('https://vignette.wikia.nocookie.net/eternalcardgame/images/9/91/Sprite_-_Set_Button_-_The_Flame_of_Xulta.png/revision/latest');
}
/* Alt highlight when appearing on set's article page - feature not used for now */
.page-The_Empty_Throne .set_icon_The_Empty_Throne,
.page-Jekk_s_Bounty .set_icon-Jekk_s_Bounty,
.page-Omens_of_the_Past .set_icon-Omens_of_the_Past,
.page-The_Tale_of_Horus_Traver .set_icon-The_Tale_of_Horus_Traver,
.page-The_Dusk_Road .set_icon-The_Dusk_Road,
.page-Dead_Reckoning .set_icon-Dead_Reckoning,
.page-The_Fall_of_Argenport .set_icon-The_Fall_of_Argenport,
.page-Into_Shadow .set_icon-Into_Shadow,
.page-Defiance .set_icon-Defiance,
.page-Defiance .set_icon-Homecoming,
.page-Defiance .set_icon-Dark_Frontier {
background-position: 0px -166px;
}
/* == Spoiler Galleries & Cards == */
/***********************************************************************/
/* Configure container DIV as a flexbox */
.flex-gallery {
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap: wrap;
-webkit-justify-content: space-around; /* Safari */
justify-content: space-around;
-webkit-align-items: flex-end; /* Safari */
align-items: flex-end;
}
/* Make flexbox child elements */
.flex-wrap {
-webkit-flex:0 0 auto; /* Safari */
flex:0 0 auto;
}
/* == Configure card image galleries == */
/***********************************************************************/
/* Size and position card images */
.cardGallery .wikia-gallery-item {
vertical-align: bottom;
}
.cardGallery .thumb[style],
.cardGallery .gallery-image-wrapper[style],
.cardGallery .image[style] {
height: auto !important;
}
/* Remove unwanted gallery stylings */
.cardGallery .thumb {
box-shadow: none;
margin-top: 5px;
}
.cardGallery .accent {
background: none;
}
.cardGallery .wikia-gallery-item .thumb .gallery-image-wrapper {
overflow: visible;
}
/* == Customize Imported CSS == */
/*
* @title: ModernWikiActivity
* @description: Modernizes Special:WikiActivity and adds in WDS icons
* See http://dev.wikia.com/wiki/ModernWikiActivity for more information.
* @authors: Americhino
* @version: 0.9.5
* @license: CC-BY-SA 3.0
* @installation: @import url("/load.php?mode=articles&only=styles&articles=u:dev:MediaWiki:ModernWikiActivity.css");
*
*/
.activityfeed > li.activity-type-edit {
border-left-color: #ffce2f;
}
.activityfeed > li.activity-type-edit strong a {
color: #ffce2f !important;
}
.activityfeed > li.activity-type-new {
border-left-color: #3ea0ff;
}
.activityfeed > li.activity-type-new strong a {
color: #3ea0ff !important;
}
.activityfeed > li.activity-type-categorization {
border-left-color: #ff722f;
}
.activityfeed > li.activity-type-categorization strong a {
color: #ff722f !important;
}
/* Icons */
.activityfeed > li.activity-type-edit img.edit.sprite {
background-color: currentColor;
background-color: #ffce2f;
}
.activityfeed > li.activity-type-new img.new.sprite {
background-color: currentColor;
background-color: #3ea0ff;
}
.activityfeed > li.activity-type-categorization img.categorization.sprite {
background-color: currentColor;
background-color: #ff722f;
}
/* == Hidden Spoiler Text Testing == */
/***********************************************************************/
.spoiler-section {
min-height: 2em;
overflow: hidden;
position: relative;
}
.spoiler-section::after {
content: "Hover to see spoilers!";
display: block;
position: absolute;
font-size: 1.5em;
background-color: var(--wiki-bg-color);
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23888888' fill-opacity='0.2' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
height: 100%;
width: 100%;
top: 0;
text-align: center;
padding: .25em 0;
opacity: 1;
}
.spoiler-section:hover::after,
.spoiler-section:focus::after,
.spoiler-section:active::after {
content: "";
height: 0px;
-webkit-transition: height .3s;
transition: height .3s;
padding: 0;
}