mirror of
https://github.com/Investigamer/cardconjurer.git
synced 2025-07-26 21:04:58 -05:00
upgrayedd
This commit is contained in:
Kyle
@@ -1,11 +1,11 @@
|
||||
rootStyles.setProperty('--background-color', '#1c1c1c')
|
||||
rootStyles.setProperty('--background-color-contrast', '#111')
|
||||
rootStyles.setProperty('--interactable-color', '#333')
|
||||
rootStyles.setProperty('--interactable-selected-color', '#555')
|
||||
rootStyles.setProperty('--background-color', '#121212')
|
||||
rootStyles.setProperty('--background-color-contrast', '#0a0a0a')
|
||||
rootStyles.setProperty('--interactable-color', '#202020')
|
||||
rootStyles.setProperty('--interactable-selected-color', '#2f2f2f')
|
||||
rootStyles.setProperty('--interactable-tiling', '100% 100%')
|
||||
rootStyles.setProperty('--input-color', '#3a3a3a')
|
||||
rootStyles.setProperty('--input-font-color', '#fff')
|
||||
rootStyles.setProperty('--font-color', '#fff')
|
||||
rootStyles.setProperty('--font-color-contrast', '#eee')
|
||||
rootStyles.setProperty('--input-color', '#282828')
|
||||
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')
|
||||
61
data/scripts/palettes/dayRave.js
Normal file
61
data/scripts/palettes/dayRave.js
Normal file
@@ -0,0 +1,61 @@
|
||||
rootStyles.setProperty('--background-color', '#eaeaea')
|
||||
rootStyles.setProperty('--background-color-contrast', '#f5f5f5')
|
||||
rootStyles.setProperty('--interactable-color', '#f5f5f5')
|
||||
rootStyles.setProperty('--interactable-selected-color', '#eaeaea')
|
||||
rootStyles.setProperty('--interactable-tiling', '100% 100%')
|
||||
rootStyles.setProperty('--input-color', '#efefef')
|
||||
rootStyles.setProperty('--input-font-color', '#000')
|
||||
rootStyles.setProperty('--font-color', '#000')
|
||||
rootStyles.setProperty('--font-color-contrast', '#000')
|
||||
rootStyles.setProperty('--body-background', 'url(images/lowpoly.png)')
|
||||
setCookie('colorPalette', 'dayRave')
|
||||
|
||||
//Cycles through a rainbow!
|
||||
if (currentColorIndex == undefined) {
|
||||
document.getElementById('inputColorPalette').addEventListener('change', function() {
|
||||
clearInterval(raveMode)
|
||||
})
|
||||
}
|
||||
var raveMode = setInterval(changeColor, 250)
|
||||
var regularAdjust = 0//60
|
||||
var lightAdjust = 64//100
|
||||
var lightLead = 255
|
||||
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) + ")" + ')')
|
||||
currentColorIndex += 2.5 * 153 / 180 //The second number is how many seconds it takes to do a full loop
|
||||
}
|
||||
function indexToColor(colorIndex) {
|
||||
var red = 0, green = 0, blue = 0
|
||||
var realColorIndex = colorIndex - Math.floor(colorIndex / 1530) * 1530
|
||||
var colorStage = Math.floor(realColorIndex / 255)
|
||||
switch(colorStage) {
|
||||
case 0:
|
||||
green = 255
|
||||
red = realColorIndex - Math.floor(realColorIndex / 255) * 255
|
||||
break
|
||||
case 1:
|
||||
red = 255
|
||||
green = 255 - realColorIndex + Math.floor(realColorIndex / 255) * 255
|
||||
break
|
||||
case 2:
|
||||
red = 255
|
||||
blue = realColorIndex - Math.floor(realColorIndex / 255) * 255
|
||||
break
|
||||
case 3:
|
||||
blue = 255
|
||||
red = 255 - realColorIndex + Math.floor(realColorIndex / 255) * 255
|
||||
break
|
||||
case 4:
|
||||
blue = 255
|
||||
green = realColorIndex - Math.floor(realColorIndex / 255) * 255
|
||||
break
|
||||
case 5:
|
||||
green = 255
|
||||
blue = 255 - realColorIndex + Math.floor(realColorIndex / 255) * 255
|
||||
break
|
||||
}
|
||||
return [red, green, blue]
|
||||
}
|
||||
@@ -1,11 +1,11 @@
|
||||
rootStyles.setProperty('--background-color', '#fafafa')
|
||||
rootStyles.setProperty('--background-color-contrast', '#333')
|
||||
rootStyles.setProperty('--interactable-color', '#aaa')
|
||||
rootStyles.setProperty('--interactable-selected-color', '#777')
|
||||
rootStyles.setProperty('--background-color', '#f5f5f5')
|
||||
rootStyles.setProperty('--background-color-contrast', '#eaeaea')
|
||||
rootStyles.setProperty('--interactable-color', '#dfdfdf')
|
||||
rootStyles.setProperty('--interactable-selected-color', '#cccccc')
|
||||
rootStyles.setProperty('--interactable-tiling', '100% 100%')
|
||||
rootStyles.setProperty('--input-color', '#ddd')
|
||||
rootStyles.setProperty('--input-color', '#dadada')
|
||||
rootStyles.setProperty('--input-font-color', '#000')
|
||||
rootStyles.setProperty('--font-color', '#000')
|
||||
rootStyles.setProperty('--font-color-contrast', '#eee')
|
||||
rootStyles.setProperty('--font-color-contrast', '#000')
|
||||
rootStyles.setProperty('--body-background', 'none')
|
||||
setCookie('colorPalette', 'lightMode')
|
||||
@@ -1,14 +1,14 @@
|
||||
rootStyles.setProperty('--background-color', '#1c1c1c')
|
||||
rootStyles.setProperty('--background-color-contrast', '#111')
|
||||
rootStyles.setProperty('--interactable-color', '#333')
|
||||
rootStyles.setProperty('--background-color', '#121212')
|
||||
rootStyles.setProperty('--background-color-contrast', '#0a0a0a')
|
||||
rootStyles.setProperty('--interactable-color', '#202020')
|
||||
rootStyles.setProperty('--interactable-selected-color', '#555')
|
||||
rootStyles.setProperty('--interactable-tiling', '100% 100%')
|
||||
rootStyles.setProperty('--input-color', '#3a3a3a')
|
||||
rootStyles.setProperty('--input-font-color', '#fff')
|
||||
rootStyles.setProperty('--input-font-color', '#efefef')
|
||||
rootStyles.setProperty('--font-color', '#000')
|
||||
rootStyles.setProperty('--font-color-contrast', '#eee')
|
||||
rootStyles.setProperty('--font-color-contrast', '#efefef')
|
||||
rootStyles.setProperty('--body-background', 'url(images/lowpoly.png)')
|
||||
setCookie('colorPalette', 'raveMode')
|
||||
setCookie('colorPalette', 'nightRave')
|
||||
|
||||
//Cycles through a rainbow!
|
||||
if (currentColorIndex == undefined) {
|
||||
@@ -1,58 +1,52 @@
|
||||
.askScryfallGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: auto 90pt auto;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
}
|
||||
.urzaCard {
|
||||
width: 360pt;
|
||||
text-align: center;
|
||||
grid-column: 1 / span 3;
|
||||
}
|
||||
.urzaCard > img {
|
||||
position: relative;
|
||||
left: -2rem;
|
||||
width: 360pt;
|
||||
height: auto;
|
||||
}
|
||||
img {
|
||||
position: relative;
|
||||
left: -1rem;
|
||||
}
|
||||
.askScryfallGrid > * {
|
||||
/*border: 1px solid red;*/
|
||||
}
|
||||
.askScryfallButton {
|
||||
width: auto;
|
||||
height: 60pt;
|
||||
transition: 0.25s;
|
||||
}
|
||||
.askScryfallButton:hover {
|
||||
height: 80pt;
|
||||
}
|
||||
.askScryfallButton:active {
|
||||
height: 90pt !important;
|
||||
}
|
||||
#askScryfallResult {
|
||||
grid-column: 1 / span 3;
|
||||
padding: 2rem;
|
||||
margin: 1rem;
|
||||
background: var(--background-color-contrast);
|
||||
color: var(--font-color-contrast);
|
||||
border-radius: 1rem;
|
||||
font: 2rem belerenb;
|
||||
}
|
||||
@media screen and (min-width: 864pt) {
|
||||
.askScryfallGrid {
|
||||
grid-template-columns: calc(360pt) 1fr 1fr 1fr !important;
|
||||
grid-template-rows: 90pt auto !important;
|
||||
}
|
||||
.urzaCard {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / span 2 !important;
|
||||
}
|
||||
#askScryfallResult {
|
||||
grid-column: 2 / span 3 !important;
|
||||
}
|
||||
}
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: auto 90pt auto;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
}
|
||||
.urzaCard {
|
||||
width: 360pt;
|
||||
text-align: center;
|
||||
grid-column: 1 / span 3;
|
||||
}
|
||||
.urzaCard > img {
|
||||
width: 360pt;
|
||||
height: auto;
|
||||
}
|
||||
.askScryfallGrid > * {
|
||||
/*border: 1px solid red;*/
|
||||
}
|
||||
.askScryfallButton {
|
||||
width: auto;
|
||||
height: 60pt;
|
||||
transition: 0.25s;
|
||||
}
|
||||
.askScryfallButton:hover {
|
||||
height: 80pt;
|
||||
}
|
||||
.askScryfallButton:active {
|
||||
height: 90pt !important;
|
||||
}
|
||||
#askScryfallResult {
|
||||
grid-column: 1 / span 3;
|
||||
padding: 2rem;
|
||||
margin: 1rem;
|
||||
background: var(--background-color-contrast);
|
||||
color: var(--font-color-contrast);
|
||||
border-radius: 1rem;
|
||||
font: 2rem belerenb;
|
||||
}
|
||||
@media screen and (min-width: 864pt) {
|
||||
.askScryfallGrid {
|
||||
grid-template-columns: calc(360pt) 1fr 1fr 1fr !important;
|
||||
grid-template-rows: 90pt auto !important;
|
||||
}
|
||||
.urzaCard {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / span 2 !important;
|
||||
}
|
||||
#askScryfallResult {
|
||||
grid-column: 2 / span 3 !important;
|
||||
}
|
||||
}
|
||||
@@ -37,20 +37,20 @@
|
||||
}
|
||||
|
||||
:root {
|
||||
--background-color: #fafafa;
|
||||
--background-color-contrast: #333;
|
||||
--interactable-color: #aaa;
|
||||
--interactable-selected-color: #777;
|
||||
--background-color: #f5f5f5;
|
||||
--background-color-contrast: #eaeaea;
|
||||
--interactable-color: #dfdfdf;
|
||||
--interactable-selected-color: #cccccc;
|
||||
--interactable-tiling: 100% 100%;
|
||||
--input-color: #ddd;
|
||||
--input-color: #dadada;
|
||||
--input-font-color: #000;
|
||||
--font-color: #000;
|
||||
--font-color-contrast: #eee;
|
||||
--font-color-contrast: #000;
|
||||
--body-background: none;
|
||||
}
|
||||
|
||||
html {
|
||||
font: 20pt georgia;
|
||||
font: 12pt georgia;
|
||||
background: var(--background-color);
|
||||
color: var(--font-color);
|
||||
background-attachment: fixed;
|
||||
@@ -194,9 +194,6 @@ img {
|
||||
background: var(--interactable-selected-color);
|
||||
}
|
||||
|
||||
canvas {
|
||||
/*background: var(--interactable-color);*/
|
||||
}
|
||||
textarea {
|
||||
resize: vertical;
|
||||
min-height: 4rem;
|
||||
@@ -212,12 +209,7 @@ textarea {
|
||||
|
||||
|
||||
|
||||
.mainGrid {
|
||||
display: grid;
|
||||
grid-template-columns: 750px auto;
|
||||
grid-gap: 1rem;
|
||||
padding: 0 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
|
||||
.tabPicker {
|
||||
display: grid;
|
||||
@@ -275,9 +267,6 @@ input[type='checkbox'], select, option, input[type='file'], button {
|
||||
from {position: relative; left: 100vw;}
|
||||
to {position: relative; left: 0px;}
|
||||
}
|
||||
.layer {
|
||||
padding: 5rem;
|
||||
}
|
||||
.layerTitle {
|
||||
/*color: inherit;*/
|
||||
text-align: center;
|
||||
@@ -304,21 +293,13 @@ input[type='checkbox'], select, option, input[type='file'], button {
|
||||
animation: slide-from-right 1.5s;
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding: 2rem;
|
||||
background: var(--background-color-contrast);
|
||||
background-size: 100% 100%;
|
||||
color: var(--font-color-contrast);
|
||||
font: 0.6rem arial;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
}
|
||||
|
||||
|
||||
.fiveSampleCards {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 3rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.fiveSampleCards > div > img {
|
||||
position: relative;
|
||||
@@ -378,17 +359,94 @@ input[type='checkbox'], select, option, input[type='file'], button {
|
||||
text-indent: 2em;
|
||||
}
|
||||
|
||||
.truncate {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.justify {
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*ANYTHING THAT CHANGES BASED ON SCREEN WIDTH GOES HERE*/
|
||||
.mainGrid {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
justify-items: center;
|
||||
grid-gap: 1rem;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
.layer {
|
||||
padding: 2rem;
|
||||
}
|
||||
.cardLayerGrid {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
grid-template-columns: auto;
|
||||
grid-gap: 1rem;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
}
|
||||
.cardLayerGrid > img {
|
||||
width: 300pt;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.truncate {
|
||||
word-break: break-word;
|
||||
canvas {
|
||||
width: 100%;
|
||||
}
|
||||
.footer {
|
||||
padding: 1rem;
|
||||
background: var(--background-color-contrast);
|
||||
background-size: 100% 100%;
|
||||
color: var(--font-color-contrast);
|
||||
font: 0.6rem arial;
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-row-gap: 1rem;
|
||||
}
|
||||
.footer > div > select {
|
||||
width: auto !important;
|
||||
}
|
||||
@media screen and (min-width: 909pt) { /*Screen is wide enough to show the card next to the editor menu*/
|
||||
.mainGrid {
|
||||
grid-template-columns: 750px auto;
|
||||
justify-items: stretch;
|
||||
/*padding: 0 1rem 1rem 1rem;*/
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 800pt) { /*Screen is wide enough for cardLayerGrids to display side by side, and for more padding*/
|
||||
.cardLayerGrid {
|
||||
grid-template-columns: auto auto;
|
||||
}
|
||||
.layer {
|
||||
padding: 4rem;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 618pt) { /*Screen is wide enough for padding*/
|
||||
.mainGrid {
|
||||
padding: 1rem 1rem;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 768px) { /*Screen is wide enough for the card image to be 750px wide. Scrollbar is 18 pixels?*/
|
||||
canvas {
|
||||
width: 750px;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 450pt) { /*Screen is wide enough for the footer to display horizontally*/
|
||||
.footer {
|
||||
padding: 2rem;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 392pt) { /*Screen is wide enough for the samples to be a constant size*/
|
||||
.cardLayerGrid > img {
|
||||
width: 300pt;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 300pt) { /*Screen is wide enough for larger text*/
|
||||
html {
|
||||
font: 20pt georgia;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user