joakim/insertr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
10c755efcadc90ac917ba84a0a49c0cafc9d4605
insertr/internal/content/assets/insertr.css
Joakim 10c755efca Simplify CSS architecture by removing cascade layers and !important declarations 
- Remove @layer declarations and complex hybrid approach
- Eliminate all !important usage - rely on natural CSS specificity
- Add explicit color declarations to prevent inheritance issues
- Class selectors (0,0,1,0) naturally beat universal selectors (0,0,0,0)
- Fixes white-on-white modal issues on sites with CSS resets
- Works in all browsers without 2022+ cascade layer requirements
- Cleaner, more maintainable CSS architecture
2025-09-17 16:32:46 +02:00

533 lines
14 KiB
CSS
Raw Blame History

/**
* 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;
}
/* =================================================================
AUTHENTICATION CONTROLS
================================================================= */
.insertr-auth-controls {
position: fixed;
bottom: 20px;
right: 20px;
z-index: var(--insertr-z-overlay);
display: flex;
flex-direction: column;
gap: 8px;
font-family: var(--insertr-font-family);
font-size: var(--insertr-font-size-base);
}
.insertr-auth-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: 80px;
white-space: nowrap;
}
.insertr-auth-btn:hover {
background: var(--insertr-primary-hover);
color: var(--insertr-text-inverse);
text-decoration: none;
}
.insertr-auth-btn:focus {
outline: 2px solid var(--insertr-primary);
outline-offset: 2px;
}
/* =================================================================
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;
}
/* =================================================================
EDIT FORM STYLES
================================================================= */
.insertr-edit-form {
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-form-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-form-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-form-help {
margin: 0;
padding: 0;
font-size: var(--insertr-font-size-sm);
color: var(--insertr-text-muted);
}
.insertr-form-body {
margin: 0 0 var(--insertr-spacing-lg) 0;
padding: 0;
}
.insertr-form-group {
margin: 0 0 var(--insertr-spacing-md) 0;
padding: 0;
}
.insertr-form-label {
display: block;
margin: 0 0 var(--insertr-spacing-xs) 0;
padding: 0;
font-weight: 500;
color: var(--insertr-text-primary);
}
.insertr-form-input,
.insertr-form-textarea,
.insertr-form-select {
width: 100%;
padding: var(--insertr-input-padding);
margin: 0;
border: var(--insertr-input-border);
border-radius: var(--insertr-border-radius);
background: var(--insertr-input-bg);
font-family: var(--insertr-font-family);
font-size: var(--insertr-font-size-base);
line-height: var(--insertr-line-height);
color: var(--insertr-text-primary);
transition: var(--insertr-transition);
box-sizing: border-box;
}
.insertr-form-input:focus,
.insertr-form-textarea:focus,
.insertr-form-select:focus {
outline: none;
border: var(--insertr-input-border-focus);
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
.insertr-form-textarea {
min-height: 120px;
resize: vertical;
}
.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;
}
/* =================================================================
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-auth-controls {
bottom: 10px;
right: 10px;
}
.insertr-form-actions {
flex-direction: column;
}
.insertr-btn-history {
margin-right: 0;
order: -1;
}
}
Reference in New Issue View Git Blame Copy Permalink