mirror of
https://github.com/Investigamer/cardconjurer.git
synced 2025-07-31 07:11:43 -05:00
new
This commit is contained in:
Kyle
212
new/data/site/styles.css
Normal file
212
new/data/site/styles.css
Normal file
@@ -0,0 +1,212 @@
|
||||
/*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 {
|
||||
--shifting-color-1: rgb(128, 237, 18);
|
||||
--shifting-color-1-light: rgb(255, 255, 168);
|
||||
--light-color: #eee;
|
||||
--dark-color: #333;
|
||||
}
|
||||
footer {
|
||||
background-color: var(--dark-color);
|
||||
padding: 25pt;
|
||||
font: 13pt gothammedium;
|
||||
color: var(--light-color);
|
||||
}
|
||||
body {
|
||||
margin: 0px;
|
||||
background-image: url(images/lowpoly.png);
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
}
|
||||
html {
|
||||
background-image: linear-gradient(to bottom right, var(--shifting-color-1), var(--shifting-color-1-light));
|
||||
background-attachment: fixed;
|
||||
overflow-x: hidden;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
canvas {
|
||||
width: calc(100% - 10pt);
|
||||
height: auto;
|
||||
}
|
||||
.canvasContainer {
|
||||
text-align: center;
|
||||
}
|
||||
.mainGrid {
|
||||
padding: 5pt;
|
||||
display: grid;
|
||||
grid-gap: 25pt;
|
||||
grid-template-columns: auto;
|
||||
font: 16pt mplantin;
|
||||
}
|
||||
.imageGrid {
|
||||
display: grid;
|
||||
grid-template-columns: auto 143pt;
|
||||
min-height: 200pt;
|
||||
}
|
||||
.layer {
|
||||
padding: 50pt;
|
||||
color: black;
|
||||
font: 24pt belerenbsc;
|
||||
text-align: center;
|
||||
}
|
||||
.layer:nth-child(even) {
|
||||
background-color: var(--light-color);
|
||||
background-image: url(images/layerBackground.png);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.imgPreview {
|
||||
max-width: 143pt;
|
||||
max-height: 200pt;
|
||||
}
|
||||
.cardMenu > div {
|
||||
/*border: 1px solid red;*/
|
||||
/*margin-bottom: 5pt;*/
|
||||
}
|
||||
.bar {
|
||||
background-image: url(../images/manaSymbols/63.png);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 2px;
|
||||
width: 100%;
|
||||
height: 20pt;
|
||||
}
|
||||
.cardMenu > div > div:nth-child(1) {
|
||||
/*border: 1px solid blue;*/
|
||||
text-align: center;
|
||||
font: 24pt belerenbsc;
|
||||
}
|
||||
.twoGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 50% auto;
|
||||
}
|
||||
.input, .textarea, .button, .select {
|
||||
font: 1em mplantin;
|
||||
background-color: var(--light-color);
|
||||
border: 1px solid #aaae;
|
||||
border-radius: 0.2em;
|
||||
padding: 0px 0.2em;
|
||||
outline: none;
|
||||
}
|
||||
.textarea {
|
||||
width: 100%;
|
||||
min-height: 6em;
|
||||
max-height: 18em;
|
||||
resize: vertical;
|
||||
}
|
||||
.select {
|
||||
background: #fafafa url(../images/manaSymbols/49.png) no-repeat calc(100% - 0.1em) 50%;
|
||||
background-size: 1em 1em;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
.autoGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(6em, 1fr));
|
||||
grid-auto-rows: min-content;
|
||||
}
|
||||
.input.file {
|
||||
padding: 0px;
|
||||
}
|
||||
@media screen and (min-width: 994pt) {
|
||||
.mainGrid {
|
||||
padding: 25pt;
|
||||
grid-template-columns: calc(750px + 2px) auto;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: calc(750px + 30pt)) {
|
||||
canvas {
|
||||
width: 750px;
|
||||
height: 1050px;
|
||||
}
|
||||
}
|
||||
.tooltip {
|
||||
position: relative;
|
||||
}
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
background-color: var(--dark-color);
|
||||
color: var(--light-color);
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
top: calc(100% + 5px);
|
||||
left: 0px;
|
||||
max-width: calc(100% - 10px);
|
||||
width: auto;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
.tooltip .tooltiptext::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: transparent transparent var(--dark-color) transparent;
|
||||
}
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
.tooltip .tooltiptext:hover {
|
||||
/*visibility: hidden;*/
|
||||
opacity: 0;
|
||||
}
|
||||
div.tooltip > * {
|
||||
width: 100%;
|
||||
}
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
a:hover {
|
||||
color: var(--dark-color);
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.footerGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
|
||||
}
|
||||
Reference in New Issue
Block a user