PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-08-10 07:11:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: website iframe overlay — icon button bottom-right, no blur, tooltip

Browse Source
This commit is contained in:
Pontoporeia
2026-07-10 15:18:42 +02:00
parent 3d5d972ad0
commit 3e3d829d11
3 changed files with 17 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TODO.md
+1
View File
@@ -1,3 +1,4 @@
# TODO # TODO
- [x] Fix CSP: add `frame-src` to allow iframes from `videos.erg.be` and `depnum.happyngreen.fr` - [x] Fix CSP: add `frame-src` to allow iframes from `videos.erg.be` and `depnum.happyngreen.fr`
- [x] Website iframe overlay: remove blur, move button to bottom-right, replace text with SVG icon + tooltip
app/public/assets/css/tfe.css
+8 -24
View File
@@ -145,44 +145,28 @@
border-radius: var(--radius); border-radius: var(--radius);
} }
.tfe-website-overlay { .tfe-website-open-btn {
position: absolute; position: absolute;
inset: 0; bottom: var(--space-xs);
z-index: 1; right: var(--space-xs);
z-index: 2;
display: grid; display: grid;
place-items: center; place-items: center;
background: rgb(0 0 0 / 0.12); width: 40px;
backdrop-filter: blur(4px) saturate(0.6); height: 40px;
transition: background 0.2s;
pointer-events: none;
}
.tfe-website-overlay:hover {
background: rgb(0 0 0 / 0.06);
}
.tfe-website-open-btn {
pointer-events: auto;
display: inline-grid;
grid-auto-flow: column;
align-items: center;
gap: var(--space-2xs);
padding: var(--space-xs) var(--space-m);
background: var(--accent-primary); background: var(--accent-primary);
color: #fff; color: #fff;
border: none; border: none;
border-radius: var(--radius); border-radius: var(--radius);
font-size: var(--step-0);
font-weight: 500;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
box-shadow: 0 2px 8px rgb(0 0 0 / 0.2); box-shadow: 0 2px 8px rgb(0 0 0 / 0.25);
transition: transform 0.15s, box-shadow 0.15s; transition: transform 0.15s, box-shadow 0.15s;
} }
.tfe-website-open-btn:hover { .tfe-website-open-btn:hover {
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 4px 12px rgb(0 0 0 / 0.25); box-shadow: 0 4px 12px rgb(0 0 0 / 0.35);
background: var(--accent-primary); background: var(--accent-primary);
color: #fff; color: #fff;
} }
app/templates/public/tfe.php
+4 -4
View File
@@ -390,14 +390,14 @@
<?php elseif ($isWebsite): ?> <?php elseif ($isWebsite): ?>
<div class="tfe-website-wrapper"> <div class="tfe-website-wrapper">
<span class="tfe-website-badge">Site web</span> <span class="tfe-website-badge">Site web</span>
<div class="tfe-website-overlay">
<a href="<?= $mediaUrl ?>" <a href="<?= $mediaUrl ?>"
class="tfe-website-open-btn" class="tfe-website-open-btn"
target="_blank" target="_blank"
rel="noopener noreferrer"> rel="noopener noreferrer"
Ouvrir le site web ↗ title="Ouvrir le site web dans un nouvel onglet"
aria-label="Ouvrir le site web">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"></path></svg>
</a> </a>
</div>
<iframe src="<?= $mediaUrl ?>" <iframe src="<?= $mediaUrl ?>"
class="tfe-file-iframe" class="tfe-file-iframe"
title="<?= $fileName ?>" title="<?= $fileName ?>"