GithubMirrors/cardconjurer
1
0
Fork 1
mirror of https://github.com/Investigamer/cardconjurer.git synced 2025-07-27 05:14:53 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

custom dropdowns

Browse Source
This commit is contained in:
Kyle
2018-11-04 10:50:10 -08:00
parent ba21202c16
commit 47a2e0ae55
2 changed files with 74 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
data/scripts/whiteToTransparent.js
View File

@@ -1,6 +1,5 @@
var transparentCanvas = document.createElement("canvas") var transparentCanvas = document.createElement("canvas")
var transparentContext = transparentCanvas.getContext("2d") var transparentContext = transparentCanvas.getContext("2d")
document.body.appendChild(transparentCanvas)
//Function that auto the image //Function that auto the image
function whiteToTransparent(targetImage) { function whiteToTransparent(targetImage) {

122
index.html
View File

@@ -18,45 +18,40 @@
<div class="section"> <div class="section">
<div class="toggler" onclick="toggleSection(this)">Card Border</div> <div class="toggler" onclick="toggleSection(this)">Card Border</div>
<div class="togglee shown"> <div class="togglee shown">
<!-- <div class="checkbox">
<input type="checkbox" id="testCheckbox" />
<label for="testCheckbox" />
<div>Label hmmm</div>
</div> -->
Border Border
<select class="input" id="borderSelection" onchange="changeTemplate()"> <span class="dropdown">
<option value="m15/">M15</option> <select id="borderSelection" onchange="changeTemplate()">
<option value="map/">Map (Ixalan)</option> <option value="m15/">M15</option>
<option value="plane/">Plane</option> <option value="map/">Map (Ixalan)</option>
<option value="8th/">8th</option> <option value="plane/">Plane</option>
</select> <option value="8th/">8th</option>
</select>
</span>
<br/> <br/>
Color Color
<select class="input" id="colorSelection" onchange="updateBorder()"> <span class="dropdown">
<option value="white">White</option> <select id="colorSelection" onchange="updateBorder()">
</select> <option value="white">White</option>
</select>
</span>
<br/> <br/>
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxSecondColor" onchange="updateBorder()" /> <input type="checkbox" id="checkboxSecondColor" onchange="updateBorder()" />
<label for="checkboxSecondColor" /> <label for="checkboxSecondColor" />
<div>Second Color</div> <div>Second Color</div>
</div> </div>
<select class="input" id="secondColorSelection" onchange="updateBorder()"></select> <span class="dropdown">
<select id="secondColorSelection" onchange="updateBorder()"></select>
</span>
<br/> <br/>
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxThirdColor" onchange="updateBorder()" /> <input type="checkbox" id="checkboxThirdColor" onchange="updateBorder()" />
<label for="checkboxThirdColor" /> <label for="checkboxThirdColor" />
<div>Third Color</div> <div>Third Color</div>
</div> </div>
<select class="input" id="thirdColorSelection" onchange="updateBorder()"></select> <span class="dropdown">
<select id="thirdColorSelection" onchange="updateBorder()"></select>
</span>
<br/> <br/>
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxCreature" /> <input type="checkbox" id="checkboxCreature" />
@@ -94,15 +89,17 @@
<label for="checkboxFlipIcon" /> <label for="checkboxFlipIcon" />
<div>Flip Icon</div> <div>Flip Icon</div>
</div> </div>
<select class="input" id="inputFlipIcon" onchange="updateBorder()"> <span class="dropdown">
<option value="blank.png">Blank</option> <select id="inputFlipIcon" onchange="updateBorder()">
<option value="day.png">Day</option> <option value="blank.png">Blank</option>
<option value="night.png">Night</option> <option value="day.png">Day</option>
<option value="compass.png">Compass</option> <option value="night.png">Night</option>
<option value="moon.png">Moon</option> <option value="compass.png">Compass</option>
<option value="eldrazi.png">Eldrazi</option> <option value="moon.png">Moon</option>
<option value="planeswalker.png">Planeswalker</option> <option value="eldrazi.png">Eldrazi</option>
</select> <option value="planeswalker.png">Planeswalker</option>
</select>
</span>
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxFlipTip" onchange="updateBorder()" /> <input type="checkbox" id="checkboxFlipTip" onchange="updateBorder()" />
<label for="checkboxFlipTip" /> <label for="checkboxFlipTip" />
@@ -244,22 +241,26 @@
<br/> <br/>
Watermark Color Watermark Color
<br/> <br/>
<select class="input" id="watermarkColorSelection"> <span class="dropdown">
<option value="#afa360">White</option> <select id="watermarkColorSelection">
<option value="#04527c">Blue</option> <option value="#afa360">White</option>
<option value="#494949">Black</option> <option value="#04527c">Blue</option>
<option value="#a3280d">Red</option> <option value="#494949">Black</option>
<option value="#0f4f14">Green</option> <option value="#a3280d">Red</option>
<option value="#7f5f00">Gold</option> <option value="#0f4f14">Green</option>
<option value="#616b72">Artifact/Colorless</option> <option value="#7f5f00">Gold</option>
</select> <option value="#616b72">Artifact/Colorless</option>
</select>
</span>
<br/> <br/>
<div class="checkbox"> <div class="checkbox">
<input type="checkbox" id="checkboxSecondWatermarkColor" /> <input type="checkbox" id="checkboxSecondWatermarkColor" />
<label for="checkboxSecondWatermarkColor" /> <label for="checkboxSecondWatermarkColor" />
<div>Second Watermark Color</div> <div>Second Watermark Color</div>
</div> </div>
<select class="input" id="secondWatermarkColorSelection"></select></input> <span class="dropdown">
<select id="secondWatermarkColorSelection"></select></input>
</span>
</div> </div>
</div> </div>
<div class="section"> <div class="section">
@@ -335,6 +336,7 @@
--hover-text-color: rgb(100, 200, 50); /*HOVER*/ --hover-text-color: rgb(100, 200, 50); /*HOVER*/
--section-background-color: rgba(0, 0, 0, 0.5); /*BACKGROUND*/ --section-background-color: rgba(0, 0, 0, 0.5); /*BACKGROUND*/
--section-border-color: rgba(128, 255, 128, 0.25); /*BORDER*/ --section-border-color: rgba(128, 255, 128, 0.25); /*BORDER*/
--solid-border-color: rgb(39, 71, 39); /*Opaque Border*/
} }
/*Applies to most elements (with rows and columns)*/ /*Applies to most elements (with rows and columns)*/
* { * {
@@ -424,6 +426,35 @@ input[type="color"] {
top: -8px; top: -8px;
left: 18px; left: 18px;
} }
/* Custom select box (dropdown)*/
.dropdown {
position: relative;
display: inline-block;
width: 100%;
padding: 0px;
}
.dropdown select {
width: inherit;
background-color: var(--section-border-color);
color: var(--title-text-color);
border: none;
-moz-appearance: none;
-webkit-appearance:none;
appearance: none;
}
.dropdown select option {
color: var(--title-text-color);
background-color: var(--solid-border-color);
}
.dropdown::after {
content: "\25BC";
font-size: 10px;
position: absolute;
pointer-events: none;
color: var(--title-text-color);
right: 3%;
top: 38%;
}
/*List of all mana symbols and their associated codes*/ /*List of all mana symbols and their associated codes*/
#symbolList img { #symbolList img {
padding: 0px; padding: 0px;
@@ -438,11 +469,6 @@ input[type="color"] {
color: var(--title-text-color); color: var(--title-text-color);
font-family: belerenbsc; font-family: belerenbsc;
font-size: 60px; font-size: 60px;
position: sticky;
top: 0px;
z-index: 1;
background-color: var(--section-background-color);
border: 1px solid var(--section-border-color);
} }
.info, .info * { .info, .info * {
color: var(--dark-text-color); color: var(--dark-text-color);