mirror of
https://github.com/Investigamer/cardconjurer.git
synced 2025-07-26 21:04:58 -05:00
666 lines
22 KiB
HTML
666 lines
22 KiB
HTML
<!DOCTYPE html5>
|
|
<html>
|
|
<head>
|
|
<title>Card Conjurer</title>
|
|
<div class="title"><img src="images/title.png"></div>
|
|
<!-- Favicon craziness! -->
|
|
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
|
|
<link rel="manifest" href="favicons/site.webmanifest">
|
|
<link rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#64ca2f">
|
|
<link rel="shortcut icon" type="image/x-icon" href="favicons/favicon.ico">
|
|
<meta name="msapplication-TileColor" content="#00a300">
|
|
<meta name="msapplication-config" content="favicons/browserconfig.xml">
|
|
<meta name="theme-color" content="#64ca2f">
|
|
<!-- Other things -->
|
|
<meta charset="UTF-8">
|
|
<meta id="pageViewport" name="viewport" content="user-scalable=no,width=800">
|
|
<script>
|
|
window.onload = function() {
|
|
if (screen.width > 800) {
|
|
var myViewPort = document.getElementById("pageViewport");
|
|
myViewPort.setAttribute("content", "width=device-width, initial-scale=1");
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="grid mainGrid">
|
|
<div class="canvasContainer">
|
|
<canvas id="canvas" width="749" height="1044"></canvas>
|
|
</div>
|
|
<div>
|
|
<div class="grid selectionGrid">
|
|
<div onclick="toggleView('color', 'cmm')">Color</div>
|
|
<div onclick="toggleView('general', 'cmm')">General</div>
|
|
<div onclick="toggleView('text', 'cmm')">Text</div>
|
|
<div onclick="toggleView('art', 'cmm')">Art</div>
|
|
<div onclick="toggleView('info', 'cmm')">Info</div>
|
|
<div onclick="toggleView('set', 'cmm')">Set</div>
|
|
<div onclick="toggleView('watermark', 'cmm')">Watermark</div>
|
|
<div onclick="toggleView('advanced', 'cmm')">Advanced</div>
|
|
<div onclick="toggleView('planeswalker', 'cmm')" style="font-size: 85%; display: none;" id="cmmPlaneswalker">Planeswalker</div>
|
|
<div onclick="toggleView('download', 'cmm')">Download</div>
|
|
</div>
|
|
<div class="cardManipulationMenu">
|
|
<div class="cmm shown" id="cmm-color">
|
|
Border
|
|
<span class="dropdown">
|
|
<select id="borderSelection" onchange="changeTemplate()">
|
|
<option value="m15/">M15</option>
|
|
<option value="planeswalker/">Planeswalker (M15)</option>
|
|
<option value="tokenTextless/">Token (Textless)</option>
|
|
<option value="tokenText/">Token (Text)</option>
|
|
<option value="tokenTall/">Token (Tall)</option>
|
|
<option value="map/">Treasure Map</option>
|
|
<option value="plane/">Plane</option>
|
|
<option value="8th/">8th</option>
|
|
</select>
|
|
</span>
|
|
<br/>
|
|
Color
|
|
<span class="dropdown">
|
|
<select id="colorSelection" onchange="updateBorder()">
|
|
<option value="white">White</option>
|
|
</select>
|
|
</span>
|
|
<br/>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxSecondColor" onchange="updateBorder()" />
|
|
<label for="checkboxSecondColor" />
|
|
<div>Second Color</div>
|
|
</div>
|
|
<span class="dropdown">
|
|
<select id="secondColorSelection" onchange="updateBorder()"></select>
|
|
</span>
|
|
<br/>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxThirdColor" onchange="updateBorder()" />
|
|
<label for="checkboxThirdColor" />
|
|
<div>Third Color</div>
|
|
</div>
|
|
<span class="dropdown">
|
|
<select id="thirdColorSelection" onchange="updateBorder()"></select>
|
|
</span>
|
|
</div>
|
|
<div class="cmm" id="cmm-advanced">
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxLegendary" onchange="updateBorder()" />
|
|
<label for="checkboxLegendary" />
|
|
<div>Legendary</div>
|
|
</div>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxNyx" onchange="updateBorder()" />
|
|
<label for="checkboxNyx" />
|
|
<div>Nyx</div>
|
|
</div>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxMiracle" onchange="updateBorder()" />
|
|
<label for="checkboxMiracle" />
|
|
<div>Miracle</div>
|
|
</div>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxRareStamp" onchange="updateBorder()" />
|
|
<label for="checkboxRareStamp" />
|
|
<div>Rare Stamp</div>
|
|
</div>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxFlipIcon" onchange="updateBorder()" />
|
|
<label for="checkboxFlipIcon" />
|
|
<div>Flip Icon</div>
|
|
</div>
|
|
<span class="dropdown">
|
|
<select id="inputFlipIcon" onchange="updateBorder()">
|
|
<option value="blank.png">Blank</option>
|
|
<option value="day.png">Day</option>
|
|
<option value="night.png">Night</option>
|
|
<option value="compass.png">Compass</option>
|
|
<option value="moon.png">Moon</option>
|
|
<option value="eldrazi.png">Eldrazi</option>
|
|
<option value="planeswalker.png">Planeswalker</option>
|
|
<option value="creature.png">Creature</option>
|
|
<option value="instant.png">Instant</option>
|
|
<option value="sorcery.png">Sorcery</option>
|
|
<option value="enchantment.png">Enchantment</option>
|
|
<option value="artifact.png">Artifact</option>
|
|
<option value="land.png">Land</option>
|
|
<option value="multitype.png">Multitype</option>
|
|
<option value="planeshift.png">Planeshift</option>
|
|
<option value="structure.png">Structure</option>
|
|
</select>
|
|
</span>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxFlipTip" onchange="updateBorder()" />
|
|
<label for="checkboxFlipTip" />
|
|
<div>Flip Tip</div>
|
|
</div>
|
|
<input id="inputFlipTip" value="" type="text" class="input">
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxFlippedDark" onchange="updateBorder()" />
|
|
<label for="checkboxFlippedDark" />
|
|
<div>Flipped (Darker)</div>
|
|
</div>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxSilverBorder" onchange="createBorder()" />
|
|
<label for="checkboxSilverBorder" />
|
|
<div>Silver Border</div>
|
|
</div>
|
|
<input type="color" id="inputColor" onchange="createBorder()" value="#000000"> Border Color
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxFoil" />
|
|
<label for="checkboxFoil" />
|
|
<div>Foil</div>
|
|
</div>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxIdentity" onchange="createBorder()" />
|
|
<label for="checkboxIdentity" />
|
|
<div>Color Identity</div>
|
|
</div>
|
|
<input id="inputIdentity" type="text" class="input" onchange="createBorder()">
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxBorderless" onchange="createBorder()" />
|
|
<label for="checkboxBorderless" />
|
|
<div>Borderless</div>
|
|
</div>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxTitleVisibility" checked="true" onchange="createBorder()">
|
|
<label for="checkboxTitleVisibility" />
|
|
<div>Title Visibility</div>
|
|
</div>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxTypeVisibility" checked="true" onchange="createBorder()">
|
|
<label for="checkboxTypeVisibility" />
|
|
<div>Type Visibility</div>
|
|
</div>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxRulesVisibility" checked="true" onchange="createBorder()">
|
|
<label for="checkboxRulesVisibility" />
|
|
<div>Rules Visibility</div>
|
|
</div>
|
|
<input type="color" id="inputTitleColor" value="#000000"> Title Color<br/>
|
|
<input type="color" id="inputTypeColor" value="#000000"> Type Color<br/>
|
|
<input type="color" id="inputRulesColor" value="#000000"> Rules Color<br/>
|
|
<input type="color" id="inputCreatureColor" value="#000000"> Power/Toughness Color<br/>
|
|
</div>
|
|
<div class="cmm" id="cmm-general">
|
|
Name
|
|
<input id="inputName" type="text" class="input">
|
|
<br/>
|
|
Mana Cost
|
|
<input id="inputCost" type="text" class="input">
|
|
<br/>
|
|
Type
|
|
<input id="inputType" type="text" class="input">
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxCreature" />
|
|
<label for="checkboxCreature" />
|
|
<div>Power/Toughness</div>
|
|
</div>
|
|
<input id="inputPowerToughness" class="input" type="text">
|
|
</div>
|
|
<div class="cmm" id="cmm-text">
|
|
Rules Text
|
|
<br/>
|
|
<textarea id="inputText" class="input" rows="5" cols="40" style="width: 100%; resize: none; height: 200px"></textarea>
|
|
<br/>
|
|
Rules Text Font Size
|
|
<input id="textSize" type="number" class="input" min="0" max="100" value="37" step="0.5">
|
|
<br/>
|
|
Pixels Between Paragraphs
|
|
<input id="textShift" type="number" class="input" min="0" max="300" value="13">
|
|
<br/>
|
|
Shift All Text Down
|
|
<input id="textDown" type="number" class="input" min="0" max="300" value="0">
|
|
<br/>
|
|
Shift Mana Symbols Down
|
|
<input id="inputSymbolDown" type="number" class="input" value="0">
|
|
</div>
|
|
<div class="cmm" id="cmm-art">
|
|
Image
|
|
<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgArt, true)" id="inputPicture">
|
|
<br/>
|
|
<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgArt)">
|
|
<br/>
|
|
Image Zoom
|
|
<input id="imageSize" type="number" class="input" value="100" step="0.1">
|
|
<br/>
|
|
Image Left
|
|
<input id="imageLeft" type="number" class="input" value="0" step="1">
|
|
<br/>
|
|
Image Up
|
|
<input id="imageUp" type="number" class="input" value="0" step="1">
|
|
Image Rotation
|
|
<input id="imageRotation" type="number" class="input" value="0" step="1" min="0" max="360">
|
|
</div>
|
|
<div class="cmm" id="cmm-info">
|
|
Other Info
|
|
<input id="inputInfo" value="Not A Real Card" type="text" class="input">
|
|
<br/>
|
|
Card Number
|
|
<input id="inputNumber" value="001/001" type="text" class="input">
|
|
<br/>
|
|
Rarity
|
|
<input id="inputRarity" value="C" type="text" class="input">
|
|
<br/>
|
|
Set Abbreviation
|
|
<input id="inputSet" value="MTG" type="text" class="input">
|
|
<br/>
|
|
Language
|
|
<input id="inputLanguage" value="EN" type="text" class="input">
|
|
<br/>
|
|
Artist Credit
|
|
<input id="inputArtist" value="" type="text" class="input">
|
|
<br/>
|
|
<input type="color" id="inputInfoColor" value="#ffffff"> Info Color<br/>
|
|
</div>
|
|
<div class="cmm" id="cmm-set">
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxSetSymbol" checked="true">
|
|
<label for="checkboxSetSymbol" />
|
|
<div>Set Symbol</div>
|
|
</div>
|
|
Set Code
|
|
<input type="text" onchange="loadSetSymbol()" value="hm" id="setSymbolCode" class="input">
|
|
<br>
|
|
Set Symbol Rarity
|
|
<input type="text" onchange="loadSetSymbol()" value="c" id="setSymbolRarity" class="input">
|
|
<br>
|
|
Custom Set Symbol
|
|
<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgSetSymbol, true)" id="inputSetSymbol">
|
|
<br/>
|
|
<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgSetSymbol)">
|
|
<br/>
|
|
Scale Set Symbol
|
|
<input id="setSymbolSize" type="number" class="input" value="100" step="0.5">
|
|
</div>
|
|
<div class="cmm" id="cmm-download">
|
|
Frame Rate
|
|
<input type="number" class="input" id="inputFPS" value="10" min="0" onchange="window.clearInterval(cardClockInterval); cardClockInterval = setInterval(cardClock, 1000 / document.getElementById('inputFPS').value)">
|
|
<a onclick="downloadCardImage(this)" id="downloadCardImage" href="" target="_blank" download="card.png">Download</a>
|
|
</div>
|
|
<div class="cmm" id="cmm-watermark">
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxWatermark" checked="true" />
|
|
<label for="checkboxWatermark" />
|
|
<div>Watermark</div>
|
|
</div>
|
|
<input type="file" class="input" accept="image/*" onchange="loadImage(event, imgWatermark, true)" id="inputWatermark">
|
|
<br/>
|
|
<input type="text" class="input" placeholder="Or use a URL" onchange="imageURL(this, imgWatermark)">
|
|
<br/>
|
|
<input type="text" class="input" placeholder="Or use a set code" onchange="loadSetSymbolWatermark()" id="inputWatermarkSetCode">
|
|
<br/>
|
|
Watermark Color
|
|
<br/>
|
|
<span class="dropdown">
|
|
<select id="watermarkColorSelection">
|
|
<option value="#afa360">White</option>
|
|
<option value="#04527c">Blue</option>
|
|
<option value="#494949">Black</option>
|
|
<option value="#a3280d">Red</option>
|
|
<option value="#0f4f14">Green</option>
|
|
<option value="#7f5f00">Gold</option>
|
|
<option value="#616b72">Artifact/Colorless</option>
|
|
</select>
|
|
</span>
|
|
<br/>
|
|
<div class="checkbox">
|
|
<input type="checkbox" id="checkboxSecondWatermarkColor" />
|
|
<label for="checkboxSecondWatermarkColor" />
|
|
<div>Second Color</div>
|
|
</div>
|
|
<span class="dropdown">
|
|
<select id="secondWatermarkColorSelection">
|
|
<option value="#afa360">White</option>
|
|
<option value="#04527c">Blue</option>
|
|
<option value="#494949">Black</option>
|
|
<option value="#a3280d">Red</option>
|
|
<option value="#0f4f14">Green</option>
|
|
<option value="#7f5f00">Gold</option>
|
|
<option value="#616b72">Artifact/Colorless</option>
|
|
</select>
|
|
</span>
|
|
Watermark Opacity
|
|
<input type="number" id="inputWatermarkOpacity" class="input" value="0.4" max="1" min="0" step="0.01">
|
|
</div>
|
|
<div class="cmm" id="cmm-planeswalker">
|
|
Planeswalker Ability Line Height
|
|
<input type="number" id="abilityLine1" value="102" onchange="planeswalkerAbilityLines()">
|
|
<input type="number" id="abilityLine2" value="102" onchange="planeswalkerAbilityLines()">
|
|
<input type="number" id="abilityLine3" value="102" onchange="planeswalkerAbilityLines()">
|
|
<input type="number" id="abilityLine4" value="0" onchange="planeswalkerAbilityLines()">
|
|
These values set the height of each ability box of the planeswalker. For evenly spaced boxes use (145, 145) or (90, 90, 90)<br>
|
|
Planeswalker Ability Values
|
|
<input type="text" id="abilityValue0" value="+1">
|
|
<input type="text" id="abilityValue1" value="0">
|
|
<input type="text" id="abilityValue2" value="-1">
|
|
<input type="text" id="abilityValue3" value="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="grid">
|
|
<div>
|
|
<div class="grid selectionGrid">
|
|
<div onclick="toggleView('symbolList', 'extras')">Symbols</div>
|
|
<div onclick="toggleView('codes', 'extras')">Other Codes</div>
|
|
<div onclick="toggleView('set', 'extras')">Set Codes</div>
|
|
<div onclick="toggleView('border', 'extras')">Colors</div>
|
|
</div>
|
|
<div class="extrasMenu">
|
|
<div class="extras shown" id="extras-symbolList">
|
|
Each of the following codes must include '<' before each code and '>' after. These codes aren't caps sensitive.
|
|
<div class="symbolGrid grid" id="symbolList">
|
|
|
|
</div>
|
|
</div>
|
|
<div class="extras" id="extras-codes">
|
|
Like the mana symbols, each of the following codes must include '<' before each code and '>' after. These codes are caps sensitive.<br/>
|
|
• line → Skips to the next line<br/>
|
|
• bar → Just like line, except adds the bar that usually seperates flavor text<br/>
|
|
• lineNoSpace → Just like line, except stays closer to the previous line<br/>
|
|
• i → Text is italicized<br/>
|
|
• /i → Text returns to normal<br/>
|
|
• left → Text aligns to the left<br/>
|
|
• center → Text aligns to the center<br/>
|
|
• right → Text aligns to the right<br/>
|
|
• plane → Creates a large <img src="data/manaSymbols/56.png" style="height: 1em;"></img> and shifts the following text to the right. This is designed for planar cards.
|
|
</div>
|
|
<div class="extras" id="extras-set">
|
|
Every set in Magic: The Gathering has an associated 2-3 letter code. For example, Homelands is HM and Innistrad is ISD. This program uses the codes from <a href="http://gatherer.wizards.com" target="_blank">The Gatherer</a>, the official Magic card database. A handy list of all sets and their codes can be found on <a href="https://en.wikipedia.org/wiki/List_of_Magic:_The_Gathering_sets" target="_blank">Wikipedia</a>. These codes aren't caps sensitive.
|
|
</div>
|
|
<div class="extras" id="extras-border">
|
|
Under the 'Card Border' tab use the following guidelines:<br/>
|
|
• Border → Selects the border style, such as planar card, m15 card, etc...<br/>
|
|
• Color → Primary color<br/>
|
|
• Second Color → Secondary color. Only affects the right half of the card, as seen on hybrid cards.<br/>
|
|
• Third Color → Tertiary color. Affects the entire card, including power and toughness, as seen on two-colored gold cards.<br/><br/>
|
|
Under the 'Border (Advanced)' tab the checkboxes are fairly straightforward. Try each feature out to see what it does.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="sampleGrid grid text">
|
|
Check out some samples<br/>
|
|
<div class="noBorder">
|
|
<img id="sampleCardA" class="sampleCard"></img>
|
|
<img id="sampleCardB" class="sampleCard"></img>
|
|
<img id="sampleCardC" class="sampleCard"></img>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<footer class="info"><a href="https://imkyle4815.github.io/cardconjurer/TermsOfUse.txt" target="_blank">Terms of Use</a> • <a href="https://imkyle4815.github.io/cardconjurer/Disclaimer.txt" target="_blank">Disclaimer</a> • <a href="https://github.com/ImKyle4815/CardConjurer" target="_blank">Github page</a></footer>
|
|
|
|
|
|
<!--CSS-->
|
|
<style>
|
|
/*fonts*/
|
|
@font-face {
|
|
font-family: relaymedium;
|
|
src: url("data/fonts/relay-medium.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: belerenb;
|
|
src: url("data/fonts/beleren-b.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: belerenbsc;
|
|
src: url("data/fonts/beleren-bsc.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: matrixbsc;
|
|
src: url("data/fonts/matrix-bsc.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: matrix;
|
|
src: url("data/fonts/matrix.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: matrixb;
|
|
src: url("data/fonts/matrix-b.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: mplantin;
|
|
src: url("data/fonts/mplantin.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: mplantini;
|
|
src: url("data/fonts/mplantin-i.ttf");
|
|
}
|
|
|
|
/*Color Palette*/
|
|
:root {
|
|
/*Regular*/
|
|
--color-a: #073c00;
|
|
--color-b: #073c0040;
|
|
--color-c: #095700;
|
|
--color-d: #0e720040;
|
|
--color-e: #0e7200;
|
|
}
|
|
|
|
/*Page-wide styling*/
|
|
* {
|
|
font-family: belerenb;
|
|
font-size: 6vw;
|
|
user-select: none;
|
|
color: #ddd;
|
|
}
|
|
html {
|
|
background: url("images/background.png") no-repeat center center fixed;
|
|
-webkit-background-size: cover;
|
|
-moz-background-size: cover;
|
|
-o-background-size: cover;
|
|
background-size: cover;
|
|
}
|
|
|
|
/*Grid styling*/
|
|
.grid {
|
|
margin-bottom: 5px;
|
|
display: grid;
|
|
grid-gap: 4px;
|
|
}
|
|
.mainGrid {
|
|
grid-gap: 12px;
|
|
}
|
|
.canvasContainer {
|
|
justify-self: center;
|
|
}
|
|
.selectionGrid {
|
|
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
|
|
text-align: center;
|
|
}
|
|
.grid > div {
|
|
padding: 8px;
|
|
border-radius: 36px;
|
|
}
|
|
.grid > div:not(.noBorder) {
|
|
border: 1px solid var(--color-c);
|
|
background: var(--color-d);
|
|
}
|
|
|
|
/*Card manipulation menu grid*/
|
|
.selectionGrid > div {
|
|
font-family: belerenbsc;
|
|
cursor: pointer;
|
|
}
|
|
.selectionGrid > div:nth-child(odd) {
|
|
background-color: var(--color-c);
|
|
}
|
|
.cardManipulationMenu, .extrasMenu {
|
|
margin-top: 4px;
|
|
padding: 24px;
|
|
border-radius: 36px;
|
|
border: 1px solid var(--color-c);
|
|
background-color: var(--color-b);
|
|
}
|
|
.cmm, .extras {
|
|
display: none;
|
|
}
|
|
.shown {
|
|
display: block;
|
|
}
|
|
.sampleCard {
|
|
width: 100%;
|
|
}
|
|
|
|
/*Inputs and more*/
|
|
/*dropdown*/
|
|
.dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 100%;
|
|
}
|
|
.dropdown select {
|
|
border-radius: 0.25em;
|
|
padding-left: 0.25em;
|
|
width: inherit;
|
|
background-color: var(--color-e);
|
|
border: none;
|
|
cursor: pointer;
|
|
-moz-appearance: none;
|
|
-webkit-appearance:none;
|
|
appearance: none;
|
|
}
|
|
.dropdown select option {
|
|
/*nothing for now :)*/
|
|
}
|
|
.dropdown::after {
|
|
content: "\25BC";
|
|
font-size: 0.6em;
|
|
position: absolute;
|
|
pointer-events: none;
|
|
right: 0.6em;
|
|
top: 0.6em;
|
|
}
|
|
/*checkbox*/
|
|
.checkbox {
|
|
height: 1em;
|
|
margin: 5px 0px;
|
|
position: relative;
|
|
}
|
|
.checkbox label {
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 1em;
|
|
border-radius: 0.25em;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
background: var(--color-e);
|
|
cursor: pointer;
|
|
}
|
|
.checkbox input:checked ~ label:after {
|
|
display: block;
|
|
}
|
|
.checkbox label:after {
|
|
content: "\2718";
|
|
position: absolute;
|
|
display: none;
|
|
left: 0.1em;
|
|
top: -0.25em;
|
|
}
|
|
.checkbox input {
|
|
opacity: 0;
|
|
}
|
|
.checkbox div {
|
|
white-space: pre;
|
|
position: relative;
|
|
top: -0.1em;
|
|
left: 1.1em;
|
|
}
|
|
/*other inputs*/
|
|
input[type="text"], input[type="number"], textarea, input[type="file"] {
|
|
width: 100%;
|
|
border: none;
|
|
background: var(--color-e);
|
|
border-radius: 0.25em;
|
|
padding-left: 0.25em;
|
|
}
|
|
/*color selector*/
|
|
input[type="color"] {
|
|
padding: 0px;
|
|
border: none;
|
|
background: var(--color-e);
|
|
}
|
|
|
|
/*Hyperlinks*/
|
|
a:link, a:visited {
|
|
color: #fff;
|
|
}
|
|
a:hover, a:active {
|
|
color: #999;
|
|
}
|
|
|
|
/*Desktop*/
|
|
@media only screen and (min-width: 1130px) {
|
|
.mainGrid:not(.plane) {
|
|
grid-template-columns: calc(749px + 0.7em) auto;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 1455px) {
|
|
.mainGrid.plane {
|
|
grid-template-columns: calc(1074px + 0.7em) auto;
|
|
}
|
|
}
|
|
@media only screen and (orientation: landscape) {
|
|
.sampleCard {
|
|
width: 32.8%;
|
|
}
|
|
}
|
|
@media only screen and (min-width: 801px) {
|
|
html {
|
|
/*background*/
|
|
}
|
|
* {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
|
|
/*Text and stuff :)*/
|
|
.info, .title {
|
|
text-align: center;
|
|
font-size: 0.75em;
|
|
}
|
|
.info > * {
|
|
font-size: inherit;
|
|
}
|
|
|
|
/*symbol grid*/
|
|
.manaSymbol > img {
|
|
position: relative;
|
|
top: 0.15em;
|
|
height: 1em;
|
|
margin-bottom: 0.25em;
|
|
}
|
|
.symbolGrid {
|
|
margin-top: 8px;
|
|
grid-template-columns: repeat(auto-fit, minmax(3.5em, 1fr));
|
|
text-align: center;
|
|
}
|
|
|
|
/*Title*/
|
|
.title > img {
|
|
margin-bottom: 20px;
|
|
margin-top: 0px;
|
|
max-height: 80px;
|
|
width: auto;
|
|
}
|
|
|
|
/*Sitewide text (bottom of the page)*/
|
|
.text {
|
|
text-align: center;
|
|
}
|
|
|
|
</style>
|
|
<script src="data/scripts/main.js"></script>
|
|
<html>
|
|
<!--
|
|
References
|
|
|
|
<div class="cmm" id="cmm-targetId">
|
|
...
|
|
</div>
|
|
|
|
-->
|