DevOpsTools/hysteria2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Сделать lightbox на всю высоту экрана с небольшими отступами

Browse Source 
Панель занимает 100dvh минус 1rem сверху/снизу; QR растягивается
в оставшееся пространство.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Sergey Antropoff
2026-07-23 09:16:45 +03:00
parent fb23d48b64
commit ad23e81a43
2 changed files with 46 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
roles/hysteria2/templates/export/global-index.html.j2
+22 -8
View File
@@ -262,7 +262,7 @@
display: flex;
align-items: center;
justify-content: center;
padding: 1.75rem 1rem;
padding: 1rem;
box-sizing: border-box;
background: rgba(8, 12, 18, 0.72);
backdrop-filter: blur(10px);
@@ -279,16 +279,19 @@
}
.lightbox-panel {
position: relative;
max-width: min(94vw, 832px);
max-height: calc(100dvh - 3.5rem);
width: 100%;
display: flex;
flex-direction: column;
width: min(94vw, 900px);
height: calc(100dvh - 2rem);
max-height: calc(100dvh - 2rem);
padding: 1.25rem 1.25rem 1rem;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 18px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
text-align: center;
overflow: auto;
overflow: hidden;
box-sizing: border-box;
transform: translateY(12px) scale(0.96);
transition: transform 0.22s ease;
}
@@ -297,11 +300,10 @@
}
.lightbox-panel img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
max-width: min(728px, 100%);
max-height: min(728px, calc(100dvh - 14rem));
margin: 0 auto;
aspect-ratio: 1;
object-fit: contain;
background: #fff;
@@ -310,18 +312,28 @@
box-sizing: border-box;
image-rendering: pixelated;
}
.lightbox-media {
flex: 1 1 auto;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
}
.lightbox-caption {
flex-shrink: 0;
margin-top: 0.85rem;
font-size: 0.95rem;
font-weight: 650;
color: var(--text);
}
.lightbox-hint {
flex-shrink: 0;
margin-top: 0.25rem;
font-size: 0.75rem;
color: var(--muted);
}
.lightbox-actions {
flex-shrink: 0;
margin-top: 1rem;
display: flex;
justify-content: center;
@@ -522,7 +534,9 @@
<div class="lightbox" id="lightbox" role="dialog" aria-modal="true" aria-hidden="true" aria-labelledby="lightbox-caption">
<div class="lightbox-panel" role="document">
<button type="button" class="lightbox-close" id="lightbox-close" aria-label="Закрыть">&times;</button>
<div class="lightbox-media">
<img id="lightbox-img" src="" alt="">
</div>
<p class="lightbox-caption" id="lightbox-caption"></p>
<div class="lightbox-actions">
<a class="lightbox-download" id="lightbox-download" href="#" download>
roles/hysteria2/templates/export/index.html.j2
+22 -8
View File
@@ -193,7 +193,7 @@
display: flex;
align-items: center;
justify-content: center;
padding: 1.75rem 1rem;
padding: 1rem;
box-sizing: border-box;
background: rgba(8, 12, 18, 0.72);
backdrop-filter: blur(10px);
@@ -210,16 +210,19 @@
}
.lightbox-panel {
position: relative;
max-width: min(94vw, 832px);
max-height: calc(100dvh - 3.5rem);
width: 100%;
display: flex;
flex-direction: column;
width: min(94vw, 900px);
height: calc(100dvh - 2rem);
max-height: calc(100dvh - 2rem);
padding: 1.25rem 1.25rem 1rem;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 18px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
text-align: center;
overflow: auto;
overflow: hidden;
box-sizing: border-box;
transform: translateY(12px) scale(0.96);
transition: transform 0.22s ease;
}
@@ -228,11 +231,10 @@
}
.lightbox-panel img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
max-width: min(728px, 100%);
max-height: min(728px, calc(100dvh - 14rem));
margin: 0 auto;
aspect-ratio: 1;
object-fit: contain;
background: #fff;
@@ -241,18 +243,28 @@
box-sizing: border-box;
image-rendering: pixelated;
}
.lightbox-media {
flex: 1 1 auto;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
}
.lightbox-caption {
flex-shrink: 0;
margin-top: 0.85rem;
font-size: 0.95rem;
font-weight: 650;
color: var(--text);
}
.lightbox-hint {
flex-shrink: 0;
margin-top: 0.25rem;
font-size: 0.75rem;
color: var(--muted);
}
.lightbox-actions {
flex-shrink: 0;
margin-top: 1rem;
display: flex;
justify-content: center;
@@ -444,7 +456,9 @@
<div class="lightbox" id="lightbox" role="dialog" aria-modal="true" aria-hidden="true" aria-labelledby="lightbox-caption">
<div class="lightbox-panel" role="document">
<button type="button" class="lightbox-close" id="lightbox-close" aria-label="Закрыть">&times;</button>
<div class="lightbox-media">
<img id="lightbox-img" src="" alt="">
</div>
<p class="lightbox-caption" id="lightbox-caption"></p>
<div class="lightbox-actions">
<a class="lightbox-download" id="lightbox-download" href="#" download>