`, so a click bubbles to that anchor and opens
the preview — the one click target that does, since the interactive iframe
swallows every click over the rest of the tile. Kept small and cornered so it
barely covers the preview the user is scrolling. */
/* Layout/shape/colour come from Bootstrap utilities on the element
(`position-absolute bottom-0 end-0 m-2 d-flex align-items-center
justify-content-center rounded-circle text-white`); only what Bootstrap
can't express stays here: the fixed square, the icon size, and the
translucent backdrop that darkens on hover. */
.mwu-thumbnailPdfOpen-1c0b2a0 {
z-index: 11;
width: 2rem;
height: 2rem;
font-size: 0.9rem;
background: rgba(0, 0, 0, 0.55);
opacity: 0.85;
transition:
opacity 0.2s ease,
background-color 0.2s ease;
&:hover {
opacity: 1;
background: rgba(0, 0, 0, 0.75);
}
}
.mwu-thumbnailInfo-1c0b2a0 {
padding: 0.5rem 0;
background-color: transparent;
}
.mwu-thumbnailFilename-1c0b2a0 {
text-align: center;
font-size: 0.875rem;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: var(--previewWidth, 16rem);
}
}
@media (max-width: 768px) {
.mwu-thumbnailContainer-1c0b2a0 {
.mwu-thumbnailIcon-1c0b2a0,
.mwu-thumbnailVideoPlayIcon-1c0b2a0 {
font-size: 2.5rem;
}
}
}
@media (prefers-color-scheme: dark) {
.mwu-thumbnailIconWrapper-1c0b2a0,
.mwu-thumbnailPdfWrapper-1c0b2a0 {
background-color: #343a40;
}
.mwu-thumbnailInfo-1c0b2a0 {
background-color: transparent;
}
.mwu-thumbnailIcon-1c0b2a0 {
color: #9a9a9a;
}
}
@keyframes raiseUploadCompleteIcon {
0% {
top: 100%;
}
100% {
top: 50%;
}
}
@keyframes uploadProcessingScannerEffect {
0% {
top: -2.5ex;
}
50% {
top: calc(100% + 1.5ex);
}
100% {
top: -2.5ex;
}
}
.mwu-filesDropZone-c028848 {
width: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.mwu-dropZone-c028848 {
flex-grow: 1;
width: 100%;
display: flex;
flex-direction: column;
position: relative;
border-radius: var(--bs-border-radius);
transition: box-shadow 0.2s ease;
isolation: isolate;
&::before,
&[data-paste-shortcut]::after {
pointer-events: none;
opacity: 0;
transition:
opacity 0.2s ease,
transform 0.2s ease;
}
&::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background:
radial-gradient(
circle at top right,
rgba(var(--bs-primary-rgb), 0.18),
transparent 42%
),
linear-gradient(
135deg,
rgba(var(--bs-primary-rgb), 0.1),
rgba(var(--bs-info-rgb), 0.06)
);
transform: scale(0.985);
z-index: -1;
}
&[data-paste-shortcut]::after {
content: attr(data-paste-shortcut);
position: absolute;
top: 0.9rem;
inset-inline-end: 1rem;
max-width: calc(100% - 2rem);
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: rgba(var(--bs-body-color-rgb), 0.9);
color: var(--bs-body-bg);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.05em;
white-space: nowrap;
box-shadow: 0 0.5rem 1rem rgba(var(--bs-dark-rgb), 0.18);
transform: translateY(-0.35rem);
overflow: hidden;
text-overflow: ellipsis;
}
> * {
transition:
transform 0.2s ease,
filter 0.2s ease;
}
&[data-selected="true"] {
&::before,
&[data-paste-shortcut]::after {
opacity: 1;
transform: translateY(0);
}
}
}
.mwu-uploads-c028848 {
--preview-container-width: 7em;
display: grid;
grid-template-columns: repeat(
auto-fill,
minmax(var(--preview-container-width), 1fr)
);
gap: 2em;
width: 100%;
overflow: clip;
&:has(.mwu-uploader-c028848) {
margin-top: 1em;
}
.mwu-uploader-c028848 {
display: flex;
align-items: center;
justify-content: center;
position: relative;
--transition-duration: 0.3s;
.mwu-preview-c028848 {
width: 100%;
margin-top: 1.5em;
img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
svg[role="graphics-symbol"] {
width: 100%;
height: 100%;
}
}
.mwu-fileInfo-c028848 {
position: absolute;
top: 0;
font-weight: bold;
font-size: 66%;
text-align: center;
text-wrap: auto;
}
.progress {
--bs-progress-height: 1.75em;
--bs-progress-border-radius: calc(
var(--bs-progress-height) / 2
);
position: absolute;
top: 55%;
width: 75%;
transition: opacity var(--transition-duration) ease-in-out;
}
.mwu-uploadProgressFill-c028848 {
width: 0%;
}
.mwu-statusMessage-c028848 {
position: absolute;
display: none;
opacity: 0;
transition: opacity var(--transition-duration) ease-in-out;
}
&.Queued,
&.Pending,
&.Processing,
&.Completed,
&.Cancelled,
&.Error {
.mwu-statusMessage-c028848 {
display: block;
opacity: 0.8;
position: absolute;
top: 50%;
/* Centering idiom: pairs with the physical
`translate(-50%, -50%)` below. */
/* ast-grep-ignore: prefer-logical-inset */
left: 50%;
transform: translate(-50%, -50%);
}
.progress {
opacity: 0;
}
}
&.Processing,
&.Completed,
&.Cancelled {
.mwu-statusMessage-c028848 {
font-size: 300%;
}
.progress {
opacity: 0;
}
.mwu-actionButtons-c028848 {
display: none;
}
}
&.Processing {
overflow: visible;
.mwu-preview-c028848 {
position: relative;
cursor: progress;
svg[role="graphics-symbol"] {
opacity: 0.5;
}
&::after {
content: "";
position: absolute;
inset-inline-start: 0;
width: 100%;
height: 1.5ex;
background: var(--bs-primary);
border-radius: 0.5ex;
box-shadow:
0 0 1ex var(--bs-primary-text-emphasis),
0 0 4ex var(--bs-primary-text-emphasis),
0 0 8ex var(--bs-primary-text-emphasis);
animation: uploadProcessingScannerEffect 6s linear
infinite;
pointer-events: none;
}
}
.mwu-statusMessage-c028848 {
display: none !important;
}
}
&.Completed {
.mwu-statusMessage-c028848 {
color: var(--bs-success);
z-index: 3;
animation: raiseUploadCompleteIcon 0.3s ease-out forwards;
}
}
&.Cancelled {
.mwu-statusMessage-c028848 {
color: var(--bs-warning);
}
}
&.Error {
.mwu-preview-c028848 {
opacity: 0.5;
}
.mwu-statusMessage-c028848 {
color: var(--bs-danger);
font-size: 90%;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.mwu-actionButtons-c028848 {
opacity: 1;
}
}
.mwu-actionButtons-c028848 {
position: absolute;
top: 0;
inset-inline-end: 0;
z-index: 1;
opacity: 0;
transition: opacity var(--transition-duration) ease-in-out;
display: flex;
gap: 0.25em;
}
&:hover .mwu-actionButtons-c028848 {
opacity: 1;
}
}
}
}
.mwu-container-aaad542 {
width: 100%;
padding: 1.5rem;
border: 2px dashed var(--bs-border-color);
border-radius: var(--bs-border-radius);
background: var(--bs-tertiary-bg);
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
container-type: inline-size;
container-name: files-drop-zone;
transition:
border-width 0.2s ease,
border-color 0.2s ease,
background-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
[data-selected="true"] & {
border-color: var(--bs-primary);
background: var(--bs-primary-bg-subtle);
}
.mwu-backgroundIconContainer-aaad542 {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
.mwu-backgroundIcon-aaad542 {
width: clamp(5rem, 22cqi, 9rem);
height: clamp(5rem, 22cqi, 9rem);
opacity: 0.075;
color: var(--bs-body-color);
}
}
.mwu-textContainer-aaad542 {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.85rem;
max-width: 34rem;
.mwu-headline-aaad542 {
color: var(--bs-secondary-color);
font-size: 1rem;
font-weight: 600;
line-height: 1.45;
text-wrap: balance;
}
.mwu-actions-aaad542 {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.75rem 1rem;
color: var(--bs-secondary-color);
.mwu-selected-aaad542 {
display: none;
[data-selected="true"] & {
display: block;
}
}
}
}
@container files-drop-zone (width <= 28rem) {
.mwu-container-aaad542 {
min-height: 10.5rem;
padding-block: 2rem 1.25rem;
}
.mwu-headline-aaad542 {
font-size: 0.95rem;
}
.mwu-actions-aaad542 {
flex-direction: column;
gap: 0.65rem;
}
}
}
@keyframes mantiqFocusHighlight {
0% {
box-shadow:
0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0.95),
0 0 0.85rem 0.5rem rgba(var(--bs-primary-rgb), 0.6);
background-color: rgba(var(--bs-primary-rgb), 0.18);
}
100% {
box-shadow:
0 0 0 0.15rem rgba(var(--bs-primary-rgb), 0),
0 0 0.85rem 0.8rem rgba(var(--bs-primary-rgb), 0);
background-color: transparent;
}
}
/* The focus target itself, plus any descendant opting in with
`.mantiq-focus-emphasis`, pulse together so a deep link can call out both a
region and the precise control inside it. */
.mantiq-focus-highlight,
.mantiq-focus-highlight .mantiq-focus-emphasis {
animation: mantiqFocusHighlight 0.85s ease-out 3;
border-radius: var(--bs-border-radius, 0.375rem);
position: relative;
z-index: 1;
}
.mwu-editor-211bdca {
/* Preserve HTML source indentation and wrap long lines instead of scrolling
horizontally; each source line is its own block . */
white-space: pre-wrap;
word-break: break-word;
overflow-wrap: anywhere;
overflow-y: auto;
min-height: 18em;
max-height: 70vh;
font-size: 0.8125rem;
line-height: 1.55;
tab-size: 2;
.he-line {
min-height: 1.55em;
}
/* Syntax colours. The Bootstrap palette vars are stable hexes that read
acceptably on both light and dark themes. */
.he-text {
color: var(--bs-body-color);
}
.he-punct {
color: var(--bs-secondary-color);
}
.he-tag {
color: var(--bs-blue, #0d6efd);
font-weight: 600;
}
.he-attr {
color: var(--bs-purple, #6f42c1);
}
.he-string {
color: var(--bs-green, #198754);
}
.he-comment {
color: var(--bs-secondary-color);
font-style: italic;
}
.he-placeholder {
color: var(--bs-orange, #fd7e14);
font-weight: 700;
background: var(--bs-warning-bg-subtle);
border-radius: var(--bs-border-radius-sm);
padding-inline: 0.1em;
}
.he-cid {
color: var(--bs-teal, #20c997);
font-weight: 700;
}
}
.mwu-actionColumn-6c7aea4 {
width: 3rem;
padding: 0 !important;
}
.mwu-table-6c7aea4 {
table-layout: fixed;
width: 100%;
/* Overflow (and scroll, via the `.table-responsive` wrapper) instead of
crushing the fixed columns on mobile. */
min-width: 44rem;
thead th {
white-space: nowrap;
&:nth-child(1) {
width: auto;
}
&:nth-child(2) {
width: 8rem;
}
&:nth-child(3) {
width: 11rem;
}
&:nth-child(4) {
width: 10rem;
}
}
tbody td {
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* Ellipsis the file name in the flex name cell instead of letting it
overflow (flex items default to min-width: auto). `.d-flex` is the
global Bootstrap class, so keep it unscoped via :global(). */
& .d-flex {
min-width: 0;
}
& .d-flex > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* Hover-reveal three-dots button — match tree view styling */
tbody tr {
.mwu-actionsCell-6c7aea4 button {
opacity: 0;
transition: opacity 0.1s ease;
color: var(--bs-secondary);
background: transparent !important;
border: none !important;
padding: 0.25rem 0.5rem !important;
border-radius: 0.375rem;
&:hover {
color: var(--bs-body-color);
background: var(--bs-secondary-bg) !important;
}
}
/* Keep the trigger visible while its portaled menu is open — the
menu is not a row descendant, so row :hover ends inside it. */
&:hover .mwu-actionsCell-6c7aea4 button,
&.mwu-highlighted-6c7aea4 .mwu-actionsCell-6c7aea4 button,
.mwu-actionsCell-6c7aea4 button[aria-expanded="true"] {
opacity: 1;
}
}
& tbody tr.mwu-renamed-6c7aea4 > td {
animation: renameFlash 500ms ease-out;
}
& tbody tr.mwu-deleting-6c7aea4 {
animation: deleteSlideOut 300ms ease-out forwards;
pointer-events: none;
}
}
.mwu-secondaryInfo-6c7aea4 {
color: var(--bs-secondary);
font-size: 0.8125rem;
}
/* Highlighted file state - target td elements to override Bootstrap */
.mwu-table-6c7aea4 tbody tr.mwu-highlighted-6c7aea4 > td,
.mwu-table-6c7aea4 tbody tr.mwu-highlighted-6c7aea4:nth-of-type(odd) > td,
.mwu-table-6c7aea4 tbody tr.mwu-highlighted-6c7aea4:nth-of-type(even) > td {
background-color: rgba(255, 193, 7, 0.3) !important;
}
[data-bs-theme="dark"] .mwu-table-6c7aea4 tbody tr.mwu-highlighted-6c7aea4 > td,
[data-bs-theme="dark"] .mwu-table-6c7aea4 tbody tr.mwu-highlighted-6c7aea4:nth-of-type(odd) > td,
[data-bs-theme="dark"] .mwu-table-6c7aea4 tbody tr.mwu-highlighted-6c7aea4:nth-of-type(even) > td {
background-color: rgba(255, 193, 7, 0.4) !important;
}
/* Delete animation - slide out row */
@keyframes deleteSlideOut {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-50px);
}
}
/* Rename animation - info flash */
@keyframes renameFlash {
0% {
background-color: rgba(var(--bs-info-rgb), 0.4);
}
100% {
background-color: transparent;
}
}
/* Character Spinner */
@keyframes characterSpinnerRotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
.mwu-characterSpinner-a4874d2 {
display: inline-block;
animation: characterSpinnerRotation 2s infinite linear;
}
/* Text Skeleton */
.mwu-textPlaceholder-a4874d2 {
display: inline-block;
width: 8rem;
max-width: 100%;
height: 1em;
vertical-align: middle;
}
/* Horizontal Line */
@keyframes horizontalLineSlider {
0% {
inset-inline-end: 80%;
inset-inline-start: 1%;
}
5% {
inset-inline-start: 1%;
}
50% {
inset-inline-end: 1%;
inset-inline-start: 80%;
}
55% {
inset-inline-end: 1%;
}
100% {
inset-inline-end: 80%;
inset-inline-start: 1%;
}
}
.mwu-horizontalLine-a4874d2 {
width: 25%;
height: 6px;
background-color: var(--bs-secondary);
position: relative;
border-radius: 3px;
box-sizing: border-box;
overflow: hidden;
margin-inline: auto;
margin-top: var(--space-2, 0.5rem);
margin-bottom: var(--space-2, 0.5rem);
&::after {
border-radius: 3px;
content: "";
position: absolute;
background-color: var(--bs-light);
top: 1px;
bottom: 1px;
animation: horizontalLineSlider 2s linear infinite;
}
}
/* Pulsing Grid */
@keyframes pulsingGridAnimation {
0% {
opacity: 0.8;
transform: scale(1);
}
50% {
opacity: 0.35;
transform: scale(0.45);
}
100% {
opacity: 0.8;
transform: scale(1);
}
}
.mwu-pulsingGrid-a4874d2 {
display: block;
font-size: 0;
max-width: 108px;
width: 100%;
margin: auto;
aspect-ratio: 1;
&,
& > div {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
& > div {
display: inline-block;
float: none;
background-color: var(--bs-body-color);
border: none;
width: 15%; /* 16px / 108px */
height: 15%;
margin: 9%; /* 10px / 108px */
border-radius: 100%;
animation-name: pulsingGridAnimation;
animation-iteration-count: infinite;
}
& > div:nth-child(1) {
animation-duration: 0.65s;
animation-delay: 0.03s;
}
& > div:nth-child(2) {
animation-duration: 1.02s;
animation-delay: 0.09s;
}
& > div:nth-child(3) {
animation-duration: 1.06s;
animation-delay: -0.69s;
}
& > div:nth-child(4) {
animation-duration: 1.5s;
animation-delay: -0.41s;
}
& > div:nth-child(5) {
animation-duration: 1.6s;
animation-delay: 0.04s;
}
& > div:nth-child(6) {
animation-duration: 0.84s;
animation-delay: 0.07s;
}
& > div:nth-child(7) {
animation-duration: 0.68s;
animation-delay: -0.66s;
}
& > div:nth-child(8) {
animation-duration: 0.93s;
animation-delay: -0.76s;
}
& > div:nth-child(9) {
animation-duration: 1.24s;
animation-delay: -0.76s;
}
}
/* Orbit Spinner */
@keyframes orbitSpinner-orbit-one-animation {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
@keyframes orbitSpinner-orbit-two-animation {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
@keyframes orbitSpinner-orbit-three-animation {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
.mwu-orbitSpinner-a4874d2 {
display: flex;
justify-content: center;
align-content: center;
pointer-events: none;
transition-property: opacity;
transition-duration: 0.2s;
transition-timing-function: ease-out;
& .mwu-orbitSpinnerLoader-a4874d2,
& .mwu-orbitSpinnerLoader-a4874d2 * {
box-sizing: border-box;
}
& .mwu-orbitSpinnerLoader-a4874d2 {
display: block;
margin: auto;
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
perspective: 1454px;
& div {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border-radius: 50%;
}
/* The three orbits are one ring seen in perspective, spun by physical
rotateX/Y/Z. Their edges and offsets are rotational geometry, not
reading direction: mirroring a single arc under RTL would break the
ring while its siblings (border-top/-bottom) stayed put. */
& div:nth-child(1) {
/* ast-grep-ignore: prefer-logical-inset */
left: 0;
top: 0;
animation: orbitSpinner-orbit-one-animation 1200ms linear infinite;
border-bottom: 6px solid var(--bs-body-color);
}
& div:nth-child(2) {
/* ast-grep-ignore: prefer-logical-inset */
right: 0;
top: 0;
animation: orbitSpinner-orbit-two-animation 1200ms linear infinite;
/* ast-grep-ignore: prefer-logical-inline-properties */
border-right: 6px solid var(--bs-body-color);
}
& div:nth-child(3) {
/* ast-grep-ignore: prefer-logical-inset */
right: 0;
bottom: 0;
animation: orbitSpinner-orbit-three-animation 1200ms linear infinite;
border-top: 6px solid var(--bs-body-color);
}
}
}
.mwu-mapContainer-9e9b456 {
position: relative;
overflow: hidden;
/* A query container so the on-map controls can respond to the MAP's own
width (not the viewport): a narrow map panel drops the top-right controls
to a row below the search bar. `inline-size` only — block-size containment
would feed the canvas height loop the note below guards against. */
container-type: inline-size;
/* Contain the settings panel (and its backdrop — Bootstrap appends it to
the offcanvas' parent) within the map instead of the viewport:
Bootstrap's `position: fixed` would slide it over the whole page. */
.offcanvas {
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
height: auto !important;
max-height: 100% !important;
}
.offcanvas-end {
inset-inline-end: 0 !important;
}
.offcanvas-backdrop {
position: absolute !important;
inset: 0 !important;
}
/* Wheel containment (`contain_map_wheel`) exempts scrollable overlay
regions from `preventDefault`; containing their overscroll keeps an
exempted scroll from chaining to the page at its end — for every
overlay, including consumer-provided ones. `overscroll-behavior` only
affects scroll containers and is not inherited, hence the universal
descendant rule. */
* {
overscroll-behavior: contain;
}
}
/* The Cesium canvas mounts here. It MUST be sized by its parent, not by its
own content: Cesium resizes its