/* Written for the LG Pro:Centric browser (AppleWebKit/537.1): no CSS variables, no object-fit, only prefixed transform/transition, old -webkit-box flexbox. Keep it that way; modern browsers still understand everything below. */ html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: #000; overflow: hidden; font-family: "LG Smart UI", "Segoe UI", Roboto, Arial, sans-serif; color: #fff; } #viewport { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; overflow: hidden; -webkit-transform-origin: 0 0; transform-origin: 0 0; background: #0b1220; } #stage, #screen, #overlay { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; } #screen { display: none; background: #0a0e16; background: -webkit-linear-gradient(top, #0f1522, #070a10); background: linear-gradient(to bottom, #0f1522, #070a10); z-index: 20; } #overlay { display: none; background: rgba(5,10,20,0.94); z-index: 50; } /* ---------- designed page elements ---------- */ .el { position: absolute; box-sizing: border-box; overflow: hidden; text-align: left; } .el-text, .el-clock, .el-date, .el-weather, .el-welcome, .el-room, .el-guest, .el-ip { white-space: nowrap; text-overflow: ellipsis; line-height: 1.15; } .el-text { white-space: normal; } .el-image { background-size: cover; background-position: center; background-repeat: no-repeat; } .el-btn { display: -webkit-box; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; text-align: center; cursor: pointer; overflow: visible; } .el-btn.lay-col { -webkit-box-orient: vertical; -webkit-flex-direction: column; flex-direction: column; } .el-btn.lay-row { -webkit-box-orient: horizontal; -webkit-flex-direction: row; flex-direction: row; } .el-btn .ic { display: block; background-repeat: no-repeat; background-position: center; background-size: contain; margin: 0 8px 8px 8px; } .el-btn.lay-row .ic { margin: 0 12px 0 0; } .el-btn .lbl { display: block; max-width: 96%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.45); } .el-btn { background: rgba(8,8,8,.62) !important; border: 1px solid rgba(229,183,76,.72) !important; border-radius: 22px !important; } /* focus: the frame keeps its width (icon / label do not jump); render.js adds one solid ring + a soft fill in the focus colour */ .el-btn.focused, .el-btn:focus { background: rgba(62,46,18,.86) !important; border-color: #e2bf78 !important; } .el-btn .lbl { letter-spacing: .5px; } /* the stock gold line icons turn white on the gold focus fill (they would disappear in it) */ .el-btn.focused .ic-gold { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } /* focus ring colour is set inline by render.js (no CSS variables on the TV) */ .focusable.focused { z-index: 10; } /* no scale / blur shadow / transition: the TV's browser paints in software and made the UI sluggish */ /* ---------- feature screens ---------- */ .hdr { position: absolute; left: 0; top: 0; width: 1280px; height: 84px; background: rgba(255,255,255,0.04); box-sizing: border-box; } .hdr h1 { margin: 0; position: absolute; left: 56px; top: 20px; font-size: 34px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; font-family: "Noto Serif", Georgia, "Times New Roman", serif; } .hdr .hint { position: absolute; right: 56px; top: 32px; font-size: 20px; color: #9fb0c8; } .body { position: absolute; left: 0; top: 84px; width: 1280px; height: 636px; } .center-msg { position: absolute; left: 0; top: 280px; width: 1280px; text-align: center; font-size: 28px; color: #9fb0c8; } .list { position: absolute; overflow: hidden; } .row { box-sizing: border-box; height: 56px; line-height: 56px; padding: 0 20px; font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 12px; margin: 4px 0; background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.07); } .row.sel { border-color: transparent; } .row .num { display: inline-block; width: 64px; color: #9fb0c8; } .row.sel .num { color: #fff; } .grid-card { position: absolute; box-sizing: border-box; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); } .grid-card .pic { width: 100%; background-size: cover; background-position: center; background-color: #1a2436; } .grid-card .cap { padding: 8px 12px; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .grid-card.sel { z-index: 5; } .tabs { position: absolute; left: 56px; top: 8px; height: 52px; } .tab { display: inline-block; height: 44px; line-height: 44px; padding: 0 22px; margin-right: 10px; border-radius: 22px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.10); box-sizing: border-box; height: 44px; line-height: 42px; font-size: 20px; color: #d6dbe6; } .tab.sel { border-color: transparent; } .card { position: absolute; box-sizing: border-box; padding: 28px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.09); border-radius: 18px; font-size: 24px; line-height: 1.4; overflow: hidden; } .card h2 { margin: 0 0 12px 0; font-size: 32px; } .muted { color: #9fb0c8; } .big { font-size: 56px; font-weight: 700; } .weather-card { background: rgba(8,8,8,.5); border: 1px solid rgba(229,183,76,.62); border-radius: 18px; text-align: center; padding: 16px !important; } .weather-card .big { color: #ffd86b; font-size: 38px; line-height: 1.1; } .weather-card .muted { font-size: 17px; line-height: 1.25; white-space: normal; word-wrap: break-word; } .weather-current { background: rgba(8,8,8,.98); border-color: rgba(229,183,76,.62); } /* live tv */ #tvvideo, #tvaudio { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; background: #000; object-fit: contain; } .banner { z-index: 6; position: absolute; left: 32px; bottom: 30px; max-width: 620px; padding: 12px 20px; background: rgba(24,24,24,.94); border: 1px solid rgba(255,255,255,.5); border-radius: 8px; color: #fff; font-size: 24px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 3px 14px rgba(0,0,0,.45); } .chpanel { position: absolute; left: 0; right: auto; top: 0; width: 360px; height: 720px; background: rgba(8,11,18,0.97); padding: 24px 16px; box-sizing: border-box; } .epg-mini { position: absolute; right: 34px; top: 300px; width: 300px; max-height: 92px; box-sizing: border-box; padding: 12px 14px; background: rgba(8,8,8,.82); border: 1px solid rgba(216,169,78,.8); border-radius: 16px; color: #fff; font-size: 16px; font-weight: 600; line-height: 1.35; white-space: normal; overflow: hidden; text-overflow: ellipsis; z-index: 25; } .epg-channel { color: #ffd86b; font-size: 20px; font-weight: 700; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .epg-time { color: #ffd86b; font-size: 14px; font-weight: 600; margin-bottom: 4px; } .epg-program { color: #fff; font-size: 16px; font-weight: 500; } #toast { position: absolute; left: 50%; top: 30px; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 99; padding: 14px 28px; border-radius: 10px; background: rgba(0,0,0,0.85); font-size: 24px; display: none; max-width: 900px; } /* setup form */ .form { position: absolute; left: 340px; top: 130px; width: 600px; } .form h2 { font-size: 34px; margin: 0 0 24px 0; } .field { box-sizing: border-box; height: 64px; line-height: 64px; margin: 10px 0; padding: 0 22px; font-size: 26px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); } .field .k { color: #b6c4da; display: inline-block; width: 200px; } /* Arabic etc.: let the browser order mixed text correctly without mirroring the fixed layout */ .el, .row, .card, .cap, .lbl, .tab, .banner, .center-msg { unicode-bidi: plaintext; } /* channel list logos */ .row .logo { display: inline-block; width: 44px; height: 30px; margin-right: 12px; vertical-align: middle; background-size: contain; background-repeat: no-repeat; background-position: center; } /* IP channels are drawn by the TV's own tuner *behind* the page: make the page see-through while one is playing */ html.hcap-plane, html.hcap-plane body, html.hcap-plane #viewport, html.hcap-plane #screen { background: transparent !important; } html.hcap-plane #stage { visibility: hidden; } /* the TV draws video (tuner / media player /