fix ux easter egg

This commit is contained in:
Mateusz Gruszczyński
2026-06-02 22:57:01 +02:00
parent 2b36e8e8af
commit f29710b24f
3 changed files with 39 additions and 22 deletions
File diff suppressed because one or more lines are too long
+37 -20
View File
@@ -239,11 +239,11 @@ body {
display: grid; display: grid;
place-items: center; place-items: center;
padding: 1rem; padding: 1rem;
background: radial-gradient( background:
circle at 50% 35%, radial-gradient(circle at 50% 32%, rgba(var(--bs-secondary-bg-rgb), 0.92), transparent 42%),
rgba(var(--bs-secondary-bg-rgb), 0.98), var(--bs-body-bg);
var(--bs-body-bg) 68% isolation: isolate;
); overflow: auto;
color: var(--bs-body-color); color: var(--bs-body-color);
transition: transition:
opacity 0.22s ease, opacity 0.22s ease,
@@ -256,10 +256,12 @@ body {
} }
.initial-loader-card { .initial-loader-card {
width: min(92vw, 430px); width: min(92vw, 430px);
max-height: calc(100vh - 2rem);
overflow: auto;
padding: 2rem; padding: 2rem;
border: 1px solid var(--bs-border-color); border: 1px solid var(--bs-border-color);
border-radius: 18px; border-radius: 18px;
background: rgba(var(--bs-secondary-bg-rgb), 0.88); background: var(--bs-secondary-bg);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
text-align: center; text-align: center;
} }
@@ -272,8 +274,8 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-height: 220px; min-height: 132px;
margin: 1.4rem 0 1rem; margin: 1.25rem 0 1rem;
} }
.initial-loader-easter-egg-image, .initial-loader-easter-egg-image,
.initial-loader-prank img { .initial-loader-prank img {
@@ -281,10 +283,10 @@ body {
width: auto; width: auto;
max-width: min(100%, 320px); max-width: min(100%, 320px);
height: auto; height: auto;
max-height: 220px; max-height: 150px;
object-fit: contain; object-fit: contain;
border-radius: 14px; border-radius: 14px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.26);
} }
.initial-loader-easter-egg-image { .initial-loader-easter-egg-image {
contain: layout paint; contain: layout paint;
@@ -313,6 +315,21 @@ body {
margin-top: 0.35rem; margin-top: 0.35rem;
color: var(--bs-secondary-color); color: var(--bs-secondary-color);
} }
@media (max-height: 620px) {
.initial-loader-card {
padding: 1.5rem;
}
.initial-loader-spinner {
min-height: 96px;
margin: 1rem 0 0.75rem;
}
.initial-loader-easter-egg-image {
max-height: 110px;
}
}
.main-grid { .main-grid {
min-height: 0; min-height: 0;
display: grid; display: grid;
@@ -2477,11 +2494,11 @@ body.mobile-mode .mobile-filter-bar {
min-height: 100vh; min-height: 100vh;
place-items: center; place-items: center;
padding: 1rem; padding: 1rem;
background: radial-gradient( background:
circle at 50% 35%, radial-gradient(circle at 50% 32%, rgba(var(--bs-secondary-bg-rgb), 0.92), transparent 42%),
rgba(var(--bs-secondary-bg-rgb), 0.98), var(--bs-body-bg);
var(--bs-body-bg) 68% isolation: isolate;
); overflow: auto;
color: var(--bs-body-color); color: var(--bs-body-color);
} }
@@ -2772,11 +2789,11 @@ body.mobile-mode .mobile-filter-bar {
min-height: 100vh; min-height: 100vh;
place-items: center; place-items: center;
padding: 1rem; padding: 1rem;
background: radial-gradient( background:
circle at 50% 35%, radial-gradient(circle at 50% 32%, rgba(var(--bs-secondary-bg-rgb), 0.92), transparent 42%),
rgba(var(--bs-secondary-bg-rgb), 0.98), var(--bs-body-bg);
var(--bs-body-bg) 68% isolation: isolate;
); overflow: auto;
color: var(--bs-body-color); color: var(--bs-body-color);
} }
+1 -1
View File
@@ -19,7 +19,7 @@
<div class="initial-loader-brand"><i class="fa-solid fa-robot"></i> pyTorrent</div> <div class="initial-loader-brand"><i class="fa-solid fa-robot"></i> pyTorrent</div>
<div class="initial-loader-spinner" id="initialLoaderSpinner"> <div class="initial-loader-spinner" id="initialLoaderSpinner">
{% if prefs and prefs.easter_egg_enabled and prefs.easter_egg_loading_image_url %} {% if prefs and prefs.easter_egg_enabled and prefs.easter_egg_loading_image_url %}
<img class="initial-loader-easter-egg-image" src="{{ prefs.easter_egg_loading_image_url }}" alt="Loading" loading="eager"> <img class="initial-loader-easter-egg-image" src="{{ prefs.easter_egg_loading_image_url }}" alt="Loading" loading="eager" onerror="this.replaceWith(Object.assign(document.createElement('span'),{className:'spinner-border'}));">
{% else %} {% else %}
<span class="spinner-border" aria-hidden="true"></span> <span class="spinner-border" aria-hidden="true"></span>
{% endif %} {% endif %}