dan/arcade-machine
1
0
Fork 0
mirror of https://github.com/danbulant/arcade-machine synced 2026-06-07 00:30:50 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improved styles

Browse source
This commit is contained in:
Vaclav Siml 2023-02-23 22:01:55 +01:00
parent 6b77021ebf
commit 2f151ef0e9
2 changed files with 174 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
ui/index.html
View file

@ -5,12 +5,13 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<title>Document</title> <title>UI</title>
</head> </head>
<body> <body>
<script src ="Vars.js"> <script src ="Vars.js">
</script> <!--Loadne Vars.js--> </script> <!--Loadne Vars.js-->
<div class="container"> <div class="hlavnidiv">
<div class="container">
<button class="move" type="button" id="sdvx3-button" onclick="vers=3;sdvx()"> <button class="move" type="button" id="sdvx3-button" onclick="vers=3;sdvx()">
<img src="JPGS/sound-voltex-iii-gravity-wars-1.png" alt=""> <img src="JPGS/sound-voltex-iii-gravity-wars-1.png" alt="">
<h1 class="sex">Sound Voltex III: Gravity Wars</h1> <h1 class="sex">Sound Voltex III: Gravity Wars</h1>
@ -37,11 +38,11 @@
</button> <!--SDVX5--> </button> <!--SDVX5-->
</div>
</div> </div>
<script> <script>
const prvnihra = [...document.querySelectorAll("button")] const prvnihra = [...document.querySelectorAll("button")]
// for (i = 0; i < prvnihra.length; i++) { // for (i = 0; i < prvnihra.length; i++) {

124
ui/style.css
View file

@ -1,28 +1,35 @@
.container{ .container {
display: grid; display: grid;
height: 85vw; grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(2, 1fr);
grid-template-rows: repeat(2,1fr);
grid-gap: 15px; grid-gap: 15px;
margin-top: 10px; margin-top: 10px;
height: 100vh;
} width: 100vw;
body{ padding: 2rem;
min-height: 100vh;
max-width: 90vw;
margin: 0 auto; margin: 0 auto;
/*background-color: rgb(56, 55, 55, 1);*/ /*background-color: rgb(56, 55, 55, 1);*/
background-image: url(BACKGROUND\ GOOD.png);
background-size: cover;
} }
body {
margin: 0;
overflow: hidden;
}
* { * {
box-sizing: border-box; /* ulehci zivot */ box-sizing: border-box;
} /* ulehci zivot */
.move{ }
.move {
display: flex; display: flex;
color:rgb(15, 12, 12, 0.88); color: rgb(15, 12, 12, 0.88);
border: 3px solid black; border: 3px solid black;
font-family:Verdana, Geneva, Tahoma, sans-serif; font-family: Verdana, Geneva, Tahoma, sans-serif;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
@ -31,12 +38,13 @@ body{
} }
.sex{ .sex {
opacity: 0; opacity: 0;
margin-bottom: 110px; bottom: 110px;
z-index: 1; z-index: 1;
transition: opacity 1s, margin-bottom 0.8s; transition: opacity 1s, bottom 0.8s;
position: relative;
} }
@ -44,14 +52,15 @@ body{
#sdvx3-button{ #sdvx3-button {
position: relative; position: relative;
border-radius: 15px; border-radius: 15px;
} }
#sdvx3-button img {
#sdvx3-button img {
content: ""; content: "";
object-fit: cover; object-fit: cover;
opacity: 0.8;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -61,16 +70,18 @@ body{
height: 100%; height: 100%;
z-index: 0; z-index: 0;
border-radius: 10px; border-radius: 10px;
} }
#sdvx4-button{
#sdvx4-button {
position: relative; position: relative;
border-radius: 15px; border-radius: 15px;
} }
#sdvx4-button img{
#sdvx4-button img {
content: ""; content: "";
object-fit: cover; object-fit: cover;
opacity: 0.8;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -81,16 +92,18 @@ body{
z-index: 0; z-index: 0;
border-radius: 15px; border-radius: 15px;
} }
#sdvx5-button{
#sdvx5-button {
position: relative; position: relative;
border-radius: 15px; border-radius: 15px;
} }
#sdvx5-button img{
#sdvx5-button img {
content: ""; content: "";
object-fit: cover; object-fit: cover;
opacity: 0.8;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -100,27 +113,48 @@ body{
height: 100%; height: 100%;
z-index: 0; z-index: 0;
border-radius: 15px; border-radius: 15px;
} }
@keyframes blik {
@keyframes blik {
0% { 0% {
box-shadow: 0 0 0 3px rgba(255, 254, 254,0); box-shadow: 0 0 0 3px rgba(255, 254, 254, 0);
} }
50% { 50% {
box-shadow: 0 0 0 3px rgba(255, 254, 254,1); box-shadow: 0 0 0 3px rgba(255, 254, 254, 1);
} }
100% { 100% {
box-shadow: 0 0 0 3px rgba(255, 254, 254,0); box-shadow: 0 0 0 3px rgba(255, 254, 254, 0);
} }
} }
.move:focus {
.move:focus {
outline: none; outline: none;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-name: blik; animation-name: blik;
animation-duration: 1.4s; animation-duration: 1.4s;
} }
.move:focus h1{
transition: opacity 1s, margin-bottom 0.8s; .move:focus h1 {
transition: opacity 1s, bottom 0.8s;
z-index: 1; z-index: 1;
opacity: 1; opacity: 1;
margin-bottom: 80px; bottom: 80px;
} position: relative;
}
.move:focus img {
transition: opacity 0.6s;
opacity: 0.7;
}
.move img {
opacity: 1;
}
.hlavnidiv {
aspect-ratio: 3/4;
background-image: url("JPGS/BACKGROUND GOOD.png");
background-size: cover;
}