mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
unify guide between web and theater
This commit is contained in:
Luke Pulverenti
parent
e8c224ae0b
commit
af4e8c5529
23 changed files with 1314 additions and 1024 deletions
|
|
@ -13,7 +13,8 @@
|
|||
.absolutePageTabContent {
|
||||
margin: 0 !important;
|
||||
width: 100% !important;
|
||||
top: 98px !important;
|
||||
/* Page needs to supply padding */
|
||||
top: 92px !important;
|
||||
}
|
||||
|
||||
.sidebarDivider {
|
||||
|
|
|
|||
|
|
@ -1,421 +1,12 @@
|
|||
.guideTabContent {
|
||||
background: #161616;
|
||||
}
|
||||
|
||||
.tvGuide {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tvGuideHeader {
|
||||
white-space: nowrap;
|
||||
position: fixed;
|
||||
top: 95px;
|
||||
left: 0;
|
||||
z-index: 100;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.neon-animating .tvGuideHeader {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.tvGuideHeader.headroom--unpinned {
|
||||
-webkit-transform: translateY(-98px);
|
||||
transform: translateY(-98px);
|
||||
}
|
||||
|
||||
.tvProgramSectionHeader {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tvProgram {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
font-weight: normal !important;
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.detailSectionHeader + .tvProgram {
|
||||
border-top: 6px solid #161616;
|
||||
margin-top: 1px;
|
||||
}
|
||||
|
||||
.tvProgramTimeSlot {
|
||||
width: 80px;
|
||||
vertical-align: middle;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
border-bottom: 6px solid #161616;
|
||||
}
|
||||
|
||||
.tvProgramTimeSlotInner {
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
.tvProgramInfo {
|
||||
vertical-align: middle;
|
||||
padding: .5em .5em;
|
||||
border-bottom: 6px solid #161616;
|
||||
}
|
||||
|
||||
.tvProgramTimeSlot + .tvProgramInfo {
|
||||
margin-left: 80px;
|
||||
border-left: 6px solid #161616;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tvProgramCurrentTimeSlot {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.tvProgramName {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
.tvProgramTime {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.newTvProgram {
|
||||
color: #E88606;
|
||||
}
|
||||
|
||||
.liveTvProgram {
|
||||
color: #64A239;
|
||||
}
|
||||
|
||||
.premiereTvProgram {
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
.programAccent {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
.sportsProgramInfo .programAccent {
|
||||
background-color: #0A7C33;
|
||||
}
|
||||
|
||||
.newsProgramInfo .programAccent {
|
||||
background-color: #523378;
|
||||
}
|
||||
|
||||
.movieProgramInfo .programAccent {
|
||||
background-color: #A43913;
|
||||
}
|
||||
|
||||
.childProgramInfo .programAccent {
|
||||
background-color: #0B487D;
|
||||
}
|
||||
|
||||
.timerCircle {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: #cc0000;
|
||||
border: 1px solid #cc3333;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.seriesTimerCircle {
|
||||
position: relative;
|
||||
margin-left: 0;
|
||||
left: 21px;
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
.itemMiscInfo .seriesTimerCircle:first-child {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.seriesTimerCircle + .seriesTimerCircle {
|
||||
opacity: .65;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.seriesTimerCircle + .seriesTimerCircle + .seriesTimerCircle {
|
||||
opacity: 1;
|
||||
left: -21px;
|
||||
}
|
||||
|
||||
.channelImageContainer .itemDetailImage {
|
||||
max-width: 200px;
|
||||
max-height: 110px;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.channelTimeslotHeader {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.timeslotHeaders {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.mobileGuide .timeslotHeaders {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.programContainer {
|
||||
white-space: nowrap;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
margin-top: 44px;
|
||||
}
|
||||
|
||||
.mobileGuide .programContainer {
|
||||
margin-top: 38px;
|
||||
}
|
||||
|
||||
.channelPrograms {
|
||||
white-space: nowrap;
|
||||
height: 61px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.channelPrograms, .timeslotHeadersInner {
|
||||
width: 12000px;
|
||||
}
|
||||
|
||||
.timeslotHeader {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.timeslotHeaderInner {
|
||||
padding: .6em .35em .5em;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.channelTimeslotHeader .timeslotHeaderInner {
|
||||
padding-top: .4em;
|
||||
}
|
||||
|
||||
.channelHeaderCell, .channelTimeslotHeader {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
border-right: 1px solid #161616;
|
||||
width: 199px;
|
||||
background: #303030;
|
||||
}
|
||||
|
||||
.channelHeaderCell {
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.channelHeaderCellContainer + .channelHeaderCellContainer .channelHeaderCell {
|
||||
border-top: 6px solid #161616;
|
||||
}
|
||||
|
||||
.channelTimeslotHeader {
|
||||
border-right-color: #52B54B;
|
||||
}
|
||||
|
||||
.channelTimeslotHeader, .timeslotHeader {
|
||||
background: #52B54B;
|
||||
}
|
||||
|
||||
.timeslotHeader, .channelTimeslotHeader {
|
||||
height: 42px;
|
||||
}
|
||||
|
||||
.channelHeaderCell {
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
font-weight: 400 !important;
|
||||
color: #fff !important;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.pointerInput .channelHeaderCell:hover {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
.channelList {
|
||||
float: left;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.programGrid {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.programGrid, .timeslotHeaders {
|
||||
margin-left: 200px;
|
||||
}
|
||||
|
||||
.timeslotHeader {
|
||||
width: 2.0833333333333333333333333333333%;
|
||||
}
|
||||
|
||||
.programCell {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 6px;
|
||||
border-left: 6px solid #161616;
|
||||
background-color: #212121;
|
||||
display: block;
|
||||
color: #fff !important;
|
||||
text-decoration: none;
|
||||
font-weight: 400 !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.timeslotCellInner {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
font-weight: normal !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.channelHeaderCell {
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
.guideProgramName {
|
||||
padding: .5em .5em .35em;
|
||||
}
|
||||
|
||||
.guideProgramTime {
|
||||
padding: 0 .5em .35em;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.guideChannelInfo {
|
||||
display: inline-block;
|
||||
max-width: 110px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin-left: .5em;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.guideChannelImage {
|
||||
width: 70px;
|
||||
height: 44px;
|
||||
background-size: contain;
|
||||
background-position: right center;
|
||||
background-repeat: no-repeat;
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
.guideChannelName {
|
||||
margin-right: .5em;
|
||||
max-width: 50%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@media (max-width: 1920px) {
|
||||
|
||||
.channelPrograms, .timeslotHeadersInner {
|
||||
width: 10000px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1600px) {
|
||||
|
||||
.channelPrograms, .timeslotHeadersInner {
|
||||
width: 8000px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
|
||||
.guideChannelInfoWithImage {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.timerPageImageContainer {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.channelHeaderCell, .channelTimeslotHeader {
|
||||
width: 98px;
|
||||
}
|
||||
|
||||
.programGrid, .timeslotHeaders {
|
||||
margin-left: 99px;
|
||||
}
|
||||
|
||||
.currentDay {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.channelPrograms, .timeslotHeadersInner {
|
||||
width: 6500px;
|
||||
}
|
||||
|
||||
.timeslotHeaderInner {
|
||||
padding-top: .8em;
|
||||
}
|
||||
|
||||
.channelTimeslotHeader a {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.channelTimeslotHeader i {
|
||||
margin-right: 4px !important;
|
||||
}
|
||||
|
||||
.channelTimeslotHeader .timeslotHeaderInner {
|
||||
padding-top: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
.channelList, .programGrid {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.itemOverlayContent {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
@media (min-width: 800px) {
|
||||
|
||||
.itemOverlayContent {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.channelList, .timeslotHeaderInner {
|
||||
font-size: 110%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1000px) {
|
||||
|
||||
.itemOverlayContent {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
|
||||
.itemOverlayContent {
|
||||
width: 500px;
|
||||
}
|
||||
background: #121212;
|
||||
}
|
||||
|
||||
.chkAdvanced {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* Allow vertical space for anything that slides up at the bottom */
|
||||
.guideVerticalScroller {
|
||||
padding-bottom: 160px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -300,6 +300,10 @@ body {
|
|||
height: 100%;
|
||||
}
|
||||
|
||||
body.autoScrollY {
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
/* Without this, no content will be displayed in mobile safari */
|
||||
.pageContainer {
|
||||
overflow-x: visible !important;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue