pokerogue/index.css

170 lines
3.3 KiB
CSS
Raw Normal View History

2023-12-25 12:03:50 -08: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 15:41:25 -08:00
#app > div:first-child {
transform-origin: top !important;
}
2023-12-25 12:03:50 -08:00
#touchControls:not(.visible) {
display: none;
}
#dpad, #apad {
position: fixed;
bottom: 1rem;
z-index: 3;
}
2024-04-08 20:22:15 -07:00
@media (orientation: portrait) {
#dpad, #apad {
bottom: calc(1rem + env(safe-area-inset-bottom));
}
}
2023-12-25 12:03:50 -08: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 12:03:50 -08: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-05 19:24:05 -08:00
text-align: center;
padding-right: 10%;
2023-12-25 12:03:50 -08:00
border-radius: 10%;
bottom: calc(var(--controls-size) * 0.05);
width: calc(var(--controls-size) * 0.6);
2024-01-05 19:24:05 -08:00
height: calc(var(--controls-size) * 0.3);
2023-12-25 12:03:50 -08: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-05 19:24:05 -08: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 12:03:50 -08: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-05 19:24:05 -08:00
#apad .apadRectBtnContainer > #apadMenu {
align-self: flex-end;
}
#touchControls:not([data-ui-mode='STARTER_SELECT']) #apad .apadRectBtnContainer > #apadCycleNature, #touchControls:not([data-ui-mode='STARTER_SELECT']) #apad .apadSqBtnContainer {
2023-12-25 12:03:50 -08:00
display: none;
}
2024-01-05 19:24:05 -08:00
#apad .apadRectBtnContainer + .apadSqBtnContainer {
2023-12-25 12:03:50 -08: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 12:03:50 -08:00
}
#layout:fullscreen #dpad, #layout:fullscreen #apad {
bottom: 6rem;
}
input:-internal-autofill-selected {
-webkit-background-clip: text;
2024-02-19 21:02:44 -08:00
background-clip: text;
2023-12-25 12:03:50 -08:00
}