feat: add license popup with terms and conditions, including UI integration and translations

This commit is contained in:
CNCKitchen
2026-03-20 18:05:44 +01:00
parent 30b3e3a257
commit 60e6ee9201
5 changed files with 158 additions and 2 deletions
+108
View File
@@ -835,4 +835,112 @@ input[type="number"].val:focus { outline: none; border-color: var(--accent); }
.sponsor-close-btn:hover {
background: var(--border);
border-color: var(--accent);
}
/* ── License link (sidebar) ──────────────────────────────────────────────── */
.license-link {
display: block;
width: 100%;
padding: 12px 0;
background: none;
border: none;
color: var(--text-muted);
font-size: 0.82rem;
text-align: center;
cursor: pointer;
text-decoration: underline;
text-decoration-color: transparent;
transition: color 0.15s, text-decoration-color 0.15s;
}
.license-link:hover {
color: var(--accent);
text-decoration-color: var(--accent);
}
/* ── License popup overlay ───────────────────────────────────────────────── */
.license-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
backdrop-filter: blur(3px);
}
.license-overlay.hidden { display: none; }
.license-modal {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 28px 32px;
max-width: 460px;
width: calc(100% - 40px);
display: flex;
flex-direction: column;
gap: 14px;
box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.license-modal h2 {
font-size: 15px;
font-weight: 700;
color: var(--text);
text-transform: none;
letter-spacing: 0;
margin: 0;
}
.license-list {
margin: 0;
padding-left: 1.2em;
display: flex;
flex-direction: column;
gap: 8px;
}
.license-list li {
font-size: 13px;
color: var(--text-muted);
line-height: 1.6;
}
.license-list li strong {
color: var(--text);
}
.license-list li a {
color: var(--accent);
text-decoration: none;
}
.license-list li a:hover {
text-decoration: underline;
}
.license-close-btn {
position: absolute;
top: 14px;
right: 14px;
width: 26px;
height: 26px;
padding: 0;
background: var(--surface2);
border: 1px solid var(--border);
border-radius: 50%;
color: var(--text-muted);
font-size: 15px;
line-height: 1;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.license-close-btn:hover {
background: var(--border);
border-color: var(--accent);
color: var(--text);
}