mirror of
https://github.com/Investigamer/cardconjurer.git
synced 2025-07-27 05:14:53 -05:00
css magic
This commit is contained in:
@@ -6,7 +6,7 @@
|
|||||||
//============================================//
|
//============================================//
|
||||||
//The following bits of code are run immediatly to initialize the program while allowing the variables to remain global.
|
//The following bits of code are run immediatly to initialize the program while allowing the variables to remain global.
|
||||||
//Setup viewport!
|
//Setup viewport!
|
||||||
var minimumWidth = 769
|
var minimumWidth = 783
|
||||||
var viewport = document.createElement("meta")
|
var viewport = document.createElement("meta")
|
||||||
viewport.setAttribute("name", "viewport")
|
viewport.setAttribute("name", "viewport")
|
||||||
if (screen.width < minimumWidth) {
|
if (screen.width < minimumWidth) {
|
||||||
@@ -105,6 +105,13 @@ randomizeSampleCards(7)
|
|||||||
//Set up the initial clock!
|
//Set up the initial clock!
|
||||||
var cardClockInterval = setInterval(cardClock, 1000 / document.getElementById("inputFPS").value)
|
var cardClockInterval = setInterval(cardClock, 1000 / document.getElementById("inputFPS").value)
|
||||||
|
|
||||||
|
//It's easier to generate the mana symbol list via js, so do it here
|
||||||
|
var symbolList = ""
|
||||||
|
for (var i = 0; i < manaSymbolCode.length; i++) {
|
||||||
|
symbolList += "<div class='column-4' style='width: auto'>" + manaSymbolCode[i] + "\u2192" + "<img src=" + manaSymbolImages[i].src + "></img></div>"
|
||||||
|
}
|
||||||
|
document.getElementById("symbolList").innerHTML = symbolList
|
||||||
|
|
||||||
|
|
||||||
//============================================//
|
//============================================//
|
||||||
// Card clock and changing frames! //
|
// Card clock and changing frames! //
|
||||||
@@ -166,7 +173,6 @@ function finishTemplate() {
|
|||||||
canvas.height = cardHeight
|
canvas.height = cardHeight
|
||||||
borderCanvas.width = cardWidth
|
borderCanvas.width = cardWidth
|
||||||
borderCanvas.height = cardHeight
|
borderCanvas.height = cardHeight
|
||||||
resizeThings()
|
|
||||||
document.getElementById("colorSelection").value = "white"
|
document.getElementById("colorSelection").value = "white"
|
||||||
imgMultiMask.src = borderPath + "multiMask.png"
|
imgMultiMask.src = borderPath + "multiMask.png"
|
||||||
imgFrameMask.src = borderPath + "frameMask.png"
|
imgFrameMask.src = borderPath + "frameMask.png"
|
||||||
@@ -740,21 +746,6 @@ function toggleSection(target) {
|
|||||||
}
|
}
|
||||||
target.parentElement.childNodes[3].classList.toggle("shown")
|
target.parentElement.childNodes[3].classList.toggle("shown")
|
||||||
}
|
}
|
||||||
//Resizes anything that may need to be resized
|
|
||||||
function resizeThings() {
|
|
||||||
var symbolList = ""
|
|
||||||
var rowCount = Math.ceil(manaSymbolCode.length / Math.floor((window.innerWidth - 30) / 150))
|
|
||||||
for (var i = 0; i < manaSymbolCode.length; i++) {
|
|
||||||
if (i%rowCount == 0) {
|
|
||||||
symbolList += "<div class='column-4' style='width: 150px'>"
|
|
||||||
}
|
|
||||||
symbolList += manaSymbolCode[i] + "\u2192" + "<img src=" + manaSymbolImages[i].src + "></img><br/>"
|
|
||||||
if (i%rowCount == rowCount - 1) {
|
|
||||||
symbolList += "</div>"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
document.getElementById("symbolList").innerHTML = symbolList
|
|
||||||
}
|
|
||||||
//Randomizes the sample cards at the bottom of the page. Runs it here too
|
//Randomizes the sample cards at the bottom of the page. Runs it here too
|
||||||
function randomizeSampleCards(count) {
|
function randomizeSampleCards(count) {
|
||||||
var cardNumbers = []
|
var cardNumbers = []
|
||||||
|
67
index.html
67
index.html
@@ -24,7 +24,7 @@
|
|||||||
<meta name="theme-color" content="#64ca2f">
|
<meta name="theme-color" content="#64ca2f">
|
||||||
</head>
|
</head>
|
||||||
<!-- <img src="data/background.png"></img> -->
|
<!-- <img src="data/background.png"></img> -->
|
||||||
<body onresize="resizeThings()" onload="resizeThings()">
|
<body>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="column-1"><canvas id="canvas" width="749" height="1044"></canvas></div>
|
<div class="column-1"><canvas id="canvas" width="749" height="1044"></canvas></div>
|
||||||
<div class="column-2" id="optionsColumn">
|
<div class="column-2" id="optionsColumn">
|
||||||
@@ -173,7 +173,7 @@
|
|||||||
Shift All Text Down
|
Shift All Text Down
|
||||||
<input id="textDown" type="number" class="input" min="0" max="300" value="0"></input>
|
<input id="textDown" type="number" class="input" min="0" max="300" value="0"></input>
|
||||||
<br/>
|
<br/>
|
||||||
Shift All Mana Symbols Down
|
Shift Mana Symbols Down
|
||||||
<input id="inputSymbolDown" type="number" class="input" value="0"></input>
|
<input id="inputSymbolDown" type="number" class="input" value="0"></input>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -372,7 +372,7 @@
|
|||||||
--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*/
|
--solid-border-color: rgb(39, 71, 39); /*Opaque Border*/
|
||||||
}
|
}
|
||||||
/*Applies to most elements (with rows and columns)*/
|
/*General style things*/
|
||||||
* {
|
* {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-family: belerenb;
|
font-family: belerenb;
|
||||||
@@ -381,20 +381,23 @@
|
|||||||
user-select: none;
|
user-select: none;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
/*Applies to most elements (with rows and columns)*/
|
||||||
.row::after{
|
.row::after{
|
||||||
content: "";
|
content: "";
|
||||||
display: block;
|
display: block;
|
||||||
clear: both;
|
clear: both;
|
||||||
|
margin-bottom: 5px;
|
||||||
}
|
}
|
||||||
[class*="column-"] {
|
[class*="column-"] {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
float: left;
|
float: left;
|
||||||
padding: 0.2em;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
/*Style for sections, togglers, and togglees*/
|
/*Style for sections, togglers, and togglees*/
|
||||||
.section {
|
.section {
|
||||||
border: 0.04em solid var(--section-border-color);
|
border: 0.04em solid var(--section-border-color);
|
||||||
background-color: var(--section-background-color);
|
background-color: var(--section-background-color);
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
.toggler:hover {
|
.toggler:hover {
|
||||||
color: var(--hover-text-color);
|
color: var(--hover-text-color);
|
||||||
@@ -412,6 +415,7 @@
|
|||||||
/*Specific input element styles*/
|
/*Specific input element styles*/
|
||||||
.input {
|
.input {
|
||||||
border-radius: 0.25em;
|
border-radius: 0.25em;
|
||||||
|
padding-left: 0.25em;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
border: none;
|
border: none;
|
||||||
background-color: var(--section-border-color);
|
background-color: var(--section-border-color);
|
||||||
@@ -419,7 +423,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
input[type="color"] {
|
input[type="color"] {
|
||||||
border-radius: 10px;
|
border-radius: 0.25em;
|
||||||
border: none;
|
border: none;
|
||||||
background-color: var(--section-border-color);
|
background-color: var(--section-border-color);
|
||||||
padding-top: 0px;
|
padding-top: 0px;
|
||||||
@@ -427,15 +431,15 @@ input[type="color"] {
|
|||||||
}
|
}
|
||||||
/*Custom checkboxes!*/
|
/*Custom checkboxes!*/
|
||||||
.checkbox {
|
.checkbox {
|
||||||
padding-top: 12px;
|
height: 1em;
|
||||||
top: 7px;
|
margin: 5px 0px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
.checkbox label {
|
.checkbox label {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 20px;
|
width: 1em;
|
||||||
height: 20px;
|
height: 1em;
|
||||||
border-radius: 33%;
|
border-radius: 0.25em;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
@@ -450,19 +454,19 @@ input[type="color"] {
|
|||||||
}
|
}
|
||||||
.checkbox div {
|
.checkbox div {
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
position: absolute;
|
position: relative;
|
||||||
top: -5px;
|
top: -0.1em;
|
||||||
left: 18px;
|
left: 1.1em;
|
||||||
}
|
}
|
||||||
/*Custom select box (dropdown)*/
|
/*Custom select box (dropdown)*/
|
||||||
.dropdown {
|
.dropdown {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0px;
|
|
||||||
}
|
}
|
||||||
.dropdown select {
|
.dropdown select {
|
||||||
border-radius: 10px;
|
border-radius: 0.25em;
|
||||||
|
padding-left: 0.25em;
|
||||||
width: inherit;
|
width: inherit;
|
||||||
background-color: var(--section-border-color);
|
background-color: var(--section-border-color);
|
||||||
color: var(--title-text-color);
|
color: var(--title-text-color);
|
||||||
@@ -472,25 +476,24 @@ input[type="color"] {
|
|||||||
appearance: none;
|
appearance: none;
|
||||||
}
|
}
|
||||||
.dropdown select option {
|
.dropdown select option {
|
||||||
border-radius: 10px;
|
border-radius: 0.25em;
|
||||||
color: var(--title-text-color);
|
color: var(--title-text-color);
|
||||||
background-color: var(--solid-border-color);
|
background-color: var(--solid-border-color);
|
||||||
}
|
}
|
||||||
.dropdown::after {
|
.dropdown::after {
|
||||||
content: "\25BC";
|
content: "\25BC";
|
||||||
font-size: 10px;
|
font-size: 0.5em;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
color: var(--title-text-color);
|
color: var(--title-text-color);
|
||||||
right: 10px;
|
right: 0.65em;
|
||||||
top: 38%;
|
top: 0.65em;
|
||||||
}
|
}
|
||||||
/*List of all mana symbols and their associated codes*/
|
/*List of all mana symbols and their associated codes*/
|
||||||
#symbolList img {
|
#symbolList img {
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 0.25em;
|
top: 0.25em;
|
||||||
width: 1.2em;
|
height: 1.2em;
|
||||||
/*padding: 0px 0px 0px 0px !important;*/
|
|
||||||
}
|
}
|
||||||
/*Other*/
|
/*Other*/
|
||||||
.title {
|
.title {
|
||||||
@@ -525,22 +528,14 @@ a:active {
|
|||||||
color: var(--hover-text-color);
|
color: var(--hover-text-color);
|
||||||
}
|
}
|
||||||
/*Adjustments For Desktop*/
|
/*Adjustments For Desktop*/
|
||||||
@media only screen and (min-width: 850px) {
|
/*Chrome's JS Debugger gives a width 1.1 times greater than it should be*/
|
||||||
/*Nothing for now :)*/
|
@media only screen and (orientation: landscape) {
|
||||||
|
.column-3 {width: 33.33%;}
|
||||||
}
|
}
|
||||||
@media only screen and (min-width: 1150px) {
|
@media only screen and (min-width: 1130px) {
|
||||||
.column-1 {
|
/*The card manipulator menu can be side-by-side with the card*/
|
||||||
width: 769px;
|
.column-1 {width: 769px;}
|
||||||
}
|
.column-2 {width: calc(100% - 769px);}
|
||||||
.column-2 {
|
|
||||||
width: calc(100% - 769px);
|
|
||||||
}
|
|
||||||
.column-3 {
|
|
||||||
width: 33.33%;
|
|
||||||
}
|
|
||||||
.column-4 {
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script src="data/scripts/loadScript.js"></script>
|
<script src="data/scripts/loadScript.js"></script>
|
||||||
|
Reference in New Issue
Block a user