1
0
Fork 0
forked from Simnation/Main
Main/resources/[test]/nv_atm/html/assets/css/style.css
2025-06-07 08:51:21 +02:00

639 lines
15 KiB
CSS

@import 'https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap';
*{margin:0;padding:0;border:0;outline:0;text-decoration:none;line-height:inherit;vertical-align:inherit;}h1,h2,h3,h4,h5,h6{font-weight:normal;}ul{list-style:none;}
*{font-family: 'Mulish', sans-serif;}
*{box-sizing: border-box;}
html{display: none;}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
background-repeat: no-repeat;
background-size: cover;
/*background-image: url("../img/bg3.jpg");*/
}
.buttons button {
position: absolute;
width: 2.3vw;
height: 1.9vw;
background: transparent;
cursor: pointer;
border-radius: 0.2vw;
}
.buttons button:active {
background: #00000020;
box-shadow: 0px 0px 0.4vw #00000010;
}
/*- prop_atm_01 -*/
body.prop_atm_01 .buttons button{
}
body.prop_atm_01 .buttons .left-side button:nth-child(1) {left: 33vw;top: 20.5vw;}
body.prop_atm_01 .buttons .left-side button:nth-child(2) {left: 33vw;top: 23vw;}
body.prop_atm_01 .buttons .left-side button:nth-child(3) {left: 33.4vw;top: 26.6vw;}
body.prop_atm_01 .buttons .left-side button:nth-child(4) {left: 33.6vw;top: 29.6vw;}
body.prop_atm_01 .buttons .right-side button:nth-child(1) {left: 55.8vw;
top: 20.4vw;}
body.prop_atm_01 .buttons .right-side button:nth-child(2) {left: 55.8vw;top: 23.1vw;}
body.prop_atm_01 .buttons .right-side button:nth-child(3) {left: 55.7vw;
top: 26.5vw;}
body.prop_atm_01 .buttons .right-side button:nth-child(4) {left: 55.6vw;
top: 29.5vw;}
body.prop_atm_01 .buttons .numbers button{
transform: none;
}
body.prop_atm_01 .buttons .numbers button:nth-child(1) {left: 42.15vw;top: 40.6vw;}
body.prop_atm_01 .buttons .numbers button:nth-child(2) {left: 44.6vw;top: 40.6vw;}
body.prop_atm_01 .buttons .numbers button:nth-child(3) {left: 46.8vw;top: 40.6vw;}
body.prop_atm_01 .buttons .numbers button:nth-child(4) {left: 42.0vw;top: 42.7vw;}
body.prop_atm_01 .buttons .numbers button:nth-child(5) {left: 44.4vw;top: 42.7vw;}
body.prop_atm_01 .buttons .numbers button:nth-child(6) {left: 46.8vw;top: 42.7vw;}
body.prop_atm_01 .buttons .numbers button:nth-child(7) {left: 41.7vw;top: 44.9vw;}
body.prop_atm_01 .buttons .numbers button:nth-child(8) {left: 44.2vw;top: 44.9vw;}
body.prop_atm_01 .buttons .numbers button:nth-child(9) {left: 46.7vw;top: 44.9vw;}
body.prop_atm_01 .buttons .numbers button:nth-child(12) { left: 46.7vw;
top: 47.35vw;}
body.prop_atm_01 .buttons .numbers button:nth-child(11) {left: 44.1vw;
top: 47.3vw;}
body.prop_atm_01 .buttons .numbers button:nth-child(10) {left: 41.5vw;
top: 47.3vw;}
body.prop_atm_01 .card {left: 65.5vw;
top: 22.6vw;
width: 8vw;
height: 5vw;
}
body.prop_atm_01 .atm-item{
width: 7vw;
}
body.prop_atm_01 .atm-item p{
font-size: 0.6vw;
}
body.prop_atm_01 .atm-item.left{background: linear-gradient(-90deg, #5489b7 0%, rgba(255, 255, 255, 0) 100%);}
body.prop_atm_01 .atm-item.right{background: linear-gradient(90deg, #5489b7 0%, rgba(255, 255, 255, 0) 100%);}
body.prop_atm_01 .atm-item.left.a{margin-left: -10.7vw;
margin-top: -8.0vw;}
body.prop_atm_01 .atm-item.left.b{margin-left: -11vw;
margin-top: -2.7vw;}
body.prop_atm_01 .atm-item.left.c{margin-left: -11vw;
margin-top: 4.3vw;}
body.prop_atm_01 .atm-item.right.d{}
body.prop_atm_01 .atm-item.right.e{
margin-left: 11.8vw;
margin-top: -8.3vw;
}
body.prop_atm_01 .atm-item.right.f{margin-left: 11.6vw;
margin-top: -2.65vw;}
body.prop_atm_01 .atm-item.right.g{margin-left: 11.2vw;
margin-top: 3.9vw;}
body.prop_atm_01 .atm-item.right.h{ margin-left: 11vw;
margin-top: 9.9vw;}
/*- prop_atm_02 -*/
body.prop_atm_02 .buttons .left-side button:nth-child(1) {left: 28.1vw;top: 19vw;}
body.prop_atm_02 .buttons .left-side button:nth-child(2) {left: 28.3vw;top: 23vw;}
body.prop_atm_02 .buttons .left-side button:nth-child(3) {left: 28.7vw;top: 27.4vw;}
body.prop_atm_02 .buttons .left-side button:nth-child(4) {left: 29vw;top: 31.25vw;}
body.prop_atm_02 .buttons .right-side button:nth-child(1) {left: 53.6vw;top: 19vw;}
body.prop_atm_02 .buttons .right-side button:nth-child(2) {left: 53.5vw;top: 23.1vw;}
body.prop_atm_02 .buttons .right-side button:nth-child(3) {left: 53.4vw;top: 27.3vw;}
body.prop_atm_02 .buttons .right-side button:nth-child(4) {left: 53.3vw;top: 31.4vw;}
body.prop_atm_02 .buttons .numbers button:nth-child(1) {left: 37.15vw;top: 43vw;}
body.prop_atm_02 .buttons .numbers button:nth-child(2) {left: 39.4vw;top: 43vw;}
body.prop_atm_02 .buttons .numbers button:nth-child(3) {left: 41.6vw;top: 43vw;}
body.prop_atm_02 .buttons .numbers button:nth-child(4) {left: 36.6vw;top: 45.4vw;}
body.prop_atm_02 .buttons .numbers button:nth-child(5) {left: 39vw;top: 45.4vw;}
body.prop_atm_02 .buttons .numbers button:nth-child(6) {left: 41.4vw;top: 45.4vw;}
body.prop_atm_02 .buttons .numbers button:nth-child(7) {left: 35.9vw;top: 48vw;}
body.prop_atm_02 .buttons .numbers button:nth-child(8) {left: 38.4vw;top: 48vw;}
body.prop_atm_02 .buttons .numbers button:nth-child(9) {left: 40.9vw;top: 48vw;}
body.prop_atm_02 .buttons .numbers button:nth-child(10) {left: 44.1vw;top: 43vw;}
body.prop_atm_02 .buttons .numbers button:nth-child(11) {left: 37.8vw;top: 51vw;}
body.prop_atm_02 .buttons .numbers button:nth-child(12) {left: 43.4vw;top: 48vw;}
body.prop_atm_02 .card {left: 64vw;top: 20.6vw;}
body.prop_atm_01 .screen img, body.prop_atm_01 .scr {
left: 36.3vw;
width: 18.3vw;
height: 14.8vw;
top: 18vw;
filter: drop-shadow(0px 0px 2vw #1763e690);
}
/*- prop_atm_03 -*/
body.prop_atm_03 .buttons .left-side button:nth-child(1) {
left: 27.5vw;
top: 19vw;
}
body.prop_atm_03 .buttons .left-side button:nth-child(2) {
left: 27.8vw;
top: 23vw;
}
body.prop_atm_03 .buttons .left-side button:nth-child(3) {
left: 28vw;
top: 27.4vw;
}
body.prop_atm_03 .buttons .left-side button:nth-child(4) {
left: 28.5vw;
top: 31.25vw;
}
body.prop_atm_03 .buttons .right-side button:nth-child(1) {
left: 53.6vw;
top: 19vw;
}
body.prop_atm_03 .buttons .right-side button:nth-child(2) {
left: 53.5vw;
top: 23.1vw;
}
body.prop_atm_03 .buttons .right-side button:nth-child(3) {
left: 53.4vw;
top: 27.3vw;
}
body.prop_atm_03 .buttons .right-side button:nth-child(4) {
left: 53.3vw;
top: 31.4vw;
}
body.prop_atm_03 .buttons .numbers button:nth-child(1) {
left: 37.15vw;
top: 43.3vw;
}
body.prop_atm_03 .buttons .numbers button:nth-child(2) {
left: 39.4vw;
top: 43.3vw;
}
body.prop_atm_03 .buttons .numbers button:nth-child(3) {
left: 41.6vw;
top: 43.3vw;
}
body.prop_atm_03 .buttons .numbers button:nth-child(4) {
left: 36.6vw;
top: 45.7vw;
}
body.prop_atm_03 .buttons .numbers button:nth-child(5) {
left: 39vw;
top: 45.7vw;
}
body.prop_atm_03 .buttons .numbers button:nth-child(6) {
left: 41.4vw;
top: 45.7vw;
}
body.prop_atm_03 .buttons .numbers button:nth-child(7) {
left: 35.9vw;
top: 48.3vw;
}
body.prop_atm_03 .buttons .numbers button:nth-child(8) {
left: 38.4vw;
top: 48.3vw;
}
body.prop_atm_03 .buttons .numbers button:nth-child(9) {
left: 40.9vw;
top: 48.3vw;
}
body.prop_atm_03 .buttons .numbers button:nth-child(10) {
left: 44.1vw;
top: 43.3vw;
}
body.prop_atm_03 .buttons .numbers button:nth-child(11) {
left: 37.8vw;
top: 51.3vw;
}
body.prop_atm_03 .buttons .numbers button:nth-child(12) {
left: 43.4vw;
top: 48.3vw;
}
body.prop_atm_03 .card {
left: 64.3vw;
top: 20.8vw;
}
/*- prop_fleeca_atm -*/
body.prop_fleeca_atm .buttons .left-side button:nth-child(1) {
left: 28.5vw;
top: 19.3vw;
}
body.prop_fleeca_atm .buttons .left-side button:nth-child(2) {
left: 28.8vw;
top: 23.2vw;
}
body.prop_fleeca_atm .buttons .left-side button:nth-child(3) {
left: 29vw;
top: 26.8vw;
}
body.prop_fleeca_atm .buttons .left-side button:nth-child(4) {
left: 29.3vw;
top: 30.25vw;
}
body.prop_fleeca_atm .buttons .right-side button:nth-child(1) {
left: 53vw;
top: 19.3vw;
}
body.prop_fleeca_atm .buttons .right-side button:nth-child(2) {
left: 53vw;
top: 23.2vw;
}
body.prop_fleeca_atm .buttons .right-side button:nth-child(3) {
left: 52.9vw;
top: 27vw;
}
body.prop_fleeca_atm .buttons .right-side button:nth-child(4) {
left: 52.8vw;
top: 30.5vw;
}
.buttons .numbers button {
transform: skewX(347deg);
}
body.prop_fleeca_atm .buttons .numbers button:nth-child(1) {
left: 37.45vw;
top: 42.5vw;
}
body.prop_fleeca_atm .buttons .numbers button:nth-child(2) {
left: 39.7vw;
top: 42.5vw;
}
body.prop_fleeca_atm .buttons .numbers button:nth-child(3) {
left: 42vw;
top: 42.5vw;
}
body.prop_fleeca_atm .buttons .numbers button:nth-child(4) {
left: 36.9vw;
top: 44.8vw;
}
body.prop_fleeca_atm .buttons .numbers button:nth-child(5) {
left: 39.2vw;
top: 44.8vw;
}
body.prop_fleeca_atm .buttons .numbers button:nth-child(6) {
left: 41.7vw;
top: 44.8vw;
}
body.prop_fleeca_atm .buttons .numbers button:nth-child(7) {
left: 36.25vw;
top: 47.4vw;
}
body.prop_fleeca_atm .buttons .numbers button:nth-child(8) {
left: 38.75vw;
top: 47.4vw;
}
body.prop_fleeca_atm .buttons .numbers button:nth-child(9) {
left: 41.25vw;
top: 47.4vw;
}
body.prop_fleeca_atm .buttons .numbers button:nth-child(10) {
left: 35.5vw;
top: 50.2vw;
}
body.prop_fleeca_atm .buttons .numbers button:nth-child(11) {
left: 38.2vw;
top: 50.2vw;
}
body.prop_fleeca_atm .buttons .numbers button:nth-child(12) {
left: 40.9vw;
top: 50.2vw;
}
body.prop_fleeca_atm .card {
left: 63.7vw;
top: 21vw;
}
body.prop_atm_02 .screen img,
body.prop_atm_02 .scr {
left: 31.3vw;
width: 21.4vw;
top: 18vw;
}
body.prop_atm_03 .screen img,
body.prop_atm_03 .scr {
left: 30.7vw;
top: 17.7vw;
width: 22.1vw
}
body.prop_fleeca_atm .screen img,
body.prop_fleeca_atm .scr {
left: 31.2vw;
top: 16.5vw;
width: 21.5vw
}
body.prop_atm_03 .scr {
height: 16vw;
left: 31.05vw;
width: 22vw;
top: 17.5vw;
}
body.prop_atm_02 .scr {
top: 17.5vw;
height: 15.7vw;
left: 31.7vw;
width: 20.9vw;
}
body.prop_atm_02 .screen img {
filter: drop-shadow(0px 0px 2vw #1763e690);
}
.screen {
width: 100vw;
height: 100vh;
position: absolute;
z-index: -1;
}
.screen img {
position: absolute;
display: flex;
filter: drop-shadow(0px 0px 2vw #268f3a90);
}
.card {
width: 6vw;
height: 3vw;
position: absolute;
cursor: pointer;
}
.light {
width: 6vw;
height: 0.7vw;
background: #00ff00b5;
position: absolute;
left: 64.5vw;
top: 18.7vw;
border-radius: 100px;
box-shadow: 0px 0px 3vw #00ff00;
display: none;
}
.scr {
height: 17vw;
transform: skewX(2deg);
position: absolute;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-weight: 800;
color: #fff;
text-shadow: 0px 0px 1vw #00000050;
opacity: 0.85;
font-size: 1vw;
}
.scr span {
font-weight: 500;
font-size: 0.8vw;
}
.scr h1 {
font-weight: 900;
text-transform: uppercase;
}
body.prop_atm_03 .scr h1 b {
color: #ff4343;
}
body.prop_atm_03 .screen img {
filter: drop-shadow(0px 0px 2vw #ff000050);
}
body.prop_atm_03 .scr h1 b {
color: #ff4343;
}
body.prop_atm_02 .scr h1 b {
color: #3ab2eb;
}
body.prop_atm_03 .screen img {
filter: drop-shadow(0px 0px 2vw #ff000050);
}
.scr h1 b {
color: #35e556;
font-weight: 900;
}
.scr p {
font-weight: 500;
font-size: 0.6vw;
}
.scr .min-loading {
position: absolute;
margin-top: 8vw;
display: none;
}
.rotate {
animation: rotate 2s infinite linear;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}
.atm-item.hidden {
visibility: hidden;
}
.atm-item {
position: absolute;
background: #ffffff38;
width: 9vw;
height: 2vw;
display: flex;
justify-content: center;
align-items: center;
font-weight: 800;
font-size: 0.8vw;
letter-spacing: 0.05vw;
text-transform: uppercase;
flex-direction: column;
}
.atm-item.left {
transform: skewX(1deg);
text-transform: none;
background: linear-gradient(-90deg, #48bd5e 0%, rgba(255, 255, 255, 0) 100%);
padding-right: 0.4vw;
align-items: flex-end;
}
.atm-item.right {
transform: skewX(-1deg);
align-items: flex-start;
padding-left: 0.4vw;
text-transform: none;
background: linear-gradient(90deg, #48bd5e 0%, rgba(255, 255, 255, 0) 100%);
}
body.prop_atm_03 .atm-item.left {
background: linear-gradient(-90deg, #bd4848 0%, rgba(255, 255, 255, 0) 100%);
}
body.prop_atm_03 .atm-item.right {
background: linear-gradient(90deg, #bd4848 0%, rgba(255, 255, 255, 0) 100%);
}
body.prop_atm_02 .atm-item.left {
background: linear-gradient(-90deg, #5489b7 0%, rgba(255, 255, 255, 0) 100%);
}
body.prop_atm_02 .atm-item.right {
background: linear-gradient(90deg, #5489b7 0%, rgba(255, 255, 255, 0) 100%);
}
.atm-item i {
display: flex;
margin-bottom: -0.15vw;
}
.atm-item p {
font-size: 0.7vw;
display: flex;
font-weight: 600;
align-items: center;
gap: 0.35vw;
color: #fff;
text-shadow: 0.2vw 0.1vw 0.15vw #00000020;
}
.atm-item span {
font-size: 0.5vw;
display: none;
}
.atm-item.left.a {
border-radius: 0px 0.2vw 0.2vw 0px;
margin-left: -11.7vw;
margin-top: -9.3vw;
}
.atm-item.left.b {
border-radius: 0px 0.2vw 0.2vw 0px;
margin-left: -11.5vw;
margin-top: -1.65vw;
}
.atm-item.left.c {
border-radius: 0px 0.2vw 0.2vw 0px;
margin-left: -11.2vw;
margin-top: 5.7vw;
}
.atm-item.left.d {
border-radius: 0px 0.2vw 0.2vw 0px;
bottom: 1.2vw;
left: 0.5vw;
}
.atm-item.right.e {
border-radius: 0.2vw 0vw 0vw 0.2vw;
margin-left: 12.8vw;
margin-top: -9.3vw;
}
.atm-item.right.f {
border-radius: 0.2vw 0vw 0vw 0.2vw;
margin-left: 12.6vw;
margin-top: -1.65vw;
}
.atm-item.right.g {
border-radius: 0.2vw 0vw 0vw 0.2vw;
margin-left: 12.2vw;
margin-top: 5.8vw;
}
.atm-item.right.h {
border-radius: 0.2vw 0vw 0vw 0.2vw;
margin-left: 12vw;
margin-top: 12.9vw;
}
.abs {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 21.5vw;
height: 17vw;
gap: 0.2vw;
}
input.wd,
input.wdid {
width: 15vw;
height: 3vw;
text-align: center;
background: transparent;
font-size: 2vw;
font-weight: 800;
color: #fff;
background: #ffffff24;
border-radius: 0.1vw;
}
.money {
position: absolute;
left: 30.1vw;
top: 30.9vw;
cursor: pointer;
}
.money img {
width: 25.3vw;