optimizations
This commit is contained in:
sky
@ -1,4 +1,4 @@
|
||||
game {
|
||||
.game {
|
||||
width: 20vw;
|
||||
height: 10vh;
|
||||
background-color: color-mix(in srgb, var(--color-2) 40%, #00000000 60%);
|
||||
@ -11,12 +11,15 @@ game {
|
||||
/* transition-duration: 0.25s; */
|
||||
backdrop-filter: blur(2px);
|
||||
box-shadow: 0 0 10px var(--color-2);
|
||||
text-decoration: none;
|
||||
content-visibility: auto;
|
||||
contain-intrinsic-size: auto 10vh;
|
||||
}
|
||||
game:hover {
|
||||
.game:hover {
|
||||
transform: scale(1.1);
|
||||
filter:brightness(1.15);
|
||||
}
|
||||
game img {
|
||||
.game img {
|
||||
height: 80%;
|
||||
border-radius: 15px;
|
||||
aspect-ratio: 1 / 1;
|
||||
@ -80,15 +83,15 @@ body {
|
||||
}
|
||||
warnings {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: -20px;
|
||||
top: 0px;
|
||||
right: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
warning {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: var(--text-color);
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
|
||||
20
css/main.css
20
css/main.css
@ -121,4 +121,24 @@ mobile-warning, loading-game {
|
||||
flex-direction: column;
|
||||
/* transition-duration: 1s; */
|
||||
text-align: center;
|
||||
}
|
||||
button {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
padding: 12px;
|
||||
margin: 8px;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
background-color: var(--color-2);
|
||||
border-color: var(--color-3);
|
||||
color: var(--text-color);
|
||||
outline: none;
|
||||
transition-duration: 0.25s;
|
||||
font-size: 14px;
|
||||
text-shadow: var(--color-1) 0 0 10px;
|
||||
cursor:pointer;
|
||||
}
|
||||
button:hover {
|
||||
filter: brightness(1.1);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
@ -44,26 +44,6 @@ body {
|
||||
transition-duration: 0.05s;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
button {
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
padding: 12px;
|
||||
margin: 8px;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
background-color: var(--color-2);
|
||||
border-color: var(--color-3);
|
||||
color: var(--text-color);
|
||||
outline: none;
|
||||
transition-duration: 0.25s;
|
||||
font-size: 14px;
|
||||
text-shadow: var(--color-1) 0 0 10px;
|
||||
cursor:pointer;
|
||||
}
|
||||
button:hover {
|
||||
filter: brightness(1.1);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
input[type=text], input[type=password] {
|
||||
width: 70%;
|
||||
border-style: solid;
|
||||
|
||||
223
css/sidebar.css
223
css/sidebar.css
@ -1,102 +1,114 @@
|
||||
html,body {
|
||||
html,
|
||||
body {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
sidebar {
|
||||
background-color: linear-gradient(19deg,rgba(87, 199, 133, 1) 0%, rgba(237, 221, 83, 1) 100%);;
|
||||
height: 100%;
|
||||
width: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
z-index: 10;
|
||||
background-color: linear-gradient(19deg, rgba(87, 199, 133, 1) 0%, rgba(237, 221, 83, 1) 100%);
|
||||
;
|
||||
height: 100%;
|
||||
width: 50px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.sidebar-item {
|
||||
margin: 6px;
|
||||
padding: 6px;
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
transition-duration: 0.5s;
|
||||
transition-timing-function: ease-in-out;
|
||||
margin: 6px;
|
||||
padding: 6px;
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
transition-duration: 0.5s;
|
||||
transition-timing-function: ease-in-out;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: calc(100% - 50px - 10px);
|
||||
height: calc(100vh - 20px);
|
||||
margin: 10px;
|
||||
margin-right: 0px;
|
||||
border-radius: 8px;
|
||||
width: calc(100% - 50px - 10px);
|
||||
height: calc(100vh - 20px);
|
||||
margin: 10px;
|
||||
margin-right: 0px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.sidebar-divider {
|
||||
background-color: #ffffff22;
|
||||
/* auto is being stupid
|
||||
background-color: #ffffff22;
|
||||
/* auto is being stupid
|
||||
100vh minus height of 1 object 7 times minus the margin and padding of 7 objects (multiplied twice bc margin and padding on top and bottom) */
|
||||
margin-bottom: calc(100vh - 26px * 9 - ((6px + 6px) * 2) * 9);
|
||||
margin-bottom: calc(100vh - 26px * 9 - ((6px + 6px) * 2) * 9);
|
||||
}
|
||||
|
||||
.sidebar-item-descriptor {
|
||||
position: fixed;
|
||||
right: 25px;
|
||||
opacity: 0;
|
||||
transform: translateY(-32px);
|
||||
text-align: left;
|
||||
background-color: black;
|
||||
border-radius: 10px;
|
||||
padding: 8px;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.5s 0.2s, right 0.5s 0.2s;
|
||||
font-family: "Mulish", serif;
|
||||
position: fixed;
|
||||
right: 25px;
|
||||
opacity: 0;
|
||||
transform: translateY(-32px);
|
||||
text-align: left;
|
||||
background-color: black;
|
||||
border-radius: 10px;
|
||||
padding: 8px;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.5s 0.2s, right 0.5s 0.2s;
|
||||
font-family: "Mulish", serif;
|
||||
}
|
||||
|
||||
.sidebar-item:hover .sidebar-item-descriptor {
|
||||
opacity: 1;
|
||||
right: 55px;
|
||||
}
|
||||
#bottom-menu, #open-bottom-menu {
|
||||
position: absolute;
|
||||
bottom: -40px;
|
||||
height: 50px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 40%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: black;
|
||||
z-index: 5;
|
||||
border-radius: 10px 10px 0 0;
|
||||
cursor: pointer;
|
||||
color: black;
|
||||
}
|
||||
#bottom-menu {
|
||||
width: fit-content;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
opacity: 1;
|
||||
right: 55px;
|
||||
}
|
||||
|
||||
#bottom-menu,
|
||||
#open-bottom-menu {
|
||||
bottom: 10px;
|
||||
height: 15px;
|
||||
width: 70px;
|
||||
z-index: 5;
|
||||
filter: drop-shadow(0 0 16px #fff5);
|
||||
position: absolute;
|
||||
bottom: -40px;
|
||||
height: 50px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 40%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: black;
|
||||
z-index: 5;
|
||||
border-radius: 10px 10px 0 0;
|
||||
cursor: pointer;
|
||||
color: black;
|
||||
}
|
||||
|
||||
#bottom-menu {
|
||||
width: fit-content;
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
#open-bottom-menu {
|
||||
bottom: 10px;
|
||||
height: 15px;
|
||||
width: 70px;
|
||||
z-index: 5;
|
||||
filter: drop-shadow(0 0 16px #fff5);
|
||||
}
|
||||
|
||||
#bottom-menu[enabled=true] {
|
||||
bottom: 10px;
|
||||
color: white;
|
||||
filter: drop-shadow(0 0 16px #fff5);
|
||||
z-index: 0;
|
||||
bottom: 10px;
|
||||
color: white;
|
||||
filter: drop-shadow(0 0 16px #fff5);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
#open-bottom-menu[enabled=true] {
|
||||
bottom: 60px;
|
||||
filter: drop-shadow(0 0 0 #fff5);
|
||||
opacity: 0;
|
||||
bottom: 60px;
|
||||
filter: drop-shadow(0 0 0 #fff5);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
alert {
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
@ -108,46 +120,94 @@ alert {
|
||||
padding: 8px;
|
||||
color: white;
|
||||
background-color: color-mix(in srgb, #d46c6c 80%, #00000000 20%);
|
||||
backdrop-filter: blur(2px);
|
||||
backdrop-filter: blur(2px);
|
||||
box-shadow: 0 0 10px #d46c6c;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
animation: fadeIn 1s ease-in-out forwards, fadeOut 1s ease-in-out forwards 14s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
alert h1 {
|
||||
font-size: 20px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
alert p {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
top: -50px;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
top: -50px;
|
||||
}
|
||||
}
|
||||
|
||||
#fullscreen {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
welcome {
|
||||
position: absolute;
|
||||
width: 400px;
|
||||
height: 600px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto auto;
|
||||
overflow: hidden;
|
||||
transition-duration: 1s;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
/* display: flex; */
|
||||
background-color: color-mix(in srgb, var(--color-3) 95%, #00000000 5%);
|
||||
border-radius: 20px;
|
||||
backdrop-filter: blur(8px);
|
||||
box-shadow: 0 0 10px var(--color-3);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
welcome section {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
transition-duration: 1s;
|
||||
transition-timing-function: cubic-bezier(.53, 0, .5, 1);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
#blur {
|
||||
backdrop-filter: blur(8px);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
}
|
||||
@media screen and (max-width: 660px) {
|
||||
sidebar {
|
||||
sidebar {
|
||||
height: 50px;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
@ -158,6 +218,7 @@ alert p {
|
||||
overflow: scroll;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: calc(100% - 20px);
|
||||
height: calc(100% - 50px - 20px);
|
||||
@ -165,16 +226,22 @@ alert p {
|
||||
margin-right: 0px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
#bottom-menu, #open-bottom-menu, .sidebar-item-descriptor {
|
||||
|
||||
#bottom-menu,
|
||||
#open-bottom-menu,
|
||||
.sidebar-item-descriptor {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#openblank {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#fullscreen {
|
||||
display: block;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user