dan/arcade-machine
1
0
Fork 0
mirror of https://github.com/danbulant/arcade-machine synced 2026-07-09 13:00:52 +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

5
ui/index.html
View file

@ -5,11 +5,12 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<title>UI</title>
</head>
<body>
<script src ="Vars.js">
</script> <!--Loadne Vars.js-->
<div class="hlavnidiv">
<div class="container">
<button class="move" type="button" id="sdvx3-button" onclick="vers=3;sdvx()">
<img src="JPGS/sound-voltex-iii-gravity-wars-1.png" alt="">
@ -38,7 +39,7 @@
</div>
</div>

66
ui/style.css
View file

@ -1,23 +1,30 @@
.container {
display: grid;
height: 85vw;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-gap: 15px;
margin-top: 10px;
}
body{
min-height: 100vh;
max-width: 90vw;
height: 100vh;
width: 100vw;
padding: 2rem;
margin: 0 auto;
/*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 {
display: flex;
color: rgb(15, 12, 12, 0.88);
@ -34,9 +41,10 @@ body{
.sex {
opacity: 0;
margin-bottom: 110px;
bottom: 110px;
z-index: 1;
transition: opacity 1s, margin-bottom 0.8s;
transition: opacity 1s, bottom 0.8s;
position: relative;
}
@ -48,10 +56,11 @@ body{
position: relative;
border-radius: 15px;
}
#sdvx3-button img {
content: "";
object-fit: cover;
opacity: 0.8;
position: absolute;
top: 0;
left: 0;
@ -62,15 +71,17 @@ body{
z-index: 0;
border-radius: 10px;
}
#sdvx4-button {
position: relative;
border-radius: 15px;
}
#sdvx4-button img {
content: "";
object-fit: cover;
opacity: 0.8;
position: absolute;
top: 0;
left: 0;
@ -82,15 +93,17 @@ body{
border-radius: 15px;
}
#sdvx5-button {
position: relative;
border-radius: 15px;
}
#sdvx5-button img {
content: "";
object-fit: cover;
opacity: 0.8;
position: absolute;
top: 0;
left: 0;
@ -101,26 +114,47 @@ body{
z-index: 0;
border-radius: 15px;
}
@keyframes blik {
0% {
box-shadow: 0 0 0 3px rgba(255, 254, 254, 0);
}
50% {
box-shadow: 0 0 0 3px rgba(255, 254, 254, 1);
}
100% {
box-shadow: 0 0 0 3px rgba(255, 254, 254, 0);
}
}
.move:focus {
outline: none;
animation-iteration-count: infinite;
animation-name: blik;
animation-duration: 1.4s;
}
.move:focus h1 {
transition: opacity 1s, margin-bottom 0.8s;
transition: opacity 1s, bottom 0.8s;
z-index: 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;
}