system/memos
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

refactor: move embedded content styles from global CSS to Tailwind

Browse source
This commit is contained in:
boojack 2026-04-08 23:34:49 +08:00
parent 124708f164
commit 938c405b0f
4 changed files with 24 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
web/src/components/MemoContent/TrustedIframe.ts
View file

@ -1,4 +1,5 @@
import { createElement } from "react";
import { cn } from "@/lib/utils";
import { isTrustedIframeSrc } from "./constants";
export const TrustedIframe = (props: React.ComponentProps<"iframe">) => {
@ -6,5 +7,8 @@ export const TrustedIframe = (props: React.ComponentProps<"iframe">) => {
return null;
}
return createElement("iframe", props);
return createElement("iframe", {
...props,
className: cn("max-w-full rounded-lg border border-border", props.className),
});
};

3
web/src/components/MemoContent/index.tsx
View file

@ -68,6 +68,9 @@ const MemoContent = (props: MemoContentProps) => {
className={cn(
"relative w-full max-w-full wrap-break-word text-base leading-6",
"[&>*:last-child]:mb-0",
"[&_.katex-display]:max-w-full",
"[&_.katex-display]:overflow-x-auto",
"[&_.katex-display]:overflow-y-hidden",
showCompactMode === "ALL" && "overflow-hidden",
contentClassName,
)}

16
web/src/components/UserMemoMap/UserMemoMap.tsx
View file

@ -111,7 +111,21 @@ const UserMemoMap = ({ creator, className }: Props) => {
>
{memosWithLocation.map((memo) => (
<Marker key={memo.name} position={[memo.location!.latitude, memo.location!.longitude]} icon={defaultMarkerIcon}>
<Popup closeButton={false} className="memo-map-popup w-64!">
<Popup
closeButton={false}
className={cn(
"w-64!",
"[&_.leaflet-popup-content-wrapper]:rounded-lg",
"[&_.leaflet-popup-content-wrapper]:border",
"[&_.leaflet-popup-content-wrapper]:border-border",
"[&_.leaflet-popup-content-wrapper]:bg-background",
"[&_.leaflet-popup-content-wrapper]:shadow-lg",
"[&_.leaflet-popup-content]:m-1",
"[&_.leaflet-popup-content]:[font-size:inherit]",
"[&_.leaflet-popup-content]:[line-height:inherit]",
"[&_.leaflet-popup-tip]:bg-background",
)}
>
<div className="flex flex-col gap-2.5 p-3">
<div className="flex items-start justify-between gap-3">
<div className="space-y-1">

41
web/src/index.css
View file

@ -2,51 +2,12 @@
@import "tw-animate-css";
@import "./themes/default.css";
@theme {
--default-transition-duration: 150ms;
}
@layer base {
* {
@apply border-border outline-none ring-0;
}
body {
@apply bg-background text-foreground;
}
/* ========================================
* Embedded Content
* ======================================== */
/* iframes from trusted embed providers */
iframe {
max-width: 100%;
border-radius: 0.5rem;
border: 1px solid var(--border);
}
/* KaTeX math rendering */
.katex-display {
overflow-x: auto;
overflow-y: hidden;
max-width: 100%;
}
/* Leaflet Popup Overrides */
.leaflet-popup-content-wrapper {
border-radius: 0.5rem !important;
border: 1px solid var(--border) !important;
background-color: var(--background) !important;
box-shadow: var(--shadow-lg) !important;
}
.leaflet-popup-content {
margin: 4px !important;
line-height: inherit !important;
font-size: inherit !important;
}
.leaflet-popup-tip {
background-color: var(--background) !important;
}
}