158 lines
2.7 KiB
CSS
158 lines
2.7 KiB
CSS
.content {
|
|
background-color: white;
|
|
border-radius: 6px;
|
|
box-shadow:
|
|
hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
|
|
hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
|
|
position: fixed;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 1090px;
|
|
height: 725px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.galleryContainer {
|
|
padding: var(--Spacing-x5) var(--Spacing-x6);
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
|
|
.closeButton {
|
|
position: absolute;
|
|
top: var(--Spacing-x-one-and-half);
|
|
right: var(--Spacing-x-half);
|
|
}
|
|
|
|
.backButton {
|
|
position: absolute;
|
|
top: var(--Spacing-x-one-and-half);
|
|
left: var(--Spacing-x-half);
|
|
}
|
|
|
|
.galleryHeader {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: var(--Spacing-x1);
|
|
}
|
|
|
|
.imageCaption {
|
|
background-color: #f0f0f0;
|
|
padding: 5px 10px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.mainImageContainer {
|
|
flex: 1;
|
|
position: relative;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.mainImageContainer img,
|
|
.thumbnailContainer img {
|
|
border-radius: var(--Corner-radius-Small);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.thumbnailGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 10px;
|
|
}
|
|
|
|
.thumbnailContainer {
|
|
position: relative;
|
|
height: 125px;
|
|
}
|
|
|
|
.fullViewContainer {
|
|
background-color: var(--UI-Text-High-contrast);
|
|
color: #fff;
|
|
height: 100%;
|
|
padding: var(--Spacing-x5);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.fullViewHeader {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: var(--Spacing-x5);
|
|
width: 100%;
|
|
}
|
|
|
|
.fullViewImageContainer {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 1054px;
|
|
height: 700px;
|
|
margin-bottom: var(--Spacing-x5);
|
|
}
|
|
|
|
.fullViewImage {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.fullViewFooter {
|
|
width: 100%;
|
|
max-width: 1054px;
|
|
text-align: left;
|
|
padding-left: 116px;
|
|
}
|
|
|
|
.imagePosition {
|
|
background-color: var(--UI-Grey-90);
|
|
padding: var(--Spacing-x-quarter) var(--Spacing-x-half);
|
|
border-radius: var(--Corner-radius-Small);
|
|
}
|
|
|
|
.fullViewImageContainer img {
|
|
border-radius: var(--Corner-radius-Medium);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.navigationButton {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background-color: var(--Base-Button-Inverted-Fill-Normal);
|
|
border-radius: 50%;
|
|
padding: var(--Spacing-x1);
|
|
cursor: pointer;
|
|
border: none;
|
|
display: flex;
|
|
}
|
|
|
|
.navigationButton:hover {
|
|
background-color: var(--Base-Button-Inverted-Fill-Hover);
|
|
}
|
|
|
|
.prevButton {
|
|
left: 10px;
|
|
}
|
|
|
|
.leftTransformIcon {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.nextButton {
|
|
right: 10px;
|
|
}
|
|
|
|
.portraitImage {
|
|
max-width: 548px;
|
|
}
|