cardconjurer/data/site/styles.css

/*fonts*/
@font-face {
	font-family: gothammedium;
	src: url("../fonts/gotham-medium.ttf");
}
@font-face {
	font-family: belerenb;
	src: url("../fonts/beleren-b.ttf");
}
@font-face {
	font-family: belerenbsc;
	src: url("../fonts/beleren-bsc.ttf");
}
@font-face {
	font-family: matrix;
	src: url("../fonts/matrix.ttf");
}
@font-face {
	font-family: matrixb;
	src: url("../fonts/matrix-b.ttf");
}
@font-face {
	font-family: matrixbsc;
	src: url("../fonts/matrix-bsc.ttf");
}
@font-face {
	font-family: mplantin;
	src: url("../fonts/mplantin.ttf");
}
@font-face {
	font-family: mplantini;
	src: url("../fonts/mplantin-i.ttf");
}
@font-face {
	font-family: goudymedieval;
	src: url("../fonts/goudy-medieval.ttf");
}

:root {
	--light-color: #eee;
}

html {
	user-select: none;
	font-size: 20pt;
}

.cardMasterElement {
	font: 1rem belerenbsc;
	border: 1px solid black;
	border-radius: 0.5rem;
	margin-top: 0.125rem;
    display: grid;
    grid-template-columns: 2rem auto 1rem;
    align-items: center;
}
.cardMasterElement > .handle {
    cursor: move;
    padding: 1rem 0.5rem;
    text-align: center;
    border: 1px solid green;
}
.cardMasterElementMoving {
	background-color: gray;
}
.cardMasterElement > .delete {
	cursor: pointer;
    text-align: center;
    border: 1px solid red;
}
.cardMasterElement.cardMasterElementSelected {
	border: 5px solid green;
}

.splitGrid {
	display: grid;
	grid-template-columns: 50% 50%;
}
.frameGrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
	grid-auto-rows: min-content;
}
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}
#framePicker, #maskPicker {
	max-height: 260pt;
	overflow-y: auto;
	overflow-x: hidden;
	border: 1px solid black;
}
#framePicker > div {
	height: 3rem;
	text-align: center;
	width: 100%;
}
#framePicker img {
	max-width: 3rem;
	max-height: 3rem;
}
#maskPicker img {
	max-width: 1.5rem;
	max-height: 1.5rem;
}
#framePicker > div.frameOptionSelected, #maskPicker > div.maskOptionSelected {
	background-color: green;
}
#maskPicker > div, #framePicker > div {
	background-color: gray;
	border: 1px solid blue;
	border-radius: 0.25rem;
}
#maskPicker > div {
	/*margin-left: 0.5rem;*/
	padding: 0.25rem;
	/*width: calc(100% - 1.3rem);*/
}

#textPicker > div {
	border: 1px solid black;
	padding: 1rem;
}
#textPicker > div.selectedText {
	border: 5px solid green;
}

canvas {
	border:1px solid black;
}