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

5
ui/index.html
View file

@ -5,11 +5,12 @@
<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="hlavnidiv">
<div class="container"> <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="">
@ -38,7 +39,7 @@
</div> </div>
</div>

66
ui/style.css
View file

@ -1,23 +1,30 @@
.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);
@ -34,9 +41,10 @@ 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;
} }
@ -48,10 +56,11 @@ body{
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;
@ -62,15 +71,17 @@ body{
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;
@ -82,15 +93,17 @@ body{
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;
@ -101,26 +114,47 @@ body{
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 { .move:focus h1 {
transition: opacity 1s, margin-bottom 0.8s; 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;
} }