Spaces:
Running
Running
| .uploadContainer { | |
| margin: 0 auto; | |
| max-width: var(--go-ui-width-screen-lg); | |
| text-align: center; | |
| padding: var(--go-ui-spacing-lg) var(--go-ui-spacing-md) var(--go-ui-spacing-2xl) var(--go-ui-spacing-md); | |
| overflow-x: hidden; | |
| } | |
| .dropZone { | |
| border: var(--go-ui-width-separator-thick) dashed var(--go-ui-color-gray-40); | |
| background-color: var(--go-ui-color-gray-20); | |
| border-radius: var(--go-ui-border-radius-xl); | |
| padding: var(--go-ui-spacing-2xl) var(--go-ui-spacing-lg); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: var(--go-ui-spacing-lg); | |
| transition: all var(--go-ui-duration-transition-medium) ease; | |
| max-width: var(--go-ui-width-screen-md); | |
| margin: 0 auto; | |
| min-height: 250px; | |
| justify-content: center; | |
| } | |
| .dropZone:hover { | |
| background-color: var(--go-ui-color-gray-30); | |
| border-color: var(--go-ui-color-gray-50); | |
| } | |
| .dropZone.hasFile { | |
| background-color: var(--go-ui-color-white); | |
| border-color: var(--go-ui-color-gray-30); | |
| min-height: 300px; | |
| padding: var(--go-ui-spacing-lg); | |
| } | |
| .dropZoneIcon { | |
| width: 2.5rem; | |
| height: 2.5rem; | |
| color: var(--go-ui-color-red-90); | |
| } | |
| .dropZoneText { | |
| font-size: var(--go-ui-font-size-sm); | |
| color: var(--go-ui-color-gray-70); | |
| text-align: center; | |
| } | |
| .dropZoneSubtext { | |
| font-size: var(--go-ui-font-size-sm); | |
| color: var(--go-ui-color-gray-50); | |
| margin: var(--go-ui-spacing-md) 0; | |
| } | |
| .filePreview { | |
| width: 100%; | |
| max-width: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| .filePreviewImage { | |
| position: relative; | |
| max-width: 100%; | |
| max-height: 20rem; | |
| overflow: visible; | |
| border-radius: var(--go-ui-border-radius-lg); | |
| background-color: var(--go-ui-color-gray-20); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: var(--go-ui-spacing-sm); | |
| transition: all var(--go-ui-duration-transition-medium) ease; | |
| } | |
| .filePreviewImage:hover { | |
| background-color: var(--go-ui-color-gray-30); | |
| transform: translateY(-2px); | |
| box-shadow: var(--go-ui-box-shadow-md); | |
| } | |
| .filePreviewImage img { | |
| max-width: 100%; | |
| max-height: 18rem; | |
| width: auto; | |
| height: auto; | |
| object-fit: contain; | |
| border-radius: var(--go-ui-border-radius-md); | |
| box-shadow: var(--go-ui-box-shadow-sm); | |
| transition: transform var(--go-ui-duration-transition-medium) ease; | |
| } | |
| .filePreviewImage img:hover { | |
| transform: scale(1.02); | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .fileName { | |
| font-size: var(--go-ui-font-size-sm); | |
| font-weight: var(--go-ui-font-weight-medium); | |
| color: var(--go-ui-color-gray-80); | |
| margin-top: var(--go-ui-spacing-sm); | |
| text-align: center; | |
| } | |
| .fileInfo { | |
| font-size: var(--go-ui-font-size-xs); | |
| color: var(--go-ui-color-gray-60); | |
| margin-top: var(--go-ui-spacing-xs); | |
| text-align: center; | |
| } | |
| .helpLink { | |
| display: flex; | |
| justify-content: center; | |
| margin-top: var(--go-ui-spacing-md); | |
| } | |
| .helpLink a { | |
| color: var(--go-ui-color-red-90); | |
| font-size: var(--go-ui-font-size-xs); | |
| transition: color var(--go-ui-duration-transition-fast) ease; | |
| display: flex; | |
| align-items: center; | |
| gap: var(--go-ui-spacing-2xs); | |
| } | |
| .helpLink a:hover { | |
| color: var(--go-ui-color-red-hover); | |
| text-decoration: underline; | |
| } | |
| .loadingContainer { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: var(--go-ui-spacing-lg); | |
| margin-top: var(--go-ui-spacing-2xl); | |
| } | |
| .loadingText { | |
| color: var(--go-ui-color-gray-60); | |
| } | |
| .generateButtonContainer { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: var(--go-ui-spacing-lg); | |
| margin-top: var(--go-ui-spacing-2xl); | |
| } | |
| .uploadedMapContainer { | |
| margin-bottom: var(--go-ui-spacing-lg); | |
| } | |
| .uploadedMapImage { | |
| width: 100%; | |
| max-width: var(--go-ui-width-screen-lg); | |
| max-height: 20rem; | |
| overflow: visible; | |
| background-color: var(--go-ui-color-gray-20); | |
| border-radius: var(--go-ui-border-radius-lg); | |
| box-shadow: var(--go-ui-box-shadow-sm); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: var(--go-ui-spacing-sm); | |
| transition: all var(--go-ui-duration-transition-medium) ease; | |
| } | |
| .uploadedMapImage:hover { | |
| background-color: var(--go-ui-color-gray-30); | |
| transform: translateY(-2px); | |
| box-shadow: var(--go-ui-box-shadow-md); | |
| } | |
| .uploadedMapImage img { | |
| max-width: 100%; | |
| max-height: 18rem; | |
| width: auto; | |
| height: auto; | |
| object-fit: contain; | |
| border-radius: var(--go-ui-border-radius-md); | |
| box-shadow: var(--go-ui-box-shadow-sm); | |
| transition: transform var(--go-ui-duration-transition-medium) ease; | |
| } | |
| .uploadedMapImage img:hover { | |
| transform: scale(1.02); | |
| } | |
| .formSection { | |
| margin-bottom: var(--go-ui-spacing-lg); | |
| } | |
| .formGrid { | |
| display: grid; | |
| gap: var(--go-ui-spacing-lg); | |
| grid-template-columns: 1fr; | |
| text-align: left; | |
| } | |
| @media (min-width: 1024px) { | |
| .formGrid { | |
| grid-template-columns: 1fr 1fr; | |
| } | |
| } | |
| .titleField { | |
| grid-column: 1 / -1; | |
| } | |
| .ratingSection { | |
| text-align: left; | |
| } | |
| .ratingDescription { | |
| color: var(--go-ui-color-gray-70); | |
| margin-bottom: var(--go-ui-spacing-lg); | |
| } | |
| .ratingSlider { | |
| margin-top: var(--go-ui-spacing-lg); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--go-ui-spacing-sm); | |
| } | |
| .ratingLabel { | |
| display: block; | |
| font-size: var(--go-ui-font-size-sm); | |
| font-weight: var(--go-ui-font-weight-medium); | |
| text-transform: capitalize; | |
| width: 5rem; | |
| flex-shrink: 0; | |
| } | |
| .ratingInput { | |
| width: 100%; | |
| accent-color: var(--go-ui-color-red-90); | |
| } | |
| .ratingValue { | |
| margin-left: var(--go-ui-spacing-sm); | |
| width: 2.5rem; | |
| text-align: right; | |
| font-variant-numeric: tabular-nums; | |
| flex-shrink: 0; | |
| font-size: var(--go-ui-font-size-sm); | |
| color: var(--go-ui-color-gray-70); | |
| } | |
| .submitSection { | |
| display: flex; | |
| justify-content: center; | |
| gap: var(--go-ui-spacing-md); | |
| margin-top: var(--go-ui-spacing-2xl); | |
| flex-wrap: wrap; | |
| } | |
| /* Success page styles */ | |
| .successContainer { | |
| text-align: center; | |
| padding: var(--go-ui-spacing-2xl); | |
| } | |
| .successHeading { | |
| color: var(--go-ui-color-green-90); | |
| margin-bottom: var(--go-ui-spacing-lg); | |
| } | |
| .successText { | |
| color: var(--go-ui-color-gray-700); | |
| margin-bottom: var(--go-ui-spacing-xl); | |
| font-size: var(--go-ui-font-size-lg); | |
| } | |
| .successButton { | |
| display: flex; | |
| justify-content: center; | |
| } | |
| /* View Full Size Button */ | |
| .viewFullSizeButton { | |
| display: flex; | |
| justify-content: center; | |
| margin-top: var(--go-ui-spacing-md); | |
| padding-top: var(--go-ui-spacing-md); | |
| border-top: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator); | |
| } | |
| /* Full Size Modal */ | |
| .fullSizeModalOverlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: rgba(0, 0, 0, 0.8); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 1000; | |
| padding: var(--go-ui-spacing-lg); | |
| } | |
| .lightModalOverlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: rgba(0, 0, 0, 0.3); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 1000; | |
| padding: var(--go-ui-spacing-lg); | |
| } | |
| .fullSizeModalContent { | |
| background-color: var(--go-ui-color-white); | |
| border-radius: var(--go-ui-border-radius-lg); | |
| max-width: 95vw; | |
| max-height: 95vh; | |
| overflow: hidden; | |
| box-shadow: var(--go-ui-box-shadow-xl); | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .fullSizeModalHeader { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: var(--go-ui-spacing-lg); | |
| border-bottom: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator); | |
| background-color: var(--go-ui-color-gray-10); | |
| } | |
| .fullSizeModalTitle { | |
| margin: 0; | |
| font-size: var(--go-ui-font-size-lg); | |
| font-weight: var(--go-ui-font-weight-semibold); | |
| color: var(--go-ui-color-gray-900); | |
| } | |
| .fullSizeModalImage { | |
| flex: 1; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: var(--go-ui-spacing-lg); | |
| overflow: auto; | |
| } | |
| .fullSizeModalImage img { | |
| max-width: 100%; | |
| max-height: 100%; | |
| object-fit: contain; | |
| border-radius: var(--go-ui-border-radius-md); | |
| box-shadow: var(--go-ui-box-shadow-md); | |
| } | |
| /* Responsive adjustments for modal */ | |
| @media (max-width: 768px) { | |
| .fullSizeModalOverlay { | |
| padding: var(--go-ui-spacing-sm); | |
| } | |
| .fullSizeModalContent { | |
| max-width: 100vw; | |
| max-height: 100vh; | |
| } | |
| .fullSizeModalHeader { | |
| padding: var(--go-ui-spacing-md); | |
| } | |
| .fullSizeModalImage { | |
| padding: var(--go-ui-spacing-md); | |
| } | |
| } | |
| .confirmSection { | |
| display: flex; | |
| justify-content: center; | |
| gap: var(--go-ui-spacing-md); | |
| margin-top: var(--go-ui-spacing-xl); | |
| padding-top: var(--go-ui-spacing-lg); | |
| border-top: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator); | |
| } | |
| .step2Layout { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--go-ui-spacing-2xl); | |
| } | |
| .topRow { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: var(--go-ui-spacing-2xl); | |
| align-items: start; | |
| } | |
| /* When rating section is hidden, image section takes full width */ | |
| .topRow.ratingHidden { | |
| grid-template-columns: 1fr; | |
| } | |
| .imageSection { | |
| position: sticky; | |
| top: var(--go-ui-spacing-lg); | |
| } | |
| .ratingSection { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .ratingContent { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--go-ui-spacing-md); | |
| } | |
| .bottomRow { | |
| width: 100%; | |
| } | |
| /* Support for step 2a layout (side-by-side) */ | |
| .step2Layout { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: var(--go-ui-spacing-2xl); | |
| align-items: start; | |
| } | |
| .mapColumn { | |
| position: sticky; | |
| top: var(--go-ui-spacing-lg); | |
| } | |
| .contentColumn { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--go-ui-spacing-lg); | |
| } | |
| /* Support for step 2b layout (top row + bottom row) */ | |
| .step2bLayout { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--go-ui-spacing-2xl); | |
| } | |
| .contentColumn .formGrid { | |
| display: grid; | |
| gap: var(--go-ui-spacing-lg); | |
| grid-template-columns: 1fr; | |
| text-align: left; | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 1024px) { | |
| .step2Layout { | |
| grid-template-columns: 1fr; | |
| gap: var(--go-ui-spacing-lg); | |
| } | |
| .topRow { | |
| grid-template-columns: 1fr; | |
| gap: var(--go-ui-spacing-lg); | |
| } | |
| .topRow.ratingHidden { | |
| grid-template-columns: 1fr; | |
| } | |
| .mapColumn { | |
| position: static; | |
| } | |
| .imageSection { | |
| position: static; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .uploadContainer { | |
| padding: var(--go-ui-spacing-md) var(--go-ui-spacing-sm) var(--go-ui-spacing-xl) var(--go-ui-spacing-sm); | |
| } | |
| .dropZone { | |
| padding: var(--go-ui-spacing-lg) var(--go-ui-spacing-md); | |
| min-height: 200px; | |
| } | |
| .dropZone.hasFile { | |
| min-height: 250px; | |
| padding: var(--go-ui-spacing-md); | |
| } | |
| .filePreviewImage { | |
| max-width: 100%; | |
| max-height: 15rem; | |
| padding: var(--go-ui-spacing-xs); | |
| } | |
| .filePreviewImage img { | |
| max-height: 13rem; | |
| } | |
| .ratingSlider { | |
| gap: var(--go-ui-spacing-xs); | |
| } | |
| .ratingLabel { | |
| width: 4rem; | |
| font-size: var(--go-ui-font-size-xs); | |
| } | |
| .ratingValue { | |
| width: 2rem; | |
| font-size: var(--go-ui-font-size-xs); | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .dropZone { | |
| padding: var(--go-ui-spacing-md) var(--go-ui-spacing-sm); | |
| min-height: 180px; | |
| } | |
| .dropZone.hasFile { | |
| min-height: 220px; | |
| } | |
| .filePreviewImage { | |
| max-height: 12rem; | |
| } | |
| .filePreviewImage img { | |
| max-height: 10rem; | |
| } | |
| } | |
| .metadataSectionCard { | |
| background-color: var(--go-ui-color-white); | |
| border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator); | |
| border-radius: var(--go-ui-border-radius-lg); | |
| padding: var(--go-ui-spacing-lg); | |
| box-shadow: var(--go-ui-box-shadow-xs); | |
| } | |
| /* Drone metadata styles */ | |
| .droneMetadataSection { | |
| margin-top: var(--go-ui-spacing-lg); | |
| padding-top: var(--go-ui-spacing-lg); | |
| border-top: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator); | |
| } | |
| .droneMetadataHeading { | |
| font-size: var(--go-ui-font-size-md); | |
| font-weight: 600; | |
| color: var(--go-ui-color-gray-90); | |
| margin-bottom: var(--go-ui-spacing-md); | |
| text-align: left; | |
| } | |
| .droneMetadataGrid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: var(--go-ui-spacing-md); | |
| } | |
| .rtkFixContainer { | |
| display: flex; | |
| align-items: center; | |
| padding: var(--go-ui-spacing-sm) 0; | |
| } | |
| .rtkFixLabel { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--go-ui-spacing-sm); | |
| font-size: var(--go-ui-font-size-sm); | |
| color: var(--go-ui-color-gray-80); | |
| cursor: pointer; | |
| } | |
| .rtkFixCheckbox { | |
| width: 1rem; | |
| height: 1rem; | |
| accent-color: var(--go-ui-color-red-90); | |
| } | |
| /* Responsive adjustments for drone metadata */ | |
| @media (max-width: 768px) { | |
| .droneMetadataGrid { | |
| grid-template-columns: 1fr; | |
| gap: var(--go-ui-spacing-sm); | |
| } | |
| } | |
| /* Performance rating confirmation styles */ | |
| .confirmButtonContainer { | |
| margin-top: var(--go-ui-spacing-lg); | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| /* Rating warning modal styles */ | |
| .ratingWarningContent { | |
| padding: var(--go-ui-spacing-xl); | |
| text-align: center; | |
| max-width: 500px; | |
| } | |
| .ratingWarningTitle { | |
| font-size: var(--go-ui-font-size-lg); | |
| font-weight: var(--go-ui-font-weight-semibold); | |
| color: var(--go-ui-color-gray-900); | |
| margin-bottom: var(--go-ui-spacing-md); | |
| } | |
| .ratingWarningText { | |
| font-size: var(--go-ui-font-size-md); | |
| color: var(--go-ui-color-gray-700); | |
| line-height: 1.6; | |
| margin-bottom: var(--go-ui-spacing-xl); | |
| } | |
| .ratingWarningButtons { | |
| display: flex; | |
| gap: var(--go-ui-spacing-md); | |
| justify-content: center; | |
| margin-top: var(--go-ui-spacing-lg); | |
| } | |
| .preprocessingProgress { | |
| margin-top: var(--go-ui-spacing-lg); | |
| text-align: center; | |
| padding: var(--go-ui-spacing-lg); | |
| background-color: var(--go-ui-color-background-light); | |
| border-radius: var(--go-ui-border-radius-md); | |
| } | |
| .preprocessingProgress p { | |
| margin-bottom: var(--go-ui-spacing-md); | |
| color: var(--go-ui-color-text); | |
| font-weight: var(--go-ui-font-weight-medium); | |
| } | |
| /* Crop modal styles */ | |
| .cropZoomSlider { | |
| flex: 1; | |
| height: 0.5rem; | |
| background-color: var(--go-ui-color-gray-30); | |
| border-radius: var(--go-ui-border-radius-lg); | |
| appearance: none; | |
| cursor: pointer; | |
| outline: none; | |
| } | |
| .cropZoomSlider::-webkit-slider-thumb { | |
| appearance: none; | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| background-color: var(--go-ui-color-red-90); | |
| border-radius: 50%; | |
| cursor: pointer; | |
| border: 2px solid var(--go-ui-color-white); | |
| box-shadow: var(--go-ui-box-shadow-sm); | |
| } | |
| .cropZoomSlider::-moz-range-thumb { | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| background-color: var(--go-ui-color-red-90); | |
| border-radius: 50%; | |
| cursor: pointer; | |
| border: 2px solid var(--go-ui-color-white); | |
| box-shadow: var(--go-ui-box-shadow-sm); | |
| border: none; | |
| } | |
| .cropZoomSlider:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 2px var(--go-ui-color-red-40); | |
| } | |
| /* Carousel styles for multi-upload */ | |
| .carouselContainer { | |
| position: relative; | |
| width: 100%; | |
| } | |
| .carouselImageWrapper { | |
| position: relative; | |
| width: 100%; | |
| background-color: var(--go-ui-color-gray-20); | |
| border-radius: var(--go-ui-border-radius-lg); | |
| overflow: hidden; | |
| border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator); | |
| box-shadow: var(--go-ui-box-shadow-sm); | |
| transition: box-shadow var(--go-ui-duration-transition-medium) ease; | |
| } | |
| .carouselImageWrapper:hover { | |
| box-shadow: var(--go-ui-box-shadow-md); | |
| } | |
| .carouselImage { | |
| width: 100%; | |
| height: auto; | |
| object-fit: contain; | |
| image-rendering: pixelated; | |
| display: block; | |
| } | |
| .carouselNavigation { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: var(--go-ui-spacing-md); | |
| margin-top: var(--go-ui-spacing-md); | |
| padding: var(--go-ui-spacing-sm); | |
| background-color: var(--go-ui-color-gray-10); | |
| border-radius: var(--go-ui-border-radius-md); | |
| border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator); | |
| } | |
| .carouselButton { | |
| background-color: var(--go-ui-color-white); | |
| border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator); | |
| border-radius: var(--go-ui-border-radius-md); | |
| padding: var(--go-ui-spacing-sm); | |
| transition: all var(--go-ui-duration-transition-fast) ease; | |
| min-width: 40px; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .carouselButton:hover:not(:disabled) { | |
| background-color: var(--go-ui-color-gray-20); | |
| border-color: var(--go-ui-color-gray-40); | |
| transform: translateY(-1px); | |
| } | |
| .carouselButton:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .carouselIndicators { | |
| display: flex; | |
| gap: var(--go-ui-spacing-xs); | |
| align-items: center; | |
| } | |
| .carouselIndicator { | |
| background-color: var(--go-ui-color-gray-30); | |
| border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator); | |
| border-radius: var(--go-ui-border-radius-sm); | |
| padding: var(--go-ui-spacing-xs) var(--go-ui-spacing-sm); | |
| font-size: var(--go-ui-font-size-sm); | |
| font-weight: var(--go-ui-font-weight-medium); | |
| color: var(--go-ui-color-gray-70); | |
| cursor: pointer; | |
| transition: all var(--go-ui-duration-transition-fast) ease; | |
| min-width: 32px; | |
| height: 32px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .carouselIndicator:hover:not(:disabled) { | |
| background-color: var(--go-ui-color-gray-40); | |
| border-color: var(--go-ui-color-gray-50); | |
| color: var(--go-ui-color-gray-90); | |
| } | |
| .carouselIndicatorActive { | |
| background-color: var(--go-ui-color-red-90); | |
| border-color: var(--go-ui-color-red-90); | |
| color: var(--go-ui-color-white); | |
| } | |
| .carouselIndicatorActive:hover:not(:disabled) { | |
| background-color: var(--go-ui-color-red-hover); | |
| border-color: var(--go-ui-color-red-hover); | |
| color: var(--go-ui-color-white); | |
| } | |
| .carouselIndicator:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .imageCounter { | |
| text-align: center; | |
| margin-top: var(--go-ui-spacing-sm); | |
| font-size: var(--go-ui-font-size-sm); | |
| font-weight: var(--go-ui-font-weight-medium); | |
| color: var(--go-ui-color-gray-70); | |
| background-color: var(--go-ui-color-gray-10); | |
| padding: var(--go-ui-spacing-xs) var(--go-ui-spacing-sm); | |
| border-radius: var(--go-ui-border-radius-sm); | |
| border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator); | |
| } | |
| /* Single image container */ | |
| .singleImageContainer { | |
| position: relative; | |
| width: 100%; | |
| } | |
| /* View image button container */ | |
| .viewImageButtonContainer { | |
| display: flex; | |
| justify-content: center; | |
| margin-top: var(--go-ui-spacing-md); | |
| padding: var(--go-ui-spacing-sm); | |
| background-color: var(--go-ui-color-gray-10); | |
| border-radius: var(--go-ui-border-radius-md); | |
| border: var(--go-ui-width-separator-thin) solid var(--go-ui-color-separator); | |
| } | |
| /* Responsive adjustments for carousel */ | |
| @media (max-width: 768px) { | |
| .carouselNavigation { | |
| flex-direction: column; | |
| gap: var(--go-ui-spacing-sm); | |
| } | |
| .carouselIndicators { | |
| order: -1; | |
| margin-bottom: var(--go-ui-spacing-sm); | |
| } | |
| .carouselButton { | |
| min-width: 36px; | |
| height: 36px; | |
| } | |
| .carouselIndicator { | |
| min-width: 28px; | |
| height: 28px; | |
| font-size: var(--go-ui-font-size-xs); | |
| } | |
| .imageCounter { | |
| font-size: var(--go-ui-font-size-xs); | |
| } | |
| .viewImageButtonContainer { | |
| margin-top: var(--go-ui-spacing-sm); | |
| } | |
| } | |