-
Set Abbreviations
-
+
-
-
-
Choosing Your Border
-
+
-
- Check out some samples!
-
![]()
-
![]()
-
![]()
+
+
+ Check out some samples
+
-
-
-
+
@@ -399,78 +377,116 @@
font-family: mplantini;
src: url("data/fonts/mplantin-i.ttf");
}
+
/*Color Palette*/
:root {
- --title-text-color: rgb(100, 200, 50); /*TITLE*/
- --main-text-color: rgb(150, 150, 150); /*REGULAR*/
- --input-text-color: rgb(100, 200, 50); /*INPUTS*/
- --dark-text-color: rgb(96, 96, 96); /*DARK*/
- --section-background-color: rgba(0, 0, 0, 0.5); /*BACKGROUND*/
- --section-border-color: rgba(128, 255, 128, 0.25); /*BORDER*/
- --solid-border-color: rgb(39, 71, 39); /*Opaque Border*/
+ /*Green*/
+ /*--color-a: #13c800;
+ --color-b: #13c80080;
+ --color-c: #034e10;
+ --color-d: #013d0b80;
+ --color-e: #013d0b;*/
+ /*Regular*/
+ --color-a: #073c00;
+ --color-b: #073c0040;
+ --color-c: #095700;
+ --color-d: #0e720040;
+ --color-e: #0e7200;
}
-/*General style things*/
+
+/*Page-wide styling*/
* {
- text-align: center;
font-family: belerenb;
- font-size: 5vw;
- color: var(--main-text-color);
+ font-size: 6vw;
user-select: none;
- box-sizing: border-box;
+ color: #dddddd;
}
html {
- background-color: rgb(16, 16, 16);
+ /*background: linear-gradient(#252522, #101010) no-repeat center center fixed;*/
+ background: url("data/background.png") no-repeat center center fixed;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
}
-/*Applies to most elements (with rows and columns)*/
-.row::after{
- content: "";
- display: block;
- clear: both;
+
+/*Grid styling*/
+.grid {
margin-bottom: 5px;
+ display: grid;
+ grid-gap: 4px;
}
-[class*="column-"] {
- width: 100%;
- float: left;
- padding: 5px;
+.mainGrid {
+ grid-gap: 12px;
}
-/*Style for sections, togglers, and togglees*/
-.section {
- border: 0.04em solid var(--section-border-color);
- background-color: var(--section-background-color);
- width: 100%;
+.selectionGrid {
+ grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
+ text-align: center;
}
-.toggler:hover {
- color: var(--title-text-color);
+.grid > div {
+ padding: 8px;
+ border-radius: 36px;
}
-.togglee {
- text-align: left;
- border-width: 0.04em;
- border-color: var(--section-border-color);
- border-style: dashed solid solid solid;
+.grid > div:not(.noBorder) {
+ border: 1px solid var(--color-c);
+ background: var(--color-d);
+}
+
+/*Card manipulation menu grid*/
+.selectionGrid > div {
+ font-family: belerenbsc;
+ cursor: pointer;
+}
+.selectionGrid > div:nth-child(odd) {
+ background-color: var(--color-c);
+}
+.cardManipulationMenu, .extrasMenu {
+ margin-top: 4px;
+ padding: 24px;
+ border-radius: 36px;
+ border: 1px solid var(--color-c);
+ background-color: var(--color-b);
+}
+.cmm, .extras {
display: none;
- padding: 5px;
}
.shown {
display: block;
}
-/*Specific input element styles*/
-.input {
- border-radius: 0.25em;
- padding-left: 0.25em;
- text-align: left;
- border: none;
- background-color: var(--section-border-color);
- color: var(--input-text-color);
+.sampleCard {
width: 100%;
}
-input[type="color"] {
- border-radius: 0.25em;
- border: none;
- background-color: var(--section-border-color);
- padding-top: 0px;
- padding-bottom: 0px;
+
+/*Inputs and more*/
+/*dropdown*/
+.dropdown {
+ position: relative;
+ display: inline-block;
+ width: 100%;
}
-/*Custom checkboxes!*/
+.dropdown select {
+ border-radius: 0.25em;
+ padding-left: 0.25em;
+ width: inherit;
+ background-color: var(--color-e);
+ border: none;
+ cursor: pointer;
+ -moz-appearance: none;
+ -webkit-appearance:none;
+ appearance: none;
+}
+.dropdown select option {
+ /*nothing for now :)*/
+}
+.dropdown::after {
+ content: "\25BC";
+ font-size: 0.6em;
+ position: absolute;
+ pointer-events: none;
+ right: 0.6em;
+ top: 0.6em;
+}
+/*checkbox*/
.checkbox {
height: 1em;
margin: 5px 0px;
@@ -484,11 +500,18 @@ input[type="color"] {
position: absolute;
top: 0px;
left: 0px;
- z-index: 1;
- background: var(--section-border-color);
+ background: var(--color-d);
+ cursor: pointer;
}
-.checkbox input[type=checkbox]:checked + label {
- background: var(--title-text-color);
+.checkbox input:checked ~ label:after {
+ display: block;
+}
+.checkbox label:after {
+ content: "X";
+ position: absolute;
+ display: none;
+ left: 0.2em;
+ top: -0.05em;
}
.checkbox input {
opacity: 0;
@@ -499,111 +522,90 @@ input[type="color"] {
top: -0.1em;
left: 1.1em;
}
-/*Custom select box (dropdown)*/
-.dropdown {
- position: relative;
- display: inline-block;
+/*other inputs*/
+input[type="text"], input[type="number"], textarea, input[type="file"] {
width: 100%;
-}
-.dropdown select {
+ border: none;
+ background: var(--color-e);
border-radius: 0.25em;
padding-left: 0.25em;
- width: inherit;
- background-color: var(--section-border-color);
- color: var(--title-text-color);
+}
+/*color selector*/
+input[type="color"] {
+ padding: 0px;
border: none;
- -moz-appearance: none;
- -webkit-appearance:none;
- appearance: none;
-}
-.dropdown select option {
- border-radius: 0.25em;
- color: var(--title-text-color);
- background-color: var(--solid-border-color);
-}
-.dropdown::after {
- content: "\25BC";
- font-size: 0.5em;
- position: absolute;
- pointer-events: none;
- color: var(--title-text-color);
- right: 0.65em;
- top: 0.65em;
-}
-/*List of all mana symbols and their associated codes*/
-#symbolList img {
- position: relative;
- top: 0.25em;
- height: 1.2em;
-}
-#symbolList div {
- float: left;
- width: 5.5em;
-}
-/*Other*/
-.title {
- text-align: center;
- color: var(--title-text-color);
- font-family: belerenbsc;
- font-size: 60px;
-}
-.info {
- color: var(--dark-text-color);
- font-family: belerenbsc;
- font-size: 0.75rem;
+ background: var(--color-d);
}
+
/*Hyperlinks*/
-a:link {
- color: var(--main-text-color);
- background-color: rgba(100, 200, 0, 0.1);
- border-radius: 0.25em;
+a:link, a:visited {
+ color: #fff;
}
-a:visited {
- color: var(--main-text-color);
-}
-a:hover {
- color: var(--title-text-color);
-}
-a:active {
- color: var(--title-text-color);
-}
-.column-2 {
- margin-bottom: 20px;
-}
-/*Adjustments For Desktop*/
-@media only screen and (orientation: landscape) {
- .column-3 {width: 33.33%;}
+a:hover, a:active {
+ color: #999;
}
+
+/*Desktop*/
@media only screen and (min-width: 1130px) {
- /*The card manipulator menu can be side-by-side with the regular card*/
- .column-1:not(.wide) {width: auto;}
- .column-2:not(.wide) {
- width: calc(100% - 759px);
- margin-bottom: 0px;
+ .mainGrid:not(.plane) {
+ grid-template-columns: calc(749px + 0.7em) auto;
}
}
@media only screen and (min-width: 1455px) {
- /*The card manipulator menu can be side-by-side with the wide card*/
- .column-1.wide {width: auto;}
- .column-2.wide {
- width: calc(100% - 1084px);
- margin-bottom: 0px;
+ .mainGrid.plane {
+ grid-template-columns: calc(1074px + 0.7em) auto;
+ }
+}
+@media only screen and (orientation: landscape) {
+ .sampleCard {
+ width: 32.8%;
}
}
@media only screen and (min-width: 801px) {
html {
- background:url(data/background.png) no-repeat center center fixed;
- -webkit-background-size: cover;
- -moz-background-size: cover;
- -o-background-size: cover;
- background-size: cover;
+ /*background*/
}
* {
- font-size: 25px;
- cursor: url(images/cursor.png), auto;
+ font-size: 24px;
}
}
+
+/*Text and stuff :)*/
+.info, .title {
+ text-align: center;
+ font-size: 0.75em;
+}
+.info > * {
+ font-size: inherit;
+}
+
+/*symbol grid*/
+.manaSymbol > img {
+ position: relative;
+ top: 0.15em;
+ height: 1em;
+}
+.symbolGrid {
+ margin-top: 8px;
+ grid-template-columns: repeat(auto-fit, minmax(5.6em, 1fr));
+ text-align: center;
+}
+
+/*Title*/
+.title > img {
+ margin-bottom: 20px;
+ margin-top: 0px;
+ max-height: 80px;
+ width: auto;
+}
+
+/*Sitewide text (bottom of the page)*/
+.text {
+ text-align: center;
+}
+
+
@@ -612,3 +614,11 @@ a:active {
+
\ No newline at end of file
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
and shifts the following text to the right. This is designed for planar cards.
+