mirror of
https://github.com/Investigamer/cardconjurer.git
synced 2025-07-26 21:04:58 -05:00
style
This commit is contained in:
Kyle
98
index.html
98
index.html
@@ -263,7 +263,7 @@
|
||||
<div class="cmm" id="cmm-text">
|
||||
Rules Text
|
||||
<br>
|
||||
<textarea id="inputText" class="input" rows="5" cols="40" style="width: 100%; resize: none; height: 200px"></textarea>
|
||||
<textarea id="inputText" class="input" rows="5" cols="40" style="width: 100%; resize: none; height: 200px" placeholder="Remember to include curly brackets ('{' and '}') around each code. To skip to the next line use {line}. See 'Mana Symbols' and 'Other Codes' (below) for more information."></textarea>
|
||||
<br>
|
||||
Rules Text Font Size
|
||||
<input id="textSize" type="number" class="input" min="0" max="100" value="37" step="0.5">
|
||||
@@ -443,10 +443,10 @@
|
||||
<div class="text">
|
||||
Donate?
|
||||
</div>
|
||||
<div class="paragraph" style="margin-bottom: 0.5em">
|
||||
<div class="paragraph">
|
||||
I hope that you found Card Conjurer useful! If you did, you can help me out tremendously by making a small donation or using a referral link... Or you can check out my friend's youtube channel: Izzet Right?
|
||||
</div>
|
||||
<div class="grid donateGrid">
|
||||
</div><br>
|
||||
<div class="grid donateGrid selectionGrid">
|
||||
<div onclick="window.open('https://www.paypal.me/kyleburtondonate', '_blank');" style="color:rgb(0,37,134);">PayPal<img src="images/paypal.png"></img></div>
|
||||
<div onclick="window.open('https://www.patreon.com/KyleBurton', '_blank');" style="color:rgb(255,89,0);">Patreon<img src="images/patreon.png"></img></div>
|
||||
<div onclick="window.open('https://pucatrade.com/invite/gift/186748', '_blank');" style="color:rgb(61,33,58);">PucaTrade<img src="images/pucatrade.png"></img></div>
|
||||
@@ -459,13 +459,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="extras" id="extras-symbolList">
|
||||
Each of the following codes must include '<' before each code and '>' after. These codes aren't caps sensitive.
|
||||
Each of the following codes must include '{' before each code and '}' after. These codes aren't caps sensitive.
|
||||
<div class="symbolGrid grid" id="symbolList">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="extras" id="extras-codes">
|
||||
Like the mana symbols, each of the following codes must include '<' before each code and '>' after. These codes are caps sensitive.<br>
|
||||
Like the mana symbols, each of the following codes must include '{' before each code and '}' after. These codes are caps sensitive.<br>
|
||||
• line → Skips to the next line<br>
|
||||
• bar → Just like line, except adds the bar that usually seperates flavor text<br>
|
||||
• lineNoSpace → Just like line, except stays closer to the previous line<br>
|
||||
@@ -546,7 +546,7 @@
|
||||
--color-c: #095700;
|
||||
--color-d: #0e720040; /*0e720040*/
|
||||
--color-e: #0e7200;
|
||||
--color-gray: #00000060;
|
||||
--color-gray: #0002;
|
||||
}
|
||||
|
||||
/*Page-wide styling*/
|
||||
@@ -554,7 +554,7 @@
|
||||
font-family: belerenb;
|
||||
font-size: 6vw;
|
||||
user-select: none;
|
||||
color: #ddd;
|
||||
color: #eee;
|
||||
}
|
||||
html {
|
||||
background: url("images/background.png") no-repeat center center fixed;
|
||||
@@ -563,51 +563,53 @@ html {
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*Grid styling*/
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-gap: 3px;
|
||||
grid-gap: 4px;
|
||||
}
|
||||
.mainGrid {
|
||||
grid-gap: 0px 4px;
|
||||
grid-gap: 0px 0px;
|
||||
}
|
||||
.mainGrid > div, body, footer, .title {
|
||||
border: 3px solid var(--color-a);
|
||||
}
|
||||
.canvasContainer {
|
||||
justify-self: center;
|
||||
text-align: center;
|
||||
background-color: var(--color-b) !important;
|
||||
width: calc(100% - 18px);
|
||||
}
|
||||
.selectionGrid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
|
||||
text-align: center;
|
||||
}
|
||||
.grid > div {
|
||||
padding: 8px;
|
||||
border-radius: 36px;
|
||||
/*margin: 5px 5px 5px 0px;*/
|
||||
padding: 4px;
|
||||
}
|
||||
.grid > div:not(.noBorder) {
|
||||
border: 5px solid var(--color-d);
|
||||
background: var(--color-d);
|
||||
}
|
||||
.mainGrid > div {
|
||||
background: var(--color-gray) !important;
|
||||
background: var(--color-gray);
|
||||
}
|
||||
|
||||
/*Card manipulation menu grid*/
|
||||
.selectionGrid > div {
|
||||
font-family: belerenbsc;
|
||||
cursor: pointer;
|
||||
border-radius: 36px;
|
||||
border: 4px solid var(--color-d);
|
||||
background-color: #0008 !important;
|
||||
}
|
||||
.selectionGrid > div:hover {
|
||||
background: var(--color-c);
|
||||
border-color: var(--color-c);
|
||||
}
|
||||
/*.selectionGrid > div:nth-child(odd) {
|
||||
|
||||
}*/
|
||||
.cardManipulationMenu, .extrasMenu {
|
||||
margin-top: 4px;
|
||||
padding: 24px;
|
||||
border-radius: 36px;
|
||||
border: 2px solid var(--color-d);
|
||||
border: 4px solid var(--color-d);
|
||||
background-color: var(--color-gray);
|
||||
}
|
||||
.cmm, .extras {
|
||||
@@ -631,7 +633,7 @@ html {
|
||||
border-radius: 0.25em;
|
||||
padding-left: 0.25em;
|
||||
width: inherit;
|
||||
background-color: var(--color-c);
|
||||
background-color: var(--color-a);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
-moz-appearance: none;
|
||||
@@ -663,7 +665,7 @@ html {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background: var(--color-c);
|
||||
background: var(--color-a);
|
||||
cursor: pointer;
|
||||
}
|
||||
.checkbox input:checked ~ label:after {
|
||||
@@ -689,7 +691,7 @@ html {
|
||||
input[type="text"], input[type="number"], textarea, input[type="file"] {
|
||||
width: 100%;
|
||||
border: none;
|
||||
background: var(--color-c);
|
||||
background: var(--color-a);
|
||||
border-radius: 0.25em;
|
||||
padding-left: 0.25em;
|
||||
}
|
||||
@@ -697,7 +699,7 @@ input[type="text"], input[type="number"], textarea, input[type="file"] {
|
||||
input[type="color"] {
|
||||
padding: 0px;
|
||||
border: none;
|
||||
background: var(--color-c);
|
||||
background: var(--color-a);
|
||||
}
|
||||
|
||||
/*Hyperlinks*/
|
||||
@@ -710,6 +712,9 @@ a:hover, a:active {
|
||||
|
||||
/*Desktop*/
|
||||
@media only screen and (min-width: 1130px) {
|
||||
.canvasContainer {
|
||||
width: auto;
|
||||
}
|
||||
.mainGrid:not(.plane) {
|
||||
grid-template-columns: calc(749px + 0.7em) auto;
|
||||
}
|
||||
@@ -746,33 +751,38 @@ a:hover, a:active {
|
||||
}
|
||||
|
||||
/*Text and stuff :)*/
|
||||
.info, .title {
|
||||
text-align: center;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
.info > * {
|
||||
font-size: inherit;
|
||||
}
|
||||
.info {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
/*Title*/
|
||||
.title > img {
|
||||
max-height: 80px;
|
||||
width: auto;
|
||||
}
|
||||
.title, .info {
|
||||
text-align: center;
|
||||
background-color: black;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/*symbol grid*/
|
||||
.manaSymbol > img {
|
||||
position: relative;
|
||||
top: 0.15em;
|
||||
height: 1em;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
.symbolGrid {
|
||||
margin-top: 8px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(3.5em, 1fr));
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*Title*/
|
||||
.title > img {
|
||||
margin-bottom: 20px;
|
||||
margin-top: 0px;
|
||||
max-height: 80px;
|
||||
width: auto;
|
||||
.symbolGrid > div {
|
||||
border: 4px solid var(--color-a);
|
||||
border-radius: 36px;
|
||||
background-color: var(--color-d) !important;
|
||||
}
|
||||
|
||||
/*Sitewide text (bottom of the page)*/
|
||||
@@ -785,17 +795,11 @@ a:hover, a:active {
|
||||
/*Donation buttons!*/
|
||||
.donateGrid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(13em, 1fr));
|
||||
text-align: center;
|
||||
}
|
||||
.donateGrid.grid > div {
|
||||
background: black;
|
||||
font-size: 1.7em;
|
||||
cursor: pointer;
|
||||
padding: 0px;
|
||||
}
|
||||
.donateGrid.grid > div:hover {
|
||||
background: var(--color-b);
|
||||
}
|
||||
.donateGrid > div > img {
|
||||
position: relative;
|
||||
top: 0.25em;
|
||||
|
||||
Reference in New Issue
Block a user