.tig-lb {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.tig-lb.is-open {
opacity: 1;
visibility: visible;
}
.tig-lb-lock,
.tig-lb-lock body {
overflow: hidden;
}
.tig-lb_backdrop {
position: absolute;
inset: 0;
background: rgba(10, 12, 16, 0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.tig-lb_box {
position: relative;
margin: 0;
max-width: min(960px, 100%);
max-height: 100%;
display: flex;
flex-direction: column;
border-radius: 14px;
overflow: hidden;
background: #15171c;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
transform: scale(0.96) translateY(8px);
transition: transform 0.25s ease;
}
.tig-lb.is-open .tig-lb_box {
transform: scale(1) translateY(0);
}
.tig-lb_stage {
display: flex;
align-items: center;
justify-content: center;
min-width: min(640px, 86vw);
min-height: 220px;
max-height: calc(100vh - 180px);
}
.tig-lb_stage img,
.tig-lb_stage video {
max-width: 100%;
max-height: calc(100vh - 180px);
width: auto;
height: auto;
display: block;
object-fit: contain;
}
.tig-lb_bar {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
padding: 14px 18px;
background: #15171c;
color: #fff;
}
.tig-lb_meta {
min-width: 0;
}
.tig-lb_caption {
margin: 0 0 4px;
font-size: 14px;
line-height: 1.5;
color: #e8e8ea;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
cursor: pointer;
}
.tig-lb_caption.is-expanded {
-webkit-line-clamp: unset;
max-height: 32vh;
overflow-y: auto;
}
.tig-lb_caption.is-empty {
display: none;
}
.tig-lb_date {
font-size: 12px;
color: #9a9aa2;
}
.tig-lb_actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
flex-shrink: 0;
}
.tig-lb_counter {
font-size: 12px;
color: #9a9aa2;
letter-spacing: 0.04em;
}
.tig-lb_ig {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 14px;
border-radius: 999px;
background: #B43E3E;
color: #fff;
font-size: 13px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: background 0.2s ease, transform 0.2s ease;
}
.tig-lb_ig:hover {
background: #983333;
color: #fff;
transform: translateY(-1px);
}
.tig-lb_close {
position: absolute;
top: 14px;
right: 16px;
z-index: 3;
width: 44px;
height: 44px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: #fff;
font-size: 26px;
line-height: 1;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.tig-lb_close:hover {
background: #B43E3E;
transform: rotate(90deg);
}
.tig-lb_nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: #fff;
cursor: pointer;
transition: background 0.2s ease;
}
.tig-lb_nav:hover {
background: #B43E3E;
}
.tig-lb_prev { left: 18px; }
.tig-lb_next { right: 18px; }
@media (max-width: 767px) {
.tig-lb {
padding: 0;
}
.tig-lb_box {
width: 100%;
height: 100%;
max-height: none;
border-radius: 0;
justify-content: center;
}
.tig-lb_stage {
min-width: 0;
max-height: none;
flex: 1;
}
.tig-lb_stage img,
.tig-lb_stage video {
max-height: calc(100dvh - 150px);
}
.tig-lb_bar {
flex-direction: column;
align-items: stretch;
gap: 10px;
padding-bottom: max(14px, env(safe-area-inset-bottom));
}
.tig-lb_actions {
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
}
.tig-lb_nav {
width: 42px;
height: 42px;
top: auto;
bottom: calc(50% - 21px);
background: rgba(0, 0, 0, 0.35);
}
.tig-lb_prev { left: 10px; }
.tig-lb_next { right: 10px; }
.tig-lb_close {
top: max(10px, env(safe-area-inset-top));
right: 12px;
background: rgba(0, 0, 0, 0.45);
}
} .tig-zoom-icon {
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(2px);
color: #fff;
}