diff options
Diffstat (limited to 'src/client/views/nodes/WebBox.scss')
| -rw-r--r-- | src/client/views/nodes/WebBox.scss | 217 |
1 files changed, 119 insertions, 98 deletions
diff --git a/src/client/views/nodes/WebBox.scss b/src/client/views/nodes/WebBox.scss index 05d5babf9..a1991d1d0 100644 --- a/src/client/views/nodes/WebBox.scss +++ b/src/client/views/nodes/WebBox.scss @@ -1,13 +1,9 @@ @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; @@ -20,6 +16,119 @@ .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 { @@ -68,14 +177,14 @@ } } - .webBox-nextIcon, - .webBox-prevIcon { + .webBox-refreshButton { background: #121721; - color: white; height: 20px; width: 25px; display: flex; - position: relative; + position: absolute; + bottom: 0; + right: 40px; align-items: center; justify-content: center; border-radius: 3px; @@ -83,10 +192,6 @@ padding: 0px; } - .webBox-overlayButton:hover { - background: none; - } - .webBox-overlayCont { position: absolute; width: calc(100% - 40px); @@ -118,8 +223,7 @@ justify-content: center; border-radius: 3px; pointer-events: all; - z-index: 1; // so it appears on top of the document's title, if shown - + z-index: 1; box-shadow: global.$standard-box-shadow; transition: 0.2s; @@ -134,89 +238,6 @@ 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%; |