Template:18PlusDisclaimer/styles.css: Difference between revisions
Template page
More actions
No edit summary |
No edit summary |
||
| Line 54: | Line 54: | ||
} | } | ||
.age-popup | .age-popup #acceptDisclaimer { | ||
padding: 10px 20px; | padding: 10px 20px; | ||
font-size: 16px; | font-size: 16px; | ||
background: #d62828; | background: #d62828; | ||
color: white; | |||
border: none; | |||
border-radius: 6px; | |||
cursor: pointer; | |||
transition: background 0.3s; | |||
} | |||
.age-popup #declineDisclaimer { | |||
padding: 10px 20px; | |||
font-size: 16px; | |||
background: #000000; | |||
color: white; | color: white; | ||
border: none; | border: none; | ||
Revision as of 00:23, 19 April 2025
.age-overlay {
display: none;
position: fixed;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
text-align: center;
pointer-events: all; /* block everything underneath */
user-select: none; /* prevent selecting background content */
}
.age-blur {
position: absolute;
width: 100%;
height: 100%;
backdrop-filter: blur(12px);
z-index: 1;
pointer-events: none; /* allow clicks to go through to popup only */
}
.age-popup {
position: relative;
z-index: 2;
background: white;
padding: 30px;
border-radius: 12px;
max-width: 400px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
opacity: 0;
transform: translateY(-50px);
transition: all 0.5s ease-out;
pointer-events: all; /* allow interaction with popup */
user-select: text; /* allow selecting inside the popup */
}
.age-popup.slide-active {
opacity: 1;
transform: translateY(0);
}
.age-popup h2 {
margin-bottom: 15px;
}
.btn-group {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px;
}
.age-popup #acceptDisclaimer {
padding: 10px 20px;
font-size: 16px;
background: #d62828;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background 0.3s;
}
.age-popup #declineDisclaimer {
padding: 10px 20px;
font-size: 16px;
background: #000000;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background 0.3s;
}
.age-popup button:hover {
background: #a41e1e;
}