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

tfe: wrap website iframe in overlay-style div with Site web badge, clearer link text

Browse Source
This commit is contained in:
Pontoporeia
2026-07-10 14:16:05 +02:00
parent c513ad2545
commit f5a7d70fbc
3 changed files with 80 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/public/assets/css/tfe.css
+62 -11
View File
@@ -70,7 +70,7 @@
overflow: visible;
}
.tfe-file-item:has(.tfe-file-iframe) {
.tfe-file-item:has(.tfe-website-wrapper) {
min-height: 0;
overflow: visible;
}
@@ -118,22 +118,73 @@
border: none;
}
.tfe-website-link {
/* ── Website embed wrapper (like PDF overlay) ── */
.tfe-website-wrapper {
position: relative;
width: 100%;
display: grid;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.tfe-website-badge {
position: absolute;
top: var(--space-xs);
left: var(--space-xs);
z-index: 2;
display: inline-block;
padding: 0.15em 0.6em;
font-size: var(--step--2);
font-weight: 500;
line-height: 1.4;
color: color-mix(in srgb, var(--accent-primary) 90%, #000);
background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent);
border-radius: var(--radius);
}
.tfe-website-overlay {
position: absolute;
inset: 0;
z-index: 1;
display: grid;
place-items: center;
background: rgb(0 0 0 / 0.12);
backdrop-filter: blur(4px) saturate(0.6);
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-3xs);
padding: var(--space-2xs) var(--space-xs);
font-size: var(--step--1);
color: var(--accent-primary);
text-decoration: none;
border: 1px solid var(--border);
gap: var(--space-2xs);
padding: var(--space-xs) var(--space-m);
background: var(--accent-primary);
color: #fff;
border: none;
border-radius: var(--radius);
margin-bottom: var(--space-2xs);
font-size: var(--step-0);
font-weight: 500;
text-decoration: none;
cursor: pointer;
box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);
transition: transform 0.15s, box-shadow 0.15s;
}
.tfe-website-link:hover {
background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-primary));
.tfe-website-open-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgb(0 0 0 / 0.25);
background: var(--accent-primary);
color: #fff;
}
.tfe-file-item figcaption {