pokerogue/index.css

252 lines
5.2 KiB
CSS
Raw Normal View History

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;
}
/* Need adjust input font-size */
input {
font-size: 3.2rem;
}
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 {
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) {
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)
{
2023-12-25 20:03:50 +00:00
display: none;
}
#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) {
opacity: 0.6;
2023-12-25 20:03:50 +00:00
}
#layout:fullscreen #dpad, #layout:fullscreen #apad {
bottom: 6rem;
}
input:-internal-autofill-selected {
-webkit-background-clip: text;
2024-02-20 05:02:44 +00:00
background-clip: text;
}
#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 */
}