mirror of
https://github.com/logos-co/logos-web.git
synced 2026-08-30 05:31:19 +00:00
jinhojang6
64232da94d
Shrink-to-fit (w-fit + auto grid track) keeps collapsing the text column inside Leaflet's popup engine — the title truncates to "Lo" in a squashed box. Revert to the definite responsive width that renders correctly: w-[calc(100vw-2rem)] max-w-[463px] with a minmax(0,1fr) text track. Keeps the close-button vertical alignment (top:12px) from the prior change.
97 lines
2.5 KiB
CSS
97 lines
2.5 KiB
CSS
@import 'tailwindcss';
|
|
@import '@acid-info/logos-tokens/theme.css';
|
|
|
|
/* Scan workspace UI package so its Tailwind classes are emitted. */
|
|
@source "../../../packages/ui/src/**/*.{ts,tsx}";
|
|
|
|
/* Custom breakpoint for the 1440px desktop design canvas.
|
|
Sits between xl (1280px) and 2xl (1536px). */
|
|
@theme {
|
|
--breakpoint-desktop: 1440px;
|
|
}
|
|
|
|
@layer base {
|
|
*,
|
|
::after,
|
|
::before,
|
|
::backdrop,
|
|
::file-selector-button {
|
|
border-color: var(--color-gray-01, currentColor);
|
|
}
|
|
|
|
a,
|
|
button {
|
|
outline-color: var(--color-brand-yellow);
|
|
}
|
|
|
|
a:focus-visible,
|
|
button:focus-visible {
|
|
outline: 2px solid;
|
|
border-radius: var(--radius-sm);
|
|
outline-color: var(--color-brand-yellow);
|
|
}
|
|
}
|
|
|
|
/* Strip Leaflet's default popup chrome so circle-map cards render identically to
|
|
the Upcoming Events cards. !important is required because leaflet.css is
|
|
imported at the component level and loads after this global stylesheet, giving
|
|
its rules higher cascade priority. */
|
|
.logos-circle-popup .leaflet-popup-content-wrapper {
|
|
background: transparent !important;
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
padding: 0 !important;
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
/* Neutralise Leaflet's content box: it injects margins, a font-size bump
|
|
(1.08333em) and per-paragraph vertical margins (1.3em) that would otherwise
|
|
spread the card's text apart and shift it off the design grid. */
|
|
.logos-circle-popup .leaflet-popup-content {
|
|
margin: 0 !important;
|
|
font: inherit !important;
|
|
line-height: inherit !important;
|
|
}
|
|
|
|
.logos-circle-popup .leaflet-popup-content p {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
/* Leaflet colours all anchors #0078A8; the card wraps its content in an <a>. */
|
|
.logos-circle-popup .leaflet-popup-content a {
|
|
color: inherit !important;
|
|
}
|
|
|
|
.logos-circle-popup .leaflet-popup-tip-container {
|
|
display: none !important;
|
|
}
|
|
|
|
.logos-circle-popup .leaflet-popup-close-button {
|
|
top: 12px !important;
|
|
right: 18px !important;
|
|
width: 18px !important;
|
|
height: 18px !important;
|
|
padding: 0 !important;
|
|
font-size: 18px !important;
|
|
line-height: 18px !important;
|
|
text-align: center !important;
|
|
color: var(--color-brand-dark-green) !important;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.logos-circle-popup .leaflet-popup-close-button:hover {
|
|
opacity: 0.75;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
-webkit-font-smoothing: antialiased;
|
|
touch-action: manipulation;
|
|
text-rendering: optimizelegibility;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--color-brand-off-white);
|
|
color: var(--color-brand-dark-green);
|
|
}
|