diff --git a/core/static/css/theme/events.css b/core/static/css/theme/events.css index ea53251..511bf1f 100644 --- a/core/static/css/theme/events.css +++ b/core/static/css/theme/events.css @@ -40,18 +40,51 @@ /* Partner event ribbon */ .partner-event-ribbon { position: absolute; - top: 10px; - right: 10px; - background: linear-gradient(135deg, #ff9800, #ff5722); + top: 30px; + right: -20px; + background: linear-gradient(135deg, rgba(132, 0, 75, 0.6), #84004b); color: white; - padding: 0.3rem 1rem; + padding: 0.3rem 0; font-size: 0.8rem; font-weight: var(--font-weight-medium); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); z-index: 10; - border-radius: 3px; + transform: rotate(45deg); text-transform: uppercase; letter-spacing: 0.5px; + width: 160px; + text-align: center; + overflow: hidden; + clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); +} + +/* Partner event card left border */ +.timeline-panel.partner-event-card { + border: none; + border-left: 4px solid #84004b; + transition: all 0.3s ease; +} + +.partner-event-ribbon::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 25px; + height: 25px; + background: linear-gradient(90deg, rgba(0,0,0,0), rgba(0, 0, 0, 0.15)); + clip-path: polygon(0 0, 100% 0, 0 100%); +} + +.partner-event-ribbon::after { + content: ''; + position: absolute; + bottom: 0; + right: 0; + width: 20px; + height: 20px; + background: rgba(0, 0, 0, 0.15); + clip-path: polygon(0 0, 100% 0, 0 100%); } .event-item:hover { diff --git a/core/templates/core/event_index_page.html b/core/templates/core/event_index_page.html index 2eeb6b7..b81c875 100644 --- a/core/templates/core/event_index_page.html +++ b/core/templates/core/event_index_page.html @@ -19,7 +19,7 @@ {{ event.start_date|date:"d" }} {{ event.start_date|date:"b" }} -