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