upstream-archive/chatgpt-exporter
1
0
Fork 0
mirror of https://github.com/pionxzh/chatgpt-exporter.git synced 2026-07-23 09:00:51 -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 09:50:59 +08:00
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

2
index.html
View File

@@ -8,6 +8,6 @@
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

22
src/style.css
View File

@@ -11,8 +11,9 @@ body[data-time-format="24"] span[data-time-format="24"] {
}
.Select {
padding: 0 2.5rem 0 0.5rem;
width: 7.5rem;
padding: 0 2rem 0 0.5rem;
width: auto;
min-width: 7.5rem;
border-radius: 4px;
box-shadow: 0 0 0 1px #6f6e77;
}
@@ -27,17 +28,17 @@ html {
--ce-text-primary: var(--text-primary, #0d0d0d);
--ce-menu-primary: #ffffff;
--ce-menu-secondary: var(--sidebar-surface-secondary, #ececec);
--ce-border-light: var(--border-light, rgba(0, 0, 0, .1));
--ce-border-light: #0d0d0d26;
}
.dark {
--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-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);
}
@@ -53,6 +54,15 @@ html {
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 {
display: block;
border-width: 2px;

8
src/ui/Dialog.css
View File

@@ -32,6 +32,14 @@
border-width: 1px;
}
.DialogContent._export {
background-color: #ffffff;
}
.dark .DialogContent._export {
background-color: #2a2a2a;
}
.DialogContent input[type="checkbox"] {
border: none;
outline: none;

2
src/ui/ExportDialog.tsx
View File

@@ -866,7 +866,7 @@ export const ExportDialog: FC<ExportDialogProps> = ({ format, open, onOpenChange
<Dialog.Portal>
<Dialog.Overlay className="DialogOverlay" />
<Dialog.Content
className="DialogContent"
className="DialogContent _export"
onEscapeKeyDown={guardClose}
onInteractOutside={guardClose}
>

8
src/ui/Menu.tsx
View File

@@ -95,12 +95,12 @@ function MenuInner({ container }: { container: HTMLDivElement }) {
className={`
grid grid-cols-2
bg-menu
border border-menu
transition-opacity duration-200 shadow-md
ce-card
transition-opacity duration-200
gap-1 py-2 px-1
${isMobile
? 'rounded animate-slideUp'
: 'rounded-md animate-fadeIn'}`}
? 'animate-slideUp'
: 'animate-fadeIn'}`}
style={{
width: isMobile ? 316 : 268,
left: -6,