Joakim
01c8dcca76
- Add JavaScript-based style copying from original elements to toolbar buttons - Use getComputedStyle() to dynamically apply color, font-weight, text-decoration, text-transform - Preserve button clickability with protected backgrounds and hover states - Support any CSS framework/custom styles without hardcoded mappings - Add comprehensive documentation to TODO.md for future enhancements Examples: - 'Emphasis' button now shows red bold text (from .emph class) - 'Highlight' button displays with style preview while remaining clickable - 'Brand' button demonstrates text-transform and color changes This provides intuitive visual feedback so users immediately understand what each formatting button will do to their content.
808 lines
21 KiB
CSS
808 lines
21 KiB
CSS
/**
|
|
* INSERTR CSS - Centralized Styles for Content Management Interface
|
|
*
|
|
* Architecture: Simple class-based CSS with proper specificity
|
|
* - Class selectors (0,0,1,0) automatically beat universal selectors (0,0,0,0)
|
|
* - No cascade layers needed - works in all browsers
|
|
* - No !important needed - specificity handles conflicts naturally
|
|
* - Explicit colors prevent inheritance issues
|
|
*
|
|
* Components:
|
|
* - .insertr-gate: Minimal styling for user-defined gates
|
|
* - .insertr-auth-*: Authentication controls and buttons
|
|
* - .insertr-form-*: Modal forms and inputs
|
|
* - .insertr-version-*: Version history modal
|
|
*/
|
|
|
|
/* =================================================================
|
|
CSS CUSTOM PROPERTIES (CSS VARIABLES)
|
|
================================================================= */
|
|
|
|
:root {
|
|
/* Core theme colors */
|
|
--insertr-primary: #007bff;
|
|
--insertr-primary-hover: #0056b3;
|
|
--insertr-success: #28a745;
|
|
--insertr-danger: #dc3545;
|
|
--insertr-warning: #ffc107;
|
|
--insertr-info: #17a2b8;
|
|
|
|
/* Text colors */
|
|
--insertr-text-primary: #333333;
|
|
--insertr-text-secondary: #666666;
|
|
--insertr-text-muted: #999999;
|
|
--insertr-text-inverse: #ffffff;
|
|
|
|
/* Background colors */
|
|
--insertr-bg-primary: #ffffff;
|
|
--insertr-bg-secondary: #f8f9fa;
|
|
--insertr-bg-dark: #343a40;
|
|
--insertr-bg-overlay: rgba(0, 0, 0, 0.5);
|
|
|
|
/* Border and spacing */
|
|
--insertr-border-color: #dee2e6;
|
|
--insertr-border-radius: 4px;
|
|
--insertr-spacing-xs: 4px;
|
|
--insertr-spacing-sm: 8px;
|
|
--insertr-spacing-md: 16px;
|
|
--insertr-spacing-lg: 24px;
|
|
|
|
/* Z-index management */
|
|
--insertr-z-dropdown: 1000;
|
|
--insertr-z-sticky: 1020;
|
|
--insertr-z-fixed: 1030;
|
|
--insertr-z-modal-backdrop: 1040;
|
|
--insertr-z-modal: 1050;
|
|
--insertr-z-popover: 1060;
|
|
--insertr-z-tooltip: 1070;
|
|
--insertr-z-overlay: 999999;
|
|
|
|
/* Typography */
|
|
--insertr-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
--insertr-font-size-sm: 12px;
|
|
--insertr-font-size-base: 14px;
|
|
--insertr-font-size-lg: 16px;
|
|
--insertr-line-height: 1.4;
|
|
|
|
/* Form elements */
|
|
--insertr-input-padding: 0.75rem;
|
|
--insertr-input-border: 1px solid var(--insertr-border-color);
|
|
--insertr-input-border-focus: 1px solid var(--insertr-primary);
|
|
--insertr-input-bg: #ffffff;
|
|
|
|
/* Animation */
|
|
--insertr-transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
/* =================================================================
|
|
USER-DEFINED GATES
|
|
Minimal styling - developers control appearance
|
|
================================================================= */
|
|
|
|
.insertr-gate {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
/* =================================================================
|
|
UNIFIED CONTROL PANEL
|
|
================================================================= */
|
|
|
|
.insertr-control-panel {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
z-index: var(--insertr-z-overlay);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--insertr-spacing-sm);
|
|
font-family: var(--insertr-font-family);
|
|
font-size: var(--insertr-font-size-base);
|
|
max-width: 280px;
|
|
}
|
|
|
|
/* Status Section */
|
|
.insertr-status-section {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-bottom: var(--insertr-spacing-xs);
|
|
}
|
|
|
|
.insertr-status-indicator {
|
|
background: var(--insertr-bg-primary);
|
|
color: var(--insertr-text-primary);
|
|
border: 1px solid var(--insertr-border-color);
|
|
border-radius: var(--insertr-border-radius);
|
|
padding: var(--insertr-spacing-xs) var(--insertr-spacing-sm);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--insertr-spacing-xs);
|
|
font-size: var(--insertr-font-size-sm);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
transition: var(--insertr-transition);
|
|
}
|
|
|
|
.insertr-status-text {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-weight: 500;
|
|
color: inherit;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.insertr-status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
transition: var(--insertr-transition);
|
|
}
|
|
|
|
.insertr-status-visitor {
|
|
background: var(--insertr-text-muted);
|
|
}
|
|
|
|
.insertr-status-authenticated {
|
|
background: var(--insertr-primary);
|
|
}
|
|
|
|
.insertr-status-editing {
|
|
background: var(--insertr-success);
|
|
animation: insertr-pulse 2s infinite;
|
|
}
|
|
|
|
@keyframes insertr-pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.6; }
|
|
}
|
|
|
|
/* Action Buttons Section */
|
|
.insertr-action-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--insertr-spacing-xs);
|
|
}
|
|
|
|
.insertr-action-btn {
|
|
background: var(--insertr-primary);
|
|
color: var(--insertr-text-inverse);
|
|
border: none;
|
|
border-radius: var(--insertr-border-radius);
|
|
padding: var(--insertr-spacing-sm) var(--insertr-spacing-md);
|
|
margin: 0;
|
|
font-family: var(--insertr-font-family);
|
|
font-size: var(--insertr-font-size-base);
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
cursor: pointer;
|
|
transition: var(--insertr-transition);
|
|
line-height: var(--insertr-line-height);
|
|
min-width: 120px;
|
|
white-space: nowrap;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.insertr-action-btn:hover {
|
|
background: var(--insertr-primary-hover);
|
|
color: var(--insertr-text-inverse);
|
|
text-decoration: none;
|
|
transform: translateY(-1px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.insertr-action-btn:focus {
|
|
outline: 2px solid var(--insertr-primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.insertr-action-btn:active {
|
|
transform: translateY(0);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.insertr-action-btn:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
/* Button Type Variants */
|
|
.insertr-enhance-btn {
|
|
background: var(--insertr-info);
|
|
}
|
|
|
|
.insertr-enhance-btn:hover {
|
|
background: #138496;
|
|
}
|
|
|
|
.insertr-edit-btn.insertr-edit-active {
|
|
background: var(--insertr-success);
|
|
}
|
|
|
|
.insertr-edit-btn.insertr-edit-active:hover {
|
|
background: #1e7e34;
|
|
}
|
|
|
|
.insertr-auth-btn.insertr-authenticated {
|
|
background: var(--insertr-text-secondary);
|
|
}
|
|
|
|
.insertr-auth-btn.insertr-authenticated:hover {
|
|
background: var(--insertr-text-primary);
|
|
}
|
|
|
|
/* =================================================================
|
|
EDITING INDICATORS
|
|
Visual feedback for editable content
|
|
================================================================= */
|
|
|
|
.insertr-editing-hover {
|
|
outline: 2px dashed var(--insertr-primary);
|
|
outline-offset: 2px;
|
|
background: rgba(0, 123, 255, 0.05);
|
|
position: relative;
|
|
transition: var(--insertr-transition);
|
|
}
|
|
|
|
.insertr-editing-hover::after {
|
|
content: '✏️ Click to edit';
|
|
position: absolute;
|
|
top: -30px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
background: var(--insertr-text-primary);
|
|
color: var(--insertr-text-inverse);
|
|
padding: var(--insertr-spacing-xs) var(--insertr-spacing-sm);
|
|
border-radius: var(--insertr-border-radius);
|
|
font-size: var(--insertr-font-size-sm);
|
|
font-family: var(--insertr-font-family);
|
|
white-space: nowrap;
|
|
z-index: var(--insertr-z-tooltip);
|
|
opacity: 0;
|
|
animation: insertr-tooltip-show 0.2s ease-in-out forwards;
|
|
}
|
|
|
|
@keyframes insertr-tooltip-show {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-50%) translateY(-5px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Hide editing indicators when not in edit mode */
|
|
body:not(.insertr-edit-mode) .insertr-editing-hover {
|
|
outline: none;
|
|
background: transparent;
|
|
}
|
|
|
|
body:not(.insertr-edit-mode) .insertr-editing-hover::after {
|
|
display: none;
|
|
}
|
|
|
|
/* =================================================================
|
|
MODAL OVERLAY & CONTAINER
|
|
================================================================= */
|
|
|
|
.insertr-modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: var(--insertr-bg-overlay);
|
|
z-index: var(--insertr-z-modal-backdrop);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: var(--insertr-spacing-lg);
|
|
margin: 0;
|
|
}
|
|
|
|
.insertr-modal-container {
|
|
background: var(--insertr-bg-primary);
|
|
color: var(--insertr-text-primary);
|
|
border-radius: var(--insertr-border-radius);
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
max-width: 600px;
|
|
width: 100%;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
z-index: var(--insertr-z-modal);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* =================================================================
|
|
STYLE-AWARE EDITOR STYLES
|
|
Modern interface for content editing with style preservation
|
|
================================================================= */
|
|
|
|
/* Main editor container */
|
|
.insertr-style-aware-editor {
|
|
background: var(--insertr-bg-primary);
|
|
border: 1px solid var(--insertr-border-color);
|
|
border-radius: var(--insertr-border-radius);
|
|
padding: var(--insertr-spacing-lg);
|
|
min-width: 400px;
|
|
max-width: 600px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
font-family: var(--insertr-font-family);
|
|
color: var(--insertr-text-primary);
|
|
}
|
|
|
|
/* Style toolbar */
|
|
.insertr-style-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--insertr-spacing-xs);
|
|
padding: var(--insertr-spacing-sm);
|
|
background: var(--insertr-bg-secondary);
|
|
border: 1px solid var(--insertr-border-color);
|
|
border-radius: var(--insertr-border-radius);
|
|
margin-bottom: var(--insertr-spacing-md);
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.insertr-toolbar-title {
|
|
font-size: var(--insertr-font-size-sm);
|
|
font-weight: 500;
|
|
color: var(--insertr-text-muted);
|
|
margin-right: var(--insertr-spacing-xs);
|
|
}
|
|
|
|
.insertr-style-btn {
|
|
background: var(--insertr-bg-primary);
|
|
border: 1px solid var(--insertr-border-color);
|
|
border-radius: var(--insertr-border-radius);
|
|
padding: var(--insertr-spacing-xs) var(--insertr-spacing-sm);
|
|
font-size: var(--insertr-font-size-sm);
|
|
font-weight: 500;
|
|
color: var(--insertr-text-primary);
|
|
cursor: pointer;
|
|
transition: var(--insertr-transition);
|
|
}
|
|
|
|
.insertr-style-btn:hover {
|
|
background: var(--insertr-bg-secondary);
|
|
border-color: var(--insertr-text-muted);
|
|
}
|
|
|
|
.insertr-style-btn:active {
|
|
background: var(--insertr-border-color);
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
/* Style preview buttons - styled dynamically via JavaScript */
|
|
.insertr-style-btn.insertr-style-preview {
|
|
/* Preserve button structure */
|
|
background: var(--insertr-bg-primary) !important;
|
|
border: 1px solid var(--insertr-border-color) !important;
|
|
border-radius: var(--insertr-border-radius) !important;
|
|
padding: var(--insertr-spacing-xs) var(--insertr-spacing-sm) !important;
|
|
font-size: var(--insertr-font-size-sm) !important;
|
|
cursor: pointer !important;
|
|
transition: var(--insertr-transition) !important;
|
|
|
|
/* Button layout */
|
|
min-height: 28px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
/* Ensure button remains clickable */
|
|
position: relative;
|
|
|
|
/* Styles will be applied dynamically via JavaScript */
|
|
}
|
|
|
|
/* Add subtle background to preview buttons to ensure they remain clickable-looking */
|
|
.insertr-style-btn.insertr-style-preview::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: var(--insertr-bg-primary);
|
|
opacity: 0.9;
|
|
border-radius: inherit;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* Hover state for preview buttons */
|
|
.insertr-style-btn.insertr-style-preview:hover {
|
|
background: var(--insertr-bg-secondary) !important;
|
|
border-color: var(--insertr-text-muted) !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
/* Active state for preview buttons */
|
|
.insertr-style-btn.insertr-style-preview:active {
|
|
background: var(--insertr-border-color) !important;
|
|
transform: translateY(1px) !important;
|
|
}
|
|
|
|
/* Editor components */
|
|
.insertr-simple-editor,
|
|
.insertr-rich-editor,
|
|
.insertr-fallback-textarea {
|
|
width: 100%;
|
|
border: var(--insertr-input-border);
|
|
border-radius: var(--insertr-border-radius);
|
|
padding: var(--insertr-input-padding);
|
|
font-size: var(--insertr-font-size-base);
|
|
line-height: var(--insertr-line-height);
|
|
font-family: var(--insertr-font-family);
|
|
color: var(--insertr-text-primary);
|
|
background: var(--insertr-input-bg);
|
|
margin-bottom: var(--insertr-spacing-md);
|
|
transition: var(--insertr-transition);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.insertr-simple-editor:focus,
|
|
.insertr-rich-editor:focus,
|
|
.insertr-fallback-textarea:focus {
|
|
outline: none;
|
|
border: var(--insertr-input-border-focus);
|
|
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
|
|
}
|
|
|
|
.insertr-simple-editor,
|
|
.insertr-fallback-textarea {
|
|
resize: vertical;
|
|
min-height: 120px;
|
|
}
|
|
|
|
.insertr-rich-editor {
|
|
min-height: 100px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
|
|
|
|
/* Form actions */
|
|
.insertr-form-actions {
|
|
display: flex;
|
|
gap: var(--insertr-spacing-sm);
|
|
justify-content: flex-end;
|
|
margin: 0;
|
|
padding: var(--insertr-spacing-md) 0 0 0;
|
|
border-top: 1px solid var(--insertr-border-color);
|
|
}
|
|
|
|
.insertr-btn-save,
|
|
.insertr-btn-cancel,
|
|
.insertr-btn-history {
|
|
background: var(--insertr-primary);
|
|
color: var(--insertr-text-inverse);
|
|
border: none;
|
|
border-radius: var(--insertr-border-radius);
|
|
padding: var(--insertr-spacing-sm) var(--insertr-spacing-md);
|
|
margin: 0;
|
|
font-family: var(--insertr-font-family);
|
|
font-size: var(--insertr-font-size-base);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: var(--insertr-transition);
|
|
line-height: var(--insertr-line-height);
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.insertr-btn-cancel {
|
|
background: var(--insertr-text-secondary);
|
|
color: var(--insertr-text-inverse);
|
|
}
|
|
|
|
.insertr-btn-cancel:hover {
|
|
background: var(--insertr-text-primary);
|
|
color: var(--insertr-text-inverse);
|
|
}
|
|
|
|
.insertr-btn-history {
|
|
background: var(--insertr-info);
|
|
color: var(--insertr-text-inverse);
|
|
margin-right: auto;
|
|
}
|
|
|
|
.insertr-btn-history:hover {
|
|
background: #138496;
|
|
color: var(--insertr-text-inverse);
|
|
}
|
|
|
|
.insertr-btn-save:hover {
|
|
background: var(--insertr-primary-hover);
|
|
color: var(--insertr-text-inverse);
|
|
}
|
|
|
|
.insertr-btn-save:focus,
|
|
.insertr-btn-cancel:focus,
|
|
.insertr-btn-history:focus {
|
|
outline: 2px solid var(--insertr-primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Fallback editor */
|
|
.insertr-fallback-editor {
|
|
background: var(--insertr-bg-primary);
|
|
border: 1px solid var(--insertr-border-color);
|
|
border-radius: var(--insertr-border-radius);
|
|
padding: var(--insertr-spacing-lg);
|
|
min-width: 400px;
|
|
max-width: 500px;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
font-family: var(--insertr-font-family);
|
|
color: var(--insertr-text-primary);
|
|
}
|
|
|
|
/* =================================================================
|
|
VERSION HISTORY MODAL
|
|
================================================================= */
|
|
|
|
.insertr-version-modal {
|
|
padding: var(--insertr-spacing-lg);
|
|
margin: 0;
|
|
font-family: var(--insertr-font-family);
|
|
font-size: var(--insertr-font-size-base);
|
|
line-height: var(--insertr-line-height);
|
|
color: var(--insertr-text-primary);
|
|
background: var(--insertr-bg-primary);
|
|
}
|
|
|
|
.insertr-version-header {
|
|
margin: 0 0 var(--insertr-spacing-lg) 0;
|
|
padding: 0 0 var(--insertr-spacing-md) 0;
|
|
border-bottom: 1px solid var(--insertr-border-color);
|
|
}
|
|
|
|
.insertr-version-title {
|
|
margin: 0 0 var(--insertr-spacing-sm) 0;
|
|
padding: 0;
|
|
font-size: var(--insertr-font-size-lg);
|
|
font-weight: 600;
|
|
color: var(--insertr-text-primary);
|
|
}
|
|
|
|
.insertr-version-help {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-size: var(--insertr-font-size-sm);
|
|
color: var(--insertr-text-muted);
|
|
}
|
|
|
|
.insertr-version-list {
|
|
margin: 0 0 var(--insertr-spacing-lg) 0;
|
|
padding: 0;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.insertr-version-item {
|
|
padding: var(--insertr-spacing-sm);
|
|
margin: 0 0 var(--insertr-spacing-sm) 0;
|
|
border: 1px solid var(--insertr-border-color);
|
|
border-radius: var(--insertr-border-radius);
|
|
cursor: pointer;
|
|
transition: var(--insertr-transition);
|
|
background: var(--insertr-bg-primary);
|
|
color: var(--insertr-text-primary);
|
|
}
|
|
|
|
.insertr-version-item:hover {
|
|
background: var(--insertr-bg-secondary);
|
|
}
|
|
|
|
.insertr-version-item.selected {
|
|
border-color: var(--insertr-primary);
|
|
background: rgba(0, 123, 255, 0.1);
|
|
}
|
|
|
|
.insertr-version-date {
|
|
font-weight: 500;
|
|
color: var(--insertr-text-primary);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.insertr-version-preview {
|
|
margin: var(--insertr-spacing-xs) 0 0 0;
|
|
padding: 0;
|
|
font-size: var(--insertr-font-size-sm);
|
|
color: var(--insertr-text-secondary);
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.insertr-version-actions {
|
|
display: flex;
|
|
gap: var(--insertr-spacing-sm);
|
|
justify-content: flex-end;
|
|
margin: 0;
|
|
padding: var(--insertr-spacing-md) 0 0 0;
|
|
border-top: 1px solid var(--insertr-border-color);
|
|
}
|
|
|
|
.insertr-btn-restore,
|
|
.insertr-btn-close {
|
|
background: var(--insertr-primary);
|
|
color: var(--insertr-text-inverse);
|
|
border: none;
|
|
border-radius: var(--insertr-border-radius);
|
|
padding: var(--insertr-spacing-sm) var(--insertr-spacing-md);
|
|
margin: 0;
|
|
font-family: var(--insertr-font-family);
|
|
font-size: var(--insertr-font-size-base);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: var(--insertr-transition);
|
|
line-height: var(--insertr-line-height);
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.insertr-btn-close {
|
|
background: var(--insertr-text-secondary);
|
|
color: var(--insertr-text-inverse);
|
|
}
|
|
|
|
.insertr-btn-close:hover {
|
|
background: var(--insertr-text-primary);
|
|
color: var(--insertr-text-inverse);
|
|
}
|
|
|
|
.insertr-btn-restore:hover {
|
|
background: var(--insertr-primary-hover);
|
|
color: var(--insertr-text-inverse);
|
|
}
|
|
|
|
.insertr-btn-restore:focus,
|
|
.insertr-btn-close:focus {
|
|
outline: 2px solid var(--insertr-primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* =================================================================
|
|
STATUS AND FEEDBACK MESSAGES
|
|
================================================================= */
|
|
|
|
.insertr-status-message {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
z-index: var(--insertr-z-overlay);
|
|
background: var(--insertr-bg-primary);
|
|
color: var(--insertr-text-primary);
|
|
border: 1px solid var(--insertr-border-color);
|
|
border-radius: var(--insertr-border-radius);
|
|
padding: var(--insertr-spacing-md);
|
|
margin: 0;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
font-family: var(--insertr-font-family);
|
|
font-size: var(--insertr-font-size-base);
|
|
line-height: var(--insertr-line-height);
|
|
max-width: 300px;
|
|
transition: var(--insertr-transition);
|
|
}
|
|
|
|
.insertr-status-message.success {
|
|
border-color: var(--insertr-success);
|
|
background: #d4edda;
|
|
color: #155724;
|
|
}
|
|
|
|
.insertr-status-message.error {
|
|
border-color: var(--insertr-danger);
|
|
background: #f8d7da;
|
|
color: #721c24;
|
|
}
|
|
|
|
.insertr-status-message.warning {
|
|
border-color: var(--insertr-warning);
|
|
background: #fff3cd;
|
|
color: #856404;
|
|
}
|
|
|
|
.insertr-status-text {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-weight: 500;
|
|
color: inherit;
|
|
}
|
|
|
|
/* =================================================================
|
|
UTILITY CLASSES
|
|
================================================================= */
|
|
|
|
.insertr-hide {
|
|
display: none;
|
|
}
|
|
|
|
.insertr-sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|
|
|
|
/* =================================================================
|
|
RESPONSIVE DESIGN
|
|
================================================================= */
|
|
|
|
@media (max-width: 768px) {
|
|
.insertr-modal-overlay {
|
|
padding: var(--insertr-spacing-sm);
|
|
}
|
|
|
|
.insertr-control-panel {
|
|
bottom: 10px;
|
|
right: 10px;
|
|
max-width: 240px;
|
|
}
|
|
|
|
.insertr-action-btn {
|
|
min-width: 100px;
|
|
font-size: var(--insertr-font-size-sm);
|
|
padding: var(--insertr-spacing-xs) var(--insertr-spacing-sm);
|
|
}
|
|
|
|
.insertr-status-indicator {
|
|
font-size: 11px;
|
|
padding: 3px var(--insertr-spacing-xs);
|
|
}
|
|
|
|
.insertr-editing-hover::after {
|
|
font-size: 11px;
|
|
padding: 2px var(--insertr-spacing-xs);
|
|
top: -25px;
|
|
}
|
|
|
|
/* StyleAware Editor responsive adjustments */
|
|
.insertr-style-aware-editor,
|
|
.insertr-fallback-editor {
|
|
min-width: 300px;
|
|
max-width: calc(100vw - 2rem);
|
|
padding: var(--insertr-spacing-md);
|
|
}
|
|
|
|
.insertr-style-toolbar {
|
|
padding: var(--insertr-spacing-xs);
|
|
gap: var(--insertr-spacing-xs);
|
|
}
|
|
|
|
.insertr-style-btn {
|
|
padding: var(--insertr-spacing-xs);
|
|
font-size: var(--insertr-font-size-sm);
|
|
}
|
|
|
|
.insertr-form-actions {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.insertr-btn-save,
|
|
.insertr-btn-cancel {
|
|
width: 100%;
|
|
}
|
|
|
|
.insertr-btn-history {
|
|
margin-right: 0;
|
|
order: -1;
|
|
}
|
|
} |