tags are invisible by default already, this just
collapses the wrapping divs so no stray empty gap can appear. Markup
itself is unchanged by ttplugin's redesign. */
.tt-events [itemtype$="DanceEvent"],
.tt-events [itemtype$="Place"],
.tt-events [itemtype$="PostalAddress"],
.tt-events [itemtype$="Organization"],
.tt-events [itemtype$="Offer"] {
margin: 0;
padding: 0;
}
/* ---------------------------------------------------------
Card container (.tt-card, present on every event article: list rows,
cancelled rows and the [tt_veranstaltung] detail page alike).
--------------------------------------------------------- */
.tt-events .tt-card {
display: block;
background: var(--tt-white);
border-radius: var(--tt-radius-md);
box-shadow: var(--tt-shadow);
padding: 14px;
margin-bottom: 10px;
color: var(--tt-text);
}
.tt-events .tt-event-card--cancelled {
background: var(--tt-white);
opacity: 0.65;
}
/* ---------------------------------------------------------
table_view="1" list rows + [tt_veranstaltung] detail header/footer all
use ttplugin's own CSS grid, which only collapses to a single column
below a viewport width of 700-1100px (ttplugin/css/ttplugin.css). The
app shell itself is always narrow (--tt-max-width: 480px) regardless of
the actual browser viewport, so we force one stacked column
unconditionally instead of relying on that viewport-based breakpoint
(same reasoning as the 0.10.2 fix this replaces).
--------------------------------------------------------- */
.tt-events .tt-event-card--table,
.tt-events .tt-event-card--cancelled-table,
.tt-events .tt-event-card__header,
.tt-events .tt-event-detail__header,
.tt-events .tt-event-card__footer {
grid-template-columns: 1fr !important;
gap: 10px;
}
.tt-events .tt-event-card__column {
margin-bottom: 6px;
}
.tt-events .tt-event-card__column:last-child {
margin-bottom: 0;
}
.tt-events .tt-event-card__column--ics {
justify-self: stretch !important;
text-align: center;
}
.tt-events .tt-event-card__column--date-image {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--tt-magenta);
}
.tt-events .tt-event-card__column--date-image .tt-event-image {
max-width: 100%;
margin-top: 6px;
}
.tt-events .tt-event-card__column--time,
.tt-events .tt-event-card__column--info,
.tt-events .tt-event-card__info {
font-size: 12.5px;
color: var(--tt-text-muted);
}
.tt-events .tt-event-card__column--location {
text-align: left;
margin-top: 4px;
}
.tt-events .tt-event-card__column--details {
margin-top: 4px;
}
.tt-events .tt-event-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* ---------------------------------------------------------
Headings (.tt-heading, shared by every card + the detail page)
--------------------------------------------------------- */
.tt-events .tt-heading {
font-family: var(--tt-font-heading);
color: var(--tt-dark);
line-height: 1.3;
}
.tt-events h2.tt-heading {
font-size: 16px;
font-weight: 600;
}
.tt-events h3.tt-heading {
font-size: 13px;
font-weight: 500;
color: var(--tt-text-muted);
}
.tt-events h4.tt-heading {
font-size: 12px;
font-weight: 500;
color: var(--tt-text-muted);
}
/* Cancelled events wrap the date/titles in
(ttplugin's own markup,
unchanged) - just mute the struck-through bits. */
.tt-events del {
color: var(--tt-text-muted);
}
/* Event photo (%bild%, only present when the event has one) */
.tt-events .tt-event-image {
display: block;
width: 100%;
height: auto;
border-radius: var(--tt-radius-sm);
}
/* Location line ("Standort Adresse") */
.tt-events .tt-event-location {
font-size: 13px;
}
.tt-events .tt-event-location strong {
color: var(--tt-dark);
}
/* [tt_veranstaltung] detail page footer (address + action buttons) */
.tt-events .tt-event-card__footer {
padding-top: 10px;
border-top: 1px solid var(--tt-line);
}
/* ---------------------------------------------------------
Action buttons: ttplugin's shared .tt-button component (used by
%tickets%/%musikwunsch%/%tischres%/the calendar link, and it's the
entirety of [tt_ticket]'s own output). Restyled as the app's magenta
pill buttons instead of ttplugin's own rounded-rectangle look, using our
own --tt-magenta rather than relying on ttplugin's --tt-color-brand
token happening to match.
--------------------------------------------------------- */
.tt-events .tt-button {
min-height: 0;
padding: 9px 16px;
border-radius: var(--tt-radius-pill);
font-family: var(--tt-font-body);
font-size: 12.5px;
font-weight: 600;
}
.tt-events .tt-button--primary {
background: var(--tt-magenta);
color: var(--tt-white);
}
.tt-events .tt-button--secondary,
.tt-events .tt-button--text {
background: transparent;
border-color: var(--tt-magenta);
color: var(--tt-magenta);
}
.tt-events .tt-button:hover {
filter: brightness(0.95);
}
/* [tt_ticket] renders nothing but a single top-level button (no card
around it) - full width, like every other primary action in the app. */
.tt-events > .tt-button {
display: flex;
width: 100%;
}
/* ---------------------------------------------------------
[tt_veranstaltungenheutemorgen] - fully hardcoded plugin HTML (no
Textbin/template hook available, unchanged by the 5.x redesign), just
plain