sysadmin/ct-dtv-hx0100-002kwos
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

issue #10 #11 TV channel handling ui changing.

Browse Source
This commit is contained in:
paul kim
2024-06-14 21:01:05 +09:00
parent 8a263ced1a
commit e92391bf7e
8 changed files with 1221 additions and 705 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
procentric/application/app_hoteltv_full.html
View File

@@ -116,9 +116,31 @@
<div class="tv">
<div class="bg">
<div class="owl-carousel owl-theme" id="lst_tvCtgbg"></div>
<div class="owl-carousel owl-theme" id="lst_tvCtgyFrm"></div>
<div class="chFrm">
<div class="chLogo">
<div id="icon"></div>
</div>
<div class="shortcut">
<div class="chNum">
<div id="arrow_up"></div>
<div id="number"></div>
<div id="arrow_down"></div>
</div>
<div class="chDesc">
<div id="epg_chname"></div>
<div id="epg_title"></div>
<div id="epg_details">
<div id="tm_current"></div>
<div id="tm_playing"></div>
<div id="tm_chart">
<div class="progress"></div>
</div>
</div>
</div>
</div>
</div>
<div class="shortcut_mode0"></div>
<div class="shortcut_mode1">
<div id="suggestion">
<table class="ch_list">
<tbody id="record"></tbody>

18
procentric/application/lib/hoteltv.hcap.js
View File

@@ -462,9 +462,15 @@ HotelTV.hcap = (function() {
"rfBroadcastType": _lutBCastType[_param.rf.type],
"onSuccess": function() {
console.log("onSuccess");
if ( _param.cbfxn.success!=null ){
_param.cbfxn.success();
}
},
"onFailure": function(f) {
console.log("onFailure : errorMessage = " + f.errorMessage);
if ( _param.cbfxn.failure!=null ){
_param.cbfxn.failure();
}
}
});
} else {
@@ -1731,6 +1737,18 @@ HotelTV.hcap = (function() {
}
},
/**
* _keyValue는 아래 코드중 하나
* hcap.key.Code.ENTER
* hcap.key.Code.LEFT
* hcap.key.Code.RIGHT
* hcap.key.Code.BACK
* hcap.key.Code.UP
* hcap.key.Code.DOWN
* hcap.key.Code.CH_UP
* hcap.key.Code.CH_DOWN
* @param {enum} _keyValue
*/
SendVirKeyEvent: function(_keyValue) {
hcap.key.sendKey({
"virtualKeycode" : _keyValue,

2
procentric/application/lib/hoteltv.js
View File

@@ -53,7 +53,7 @@ var HotelTV = HotelTV || {
'playing': false,
'shortkey': {
'idx': null, // 바로가기 번호 UI의 행번호(0부터 시작)
'ch_item_idx': null,
'ch_item_idx': null, // ALL Category내에서의 채널 index
'scroll_offset': null,
},
},

759
procentric/application/lib/hoteltv.ui_appfull.js
View File

File diff suppressed because it is too large Load Diff

326
procentric/application/theme/HIM00001/hoteltv.app.full.tv.css
View File

@@ -17,147 +17,248 @@
height: 100%;
padding: 0px;
background: url(tv:);
/* background: url(https://cropper.watch.aetnd.com/public-content-aetn.video.aetnd.com/video-thumbnails/AETN-History_VMS/21/200/tdih-jun01-HD.jpg); */
overflow: hidden;
display: none;
}
.main .tv .bg div#lst_tvCtgbg {
/************************************************************/
/* TV CATEGORY FRAME STYLE [ START ] */
/************************************************************/
.main .tv .bg #lst_tvCtgyFrm {
position: relative;
top: 0%;
left: 37%;
max-width: 26%;
width: 26%;
height: 50px;
margin: 0;
padding: 0;
/* background-color: red; */
overflow: hidden;
}
.main .tv .bg #lst_tvCtgyFrm .owl-stage-outer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.main .tv .bg .owl-carousel .owl-stage-outer {
width: 780px;
height: 100%;
margin: 0;
padding: 0;
}
.main .tv .bg .owl-carousel .owl-stage-outer .owl-stage {
.main .tv .bg #lst_tvCtgyFrm .owl-stage-outer .owl-stage{
width: 100%;
height: 100%;
height: 50px;
margin: 0;
padding: 0;
}
.main .tv .bg .owl-carousel .owl-stage-outer .owl-stage .owl-item .item {
position: absolute;
top: 116px;
/* left: 80px;
width: 1840px; */
height: 844px;
margin: 20px 20px 20px 20px;
padding: 5px 20px 5px 20px;
background-color: rgba(0, 0, 0, 0.4);
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 1));
.main .tv .bg #lst_tvCtgyFrm .owl-stage-outer .owl-stage .owl-item .item {
background-color: rgba(0, 0, 0, 0.4); */
/* filter: drop-shadow(0 0 10px rgba(0, 0, 0, 1)); */
border: solid rgb(137, 139, 129);
border-radius: 10px;
/* border-radius: 10px; */
/* background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(120, 120, 120, 0.7) 70%, rgba(0, 0, 0, 0.7) 85%); */
/* border-color: rgba(230,230,230,0.3) transparent transparent transparent; */
/* border-width: 50px 50px 0 0; */
/* box-sizing: border-box; */
overflow: hidden;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item #tvctg_title {
line-height: 100px;
padding: 0;
margin: 0 0 10px 0;
font-size: 80px;
color: rgb(235, 235, 235);
white-space: nowrap;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist {
max-width: 680px;
height: 640px;
font-size: 32px;
overflow: hidden;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame {
height: 110px;
margin: 10px 0 10px 0;
z-index: 1;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame .tvch_epg {
float: left;
margin: 0 0 0 186px;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame.focused .tvch_epg {
margin: 0 0 0 210px;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame #tvch_epg_title {
font-size: 32px;
width: 468px;
color: rgb(255, 255, 255);
border-bottom: solid;
border-bottom-color: rgba(94, 90, 86, 0.8);
white-space: nowrap;
display: block;
overflow: hidden;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame.focused #tvch_epg_title {
border-bottom-color: rgb(181, 218, 16);
color: rgb(181, 218, 16);
.main .tv .bg #lst_tvCtgyFrm .item #tvctg_title {
line-height: 50px;
/* padding: 0 0 0 10px; */
/* margin: 0 0 0px 10px; */
font-size: 40px;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame #tvch_epg_title::before {
content: attr(ch_num);
font-size: 32px;
text-align: left;
margin: 20px 10px 0 0;
padding: 0 5px 0 5px;
color: rgb(10, 10, 10);
background-color: rgba(210, 210, 210, 1);
text-shadow: 0 0 5px rgba(68, 68, 68, 1), 0 0 20px rgba(10, 175, 230, 0);
border-radius: 5px;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame #tvch_epg_info {
text-align: center;
vertical-align: middle;
color: rgb(235, 235, 235);
white-space: nowrap;
display: none;
}
/************************************************************/
/* TV CATEGORY FRAME STYLE [ END ] */
/************************************************************/
/************************************************************/
/* TV CHANNEL FRAME STYLE [ START ] */
/************************************************************/
.main .tv .bg .chFrm {
position: absolute;
top: 82%;
left: 0 px;
width: 100%;
height: 134px;
margin: 0;
padding: 0;
color: rgba(245,245,245,1.0);
background-color: rgba(0,0,0,0.8);
display: flex;
overflow: hidden;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame #tvch_logo {
width: 176px;
height: 110px;
.main .tv .bg .chFrm .chLogo {
width: 15%;
height: 100%;
margin: 0;
padding: 10px 10px 10px 10px;
}
.main .tv .bg .chFrm .chLogo #icon{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-repeat: no-repeat;
background-color: rgba(255,255,255,1);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
border-radius: 10px;
border: 2px solid rgb(67, 82, 105);
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame.focused #tvch_logo {
border: solid rgb(181, 218, 16);
transform: scale(1.14);
transform-origin: 2% 48%;
z-index: 2;
.main .tv .bg .chFrm .chNum {
width: 10%;
height: 100%;
margin: 0;
padding: 0;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item #tvctg_arrow_up {
width: 30px;
height: 30px;
margin: 10px 0 0 70px;
.main .tv .bg .chFrm .chNum #arrow_up{
padding: 0;
width: 22px;
height: 22px;
margin: 10px 0 0 86px;
transform: rotate(-45deg) skew(15deg, 15deg);
border-top: 5px #fff solid;
border-right: 5px #fff solid;
/* text-align: center; */
display: block;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item #tvctg_arrow_down {
width: 30px;
height: 30px;
margin: 10px 0 0 70px;
.main .tv .bg .chFrm .chNum #number{
width: 100%;
height: 48%;
margin: 0;
padding: 0;
line-height: 64px;
font-size: 48px;
text-align: center;
vertical-align: middle;
display: block;
/* background-color: red; */
}
.main .tv .bg .chFrm .chNum #arrow_down{
width: 22px;
height: 22px;
margin: 0px 0 0 86px;
transform: rotate(135deg) skew(15deg, 15deg);
border-top: 5px #fff solid;
border-right: 5px #fff solid;
display: block;
}
/*************************/
/* STYLE for TV Shortcut */
/*************************/
.main .tv .shortcut {
.main .tv .bg .chFrm .chDesc {
width: 75%;
height: 100%;
margin: 0;
padding: 5px 0px 5px 0px;
}
.main .tv .bg .chFrm .chDesc #epg_chname{
width: 100%;
height: 34px;
line-height: 34px;
font-size: 30px;
margin: 0;
padding: 0;
}
.main .tv .bg .chFrm .chDesc #epg_title{
width: 100%;
height: 60px;
line-height: 60px;
font-size: 50px;
margin: 0;
padding: 0;
white-space: nowrap;
overflow: hidden;
}
.main .tv .bg .chFrm .chDesc #epg_details{
width: 100%;
height: 28px;
margin: 0;
padding: 0;
display: flex;
line-height: 28px;
font-size: 20px;
overflow: hidden;
}
.main .tv .bg .chFrm .chDesc #epg_details #tm_current{
width: 20%;
height: 100%;
margin: 0;
padding: 0;
}
.main .tv .bg .chFrm .chDesc #epg_details #tm_playing{
width: 20%;
height: 100%;
margin: 0;
padding: 0;
}
.main .tv .bg .chFrm .chDesc #epg_details #tm_chart{
width: 58%;
height: 86%;
margin: 0;
padding: 0;
background-color: rgba(80,80,80,0.8);
border-radius: 10px;
}
.main .tv .bg .chFrm .chDesc #epg_details #tm_chart .progress{
margin: 5px 5px 0px 5px;
/* padding: 14px 0px 0px 0px; */
height: 14px;
/* vertical-align: middle; */
background-color: rgba(245,245,245,0.8);
border-radius: 10px;
}
/************************************************************/
/* TV CHANNEL FRAME STYLE [ END ] */
/************************************************************/
/************************************************************/
/* TV SHORTCUT STYLE [ START ] */
/************************************************************/
.main .tv .shortcut_mode0 {
position: absolute;
top: 1%;
left: 87%;
width: 12%;
height: 72px;
/* background: rgba(0, 0, 0, 0.7); */
/* background-color: red; */
background-color: rgba(0, 0, 0, 0.8);
padding: 0px 0px 0px 0px;
border-top: 5px solid rgb(40, 40, 40);
border-bottom: 5px solid rgb(40, 40, 40);
display: none;
font-size: 52px;
line-height: 62px;
color: rgb(245,245,245);
text-align: center;
display: none;
}
.main .tv .shortcut_mode1 {
position: absolute;
top: 18%;
left: 75%;
@@ -167,22 +268,23 @@
padding: 20px 6px 20px 6px;
border-top: 5px solid rgba(0,0,0,0.7);
border-bottom: 5px solid rgba(0,0,0,0.7);
display: none;
}
.main .tv .shortcut div#suggestion {
.main .tv .shortcut_mode1 div#suggestion {
position: absolute;
width: 100%;
height: 84%;
}
.main .tv .shortcut div#suggestion table {
.main .tv .shortcut_mode1 div#suggestion table {
width: 100%;
height: 100%;
/* padding: 3px 0px 3px 0px; */
border-collapse: collapse;
}
.main .tv .shortcut .ch_list>#record {
.main .tv .shortcut_mode1 .ch_list>#record {
position: absolute;
width: 100%;
height: 100%;
@@ -191,7 +293,7 @@
padding: 14px 0px 0px 0px;
}
.main .tv .shortcut .ch_list>#record tr {
.main .tv .shortcut_mode1 .ch_list>#record tr {
width: 96%;
display: block;
float: left;
@@ -200,20 +302,20 @@
border-top: 1px solid rgb(67, 82, 105);
}
.main .tv .shortcut .ch_list>#record tr.active {
.main .tv .shortcut_mode1 .ch_list>#record tr.active {
color:rgb(255, 192, 0);
background-color: rgba(0,0,0,0.6);
border-top: 2px solid rgb(255, 192, 0);
border-bottom: 2px solid rgb(255, 192, 0);
}
.main .tv .shortcut .ch_list>#record tr>.scitem {
.main .tv .shortcut_mode1 .ch_list>#record tr>.scitem {
font-size: 40px;
line-height: 1;
width: 100%;
}
.main .tv .shortcut .ch_list>#record tr>.scitem>#logo {
.main .tv .shortcut_mode1 .ch_list>#record tr>.scitem>#logo {
width: 24%;
height: 40px;
/* height: 100%; */
@@ -227,7 +329,7 @@
/* margin: 1%; */
}
.main .tv .shortcut .ch_list>#record tr>.scitem>#num {
.main .tv .shortcut_mode1 .ch_list>#record tr>.scitem>#num {
width: 18%;
float: left;
text-align: center;
@@ -235,7 +337,7 @@
overflow: hidden;
}
.main .tv .shortcut .ch_list>#record tr>.scitem>#title {
.main .tv .shortcut_mode1 .ch_list>#record tr>.scitem>#title {
width: 54%;
float: left;
text-align: center;
@@ -244,3 +346,7 @@
overflow: hidden;
/* margin: 4px 0px 1px 0px; */
}
/************************************************************/
/* TV SHORTCUT STYLE [ END ] */
/************************************************************/

326
procentric/application/theme/HJS00001/hoteltv.app.full.tv.css
View File

@@ -17,147 +17,248 @@
height: 100%;
padding: 0px;
background: url(tv:);
/* background: url(https://cropper.watch.aetnd.com/public-content-aetn.video.aetnd.com/video-thumbnails/AETN-History_VMS/21/200/tdih-jun01-HD.jpg); */
overflow: hidden;
display: none;
}
.main .tv .bg div#lst_tvCtgbg {
/************************************************************/
/* TV CATEGORY FRAME STYLE [ START ] */
/************************************************************/
.main .tv .bg #lst_tvCtgyFrm {
position: relative;
top: 0%;
left: 37%;
max-width: 26%;
width: 26%;
height: 50px;
margin: 0;
padding: 0;
/* background-color: red; */
overflow: hidden;
}
.main .tv .bg #lst_tvCtgyFrm .owl-stage-outer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.main .tv .bg .owl-carousel .owl-stage-outer {
width: 780px;
height: 100%;
margin: 0;
padding: 0;
}
.main .tv .bg .owl-carousel .owl-stage-outer .owl-stage {
.main .tv .bg #lst_tvCtgyFrm .owl-stage-outer .owl-stage{
width: 100%;
height: 100%;
height: 50px;
margin: 0;
padding: 0;
}
.main .tv .bg .owl-carousel .owl-stage-outer .owl-stage .owl-item .item {
position: absolute;
top: 116px;
/* left: 80px;
width: 1840px; */
height: 844px;
margin: 20px 20px 20px 20px;
padding: 5px 20px 5px 20px;
background-color: rgba(0, 0, 0, 0.4);
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 1));
.main .tv .bg #lst_tvCtgyFrm .owl-stage-outer .owl-stage .owl-item .item {
background-color: rgba(0, 0, 0, 0.4); */
/* filter: drop-shadow(0 0 10px rgba(0, 0, 0, 1)); */
border: solid rgb(137, 139, 129);
border-radius: 10px;
/* border-radius: 10px; */
/* background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(120, 120, 120, 0.7) 70%, rgba(0, 0, 0, 0.7) 85%); */
/* border-color: rgba(230,230,230,0.3) transparent transparent transparent; */
/* border-width: 50px 50px 0 0; */
/* box-sizing: border-box; */
overflow: hidden;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item #tvctg_title {
line-height: 100px;
padding: 0;
margin: 0 0 10px 0;
font-size: 80px;
color: rgb(235, 235, 235);
white-space: nowrap;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist {
max-width: 680px;
height: 640px;
font-size: 32px;
overflow: hidden;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame {
height: 110px;
margin: 10px 0 10px 0;
z-index: 1;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame .tvch_epg {
float: left;
margin: 0 0 0 186px;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame.focused .tvch_epg {
margin: 0 0 0 210px;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame #tvch_epg_title {
font-size: 32px;
width: 468px;
color: rgb(255, 255, 255);
border-bottom: solid;
border-bottom-color: rgba(94, 90, 86, 0.8);
white-space: nowrap;
display: block;
overflow: hidden;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame.focused #tvch_epg_title {
border-bottom-color: rgb(181, 218, 16);
color: rgb(181, 218, 16);
.main .tv .bg #lst_tvCtgyFrm .item #tvctg_title {
line-height: 50px;
/* padding: 0 0 0 10px; */
/* margin: 0 0 0px 10px; */
font-size: 40px;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame #tvch_epg_title::before {
content: attr(ch_num);
font-size: 32px;
text-align: left;
margin: 20px 10px 0 0;
padding: 0 5px 0 5px;
color: rgb(10, 10, 10);
background-color: rgba(210, 210, 210, 1);
text-shadow: 0 0 5px rgba(68, 68, 68, 1), 0 0 20px rgba(10, 175, 230, 0);
border-radius: 5px;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame #tvch_epg_info {
text-align: center;
vertical-align: middle;
color: rgb(235, 235, 235);
white-space: nowrap;
display: none;
}
/************************************************************/
/* TV CATEGORY FRAME STYLE [ END ] */
/************************************************************/
/************************************************************/
/* TV CHANNEL FRAME STYLE [ START ] */
/************************************************************/
.main .tv .bg .chFrm {
position: absolute;
top: 82%;
left: 0 px;
width: 100%;
height: 134px;
margin: 0;
padding: 0;
color: rgba(245,245,245,1.0);
background-color: rgba(0,0,0,0.8);
display: flex;
overflow: hidden;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame #tvch_logo {
width: 176px;
height: 110px;
.main .tv .bg .chFrm .chLogo {
width: 15%;
height: 100%;
margin: 0;
padding: 10px 10px 10px 10px;
}
.main .tv .bg .chFrm .chLogo #icon{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-repeat: no-repeat;
background-color: rgba(255,255,255,1);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
border-radius: 10px;
border: 2px solid rgb(67, 82, 105);
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame.focused #tvch_logo {
border: solid rgb(181, 218, 16);
transform: scale(1.14);
transform-origin: 2% 48%;
z-index: 2;
.main .tv .bg .chFrm .chNum {
width: 10%;
height: 100%;
margin: 0;
padding: 0;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item #tvctg_arrow_up {
width: 30px;
height: 30px;
margin: 10px 0 0 70px;
.main .tv .bg .chFrm .chNum #arrow_up{
padding: 0;
width: 22px;
height: 22px;
margin: 10px 0 0 86px;
transform: rotate(-45deg) skew(15deg, 15deg);
border-top: 5px #fff solid;
border-right: 5px #fff solid;
/* text-align: center; */
display: block;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item #tvctg_arrow_down {
width: 30px;
height: 30px;
margin: 10px 0 0 70px;
.main .tv .bg .chFrm .chNum #number{
width: 100%;
height: 48%;
margin: 0;
padding: 0;
line-height: 64px;
font-size: 48px;
text-align: center;
vertical-align: middle;
display: block;
/* background-color: red; */
}
.main .tv .bg .chFrm .chNum #arrow_down{
width: 22px;
height: 22px;
margin: 0px 0 0 86px;
transform: rotate(135deg) skew(15deg, 15deg);
border-top: 5px #fff solid;
border-right: 5px #fff solid;
display: block;
}
/*************************/
/* STYLE for TV Shortcut */
/*************************/
.main .tv .shortcut {
.main .tv .bg .chFrm .chDesc {
width: 75%;
height: 100%;
margin: 0;
padding: 5px 0px 5px 0px;
}
.main .tv .bg .chFrm .chDesc #epg_chname{
width: 100%;
height: 34px;
line-height: 34px;
font-size: 30px;
margin: 0;
padding: 0;
}
.main .tv .bg .chFrm .chDesc #epg_title{
width: 100%;
height: 60px;
line-height: 60px;
font-size: 50px;
margin: 0;
padding: 0;
white-space: nowrap;
overflow: hidden;
}
.main .tv .bg .chFrm .chDesc #epg_details{
width: 100%;
height: 28px;
margin: 0;
padding: 0;
display: flex;
line-height: 28px;
font-size: 20px;
overflow: hidden;
}
.main .tv .bg .chFrm .chDesc #epg_details #tm_current{
width: 20%;
height: 100%;
margin: 0;
padding: 0;
}
.main .tv .bg .chFrm .chDesc #epg_details #tm_playing{
width: 20%;
height: 100%;
margin: 0;
padding: 0;
}
.main .tv .bg .chFrm .chDesc #epg_details #tm_chart{
width: 58%;
height: 86%;
margin: 0;
padding: 0;
background-color: rgba(80,80,80,0.8);
border-radius: 10px;
}
.main .tv .bg .chFrm .chDesc #epg_details #tm_chart .progress{
margin: 5px 5px 0px 5px;
/* padding: 14px 0px 0px 0px; */
height: 14px;
/* vertical-align: middle; */
background-color: rgba(245,245,245,0.8);
border-radius: 10px;
}
/************************************************************/
/* TV CHANNEL FRAME STYLE [ END ] */
/************************************************************/
/************************************************************/
/* TV SHORTCUT STYLE [ START ] */
/************************************************************/
.main .tv .shortcut_mode0 {
position: absolute;
top: 1%;
left: 87%;
width: 12%;
height: 72px;
/* background: rgba(0, 0, 0, 0.7); */
/* background-color: red; */
background-color: rgba(0, 0, 0, 0.8);
padding: 0px 0px 0px 0px;
border-top: 5px solid rgb(40, 40, 40);
border-bottom: 5px solid rgb(40, 40, 40);
display: none;
font-size: 52px;
line-height: 62px;
color: rgb(245,245,245);
text-align: center;
display: none;
}
.main .tv .shortcut_mode1 {
position: absolute;
top: 18%;
left: 75%;
@@ -167,22 +268,23 @@
padding: 20px 6px 20px 6px;
border-top: 5px solid rgba(0,0,0,0.7);
border-bottom: 5px solid rgba(0,0,0,0.7);
display: none;
}
.main .tv .shortcut div#suggestion {
.main .tv .shortcut_mode1 div#suggestion {
position: absolute;
width: 100%;
height: 84%;
}
.main .tv .shortcut div#suggestion table {
.main .tv .shortcut_mode1 div#suggestion table {
width: 100%;
height: 100%;
/* padding: 3px 0px 3px 0px; */
border-collapse: collapse;
}
.main .tv .shortcut .ch_list>#record {
.main .tv .shortcut_mode1 .ch_list>#record {
position: absolute;
width: 100%;
height: 100%;
@@ -191,7 +293,7 @@
padding: 14px 0px 0px 0px;
}
.main .tv .shortcut .ch_list>#record tr {
.main .tv .shortcut_mode1 .ch_list>#record tr {
width: 96%;
display: block;
float: left;
@@ -200,20 +302,20 @@
border-top: 1px solid rgb(67, 82, 105);
}
.main .tv .shortcut .ch_list>#record tr.active {
.main .tv .shortcut_mode1 .ch_list>#record tr.active {
color:rgb(255, 192, 0);
background-color: rgba(0,0,0,0.6);
border-top: 2px solid rgb(255, 192, 0);
border-bottom: 2px solid rgb(255, 192, 0);
}
.main .tv .shortcut .ch_list>#record tr>.scitem {
.main .tv .shortcut_mode1 .ch_list>#record tr>.scitem {
font-size: 40px;
line-height: 1;
width: 100%;
}
.main .tv .shortcut .ch_list>#record tr>.scitem>#logo {
.main .tv .shortcut_mode1 .ch_list>#record tr>.scitem>#logo {
width: 24%;
height: 40px;
/* height: 100%; */
@@ -227,7 +329,7 @@
/* margin: 1%; */
}
.main .tv .shortcut .ch_list>#record tr>.scitem>#num {
.main .tv .shortcut_mode1 .ch_list>#record tr>.scitem>#num {
width: 18%;
float: left;
text-align: center;
@@ -235,7 +337,7 @@
overflow: hidden;
}
.main .tv .shortcut .ch_list>#record tr>.scitem>#title {
.main .tv .shortcut_mode1 .ch_list>#record tr>.scitem>#title {
width: 54%;
float: left;
text-align: center;
@@ -244,3 +346,7 @@
overflow: hidden;
/* margin: 4px 0px 1px 0px; */
}
/************************************************************/
/* TV SHORTCUT STYLE [ END ] */
/************************************************************/

326
procentric/application/theme/HTL00001/hoteltv.app.full.tv.css
View File

@@ -17,147 +17,248 @@
height: 100%;
padding: 0px;
background: url(tv:);
/* background: url(https://cropper.watch.aetnd.com/public-content-aetn.video.aetnd.com/video-thumbnails/AETN-History_VMS/21/200/tdih-jun01-HD.jpg); */
overflow: hidden;
display: none;
}
.main .tv .bg div#lst_tvCtgbg {
/************************************************************/
/* TV CATEGORY FRAME STYLE [ START ] */
/************************************************************/
.main .tv .bg #lst_tvCtgyFrm {
position: relative;
top: 0%;
left: 37%;
max-width: 26%;
width: 26%;
height: 50px;
margin: 0;
padding: 0;
/* background-color: red; */
overflow: hidden;
}
.main .tv .bg #lst_tvCtgyFrm .owl-stage-outer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.main .tv .bg .owl-carousel .owl-stage-outer {
width: 780px;
height: 100%;
margin: 0;
padding: 0;
}
.main .tv .bg .owl-carousel .owl-stage-outer .owl-stage {
.main .tv .bg #lst_tvCtgyFrm .owl-stage-outer .owl-stage{
width: 100%;
height: 100%;
height: 50px;
margin: 0;
padding: 0;
}
.main .tv .bg .owl-carousel .owl-stage-outer .owl-stage .owl-item .item {
position: absolute;
top: 116px;
/* left: 80px;
width: 1840px; */
height: 844px;
margin: 20px 20px 20px 20px;
padding: 5px 20px 5px 20px;
background-color: rgba(0, 0, 0, 0.4);
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 1));
.main .tv .bg #lst_tvCtgyFrm .owl-stage-outer .owl-stage .owl-item .item {
background-color: rgba(0, 0, 0, 0.4); */
/* filter: drop-shadow(0 0 10px rgba(0, 0, 0, 1)); */
border: solid rgb(137, 139, 129);
border-radius: 10px;
/* border-radius: 10px; */
/* background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 50%, rgba(120, 120, 120, 0.7) 70%, rgba(0, 0, 0, 0.7) 85%); */
/* border-color: rgba(230,230,230,0.3) transparent transparent transparent; */
/* border-width: 50px 50px 0 0; */
/* box-sizing: border-box; */
overflow: hidden;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item #tvctg_title {
line-height: 100px;
padding: 0;
margin: 0 0 10px 0;
font-size: 80px;
color: rgb(235, 235, 235);
white-space: nowrap;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist {
max-width: 680px;
height: 640px;
font-size: 32px;
overflow: hidden;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame {
height: 110px;
margin: 10px 0 10px 0;
z-index: 1;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame .tvch_epg {
float: left;
margin: 0 0 0 186px;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame.focused .tvch_epg {
margin: 0 0 0 210px;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame #tvch_epg_title {
font-size: 32px;
width: 468px;
color: rgb(255, 255, 255);
border-bottom: solid;
border-bottom-color: rgba(94, 90, 86, 0.8);
white-space: nowrap;
display: block;
overflow: hidden;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame.focused #tvch_epg_title {
border-bottom-color: rgb(181, 218, 16);
color: rgb(181, 218, 16);
.main .tv .bg #lst_tvCtgyFrm .item #tvctg_title {
line-height: 50px;
/* padding: 0 0 0 10px; */
/* margin: 0 0 0px 10px; */
font-size: 40px;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame #tvch_epg_title::before {
content: attr(ch_num);
font-size: 32px;
text-align: left;
margin: 20px 10px 0 0;
padding: 0 5px 0 5px;
color: rgb(10, 10, 10);
background-color: rgba(210, 210, 210, 1);
text-shadow: 0 0 5px rgba(68, 68, 68, 1), 0 0 20px rgba(10, 175, 230, 0);
border-radius: 5px;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame #tvch_epg_info {
text-align: center;
vertical-align: middle;
color: rgb(235, 235, 235);
white-space: nowrap;
display: none;
}
/************************************************************/
/* TV CATEGORY FRAME STYLE [ END ] */
/************************************************************/
/************************************************************/
/* TV CHANNEL FRAME STYLE [ START ] */
/************************************************************/
.main .tv .bg .chFrm {
position: absolute;
top: 82%;
left: 0 px;
width: 100%;
height: 134px;
margin: 0;
padding: 0;
color: rgba(245,245,245,1.0);
background-color: rgba(0,0,0,0.8);
display: flex;
overflow: hidden;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame #tvch_logo {
width: 176px;
height: 110px;
.main .tv .bg .chFrm .chLogo {
width: 15%;
height: 100%;
margin: 0;
padding: 10px 10px 10px 10px;
}
.main .tv .bg .chFrm .chLogo #icon{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-repeat: no-repeat;
background-color: rgba(255,255,255,1);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
border-radius: 10px;
border: 2px solid rgb(67, 82, 105);
}
.main .tv .bg .owl-carousel .owl-stage-outer .item .tvctg_chlist .tvch_item_frame.focused #tvch_logo {
border: solid rgb(181, 218, 16);
transform: scale(1.14);
transform-origin: 2% 48%;
z-index: 2;
.main .tv .bg .chFrm .chNum {
width: 10%;
height: 100%;
margin: 0;
padding: 0;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item #tvctg_arrow_up {
width: 30px;
height: 30px;
margin: 10px 0 0 70px;
.main .tv .bg .chFrm .chNum #arrow_up{
padding: 0;
width: 22px;
height: 22px;
margin: 10px 0 0 86px;
transform: rotate(-45deg) skew(15deg, 15deg);
border-top: 5px #fff solid;
border-right: 5px #fff solid;
/* text-align: center; */
display: block;
}
.main .tv .bg .owl-carousel .owl-stage-outer .item #tvctg_arrow_down {
width: 30px;
height: 30px;
margin: 10px 0 0 70px;
.main .tv .bg .chFrm .chNum #number{
width: 100%;
height: 48%;
margin: 0;
padding: 0;
line-height: 64px;
font-size: 48px;
text-align: center;
vertical-align: middle;
display: block;
/* background-color: red; */
}
.main .tv .bg .chFrm .chNum #arrow_down{
width: 22px;
height: 22px;
margin: 0px 0 0 86px;
transform: rotate(135deg) skew(15deg, 15deg);
border-top: 5px #fff solid;
border-right: 5px #fff solid;
display: block;
}
/*************************/
/* STYLE for TV Shortcut */
/*************************/
.main .tv .shortcut {
.main .tv .bg .chFrm .chDesc {
width: 75%;
height: 100%;
margin: 0;
padding: 5px 0px 5px 0px;
}
.main .tv .bg .chFrm .chDesc #epg_chname{
width: 100%;
height: 34px;
line-height: 34px;
font-size: 30px;
margin: 0;
padding: 0;
}
.main .tv .bg .chFrm .chDesc #epg_title{
width: 100%;
height: 60px;
line-height: 60px;
font-size: 50px;
margin: 0;
padding: 0;
white-space: nowrap;
overflow: hidden;
}
.main .tv .bg .chFrm .chDesc #epg_details{
width: 100%;
height: 28px;
margin: 0;
padding: 0;
display: flex;
line-height: 28px;
font-size: 20px;
overflow: hidden;
}
.main .tv .bg .chFrm .chDesc #epg_details #tm_current{
width: 20%;
height: 100%;
margin: 0;
padding: 0;
}
.main .tv .bg .chFrm .chDesc #epg_details #tm_playing{
width: 20%;
height: 100%;
margin: 0;
padding: 0;
}
.main .tv .bg .chFrm .chDesc #epg_details #tm_chart{
width: 58%;
height: 86%;
margin: 0;
padding: 0;
background-color: rgba(80,80,80,0.8);
border-radius: 10px;
}
.main .tv .bg .chFrm .chDesc #epg_details #tm_chart .progress{
margin: 5px 5px 0px 5px;
/* padding: 14px 0px 0px 0px; */
height: 14px;
/* vertical-align: middle; */
background-color: rgba(245,245,245,0.8);
border-radius: 10px;
}
/************************************************************/
/* TV CHANNEL FRAME STYLE [ END ] */
/************************************************************/
/************************************************************/
/* TV SHORTCUT STYLE [ START ] */
/************************************************************/
.main .tv .shortcut_mode0 {
position: absolute;
top: 1%;
left: 87%;
width: 12%;
height: 72px;
/* background: rgba(0, 0, 0, 0.7); */
/* background-color: red; */
background-color: rgba(0, 0, 0, 0.8);
padding: 0px 0px 0px 0px;
border-top: 5px solid rgb(40, 40, 40);
border-bottom: 5px solid rgb(40, 40, 40);
display: none;
font-size: 52px;
line-height: 62px;
color: rgb(245,245,245);
text-align: center;
display: none;
}
.main .tv .shortcut_mode1 {
position: absolute;
top: 18%;
left: 75%;
@@ -167,22 +268,23 @@
padding: 20px 6px 20px 6px;
border-top: 5px solid rgba(0,0,0,0.7);
border-bottom: 5px solid rgba(0,0,0,0.7);
display: none;
}
.main .tv .shortcut div#suggestion {
.main .tv .shortcut_mode1 div#suggestion {
position: absolute;
width: 100%;
height: 84%;
}
.main .tv .shortcut div#suggestion table {
.main .tv .shortcut_mode1 div#suggestion table {
width: 100%;
height: 100%;
/* padding: 3px 0px 3px 0px; */
border-collapse: collapse;
}
.main .tv .shortcut .ch_list>#record {
.main .tv .shortcut_mode1 .ch_list>#record {
position: absolute;
width: 100%;
height: 100%;
@@ -191,7 +293,7 @@
padding: 14px 0px 0px 0px;
}
.main .tv .shortcut .ch_list>#record tr {
.main .tv .shortcut_mode1 .ch_list>#record tr {
width: 96%;
display: block;
float: left;
@@ -200,20 +302,20 @@
border-top: 1px solid rgb(67, 82, 105);
}
.main .tv .shortcut .ch_list>#record tr.active {
.main .tv .shortcut_mode1 .ch_list>#record tr.active {
color:rgb(255, 192, 0);
background-color: rgba(0,0,0,0.6);
border-top: 2px solid rgb(255, 192, 0);
border-bottom: 2px solid rgb(255, 192, 0);
}
.main .tv .shortcut .ch_list>#record tr>.scitem {
.main .tv .shortcut_mode1 .ch_list>#record tr>.scitem {
font-size: 40px;
line-height: 1;
width: 100%;
}
.main .tv .shortcut .ch_list>#record tr>.scitem>#logo {
.main .tv .shortcut_mode1 .ch_list>#record tr>.scitem>#logo {
width: 24%;
height: 40px;
/* height: 100%; */
@@ -227,7 +329,7 @@
/* margin: 1%; */
}
.main .tv .shortcut .ch_list>#record tr>.scitem>#num {
.main .tv .shortcut_mode1 .ch_list>#record tr>.scitem>#num {
width: 18%;
float: left;
text-align: center;
@@ -235,7 +337,7 @@
overflow: hidden;
}
.main .tv .shortcut .ch_list>#record tr>.scitem>#title {
.main .tv .shortcut_mode1 .ch_list>#record tr>.scitem>#title {
width: 54%;
float: left;
text-align: center;
@@ -244,3 +346,7 @@
overflow: hidden;
/* margin: 4px 0px 1px 0px; */
}
/************************************************************/
/* TV SHORTCUT STYLE [ END ] */
/************************************************************/

1
procentric/application/theme/hoteltv.ui_utils.css
View File

@@ -7,6 +7,7 @@
padding: 0px;
/* background-image: url(./images/hoteltv_service_preparing.png); */
background-image: url(/procentric/application/images/hoteltv_service_preparing_joson.jpg);
/* background-image: url(/procentric/application/images/hoteltv_service_preparing.png); */
background-size: cover;
background-repeat: no-repeat;
}