Unify all formatting buttons to use consistent three-layer architecture
- Remove .insertr-default-style special styling (blue background, border, dot indicator) - Make ALL buttons use .insertr-style-preview with unified appearance - Maintain authentic style previews in isolated .insertr-style-sample layer - Bold buttons show bold text, .brand buttons show green uppercase text, etc. - Eliminate visual inconsistency between semantic and detected style buttons - Simplify CSS by removing ~50 lines of duplicate button styling - Provide consistent professional toolbar appearance across all formatting options
This commit is contained in:
@@ -457,57 +457,7 @@ body:not(.insertr-edit-mode) .insertr-editing-hover::after {
|
||||
transform: none;
|
||||
}
|
||||
|
||||
/* Active state for default style buttons */
|
||||
.insertr-style-btn.insertr-default-style.insertr-style-active {
|
||||
background: var(--insertr-info);
|
||||
border-color: var(--insertr-info);
|
||||
color: white;
|
||||
box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
|
||||
}
|
||||
|
||||
.insertr-style-btn.insertr-default-style.insertr-style-active .insertr-style-sample {
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Default formatting style buttons */
|
||||
.insertr-style-btn.insertr-default-style {
|
||||
border-color: var(--insertr-info);
|
||||
background: rgba(23, 162, 184, 0.1);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.insertr-style-btn.insertr-default-style:hover {
|
||||
border-color: var(--insertr-info);
|
||||
background: rgba(23, 162, 184, 0.2);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
|
||||
}
|
||||
|
||||
.insertr-style-btn.insertr-default-style:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 1px 2px rgba(23, 162, 184, 0.2);
|
||||
}
|
||||
|
||||
/* Default preview content styling */
|
||||
.insertr-default-preview {
|
||||
font-size: var(--insertr-font-size-sm);
|
||||
font-weight: 500;
|
||||
padding: var(--insertr-spacing-xs) var(--insertr-spacing-sm);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Small indicator for default styles */
|
||||
.insertr-style-btn.insertr-default-style::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--insertr-info);
|
||||
border-radius: 50%;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Editor components */
|
||||
.insertr-simple-editor,
|
||||
|
||||
Reference in New Issue
Block a user