File Editor
Directories:
.. (Back)
app
tickets-commerce
Files:
attendees.css
attendees.min.css
common-responsive.css
common-responsive.min.css
details.css
details.min.css
my-tickets.css
my-tickets.min.css
rsvp-v1.css
rsvp-v1.min.css
rsvp.css
rsvp.min.css
tickets-admin-attendees.css
tickets-admin-attendees.min.css
tickets-admin-blocks.css
tickets-admin-blocks.min.css
tickets-admin-settings.css
tickets-admin-settings.min.css
tickets-admin-wp.css
tickets-admin-wp.min.css
tickets-admin.css
tickets-admin.min.css
tickets-commerce.css
tickets-commerce.min.css
tickets-common.css
tickets-common.min.css
tickets-embed.css
tickets-embed.min.css
tickets-forms.css
tickets-forms.min.css
tickets-registration-page.css
tickets-registration-page.min.css
tickets-report-print.css
tickets-report-print.min.css
tickets-report.css
tickets-report.min.css
tickets-tables.css
tickets-tables.min.css
tickets-v1.css
tickets-v1.min.css
tickets.css
tickets.min.css
tpp.css
tpp.min.css
Create New File
Create
Edit File: tickets.css
/** * This CSS file was auto-generated via PostCSS * * Contributors should avoid editing this file, but instead edit the associated * src/resources/postcss/ file. For more information, check out our engineering * docs on how we handle CSS in our engineering docs. * * @see: https://the-events-calendar.github.io/products-engineering/docs/code-standards/css/ */ /** * Event Tickets - Tickets Stylesheet. * * @since 5.0.3 */ /* * Common CSS * * DO NOT EDIT THIS CSS FILE DIRECTLY. * ------------------------------------------------------------- * This file is just a clearing-house, see the pcss directory * and edit the source files found there. */ /* Event Tickets Utilities */ /* ----------------------------------------------------------------------------- * * Utilities * * This file is just a clearing-house. * Make partials (start with an underscore) for any actual css code. * * ----------------------------------------------------------------------------- */ /* Variables - needed everywhere. */ /* ----------------------------------------------------------------------------- * SVG - Arrow Right * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Arrow (light, left) * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Caret Down * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Caret Left * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Caret Right * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Caret Up * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Check * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Close * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Day * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Dropdown * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Error * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Featured * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Filters * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Link * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Guest * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - List * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Location * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Mail * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Map * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Map pin * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Messages * ----------------------------------------------------------------------------- */ /* stylelint-disable-line block-no-empty */ /* ----------------------------------------------------------------------------- * SVG - Month * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - No Map * ----------------------------------------------------------------------------- */ /* stylelint-disable-line block-no-empty */ /* ----------------------------------------------------------------------------- * SVG - Paper Plane * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Phone * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Photo * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Plus * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Recurring * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Remove * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Reset * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Search * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Search Filter * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Week * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * SVG - Cal Export * ----------------------------------------------------------------------------- */ /* stylelint-disable-line block-no-empty */ /* Mixins */ /* ----------------------------------------------------------------------------- * Body * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Desktop Body 1 * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Desktop Body 2 * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Desktop Body 3 * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Mobile Body 1 * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Mobile Body 2 * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Mobile Body 3 * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Heading * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Heading 1 * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Heading 2 * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Heading 3 * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Heading 4 * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Heading 5 * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Heading 6 * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Heading 7 * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Heading 8 * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Anchor - Default * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Anchor - Alt * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Anchor - Thin * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Anchor - Thin * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Anchor - Event Title * * This mixin intentionally only affects the text and border _colors_ * to make sure they all follow the Customizer overrides. * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Button - Global * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Button - Solid * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Button - Link * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Button - Border * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Button - Border Small * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Button - Icon Border * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Sliders & Toggles * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Sliders * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Hidden: Hide from both screenreaders and browsers * @author: h5bp.com/u * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Visually Hide: Hide only visually, but have it available for screenreaders * @author: h5bp.com/v * ----------------------------------------------------------------------------- */ /* ----------------------------------------------------------------------------- * Visually Show: Show element after has been hidden with %visually-hide * ----------------------------------------------------------------------------- */ /* Event Tickets Components */ /* Accordion Styles */ .accordion-header { background: none; border: 0; box-sizing: border-box; color: inherit; cursor: pointer; font-size: 12px; font-weight: bold; padding: 10px 20px; position: relative; text-align: left; width: 100%; } .accordion-header:before { background-color: #000; border-radius: 100%; box-sizing: border-box; color: #fff; content: '\f132'; font-family: 'dashicons'; font-size: 10px; font-weight: 400; height: 14px; left: 0; line-height: 17px; padding: 0; padding-right: 1px; position: absolute; text-align: center; top: 12px; width: 15px; } .accordion-header:after { border-bottom: 1px solid #ddd; content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 80%; } .accordion-header.is-active:before { content: '\f460'; line-height: 15px; } .accordion-header:focus { outline: 1px solid #5b9dd9; } .accordion-header:hover { background: none; } .tribe-tickets-editor-history:after { width: calc(100% - 80px); } .tribe_attendee_meta:after { width: calc(100% - 170px); } .tribe_advanced_meta:after { width: calc(100% - 105px); } .accordion-label:focus { outline: none; } .accordion-content { display: none; } .ticket_panel .accordion-content { margin: 1em 0 2em; } .accordion-content.is-active { display: block; } .tribe-common-c-loader.tribe-tickets-loader__tickets-block, .tribe-common-c-loader.tribe-tickets-loader__modal { align-items: center; background: var(--tec-color-background-transparent); display: flex; height: 100%; justify-content: center; left: 0; padding: 0; position: absolute; top: 0; width: 100%; z-index: var(--tec-z-index-spinner-container); } .tribe-common-c-loader.tribe-tickets-loader__modal { height: 100vh; position: fixed; width: 100vw; } .event-tickets .tribe-common-c-loader { align-items: center; background: var(--tec-color-background-transparent); display: flex; height: 100%; justify-content: center; left: 0; padding: 0; position: absolute; top: 0; width: 100%; z-index: var(--tec-z-index-spinner-container); } .tribe-common .tribe-tickets__notice, .event-tickets .tribe-tickets__notice { background-color: var(--tec-color-background-secondary); border-radius: var(--tec-border-radius-default); margin: var(--tec-spacer-4) 0; padding: var(--tec-spacer-3); } .tribe-common .tribe-tickets__notice > *:last-child, .event-tickets .tribe-tickets__notice > *:last-child { margin-bottom: 0; padding-bottom: 0; } .tribe-common .tribe-tickets-notice__title, .event-tickets .tribe-tickets-notice__title { margin: 0; position: relative; } .tribe-common .tribe-tickets-notice__title:empty, .event-tickets .tribe-tickets-notice__title:empty { display: none; } /* Error Notices */ .tribe-common .tribe-tickets__notice--error, .event-tickets .tribe-tickets__notice--error { background-color: var(--tec-color-background-error); display: none; padding-left: 50px; position: relative; } .tribe-common .tribe-tickets__notice--error:before, .event-tickets .tribe-tickets__notice--error:before { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='none' fill-rule='evenodd' transform='translate(1 1)'%3E%3Ccircle cx='8' cy='8' r='7.467' stroke='%23141827' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Ccircle cx='8' cy='11.733' r='1.067' fill='%23141827' fill-rule='nonzero'/%3E%3Cpath stroke='%23141827' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M8 3.733v4.8' fill='%23141827'/%3E%3C/g%3E%3C/svg%3E"); background-size: contain; content: ''; height: var(--tec-spacer-3); left: var(--tec-spacer-4); position: absolute; top: var(--tec-spacer-4); width: var(--tec-spacer-3); } /* "Barred" Notices (visible side borders) */ .tribe-common .tribe-tickets__notice--barred, .event-tickets .tribe-tickets__notice--barred { background-color: var(--tec-color-background); border: var(--tec-spacer-0) solid var(--tec-color-border-secondary); border-bottom: 0; border-radius: 0; border-top: 0; padding: 0 var(--tec-spacer-2); } .tribe-common .tribe-tickets__notice--barred-left, .event-tickets .tribe-tickets__notice--barred-left { border-right: 0; padding: 0 0 0 var(--tec-spacer-2); } .tribe-common .tribe-tickets__notice--barred-right, .event-tickets .tribe-tickets__notice--barred-right { border-left: 0; padding: 0 var(--tec-spacer-2) 0 0; } /* ------------------------------------------------------------------------- * SVG Icons * ------------------------------------------------------------------------- */ .event-tickets .tribe-tickets-svgicon { background-repeat: no-repeat; background-size: contain; } /* ----------------------------------------------------------------------------- * * Tooltip * * ----------------------------------------------------------------------------- */ /* Defining our tooltipster theme. */ .tooltipster-base.tribe-tickets-tooltip-theme { background-color: var(--tec-color-background); border: 1px solid var(--tec-color-border-default); border-radius: var(--tec-border-radius-default); box-shadow: var(--tec-box-shadow-tooltip); height: auto !important; max-width: 254px; padding: var(--tec-spacer-5); } .tooltipster-base.tribe-tickets-tooltip-theme .tooltipster-box { background-color: transparent; border: 0; border-radius: 0; box-shadow: none; margin: 0; } .tooltipster-base.tribe-tickets-tooltip-theme .tooltipster-box .tooltipster-content { color: var(--tec-color-text-primary); overflow: inherit; padding: 0; word-break: break-word; } .tooltipster-base.tribe-tickets-tooltip-theme .tooltipster-arrow { display: none; } /* ----------------------------------------------------------------------------- * * Button: Small * * Example: * <button class="tribe-common-c-btn tribe-common-c-btn--small">...</button> * <a href="#" class="tribe-common-c-btn tribe-common-c-btn--small">...</a> * * ----------------------------------------------------------------------------- */ .tribe-common button.tribe-common-c-btn--small, .tribe-common input[type="button"].tribe-common-c-btn--small, .tribe-common input[type="submit"].tribe-common-c-btn--small, .tribe-common a.tribe-common-c-btn--small { background-color: var(--tec-color-accent-primary); padding: 11px 14px; width: auto; } /* ----------------------------------------------------------------------------- * * Button: Link * * Example: * <button class="tribe-common-c-btn-link">...</button> * <a href="#" class="tribe-common-c-btn-link">...</a> * * ----------------------------------------------------------------------------- */ .tribe-common button.tribe-common-c-btn-link, .tribe-common input[type="button"].tribe-common-c-btn-link, .tribe-common input[type="submit"].tribe-common-c-btn-link, .tribe-common a.tribe-common-c-btn-link { color: var(--tec-color-text-primary); font-family: var(--tec-font-family-sans-serif); font-size: var(--tec-font-size-2); line-height: var(--tec-line-height-3); font-weight: var(--tec-font-weight-regular); border: 0; cursor: pointer; display: inline-block; height: auto; padding: 0; text-decoration: none; width: auto; background-color: transparent; text-align: center; text-decoration: underline; transition: var(--tec-transition-color); } .tribe-common button.tribe-common-c-btn-link:hover, .tribe-common button.tribe-common-c-btn-link:focus, .tribe-common input[type="button"].tribe-common-c-btn-link:hover, .tribe-common input[type="button"].tribe-common-c-btn-link:focus, .tribe-common input[type="submit"].tribe-common-c-btn-link:hover, .tribe-common input[type="submit"].tribe-common-c-btn-link:focus, .tribe-common a.tribe-common-c-btn-link:hover, .tribe-common a.tribe-common-c-btn-link:focus { background-color: transparent; } .tribe-common button.tribe-common-c-btn-link, .tribe-common input[type="button"].tribe-common-c-btn-link, .tribe-common input[type="submit"].tribe-common-c-btn-link, .tribe-common a.tribe-common-c-btn-link { background-color: transparent; color: var(--tec-color-accent-primary); padding: 11px 20px; width: 100%; } .tribe-common button.tribe-common-c-btn-link:focus, .tribe-common button.tribe-common-c-btn-link:hover, .tribe-common input[type="button"].tribe-common-c-btn-link:focus, .tribe-common input[type="button"].tribe-common-c-btn-link:hover, .tribe-common input[type="submit"].tribe-common-c-btn-link:focus, .tribe-common input[type="submit"].tribe-common-c-btn-link:hover, .tribe-common a.tribe-common-c-btn-link:focus, .tribe-common a.tribe-common-c-btn-link:hover { color: var(--tec-color-accent-primary-hover); } .tribe-common button.tribe-common-c-btn-link:active, .tribe-common input[type="button"].tribe-common-c-btn-link:active, .tribe-common input[type="submit"].tribe-common-c-btn-link:active, .tribe-common a.tribe-common-c-btn-link:active { color: var(--tec-color-accent-primary-active); } .tribe-common button.tribe-common-c-btn-link:disabled, .tribe-common input[type="button"].tribe-common-c-btn-link:disabled, .tribe-common input[type="submit"].tribe-common-c-btn-link:disabled, .tribe-common a.tribe-common-c-btn-link:disabled { color: var(--tec-color-accent-primary-background); } /** * Event Tickets - Tickets Stylesheet * * @since 5.0.3 */ /** * Event Tickets - Tickets Stylesheet - Block * * @since 5.0.3 */ .event-tickets .tribe-tickets__tickets-form, .entry .entry-content .event-tickets .tribe-tickets__tickets-form { background-color: var(--tec-color-background); border: 1px solid var(--tec-color-border-secondary); border-radius: var(--tec-border-radius-default); -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; /* stylelint-disable-line property-no-unknown */ margin: var(--tec-spacer-5) 0; max-width: 580px; padding: var(--tec-spacer-3) var(--tec-spacer-3) var(--tec-spacer-4); position: relative; width: 100%; } .event-tickets .tribe-tickets__tickets-form .tribe-tickets__notice--barred-left, .entry .entry-content .event-tickets .tribe-tickets__tickets-form .tribe-tickets__notice--barred-left { display: none; } .event-tickets .tribe-tickets__tickets-title, .entry .entry-content .event-tickets .tribe-tickets__tickets-title { color: var(--tec-color-text-primary); margin: 0 0 var(--tec-spacer-1); } /* Override since we don't have a header at this size */ .event-tickets .tribe-tickets__notice--barred, .entry .entry-content .event-tickets .tribe-tickets__notice--barred { margin-bottom: var(--tec-spacer-3); } .event-tickets .tribe-tickets__tickets-item, .entry .entry-content .event-tickets .tribe-tickets__tickets-item { align-items: center; border-top: 1px solid var(--tec-color-border-secondary); /* stylelint-disable-line value-no-vendor-prefix */ display: grid; -ms-grid-columns: 10fr 1fr; -ms-grid-rows: 1fr 1.5fr; grid-template-columns: 10fr 1fr; grid-template-rows: auto; margin: 0; padding: 12px 0 16px; } .event-tickets .tribe-tickets__tickets-item[data-available="false"], .entry .entry-content .event-tickets .tribe-tickets__tickets-item[data-available="false"] { opacity: 0.5; } .event-tickets .tribe-tickets__tickets-item.show-optout, .entry .entry-content .event-tickets .tribe-tickets__tickets-item.show-optout { -ms-grid-columns: 10fr 1fr; -ms-grid-rows: 1fr 1.5fr 1fr 1fr; grid-template-columns: 10fr 1fr; grid-template-rows: auto; } .event-tickets .tribe-tickets__tickets-item.show-optout .tribe-tickets-attendees-list-optout--wrapper, .entry .entry-content .event-tickets .tribe-tickets__tickets-item.show-optout .tribe-tickets-attendees-list-optout--wrapper { display: block; } .event-tickets .tribe-tickets__tickets-item--inactive + .tribe-tickets__tickets-item--inactive, .entry .entry-content .event-tickets .tribe-tickets__tickets-item--inactive + .tribe-tickets__tickets-item--inactive { display: none; } .event-tickets .tribe-tickets__tickets-item-content-title, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-content-title { align-self: end; grid-column: 1; grid-row: 1; line-height: 1; } .event-tickets .tribe-tickets-attendees-list-optout--wrapper, .entry .entry-content .event-tickets .tribe-tickets-attendees-list-optout--wrapper { display: none; grid-column: 1/span all; -ms-grid-column-span: 3; grid-row: 4; } .event-tickets .tribe-tickets__form .tribe-tickets-attendees-list-optout--wrapper label, .entry .entry-content .event-tickets .tribe-tickets__form .tribe-tickets-attendees-list-optout--wrapper label { color: var(--tec-color-text-secondary); display: flex; font-size: var(--tec-font-size-1); } /* Disabled items */ .event-tickets .tribe-tickets__tickets-item--disabled *, .entry .entry-content .event-tickets .tribe-tickets__tickets-item--disabled * { color: var(--tec-color-text-disabled); color: var(--tec-color-scroll-bar); } .event-tickets .tribe-tickets__tickets-item--disabled .tribe-tickets__tickets-item-quantity, .event-tickets .tribe-tickets__tickets-item--disabled .tribe-tickets__tickets-item-quantity-add, .event-tickets .tribe-tickets__tickets-item--disabled .tribe-tickets__tickets-item-quantity-remove, .event-tickets .tribe-tickets__tickets-item--disabled .tribe-tickets__tickets-item-quantity-number-input, .entry .entry-content .event-tickets .tribe-tickets__tickets-item--disabled .tribe-tickets__tickets-item-quantity, .entry .entry-content .event-tickets .tribe-tickets__tickets-item--disabled .tribe-tickets__tickets-item-quantity-add, .entry .entry-content .event-tickets .tribe-tickets__tickets-item--disabled .tribe-tickets__tickets-item-quantity-remove, .entry .entry-content .event-tickets .tribe-tickets__tickets-item--disabled .tribe-tickets__tickets-item-quantity-number-input { color: var(--tec-color-text-disabled); color: var(--tec-color-scroll-bar); } /** * Event Tickets - Tickets Stylesheet - Details * * @since 5.0.3 */ /* Block details/summary and controls */ .event-tickets .tribe-tickets__tickets-item-details-content, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-details-content { color: var(--tec-color-text-secondary); display: none; grid-column: 1; grid-row: 3; line-height: 1; margin: var(--tec-spacer-0) 0; } .event-tickets .tribe-tickets__tickets-item-details-content.tribe__details--open, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-details-content.tribe__details--open { display: block; } .event-tickets .tribe-tickets__tickets-item-details-summary, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-details-summary { color: var(--tec-color-text-secondary); /* stylelint-disable-line value-no-vendor-prefix */ display: grid; grid-column: 2; grid-row: 1; justify-content: flex-start; padding-left: var(--tec-spacer-0); } .event-tickets .tribe-tickets__tickets-item-details-summary-button--more, .event-tickets .tribe-tickets__tickets-item-details-summary-button--less, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-details-summary-button--more, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-details-summary-button--less { color: var(--tec-color-text-primary); font-family: var(--tec-font-family-sans-serif); font-size: var(--tec-font-size-1); font-weight: var(--tec-font-weight-regular); line-height: var(--tec-line-height-0); background-color: transparent; color: var(--tec-color-text-secondary); position: relative; white-space: nowrap; } .event-tickets .tribe-tickets__tickets-item-details-summary-button--more:after, .event-tickets .tribe-tickets__tickets-item-details-summary-button--less:after, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-details-summary-button--more:after, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-details-summary-button--less:after { border: var(--tec-spacer-0) solid var(--tec-color-background-transparent); content: ''; display: inline-block; margin-bottom: 1px; } .event-tickets .tribe-tickets__tickets-item-details-summary-button--more:after, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-details-summary-button--more:after { border-bottom: 0 none; border-top: var(--tec-spacer-0) solid var(--tec-color-text-secondary); } .event-tickets .tribe-tickets__tickets-item-details-summary-button--less, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-details-summary-button--less { display: none; } .event-tickets .tribe-tickets__tickets-item-details-summary-button--less:after, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-details-summary-button--less:after { border-bottom: var(--tec-spacer-0) solid var(--tec-color-text-secondary); border-top: 0 none; } .event-tickets .tribe__details--open .tribe-tickets__tickets-item-details-summary-button--more, .entry .entry-content .event-tickets .tribe__details--open .tribe-tickets__tickets-item-details-summary-button--more { display: none !important; visibility: hidden; } .event-tickets .tribe__details--open .tribe-tickets__tickets-item-details-summary-button--less, .entry .entry-content .event-tickets .tribe__details--open .tribe-tickets__tickets-item-details-summary-button--less { display: block; } /** * Event Tickets - Tickets Stylesheet - Extras * * @since 5.0.3 */ /* Block "extras" */ .event-tickets .tribe-tickets__tickets-item-extra, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-extra { align-items: baseline; -ms-grid-columns: min-content max-content auto; grid-row: 2; grid-template-columns: min-content max-content auto; } .event-tickets .tribe-tickets__tickets-item-extra.tribe-tickets__tickets-item-extra--price-suffix, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-extra.tribe-tickets__tickets-item-extra--price-suffix { overflow: hidden; text-align: left; } .event-tickets .tribe-tickets__tickets-item-extra-available, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-extra-available { color: var(--tec-color-text-secondary); } .event-tickets .tribe-tickets__tickets-item-extra-price, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-extra-price { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .event-tickets .tribe-tickets__tickets-item-extra-price .tribe-formatted-currency-wrap, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-extra-price .tribe-formatted-currency-wrap { font-weight: var(--tec-font-weight-bold); } .event-tickets .tribe-tickets__tickets-item-extra-price .tribe-tickets__tickets-original-price, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-extra-price .tribe-tickets__tickets-original-price { color: var(--tec-color-text-secondary); font-weight: var(--tec-font-weight-regular); text-decoration: line-through; } .event-tickets .tribe-tickets__tickets-sale-price-suffix, .entry .entry-content .event-tickets .tribe-tickets__tickets-sale-price-suffix { color: var(--tec-color-text-secondary); font-weight: var(--tec-font-weight-regular); } .event-tickets .tribe-tickets__tickets-sale-price-suffix small, .entry .entry-content .event-tickets .tribe-tickets__tickets-sale-price-suffix small { font-size: 100%; } .event-tickets .tribe-tickets__tickets-item-extra-available + .tribe-tickets__tickets-item-details-summary, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-extra-available + .tribe-tickets__tickets-item-details-summary { grid-column: 3; } /** * Event Tickets - Tickets Stylesheet - Quantity * * @since 5.0.3 */ /* Block quantity */ .event-tickets .tribe-tickets__tickets-item-quantity, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-quantity { align-self: flex-start; color: var(--tec-color-text-secondary); display: flex; flex: 0 0 82px; grid-column: 3; grid-row: 1 / span 2; -ms-grid-row-span: 2; justify-content: center; } .event-tickets .tribe-tickets__tickets-item[data-available="false"] .tribe-tickets__tickets-item-quantity, .entry .entry-content .event-tickets .tribe-tickets__tickets-item[data-available="false"] .tribe-tickets__tickets-item-quantity { align-self: center; } .event-tickets .tribe-tickets__tickets-item-quantity-add, .event-tickets .tribe-tickets__tickets-item-quantity-remove, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-quantity-add, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-quantity-remove { align-self: center; background-color: transparent; color: var(--tec-color-icon-secondary); display: inline-block; font-size: 24px; font-weight: var(--tec-font-weight-regular); margin-bottom: var(--tec-spacer-0); width: 12px; } .event-tickets .tribe-tickets__tickets-item-quantity-add:hover, .event-tickets .tribe-tickets__tickets-item-quantity-add:focus, .event-tickets .tribe-tickets__tickets-item-quantity-remove:hover, .event-tickets .tribe-tickets__tickets-item-quantity-remove:focus, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-quantity-add:hover, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-quantity-add:focus, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-quantity-remove:hover, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-quantity-remove:focus { background-color: transparent; color: var(--tec-color-icon-primary); } .event-tickets .tribe-tickets__tickets-item-quantity-number, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-quantity-number { align-items: center; -webkit-appearance: none; appearance: none; background-color: transparent; border: none; color: var(--tec-color-icon-secondary); cursor: pointer; display: inline-flex; height: 48px; justify-content: center; margin: 0; outline: none; overflow: hidden; position: relative; width: 40px; } .event-tickets .tribe-tickets__tickets-item-quantity-unavailable, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-quantity-unavailable { margin-left: var(--tec-spacer-1); white-space: nowrap; } .event-tickets .tribe-tickets__form input[type="number"].tribe-tickets__tickets-item-quantity-number-input, .entry .entry-content .event-tickets .tribe-tickets__form input[type="number"].tribe-tickets__tickets-item-quantity-number-input { -webkit-appearance: textfield; appearance: textfield; background: transparent; border: none; color: var(--tec-color-text-primary); padding: 0; text-align: center; width: -moz-fit-content; width: fit-content; } .event-tickets .tribe-tickets__form input[type="number"].tribe-tickets__tickets-item-quantity-number-input::-webkit-inner-spin-button, .event-tickets .tribe-tickets__form input[type="number"].tribe-tickets__tickets-item-quantity-number-input::-webkit-outer-spin-button, .entry .entry-content .event-tickets .tribe-tickets__form input[type="number"].tribe-tickets__tickets-item-quantity-number-input::-webkit-inner-spin-button, .entry .entry-content .event-tickets .tribe-tickets__form input[type="number"].tribe-tickets__tickets-item-quantity-number-input::-webkit-outer-spin-button { -webkit-appearance: none; } .event-tickets .tribe-tickets__form input[type="number"].tribe-tickets__tickets-item-quantity-number-input:focus, .entry .entry-content .event-tickets .tribe-tickets__form input[type="number"].tribe-tickets__tickets-item-quantity-number-input:focus { color: var(--tec-color-text-primary); } .event-tickets .tribe-tickets__form input[type="number"].tribe-tickets__tickets-item-quantity-number-input.tribe-tickets__tickets-item-quantity-number--active, .entry .entry-content .event-tickets .tribe-tickets__form input[type="number"].tribe-tickets__tickets-item-quantity-number-input.tribe-tickets__tickets-item-quantity-number--active { color: var(--tec-color-text-primary); } /** * Event Tickets - Tickets Stylesheet - Footer * * @since 5.0.3 */ /* Block footer */ .event-tickets .tribe-tickets__tickets-footer, .entry .entry-content .event-tickets .tribe-tickets__tickets-footer { align-items: baseline; border-top: 1px solid var(--tec-color-border-secondary); display: flex; flex-flow: row nowrap; justify-content: flex-end; padding: var(--tec-spacer-4) 0 0; } .event-tickets .tribe-tickets__tickets-footer-total, .event-tickets .tribe-tickets__tickets-footer-quantity, .entry .entry-content .event-tickets .tribe-tickets__tickets-footer-total, .entry .entry-content .event-tickets .tribe-tickets__tickets-footer-quantity { color: var(--tec-color-text-secondary); display: none; text-align: center; } .event-tickets .tribe-tickets__tickets-footer--active .tribe-tickets__tickets-footer-total, .event-tickets .tribe-tickets__tickets-footer--active .tribe-tickets__tickets-footer-quantity, .entry .entry-content .event-tickets .tribe-tickets__tickets-footer--active .tribe-tickets__tickets-footer-total, .entry .entry-content .event-tickets .tribe-tickets__tickets-footer--active .tribe-tickets__tickets-footer-quantity { display: block; } .event-tickets .tribe-tickets__tickets-footer-total, .entry .entry-content .event-tickets .tribe-tickets__tickets-footer-total { margin-left: var(--tec-spacer-1); } .event-tickets .tribe-tickets__tickets-footer-total-wrap, .event-tickets .tribe-tickets__tickets-footer-total-number, .event-tickets .tribe-tickets__tickets-footer-quantity-number, .entry .entry-content .event-tickets .tribe-tickets__tickets-footer-total-wrap, .entry .entry-content .event-tickets .tribe-tickets__tickets-footer-total-number, .entry .entry-content .event-tickets .tribe-tickets__tickets-footer-quantity-number { color: var(--tec-color-text-primary); font-weight: var(--tec-font-weight-bold); } .event-tickets .tribe-tickets__attendee__fields__footer_checkout-button, .event-tickets .tribe-tickets__tickets-buy, .entry .entry-content .event-tickets .tribe-tickets__attendee__fields__footer_checkout-button, .entry .entry-content .event-tickets .tribe-tickets__tickets-buy { color: var(--tec-color-text-primary); font-family: var(--tec-font-family-sans-serif); font-size: var(--tec-font-size-2); line-height: var(--tec-line-height-3); font-weight: var(--tec-font-weight-regular); font-weight: var(--tec-font-weight-bold); border: 0; cursor: pointer; display: inline-block; height: auto; padding: 0; text-decoration: none; width: auto; border-radius: var(--tec-border-radius-default); color: var(--tec-color-background); text-align: center; transition: var(--tec-transition-background-color); margin: 0; padding: 11px 14px; } .event-tickets .tribe-tickets__attendee__fields__footer_checkout-button.tribe-common-c-btn, .event-tickets .tribe-tickets__tickets-buy.tribe-common-c-btn, .entry .entry-content .event-tickets .tribe-tickets__attendee__fields__footer_checkout-button.tribe-common-c-btn, .entry .entry-content .event-tickets .tribe-tickets__tickets-buy.tribe-common-c-btn { margin-left: auto; white-space: nowrap; } .event-tickets .tribe-tickets__attendee__fields__footer_checkout-button.tribe-common-c-btn:focus, .event-tickets .tribe-tickets__attendee__fields__footer_checkout-button.tribe-common-c-btn:hover, .event-tickets .tribe-tickets__tickets-buy.tribe-common-c-btn:focus, .event-tickets .tribe-tickets__tickets-buy.tribe-common-c-btn:hover, .entry .entry-content .event-tickets .tribe-tickets__attendee__fields__footer_checkout-button.tribe-common-c-btn:focus, .entry .entry-content .event-tickets .tribe-tickets__attendee__fields__footer_checkout-button.tribe-common-c-btn:hover, .entry .entry-content .event-tickets .tribe-tickets__tickets-buy.tribe-common-c-btn:focus, .entry .entry-content .event-tickets .tribe-tickets__tickets-buy.tribe-common-c-btn:hover { background-color: var(--tec-color-accent-primary-hover); } .event-tickets .tribe-tickets__attendee__fields__footer_checkout-button.tribe-common-c-btn:active, .event-tickets .tribe-tickets__tickets-buy.tribe-common-c-btn:active, .entry .entry-content .event-tickets .tribe-tickets__attendee__fields__footer_checkout-button.tribe-common-c-btn:active, .entry .entry-content .event-tickets .tribe-tickets__tickets-buy.tribe-common-c-btn:active { background-color: var(--tec-color-accent-primary-active); } .event-tickets .tribe-tickets__attendee__fields__footer_checkout-button.tribe-common-c-btn:disabled, .event-tickets .tribe-tickets__tickets-buy.tribe-common-c-btn:disabled, .entry .entry-content .event-tickets .tribe-tickets__attendee__fields__footer_checkout-button.tribe-common-c-btn:disabled, .entry .entry-content .event-tickets .tribe-tickets__tickets-buy.tribe-common-c-btn:disabled { background-color: var(--tec-color-accent-primary); color: var(--tec-color-text-disabled); cursor: not-allowed; } /** * Event Tickets - Tickets Stylesheet - Attendee registration * * @since 5.0.3 */ /* Tickets Registration/Purchase */ .event-tickets .tribe-tickets__registration, .entry .entry-content .event-tickets .tribe-tickets__registration { /* @todo: see if this is still relevant. Apparently not. */ border: 1px solid var(--tec-color-border-secondary); } .event-tickets .tribe-tickets__registration-title h2, .entry .entry-content .event-tickets .tribe-tickets__registration-title h2 { color: var(--tec-color-text-primary); } .event-tickets .tribe-tickets__registration-description, .entry .entry-content .event-tickets .tribe-tickets__registration-description { margin-top: 10px; } .event-tickets .tribe-ticket__tickets-heading, .entry .entry-content .event-tickets .tribe-ticket__tickets-heading { /* @todo: see if we want to have own class here, instead of a generic. */ margin-bottom: var(--tec-spacer-3); } @media (min-width: 768px) { .tribe-common-c-loader.tribe-tickets-loader__tickets-block, .tribe-common-c-loader.tribe-tickets-loader__modal { padding: 0 } .event-tickets .tribe-common-c-loader { padding: 0 } .tribe-common button.tribe-common-c-btn-link, .tribe-common input[type="button"].tribe-common-c-btn-link, .tribe-common input[type="submit"].tribe-common-c-btn-link, .tribe-common a.tribe-common-c-btn-link { background-color: transparent; width: auto } .event-tickets .tribe-tickets__tickets-form, .entry .entry-content .event-tickets .tribe-tickets__tickets-form { padding: var(--tec-spacer-5) var(--tec-spacer-5) var(--tec-spacer-4) } .event-tickets .tribe-tickets__tickets-title, .entry .entry-content .event-tickets .tribe-tickets__tickets-title { font-size: var(--tec-font-size-5) } .event-tickets .tribe-tickets__tickets-item, .entry .entry-content .event-tickets .tribe-tickets__tickets-item { -ms-grid-columns: 6.5fr 2fr; -ms-grid-rows: 1fr 1.5fr 1fr; grid-template-columns: 6.5fr 2fr } .event-tickets .tribe-tickets__tickets-item.show-optout, .entry .entry-content .event-tickets .tribe-tickets__tickets-item.show-optout { -ms-grid-columns: 6.5fr 2fr 1fr; -ms-grid-rows: 1fr 1.5fr 1fr; grid-template-columns: 6.5fr 2fr 1fr } .event-tickets .tribe-tickets__tickets-item.tribe-tickets__tickets-item--price-suffix, .event-tickets .tribe-tickets__tickets-item.tribe-tickets__tickets-item--price-suffix.show-optout, .entry .entry-content .event-tickets .tribe-tickets__tickets-item.tribe-tickets__tickets-item--price-suffix, .entry .entry-content .event-tickets .tribe-tickets__tickets-item.tribe-tickets__tickets-item--price-suffix.show-optout { grid-template-columns: 5.5fr 3fr } .event-tickets .tribe-tickets__tickets-item-content-title, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-content-title { line-height: 1 } .event-tickets .tribe-tickets__tickets-item-content-title.tribe-tickets--no-description, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-content-title.tribe-tickets--no-description { align-self: start; grid-row: 1 / span 2; -ms-grid-row-span: 2; padding-top: 0; } .event-tickets .tribe-tickets__form .tribe-tickets-attendees-list-optout--wrapper label, .entry .entry-content .event-tickets .tribe-tickets__form .tribe-tickets-attendees-list-optout--wrapper label { font-size: var(--tec-font-size-2) } .event-tickets .tribe-tickets__tickets-item-details-content, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-details-content { display: block; grid-column: 1; grid-row: 2 } .tribe-tickets__tickets-form .event-tickets .tribe-tickets__tickets-item-details-summary, .tribe-tickets__tickets-form .entry .entry-content .event-tickets .tribe-tickets__tickets-item-details-summary { display: none !important; visibility: hidden } .tribe-tickets.event-tickets .tribe-tickets__tickets-item-details-summary-button--more, .tribe-tickets.event-tickets .tribe-tickets__tickets-item-details-summary-button--less, .tribe-tickets.entry .entry-content .event-tickets .tribe-tickets__tickets-item-details-summary-button--more, .tribe-tickets.entry .entry-content .event-tickets .tribe-tickets__tickets-item-details-summary-button--less { display: none !important; visibility: hidden; } .event-tickets .tribe-tickets__tickets-item-extra, .entry .entry-content .event-tickets .tribe-tickets__tickets-item-extra { align-self: start; grid-column: 2; grid-row-end: 3; -ms-grid-row-start: 1; grid-row-start: 1; padding: 0 var(--tec-spacer-2) } .event-tickets .tribe-tickets__tickets-footer-total, .entry .entry-content .event-tickets .tribe-tickets__tickets-footer-total { margin-left: var(--tec-spacer-5) } .event-tickets .tribe-tickets__attendee__fields__footer_checkout-button.tribe-common-c-btn, .event-tickets .tribe-tickets__tickets-buy.tribe-common-c-btn, .entry .entry-content .event-tickets .tribe-tickets__attendee__fields__footer_checkout-button.tribe-common-c-btn, .entry .entry-content .event-tickets .tribe-tickets__tickets-buy.tribe-common-c-btn { margin-left: var(--tec-spacer-6) } .event-tickets .tribe-ticket__tickets-heading, .entry .entry-content .event-tickets .tribe-ticket__tickets-heading { margin-bottom: var(--tec-spacer-4) } } @media (min-width: 500px) { .event-tickets .tribe-tickets__attendee__fields__footer_checkout-button.tribe-common-c-btn, .event-tickets .tribe-tickets__tickets-buy.tribe-common-c-btn, .entry .entry-content .event-tickets .tribe-tickets__attendee__fields__footer_checkout-button.tribe-common-c-btn, .entry .entry-content .event-tickets .tribe-tickets__tickets-buy.tribe-common-c-btn { margin-left: var(--tec-spacer-3) } }
Save Changes
Rename File
Rename