feat: add lock icons to restricted links on homepage
All checks were successful
CI / update (push) Successful in 1m10s

Add small lock icons in the top right corner of links that require authentication (streaming, family photos, cloud, shopping, family tree, transmission, documents, and audiobooks). The icons use SVG symbol references for efficient reuse and adapt to dark mode automatically.
This commit is contained in:
2026-01-03 22:49:17 +01:00
parent efb548511f
commit 2696f09653
2 changed files with 32 additions and 0 deletions

View File

@@ -46,6 +46,7 @@
transition: 200ms;
width: 100%;
padding: 1rem;
position: relative;
}
:global(.links_grid a:hover){
scale: 1.02;
@@ -57,11 +58,23 @@
:global(.links_grid h3){
font-size: 1.5rem;
}
:global(.links_grid a .lock-icon){
position: absolute;
top: 0.5rem;
right: 0.5rem;
width: 1.5rem;
height: 1.5rem;
fill: var(--nord0);
opacity: 0.6;
}
@media (prefers-color-scheme: dark){
:global(.links_grid h3){
color: white;
}
:global(.links_grid a .lock-icon){
fill: white;
}
:global(.links_grid a:nth-child(4n)),
:global(.links_grid a:nth-child(4n) svg){
background-color: var(--nord6-dark);