vinny/iptv-stream-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Complete 3.1.3: Layout Utilities - Added comprehensive utilities including containers, spacing, display, positioning, flexbox, and responsive modifiers

Browse source
This commit is contained in:
VinnyNC 2025-09-29 20:12:05 -04:00
parent d13ff3b592
commit d60a17b540
3 changed files with 399 additions and 209 deletions
Download patch file Download diff file Expand all files Collapse all files

41
static/css/layout.css
View file

@ -1,29 +1,22 @@
/* Layout styles - Main structural elements */
/* =================================================================
THEATER - Main layout wrapper using CSS Grid
THEATER CONTAINER - Main layout wrapper
================================================================= */
.theater {
display: grid;
grid-template-columns: 1fr 350px;
grid-template-areas: 'video chat';
.theater-container {
display: flex;
height: 100vh;
position: relative;
transition: all var(--transition-slow);
}
.theater.collapsed {
grid-template-columns: 1fr 0px;
grid-template-areas: 'video video';
}
/* =================================================================
THEATER VIDEO SECTION - Left side containing video player
VIDEO SECTION - Left side containing video player
================================================================= */
.theater__video-section {
grid-area: video;
.video-section {
flex: 1;
background: #000;
position: relative;
display: flex;
@ -31,6 +24,11 @@
transition: all var(--transition-slow);
}
.video-section.expanded {
flex: 1;
width: 100%;
}
/* =================================================================
VIDEO WRAPPER - Contains the video element
================================================================= */
@ -43,23 +41,24 @@
}
/* =================================================================
THEATER CHAT SECTION - Right side chat panel
CHAT SECTION - Right side chat panel
================================================================= */
.theater__chat-section {
grid-area: chat;
.chat-section {
width: 350px;
background: var(--bg-dark);
color: var(--text-primary);
display: flex;
flex-direction: column;
box-shadow: var(--shadow-dodgers-lg);
transition: all var(--transition-slow);
transition: transform var(--transition-slow);
position: relative;
border-left: 1px solid var(--border-color);
overflow: hidden;
}
.theater__chat-section.collapsed {
opacity: 0;
pointer-events: none;
.chat-section.collapsed {
transform: translateX(100%);
position: absolute;
right: 0;
height: 100%;
}