added details and pop-up to event calendar
All checks were successful
publish / publish (push) Successful in 26s

This commit is contained in:
Jannik Menzel 2025-06-20 17:26:03 +02:00
parent e905c11f70
commit 2264cd53b5
7 changed files with 234 additions and 146 deletions

View file

@ -14,6 +14,7 @@
--color-off-dark: #1D1F29;
--color-light: #F8F9Fa;
--color-dark: #191A23;
--color-today-highlight: #757F8A44;
}
.dark {
@ -23,6 +24,7 @@
--color-link: #BBE04C;
--color-off: #1D1F29;
--color-off-dark: #F3F3F3;
--color-today-highlight: #28303F;
}
/* ========================
@ -383,7 +385,7 @@ li .dropdown-item-mobile {
Button
======================== */
.btn {
font-size: 1.15rem;
font-size: 1.1rem;
}
.btn-primary {
@ -451,7 +453,7 @@ footer {
width: 100%;
margin-top: auto;
text-align: center;
font-size: 0.95rem;
font-size: 1.1rem;
}
.footer-nav ul {
@ -493,7 +495,7 @@ footer {
}
.page {
column-count: 2;
column-count: 3;
column-gap: 2rem;
}
@ -603,6 +605,10 @@ footer {
color: var(--color-dark) !important;
}
.fc-event-title {
font-weight: bold !important;
}
.fc-toolbar-title {
font-weight: 600;
font-size: 1.8rem;
@ -621,11 +627,11 @@ footer {
}
.fc-day-today {
background-color: var(--color-accent) !important;
background-color: var(--color-today-highlight) !important;
}
.fc-day-today .fc-daygrid-day-number {
color: var(--color-dark) !important;
color: var(--color-text) !important;
}
.fc-event {
@ -637,6 +643,7 @@ footer {
padding: 2px 6px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-bottom: 0.5rem;
}
.fc-event.fc-event-start,
@ -654,22 +661,39 @@ footer {
.fc-event:hover,
.fc-event:active {
white-space: normal;
overflow: visible;
text-overflow: clip;
z-index: 10;
background-color: var(--color-accent);
color: var(--color-dark);
position: relative;
word-break: break-word;
overflow-wrap: break-word;
}
.fc-event:hover .fc-event-time, .fc-event:hover .fc-daygrid-event-dot,
.fc-event:active .fc-event-time, .fc-event:active .fc-daygrid-event-dot {
.fc-daygrid-event-dot {
display: none;
}
#eventModal .modal-content {
background-color: var(--color-background);
color: var(--color-text);
transition: background-color 0.3s ease, color 0.3s ease;
}
#eventModal .modal-header,
#eventModal .modal-footer {
padding: 1rem;
}
#eventModal .modal-content {
background-color: var(--color-light);
border: 1px solid var(--color-text);
border-radius: 30px;
box-shadow: 0 4px 0 0 var(--color-text);
}
.dark #eventModal .modal-content {
background-color: var(--color-dark);
border: 1px solid var(--color-text);
border-radius: 30px;
box-shadow: 0 4px 0 0 var(--color-text);
}
/* ========================
404 Error Page
======================== */