scrivly
Version:
A powerful, feature-rich rich text editor for React with TypeScript support
1 lines • 26.6 kB
Source Map (JSON)
{"version":3,"sources":["styles.css"],"names":[],"mappings":"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","file":"styles.css","sourcesContent":[":root {\r\n /* Light theme variables */\r\n --bg-primary: #ffffff;\r\n --bg-secondary: #f8fafc;\r\n --bg-tertiary: #f1f5f9;\r\n --text-primary: #0f172a;\r\n --text-secondary: #64748b;\r\n --text-muted: #94a3b8;\r\n --border-color: #e2e8f0;\r\n --border-focus: #0ea5e9;\r\n --accent-primary: #0ea5e9;\r\n --accent-hover: #0284c7;\r\n --accent-light: #bae6fd;\r\n --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\r\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);\r\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);\r\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);\r\n}\r\n\r\n[data-theme=\"dark\"] {\r\n /* Dark theme variables */\r\n --bg-primary: #0f172a;\r\n --bg-secondary: #1e293b;\r\n --bg-tertiary: #334155;\r\n --text-primary: #f1f5f9;\r\n --text-secondary: #94a3b8;\r\n --text-muted: #64748b;\r\n --border-color: #475569;\r\n --border-focus: #38bdf8;\r\n --accent-primary: #38bdf8;\r\n --accent-hover: #0ea5e9;\r\n --accent-light: #0c4a6e;\r\n --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);\r\n --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);\r\n --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4);\r\n --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4);\r\n}\r\n\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\",\r\n sans-serif;\r\n line-height: 1.6;\r\n color: var(--text-primary);\r\n background: var(--bg-primary);\r\n transition: background-color 0.3s ease, color 0.3s ease;\r\n}\r\n\r\n.app-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 2rem;\r\n background: var(--bg-primary);\r\n min-height: 100vh;\r\n}\r\n\r\n.header {\r\n text-align: center;\r\n margin-bottom: 2rem;\r\n padding: 2rem 1rem;\r\n}\r\n\r\n.header h1 {\r\n font-size: 2.5rem;\r\n margin-bottom: 0.5rem;\r\n color: var(--text-primary);\r\n font-weight: 700;\r\n}\r\n\r\n.header p {\r\n font-size: 1.1rem;\r\n color: var(--text-secondary);\r\n max-width: 600px;\r\n margin: 0 auto;\r\n}\r\n\r\n.editor-wrapper {\r\n background: var(--bg-primary);\r\n border: 1px solid var(--border-color);\r\n margin-bottom: 3rem;\r\n}\r\n\r\n/* Scrivly Editor Styles */\r\n.scrivly-editor {\r\n border: 1px solid var(--border-color);\r\n background: var(--bg-primary);\r\n font-family: inherit;\r\n}\r\n\r\n.scrivly-editor.fullscreen {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n z-index: 9999;\r\n margin: 0;\r\n}\r\n\r\n.scrivly-toolbar {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 2px;\r\n padding: 8px;\r\n background: var(--bg-secondary);\r\n border-bottom: 1px solid var(--border-color);\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n}\r\n\r\n.toolbar-group {\r\n display: flex;\r\n gap: 2px;\r\n padding-right: 8px;\r\n margin-right: 8px;\r\n border-right: 1px solid var(--border-color);\r\n align-items: center;\r\n}\r\n\r\n.toolbar-group:last-child {\r\n border-right: none;\r\n margin-right: 0;\r\n padding-right: 0;\r\n}\r\n\r\n.toolbar-button {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 36px;\r\n height: 36px;\r\n background: transparent;\r\n cursor: pointer;\r\n color: var(--text-secondary);\r\n transition: all 0.2s ease;\r\n position: relative;\r\n border-radius: 4px;\r\n border: none;\r\n}\r\n\r\n.toolbar-button:hover:not(.disabled) {\r\n background: var(--bg-tertiary);\r\n color: var(--accent-primary);\r\n}\r\n\r\n.toolbar-button.active {\r\n background: var(--accent-light);\r\n color: var(--accent-primary);\r\n}\r\n\r\n.toolbar-button.disabled {\r\n opacity: 0.4;\r\n cursor: not-allowed;\r\n}\r\n\r\n.dropdown-container {\r\n position: relative;\r\n}\r\n\r\n.dropdown-trigger {\r\n display: flex;\r\n align-items: center;\r\n gap: 4px;\r\n min-width: 60px;\r\n justify-content: center;\r\n}\r\n\r\n.dropdown-menu {\r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n background: var(--bg-primary);\r\n border: 1px solid var(--border-color);\r\n box-shadow: var(--shadow-md);\r\n z-index: 1000;\r\n min-width: 150px;\r\n max-height: 300px;\r\n overflow-y: auto;\r\n margin-top: 4px;\r\n border-radius: 4px;\r\n}\r\n\r\n.dropdown-item {\r\n display: block;\r\n width: 100%;\r\n padding: 8px 12px;\r\n border: none;\r\n background: transparent;\r\n color: var(--text-primary);\r\n text-align: left;\r\n cursor: pointer;\r\n font-size: 14px;\r\n transition: all 0.2s ease;\r\n}\r\n\r\n.dropdown-item:hover {\r\n background: var(--bg-tertiary);\r\n}\r\n\r\n.dropdown-item.active {\r\n background: var(--accent-light);\r\n color: var(--accent-primary);\r\n}\r\n\r\n.scrivly-editor-container {\r\n overflow-y: auto;\r\n position: relative;\r\n background: var(--bg-primary);\r\n}\r\n\r\n.scrivly-editor-content {\r\n padding: 24px;\r\n min-height: 300px;\r\n outline: none;\r\n line-height: 1.6;\r\n font-size: 16px;\r\n color: var(--text-primary);\r\n background: var(--bg-primary);\r\n}\r\n\r\n.scrivly-editor-content:empty:before {\r\n content: attr(data-placeholder);\r\n color: var(--text-muted);\r\n pointer-events: none;\r\n font-style: italic;\r\n}\r\n\r\n.scrivly-editor-footer {\r\n padding: 12px 16px;\r\n background: var(--bg-secondary);\r\n border-top: 1px solid var(--border-color);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n flex-wrap: wrap;\r\n gap: 12px;\r\n font-size: 14px;\r\n}\r\n\r\n.scrivly-editor-stats {\r\n display: flex;\r\n gap: 20px;\r\n font-size: 13px;\r\n color: var(--text-muted);\r\n}\r\n\r\n.table-controls {\r\n display: flex;\r\n gap: 8px;\r\n}\r\n\r\n.table-controls button {\r\n padding: 4px 8px;\r\n font-size: 12px;\r\n border: none;\r\n background: var(--bg-primary);\r\n color: var(--text-secondary);\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n border-radius: 4px;\r\n}\r\n\r\n.table-controls button:hover {\r\n background: var(--bg-tertiary);\r\n color: var(--accent-primary);\r\n}\r\n\r\n/* Content Styling */\r\n.scrivly-editor-content h1 {\r\n font-size: 2rem;\r\n font-weight: 700;\r\n margin: 1.5rem 0 1rem 0;\r\n color: var(--text-primary);\r\n line-height: 1.2;\r\n}\r\n\r\n.scrivly-editor-content h2 {\r\n font-size: 1.5rem;\r\n font-weight: 600;\r\n margin: 1.25rem 0 0.75rem 0;\r\n color: var(--text-primary);\r\n line-height: 1.3;\r\n}\r\n\r\n.scrivly-editor-content h3 {\r\n font-size: 1.25rem;\r\n font-weight: 600;\r\n margin: 1rem 0 0.5rem 0;\r\n color: var(--text-primary);\r\n line-height: 1.4;\r\n}\r\n\r\n.scrivly-editor-content p {\r\n margin-bottom: 1rem;\r\n}\r\n\r\n.scrivly-editor-content ul,\r\n.scrivly-editor-content ol {\r\n margin: 1rem 0;\r\n padding-left: 1.5rem;\r\n}\r\n\r\n.scrivly-editor-content li {\r\n margin-bottom: 0.25rem;\r\n}\r\n\r\n.scrivly-editor-content blockquote {\r\n border-left: 3px solid var(--accent-primary);\r\n padding-left: 1rem;\r\n margin: 1.5rem 0;\r\n font-style: italic;\r\n color: var(--text-secondary);\r\n background: var(--bg-secondary);\r\n padding: 1rem;\r\n border-radius: 0 4px 4px 0;\r\n}\r\n\r\n.scrivly-editor-content code {\r\n background: var(--bg-tertiary);\r\n padding: 0.2rem 0.4rem;\r\n font-family: \"SF Mono\", Monaco, \"Cascadia Code\", \"Roboto Mono\", Consolas,\r\n \"Courier New\", monospace;\r\n font-size: 0.875em;\r\n color: var(--accent-primary);\r\n border-radius: 4px;\r\n}\r\n\r\n.scrivly-editor-content pre {\r\n background: var(--bg-secondary);\r\n color: var(--text-primary);\r\n padding: 1.5rem;\r\n overflow-x: auto;\r\n margin: 1.5rem 0;\r\n font-family: \"SF Mono\", Monaco, \"Cascadia Code\", \"Roboto Mono\", Consolas,\r\n \"Courier New\", monospace;\r\n font-size: 0.875rem;\r\n line-height: 1.6;\r\n border-radius: 4px;\r\n}\r\n\r\n.scrivly-editor-content pre code {\r\n background: none;\r\n padding: 0;\r\n color: inherit;\r\n font-size: inherit;\r\n}\r\n\r\n.scrivly-editor-content a {\r\n color: var(--accent-primary);\r\n text-decoration: none;\r\n border-bottom: 1px solid transparent;\r\n transition: all 0.2s ease;\r\n}\r\n\r\n.scrivly-editor-content a:hover {\r\n border-bottom-color: var(--accent-primary);\r\n background: rgba(14, 165, 233, 0.1);\r\n padding: 2px 4px;\r\n border-radius: 2px;\r\n}\r\n\r\n.scrivly-editor-content img {\r\n max-width: 100%;\r\n height: auto;\r\n margin: 1rem 0;\r\n border-radius: 4px;\r\n}\r\n\r\n.scrivly-editor-content table {\r\n border-collapse: collapse;\r\n width: 100%;\r\n margin: 1rem 0;\r\n background: var(--bg-primary);\r\n border-radius: 4px;\r\n}\r\n\r\n.scrivly-editor-content td,\r\n.scrivly-editor-content th {\r\n padding: 8px;\r\n text-align: left;\r\n}\r\n\r\n.scrivly-editor-content th {\r\n background: var(--bg-tertiary);\r\n font-weight: 600;\r\n}\r\n\r\n/* Image Container */\r\n.image-container {\r\n position: relative;\r\n display: inline-block;\r\n margin: 1rem 0;\r\n resize: both;\r\n overflow: hidden;\r\n min-width: 100px;\r\n min-height: 100px;\r\n border-radius: 4px;\r\n}\r\n\r\n.image-container .resize-handle {\r\n position: absolute;\r\n bottom: 0;\r\n right: 0;\r\n width: 12px;\r\n height: 12px;\r\n background: var(--accent-primary);\r\n cursor: se-resize;\r\n border-radius: 2px 0 0 0;\r\n}\r\n\r\n.video-container {\r\n margin: 1rem 0;\r\n overflow: hidden;\r\n position: relative;\r\n border-radius: 4px;\r\n}\r\n\r\n.video-container .resize-handle {\r\n background: var(--accent-primary) !important;\r\n border-radius: 2px 0 0 0;\r\n}\r\n\r\n/* Table Context Menu */\r\n/* Styles moved to the TableContextMenu component */\r\n\r\n/* Improved Table Styling */\r\n.scrivly-editor-content table {\r\n border-collapse: collapse;\r\n width: 100%;\r\n margin: 1rem 0;\r\n background: var(--bg-primary);\r\n border-radius: 6px;\r\n overflow: hidden;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.scrivly-editor-content td,\r\n.scrivly-editor-content th {\r\n border: 1px solid var(--border-color);\r\n padding: 12px;\r\n text-align: left;\r\n min-width: 100px;\r\n}\r\n\r\n.scrivly-editor-content th {\r\n background: var(--bg-tertiary);\r\n font-weight: 600;\r\n}\r\n\r\n.scrivly-editor-content td:focus,\r\n.scrivly-editor-content th:focus {\r\n outline: 2px solid var(--accent-primary);\r\n outline-offset: -2px;\r\n}\r\n\r\n/* Modal Styles */\r\n.modal-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 10000;\r\n}\r\n\r\n.modal-content {\r\n background: var(--bg-primary);\r\n box-shadow: var(--shadow-lg);\r\n max-width: 500px;\r\n width: 90%;\r\n max-height: 80vh;\r\n overflow-y: auto;\r\n border-radius: 8px;\r\n}\r\n\r\n.color-picker-modal {\r\n background: var(--bg-primary);\r\n box-shadow: var(--shadow-lg);\r\n max-width: 300px;\r\n width: 90%;\r\n border-radius: 8px;\r\n}\r\n\r\n.emoji-picker-modal {\r\n background: var(--bg-primary);\r\n box-shadow: var(--shadow-lg);\r\n max-width: 400px;\r\n width: 90%;\r\n max-height: 500px;\r\n overflow-y: auto;\r\n border-radius: 8px;\r\n}\r\n\r\n.search-modal {\r\n background: var(--bg-primary);\r\n box-shadow: var(--shadow-lg);\r\n z-index: 10000;\r\n width: 90%;\r\n max-width: 500px;\r\n max-height: 80vh;\r\n overflow: hidden;\r\n border-radius: 8px;\r\n}\r\n\r\n.modal-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 16px;\r\n border-bottom: 1px solid var(--border-color);\r\n}\r\n\r\n.modal-header h3 {\r\n margin: 0;\r\n color: var(--text-primary);\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n}\r\n\r\n.close-button {\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n color: var(--text-secondary);\r\n padding: 4px;\r\n border-radius: 4px;\r\n}\r\n\r\n.close-button:hover {\r\n background: var(--bg-tertiary);\r\n color: var(--text-primary);\r\n}\r\n\r\n.modal-body {\r\n padding: 16px;\r\n}\r\n\r\n.modal-footer {\r\n display: flex;\r\n justify-content: flex-end;\r\n gap: 8px;\r\n padding: 16px;\r\n border-top: 1px solid var(--border-color);\r\n}\r\n\r\n.form-group {\r\n margin-bottom: 12px;\r\n}\r\n\r\n.form-row {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 12px;\r\n}\r\n\r\n.form-group label {\r\n display: block;\r\n margin-bottom: 4px;\r\n font-weight: 500;\r\n color: var(--text-primary);\r\n font-size: 14px;\r\n}\r\n\r\n.form-group input {\r\n width: 100%;\r\n padding: 8px 10px;\r\n background: var(--bg-primary);\r\n color: var(--text-primary);\r\n font-size: 14px;\r\n border-radius: 4px;\r\n border: 1px solid var(--border-color);\r\n}\r\n\r\n.form-group input:focus {\r\n outline: none;\r\n border-color: var(--accent-primary);\r\n box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);\r\n}\r\n\r\n.form-group input.error {\r\n border-color: #ef4444;\r\n}\r\n\r\n.form-group small {\r\n display: block;\r\n margin-top: 4px;\r\n color: var(--text-muted);\r\n font-size: 12px;\r\n}\r\n\r\n.button {\r\n padding: 8px 16px;\r\n cursor: pointer;\r\n font-size: 14px;\r\n font-weight: 500;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n border-radius: 4px;\r\n background: var(--bg-primary);\r\n color: var(--text-primary);\r\n transition: all 0.2s ease;\r\n border: 1px solid var(--border-color);\r\n}\r\n\r\n.button:hover:not(:disabled) {\r\n background: var(--bg-tertiary);\r\n border-color: var(--accent-primary);\r\n color: var(--accent-primary);\r\n}\r\n\r\n.button.primary {\r\n background: var(--accent-light);\r\n color: var(--accent-primary);\r\n border-color: var(--accent-primary);\r\n}\r\n\r\n.button.primary:hover:not(:disabled) {\r\n background: var(--accent-primary);\r\n color: var(--bg-primary);\r\n border-color: var(--accent-primary);\r\n}\r\n\r\n.button.secondary {\r\n background: var(--bg-secondary);\r\n color: var(--text-primary);\r\n border: 1px solid var(--border-color);\r\n}\r\n\r\n.button.secondary:hover {\r\n background: var(--bg-tertiary);\r\n border-color: var(--accent-primary);\r\n}\r\n\r\n.button:disabled {\r\n opacity: 0.5;\r\n cursor: not-allowed;\r\n}\r\n\r\n/* Color Picker */\r\n.color-grid {\r\n display: grid;\r\n grid-template-columns: repeat(6, 1fr);\r\n gap: 8px;\r\n padding: 16px;\r\n}\r\n\r\n.color-swatch {\r\n width: 32px;\r\n height: 32px;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n border-radius: 4px;\r\n border: 1px solid var(--border-color);\r\n}\r\n\r\n.color-swatch:hover {\r\n transform: scale(1.1);\r\n border-color: var(--accent-primary);\r\n}\r\n\r\n.custom-color {\r\n padding: 16px;\r\n border-top: 1px solid var(--border-color);\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n}\r\n\r\n.color-input {\r\n width: 50px;\r\n height: 32px;\r\n cursor: pointer;\r\n border-radius: 4px;\r\n border: 1px solid var(--border-color);\r\n}\r\n\r\n/* Emoji Picker */\r\n.emoji-categories {\r\n padding: 16px;\r\n}\r\n\r\n.emoji-category {\r\n margin-bottom: 20px;\r\n}\r\n\r\n.emoji-category h4 {\r\n margin-bottom: 8px;\r\n color: var(--text-primary);\r\n font-size: 14px;\r\n font-weight: 600;\r\n}\r\n\r\n.emoji-grid {\r\n display: grid;\r\n grid-template-columns: repeat(8, 1fr);\r\n gap: 4px;\r\n}\r\n\r\n.emoji-button {\r\n width: 32px;\r\n height: 32px;\r\n border: none;\r\n background: transparent;\r\n cursor: pointer;\r\n font-size: 18px;\r\n transition: all 0.2s ease;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: 4px;\r\n}\r\n\r\n.emoji-button:hover {\r\n background: var(--bg-tertiary);\r\n transform: scale(1.2);\r\n}\r\n\r\n/* Features Showcase */\r\n.features-showcase {\r\n margin-top: 2rem;\r\n padding: 2rem;\r\n background: var(--bg-secondary);\r\n border-radius: 8px;\r\n}\r\n\r\n.features-showcase h2 {\r\n text-align: center;\r\n font-size: 1.5rem;\r\n margin-bottom: 2rem;\r\n color: var(--text-primary);\r\n}\r\n\r\n.feature-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 1rem;\r\n}\r\n\r\n.feature-card {\r\n background: var(--bg-primary);\r\n padding: 1rem;\r\n position: relative;\r\n border-radius: 6px;\r\n}\r\n\r\n.feature-card h3 {\r\n font-size: 1.1rem;\r\n margin-bottom: 0.5rem;\r\n color: var(--text-primary);\r\n}\r\n\r\n.feature-card p {\r\n color: var(--text-secondary);\r\n line-height: 1.5;\r\n font-size: 0.9rem;\r\n}\r\n\r\n/* Responsive Design */\r\n@media (max-width: 768px) {\r\n .app-container {\r\n padding: 1rem;\r\n }\r\n\r\n .header h1 {\r\n font-size: 1.75rem;\r\n }\r\n\r\n .scrivly-toolbar {\r\n padding: 6px;\r\n gap: 1px;\r\n }\r\n\r\n .toolbar-button {\r\n width: 32px;\r\n height: 32px;\r\n }\r\n\r\n .scrivly-editor-content {\r\n padding: 16px;\r\n font-size: 14px;\r\n }\r\n\r\n .feature-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .form-row {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .modal-content {\r\n margin: 20px;\r\n width: calc(100% - 40px);\r\n }\r\n\r\n .color-grid {\r\n grid-template-columns: repeat(4, 1fr);\r\n }\r\n\r\n .emoji-grid {\r\n grid-template-columns: repeat(6, 1fr);\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .scrivly-toolbar {\r\n padding: 5px;\r\n }\r\n\r\n .toolbar-button {\r\n width: 28px;\r\n height: 28px;\r\n }\r\n\r\n .scrivly-editor-content {\r\n padding: 12px;\r\n }\r\n\r\n .header {\r\n padding: 1rem;\r\n }\r\n\r\n .header h1 {\r\n font-size: 1.5rem;\r\n }\r\n\r\n .features-showcase {\r\n padding: 1.5rem;\r\n }\r\n}\r\n\r\n/* Selection styling */\r\n::selection {\r\n background: rgba(14, 165, 233, 0.2);\r\n}\r\n\r\n/* Focus styles for accessibility */\r\n.toolbar-button:focus-visible {\r\n outline: 2px solid var(--accent-primary);\r\n outline-offset: 2px;\r\n}\r\n\r\n/* Scrollbar styling */\r\n::-webkit-scrollbar {\r\n width: 8px;\r\n height: 8px;\r\n}\r\n\r\n::-webkit-scrollbar-track {\r\n background: var(--bg-secondary);\r\n}\r\n\r\n::-webkit-scrollbar-thumb {\r\n background: var(--border-color);\r\n border-radius: 4px;\r\n}\r\n\r\n::-webkit-scrollbar-thumb:hover {\r\n background: var(--text-muted);\r\n}\r\n\r\n/* Print styles */\r\n@media print {\r\n .scrivly-toolbar,\r\n .scrivly-editor-footer,\r\n .features-showcase {\r\n display: none !important;\r\n }\r\n\r\n .scrivly-editor {\r\n border: none;\r\n box-shadow: none;\r\n }\r\n\r\n .scrivly-editor-content {\r\n padding: 0;\r\n }\r\n}\r\n\r\n/* Selection Improvements */\r\n.scrivly-editor-content ::selection {\r\n background: rgba(14, 165, 233, 0.2);\r\n color: var(--text-primary);\r\n}\r\n\r\n.scrivly-editor-content mark {\r\n background: #fef08a;\r\n padding: 0.1rem 0.2rem;\r\n color: #333;\r\n border-radius: 2px;\r\n}\r\n\r\n.highlight-pulse {\r\n background-color: rgba(254, 240, 138, 0.8);\r\n}"]}