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

asthetics

Browse Source
This commit is contained in:
Kyle
2018-12-01 13:52:04 -08:00
parent dbaf0a6c1f
commit 39aa2d88df
1 changed files with 34 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
index.html
View File

@@ -30,7 +30,7 @@
<div class="canvasContainer">
<canvas id="canvas" width="749" height="1044"></canvas>
</div>
<div>
<div class="cmmArea">
<div class="grid selectionGrid">
<div onclick="toggleView('color', 'cmm')">Color</div>
<div onclick="toggleView('general', 'cmm')">General</div>
@@ -40,8 +40,8 @@
<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 onclick="toggleView('planeswalker', 'cmm')" style="font-size: 85%; display: none;" id="cmmPlaneswalker">Planeswalker</div>
</div>
<div class="cardManipulationMenu">
<div class="cmm shown" id="cmm-color">
@@ -339,9 +339,7 @@
</div>
</div>
</div>
</div>
<div class="grid">
<div>
<div class="tutorialArea">
<div class="grid selectionGrid">
<div onclick="toggleView('symbolList', 'extras')">Symbols</div>
<div onclick="toggleView('codes', 'extras')">Other Codes</div>
@@ -433,10 +431,11 @@
:root {
/*Regular*/
--color-a: #073c00;
--color-b: #073c0040;
--color-b: #073c0040; /*073c0040*/
--color-c: #095700;
--color-d: #0e720040;
--color-d: #0e720040; /*0e720040*/
--color-e: #0e7200;
--color-gray: #00000080;
}
/*Page-wide styling*/
@@ -456,12 +455,11 @@ html {
/*Grid styling*/
.grid {
margin-bottom: 5px;
display: grid;
grid-gap: 4px;
grid-gap: 3px;
}
.mainGrid {
grid-gap: 12px;
grid-gap: 0px 4px;
}
.canvasContainer {
justify-self: center;
@@ -473,20 +471,27 @@ html {
.grid > div {
padding: 8px;
border-radius: 36px;
/*margin: 5px 5px 5px 0px;*/
}
.grid > div:not(.noBorder) {
border: 1px solid var(--color-c);
border: 5px solid var(--color-d);
background: var(--color-d);
}
.mainGrid > div {
background: var(--color-gray) !important;
}
/*Card manipulation menu grid*/
.selectionGrid > div {
font-family: belerenbsc;
cursor: pointer;
}
.selectionGrid > div:nth-child(odd) {
background-color: var(--color-c);
.selectionGrid > div:hover {
background-color: var(--color-c) !important;
}
/*.selectionGrid > div:nth-child(odd) {
}*/
.cardManipulationMenu, .extrasMenu {
margin-top: 4px;
padding: 24px;
@@ -515,7 +520,7 @@ html {
border-radius: 0.25em;
padding-left: 0.25em;
width: inherit;
background-color: var(--color-e);
background-color: var(--color-c);
border: none;
cursor: pointer;
-moz-appearance: none;
@@ -547,7 +552,7 @@ html {
position: absolute;
top: 0px;
left: 0px;
background: var(--color-e);
background: var(--color-c);
cursor: pointer;
}
.checkbox input:checked ~ label:after {
@@ -573,7 +578,7 @@ html {
input[type="text"], input[type="number"], textarea, input[type="file"] {
width: 100%;
border: none;
background: var(--color-e);
background: var(--color-c);
border-radius: 0.25em;
padding-left: 0.25em;
}
@@ -581,7 +586,7 @@ input[type="text"], input[type="number"], textarea, input[type="file"] {
input[type="color"] {
padding: 0px;
border: none;
background: var(--color-e);
background: var(--color-c);
}
/*Hyperlinks*/
@@ -597,6 +602,18 @@ a:hover, a:active {
.mainGrid:not(.plane) {
grid-template-columns: calc(749px + 0.7em) auto;
}
.tutorialArea {
grid-column: 1 / span 2;
}
.sampleGrid {
grid-column: 1 / span 2;
}
.mainGrid.plane > .cmmArea {
grid-column: 1 / span 2;
}
.mainGrid.plane > .canvasContainer {
grid-column: 1 / span 2;
}
}
@media only screen and (min-width: 1455px) {
.mainGrid.plane {