Widget met opmaak
Enviso Ticketing Widget
:host {
--enviso-primary-color: #d55140; /* Rijksmuseum rood */
--enviso-secondary-color: #fff; /* Tekst standaard wit */
--enviso-tertiary-color: #40474f; /* Donkergrijs */
--enviso-background-color: #40474f;
--enviso-font-family: RijksText, Arial, sans-serif;
}
/* Algemene tekst wit */
* {
font-family: var(--enviso-font-family);
}
.enviso-step-wrapper,
.enviso-basket-wrapper,
.enviso-calendar-container,
.enviso-month,
.enviso-month-text {
background: #343b42 !important;
}
.enviso-btn span,
.promotions,
.enviso-title,
.enviso-description,
.enviso-basket-button-wrapper>enviso-button,
.enviso-ticket-widget-offer-name>enviso-button,
.enviso-calendars-header>enviso-button,
.enviso-day.enviso-header,
.enviso-txt-label,
.enviso-txt-info,
.enviso-select-label,
.enviso-select-info {
color: #fff!important;
}
span {
color: #202327 !important;
}
.enviso-ticket-widget-offers-header span,
.enviso-ticket-widget-offer-name span {
color: #fff !important;
}
enviso-offer-description {
color: #202327 !important;
}
enviso-offer-name {
color: #202327 !important;
}
enviso-button:not([icon-only]),
enviso-button[primary]:not([icon-only]) {
background: #d55140 !important; /* Rood */
color: #fff !important;
border: none !important;
text-transform: uppercase;
font-size: 1rem;
padding: 10px 24px;
height: 40px !important;
border-radius: 0;
font-family: var(--enviso-font-family);
box-shadow: none;
}
enviso-button[secondary]:not([icon-only]) {
background: #b7b7b7 !important;
color: #fff !important;
border: 2px solid #fff !important;
}
enviso-button[tertiary]:not([icon-only]) {
background: #b7b7b7 !important;
color: #d55140 !important;
border: 1px solid #d55140 !important;
}
enviso-button.btnPreviousStep {
background:none!important;
text-decoration: underline;
}
/* Kleine marge voor button in header */
header enviso-button {
margin-left: 0.3em;
}
/* TICKET WIDGET */
.enviso-ticket-widget-offer-name {
font-size: 40px;
font-weight: 700;
}
/* STEPS */
.enviso-steps-header-wrapper {
justify-content: flex-start;
gap: 30px;
}
.enviso-steps-header {
flex: 0 0 auto;
}
.enviso-steps-header .enviso-steps-header-label {
font-size: 1.5rem;
font-weight: bold;
line-height: 1;
letter-spacing: 0;
}
.enviso-steps-header span {
color: #fff!important;
}
.enviso-steps-header.active .enviso-steps-header-label {
text-decoration: underline;
}
/* TICKET SELECTION STEP */
enviso-ticket-selection-step:host,
enviso-time-selection-step:host {
color: #fff;
}
.enviso-tickets {
margin-bottom: 0;
margin-right: 0;
}
.enviso-nud-wrapper.vertical enviso-button {
color: #343537;
}
/* DIALOGS */
.enviso-dialog-content,
.enviso-ticket-widget-offer-info {
background: #fff !important;
color: #202327 !important;
border-bottom: 10px solid #2dccd3;
border-radius: 0;
}
.enviso-dialog-backdrop {
background: rgba(0,0,0,.5);
}
enviso-dialog:host {
color: #000;
}
/* OFFER INFO DIALOG */
.enviso-offer-meta-element {
font-size: 13px;
text-transform: uppercase;
font-weight: bold;
}
/* TIME SELECTION */
.enviso-timeslot-description {
text-transform: uppercase;
color: #fff!important;
}
.offer-info {
color: #fff!important;
}
.enviso-time-selection-step-header-description {
font-style: normal;
color: #fff!important;
}
/* TICKET ITEM */
enviso-ticket-item:host {
border-radius: 0;
}
.enviso-name {
text-transform: uppercase;
}
/* enviso-description binnen enviso-ticket-item: donkere tekst */
enviso-ticket-item .enviso-description {
color: #202327 !important;
background-color: #434547 !important;
}
.enviso-description {
font-style: normal;
}
/* enviso-filters-mobile-wrapper als open: grijze achtergrond */
.enviso-filters-mobile-wrapper {
background: #40474f !important;
}
/* enviso-timeslot-info: donkere tekst */
enviso-timeslot-info {
color: #202327 !important;
}
/* NUMERIC UP DOWN */
enviso-numeric-up-down enviso-button {
background: #2dccd3;
color: #0f0e0e;
padding: 3px;
border-radius: 50%;
}
#enviso-value {
padding: 0.3em 0;
}
/* CALENDAR */
enviso-calendar,
enviso-calendar-month,
enviso-calendar-day,
.enviso-calendar,
.enviso-calendar-month,
.enviso-calendar-day {
background: #40474f !important;
color: #fff !important;
border: none !important;
}
.enviso-dates .enviso-day {
background: #202327 !important; /* iets donkerder voor dagcellen */
color: #fff !important;
border-radius: 50%;
border: none !important;
}
.enviso-dates .enviso-day.enviso-selected {
background: #d55140 !important;
color: #fff !important;
border: 1px solid transparent;
}
.enviso-dates .enviso-day.enviso-disabled {
background: transparent !important;
color: #8c9095 !important;
}
.enviso-month-text {
font-size: 35px;
text-transform: uppercase;
}
.enviso-header {
color: #202327;
font-family: Brother1816Book;
font-size: 16px;
font-weight: 700;
}
/* TIMESLOT */
.enviso-timeslot-button {
background: #41474E!important;
border: none!important;
color: #fff;
font-size: 1rem!important;
font-weight: normal!important;
min-height: auto!important;
padding: 15px 30px!important;
}
.enviso-timeslot-button span {
color: #fff!important;
}
enviso-timeslot[selected] .enviso-timeslot-button {
background: rgb(45,204,211);
}
.enviso-amount-of-tickets .enviso-amount-icon {
margin-right: 5px;
}
.enviso-amount-of-tickets {
display: none;
}
/* INPUTS */
input, select, textarea {
background: #fff;
color: #202327;
border-radius: 0;
border: 1px solid #c2ccce;
}
/* LOADER OVERLAY */
.overlay {
background: rgba(0,0,0,0.7);
}
/* BASKET OVERVIEW */
enviso-basket-overview:host,
enviso-basket-items:host {
color: #363232;
}
.enviso-basket-header {
color: #fff;
text-transform: uppercase;
font-size: 1.5em;
}
.enviso-basket-footer {
background: #b7b7b7;
}
.enviso-basket-header-description {
color: #fff!important;
font-style: normal;
font-weight: normal;
}
.enviso-basket-item-description {
background: #40474F!important;
}
.enviso-basket-item-entry,
.enviso-basket-footer {
background: none!important;
border-left: none;
padding-left: 0;
}
.enviso-basket-item-remove>enviso-button,
.enviso-product-basket-item-remove>enviso-button {
color: #fff!important;
}
.enviso-nud-wrapper.horizontal.bordered,
.enviso-nud-wrapper.horizontal.bordered input {
border-color: #fff!important;
}
.enviso-nud-wrapper.horizontal.bordered>enviso-button,
.enviso-nud-wrapper.horizontal.bordered input {
color: #fff!important;
}
.enviso-basket-item-description span,
.enviso-basket-item-quantity span,
.enviso-basket-item-price span,
.enviso-discount-text {
color: #fff!important;
}
.enviso-basket-item-entry-description-name {
color: #fff!important;
text-transform: uppercase;
}
.enviso-basket-item-entry-price-subtotal,
.enviso-basket-discount-panel,
.enviso-basket-discount-panel span,
.enviso-basket-total-amount {
color: #fff!important;
}
.enviso-basket-item-description-extra,
.enviso-basket-item-description-groupinfo {
color: #b7b7b7;
}
.enviso-basket-item-entry-remove > enviso-button {
text-decoration-line: none;
margin-right: 1em;
padding-left: 10px;
}
.enviso-basket-item-entry {
background: #b7b7b7;
}
option {
background: #202327 !important;
color: #b7b7b7
}