0ct0pu5/photoprism
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

UX: Apply theme colors to loading screen

Browse source
This commit is contained in:
Michael Mayer 2021-11-17 23:14:17 +01:00
parent 8dcf410cc9
commit 293fa0ca78
7 changed files with 141 additions and 12 deletions

18
assets/templates/app.tmpl
View file

@ -1,17 +1,13 @@
<div id="photoprism" class="container">
<div id="photoprism" class="container{{if .config.SiteCaption}} theme-{{ .config.Settings.UI.Theme }}{{end}}">
<div class="loading-logo">
<svg id="f394fb39-4024-46e8-9a68-3f5e53f52bfd" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 276.76 276.76"><defs><style>.a8bd947d-a1f8-4a14-8069-c9663505e4b1{fill:url(#b905e2c4-4772-4914-b70f-44b4d19aca4b);}.a4ee1f07-8fee-4200-835a-e030a32bca90{fill:none;stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:5px;}</style><linearGradient id="b905e2c4-4772-4914-b70f-44b4d19aca4b" x1="45.04" y1="231.72" x2="231.72" y2="45.04" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="0" stop-color="#c2fde4"/><stop offset="1" stop-color="#cdc6e9"/></linearGradient></defs><circle class="a8bd947d-a1f8-4a14-8069-c9663505e4b1" cx="138.38" cy="138.38" r="132"/><path id="bfa29dbe-bd65-4058-95bb-bdb844b1d3b1" data-name="Logo Pfad" class="a4ee1f07-8fee-4200-835a-e030a32bca90" d="M229.57,181.89l-4,24.19M47.29,182.88l14.81,14M157.86,59.23,62,196.69a.09.09,0,0,0,.07.15l163.41,9.37a.09.09,0,0,0,.09-.13L158,59.25A.1.1,0,0,0,157.86,59.23ZM138.12,45.94,47.18,182.69a.13.13,0,0,0,.11.19l182.18-.8a.12.12,0,0,0,.1-.19L138.33,45.94A.12.12,0,0,0,138.12,45.94Zm.11-.16L158,59.1"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 276.76 276.76"><defs><linearGradient id="a" x1="45.04" y1="231.72" x2="231.72" y2="45.04" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset="0" stop-color="#9afbfe"/><stop offset="1" stop-color="#ffb3e0"/></linearGradient></defs><circle cx="138.38" cy="138.38" r="132" style="fill:url(#a)"/><path d="m229.57 181.89-4 24.19m-178.28-23.2 14.81 14m95.76-137.65L62 196.69a.09.09 0 0 0 .07.15l163.41 9.37a.09.09 0 0 0 .09-.13L158 59.25a.1.1 0 0 0-.14-.02Zm-19.74-13.29L47.18 182.69a.13.13 0 0 0 .11.19l182.18-.8a.12.12 0 0 0 .1-.19L138.33 45.94a.12.12 0 0 0-.21 0Zm.11-.16L158 59.1" style="fill:none;stroke:#1d1d1b;stroke-miterlimit:10;stroke-width:5px"/></svg>
</div>
<div class="loading-bar">
<div role="progressbar" aria-valuemin="0" aria-valuemax="100" class="v-progress-linear" style="height: 7px;">
<div class="v-progress-linear__background black" style="height: 7px; opacity: 0.3; width: 100%;"></div>
<div class="v-progress-linear__bar">
<div class="v-progress-linear__bar__indeterminate v-progress-linear__bar__indeterminate--active">
<div class="v-progress-linear__bar__indeterminate long black"></div>
<div class="v-progress-linear__bar__indeterminate short black"></div>
</div><!----></div>
</div>
<div class="loading-animation">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="23.529411764705884 23.529411764705884 47.05882352941177 47.05882352941177" style="transform: rotate(360deg);">
<circle fill="transparent" cx="47.05882352941177" cy="47.05882352941177" r="20" stroke-width="7.058823529411765" stroke-dasharray="125.664" stroke-dashoffset="0" class="loading-underlay"></circle>
<circle fill="transparent" cx="47.05882352941177" cy="47.05882352941177" r="20" stroke-width="7.058823529411765" stroke-dasharray="125.664" stroke-dashoffset="62.83185307179586px" class="loading-overlay"></circle></svg>
</div>
{{if not .config.Sponsor}}<div id="photoprism-info"><a href="https://docs.photoprism.org/funding/" target="_blank">Become a sponsor.</a></div>{{end}}
</div>
<div id="busy-overlay"></div>

48
frontend/src/css/animate.css vendored
View file

@ -99,3 +99,51 @@
-o-transition-duration: 15ms !important;
transition-duration: 15ms !important;
}
/* App Loading Animation */
#photoprism div.loading-animation {
position: fixed;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: 315px;
height: 315px;
z-index: 1;
text-align: center !important;
color: #e2daf1 !important;
caret-color: #e2daf1 !important;
}
#photoprism div.loading-animation .loading-overlay {
-webkit-animation: progress-circular-dash 1.7s ease-in-out infinite;
animation: progress-circular-dash 1.7s ease-in-out infinite;
}
#photoprism div.loading-animation .loading-underlay {
stroke: rgba(209, 196, 233, 0.2);
z-index: 1;
}
#photoprism div.loading-animation .loading-overlay {
stroke: currentColor;
z-index: 2;
}
#photoprism div.loading-animation svg {
transform: rotate(0deg);
-webkit-animation: progress-circular-rotate 1.7s linear infinite;
animation: progress-circular-rotate 1.7s linear infinite;
-webkit-transform-origin: center center;
transform-origin: center center;
width: 100%;
height: 100%;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
overflow: hidden;
}

1
frontend/src/css/app.css
View file

@ -125,6 +125,7 @@ main {
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
z-index: 2;
}
#photoprism div.loading-bar {

21
frontend/src/css/themes/grayscale.css
View file

@ -1,5 +1,26 @@
/* Grayscale Theme */
#photoprism.container.theme-grayscale {
background: #353839 !important;
position: fixed;
max-width: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
}
#photoprism.container.theme-grayscale div.loading-animation {
color: #c8bdb1 !important;
caret-color: #c8bdb1 !important;
}
#photoprism.container.theme-grayscale div.loading-animation .loading-underlay {
stroke: rgba(200, 189, 177, 0.3);
}
.theme-grayscale .v-content__wrap,
.theme-grayscale .p-page,
.theme-grayscale .form,

21
frontend/src/css/themes/shadow.css
View file

@ -1,5 +1,26 @@
/* Shadow Theme */
#photoprism.container.theme-shadow {
background: #212121 !important;
position: fixed;
max-width: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
}
#photoprism.container.theme-shadow div.loading-animation {
color: #c4f1e5 !important;
caret-color: #c4f1e5 !important;
}
#photoprism.container.theme-shadow div.loading-animation .loading-underlay {
stroke: rgba(196, 241, 229, 0.3);
}
.theme-shadow .v-content__wrap,
.theme-shadow .p-page,
.theme-shadow .form,

23
frontend/src/css/themes/vanta.css
View file

@ -1,4 +1,25 @@
/* Black Aqua Theme */
/* Vanta Theme */
#photoprism.container.theme-vanta {
background: #212121 !important;
position: fixed;
max-width: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
}
#photoprism.container.theme-vanta div.loading-animation {
color: #05dde1 !important;
caret-color: #05dde1 !important;
}
#photoprism.container.theme-vanta div.loading-animation .loading-underlay {
stroke: rgba(5, 221, 225, 0.3);
}
.theme-vanta .v-content__wrap,
.theme-vanta .p-page,

21
frontend/src/css/themes/yellowstone.css
View file

@ -1,5 +1,26 @@
/* Yellowstone Theme */
#photoprism.container.theme-yellowstone {
background: #111111 !important;
position: fixed;
max-width: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
}
#photoprism.container.theme-yellowstone div.loading-animation {
color: #ffb700 !important;
caret-color: #ffb700 !important;
}
#photoprism.container.theme-yellowstone div.loading-animation .loading-underlay {
stroke: rgba(255, 183, 0, 0.5);
}
.theme-yellowstone .v-content__wrap,
.theme-yellowstone .p-page,
.theme-yellowstone .form,