Implement hybrid CSS architecture to fix white-on-white modal issue on sites with CSS resets
- Migrate from inline CSS to external insertr.css with cascade layer architecture
- Add CSS CDN serving capability (ServeInsertrCSS handler and /insertr.css route)
- Implement hybrid approach: @layer insertr for modern browsers + html body selectors for legacy browsers
- Remove scattered inline CSS from JavaScript modules for better maintainability
- Solve form element spacing conflicts with aggressive site CSS resets like '* {margin:0; padding:0}'
- Enable proper CSS caching and separation of concerns
This commit is contained in:
@@ -218,7 +218,7 @@ export class InsertrAuth {
|
||||
document.body.insertAdjacentHTML('beforeend', controlsHtml);
|
||||
|
||||
// Add styles for controls
|
||||
this.addControlStyles();
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -417,136 +417,7 @@ export class InsertrAuth {
|
||||
document.head.appendChild(styleSheet);
|
||||
}
|
||||
|
||||
/**
|
||||
* Add styles for authentication controls
|
||||
*/
|
||||
addControlStyles() {
|
||||
const styles = `
|
||||
.insertr-auth-controls {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.insertr-auth-btn {
|
||||
background: #4f46e5;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.insertr-auth-btn:hover {
|
||||
background: #4338ca;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.insertr-auth-btn.insertr-authenticated {
|
||||
background: #059669;
|
||||
}
|
||||
|
||||
.insertr-auth-btn.insertr-authenticated:hover {
|
||||
background: #047857;
|
||||
}
|
||||
|
||||
.insertr-auth-btn.insertr-edit-active {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
.insertr-auth-btn.insertr-edit-active:hover {
|
||||
background: #b91c1c;
|
||||
}
|
||||
|
||||
.insertr-status-controls {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
}
|
||||
|
||||
.insertr-status {
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.insertr-status-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.insertr-status-text {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.insertr-status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #9ca3af;
|
||||
}
|
||||
|
||||
.insertr-status-dot.insertr-status-visitor {
|
||||
background: #9ca3af;
|
||||
}
|
||||
|
||||
.insertr-status-dot.insertr-status-authenticated {
|
||||
background: #059669;
|
||||
}
|
||||
|
||||
.insertr-status-dot.insertr-status-editing {
|
||||
background: #dc2626;
|
||||
animation: insertr-pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes insertr-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
/* Hide editing interface when not in edit mode */
|
||||
body:not(.insertr-edit-mode) .insertr:hover::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Only show editing features when in edit mode */
|
||||
.insertr-authenticated.insertr-edit-mode .insertr {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.insertr-authenticated.insertr-edit-mode .insertr:hover {
|
||||
outline: 2px dashed #007cba !important;
|
||||
outline-offset: 2px !important;
|
||||
background-color: rgba(0, 124, 186, 0.05) !important;
|
||||
}
|
||||
`;
|
||||
|
||||
const styleSheet = document.createElement('style');
|
||||
styleSheet.type = 'text/css';
|
||||
styleSheet.innerHTML = styles;
|
||||
document.head.appendChild(styleSheet);
|
||||
}
|
||||
|
||||
/**
|
||||
* OAuth integration placeholder
|
||||
|
||||
@@ -19,8 +19,7 @@ export class InsertrEditor {
|
||||
console.log('🚀 Starting Insertr Editor');
|
||||
this.isActive = true;
|
||||
|
||||
// Add editor styles
|
||||
this.addEditorStyles();
|
||||
|
||||
|
||||
// Initialize all enhanced elements
|
||||
const elements = this.core.getAllElements();
|
||||
@@ -144,205 +143,5 @@ export class InsertrEditor {
|
||||
}
|
||||
|
||||
|
||||
addEditorStyles() {
|
||||
const styles = `
|
||||
.insertr-editing-hover {
|
||||
outline: 2px dashed #007cba !important;
|
||||
outline-offset: 2px !important;
|
||||
background-color: rgba(0, 124, 186, 0.05) !important;
|
||||
}
|
||||
|
||||
.insertr:hover::after {
|
||||
content: "✏️ " attr(data-content-type);
|
||||
position: absolute;
|
||||
top: -25px;
|
||||
left: 0;
|
||||
background: #007cba;
|
||||
color: white;
|
||||
padding: 2px 6px;
|
||||
font-size: 11px;
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
z-index: 1000;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
/* Version History Modal Styles */
|
||||
.insertr-version-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 10001;
|
||||
}
|
||||
|
||||
.insertr-version-backdrop {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.insertr-version-content-modal {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.insertr-version-header {
|
||||
padding: 20px 20px 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.insertr-version-header h3 {
|
||||
margin: 0 0 20px;
|
||||
color: #333;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.insertr-btn-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
padding: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.insertr-btn-close:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.insertr-version-list {
|
||||
overflow-y: auto;
|
||||
padding: 20px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.insertr-version-item {
|
||||
border: 1px solid #e1e5e9;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
margin-bottom: 12px;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.insertr-version-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.insertr-version-label {
|
||||
font-weight: 600;
|
||||
color: #0969da;
|
||||
}
|
||||
|
||||
.insertr-version-date {
|
||||
color: #656d76;
|
||||
}
|
||||
|
||||
.insertr-version-user {
|
||||
color: #656d76;
|
||||
}
|
||||
|
||||
.insertr-version-content {
|
||||
margin-bottom: 12px;
|
||||
padding: 8px;
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
font-size: 14px;
|
||||
color: #24292f;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.insertr-version-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.insertr-btn-restore {
|
||||
background: #0969da;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.insertr-btn-restore:hover {
|
||||
background: #0860ca;
|
||||
}
|
||||
|
||||
.insertr-btn-view-diff {
|
||||
background: #f6f8fa;
|
||||
color: #24292f;
|
||||
border: 1px solid #d1d9e0;
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.insertr-btn-view-diff:hover {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.insertr-version-empty {
|
||||
text-align: center;
|
||||
color: #656d76;
|
||||
font-style: italic;
|
||||
padding: 40px 20px;
|
||||
}
|
||||
|
||||
/* History Button in Form */
|
||||
.insertr-btn-history {
|
||||
background: #6f42c1;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.insertr-btn-history:hover {
|
||||
background: #5a359a;
|
||||
}
|
||||
`;
|
||||
|
||||
const styleSheet = document.createElement('style');
|
||||
styleSheet.type = 'text/css';
|
||||
styleSheet.innerHTML = styles;
|
||||
document.head.appendChild(styleSheet);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user