pokerogue/index.css

263 lines
5.4 KiB
CSS

: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;
display:flex;
flex-direction: column;
align-items: center;
background: #484050;
}
#links {
width: 90%;
text-align: center;
position: fixed;
bottom: 0;
display: flex;
justify-content: space-around;
}
#app {
display: flex;
justify-content: center;
}
#app > div:first-child {
transform-origin: top !important;
}
/* Need adjust input font-size */
input {
font-size: 3.2rem;
}
#touchControls:not(.visible) {
display: none;
}
#dpad, #apad {
position: fixed;
bottom: 1rem;
z-index: 3;
}
@media (orientation: portrait) {
#dpad, #apad {
bottom: calc(1rem + env(safe-area-inset-bottom));
}
}
#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;
}
#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;
text-align: center;
padding-right: 10%;
border-radius: 10%;
bottom: calc(var(--controls-size) * 0.05);
width: calc(var(--controls-size) * 0.6);
height: calc(var(--controls-size) * 0.3);
}
#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;
}
#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 {
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);
}
#apad .apadRectBtnContainer > #apadMenu {
align-self: flex-end;
}
#apad .apadRectBtnContainer > .apadSqBtn:not(:first-child) {
margin-left: 10%;
}
#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)
{
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 {
display: none;
}
#apad .apadRectBtnContainer + .apadSqBtnContainer {
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;
}
#layout:fullscreen #dpad, #layout:fullscreen #apad {
bottom: 6rem;
}
input:-internal-autofill-selected {
-webkit-background-clip: text;
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 */
}