fix ux easter egg
This commit is contained in:
File diff suppressed because one or more lines are too long
+37
-20
@@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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 %}
|
||||||
|
|||||||
Reference in New Issue
Block a user