/* * 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; } /* Disable main page scrollbar when fullscreen is active */ body.ck-body-full-screen { overflow: hidden !important; } /* Only modals opened after fullscreen is active should appear above the editor. */ .ck-editor.ck-plugin-full-screen ~ div[role="dialog"], .ck-editor.ck-plugin-full-screen ~ * div[role="dialog"] { z-index: 10050 !important; } /* Ensure backdrops opened after fullscreen is active also appear above the editor. */ .ck-editor.ck-plugin-full-screen ~ .modal-backdrop, .ck-editor.ck-plugin-full-screen ~ * .modal-backdrop, .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 */ /* max-height/min-height overrides are needed because the side-panel wrapper CSS constrains .ck-editor__editable to 150px (to limit editor height in collapsed panels) */ .ck-editor.ck-plugin-full-screen .ck-editor__main .ck-editor__editable { flex: 1 !important; height: 100% !important; max-height: none !important; min-height: 0 !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; }