/** * The Events Calendar Tribe Theme Stylesheet * * To add your own custom styles, create a stylesheet with the name * tribe-events.css in the tribe-events/ directory of your theme. * Your new stylesheet will be loaded after our own stylesheet. * * To replace our stylesheet altogether, you can use the 'tribe_events_stylesheet_url' filter. * * @package TribeEventsCalendar * */ :root { --featured-event-bg: #0ea0d7; } /* = Global & Miscellaneous Styles =============================================*/ /* Tribe Theme Color */ #tribe-events-content .tribe-events-tooltip h4, #tribe_events_filters_wrapper .tribe_events_slider_val, .single-tribe_events a.tribe-events-ical, .single-tribe_events a.tribe-events-gcal { color: #21759b; } .tribe-events-calendar td.tribe-events-present div[id*='tribe-events-daynum-'], .tribe-events-calendar td.tribe-events-present div[id*='tribe-events-daynum-'] > a, #tribe_events_filters_wrapper input[type=submit], .tribe-events-button, #tribe-events .tribe-events-button, .tribe-events-button.tribe-inactive, #tribe-events .tribe-events-button:hover, .tribe-events-button:hover, .tribe-events-button.tribe-active:hover { background-color: #21759b; } #tribe_events_filters_wrapper input[type=submit]:hover, .tribe-events-button.tribe-active:hover { background-color: #0f3647; } .tribe-events-button.tribe-inactive, .tribe-events-button:hover, #tribe-events .tribe-events-button:hover, .tribe-events-button.tribe-active:hover { color: #fff; } #tribe_events_filters_wrapper h3 span:after { border-top-color: #21759b; } #tribe_events_filters_wrapper .tribe_events_filter_item.closed h3 span:after { border-left-color: #21759b; } /* Important Link Styles */ ul.tribe-events-sub-nav a, .tribe-events-back a, .tribe-events-list-widget .tribe-events-widget-link a, .tribe-events-adv-list-widget .tribe-events-widget-link a { font-size: 15px; font-weight: bold; } /* Calendar Add Buttons */ .tribe-events-gcal { margin-right: 1.25em; } /* Event Schedule Detail Styling */ .tribe-events-divider { display: none; } .event-is-recurring .tribe-events-divider { display: inline; } /* Featured Images */ .tribe-events-event-image { margin-bottom: 1.25em; text-align: left; } /* General Template Headers */ .tribe-events-page-title { font-size: 30px; font-weight: bold; } /* General Template Header/Footer Nav */ .single-tribe_events #tribe-events-footer, .tribe-events-day #tribe-events-footer, .events-list #tribe-events-footer, .tribe-events-map #tribe-events-footer, .tribe-events-photo #tribe-events-footer { border-top: 1px solid #e5e5e5; padding-top: 2em; } /* General Template Header/Footer Nav */ .single-tribe_events #tribe-events-header { display: none; } /* = Day Grid Template Styles @ Template: day.php =============================================*/ .tribe-events-day .tribe-events-day-time-slot .tribe-events-day-time-slot-heading { font-size: 21px; margin: 1.5em 0 .25em; background-color: transparent; padding: 6px 10px; background: #e0e0e0; color: #fff; text-align: center; line-height: 1; } /* = List View Template Styles @ Template: list.php =============================================*/ .tribe-events-list .type-tribe_events { border-bottom: 0; margin-bottom: 2rem; padding: 0; position: relative; } .tribe-events-list .type-tribe_events:first-of-type { margin-top: 2rem; } .tribe-events-list .type-tribe_events .tribe-events-list-event-title { font-size: 1.6em; } /* Date Seperators */ .tribe-events-list-separator-year { font-size: 28px; padding-top: 1.25em; } .tribe-events-list-separator-year + .tribe-events-list-separator-month { margin-top: .25em; } .tribe-events-list-separator-month { text-transform: none; font-size: 24px; margin: 1.25em auto; text-align: center; position: relative; background-color: transparent; z-index: 1; } .tribe-events-list-separator-month:after { content: ''; border-bottom: 1px solid #c2c2c2; height: 1px; width: 100%; display: block; position: absolute; top: 50%; left: 0; z-index: -1; } .tribe-events-list-separator-month span { background-color: #fff; padding: 0 7.5%; } .tribe-events-list-separator-month + .type-tribe_events.tribe-events-first { padding-top: 1.5em; } .tribe-events-list .type-tribe_events.tribe-event-end-month { padding-bottom: 1.5em; } /* Meta */ .tribe-events-loop .tribe-events-event-meta { margin-bottom: 1em; font-size: 13px; } .tribe-events-list .tribe-events-loop .tribe-events-event-meta .recurringinfo { padding-left: 0; font-weight: normal; vertical-align: top; } .tribe-events-list .time-details, .tribe-events-list .tribe-events-venue-details { line-height: 1.2; } .tribe-events-list .tribe-events-venue-details, .tribe-events-event-meta address.tribe-events-address { font-weight: normal; font-style: italic; } .tribe-events-event-meta address.tribe-events-address { padding-right: 3px; } /* = List View & Single Venue (Pro Version) Template Styles @ Template: list.php & single-venue.php =============================================*/ /* Loop */ .events-list .tribe-events-loop, .tribe-events-day .tribe-events-loop, .single-tribe_venue .tribe-events-loop, .single-tribe_organizer .tribe-events-loop { max-width: 700px; margin: 0 auto; } /* = Single Event Template Styles @ Template: single-event.php =============================================*/ .single-tribe_events h2.tribe-events-single-event-title { font-size: 33px; } /* Date/Time */ .tribe-events-schedule { margin: 1em 0 1.5em; } .single-tribe_events .tribe-events-schedule .tribe-events-divider { display: inline-block; zoom: 1; *display: inline; font-weight: normal; } .single-tribe_events .tribe-events-schedule .recurringinfo { margin-right: .5em; } .single-tribe_events .tribe-events-schedule h3 { font-size: 18px; margin: 0; } /* Cal Links */ .single-tribe_events .tribe-events-cal-links { margin-bottom: 1.75em; display: block; } .single-tribe_events a.tribe-events-ical, .single-tribe_events a.tribe-events-ical:hover, .single-tribe_events a.tribe-events-gcal, .single-tribe_events a.tribe-events-gcal:hover { background-color: transparent; text-transform: none; font-size: 14px; font-weight: bold; letter-spacing: 0; padding: 0; float: none; color: #21759b; } /* Featured Image */ .single-tribe_events .tribe-events-event-image { text-align: left; margin-bottom: 1.25em; } /* Event Schedule Detail Styling */ .tribe-events-event-schedule-details { margin-right: .5em; } /* Event Meta */ .tribe-events-meta-group .tribe-events-single-section-title { font-size: 17px; } .single-tribe_events .tribe-events-event-meta { font-size: 14px; } /* = Calendar Styles (includes styles for both large & small calendars) @ Template: month.php & widgets/calendar-widget.php =============================================*/ /* Global Calendar Styles */ #tribe-events-content .tribe-events-calendar td { border: 1px solid #d2d2d2; border-top: 0; -webkit-transition: all .2s cubic-bezier(.550, .085, .680, .530); -moz-transition: all .2s cubic-bezier(.550, .085, .680, .530); -ms-transition: all .2s cubic-bezier(.550, .085, .680, .530); -o-transition: all .2s cubic-bezier(.550, .085, .680, .530); transition: all .2s cubic-bezier(.550, .085, .680, .530); } #tribe-events-content .tribe-events-calendar td:hover { background: #f7f7f7; -webkit-box-shadow: rgba(0,0,0, .2) 0 0 10px; box-shadow: rgba(0,0,0, .2) 0 0 10px; } #tribe-events-content .tribe-events-calendar td.tribe-events-othermonth { background: #f9f9f9; } #tribe-events-content .tribe-events-calendar .tribe-events-othermonth:hover { -webkit-box-shadow: none; box-shadow: none; } #tribe-events-content table.tribe-events-calendar { border-bottom: 1px solid #d2d2d2; border-top: 0; } .tribe-events-calendar div[id*='tribe-events-daynum-'], .tribe-events-calendar div[id*='tribe-events-daynum-'] a { background-color: #b2b2b2; color: #fff; font-size: 12px; font-weight: bold; } .tribe-events-calendar div[id*='tribe-events-daynum-'] a:hover { color: #666; } .tribe-events-calendar td.tribe-events-past div[id*='tribe-events-daynum-'], .tribe-events-calendar td.tribe-events-past div[id*='tribe-events-daynum-'] > a { background-color: #f7f7f7; color: #707070; } .tribe-events-calendar td.tribe-events-past .tribe-events-month-event-title a, .tribe-events-calendar td.tribe-events-past .tribe-events-viewmore a { opacity: .5; filter: Alpha(opacity=50); } .tribe-events-calendar td.tribe-events-othermonth.tribe-events-future div[id*='tribe-events-daynum-'], .tribe-events-calendar td.tribe-events-othermonth.tribe-events-future div[id*='tribe-events-daynum-'] > a { background-color: #b2b2b2; color: #454545; } /* Global Tooltips */ .tribe-events-calendar .tribe-events-tooltip, .tribe-events-week .tribe-events-tooltip, .tribe-events-shortcode.view-week .tribe-events-tooltip, .recurring-info-tooltip { border: 0; background-color: #fff; color: #606060; padding: .75em 1em 0; -webkit-box-shadow: 3px 4px 21px rgba(0,0,0,.38); -moz-box-shadow: 3px 4px 21px rgba(0,0,0,.38); box-shadow: 3px 4px 21px rgba(0,0,0,.38); } .tribe-events-tooltip .tribe-events-arrow { width: 20px; height: 7px; background-image: url(../images/tribe-theme/tribe-theme-tooltips.png); -webkit-background-size: 37px 20px; background-size: 37px 20px; bottom: -7px; } /* Large Calendar Specifics */ .events-archive.events-gridview #tribe-events-content table .type-tribe_events { border-bottom: 1px solid #e0e0e0; } .events-archive.events-gridview #tribe-events-content table .tribe-events-last { border-bottom: 0; } .tribe-events-calendar thead th { background-color: #666; color: #fff; font-weight: bold; padding: 1em 0; white-space: nowrap; border-left: 1px solid #666; border-right: 1px solid #666; } .tribe-events-calendar td div[id*='tribe-events-daynum-'] { padding: 4px 9px 6px; } /* Large Calendar Tooltip Specifics */ #tribe-events-content .tribe-events-tooltip h4 { margin: 0; background-color: transparent; font-size: 18px; padding: 0; letter-spacing: 0; font-weight: bold; } .tribe-events-tooltip .tribe-events-event-body { font-size: 11px; padding: 0; } .tribe-events-tooltip .duration { font-style: normal; font-weight: bold; margin: 0; padding: .4em 0 .5em; } .tribe-events-tooltip:not(.tribe-event-featured) .tribe-events-event-thumb { padding: .85em 1em 0 0; } .tribe-events-tooltip p.entry-summary { font-size: 13px; padding-top: .5em; } .events-list.tribe-bar-is-disabled #tribe-events-content-wrapper { max-width: 700px; margin: 0 auto; } .tribe-events-map.tribe-bar-is-disabled #tribe-events-content-wrapper { max-width: none; } .tribe-events-tooltip.tribe-events-tooltip-flipdown { &::before { border-bottom-color: #fff; top: -20px; /* Normally it's -21px, but -20px works better in Tribe Events theme because of tooltip box-shadow. */ } } /** * Shortcode specific CSS */ .tribe-shortcode-align-right { float: right; } .tribe-shortcode-align-left { float: left; } .tribe-shortcode-align-center { display: table; margin-left: auto; margin-right: auto; } .tribe-shortcode.tribe-events-event-meta.tribe-shortcode-align-right { margin-right: 20px; } .tribe-shortcode.tribe-events-event-meta.tribe-shortcode-align-left { margin-left: 20px; } .tribe-shortcode.tribe-events-event-meta .tribe-events-meta-group { width: auto; min-width: 250px; } /* = Events List Widget Styles (Sidebar) @ Template: widgets/list-widget.php =============================================*/ .tribe-events-list-widget { ol li { list-style: none; margin-bottom: .5rem; } .tribe-list-widget { margin-left: 0; } .tribe-events-list-widget-events { padding: 0 1.5rem; margin-bottom: 1.25rem; } .tribe-event-title { margin-bottom: .25rem; margin-top: 0; } .duration { font-weight: bold; } .tribe-event-featured { background: var(--featured-event-bg); padding-bottom: .75rem; .tribe-event-title { margin-top: .75rem; a { color: white; } } .tribe-event-image { line-height: 0; margin-left: -1.5rem; margin-right: -1.5rem; overflow: hidden; } .tribe-event-duration { color: white; } } } /* = Twenty* overrides =============================================*/ .tribe-theme-twentyten.single-tribe_events .tribe-events-schedule .tribe-events-divider, .tribe-theme-twentyeleven.single-tribe_events .tribe-events-schedule .tribe-events-divider, .tribe-theme-twentytwelve.single-tribe_events .tribe-events-schedule .tribe-events-divider, .tribe-theme-twentythirteen.single-tribe_events .tribe-events-schedule .tribe-events-divider, .tribe-theme-twentyfourteen.single-tribe_events .tribe-events-schedule .tribe-events-divider { display: none; } /* = Events Retina =============================================*/ @media (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1), (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) { .tribe-events-tooltip .tribe-events-arrow { background-image: url(../images/tribe-theme/tribe-theme-tooltips@2x.png); } }