Optimized pictures, improved compatibility with mobile browsers, added hints
This commit is contained in:
parent
06d5469978
commit
17ce3ba86d
7 changed files with 123 additions and 27 deletions
|
@ -18,6 +18,11 @@ body {
|
|||
bottom: 0;
|
||||
background-color: #001;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
--topmenu-bg: rgba(81, 75, 144, 0.4);
|
||||
--popups-rgb: 34;
|
||||
--popups-alpha: 0.8;
|
||||
--hint-alpha: 0.4;
|
||||
--popups-bg: rgba(var(--popups-rgb), var(--popups-rgb), var(--popups-rgb), var(--popups-alpha));
|
||||
}
|
||||
|
||||
img.logo {
|
||||
|
@ -32,7 +37,7 @@ img.logo {
|
|||
margin: 10px;
|
||||
border-radius: 5px;
|
||||
position: fixed;
|
||||
background-color: #514b9066;
|
||||
background-color: var(--topmenu-bg);
|
||||
z-index: 998;
|
||||
}
|
||||
.top-menu {
|
||||
|
@ -57,12 +62,11 @@ img.logo {
|
|||
.context-menu-like {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/*display: none;*/
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
border-radius: 5px;
|
||||
background-color: #222222d4;
|
||||
background-color: var(--popups-bg);
|
||||
}
|
||||
.context-menu-like ul {
|
||||
margin: 0;
|
||||
|
@ -142,6 +146,38 @@ span.minecraft-text {
|
|||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hint {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
top: 40%;
|
||||
left: 35%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: rgba(var(--popups-rgb),var(--popups-rgb),var(--popups-rgb),var(--hint-alpha));
|
||||
backdrop-filter: blur(4px);
|
||||
border-radius: 5px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease-out 0s;
|
||||
z-index: 1000;
|
||||
}
|
||||
.hint > span {
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
color: #fff;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
font-size: 1.7em;
|
||||
}
|
||||
|
||||
#stars {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.space-obj {
|
||||
position: fixed;
|
||||
text-align: center;
|
||||
|
@ -150,8 +186,7 @@ span.minecraft-text {
|
|||
z-index: 997;
|
||||
}
|
||||
.space-obj > img {
|
||||
/* 360 degrees in 20 minutes (instead of 23 hours) */
|
||||
animation: rotate 1200s linear 0s infinite normal;
|
||||
animation: rotate 480s linear 0s infinite normal;
|
||||
|
||||
/* unselectable */
|
||||
-webkit-touch-callout: none;
|
||||
|
|
Loading…
Add table
Reference in a new issue