fix: external player icons wrap properly on mobile

This commit is contained in:
2026-01-04 18:40:41 +09:00
parent 3729ec0053
commit 55882cd166
2 changed files with 55 additions and 2 deletions

View File

@@ -1,5 +1,5 @@
title: "애니 다운로더" title: "애니 다운로더"
version: "0.5.24" version: "0.5.25"
package_name: "anime_downloader" package_name: "anime_downloader"
developer: "projectdx" developer: "projectdx"
description: "anime downloader" description: "anime downloader"

View File

@@ -3,11 +3,61 @@
* Reusable video player modal for Anime Downloader * Reusable video player modal for Anime Downloader
*/ */
/* Modal - Desktop: Centered, Mobile: Fullscreen */
#videoModal .modal-dialog {
max-width: 900px;
margin: 30px auto;
height: auto;
}
#videoModal .modal-content {
border-radius: 12px !important;
display: flex;
flex-direction: column;
max-height: calc(100vh - 60px);
}
#videoModal .modal-header {
flex-shrink: 0;
padding: 10px 16px;
}
#videoModal .modal-body {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* Close Button - Prominent */
#videoModal .close {
font-size: 32px;
font-weight: 300;
color: #fff;
text-shadow: 0 0 10px rgba(0,0,0,0.5);
opacity: 1;
padding: 0;
margin: -5px -5px -5px auto;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(239, 68, 68, 0.8);
border-radius: 8px;
transition: all 0.2s ease;
}
#videoModal .close:hover {
background: rgba(239, 68, 68, 1);
transform: scale(1.1);
}
/* Video Container */ /* Video Container */
.video-container { .video-container {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background: #000; background: #000;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
} }
/* Zoom Button */ /* Zoom Button */
@@ -145,10 +195,11 @@
padding: 8px 16px; padding: 8px 16px;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%); background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
border-top: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.1);
overflow-x: hidden; /* Prevent horizontal scroll */
} }
.external-players-grid { .external-players-grid {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: wrap; /* Allow wrapping to multiple lines */
justify-content: center; justify-content: center;
gap: 10px; gap: 10px;
} }
@@ -200,7 +251,9 @@
@media (max-width: 768px) { @media (max-width: 768px) {
#videoModal .modal-dialog { #videoModal .modal-dialog {
width: 100% !important; width: 100% !important;
max-width: 100% !important;
margin: 0 !important; margin: 0 !important;
height: 100%;
} }
#videoModal .modal-content { #videoModal .modal-content {
border-radius: 0 !important; border-radius: 0 !important;