mirror of
https://github.com/jareika/zoom-map.git
synced 2026-07-22 17:41:59 +00:00
1595 lines
No EOL
30 KiB
CSS
1595 lines
No EOL
30 KiB
CSS
/* Settings: optional image-icon preview column */
|
|
.zoommap-settings.zoommap-settings--imgpreview .zm-icons-grid-head--img,
|
|
.zoommap-settings.zoommap-settings--imgpreview .zm-icons-grid--img {
|
|
grid-template-columns: 28px 12ch 36px minmax(220px, 1fr) 7ch 7ch 7ch 7ch 36px;
|
|
}
|
|
|
|
.zoommap-dice-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.zoommap-dice-row {
|
|
display: grid;
|
|
grid-template-columns: 8ch 10ch auto;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.zoommap-dice-row input[type="number"] {
|
|
width: 8ch;
|
|
}
|
|
|
|
.zoommap-settings.zoommap-settings--imgpreview .zoommap-settings__icon-preview--img {
|
|
width: 24px;
|
|
height: 24px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
/* Path field smaller when preview is enabled (most people use the picker anyway) */
|
|
.zoommap-settings.zoommap-settings--imgpreview .zoommap-settings__icon-path-input {
|
|
width: 24ch;
|
|
min-width: 12ch;
|
|
}
|
|
|
|
/* =======================
|
|
Wider modals (collections, travel rules, etc.)
|
|
======================= */
|
|
.modal.zoommap-modal--wide {
|
|
width: min(1200px, 92vw);
|
|
max-width: 92vw;
|
|
}
|
|
.modal.zoommap-modal--wide .modal-content {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Travel rules manager row (packs) */
|
|
.zoommap-travel-pack-row {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
gap: 10px;
|
|
align-items: center;
|
|
padding: 6px 0;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.zoommap-travel-pack-enabled {
|
|
margin: 0 6px 0 0;
|
|
}
|
|
|
|
.zoommap-travel-pack-actions {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
justify-content: flex-end;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Smaller "Export" button in manager */
|
|
button.zm-btn-sm {
|
|
padding: 2px 8px;
|
|
font-size: 12px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
|
|
/* Travel pack editor: compact unit inputs (only inside this modal) */
|
|
.modal.zoommap-modal--travel .zoommap-custom-unit-row {
|
|
grid-template-columns: 20ch 5ch 9ch auto;
|
|
gap: 8px;
|
|
}
|
|
|
|
.modal.zoommap-modal--travel .zoommap-travel-perday-row {
|
|
display: grid;
|
|
grid-template-columns: 20ch 9ch 9ch auto;
|
|
gap: 8px;
|
|
align-items: center;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.modal.zoommap-modal--travel .zoommap-custom-unit-row .zm-cu-abbr {
|
|
width: 5ch;
|
|
}
|
|
|
|
.modal.zoommap-modal--travel .zoommap-custom-unit-row .zm-cu-factor {
|
|
width: 6ch;
|
|
}
|
|
|
|
/* Travel presets grid in travel modal: make unit/time-unit tighter */
|
|
.modal.zoommap-modal--travel .zm-travel-grid-head,
|
|
.modal.zoommap-modal--travel .zm-travel-grid {
|
|
display: grid;
|
|
grid-template-columns: 18ch 6ch 7ch 6ch 5ch 64px;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
.modal.zoommap-modal--travel input.zm-travel-name { width: 18ch; }
|
|
.modal.zoommap-modal--travel input.zm-travel-num { width: 6ch; }
|
|
.modal.zoommap-modal--travel select.zm-travel-unit { width: 7ch; }
|
|
.modal.zoommap-modal--travel input.zm-travel-timeunit { width: 5ch; }
|
|
|
|
.modal.zoommap-modal--travel .zm-travel-grid-head span {
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.modal.zoommap-modal--travel .zm-travel-grid input,
|
|
.modal.zoommap-modal--travel .zm-travel-grid select {
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Root and viewport */
|
|
.zm-root {
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
width: 100%;
|
|
height: 480px;
|
|
background: var(--background-secondary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
overflow: visible;
|
|
}
|
|
|
|
/* Responsive mode: height is derived from the aspect ratio set inline */
|
|
.zm-root.zm-root--responsive {
|
|
height: auto;
|
|
}
|
|
|
|
.zm-root,
|
|
.zm-viewport,
|
|
.zm-world {
|
|
-webkit-touch-callout: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.zm-viewport {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: visible;
|
|
touch-action: none;
|
|
background: var(--background-primary);
|
|
contain: layout size style;
|
|
overscroll-behavior: contain;
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
/* Canvas layer (optional render mode) */
|
|
.zm-canvas {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none; /* Events are handled by the marker layer */
|
|
image-rendering: auto;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* Hide DOM image/overlays in canvas mode */
|
|
.zm-root.zm-root--canvas-mode .zm-image,
|
|
.zm-root.zm-root--canvas-mode .zm-overlays {
|
|
display: none;
|
|
}
|
|
|
|
/* Native resize (browser) */
|
|
.zm-root.resizable-native {
|
|
resize: both;
|
|
min-width: 220px;
|
|
min-height: 220px;
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Custom resize handles */
|
|
.zm-grip {
|
|
position: absolute;
|
|
width: 16px;
|
|
height: 16px;
|
|
bottom: 6px;
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
box-shadow: var(--shadow-s);
|
|
display: none;
|
|
cursor: nwse-resize;
|
|
z-index: 80;
|
|
}
|
|
|
|
.zm-grip-right {
|
|
right: 6px;
|
|
}
|
|
|
|
.zm-grip-left {
|
|
left: 6px;
|
|
cursor: nesw-resize;
|
|
}
|
|
|
|
.zm-root.resizable-custom .zm-grip {
|
|
display: block;
|
|
}
|
|
|
|
/* Alignment / text wrap */
|
|
.zm-align-center {
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.zm-float-left {
|
|
float: left;
|
|
margin: 0.5rem 1rem 1rem 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.zm-float-right {
|
|
float: right;
|
|
margin: 0.5rem 0 1rem 1rem;
|
|
max-width: 100%;
|
|
}
|
|
|
|
@media (max-width: 820px) {
|
|
.zm-float-left,
|
|
.zm-float-right {
|
|
float: none;
|
|
margin: 0 0 1rem 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.zm-clip {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
border-radius: 6px;
|
|
contain: layout paint size style;
|
|
z-index: 0;
|
|
}
|
|
|
|
.zm-hud-clip {
|
|
position: absolute;
|
|
inset: 0;
|
|
overflow: hidden;
|
|
border-radius: 6px;
|
|
pointer-events: none;
|
|
z-index: 60; /* above frame */
|
|
}
|
|
|
|
.zm-root.zm-root--framepad {
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
/* Keep a subtle border on the actual interactive viewport area. */
|
|
.zm-root.zm-root--framepad .zm-viewport {
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
|
|
.zm-frame-layer {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 30; /* above map content, below HUD */
|
|
}
|
|
|
|
.workspace-leaf-content .zm-root .zm-viewport-frame,
|
|
.markdown-rendered .zm-root .zm-viewport-frame,
|
|
.zm-root .zm-viewport-frame {
|
|
position: absolute;
|
|
inset: 0;
|
|
inline-size: 100%;
|
|
height: 100%;
|
|
object-fit: fill;
|
|
object-position: center;
|
|
pointer-events: none;
|
|
user-select: none;
|
|
-webkit-user-drag: none;
|
|
z-index: 30; /* above map content, below HUD */
|
|
transform: translateZ(0);
|
|
max-width: none;
|
|
max-height: none;
|
|
max-inline-size: none;
|
|
max-block-size: none;
|
|
display: block;
|
|
}
|
|
|
|
.zm-world {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
transform-origin: 0 0;
|
|
will-change: transform;
|
|
transform-style: flat;
|
|
}
|
|
|
|
.zm-image {
|
|
display: block;
|
|
user-select: none;
|
|
-webkit-user-drag: none;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.zm-world,
|
|
.zm-image,
|
|
.zm-overlay-image {
|
|
backface-visibility: hidden;
|
|
-webkit-backface-visibility: hidden;
|
|
transform: translateZ(0);
|
|
}
|
|
|
|
/* SVG base image quality mode */
|
|
.zm-root--svg-base .zm-world {
|
|
will-change: auto;
|
|
}
|
|
|
|
.zm-root--svg-base .zm-image,
|
|
.zm-root--svg-base .zm-overlay-image {
|
|
transform: none; /* override translateZ(0) */
|
|
backface-visibility: visible;
|
|
-webkit-backface-visibility: visible;
|
|
}
|
|
|
|
/* Overlays and markers */
|
|
.zm-overlays {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 0;
|
|
height: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.zm-overlay-image {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: fill;
|
|
image-rendering: auto;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Hide overlay via class (instead of inline style) */
|
|
.zm-overlay-image.zm-overlay-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.zm-markers {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.zm-marker {
|
|
position: absolute;
|
|
transform-origin: 0 0;
|
|
cursor: pointer;
|
|
touch-action: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.zm-marker--dragging {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.zm-marker--locked {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.zm-marker--player-hidden {
|
|
opacity: 0.35;
|
|
filter: grayscale(1);
|
|
}
|
|
|
|
.zm-hud-markers {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 15;
|
|
}
|
|
|
|
.zm-hud-marker {
|
|
position: absolute;
|
|
transform-origin: 0 0;
|
|
pointer-events: auto;
|
|
cursor: pointer;
|
|
touch-action: none;
|
|
user-select: none;
|
|
z-index: 20;
|
|
}
|
|
|
|
.zm-marker-inv {
|
|
transform-origin: 0 0;
|
|
} /* scale(1/s) */
|
|
|
|
.zm-marker-anchor {
|
|
transform-origin: 0 0;
|
|
} /* translate(-anchorX, -anchorY) */
|
|
|
|
.zm-marker-icon {
|
|
image-rendering: auto;
|
|
user-select: none;
|
|
-webkit-user-drag: none;
|
|
transform-origin: 50% 50%;
|
|
height: auto; /* keep previous behavior without inline styles */
|
|
pointer-events: none; /* important: prevent OS/Obsidian image context menu */
|
|
}
|
|
|
|
/* Hidden helper (avoid inline style.display writes) */
|
|
.zm-hidden {
|
|
display: none;
|
|
}
|
|
|
|
body.zm-global-hover-popover-size {
|
|
--popover-width: var(--zm-hover-popover-max-width, 360px);
|
|
--popover-height: var(--zm-hover-popover-max-height, 260px);
|
|
--popover-max-height: var(--zm-hover-popover-max-height, 260px);
|
|
}
|
|
|
|
body.zm-global-hover-popover-size .popover.hover-popover,
|
|
body.zm-global-hover-popover-size .hover-popover {
|
|
--popover-width: min(var(--zm-hover-popover-max-width, 360px), 92vw);
|
|
width: var(--popover-width);
|
|
max-width: var(--popover-width);
|
|
--popover-max-height: min(var(--zm-hover-popover-max-height, 260px), 92vh);
|
|
max-height: var(--popover-max-height);
|
|
height: auto;
|
|
overflow: hidden;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
body.zm-global-hover-popover-size .popover.hover-popover .hover-popover-content,
|
|
body.zm-global-hover-popover-size .hover-popover .hover-popover-content,
|
|
body.zm-global-hover-popover-size .popover.hover-popover .popover-content,
|
|
body.zm-global-hover-popover-size .hover-popover .popover-content {
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 0;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
overflow: auto;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
body.zm-global-hover-popover-size .popover.hover-popover .markdown-preview-view,
|
|
body.zm-global-hover-popover-size .hover-popover .markdown-preview-view,
|
|
body.zm-global-hover-popover-size .popover.hover-popover .markdown-preview-section,
|
|
body.zm-global-hover-popover-size .hover-popover .markdown-preview-section {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* Map grid overlay */
|
|
.zm-mapgrid {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 0;
|
|
height: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.zm-mapgrid__svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: visible;
|
|
}
|
|
|
|
.zm-mapgrid__path {
|
|
fill: none;
|
|
vector-effect: non-scaling-stroke;
|
|
}
|
|
|
|
/* Tooltip */
|
|
.zm-tooltip {
|
|
position: absolute;
|
|
z-index: 9999;
|
|
max-width: 360px;
|
|
max-height: 260px;
|
|
overflow: auto;
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
box-shadow: var(--shadow-s);
|
|
border-radius: 6px;
|
|
padding: 8px;
|
|
pointer-events: auto;
|
|
display: none;
|
|
}
|
|
|
|
.zm-tooltip.zm-tooltip-visible {
|
|
display: block;
|
|
}
|
|
|
|
.zm-tooltip__title {
|
|
font-weight: 600;
|
|
margin-bottom: 6px;
|
|
}
|
|
.zm-tooltip__body {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
/* Measure overlay (ruler) */
|
|
.zm-measure {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 0;
|
|
height: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.zm-measure__svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: visible;
|
|
}
|
|
|
|
/* Uses plugin variables with fallbacks */
|
|
.zm-measure__path {
|
|
stroke: var(--zm-measure-color, var(--text-accent));
|
|
stroke-width: var(--zm-measure-width, 2px);
|
|
fill: none;
|
|
vector-effect: non-scaling-stroke;
|
|
}
|
|
|
|
.zm-measure__dash {
|
|
stroke-dasharray: 6 6;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Dots inherit line color; outline uses theme background */
|
|
.zm-measure__dot {
|
|
fill: var(--zm-measure-color, var(--text-accent));
|
|
stroke: var(--background-primary);
|
|
stroke-width: var(--zm-measure-width, 2px);
|
|
vector-effect: non-scaling-stroke;
|
|
}
|
|
|
|
/* Measure HUD */
|
|
.zm-measure-hud {
|
|
position: absolute;
|
|
z-index: 6;
|
|
left: 8px;
|
|
top: 8px;
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
padding: 4px 8px;
|
|
box-shadow: var(--shadow-s);
|
|
font-size: 12px;
|
|
white-space: pre-line;
|
|
pointer-events: none;
|
|
display: none;
|
|
}
|
|
|
|
.zm-draw-edit {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
z-index: 70;
|
|
}
|
|
|
|
.zm-draw-handle {
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 14px;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 999px;
|
|
background: var(--interactive-accent, var(--text-accent));
|
|
border: 2px solid var(--background-primary);
|
|
box-shadow: var(--shadow-s);
|
|
pointer-events: auto;
|
|
cursor: grab;
|
|
}
|
|
|
|
.zm-draw-handle.zm-draw-handle--active {
|
|
cursor: grabbing;
|
|
background: var(--text-error, #d23c3c);
|
|
}
|
|
|
|
.zm-draw-handle--add {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 4px;
|
|
background: var(--color-green, #2ea043);
|
|
}
|
|
|
|
.zm-draw-handle--radius {
|
|
background: var(--text-accent, #6aa9ff);
|
|
}
|
|
|
|
.zm-draw-handle--center {
|
|
background: var(--interactive-accent, var(--text-accent));
|
|
}
|
|
|
|
/* Zoom HUD */
|
|
.zm-zoom-hud {
|
|
position: absolute;
|
|
z-index: 6;
|
|
right: 8px;
|
|
top: 8px;
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
padding: 2px 6px;
|
|
box-shadow: var(--shadow-s);
|
|
font-size: 11px;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 120ms ease-out;
|
|
}
|
|
|
|
.zm-zoom-hud-visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.zm-measure-hud.zm-measure-hud-visible {
|
|
display: block;
|
|
}
|
|
|
|
.zm-zoom-controls {
|
|
position: absolute;
|
|
z-index: 6;
|
|
right: 8px;
|
|
top: 32px;
|
|
display: flex;
|
|
gap: 6px;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.zm-zoom-controls.zm-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.zm-zoom-btn {
|
|
width: 28px;
|
|
height: 28px;
|
|
padding: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 6px;
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
box-shadow: var(--shadow-s);
|
|
font-size: 16px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.zm-zoom-btn:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
/* Draw overlay (shapes) */
|
|
.zm-draw {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 0;
|
|
height: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.zm-draw-hitboxes {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 0;
|
|
height: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.zm-draw-hitbox {
|
|
position: absolute;
|
|
pointer-events: auto;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.zm-draw-hitbox--circle {
|
|
border-radius: 999px;
|
|
}
|
|
|
|
.zm-draw__svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: visible;
|
|
}
|
|
|
|
.zm-draw__shape {
|
|
vector-effect: non-scaling-stroke;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.zm-draw__shape--interactive {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Context menu */
|
|
.zm-menu,
|
|
.zm-submenu {
|
|
position: fixed;
|
|
z-index: 10000;
|
|
min-width: 200px;
|
|
max-width: 320px;
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
box-shadow: var(--shadow-l);
|
|
padding: 4px;
|
|
user-select: none;
|
|
max-height: calc(100vh - 24px);
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.zm-submenu {
|
|
z-index: 10001;
|
|
}
|
|
|
|
.zm-menu__sep {
|
|
height: 1px;
|
|
margin: 4px;
|
|
background: var(--background-modifier-border);
|
|
}
|
|
|
|
.zm-menu__item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px 8px;
|
|
border-radius: 4px;
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.zm-menu__item:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
/* Non-interactive info rows in the menu (e.g. Distance line) */
|
|
.zm-menu__item.zm-menu__item--info {
|
|
color: var(--text-muted);
|
|
cursor: default;
|
|
}
|
|
|
|
.zm-menu__item.zm-menu__item--info:hover {
|
|
background: transparent;
|
|
}
|
|
|
|
.zm-menu__label {
|
|
flex: 1;
|
|
white-space: nowrap;
|
|
text-align: left;
|
|
}
|
|
|
|
.zm-menu__right {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.zm-menu__icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
object-fit: contain;
|
|
transform-origin: 50% 50%;
|
|
}
|
|
|
|
.zm-menu__check {
|
|
width: 18px;
|
|
height: 18px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--text-accent);
|
|
font-size: 16px;
|
|
}
|
|
|
|
.zm-menu__arrow {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* Settings grids */
|
|
.zoommap-settings .zm-grid {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.zoommap-settings .zm-icons-grid-head,
|
|
.zoommap-settings .zm-presets-grid-head {
|
|
display: grid;
|
|
gap: 8px;
|
|
align-items: end;
|
|
}
|
|
|
|
.zoommap-settings .zm-icons-grid-head span,
|
|
.zoommap-settings .zm-presets-grid-head span {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.zoommap-settings .zm-icons-grid-head {
|
|
grid-template-columns: 28px 12ch minmax(220px, 1fr) 7ch 7ch 7ch 7ch 36px;
|
|
width: 100%;
|
|
}
|
|
|
|
.zoommap-settings .zm-icons-grid {
|
|
display: grid;
|
|
grid-template-columns: 28px 12ch minmax(220px, 1fr) 7ch 7ch 7ch 7ch 36px;
|
|
gap: 8px;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.zoommap-settings input.zm-num {
|
|
width: 7ch;
|
|
}
|
|
|
|
.zoommap-settings input.zm-name {
|
|
width: 12ch;
|
|
}
|
|
|
|
.zoommap-settings .zm-path-wrap {
|
|
display: flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
}
|
|
|
|
.zoommap-settings .zm-icons-grid-head span:last-child {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.zoommap-settings .zm-icohead {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.zoommap-settings .zm-presets-grid-head {
|
|
grid-template-columns: 12ch 16ch 14ch 8ch minmax(16ch, 1fr) 36px;
|
|
width: 100%;
|
|
}
|
|
|
|
.zoommap-settings .zm-presets-grid {
|
|
display: grid;
|
|
grid-template-columns: 12ch 16ch 14ch 8ch minmax(16ch, 1fr) 36px;
|
|
gap: 8px;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.zoommap-settings input.zm-link {
|
|
width: 24ch;
|
|
}
|
|
|
|
.zoommap-settings .zm-row {
|
|
display: grid;
|
|
grid-column: 1 / -1;
|
|
grid-template-columns: inherit;
|
|
gap: inherit;
|
|
align-items: inherit;
|
|
width: 100%;
|
|
}
|
|
|
|
.zoommap-settings .zm-travel-grid-head {
|
|
display: grid;
|
|
gap: 8px;
|
|
align-items: end;
|
|
grid-template-columns: 14ch 9ch 18ch 9ch 14ch 36px;
|
|
width: 100%;
|
|
}
|
|
|
|
.zoommap-settings .zm-travel-grid {
|
|
display: grid;
|
|
gap: 8px;
|
|
align-items: center;
|
|
grid-template-columns: 14ch 9ch 18ch 9ch 14ch 36px;
|
|
width: 100%;
|
|
}
|
|
|
|
.zoommap-settings input.zm-travel-num { width: 9ch; }
|
|
.zoommap-settings input.zm-travel-name { width: 14ch; }
|
|
.zoommap-settings input.zm-travel-timeunit { width: 14ch; }
|
|
.zoommap-settings select.zm-travel-unit { width: 18ch; }
|
|
|
|
/* Stickers grid (settings) */
|
|
.zoommap-settings .zm-stickers-grid-head {
|
|
display: grid;
|
|
gap: 8px;
|
|
align-items: end;
|
|
grid-template-columns: 12ch minmax(240px, 1fr) 8ch 14ch 36px;
|
|
width: 100%;
|
|
}
|
|
|
|
.zoommap-settings .zm-stickers-grid {
|
|
display: grid;
|
|
grid-template-columns: 12ch minmax(240px, 1fr) 8ch 14ch 36px;
|
|
gap: 8px;
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.zoommap-settings .zm-stickers-grid-head span:last-child {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.zoommap-settings .zm-icon-btn {
|
|
width: 36px;
|
|
height: 28px;
|
|
padding: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
flex: 0 0 36px;
|
|
}
|
|
|
|
.zoommap-settings .zm-icon-btn svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
display: block;
|
|
}
|
|
|
|
body.is-mobile .zoommap-settings .zm-icon-btn,
|
|
body.is-phone .zoommap-settings .zm-icon-btn,
|
|
body.is-tablet .zoommap-settings .zm-icon-btn {
|
|
width: 40px;
|
|
height: 34px;
|
|
}
|
|
|
|
body.is-mobile .zoommap-settings .zm-icon-btn svg,
|
|
body.is-phone .zoommap-settings .zm-icon-btn > svg,
|
|
body.is-tablet .zoommap-settings .zm-icon-btn > svg {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
/* Generic modal layouts (used in editor & other modals) */
|
|
.zoommap-modal-preview {
|
|
margin-top: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.zoommap-modal-footer {
|
|
display: flex;
|
|
gap: 8px;
|
|
justify-content: flex-end;
|
|
margin-top: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
/* Link autocomplete in marker editor + settings */
|
|
.zoommap-link-input-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.zoommap-link-suggestions {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 100%;
|
|
z-index: 10000;
|
|
max-height: 220px;
|
|
overflow: auto;
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 4px;
|
|
box-shadow: var(--shadow-s);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.zoommap-link-suggestions.is-hidden {
|
|
display: none;
|
|
}
|
|
|
|
.zoommap-link-suggestion-item {
|
|
padding: 4px 6px;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
background: var(--background-primary);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
/* Hover: slightly highlighted */
|
|
.zoommap-link-suggestion-item:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
/* Keyboard selection: clear highlight bar */
|
|
.zoommap-link-suggestion-item.is-selected {
|
|
background: var(--interactive-accent);
|
|
color: var(--text-on-accent, #ffffff);
|
|
}
|
|
|
|
/* Settings: collections list rows + actions */
|
|
.zoommap-collections-row {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto auto;
|
|
gap: 8px;
|
|
align-items: center;
|
|
padding: 6px 0;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
.zoommap-collections-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* Collections editor modals */
|
|
.zoommap-collection-base-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin: 4px 0;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
padding: 4px 6px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.zoommap-collection-base-path {
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.zoommap-collection-pin-hint {
|
|
margin-bottom: 6px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.zoommap-muted {
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.zoommap-collection-pin-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 8px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
@media (max-width: 980px) {
|
|
.zoommap-collection-pin-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
@media (max-width: 640px) {
|
|
.zoommap-collection-pin-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
.zoommap-collection-pin-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 6px;
|
|
border: 1px solid var(--background-modifier-border);
|
|
border-radius: 6px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.zoommap-collection-pin-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
object-fit: contain;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.zoommap-collection-pin-label {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
white-space: normal;
|
|
word-break: break-word;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.zoommap-collection-fav-row {
|
|
display: grid;
|
|
grid-template-columns: 14ch 12ch 12ch 8ch minmax(18ch, 1fr) auto;
|
|
gap: 6px;
|
|
align-items: center;
|
|
margin: 6px 0;
|
|
}
|
|
|
|
.zoommap-collection-sticker-row {
|
|
display: grid;
|
|
grid-template-columns: 14ch minmax(20ch, 1fr) 8ch 12ch auto;
|
|
gap: 6px;
|
|
align-items: center;
|
|
margin: 6px 0;
|
|
}
|
|
|
|
/* Cursor helper classes on body */
|
|
body.zm-cursor-grabbing {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
body.zm-cursor-resize-nwse {
|
|
cursor: nwse-resize;
|
|
}
|
|
|
|
body.zm-cursor-resize-nesw {
|
|
cursor: nesw-resize;
|
|
}
|
|
|
|
/* Text layer move mode */
|
|
.zm-text-hitbox.zm-text-hitbox--move {
|
|
cursor: grab;
|
|
}
|
|
.zm-text-hitbox.zm-text-hitbox--move.zm-text-hitbox--dragging {
|
|
cursor: grabbing;
|
|
}
|
|
body.zm-cursor-move-grabbing {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
/* Always-visible marker label (tooltip caption) */
|
|
.zm-marker-label {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
transform-origin: 0 0;
|
|
pointer-events: none;
|
|
z-index: 25;
|
|
|
|
max-width: 220px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
|
|
font-size: 12px;
|
|
line-height: 1.2;
|
|
padding: 2px 6px;
|
|
border-radius: 6px;
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
box-shadow: var(--shadow-s);
|
|
}
|
|
|
|
/* Font Awesome picker (settings) */
|
|
.zoommap-fa-picker {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.zoommap-fa-picker-search input {
|
|
width: 100%;
|
|
}
|
|
|
|
.zoommap-fa-picker-list {
|
|
max-height: 340px;
|
|
overflow: auto;
|
|
padding: 6px;
|
|
border-radius: 6px;
|
|
background: var(--background-secondary-alt, var(--background-secondary));
|
|
border: 1px solid var(--background-modifier-border);
|
|
}
|
|
|
|
/* In dark theme, slightly lighten the list background to improve SVG contrast */
|
|
.theme-dark .zoommap-fa-picker-list {
|
|
background: color-mix(
|
|
in srgb,
|
|
var(--background-secondary-alt, var(--background-secondary)) 70%,
|
|
var(--text-normal) 30%
|
|
);
|
|
}
|
|
|
|
/* Grid of SVG files */
|
|
.zoommap-fa-picker-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
|
gap: 6px;
|
|
}
|
|
|
|
/* Each SVG cell */
|
|
.zoommap-fa-picker-cell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
background: var(--background-primary);
|
|
border: 1px solid var(--background-modifier-border);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.zoommap-fa-picker-cell:hover {
|
|
background: var(--background-modifier-hover);
|
|
}
|
|
|
|
.theme-dark .zoommap-fa-picker-cell {
|
|
background: color-mix(
|
|
in srgb,
|
|
var(--background-primary) 65%,
|
|
var(--text-normal) 35%
|
|
);
|
|
}
|
|
|
|
.zoommap-fa-picker-cell.is-selected {
|
|
border-color: var(--interactive-accent);
|
|
box-shadow: 0 0 0 1px var(--interactive-accent);
|
|
}
|
|
|
|
.zoommap-fa-picker-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.zoommap-fa-picker-label {
|
|
font-size: 11px;
|
|
text-align: center;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.zoommap-fa-picker-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* Settings: Review-bot CSS extractions */
|
|
.zoommap-custom-unit-row {
|
|
display: grid;
|
|
grid-template-columns: 1.5fr 1fr 1fr auto;
|
|
gap: 8px;
|
|
align-items: center;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.zoommap-custom-unit-add-button {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.zoommap-collections-hint {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.zoommap-collections-name {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.zoommap-collections-meta {
|
|
font-size: 12px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.zoommap-info-icon {
|
|
margin-right: 6px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: help;
|
|
}
|
|
|
|
.zoommap-settings__preview-cell {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex-wrap: nowrap;
|
|
min-width: 0;
|
|
}
|
|
|
|
.zoommap-settings__preview-cell input {
|
|
min-width: 0;
|
|
}
|
|
|
|
.zoommap-settings__icon-preview {
|
|
width: 24px;
|
|
height: 24px;
|
|
object-fit: contain;
|
|
transform-origin: 50% 50%;
|
|
}
|
|
|
|
.zoommap-settings__color-input {
|
|
width: 8ch;
|
|
}
|
|
|
|
.zoommap-settings__color-picker {
|
|
width: 32px;
|
|
padding: 0;
|
|
}
|
|
|
|
.zoommap-settings__link-input--small {
|
|
width: 8ch;
|
|
min-width: 0;
|
|
}
|
|
|
|
.zoommap-settings__link-input--medium {
|
|
width: 14ch;
|
|
min-width: 0;
|
|
}
|
|
|
|
.zoommap-settings__icon-collections-toggle {
|
|
justify-self: center;
|
|
}
|
|
|
|
.zm-draw__label {
|
|
font-size: 12px;
|
|
paint-order: stroke;
|
|
stroke: var(--background-primary);
|
|
stroke-width: 3px;
|
|
}
|
|
|
|
.zoommap-settings__icon-path-input {
|
|
width: 50%;
|
|
}
|
|
|
|
.zoommap-drawing-editor__label-input {
|
|
width: 100%;
|
|
}
|
|
|
|
.zoommap-drawing-editor__section-heading {
|
|
margin-top: 12px;
|
|
font-weight: 600;
|
|
border-bottom: 1px solid var(--background-modifier-border);
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
.zoommap-drawing-editor__color-text {
|
|
width: 10ch;
|
|
}
|
|
|
|
.zoommap-drawing-editor__color-picker {
|
|
width: 32px;
|
|
height: 24px;
|
|
margin-left: 6px;
|
|
}
|
|
|
|
.zoommap-drawing-editor__num-input {
|
|
width: 8ch;
|
|
}
|
|
|
|
.zoommap-pin-size-info {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.zoommap-pin-size-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.zoommap-pin-size-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.zoommap-pin-size-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.zoommap-pin-size-key {
|
|
min-width: 0;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.zoommap-pin-size-base {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
.zoommap-pin-size-input {
|
|
width: 7ch;
|
|
}
|
|
|
|
.zoommap-pin-size-label {
|
|
font-size: 11px;
|
|
color: var(--text-muted);
|
|
}
|
|
|
|
/* View editor modal */
|
|
.zoommap-view-editor {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.zoommap-view-editor h2 {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.zoommap-view-editor h3 {
|
|
margin-top: 10px;
|
|
margin-bottom: 4px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.zoommap-view-editor-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.zoommap-view-editor-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
align-items: center;
|
|
}
|
|
|
|
.zoommap-view-editor-input {
|
|
flex: 1 1 160px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.zoommap-view-editor-input-path {
|
|
flex: 2 1 220px;
|
|
}
|
|
|
|
.zoommap-view-editor-input-name {
|
|
flex: 1 1 140px;
|
|
}
|
|
|
|
.zoommap-view-editor-button {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.zoommap-view-editor-button-delete {
|
|
padding: 0 6px;
|
|
}
|
|
|
|
.zoommap-view-editor-checkbox-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.zoommap-view-editor-input--short {
|
|
width: 12ch;
|
|
max-width: 8ch;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
/* =======================
|
|
Text layers (character sheets)
|
|
======================= */
|
|
|
|
.zm-text {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 0;
|
|
height: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.zm-text__svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: visible;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Hitboxes for selecting a text layer (invisible) */
|
|
.zm-text-hitboxes {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 0;
|
|
height: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.zm-text-hitbox {
|
|
position: absolute;
|
|
pointer-events: auto;
|
|
background: transparent;
|
|
}
|
|
|
|
|
|
/* During measuring / calibration, text hitboxes must not intercept clicks. */
|
|
.zm-text-hitboxes.zm-text-hitboxes--passive .zm-text-hitbox {
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Guides (only when showGuides=true or during drawing) */
|
|
.zm-text-guide-rect {
|
|
fill: none;
|
|
stroke: var(--text-muted);
|
|
stroke-width: 1px;
|
|
stroke-dasharray: 4 4;
|
|
vector-effect: non-scaling-stroke;
|
|
opacity: 0.65;
|
|
}
|
|
|
|
.zm-text-guide-line {
|
|
stroke: var(--text-muted);
|
|
stroke-width: 1.5px;
|
|
vector-effect: non-scaling-stroke;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.zm-text-guide-draft {
|
|
stroke: var(--text-muted);
|
|
stroke-width: 2.5px;
|
|
vector-effect: non-scaling-stroke;
|
|
opacity: 0.95;
|
|
}
|
|
|
|
.zm-text-guide--active.zm-text-guide-rect {
|
|
stroke: var(--text-error, #d23c3c);
|
|
stroke-width: 2px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.zm-text-guide--active.zm-text-guide-line {
|
|
stroke: var(--text-error, #d23c3c);
|
|
stroke-width: 1.8px;
|
|
opacity: 0.95;
|
|
}
|
|
|
|
.zm-text-guide--active.zm-text-guide-draft {
|
|
stroke: var(--text-error, #d23c3c);
|
|
stroke-width: 1.8px;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Inline editor (inputs positioned on baselines) */
|
|
.zm-text-edit {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 0;
|
|
height: 0;
|
|
pointer-events: none;
|
|
z-index: 50;
|
|
}
|
|
|
|
.zm-text-line {
|
|
position: absolute;
|
|
transform-origin: 0 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.zm-text-input {
|
|
pointer-events: auto;
|
|
background: transparent;
|
|
border: none;
|
|
outline: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
|
|
/* Prevent accidental drag of inputs */
|
|
user-select: text;
|
|
}
|
|
|
|
.zm-text-measure {
|
|
position: absolute;
|
|
left: -10000px;
|
|
top: -10000px;
|
|
visibility: hidden;
|
|
white-space: pre;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.zm-text-italic {
|
|
font-style: italic;
|
|
} |