Template:CardBox/styles.css

/* Image CSS specifications to control the behavior of the card image in the template*/ img { width: auto; max-height: 100%; vertical-align: baseline; }

/* The culprit for the image problems was the element! */ pre { /* Remove all of the special formatting for this element */ padding: 0; margin: 0; white-space: normal; overflow: auto; word-wrap: normal; background-color: transparent; color: transparent; border: 0; line-height: 0; /* Include new specifications that make the image behave as intended */ display: contents }

/* On WikiTide, another element is also a source of trouble */ .mw-default-size { display: contents; }

/* The next section is CSS that will apply regardless of viewport dimensions */

/* Specify CSS for generic classes here */

/* Class: Flex-Center */ /* (Flexbox display with alignment towards the center-middle) */ .flex-center { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }

/* Class: Flex-Default */ /* Flex display with the default settings */ .flex-default { display: flex; }

/* Class: Shorter Text */ /* Takes 45% of the shared width space */ .short-text { width: 45%; margin: 0.5rem 0; }

/* Class: Longer Text */ /* Takes 55% of the shared width space */ .long-text { width: 50%; margin: 0.5rem 0 0.5rem 5%; }

/* Class: Text Labels */ /* padding-left for [REQUIREMENT] and [EFFECT] */ .text-label { padding-left: calc(0.37619553666312433vw + 0.18809776833156217vh); }

/* Class: Card Text */ /* The actual text in the card's lore box */ .card-text { padding: 0 calc(0.8119022316684379vw + 0.40595111583421906vh); font-size: 1rem; }

/* Class: Text by Image */ /* Text that appears next to an image (to the right of the image) */ .text-by-img { margin: auto 0; padding-left: calc(0.40595111583421895vw + 0.20297555791710953vh); }

/* Text that appears next to an image (to the left of the image) */ .text-by-img2 { margin: auto 0; padding-right: calc(0.40595111583421895vw + 0.20297555791710953vh); }

/* Class: Text Between Images */ /* Text that appears between two images */ .text-btwn-imgs { padding: 0 calc(0.16238044633368756vw + 0.0811902231668438vh); margin: 0; line-height: 0; font-weight: bold; align-self: center; color: black; }

/* Class: Small-Mobile Show */ /* Only show this CSS on small mobile screens */ .small-mobile-show { display: none; }

/* The next section is CSS for classes that are specific to certain containers */

/* Specify CSS for the main div container */ .mainBox { width: 100%; padding-bottom: calc(0.37619553666312433vw + 0.18809776833156217vh); border-style: solid; border-width: 0.3em; border-radius: 0.7em; border-color: #42465e; font-family: Arial, Helvetica, sans-serif; color: black; font-size: 1rem; }

/* Primary name box */ .nameBox { height: 100%; padding-bottom: 0.6rem; padding-top: 0.3rem; /* 0.3rem is added by the border above the div */ background-color: #42465e; }

/* The title of the card located in nameBox */ .cardTitle { color: white; font-size: 1.6rem; font-family: Arial, Helvetica, sans-serif; font-weight: bold; line-height: 1; text-align: center; border: 0; margin: 0; overflow: visible; }

/* Div containing Japanese-related name information */ .jpnBox { margin-bottom: calc(0.037619553666312436vw + 0.018809776833156214vh); display: flex; justify-content: space-around; flex-wrap: wrap; text-align: center; }

/* Div containing the card image */ .imgBox { margin-left: calc(0.40595111583421895vw + 0.20297555791710953vh); }

/* The image within .imgBox */ .imgBox > span > a > img { max-width: 100%; height: auto; }

/* Div containing card data */ .dataBox { width: 65%; /*margin-top: calc(0.5642933049946864vw + 0.2821466524973432vh);*/ margin-left: calc(0.5683315621679065vw + 0.2841657810839533vh); font-size: 1.15rem; }

/* Div containing non-lore data about card */ /*.metaBox { }*/

/* Div for Monster Attribute image (contains both the icon and text) */ .attrDiv-outer { height: 100%; align-items: center; }

/* Div for Monster Attribute image (contains just the icon) */ .attrDiv-inner { /*height: calc(2.0297555791710944vw + 1.0148777895855476vh); width: calc(152 / 148 * 2.0297555791710944vw + 152 / 148 * 1.0148777895855476vh);*/ height: 2.6rem; /*width: calc(152/148 * 2.6rem);*/ }

/* The image link element inside of .attrDiv-inner */ .attrDiv-inner a { height: 100%; }

/* Div for Monster Type image (contains both the icon and text) */ .monTypeDiv-outer { height: 100%; align-items: center; }

/* Div for Monster Type image (contains just the icon) */ .monTypeDiv-inner { /*height: calc(2.0297555791710944vw + 1.0148777895855476vh); width: calc(152 / 148 * 2.0297555791710944vw + 152 / 148 * 1.0148777895855476vh);*/ height: 2.2rem; /*width: calc(152/148 * 2.6rem);*/ }

/* The image link element inside of .monTypeDiv-inner */ .monTypeDiv-inner a { height: 100%; }

/* Div for Spell/Trap Type image (contains both the icon and text) */ .stTypeDiv-outer { height: 100%; align-items: center; flex-wrap: wrap-reverse; }

/* Div for Spell/Trap Type image (contains just the icon) */ .stTypeDiv-inner { height: 1.6rem; /*width: 1.6rem;*/ }

/* The image link element inside of .stTypeDiv-inner */ .stTypeDiv-inner a { height: 100%; }

/* Div for Monster LV image */ .lvDiv { height: calc(2.232731137088204vw + 1.116365568544102vh); }

/* Div for Monster ATK and DEF images (used for MAXIMUM ATK div too) */ .statDiv { height: 1.4rem; margin: 0; flex-wrap: nowrap; color: white; font-size: 1.2rem; }

/* Div for custom ATK and DEF boxes */ .statBox { height: 1.4rem; width: calc(132*1.4rem/54); }

/* Color for custom ATK box */ .atkBox { background-color: #B3000C; }

/* Color for custom DEF box */ .defBox { background-color: #005C8A; }

/* CSS for "ATK" and "DEF" inside the custom boxes */ .statText { margin: 0; line-height: 0; }

/* CSS for custom MAXIMUM ATK box */ .maxBox { height: 100%; width: calc(495*1.4rem/54); /*background-color: #804A00;*/ /*background-image: linear-gradient(180deg, #F28F00 0.05rem, #804A00 0.2rem, #373300 0.8rem, #573300 1.15rem, #F28F00);*/ background-image: linear-gradient(180deg, #F28F00 0.05rem, #6B3E00 0.20rem, #804A00 0.4rem, #6B3E00, #573300, #6B3E00 1.16rem, #F28F00); white-space: pre; }

/* Div for Legend image (contains both the icon and text) */ .flDiv-outer { height: 100%; align-items: center; flex-wrap: wrap; }

/* Div for Legend image (contains just the icon) */ .flDiv-inner { /*height: calc(0.95783446121vw + 0.38313378448vh); width: calc(290/59 * 0.95783446121vw + 290/59 * 0.38313378448vh);*/ height: 1.4rem; /*width: calc(290/59 * 1.4rem);*/ }

/* The image link element inside of .flDiv-inner */ .flDiv-inner a { height: 100%; display: flex; }

/* Div for card lore / effect text */ .loreBox { margin-right: calc(0.5683315621679065vw + 0.2841657810839533vh); padding-bottom: calc(0.18809776833156217vw + 0.09404888416578108vh); border-style: solid; border-width: 0.2em; border-radius: 0.2em; border-color: #363636; }

/* Fusion Materials */ .materialsText { /* Same padding-left as .text-label */ padding: 0 0 0 calc(0.37619553666312433vw + 0.18809776833156217vh); }

/* [REQUIREMENT] */ .reqText { padding-top: calc(0.18809776833156217vw + 0.09404888416578108vh); }

/* [EFFECT] */ .effText { padding-top: calc(0.37619553666312433vw + 0.18809776833156217vh); }

/* Next is CSS specific to tablet devices */ @media only screen and (max-width: 1024px) { /* Short and long text for card data */ .long-text { width: 42%; }	.short-text { width: 53%; }	/* Div containing card data */ .dataBox { width: 75%; margin-top: calc(0.5642933049946864vw + 0.2821466524973432vh); }

}

/* The next CSS is specific to mobile devices */ @media only screen and (max-width: 630px) { /* In mobile view, hide elements with this class */ .mobile-hide { display: none; }	/* The main div container */ .mainBox { padding-bottom: calc(0.37619553666312433vw + 1.18809776833156217vh); }	/* The title of the card located in nameBox */ .cardTitle { font-size: 1.4rem; }	/* Div containing Japanese-related name information */ .jpnBox { margin-left: calc(0.487619553666312436vw + 0.48809776833156214vh); margin-right: calc(0.487619553666312436vw + 0.48809776833156214vh); }	/* Div containing card data */ .dataBox { width: 85%; }	/* Div containing the main card image */ .imgBox { margin-left: calc(0.01595111583421895vw + 0.00297555791710953vh); margin-right: calc(0.01595111583421895vw + 0.00297555791710953vh); }	/* Short and long text for card data */ .long-text { width: 45%; }	.short-text { width: 50%; }

/* Div containing attribute image */ /*.attrDiv-inner { height: calc(3.3610755441741365vw + 1.680537772087068vh); width: calc(152 / 148 * 3.3610755441741365vw + 152 / 148 * 1.680537772087068vh); }*/

/* Divs containing custom ATK/DEF/MAXIMUM ATK icons*/ .statDiv { font-size: 1.17rem; }	/* Div containing the custom MAXIMUM ATK box */ .maxBox { letter-spacing: calc(0.48373983739vw + 0.19349593495vh); /*calc(0.01740294511378849vw + 0.010441767068273091vh);*/ }

/* Div containing Legend image */ /*.flDiv-inner { height: calc(3.3610755441741365vw + 1.680537772087068vh); width: calc(290 / 59 * 3.3610755441741365vw + 290 / 59 * 1.680537772087068vh); }*/

}

/* CSS for mobile devices with narrower screens */ @media only screen and (max-width: 430px) { .maxBox { letter-spacing: calc(0.01730294511378849vw + 0.010441767068273091vh); } }

/* After that, the next CSS applies only to mobile devices with small screens */ @media only screen and (max-width: 340px) { /* Div containing the custom MAXIMUM ATK box */ .maxBox { letter-spacing: normal; width: 100%; font-size: 0.8rem; }	/* Div containing card data */ .dataBox { width: 95%; }	/* Div containing the main card image */ .imgBox { margin: auto calc(0.91595111583421895vw + 1.39297555791710953vh); }	/* Show content meant for small mobile screens */ .small-mobile-show { display: inline; }	/* Hide content not meant for small mobile screens */ .small-mobile-hide { display: none; }	/* Div for Monster Type image (contains both the icon and text) */ .monTypeDiv-outer { flex-wrap: wrap; } }