.euphrenic-gallery-container {
margin: 20px 0;
width: 100%;
box-sizing: border-box;
}
.euphrenic-gallery {
display: flex;
flex-wrap: wrap;
gap: 15px;
margin: 0;
padding: 0;
}
.euphrenic-gallery.euphrenic-align-center {
justify-content: center;
}
.euphrenic-gallery.euphrenic-align-left {
justify-content: flex-start;
}
.euphrenic-thumbnail {
position: relative;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: transform 0.3s ease;
overflow: hidden;
z-index: 1;
list-style: none;
margin: 0 0 15px 0;
padding: 0;
display: inline-block;
}
.euphrenic-thumbnail:hover {
transform: translateY(-5px);
z-index: 10;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.euphrenic-thumbnail img {
display: block;
width: 100%;
height: 100%;
border-radius: 4px;
object-fit: cover;
transition: transform 0.3s ease;
}
.euphrenic-thumbnail-title {
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 5px 10px;
font-size: 14px;
font-weight: bold;
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} .euphrenic-layout-overlay .euphrenic-thumbnail-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 8px;
font-size: 14px;
line-height: 1.4;
} .euphrenic-layout-standard .euphrenic-thumbnail {
display: flex;
flex-direction: column;
}
.euphrenic-layout-standard .euphrenic-thumbnail-title {
position: static;
background: none;
color: inherit;
text-align: center;
padding: 8px 0;
font-size: 14px;
line-height: 1.4;
} .euphrenic-layout-boxed .euphrenic-thumbnail {
background: #e8e8e8;
border: 1px solid #c6c5c5;
padding: 8px;
border-radius: 4px;
display: flex;
flex-direction: column;
}
.euphrenic-layout-boxed .euphrenic-thumbnail img {
border-radius: 2px;
margin-bottom: 8px;
}
.euphrenic-layout-boxed .euphrenic-thumbnail-title {
position: static;
background: none;
color: inherit;
text-align: center;
padding: 0 5px 4px;
font-size: 14px;
line-height: 1.4;
}
.euphrenic-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0);
z-index: 999999;
opacity: 0;
transition: opacity 0.3s ease;
align-items: center;
justify-content: center;
padding: 30px;
box-sizing: border-box;
}
.euphrenic-modal.active {
display: flex;
opacity: 1;
}
.euphrenic-modal-content {
position: relative;
max-width: 1200px;
width: 90%;
background: #000;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.euphrenic-modal-close {
position: absolute;
top: -35px;
right: -35px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: background 0.2s ease;
}
.euphrenic-modal-close:hover {
background: rgba(255, 0, 0, 0.7);
}
.euphrenic-modal-close::before,
.euphrenic-modal-close::after {
content: '';
position: absolute;
width: 16px;
height: 2px;
background: #fff;
}
.euphrenic-modal-close::before {
transform: rotate(45deg);
}
.euphrenic-modal-close::after {
transform: rotate(-45deg);
}
.euphrenic-video-container {
position: relative;
padding-bottom: 56.25%; height: 0;
overflow: hidden;
}
.euphrenic-video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.euphrenic-player-controls {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
padding: 0 15px;
box-sizing: border-box;
transition: opacity 0.3s ease;
opacity: 0;
}
.euphrenic-video-container:hover .euphrenic-player-controls {
opacity: 1;
}
.euphrenic-play-pause {
width: 30px;
height: 30px;
background: transparent;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin-right: 10px;
}
.euphrenic-play-pause:focus {
outline: none;
}
.euphrenic-play-icon,
.euphrenic-pause-icon {
width: 20px;
height: 20px;
fill: #fff;
}
.euphrenic-progress-bar {
flex: 1;
height: 5px;
background: rgba(255, 255, 255, 0.2);
position: relative;
cursor: pointer;
border-radius: 2.5px;
overflow: hidden;
}
.euphrenic-progress {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: #ff0000;
width: 0;
}
.euphrenic-time-display {
color: #fff;
font-size: 12px;
margin-left: 15px;
}
.euphrenic-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
border: 3px solid rgba(255, 255, 255, 0.2);
border-top: 3px solid #fff;
border-radius: 50%;
animation: euphrenic-spin 1s linear infinite;
}
@keyframes euphrenic-spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
body.euphrenic-modal-open {
overflow: hidden;
}
.euphrenic-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
} @media screen and (max-width: 768px) {
.euphrenic-gallery {
gap: 10px;
}
.euphrenic-play-button {
display: none;
}
.euphrenic-play-button::before {
display: none;
}
.euphrenic-thumbnail:hover .euphrenic-play-button {
display: none;
}
.euphrenic-modal {
padding: 15px;
}
.euphrenic-modal-close {
display: none;
}
.euphrenic-modal-close::before,
.euphrenic-modal-close::after {
display: none;
}
}
@media screen and (max-width: 480px) {
.euphrenic-play-button {
display: none;
}
.euphrenic-play-button::before {
display: none;
}
.euphrenic-thumbnail:hover .euphrenic-play-button {
display: none;
}
.euphrenic-player-controls {
display: none;
}
.euphrenic-time-display {
display: none;
}
}