css magic

This commit is contained in:
Kyle
2018-11-09 16:55:29 -08:00
parent dec22d51b7
commit d24448ffdc
2 changed files with 40 additions and 54 deletions

View File

@@ -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 = []

View File

@@ -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>