pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-24 09:51:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix MDXEditor theming and image dialog

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-10-17 18:16:35 +00:00
parent cd56b345a7
commit 838c05b749
2 changed files with 164 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
src/styles/mdx-editor-theme.css
View File

@@ -154,14 +154,175 @@
font-weight: 600;
}
/* Toolbar button styling */
.mdxeditor-toolbar button {
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 0.375rem;
}
.mdxeditor-toolbar button:hover {
background: hsl(var(--primary) / 0.1);
color: hsl(var(--primary));
}
.mdxeditor-toolbar button[data-active="true"],
.mdxeditor-toolbar button[aria-pressed="true"] {
background: hsl(var(--primary) / 0.15);
color: hsl(var(--primary));
font-weight: 500;
}
/* Toolbar separator */
.mdxeditor-toolbar [role="separator"] {
background: hsl(var(--border));
width: 1px;
height: 1.5rem;
margin: 0 0.5rem;
}
/* Dialog styling */
.mdxeditor [role="dialog"] {
background: hsl(var(--card));
border: 1px solid hsl(var(--border));
border-radius: 0.5rem;
box-shadow: 0 10px 40px -10px hsl(var(--foreground) / 0.1);
padding: 1.5rem;
}
.mdxeditor [role="dialog"] h2,
.mdxeditor [role="dialog"] h3 {
color: hsl(var(--foreground));
margin-bottom: 1rem;
}
.mdxeditor [role="dialog"] label {
color: hsl(var(--foreground));
font-weight: 500;
font-size: 0.875rem;
margin-bottom: 0.5rem;
display: block;
}
.mdxeditor [role="dialog"] input[type="text"],
.mdxeditor [role="dialog"] input[type="url"],
.mdxeditor [role="dialog"] textarea {
background: hsl(var(--background));
border: 1px solid hsl(var(--border));
color: hsl(var(--foreground));
padding: 0.5rem 0.75rem;
border-radius: 0.375rem;
width: 100%;
font-size: 0.875rem;
transition: all 0.2s;
}
.mdxeditor [role="dialog"] input:focus,
.mdxeditor [role="dialog"] textarea:focus {
outline: none;
border-color: hsl(var(--primary));
box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
}
.mdxeditor [role="dialog"] button {
background: hsl(var(--primary));
color: hsl(var(--primary-foreground));
padding: 0.5rem 1rem;
border-radius: 0.375rem;
font-weight: 500;
transition: all 0.2s;
border: none;
cursor: pointer;
}
.mdxeditor [role="dialog"] button:hover {
background: hsl(var(--primary) / 0.9);
}
.mdxeditor [role="dialog"] button[data-variant="secondary"] {
background: hsl(var(--secondary));
color: hsl(var(--secondary-foreground));
}
.mdxeditor [role="dialog"] button[data-variant="secondary"]:hover {
background: hsl(var(--secondary) / 0.9);
}
/* Select and dropdown styling */
.mdxeditor-select-trigger {
background: hsl(var(--background));
border: 1px solid hsl(var(--border));
color: hsl(var(--foreground));
padding: 0.375rem 0.75rem;
border-radius: 0.375rem;
transition: all 0.2s;
}
.mdxeditor-select-trigger:hover {
background: hsl(var(--accent) / 0.05);
border-color: hsl(var(--primary) / 0.5);
}
.mdxeditor-select-content {
background: hsl(var(--popover));
border: 1px solid hsl(var(--border));
border-radius: 0.5rem;
box-shadow: 0 10px 40px -10px hsl(var(--foreground) / 0.15);
max-height: 50vh;
overflow-y: auto;
padding: 0.25rem;
z-index: 9999;
}
.mdxeditor-select-item {
padding: 0.5rem 0.75rem;
border-radius: 0.25rem;
cursor: pointer;
transition: all 0.15s;
color: hsl(var(--foreground));
}
.mdxeditor-select-item:hover {
background: hsl(var(--primary) / 0.1);
color: hsl(var(--primary));
}
.mdxeditor-select-item[data-selected="true"] {
background: hsl(var(--primary) / 0.15);
color: hsl(var(--primary));
font-weight: 500;
}
/* Image styling */
.mdxeditor img {
border-radius: 0.375rem;
border: 1px solid hsl(var(--border) / 0.3);
max-width: 100%;
height: auto;
}
.mdxeditor img:hover {
border-color: hsl(var(--primary) / 0.5);
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.mdxeditor-toolbar {
flex-wrap: wrap;
gap: 0.25rem;
padding: 0.5rem;
}
.mdxeditor-toolbar button {
min-width: 2rem;
min-height: 2rem;
}
.mdxeditor-select-content {
max-height: 50vh;
max-height: 40vh;
}
.mdxeditor [role="dialog"] {
max-width: 90vw;
padding: 1rem;
}
}