alee/stegasoo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix QR key loader: remove conflicting CSS, proper centering

Browse Source 
- Remove duplicate qr-crop-container styles from encode/decode templates
- Use only qr-scan-container from style.css (flex centering + object-fit)
- Fix rsaQrSection to use align-items: center for horizontal centering
- Darken channel key fingerprint in header (#f0c674 → #c9a860)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Aaron D. Lee
2026-01-07 23:05:07 -05:00
parent 0c1e87c7c0
commit 10c874374f
4 changed files with 7 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontends/web/static/style.css
View File

@@ -1253,7 +1253,8 @@ footer {
---------------------------------------------------------------------------- */
#rsaQrSection {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
#rsaQrSection .drop-zone {

2
frontends/web/templates/base.html
View File

@@ -17,7 +17,7 @@
</a>
{% if channel_configured %}
<span class="badge bg-success bg-opacity-25 small" style="padding-left: 0.35rem;" title="Private Channel Key Fingerprint: Messages encoded on this server use this shared channel key for additional encryption. Recipients must have the same channel key to decode.">
<i class="bi bi-shield-lock me-2" style="color: #6ee7b7;"></i><code style="font-size: 0.7rem; font-weight: 300; color: #f0c674;">{{ channel_fingerprint }}</code>
<i class="bi bi-shield-lock me-2" style="color: #6ee7b7;"></i><code style="font-size: 0.7rem; font-weight: 300; color: #c9a860;">{{ channel_fingerprint }}</code>
</span>
{% else %}
<span class="badge bg-secondary bg-opacity-25 small text-muted" style="padding-left: 0.35rem;" title="Public Channel: No shared channel key configured. Messages use only passphrase and PIN for encryption.">

43
frontends/web/templates/decode.html
View File

@@ -111,46 +111,7 @@
box-shadow: 0 0 20px rgba(246, 173, 85, 0.4) !important;
}
/* QR Crop Animation */
.qr-crop-container {
position: relative;
overflow: hidden;
border-radius: 8px;
background: rgba(0, 0, 0, 0.3);
width: 100%;
display: flex;
justify-content: center;
align-items: center;
min-height: 120px;
}
.qr-crop-container img {
display: block;
max-height: 180px;
max-width: 180px;
width: auto;
margin: 0 auto;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.qr-crop-container .qr-original { opacity: 1; }
.qr-crop-container .qr-cropped {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0.3);
opacity: 0;
max-height: 160px;
min-width: 140px;
min-height: 140px;
object-fit: contain;
}
.qr-crop-container.scan-complete .qr-original {
opacity: 0;
transform: scale(1.1);
filter: blur(4px);
}
.qr-crop-container.scan-complete .qr-cropped {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
/* QR Crop Animation - uses .qr-scan-container from style.css */
</style>
<div class="row justify-content-center">
@@ -395,7 +356,7 @@
<i class="bi bi-qr-code-scan fs-5 d-block text-muted mb-1"></i>
<span class="text-muted small">Drop QR image</span>
</div>
<div class="qr-scan-container qr-crop-container d-none" id="qrCropContainer">
<div class="qr-scan-container d-none" id="qrCropContainer">
<img class="qr-original" id="qrOriginal" alt="Original">
<img class="qr-cropped" id="qrCropped" alt="Cropped">
</div>

43
frontends/web/templates/encode.html
View File

@@ -111,46 +111,7 @@
box-shadow: 0 0 20px rgba(246, 173, 85, 0.4) !important;
}
/* QR Crop Animation */
.qr-crop-container {
position: relative;
overflow: hidden;
border-radius: 8px;
background: rgba(0, 0, 0, 0.3);
width: 100%;
display: flex;
justify-content: center;
align-items: center;
min-height: 120px;
}
.qr-crop-container img {
display: block;
max-height: 180px;
max-width: 180px;
width: auto;
margin: 0 auto;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.qr-crop-container .qr-original { opacity: 1; }
.qr-crop-container .qr-cropped {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0.3);
opacity: 0;
max-height: 160px;
min-width: 140px;
min-height: 140px;
object-fit: contain;
}
.qr-crop-container.scan-complete .qr-original {
opacity: 0;
transform: scale(1.1);
filter: blur(4px);
}
.qr-crop-container.scan-complete .qr-cropped {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
/* QR Crop Animation - uses .qr-scan-container from style.css */
</style>
<div class="row justify-content-center">
@@ -431,7 +392,7 @@
<i class="bi bi-qr-code-scan fs-5 d-block text-muted mb-1"></i>
<span class="text-muted small">Drop QR image</span>
</div>
<div class="qr-scan-container qr-crop-container d-none" id="qrCropContainer">
<div class="qr-scan-container d-none" id="qrCropContainer">
<img class="qr-original" id="qrOriginal" alt="Original">
<img class="qr-cropped" id="qrCropped" alt="Cropped">
</div>