mirror of
https://github.com/discourse/discourse.git
synced 2026-08-15 17:24:47 +08:00
7abe78d18bPreviously, the month label in the event date badge was hardcoded to `color: red`, rendering a bright-red month abbreviation on every event in topics and the composer preview. This change uses `var(--primary)` so the month matches the day and the themed badge in the upcoming events list, across light and dark modes.
534 lines
9.5 KiB
SCSS
Vendored
534 lines
9.5 KiB
SCSS
Vendored
$interested: #fb985d;
|
|
$show-interested: inherit;
|
|
|
|
.cooked > .discourse-post-event {
|
|
display: none;
|
|
}
|
|
|
|
.discourse-post-event {
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
.event__section {
|
|
padding: 0.5em 0.75rem;
|
|
|
|
p {
|
|
margin: 0;
|
|
overflow-wrap: break-word;
|
|
word-break: break-word;
|
|
}
|
|
|
|
> .d-icon {
|
|
padding-right: 0.25em;
|
|
}
|
|
|
|
.discourse-local-date .d-icon {
|
|
padding-right: 0.25em;
|
|
}
|
|
}
|
|
|
|
.event-image {
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
padding: 1px;
|
|
aspect-ratio: 16 / 9;
|
|
box-sizing: border-box;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-top-left-radius: var(--d-border-radius);
|
|
border-top-right-radius: var(--d-border-radius);
|
|
}
|
|
}
|
|
|
|
.discourse-post-event-widget {
|
|
display: flex;
|
|
background: var(--secondary);
|
|
flex-direction: column;
|
|
flex: 1 0 auto;
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
|
|
.cooked & {
|
|
box-shadow: 0 0 0 3px var(--primary-100);
|
|
border: 1px solid var(--primary-300);
|
|
border-radius: var(--d-border-radius);
|
|
margin: 5px 0;
|
|
}
|
|
|
|
section:last-child {
|
|
padding-bottom: 0.75em;
|
|
}
|
|
|
|
.widget-dropdown {
|
|
margin: 0;
|
|
|
|
.widget-dropdown-header.disabled {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.widget-dropdown-item {
|
|
&:not(.separator) {
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.d-icon + span {
|
|
margin-left: 0.5em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.is-loading {
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
&.has-event {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.event-header {
|
|
column-gap: 1em;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 0.75em;
|
|
|
|
.more-dropdown {
|
|
margin-left: auto;
|
|
|
|
&.has-no-actions {
|
|
display: none;
|
|
}
|
|
|
|
.widget-dropdown {
|
|
.widget-dropdown-header {
|
|
.d-icon {
|
|
margin: 0;
|
|
}
|
|
|
|
.label {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.item-closeEvent {
|
|
.d-icon,
|
|
span {
|
|
color: var(--danger);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&__controls {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
margin-left: auto;
|
|
}
|
|
}
|
|
|
|
.event-date {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 3em;
|
|
height: 3em;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 1px solid var(--primary-low);
|
|
border-radius: var(--d-border-radius);
|
|
flex-direction: column;
|
|
|
|
.month {
|
|
text-align: center;
|
|
color: var(--primary);
|
|
font-size: var(--font-down-2);
|
|
font-weight: 400;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.day {
|
|
text-align: center;
|
|
font-size: var(--font-up-1);
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
|
|
.event-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
margin-right: 0.5rem;
|
|
|
|
.name {
|
|
font-size: var(--font-up-2);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.status-and-creators {
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--primary-medium);
|
|
font-size: var(--font-down-1);
|
|
font-weight: 400;
|
|
margin: 0;
|
|
|
|
.separator {
|
|
margin: 0 0.25em;
|
|
}
|
|
|
|
.created-by {
|
|
margin-right: 0.25em;
|
|
|
|
@media screen and (width <= 450px) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.username {
|
|
margin-left: 0.25em;
|
|
color: var(--primary);
|
|
|
|
@include ellipsis;
|
|
}
|
|
|
|
.creators {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.event-creator {
|
|
@include ellipsis;
|
|
|
|
.topic-invitee-avatar {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
@include ellipsis;
|
|
}
|
|
}
|
|
}
|
|
|
|
.status {
|
|
&.expired,
|
|
&.closed {
|
|
color: var(--danger-medium);
|
|
}
|
|
|
|
.d-icon {
|
|
margin-right: 0.5em;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.event-actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.75em;
|
|
flex-wrap: wrap;
|
|
border-top: 1px solid var(--primary-low);
|
|
|
|
&.event-status {
|
|
margin: 0;
|
|
gap: 0.75em;
|
|
|
|
.btn {
|
|
flex: 1;
|
|
}
|
|
|
|
.going-button.d-combo-button {
|
|
flex: 1;
|
|
|
|
.d-combo-button-menu {
|
|
flex: 0 0 auto;
|
|
}
|
|
}
|
|
|
|
.interested-button {
|
|
display: $show-interested;
|
|
}
|
|
|
|
&.status-going .going-button > .d-icon,
|
|
&.status-going .going-button .d-combo-button-button .d-icon {
|
|
color: var(--success);
|
|
}
|
|
|
|
&.status-interested .interested-button .d-icon {
|
|
color: $interested;
|
|
}
|
|
|
|
&.status-not_going .not-going-button .d-icon {
|
|
color: var(--danger);
|
|
}
|
|
|
|
.not-going-button span {
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
}
|
|
|
|
.event-creator {
|
|
.username {
|
|
margin-left: 0.25em;
|
|
}
|
|
}
|
|
|
|
.event-invitees {
|
|
min-height: 1.75em;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
overflow-y: auto;
|
|
flex-direction: column;
|
|
|
|
.header {
|
|
display: none;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 1em;
|
|
width: 100%;
|
|
|
|
.show-all {
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
.event-invitees-status {
|
|
font-weight: 700;
|
|
display: flex;
|
|
|
|
span:not(:last-child)::after {
|
|
content: "-";
|
|
font-weight: 400;
|
|
margin: 0 0.3em;
|
|
}
|
|
|
|
.event-status-invited {
|
|
font-weight: 600;
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
}
|
|
|
|
.event-invitees-avatars {
|
|
padding: 0;
|
|
margin: 0;
|
|
gap: 0.25em;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
|
|
.event-invitee {
|
|
list-style: none;
|
|
opacity: 0.25;
|
|
|
|
&.status-going,
|
|
&.status-not_going,
|
|
&.status-interested {
|
|
opacity: 1;
|
|
}
|
|
|
|
&.status-interested {
|
|
display: $show-interested;
|
|
}
|
|
|
|
&.status-going .avatar-flair .d-icon {
|
|
color: var(--success);
|
|
}
|
|
|
|
&.status-not_going .avatar-flair .d-icon {
|
|
color: var(--danger);
|
|
}
|
|
|
|
&.status-interested .avatar-flair .d-icon {
|
|
color: $interested;
|
|
}
|
|
}
|
|
|
|
.topic-invitee-avatar {
|
|
position: relative;
|
|
display: inline-block;
|
|
|
|
&:has(.avatar-flair) {
|
|
padding-right: var(--space-2);
|
|
}
|
|
|
|
.avatar {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
}
|
|
|
|
.avatar-flair {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: var(--secondary);
|
|
border-radius: 50%;
|
|
height: 1rem;
|
|
width: 1rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--primary-medium);
|
|
box-shadow: 0 0 0 1px var(--primary-100);
|
|
|
|
.d-icon {
|
|
font-size: var(--font-down-2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
hr {
|
|
margin: 0;
|
|
}
|
|
|
|
.event-description,
|
|
.event-location,
|
|
.event-url,
|
|
.event-dates,
|
|
.event-recurrence,
|
|
.event-chat-channel,
|
|
.event-invitees-avatars-container {
|
|
display: grid;
|
|
grid-template-columns: 3em 1fr;
|
|
column-gap: 1em;
|
|
align-items: center;
|
|
height: min-content;
|
|
|
|
> .d-icon {
|
|
color: var(--primary-high);
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
}
|
|
|
|
.chat-channel-link {
|
|
@include ellipsis;
|
|
}
|
|
}
|
|
|
|
.event-description {
|
|
align-items: start;
|
|
padding-right: 2em;
|
|
|
|
> .d-icon {
|
|
margin-top: 0.25em;
|
|
}
|
|
|
|
&.is-clamped .event-description__text {
|
|
@include line-clamp(3);
|
|
}
|
|
|
|
&.is-clamped.is-expanded .event-description__text {
|
|
-webkit-line-clamp: unset;
|
|
}
|
|
|
|
.event-description__toggle {
|
|
font-size: var(--font-down-1);
|
|
margin-top: 0.25em;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.event-recurrence {
|
|
color: var(--primary-medium);
|
|
padding-top: 0;
|
|
|
|
> .d-icon {
|
|
color: var(--primary-medium);
|
|
font-size: var(--font-down-1);
|
|
}
|
|
|
|
> :not(.d-icon) {
|
|
font-size: var(--font-down-1);
|
|
}
|
|
}
|
|
|
|
.event-url {
|
|
.url {
|
|
max-width: 80%;
|
|
|
|
@include ellipsis;
|
|
}
|
|
}
|
|
|
|
.cooked-date,
|
|
.participants,
|
|
.event-url .url {
|
|
font-size: var(--base-font-size);
|
|
font-weight: 400;
|
|
border-bottom: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.event__section.no-rsvp {
|
|
display: grid;
|
|
grid-template-columns: 3em 1fr;
|
|
column-gap: 1em;
|
|
align-items: center;
|
|
}
|
|
|
|
p.no-rsvp-description {
|
|
color: var(--primary-medium);
|
|
font-size: var(--font-down-1);
|
|
font-weight: 400;
|
|
grid-column-start: 2;
|
|
}
|
|
|
|
.event-invitees-icon {
|
|
position: relative;
|
|
display: flex;
|
|
margin: 0 auto;
|
|
color: var(--primary-high);
|
|
}
|
|
|
|
.event-invitees-icon .going {
|
|
font-size: var(--font-down-3);
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: var(--secondary);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--primary-medium);
|
|
}
|
|
}
|
|
|
|
.discourse-post-event-going-menu-content {
|
|
.--selected .d-icon {
|
|
color: var(--success);
|
|
}
|
|
}
|
|
|
|
.event-dates {
|
|
// hardcoded as cooking date is async and will change height after initial rendering otherwise
|
|
// not ideal but a decent low tech solution
|
|
height: 24px;
|
|
|
|
.participants {
|
|
margin-left: 0.5em;
|
|
color: var(--primary-medium);
|
|
}
|
|
|
|
.discourse-local-date {
|
|
.d-icon {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.separator {
|
|
color: var(--primary-high);
|
|
margin: 0 0.5em;
|
|
text-align: center;
|
|
}
|
|
}
|
