72 lines
2.4 KiB
CSS
72 lines
2.4 KiB
CSS
/* Modal Container */
|
|
.usernotice-modal {
|
|
display: none; /* Modal standardmäßig verstecken */
|
|
position: fixed; /* Fest positioniert */
|
|
z-index: 1000; /* Über anderen Elementen angezeigt */
|
|
left: 52.5%; /* Horizontale Zentrierung */
|
|
top: 10%; /* Abstand von der oberen Seite */
|
|
transform: translateX(-50%); /* Modal horizontal zentrieren */
|
|
width: 90%; /* Breite für Mobilgeräte anpassen */
|
|
max-width: 650px; /* Maximale Breite des Modals */
|
|
max-height: 80%; /* Maximale Höhe des Modals */
|
|
overflow-y: auto; /* Scrollen, wenn der Inhalt zu groß ist */
|
|
}
|
|
|
|
/* Modal Inhalt */
|
|
.usernotice-modal-content {
|
|
background-color: #2196f3; /* Hintergrundfarbe */
|
|
color: white; /* Textfarbe */
|
|
padding: 20px; /* Innenabstand */
|
|
border-radius: 8px; /* Abgerundete Ecken */
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* Schatteneffekt */
|
|
margin: 0 auto; /* Zentrieren des Modalinhalts */
|
|
width: 100%; /* 100% Breite des Containers */
|
|
max-width: 650px; /* Maximale Breite */
|
|
}
|
|
|
|
/* Schließen-Button */
|
|
.usernotice-close {
|
|
color: white; /* Farbe des Schließen-Buttons */
|
|
float: right; /* Button nach rechts ausrichten */
|
|
font-size: 28px; /* Größe des Schließen-Buttons */
|
|
font-weight: bold; /* Gewicht des Schließen-Buttons */
|
|
cursor: pointer; /* Zeiger-Style beim Hover */
|
|
}
|
|
|
|
.usernotice-close:hover {
|
|
color: darkred; /* Farbe beim Hover über den Schließen-Button */
|
|
}
|
|
|
|
/* Modal Header */
|
|
.usernotice-modal-content h3 {
|
|
font-size: 2rem; /* Entspricht der typischen Größe von <h2> */
|
|
margin: 0 0 10px 0; /* Abstand nach unten */
|
|
color: white; /* Schriftfarbe */
|
|
}
|
|
|
|
/* Responsive Design für kleinere Bildschirme */
|
|
@media (max-width: 600px) {
|
|
.usernotice-modal {
|
|
top: 15%; /* Etwas weiter unten auf Mobilgeräten */
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 95%; /* Breitere Darstellung auf kleineren Bildschirmen */
|
|
}
|
|
|
|
.usernotice-modal-content {
|
|
padding: 15px; /* Weniger Padding auf Mobilgeräten */
|
|
max-width: 100%; /* Keine feste Breite auf Mobilgeräten */
|
|
}
|
|
|
|
.usernotice-close {
|
|
font-size: 24px; /* Kleinere Schließen-Schaltfläche */
|
|
}
|
|
|
|
/* Dezenter Trennstrich */
|
|
.usernotice-divider {
|
|
border: none;
|
|
border-top: 1px solid rgba(244, 244, 244, 0.98);
|
|
margin: 10px 0;
|
|
width: 100%;
|
|
}
|
|
}
|