.light-modal {
--lm-body-bg: white;
--lm-modal-bg: #000000;
--lm-close-bg: #000000;
--lm-small-modal: 30vw;
--lm-large-modal: 50vw;
--lm-font-size: 14px;
display: none;
position: fixed;
background: rgba(0, 0, 0, 0);
top: 0;
bottom: 0;
left: 0;
align-items: center;
justify-content: center;
right: 0;
z-index: 9000;
transition: background 1s;
font-size: var(--lm-font-size);
visibility: hidden;
}
.light-modal-content {
background: var(--lm-body-bg);
width: var(--lm-large-modal);
border-radius: 0.2em;
position: relative;
max-height: calc(100vh - 150px);
line-height: 1.4;
display: flex;
flex-direction: column;
}
.light-modal-content img {
max-width: 100%;
border-radius: 0.2em;
}
.light-modal-content.large-content {
width: var(--lm-large-modal);
}
.light-modal-header {
padding: 20px 20px 20px 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.light-modal-heading {
margin: 0;
font-size: 1.5em;
}
.light-modal-heading + .light-modal-close-icon {
position: static;
}
.light-modal-body {
padding: 20px;
overflow: auto;
max-height: 450px;
}
.light-modal-footer {
padding: 20px 20px 20px 20px;
background: rgba(0, 0, 0, 0.2);
text-align: right;
display: flex;
align-items: center;
}
.light-modal-close-icon, .light-modal-close-btn {
text-decoration: none;
color: #fff;
padding: 5px 10px;
border-radius: 0.2em;
background: var(--lm-close-bg);
font-size: 1.5em;
line-height: 1;
opacity: 1;
transition: opacity 0.2s ease-in-out;
}
.light-modal-close-icon:hover, .light-modal-close-btn:hover {
opacity: 0.9;
}
.light-modal-close-icon {
position: absolute;
top: -15px;
right: -15px;
}
.light-modal-close-btn {
font-size: 1.3em;
line-height: 1.4;
}
.light-modal-caption {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 100%;
padding: 10px 0;
background: rgba(0, 0, 0, 0.2);
border-radius: 0.2em;
width: 100%;
text-align: center;
margin-top: 5px;
}
.light-modal:target {
background: rgba(0, 0, 0, 0.5);
display: flex;
visibility: visible;
}
.light-modal-navigation .navigation-next,
.light-modal-navigation .navigation-prev {
width: 32px;
height: 32px;
border-color: #fff;
transition: border-color 0.2s;
}
.light-modal-navigation .navigation-next:hover,
.light-modal-navigation .navigation-prev:hover {
border-color: rgba(255, 255, 255, 0.7);
}
.light-modal-navigation .navigation-next {
position: absolute;
right: -50px;
top: 50%;
border-bottom: 1px solid;
border-left: 1px solid;
transform: rotate(-135deg);
}
.light-modal-navigation .navigation-prev {
position: absolute;
left: -50px;
top: 50%;
border-bottom: 1px solid;
border-left: 1px solid;
transform: rotate(45deg);
}
@media (max-width: 480px) {
.light-modal-navigation .navigation-next {
right: 5px;
}
.light-modal-navigation .navigation-prev {
left: 5px;
}
}
@-webkit-keyframes basic {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes basic {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.basic {
-webkit-animation-name: basic;
animation-name: basic;
}
@media (max-width: 1000px) {
.light-modal {
--lm-small-modal: 70vw;
--lm-large-modal: 70vw;
}
}
.light-modal-close-icon:hover {
color: #cecece;
}