524 lines
9.9 KiB
CSS
524 lines
9.9 KiB
CSS
/* ============================================================================
|
|
TV_APP - Responsive Design System
|
|
Media queries and responsive utilities
|
|
============================================================================ */
|
|
|
|
/* ============================================================================
|
|
Breakpoints
|
|
============================================================================
|
|
Mobile First Approach:
|
|
- Base: Mobile (< 480px)
|
|
- Small: 480px - 768px
|
|
- Medium: 768px - 992px
|
|
- Large: 992px+
|
|
============================================================================ */
|
|
|
|
/* ============================================================================
|
|
Extra Small Devices (Mobile) - max-width: 480px
|
|
============================================================================ */
|
|
|
|
@media (max-width: 480px) {
|
|
/* Typography */
|
|
h1 { font-size: 1.5rem; }
|
|
h2 { font-size: 1.3rem; }
|
|
h3 { font-size: 1.1rem; }
|
|
h4 { font-size: 1rem; }
|
|
|
|
/* Navbar */
|
|
.navbar {
|
|
padding: 8px 12px;
|
|
height: auto;
|
|
flex-direction: column;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.navbar-brand {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.navbar-brand img {
|
|
height: 35px;
|
|
}
|
|
|
|
.navbar-title {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.navbar-center {
|
|
position: static;
|
|
transform: none;
|
|
width: 100%;
|
|
margin-top: var(--spacing-xs);
|
|
}
|
|
|
|
.navbar-controls {
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.nav-btn {
|
|
padding: 8px 12px;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn,
|
|
.action-btn,
|
|
.control-btn {
|
|
padding: 8px 12px;
|
|
font-size: 0.85rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.btn-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
|
|
.btn-group {
|
|
width: 100%;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.btn-group > .btn {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Cards */
|
|
.card,
|
|
.section,
|
|
.archive-card {
|
|
padding: 12px;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.card-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.card-footer {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.card-footer .btn {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Forms */
|
|
.form-group {
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.form-input,
|
|
.search-input,
|
|
input,
|
|
select,
|
|
textarea {
|
|
padding: 10px 12px;
|
|
font-size: 16px; /* Prevents zoom on iOS */
|
|
}
|
|
|
|
/* Modals */
|
|
.modal,
|
|
.modal-content {
|
|
max-width: 95%;
|
|
width: 95%;
|
|
max-height: 95vh;
|
|
}
|
|
|
|
.modal-header {
|
|
padding: 12px;
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 12px;
|
|
}
|
|
|
|
.modal-footer {
|
|
padding: 12px;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.modal-footer .btn {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Tables */
|
|
.table {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.table th,
|
|
.table td {
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
/* Grids */
|
|
.grid {
|
|
grid-template-columns: 1fr !important;
|
|
}
|
|
|
|
/* Utilities */
|
|
.hide-mobile {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Spacing */
|
|
.mt-4 { margin-top: var(--spacing-lg); }
|
|
.mb-4 { margin-bottom: var(--spacing-lg); }
|
|
}
|
|
|
|
/* ============================================================================
|
|
Small Devices (Small Mobile/Tablet) - 480px to 768px
|
|
============================================================================ */
|
|
|
|
@media (min-width: 480px) and (max-width: 768px) {
|
|
/* Typography */
|
|
h1 { font-size: 1.6rem; }
|
|
h2 { font-size: 1.4rem; }
|
|
h3 { font-size: 1.2rem; }
|
|
|
|
/* Navbar */
|
|
.navbar {
|
|
padding: 12px 18px;
|
|
height: auto;
|
|
flex-direction: column;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
.navbar-title {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.navbar-center {
|
|
position: static;
|
|
transform: none;
|
|
width: 100%;
|
|
order: 3;
|
|
}
|
|
|
|
.nav-btn {
|
|
padding: 10px 15px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn,
|
|
.action-btn {
|
|
padding: 10px 15px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.btn-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
/* Cards */
|
|
.card,
|
|
.section {
|
|
padding: 15px;
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
/* Forms */
|
|
.form-group {
|
|
margin-bottom: var(--spacing-lg);
|
|
}
|
|
|
|
.form-input,
|
|
input,
|
|
select,
|
|
textarea {
|
|
font-size: 16px; /* Prevents zoom on iOS */
|
|
}
|
|
|
|
/* Grids */
|
|
.grid {
|
|
grid-template-columns: repeat(2, 1fr) !important;
|
|
}
|
|
|
|
/* Utilities */
|
|
.hide-sm {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* ============================================================================
|
|
Medium Devices (Tablets) - 768px to 992px
|
|
============================================================================ */
|
|
|
|
@media (min-width: 768px) and (max-width: 992px) {
|
|
/* Navbar */
|
|
.navbar {
|
|
padding: 12px 20px;
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn,
|
|
.action-btn {
|
|
padding: 11px 17px;
|
|
font-size: 0.92rem;
|
|
}
|
|
|
|
/* Grids */
|
|
.grid {
|
|
grid-template-columns: repeat(2, 1fr) !important;
|
|
}
|
|
|
|
/* Utilities */
|
|
.hide-md {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* ============================================================================
|
|
Large Devices (Desktop) - 992px+
|
|
============================================================================ */
|
|
|
|
@media (min-width: 992px) {
|
|
/* Utilities */
|
|
.hide-lg {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
/* ============================================================================
|
|
Landscape Mobile - max-height: 500px with landscape orientation
|
|
============================================================================ */
|
|
|
|
@media (max-height: 500px) and (orientation: landscape) {
|
|
/* Navbar */
|
|
.navbar {
|
|
padding: 8px 12px;
|
|
height: 50px;
|
|
}
|
|
|
|
.navbar-title {
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn,
|
|
.action-btn,
|
|
.nav-btn {
|
|
padding: 6px 12px;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.btn-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
|
|
/* Cards */
|
|
.card {
|
|
padding: 12px;
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
/* Forms */
|
|
.form-group {
|
|
margin-bottom: var(--spacing-md);
|
|
}
|
|
|
|
.form-input,
|
|
input {
|
|
padding: 8px 12px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* Tables */
|
|
.table {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.table th,
|
|
.table td {
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
/* Hide less important elements */
|
|
.navbar-status {
|
|
font-size: 0.8rem;
|
|
padding: 4px 8px;
|
|
}
|
|
}
|
|
|
|
/* ============================================================================
|
|
Portrait Orientation - max-width: 600px
|
|
============================================================================ */
|
|
|
|
@media (max-width: 600px) and (orientation: portrait) {
|
|
/* Optimize for portrait */
|
|
body {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.container {
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
}
|
|
}
|
|
|
|
/* ============================================================================
|
|
High Resolution Displays (Retina - min-width: 1920px)
|
|
============================================================================ */
|
|
|
|
@media (min-width: 1920px) {
|
|
/* Typography */
|
|
h1 { font-size: 2.5rem; }
|
|
h2 { font-size: 2rem; }
|
|
|
|
/* Buttons */
|
|
.btn,
|
|
.action-btn {
|
|
padding: 13px 20px;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* Cards */
|
|
.card {
|
|
padding: 25px;
|
|
}
|
|
|
|
/* Container max-width */
|
|
.container {
|
|
max-width: 1800px;
|
|
}
|
|
}
|
|
|
|
/* ============================================================================
|
|
Print Media
|
|
============================================================================ */
|
|
|
|
@media print {
|
|
/* Hide interactive elements */
|
|
.navbar,
|
|
.btn,
|
|
.action-btn,
|
|
button,
|
|
.modal,
|
|
.modal-overlay,
|
|
.alert-close,
|
|
.modal-close {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Optimize for printing */
|
|
body {
|
|
background: white;
|
|
color: black;
|
|
}
|
|
|
|
.card,
|
|
.section {
|
|
page-break-inside: avoid;
|
|
box-shadow: none;
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
.table {
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.table th,
|
|
.table td {
|
|
border: 1px solid #ccc;
|
|
}
|
|
|
|
a {
|
|
color: black;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a[href]::after {
|
|
content: " (" attr(href) ")";
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
|
|
/* ============================================================================
|
|
Reduced Motion (Accessibility)
|
|
============================================================================ */
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|
|
|
|
/* ============================================================================
|
|
Dark Mode (if user preference exists)
|
|
============================================================================ */
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
/* Optional: Add dark mode support here */
|
|
/* This requires additional CSS variables or overrides */
|
|
}
|
|
|
|
/* ============================================================================
|
|
Utility Classes for Responsive Control
|
|
============================================================================ */
|
|
|
|
.show-mobile { display: none; }
|
|
@media (max-width: 768px) {
|
|
.show-mobile { display: block; }
|
|
.hide-mobile { display: none !important; }
|
|
}
|
|
|
|
.show-tablet { display: none; }
|
|
@media (min-width: 768px) and (max-width: 1024px) {
|
|
.show-tablet { display: block; }
|
|
.hide-tablet { display: none !important; }
|
|
}
|
|
|
|
.show-desktop { display: none; }
|
|
@media (min-width: 1024px) {
|
|
.show-desktop { display: block; }
|
|
.hide-desktop { display: none !important; }
|
|
}
|
|
|
|
/* ============================================================================
|
|
Flex Responsive
|
|
============================================================================ */
|
|
|
|
.flex-responsive {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.flex-responsive {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
/* ============================================================================
|
|
Grid Responsive
|
|
============================================================================ */
|
|
|
|
.grid-responsive {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: var(--spacing-lg);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.grid-responsive {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|