GithubMirrors/cardconjurer
1
0
Fork 1
mirror of https://github.com/Investigamer/cardconjurer.git synced 2025-07-29 22:31:43 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

upgrayedd

Browse Source
This commit is contained in:
Kyle
2020-03-27 10:56:46 -07:00
parent 9fbee694ed
commit 73b1de2b74
63 changed files with 1622 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
data/site/styles.css
View File

@@ -38,34 +38,53 @@
:root {
--background-color: #fafafa;
--background-color-contrast: #222;
--background-color-contrast: #333;
--interactable-color: #aaa;
--interactable-selected-color: #888;
--interactable-selected-color: #777;
--input-color: #ddd;
--font-color: #000;
--font-color-contrast: #eee;
--body-background: none;
}
html {
user-select: none;
font-size: 20pt;
background-color: var(--background-color);
font: 20pt roboto;
background: var(--background-color);
color: var(--font-color);
background-attachment: fixed;
overflow-x: hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
html, body {
margin: 0;
border: 0;
padding: 0;
overflow-x: hidden
}
body {
background: var(--body-background);
background-position: left;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
a {
font: inherit;
color: inherit;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.title {
text-align: center;
color: var(--font-color);
font: 2.5rem 'belerenbsc';
margin-top: 1rem;
padding: 1rem 0;
}
.cardMaster {
@@ -77,7 +96,8 @@ a {
display: grid;
grid-template-columns: 2rem auto 2rem;
align-items: center;
background-color: var(--input-color);
background: var(--interactable-color);
cursor: pointer;
}
.cardMasterElement > .handle {
cursor: move;
@@ -85,14 +105,14 @@ a {
text-align: center;
}
.cardMasterElementMoving {
background-color: var(--interactable-selected-color);
background: var(--interactable-selected-color);
}
.cardMasterElement > .delete {
cursor: pointer;
text-align: center;
}
.cardMasterElement.cardMasterElementSelected {
background-color: var(--interactable-color);
background: var(--interactable-selected-color);
}
.splitGrid {
@@ -138,10 +158,11 @@ img {
max-height: 1.5rem;
}
#framePicker > div.frameOptionSelected, #maskPicker > div.maskOptionSelected {
background-color: var(--interactable-selected-color);
background: var(--interactable-selected-color);
}
#maskPicker > div, #framePicker > div {
background-color: var(--interactable-color);
background: var(--interactable-color);
cursor: pointer;
}
#maskPicker > div {
padding: 0.5rem;
@@ -157,15 +178,16 @@ img {
}
#textPicker > div {
font: 1rem belerenbsc;
background-color: var(--interactable-color);
background: var(--interactable-color);
padding: 0.5rem;
cursor: pointer;
}
#textPicker > div.selectedText {
background-color: var(--interactable-selected-color);
background: var(--interactable-selected-color);
}
canvas {
/*background-color: var(--interactable-color);*/
/*background: var(--interactable-color);*/
}
textarea {
resize: vertical;
@@ -176,6 +198,9 @@ textarea {
.hidden {
display: none;
}
.hidden.frameClassCustom {
display: inline-block;
}
@@ -183,36 +208,50 @@ textarea {
display: grid;
grid-template-columns: 750px auto;
grid-gap: 1rem;
padding: 1rem;
padding: 0 1rem 1rem 1rem;
}
.tabPicker {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
grid-template-columns: repeat(auto-fit, minmax(8.2rem, 1fr));
grid-auto-rows: min-content;
grid-gap: 0.1rem;
margin-bottom: 1rem;
}
.tabPicker > div {
font: 1rem belerenbsc;
font: 1.2rem belerenbsc;
text-align: center;
padding: 0.5rem;
background-color: var(--interactable-color);
padding: 0.5rem 0;
background: var(--interactable-color);
cursor: pointer;
}
.tabPicker > div.tabOptionSelected {
background-color: var(--interactable-selected-color);
background: var(--interactable-selected-color);
}
input, textarea, button, select {
font: 0.8rem mplantin;
input:not([type='checkbox']), textarea, button, select {
font: inherit;
color: var(--font-color);
width: 100%;
background-color: var(--input-color);
background: var(--input-color);
border: none;
outline: none;
padding: 0.2rem;
margin-top: 0.1rem;
}
input:not([type='checkbox']):active, textarea:active, button:active {
border: 0.1rem solid var(--interactable-color);
padding: 0.1rem;
}
input[type='checkbox'] {
position: relative;
top: 0.25rem;
width: 1rem;
height: 1rem;
}
input[type='checkbox'], select, option, input[type='file'], button {
cursor: pointer;
}
@keyframes fade-in {
from {opacity: 0;}
@@ -235,7 +274,7 @@ input, textarea, button, select {
font: 2rem 'belerenbsc';
}
.darkLayer {
background-color: var(--background-color-contrast);
background: var(--background-color-contrast);
color: var(--font-color-contrast);
}
.layer > div {
@@ -259,7 +298,7 @@ input, textarea, button, select {
.footer {
padding: 2rem;
background-color: var(--background-color-contrast);
background: var(--background-color-contrast);
color: var(--font-color-contrast);
font: 0.6rem 'open sans';
display: grid;
@@ -312,4 +351,19 @@ input, textarea, button, select {
font: inherit;
width: 10rem;
textAlign: left;
}
.downloadCardImage {
margin-top: 0.5rem;
text-align: center;
font: 2rem belerenbsc;
}
::placeholder {
color: inherit;
opacity: 0.5;
}
.paragraph {
text-indent: 2em;
}