diff options
Diffstat (limited to 'src/client/views/nodes/WebBox.scss')
| -rw-r--r-- | src/client/views/nodes/WebBox.scss | 241 |
1 files changed, 122 insertions, 119 deletions
diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index a1991d1d0..77d7716f4 100644 --- a/src/client/views/nodes/WebBox.scss +++ b/src/client/views/nodes/WebBox.scss @@ -1,9 +1,13 @@ @use '../global/globalCssVariables.module.scss' as global; .webBox { + height: 100%; + width: 100%; + top: 0; + left: 0; position: relative; + display: flex; overflow: hidden; - aspect-ratio: 1 / 1; // Explicitly enforce square aspect ratio .webBox-sideResizer { position: absolute; @@ -16,119 +20,6 @@ .webBox-background { width: 100%; height: 100%; - position: absolute; - top: 0; - left: 0; - } - - // Simple container for screenshot - .webBox-screenshot-container { - width: 100%; - } - - .webBox-screenshot { - width: 100%; - height: auto; // Maintain aspect ratio - display: block; - pointer-events: none; - } - - .webBox-loading { - padding: 20px; - text-align: center; - color: #666; - background-color: #f5f5f5; - min-height: 200px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - } - - .webBox-loading-spinner { - margin-top: 15px; - color: #1976d2; - font-size: 24px; - } - - .webBox-error { - padding: 20px; - color: #d32f2f; - text-align: center; - background-color: #ffebee; - min-height: 200px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 15px; - } - - .webBox-placeholder { - padding: 20px; - text-align: center; - color: #757575; - background-color: #fafafa; - min-height: 200px; - display: flex; - align-items: center; - justify-content: center; - } - - // Basic container layout - .webBox-container { - width: 100%; - height: 100%; - position: relative; - } - - // Simple scrollable container - vertical only - .webBox-outerContent { - width: 100%; - position: relative; - overflow-y: auto; - overflow-x: hidden; - background-color: #f5f5f5; - - // Improve scrollbar styling - &::-webkit-scrollbar-thumb { - background-color: #888; - border-radius: 6px; - } - - &::-webkit-scrollbar { - width: 8px; - background-color: #f5f5f5; - } - } - - .webBox-innerContent { - width: 100%; - background-color: #f5f5f5; - } - - .webBox-htmlSpan { - position: absolute; - top: 0; - left: 0; - cursor: text; - padding: 15px; - width: 100%; - height: 100%; - } - - .webBox-annotationLayer { - position: absolute; - transform-origin: left top; - top: 0; - width: 100%; - pointer-events: none; - mix-blend-mode: multiply; - } - - .webBox-annotationBox { - position: absolute; - background-color: rgba(245, 230, 95, 0.616); } .webBox-ui { @@ -177,14 +68,14 @@ } } - .webBox-refreshButton { + .webBox-nextIcon, + .webBox-prevIcon { background: #121721; + color: white; height: 20px; width: 25px; display: flex; - position: absolute; - bottom: 0; - right: 40px; + position: relative; align-items: center; justify-content: center; border-radius: 3px; @@ -192,6 +83,10 @@ padding: 0px; } + .webBox-overlayButton:hover { + background: none; + } + .webBox-overlayCont { position: absolute; width: calc(100% - 40px); @@ -223,7 +118,8 @@ justify-content: center; border-radius: 3px; pointer-events: all; - z-index: 1; + z-index: 1; // so it appears on top of the document's title, if shown + box-shadow: global.$standard-box-shadow; transition: 0.2s; @@ -238,6 +134,89 @@ opacity: 0.1; } + .webBox-annotationLayer { + position: absolute; + transform-origin: left top; + top: 0; + width: 100%; + pointer-events: none; + mix-blend-mode: multiply; // bcz: makes text fuzzy! + } + + .webBox-annotationBox { + position: absolute; + background-color: rgba(245, 230, 95, 0.616); + } + + .webBox-container { + transform-origin: top left; + width: 100%; + height: 100%; + position: absolute; + + .webBox-htmlSpan { + position: absolute; + top: 0; + left: 0; + cursor: text; + padding: 15px; + height: 100%; + } + + .webBox-cont { + pointer-events: none; + } + + .webBox-cont, + .webBox-cont-interactive { + padding: 0vw; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + transform-origin: top left; + + .webBox-iframe { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + body { + ::selection { + color: white; + background: orange; + } + } + } + } + + .webBox-cont-interactive { + span { + user-select: text !important; + } + } + + .webBox-outerContent { + width: 100%; + height: 100%; + position: absolute; + transform-origin: top left; + top: 0; + left: 0; + overflow: auto; + + .webBox-innerContent { + position: relative; + } + } + + div.webBox-outerContent::-webkit-scrollbar-thumb { + cursor: nw-resize; + } + } + .webBox-overlay { width: 100%; height: 100%; @@ -277,13 +256,37 @@ width: 100%; height: 100%; position: absolute; + pointer-events: all; .indicator { position: absolute; + transition: background-color 0.2s ease; + border-radius: 2px; &.active { background-color: rgba(0, 0, 0, 0.1); + box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); } } } + + // Add styles to hide font errors and improve user experience + .font-error-hidden { + font-family: + system-ui, + -apple-system, + BlinkMacSystemFont, + 'Segoe UI', + Roboto, + Arial, + sans-serif !important; + } + + // Change iframe behavior when resource loading errors occur + iframe.webBox-iframe { + &.loading-error { + // Make full content accessible when external resources fail + pointer-events: all !important; + } + } } |