forked from GithubMirrors/cardconjurer
544 lines
12 KiB
CSS
544 lines
12 KiB
CSS
/*fonts*/
|
|
@font-face {
|
|
font-family: gothammedium;
|
|
src: url("/data/fonts/gotham-medium.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: belerenb;
|
|
src: url("/data/fonts/beleren-b.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: belerenbsc;
|
|
src: url("/data/fonts/beleren-bsc.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: matrix;
|
|
src: url("/data/fonts/matrix.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: matrixb;
|
|
src: url("/data/fonts/matrix-b.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: matrixbsc;
|
|
src: url("/data/fonts/matrix-bsc.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: mplantin;
|
|
src: url("/data/fonts/mplantin.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: mplantini;
|
|
src: url("/data/fonts/mplantin-i.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: goudymedieval;
|
|
src: url("/data/fonts/goudy-medieval.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: phyrexian;
|
|
src: url("/data/fonts/phyrexian.ttf");
|
|
}
|
|
|
|
:root {
|
|
--site-background: #3a3838 url("/data/images/site/backgrounds/lowpolyDarkGreen.svg") left/cover no-repeat fixed;
|
|
--site-background-filter: none;
|
|
--layer-background: #242424 url("/data/images/site/backgrounds/lowpolyDarkGray.svg") left/cover no-repeat fixed;
|
|
--layer-background-selected: #1d1d1d;
|
|
--interactable-unselected: #666666;
|
|
--interactable-selected: #99ee99;
|
|
--font-color: #efefef;
|
|
--body-background: none;
|
|
}
|
|
|
|
html {
|
|
font: 12pt georgia;
|
|
color: var(--font-color);
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
|
|
}
|
|
html::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: var(--site-background);
|
|
filter: var(--site-background-filter);
|
|
/*transition: 2s;*/
|
|
z-index: -1;
|
|
}
|
|
html, body {
|
|
margin: 0;
|
|
border: 0;
|
|
padding: 0;
|
|
overflow-x: hidden;
|
|
}
|
|
body {
|
|
/*background: var(--body-background);*/
|
|
}
|
|
a {
|
|
font: inherit;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.adGrid {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
|
|
grid-auto-rows: min-content;
|
|
justify-items: center;
|
|
align-items: center;
|
|
margin: 1rem 0;
|
|
}
|
|
.adGrid > div {
|
|
width: 100%;
|
|
}
|
|
|
|
.interactable {
|
|
background: var(--layer-background);
|
|
border-top: 0.2rem solid var(--interactable-unselected);
|
|
cursor: pointer;
|
|
border-radius: 0.2rem;
|
|
transition: 0.25s;
|
|
position: relative;
|
|
top: 0;
|
|
}
|
|
.interactable.selected {
|
|
border-top-color: var(--interactable-selected);
|
|
background: var(--layer-background-selected);
|
|
}
|
|
.interactable:hover {
|
|
top: -0.25rem;
|
|
box-shadow: 0 0.25rem 0.5rem black;
|
|
}
|
|
|
|
.cardMaster {
|
|
margin: 0.9rem 0px;
|
|
}
|
|
.cardMasterElement {
|
|
font: 1rem belerenbsc;
|
|
margin-top: 0.25rem;
|
|
display: grid;
|
|
grid-template-columns: 2rem 4rem auto 2rem;
|
|
align-items: center;
|
|
}
|
|
.cardMasterElement > .handle {
|
|
cursor: move;
|
|
padding: 0.5rem;
|
|
text-align: center;
|
|
}
|
|
.cardMasterElement > div > img {
|
|
height: 2rem;
|
|
width: 2rem;
|
|
object-fit: contain;
|
|
}
|
|
.cardMasterElementMoving {
|
|
background: var(--layer-background-selected);
|
|
}
|
|
.cardMasterElement > .delete {
|
|
text-align: center;
|
|
}
|
|
|
|
.splitGrid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-gap: 0.25rem;
|
|
}
|
|
.autoGrid {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
|
|
grid-auto-rows: min-content;
|
|
grid-gap: 0.25rem;
|
|
}
|
|
.frameGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
|
|
grid-auto-rows: min-content;
|
|
grid-gap: 0.25rem;
|
|
}
|
|
img {
|
|
-webkit-user-drag: none;
|
|
-khtml-user-drag: none;
|
|
-moz-user-drag: none;
|
|
-o-user-drag: none;
|
|
user-drag: none;
|
|
}
|
|
#framePicker, #maskPicker {
|
|
margin-top: 0.25rem;
|
|
padding-top: 0.25rem;
|
|
margin-bottom: 0.25rem;
|
|
max-height: 260pt;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
#framePicker > div {
|
|
height: 3rem;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
#framePicker img {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
object-fit: contain;
|
|
}
|
|
#maskPicker img {
|
|
max-width: 1.5rem;
|
|
max-height: 1.5rem;
|
|
}
|
|
#maskPicker > div {
|
|
padding: 0.5rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
#textPicker {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
|
|
grid-auto-rows: min-content;
|
|
grid-gap: 0.25rem;
|
|
margin: 0.25rem 0px;
|
|
}
|
|
#textPicker > div {
|
|
font: 1rem belerenbsc;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
|
|
|
|
/*Hides anything*/
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
/*Overrides hiding custom uploaded frame images*/
|
|
.hidden.frameClassCustom {
|
|
display: inline-block;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.tabPicker {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(8.2rem, 1fr));
|
|
grid-auto-rows: min-content;
|
|
grid-gap: 0.25rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
.tabPicker > div {
|
|
font: 1.2rem belerenbsc;
|
|
text-align: center;
|
|
padding: 0.5rem 0;
|
|
}
|
|
|
|
/*Gives non-text inputs the pointer cursor*/
|
|
input:not([type='text']):not([type='number']), select, option, button {
|
|
cursor: pointer;
|
|
}
|
|
/*Styles most of the inputs, except checkboxes*/
|
|
input:not([type='checkbox']), textarea, button, select {
|
|
font: inherit;
|
|
color: inherit;
|
|
width: 100%;
|
|
outline: none;
|
|
border-style: solid none none none;
|
|
padding: 0.25rem;
|
|
margin-top: 0.25rem;
|
|
background: var(--layer-background);
|
|
border-top: 0.1rem solid var(--interactable-unselected);
|
|
border-radius: 0.1rem;
|
|
transition: 0.25s;
|
|
position: relative;
|
|
top: 0;
|
|
}
|
|
/*Slightly lifts inputs upon hovering over them*/
|
|
input:not([type='checkbox']):hover, textarea:hover, button:hover, select:hover {
|
|
top: -0.1rem;
|
|
box-shadow: 0 0.125rem 0.25rem black;
|
|
}
|
|
/*Shows that inputs that aren't checkboxes are in use*/
|
|
input:not([type='checkbox']):active, button:active, input:not([type='checkbox']):not([type='input']):focus, textarea:focus, select:active {
|
|
border-top-color: var(--interactable-selected);
|
|
}
|
|
/*Styles checboxes*/
|
|
input[type='checkbox'] {
|
|
position: relative;
|
|
top: 0.25rem;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
/*Allows resizing of the textarea*/
|
|
textarea {
|
|
resize: vertical;
|
|
min-height: 6rem;
|
|
max-height: 12rem;
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from {opacity: 0;}
|
|
to {opacity: 1;}
|
|
}
|
|
@keyframes slide-from-left {
|
|
0% {transform: translate(-100vw, 0);}
|
|
100% {transform: translate(0, 0);}
|
|
}
|
|
@keyframes slide-from-right {
|
|
0% {transform: translate(100vw, 0);}
|
|
100% {transform: translate(0, 0);}
|
|
}
|
|
|
|
.title {
|
|
text-align: center;
|
|
font: 2.5rem 'belerenbsc';
|
|
padding: 1rem !important;
|
|
}
|
|
.layer {
|
|
background: var(--layer-background);
|
|
}
|
|
.layer.clearLayer {
|
|
background: none;
|
|
}
|
|
.animated > div {
|
|
opacity: 0;
|
|
}
|
|
.animated.revealedAnimation > div {
|
|
opacity: 1;
|
|
}
|
|
.animated.revealedAnimation.fadeIn > div {
|
|
animation: fade-in 2s;
|
|
}
|
|
.animated.revealedAnimation.slideFromLeft > div {
|
|
animation: slide-from-left 0.8s;
|
|
}
|
|
.animated.revealedAnimation.slideFromRight > div {
|
|
animation: slide-from-right 0.8s;
|
|
}
|
|
|
|
|
|
|
|
.fiveSampleCards {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
|
margin-top: 1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
.fiveSampleCards > div > img {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
.fiveSampleCards > div {
|
|
transition: transform 0.5s;
|
|
}
|
|
/*.fiveSampleCards > div:hover {
|
|
z-index: 100;
|
|
transform: translate(0, -1em);
|
|
}*/
|
|
.animated.revealedAnimation > div > div > div > .sample1 {
|
|
animation: sample-one 2s;
|
|
transform: rotate(-10deg) translate(16%, 15%);
|
|
}
|
|
.animated.revealedAnimation > div > div > div > .sample2 {
|
|
animation: sample-two 2s;
|
|
transform: rotate(-5deg) translate(10%, 4%);
|
|
}
|
|
.animated.revealedAnimation > div > div > div > .sample4 {
|
|
animation: sample-four 2s;
|
|
transform: rotate(5deg) translate(-10%, 4%);
|
|
}
|
|
.animated.revealedAnimation > div > div > div > .sample5 {
|
|
animation: sample-five 2s;
|
|
transform: rotate(10deg) translate(-16%, 15%);
|
|
}
|
|
@keyframes sample-one {
|
|
0% {transform: rotate(0deg) translate(0, 0); position: relative; left: 200%;}
|
|
10% {transform: rotate(0deg) translate(0, 0); position: relative; left: 200%;}
|
|
100% {transform: rotate(-10deg) translate(16%, 15%); position: relative; left: 0;}
|
|
}
|
|
@keyframes sample-two {
|
|
0% {transform: rotate(0deg) translate(0, 0); position: relative; left: 100%;}
|
|
10% {transform: rotate(0deg) translate(0, 0); position: relative; left: 100%;}
|
|
100% {transform: rotate(-5deg) translate(10%, 4%); position: relative; left: 0;}
|
|
}
|
|
@keyframes sample-four {
|
|
0% {transform: rotate(0deg) translate(0, 0); position: relative; left: -100%;}
|
|
10% {transform: rotate(0deg) translate(0, 0); position: relative; left: -100%;}
|
|
100% {transform: rotate(5deg) translate(-10%, 4%); position: relative; left: 0;}
|
|
}
|
|
@keyframes sample-five {
|
|
0% {transform: rotate(0deg) translate(0, 0); position: relative; left: -200%;}
|
|
10% {transform: rotate(0deg) translate(0, 0); position: relative; left: -200%;}
|
|
100% {transform: rotate(10deg) translate(-16%, 15%); position: relative; left: 0;}
|
|
}
|
|
|
|
#inputColorPalette {
|
|
font: inherit;
|
|
width: 10rem;
|
|
textAlign: left;
|
|
}
|
|
|
|
.downloadCardImage {
|
|
margin-top: 0.5rem;
|
|
text-align: center;
|
|
font: 2rem belerenbsc;
|
|
}
|
|
|
|
::placeholder {
|
|
color: inherit;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.indent {
|
|
text-indent: 2rem;
|
|
}
|
|
|
|
.truncate {
|
|
word-break: break-word;
|
|
}
|
|
|
|
.cornered {
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.justify {
|
|
text-align: justify;
|
|
}
|
|
|
|
#textCodeReference {
|
|
background: var(--interactable-unselected);
|
|
display: grid;
|
|
grid-template-columns: 7rem auto;
|
|
margin-top: 1rem;
|
|
grid-gap: 0.25rem;
|
|
border: 0.2rem solid var(--interactable-unselected);
|
|
border-radius: 0.2rem;
|
|
}
|
|
#textCodeReference > div {
|
|
background: var(--layer-background);
|
|
padding: 0.25rem;
|
|
}
|
|
#textCodeReference > div:nth-child(2n + 1):not(:nth-child(1)) {
|
|
user-select: all;
|
|
}
|
|
|
|
|
|
.notificationContainer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
.notification {
|
|
display: grid;
|
|
grid-template-columns: auto 1rem;
|
|
grid-gap: 1rem;
|
|
margin: 0.5rem;
|
|
padding: 0.5rem;
|
|
background: var(--layer-background-selected);
|
|
}
|
|
.notification > .deleteNotification {
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
/*ANYTHING THAT CHANGES BASED ON SCREEN WIDTH GOES HERE*/
|
|
.mainGrid {
|
|
display: grid;
|
|
grid-template-columns: auto;
|
|
justify-items: center;
|
|
grid-gap: 1rem;
|
|
padding: 1rem;
|
|
}
|
|
.layer {
|
|
padding: 2rem;
|
|
}
|
|
.cardLayerGrid {
|
|
display: grid;
|
|
grid-template-columns: auto;
|
|
grid-gap: 1rem;
|
|
justify-items: center;
|
|
align-items: center;
|
|
}
|
|
.cardLayerGrid > img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
canvas {
|
|
width: 100%;
|
|
}
|
|
footer {
|
|
background: var(--layer-background);
|
|
font: 1rem arial;
|
|
}
|
|
.footer {
|
|
width: 10rem;
|
|
padding: 1rem 0;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: auto;
|
|
grid-gap: 2rem;
|
|
}
|
|
.footer > div > div:first-child {
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
.footer > div > div:not(:first-child) {
|
|
/* font-weight: bold;*/
|
|
}
|
|
.footer > div > div > select {
|
|
width: auto !important;
|
|
border: 0.2rem solid var(--interactable-unselected);
|
|
border-radius: 0.2rem;
|
|
}
|
|
@media screen and (min-width: 909pt) { /*Screen is wide enough to show the card next to the editor menu*/
|
|
.mainGrid {
|
|
grid-template-columns: 750px auto;
|
|
justify-items: stretch;
|
|
}
|
|
}
|
|
@media screen and (min-width: 800pt) { /*Screen is wide enough for cardLayerGrids to display side by side, and for more padding*/
|
|
.cardLayerGrid {
|
|
grid-template-columns: auto auto;
|
|
}
|
|
.layer {
|
|
padding: 4rem;
|
|
}
|
|
}
|
|
@media screen and (min-width: 618pt) { /*Screen is wide enough for padding*/
|
|
.mainGrid {
|
|
/*padding: 1rem 1rem;*/
|
|
}
|
|
}
|
|
@media screen and (min-width: 768px) { /*Screen is wide enough for the card image to be 750px wide. Scrollbar is 18 pixels?*/
|
|
canvas {
|
|
width: 750px;
|
|
}
|
|
}
|
|
@media screen and (min-width: 50rem) { /*Screen is wide enough for the footer to display horizontally*/
|
|
.footer {
|
|
width: 30rem;
|
|
padding: 2rem 0;
|
|
grid-template-columns: repeat(4, 6rem);
|
|
}
|
|
}
|
|
@media screen and (min-width: 392pt) { /*Screen is wide enough for the samples to be a constant size*/
|
|
.cardLayerGrid > img {
|
|
width: 300pt;
|
|
}
|
|
}
|
|
@media screen and (min-width: 300pt) { /*Screen is wide enough for larger text*/
|
|
html {
|
|
font: 20pt georgia;
|
|
}
|
|
footer {
|
|
font: 0.6rem arial;
|
|
}
|
|
}
|