0
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2026-08-10 21:51:49 +08:00
discourse/plugins/discourse-calendar/assets/stylesheets/common/full-calendar-ext.scss
David Battersby 06527d449e
FIX: calendar event tooltip emoji size (#41223)
When emojis are adding by themselves in a paragraph they get the
`only-emoji` class which makes them larger.

In the tooltip we want to inline them and keep the size matching that of
the description text.

## Before

<img width="332" height="125" alt="Screenshot 2026-06-26 at 1 45 19 PM"
src="https://github.com/user-attachments/assets/63c90983-0f5f-45a2-912b-ad37a438ac28"
/>


## After

<img width="299" height="95" alt="Screenshot 2026-06-26 at 1 45 32 PM"
src="https://github.com/user-attachments/assets/4e45d15d-cc37-4ac5-9753-4ab86292c0a4"
/>
2026-06-26 14:01:57 +04:00

134 lines
2.1 KiB
SCSS
Vendored

@use "lib/viewport";
.fc {
padding-bottom: 5px;
.fc-button .fc-icon {
font-size: 1.2em;
line-height: 0.8;
}
}
.fc-button,
.fc-button-active:focus {
box-shadow: none !important;
}
.fc-button:focus {
background: var(--d-button-default-bg-color--hover) !important;
color: var(--d-button-default-text-color--hover) !important;
}
.fc-button:not([disabled]):hover {
--fc-button-text-color: var(--d-button-default-text-color--hover) !important;
}
.fc-button-active {
color: var(--d-button-primary-text-color) !important;
}
.fc-button-active:focus {
background: var(--d-button-primary-bg-color--hover) !important;
color: var(--d-button-primary-text-color--hover) !important;
}
.fc-col-header-cell {
&.fc-day {
a {
color: var(--primary);
text-transform: uppercase;
font-size: var(--font-down-2);
}
}
}
.fc-timegrid-slot-lane {
cursor: pointer;
&:hover {
background-color: var(--tertiary-50);
opacity: 0.6;
}
}
.fc-daygrid-day-frame {
.fc-daygrid-day-top {
justify-content: center;
.fc-daygrid-day-number {
font-size: var(--font-down-2);
color: var(--primary);
}
}
}
.fc-daygrid-day {
cursor: pointer;
&:hover {
background-color: var(--tertiary-50);
}
}
.fc-header-toolbar {
.fc-button,
.fc-toolbar-title {
font-size: var(--font-0);
@include viewport.from(md) {
font-size: var(--font-down-1);
}
}
}
.fc-event-past {
opacity: 0.3;
}
.fc-recurring-event .fc-event-title .d-icon {
margin-right: 0.25em;
font-size: var(--font-down-2);
opacity: 0.8;
}
.fc-dayGridMonth-view {
.fc-event-time {
overflow: visible !important;
}
@include viewport.until(md) {
.fc-event-time {
display: none;
}
}
}
#upcoming-events-calendar {
height: 100%;
}
[data-identifier="post-event-tooltip"] img.only-emoji {
width: 1em;
height: 1em;
margin: 0;
}
@include viewport.until(md) {
.fc-header-toolbar {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.fc-toolbar-chunk {
display: flex;
}
.post-calendar {
.fc-toolbar-chunk:nth-child(3) {
.fc-button-group {
flex-grow: 1;
}
}
}
}