joakim/insertr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Implement three-layer button architecture for consistent formatting button styling

Browse Source 
- Add button frame isolation layer to prevent site CSS from affecting toolbar appearance
- Create style sample container for authentic style previews without layout interference
- Update CSS with proper containment boundaries and !important rules for button structure
- Preserve all authentic styling (color, weight, transform, decoration) in isolated preview
- Fix inconsistent button appearance across different site stylesheets (e.g. .brand class)
- Maintain professional toolbar UX while showing accurate style previews
This commit is contained in:
Joakim
2025-09-21 22:06:35 +02:00
parent 0cfce1c95a
commit 551b3fa301
3 changed files with 97 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
lib/src/styles/insertr.css
View File

@@ -370,62 +370,59 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after {
transform: translateY(1px);
}
/* Style preview buttons - new approach using CSS isolation */
/* Style preview buttons - three-layer architecture for style isolation */
.insertr-style-btn.insertr-style-preview {
/* Clean button container - minimal styling */
background: var(--insertr-bg-primary);
border: 1px solid var(--insertr-border-color);
border-radius: var(--insertr-border-radius);
padding: 0; /* Remove padding - let preview content handle it */
/* Strong button container - prevents content from affecting button structure */
background: var(--insertr-bg-primary) !important;
border: 1px solid var(--insertr-border-color) !important;
border-radius: var(--insertr-border-radius) !important;
padding: 0 !important; /* Let frame handle padding */
font-size: var(--insertr-font-size-sm);
cursor: pointer;
transition: var(--insertr-transition);
/* Button layout */
min-height: 28px;
/* Fixed button dimensions */
min-height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
/* Reset any inherited text styles on the button container only */
/* Reset button-level text properties to prevent inheritance */
font-family: var(--insertr-font-family);
text-decoration: none;
font-weight: normal;
text-transform: none;
color: var(--insertr-text-primary);
}
/* Button frame - consistent internal layout immune to content styling */
.insertr-button-frame {
display: flex;
align-items: center;
justify-content: center;
padding: 6px 10px;
width: 100%;
/* Don't set color here - let the preview content inherit naturally */
/* Ensure content fits */
/* Create style containment boundary */
contain: layout style;
overflow: hidden;
}
/* Preview content container - minimal interference with original styling */
.insertr-preview-content {
/* Allow the original classes to style this element completely naturally */
/* Style sample - authentic style preview with NO resets */
.insertr-style-sample {
/* Authentic style preview - let all styling come through naturally */
display: inline-block;
/* Only set essential layout properties */
box-sizing: border-box;
/* Ensure text fits within button */
white-space: nowrap;
/* Size constraints only */
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
max-width: 120px;
white-space: nowrap;
/* Inherit font size from button container */
font-size: inherit;
/* Remove browser defaults that might interfere - but don't override intentional styling */
border: none;
margin: 0;
/* NO background, color, padding defaults - let the classes handle everything */
/* All other styling (color, weight, transform, decoration, etc.)
comes from applied classes - no interference */
}
/* Minimal fallback styling when no meaningful classes are detected */
.insertr-preview-content.insertr-fallback-style {
padding: var(--insertr-spacing-xs) var(--insertr-spacing-sm);
/* Fallback styling when no meaningful classes are detected */
.insertr-style-sample.insertr-fallback-style {
color: var(--insertr-text-primary);
}
@@ -450,7 +447,7 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after {
box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}
.insertr-style-btn.insertr-style-active .insertr-preview-content {
.insertr-style-btn.insertr-style-active .insertr-style-sample {
color: white;
}
@@ -468,7 +465,7 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after {
box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
}
.insertr-style-btn.insertr-default-style.insertr-style-active .insertr-preview-content {
.insertr-style-btn.insertr-default-style.insertr-style-active .insertr-style-sample {
color: white;
}