/* * This file has been added to "angular.json > styles" array. * Since, it was not getting imported directly in the "fullscreeen.plugin.ts" * using "import '../theme/fullscreen.css'" */ /* Global z-index for CKEditor UI elements to work in modals and fullscreen */ /* CKEditor appends these elements directly to , so they need high z-index */ .ck.ck-balloon-panel, .ck.ck-tooltip, .ck.ck-dropdown__panel { z-index: 10100 !important; } /* Additional specificity for visible balloons (like link popup) */ .ck.ck-balloon-panel.ck-balloon-panel_visible { z-index: 10100 !important; } .ck-editor { transition: opacity 0.5s !important; } .ck-editor.ck-plugin-full-screen { position: fixed !important; top: 0 !important; left: 0 !important; z-index: 9999 !important; width: 100% !important; height: 100vh !important; display: flex !important; flex-direction: column !important; align-items: center !important; background-color: #fff !important; transition: none !important; } /* Global fix: When fullscreen mode is active, ensure ALL modals appear above it */ /* This uses :has() to detect if fullscreen editor exists anywhere in the document */ body:has(.ck-editor.ck-plugin-full-screen) div[role="dialog"] { z-index: 10050 !important; } /* Ensure modal backdrops also appear above fullscreen editor */ body:has(.ck-editor.ck-plugin-full-screen) .modal-backdrop, body:has(.ck-editor.ck-plugin-full-screen) div[role="dialog"] ~ div[class*="bg-black"], body:has(.ck-editor.ck-plugin-full-screen) > div[class*="fixed"][class*="bg-black"] { z-index: 10040 !important; } /* Fallback for browsers that don't support :has() - uses adjacent/general sibling selectors */ @supports not (selector(:has(*))) { /* When fullscreen editor is present, boost all subsequent modals */ .ck-editor.ck-plugin-full-screen ~ div[role="dialog"], .ck-editor.ck-plugin-full-screen ~ * div[role="dialog"] { z-index: 10050 !important; } .ck-editor.ck-plugin-full-screen ~ div[class*="bg-black"] { z-index: 10040 !important; } } .ck-editor.ck-plugin-full-screen .ck-editor__top, .ck-editor.ck-plugin-full-screen .ck-editor__main { width: 100%; max-width: calc(100% - 60px); margin-inline: auto; /* max-width: 1000px; */ } .ck-editor.ck-plugin-full-screen .ck-editor__top { /* margin-top: 2em; */ margin-top: 5em; /* increased due to top navigation bar */ } .ck-editor.ck-plugin-full-screen .ck-editor__main { /* Fill the rest of the height of the parent */ flex-grow: 1 !important; flex: 1 !important; display: flex !important; flex-direction: column !important; overflow-y: hidden !important; margin-bottom: 2em !important; min-height: 0 !important; } /* Ensure the editable area fills the main container */ .ck-editor.ck-plugin-full-screen .ck-editor__main .ck-editor__editable { flex: 1 !important; height: 100% !important; overflow-y: auto !important; } /* Make source view also cover the whole viewport */ .ck-editor.ck-plugin-full-screen .ck-source-editing-area { height: 100% !important; flex: 1 !important; } .ck-editor.ck-plugin-full-screen .ck-source-editing-area textarea { overflow-y: scroll; }