@datalayer/jupyter-lexical 1.0.11 → 1.0.13

package/style/modal-overrides.css

@@ -1,261 +0,0 @@
-/*
- * Copyright (c) 2021-2023 Datalayer, Inc.
- *
- * MIT License
- */
-
-/*
- * Copyright (c) 2025-2026 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
-
-/**
- * CSS overrides for Lexical modals (TableInsertModal, ExcalidrawModal)
- * Fixes layout issues with global CSS conflicts
- *
- * Usage:
- *   import '@datalayer/jupyter-lexical/style/modal-overrides.css';
- */
-
-/* ============================================
-   Table Insert Modal Fixes
-   ============================================ */
-
-.TableInsertModal__overlay {
-  display: flex !important;
-  justify-content: center !important;
-  align-items: center !important;
-  position: fixed !important;
-  flex-direction: column !important;
-  top: 0 !important;
-  bottom: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  background-color: rgba(40, 40, 40, 0.6) !important;
-  z-index: 10000 !important;
-}
-
-.TableInsertModal__modal {
-  padding: 24px !important;
-  min-height: 250px !important;
-  min-width: 400px !important;
-  max-width: 500px !important;
-  display: flex !important;
-  flex-direction: column !important;
-  background: white !important;
-  color: #333 !important;
-  box-shadow: 0 0 20px 0 #444 !important;
-  border-radius: 10px !important;
-}
-
-.TableInsertModal__title {
-  margin: 0 0 20px 0 !important;
-  padding-bottom: 12px !important;
-  border-bottom: 1px solid #ccc !important;
-  font-size: 18px !important;
-  font-weight: 600 !important;
-  color: #333 !important;
-}
-
-.TableInsertModal__content {
-  display: flex !important;
-  flex-direction: column !important;
-  gap: 20px !important;
-  margin-bottom: 24px !important;
-  flex: 1 !important;
-}
-
-.TableInsertModal__field {
-  display: flex !important;
-  flex-direction: column !important;
-  gap: 8px !important;
-}
-
-.TableInsertModal__field label {
-  font-size: 14px !important;
-  font-weight: 500 !important;
-  color: #555 !important;
-  display: block !important;
-}
-
-.TableInsertModal__field input {
-  padding: 10px 12px !important;
-  border: 1px solid #ccc !important;
-  background-color: white !important;
-  color: inherit !important;
-  border-radius: 4px !important;
-  font-size: 16px !important;
-  width: 100% !important;
-  box-sizing: border-box !important;
-  display: block !important;
-  min-height: 40px !important;
-  -webkit-appearance: none !important;
-  -moz-appearance: textfield !important;
-}
-
-.TableInsertModal__field input:focus {
-  border-color: #0078d4 !important;
-  outline: 1px solid #0078d4 !important;
-  outline-offset: -1px !important;
-}
-
-.TableInsertModal__actions {
-  display: flex !important;
-  justify-content: flex-end !important;
-  gap: 12px !important;
-  margin-top: auto !important;
-}
-
-.TableInsertModal__button {
-  padding: 10px 20px !important;
-  border: none !important;
-  border-radius: 4px !important;
-  font-size: 14px !important;
-  font-weight: 500 !important;
-  cursor: pointer !important;
-  min-width: 80px !important;
-}
-
-.TableInsertModal__button--cancel {
-  background-color: #f0f0f0 !important;
-  color: #333 !important;
-}
-
-.TableInsertModal__button--cancel:hover {
-  background-color: #e0e0e0 !important;
-}
-
-.TableInsertModal__button--confirm {
-  background-color: #0078d4 !important;
-  color: white !important;
-}
-
-.TableInsertModal__button--confirm:hover {
-  background-color: #006cbe !important;
-}
-
-/* ============================================
-   Excalidraw Modal Fixes
-   ============================================ */
-
-/* Overlay - block background clicks but allow modal interaction */
-.ExcalidrawModal__overlay {
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  position: fixed !important;
-  top: 0 !important;
-  bottom: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  z-index: 10000 !important;
-  background-color: rgba(40, 40, 40, 0.6) !important;
-  flex-direction: column !important;
-  /* No pointer-events override - use default behavior */
-}
-
-.ExcalidrawModal__modal {
-  position: relative !important;
-  z-index: 10001 !important;
-  display: flex !important;
-  justify-content: center !important;
-  align-items: center !important;
-  border-radius: 8px !important;
-  background-color: #eee !important;
-  width: auto !important;
-  height: auto !important;
-}
-
-.ExcalidrawModal__row {
-  position: relative !important;
-  padding: 50px 10px 10px !important;
-  width: 70vw !important;
-  height: 90vh !important;
-  border-radius: 8px !important;
-  box-shadow:
-    0 12px 28px 0 rgba(0, 0, 0, 0.2),
-    0 2px 4px 0 rgba(0, 0, 0, 0.1),
-    inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
-  display: flex !important;
-  flex-direction: column !important;
-  background: white !important;
-  z-index: 10002 !important;
-}
-
-.ExcalidrawModal__row > div:not(.ExcalidrawModal__actions) {
-  border-radius: 5px !important;
-  width: 100% !important;
-  height: 100% !important;
-  display: flex !important;
-  flex: 1 !important;
-  position: relative !important;
-  z-index: 1 !important;
-}
-
-.ExcalidrawModal__actions {
-  position: absolute !important;
-  right: 5px !important;
-  top: 5px !important;
-  z-index: 10003 !important;
-  display: flex !important;
-  flex-direction: row !important;
-  gap: 10px !important;
-  align-items: center !important;
-  pointer-events: auto !important;
-  /* CRITICAL: Don't let this expand and block the modal */
-  width: auto !important;
-  height: auto !important;
-  max-width: fit-content !important;
-  max-height: fit-content !important;
-}
-
-/* CRITICAL: These containers were blocking everything - make them pass-through */
-.ExcalidrawModal__row .excalidraw-eye-dropper-container,
-.ExcalidrawModal__row .excalidraw-textEditorContainer,
-.ExcalidrawModal__row .excalidraw-contextMenuContainer,
-.ExcalidrawModal__row .SVGLayer {
-  pointer-events: none !important;
-  width: 0 !important;
-  height: 0 !important;
-}
-
-/* Canvas must be interactive */
-.ExcalidrawModal__row canvas {
-  pointer-events: auto !important;
-  touch-action: none !important;
-}
-
-/* Target the actual button class used in the component */
-.ExcalidrawModal__actions button,
-.ExcalidrawModal__actions .action-button {
-  background-color: #fff !important;
-  border-radius: 6px !important;
-  padding: 10px 20px !important;
-  border: 1px solid #ccc !important;
-  cursor: pointer !important;
-  font-size: 14px !important;
-  font-weight: 500 !important;
-  color: #333 !important;
-  min-width: 100px !important;
-  white-space: nowrap !important;
-  pointer-events: auto !important;
-}
-
-.ExcalidrawModal__actions button:hover,
-.ExcalidrawModal__actions .action-button:hover {
-  background-color: #f0f0f0 !important;
-  border-color: #999 !important;
-}
-
-/* Excalidraw container */
-.ExcalidrawModal__row .excalidraw {
-  pointer-events: auto !important;
-  touch-action: none !important;
-}
-
-/* Let Excalidraw manage its own pointer-events for proper event handling */
-
-/* Only ensure critical interactive elements have pointer-events */
-.ExcalidrawModal__row canvas {
-  pointer-events: auto !important;
-}