.tool-ui { /* === Validate layout dimensions === * --ui-scale is a single uniform scale factor for the whole tool, like browser zoom. JS sets it from the available * viewport size (see util.applyToolScale); every dimension below is expressed as base-size * var(--ui-scale) so * the pano, validation menu, and text all grow and shrink together in proportion. */ --ui-scale: 1; /* The single scale knob. Overridden inline by util.applyToolScale() on load and resize. */ /* Base sizes at --ui-scale = 1. util.applyToolScale() reads these to compute the tool's reference footprint, * so they must stay plain px values (no var()/calc()). */ --pano-base-width: 720px; /* Pano display size at --ui-scale = 1 (3:2, matching Explore). */ --pano-base-height: 480px; --menu-base-width: 300px; /* Right-hand validation menu column. */ --menu-base-gap: 16px; /* Horizontal gap between the pano and the validation menu. */ --header-base-height: 80px; /* Mission title + progress bar sitting above the pano. */ --pano-width: calc(var(--pano-base-width) * var(--ui-scale)); --pano-height: calc(var(--pano-base-height) * var(--ui-scale)); --menu-width: calc(var(--menu-base-width) * var(--ui-scale)); --menu-gap: calc(var(--menu-base-gap) * var(--ui-scale)); --header-height: calc(var(--header-base-height) * var(--ui-scale)); /* Derived positions — these keep the rest of the layout in sync with the pano size automatically. */ --menu-left: calc(var(--pano-width) + var(--menu-gap)); /* Left edge of the validation menu column. */ --app-width: calc(var(--pano-width) + var(--menu-gap) + var(--menu-width)); /* Base text size for the whole tool. */ font: var(--text-body-regular); width: var(--app-width); /* Overrides bootstrap .container media queries to keep a consistent width. */ padding: 0; /* Drop bootstrap .container's 15px side padding so the app-width holder inside stays centered. */ visibility: hidden; /* Hidden until mission start tutorial overlay is ready to cover it. */ } #svv-application-holder { background: var(--color-neutral-white); margin: 0 auto; position: relative; height: calc(var(--header-height) + var(--pano-height)); width: var(--app-width); } .normal { font-weight: normal; } /* Scale Bootstrap tooltips (reason-button examples, button hints, etc.) with the UI. They render on , so they read --ui-scale from :root. Font/padding are scaled rather than transformed so Bootstrap positioning still works. */ .tooltip-inner { font: var(--text-caption-regular); padding: calc(3px * var(--ui-scale)) calc(8px * var(--ui-scale)); max-width: calc(200px * var(--ui-scale)); } /* Overwriting jquery tooltip styling. */ .tooltip.in { opacity: 1; } #modal-mission-holder { position: absolute; left: 0; top: 0; height: 100%; width: 100%; text-align: justify; visibility: hidden; } #modal-mission-foreground { padding: calc(100px * var(--ui-scale)) calc(20px * var(--ui-scale)) calc(10px * var(--ui-scale)) calc(20px * var(--ui-scale)); visibility: hidden; } .modal-foreground { top: var(--header-height); left: 0; right: 0; padding: calc(10px * var(--ui-scale)); height: var(--pano-height); background: var(--color-neutral-white); color: var(--color-neutral-800); font: var(--text-subtitle-regular); position: absolute; overflow: hidden; border: calc(4px * var(--ui-scale)) solid var(--color-neutral-black); border-radius: calc(5px * var(--ui-scale)); z-index: 10; } .modal-foreground h1 { font: var(--text-h3-medium); } .modal-background { position: absolute; left: calc(-60px * var(--ui-scale)); top: 0; background: rgb(from var(--color-neutral-white) r g b / 50%); height: 100%; width: 110%; } #modal-mission-close-button { display: block; width: 40%; margin: calc(30px * var(--ui-scale)) auto 0; } #modal-mission-instruction { text-align: center; } #modal-mission-background { position: absolute; left: 0; top: 0; background: rgb(from var(--color-neutral-white) r g b / 50%); visibility: hidden; height: 100%; width: 110%; } #modal-mission-complete-holder { visibility: hidden; } #modal-mission-complete-foreground { visibility: hidden; top: var(--header-height); } #modal-mission-complete-title { margin-top: calc(70px * var(--ui-scale)); text-align: center; } #modal-mission-complete-message { text-align: center; } #modal-mission-complete-table { height: calc(190px * var(--ui-scale)); padding-left: calc(175px * var(--ui-scale)); } .modal-foreground .btn-primary { color: var(--color-neutral-white); background: var(--color-link-100); cursor: pointer; border: 1px solid transparent; font: var(--text-subtitle-regular); opacity: 1.0; } .modal-foreground .btn-secondary { color: var(--color-neutral-black); background: var(--color-neutral-white); cursor: pointer; border: 1px solid var(--color-neutral-black); font: var(--text-subtitle-regular); opacity: 1.0; } .modal-foreground .btn-loading { color: var(--color-neutral-white); background: var(--color-neutral-600); cursor: wait; border: 1px solid transparent; font: var(--text-subtitle-regular); opacity: 0.35; } /* Container for the panorama and its overlay controls (zoom, date, speed limit, etc.). */ #svv-panorama-holder { position: absolute; top: var(--header-height); width: var(--pano-width); height: var(--pano-height); } /* The panorama viewport. It fills the full pano area (no border) so the marker layer, which is the same size, overlays the imagery exactly. The colored frame is drawn on top by #pano-border-frame instead. */ #svv-panorama { position: absolute; left: 0; top: 0; height: var(--pano-height); width: var(--pano-width); border-radius: calc(4px * var(--ui-scale)); background-color: var(--color-asphalt-400); overflow: hidden; } /* Colored frame on top of the pano and marker layers. Drawing it above the marker (rather than as the pano's own border underneath) means a label at the very edge is clipped by the frame instead of rendering on top of it. */ #pano-border-frame { position: absolute; left: 0; top: 0; height: var(--pano-height); width: var(--pano-width); z-index: 3; pointer-events: none; box-sizing: border-box; border: calc(3px * var(--ui-scale)) solid var(--color-asphalt-400); border-radius: calc(4px * var(--ui-scale)); } #view-control-layer { position: absolute; width: var(--pano-width); height: var(--pano-height); left: 0; top: 0; overflow: hidden; cursor: url(/assets/images/icons/openhand.cur) 4 4, move; z-index: 2; /* http://stackoverflow.com/questions/8942805/chrome-bug-cursor-changes-on-mouse-down-move */ -webkit-user-select: none; user-select: none; } /* The label marker (created by PanoMarker with a base px size that is multiplied by the UI scale in JS). */ #validate-pano-marker { background-size: 100% 100%; } .speed-limit-sign { display: none; width: calc(60px * var(--ui-scale)); height: calc(70px * var(--ui-scale)); padding: calc(3px * var(--ui-scale)); margin-top: calc(-5px * var(--ui-scale)); margin-left: calc(-4px * var(--ui-scale)); margin-right: calc(-4px * var(--ui-scale)); top: 0; right: 0; border-radius: calc(5px * var(--ui-scale)); position: absolute; z-index: 3; pointer-events: none; transform: scale(0.75); background: rgb(from var(--color-neutral-white) r g b / 75%); } .speed-limit-sign-left { left: 0; } .speed-limit-sign[data-design-style="non-us-canada"] { width: calc(75px * var(--ui-scale)); height: calc(75px * var(--ui-scale)); padding: 0px; margin-top: calc(-10px * var(--ui-scale)); margin-left: calc(-10px * var(--ui-scale)); border-radius: 100%; transform: scale(0.6); } .speed-limit-holder { flex: 1; display: flex; align-items: center; justify-content: center; border-radius: calc(5px * var(--ui-scale)); border: calc(3px * var(--ui-scale)) solid var(--color-neutral-black); } .speed-limit-sign[data-design-style="non-us-canada"] .speed-limit-holder { border-radius: 100%; border: calc(7px * var(--ui-scale)) solid var(--color-error-200); } .speed-limit-text { display: flex; flex-direction: column; font: var(--text-small-bold); text-align: center; } #speed-limit { font: var(--text-h3-bold); font-size: calc(30px * var(--ui-scale)); } /* Shared button look in pano-overlay-buttons.css; this rule only positions the holder in the bottom-right of pano. */ #zoom-buttons-holder { position: absolute; z-index: 3; right: calc(7px * var(--ui-scale)); bottom: calc(19px * var(--ui-scale)); } #svv-panorama-date-holder { display: flex; justify-content: flex-start; height: calc(28px * var(--ui-scale)); position: absolute; bottom: 0; left: calc(71px * var(--ui-scale)); z-index: 2; font: var(--text-small-medium); text-shadow: calc(1px * var(--ui-scale)) calc(1px * var(--ui-scale)) calc(1px * var(--ui-scale)) var(--color-neutral-black); color: var(--color-neutral-white); } #svv-panorama-date { padding: calc(3px * var(--ui-scale)); } #pano-info-button { margin-left: calc(4px * var(--ui-scale)); margin-top: calc(4.5px * var(--ui-scale)); height: calc(16px * var(--ui-scale)); } /* Modify Google's terms / report an issue buttons' color to match our own buttons. */ .gm-style-cc div { background-color: var(--color-asphalt-400); } .gm-style-cc div div { background-color: var(--color-asphalt-400) !important; } /* Scale Google's terms / report-a-problem links (bottom-right) with the UI. They're Google's own elements with no scale hooks, so we scale them visually, anchored to the bottom-right corner they sit in. Must stay scoped to #view-control-layer (where PanoManager relocates them): unscoped, it also matches a wrapper inside GSV's own DOM and transform-scales the entire street view scene. */ #view-control-layer div:has(> .gmnoprint) { bottom: calc(3px * var(--ui-scale)) !important; right: calc(2px * var(--ui-scale)) !important; transform: scale(var(--ui-scale)); transform-origin: bottom right; } /* Scale Google's own Street View logo with the UI, anchored to its corner. */ #svv-panorama div:has(> a[aria-label*="Google"]) { left: calc(2px * var(--ui-scale)) !important; bottom: calc(2px * var(--ui-scale)) !important; transform: scale(var(--ui-scale)); transform-origin: bottom left; } /* Scale Mapillary's attribution links with the UI. */ #view-control-layer .mapillary-attribution-container { bottom: calc(3px * var(--ui-scale)) !important; right: calc(2px * var(--ui-scale)) !important; transform: scale(var(--ui-scale)); transform-origin: bottom right; } .button-on-pano { position: absolute; z-index: 2; display: inline-flex; align-items: center; justify-content: center; height: calc(30px * var(--ui-scale)); padding: calc(8px * var(--ui-scale)) calc(12px * var(--ui-scale)) calc(8px * var(--ui-scale)) calc(10px * var(--ui-scale)); gap: calc(8px * var(--ui-scale)); background: var(--color-neutral-white); border-radius: calc(6px * var(--ui-scale)); border: calc(1.5px * var(--ui-scale)) solid var(--color-neutral-800); color: var(--color-asphalt-500); font: var(--text-tiny-semibold); outline: none; } #label-visibility-control-button { top: calc(7px * var(--ui-scale)); right: calc(7px * var(--ui-scale)); } .hide-label-button-icon { width: calc(14px * var(--ui-scale)); height: calc(14px * var(--ui-scale)); } .label-visibility-button-on-label { position: absolute; visibility: hidden; padding: calc(2px * var(--ui-scale)) calc(5px * var(--ui-scale)); border: calc(1px * var(--ui-scale)) solid var(--color-neutral-black); border-radius: calc(3px * var(--ui-scale)); font: var(--text-tiny-regular); cursor: pointer; z-index: 2; } #label-description-box { display: block; visibility: hidden; max-width: calc(260px * var(--ui-scale)); position: absolute; color: var(--color-neutral-white); font: var(--text-caption-regular); padding: calc(3px * var(--ui-scale)) calc(15px * var(--ui-scale)) calc(3px * var(--ui-scale)) calc(10px * var(--ui-scale)); border-radius: calc(5px * var(--ui-scale)); border: var(--color-neutral-white) solid calc(1px * var(--ui-scale)); z-index: 1; } .label-description-box-line-1 { display: flex; align-items: center; align-content: center; } .severity-image { height: calc(13px * var(--ui-scale)); width: calc(13px * var(--ui-scale)); display: block; margin-left: calc(5px * var(--ui-scale)); } #mission-title { width: var(--app-width); position: absolute; top: calc(20px * var(--ui-scale)); font: var(--text-body-bold); letter-spacing: 5%; } /* The mission progress bar uses the shared .ps-progress-bar component; this positions it and sets its slim height. */ #mission-progress-bar-section { --ps-progress-bar-height: calc(7px * var(--ui-scale)); position: absolute; top: calc(50px * var(--ui-scale)); width: var(--pano-width); gap: calc(12px * var(--ui-scale)); } #mission-progress-bar-text { font: var(--text-small-regular); padding-bottom: calc(2px * var(--ui-scale)); } #admin-info-section { display: none; position: absolute; top: calc(43px * var(--ui-scale)); left: var(--menu-left); } /* The popover renders on (so it reads --ui-scale from :root); override Bootstrap's 276px max-width. */ .admin-info-popover { max-width: calc(450px * var(--ui-scale)); } #admin-info-content h1 { font: var(--text-title-bold); margin-top: 0; margin-bottom: 0; } #admin-info-content h2 { font: var(--text-body-bold); margin-top: calc(8px * var(--ui-scale)); margin-bottom: 0; } #admin-info-content p { font: var(--text-caption-regular); margin-bottom: 0; } #validation-menu-holder { margin: 0; position: absolute; left: var(--menu-left); top: var(--header-height); width: var(--menu-width); height: var(--pano-height); display: flex; flex-direction: column; justify-content: flex-start; gap: calc(20px * var(--ui-scale)); } .validate-disabled { opacity: 0.6; pointer-events: none; cursor: not-allowed; } .validation-menu-section { display: none; /* Initially hidden, sections shown when validation buttons are clicked. */ } #main-validate-section { display: block; } #validate-submit-section { display: flex; justify-content: space-between; margin-top: auto; /* Pushes the section to the bottom of the validation-menu-holder. */ } .validation-menu-section-header { font: var(--text-small-bold); margin-bottom: calc(10px * var(--ui-scale)); } #validation-button-holder { display: flex; justify-content: space-between; } /* Overriding some of our design system tokens, though we could likely bring them more in line with DST. */ .validate-page-button { display: inline-block; width: calc(86px * var(--ui-scale)); height: calc(32px * var(--ui-scale)); border: 1px solid var(--color-asphalt-500); text-align: center; background-color: var(--color-neutral-white); outline: none; /* Removes focus outline that shows up when I press shift after clicking on a button. */ } .validate-button:hover { border: none; } .validate-button.chosen { border: none; } #validate-yes-button.chosen { background: var(--color-pine-500); } #validate-no-button.chosen { background: var(--color-orange-400); } #validate-unsure-button.chosen { background: var(--color-neutral-900); color: var(--color-neutral-white); } /* Only show hover states on non-touch devices. */ @media (hover: hover) { #validate-yes-button:hover { background: var(--color-pine-300); } #validate-yes-button.chosen:hover { background: var(--color-pine-500); } #validate-no-button:hover { background: var(--color-orange-300); } #validate-no-button.chosen:hover { background: var(--color-orange-400); } #validate-unsure-button:hover { background: var(--color-neutral-700); color: var(--color-neutral-white); } #validate-unsure-button.chosen:hover { background: var(--color-neutral-900); } } #sidewalk-ai-suggestions-block { margin-top: calc(15px * var(--ui-scale)); margin-bottom: calc(15px * var(--ui-scale)); } .sidewalk-ai-suggestions-header { font: var(--text-tiny-semibold); margin-bottom: calc(6px * var(--ui-scale)); } .ai-icon { width: calc(16px * var(--ui-scale)); height: calc(16px * var(--ui-scale)); } .sidewalk-ai-suggestions-list-holder { display: flex; gap: calc(5px * var(--ui-scale)); flex-wrap: wrap; } /* Shared pill look from tag-pills.css; these modifiers add the AI add/remove color semantics. The pill text is set directly on the element (no label span), so the pill font lives here. */ .sidewalk-ai-suggested-tag { font: var(--text-tiny-semibold); cursor: pointer; transition: all 0.3s; } .sidewalk-ai-suggested-tag.to-add { outline-color: var(--color-pine-700); color: var(--color-pine-700); } .sidewalk-ai-suggested-tag.to-remove { outline-color: var(--color-orange-500); color: var(--color-orange-500); } .sidewalk-ai-suggested-tag.to-add:hover { background: rgb(from var(--color-pine-500) r g b / 21%); outline-color: var(--color-pine-600); } .sidewalk-ai-suggested-tag.to-remove:hover { background: rgb(from var(--color-orange-500) r g b / 15%); outline-color: var(--color-orange-500); } .validate-text-input { width: 100%; margin-top: calc(10px * var(--ui-scale)); } /* Bootstrap is getting loaded after this file hence overriding this. To avoid it, I am adding important but ideally the order of inclusion should be flipped. */ .validate-text-input input, .selectize-input { display: flex !important; width: 100% !important; height: calc(36px * var(--ui-scale)) !important; padding: calc(8px * var(--ui-scale)) calc(18px * var(--ui-scale)) !important; align-items: center !important; gap: calc(4px * var(--ui-scale)) !important; flex-shrink: 0 !important; border-radius: calc(6px * var(--ui-scale)) !important; border: calc(1px * var(--ui-scale)) solid var(--color-neutral-500) !important; background: var(--color-neutral-white) !important; font: var(--text-tiny-semibold) !important; } .selectize-input.focus.input-active.has-options { border-radius: calc(6px * var(--ui-scale)) calc(6px * var(--ui-scale)) 0 0; } .selectize-dropdown { border-radius: 0 0 calc(6px * var(--ui-scale)) calc(6px * var(--ui-scale)) !important; } .selectize-input input { font: var(--text-tiny-semibold); width: 100% !important; /* Text was getting cut off by default. */ } #current-tags-list { display: flex; /* display:none when there are no tags, display: flex when there are; updated in JS. */ flex-wrap: wrap; row-gap: calc(5px * var(--ui-scale)); column-gap: calc(5px * var(--ui-scale)); margin-bottom: calc(10px * var(--ui-scale)); } /* Shared pill look (including the active green background) from tag-pills.css; this only adds the X-to-remove gap. */ .current-tag.tag-pill { cursor: default; } .remove-tag-x { cursor: pointer; width: calc(9px * var(--ui-scale)); height: calc(9px * var(--ui-scale)); fill: var(--color-neutral-black); } .remove-tag-x svg { display: block; width: 100%; height: 100%; } .selectize-dropdown-content { display: flex; width: calc(285px * var(--ui-scale)); height: fit-content; max-height: calc(200px * var(--ui-scale)); /* Selectize's own stylesheet caps this at a fixed 200px. */ padding: calc(12px * var(--ui-scale)); align-items: center; align-content: center; gap: calc(6px * var(--ui-scale)); flex-wrap: wrap; } /* Selectize renders its own .option nodes; DesktopValidationMenu adds the tag-pill classes so they pick up the shared pill look. These rules out-rank selectize's own stylesheet, which is more specific than .tag-pill. */ .selectize-dropdown .option.tag-pill { padding: calc(3px * var(--ui-scale)) calc(10px * var(--ui-scale)); font: var(--text-tiny-semibold); text-align: center; transition: all 0.3s; } /* Removing default styling for "active" options in dropdown. Would be left over after hover. */ .selectize-dropdown .option.active { background: inherit; color: inherit; } .selectize-dropdown .option.tag-pill:hover { background: var(--color-pine-200); outline: none; } #severity-radio-holder { display: flex; align-items: center; gap: calc(16px * var(--ui-scale)); } #optional-comment-input { margin-top: 0px; /* Overrides .validate-text-input margin, since the textbox for agreeing looks different. */ } #no-reason-options, #unsure-reason-options { display: flex; flex-direction: column; gap: calc(10px * var(--ui-scale)); } .validation-reason-button { display: flex; height: calc(36px * var(--ui-scale)); justify-content: center; align-items: center; border: calc(1px * var(--ui-scale)) solid var(--color-neutral-700); background-color: var(--color-neutral-white); } /* Matching style of 'No' and 'Unsure' button for now. */ #no-reason-options .validation-reason-button.chosen { background: var(--color-orange-400); border: none; color: var(--color-neutral-white); } #add-disagree-comment.chosen { border-color: var(--color-orange-400) !important; } #unsure-reason-options .validation-reason-button.chosen { background: var(--color-neutral-900); border: none; color: var(--color-neutral-white); } #add-unsure-comment.chosen { border-color: var(--color-orange-900) !important; } /* Only show hover states on non-touch devices. Same CSS as for chosen state. */ @media (hover: hover) { #no-reason-options .validation-reason-button:hover { background: var(--color-orange-300); border: none; color: var(--color-neutral-white); } #no-reason-options .validation-reason-button.chosen:hover { background: var(--color-orange-400); } #add-disagree-comment:hover { border-color: var(--color-orange-300) !important; } #add-disagree-comment.chosen:hover { border-color: var(--color-orange-400) !important; } #unsure-reason-options .validation-reason-button:hover { background: var(--color-neutral-700); border: none; color: var(--color-neutral-white); } #unsure-reason-options .validation-reason-button.chosen:hover { background: var(--color-neutral-900); } #add-unsure-comment:hover { border-color: var(--color-neutral-700) !important; } #add-unsure-comment.chosen:hover { border-color: var(--color-neutral-900) !important; } } /* Tooltip example images (reason buttons, tags, severity) are sized by JS via this class so they scale with the UI. */ .validate-tooltip-img { height: calc(140px * var(--ui-scale)); } .disabled { opacity: 0.5; cursor: not-allowed; } .noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ } .mission-start-tutorial-overlay { position: absolute; height: calc(100% - var(--navbar-height)); width: 100%; background: var(--color-neutral-white); z-index: 11; display: none; /* Will be later set to flex by JS after rendering. */ flex-shrink: 0; justify-content: flex-start; overflow: auto; flex-direction: column; --arrow-button-width: calc(30px * var(--ui-scale, 1)); --arrow-button-margin: calc(30px * var(--ui-scale, 1)); --mst-base-width: 1095px; --mst-h-margin: 40px; } .mst-content { width: calc(var(--mst-base-width) * var(--ui-scale, 1)); margin: 0 auto; } .mst-instruction-1 { font: var(--text-title-bold); margin-top: calc(8px * var(--ui-scale, 1)); padding: 0 calc(70px * var(--ui-scale, 1)); width: 100%; height: fit-content; } .mst-instruction-2 { font: var(--text-subtitle-bold); margin: calc(5px * var(--ui-scale, 1)) 0; padding: 0 calc(70px * var(--ui-scale, 1)); width: 100%; } .mst-carousel { display: flex; flex-shrink: 0; width: 100%; height: calc(436px * var(--ui-scale, 1)); margin-top: calc(10px * var(--ui-scale, 1)); } .previous-slide-button, .next-slide-button { height: 100%; width: var(--arrow-button-width); display: flex; fill: var(--color-neutral-700); cursor: pointer; } .previous-slide-button:not(.disabled):hover, .next-slide-button:not(.disabled):hover { fill: var(--color-neutral-black); } .previous-slide-button { margin-right: var(--arrow-button-margin); } .next-slide-button { margin-left: var(--arrow-button-margin); } .mst-slide { height: 100%; display: flex; flex-shrink: 0; flex-wrap: wrap; width: calc(100% - 2 * (var(--arrow-button-width) + var(--arrow-button-margin))); justify-content: space-between; } .mst-text-area { width: calc(290px * var(--ui-scale, 1)); display: flex; flex-shrink: 0; flex-wrap: wrap; flex-direction: column; position: relative; } .label-type-title { font: var(--text-title-bold); text-align: left; margin-bottom: calc(15px * var(--ui-scale, 1)); padding: 0 calc(10px * var(--ui-scale, 1)); } .label-type-subtitle { font: var(--text-body-bold); padding: 0 calc(10px * var(--ui-scale, 1)); } .label-type-description { font: var(--text-body-regular); text-align: left; padding: 0 calc(10px * var(--ui-scale, 1)); margin-top: calc(10px * var(--ui-scale, 1)); } .mission-start-tutorial-overlay-footer { margin-top: calc(15px * var(--ui-scale, 1)); width: 100%; } .mission-start-tutorial-done-btn { font: var(--text-small-bold); position: absolute; bottom: 0; right: 0; } @keyframes pulsate { 0% { transform: scale(1); } 50% { transform: scale(0.9); } 50% { transform: scale(1); } 50% { transform: scale(1.1); } } /* Catching users' attention after they finish going through all the slides. */ .mission-start-tutorial-done-btn.focus { animation: pulsate; animation-duration: 2s; animation-iteration-count: 3; animation-delay: 1s; } .msts-image-area { width: calc(658px * var(--ui-scale, 1)); height: calc(436px * var(--ui-scale, 1)); float: right; background: var(--color-neutral-300); display: flex; position: relative; border-radius: calc(10px * var(--ui-scale, 1)); overflow: hidden; } .msts-image { height: 100%; width: 100%; object-fit: contain; } .label-on-image { display: none; position: absolute; background: var(--color-neutral-white); border: calc(3px * var(--ui-scale, 1)) solid; border-radius: calc(10px * var(--ui-scale, 1)); box-sizing: content-box; min-height: calc(80px * var(--ui-scale, 1)); max-height: calc(90px * var(--ui-scale, 1)); min-width: calc(160px * var(--ui-scale, 1)); max-width: calc(220px * var(--ui-scale, 1)); } /* correct/incorrect classes are added to the slide element */ .correct .label-on-image { border-color: var(--color-pine-700); } /* correct/incorrect classes are added to the slide element */ .incorrect .label-on-image { border-color: var(--color-error-200); } .label-on-image-type { margin: calc(10px * var(--ui-scale, 1)); display: flex; align-items: center; } .label-on-image-type-icon { height: calc(24px * var(--ui-scale, 1)); width: calc(24px * var(--ui-scale, 1)); fill: none; display: flex; margin-right: calc(3px * var(--ui-scale, 1)); } .correct .label-on-image-type-icon { stroke: var(--color-pine-700); } .incorrect .label-on-image-type-icon { stroke: var(--color-error-200); } .label-on-image-type-title { display: flex; font: var(--text-body-bold); margin-left: calc(3px * var(--ui-scale, 1)); } .correct .label-on-image-type-title { color: var(--color-pine-700); } .incorrect .label-on-image-type-title { color: var(--color-error-200); } .label-on-image-description { font: var(--text-body-regular); margin: 0 calc(12px * var(--ui-scale, 1)); } .example-type-area { display: flex; padding: calc(10px * var(--ui-scale, 1)); margin-bottom: calc(20px * var(--ui-scale, 1)); position: relative; } .example-type-area::after { background: #30785D; background: var(--color-pine-700); width: calc(100% - 20px * var(--ui-scale, 1)); height: calc(8px * var(--ui-scale, 1)); position: absolute; bottom: calc(-6px * var(--ui-scale, 1)); content: ''; left: 50%; transform: translateX(-50%); } .correct .example-type-area::after { background: var(--color-pine-700); } .incorrect .example-type-area::after { background: var(--color-error-200); } .example-type-icon { height: calc(24px * var(--ui-scale, 1)); width: calc(24px * var(--ui-scale, 1)); display: inline-block; margin-right: calc(5px * var(--ui-scale, 1)); fill: none; } .correct .example-type-icon { stroke: var(--color-pine-700); } .incorrect .example-type-icon { stroke: var(--color-error-200); } .example-type-label { font: var(--text-title-bold); display: inline-block; margin-left: calc(5px * var(--ui-scale, 1)); } .correct .example-type-label { color: var(--color-pine-700); } .incorrect .example-type-label { color: var(--color-error-200); } .mst-carousel-location-indicator-area { height: calc(12px * var(--ui-scale, 1)); width: 100%; padding: calc(5px * var(--ui-scale, 1)); margin-top: calc(25px * var(--ui-scale, 1)); display: flex; justify-content: center; align-items: center; } .mst-carousel-location-indicator { height: calc(7px * var(--ui-scale, 1)); width: calc(40px * var(--ui-scale, 1)); margin: 0 calc(3.5px * var(--ui-scale, 1)); background: var(--color-neutral-400); transition: all 0.4s; border-radius: 100px; } .mst-carousel-location-indicator.current-location { background: var(--color-asphalt-500); } /* * Explore mission screen tab bar styling */ .explore-mission-start-tab-bar { width: 100%; height: calc(50px * var(--ui-scale, 1)); display: flex; justify-content: space-between; margin: calc(5px * var(--ui-scale, 1)) 0; padding: 0 calc(2 * var(--arrow-button-margin)); } .explore-mission-start-tab-content { margin: 0 calc(12px * var(--ui-scale, 1)); display: flex; align-items: center; } .explore-mission-start-tab.label { border-radius: calc(4px * var(--ui-scale, 1)) calc(4px * var(--ui-scale, 1)) 0 0; height: 100%; width: 100%; color: var(--color-neutral-black); cursor: pointer; display: flex; justify-content: center; align-items: center; font: var(--text-tiny-semibold); line-height: 120%; text-align: left; border-bottom: calc(3px * var(--ui-scale, 1)) solid var(--color-neutral-200); padding: 0 calc(3px * var(--ui-scale, 1)); filter: saturate(0); transition: all 0.25s; } .explore-mission-start-tab.label:hover, .explore-mission-start-tab.label.active { filter: saturate(1); } .explore-mission-start-tab.label[data-label-type="CurbRamp"]:hover { background: rgb(from var(--color-label-curb-ramp) r g b / 15%); } .explore-mission-start-tab.label[data-label-type="NoCurbRamp"]:hover { background: rgb(from var(--color-label-no-curb-ramp) r g b / 15%); } .explore-mission-start-tab.label[data-label-type="Obstacle"]:hover { background: rgb(from var(--color-label-obstacle) r g b / 15%); } .explore-mission-start-tab.label[data-label-type="SurfaceProblem"]:hover { background: rgb(from var(--color-label-surface-problem) r g b / 15%); } .explore-mission-start-tab.label[data-label-type="NoSidewalk"]:hover { background: rgb(from var(--color-label-no-sidewalk) r g b / 15%); } .explore-mission-start-tab.label[data-label-type="Crosswalk"]:hover { background: rgb(from var(--color-label-crosswalk) r g b / 15%); } .explore-mission-start-tab.label[data-label-type="Signal"]:hover { background: rgb(from var(--color-label-signal) r g b / 15%); } /* Selected tabs */ .explore-mission-start-tab.label[data-label-type="CurbRamp"].active { background: rgb(from var(--color-label-curb-ramp) r g b / 15%); border-bottom-color: var(--color-label-curb-ramp); } .explore-mission-start-tab.label[data-label-type="NoCurbRamp"].active { background: rgb(from var(--color-label-no-curb-ramp) r g b / 15%); border-bottom-color: var(--color-label-no-curb-ramp); } .explore-mission-start-tab.label[data-label-type="Obstacle"].active { background: rgb(from var(--color-label-obstacle) r g b / 15%); border-bottom-color: var(--color-label-obstacle); } .explore-mission-start-tab.label[data-label-type="SurfaceProblem"].active { background: rgb(from var(--color-label-surface-problem) r g b / 15%); border-bottom-color: var(--color-label-surface-problem); } .explore-mission-start-tab.label[data-label-type="NoSidewalk"].active { background: rgb(from var(--color-label-no-sidewalk) r g b / 15%); border-bottom-color: var(--color-label-no-sidewalk); } .explore-mission-start-tab.label[data-label-type="Crosswalk"].active { background: rgb(from var(--color-label-crosswalk) r g b / 15%); border-bottom-color: var(--color-label-crosswalk); } .explore-mission-start-tab.label[data-label-type="Signal"].active { background: rgb(from var(--color-label-signal) r g b / 15%); border-bottom-color: var(--color-label-signal); } .explore-mission-start-tab-icon { width: calc(30px * var(--ui-scale, 1)); height: calc(30px * var(--ui-scale, 1)); margin-right: calc(7px * var(--ui-scale, 1)); flex-shrink: 0; /* Keep the icon at full size when the tab row gets squeezed, so it isn't clipped. */ display: flex; justify-content: center; align-items: center; } /* Let the SVG overflow rather than clip. When floating point widths, they can slightly flow outside the box. */ .explore-mission-start-tab-icon svg { width: 100%; height: 100%; overflow: visible; } .explore-mission-start-tab-text { width: 70%; white-space: initial; }