milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add splash screen during app load

Browse source
This commit is contained in:
MrTimscampi 2020-06-29 11:21:20 +02:00
parent 33547e0d77
commit 3fcb8ed00e
1 changed files with 40 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

45
src/index.html
View file

@ -52,7 +52,7 @@
<!-- iPad Pro 1 --> <!-- iPad Pro 1 -->
<link href="assets/splash/ipadpro1_splash.png" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" /> <link href="assets/splash/ipadpro1_splash.png" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
<link href="assets/splash/ipadpro1_splash_l.png" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" /> <link href="assets/splash/ipadpro1_splash_l.png" media="screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
<!-- iPad Pro 3 --> <!-- iPad Pro 3 -->
<link href="assets/splash/ipadpro3_splash.png" media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" /> <link href="assets/splash/ipadpro3_splash.png" media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" rel="apple-touch-startup-image" />
<link href="assets/splash/ipadpro3_splash_l.png" media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" /> <link href="assets/splash/ipadpro3_splash_l.png" media="screen and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" rel="apple-touch-startup-image" />
@ -69,12 +69,19 @@
<title>Jellyfin</title> <title>Jellyfin</title>
<style> <style>
.transparentDocument, .backgroundContainer-transparent:not(.withBackdrop) { .transparentDocument,
.backgroundContainer-transparent:not(.withBackdrop) {
background: none !important; background: none !important;
background-color: transparent !important; background-color: transparent !important;
} }
.mouseIdle, .mouseIdle button, .mouseIdle select, .mouseIdle input, .mouseIdle textarea, .mouseIdle a, .mouseIdle label { .mouseIdle,
.mouseIdle button,
.mouseIdle select,
.mouseIdle input,
.mouseIdle textarea,
.mouseIdle a,
.mouseIdle label {
cursor: none !important; cursor: none !important;
} }
@ -82,7 +89,9 @@
background-color: #101010; background-color: #101010;
} }
.hide, .mouseIdle .hide-mouse-idle, .mouseIdle-tv .hide-mouse-idle-tv { .hide,
.mouseIdle .hide-mouse-idle,
.mouseIdle-tv .hide-mouse-idle-tv {
display: none !important; display: none !important;
} }
@ -94,6 +103,30 @@
z-index: 1; z-index: 1;
width: 0.8em; width: 0.8em;
} }
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.splashLogo {
animation: fadein 0.5s;
width: 30%;
height: 30%;
background-image: url(assets/img/banner-light.png);
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style> </style>
</head> </head>
<body> <body>
@ -103,7 +136,9 @@
<div class="mainDrawer-scrollContainer scrollContainer focuscontainer-y"></div> <div class="mainDrawer-scrollContainer scrollContainer focuscontainer-y"></div>
</div> </div>
<div class="skinHeader focuscontainer-x"></div> <div class="skinHeader focuscontainer-x"></div>
<div class="mainAnimatedPages skinBody"></div> <div class="mainAnimatedPages skinBody">
<div class="splashLogo"></div>
</div>
<div class="mainDrawerHandle"></div> <div class="mainDrawerHandle"></div>
<!-- inject:js --> <!-- inject:js -->