Mindfang/cardconjurer
1
0
Fork 0
forked from GithubMirrors/cardconjurer
Code Pull Requests Actions Packages Activity

restyle

Browse Source
This commit is contained in:
Kyle
2020-07-24 11:54:43 -07:00
parent d5b0c93cb1
commit b990a8bbe6
14 changed files with 254 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
data/images/cardImages/misc/cc-o.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

8
data/scripts/animations.js
View File

@@ -1,5 +1,5 @@
//CSS & HTML stuff
window.layerElements = document.querySelectorAll('.layer')
window.animatedElements = document.querySelectorAll('.animated')
window.addEventListener('resize', windowResized)
window.addEventListener('scroll', windowScrolled)
windowResized()
@@ -9,10 +9,10 @@ function windowResized() {
windowScrolled()
}
function windowScrolled() {
for (var i = 0; i < layerElements.length; i++) {
var positionFromTop = (layerElements[i].getBoundingClientRect().top + layerElements[i].getBoundingClientRect().bottom) / 2
for (var i = 0; i < animatedElements.length; i++) {
var positionFromTop = (animatedElements[i].getBoundingClientRect().top + animatedElements[i].getBoundingClientRect().bottom) / 2
if (positionFromTop - windowHeight <= 0) {
layerElements[i].classList.add('revealedLayer')
animatedElements[i].classList.add('revealedAnimation')
}
}
}

38
data/scripts/main.js
View File

@@ -81,7 +81,7 @@ cardArt.onload = function() {
}
function setSymbolFromGatherer() {
if (document.getElementById('inputSetCode').value.toLowerCase() == 'cc') {
var newSetSymbolSource = 'https://cardconjurer.com/data/images/cardImages/misc/cc-' + document.getElementById('inputSetRarity').value.toLowerCase()
var newSetSymbolSource = '/data/images/cardImages/misc/cc-' + document.getElementById('inputSetRarity').value.toLowerCase()
if (document.getElementById('inputSetRarity').value == '') {
newSetSymbolSource += 'c'
}
@@ -154,7 +154,7 @@ class cardPlaceholder {
cardMasterElement() {
var temporaryElement = document.createElement('div')
temporaryElement.id = 'uniqueNumber' + this.uniqueNumber
temporaryElement.classList.add('cardMasterElement')
temporaryElement.classList.add('cardMasterElement', 'interactable')
temporaryElement.innerHTML = '<span class="handle">|||</span><div style="grid-column: 2 / 4">' + this.name + '</div><span></span>'
return temporaryElement
}
@@ -199,7 +199,7 @@ class cardImage {
cardMasterElement() {
var temporaryElement = document.createElement('div')
temporaryElement.id = 'uniqueNumber' + this.uniqueNumber
temporaryElement.classList.add('cardMasterElement')
temporaryElement.classList.add('cardMasterElement', 'interactable')
temporaryElement.innerHTML = '<div class="handle">|||</div><div><img src="' + this.image.src + '"><img src="' + maskImageList[maskNameList.indexOf(this.masks[0])].src + '"></div><div>' + this.name + ' - ' + this.masks.toString().replace(',', ', ') + '</div><span class="delete" onclick="deleteCardObject(event)">X</span>'
temporaryElement.onclick = function() {
if (document.getElementById('cardMasterElementEditor').classList.contains('hidden') && !deletingCardObject) {
@@ -214,8 +214,8 @@ class cardImage {
document.getElementById('cardMasterElementEditorScale').value = scaleX(selectedObject.width)
document.getElementById('cardMasterElementEditorOpacity').value = selectedObject.opacity * 100
document.getElementById('cardMasterElementEditorErase').checked = selectedObject.erase
Array.from(document.getElementById('cardMaster').children).forEach(element => element.classList.remove('cardMasterElementSelected'))
this.classList.add('cardMasterElementSelected')
Array.from(document.getElementById('cardMaster').children).forEach(element => element.classList.remove('selected'))
this.classList.add('selected')
}
return temporaryElement
}
@@ -292,31 +292,31 @@ class frameImage {
this.masks = masks
this.framePickerElement = document.createElement('div')
this.framePickerElement.id = 'frameIndex' + frameImageListIndex
this.framePickerElement.classList.add(frameClass)
this.framePickerElement.classList.add(frameClass, 'interactable')
this.framePickerElement.onclick = this.frameOptionClicked
this.framePickerElement.innerHTML = '<img src=' + this.image.src + '>'
document.getElementById('framePicker').appendChild(this.framePickerElement)
}
frameOptionClicked() {
Array.from(document.getElementById('framePicker').children).forEach(element => element.classList.remove('frameOptionSelected'))
this.classList.add('frameOptionSelected')
Array.from(document.getElementById('framePicker').children).forEach(element => element.classList.remove('selected'))
this.classList.add('selected')
if (parseInt(this.id.replace('frameIndex', '')) != selectedFrameImage) {
selectedFrameImage = parseInt(this.id.replace('frameIndex', ''))
document.getElementById('maskPicker').innerHTML = ''
frameImageList[parseInt(this.id.replace('frameIndex', ''))].masks.forEach(array => document.getElementById('maskPicker').innerHTML += '<div id="maskOption' + maskNameList.indexOf(array) + '" onclick="maskOptionClicked(event)"><img src="' + maskImageList[maskNameList.indexOf(array)].src + '">' + array + '</div>')
document.getElementById('maskPicker').children[0].classList.add('maskOptionSelected')
frameImageList[parseInt(this.id.replace('frameIndex', ''))].masks.forEach(array => document.getElementById('maskPicker').innerHTML += '<div id="maskOption' + maskNameList.indexOf(array) + '" class="interactable" onclick="maskOptionClicked(event)"><img src="' + maskImageList[maskNameList.indexOf(array)].src + '">' + array + '</div>')
document.getElementById('maskPicker').children[0].classList.add('selected')
selectedMaskImage = parseInt(document.getElementById('maskPicker').children[0].id.replace('maskOption', ''))
updateSelectedFramePreview()
}
}
}
function maskOptionClicked(event) {
Array.from(document.getElementById('maskPicker').children).forEach(element => element.classList.remove('maskOptionSelected'))
Array.from(document.getElementById('maskPicker').children).forEach(element => element.classList.remove('selected'))
if (event.target.nodeName == 'IMG') {
event.target.parentElement.classList.add('maskOptionSelected')
event.target.parentElement.classList.add('selected')
selectedMaskImage = parseInt(event.target.parentElement.id.replace('maskOption', ''))
} else {
event.target.classList.add('maskOptionSelected')
event.target.classList.add('selected')
selectedMaskImage = parseInt(event.target.id.replace('maskOption', ''))
}
updateSelectedFramePreview()
@@ -407,12 +407,12 @@ function getFloat(input) {
function loadTextOptions(textArray) {
document.getElementById('textPicker').innerHTML = ''
cardTextList = textArray
cardTextList.forEach((item, index) => document.getElementById('textPicker').innerHTML += '<div id="' + index + '" onclick="textOptionClicked(event, ' + index + ')">' + item.name + '</div>')
cardTextList.forEach((item, index) => document.getElementById('textPicker').innerHTML += '<div id="' + index + '" onclick="textOptionClicked(event, ' + index + ')" class="interactable">' + item.name + '</div>')
document.getElementById('textPicker').children[0].click()
}
function textOptionClicked(event, index) {
Array.from(document.getElementById('textPicker').children).forEach(element => element.classList.remove('selectedText'))
event.target.classList.add('selectedText')
Array.from(document.getElementById('textPicker').children).forEach(element => element.classList.remove('selected'))
event.target.classList.add('selected')
selectedTextObject = cardTextList[index]
document.getElementById('textEditorText').value = selectedTextObject.text
document.getElementById('textEditorX').value = scaleX(selectedTextObject.x)
@@ -846,8 +846,8 @@ function beforeAfter(targetString, beforeString, afterString) {
}
function toggleTabs(clickedElement, targetId) {
Array.from(clickedElement.parentElement.children).forEach(element => element.classList.remove('tabOptionSelected'))
clickedElement.classList.add('tabOptionSelected')
Array.from(clickedElement.parentElement.children).forEach(element => element.classList.remove('selected'))
clickedElement.classList.add('selected')
Array.from(document.getElementById(targetId).parentElement.children).forEach(element => element.classList.add('hidden'))
document.getElementById(targetId).classList.remove('hidden')
}
@@ -941,7 +941,7 @@ function textCodeReference() {
function notify(message, color) {
document.getElementsByClassName('notificationContainer')[0].innerHTML += `
<div class='notification' style='background-color: ` + color + `'>
<div class='notification interactable' style='border-top-color: ` + color + `'>
<div>` + message + `</div>
<div class='deleteNotification' onclick='this.parentElement.parentNode.removeChild(this.parentElement)'>X</div>
</div>

23
data/scripts/palettes/darkMode.js
View File

@@ -1,10 +1,19 @@
rootStyles.setProperty('--background-color', '#3a3838')
rootStyles.setProperty('--background-color-contrast', '#242424')
rootStyles.setProperty('--interactable-color', '#2b2b2b')
rootStyles.setProperty('--interactable-selected-color', '#1d1d1d')
rootStyles.setProperty('--input-color', '#2b2b2b')
rootStyles.setProperty('--input-font-color', '#efefef')
rootStyles.setProperty('--site-background', '#3a3838')
rootStyles.setProperty('--layer-background', '#242424')
rootStyles.setProperty('--layer-background-selected', '#1d1d1d')
rootStyles.setProperty('--interactable-unselected', '#666666')
rootStyles.setProperty('--interactable-selected', '#99ee99')
rootStyles.setProperty('--font-color', '#efefef')
rootStyles.setProperty('--font-color-contrast', '#efefef')
rootStyles.setProperty('--body-background', 'none')
setCookie('colorPalette', 'darkMode')
// rootStyles.setProperty('--background-color', '#3a3838')
// rootStyles.setProperty('--background-color-contrast', '#242424')
// rootStyles.setProperty('--interactable-color', '#2b2b2b')
// rootStyles.setProperty('--interactable-selected-color', '#1d1d1d')
// rootStyles.setProperty('--input-color', '#2b2b2b')
// rootStyles.setProperty('--input-font-color', '#efefef')
// rootStyles.setProperty('--font-color', '#efefef')
// rootStyles.setProperty('--font-color-contrast', '#efefef')
// rootStyles.setProperty('--body-background', 'none')
// setCookie('colorPalette', 'darkMode')

18
data/scripts/palettes/dayRave.js
View File

@@ -1,12 +1,10 @@
rootStyles.setProperty('--background-color', '#d0d0d0')
rootStyles.setProperty('--background-color-contrast', '#f5f5f5')
rootStyles.setProperty('--interactable-color', '#dfdfdf')
rootStyles.setProperty('--interactable-selected-color', '#cccccc')
rootStyles.setProperty('--input-color', '#dadada')
rootStyles.setProperty('--input-font-color', '#000')
rootStyles.setProperty('--font-color', '#000')
rootStyles.setProperty('--font-color-contrast', '#000')
rootStyles.setProperty('--body-background', 'url(data/site/images/lowpoly.png) left/cover no-repeat fixed')
rootStyles.setProperty('--site-background', '#f5f5f5')
rootStyles.setProperty('--layer-background', '#e4e4e4')
rootStyles.setProperty('--layer-background-selected', '#cccccc')
rootStyles.setProperty('--interactable-unselected', '#aaaaaa')
rootStyles.setProperty('--interactable-selected', '#00aa00')
rootStyles.setProperty('--font-color', '#000000')
rootStyles.setProperty('--body-background', 'url(/data/site/images/lowpoly.png) left/cover no-repeat fixed')
setCookie('colorPalette', 'dayRave')
//Cycles through a rainbow!
@@ -23,7 +21,7 @@ var currentColorIndex = 0
function changeColor() {
var colors = indexToColor(currentColorIndex)
var lightColors = indexToColor(currentColorIndex + lightLead)
rootStyles.setProperty('--background-color', 'linear-gradient(to bottom right, ' + "rgb(" + parseInt(colors[0] + regularAdjust) + "," + parseInt(colors[1] + regularAdjust) + "," + parseInt(colors[2] + regularAdjust) + ")" + ', ' + "rgb(" + parseInt(lightColors[0] + lightAdjust) + "," + parseInt(lightColors[1] + lightAdjust) + "," + parseInt(lightColors[2] + lightAdjust) + ")" + ') left/cover no-repeat fixed')
rootStyles.setProperty('--site-background', 'linear-gradient(to bottom right, ' + "rgb(" + parseInt(colors[0] + regularAdjust) + "," + parseInt(colors[1] + regularAdjust) + "," + parseInt(colors[2] + regularAdjust) + ")" + ', ' + "rgb(" + parseInt(lightColors[0] + lightAdjust) + "," + parseInt(lightColors[1] + lightAdjust) + "," + parseInt(lightColors[2] + lightAdjust) + ")" + ') left/cover no-repeat fixed')
currentColorIndex += 2.5 * 153 / 180 //The second number is how many seconds it takes to do a full loop
}
function indexToColor(colorIndex) {

16
data/scripts/palettes/lightMode.js
View File

@@ -1,10 +1,8 @@
rootStyles.setProperty('--background-color', '#f5f5f5')
rootStyles.setProperty('--background-color-contrast', '#d0d0d0')
rootStyles.setProperty('--interactable-color', '#dfdfdf')
rootStyles.setProperty('--interactable-selected-color', '#cccccc')
rootStyles.setProperty('--input-color', '#dadada')
rootStyles.setProperty('--input-font-color', '#000')
rootStyles.setProperty('--font-color', '#000')
rootStyles.setProperty('--font-color-contrast', '#000')
rootStyles.setProperty('--site-background', '#f5f5f5')
rootStyles.setProperty('--layer-background', '#e4e4e4')
rootStyles.setProperty('--layer-background-selected', '#cccccc')
rootStyles.setProperty('--interactable-unselected', '#aaaaaa')
rootStyles.setProperty('--interactable-selected', '#00aa00')
rootStyles.setProperty('--font-color', '#000000')
rootStyles.setProperty('--body-background', 'none')
setCookie('colorPalette', 'lightMode')
setCookie('colorPalette', 'lightMode')

19
data/scripts/palettes/nightRave.js
View File

@@ -1,13 +1,12 @@
rootStyles.setProperty('--background-color', '#3a3838')
rootStyles.setProperty('--background-color-contrast', '#242424')
rootStyles.setProperty('--interactable-color', '#2b2b2b')
rootStyles.setProperty('--interactable-selected-color', '#1d1d1d')
rootStyles.setProperty('--input-color', '#2b2b2b')
rootStyles.setProperty('--input-font-color', '#efefef')
rootStyles.setProperty('--font-color', '#000')
rootStyles.setProperty('--font-color-contrast', '#efefef')
rootStyles.setProperty('--body-background', 'url(data/site/images/lowpoly.png) left/cover no-repeat fixed')
rootStyles.setProperty('--site-background', '#3a3838')
rootStyles.setProperty('--layer-background', '#242424')
rootStyles.setProperty('--layer-background-selected', '#1d1d1d')
rootStyles.setProperty('--interactable-unselected', '#666666')
rootStyles.setProperty('--interactable-selected', '#99ee99')
rootStyles.setProperty('--font-color', '#efefef')
rootStyles.setProperty('--body-background', 'url(/data/site/images/lowpoly.png) left/cover no-repeat fixed')
setCookie('colorPalette', 'nightRave')
console.log('oh no')
//Cycles through a rainbow!
if (currentColorIndex == undefined) {
@@ -23,7 +22,7 @@ var currentColorIndex = 0
function changeColor() {
var colors = indexToColor(currentColorIndex)
var lightColors = indexToColor(currentColorIndex + lightLead)
rootStyles.setProperty('--background-color', 'linear-gradient(to bottom right, ' + "rgb(" + parseInt(colors[0] + regularAdjust) + "," + parseInt(colors[1] + regularAdjust) + "," + parseInt(colors[2] + regularAdjust) + ")" + ', ' + "rgb(" + parseInt(lightColors[0] + lightAdjust) + "," + parseInt(lightColors[1] + lightAdjust) + "," + parseInt(lightColors[2] + lightAdjust) + ")" + ') left/cover no-repeat fixed')
rootStyles.setProperty('--site-background', 'linear-gradient(to bottom right, ' + "rgb(" + parseInt(colors[0] + regularAdjust) + "," + parseInt(colors[1] + regularAdjust) + "," + parseInt(colors[2] + regularAdjust) + ")" + ', ' + "rgb(" + parseInt(lightColors[0] + lightAdjust) + "," + parseInt(lightColors[1] + lightAdjust) + "," + parseInt(lightColors[2] + lightAdjust) + ")" + ') left/cover no-repeat fixed')
currentColorIndex += 2.5 * 153 / 180 //The second number is how many seconds it takes to do a full loop
}
function indexToColor(colorIndex) {

159
data/styles/main.css
View File

@@ -41,20 +41,18 @@
}
:root {
--background-color: #f5f5f5;
--background-color-contrast: #e4e4e4;
--interactable-color: #dfdfdf;
--interactable-selected-color: #cccccc;
--input-color: #dadada;
--input-font-color: #000;
--site-background: #f5f5f5;
--layer-background: #e4e4e4;
--layer-background-selected: #ccc;
--interactable-unselected: #aaa;
--interactable-selected: #00aa00;
--font-color: #000;
--font-color-contrast: #000;
--body-background: none;
}
html {
font: 12pt georgia;
background: var(--background-color);
background: var(--site-background);
color: var(--font-color);
-webkit-user-select: none;
-moz-user-select: none;
@@ -79,16 +77,31 @@ a:hover {
text-decoration: underline;
}
.ad {
text-align: center;
/*border: 1px solid red;*/
width: calc(50vw - 5rem);
/*.ad {
margin: 0;
padding: 0;
}*/
.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;
}
.adGrid > div {
width: 100%;
}
.title {
text-align: center;
font: 2.5rem 'belerenbsc';
padding: 1rem 0;
.interactable {
background: var(--layer-background);
border-top: 0.2rem solid var(--interactable-unselected);
cursor: pointer;
border-radius: 0.2rem;
}
.interactable.selected {
border-top-color: var(--interactable-selected);
background: var(--layer-background-selected);
}
.cardMaster {
@@ -96,13 +109,10 @@ a:hover {
}
.cardMasterElement {
font: 1rem belerenbsc;
margin-top: 0.1rem;
margin-top: 0.25rem;
display: grid;
grid-template-columns: 2rem 4rem auto 2rem;
align-items: center;
background: var(--interactable-color);
color: var(--input-font-color);
cursor: pointer;
}
.cardMasterElement > .handle {
cursor: move;
@@ -115,33 +125,29 @@ a:hover {
object-fit: contain;
}
.cardMasterElementMoving {
background: var(--interactable-selected-color);
background: var(--layer-background-selected);
}
.cardMasterElement > .delete {
cursor: pointer;
text-align: center;
}
.cardMasterElement.cardMasterElementSelected {
background: var(--interactable-selected-color);
}
.splitGrid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 0.1rem;
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.1rem;
grid-gap: 0.25rem;
}
.frameGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
grid-auto-rows: min-content;
grid-gap: 0.1rem;
grid-gap: 0.25rem;
}
img {
-webkit-user-drag: none;
@@ -151,6 +157,7 @@ img {
user-drag: none;
}
#framePicker, #maskPicker {
margin: 0.25rem 0;
max-height: 260pt;
overflow-y: auto;
overflow-x: hidden;
@@ -169,35 +176,21 @@ img {
max-width: 1.5rem;
max-height: 1.5rem;
}
#framePicker > div.frameOptionSelected, #maskPicker > div.maskOptionSelected {
background: var(--interactable-selected-color);
}
#maskPicker > div, #framePicker > div {
background: var(--interactable-color);
color: var(--input-font-color);
cursor: pointer;
}
#maskPicker > div {
padding: 0.5rem;
margin-bottom: 0.1rem;
margin-bottom: 0.25rem;
}
#textPicker {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
grid-auto-rows: min-content;
grid-gap: 0.1rem;
margin: 0.1rem 0px;
grid-gap: 0.25rem;
margin: 0.25rem 0px;
}
#textPicker > div {
font: 1rem belerenbsc;
background: var(--interactable-color);
color: var(--input-font-color);
padding: 0.5rem;
cursor: pointer;
}
#textPicker > div.selectedText {
background: var(--interactable-selected-color);
}
textarea {
@@ -221,34 +214,28 @@ textarea {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(8.2rem, 1fr));
grid-auto-rows: min-content;
grid-gap: 0.1rem;
margin-bottom: 1rem;
grid-gap: 0.25rem;
margin-bottom: 0.25rem;
}
.tabPicker > div {
font: 1.2rem belerenbsc;
text-align: center;
padding: 0.5rem 0;
background: var(--interactable-color);
color: var(--input-font-color);
cursor: pointer;
}
.tabPicker > div.tabOptionSelected {
background: var(--interactable-selected-color);
}
input:not([type='checkbox']), textarea, button, select {
font: inherit;
color: var(--input-font-color);
color: inherit;
width: 100%;
background: var(--input-color);
background: var(--layer-background);
border: none;
outline: none;
padding: 0.2rem;
margin-top: 0.1rem;
padding: 0.25rem;
margin-top: 0.25rem;
}
input:not([type='checkbox']):active, textarea:active, button:active {
border: 0.1rem solid var(--input-font-color);
padding: 0.1rem;
border: 0.1rem solid var(--interactable-unselected);
}
input[type='checkbox'] {
position: relative;
@@ -272,31 +259,31 @@ input[type='checkbox'], select, option, input[type='file'], button {
0% {transform: translate(100vw, 0);}
100% {transform: translate(0, 0);}
}
.layerTitle {
.title {
text-align: center;
font: 2rem 'belerenbsc';
font: 2.5rem 'belerenbsc';
padding: 1rem !important;
}
.darkLayer {
background: var(--background-color-contrast);
color: var(--font-color-contrast);
.layer {
background: var(--layer-background);
}
.layer > div {
.layer.clearLayer {
background: none;
}
.animated > div {
opacity: 0;
}
.layer.smallLayer {
padding-top: 1rem;
padding-bottom: 1rem;
}
.layer.revealedLayer > div {
.animated.revealedAnimation > div {
opacity: 1;
}
.layer.revealedLayer.fadeIn > div {
.animated.revealedAnimation.fadeIn > div {
animation: fade-in 2s;
}
.layer.revealedLayer.slideFromLeft > div {
.animated.revealedAnimation.slideFromLeft > div {
animation: slide-from-left 0.8s;
}
.layer.revealedLayer.slideFromRight > div {
.animated.revealedAnimation.slideFromRight > div {
animation: slide-from-right 0.8s;
}
@@ -319,19 +306,19 @@ input[type='checkbox'], select, option, input[type='file'], button {
z-index: 100;
transform: translate(0, -1em);
}*/
.layer.revealedLayer > div > div > div > .sample1 {
.animated.revealedAnimation > div > div > div > .sample1 {
animation: sample-one 2s;
transform: rotate(-10deg) translate(16%, 15%);
}
.layer.revealedLayer > div > div > div > .sample2 {
.animated.revealedAnimation > div > div > div > .sample2 {
animation: sample-two 2s;
transform: rotate(-5deg) translate(10%, 4%);
}
.layer.revealedLayer > div > div > div > .sample4 {
.animated.revealedAnimation > div > div > div > .sample4 {
animation: sample-four 2s;
transform: rotate(5deg) translate(-10%, 4%);
}
.layer.revealedLayer > div > div > div > .sample5 {
.animated.revealedAnimation > div > div > div > .sample5 {
animation: sample-five 2s;
transform: rotate(10deg) translate(-16%, 15%);
}
@@ -374,7 +361,7 @@ input[type='checkbox'], select, option, input[type='file'], button {
}
.indent {
text-indent: 2em;
text-indent: 2rem;
}
.truncate {
@@ -393,12 +380,13 @@ input[type='checkbox'], select, option, input[type='file'], button {
display: grid;
grid-template-columns: 7rem auto;
margin-top: 1rem;
grid-gap: 0.1rem;
grid-gap: 0.25rem;
border: 0.2rem solid var(--interactable-unselected);
border-radius: 0.2rem;
}
#textCodeReference > div {
background: var(--input-color);
padding: 0.1rem;
color: var(--input-font-color);
background: var(--layer-background);
padding: 0.25rem;
}
@@ -407,7 +395,6 @@ input[type='checkbox'], select, option, input[type='file'], button {
bottom: 0;
left: 0;
width: 100%;
color: black;
}
.notification {
display: grid;
@@ -415,11 +402,10 @@ input[type='checkbox'], select, option, input[type='file'], button {
grid-gap: 1rem;
margin: 0.5rem;
padding: 0.5rem;
background: green;
background: var(--layer-background-selected);
}
.notification > .deleteNotification {
text-align: center;
cursor: pointer;
}
@@ -449,8 +435,7 @@ canvas {
width: 100%;
}
footer {
background: var(--background-color-contrast);
color: var(--font-color-contrast);
background: var(--layer-background);
font: 1rem arial;
}
.footer {
@@ -469,6 +454,8 @@ footer {
}
.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 {