div { height: 100%; min-height: 100px; position: relative; } .cCalendar td.cCalendar_nonDate { background: var(--i-background_2); } .cCalendar td.cCalendar_today { background: var(--i-background_dark); color: var(--i-color_background-dark-contrast); } .cCalendar_dayNumber { color: inherit; font-size: 1.1em; font-weight: 600; display: inline-block; } .cCalendar_miniAddEvent { padding: .2em .4em; background: var(--i-background_4); color: inherit; display: inline-block; border-radius: 5px; opacity: 0; transition: 0.2s all ease-in-out; margin-inline-start: .5em; } .cCalendar td:hover .cCalendar_miniAddEvent { opacity: .5; } .cCalendar td .cCalendar_miniAddEvent:hover { opacity: 1; } .cCalendar_today .cCalendar_miniAddEvent{ background: none; } /* EVENT STYLES */ a.cEvents_event, .cEvents_event a, .cEvents_event.cEvents_empty span { display: block; line-height: 28px; height: 28px; /* This value is needed since some elements use font-size: 0 */ font-size: var(--i-font-size_-1); padding: 0 1em; color: #fff; border-radius: 20px; white-space: nowrap; overflow: hidden; background: var(--i-background_dark); } a.cEvents_style_blank, .cEvents_style_blank a, .cCalendarIcon.cEvents_style_blank { background-color: transparent; border: 1px solid var(--i-background_5); } a.cEvents_event.cEvents_eventSmall, .cEvents_event.cEvents_eventSmall a, .cEvents_event.cEvents_eventSmall.cEvents_empty span { font-size: var(--i-font-size_-2); display: inline-block; } .cEvents_time { font-size: max(10px, .7em); text-transform: uppercase; opacity: 0.7; } .cEvents_event.cEvents_empty span { background: transparent; } /* Single event special styles */ .cEvents_single .cEvents_event a { border-radius: 20px; } /* Ranged event special styles */ .cEvents_ranged .cEvents_event a { border-radius: 0; } .cEvents_ranged .cEvents_event:not(.cEvents_first) a { margin-inline-start: -7px; padding-inline-start: 8px; } .cEvents_ranged .cEvents_event:not(.cEvents_last) a { margin-inline-end: -8px; } .cEvents_ranged .cEvents_event.cEvents_first a { border-start-start-radius: 20px; border-end-start-radius: 20px; } .cEvents_ranged .cEvents_event.cEvents_last a { border-start-end-radius: 20px; border-end-end-radius: 20px; } /* Hide details in all but the first in each row */ tr td:not(:first-child):not(.cCalendar_firstDay) .cEvents_ranged .cEvents_event:not(.cEvents_first) a, tr td:not(:first-child):not(.cCalendar_firstDay) .cEvents_ranged .cEvents_event:not(.cEvents_first) a span { font-size: 0; } tr td:not(:first-child):not(.cCalendar_firstDay) .cEvents_ranged .cEvents_event:not(.cEvents_first) a img { display: none; } /* EVENT VIEW */ .cEvents__sidebarOnlineLogo{ display: flex; align-items: center; justify-content: center; color: var(--i-color_soft); } .cEvents__sidebarOnlineLogo svg{ height: .8em; width: auto; margin: 0 .4em; } .cCalendarBlock_map { text-align: center; margin: 1em auto; } .cCalendar_shortInput { width: auto; } /* Submit screen */ .cCalendarSubmit_field { display: inline-block; position: relative; } .cCalendarSubmit_field input { padding-inline-start: 35px !important; } .cCalendarSubmit_field i[class*=" fa-"] { position: absolute; color: var(--i-color_soft); top: 50%; inset-inline-start: 1em; transform: translateY(-50%); font-size: 1em; opacity: .5; pointer-events: none; } #event_remind_me [type="number"]{ max-width: 60px; } .eventStreamDate .cCalendarEmbed_calendar { background: var(--i-background_2); } .eventStreamDate .ipsCalendarDate { width: 80px; } /* ---------------- - Events ---------------- */ /* Featured events carousel */ .cEvents__overview-header{ display: grid; gap: var(--i-sp_block); } @media (min-width: 767px){ .cEvents__overview-header:has(.cEvents__overview-featured){ grid-template-columns: 1fr max(340px, 30%); } } .ipsData--events-featured{ --i-data--max: 1; --i-data--gap: 0px; --i-data--radius: 0 0 var(--i-box--bo-ra) var(--i-box--bo-ra); --i-data--desc-truncate: 2; --i-data--display-desc: initial; } .ipsData--events-featured .ipsData__content{ padding-inline-start: 6em; } .ipsData--events-featured .ipsCalendarDate{ width: 3.3em; position: absolute; inset-inline-start: 1.5em; } /* A hard-coded value is needed here since --i-color_root is overwritten with white in .ipsData--wallpaper */ [data-ips-scheme="light"] .ipsData--events-featured .ipsCalendarDate__date{ color: hsl(0 0% 30%); } /* Search */ .cEvents__search { display: flex; flex-wrap: wrap; gap: 1.8em 1em; } .cEvents__search > *{ flex: 1 1 100%; } .ipsEventSearch__searchLocation{ flex: 0 0 auto; font-weight: 600; font-size: .9em; align-self: start; } .ipsEventSearch__searchLocation:hover{ text-decoration: underline; } .cEvents__search__field--date { flex-basis: 150px; } .cEvents__search__field--date input{ width: 100%; } .cEvents__search__label { color: var(--i-color_hard); display: block; font-weight: 600; margin-bottom: .5em; } .cEvents__search__searchWrap :is([type="text"], [type="search"]) { flex: 1 1 auto; } @media (max-width: 767px) { .ipsEventSearch__searchLocation span { display: none; } } .ipsEventSearch .ipsField_loading { background-image: url('"{resource="loaders/tiny_loading@2x.gif" app="core" location="front" inCss="true"}"') !important; background-size: 14px 14px; background-repeat: no-repeat; background-position: right 5px center; } .cEvents__searchMap { height: 350px; background: var(--i-background_3); } .cEvents__searchMap--loading > * { display: none; } /* Listing */ .cEvent__onlineLogo{ place-self: end; margin: 5px; background: var(--i-background_1); padding: 8px 12px; pointer-events: none; border-radius: inherit; } .cEvent__onlineLogo svg{ display: block; width: auto; height: 12px; } /* Near me section */ .ipsEventsNearMe__map{ padding: 10px; grid-column: span 2; } .ipsEventsNearMe__map #map{ min-height: 300px; border-radius: var(--i-box--bo-ra); } @media (max-width: 860px){ .ipsEventsNearMe__map { grid-column: 1 / -1; } } .ipsEventsNearMe__map > .ipsMap { height: 100%; } @media (max-width: 768px) { .ipsEventList--nearMe { grid-template-columns: 1fr; grid-template-rows: repeat(2, 1fr); } .cEvents__skeleton--map { display: none; } } /* Month navigator */ .cEvents__monthNav { display: flex; background: var(--i-background_dark); color: #fff; overflow-x: auto; } .cEvents__monthNav__monthItem { flex: 1 0 auto; color: inherit; display: flex; flex-direction: column; align-items: center; line-height: 1.4; padding: 1.1em 0.8em; } .cEvents__monthNav__monthItem:hover { background-image: linear-gradient(hsl(0 0% 100% / .1) 0% 100%); color: #fff; } .cEvents__monthNav__monthItem--active{ background-color: var(--i-primary); color: var(--i-primary-contrast); } .cEvents__monthNav__month { font-size: 1.14em; font-weight: 500; text-transform: uppercase; } .cEvents__monthNav__year { font-size: .9em; } .cEvents__skeleton--map { position: relative; width: 100%; min-height: 300px; } /* BOTH */ @media screen and (max-width: 979px) { /* Submit screen */ .cCalendarSubmit_field { width: 100%; } /* .cCalendarSubmit_field input { max-width: 100% !important; width: 100% !important; } */ /* Calendar views */ .cCalendar th span, .cCalendar_miniAddEvent { display: none; } } /* TABLETS */ @media screen and (min-width: 768px) and (max-width: 979px) { .cCalendar th::after { content: attr(data-short); } } /* PHONES */ @media screen and (max-width: 767px) { /* Calendar views */ .cCalendar td { min-height: 40px; padding: 0; } .cCalendar td > div { padding-bottom: 0; min-height: 0; } .cCalendar td.cCalendar_today { background: transparent; } .cCalendar th::after { content: attr(data-veryShort); } .cCalendar .cEvents { display: none; } .cCalendar .cCalendar_dayNumber { display: grid; place-content: center; height: 40px; padding: 4px; margin: 1px; font-size: var(--i-font-size_-2); } .cCalendar .cCalendar_hasEvents .cCalendar_dayNumber { border: 2px solid var(--i-background_5); background: var(--i-background_2); } .cCalendar .cCalendar_hasEvents.cCalendar_today .cCalendar_dayNumber { background: rgba(205, 56, 22, 0.19); } .cCalendar td.cCalendar_today .cCalendar_dayNumber { background: var(--i-background_1); border: 2px solid currentColor; color: #cd3816; } }]]> .cCalendarEmbed_dates dt { float: left; width: 3.8em; font-weight: 500; color: var(--i-color_soft); } [dir="rtl"] .cCalendarEmbed_dates dt{ float: right; } span { display: block; text-align: center; } .cCalendarDate_month { color: #a93848; text-transform: uppercase; font-size: var(--i-font-size_4); line-height: 1; font-weight: 500; } .cCalendarDate_date { font-size: var(--i-font-size_7); line-height: 1; font-weight: 300; color: var(--i-color_soft); }]]>