mirror of
https://github.com/pagefaultgames/pokerogue.git
synced 2024-11-25 16:26:25 +00:00
391 lines
8.3 KiB
CSS
391 lines
8.3 KiB
CSS
/* Global */
|
|
:root {
|
|
--color-base: hsl(0, 0%, 55%);
|
|
--color-light: hsl(0, 0%, 90%);
|
|
--color-dark: hsl(0, 0%, 10%);
|
|
}
|
|
|
|
html {
|
|
touch-action: none;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
display:flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background: #484050;
|
|
}
|
|
|
|
@media (display-mode: fullscreen) {
|
|
body {
|
|
background: #000000;
|
|
}
|
|
}
|
|
|
|
#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;
|
|
}
|
|
|
|
#layout:fullscreen #dpad, #layout:fullscreen {
|
|
bottom: 6rem;
|
|
}
|
|
|
|
input:-internal-autofill-selected {
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* Need adjust input font-size */
|
|
input {
|
|
font-size: 3.2rem;
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
|
|
input:-internal-autofill-selected {
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* Touch Controls: */
|
|
|
|
#touchControls {
|
|
--text-shadow-size: 0.65vh;
|
|
--controls-size: 10vh;
|
|
--touch-control-opacity: 0.6;
|
|
|
|
--controls-padding: 1rem;
|
|
|
|
--controls-size-with-padding: calc(var(--controls-size) + var(--controls-padding));
|
|
--controls-size-with-wide-padding: calc(var(--controls-size) *1.2 + var(--controls-padding));
|
|
--control-group-extra-size: calc(var(--controls-size) * 0.8);
|
|
--control-group-extra-wide-size: calc(var(--controls-size) * 1.2);
|
|
|
|
--control-group-extra-2-offset: calc(var(--controls-size-with-padding) + (var(--controls-size) - var(--control-group-extra-size)) / 2);
|
|
--control-group-extra-1-offset: calc(var(--controls-padding) + (var(--controls-size) - var(--control-group-extra-size)) / 2);
|
|
|
|
--small-control-size: calc(var(--controls-size) / 3);
|
|
--rect-control-size: calc(var(--controls-size) * 0.74);
|
|
|
|
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);
|
|
}
|
|
|
|
@media (orientation: landscape) {
|
|
#touchControls {
|
|
--controls-size: 20vh;
|
|
--text-shadow-size: 1.3vh;
|
|
--small-button-offset: 4vh;
|
|
}
|
|
}
|
|
|
|
#touchControls:not(.visible) {
|
|
display: none;
|
|
}
|
|
|
|
#touchControls .active {
|
|
opacity: var(--touch-control-opacity);
|
|
}
|
|
|
|
.control-group {
|
|
position: fixed;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
width: var(--controls-size);
|
|
}
|
|
|
|
.control-group-dpad {
|
|
width: calc(2 * var(--controls-size));
|
|
height: calc(2 * var(--controls-size));
|
|
}
|
|
|
|
.control-group-extra {
|
|
width: var(--control-group-extra-size);
|
|
height: var(--control-group-extra-size);
|
|
}
|
|
|
|
/* Hide buttons on specific UIs */
|
|
|
|
/* Show #apadPreviousTab and #apadNextTab only in settings, except in touch configuration panel */
|
|
#touchControls:not([data-ui-mode^='SETTINGS']) #apadPreviousTab,
|
|
#touchControls:not([data-ui-mode^='SETTINGS']) #apadNextTab,
|
|
#touchControls:is(.config-mode) #apadPreviousTab,
|
|
#touchControls:is(.config-mode) #apadNextTab {
|
|
display: none;
|
|
}
|
|
|
|
/* Show #apadInfo only in battle */
|
|
#touchControls:not([data-ui-mode='COMMAND']):not([data-ui-mode='FIGHT']):not([data-ui-mode='BALL']):not([data-ui-mode='TARGET_SELECT']) #apadInfo {
|
|
display: none;
|
|
}
|
|
|
|
/* Show #apadStats only in battle and shop */
|
|
#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']) #apadStats {
|
|
display: none;
|
|
}
|
|
|
|
/* Show cycle buttons only on STARTER_SELECT and on touch configuration panel */
|
|
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadOpenFilters,
|
|
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleForm,
|
|
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleShiny,
|
|
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleNature,
|
|
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleAbility,
|
|
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleGender,
|
|
#touchControls:not(.config-mode):not([data-ui-mode='STARTER_SELECT']) #apadCycleVariant {
|
|
display: none;
|
|
}
|
|
|
|
/* Configuration toolbar */
|
|
|
|
#configToolbar {
|
|
width: 100%;
|
|
position: fixed;
|
|
top: 1rem;
|
|
left: 0;
|
|
z-index: 9;
|
|
user-select: none;
|
|
}
|
|
|
|
#configToolbar .column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10%;
|
|
padding: 0 var(--controls-padding);
|
|
}
|
|
|
|
#configToolbar .button-row {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
width: 100%;
|
|
}
|
|
|
|
#configToolbar .info-row {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
}
|
|
|
|
#configToolbar .button {
|
|
z-index: 3;
|
|
background-color: var(--color-base);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
border-radius: 10%;
|
|
height: var(--small-control-size);
|
|
font-size: var(--small-control-size);
|
|
border-radius: 8px;
|
|
padding: 2px 8px;
|
|
text-shadow: var(--color-dark) calc(var(--text-shadow-size) / 3) calc(var(--text-shadow-size) / 3);
|
|
}
|
|
|
|
#configToolbar .button:active {
|
|
opacity: var(--touch-control-opacity)
|
|
}
|
|
|
|
#configToolbar .orientation-label {
|
|
font-size: var(--small-control-size);
|
|
text-shadow: var(--color-dark) calc(var(--text-shadow-size) / 3) calc(var(--text-shadow-size) / 3);
|
|
}
|
|
|
|
/* dpad */
|
|
#dpad {
|
|
z-index: 3;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
#dpad svg {
|
|
width: calc(2 * var(--controls-size));
|
|
height: calc(2 * var(--controls-size));
|
|
fill: var(--color-base);
|
|
}
|
|
|
|
/* apad buttons */
|
|
|
|
.apad-button {
|
|
background-color: var(--color-base);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
right: 0;
|
|
bottom: 0;
|
|
width: var(--controls-size);
|
|
height: var(--controls-size);
|
|
opacity: 0.8;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.apad-small {
|
|
width: var(--small-control-size);
|
|
height: var(--small-control-size);
|
|
}
|
|
|
|
.apad-label {
|
|
user-select: none;
|
|
height: 100%;
|
|
margin-right: -2px;
|
|
}
|
|
|
|
.apad-small > .apad-label {
|
|
font-size: var(--small-control-size);
|
|
text-shadow: var(--color-dark) calc(var(--text-shadow-size) / 3) calc(var(--text-shadow-size) / 3);
|
|
}
|
|
|
|
.apad-rectangle {
|
|
text-align: center;
|
|
width: var(--rect-control-size);
|
|
height: var(--small-control-size);
|
|
}
|
|
|
|
.apad-square {
|
|
width: var(--small-control-size);
|
|
height: var(--small-control-size);
|
|
}
|
|
|
|
.apad-circle {
|
|
width: var(--controls-size);
|
|
height: var(--controls-size);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Defaults:*/
|
|
|
|
#control-group-dpad {
|
|
left: var(--controls-padding);
|
|
bottom: var(--controls-padding);
|
|
}
|
|
|
|
#control-group-action {
|
|
right: var(--controls-padding);
|
|
bottom: var(--controls-size-with-padding);
|
|
}
|
|
|
|
#control-group-cancel {
|
|
right: var(--controls-size-with-wide-padding);
|
|
bottom: var(--controls-padding);
|
|
}
|
|
|
|
#control-group-extra-1 {
|
|
right: var(--control-group-extra-1-offset);
|
|
bottom: var(--control-group-extra-1-offset);
|
|
}
|
|
|
|
#control-group-extra-2 {
|
|
width: var(--control-group-extra-wide-size);
|
|
right: var(--control-group-extra-2-offset);
|
|
bottom: var(--control-group-extra-2-offset);
|
|
}
|
|
|
|
/* Layout */
|
|
|
|
#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%;
|
|
}
|
|
}
|
|
|
|
#tnc-links {
|
|
font-size: xx-small;
|
|
position: relative;
|
|
}
|
|
|
|
a {
|
|
color: #328cea;
|
|
margin-right: 4px;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
/* 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 */
|
|
}
|