75 lines
1.3 KiB
CSS
75 lines
1.3 KiB
CSS
|
:root {
|
|||
|
|
--sat: env(safe-area-inset-top);
|
|||
|
|
--sar: env(safe-area-inset-right);
|
|||
|
|
--sab: env(safe-area-inset-bottom);
|
|||
|
|
--sal: env(safe-area-inset-left);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* HTML styles for the splash screen */
|
|||
|
|
|
|||
|
|
.highlight {
|
|||
|
|
color: white;
|
|||
|
|
font-size: 2.5rem;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.purple {
|
|||
|
|
color: #8b44ac;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.icon {
|
|||
|
|
opacity: 0.05;
|
|||
|
|
height: 35%;
|
|||
|
|
width: 35%;
|
|||
|
|
position: absolute;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
right: 0px;
|
|||
|
|
bottom: 0px;
|
|||
|
|
margin-right: 3%;
|
|||
|
|
margin-bottom: 5%;
|
|||
|
|
z-index: 5000;
|
|||
|
|
background-position: right bottom;
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#avalonia-splash a {
|
|||
|
|
color: whitesmoke;
|
|||
|
|
text-decoration: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.center {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
height: 100vh;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#avalonia-splash {
|
|||
|
|
position: relative;
|
|||
|
|
height: 100%;
|
|||
|
|
width: 100%;
|
|||
|
|
color: whitesmoke;
|
|||
|
|
background: #1b2a4e;
|
|||
|
|
font-family: 'Nunito', sans-serif;
|
|||
|
|
background-position: center;
|
|||
|
|
background-size: cover;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.splash-close {
|
|||
|
|
animation: fadeout 0.25s linear forwards;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes fadeout {
|
|||
|
|
0% {
|
|||
|
|
opacity: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
100% {
|
|||
|
|
opacity: 0;
|
|||
|
|
visibility: collapse;
|
|||
|
|
}
|
|||
|
|
}
|