* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; background: #f4f4f4; display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
/* Video Player */
.video-player {
width: 100%;
aspect-ratio: 16 / 9;
background: black;
display: none; /* Hidden by default */
justify-content: center;
align-items: center;
opacity: 0;
transition: all 0.5s ease-in-out;
}
iframe { width: 100%; height: 100%; border: none; }
/* Currently Playing Section */
.current-video {
background: #fff; padding: 10px; text-align: center; font-size: 13px; font-weight: 500;
box-shadow: 0 2px 5px rgba(0,0,0,.1); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer;
display: none; /* Initially Hidden */
}
/* Parent Card for Subjects */
.subject-card {
padding: 7px;
border-radius: 8px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
border: 1px solid #ddd;
background: white;
margin: 10px;
}
/* Subject List Section */
.subject-scroll {
font-size: 14px;
display: flex;
overflow-x: auto;
padding: 6px;
white-space: nowrap;
}
.subject-scroll div {
padding: 6px 12px;
cursor: pointer;
border-radius: 5px;
transition: 0.3s;
color: #78787a;
}
.subject-scroll div.active {
background: #eceff6;
color: #4c87ca;
}
/* Scrollable Video List */
.video-list-container { flex-grow: 1; overflow-y: auto; padding: 0 10px 10px; height: /*calc(100vh - (56px + (100vw * 9 / 16) + 90px));*/ }
.video-item {
display: flex; flex-direction: row; background: white; border-radius: 10px; overflow: hidden; cursor: pointer;
transition: 0.3s; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); align-items: center; margin-bottom: 5px; padding: 10px;
}
.video-item img { width: 45px; height: auto; object-fit: cover; border-radius: 5px; }
.video-item div { padding-left: 10px; flex-grow: 1; }
.video-title { font-weight: bold; }
.video-duration { font-size: 11px; color: gray; margin-top: 3px; } /* Small Font for Duration */
.video-item:hover { background: #ddd; }
/* Card-Style Chapter Accordion */
.chapter {
margin-top: 4px;
padding: 4px;
font-size: 14px;
border-radius: 8px;
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
border: 1px solid #ddd;
background: none;
color: #3e3e3e;
}
.chapter-name {
padding: 10px; cursor: pointer; border-radius: 5px; display: flex; justify-content: space-between;
align-items: center; font-weight: bold; transition: background 0.3s; margin-left: 10px;
}
span.ChapterAndModule {
display: flex;
justify-content: flex-start;
flex-direction: column;
font-size: 14px;
}
.chapter-info { font-size: 11px; color: #555; /*margin-left: 10px;*/margin-top: 4px; }
.videos-container {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
padding: 0 10px;
}
.chapter.open .videos-container {
max-height: 1000px; /* Expand */
transition: max-height 0.5s ease-in;
}
/* Caret Arrows */
.arrow { font-size: 16px; transition: transform 0.3s; }
.chapter.open .arrow { transform: rotate(180deg); }
/* Subject Slide Animation */
.subject-container {
display: flex;
transition: transform 0.5s ease;
}