upstream-archive/chatgpt-exporter
1
0
Fork 0
mirror of https://github.com/pionxzh/chatgpt-exporter.git synced 2026-09-21 13:37:42 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve menu popup and select styling

Browse Source 
- Add .ce-card class with shadow and rounded corners to match native ChatGPT popup
- Remove Tailwind border/rounded/shadow from menu popup in favor of .ce-card
- Strengthen --ce-border-light fallbacks for visible menu item borders
- Fix Select dropdown: auto width with right padding for arrow clearance
- Add ._export variant for export dialog background

Closes #357

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
pionxzh
2026-05-28 10:26:13 +08:00
co-authored by Claude Opus 4.6
parent 25339e67b4
commit 73f91a2a72
5 changed files with 30 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1 -1
View File
@@ -8,6 +8,6 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>
</html> </html>
src/style.css
+16 -6
View File
@@ -11,8 +11,9 @@ body[data-time-format="24"] span[data-time-format="24"] {
} }
.Select { .Select {
padding: 0 2.5rem 0 0.5rem; padding: 0 2rem 0 0.5rem;
width: 7.5rem; width: auto;
min-width: 7.5rem;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 0 0 1px #6f6e77; box-shadow: 0 0 0 1px #6f6e77;
} }
@@ -27,17 +28,17 @@ html {
--ce-text-primary: var(--text-primary, #0d0d0d); --ce-text-primary: var(--text-primary, #0d0d0d);
--ce-menu-primary: #ffffff; --ce-menu-primary: #ffffff;
--ce-menu-secondary: var(--sidebar-surface-secondary, #ececec); --ce-menu-secondary: var(--sidebar-surface-secondary, #ececec);
--ce-border-light: var(--border-light, rgba(0, 0, 0, .1)); --ce-border-light: #0d0d0d26;
} }
.dark { .dark {
--ce-text-primary: var(--text-primary, #ececec); --ce-text-primary: var(--text-primary, #ececec);
--ce-menu-primary: var(--sidebar-surface-primary, #171717); --ce-menu-primary: #2A2A2A;
--ce-menu-secondary: var(--sidebar-surface-secondary, #212121); --ce-menu-secondary: var(--sidebar-surface-secondary, #212121);
--ce-border-light: var(--border-default, rgba(0, 0, 0, .05)); --ce-border-light: var(--border-default, rgba(255, 255, 255, .15));
} }
.dark.bg-menu { .dark .bg-menu {
background-color: var(--ce-menu-primary); background-color: var(--ce-menu-primary);
} }
@@ -53,6 +54,15 @@ html {
filter: brightness(0.5); filter: brightness(0.5);
} }
.ce-card {
border-radius: 1rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
}
.dark .ce-card {
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
}
.inputFieldSet { .inputFieldSet {
display: block; display: block;
border-width: 2px; border-width: 2px;
src/ui/Dialog.css
+8
View File
@@ -32,6 +32,14 @@
border-width: 1px; border-width: 1px;
} }
.DialogContent._export {
background-color: #ffffff;
}
.dark .DialogContent._export {
background-color: #2a2a2a;
}
.DialogContent input[type="checkbox"] { .DialogContent input[type="checkbox"] {
border: none; border: none;
outline: none; outline: none;
src/ui/ExportDialog.tsx
+1 -1
View File
@@ -866,7 +866,7 @@ export const ExportDialog: FC<ExportDialogProps> = ({ format, open, onOpenChange
<Dialog.Portal> <Dialog.Portal>
<Dialog.Overlay className="DialogOverlay" /> <Dialog.Overlay className="DialogOverlay" />
<Dialog.Content <Dialog.Content
className="DialogContent" className="DialogContent _export"
onEscapeKeyDown={guardClose} onEscapeKeyDown={guardClose}
onInteractOutside={guardClose} onInteractOutside={guardClose}
> >
src/ui/Menu.tsx
+4 -4
View File
@@ -95,12 +95,12 @@ function MenuInner({ container }: { container: HTMLDivElement }) {
className={` className={`
grid grid-cols-2 grid grid-cols-2
bg-menu bg-menu
border border-menu ce-card
transition-opacity duration-200 shadow-md transition-opacity duration-200
gap-1 py-2 px-1 gap-1 py-2 px-1
${isMobile ${isMobile
? 'rounded animate-slideUp' ? 'animate-slideUp'
: 'rounded-md animate-fadeIn'}`} : 'animate-fadeIn'}`}
style={{ style={{
width: isMobile ? 316 : 268, width: isMobile ? 316 : 268,
left: -6, left: -6,