.carousel-container img {
cursor: pointer;
object-fit: contain;
}
.custom-gallery-modal button:disabled {
cursor: default;
opacity: 0.4;
pointer-events: none;
}
.custom-gallery-modal {
background-color: #282934 !important;
border-bottom: none;
color: white !important;
}
.custom-gallery-modal .liferay-modal-body {
align-items: center;
display: flex;
justify-content: center;
position: relative;
}
.custom-gallery-modal .close {
color: white !important;
margin-right: 16px !important;
}
.lexicon-icon-overwide .lexicon-icon {
height: 2em;
margin: 0px !important;
}
.custom-gallery-modal{
height: 80% !important;
}
.main-image-wrapper {
align-items: center;
display:flex;
justify-content: center;
position: relative;
width: 902px;
height: 454px;
}
.main-image-wrapper img {
border-radius: 8px;
max-height: 100%;
}
.main-image-wrapper:hover .nav-button {
opacity: 1;
pointer-events: auto;
}
.main-image-wrapper:hover .nav-button:disabled{
cursor: default;
opacity: 0.4;
}
.modal-image {
aspect-ratio: 16/9;
object-fit: contain;;
border-radius: 8px;
max-width: 100vh !important;
}
.modal-gallery-header .lexicon-icon {
fill: #FFC124 !important;
margin-right: 8px !important;
width: 16px !important;
}
.modal-gallery-header {
padding: 16px !important;
}
.modal-prev,
.modal-next {
align-items: center;
background: rgba(105, 102, 102, 0.4) !important;
border-radius: 50%;
border: none;
display: flex;
font-size: 1.6rem;
justify-content: center;
padding: 14px !important;
position: absolute;
top: 45%;
}
.modal-prev .lexicon-icon,
.modal-next .lexicon-icon {
margin-top: 0px !important;
}
.modal-next {
right: 24px;
}
.modal-prev {
left: 24px;
}
.nav-button {
background: rgba(0,0,0,0.4);
border-radius: 50%;
border: none;
color: white;
cursor: pointer;
font-size: 1rem;
opacity: 0;
padding: 0 8px;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: opacity 0.3s ease;
user-select: none;
}
.nav-button.prev {
left: 10px;
}
.nav-button.next {
right: 10px;
}
.thumbnail {
border-radius: 12px;
border: 2px solid transparent;
cursor: pointer;
height: 86px;
object-fit: cover;
opacity: 0.6;
transition:
border-color 250ms ease-out,
opacity 250ms ease-out;
width: 142px;
}
.thumbnail.selected,
.thumbnail:hover {
border-color: #8FB5FF;
opacity: 1;
}
.thumbnail.selected{
height: 102px;
}
.thumbnails {
display: flex;
gap: 8px;
overflow-x: auto;
}
.thumbnails-wrapper {
align-items: center;
display: flex;
justify-content: flex-start;
margin-top: 24px;
max-height: 86px;
max-width: 902px;
}
.view-full-gallery {
background-color: white;
border-radius: 12px;
border: 1px solid #E2E2E4;
color: #2563eb;
cursor: pointer;
display: flex;
flex-direction: column;
height: 86px;
justify-content: center;
margin-left: 8px;
min-width: 152px;
transition: background-color 0.3s ease,
box-shadow 0.3s ease,
border-color 250ms ease-out;
}
.view-full-gallery .subtitle {
color: #6b7280;
font-size: 12px;
font-weight: 400;
line-height: 1;
}
.view-full-gallery .title {
font-size: 16px;
font-weight: 600;
line-height: 1;
margin-bottom: 4px;
}
.view-full-gallery:hover {
background-color: #f3f4f6;
box-shadow: 0 2px 4px rgb(0 0 0 / 0.1);
border: 2px solid rgb(143, 181, 255);
}