UX: Update slash screen styles
Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
Michael Mayer
parent
c620271399
commit
f936efb43d
|
|
@ -1,4 +1,4 @@
|
|||
<div id="photoprism" class="container{{if .config.SiteCaption}} theme-{{ .config.Settings.UI.Theme }}{{end}}">
|
||||
<div id="photoprism" class="splash-screen container{{if .config.SiteCaption}} theme-{{ .config.Settings.UI.Theme }}{{end}}">
|
||||
<noscript>
|
||||
<div id="noscript-info" class="splash-info">
|
||||
<a href="https://enable-javascript.com/" target="_blank">Please enable JavaScript in your browser.</a>
|
||||
|
|
@ -9,13 +9,13 @@
|
|||
{{if .config.ImprintUrl}}<a href="{{ .config.ImprintUrl }}" target="_blank" class="imprint">{{ .config.Imprint }}</a>
|
||||
{{else}}<span class="imprint">{{ .config.Imprint }}</span>{{end}}
|
||||
{{else}}
|
||||
<span class="quote-0">One picture is worth a thousand words...</span>
|
||||
<span class="quote-1">It's not the camera, but who's behind the camera...</span>
|
||||
<span class="quote-2">The pictures you want tomorrow, you have to take today...</span>
|
||||
<span class="quote-3">A camera captures light, our mind captures images...</span>
|
||||
<span class="quote-4">If you can shoot on the street you can shoot anything. – Mary Ellen Mark</span>
|
||||
<span class="quote-5">When asked what equipment you use, say it's your eyes...</span>
|
||||
<span class="quote-6">Photography is the only language that can be understood anywhere in the world. – Bruno Barbey</span>
|
||||
<span class="quote-0">One picture is worth a thousand words.</span>
|
||||
<span class="quote-1">It's not the camera, but who's behind the camera.</span>
|
||||
<span class="quote-2">The pictures you want tomorrow, you have to take today.</span>
|
||||
<span class="quote-3">A camera captures light, our mind captures images.</span>
|
||||
<span class="quote-4">If you can shoot on the street you can shoot anything.</span>
|
||||
<span class="quote-5">When asked what equipment you use, say it's your eyes.</span>
|
||||
<span class="quote-6">Photography is the only language that can be understood anywhere in the world.</span>
|
||||
{{end}}
|
||||
</div>
|
||||
<script>
|
||||
|
|
@ -23,6 +23,9 @@
|
|||
el.classList.add("day-" + new Date().getDay());
|
||||
el.style.setProperty("display", "block");
|
||||
</script>
|
||||
<div class="loading-animation">
|
||||
<div class="loading-circle"></div>
|
||||
</div>
|
||||
<div class="loading-logo elevation-3">
|
||||
{{if eq .config.AppIcon "crisp"}}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264 264"><defs><linearGradient id="a" x1="45.04" y1="231.72" x2="231.72" y2="45.04" gradientUnits="userSpaceOnUse" gradientTransform="translate(-6.38 -6.38)"><stop offset="0" stop-color="#fff"/><stop offset="0" stop-color="#9afbfe"/><stop offset="1" stop-color="#ffb3e0"/></linearGradient></defs><circle cx="132" cy="132" r="132" style="fill:url(#a)"/><path d="m223.19 175.51-4 24.19M40.91 176.5l14.81 14m95.76-137.65L55.62 190.31a.09.09 0 0 0 .07.15l163.41 9.37a.09.09 0 0 0 .09-.13L151.62 52.87a.1.1 0 0 0-.14-.02zm-19.74-13.29L40.8 176.31a.13.13 0 0 0 .11.19l182.18-.8a.12.12 0 0 0 .1-.19L131.95 39.56a.12.12 0 0 0-.21 0zm.11-.16 19.77 13.32" style="fill:none;stroke:#1d1d1b;stroke-width:5px;stroke-miterlimit:10"/></svg>
|
||||
|
|
@ -34,9 +37,6 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264 264"><defs><linearGradient id="a" x1="45.04" y1="231.72" x2="231.72" y2="45.04" gradientUnits="userSpaceOnUse" gradientTransform="translate(-6.38 -6.38)"><stop offset="0" stop-color="#fff"/><stop offset="0" stop-color="#b8edff"/><stop offset="1" stop-color="#d4b8ff"/></linearGradient></defs><circle cx="132" cy="132" r="132" style="fill:url(#a)"/><path data-name="Logo Pfad" d="m223.19 175.51-4 24.19M40.91 176.5l14.81 14m95.76-137.65L55.62 190.31a.09.09 0 0 0 .07.15l163.41 9.37a.09.09 0 0 0 .09-.13L151.62 52.87a.1.1 0 0 0-.14-.02zm-19.74-13.29L40.8 176.31a.13.13 0 0 0 .11.19l182.18-.8a.12.12 0 0 0 .1-.19L131.95 39.56a.12.12 0 0 0-.21 0zm.11-.16 19.77 13.32" style="fill:none;stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:6px;shape-rendering:geometricPrecision"/></svg>
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="loading-dots">
|
||||
<span class="dots-animation dot one">.</span><span class="dots-animation dot two">.</span><span class="dots-animation dot three">.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="busy-overlay"></div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,10 @@
|
|||
right: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-image: linear-gradient(160deg, #ffffff 0%, #e2daf1 100%);
|
||||
}
|
||||
|
||||
#photoprism.container.splash-screen {
|
||||
background: #131313;
|
||||
}
|
||||
|
||||
#photoprism div.logo-large {
|
||||
|
|
@ -40,12 +43,19 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
#photoprism div.loading-animation,
|
||||
#photoprism div.loading-logo,
|
||||
#photoprism div.loading-logo svg {
|
||||
width: 35vh;
|
||||
height: 35vh;
|
||||
max-width: 65vw;
|
||||
max-height: 65vw;
|
||||
width: 40vh;
|
||||
height: 40vh;
|
||||
max-width: 60vw;
|
||||
max-height: 60vw;
|
||||
}
|
||||
|
||||
#photoprism div.loading-logo svg {
|
||||
-webkit-animation: hue 4s infinite linear;
|
||||
-moz-animation: hue 4s infinite linear;
|
||||
animation: hue 4s infinite linear;
|
||||
}
|
||||
|
||||
#photoprism .loading-dots {
|
||||
|
|
@ -77,8 +87,8 @@
|
|||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 264px;
|
||||
height: 264px;
|
||||
/* width: 264px;
|
||||
height: 264px; */
|
||||
z-index: 2;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -98,15 +108,15 @@
|
|||
right: 0;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
border-top: 6px #d48af4 solid;
|
||||
border-right: 6px #a990ec solid;
|
||||
border-bottom: 6px #86c8ed solid;
|
||||
border-left: 6px #a3ddf4 solid;
|
||||
border-top: 6px #6200EA solid;
|
||||
border-right: 6px #7C4DFF solid;
|
||||
border-bottom: 6px #651FFF solid;
|
||||
border-left: 6px #7C4DFF solid;
|
||||
border-radius: 50%;
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
-webkit-animation: circle-animation 1s infinite linear;
|
||||
animation: circle-animation 1s infinite linear;
|
||||
-webkit-animation: circle-animation 1.5s infinite linear;
|
||||
animation: circle-animation 1.5s infinite linear;
|
||||
}
|
||||
|
||||
#photoprism div.loading-animation .loading-overlay {
|
||||
|
|
@ -149,24 +159,16 @@
|
|||
#loading-info,
|
||||
#photoprism .splash-info {
|
||||
position: fixed;
|
||||
padding: 12px 14px;
|
||||
border-radius: 10px;
|
||||
min-width: 280px;
|
||||
width: auto;
|
||||
padding: 24px;
|
||||
height: auto;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: rgba(239, 239, 235, 0.56);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#photoprism .splash-info {
|
||||
border-top-right-radius: 0;
|
||||
border-top-left-radius: 0;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
right: auto;
|
||||
width: auto;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#splash-info > span {
|
||||
|
|
@ -201,17 +203,25 @@
|
|||
#loading-info a,
|
||||
.splash-info span,
|
||||
.splash-info a {
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
color: #101010;
|
||||
width: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#splash-info {
|
||||
text-align: center;
|
||||
color: #7c7c78;
|
||||
}
|
||||
|
||||
#noscript-info {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#noscript-info a {
|
||||
color: #bbbbb5;
|
||||
}
|
||||
|
||||
#noscript-info.splash-info,
|
||||
|
|
|
|||
Loading…
Reference in a new issue