mirror of
https://github.com/discourse/discourse.git
synced 2026-08-10 21:51:49 +08:00
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" />
134 lines
2.1 KiB
SCSS
Vendored
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;
|
|
}
|
|
}
|
|
}
|
|
}
|