2023-12-25 20:03:50 +00:00
|
|
|
:root {
|
|
|
|
--color-base: hsl(0, 0%, 55%);
|
|
|
|
--color-light: hsl(0, 0%, 90%);
|
|
|
|
--color-dark: hsl(0, 0%, 10%);
|
|
|
|
--controls-size: 10vh;
|
|
|
|
--text-shadow-size: 0.65vh;
|
|
|
|
}
|
|
|
|
|
|
|
|
@media (orientation: landscape) {
|
|
|
|
:root {
|
|
|
|
--controls-size: 20vh;
|
|
|
|
--text-shadow-size: 1.3vh;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
html {
|
|
|
|
touch-action: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
body {
|
|
|
|
margin: 0;
|
|
|
|
background: #484050;
|
|
|
|
}
|
|
|
|
|
|
|
|
#app {
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
|
2023-12-30 23:41:25 +00:00
|
|
|
#app > div:first-child {
|
|
|
|
transform-origin: top !important;
|
|
|
|
}
|
|
|
|
|
2023-12-25 20:03:50 +00:00
|
|
|
#touchControls:not(.visible) {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
#dpad, #apad {
|
|
|
|
position: fixed;
|
|
|
|
bottom: 1rem;
|
|
|
|
z-index: 3;
|
|
|
|
}
|
|
|
|
|
2024-04-09 03:22:15 +00:00
|
|
|
@media (orientation: portrait) {
|
|
|
|
#dpad, #apad {
|
|
|
|
bottom: calc(1rem + env(safe-area-inset-bottom));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-12-25 20:03:50 +00:00
|
|
|
#dpad {
|
|
|
|
left: 1rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
#apad {
|
|
|
|
right: 1rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
#dpad svg {
|
|
|
|
width: calc(2 * var(--controls-size));
|
|
|
|
height: calc(2 * var(--controls-size));
|
|
|
|
fill: var(--color-base);
|
|
|
|
}
|
|
|
|
|
|
|
|
#dpad svg rect {
|
2024-04-01 01:14:35 +00:00
|
|
|
opacity: 0.6;
|
2023-12-25 20:03:50 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
#apad > * {
|
|
|
|
width: var(--controls-size);
|
|
|
|
height: var(--controls-size);
|
|
|
|
}
|
|
|
|
|
|
|
|
#apad .apadBtn {
|
|
|
|
width: var(--controls-size);
|
|
|
|
height: var(--controls-size);
|
|
|
|
background-color: var(--color-base);
|
|
|
|
border-radius: 50%;
|
|
|
|
}
|
|
|
|
|
|
|
|
#apad .apadLabel {
|
|
|
|
font-family: 'emerald';
|
|
|
|
font-size: var(--controls-size);
|
|
|
|
text-shadow: var(--color-dark) var(--text-shadow-size) var(--text-shadow-size);
|
|
|
|
color: var(--color-light);
|
|
|
|
user-select: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
#apad .apadLabelSmall {
|
|
|
|
font-size: calc(var(--controls-size) / 3);
|
|
|
|
text-shadow: var(--color-dark) calc(var(--text-shadow-size) / 3) calc(var(--text-shadow-size) / 3);
|
|
|
|
}
|
|
|
|
|
|
|
|
#apad #apadLabelAction, #apad #apadLabelCancel {
|
|
|
|
margin-left: calc(var(--controls-size) / 3);
|
|
|
|
line-height: 0.9;
|
|
|
|
}
|
|
|
|
|
|
|
|
#apad > :nth-child(2) {
|
|
|
|
position: relative;
|
|
|
|
right: var(--controls-size);
|
|
|
|
}
|
|
|
|
|
|
|
|
#apad .apadRectBtn {
|
|
|
|
position: relative;
|
2024-01-06 03:24:05 +00:00
|
|
|
text-align: center;
|
|
|
|
padding-right: 10%;
|
2023-12-25 20:03:50 +00:00
|
|
|
border-radius: 10%;
|
|
|
|
bottom: calc(var(--controls-size) * 0.05);
|
|
|
|
width: calc(var(--controls-size) * 0.6);
|
2024-01-06 03:24:05 +00:00
|
|
|
height: calc(var(--controls-size) * 0.3);
|
2023-12-25 20:03:50 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
#apad .apadSqBtn {
|
|
|
|
border-radius: 10%;
|
|
|
|
width: calc(var(--controls-size) * 0.3);
|
|
|
|
height: calc(var(--controls-size) * 0.3);
|
|
|
|
}
|
|
|
|
|
|
|
|
#apad .apadBtnContainer {
|
|
|
|
position: relative;
|
|
|
|
display: flex;
|
2024-01-06 03:24:05 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
#apad .apadRectBtnContainer {
|
|
|
|
flex-wrap: wrap;
|
|
|
|
margin-top: calc(var(--controls-size) * -0.8);
|
|
|
|
left: calc(var(--controls-size) * 0.175);
|
|
|
|
height: calc(var(--controls-size) * 0.8);
|
|
|
|
}
|
|
|
|
|
|
|
|
#apad .apadSqBtnContainer {
|
2023-12-25 20:03:50 +00:00
|
|
|
flex-wrap: wrap;
|
|
|
|
justify-content: space-evenly;
|
|
|
|
align-items: center;
|
|
|
|
margin-bottom: calc(var(--controls-size) * -0.8);
|
|
|
|
top: calc(var(--controls-size) * -0.9);
|
|
|
|
width: calc(var(--controls-size) * 0.8);
|
|
|
|
height: calc(var(--controls-size) * 0.8);
|
|
|
|
}
|
|
|
|
|
2024-01-06 03:24:05 +00:00
|
|
|
#apad .apadRectBtnContainer > #apadMenu {
|
|
|
|
align-self: flex-end;
|
|
|
|
}
|
|
|
|
|
2024-04-19 02:52:26 +00:00
|
|
|
#apad .apadRectBtnContainer > .apadSqBtn:not(:first-child) {
|
2024-04-19 14:23:18 +00:00
|
|
|
margin-left: 10%;
|
2024-04-19 02:52:26 +00:00
|
|
|
}
|
|
|
|
|
2024-06-07 00:57:12 +00:00
|
|
|
#touchControls:not([data-ui-mode='STARTER_SELECT']):not([data-ui-mode='SETTINGS']):not([data-ui-mode='SETTINGS_DISPLAY']):not([data-ui-mode='SETTINGS_AUDIO']):not([data-ui-mode='SETTINGS_GAMEPAD']):not([data-ui-mode='SETTINGS_KEYBOARD']) #apad .apadRectBtnContainer > .apadSqBtn:not(.apadBattle),
|
|
|
|
#touchControls:not([data-ui-mode='STARTER_SELECT']):not([data-ui-mode='SETTINGS']):not([data-ui-mode='SETTINGS_DISPLAY']):not([data-ui-mode='SETTINGS_AUDIO']):not([data-ui-mode='SETTINGS_GAMEPAD']):not([data-ui-mode='SETTINGS_KEYBOARD']) #apad .apadSqBtnContainer > .apadSqBtn:not(.apadBattle)
|
2024-06-01 12:56:32 +00:00
|
|
|
{
|
2023-12-25 20:03:50 +00:00
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
2024-06-07 00:20:13 +00:00
|
|
|
#touchControls:not([data-ui-mode='COMMAND']):not([data-ui-mode='FIGHT']):not([data-ui-mode='BALL']):not([data-ui-mode='TARGET_SELECT']):not([data-ui-mode='MODIFIER_SELECT']) #apad .apadBattle {
|
2024-05-01 03:02:16 +00:00
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
2024-01-06 03:24:05 +00:00
|
|
|
#apad .apadRectBtnContainer + .apadSqBtnContainer {
|
2023-12-25 20:03:50 +00:00
|
|
|
top: calc(var(--controls-size) * -1.9);
|
|
|
|
left: calc(var(--controls-size) * -0.9);
|
|
|
|
}
|
|
|
|
|
|
|
|
#apad .apadBtnContainer .apadLabel {
|
|
|
|
margin-left: calc(var(--controls-size) / 12);
|
|
|
|
line-height: 0.8;
|
|
|
|
}
|
|
|
|
|
|
|
|
#dpad path:not(.active), #apad .apadBtn:not(.active) {
|
2024-04-01 01:14:35 +00:00
|
|
|
opacity: 0.6;
|
2023-12-25 20:03:50 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
#layout:fullscreen #dpad, #layout:fullscreen #apad {
|
|
|
|
bottom: 6rem;
|
2024-02-20 02:09:06 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
input:-internal-autofill-selected {
|
|
|
|
-webkit-background-clip: text;
|
2024-02-20 05:02:44 +00:00
|
|
|
background-clip: text;
|
2024-06-01 12:56:32 +00:00
|
|
|
}
|
|
|
|
#banner {
|
|
|
|
display: none;
|
|
|
|
position: absolute;
|
|
|
|
top: 33.2%;
|
|
|
|
left: 0;
|
|
|
|
text-align: center;
|
|
|
|
z-index: 1000; /* Ensures the banner is on top of other elements */
|
|
|
|
& > img {
|
|
|
|
opacity: 50%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Firefox old*/
|
|
|
|
@-moz-keyframes blink {
|
|
|
|
0% {
|
|
|
|
opacity:1;
|
|
|
|
}
|
|
|
|
50% {
|
|
|
|
opacity:0;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity:1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@-webkit-keyframes blink {
|
|
|
|
0% {
|
|
|
|
opacity:1;
|
|
|
|
}
|
|
|
|
50% {
|
|
|
|
opacity:0;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity:1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
/* IE */
|
|
|
|
@-ms-keyframes blink {
|
|
|
|
0% {
|
|
|
|
opacity:1;
|
|
|
|
}
|
|
|
|
50% {
|
|
|
|
opacity:0;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity:1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
/* Opera and prob css3 final iteration */
|
|
|
|
@keyframes blink {
|
|
|
|
0% {
|
|
|
|
opacity:1;
|
|
|
|
}
|
|
|
|
50% {
|
|
|
|
opacity:0;
|
|
|
|
}
|
|
|
|
100% {
|
|
|
|
opacity:1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.blink-image {
|
|
|
|
-moz-animation: blink normal 4s infinite ease-in-out; /* Firefox */
|
|
|
|
-webkit-animation: blink normal 4s infinite ease-in-out; /* Webkit */
|
|
|
|
-ms-animation: blink normal 4s infinite ease-in-out; /* IE */
|
|
|
|
animation: blink normal 4s infinite ease-in-out; /* Opera and prob css3 final iteration */
|
2024-06-12 17:11:30 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
input {
|
|
|
|
font-size: 16px;
|
2023-12-25 20:03:50 +00:00
|
|
|
}
|