html.view-campus,
body.view-campus {
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #04112b !important;
}
body.view-campus .tms-main,
html.view-campus .tms-main,
body.view-campus main.tms-main,
html.view-campus main.tms-main {
display: block !important;
width: 100vw !important;
max-width: none !important;
min-width: 100vw !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
body.view-campus .tms-footer,
html.view-campus .tms-footer {
display: none !important;
}
body.view-campus .campus-portal,
html.view-campus .campus-portal {
position: relative !important;
display: block !important;
width: 100vw !important;
height: calc(100vh - 94px) !important;
min-height: calc(100vh - 94px) !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: linear-gradient(180deg, #6fb3ff 0%, #dceeff 34%, #d6e6c4 100%) !important;
}
.campus-world {
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
transform-origin: left center !important;
transition: transform 260ms ease !important;
will-change: transform !important;
}
.campus-panorama-strip {
display: flex !important;
align-items: stretch !important;
height: 100% !important;
width: auto !important;
}
.campus-segment {
display: block !important;
width: auto !important;
height: 100% !important;
max-width: none !important;
min-width: 0 !important;
flex: 0 0 auto !important;
object-fit: contain !important;
user-select: none !important;
pointer-events: none !important;
}
.campus-hotspots {
position: absolute !important;
inset: 0 !important;
}
.campus-hotspot {
position: absolute !important;
box-sizing: border-box !important;
border: 2px solid rgba(255,255,255,0.22) !important;
background: rgba(255,255,255,0.08) !important;
color: transparent !important;
cursor: pointer !important;
border-radius: 16px !important;
transition: transform 180ms ease, background 180ms ease, border-color 180ms ease !important;
}
.campus-hotspot:hover,
.campus-hotspot:focus,
.campus-hotspot.is-active {
background: rgba(255,255,255,0.18) !important;
border-color: rgba(255,255,255,0.42) !important;
transform: scale(1.03) !important;
outline: none !important;
}
.campus-hotspot-label {
position: absolute !important;
left: 50% !important;
bottom: calc(100% + 10px) !important;
transform: translateX(-50%) !important;
white-space: nowrap !important;
padding: 8px 12px !important;
border-radius: 999px !important;
background: rgba(15, 23, 42, 0.82) !important;
color: #fff !important;
font-size: 14px !important;
font-weight: bold !important;
opacity: 0 !important;
pointer-events: none !important;
transition: opacity 180ms ease !important;
}
.campus-hotspot:hover .campus-hotspot-label,
.campus-hotspot:focus .campus-hotspot-label,
.campus-hotspot.is-active .campus-hotspot-label {
opacity: 1 !important;
}
.campus-ui {
position: absolute !important;
left: 16px !important;
top: 16px !important;
z-index: 20 !important;
}
.campus-panel {
max-width: 420px !important;
padding: 16px 18px !important;
border-radius: 18px !important;
color: #fff !important;
background: rgba(15, 23, 42, 0.72) !important;
border: 1px solid rgba(255,255,255,0.18) !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.24) !important;
backdrop-filter: blur(10px) !important;
}
.campus-panel h1,
.campus-panel p {
margin: 0 !important;
}
.campus-panel h1 {
font-size: 22px !important;
margin-bottom: 8px !important;
}
.campus-panel p {
font-size: 14px !important;
line-height: 1.45 !important;
color: rgba(255,255,255,0.78) !important;
}
.campus-controls {
display: flex !important;
gap: 8px !important;
margin-top: 12px !important;
flex-wrap: wrap !important;
}
.campus-btn,
.campus-nav button {
appearance: none !important;
border: 1px solid rgba(255,255,255,0.24) !important;
background: rgba(255,255,255,0.10) !important;
color: #fff !important;
border-radius: 12px !important;
padding: 10px 12px !important;
font-size: 14px !important;
cursor: pointer !important;
}
.campus-status {
position: absolute !important;
left: 16px !important;
bottom: 16px !important;
z-index: 20 !important;
max-width: 460px !important;
padding: 12px 16px !important;
border-radius: 16px !important;
color: #fff !important;
background: rgba(15, 23, 42, 0.62) !important;
border: 1px solid rgba(255,255,255,0.16) !important;
}
.campus-nav {
position: absolute !important;
right: 16px !important;
bottom: 16px !important;
display: flex !important;
gap: 10px !important;
z-index: 20 !important;
}
.campus-mode-switch {
margin-top: 10px !important;
}
.campus-btn.is-active {
background: rgba(255,255,255,0.24) !important;
border-color: rgba(255,255,255,0.44) !important;
}
}
.campus-dev-marker {
position: absolute !important;
width: 14px !important;
height: 14px !important;
margin-left: -7px !important;
margin-top: -7px !important;
border-radius: 999px !important;
border: 2px solid #fff !important;
background: rgba(255, 80, 80, 0.9) !important;
z-index: 30 !important;
pointer-events: none !important;
box-shadow: 0 0 0 2px rgba(15,23,42,0.35) !important;
}
.campus-dev-rect {
position: absolute !important;
border: 2px dashed rgba(255,255,255,0.85) !important;
background: rgba(255,255,255,0.08) !important;
z-index: 29 !important;
pointer-events: none !important;
box-sizing: border-box !important;
}
/* --- Portal admin overlay --- */
.tms-portal-admin {
position: fixed !important;
top: 96px !important;
right: 16px !important;
width: 380px !important;
max-width: calc(100vw - 32px) !important;
max-height: calc(100vh - 120px) !important;
overflow: auto !important;
z-index: 9999 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
margin: 0 !important;
padding: 16px !important;
border: 2px solid #1f5eff !important;
border-radius: 14px !important;
background: rgba(255,255,255,0.98) !important;
box-shadow: 0 16px 40px rgba(0,0,0,0.22) !important;
color: #111827 !important;
}
.tms-portal-admin__form,
.tms-portal-admin__actions,
.tms-portal-admin__delete {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.tms-portal-admin input,
.tms-portal-admin select {
width: 100% !important;
box-sizing: border-box !important;
display: block !important;
background: #ffffff !important;
color: #111827 !important;
border: 1px solid #cfd6e4 !important;
border-radius: 8px !important;
padding: 10px 12px !important;
}
.tms-portal-admin label {
display: block !important;
color: #111827 !important;
font-weight: 600 !important;
}
.tms-portal-admin .tms-form-row {
margin-bottom: 12px !important;
}
.tms-portal-admin .tms-form-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
}
.tms-portal-admin .campus-btn {
display: inline-block !important;
margin: 8px 8px 0 0 !important;
padding: 10px 14px !important;
border: 1px solid #1f5eff !important;
border-radius: 8px !important;
background: #1f5eff !important;
color: #ffffff !important;
cursor: pointer !important;
}
.tms-portal-admin__delete .campus-btn {
border-color: #b42318 !important;
background: #b42318 !important;
}
/* --- Hotspot editor states --- */
.is-edit-mode .campus-hotspot {
outline: 2px dashed rgba(0, 140, 255, 0.95);
outline-offset: 1px;
background: rgba(0, 140, 255, 0.12);
cursor: crosshair;
}
.is-edit-mode .campus-hotspot:hover {
background: rgba(0, 140, 255, 0.2);
}
.campus-hotspot.is-selected {
outline: 3px solid #ff8a00 !important;
background: rgba(255, 138, 0, 0.2) !important;
}
.campus-hotspot {
position: absolute;
}
.is-edit-mode .campus-hotspot.is-draggable {
cursor: move;
}
.campus-hotspot-resize-handle {
position: absolute;
right: -6px;
bottom: -6px;
width: 12px;
height: 12px;
border-radius: 3px;
background: #1f5eff;
border: 2px solid #fff;
box-shadow: 0 0 0 1px rgba(0,0,0,0.18);
display: none;
z-index: 45;
}
.is-edit-mode .campus-hotspot.is-selected .campus-hotspot-resize-handle {
display: block;
cursor: nwse-resize;
}
.campus-hotspot.is-dragging,
.campus-hotspot.is-resizing {
opacity: 0.9;
}
.campus-hotspot.is-hidden-hotspot {
opacity: 0.35;
}
.is-edit-mode .campus-hotspot.is-hidden-hotspot {
opacity: 0.45;
outline: 2px dashed #9ca3af !important;
background: rgba(156, 163, 175, 0.16) !important;
}
.is-edit-mode .campus-hotspot.is-hidden-hotspot .campus-hotspot-label {
background: #6b7280 !important;
}
/* --- Preview + create mode --- */
.campus-hotspot-preview {
position: absolute !important;
display: none;
pointer-events: none;
border: 2px dashed #16a34a !important;
background: rgba(22, 163, 74, 0.16) !important;
box-sizing: border-box;
z-index: 35 !important;
}
.campus-hotspot-preview.is-visible {
display: block;
}
.campus-hotspot-preview__label {
position: absolute;
top: -28px;
left: 0;
padding: 4px 8px;
border-radius: 6px;
background: #16a34a;
color: #fff;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.campus-hotspot-start {
position: absolute !important;
width: 10px;
height: 10px;
background: #16a34a;
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: 40;
pointer-events: none;
}
.is-create-mode {
cursor: crosshair !important;
}
.is-create-mode .campus-world {
box-shadow: inset 0 0 0 3px rgba(22,163,74,0.5);
}
/* --- Tooltip --- */
.campus-hotspot-tooltip {
position: absolute;
left: 50%;
bottom: calc(100% + 56px) !important;
transform: translateX(-50%) !important;
padding: 6px 10px;
background: #111;
color: #fff;
font-size: 12px;
line-height: 1.2;
border-radius: 6px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
z-index: 200 !important;
}
.campus-hotspot:hover .campus-hotspot-tooltip {
opacity: 1 !important;
transform: translateX(-50%) !important;
}
.campus-hotspot-tooltip::after {
content: '';
position: absolute;
top: 100% !important;
left: 50%;
transform: translateX(-50%);
border-width: 5px;
border-style: solid;
border-color: #111 transparent transparent transparent;
}
/* --- Buttons / snap controls --- */
.campus-btn {
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.campus-btn:hover {
background: #eef4ff;
border-color: #7aa7ff;
}
.campus-btn:active {
transform: translateY(1px);
}
.campus-btn.is-active,
.campus-btn[aria-pressed="true"] {
background: #1f5eff;
border-color: #1f5eff;
color: #fff;
}
#tmsPortalDuplicateHotspot {
border-color: #0f766e !important;
background: #0f766e !important;
color: #fff !important;
}
/* --- Grid --- */
.is-edit-mode .campus-world::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 5;
background-image:
linear-gradient(to right, rgba(31,94,255,0.10) 1px, transparent 1px),
linear-gradient(to bottom, rgba(31,94,255,0.10) 1px, transparent 1px);
background-size: var(--grid-size, 20px) var(--grid-size, 20px);
}
.is-edit-mode.is-snap-off .campus-world::after {
display: none !important;
}
.campus-snap-controls {
display: none !important;
}
.is-edit-mode .campus-snap-controls {
display: flex !important;
gap: 8px;
align-items: center;
}
#tmsSnapSize {
background: #ffffff !important;
color: #111827 !important;
border: 1px solid #1f5eff !important;
min-width: 90px;
}
#tmsSnapToggle {
min-width: 110px;
}
#tmsPortalDuplicateHotspot {
border-color: #0f766e !important;
background: #0f766e !important;
color: #fff !important;
}
.campus-hotspot-resize-handle {
position: absolute;
right: -6px;
bottom: -6px;
width: 12px;
height: 12px;
border-radius: 3px;
background: #1f5eff;
border: 2px solid #fff;
box-shadow: 0 0 0 1px rgba(0,0,0,0.18);
display: none;
z-index: 45;
}
.is-edit-mode .campus-hotspot.is-selected .campus-hotspot-resize-handle {
display: block;
cursor: nwse-resize;
}
.campus-hotspot.is-hidden-hotspot {
opacity: 0.35;
}
.is-edit-mode .campus-hotspot.is-hidden-hotspot {
opacity: 0.45;
outline: 2px dashed #9ca3af !important;
background: rgba(156, 163, 175, 0.16) !important;
}
.is-edit-mode .campus-hotspot.is-hidden-hotspot .campus-hotspot-label {
background: #6b7280 !important;
}
#tmsPortalUndoDelete {
border-color: #7c3aed !important;
background: #7c3aed !important;
color: #fff !important;
}
.campus-btn--secondary {
text-decoration: none;
}
.tms-form-row--checkbox label {
display: inline-flex !important;
align-items: center !important;
gap: 8px;
min-height: 38px;
}
.tms-form-row--checkbox input[type="checkbox"] {
margin: 0 !important;
vertical-align: middle;
}
.tms-form-hint {
margin-top: 6px;
font-size: 12px;
color: #6b7280;
}
.campus-world,
.campus-hotspot,
.campus-panorama-strip,
.campus-segment {
transition: transform 220ms ease, opacity 180ms ease, filter 220ms ease;
}
.campus-portal.is-opening .campus-world {
filter: saturate(1.03) brightness(0.98);
}
.campus-hotspot.is-opening-target {
transform: scale(1.05);
box-shadow: 0 0 0 3px rgba(31,94,255,0.20);
}
/* --- portal repair final --- */
.tms-portal-admin {
position: fixed !important;
top: 96px !important;
right: 16px !important;
width: 380px !important;
max-width: calc(100vw - 32px) !important;
max-height: calc(100vh - 120px) !important;
overflow: auto !important;
z-index: 9999 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
padding: 16px !important;
border: 2px solid #1f5eff !important;
border-radius: 14px !important;
background: rgba(255,255,255,0.98) !important;
box-shadow: 0 16px 40px rgba(0,0,0,0.22) !important;
color: #111827 !important;
}
.tms-portal-admin__form,
.tms-portal-admin__actions,
.tms-portal-admin__delete {
display: block !important;
}
.tms-portal-admin .tms-form-row {
margin-bottom: 12px !important;
}
.tms-portal-admin .tms-form-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
}
.tms-form-row--checkbox label {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
min-height: 38px !important;
}
.tms-form-row--checkbox input[type="checkbox"] {
margin: 0 !important;
vertical-align: middle !important;
}
.campus-hotspot-tooltip {
position: absolute !important;
left: 50% !important;
bottom: calc(100% + 56px) !important;
transform: translateX(-50%) !important;
padding: 6px 10px !important;
background: #111 !important;
color: #fff !important;
font-size: 12px !important;
line-height: 1.2 !important;
border-radius: 6px !important;
white-space: nowrap !important;
opacity: 0 !important;
pointer-events: none !important;
z-index: 200 !important;
}
.campus-hotspot:hover .campus-hotspot-tooltip {
opacity: 1 !important;
}
.campus-hotspot-tooltip::after {
content: '' !important;
position: absolute !important;
top: 100% !important;
left: 50% !important;
transform: translateX(-50%) !important;
border-width: 5px !important;
border-style: solid !important;
border-color: #111 transparent transparent transparent !important;
}
.tms-portal-admin__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: -4px -4px 14px -4px;
padding: 4px 4px 10px 4px;
cursor: move;
user-select: none;
}
.tms-portal-admin__title {
margin: 0;
font-size: 18px;
line-height: 1.2;
color: #1f2937;
}
#tmsPortalAdminResetPosition {
min-width: 42px;
padding: 8px 10px !important;
}
.tms-portal-admin.is-dragging {
cursor: move;
box-shadow: 0 20px 50px rgba(0,0,0,0.28) !important;
}
.tms-portal-admin::before {
content: none !important;
display: none !important;
}
.tms-portal-admin__hint {
margin-bottom: 10px;
font-size: 0.9em;
color: #666;
}
/* Admin Panel deaktiviert (Edit-Mode AUS) */
.campus-portal:not(.is-edit-mode) .tms-portal-admin {
opacity: 0.65;
}
/* Buttons visuell disabled */
.campus-portal:not(.is-edit-mode) .tms-portal-admin .campus-btn {
background: #ccc !important;
color: #666 !important;
border-color: #bbb !important;
cursor: not-allowed;
}
/* Inputs optisch deaktiviert */
.campus-portal:not(.is-edit-mode) .tms-portal-admin input,
.campus-portal:not(.is-edit-mode) .tms-portal-admin select {
background: #f5f5f5;
color: #888;
border-color: #ddd;
}
.tms-portal-shell {
padding: 40px;
max-width: 1400px;
margin: 0 auto;
}
.tms-portal-header h1 {
margin-bottom: 10px;
}
.tms-portal-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
margin-top: 30px;
}
.tms-portal-tile {
display: block;
text-decoration: none;
color: inherit;
}
.tms-portal-tile__inner {
padding: 20px;
border-radius: 12px;
background: #f5f7fa;
transition: all 0.2s ease;
}
.tms-portal-tile:hover .tms-portal-tile__inner {
background: #e9eef5;
transform: translateY(-3px);
}
/* Generic 100%-width portal subviews */
.tms-portal-shell {
width: min(1400px, calc(100vw - 48px));
margin: 0 auto;
padding: 36px 0 48px;
}
.tms-portal-header {
margin-bottom: 28px;
}
.tms-portal-kicker {
margin: 0 0 8px;
text-transform: uppercase;
letter-spacing: .08em;
font-size: 12px;
opacity: .7;
}
.tms-portal-header h1 {
margin: 0 0 10px;
font-size: clamp(32px, 5vw, 58px);
line-height: 1.05;
}
.tms-portal-header p {
max-width: 760px;
font-size: 17px;
line-height: 1.55;
}
.tms-portal-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 18px;
margin: 28px 0;
}
.tms-portal-tile {
display: flex;
flex-direction: column;
gap: 8px;
min-height: 170px;
padding: 22px;
border-radius: 18px;
background: rgba(255,255,255,.86);
border: 1px solid rgba(20,30,45,.10);
box-shadow: 0 12px 30px rgba(20,30,45,.08);
color: inherit;
text-decoration: none;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.tms-portal-tile:hover {
transform: translateY(-3px);
box-shadow: 0 16px 36px rgba(20,30,45,.13);
background: #fff;
}
.tms-portal-tile strong {
display: block;
font-size: 22px;
}
.tms-portal-tile__eyebrow {
font-size: 12px;
text-transform: uppercase;
letter-spacing: .08em;
opacity: .68;
}
.tms-portal-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 22px;
}
/* Course portal / generic subportal */
.tms-course-portal {
min-height: calc(100vh - 120px);
}
.tms-subportal-stage {
position: relative;
width: 100%;
min-height: min(72vh, 760px);
border-radius: 24px;
overflow: hidden;
background: #eef2f7;
box-shadow: 0 18px 45px rgba(20, 30, 45, .14);
border: 1px solid rgba(20, 30, 45, .10);
}
.tms-subportal-stage__image {
display: block;
width: 100%;
height: min(72vh, 760px);
object-fit: cover;
}
.tms-subportal-stage__overlay {
position: absolute;
inset: 0;
}
.tms-subportal-hotspot {
position: absolute;
transform: translate(-50%, -50%);
display: inline-flex;
flex-direction: column;
gap: 2px;
min-width: 150px;
padding: 12px 14px;
border-radius: 16px;
background: rgba(12, 22, 36, .78);
color: #fff;
text-decoration: none;
box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
backdrop-filter: blur(6px);
transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.tms-subportal-hotspot:hover {
transform: translate(-50%, -50%) translateY(-3px);
background: rgba(12, 22, 36, .9);
box-shadow: 0 16px 34px rgba(0, 0, 0, .32);
}
.tms-subportal-hotspot strong {
font-size: 15px;
line-height: 1.2;
}
.tms-subportal-hotspot span {
font-size: 12px;
opacity: .82;
}
.tms-portal-shell {
width: min(1400px, calc(100vw - 48px));
margin: 0 auto;
padding: 36px 0 48px;
}
.tms-portal-header {
margin-bottom: 28px;
}
.tms-portal-kicker {
margin: 0 0 8px;
text-transform: uppercase;
letter-spacing: .08em;
font-size: 12px;
opacity: .7;
}
.tms-portal-header h1 {
margin: 0 0 10px;
font-size: clamp(32px, 5vw, 58px);
line-height: 1.05;
}
.tms-portal-header p {
max-width: 760px;
font-size: 17px;
line-height: 1.55;
}
.tms-portal-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 18px;
margin: 28px 0;
}
.tms-portal-tile {
display: flex;
flex-direction: column;
gap: 8px;
min-height: 170px;
padding: 22px;
border-radius: 18px;
background: rgba(255,255,255,.86);
border: 1px solid rgba(20,30,45,.10);
box-shadow: 0 12px 30px rgba(20,30,45,.08);
color: inherit;
text-decoration: none;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.tms-portal-tile:hover {
transform: translateY(-3px);
box-shadow: 0 16px 36px rgba(20,30,45,.13);
background: #fff;
}
.tms-portal-tile strong {
display: block;
font-size: 22px;
}
.tms-portal-tile__eyebrow {
font-size: 12px;
text-transform: uppercase;
letter-spacing: .08em;
opacity: .68;
}
.tms-portal-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 22px;
}
/* Subportal hotspot visibility hardening */
.tms-subportal-stage__overlay {
z-index: 2;
pointer-events: auto;
}
.tms-subportal-hotspot {
z-index: 3;
border: 2px solid rgba(255,255,255,.85);
}
.tms-subportal-stage__image {
position: relative;
z-index: 1;
}
/* Responsive subportal stage sizing */
.tms-subportal-stage {
width: min(100%, 1600px);
margin: 0 auto;
aspect-ratio: 16 / 9;
min-height: auto;
max-height: calc(100vh - 220px);
}
.tms-subportal-stage__image {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 760px) {
.tms-subportal-stage {
display: none;
}
}
/* Subportal hotspot final visibility fix */
.tms-subportal-stage {
position: relative;
overflow: hidden;
}
.tms-subportal-stage__image {
display: block;
}
.tms-subportal-stage__overlay {
position: absolute;
inset: 0;
z-index: 20;
pointer-events: none;
}
.tms-subportal-hotspot {
position: absolute;
z-index: 30;
pointer-events: auto;
display: inline-flex;
flex-direction: column;
gap: 3px;
min-width: 160px;
background: rgba(12, 22, 36, .78);
color: #fff;
border: 1px solid rgba(255,255,255,.4);
}
.tms-subportal-hotspot:hover {
transform: translate(-50%, -50%) translateY(-4px);
background: rgba(12, 22, 36, .92);
box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
/* DB-driven subportal hotspots */
.tms-subportal-stage {
position: relative;
}
.tms-subportal-stage__overlay {
position: absolute;
inset: 0;
z-index: 20;
pointer-events: none;
}
.tms-subportal-hotspot {
position: absolute;
z-index: 30;
pointer-events: auto;
transform: none;
border: 1px solid rgba(255,255,255,.45);
background: rgba(12, 22, 36, .78);
color: #fff;
}
.tms-subportal-hotspot:hover {
transform: translateY(-3px);
background: rgba(12, 22, 36, .92);
}
/* Subportal builder compatibility */
.tms-course-portal.campus-portal {
position: relative;
}
.tms-course-portal .tms-subportal-stage {
position: relative;
}
.tms-course-portal .campus-hotspots,
.tms-course-portal .tms-subportal-stage__overlay {
position: absolute;
inset: 0;
z-index: 20;
}
.tms-course-portal .campus-hotspot.tms-subportal-hotspot {
position: absolute;
z-index: 30;
transform: none;
}
.tms-course-portal.is-edit-mode .campus-hotspot.tms-subportal-hotspot {
cursor: move;
outline: 2px dashed rgba(255,255,255,.7);
}
.tms-course-portal:not(.is-edit-mode) .tms-portal-admin {
opacity: .62;
}
.tms-course-portal:not(.is-edit-mode) .tms-portal-admin input,
.tms-course-portal:not(.is-edit-mode) .tms-portal-admin select,
.tms-course-portal:not(.is-edit-mode) .tms-portal-admin button {
pointer-events: none;
cursor: not-allowed;
}
/* Admin panel: free floating position */
.tms-portal-admin {
position: fixed !important;
top: 96px;
right: 16px;
bottom: auto !important;
max-height: calc(100vh - 120px);
overflow: auto;
}
.tms-portal-admin.is-dragging {
user-select: none;
}
/* Subportal stage sizing on wide screens */
.tms-course-portal {
width: min(1720px, calc(100vw - 48px));
}
.tms-course-portal .tms-subportal-stage {
aspect-ratio: 16 / 9;
max-height: calc(100vh - 220px);
}
.tms-course-portal .tms-subportal-stage__image {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Admin panel reset must always stay clickable */
#tmsPortalAdminResetPosition {
pointer-events: auto !important;
cursor: pointer !important;
opacity: 1 !important;
}
/* Reset button remains active even when admin panel is disabled */
.campus-portal:not(.is-edit-mode) #tmsPortalAdminResetPosition {
pointer-events: auto !important;
cursor: pointer !important;
opacity: 1 !important;
}
/* Subportal contrast fix */
.tms-course-portal .campus-btn,
.tms-course-portal .tms-portal-actions .campus-btn,
.tms-course-portal .campus-admin-switch .campus-btn {
color: #12306b !important;
background: #ffffff !important;
border: 1px solid rgba(18, 48, 107, .25) !important;
box-shadow: 0 8px 20px rgba(18, 48, 107, .08);
}
.tms-course-portal .campus-btn:hover,
.tms-course-portal .tms-portal-actions .campus-btn:hover,
.tms-course-portal .campus-admin-switch .campus-btn:hover {
color: #ffffff !important;
background: #2457ff !important;
border-color: #2457ff !important;
}
.tms-course-portal .campus-btn.is-active,
.tms-course-portal .campus-admin-switch .campus-btn.is-active {
color: #ffffff !important;
background: #2457ff !important;
border-color: #2457ff !important;
}
.tms-course-portal .tms-portal-actions a {
color: #12306b !important;
}
/* Responsive portal coordinate system */
.tms-subportal-stage {
position: relative;
width: min(100%, 1600px);
aspect-ratio: 16 / 9;
margin: 0 auto;
overflow: hidden;
background: #eef2f7;
}
.tms-subportal-stage__image {
display: block;
width: 100%;
height: 100%;
object-fit: contain !important;
}
.tms-subportal-stage__overlay,
.tms-course-portal .campus-hotspots,
.tms-generic-portal .campus-hotspots {
position: absolute;
inset: 0;
}
.tms-course-portal .campus-hotspot.tms-subportal-hotspot,
.tms-generic-portal .campus-hotspot.tms-subportal-hotspot {
position: absolute;
box-sizing: border-box;
}
/* Hauptportal: Auswahlrahmen nur im EditMode anzeigen */
.campus-portal:not(.is-edit-mode) .campus-hotspot.is-selected {
border-color: rgba(255,255,255,0.22) !important;
background: rgba(255,255,255,0.08) !important;
box-shadow: none !important;
}
/* --- Zoom Transition --- */
.campus-world.is-zooming {
transform-origin: center center;
transition: transform 900ms ease, filter 900ms ease;
filter: brightness(0.95) saturate(1.05);
}
.campus-hotspot.is-zoom-target {
transform: scale(1.08);
z-index: 30;
}}
.campus-world.is-zooming {
filter: brightness(0.85) blur(1px);
}
.campus-hotspot.is-zoom-target {
transform: scale(1.12);
filter: brightness(1.1);
}
/* --- Hauptportal Zoom Transition Override --- */
.campus-world.is-zooming {
transition: transform 2200ms cubic-bezier(0.16, 1, 0.3, 1), filter 2200ms cubic-bezier(0.16, 1, 0.3, 1) !important;
filter: brightness(0.82) saturate(1.08) !important;
}
.campus-hotspot.is-zoom-target {
transform: scale(1.28) !important;
z-index: 50 !important;
box-shadow: 0 0 0 6px rgba(255,255,255,0.28), 0 20px 60px rgba(0,0,0,0.35) !important;
}
/* Zoom darf nur waehrend der Fahrt dominieren */
.campus-world:not(.is-zooming) {
filter: none !important;
}
.campus-world:not(.is-zooming) .campus-hotspot {
z-index: auto !important;
}
/* Reset nach Browser-Zurueck / BFCache */
.campus-world:not(.is-zooming) {
filter: none !important;
}
.campus-world:not(.is-zooming) .campus-hotspot {
pointer-events: auto !important;
z-index: auto !important;
}
/* Platform hardening: touch/pointer support for Portalbuilder hotspots */
.campus-portal.is-edit-mode .campus-hotspot,
.campus-portal.is-edit-mode .campus-hotspot-resize-handle,
.tms-course-portal.is-edit-mode .campus-hotspot,
.tms-course-portal.is-edit-mode .campus-hotspot-resize-handle {
touch-action: none;
-webkit-user-select: none;
user-select: none;
}
.campus-hotspot-resize-handle {
min-width: 28px;
min-height: 28px;
}
/* Tablet/iPad hardening: keep Portalbuilder stage usable */
@media (max-width: 1180px) {
.tms-course-portal,
.tms-generic-portal {
width: calc(100vw - 24px) !important;
max-width: calc(100vw - 24px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.tms-course-portal .tms-subportal-stage,
.tms-generic-portal .tms-subportal-stage {
width: 100% !important;
max-height: 58vh !important;
min-height: auto !important;
aspect-ratio: 16 / 9 !important;
}
.tms-course-portal .tms-subportal-stage__image,
.tms-generic-portal .tms-subportal-stage__image {
height: 100% !important;
min-height: auto !important;
}
.tms-portal-admin {
left: 12px !important;
right: 12px !important;
bottom: 12px !important;
top: auto !important;
width: auto !important;
max-width: none !important;
max-height: 34vh !important;
padding: 10px 12px !important;
border-radius: 16px !important;
}
.tms-portal-admin__header {
margin-bottom: 8px !important;
padding-bottom: 6px !important;
}
.tms-portal-admin__title {
font-size: 15px !important;
}
.tms-portal-admin .tms-form-row {
margin-bottom: 7px !important;
}
.tms-portal-admin .tms-form-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 7px !important;
}
.tms-portal-admin input,
.tms-portal-admin select {
padding: 7px 8px !important;
font-size: 13px !important;
}
.tms-portal-admin .campus-btn {
padding: 7px 9px !important;
font-size: 13px !important;
margin-top: 4px !important;
}
.tms-portal-actions {
gap: 6px !important;
margin-top: 10px !important;
}
}
/* Tablet/iPad large hardening */
@media (max-width: 1400px) {
#tmsPortalAdminPanel.tms-portal-admin {
left: 12px !important;
right: 12px !important;
bottom: 12px !important;
top: auto !important;
width: auto !important;
max-width: none !important;
max-height: 32vh !important;
height: auto !important;
padding: 10px 12px !important;
border-radius: 16px !important;
}
.tms-course-portal,
.tms-generic-portal {
width: calc(100vw - 24px) !important;
max-width: calc(100vw - 24px) !important;
}
.tms-course-portal .tms-subportal-stage,
.tms-generic-portal .tms-subportal-stage {
max-height: 62vh !important;
}
}
/* iPad large: compact right editor panel instead of bottom sheet */
@media (min-width: 1000px) and (max-width: 1400px) {
#tmsPortalAdminPanel.tms-portal-admin {
top: 88px !important;
right: 12px !important;
bottom: auto !important;
left: auto !important;
width: 300px !important;
max-width: 300px !important;
max-height: calc(100vh - 110px) !important;
height: auto !important;
}
.tms-course-portal,
.tms-generic-portal {
width: calc(100vw - 336px) !important;
max-width: calc(100vw - 336px) !important;
margin-left: 12px !important;
margin-right: 324px !important;
}
}
/* iPad large: compact main campus panel */
@media (min-width: 1000px) and (max-width: 1400px) {
section.campus-panel {
max-width: 300px !important;
padding: 10px 12px !important;
border-radius: 16px !important;
}
section.campus-panel h1 {
font-size: 17px !important;
margin-bottom: 5px !important;
}
section.campus-panel p {
font-size: 12px !important;
line-height: 1.3 !important;
}
section.campus-panel .campus-controls {
gap: 5px !important;
margin-top: 7px !important;
}
section.campus-panel .campus-btn,
section.campus-panel button {
padding: 6px 8px !important;
font-size: 12px !important;
border-radius: 9px !important;
}
}
/* iPad large: align main campus panel height with admin panel */
@media (min-width: 1000px) and (max-width: 1400px) {
section.campus-panel {
max-height: calc(100vh - 110px) !important;
overflow: auto !important;
}
}
/* Portalbuilder tablet: show full portal image, no cropping */
@media (min-width: 1000px) and (max-width: 1400px) {
.tms-course-portal .tms-subportal-stage__image,
.tms-generic-portal .tms-subportal-stage__image {
object-fit: contain !important;
background: #eef2f7 !important;
}
.tms-course-portal .tms-subportal-stage,
.tms-generic-portal .tms-subportal-stage {
overflow: hidden !important;
}
}
/* iPad large: keep portal stage visible within viewport */
@media (min-width: 1000px) and (max-width: 1400px) {
.tms-course-portal .tms-subportal-stage,
.tms-generic-portal .tms-subportal-stage {
height: calc(100vh - 190px) !important;
max-height: calc(100vh - 190px) !important;
min-height: 360px !important;
aspect-ratio: auto !important;
}
.tms-course-portal .tms-subportal-stage__image,
.tms-generic-portal .tms-subportal-stage__image {
height: 100% !important;
object-fit: contain !important;
}
}
/* Portal Shell: collapsible panels */
.tms-shell-collapse-btn {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 9px !important;
line-height: 32px !important;
text-align: center !important;
cursor: pointer !important;
}
/* Left campus panel collapse button */
section.campus-panel {
position: fixed !important;
}
section.campus-panel .tms-shell-collapse-btn {
position: absolute !important;
top: 8px !important;
right: 8px !important;
z-index: 5 !important;
background: rgba(0,0,0,.28) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,.25) !important;
}
/* Right admin header button group */
#tmsPortalAdminPanel .tms-portal-admin__header {
position: relative !important;
min-height: 42px !important;
padding-right: 78px !important;
}
#tmsPortalAdminPanel #tmsPortalAdminResetPosition,
#tmsPortalAdminPanel .tms-shell-collapse-btn {
position: absolute !important;
top: 4px !important;
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
padding: 0 !important;
margin: 0 !important;
line-height: 32px !important;
text-align: center !important;
border-radius: 9px !important;
}
#tmsPortalAdminPanel #tmsPortalAdminResetPosition {
right: 42px !important;
}
#tmsPortalAdminPanel .tms-shell-collapse-btn {
right: 4px !important;
left: auto !important;
bottom: auto !important;
z-index: 2 !important;
background: #2457ff !important;
color: #fff !important;
border: 1px solid #2457ff !important;
}
/* Collapsed left panel */
.campus-portal.is-left-panel-collapsed section.campus-panel {
width: 48px !important;
height: 48px !important;
max-width: 48px !important;
min-height: 48px !important;
overflow: hidden !important;
padding: 8px !important;
}
.campus-portal.is-left-panel-collapsed section.campus-panel > *:not(.tms-shell-collapse-btn) {
display: none !important;
}
/* Collapsed admin panel: panel lives in body */
#tmsPortalAdminPanel.is-admin-panel-collapsed {
width: 52px !important;
height: 52px !important;
max-width: 52px !important;
max-height: 52px !important;
overflow: hidden !important;
padding: 8px !important;
}
#tmsPortalAdminPanel.is-admin-panel-collapsed > *:not(.tms-shell-collapse-btn) {
display: none !important;
}
/* Campus world touch pan */
.campus-world,
[data-campus-strip],
[data-campus-world] {
touch-action: pan-y;
-webkit-user-select: none;
user-select: none;
}
/* Portal shell: floating TMS header overlay */
.tms-body--portal-shell .tms-main-header {
position: fixed !important;
top: 10px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 8000 !important;
width: min(1100px, calc(100vw - 32px)) !important;
border: 1px solid rgba(255,255,255,.55) !important;
border-radius: 18px !important;
background: rgba(255,255,255,.82) !important;
box-shadow: 0 14px 40px rgba(0,0,0,.16) !important;
backdrop-filter: blur(16px) saturate(1.2) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
}
.tms-body--portal-shell .tms-main-header > div {
max-width: none !important;
padding: 8px 12px !important;
}
.tms-body--portal-shell .tms-main-content {
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
@media (min-width: 1000px) and (max-width: 1400px) {
.tms-body--portal-shell .tms-main-header {
top: 8px !important;
width: calc(100vw - 260px) !important;
left: 50% !important;
}
.tms-body--portal-shell .tms-main-header > div {
padding: 6px 10px !important;
gap: 8px !important;
}
.tms-body--portal-shell .tms-main-header a,
.tms-body--portal-shell .tms-main-header select {
font-size: 13px !important;
}
}
/* Portal shell: floating real TMS header */
body:has([data-campus-portal]) .tms-header {
position: fixed !important;
top: 10px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 8000 !important;
width: min(920px, calc(100vw - 180px)) !important;
border: 1px solid rgba(255,255,255,.45) !important;
border-radius: 22px !important;
background: rgba(255,255,255,.72) !important;
box-shadow:
0 10px 30px rgba(0,0,0,.12),
0 2px 10px rgba(0,0,0,.08) !important;
backdrop-filter: blur(18px) saturate(1.25) !important;
-webkit-backdrop-filter: blur(18px) saturate(1.25) !important;
}
body:has([data-campus-portal]) .tms-header > div {
padding: 8px 14px !important;
gap: 10px !important;
}
body:has([data-campus-portal]) .tms-header a,
body:has([data-campus-portal]) .tms-header select {
font-size: 13px !important;
}
body:has([data-campus-portal]) .tms-main {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* iPad / Tablet */
@media (max-width: 1200px) {
body:has([data-campus-portal]) .tms-header {
width: calc(100vw - 260px) !important;
top: 8px !important;
border-radius: 18px !important;
}
body:has([data-campus-portal]) .tms-header > div {
padding: 6px 10px !important;
gap: 8px !important;
}
body:has([data-campus-portal]) .tms-header a {
padding: 5px 8px !important;
font-size: 12px !important;
}
}
html.view-campus,
body.view-campus {
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: #04112b !important;
}
body.view-campus .tms-main,
html.view-campus .tms-main,
body.view-campus main.tms-main,
html.view-campus main.tms-main {
display: block !important;
width: 100vw !important;
max-width: none !important;
min-width: 100vw !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
}
body.view-campus .tms-footer,
html.view-campus .tms-footer {
display: none !important;
}
body.view-campus .campus-portal,
html.view-campus .campus-portal {
position: relative !important;
display: block !important;
width: 100vw !important;
height: calc(100vh - 94px) !important;
min-height: calc(100vh - 94px) !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: linear-gradient(180deg, #6fb3ff 0%, #dceeff 34%, #d6e6c4 100%) !important;
}
.campus-world {
position: absolute !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
transform-origin: left center !important;
transition: transform 260ms ease !important;
will-change: transform !important;
}
.campus-panorama-strip {
display: flex !important;
align-items: stretch !important;
height: 100% !important;
width: auto !important;
}
.campus-segment {
display: block !important;
width: auto !important;
height: 100% !important;
max-width: none !important;
min-width: 0 !important;
flex: 0 0 auto !important;
object-fit: contain !important;
user-select: none !important;
pointer-events: none !important;
}
.campus-hotspots {
position: absolute !important;
inset: 0 !important;
}
.campus-hotspot {
position: absolute !important;
box-sizing: border-box !important;
border: 2px solid rgba(255,255,255,0.22) !important;
background: rgba(255,255,255,0.08) !important;
color: transparent !important;
cursor: pointer !important;
border-radius: 16px !important;
transition: transform 180ms ease, background 180ms ease, border-color 180ms ease !important;
}
.campus-hotspot:hover,
.campus-hotspot:focus,
.campus-hotspot.is-active {
background: rgba(255,255,255,0.18) !important;
border-color: rgba(255,255,255,0.42) !important;
transform: scale(1.03) !important;
outline: none !important;
}
.campus-hotspot-label {
position: absolute !important;
left: 50% !important;
bottom: calc(100% + 10px) !important;
transform: translateX(-50%) !important;
white-space: nowrap !important;
padding: 8px 12px !important;
border-radius: 999px !important;
background: rgba(15, 23, 42, 0.82) !important;
color: #fff !important;
font-size: 14px !important;
font-weight: bold !important;
opacity: 0 !important;
pointer-events: none !important;
transition: opacity 180ms ease !important;
}
.campus-hotspot:hover .campus-hotspot-label,
.campus-hotspot:focus .campus-hotspot-label,
.campus-hotspot.is-active .campus-hotspot-label {
opacity: 1 !important;
}
.campus-ui {
position: absolute !important;
left: 16px !important;
top: 16px !important;
z-index: 20 !important;
}
.campus-panel {
max-width: 420px !important;
padding: 16px 18px !important;
border-radius: 18px !important;
color: #fff !important;
background: rgba(15, 23, 42, 0.72) !important;
border: 1px solid rgba(255,255,255,0.18) !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.24) !important;
backdrop-filter: blur(10px) !important;
}
.campus-panel h1,
.campus-panel p {
margin: 0 !important;
}
.campus-panel h1 {
font-size: 22px !important;
margin-bottom: 8px !important;
}
.campus-panel p {
font-size: 14px !important;
line-height: 1.45 !important;
color: rgba(255,255,255,0.78) !important;
}
.campus-controls {
display: flex !important;
gap: 8px !important;
margin-top: 12px !important;
flex-wrap: wrap !important;
}
.campus-btn,
.campus-nav button {
appearance: none !important;
border: 1px solid rgba(255,255,255,0.24) !important;
background: rgba(255,255,255,0.10) !important;
color: #fff !important;
border-radius: 12px !important;
padding: 10px 12px !important;
font-size: 14px !important;
cursor: pointer !important;
}
.campus-status {
position: absolute !important;
left: 16px !important;
bottom: 16px !important;
z-index: 20 !important;
max-width: 460px !important;
padding: 12px 16px !important;
border-radius: 16px !important;
color: #fff !important;
background: rgba(15, 23, 42, 0.62) !important;
border: 1px solid rgba(255,255,255,0.16) !important;
}
.campus-nav {
position: absolute !important;
right: 16px !important;
bottom: 16px !important;
display: flex !important;
gap: 10px !important;
z-index: 20 !important;
}
.campus-mode-switch {
margin-top: 10px !important;
}
.campus-btn.is-active {
background: rgba(255,255,255,0.24) !important;
border-color: rgba(255,255,255,0.44) !important;
}
}
.campus-dev-marker {
position: absolute !important;
width: 14px !important;
height: 14px !important;
margin-left: -7px !important;
margin-top: -7px !important;
border-radius: 999px !important;
border: 2px solid #fff !important;
background: rgba(255, 80, 80, 0.9) !important;
z-index: 30 !important;
pointer-events: none !important;
box-shadow: 0 0 0 2px rgba(15,23,42,0.35) !important;
}
.campus-dev-rect {
position: absolute !important;
border: 2px dashed rgba(255,255,255,0.85) !important;
background: rgba(255,255,255,0.08) !important;
z-index: 29 !important;
pointer-events: none !important;
box-sizing: border-box !important;
}
/* --- Portal admin overlay --- */
.tms-portal-admin {
position: fixed !important;
top: 96px !important;
right: 16px !important;
width: 380px !important;
max-width: calc(100vw - 32px) !important;
max-height: calc(100vh - 120px) !important;
overflow: auto !important;
z-index: 9999 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
margin: 0 !important;
padding: 16px !important;
border: 2px solid #1f5eff !important;
border-radius: 14px !important;
background: rgba(255,255,255,0.98) !important;
box-shadow: 0 16px 40px rgba(0,0,0,0.22) !important;
color: #111827 !important;
}
.tms-portal-admin__form,
.tms-portal-admin__actions,
.tms-portal-admin__delete {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.tms-portal-admin input,
.tms-portal-admin select {
width: 100% !important;
box-sizing: border-box !important;
display: block !important;
background: #ffffff !important;
color: #111827 !important;
border: 1px solid #cfd6e4 !important;
border-radius: 8px !important;
padding: 10px 12px !important;
}
.tms-portal-admin label {
display: block !important;
color: #111827 !important;
font-weight: 600 !important;
}
.tms-portal-admin .tms-form-row {
margin-bottom: 12px !important;
}
.tms-portal-admin .tms-form-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
}
.tms-portal-admin .campus-btn {
display: inline-block !important;
margin: 8px 8px 0 0 !important;
padding: 10px 14px !important;
border: 1px solid #1f5eff !important;
border-radius: 8px !important;
background: #1f5eff !important;
color: #ffffff !important;
cursor: pointer !important;
}
.tms-portal-admin__delete .campus-btn {
border-color: #b42318 !important;
background: #b42318 !important;
}
/* --- Hotspot editor states --- */
.is-edit-mode .campus-hotspot {
outline: 2px dashed rgba(0, 140, 255, 0.95);
outline-offset: 1px;
background: rgba(0, 140, 255, 0.12);
cursor: crosshair;
}
.is-edit-mode .campus-hotspot:hover {
background: rgba(0, 140, 255, 0.2);
}
.campus-hotspot.is-selected {
outline: 3px solid #ff8a00 !important;
background: rgba(255, 138, 0, 0.2) !important;
}
.campus-hotspot {
position: absolute;
}
.is-edit-mode .campus-hotspot.is-draggable {
cursor: move;
}
.campus-hotspot-resize-handle {
position: absolute;
right: -6px;
bottom: -6px;
width: 12px;
height: 12px;
border-radius: 3px;
background: #1f5eff;
border: 2px solid #fff;
box-shadow: 0 0 0 1px rgba(0,0,0,0.18);
display: none;
z-index: 45;
}
.is-edit-mode .campus-hotspot.is-selected .campus-hotspot-resize-handle {
display: block;
cursor: nwse-resize;
}
.campus-hotspot.is-dragging,
.campus-hotspot.is-resizing {
opacity: 0.9;
}
.campus-hotspot.is-hidden-hotspot {
opacity: 0.35;
}
.is-edit-mode .campus-hotspot.is-hidden-hotspot {
opacity: 0.45;
outline: 2px dashed #9ca3af !important;
background: rgba(156, 163, 175, 0.16) !important;
}
.is-edit-mode .campus-hotspot.is-hidden-hotspot .campus-hotspot-label {
background: #6b7280 !important;
}
/* --- Preview + create mode --- */
.campus-hotspot-preview {
position: absolute !important;
display: none;
pointer-events: none;
border: 2px dashed #16a34a !important;
background: rgba(22, 163, 74, 0.16) !important;
box-sizing: border-box;
z-index: 35 !important;
}
.campus-hotspot-preview.is-visible {
display: block;
}
.campus-hotspot-preview__label {
position: absolute;
top: -28px;
left: 0;
padding: 4px 8px;
border-radius: 6px;
background: #16a34a;
color: #fff;
font-size: 12px;
font-weight: 700;
white-space: nowrap;
}
.campus-hotspot-start {
position: absolute !important;
width: 10px;
height: 10px;
background: #16a34a;
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: 40;
pointer-events: none;
}
.is-create-mode {
cursor: crosshair !important;
}
.is-create-mode .campus-world {
box-shadow: inset 0 0 0 3px rgba(22,163,74,0.5);
}
/* --- Tooltip --- */
.campus-hotspot-tooltip {
position: absolute;
left: 50%;
bottom: calc(100% + 56px) !important;
transform: translateX(-50%) !important;
padding: 6px 10px;
background: #111;
color: #fff;
font-size: 12px;
line-height: 1.2;
border-radius: 6px;
white-space: nowrap;
opacity: 0;
pointer-events: none;
z-index: 200 !important;
}
.campus-hotspot:hover .campus-hotspot-tooltip {
opacity: 1 !important;
transform: translateX(-50%) !important;
}
.campus-hotspot-tooltip::after {
content: '';
position: absolute;
top: 100% !important;
left: 50%;
transform: translateX(-50%);
border-width: 5px;
border-style: solid;
border-color: #111 transparent transparent transparent;
}
/* --- Buttons / snap controls --- */
.campus-btn {
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}
.campus-btn:hover {
background: #eef4ff;
border-color: #7aa7ff;
}
.campus-btn:active {
transform: translateY(1px);
}
.campus-btn.is-active,
.campus-btn[aria-pressed="true"] {
background: #1f5eff;
border-color: #1f5eff;
color: #fff;
}
#tmsPortalDuplicateHotspot {
border-color: #0f766e !important;
background: #0f766e !important;
color: #fff !important;
}
/* --- Grid --- */
.is-edit-mode .campus-world::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 5;
background-image:
linear-gradient(to right, rgba(31,94,255,0.10) 1px, transparent 1px),
linear-gradient(to bottom, rgba(31,94,255,0.10) 1px, transparent 1px);
background-size: var(--grid-size, 20px) var(--grid-size, 20px);
}
.is-edit-mode.is-snap-off .campus-world::after {
display: none !important;
}
.campus-snap-controls {
display: none !important;
}
.is-edit-mode .campus-snap-controls {
display: flex !important;
gap: 8px;
align-items: center;
}
#tmsSnapSize {
background: #ffffff !important;
color: #111827 !important;
border: 1px solid #1f5eff !important;
min-width: 90px;
}
#tmsSnapToggle {
min-width: 110px;
}
#tmsPortalDuplicateHotspot {
border-color: #0f766e !important;
background: #0f766e !important;
color: #fff !important;
}
.campus-hotspot-resize-handle {
position: absolute;
right: -6px;
bottom: -6px;
width: 12px;
height: 12px;
border-radius: 3px;
background: #1f5eff;
border: 2px solid #fff;
box-shadow: 0 0 0 1px rgba(0,0,0,0.18);
display: none;
z-index: 45;
}
.is-edit-mode .campus-hotspot.is-selected .campus-hotspot-resize-handle {
display: block;
cursor: nwse-resize;
}
.campus-hotspot.is-hidden-hotspot {
opacity: 0.35;
}
.is-edit-mode .campus-hotspot.is-hidden-hotspot {
opacity: 0.45;
outline: 2px dashed #9ca3af !important;
background: rgba(156, 163, 175, 0.16) !important;
}
.is-edit-mode .campus-hotspot.is-hidden-hotspot .campus-hotspot-label {
background: #6b7280 !important;
}
#tmsPortalUndoDelete {
border-color: #7c3aed !important;
background: #7c3aed !important;
color: #fff !important;
}
.campus-btn--secondary {
text-decoration: none;
}
.tms-form-row--checkbox label {
display: inline-flex !important;
align-items: center !important;
gap: 8px;
min-height: 38px;
}
.tms-form-row--checkbox input[type="checkbox"] {
margin: 0 !important;
vertical-align: middle;
}
.tms-form-hint {
margin-top: 6px;
font-size: 12px;
color: #6b7280;
}
.campus-world,
.campus-hotspot,
.campus-panorama-strip,
.campus-segment {
transition: transform 220ms ease, opacity 180ms ease, filter 220ms ease;
}
.campus-portal.is-opening .campus-world {
filter: saturate(1.03) brightness(0.98);
}
.campus-hotspot.is-opening-target {
transform: scale(1.05);
box-shadow: 0 0 0 3px rgba(31,94,255,0.20);
}
/* --- portal repair final --- */
.tms-portal-admin {
position: fixed !important;
top: 96px !important;
right: 16px !important;
width: 380px !important;
max-width: calc(100vw - 32px) !important;
max-height: calc(100vh - 120px) !important;
overflow: auto !important;
z-index: 9999 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
padding: 16px !important;
border: 2px solid #1f5eff !important;
border-radius: 14px !important;
background: rgba(255,255,255,0.98) !important;
box-shadow: 0 16px 40px rgba(0,0,0,0.22) !important;
color: #111827 !important;
}
.tms-portal-admin__form,
.tms-portal-admin__actions,
.tms-portal-admin__delete {
display: block !important;
}
.tms-portal-admin .tms-form-row {
margin-bottom: 12px !important;
}
.tms-portal-admin .tms-form-grid {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 12px !important;
}
.tms-form-row--checkbox label {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
min-height: 38px !important;
}
.tms-form-row--checkbox input[type="checkbox"] {
margin: 0 !important;
vertical-align: middle !important;
}
.campus-hotspot-tooltip {
position: absolute !important;
left: 50% !important;
bottom: calc(100% + 56px) !important;
transform: translateX(-50%) !important;
padding: 6px 10px !important;
background: #111 !important;
color: #fff !important;
font-size: 12px !important;
line-height: 1.2 !important;
border-radius: 6px !important;
white-space: nowrap !important;
opacity: 0 !important;
pointer-events: none !important;
z-index: 200 !important;
}
.campus-hotspot:hover .campus-hotspot-tooltip {
opacity: 1 !important;
}
.campus-hotspot-tooltip::after {
content: '' !important;
position: absolute !important;
top: 100% !important;
left: 50% !important;
transform: translateX(-50%) !important;
border-width: 5px !important;
border-style: solid !important;
border-color: #111 transparent transparent transparent !important;
}
.tms-portal-admin__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: -4px -4px 14px -4px;
padding: 4px 4px 10px 4px;
cursor: move;
user-select: none;
}
.tms-portal-admin__title {
margin: 0;
font-size: 18px;
line-height: 1.2;
color: #1f2937;
}
#tmsPortalAdminResetPosition {
min-width: 42px;
padding: 8px 10px !important;
}
.tms-portal-admin.is-dragging {
cursor: move;
box-shadow: 0 20px 50px rgba(0,0,0,0.28) !important;
}
.tms-portal-admin::before {
content: none !important;
display: none !important;
}
.tms-portal-admin__hint {
margin-bottom: 10px;
font-size: 0.9em;
color: #666;
}
/* Admin Panel deaktiviert (Edit-Mode AUS) */
.campus-portal:not(.is-edit-mode) .tms-portal-admin {
opacity: 0.65;
}
/* Buttons visuell disabled */
.campus-portal:not(.is-edit-mode) .tms-portal-admin .campus-btn {
background: #ccc !important;
color: #666 !important;
border-color: #bbb !important;
cursor: not-allowed;
}
/* Inputs optisch deaktiviert */
.campus-portal:not(.is-edit-mode) .tms-portal-admin input,
.campus-portal:not(.is-edit-mode) .tms-portal-admin select {
background: #f5f5f5;
color: #888;
border-color: #ddd;
}
.tms-portal-shell {
padding: 40px;
max-width: 1400px;
margin: 0 auto;
}
.tms-portal-header h1 {
margin-bottom: 10px;
}
.tms-portal-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
margin-top: 30px;
}
.tms-portal-tile {
display: block;
text-decoration: none;
color: inherit;
}
.tms-portal-tile__inner {
padding: 20px;
border-radius: 12px;
background: #f5f7fa;
transition: all 0.2s ease;
}
.tms-portal-tile:hover .tms-portal-tile__inner {
background: #e9eef5;
transform: translateY(-3px);
}
/* Generic 100%-width portal subviews */
.tms-portal-shell {
width: min(1400px, calc(100vw - 48px));
margin: 0 auto;
padding: 36px 0 48px;
}
.tms-portal-header {
margin-bottom: 28px;
}
.tms-portal-kicker {
margin: 0 0 8px;
text-transform: uppercase;
letter-spacing: .08em;
font-size: 12px;
opacity: .7;
}
.tms-portal-header h1 {
margin: 0 0 10px;
font-size: clamp(32px, 5vw, 58px);
line-height: 1.05;
}
.tms-portal-header p {
max-width: 760px;
font-size: 17px;
line-height: 1.55;
}
.tms-portal-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 18px;
margin: 28px 0;
}
.tms-portal-tile {
display: flex;
flex-direction: column;
gap: 8px;
min-height: 170px;
padding: 22px;
border-radius: 18px;
background: rgba(255,255,255,.86);
border: 1px solid rgba(20,30,45,.10);
box-shadow: 0 12px 30px rgba(20,30,45,.08);
color: inherit;
text-decoration: none;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.tms-portal-tile:hover {
transform: translateY(-3px);
box-shadow: 0 16px 36px rgba(20,30,45,.13);
background: #fff;
}
.tms-portal-tile strong {
display: block;
font-size: 22px;
}
.tms-portal-tile__eyebrow {
font-size: 12px;
text-transform: uppercase;
letter-spacing: .08em;
opacity: .68;
}
.tms-portal-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 22px;
}
/* Course portal / generic subportal */
.tms-course-portal {
min-height: calc(100vh - 120px);
}
.tms-subportal-stage {
position: relative;
width: 100%;
min-height: min(72vh, 760px);
border-radius: 24px;
overflow: hidden;
background: #eef2f7;
box-shadow: 0 18px 45px rgba(20, 30, 45, .14);
border: 1px solid rgba(20, 30, 45, .10);
}
.tms-subportal-stage__image {
display: block;
width: 100%;
height: min(72vh, 760px);
object-fit: cover;
}
.tms-subportal-stage__overlay {
position: absolute;
inset: 0;
}
.tms-subportal-hotspot {
position: absolute;
transform: translate(-50%, -50%);
display: inline-flex;
flex-direction: column;
gap: 2px;
min-width: 150px;
padding: 12px 14px;
border-radius: 16px;
background: rgba(12, 22, 36, .78);
color: #fff;
text-decoration: none;
box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
backdrop-filter: blur(6px);
transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.tms-subportal-hotspot:hover {
transform: translate(-50%, -50%) translateY(-3px);
background: rgba(12, 22, 36, .9);
box-shadow: 0 16px 34px rgba(0, 0, 0, .32);
}
.tms-subportal-hotspot strong {
font-size: 15px;
line-height: 1.2;
}
.tms-subportal-hotspot span {
font-size: 12px;
opacity: .82;
}
.tms-portal-shell {
width: min(1400px, calc(100vw - 48px));
margin: 0 auto;
padding: 36px 0 48px;
}
.tms-portal-header {
margin-bottom: 28px;
}
.tms-portal-kicker {
margin: 0 0 8px;
text-transform: uppercase;
letter-spacing: .08em;
font-size: 12px;
opacity: .7;
}
.tms-portal-header h1 {
margin: 0 0 10px;
font-size: clamp(32px, 5vw, 58px);
line-height: 1.05;
}
.tms-portal-header p {
max-width: 760px;
font-size: 17px;
line-height: 1.55;
}
.tms-portal-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 18px;
margin: 28px 0;
}
.tms-portal-tile {
display: flex;
flex-direction: column;
gap: 8px;
min-height: 170px;
padding: 22px;
border-radius: 18px;
background: rgba(255,255,255,.86);
border: 1px solid rgba(20,30,45,.10);
box-shadow: 0 12px 30px rgba(20,30,45,.08);
color: inherit;
text-decoration: none;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.tms-portal-tile:hover {
transform: translateY(-3px);
box-shadow: 0 16px 36px rgba(20,30,45,.13);
background: #fff;
}
.tms-portal-tile strong {
display: block;
font-size: 22px;
}
.tms-portal-tile__eyebrow {
font-size: 12px;
text-transform: uppercase;
letter-spacing: .08em;
opacity: .68;
}
.tms-portal-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 22px;
}
/* Subportal hotspot visibility hardening */
.tms-subportal-stage__overlay {
z-index: 2;
pointer-events: auto;
}
.tms-subportal-hotspot {
z-index: 3;
border: 2px solid rgba(255,255,255,.85);
}
.tms-subportal-stage__image {
position: relative;
z-index: 1;
}
/* Responsive subportal stage sizing */
.tms-subportal-stage {
width: min(100%, 1600px);
margin: 0 auto;
aspect-ratio: 16 / 9;
min-height: auto;
max-height: calc(100vh - 220px);
}
.tms-subportal-stage__image {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 760px) {
.tms-subportal-stage {
display: none;
}
}
/* Subportal hotspot final visibility fix */
.tms-subportal-stage {
position: relative;
overflow: hidden;
}
.tms-subportal-stage__image {
display: block;
}
.tms-subportal-stage__overlay {
position: absolute;
inset: 0;
z-index: 20;
pointer-events: none;
}
.tms-subportal-hotspot {
position: absolute;
z-index: 30;
pointer-events: auto;
display: inline-flex;
flex-direction: column;
gap: 3px;
min-width: 160px;
background: rgba(12, 22, 36, .78);
color: #fff;
border: 1px solid rgba(255,255,255,.4);
}
.tms-subportal-hotspot:hover {
transform: translate(-50%, -50%) translateY(-4px);
background: rgba(12, 22, 36, .92);
box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
/* DB-driven subportal hotspots */
.tms-subportal-stage {
position: relative;
}
.tms-subportal-stage__overlay {
position: absolute;
inset: 0;
z-index: 20;
pointer-events: none;
}
.tms-subportal-hotspot {
position: absolute;
z-index: 30;
pointer-events: auto;
transform: none;
border: 1px solid rgba(255,255,255,.45);
background: rgba(12, 22, 36, .78);
color: #fff;
}
.tms-subportal-hotspot:hover {
transform: translateY(-3px);
background: rgba(12, 22, 36, .92);
}
/* Subportal builder compatibility */
.tms-course-portal.campus-portal {
position: relative;
}
.tms-course-portal .tms-subportal-stage {
position: relative;
}
.tms-course-portal .campus-hotspots,
.tms-course-portal .tms-subportal-stage__overlay {
position: absolute;
inset: 0;
z-index: 20;
}
.tms-course-portal .campus-hotspot.tms-subportal-hotspot {
position: absolute;
z-index: 30;
transform: none;
}
.tms-course-portal.is-edit-mode .campus-hotspot.tms-subportal-hotspot {
cursor: move;
outline: 2px dashed rgba(255,255,255,.7);
}
.tms-course-portal:not(.is-edit-mode) .tms-portal-admin {
opacity: .62;
}
.tms-course-portal:not(.is-edit-mode) .tms-portal-admin input,
.tms-course-portal:not(.is-edit-mode) .tms-portal-admin select,
.tms-course-portal:not(.is-edit-mode) .tms-portal-admin button {
pointer-events: none;
cursor: not-allowed;
}
/* Admin panel: free floating position */
.tms-portal-admin {
position: fixed !important;
top: 96px;
right: 16px;
bottom: auto !important;
max-height: calc(100vh - 120px);
overflow: auto;
}
.tms-portal-admin.is-dragging {
user-select: none;
}
/* Subportal stage sizing on wide screens */
.tms-course-portal {
width: min(1720px, calc(100vw - 48px));
}
.tms-course-portal .tms-subportal-stage {
aspect-ratio: 16 / 9;
max-height: calc(100vh - 220px);
}
.tms-course-portal .tms-subportal-stage__image {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Admin panel reset must always stay clickable */
#tmsPortalAdminResetPosition {
pointer-events: auto !important;
cursor: pointer !important;
opacity: 1 !important;
}
/* Reset button remains active even when admin panel is disabled */
.campus-portal:not(.is-edit-mode) #tmsPortalAdminResetPosition {
pointer-events: auto !important;
cursor: pointer !important;
opacity: 1 !important;
}
/* Subportal contrast fix */
.tms-course-portal .campus-btn,
.tms-course-portal .tms-portal-actions .campus-btn,
.tms-course-portal .campus-admin-switch .campus-btn {
color: #12306b !important;
background: #ffffff !important;
border: 1px solid rgba(18, 48, 107, .25) !important;
box-shadow: 0 8px 20px rgba(18, 48, 107, .08);
}
.tms-course-portal .campus-btn:hover,
.tms-course-portal .tms-portal-actions .campus-btn:hover,
.tms-course-portal .campus-admin-switch .campus-btn:hover {
color: #ffffff !important;
background: #2457ff !important;
border-color: #2457ff !important;
}
.tms-course-portal .campus-btn.is-active,
.tms-course-portal .campus-admin-switch .campus-btn.is-active {
color: #ffffff !important;
background: #2457ff !important;
border-color: #2457ff !important;
}
.tms-course-portal .tms-portal-actions a {
color: #12306b !important;
}
/* Responsive portal coordinate system */
.tms-subportal-stage {
position: relative;
width: min(100%, 1600px);
aspect-ratio: 16 / 9;
margin: 0 auto;
overflow: hidden;
background: #eef2f7;
}
.tms-subportal-stage__image {
display: block;
width: 100%;
height: 100%;
object-fit: contain !important;
}
.tms-subportal-stage__overlay,
.tms-course-portal .campus-hotspots,
.tms-generic-portal .campus-hotspots {
position: absolute;
inset: 0;
}
.tms-course-portal .campus-hotspot.tms-subportal-hotspot,
.tms-generic-portal .campus-hotspot.tms-subportal-hotspot {
position: absolute;
box-sizing: border-box;
}
/* Hauptportal: Auswahlrahmen nur im EditMode anzeigen */
.campus-portal:not(.is-edit-mode) .campus-hotspot.is-selected {
border-color: rgba(255,255,255,0.22) !important;
background: rgba(255,255,255,0.08) !important;
box-shadow: none !important;
}
/* --- Zoom Transition --- */
.campus-world.is-zooming {
transform-origin: center center;
transition: transform 900ms ease, filter 900ms ease;
filter: brightness(0.95) saturate(1.05);
}
.campus-hotspot.is-zoom-target {
transform: scale(1.08);
z-index: 30;
}}
.campus-world.is-zooming {
filter: brightness(0.85) blur(1px);
}
.campus-hotspot.is-zoom-target {
transform: scale(1.12);
filter: brightness(1.1);
}
/* --- Hauptportal Zoom Transition Override --- */
.campus-world.is-zooming {
transition: transform 2200ms cubic-bezier(0.16, 1, 0.3, 1), filter 2200ms cubic-bezier(0.16, 1, 0.3, 1) !important;
filter: brightness(0.82) saturate(1.08) !important;
}
.campus-hotspot.is-zoom-target {
transform: scale(1.28) !important;
z-index: 50 !important;
box-shadow: 0 0 0 6px rgba(255,255,255,0.28), 0 20px 60px rgba(0,0,0,0.35) !important;
}
/* Zoom darf nur waehrend der Fahrt dominieren */
.campus-world:not(.is-zooming) {
filter: none !important;
}
.campus-world:not(.is-zooming) .campus-hotspot {
z-index: auto !important;
}
/* Reset nach Browser-Zurueck / BFCache */
.campus-world:not(.is-zooming) {
filter: none !important;
}
.campus-world:not(.is-zooming) .campus-hotspot {
pointer-events: auto !important;
z-index: auto !important;
}
/* Platform hardening: touch/pointer support for Portalbuilder hotspots */
.campus-portal.is-edit-mode .campus-hotspot,
.campus-portal.is-edit-mode .campus-hotspot-resize-handle,
.tms-course-portal.is-edit-mode .campus-hotspot,
.tms-course-portal.is-edit-mode .campus-hotspot-resize-handle {
touch-action: none;
-webkit-user-select: none;
user-select: none;
}
.campus-hotspot-resize-handle {
min-width: 28px;
min-height: 28px;
}
/* Tablet/iPad hardening: keep Portalbuilder stage usable */
@media (max-width: 1180px) {
.tms-course-portal,
.tms-generic-portal {
width: calc(100vw - 24px) !important;
max-width: calc(100vw - 24px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
.tms-course-portal .tms-subportal-stage,
.tms-generic-portal .tms-subportal-stage {
width: 100% !important;
max-height: 58vh !important;
min-height: auto !important;
aspect-ratio: 16 / 9 !important;
}
.tms-course-portal .tms-subportal-stage__image,
.tms-generic-portal .tms-subportal-stage__image {
height: 100% !important;
min-height: auto !important;
}
.tms-portal-admin {
left: 12px !important;
right: 12px !important;
bottom: 12px !important;
top: auto !important;
width: auto !important;
max-width: none !important;
max-height: 34vh !important;
padding: 10px 12px !important;
border-radius: 16px !important;
}
.tms-portal-admin__header {
margin-bottom: 8px !important;
padding-bottom: 6px !important;
}
.tms-portal-admin__title {
font-size: 15px !important;
}
.tms-portal-admin .tms-form-row {
margin-bottom: 7px !important;
}
.tms-portal-admin .tms-form-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 7px !important;
}
.tms-portal-admin input,
.tms-portal-admin select {
padding: 7px 8px !important;
font-size: 13px !important;
}
.tms-portal-admin .campus-btn {
padding: 7px 9px !important;
font-size: 13px !important;
margin-top: 4px !important;
}
.tms-portal-actions {
gap: 6px !important;
margin-top: 10px !important;
}
}
/* Tablet/iPad large hardening */
@media (max-width: 1400px) {
#tmsPortalAdminPanel.tms-portal-admin {
left: 12px !important;
right: 12px !important;
bottom: 12px !important;
top: auto !important;
width: auto !important;
max-width: none !important;
max-height: 32vh !important;
height: auto !important;
padding: 10px 12px !important;
border-radius: 16px !important;
}
.tms-course-portal,
.tms-generic-portal {
width: calc(100vw - 24px) !important;
max-width: calc(100vw - 24px) !important;
}
.tms-course-portal .tms-subportal-stage,
.tms-generic-portal .tms-subportal-stage {
max-height: 62vh !important;
}
}
/* iPad large: compact right editor panel instead of bottom sheet */
@media (min-width: 1000px) and (max-width: 1400px) {
#tmsPortalAdminPanel.tms-portal-admin {
top: 88px !important;
right: 12px !important;
bottom: auto !important;
left: auto !important;
width: 300px !important;
max-width: 300px !important;
max-height: calc(100vh - 110px) !important;
height: auto !important;
}
.tms-course-portal,
.tms-generic-portal {
width: calc(100vw - 336px) !important;
max-width: calc(100vw - 336px) !important;
margin-left: 12px !important;
margin-right: 324px !important;
}
}
/* iPad large: compact main campus panel */
@media (min-width: 1000px) and (max-width: 1400px) {
section.campus-panel {
max-width: 300px !important;
padding: 10px 12px !important;
border-radius: 16px !important;
}
section.campus-panel h1 {
font-size: 17px !important;
margin-bottom: 5px !important;
}
section.campus-panel p {
font-size: 12px !important;
line-height: 1.3 !important;
}
section.campus-panel .campus-controls {
gap: 5px !important;
margin-top: 7px !important;
}
section.campus-panel .campus-btn,
section.campus-panel button {
padding: 6px 8px !important;
font-size: 12px !important;
border-radius: 9px !important;
}
}
/* iPad large: align main campus panel height with admin panel */
@media (min-width: 1000px) and (max-width: 1400px) {
section.campus-panel {
max-height: calc(100vh - 110px) !important;
overflow: auto !important;
}
}
/* Portalbuilder tablet: show full portal image, no cropping */
@media (min-width: 1000px) and (max-width: 1400px) {
.tms-course-portal .tms-subportal-stage__image,
.tms-generic-portal .tms-subportal-stage__image {
object-fit: contain !important;
background: #eef2f7 !important;
}
.tms-course-portal .tms-subportal-stage,
.tms-generic-portal .tms-subportal-stage {
overflow: hidden !important;
}
}
/* iPad large: keep portal stage visible within viewport */
@media (min-width: 1000px) and (max-width: 1400px) {
.tms-course-portal .tms-subportal-stage,
.tms-generic-portal .tms-subportal-stage {
height: calc(100vh - 190px) !important;
max-height: calc(100vh - 190px) !important;
min-height: 360px !important;
aspect-ratio: auto !important;
}
.tms-course-portal .tms-subportal-stage__image,
.tms-generic-portal .tms-subportal-stage__image {
height: 100% !important;
object-fit: contain !important;
}
}
/* Portal Shell: collapsible panels */
.tms-shell-collapse-btn {
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 9px !important;
line-height: 32px !important;
text-align: center !important;
cursor: pointer !important;
}
/* Left campus panel collapse button */
section.campus-panel {
position: fixed !important;
}
section.campus-panel .tms-shell-collapse-btn {
position: absolute !important;
top: 8px !important;
right: 8px !important;
z-index: 5 !important;
background: rgba(0,0,0,.28) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,.25) !important;
}
/* Right admin header button group */
#tmsPortalAdminPanel .tms-portal-admin__header {
position: relative !important;
min-height: 42px !important;
padding-right: 78px !important;
}
#tmsPortalAdminPanel #tmsPortalAdminResetPosition,
#tmsPortalAdminPanel .tms-shell-collapse-btn {
position: absolute !important;
top: 4px !important;
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
padding: 0 !important;
margin: 0 !important;
line-height: 32px !important;
text-align: center !important;
border-radius: 9px !important;
}
#tmsPortalAdminPanel #tmsPortalAdminResetPosition {
right: 42px !important;
}
#tmsPortalAdminPanel .tms-shell-collapse-btn {
right: 4px !important;
left: auto !important;
bottom: auto !important;
z-index: 2 !important;
background: #2457ff !important;
color: #fff !important;
border: 1px solid #2457ff !important;
}
/* Collapsed left panel */
.campus-portal.is-left-panel-collapsed section.campus-panel {
width: 48px !important;
height: 48px !important;
max-width: 48px !important;
min-height: 48px !important;
overflow: hidden !important;
padding: 8px !important;
}
.campus-portal.is-left-panel-collapsed section.campus-panel > *:not(.tms-shell-collapse-btn) {
display: none !important;
}
/* Collapsed admin panel: panel lives in body */
#tmsPortalAdminPanel.is-admin-panel-collapsed {
width: 52px !important;
height: 52px !important;
max-width: 52px !important;
max-height: 52px !important;
overflow: hidden !important;
padding: 8px !important;
}
#tmsPortalAdminPanel.is-admin-panel-collapsed > *:not(.tms-shell-collapse-btn) {
display: none !important;
}
/* Campus world touch pan */
.campus-world,
[data-campus-strip],
[data-campus-world] {
touch-action: pan-y;
-webkit-user-select: none;
user-select: none;
}
/* Portal shell: floating TMS header overlay */
.tms-body--portal-shell .tms-main-header {
position: fixed !important;
top: 10px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 8000 !important;
width: min(1100px, calc(100vw - 32px)) !important;
border: 1px solid rgba(255,255,255,.55) !important;
border-radius: 18px !important;
background: rgba(255,255,255,.82) !important;
box-shadow: 0 14px 40px rgba(0,0,0,.16) !important;
backdrop-filter: blur(16px) saturate(1.2) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
}
.tms-body--portal-shell .tms-main-header > div {
max-width: none !important;
padding: 8px 12px !important;
}
.tms-body--portal-shell .tms-main-content {
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
@media (min-width: 1000px) and (max-width: 1400px) {
.tms-body--portal-shell .tms-main-header {
top: 8px !important;
width: calc(100vw - 260px) !important;
left: 50% !important;
}
.tms-body--portal-shell .tms-main-header > div {
padding: 6px 10px !important;
gap: 8px !important;
}
.tms-body--portal-shell .tms-main-header a,
.tms-body--portal-shell .tms-main-header select {
font-size: 13px !important;
}
}
/* Portal shell: floating real TMS header */
body:has([data-campus-portal]) .tms-header {
position: fixed !important;
top: 10px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 8000 !important;
width: min(920px, calc(100vw - 180px)) !important;
border: 1px solid rgba(255,255,255,.55) !important;
border-radius: 18px !important;
background: rgba(255,255,255,.82) !important;
box-shadow: 0 14px 40px rgba(0,0,0,.16) !important;
backdrop-filter: blur(16px) saturate(1.2) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
}
body:has([data-campus-portal]) .tms-main {
padding-top: 0 !important;
margin-top: 0 !important;
}
@media (min-width: 1000px) and (max-width: 1400px) {
body:has([data-campus-portal]) .tms-header {
top: 8px !important;
width: calc(100vw - 260px) !important;
}
}
/* FINAL Portal header compact override */
html body:has([data-campus-portal]) header.tms-header {
width: 920px !important;
max-width: calc(100vw - 260px) !important;
min-width: 0 !important;
}
@media (max-width: 1400px) {
html body:has([data-campus-portal]) header.tms-header {
width: calc(100vw - 360px) !important;
max-width: 920px !important;
}
}
/* FINAL Portal header smaller */
html body:has([data-campus-portal]) header.tms-header {
width: 760px !important;
max-width: calc(100vw - 360px) !important;
}
/* FINAL Portal header ultra compact */
html body:has([data-campus-portal]) header.tms-header {
width: 560px !important;
max-width: calc(100vw - 520px) !important;
border-radius: 26px !important;
}
html body:has([data-campus-portal]) header.tms-header > div {
padding: 5px 10px !important;
gap: 6px !important;
}
html body:has([data-campus-portal]) header.tms-header a,
html body:has([data-campus-portal]) header.tms-header select {
font-size: 11px !important;
padding: 4px 7px !important;
}
html body:has([data-campus-portal]) header.tms-header .tms-brand,
html body:has([data-campus-portal]) header.tms-header strong,
html body:has([data-campus-portal]) header.tms-header b {
font-size: 12px !important;
}
/* Campus panel reset button visibility */
#tmsCampusPanelResetPosition {
position: absolute !important;
top: 8px !important;
right: 48px !important;
z-index: 6 !important;
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
padding: 0 !important;
margin: 0 !important;
font-size: 0 !important;
border-radius: 9px !important;
}
#tmsCampusPanelResetPosition::before {
content: "↺";
font-size: 18px;
line-height: 32px;
}
/* Campus status / CTA draggable shell */
#tmsCampusStatusPanel {
cursor: grab !important;
}
#tmsCampusStatusPanel.is-dragging {
cursor: grabbing !important;
box-shadow: 0 18px 46px rgba(0,0,0,.34) !important;
}
.campus-status-reset {
position: absolute !important;
top: 8px !important;
right: 8px !important;
z-index: 4 !important;
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 9px !important;
border: 1px solid rgba(255,255,255,.28) !important;
background: rgba(0,0,0,.25) !important;
color: #fff !important;
cursor: pointer !important;
}
#tmsCampusStatusPanel strong,
#tmsCampusStatusPanel span {
padding-right: 34px !important;
}
/* Admin checkbox alignment fix */
#tmsPortalAdminPanel .tms-form-row--checkbox label {
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 8px !important;
width: auto !important;
min-height: 34px !important;
white-space: nowrap !important;
}
#tmsPortalAdminPanel .tms-form-row--checkbox input[type="checkbox"] {
display: inline-block !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
margin: 0 !important;
flex: 0 0 auto !important;
}
/* Campus CTA inline editing */
.campus-status-edit {
position: absolute !important;
top: 8px !important;
right: 44px !important;
z-index: 4 !important;
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 9px !important;
border: 1px solid rgba(255,255,255,.28) !important;
background: rgba(0,0,0,.25) !important;
color: #fff !important;
cursor: pointer !important;
}
.campus-status-edit.is-active {
background: #16a34a !important;
border-color: #16a34a !important;
}
#tmsCampusStatusPanel strong,
#tmsCampusStatusPanel span {
display: block;
}
#tmsCampusStatusPanel .is-editable {
outline: 1px dashed rgba(255,255,255,.65);
outline-offset: 3px;
border-radius: 6px;
cursor: text;
}
/* Admin collapsed restore button fix */
#tmsPortalAdminPanel.is-admin-panel-collapsed {
overflow: visible !important;
}
#tmsPortalAdminPanel.is-admin-panel-collapsed > * {
display: none !important;
}
#tmsPortalAdminPanel.is-admin-panel-collapsed > .tms-portal-admin__header {
display: block !important;
position: absolute !important;
inset: 8px !important;
min-height: 34px !important;
padding: 0 !important;
margin: 0 !important;
}
#tmsPortalAdminPanel.is-admin-panel-collapsed .tms-portal-admin__header > *:not(.tms-shell-collapse-btn) {
display: none !important;
}
#tmsPortalAdminPanel.is-admin-panel-collapsed .tms-shell-collapse-btn {
display: block !important;
position: absolute !important;
top: 0 !important;
right: 0 !important;
z-index: 20 !important;
pointer-events: auto !important;
background: #2457ff !important;
color: #fff !important;
border: 1px solid #2457ff !important;
}
/* TMS Portal Builder Resize v1 */
.tms-resizable {
min-width: 180px;
min-height: 80px;
}
.tms-resize-handle {
position: absolute;
right: 6px;
bottom: 6px;
width: 14px;
height: 14px;
border-radius: 4px;
cursor: nwse-resize;
z-index: 50;
opacity: 0;
transition: opacity .16s ease;
background: rgba(255,255,255,.72);
border: 1px solid rgba(0,0,0,.22);
box-shadow: 0 2px 8px rgba(0,0,0,.18);
touch-action: none;
}
.tms-resizable:hover > .tms-resize-handle,
.tms-resizable.is-resizing > .tms-resize-handle,
.is-edit-mode .tms-resizable > .tms-resize-handle {
opacity: 1;
}
.tms-resizable.is-resizing {
user-select: none;
}
#tmsCampusStatusPanel.tms-resizable,
section.campus-panel.tms-resizable,
#tmsPortalAdminPanel.tms-resizable {
position: fixed;
}
.campus-portal.is-left-panel-collapsed section.campus-panel .tms-resize-handle,
#tmsPortalAdminPanel.is-admin-panel-collapsed .tms-resize-handle {
display: none;
}
/* TMS Portal Builder Resize v1.1 - visible directional handles */
.tms-resize-handle {
opacity: .9;
background: rgba(20, 28, 42, .92);
border: 2px solid rgba(255,255,255,.92);
box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.tms-resize-handle::after {
content: "";
position: absolute;
inset: 3px;
border-right: 2px solid rgba(255,255,255,.85);
border-bottom: 2px solid rgba(255,255,255,.85);
}
#tmsPortalAdminPanel > .tms-resize-handle {
left: 6px;
right: auto;
bottom: 6px;
cursor: nesw-resize;
}
#tmsPortalAdminPanel > .tms-resize-handle::after {
border-right: 0;
border-left: 2px solid rgba(255,255,255,.85);
border-bottom: 2px solid rgba(255,255,255,.85);
}
section.campus-panel > .tms-resize-handle,
#tmsCampusStatusPanel > .tms-resize-handle {
right: 6px;
left: auto;
bottom: 6px;
cursor: nwse-resize;
}
/* TMS Portal Builder Resize v1.2 - allow free panel sizing */
#tmsPortalAdminPanel.tms-resizable,
section.campus-panel.tms-resizable,
#tmsCampusStatusPanel.tms-resizable {
max-width: none !important;
max-height: none !important;
box-sizing: border-box;
overflow: auto;
}
/* TMS Portal Builder Hotspot Quick Actions v1 */
.tms-hotspot-quick-actions {
position: fixed;
z-index: 9999;
display: none;
gap: 6px;
align-items: center;
padding: 5px;
border-radius: 999px;
background: rgba(20, 28, 42, .92);
border: 1px solid rgba(255,255,255,.28);
box-shadow: 0 8px 22px rgba(0,0,0,.28);
backdrop-filter: blur(8px);
}
.tms-hotspot-quick-actions.is-visible {
display: flex;
}
.tms-hotspot-quick-actions button {
width: 30px;
height: 30px;
border: 0;
border-radius: 999px;
background: rgba(255,255,255,.14);
color: #fff;
font-size: 14px;
line-height: 1;
cursor: pointer;
}
.tms-hotspot-quick-actions button:hover {
background: rgba(255,255,255,.26);
}
.campus-hotspot.is-selected {
outline: 2px solid rgba(255,255,255,.92);
outline-offset: 4px;
box-shadow: 0 0 0 4px rgba(20, 28, 42, .45);
}
/* TMS Portal Builder Inline Rename v1 */
.campus-hotspot-label.is-inline-editing {
display: inline-block;
min-width: 42px;
padding: 2px 6px;
border-radius: 8px;
background: rgba(255,255,255,.96);
color: #111827;
outline: 2px solid rgba(20,28,42,.72);
box-shadow: 0 4px 14px rgba(0,0,0,.25);
cursor: text;
user-select: text;
}
/* TMS Portal Builder Rename Bubble v2 */
.tms-hotspot-rename-bubble {
position: fixed;
z-index: 10000;
display: none;
padding: 8px;
border-radius: 14px;
background: rgba(20, 28, 42, .96);
border: 1px solid rgba(255,255,255,.28);
box-shadow: 0 10px 28px rgba(0,0,0,.32);
backdrop-filter: blur(8px);
}
.tms-hotspot-rename-bubble.is-visible {
display: block;
}
.tms-hotspot-rename-bubble input {
width: 220px;
max-width: 56vw;
border: 0;
border-radius: 10px;
padding: 9px 11px;
font-size: 14px;
line-height: 1.2;
color: #111827;
background: #fff;
outline: 2px solid rgba(255,255,255,.35);
}
.tms-hotspot-rename-bubble__hint {
margin-top: 5px;
color: rgba(255,255,255,.72);
font-size: 11px;
text-align: center;
}
/* TMS Portal Builder Visibility Toggle v1 */
.is-edit-mode .campus-hotspot.is-hotspot-hidden {
opacity: .35;
filter: grayscale(1);
outline-style: dashed;
}
.campus-hotspot.is-hotspot-hidden:not(.is-selected) {
opacity: .18;
}
/* TMS Portal Builder Hidden Hotspot UX v2 */
.campus-portal:not(.is-edit-mode) .campus-hotspot[data-is-visible="0"],
.campus-portal:not(.is-edit-mode) .campus-hotspot.is-hotspot-hidden {
display: none !important;
}
.campus-portal.is-edit-mode .campus-hotspot[data-is-visible="0"],
.campus-portal.is-edit-mode .campus-hotspot.is-hotspot-hidden {
display: block !important;
opacity: .28;
filter: grayscale(1);
background: rgba(31, 41, 55, .12) !important;
border: 1px dashed rgba(31, 41, 55, .55) !important;
box-shadow: none !important;
}
.campus-portal.is-edit-mode .campus-hotspot[data-is-visible="0"].is-selected,
.campus-portal.is-edit-mode .campus-hotspot.is-hotspot-hidden.is-selected {
opacity: .65;
outline-style: dashed;
}
.campus-portal.is-edit-mode .campus-hotspot[data-is-visible="0"] .campus-hotspot-label,
.campus-portal.is-edit-mode .campus-hotspot.is-hotspot-hidden .campus-hotspot-label {
background: rgba(31, 41, 55, .75) !important;
color: #fff !important;
}
/* TMS Portal Builder Duplicate v1 */
#tmsPortalDuplicateHotspot.is-active {
transform: scale(1.03);
box-shadow: 0 0 0 3px rgba(34,197,94,.28);
}
/* TMS Portal Builder Dirty State v1 */
.tms-portal-dirty-indicator {
display: inline-flex;
align-items: center;
gap: 5px;
margin-left: auto;
padding: 4px 8px;
border-radius: 999px;
font-size: 11px;
line-height: 1;
white-space: nowrap;
color: rgba(255,255,255,.78);
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.16);
}
.tms-portal-dirty-indicator::before {
content: "✓";
font-weight: 700;
}
.tms-portal-dirty-indicator.is-dirty {
color: #fff;
background: rgba(245,158,11,.92);
border-color: rgba(255,255,255,.25);
}
.tms-portal-dirty-indicator.is-dirty::before {
content: "●";
}
/* TMS Portal Builder Dirty State v1.1 - stronger visibility */
#tmsPortalAdminHeader .tms-portal-dirty-indicator {
display: inline-flex !important;
position: relative;
z-index: 20;
margin-left: 8px;
margin-right: 34px;
padding: 6px 10px;
font-size: 12px;
font-weight: 700;
color: #102018;
background: rgba(187,247,208,.96);
border: 1px solid rgba(22,101,52,.35);
}
#tmsPortalAdminHeader .tms-portal-dirty-indicator.is-dirty {
color: #3b2200;
background: rgba(251,191,36,.96);
border-color: rgba(146,64,14,.45);
}
/* TMS Portal Builder Save Lifecycle v1 */
.tms-portal-dirty-indicator.is-saving {
color: #0f172a !important;
background: rgba(191,219,254,.96) !important;
border-color: rgba(37,99,235,.35) !important;
}
.tms-portal-dirty-indicator.is-saving::before {
content: "⟳";
}
.tms-portal-dirty-indicator.is-error {
color: #fff !important;
background: rgba(220,38,38,.94) !important;
border-color: rgba(255,255,255,.35) !important;
}
.tms-portal-dirty-indicator.is-error::before {
content: "⚠";
}
/* TMS Portal Builder Undo v1 */
.tms-portal-undo-btn {
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 6px;
padding: 5px 9px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.20);
background: rgba(255,255,255,.12);
color: #fff;
font-size: 12px;
font-weight: 700;
cursor: pointer;
}
.tms-portal-undo-btn:disabled {
opacity: .35;
cursor: default;
}
/* TMS Portal Builder Undo v1.1 - visible header button */
#tmsPortalAdminHeader .tms-portal-undo-btn {
display: inline-flex !important;
position: relative;
z-index: 30;
margin-left: 6px;
margin-right: 4px;
padding: 6px 9px;
min-width: 38px;
border-radius: 999px;
background: rgba(37,99,235,.96) !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,.35) !important;
box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
#tmsPortalAdminHeader .tms-portal-undo-btn:disabled {
background: rgba(148,163,184,.7) !important;
color: rgba(255,255,255,.75) !important;
opacity: .7;
}
/* TMS Portal Builder Preview Frame disabled v1 */
.campus-hotspot-preview,
.campus-hotspot-preview.is-visible {
display: none !important;
}
/* TMS Portal Builder Redo v1 */
#tmsPortalAdminHeader .tms-portal-redo-btn {
background: rgba(79,70,229,.94) !important;
}
#tmsPortalAdminHeader .tms-portal-redo-btn:disabled {
background: rgba(148,163,184,.7) !important;
}
/* TMS Portal Builder Color Groups v1 */
.campus-hotspot[data-hotspot-color="blue"] {
background: rgba(37,99,235,.58) !important;
border-color: rgba(191,219,254,.85) !important;
}
.campus-hotspot[data-hotspot-color="green"] {
background: rgba(22,163,74,.58) !important;
border-color: rgba(187,247,208,.85) !important;
}
.campus-hotspot[data-hotspot-color="orange"] {
background: rgba(245,158,11,.62) !important;
border-color: rgba(254,215,170,.9) !important;
}
.campus-hotspot[data-hotspot-color="red"] {
background: rgba(220,38,38,.58) !important;
border-color: rgba(254,202,202,.9) !important;
}
.campus-hotspot[data-hotspot-color="purple"] {
background: rgba(124,58,237,.58) !important;
border-color: rgba(221,214,254,.9) !important;
}
.tms-hotspot-quick-actions[data-hotspot-color="blue"] {
background: rgba(37,99,235,.82);
}
.tms-hotspot-quick-actions[data-hotspot-color="green"] {
background: rgba(22,163,74,.82);
}
.tms-hotspot-quick-actions[data-hotspot-color="orange"] {
background: rgba(245,158,11,.84);
}
.tms-hotspot-quick-actions[data-hotspot-color="red"] {
background: rgba(220,38,38,.82);
}
.tms-hotspot-quick-actions[data-hotspot-color="purple"] {
background: rgba(124,58,237,.82);
}
.tms-hotspot-color-palette {
display: none;
gap: 5px;
padding-left: 4px;
margin-left: 2px;
border-left: 1px solid rgba(255,255,255,.24);
}
.tms-hotspot-quick-actions.is-color-open .tms-hotspot-color-palette {
display: inline-flex;
}
.tms-hotspot-color-chip {
width: 22px !important;
height: 22px !important;
padding: 0 !important;
border: 2px solid rgba(255,255,255,.72) !important;
box-shadow: 0 1px 5px rgba(0,0,0,.22);
}
.tms-hotspot-color-chip[data-hotspot-color-value="default"] {
background: rgba(20,28,42,.72) !important;
}
.tms-hotspot-color-chip[data-hotspot-color-value="blue"] {
background: #2563eb !important;
}
.tms-hotspot-color-chip[data-hotspot-color-value="green"] {
background: #16a34a !important;
}
.tms-hotspot-color-chip[data-hotspot-color-value="orange"] {
background: #f59e0b !important;
}
.tms-hotspot-color-chip[data-hotspot-color-value="red"] {
background: #dc2626 !important;
}
.tms-hotspot-color-chip[data-hotspot-color-value="purple"] {
background: #7c3aed !important;
}
/* TMS Portal Builder Color Frame v1 */
.campus-hotspot {
--tms-hotspot-frame: rgba(255,255,255,.42);
--tms-hotspot-glow: rgba(255,255,255,.22);
}
.campus-hotspot[data-hotspot-color="blue"] {
--tms-hotspot-frame: rgba(147,197,253,.96);
--tms-hotspot-glow: rgba(37,99,235,.45);
}
.campus-hotspot[data-hotspot-color="green"] {
--tms-hotspot-frame: rgba(134,239,172,.96);
--tms-hotspot-glow: rgba(22,163,74,.45);
}
.campus-hotspot[data-hotspot-color="orange"] {
--tms-hotspot-frame: rgba(253,186,116,.96);
--tms-hotspot-glow: rgba(245,158,11,.48);
}
.campus-hotspot[data-hotspot-color="red"] {
--tms-hotspot-frame: rgba(252,165,165,.96);
--tms-hotspot-glow: rgba(220,38,38,.45);
}
.campus-hotspot[data-hotspot-color="purple"] {
--tms-hotspot-frame: rgba(196,181,253,.96);
--tms-hotspot-glow: rgba(124,58,237,.45);
}
.campus-hotspot[data-hotspot-color] {
border-color: var(--tms-hotspot-frame) !important;
}
.campus-hotspot[data-hotspot-color]:hover,
.campus-hotspot[data-hotspot-color]:focus {
border-color: var(--tms-hotspot-frame) !important;
box-shadow: 0 0 0 4px var(--tms-hotspot-glow) !important;
}
.campus-hotspot[data-hotspot-color].is-selected,
.is-edit-mode .campus-hotspot[data-hotspot-color].is-selected {
outline: 3px solid var(--tms-hotspot-frame) !important;
outline-offset: 4px;
box-shadow: 0 0 0 6px var(--tms-hotspot-glow) !important;
}
.campus-hotspot[data-hotspot-color] .campus-hotspot-resize-handle {
border-color: var(--tms-hotspot-frame) !important;
box-shadow: 0 0 0 2px var(--tms-hotspot-glow) !important;
}
/* TMS Portal Builder Vertical Toolbar v1 */
.tms-hotspot-quick-actions {
display: flex !important;
flex-direction: column !important;
align-items: center;
gap: 8px;
padding: 10px 8px !important;
border-radius: 18px !important;
min-width: 52px;
}
.tms-hotspot-quick-actions button {
width: 38px !important;
height: 38px !important;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 12px !important;
}
.tms-hotspot-color-palette {
flex-direction: column !important;
border-left: none !important;
border-top: 1px solid rgba(255,255,255,.24);
margin-left: 0 !important;
padding-left: 0 !important;
padding-top: 8px;
margin-top: 4px;
}
.tms-hotspot-color-chip {
width: 26px !important;
height: 26px !important;
border-radius: 999px !important;
}
/* TMS Portal Builder Color Scope v1 - colors only in edit mode */
.campus-portal:not(.is-edit-mode) .campus-hotspot[data-hotspot-color] {
background: rgba(15,23,42,.34) !important;
border-color: rgba(255,255,255,.22) !important;
box-shadow: none !important;
outline-color: transparent !important;
}
/* TMS Portal Builder Smart Toolbar v1 */
.tms-hotspot-quick-actions.is-horizontal {
flex-direction: row !important;
min-width: auto;
min-height: 52px;
}
.tms-hotspot-quick-actions.is-horizontal .tms-hotspot-color-palette {
flex-direction: row !important;
border-top: none !important;
border-left: 1px solid rgba(255,255,255,.24) !important;
padding-top: 0 !important;
margin-top: 0 !important;
padding-left: 8px !important;
margin-left: 4px !important;
}
/* TMS Portal Builder Non-Edit Neutral Hotspots v1 */
.campus-portal:not(.is-edit-mode) .campus-hotspot[data-hotspot-color] {
background: rgba(255,255,255,.12) !important;
border-color: rgba(255,255,255,.24) !important;
box-shadow: none !important;
}
.campus-portal:not(.is-edit-mode) .campus-hotspot[data-hotspot-color]:hover,
.campus-portal:not(.is-edit-mode) .campus-hotspot[data-hotspot-color]:focus {
background: rgba(255,255,255,.18) !important;
border-color: rgba(255,255,255,.38) !important;
}
/* TMS Portal Builder Inspector Sections v1 */
.tms-portal-section {
margin: 0 0 12px;
padding: 10px;
border-radius: 14px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
}
.tms-portal-section__title {
margin: 0 0 9px;
font-size: 12px;
line-height: 1.2;
font-weight: 800;
letter-spacing: .02em;
color: rgba(255,255,255,.78);
text-transform: uppercase;
}
.tms-portal-section__body {
display: grid;
gap: 9px;
}
/* TMS Portal Builder Inspector Sections Visual v2 */
.tms-portal-section {
position: relative;
overflow: hidden;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.16);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.08),
0 10px 24px rgba(0,0,0,.10);
backdrop-filter: blur(10px);
}
.tms-portal-section::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 3px;
background: linear-gradient(
to bottom,
rgba(59,130,246,.95),
rgba(59,130,246,.25)
);
opacity: .9;
}
.tms-portal-section__title {
display: flex;
align-items: center;
gap: 8px;
padding-left: 2px;
font-size: 11px;
letter-spacing: .08em;
color: rgba(255,255,255,.72);
}
.tms-portal-section__body {
gap: 12px;
}
.tms-portal-section .tms-form-grid {
margin-top: 2px;
}
.tms-portal-section .tms-form-row label {
font-size: 13px;
font-weight: 700;
}
.tms-portal-section input,
.tms-portal-section select {
background: rgba(255,255,255,.78) !important;
}
.tms-portal-section:hover {
border-color: rgba(255,255,255,.22);
background: rgba(255,255,255,.12);
}
/* TMS Portal Builder Inspector Sections Drag/Resize Safety v1 */
.tms-portal-section {
overflow: visible !important;
backdrop-filter: none !important;
}
#tmsPortalAdminPanel {
overflow: auto !important;
max-height: calc(100vh - 24px) !important;
}
#tmsPortalAdminPanel.is-dragging,
#tmsPortalAdminPanel.is-resizing {
overflow: hidden !important;
}
#tmsPortalAdminPanel > .tms-resize-handle {
position: absolute !important;
left: 8px !important;
right: auto !important;
bottom: 8px !important;
transform: none !important;
}
/* TMS Portal Builder Admin Panel Height/Scroll Safety v2 */
#tmsPortalAdminPanel {
max-height: calc(100vh - 16px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain;
}
#tmsPortalAdminPanel .tms-portal-admin__form {
min-height: 0;
}
#tmsPortalAdminPanel > .tms-resize-handle {
position: sticky !important;
left: 8px !important;
bottom: 8px !important;
right: auto !important;
float: left;
display: block;
margin-top: -22px;
z-index: 80;
}
#tmsPortalAdminPanel.is-dragging {
user-select: none;
}
#tmsPortalAdminPanel.is-dragging * {
pointer-events: none;
}
#tmsPortalAdminPanel.is-dragging .tms-portal-admin__header {
pointer-events: auto;
}
/* TMS Portal Builder Inspector Section Collapse v1 */
.tms-portal-section__title {
cursor: pointer;
user-select: none;
}
.tms-portal-section__title::after {
content: "–";
margin-left: auto;
font-size: 14px;
opacity: .8;
}
.tms-portal-section.is-collapsed .tms-portal-section__title::after {
content: "+";
}
.tms-portal-section.is-collapsed .tms-portal-section__body {
display: none;
}
.tms-portal-section.is-collapsed {
padding-bottom: 8px;
}
/* TMS Portal Builder Resize Handle Fix v3 */
#tmsPortalAdminPanel {
position: fixed !important;
}
#tmsPortalAdminPanel > .tms-resize-handle {
position: absolute !important;
left: 8px !important;
right: auto !important;
bottom: 8px !important;
float: none !important;
margin: 0 !important;
transform: none !important;
z-index: 120 !important;
}
/* TMS Portal Builder Inspector Collapse Toggle Visual v1 */
.tms-portal-section__title {
position: relative;
padding-right: 34px;
}
.tms-portal-section__title::after {
position: absolute;
right: 2px;
top: 50%;
transform: translateY(-50%);
width: 24px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.22);
color: rgba(255,255,255,.88);
font-size: 14px;
line-height: 1;
}
.tms-portal-section__title:hover::after {
background: rgba(255,255,255,.22);
border-color: rgba(255,255,255,.34);
}
/* TMS Portal Builder Inspector Collapse Toggle Visual v2 */
.tms-portal-section .tms-portal-section__title::after {
right: 4px !important;
width: 26px !important;
height: 22px !important;
color: #ffffff !important;
background: rgba(15,23,42,.72) !important;
border: 1px solid rgba(255,255,255,.42) !important;
box-shadow: 0 2px 8px rgba(0,0,0,.22) !important;
opacity: 1 !important;
z-index: 5;
}
.tms-portal-section .tms-portal-section__title:hover::after {
background: rgba(15,23,42,.92) !important;
}
/* TMS Portal Builder Target Inspector v1 */
.tms-form-row.is-hidden-by-target {
display: none !important;
}
.tms-form-hint.is-target-helper {
margin-top: 6px;
padding: 7px 9px;
border-radius: 10px;
background: rgba(255,255,255,.10);
color: rgba(255,255,255,.74);
font-size: 12px;
line-height: 1.35;
}
/* TMS Portal Builder URL Hint v1 */
.tms-form-hint.is-warning {
background: rgba(245, 158, 11, .14);
border: 1px solid rgba(245, 158, 11, .32);
color: rgba(255, 236, 179, .96);
}
/* TMS Portal Builder Target Type Badges v1 */
.campus-hotspot-type-badge {
display: none;
position: absolute;
top: -9px;
right: -9px;
z-index: 8;
min-width: 22px;
height: 22px;
padding: 0 6px;
align-items: center;
justify-content: center;
border-radius: 999px;
font-size: 11px;
font-weight: 900;
line-height: 1;
color: #fff;
background: rgba(15,23,42,.86);
border: 1px solid rgba(255,255,255,.62);
box-shadow: 0 3px 10px rgba(0,0,0,.28);
pointer-events: none;
}
.campus-portal.is-edit-mode .campus-hotspot-type-badge {
display: inline-flex;
}
.campus-hotspot[data-target-type="view"] .campus-hotspot-type-badge::before {
content: "V";
}
.campus-hotspot[data-target-type="module"] .campus-hotspot-type-badge::before {
content: "M";
}
.campus-hotspot[data-target-type="url"] .campus-hotspot-type-badge::before {
content: "↗";
}
.campus-hotspot[data-target-type="none"] .campus-hotspot-type-badge::before {
content: "•";
}
.campus-hotspot[data-target-type="module"] .campus-hotspot-type-badge {
background: rgba(79,70,229,.92);
}
.campus-hotspot[data-target-type="url"] .campus-hotspot-type-badge {
background: rgba(14,116,144,.92);
}
.campus-hotspot[data-target-type="none"] .campus-hotspot-type-badge {
background: rgba(100,116,139,.92);
}
/* TMS Portal Builder Module Badge Colors v2 */
.campus-hotspot[data-target-type="module"][data-module-color="blue"] .campus-hotspot-type-badge {
background: rgba(37, 99, 235, .94);
}
.campus-hotspot[data-target-type="module"][data-module-color="purple"] .campus-hotspot-type-badge {
background: rgba(124, 58, 237, .94);
}
.campus-hotspot[data-target-type="module"][data-module-color="green"] .campus-hotspot-type-badge {
background: rgba(22, 163, 74, .94);
}
.campus-hotspot[data-target-type="module"][data-module-color="orange"] .campus-hotspot-type-badge {
background: rgba(234, 88, 12, .94);
}
.campus-hotspot[data-target-type="module"][data-module-color="red"] .campus-hotspot-type-badge {
background: rgba(220, 38, 38, .94);
}
/* TMS Portal Builder Widget Target Badge v1 */
.campus-hotspot[data-target-type="widget"] .campus-hotspot-type-badge::before {
content: "W";
}
.campus-hotspot[data-target-type="widget"] .campus-hotspot-type-badge {
background: rgba(16, 185, 129, .94);
}
/* TMS Portal Builder Widget Target Badge v1 */
.campus-hotspot[data-target-type="widget"] .campus-hotspot-type-badge::before {
content: "W";
}
.campus-hotspot[data-target-type="widget"] .campus-hotspot-type-badge {
background: rgba(16, 185, 129, .94);
}
/* TMS Portal Widget Runtime v1 */
.tms-portal-widget-overlay {
position: fixed;
inset: 0;
z-index: 12000;
display: none;
align-items: center;
justify-content: center;
background: rgba(2, 6, 23, .55);
backdrop-filter: blur(8px);
}
.tms-portal-widget-overlay.is-visible {
display: flex;
}
.tms-portal-widget-panel {
width: min(92vw, 520px);
border-radius: 24px;
padding: 28px;
background: rgba(15, 23, 42, .94);
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 30px 90px rgba(0,0,0,.45);
color: #fff;
}
.tms-portal-widget-title {
font-size: 24px;
font-weight: 800;
margin-bottom: var(--tms-bridge-bottom-offset);
}
.tms-portal-widget-body {
color: rgba(255,255,255,.78);
line-height: 1.6;
}
.tms-portal-widget-close {
margin-top: 22px;
}
/* TMS Identity Widget Experience v1 */
.tms-portal-widget-overlay {
animation: tmsPortalWidgetFade .22s ease;
}
.tms-portal-widget-panel {
transform: translateY(18px) scale(.96);
opacity: 0;
animation: tmsPortalWidgetPanelIn .28s ease forwards;
}
.tms-portal-widget-actions {
display: flex;
gap: 10px;
margin-top: 24px;
flex-wrap: wrap;
}
.tms-portal-widget-actions .campus-btn {
flex: 1 1 180px;
}
@keyframes tmsPortalWidgetFade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes tmsPortalWidgetPanelIn {
from {
opacity: 0;
transform: translateY(28px) scale(.92);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* TMS Portal Transition Runtime v1 */
.tms-portal-transition {
position: fixed;
inset: 0;
z-index: 99980;
display: none;
align-items: center;
justify-content: center;
padding: 32px;
background: rgba(8, 15, 28, .52);
backdrop-filter: blur(8px);
}
.tms-portal-transition.is-visible {
display: flex;
animation: tmsPortalTransitionFadeIn .28s ease forwards;
}
.tms-portal-transition__orb {
width: min(320px, 70vw);
min-height: 260px;
border-radius: 46% 54% 48% 52% / 54% 48% 52% 46%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
padding: 34px;
background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.34), rgba(92,130,255,.22) 38%, rgba(25,34,76,.72) 100%);
box-shadow: 0 28px 90px rgba(0,0,0,.36), inset 0 0 34px rgba(255,255,255,.12);
color: #fff;
text-align: center;
animation: tmsPortalTransitionOrbIn .5s ease forwards, tmsPortalTransitionFloat 2.4s ease-in-out infinite .5s;
}
.tms-portal-transition__icon {
font-size: 54px;
line-height: 1;
filter: drop-shadow(0 8px 18px rgba(0,0,0,.28));
}
.tms-portal-transition__title {
font-size: 1.18rem;
font-weight: 700;
letter-spacing: .02em;
}
.tms-portal-transition__text {
font-size: .94rem;
opacity: .84;
}
@keyframes tmsPortalTransitionFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes tmsPortalTransitionOrbIn {
from { opacity: 0; transform: translateY(22px) scale(.88); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tmsPortalTransitionFloat {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-8px) scale(1.015); }
}
/* TMS Portal Empty State / Setup Wizard v1 */
.tms-portal-empty-state {
position: absolute;
z-index: 80;
left: 50%;
top: 50%;
width: min(520px, calc(100vw - 40px));
transform: translate(-50%, -50%);
padding: 24px 26px;
border-radius: 22px;
background: rgba(15, 23, 42, .84);
border: 1px solid rgba(255,255,255,.18);
box-shadow: 0 24px 80px rgba(0,0,0,.34);
color: #fff;
backdrop-filter: blur(18px);
}
.tms-portal-empty-state__eyebrow {
font-size: 12px;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(255,255,255,.68);
margin-bottom: 8px;
}
.tms-portal-empty-state h2 {
margin: 0 0 10px;
font-size: 28px;
line-height: 1.12;
}
.tms-portal-empty-state p {
margin: 0 0 14px;
color: rgba(255,255,255,.78);
line-height: 1.55;
}
.tms-portal-empty-state ol {
margin: 0;
padding-left: 20px;
color: rgba(255,255,255,.86);
line-height: 1.7;
}
.tms-portal-empty-state .campus-btn {
margin-top: 6px;
}
/* TMS Portal Empty State visibility fix */
.campus-world {
position: relative;
}
.tms-portal-empty-state {
pointer-events: auto;
}
.campus-panorama-strip {
z-index: 1;
}
.campus-hotspots {
z-index: 20;
}
.tms-portal-empty-state {
z-index: 90 !important;
}
/* TMS Portal Empty State viewport fix */
.tms-portal-empty-state {
position: fixed !important;
left: 50vw !important;
top: 50vh !important;
transform: translate(-50%, -50%) !important;
z-index: 99990 !important;
}
/* TMS Portal Empty State: do not block portal navigation */
.tms-portal-empty-state {
pointer-events: none !important;
}
.tms-portal-empty-state button,
.tms-portal-empty-state a {
pointer-events: auto !important;
}
.tms-portal-empty-state__actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 18px;
}
/* TMS Portal Guided Runtime v1 */
.tms-guided-target {
position: relative !important;
z-index: 99992 !important;
outline: 3px solid rgba(250, 204, 21, .95) !important;
box-shadow: 0 0 0 8px rgba(250, 204, 21, .22), 0 0 28px rgba(250, 204, 21, .82) !important;
animation: tmsGuidedPulse 1s ease-in-out infinite;
}
.tms-guided-target-success {
position: relative !important;
z-index: 99992 !important;
outline: 3px solid rgba(34, 197, 94, .95) !important;
box-shadow: 0 0 0 8px rgba(34, 197, 94, .22), 0 0 28px rgba(34, 197, 94, .82) !important;
}
.tms-guided-arrow {
position: fixed;
z-index: 99991;
font-size: 52px;
line-height: 1;
color: #facc15;
text-shadow: 0 6px 20px rgba(0,0,0,.45);
animation: tmsGuidedArrow 1s ease-in-out infinite;
pointer-events: none;
}
.tms-guided-note {
position: fixed;
z-index: 99991;
max-width: 260px;
padding: 10px 13px;
border-radius: 14px;
background: rgba(250, 204, 21, .95);
color: #111827;
font-weight: 700;
box-shadow: 0 16px 40px rgba(0,0,0,.28);
pointer-events: none;
}
@keyframes tmsGuidedPulse {
0%, 100% { box-shadow: 0 0 0 6px rgba(250, 204, 21, .18), 0 0 24px rgba(250, 204, 21, .68); }
50% { box-shadow: 0 0 0 12px rgba(250, 204, 21, .30), 0 0 34px rgba(250, 204, 21, .95); }
}
@keyframes tmsGuidedArrow {
0%, 100% { transform: translateX(0); opacity: .78; }
50% { transform: translateX(12px); opacity: 1; }
}
/* TMS Portal Wizard Steps v1 */
.tms-portal-wizard-steps {
list-style: none;
padding: 0 !important;
margin: 14px 0 0 !important;
display: grid;
gap: 8px;
}
.tms-portal-wizard-steps li {
display: flex;
align-items: center;
gap: 10px;
color: rgba(255,255,255,.58);
transition: color .18s ease, transform .18s ease;
}
.tms-portal-wizard-steps li.is-active {
color: #fff;
transform: translateX(3px);
}
.tms-portal-wizard-steps li.is-done {
color: rgba(134, 239, 172, .95);
}
.tms-portal-wizard-step__mark {
width: 24px;
height: 24px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.14);
color: rgba(255,255,255,.8);
font-size: 12px;
font-weight: 800;
flex: 0 0 auto;
}
.tms-portal-wizard-steps li.is-active .tms-portal-wizard-step__mark {
background: rgba(250, 204, 21, .95);
color: #111827;
}
.tms-portal-wizard-steps li.is-done .tms-portal-wizard-step__mark {
background: rgba(34, 197, 94, .95);
color: #052e16;
}
/* TMS Guided Wizard Step States */
.tms-portal-wizard-steps li {
position: relative;
border-radius: 12px;
padding: 8px 10px;
transition:
background .18s ease,
opacity .18s ease,
transform .18s ease;
}
.tms-portal-wizard-steps li.is-active {
cursor: pointer;
background: rgba(255,255,255,.08);
}
.tms-portal-wizard-steps li.is-active:hover {
background: rgba(255,255,255,.12);
}
.tms-portal-wizard-steps li.is-locked {
opacity: .42;
pointer-events: none;
}
.tms-portal-wizard-steps li.is-done {
cursor: default;
}
/* TMS Guided Wizard: allow clickable steps */
.tms-portal-empty-state .tms-portal-wizard-steps,
.tms-portal-empty-state .tms-portal-wizard-steps li {
pointer-events: auto !important;
}
/* TMS Wizard Step Buttons */
.tms-portal-wizard-step-btn {
appearance: none;
border: 0;
background: transparent;
color: inherit;
font: inherit;
width: 100%;
display: flex;
align-items: center;
gap: 10px;
text-align: left;
padding: 0;
cursor: inherit;
}
.tms-portal-wizard-steps li.is-active .tms-portal-wizard-step-btn {
cursor: pointer;
}
.tms-portal-wizard-steps li.is-locked .tms-portal-wizard-step-btn {
cursor: not-allowed;
}
/* TMS Wizard Pending State */
.tms-portal-wizard-steps li.is-pending {
color: rgba(253, 186, 116, .98);
background: rgba(251, 146, 60, .13);
}
.tms-portal-wizard-steps li.is-pending .tms-portal-wizard-step__mark {
background: rgba(251, 146, 60, .96);
color: #431407;
}
.tms-portal-wizard-steps li.is-pending .tms-portal-wizard-step__mark::after {
content: "";
width: 7px;
height: 7px;
margin-left: 4px;
border-radius: 999px;
background: currentColor;
animation: tmsWizardPendingBlink .9s ease-in-out infinite;
}
@keyframes tmsWizardPendingBlink {
0%, 100% { opacity: .25; }
50% { opacity: 1; }
}
/* TMS Hotspot Wizard v1: step list is the interaction */
.tms-portal-empty-state__actions {
display: none !important;
}
/* TMS Hotspot Draw Instruction */
.tms-guided-draw-hint {
position: fixed;
z-index: 99990;
left: 50%;
bottom: 34px;
transform: translateX(-50%);
max-width: min(560px, calc(100vw - 40px));
padding: 14px 18px;
border-radius: 18px;
background: rgba(15, 23, 42, .92);
color: #fff;
border: 1px solid rgba(255,255,255,.18);
box-shadow: 0 20px 60px rgba(0,0,0,.34);
backdrop-filter: blur(16px);
font-weight: 700;
pointer-events: none;
}
.tms-guided-draw-hint small {
display: block;
margin-top: 4px;
color: rgba(255,255,255,.72);
font-weight: 500;
}
/* TMS 2-Click Hotspot Creation UX v1 */
.campus-hotspot-start {
position: absolute;
z-index: 120;
width: 26px;
height: 26px;
margin-left: -13px;
margin-top: -13px;
border-radius: 999px;
background: rgba(250, 204, 21, .96);
border: 3px solid rgba(255,255,255,.95);
box-shadow: 0 0 0 8px rgba(250,204,21,.22), 0 0 34px rgba(250,204,21,.9);
animation: tmsHotspotStartPulse .85s ease-in-out infinite;
pointer-events: none;
}
.campus-hotspot-start::after {
content: "Startpunkt";
position: absolute;
left: 30px;
top: 50%;
transform: translateY(-50%);
white-space: nowrap;
padding: 5px 9px;
border-radius: 999px;
background: rgba(15,23,42,.9);
color: #fff;
font-size: 12px;
font-weight: 800;
box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.campus-hotspot-preview.is-visible {
z-index: 115;
border: 3px dashed rgba(34,197,94,.98) !important;
background: rgba(34,197,94,.18) !important;
box-shadow: 0 0 0 7px rgba(34,197,94,.14), 0 0 36px rgba(34,197,94,.55) !important;
}
@keyframes tmsHotspotStartPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.22); }
}
/* TMS Hotspot Creation: marker must never catch clicks */
.campus-hotspot-start,
.campus-hotspot-start::after {
pointer-events: none !important;
}
/* TMS Hotspot Preview hard visibility fix */
.campus-world .campus-hotspot-preview {
display: none;
position: absolute !important;
z-index: 99980 !important;
border: 4px dashed rgba(34,197,94,1) !important;
background: rgba(34,197,94,.24) !important;
box-shadow: 0 0 0 8px rgba(34,197,94,.18), 0 0 44px rgba(34,197,94,.75) !important;
pointer-events: none !important;
}
.campus-world .campus-hotspot-preview.is-visible {
display: block !important;
}
.campus-world .campus-hotspot-preview__label {
display: inline-flex !important;
position: absolute;
left: 8px;
top: 8px;
padding: 5px 9px;
border-radius: 999px;
background: rgba(15,23,42,.92);
color: #fff;
font-size: 12px;
font-weight: 800;
}
/* TMS New Hotspot Preview Emphasis */
.campus-world .campus-hotspot-preview {
border: 4px solid rgba(34,197,94,1) !important;
background: rgba(34,197,94,.42) !important;
box-shadow:
0 0 0 10px rgba(34,197,94,.22),
0 0 60px rgba(34,197,94,.88) !important;
backdrop-filter: blur(1px);
}
.campus-world .campus-hotspot-preview::before {
content: "";
position: absolute;
inset: 0;
border: 2px dashed rgba(255,255,255,.92);
animation: tmsHotspotPreviewPulse 1.1s ease-in-out infinite;
}
@keyframes tmsHotspotPreviewPulse {
0%, 100% {
opacity: .45;
}
50% {
opacity: 1;
}
}
/* TMS Hotspot Preview EXTREME visibility */
.campus-world .campus-hotspot-preview {
border: 5px solid rgba(34,197,94,1) !important;
background: rgba(34,197,94,.62) !important;
box-shadow:
0 0 0 12px rgba(34,197,94,.34),
0 0 80px rgba(34,197,94,1) !important;
backdrop-filter: blur(1px);
}
.campus-world .campus-hotspot-preview::before {
content: "";
position: absolute;
inset: 0;
border: 3px dashed rgba(255,255,255,1);
animation: tmsHotspotPreviewPulseStrong .9s ease-in-out infinite;
}
.campus-world .campus-hotspot-preview::after {
content: "NEUER HOTSPOT";
position: absolute;
right: 10px;
bottom: 10px;
padding: 6px 10px;
border-radius: 999px;
background: rgba(15,23,42,.96);
color: #fff;
font-size: 11px;
font-weight: 900;
letter-spacing: .08em;
box-shadow: 0 10px 26px rgba(0,0,0,.34);
}
@keyframes tmsHotspotPreviewPulseStrong {
0%, 100% {
opacity: .35;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.02);
}
}
/* TMS Hotspot Preview: only one badge */
.campus-world .campus-hotspot-preview::after {
content: none !important;
display: none !important;
}
/* TMS Unified Guided Runtime Helper */
.campus-status.is-wizard-helper {
position: fixed !important;
z-index: 99990 !important;
width: min(420px, calc(100vw - 32px)) !important;
max-width: calc(100vw - 32px) !important;
padding: 16px 18px !important;
border-radius: 18px !important;
background: rgba(15, 23, 42, .96) !important;
color: #fff !important;
border: 2px solid rgba(250, 204, 21, .92) !important;
box-shadow:
0 20px 70px rgba(0,0,0,.42),
0 0 34px rgba(250,204,21,.22) !important;
backdrop-filter: blur(14px);
transition:
left .18s ease,
top .18s ease,
transform .18s ease,
box-shadow .24s ease;
}
.campus-status.is-wizard-helper strong,
.campus-status.is-wizard-helper span {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
}
.campus-status.is-wizard-helper span {
margin-top: 8px !important;
line-height: 1.55 !important;
white-space: normal !important;
}
.campus-status.is-wizard-helper::after {
content: none !important;
display: none !important;
}
.campus-status.is-wizard-helper strong {
color: #facc15 !important;
}
.campus-status.is-wizard-helper.tms-helper-pulse {
animation: tmsWizardHelperSoftPulse .55s ease;
}
@keyframes tmsWizardHelperSoftPulse {
0% {
transform: scale(.96);
opacity: .75;
}
55% {
transform: scale(1.03);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* TMS Guided Assistant: hide status edit controls during tour runtime */
.campus-status.is-wizard-helper .campus-status-reset,
.campus-status.is-wizard-helper .campus-status-edit {
display: none !important;
}
/* TMS Guided Tour: current step emphasis */
.tms-portal-empty-state--admin [data-wizard-step].tms-guided-target,
.tms-portal-empty-state--admin [data-wizard-step].is-active {
position: relative;
border-radius: 18px;
box-shadow:
0 0 0 2px rgba(250,204,21,.95),
0 0 28px rgba(250,204,21,.32);
background: rgba(250,204,21,.08);
}
/* TMS Guided Assistant final runtime cleanup */
.campus-status.is-wizard-helper {
min-height: auto !important;
max-height: none !important;
overflow: visible !important;
}
.campus-status.is-wizard-helper .campus-status-reset,
.campus-status.is-wizard-helper .campus-status-edit {
display: none !important;
}
/* TMS Guided Tour: next step pulse */
.tms-portal-empty-state--admin [data-wizard-step].tms-guided-target {
animation: tmsGuidedNextStepPulse 1.05s ease-in-out infinite;
}
@keyframes tmsGuidedNextStepPulse {
0%, 100% {
box-shadow:
0 0 0 2px rgba(250,204,21,.88),
0 0 22px rgba(250,204,21,.24);
}
50% {
box-shadow:
0 0 0 3px rgba(250,204,21,1),
0 0 38px rgba(250,204,21,.52);
}
}
.campus-hotspot-start.is-placed {
animation: tmsHotspotStartPulse 0.9s ease-out;
}
@keyframes tmsHotspotStartPulse {
0% {
transform: translate(-50%, -50%) scale(0.4);
opacity: 0;
}
45% {
transform: translate(-50%, -50%) scale(1.45);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}
.campus-status.is-wizard-helper.is-success {
border-color: #22c55e !important;
box-shadow:
0 0 0 1px rgba(34,197,94,0.35),
0 14px 40px rgba(34,197,94,0.28) !important;
}
.campus-status.is-wizard-helper.is-success strong {
color: #22c55e !important;
}
.campus-status.is-wizard-helper.is-success span {
color: #dcfce7 !important;
}
/* TMS Portal Builder: allow guided selection of newly drawn hotspot preview */
.campus-hotspot-preview.is-visible {
pointer-events: auto;
cursor: pointer;
}
/* TMS Portal Builder: final override - preview hotspot must be clickable in guided flow */
.campus-world .campus-hotspot-preview.is-visible,
.campus-hotspot-preview.is-visible {
pointer-events: auto !important;
cursor: pointer !important;
}
/* TMS Portal Builder: visual target type selector */
.tms-target-type-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin: 8px 0 10px 0;
}
.tms-target-type-card {
border: 1px solid #d8c7aa;
background: rgba(255,255,255,0.88);
color: #3b2f22;
border-radius: 12px;
padding: 9px 10px;
text-align: left;
cursor: pointer;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.tms-target-type-card strong {
display: block;
font-size: 12px;
font-weight: 900;
margin-bottom: 2px;
}
.tms-target-type-card span {
display: block;
font-size: 11px;
line-height: 1.25;
color: #7c6b55;
}
.tms-target-type-card:hover,
.tms-target-type-card.is-active {
border-color: #b9852f;
background: #fff7e8;
box-shadow: 0 8px 20px rgba(120, 82, 28, .16);
transform: translateY(-1px);
}
/* TMS Portal Builder: visual target type selector */
.tms-target-type-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin: 8px 0 10px 0;
}
.tms-target-type-card {
border: 1px solid #d8c7aa;
background: rgba(255,255,255,0.88);
color: #3b2f22;
border-radius: 12px;
padding: 9px 10px;
text-align: left;
cursor: pointer;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.tms-target-type-card strong {
display: block;
font-size: 12px;
font-weight: 900;
margin-bottom: 2px;
}
.tms-target-type-card span {
display: block;
font-size: 11px;
line-height: 1.25;
color: #7c6b55;
}
.tms-target-type-card:hover,
.tms-target-type-card.is-active {
border-color: #b9852f;
background: #fff7e8;
box-shadow: 0 8px 20px rgba(120, 82, 28, .16);
transform: translateY(-1px);
}
/* TMS Portal Builder: recommended target type */
.tms-target-type-card.is-recommended {
border-color: #b9852f;
background: #fff7e8;
box-shadow: 0 8px 20px rgba(120, 82, 28, .16);
}
/* TMS Portal Builder: Single Stage Mode */
.campus-world--single-stage {
width: 100% !important;
}
.campus-panorama-strip--single-stage {
width: 100% !important;
height: 100% !important;
display: block !important;
}
.campus-segment--single-stage {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
}
/* TMS Portal Builder: recommendation is wizard-context only, not permanent UI state */
.tms-target-type-card.is-recommended:not(.is-active) {
border-color: #d8c7aa !important;
background: rgba(255,255,255,0.88) !important;
box-shadow: none !important;
transform: none !important;
}
/* TMS Portal Widget Drawer v2 */
.tms-portal-widget-overlay.is-visible {
display: block;
background: rgba(2, 6, 23, .28);
backdrop-filter: blur(3px);
}
.tms-portal-widget-panel {
position: fixed;
left: var(--widget-origin-left, 50vw);
top: var(--widget-origin-top, 50vh);
width: min(860px, calc(100vw - 42px));
max-height: min(760px, calc(100vh - 42px));
overflow: auto;
transform-origin: 0 0;
animation: tmsPortalWidgetDrawerFromHotspot .34s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes tmsPortalWidgetDrawerFromHotspot {
from {
opacity: 0;
transform: translate(-10px, -10px) scale(.12);
}
to {
opacity: 1;
left: min(420px, 4vw);
top: 6vh;
transform: translate(0, 0) scale(1);
}
}
.tms-portal-widget-panel .tms-media-box {
color: #111827;
}
.tms-portal-widget-body {
color: rgba(255,255,255,.86);
}
/* TMS Target UI Cleanup v1 */
.tms-target-type-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.tms-target-type-card {
min-height: 74px;
padding: 10px 11px;
}
.tms-target-type-card strong {
font-size: 13px;
}
.tms-target-type-card span {
font-size: 11px;
line-height: 1.25;
}
.tms-technical-field {
position: absolute !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
pointer-events: none !important;
overflow: hidden !important;
}
.tms-target-value-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
}
.tms-target-value-pill {
border: 1px solid rgba(148, 163, 184, .55);
border-radius: 999px;
padding: 7px 11px;
background: #fff;
color: #334155;
font-size: 12px;
font-weight: 800;
cursor: pointer;
}
.tms-target-value-pill.is-active {
background: #0f172a;
color: #fff;
border-color: #0f172a;
}
/* Target cards are admin-only controls */
.campus-portal:not(.is-edit-mode) .tms-target-type-card,
.campus-portal:not(.is-edit-mode) .tms-target-value-pill {
pointer-events: none;
opacity: .45;
cursor: default;
}
.campus-portal:not(.is-edit-mode) .tms-target-type-card:hover,
.campus-portal:not(.is-edit-mode) .tms-target-value-pill:hover {
transform: none !important;
box-shadow: none !important;
border-color: inherit !important;
background: inherit !important;
}
/* Hard non-edit override for target UI */
.campus-portal:not(.is-edit-mode) #tmsTargetTypeGrid .tms-target-type-card,
.campus-portal:not(.is-edit-mode) #tmsTargetTypeGrid .tms-target-type-card:hover,
.campus-portal:not(.is-edit-mode) #tmsTargetTypeGrid .tms-target-type-card:focus,
.campus-portal:not(.is-edit-mode) #tmsTargetTypeGrid .tms-target-type-card:active {
transform: none !important;
box-shadow: none !important;
outline: none !important;
filter: none !important;
opacity: .45 !important;
pointer-events: none !important;
}
/* Hide target configuration outside edit mode */
.campus-portal:not(.is-edit-mode) #tmsTargetTypeGrid,
.campus-portal:not(.is-edit-mode) #tmsTargetValuePills {
display: none !important;
}
/* Hide target controls unless edit mode is active */
.campus-portal:not(.is-edit-mode) #tmsTargetTypeGrid,
.campus-portal:not(.is-edit-mode) #tmsTargetValuePills,
.campus-portal:not(.is-edit-mode) .tms-target-value-technical-row {
display: none !important;
visibility: hidden !important;
}
/* Hide navigation labels outside edit mode */
.campus-portal:not(.is-edit-mode) label[for="target_type"],
.campus-portal:not(.is-edit-mode) label[for="target_value"],
.campus-portal:not(.is-edit-mode) #tmsTargetValueHint,
.campus-portal:not(.is-edit-mode) #tmsModuleTargetMeta {
display: none !important;
}
/* Target value pills visual refinement */
.tms-target-value-pills {
margin-top: 14px;
padding: 10px;
border-radius: 16px;
background: rgba(248,250,252,.75);
border: 1px solid rgba(226,232,240,.9);
}
.tms-target-value-pill {
padding: 9px 13px;
border-radius: 999px;
background: #fff;
border: 1px solid #cbd5e1;
box-shadow: 0 4px 12px rgba(15,23,42,.06);
}
.tms-target-value-pill:hover {
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(15,23,42,.10);
}
/* Portal Widget Runtime UX refinement */
.tms-portal-widget-overlay.is-visible {
background: rgba(248,250,252,.72) !important;
backdrop-filter: blur(6px) !important;
}
.tms-portal-widget-panel {
width: min(1180px, calc(100vw - 48px)) !important;
max-height: calc(100vh - 48px) !important;
overflow: hidden !important;
background: rgba(255,255,255,.96) !important;
color: #0f172a !important;
border: 1px solid rgba(203,213,225,.95) !important;
}
.tms-portal-widget-title {
color: #0f172a !important;
margin-bottom: 10px !important;
}
.tms-portal-widget-body {
color: #334155 !important;
max-height: calc(100vh - 170px);
overflow: auto;
padding-right: 4px;
}
.tms-portal-widget-body .tms-media-box h2,
.tms-portal-widget-body .tms-media-box > div:first-child h2 {
display: none !important;
}
/* Portal Widget Origin Animation v2 - stronger drawer feel */
.tms-portal-widget-overlay.is-visible .tms-portal-widget-panel {
will-change: transform, opacity;
}
.tms-portal-widget-panel {
transform:
translateY(34px)
scale(.82);
opacity: 0;
}
.tms-portal-widget-overlay.is-visible.is-animating .tms-portal-widget-panel {
transform:
translateY(0)
scale(1);
opacity: 1;
}
/* Portal Runtime Workspace */
.tms-portal-widget-header {
position: sticky;
top: 0;
z-index: 30;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 22px;
background: linear-gradient(to bottom, rgba(255,255,255,.96), rgba(255,255,255,.88));
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(226,232,240,.9);
}
.tms-portal-widget-workspace {
display: grid;
grid-template-columns: minmax(0,1fr) 320px;
min-height: 70vh;
}
.tms-portal-widget-stage {
min-width: 0;
padding: 24px;
}
.tms-portal-widget-sidebar {
border-left: 1px solid #e2e8f0;
background: #f8fafc;
}
.tms-portal-widget-sidebar-inner {
position: sticky;
top: 88px;
padding: 24px;
}
.tms-portal-widget-sidebar-title {
font-size: 13px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
color: #0f172a;
margin-bottom: 8px;
}
.tms-portal-widget-sidebar-meta {
font-size: 13px;
color: #64748b;
line-height: 1.5;
}
@media (max-width: 980px) {
.tms-portal-widget-workspace {
grid-template-columns: 1fr;
}
.tms-portal-widget-sidebar {
border-left: 0;
border-top: 1px solid #e2e8f0;
}
}
/* Runtime sidebar hidden until widget controls are available */
.tms-portal-widget-sidebar {
display: none;
}
.tms-portal-widget-workspace {
grid-template-columns: minmax(0,1fr);
}
/* Media Box Runtime Mode inside Portal Widgets */
.tms-portal-widget-body .tms-media-box.runtime-portal_widget {
margin-top: 0 !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
.tms-portal-widget-body .tms-media-box.runtime-portal_widget > div:first-child {
margin: 0 0 18px 0 !important;
padding: 14px 16px !important;
border-radius: 14px !important;
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
}
.tms-portal-widget-body .tms-media-box.runtime-portal_widget code {
font-size: 11px;
}
.tms-portal-widget-body .tms-media-box.runtime-portal_widget h2 {
display: none !important;
}
.tms-portal-widget-body .tms-media-box.runtime-portal_widget .tms-background-quality-guidance {
margin-top: 0 !important;
}
/* Fix: Portal widget runtime must remain scrollable */
.tms-portal-widget-overlay.is-visible {
overflow-y: auto !important;
align-items: flex-start !important;
}
.tms-portal-widget-panel {
max-height: none !important;
overflow: visible !important;
}
.tms-portal-widget-workspace,
.tms-portal-widget-stage,
.tms-portal-widget-body {
min-height: 0 !important;
overflow: visible !important;
}
.tms-portal-widget-body {
padding-bottom: 48px !important;
}
/* Fix v2: keep portal runtime content inside panel */
.tms-portal-widget-overlay.is-visible {
overflow-y: auto !important;
align-items: flex-start !important;
padding-top: 28px !important;
padding-bottom: 28px !important;
}
.tms-portal-widget-panel {
max-height: none !important;
overflow: hidden !important;
}
.tms-portal-widget-workspace {
min-height: 0 !important;
overflow: hidden !important;
}
.tms-portal-widget-stage {
min-height: 0 !important;
overflow: auto !important;
max-height: calc(100vh - 170px) !important;
}
.tms-portal-widget-body {
min-height: 0 !important;
overflow: visible !important;
padding-bottom: 56px !important;
}
/* Portal Runtime Dynamic Header */
.tms-portal-widget-headline {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.tms-portal-widget-icon {
width: 42px;
height: 42px;
border-radius: 14px;
display: grid;
place-items: center;
font-size: 22px;
background: #f1f5f9;
border: 1px solid #e2e8f0;
flex: 0 0 auto;
}
.tms-portal-widget-subtitle {
margin-top: 3px;
font-size: 12px;
color: #64748b;
font-weight: 700;
}
.tms-portal-widget-header-actions {
display: flex;
align-items: center;
gap: 10px;
flex: 0 0 auto;
}
.tms-portal-widget-badge {
display: inline-flex;
align-items: center;
height: 30px;
padding: 0 10px;
border-radius: 999px;
background: #eef2ff;
color: #3730a3;
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .04em;
}
@media (max-width: 720px) {
.tms-portal-widget-header {
align-items: flex-start;
flex-direction: column;
}
.tms-portal-widget-header-actions {
width: 100%;
justify-content: space-between;
}
}
/* Identity Runtime Widgets */
.tms-identity-runtime-card {
max-width: 520px;
margin: 0 auto;
padding: 28px;
border-radius: 24px;
background: #fff;
border: 1px solid #e2e8f0;
box-shadow: 0 20px 50px rgba(15,23,42,.06);
}
.tms-identity-runtime-kicker {
display: inline-flex;
align-items: center;
height: 28px;
padding: 0 10px;
border-radius: 999px;
background: #eef2ff;
color: #3730a3;
font-size: 11px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: 14px;
}
.tms-identity-runtime-card h3 {
margin: 0 0 10px 0;
font-size: 30px;
line-height: 1.1;
color: #0f172a;
}
.tms-identity-runtime-card p {
margin: 0 0 24px 0;
color: #64748b;
line-height: 1.6;
}
.tms-identity-runtime-form {
display: flex;
flex-direction: column;
gap: 10px;
}
.tms-identity-runtime-form label {
font-size: 13px;
font-weight: 800;
color: #334155;
}
.tms-identity-runtime-form input {
height: 46px;
border-radius: 12px;
border: 1px solid #cbd5e1;
padding: 0 14px;
font-size: 14px;
background: #fff;
}
.tms-identity-runtime-form input:focus {
outline: none;
border-color: #6366f1;
box-shadow: 0 0 0 4px rgba(99,102,241,.12);
}
.tms-identity-runtime-form .campus-btn {
margin-top: 10px;
}
.tms-identity-runtime-link {
margin-top: 18px;
border: 0;
background: transparent;
color: #4f46e5;
font-size: 13px;
font-weight: 800;
cursor: pointer;
padding: 0;
}
.tms-identity-runtime-link:hover {
text-decoration: underline;
}
/* Identity registration intent cards */
.tms-identity-runtime-card--wide {
max-width: 760px;
}
.tms-identity-intent-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin: 24px 0 20px 0;
}
.tms-identity-intent-card {
display: block;
padding: 18px;
border-radius: 18px;
border: 1px solid #e2e8f0;
background: #fff;
text-decoration: none;
color: #0f172a;
box-shadow: 0 10px 26px rgba(15,23,42,.04);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.tms-identity-intent-card:hover {
transform: translateY(-2px);
border-color: #c7d2fe;
box-shadow: 0 18px 36px rgba(15,23,42,.08);
}
.tms-identity-intent-card strong {
display: block;
font-size: 16px;
font-weight: 950;
margin-bottom: 8px;
}
.tms-identity-intent-card span {
display: block;
font-size: 13px;
line-height: 1.5;
color: #64748b;
}
@media (max-width: 720px) {
.tms-identity-intent-grid {
grid-template-columns: 1fr;
}
}
/* Identity intent cards visual upgrade */
.tms-identity-runtime-card--wide {
max-width: 900px;
}
.tms-identity-intent-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.tms-identity-intent-card {
position: relative;
min-height: 210px;
padding: 22px 18px 20px 18px;
text-align: center;
overflow: hidden;
}
.tms-identity-intent-card::before {
content: "";
display: block;
width: 74px;
height: 74px;
margin: 0 auto 18px auto;
border-radius: 999px;
background: #eef2ff;
box-shadow: inset 0 0 0 1px rgba(99,102,241,.12);
}
.tms-identity-intent-card::after {
content: "→";
display: grid;
place-items: center;
width: 34px;
height: 34px;
margin: 18px auto 0 auto;
border-radius: 999px;
background: #f8fafc;
color: #4f46e5;
font-size: 22px;
font-weight: 900;
transition: transform .18s ease, background .18s ease;
}
.tms-identity-intent-card:hover::after {
transform: translateX(4px);
background: #eef2ff;
}
.tms-identity-intent-card strong {
font-size: 18px;
margin-bottom: 10px;
}
.tms-identity-intent-card span {
font-size: 14px;
}
.tms-identity-intent-card:nth-child(1) {
border-top: 4px solid #2563eb;
}
.tms-identity-intent-card:nth-child(2) {
border-top: 4px solid #16a34a;
}
.tms-identity-intent-card:nth-child(3) {
border-top: 4px solid #7c3aed;
}
.tms-identity-intent-card:nth-child(4) {
border-top: 4px solid #ea580c;
}
@media (max-width: 1080px) {
.tms-identity-intent-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 720px) {
.tms-identity-intent-grid {
grid-template-columns: 1fr;
}
}
/* Identity intent icon circles */
.tms-identity-intent-card::before {
display: none !important;
}
.tms-identity-intent-icon {
display: grid !important;
place-items: center;
width: 74px;
height: 74px;
margin: 0 auto 18px auto;
border-radius: 999px;
background: #eef2ff;
box-shadow: inset 0 0 0 1px rgba(99,102,241,.12);
font-size: 34px !important;
line-height: 1 !important;
color: inherit !important;
}
.tms-identity-intent-card:nth-child(1) .tms-identity-intent-icon {
background: #dbeafe;
}
.tms-identity-intent-card:nth-child(2) .tms-identity-intent-icon {
background: #dcfce7;
}
.tms-identity-intent-card:nth-child(3) .tms-identity-intent-icon {
background: #f3e8ff;
}
.tms-identity-intent-card:nth-child(4) .tms-identity-intent-icon {
background: #ffedd5;
}
/* Guided Tour: pulsierender Zielpunkt */
.tms-guide-pulse-target {
position: relative;
}
.tms-guide-pulse-target::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 16px;
height: 16px;
transform: translate(-50%, -50%);
border-radius: 999px;
background: #2563eb;
box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45);
animation: tmsGuidePulse 1.35s infinite;
z-index: 50;
pointer-events: none;
}
@keyframes tmsGuidePulse {
0% {
box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45);
transform: translate(-50%, -50%) scale(0.9);
}
70% {
box-shadow: 0 0 0 18px rgba(37, 99, 235, 0);
transform: translate(-50%, -50%) scale(1);
}
100% {
box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
transform: translate(-50%, -50%) scale(0.9);
}
}
.tms-guide-pulse-dot {
position: fixed;
width: 16px;
height: 16px;
border-radius: 999px;
background: #2563eb;
box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45);
transform: translate(-50%, -50%);
animation: tmsGuidePulseDot 1.35s infinite;
z-index: 99999;
pointer-events: none;
}
@keyframes tmsGuidePulseDot {
0% {
box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.45);
transform: translate(-50%, -50%) scale(0.9);
}
70% {
box-shadow: 0 0 0 18px rgba(37, 99, 235, 0);
transform: translate(-50%, -50%) scale(1);
}
100% {
box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
transform: translate(-50%, -50%) scale(0.9);
}
}
/* Portal Runtime View Loader */
.tms-runtime-loading {
max-width: 520px;
margin: 48px auto;
padding: 28px;
border-radius: 22px;
border: 1px solid #e2e8f0;
background: #fff;
text-align: center;
box-shadow: 0 18px 44px rgba(15,23,42,.06);
}
.tms-runtime-loading strong {
display: block;
font-size: 20px;
color: #0f172a;
margin-bottom: 8px;
}
.tms-runtime-loading span {
display: block;
color: #64748b;
font-size: 14px;
}
/* Portal UI baseline restore */
html.view-campus,
body.view-campus,
body.view-campus .campus-portal,
body.view-campus .tms-main-nav {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
body.view-campus .tms-main-nav {
position: fixed !important;
top: 10px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 9000 !important;
display: block !important;
width: min(920px, calc(100vw - 180px)) !important;
max-width: calc(100vw - 32px) !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid rgba(255,255,255,.48) !important;
border-radius: 22px !important;
background: rgba(255,255,255,.86) !important;
box-shadow: 0 14px 40px rgba(0,0,0,.18) !important;
backdrop-filter: blur(16px) saturate(1.2) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.2) !important;
}
body.view-campus .tms-main-nav__inner {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 7px 12px !important;
}
body.view-campus .tms-main-nav__brand a {
display: inline-flex !important;
align-items: center !important;
padding: 5px 10px !important;
border-radius: 999px !important;
background: #111827 !important;
color: #fff !important;
text-decoration: none !important;
font-size: 13px !important;
font-weight: 800 !important;
}
body.view-campus .tms-main-nav__links {
display: flex !important;
align-items: center !important;
gap: 6px !important;
flex-wrap: nowrap !important;
overflow: hidden !important;
}
body.view-campus .tms-main-nav__link {
display: inline-flex !important;
align-items: center !important;
padding: 5px 9px !important;
border-radius: 999px !important;
color: #111827 !important;
text-decoration: none !important;
font-size: 12px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
}
body.view-campus .tms-main-nav__link.is-active {
background: #2563eb !important;
color: #fff !important;
}
body.view-campus .campus-panel,
body.view-campus .campus-btn,
body.view-campus .tms-portal-admin,
body.view-campus .campus-hotspot-label {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
/* Portal topbar v2 */
body.view-campus,
body.view-campus * {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
body.view-campus .tms-portal-topbar {
position: fixed !important;
top: 12px !important;
left: 12px !important;
right: 12px !important;
z-index: 9500 !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
pointer-events: none !important;
}
body.view-campus .tms-portal-topbar__row {
pointer-events: auto !important;
}
body.view-campus .tms-portal-topbar__row--main {
display: flex !important;
align-items: center !important;
gap: 14px !important;
}
body.view-campus .tms-portal-topbar__brand {
min-width: 64px !important;
font-size: 18px !important;
font-weight: 900 !important;
color: #111827 !important;
text-shadow: 0 1px 0 rgba(255,255,255,.5) !important;
}
body.view-campus .tms-portal-topbar__role {
width: 470px !important;
max-width: calc(100vw - 120px) !important;
padding: 10px 14px !important;
border: 1px solid rgba(15,23,42,.12) !important;
border-radius: 16px !important;
background: rgba(255,255,255,.9) !important;
box-shadow: 0 8px 24px rgba(15,23,42,.08) !important;
}
body.view-campus .tms-portal-topbar__role:empty {
display: none !important;
}
body.view-campus .tms-portal-topbar__row--nav {
display: flex !important;
align-items: center !important;
padding-left: 84px !important;
}
body.view-campus .tms-portal-topbar .tms-main-nav {
position: static !important;
transform: none !important;
width: auto !important;
max-width: none !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
body.view-campus .tms-portal-topbar .tms-main-nav__brand,
body.view-campus .tms-portal-topbar .tms-main-nav__link.is-active[href*="view=campus"] {
display: none !important;
}
body.view-campus .tms-portal-topbar .tms-main-nav__inner {
padding: 0 !important;
gap: 0 !important;
}
body.view-campus .tms-portal-topbar .tms-main-nav__links {
display: flex !important;
gap: 24px !important;
}
body.view-campus .tms-portal-topbar .tms-main-nav__link {
padding: 7px 0 !important;
border-radius: 0 !important;
background: transparent !important;
color: #2563eb !important;
font-size: 15px !important;
font-weight: 500 !important;
}
body.view-campus .tms-portal-topbar .tms-main-nav__link--account {
padding: 8px 14px !important;
border: 1px solid #f3b4b4 !important;
border-radius: 8px !important;
color: #b00020 !important;
font-weight: 700 !important;
background: rgba(255,255,255,.9) !important;
}
/* Portal topbar final position fix */
body.view-campus .tms-portal-topbar {
position: fixed !important;
top: 18px !important;
left: 32px !important;
right: 32px !important;
width: auto !important;
max-width: none !important;
z-index: 12000 !important;
}
body.view-campus .tms-portal-topbar__row--main,
body.view-campus .tms-portal-topbar__row--nav {
width: 100% !important;
}
body.view-campus .tms-portal-topbar__row--main {
justify-content: flex-start !important;
}
body.view-campus .tms-portal-topbar__row--nav {
padding-left: 0 !important;
margin-top: 2px !important;
}
body.view-campus .tms-portal-topbar .tms-main-nav__links {
width: auto !important;
min-width: 0 !important;
flex-wrap: nowrap !important;
}
/* Portal topbar layout correction */
body.view-campus {
--tms-portal-topbar-height: 124px;
}
body.view-campus .tms-portal-topbar {
box-sizing: border-box !important;
padding: 0 !important;
gap: 10px !important;
}
body.view-campus .tms-portal-topbar__row--main {
display: grid !important;
grid-template-columns: 72px minmax(360px, 620px) 1fr !important;
align-items: center !important;
column-gap: 16px !important;
min-height: 48px !important;
}
body.view-campus .tms-portal-topbar__brand {
grid-column: 1 !important;
justify-self: start !important;
}
body.view-campus .tms-portal-topbar__role {
grid-column: 2 !important;
width: auto !important;
max-width: none !important;
}
body.view-campus .tms-portal-topbar__row--nav {
display: flex !important;
align-items: center !important;
padding-left: 88px !important;
min-height: 36px !important;
}
body.view-campus .tms-portal-topbar .tms-main-nav__links {
gap: 28px !important;
}
/* Keep panels below portal topbar */
body.view-campus .campus-ui {
top: var(--tms-portal-topbar-height) !important;
}
body.view-campus section.campus-panel {
top: var(--tms-portal-topbar-height) !important;
}
body.view-campus #tmsPortalAdminPanel {
top: var(--tms-portal-topbar-height) !important;
}
/* Portal topbar centered correction */
body.view-campus .tms-portal-topbar {
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
width: min(920px, calc(100vw - 64px)) !important;
max-width: calc(100vw - 64px) !important;
}
body.view-campus .tms-portal-topbar__row--main {
grid-template-columns: 72px minmax(280px, 470px) 1fr !important;
}
body.view-campus .tms-portal-topbar__row--nav {
padding-left: 88px !important;
}
body.view-campus .campus-ui {
top: 16px !important;
}
/* Portal topbar white background */
body.view-campus .tms-portal-topbar {
padding: 12px 18px !important;
border-radius: 22px !important;
background: rgba(255,255,255,.92) !important;
border: 1px solid rgba(15,23,42,.10) !important;
box-shadow: 0 14px 38px rgba(15,23,42,.18) !important;
backdrop-filter: blur(14px) saturate(1.15) !important;
-webkit-backdrop-filter: blur(14px) saturate(1.15) !important;
}
/* Portal topbar slightly shorter */
body.view-campus .tms-portal-topbar {
width: min(760px, calc(100vw - 120px)) !important;
max-width: calc(100vw - 120px) !important;
}
body.view-campus .tms-portal-topbar__row--main {
grid-template-columns: 64px minmax(220px, 320px) 1fr !important;
}
body.view-campus .tms-portal-topbar__row--nav {
padding-left: 76px !important;
}
body.view-campus .tms-portal-topbar .tms-main-nav__links {
gap: 18px !important;
}
/* Portal shell: hide global app header inside campus portal */
body.view-campus .tms-header {
display: none !important;
}
/* Portal topbar compact final tuning */
body.view-campus .tms-portal-topbar {
width: max-content !important;
max-width: calc(100vw - 120px) !important;
}
body.view-campus .tms-portal-topbar__row--main {
grid-template-columns: 64px minmax(380px, 460px) auto !important;
}
body.view-campus .tms-portal-topbar__role {
min-width: 380px !important;
white-space: nowrap !important;
}
body.view-campus .tms-portal-topbar__row--nav {
padding-left: 76px !important;
}
/* Guided Tour: Zielwert-Auswahl hervorheben */
.tms-target-value-pills.tms-guided-target,
.tms-target-value-pills.is-guide-active {
outline: 2px solid rgba(37, 99, 235, 0.85);
outline-offset: 6px;
border-radius: 14px;
box-shadow: 0 0 0 6px rgba(37, 99, 235, 0.16);
}
.tms-target-value-pill.tms-guided-target,
.tms-target-value-pill.is-guide-active {
box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.22), 0 0 18px rgba(37, 99, 235, 0.35);
}
.campus-status.is-wizard-helper > .tms-resize-handle {
display: none !important;
}
.campus-status.is-wizard-helper {
overflow: visible !important;
resize: none !important;
}
/* Portal Shell UX V0: compact shell state only */
body.tms-shell-compact {
--tms-shell-compact: 1;
}
/* Portal Shell UX V0.1: compact visual marker only */
body.tms-shell-compact::after {
content: "Portal Shell Compact Mode";
position: fixed;
left: 50%;
bottom: 14px;
transform: translateX(-50%);
z-index: 9000;
padding: 8px 14px;
border-radius: 999px;
background: rgba(15,23,42,.82);
color: #fff;
font-size: 12px;
font-weight: 800;
letter-spacing: .02em;
pointer-events: none;
}
/* Portal Shell UX V0.2: compact dock placeholder */
body.tms-shell-compact::after {
content: "Portal Dock · Admin · Wizard · Info";
position: fixed;
left: 82px;
bottom: 14px;
transform: none;
z-index: 9000;
padding: 10px 16px;
border-radius: 18px;
background: rgba(15,23,42,.92);
color: #fff;
border: 1px solid rgba(255,255,255,.18);
box-shadow: 0 16px 36px rgba(0,0,0,.28);
font-size: 13px;
font-weight: 850;
letter-spacing: .01em;
pointer-events: none;
}
/* TMS Bridge Contract V1: shared shell dimensions */
:root {
--tms-bridge-height: 64px;
--tms-bridge-bottom-offset: 12px;
/* Drawer Runtime */
--tms-shell-drawer-z-index: 30000;
--tms-shell-overlay-z-index: 29900;
/* Drawer Geometry */
--tms-shell-drawer-right: 0px;
--tms-shell-drawer-width: 420px;
}
/* Portal Shell UX V0.2b: real dock placeholder element */
body.tms-shell-compact::after {
display: none !important;
}
.tms-portal-shell-dock {
position: fixed;
left: 82px;
bottom: var(--tms-bridge-bottom-offset);
z-index: 12000;
display: flex;
align-items: center;
gap: 12px;
padding: 10px 16px;
border-radius: 18px;
background: rgba(15,23,42,.94);
color: #fff;
border: 1px solid rgba(255,255,255,.18);
box-shadow: 0 16px 36px rgba(0,0,0,.28);
font-size: 13px;
pointer-events: none;
}
.tms-portal-shell-dock strong {
font-weight: 900;
}
.tms-portal-shell-dock span {
padding: 5px 9px;
border-radius: 999px;
background: rgba(255,255,255,.12);
font-weight: 800;
}
/* Portal Shell UX V0.2c: dock visibility controlled by compact state */
.tms-portal-shell-dock {
display: none;
}
body.tms-shell-compact .tms-portal-shell-dock {
display: flex;
}
/* Portal Shell UX V0.2d: lift dock above browser edge */
body.tms-shell-compact .tms-portal-shell-dock {
left: 88px !important;
right: auto !important;
bottom: 12px !important;
z-index: 20000 !important;
}
/* Portal Shell UX V0.4: dock only on campus view */
body:not(.view-campus) .tms-portal-shell-dock {
display: none !important;
}
/* Portal Shell UX V0.5: portal inspector strip */
.tms-portal-shell-dock.tms-portal-inspector-strip {
left: 88px !important;
bottom: 12px !important;
max-width: calc(100vw - 560px);
}
.tms-portal-inspector-strip span {
min-width: auto;
}
/* Portal Shell Audit V1 */
.tms-shell-audit {
margin-left: 14px;
padding-left: 14px;
border-left: 1px solid rgba(255,255,255,.18);
font-size: 11px;
opacity: .85;
white-space: nowrap;
}
/* Portal Shell Compact V1: reduce oversized shell panels */
body.tms-shell-compact #tmsPortalAdminPanel {
width: min(360px, calc(100vw - 32px)) !important;
max-width: min(360px, calc(100vw - 32px)) !important;
}
body.tms-shell-compact section.campus-panel {
width: min(340px, calc(100vw - 32px)) !important;
max-width: min(340px, calc(100vw - 32px)) !important;
}
body.tms-shell-compact .campus-status.is-wizard-helper {
width: min(360px, calc(100vw - 32px)) !important;
max-width: min(360px, calc(100vw - 32px)) !important;
}
/* Portal Shell Compact V1.2: compact topbar */
body.tms-shell-compact.view-campus .tms-portal-topbar {
width: min(620px, calc(100vw - 80px)) !important;
max-width: calc(100vw - 80px) !important;
padding: 8px 12px !important;
border-radius: 18px !important;
}
body.tms-shell-compact.view-campus .tms-portal-topbar__row--main {
min-height: 34px !important;
grid-template-columns: 52px minmax(180px, 260px) 1fr !important;
column-gap: 10px !important;
}
body.tms-shell-compact.view-campus .tms-portal-topbar__row--nav {
min-height: 26px !important;
padding-left: 62px !important;
}
body.tms-shell-compact.view-campus .tms-portal-topbar .tms-main-nav__links {
gap: 12px !important;
}
body.tms-shell-compact.view-campus .tms-portal-topbar .tms-main-nav__link {
font-size: 13px !important;
padding: 4px 0 !important;
}
/* Portal Shell Compact V1.3: compact wizard helper */
body.tms-shell-compact .campus-status.is-wizard-helper {
width: min(340px, calc(100vw - 32px)) !important;
max-width: min(340px, calc(100vw - 32px)) !important;
padding: 10px 12px !important;
border-radius: 14px !important;
font-size: 12px !important;
line-height: 1.35 !important;
}
body.tms-shell-compact .campus-status.is-wizard-helper strong {
font-size: 13px !important;
line-height: 1.25 !important;
}
body.tms-shell-compact .campus-status.is-wizard-helper span {
margin-top: 5px !important;
font-size: 12px !important;
line-height: 1.35 !important;
}
body.tms-shell-compact .campus-status.is-wizard-helper .tms-resize-handle {
display: none !important;
}
/* Portal Shell Compact V1.6: hide admin panel outside edit mode */
body.tms-shell-compact .campus-portal:not(.is-edit-mode) #tmsPortalAdminPanel {
display: none !important;
}
/* Portal Shell Compact V1.9: hide legacy admin footer buttons */
body.tms-shell-compact #tmsPortalAdminPanel button[type="submit"],
body.tms-shell-compact #tmsPortalAdminPanel #tmsPortalResetForm,
body.tms-shell-compact #tmsPortalAdminPanel #tmsPortalDuplicateHotspot {
display: none !important;
}
/* Portal Shell Compact V2.0: move dirty indicator away from toolbar buttons */
body.tms-shell-compact #tmsPortalAdminPanel .tms-portal-dirty-indicator {
position: absolute !important;
top: 44px !important;
right: 14px !important;
z-index: 140 !important;
transform: scale(.88);
transform-origin: top right;
pointer-events: none;
}
/* Portal Shell Compact V2.1: dirty indicator lower */
body.tms-shell-compact #tmsPortalAdminPanel .tms-portal-dirty-indicator {
top: 78px !important;
}
/* TMS Control Dock V0.1 */
.tms-control-dock-actions {
display: flex;
align-items: center;
gap: 8px;
margin-left: 12px;
padding-left: 12px;
border-left: 1px solid rgba(255,255,255,.18);
}
.tms-control-dock-action {
appearance: none;
border: 1px solid rgba(255,255,255,.18);
border-radius: 999px;
background: rgba(255,255,255,.12);
color: #fff;
padding: 5px 9px;
font-size: 12px;
font-weight: 850;
cursor: pointer;
pointer-events: auto;
}
.tms-control-dock-action:hover {
background: rgba(255,255,255,.20);
}
.tms-control-dock-action.is-guideon-placeholder {
opacity: .78;
}
/* TMS Control Dock V0.2: Guideon placeholder */
.tms-guideon-dock-placeholder {
display: flex;
flex-direction: column;
gap: 2px;
margin-left: 10px;
padding-left: 12px;
border-left: 1px solid rgba(255,255,255,.18);
color: #fff;
}
.tms-guideon-dock-title {
font-size: 12px;
font-weight: 900;
}
.tms-guideon-dock-journey {
font-size: 11px;
opacity: .92;
}
.tms-guideon-dock-progress {
font-size: 10px;
opacity: .72;
}
/* Portal Hotspot QuickActions Guard: never show toolbox outside edit mode */
.campus-portal:not(.is-edit-mode) ~ .tms-hotspot-quick-actions,
body:not(.tms-portal-edit-mode) .tms-hotspot-quick-actions {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* PortalState cleanup: preview must never block real hotspot clicks */
.campus-hotspot-preview {
pointer-events: none !important;
}
/* TMS Portal Create Preview Guard */
.campus-portal:not(.is-create-mode) .campus-hotspot-preview:not(.is-visible) {
display: none !important;
pointer-events: none !important;
}
/* TMS Hotspotverwaltung Toolbar V1 */
#tmsPortalAdminPanel .tms-hotspot-admin-toolbar {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 10px !important;
padding: 10px 12px !important;
}
#tmsPortalAdminPanel .tms-hotspot-admin-toolbar__title {
font-size: 13px;
font-weight: 900;
letter-spacing: .02em;
opacity: .9;
white-space: nowrap;
}
#tmsPortalAdminPanel .tms-hotspot-admin-toolbar__actions {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
#tmsPortalAdminPanel .tms-hotspot-toolbar-btn {
min-height: 32px !important;
height: 32px !important;
border-radius: 10px !important;
padding: 0 12px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
white-space: nowrap;
}
#tmsPortalAdminPanel #tmsPortalAdminResetPosition.tms-hotspot-toolbar-btn {
width: 32px !important;
padding: 0 !important;
}
/* Hotspot Toolbar V2 */
#tmsPortalAdminPanel .tms-hotspot-admin-toolbar__actions {
display:flex !important;
align-items:center !important;
gap:8px !important;
}
#tmsPortalAdminPanel .tms-hotspot-admin-toolbar__actions
.tms-portal-undo-btn,
#tmsPortalAdminPanel .tms-hotspot-admin-toolbar__actions
.tms-portal-redo-btn,
#tmsPortalAdminPanel .tms-hotspot-admin-toolbar__actions
.tms-shell-collapse-btn,
#tmsPortalAdminPanel .tms-hotspot-admin-toolbar__actions
#tmsPortalAdminResetPosition {
position:static !important;
top:auto !important;
right:auto !important;
left:auto !important;
bottom:auto !important;
margin:0 !important;
width:32px !important;
min-width:32px !important;
height:32px !important;
min-height:32px !important;
border-radius:10px !important;
transform:none !important;
}
#tmsPortalAdminPanel .tms-hotspot-admin-toolbar__actions
.tms-portal-dirty-indicator {
position:static !important;
top:auto !important;
right:auto !important;
margin-left:8px !important;
margin-right:0 !important;
transform:none !important;
pointer-events:none;
}
#tmsPortalAdminPanel .tms-hotspot-admin-toolbar__actions
#tmsPortalNewHotspot {
margin-left:4px;
}
/* TMS Hotspotverwaltung Toolbar V2 */
#tmsPortalAdminPanel .tms-hotspot-admin-toolbar__actions {
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
#tmsPortalAdminPanel .tms-hotspot-admin-toolbar__actions .tms-portal-undo-btn,
#tmsPortalAdminPanel .tms-hotspot-admin-toolbar__actions .tms-portal-redo-btn,
#tmsPortalAdminPanel .tms-hotspot-admin-toolbar__actions .tms-shell-collapse-btn,
#tmsPortalAdminPanel .tms-hotspot-admin-toolbar__actions #tmsPortalAdminResetPosition {
position: static !important;
top: auto !important;
right: auto !important;
left: auto !important;
bottom: auto !important;
margin: 0 !important;
width: 32px !important;
min-width: 32px !important;
height: 32px !important;
min-height: 32px !important;
border-radius: 10px !important;
transform: none !important;
}
#tmsPortalAdminPanel .tms-hotspot-admin-toolbar__actions .tms-portal-dirty-indicator {
position: static !important;
top: auto !important;
right: auto !important;
margin-left: 8px !important;
margin-right: 0 !important;
transform: none !important;
pointer-events: none;
}
#tmsPortalAdminPanel .tms-hotspot-admin-toolbar__actions #tmsPortalNewHotspot {
margin-left: 4px;
}
/* TMS Hotspot Inspector Active Toggle V1 */
#tmsPortalAdminPanel .tms-hotspot-active-toggle {
min-width: 74px !important;
font-weight: 800 !important;
}
#tmsPortalAdminPanel .tms-hotspot-active-toggle.is-active {
background: rgba(34,197,94,.92) !important;
color: #052e16 !important;
border-color: rgba(22,101,52,.35) !important;
}
#tmsPortalAdminPanel .tms-hotspot-active-toggle.is-inactive {
background: rgba(148,163,184,.82) !important;
color: #0f172a !important;
border-color: rgba(71,85,105,.35) !important;
}
/* TMS Hotspot Inspector Active Toggle V1 */
#tmsPortalAdminPanel .tms-hotspot-active-toggle {
min-width: 74px !important;
font-weight: 800 !important;
}
#tmsPortalAdminPanel .tms-hotspot-active-toggle.is-active {
background: rgba(34,197,94,.92) !important;
color: #052e16 !important;
border-color: rgba(22,101,52,.35) !important;
}
#tmsPortalAdminPanel .tms-hotspot-active-toggle.is-inactive {
background: rgba(148,163,184,.82) !important;
color: #0f172a !important;
border-color: rgba(71,85,105,.35) !important;
}
/* TMS Bridge V0.8: global dock visibility decoupled from compact/campus */
body.tms-bridge-enabled .tms-portal-shell-dock {
display: flex !important;
}
body.tms-bridge-enabled:not(.tms-shell-compact) .tms-portal-shell-dock {
left: 88px !important;
right: auto !important;
bottom: 12px !important;
z-index: 20000 !important;
}
/* TMS Bridge V0.9c: bridge zones as quiet layout containers */
.tms-bridge-zone {
display: flex;
align-items: center;
gap: 8px;
min-height: 24px;
}
.tms-bridge-zone-context {
flex: 1 1 auto;
}
.tms-bridge-zone-global {
flex: 0 0 auto;
}
.tms-bridge-zone-system {
flex: 0 0 auto;
opacity: .9;
}
/* GUIDEON-DRAWER-001: Bridge drawer consumer */
.tms-guideon-drawer {
position: fixed;
top: 0;
right: var(--tms-shell-drawer-right, 0px);
bottom: var(--tms-bridge-height, 64px);
width: var(--tms-shell-drawer-width, 420px);
height: calc(100vh - var(--tms-bridge-height, 64px));
z-index: var(--tms-shell-drawer-z-index, 30000);
transform: translateX(110%);
transition: transform .22s ease;
background: #ffffff;
border-left: 1px solid rgba(15, 23, 42, .14);
box-shadow: -18px 0 42px rgba(15, 23, 42, .22);
overflow: auto;
}
.tms-guideon-drawer.is-open {
transform: translateX(0);
}
.tms-guideon-drawer__header {
display: flex;
justify-content: space-between;
gap: 16px;
align-items: flex-start;
padding: 18px 18px 12px;
border-bottom: 1px solid rgba(15, 23, 42, .10);
}
.tms-guideon-drawer__eyebrow {
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
color: #64748b;
}
.tms-guideon-drawer__title {
margin: 4px 0 0;
font-size: 22px;
line-height: 1.2;
}
.tms-guideon-drawer__close {
border: 0;
background: transparent;
font-size: 28px;
line-height: 1;
cursor: pointer;
}
.tms-guideon-drawer__body {
padding: 18px;
}
/* TMS Guideon Beacon V1 */
.tms-guideon-beacon {
appearance: none;
border: 0;
background: transparent;
padding: 0;
margin: 0;
cursor: pointer;
pointer-events: auto;
display: inline-flex;
align-items: center;
justify-content: center;
}
.tms-guideon-beacon img {
width: 56px;
height: 56px;
display: block;
transition: transform .18s ease, filter .18s ease;
}
.tms-guideon-beacon:hover img {
transform: scale(1.08);
filter: drop-shadow(0 0 12px rgba(250,204,21,.55));
}
/* TMS Guideon Beacon State V1 */
.tms-guideon-beacon {
position: fixed;
right: 18px;
bottom: calc(var(--tms-bridge-height, 64px) + var(--tms-bridge-bottom-offset, 12px) + 24px);
z-index: 30020;
}
.tms-guideon-beacon.is-active img {
filter:
drop-shadow(0 0 8px rgba(250,204,21,.45))
drop-shadow(0 0 18px rgba(250,204,21,.35))
drop-shadow(0 0 28px rgba(250,204,21,.20));
}
@keyframes tmsGuideonJourneyPulse {
0%, 100% {
filter:
drop-shadow(0 0 8px rgba(250,204,21,.35))
drop-shadow(0 0 18px rgba(250,204,21,.25));
}
50% {
filter:
drop-shadow(0 0 14px rgba(250,204,21,.65))
drop-shadow(0 0 32px rgba(250,204,21,.50));
}
}
.tms-guideon-beacon.has-journey img {
animation: tmsGuideonJourneyPulse 2.4s ease-in-out infinite;
}
/* TMS Guideon Beacon Glow Fix V1 */
.tms-guideon-beacon.is-active {
box-shadow:
0 0 10px rgba(250,204,21,.45),
0 0 22px rgba(250,204,21,.35),
0 0 38px rgba(250,204,21,.22);
border-radius: 999px;
}
@keyframes tmsGuideonBeaconPulseRing {
0%, 100% {
box-shadow:
0 0 10px rgba(250,204,21,.35),
0 0 22px rgba(250,204,21,.25);
}
50% {
box-shadow:
0 0 16px rgba(250,204,21,.70),
0 0 36px rgba(250,204,21,.50),
0 0 56px rgba(250,204,21,.30);
}
}
.tms-guideon-beacon.has-journey {
animation: tmsGuideonBeaconPulseRing 2.4s ease-in-out infinite;
}
/* TMS Guideon Beacon Glow Strength V2 */
.tms-guideon-beacon.is-active {
box-shadow:
0 0 14px rgba(250,204,21,.65),
0 0 30px rgba(250,204,21,.48),
0 0 54px rgba(250,204,21,.32),
0 0 82px rgba(250,204,21,.18);
}
@keyframes tmsGuideonBeaconPulseRing {
0%, 100% {
box-shadow:
0 0 14px rgba(250,204,21,.45),
0 0 30px rgba(250,204,21,.32),
0 0 54px rgba(250,204,21,.18);
}
50% {
box-shadow:
0 0 20px rgba(250,204,21,.85),
0 0 44px rgba(250,204,21,.65),
0 0 76px rgba(250,204,21,.42),
0 0 110px rgba(250,204,21,.24);
}
}