134 lines
4.1 KiB
CSS
134 lines
4.1 KiB
CSS
@charset "UTF-8";
|
|
|
|
body, html {
|
|
height: 100%;
|
|
}
|
|
|
|
#main {
|
|
min-height: 90%;
|
|
background-image: url("/img/noise.png");
|
|
background-repeat: repeat;
|
|
}
|
|
|
|
.footer {
|
|
color: white;
|
|
background-image: linear-gradient(#2367a9, #050a30);
|
|
}
|
|
|
|
/* https://www.w3schools.com/howto/howto_css_zoom_hover.asp */
|
|
.zoom {
|
|
transition: transform .2s; /* Animation */
|
|
width: auto;
|
|
height: auto;
|
|
}
|
|
|
|
.zoom:hover {
|
|
/* (1000% zoom - Note: if the zoom is too large, it will go outside of the viewport)
|
|
TranslateX by 50% to prevent overflow */
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
/* https://htmx.org/attributes/hx-indicator/ */
|
|
.htmx-indicator{
|
|
display:none;
|
|
opacity:0;
|
|
transition: opacity 500ms ease-in;
|
|
}
|
|
.htmx-request .htmx-indicator{
|
|
display:inline-block;
|
|
opacity:1;
|
|
}
|
|
.htmx-request.htmx-indicator{
|
|
display:inline-block;
|
|
opacity:1;
|
|
}
|
|
|
|
/*********************************************************************************/
|
|
.htmx-swapping div, tr.htmx-swapping td {
|
|
opacity: 0;
|
|
transition: opacity 1s ease-out;
|
|
}
|
|
|
|
/*********************************************************************************/
|
|
/* <https://yugioh.fandom.com/wiki/Card_colors> */
|
|
.main-deck-list {
|
|
color: #000;
|
|
background-color: #FF8B53;
|
|
background-image: url("/img/noise.png");
|
|
background-blend-mode: overlay;
|
|
}
|
|
.extra-deck-list {
|
|
color: #000;
|
|
background-color: #BC5A84;
|
|
background-image: url("/img/noise.png");
|
|
background-blend-mode: overlay;
|
|
}
|
|
.side-deck-list {
|
|
color: #000;
|
|
background-color: #1D9E74;
|
|
background-image: url("/img/noise.png");
|
|
background-blend-mode: overlay;
|
|
}
|
|
|
|
/*********************************************************************************/
|
|
/* background-image: url("/img/noise.png"), linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)); */
|
|
.effect {color: #000; background-color: #FF8B53; background-image: url("/img/noise.png"); }
|
|
.fusion {color: #000; background-color: #A086B7; background-image: url("/img/noise.png"); }
|
|
.link {color: #fff; background-color: #00008B; background-image: url("/img/noise.png"); }
|
|
.normal {color: #000; background-color: #FDE68A; background-image: url("/img/noise.png"); }
|
|
.ritual {color: #000; background-color: #9DB5CC; background-image: url("/img/noise.png"); }
|
|
.skill {color: #fff; background-color: #078cc4; background-image: url("/img/noise.png"); }
|
|
.spell {color: #fff; background-color: #1D9E74; background-image: url("/img/noise.png"); }
|
|
.synchro {color: #000; background-color: #CCCCCC; background-image: url("/img/noise.png"); }
|
|
.token {color: #000; background-color: #C0C0C0; background-image: url("/img/noise.png"); }
|
|
.trap {color: #fff; background-color: #BC5A84; background-image: url("/img/noise.png"); }
|
|
.xyz {color: #fff; background-color: #000; background-image: url("/img/noise.png"); }
|
|
|
|
/*********************************************************************************/
|
|
.effect_pendulum {
|
|
color: #000;
|
|
background-color: #1d9e74;
|
|
background-image: url("/img/noise.png"), linear-gradient(#ff8b53 20%, rgba(0,0,0,0) 100%);
|
|
background-blend-mode: normal;
|
|
}
|
|
.fusion_pendulum {
|
|
color: #000;
|
|
background-color: #1d9e74;
|
|
background-image: url("/img/noise.png"), linear-gradient(#a086b7 20%, rgba(0,0,0,0) 100%);
|
|
background-blend-mode: normal;
|
|
}
|
|
.normal_pendulum {
|
|
color: #000;
|
|
background-color: #1d9e74;
|
|
background-image: url("/img/noise.png"), linear-gradient(#fde68a 20%, rgba(0,0,0,0) 100%);
|
|
background-blend-mode: normal;
|
|
}
|
|
.ritual_pendulum {
|
|
color: #000;
|
|
background-color: #1d9e74;
|
|
background-image: url("/img/noise.png"), linear-gradient(#9db5cc 20%, rgba(0,0,0,0) 100%);
|
|
background-blend-mode: normal;
|
|
}
|
|
.synchro_pendulum {
|
|
color: #000;
|
|
background-color: #1d9e74;
|
|
background-image: url("/img/noise.png"), linear-gradient(#cccccc 20%, rgba(0,0,0,0) 100%);
|
|
background-blend-mode: normal;
|
|
}
|
|
.xyz_pendulum {
|
|
color: #fff;
|
|
background-color: #1d9e74;
|
|
background-image: url("/img/noise.png"), linear-gradient(#000 20%, rgba(0,0,0,0) 100%);
|
|
background-blend-mode: normal;
|
|
}
|
|
|
|
input[type=number] {
|
|
-moz-appearance: textfield;
|
|
appearance: textfield;
|
|
margin: 0;
|
|
}
|
|
|
|
[data-loading] {
|
|
display: none;
|
|
}
|