mirror of
https://github.com/Investigamer/cardconjurer.git
synced 2025-07-26 21:04:58 -05:00
restyle
This commit is contained in:
Kyle
BIN
data/images/cardImages/misc/cc-o.png
Normal file
BIN
data/images/cardImages/misc/cc-o.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
@@ -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')
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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')
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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')
|
||||
@@ -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) {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user