71 lines
4.0 KiB
CSS
71 lines
4.0 KiB
CSS
|
@media (min-width: 768px) {
|
||
|
|
.header-actions .btn-header-action .btn-text { display: inline; margin-left: 0.25rem; }
|
||
|
|
.header-actions .btn-header-action { padding: 0.5rem 1rem; }
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 992px) { /* Adjusted from 991.98px for consistency */
|
||
|
|
:root { --sidebar-width: 240px; --header-height: 60px; --m3u-grid-minmax-size: 160px; }
|
||
|
|
#sidebar { transform: translateX(calc(-1 * var(--sidebar-width))); box-shadow: none; }
|
||
|
|
#sidebar.expanded { transform: translateX(0); box-shadow: 5px 0 15px var(--shadow-color); }
|
||
|
|
#main-content-wrapper { margin-left: 0; }
|
||
|
|
.sidebar-toggle-btn { display: inline-flex; }
|
||
|
|
.header-search-bar { max-width: 250px; }
|
||
|
|
.header-actions .btn-header-action { padding: 0.5rem 0.7rem; gap: 0.3rem; }
|
||
|
|
.epg-channels { width: 200px; }
|
||
|
|
#playerModal .modal-header .modal-title { font-size: 1rem; }
|
||
|
|
#playerModal .modal-header .current-program-player { font-size: 0.75rem; }
|
||
|
|
#settingsModal .nav-pills.flex-column { flex-direction: row !important; flex-wrap: wrap; }
|
||
|
|
#settingsModal .nav-pills .nav-link { flex-grow: 1; text-align: center; }
|
||
|
|
#settingsModal .tab-content { padding-left: 0; border-left: none; margin-top: 1rem; }
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 767.98px) {
|
||
|
|
:root { --header-height: 55px; --m3u-grid-minmax-size: 140px; }
|
||
|
|
#top-header { padding: 0 0.75rem; }
|
||
|
|
#main-content { padding: 1rem; }
|
||
|
|
.m3u-grid { gap: 1rem; }
|
||
|
|
.channel-name { font-size: 0.85rem; }
|
||
|
|
.channel-epg-info { font-size: 0.65rem; }
|
||
|
|
#player-container { height: 60vh; }
|
||
|
|
#playerModal .modal-dialog { margin: 0.5rem; }
|
||
|
|
.epg-channels { width: 180px; }
|
||
|
|
.epg-channel-item { height: 55px; padding: 6px 10px; font-size: 0.85rem; }
|
||
|
|
.epg-channel-item img, .epg-channel-item .epg-icon-placeholder { width: 35px; height: 35px; margin-right: 8px; }
|
||
|
|
.epg-programs { background-size: var(--pixelsPerHour, 180px) 55px; }
|
||
|
|
.epg-program-row { height: 55px; }
|
||
|
|
#settingsModal .modal-dialog { max-width: 95%; }
|
||
|
|
#settingsModal .nav-pills .nav-link { padding: 0.5rem 0.75rem; font-size: 0.85rem; }
|
||
|
|
.header-search-bar { display: none; }
|
||
|
|
.header-actions { gap: 0.2rem; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
|
||
|
|
.header-actions .btn-header-action { padding: 0.4rem 0.6rem; }
|
||
|
|
.header-actions .btn-header-action .btn-text { display: none; }
|
||
|
|
#movistarVODModal-filters-container { flex-direction:column; }
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 576px) {
|
||
|
|
:root { --m3u-grid-minmax-size: 120px; }
|
||
|
|
#playerModal .modal-dialog { max-width: none; margin: 0; height: 100%; }
|
||
|
|
#playerModal .modal-content { height: 100%; border-radius: 0; }
|
||
|
|
#player-container { height: calc(100vh - var(--header-height) - 2px); min-height: 250px; }
|
||
|
|
.m3u-grid { gap: 0.75rem; }
|
||
|
|
.channel-card { border-radius: var(--radius-sm); }
|
||
|
|
.channel-logo-container { aspect-ratio: 4/3; }
|
||
|
|
.channel-info { padding: 0.6rem; }
|
||
|
|
.channel-name { font-size: 0.8rem; }
|
||
|
|
.favorite-btn { width: 26px; height: 26px; font-size: 0.8rem; }
|
||
|
|
.m3u-load-area { padding: 1rem; }
|
||
|
|
.m3u-load-area .row>div:not(:last-child) { margin-bottom: 0.75rem; }
|
||
|
|
.filter-tabs-container { gap: 0.2rem; overflow-x: auto; padding-bottom: 0.1rem; }
|
||
|
|
.filter-tab-btn { padding: 0.5rem 0.75rem; font-size: 0.9rem; white-space: nowrap; }
|
||
|
|
.filter-tab-btn.active::after { bottom: 0px; }
|
||
|
|
.epg-channels { width: 140px; }
|
||
|
|
.epg-channel-item { height: 50px; padding: 5px 8px; font-size: 0.8rem; }
|
||
|
|
.epg-channel-item img, .epg-channel-item .epg-icon-placeholder { width: 30px; height: 30px; }
|
||
|
|
.epg-time-slot { min-width: 80px; font-size: 0.8rem; }
|
||
|
|
.epg-programs { background-size: var(--pixelsPerHour, 160px) 50px; }
|
||
|
|
.epg-program-row { height: 50px; }
|
||
|
|
.epg-program-item { font-size: 0.75rem; padding: 5px 8px; }
|
||
|
|
#epgProgramModal .modal-body img { float: none; display: block; margin: 0 auto 1rem auto; }
|
||
|
|
#settingsModal .modal-dialog { max-width: 100%; margin: 0.5rem; }
|
||
|
|
#movistarVODModal-programs { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
|
||
|
|
}
|