/* MAG TV — стилове за STB браузър (WebKit 533+, MAG 250/251/254/256) Правила: фиксиран екран 1280x720, абсолютно позициониране, без flexbox, без CSS променливи, без vw/vh, без webfont-ове. */ * { margin:0; padding:0; -webkit-box-sizing:border-box; box-sizing:border-box; } html, body { width:100%; height:100%; overflow:hidden; background:#0A0C0E; color:#E7ECEE; font-family:Arial, Helvetica, sans-serif; font-size:20px; -webkit-user-select:none; user-select:none; cursor:default; } /* при цял екран видео графиката става прозрачна, за да се вижда видео слоят */ html.video, html.video body, html.video #stage { background:transparent; } /* Интерфейсът е рисуван за 1280x720. Ако браузърът на кутията е на друга резолюция, сцената се мащабира от app.js — затова размерът тук е твърд. */ #stage { position:absolute; left:0; top:0; width:1280px; height:720px; background:transparent; } #screen, #modal { position:absolute; left:0; top:0; width:1280px; height:720px; } #modal { display:none; } #modal.on { display:block; background:rgba(0,0,0,.70); z-index:20; } .hide { display:none !important; } /* ---------- акцентни цветове (темата е клас на ) ---------- */ .acc-bg { background:#0097A7; } /* По-светъл тон на акцента, само за ТЕКСТ — в приложението това е GuideTextAccent: същият тон с вдигната яркост. */ .acc-tx { color:#26C6DA; } .acc-bd { border-color:#0097A7; } html.t-teal .acc-bg { background:#185F68; } html.t-teal .acc-tx { color:#4FB8C4; } html.t-teal .acc-bd { border-color:#185F68; } html.t-azure .acc-bg { background:#1E88E5; } html.t-azure .acc-tx { color:#6BB1F2; } html.t-azure .acc-bd { border-color:#1E88E5; } html.t-green .acc-bg { background:#2E9E5B; } html.t-green .acc-tx { color:#5FCB8A; } html.t-green .acc-bd { border-color:#2E9E5B; } html.t-amber .acc-bg { background:#C98A00; } html.t-amber .acc-tx { color:#F0B93D; } html.t-amber .acc-bd { border-color:#C98A00; } html.t-coral .acc-bg { background:#E85D4A; } html.t-coral .acc-tx { color:#FF8D7A; } html.t-coral .acc-bd { border-color:#E85D4A; } html.t-pink .acc-bg { background:#D81B60; } html.t-pink .acc-tx { color:#FF5C96; } html.t-pink .acc-bd { border-color:#D81B60; } html.t-violet .acc-bg { background:#7E57C2; } html.t-violet .acc-tx { color:#AC8CE8; } html.t-violet .acc-bd { border-color:#7E57C2; } html.t-gray .acc-bg { background:#5C7382; } html.t-gray .acc-tx { color:#93A9B6; } html.t-gray .acc-bd { border-color:#5C7382; } html.t-teal .row.foc, html.t-teal .key.foc, html.t-teal .srow.foc, html.t-teal .btn.foc, html.t-teal .dlg .opt.foc { background:#185F68; border-color:#185F68; } html.t-azure .row.foc, html.t-azure .key.foc, html.t-azure .srow.foc, html.t-azure .btn.foc, html.t-azure .dlg .opt.foc { background:#1E88E5; border-color:#1E88E5; } html.t-green .row.foc, html.t-green .key.foc, html.t-green .srow.foc, html.t-green .btn.foc, html.t-green .dlg .opt.foc { background:#2E9E5B; border-color:#2E9E5B; } html.t-amber .row.foc, html.t-amber .key.foc, html.t-amber .srow.foc, html.t-amber .btn.foc, html.t-amber .dlg .opt.foc { background:#C98A00; border-color:#C98A00; } html.t-coral .row.foc, html.t-coral .key.foc, html.t-coral .srow.foc, html.t-coral .btn.foc, html.t-coral .dlg .opt.foc { background:#E85D4A; border-color:#E85D4A; } html.t-pink .row.foc, html.t-pink .key.foc, html.t-pink .srow.foc, html.t-pink .btn.foc, html.t-pink .dlg .opt.foc { background:#D81B60; border-color:#D81B60; } html.t-violet .row.foc, html.t-violet .key.foc, html.t-violet .srow.foc, html.t-violet .btn.foc, html.t-violet .dlg .opt.foc { background:#7E57C2; border-color:#7E57C2; } html.t-gray .row.foc, html.t-gray .key.foc, html.t-gray .srow.foc, html.t-gray .btn.foc, html.t-gray .dlg .opt.foc { background:#5C7382; border-color:#5C7382; } html.t-teal .tile.foc, html.t-teal .pt.foc .box, html.t-teal .card.foc, html.t-teal .field.foc { border-color:#185F68; } html.t-azure .tile.foc, html.t-azure .pt.foc .box, html.t-azure .card.foc, html.t-azure .field.foc { border-color:#1E88E5; } html.t-green .tile.foc, html.t-green .pt.foc .box, html.t-green .card.foc, html.t-green .field.foc { border-color:#2E9E5B; } html.t-amber .tile.foc, html.t-amber .pt.foc .box, html.t-amber .card.foc, html.t-amber .field.foc { border-color:#C98A00; } html.t-coral .tile.foc, html.t-coral .pt.foc .box, html.t-coral .card.foc, html.t-coral .field.foc { border-color:#E85D4A; } html.t-pink .tile.foc, html.t-pink .pt.foc .box, html.t-pink .card.foc, html.t-pink .field.foc { border-color:#D81B60; } html.t-violet .tile.foc, html.t-violet .pt.foc .box, html.t-violet .card.foc, html.t-violet .field.foc { border-color:#7E57C2; } html.t-gray .tile.foc, html.t-gray .pt.foc .box, html.t-gray .card.foc, html.t-gray .field.foc { border-color:#5C7382; } html.t-teal .bar i, html.t-teal .tile.foc .mark { background:#185F68; } html.t-azure .bar i, html.t-azure .tile.foc .mark { background:#1E88E5; } html.t-green .bar i, html.t-green .tile.foc .mark { background:#2E9E5B; } html.t-amber .bar i, html.t-amber .tile.foc .mark { background:#C98A00; } html.t-coral .bar i, html.t-coral .tile.foc .mark { background:#E85D4A; } html.t-pink .bar i, html.t-pink .tile.foc .mark { background:#D81B60; } html.t-violet .bar i, html.t-violet .tile.foc .mark { background:#7E57C2; } html.t-gray .bar i, html.t-gray .tile.foc .mark { background:#5C7382; } /* светла тема */ /* ---------- обща типография ---------- */ .muted { color:#93A0A6; } .small { font-size:16px; } .bold { font-weight:bold; } .ell { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } /* ---------- горна лента ---------- */ .topbar { position:absolute; left:84px; top:0; width:1196px; height:72px; background:#0C1114; border-bottom:1px solid #2C363B; } .topbar .ttl { position:absolute; left:32px; top:19px; font-size:28px; font-weight:bold; } .topbar .crumb { position:absolute; left:32px; top:24px; font-size:23px; } .topbar .clock { position:absolute; right:32px; top:20px; font-size:26px; } .topbar .acct { position:absolute; right:150px; top:26px; font-size:17px; color:#93A0A6; } /* ---------- долна лента с подсказки ---------- */ .hintbar { position:absolute; left:84px; bottom:0; width:1196px; height:48px; background:#0C1114; border-top:1px solid #2C363B; font-size:16px; color:#93A0A6; } .hintbar span { display:inline-block; margin:14px 0 0 24px; } .hintbar b { display:inline-block; width:14px; height:14px; margin-right:8px; -webkit-border-radius:7px; border-radius:7px; vertical-align:-2px; } .hintbar .r { background:#e0364b; } .hintbar .g { background:#1fa85c; } .hintbar .y { background:#e0b41e; } .hintbar .b { background:#0097A7; } /* ---------- панели ---------- */ .panel { position:absolute; background:#12171A; border:1px solid #2C363B; -webkit-border-radius:14px; border-radius:14px; overflow:hidden; } /* Заглавието на колоната: в приложението е GuideTextAccent и получер, а под него минава черта 2px в цвят 0x99000000 (CategoriesPanel и ChannelColumn в TvGuideSection.kt). Тук беше сиво с тънка сива черта. */ .panel .head { position:absolute; left:0; top:0; width:100%; height:44px; line-height:44px; padding:0 18px; font-size:17px; font-weight:bold; color:#26C6DA; border-bottom:2px solid rgba(0,0,0,.60); } /* ---------- редове в списък ---------- */ .list { position:absolute; left:0; top:0; width:100%; } /* БЕЗ overflow:hidden. Заедно със заоблените ъгли той кара стария WebKit на MAG да рисува реда в отделен слой и при местене под текста оставаше черна ивица. Текстът и без това се реже сам (всеки надпис си има overflow), така че тук няма какво да прелее. */ .row { position:absolute; left:8px; right:8px; height:54px; -webkit-border-radius:10px; border-radius:10px; } .row .no { position:absolute; left:12px; top:16px; width:52px; font-size:17px; color:#7C888E; text-align:right; } .row .lg { position:absolute; left:76px; top:11px; width:46px; height:32px; overflow:hidden; } .row .lg img { max-width:46px; max-height:32px; } .row .lg .ini { z-index:1; } .row .nm { position:absolute; left:134px; top:15px; right:44px; font-size:20px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .row .sub { position:absolute; left:134px; top:32px; right:44px; font-size:15px; color:#7C888E; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .row.nolg .nm, .row.nolg .sub { left:76px; } .row.nono .nm, .row.nono .sub { left:18px; } .row.two .nm { top:6px; } /* Редовете с канали са по-високи (9 на екран, както в приложението) — текстът и логото се смъкват, за да стоят по средата, вместо да са залепени горе. */ /* Редът на канала — разположението е от ChannelRow в приложението: лого 38x38 със заоблени 4px, отстояние 12, после текстовата колона; номерът е В РЕДА С ИМЕТО, не в отделна колона вляво; лентата на прогреса е 2px под текста, по цялата ширина на колоната. */ .row.ch2 { -webkit-border-radius:6px; border-radius:6px; } .row.ch2 .no { display:none; } .row.ch2 .lg { left:14px; top:4px; width:61px; height:61px; -webkit-border-radius:4px; border-radius:4px; } .row.ch2 .lg img { max-width:61px; max-height:61px; } .row.ch2 .nm { left:87px; right:46px; top:13px; } .row.ch2 .sub { left:87px; right:46px; top:36px; } .row.ch2 .rpb { left:87px; right:46px; bottom:12px; } .row.ch2 .arc { top:14px; } .row.ch2 .fav { top:30px; } .row .fav { position:absolute; right:16px; top:22px; width:10px; height:10px; -webkit-border-radius:5px; border-radius:5px; } .row .lk { position:absolute; right:34px; top:17px; font-size:14px; color:#93A0A6; } /* само на редовете със знак за запис .lk се дръпва, за да не се застъпят. Преди го местех навсякъде и заедно с това се разместиха „Гледай на запис" и баджът LIVE в колоната с програмата, където няма такъв знак. */ .row.arch .lk { right:54px; } /* Знак за канал със запис (архив). Рисува се като картинка, а НЕ като знак от шрифта: на телевизорите (Samsung със StbEmu) шрифтът няма кръговата стрелка и вместо нея излизаше черно квадратче. Картинката е вградена в стила, тежи под килобайт и се показва еднакво навсякъде. */ /* Знакът за запис е СЪЩИЯТ като в приложението — буквата ⟲ (U+27F2). Там е изписана направо с шрифта: Text("⟲"). Тук е изчертана от шрифт и вградена като картинка, защото на телевизорите със StbEmu тази буква липсва в системния шрифт и вместо нея излизаше черно квадратче. Тоест знакът е един и същ, само пътят до екрана е различен. — същият знак, който ползва и приложението (⟲), но като картинка, а не като буква от шрифта. На телевизорите със StbEmu този знак липсва в шрифта и вместо него излизаше черно квадратче. Картинката е нарисувана на четворен размер и смалена, за да са гладки ръбовете; тежи под килобайт. */ .row .arc { position:absolute; right:24px; top:6px; width:20px; height:20px; -webkit-background-size:20px 20px; background-size:20px 20px; background-repeat:no-repeat; background-position:0 0; background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAACBklEQVR42tVUvWsUQRT/zc59VCpCxEJBziogImKhRfCDNCkFa0kjKtgoWIiltbX/gJVrr5Bmr7ARjIUWd67E3O7t7M7u7MdtLhf0dm+fhXvhMJe7hFR5MAzMe/Pe7/3eB3DshYiYruuciHh5s6M444d5B4DKDGcaY2yk6zq/tbxyIxtm56q1qnjzbf0zYywv9cWBkOklAteP78toyxUyTi1XOcJP0iDe8lw/Xp2HdJevsZEl/BdROiAZpM/abbFARFpbiAUZpk+jdEBdGb6cDD5THCe5GqY7ZLvBzWn6jiOXw96ALFddG9OzN01d57aML/9DF7y1HPmeiPimUIsl8vGpAYAt1AfbVe8AwCDarYU2GYFG+artqjXG2CVerSW2q9Y5sFjaMsYYNYGCiLQCxUeArgDAbWA0taolutc7GZHw48wW6u7/KRkGVYhIsz31xBLqx5j7PW2jaVpRtsLzrheH2TD7evHC2TWTqA5gOPFRY4zlllArDPgOAM0mOIB83/4DANM0652O15hmYwl/KewN6FfXuz7mf+Z0EBHvuuG9MOn/kar3sNVqnQCALxsbp6TqPQp7/cLy1Ku5ziZREhGzZfQgiLd9IaPIFmpTyCgJ4m3lyOjxfj04d9BN06yfPH1mKc9G51GriJ/95NOdRuP3oUbvKMvhQOuLiLhhGJWSX3a8F/JfQFB5LQspTqwAAAAASUVORK5CYII=); } /* Иконата за запис остава СВЕТЛАТА и на маркирания ред. Тук се подменяше с тъмен вариант, за да пасне на тъмния текст — а той вече е бял, така че тъмната икона се губеше върху акцента. */ .row.arch .nm, .row.arch .sub { right:56px; } /* Избраният ред, когато колоната НЕ е на фокус: тон от акцента, а не тъмносиво. Тъмното личеше като черна лента зад предаването, докато курсорът се мести. */ .row.sel { background:rgba(0,151,167,.28); } /* Текстът в маркирания ред е БЯЛ, не тъмен. В приложението (ChannelRow, TvGuideSection.kt): onColor = highlighted -> Color.White subColor = highlighted -> Color(0xFFEAEAEA) Тъмният текст там се ползва само в прозрачната тема с бяла кутия. */ .row.foc { background:#0097A7; color:#FFFFFF; } /* Предаването под името на канала е в СЪЩИЯ цвят като името. В приложението то е малко по-бледо (#EAEAEA), но върху акцента разликата само мътни реда вместо да го подрежда. */ .row.foc .no, .row.foc .lk, .row.foc .sub { color:#FFFFFF; } /* ред в настройките: рамка + шеврон, както в Hit TV (Настройки) — фокусът е контур + леко оцветен фон, а не плътно запълване като другаде. */ /* Ред в настройките — по мерките на SettingsMenuRow: кант 1px (2px и в акцента на фокус), заоблени 8, отстъп 13 отстрани, по-нисък ред. */ .row.set { border:1px solid #2C363B; height:46px; -webkit-border-radius:8px; border-radius:8px; } .row.set .nm { left:13px; right:230px; top:12px; font-size:19px; } .row.set .lk { left:auto; right:34px; top:14px; width:190px; text-align:right; font-size:17px; } .row.set:after { content:'›'; position:absolute; right:13px; top:9px; font-size:22px; color:#93A0A6; } /* Избраният ред в настройките: белият текст важи и за СТОЙНОСТТА вдясно — тя беше сива и на телевизор изглеждаше изключена. */ .row.set.sel { background:rgba(0,151,167,.22); } /* Фонът на избрания ред е АКЦЕНТЪТ на 22%, кантът е 2px — в приложението: background(accent.copy(alpha = 0.22f)), border(2.dp). */ .row.set.foc { background:rgba(0,151,167,.22); color:#FFFFFF; border:2px solid #0097A7; } .row.set.foc .nm { color:#FFFFFF; } .row.set.foc .lk { color:#FFFFFF; } .row.set.foc .no, .row.set.foc .sub { color:#B0B6C0; } .row.set.foc:after { color:#0097A7; } html.t-teal .row.set.foc { border-color:#185F68; } html.t-azure .row.set.foc { border-color:#1E88E5; } html.t-green .row.set.foc { border-color:#2E9E5B; } html.t-amber .row.set.foc { border-color:#C98A00; } html.t-coral .row.set.foc { border-color:#E85D4A; } html.t-pink .row.set.foc { border-color:#D81B60; } html.t-violet .row.set.foc { border-color:#7E57C2; } html.t-gray .row.set.foc { border-color:#5C7382; } html.t-teal .row.set.foc:after { color:#185F68; } html.t-azure .row.set.foc:after { color:#1E88E5; } html.t-green .row.set.foc:after { color:#2E9E5B; } html.t-amber .row.set.foc:after { color:#C98A00; } html.t-coral .row.set.foc:after { color:#E85D4A; } html.t-pink .row.set.foc:after { color:#D81B60; } html.t-violet .row.set.foc:after { color:#7E57C2; } html.t-gray .row.set.foc:after { color:#5C7382; } /* скролбар */ .sb { position:absolute; right:3px; width:4px; background:#171D21; -webkit-border-radius:2px; border-radius:2px; } .sb i { position:absolute; left:0; width:4px; background:#4A575D; -webkit-border-radius:2px; border-radius:2px; } /* ---------- начален екран ---------- */ .tile { position:absolute; width:228px; height:250px; background:#12171A; border:1px solid #2C363B; -webkit-border-radius:16px; border-radius:16px; } .tile .cap { position:absolute; left:22px; bottom:22px; font-size:25px; font-weight:bold; } .tile .cap2 { position:absolute; left:22px; bottom:70px; right:16px; font-size:15px; color:#7C888E; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .tile .mark { position:absolute; left:22px; top:26px; width:56px; height:8px; -webkit-border-radius:4px; border-radius:4px; background:#2C363B; } .tile.foc { border-color:#0097A7; background:#152227; } .tile.foc .mark { background:#0097A7; } .strip { position:absolute; left:32px; top:400px; width:1216px; height:270px; } .strip .lbl { position:absolute; left:2px; top:0; font-size:18px; color:#93A0A6; } .card { position:absolute; top:32px; width:186px; height:230px; background:#12171A; border:1px solid #2C363B; -webkit-border-radius:12px; border-radius:12px; overflow:hidden; } .card .im { position:absolute; left:0; top:0; width:184px; height:172px; overflow:hidden; text-align:center; background:#0C1114; } .card .im img { max-width:184px; max-height:172px; } .card .cn { position:absolute; left:10px; right:10px; top:178px; font-size:16px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .card .cs { position:absolute; left:10px; right:10px; top:200px; font-size:14px; color:#7C888E; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .card.foc { border-color:#0097A7; } /* ---------- постер решетка ---------- */ .grid { position:absolute; } /* Плочка в решетката. Размерите вървят с решетката (tw/th в screen-vod.js): 150x196 — постер 150x150 и две реда за името отдолу. */ /* Постерът на филм е 2:3. Кутията беше КВАДРАТНА 150x150 и постерът стоеше смачкан в средата ѝ с ивици отстрани. Сега кутията е със същата форма като картинката: 116x174. */ .pt { position:absolute; width:116px; height:196px; } .pt .box { position:absolute; left:0; top:0; width:116px; height:174px; background:#232733; border:1px solid #232733; -webkit-border-radius:12px; border-radius:12px; overflow:hidden; text-align:center; } .pt .box img { width:114px; height:172px; } /* Празният постер е чист правоъгълник, както в приложението — името и без това стои отдолу под плочката. */ .pt .box .ph { display:none; } .pt .tx { position:absolute; left:1px; top:177px; width:114px; font-size:14px; line-height:18px; height:38px; overflow:hidden; } /* Избраният постер НЕ променя размера си. Големият постер горе вече показва избрания — ако и малкият расте, същият филм се уголемява на две места и редът подскача. Тук остават само кантът и по-ярък надпис. */ .pt.foc .box { border-color:#0097A7; border-width:2px; } .pt.foc .box img { width:112px; height:170px; } .pt.foc .tx { color:#FFFFFF; } /* Оценката: златна звезда + число, за да се чете от разстояние */ .pt .badge { position:absolute; right:6px; top:6px; height:24px; line-height:24px; padding:0 9px; font-size:15px; font-weight:bold; color:#FFFFFF; background:rgba(7,8,10,.86); -webkit-border-radius:12px; border-radius:12px; } .pt .badge .st { font-style:normal; color:#FFD75E; margin-right:5px; } /* ---------- детайли за филм/сериал ---------- */ .det { position:absolute; left:116px; top:96px; width:1132px; height:576px; } .det .pos { position:absolute; left:0; top:0; width:300px; height:444px; background:#12171A; border:1px solid #2C363B; -webkit-border-radius:14px; border-radius:14px; overflow:hidden; text-align:center; } .det .pos img { max-width:298px; max-height:442px; } /* .det е широк 1132px, а .inf започва на 340 — значи му остават 792, не 876. Със старата ширина описанието излизаше 52px извън екрана и краят на изречението се режеше от десния ръб. */ .det .inf { position:absolute; left:340px; top:0; width:792px; } .det .inf h1 { font-size:34px; line-height:40px; margin-bottom:10px; } .det .meta { font-size:17px; color:#93A0A6; margin-bottom:16px; line-height:24px; } .det .plot { font-size:18px; line-height:26px; color:#B4BEC3; height:180px; overflow:hidden; } .det .btns { position:absolute; left:340px; top:392px; height:52px; } .btn { position:absolute; height:52px; line-height:52px; padding:0 26px; font-size:19px; background:#171D21; border:1px solid #2C363B; -webkit-border-radius:26px; border-radius:26px; white-space:nowrap; } .btn.foc { background:#0097A7; border-color:#0097A7; color:#FFFFFF; } /* ---------- единен гид (INFO): канали | програма по дни | описание ---------- */ .guide { position:absolute; left:0; top:0; width:1280px; height:720px; } .row.hdr { background:transparent; } /* Разделителят по дни („ДНЕС", „Утре") е в АКЦЕНТНИЯ тон — в приложението заглавният ред е GuideLine.Header с color = GuideTextAccent. Тук беше сиво и на телевизор се четеше като бяло. */ .row.hdr .nm { top:18px; font-size:16px; font-weight:bold; color:#26C6DA; text-transform:uppercase; letter-spacing:1px; } .row.hdr.foc, .row.hdr.sel { background:transparent; } html.t-teal .row.hdr .nm { color:#4FB8C4; } html.t-azure .row.hdr .nm { color:#6BB1F2; } html.t-green .row.hdr .nm { color:#5FCB8A; } html.t-amber .row.hdr .nm { color:#F0B93D; } html.t-coral .row.hdr .nm { color:#FF8D7A; } html.t-pink .row.hdr .nm { color:#FF5C96; } html.t-violet .row.hdr .nm { color:#AC8CE8; } html.t-gray .row.hdr .nm { color:#93A9B6; } /* ---------- преглед + EPG ---------- */ /* Мястото на прозорчето с картината. Беше почти черно (#06080A) и когато колоните се плъзгат (ляв бутон отваря категориите), за миг се виждаше като черен правоъгълник под името на канала. Тонът е от акцента, за да не изпъква — картината така или иначе го покрива, щом тръгне. */ .pv { position:absolute; left:0; top:0; width:100%; height:246px; background:rgba(0,151,167,.16); border-bottom:1px solid #22292E; } .pv .ph { position:absolute; left:0; top:112px; width:100%; text-align:center; font-size:16px; color:#4A575D; } .epg { position:absolute; left:18px; right:18px; top:262px; } .epg .cn { font-size:24px; margin-bottom:12px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .epg .nowl { font-size:15px; color:#93A0A6; margin-bottom:4px; } .epg .now { font-size:19px; height:50px; overflow:hidden; line-height:25px; } .epg .nxt { font-size:17px; color:#93A0A6; height:46px; overflow:hidden; line-height:23px; } .bar { position:relative; height:6px; background:#2C363B; -webkit-border-radius:3px; border-radius:3px; margin:10px 0 14px 0; overflow:hidden; } .bar i { position:absolute; left:0; top:0; height:6px; background:#0097A7; } /* ---------- плейър оверлей ---------- */ #osd { position:absolute; left:0; top:0; width:1280px; height:720px; } /* Инфо лента като в приложението: без кутия върху видеото — номер, лого, име на канала, под тях предаването с часа, тънка лента на прогреса по цялата ширина и „Следва" най-долу. */ /* Фонът прелива от прозрачно горе към затъмнено долу. Преди скачаше на 78% чернота още на 14% от височината — тоест почти цялата лента беше плътно черна и картината под нея не се виждаше. Сега потъмняването е разтеглено по цялата височина и спира на 68%. */ /* Горе преливане, долу плътно. Първо беше преливане по цялата височина — текстът горе лежеше право върху картината и при светла сцена не се четеше. После вдигнах целия градиент и лентата стана равномерно сива. Сега е както трябва: горните 22% преливат от прозрачно, после бързо потъмнява и долу стига до 94% — там са прогресът и „Следва", те искат плътно. Сянката на текста остава за всеки случай. */ #osd .infobar { position:absolute; left:0; width:1280px; bottom:0; height:190px; border:none; -webkit-border-radius:0; border-radius:0; background:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(0.22, rgba(0,0,0,.42)), color-stop(0.55, rgba(0,0,0,.78)), to(rgba(0,0,0,.94))); background:linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.42) 22%, rgba(0,0,0,.78) 55%, rgba(0,0,0,.94)); } #osd .infobar .num, #osd .infobar .nm, #osd .infobar .pg, #osd .infobar .nx, #osd .infobar .tm, #osd .infobar .st { text-shadow:0 1px 3px rgba(0,0,0,.85); } /* Номерът на канала е в АКЦЕНТНИЯ цвят (color = primary в приложението), не бял — така личи веднага кой канал гледаш. */ #osd .infobar .num { position:absolute; left:26px; top:52px; font-size:42px; font-weight:bold; width:80px; text-align:center; color:#26C6DA; } #osd .infobar .lgo { position:absolute; left:114px; top:21px; width:154px; height:99px; overflow:hidden; } #osd .infobar .lgo .ini { position:absolute; left:0; top:0; width:154px; height:99px; line-height:99px; text-align:center; font-size:33px; font-weight:bold; color:#93A0A6; background:rgba(255,255,255,.08); -webkit-border-radius:8px; border-radius:8px; } /* името на канала е бяло и удебелено, а предаването — в акцентния цвят */ #osd .infobar .nm { position:absolute; left:284px; top:22px; right:40px; font-size:30px; font-weight:bold; color:#FFFFFF; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } #osd .infobar .pg { position:absolute; left:284px; top:66px; right:40px; font-size:24px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } /* в приложението няма часовник и брояч в лентата */ #osd .infobar .tm, #osd .infobar .st { display:none; } /* Във филма часовникът СЕ ВИЖДА — на живите канали той е горе вдясно на гида, но на цял екран във филм друг няма. Лентата вече върви до края, защото мястото, което ѝ се пазеше отдясно, стоеше празно. */ #osd.vod .infobar .tm { display:block; position:absolute; right:26px; top:20px; font-size:30px; font-weight:bold; color:#FFFFFF; } #osd.vod .infobar .st { display:block; position:absolute; right:26px; top:64px; font-size:22px; color:#FFD75E; } /* Всичко след логото е ЕДНА колона с общ ляв и десен ръб — име, предаване, лента и „Следва". В приложението (InfoBar в PlayerScreen.kt) те са в един Column(weight=1) до логото, тоест не могат да се разминат. Тук лентата и „Следва" бяха останали на 256, докато името и предаването се преместиха на 296 заедно с по-голямото лого — оттам идваше кривото подравняване. Следата е 0x40FFFFFF, тоест бяло на 25%. */ /* Следата е ПЛЪТНА (16.09.2026): с бялото на 25% незапълнената част пропускаше картината отзад. #45494D е същият тон върху тъмния фон. */ #osd .infobar .pbar { position:absolute; left:284px; right:40px; top:114px; height:3px; background:#45494D; overflow:hidden; } #osd .infobar .pbar i { position:absolute; left:0; top:0; height:3px; width:0; background:#0097A7; } #osd .infobar .nx { position:absolute; left:284px; right:40px; top:136px; font-size:20px; color:#B0B6C0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } html.t-teal #osd .infobar .pbar i { background:#185F68; } html.t-azure #osd .infobar .pbar i { background:#1E88E5; } html.t-green #osd .infobar .pbar i { background:#2E9E5B; } html.t-amber #osd .infobar .pbar i { background:#C98A00; } html.t-coral #osd .infobar .pbar i { background:#E85D4A; } html.t-pink #osd .infobar .pbar i { background:#D81B60; } html.t-violet #osd .infobar .pbar i { background:#7E57C2; } html.t-gray #osd .infobar .pbar i { background:#5C7382; } /* „ГЛЕДАТЕ НА ЗАПИС · −N мин" над името на канала (както в приложението: дребно, получерно, в акцентния цвят, с разредени букви) */ #osd .infobar .rec { position:absolute; left:284px; right:40px; top:2px; font-size:14px; font-weight:bold; letter-spacing:1px; color:#26C6DA; text-shadow:0 1px 3px rgba(0,0,0,.85); white-space:nowrap; } /* филм/епизод: постерът стои на мястото на номера и логото */ #osd.vodx .infobar .lgo { left:26px; top:14px; width:70px; height:104px; -webkit-border-radius:6px; border-radius:6px; background:rgba(255,255,255,.06); } #osd.vodx .infobar .lgo img { width:70px; height:104px; } #osd.vodx .infobar .nm, #osd.vodx .infobar .pg, #osd.vodx .infobar .pbar, #osd.vodx .infobar .nx, #osd.vodx .infobar .rec { left:114px; } #osd .zap { position:absolute; left:530px; top:280px; width:220px; height:110px; line-height:110px; text-align:center; font-size:62px; font-weight:bold; background:rgba(11,15,18,.90); -webkit-border-radius:16px; border-radius:16px; } #osd .busy { position:absolute; left:500px; top:330px; width:280px; height:60px; line-height:60px; text-align:center; font-size:20px; background:rgba(11,15,18,.80); -webkit-border-radius:12px; border-radius:12px; } #osd .side { position:absolute; left:810px; top:0; width:470px; height:720px; background:rgba(11,15,18,.94); border-left:1px solid #2C363B; } /* ---------- вход / полета ---------- */ .login { position:absolute; left:80px; top:104px; width:560px; } .login h1 { font-size:40px; margin-bottom:6px; } .login .sb2 { font-size:17px; color:#93A0A6; margin-bottom:26px; line-height:24px; } .fl { font-size:16px; color:#93A0A6; margin:0 0 6px 4px; } .field { position:relative; height:56px; line-height:56px; padding:0 16px; font-size:20px; background:#12171A; border:1px solid #2C363B; -webkit-border-radius:10px; border-radius:10px; margin-bottom:16px; overflow:hidden; white-space:nowrap; } .field.foc { border-color:#0097A7; background:#152227; } .field .cur { display:inline-block; width:2px; height:24px; background:#E7ECEE; vertical-align:-4px; } .field .ph { color:#4A575D; } /* ---------- екран за активация ---------- */ .actcode { font-size:104px; line-height:112px; font-weight:bold; letter-spacing:12px; margin:14px 0 6px; } .actstatus { font-size:24px; color:#93A0A6; margin-bottom:16px; } .actnote { font-size:21px; color:#B4BEC3; line-height:30px; } /* ---------- екранна клавиатура ---------- */ .kb { position:absolute; } .key { position:absolute; height:52px; line-height:52px; text-align:center; font-size:20px; background:#12171A; border:1px solid #2C363B; -webkit-border-radius:9px; border-radius:9px; overflow:hidden; } .key.foc { background:#0097A7; border-color:#0097A7; color:#FFFFFF; } .key.wide { font-size:15px; } /* ⇧ — стрелката е по-едра; докато главните са включени, копчето е с рамка и текст в цвета на акцента (фокусът пак е с пълен фон) */ .key.wide.shift { font-size:26px; } .key.shift.on { border:2px solid #26C6DA; color:#26C6DA; } .key.shift.on.foc { color:#FFFFFF; } /* ---------- настройки ---------- */ .srow { position:absolute; left:8px; right:8px; height:60px; -webkit-border-radius:10px; border-radius:10px; } .srow .k { position:absolute; left:20px; top:17px; font-size:20px; } .srow .v { position:absolute; right:20px; top:19px; font-size:18px; color:#93A0A6; } /* Избраното в настройките и в изскачащите списъци е с БЯЛ текст върху акцента — както в приложението, където onColor при highlighted е Color.White. Тъмният текст беше от старата схема. */ .srow.foc { background:#0097A7; color:#FFFFFF; } .srow.foc .v { color:#EAEAEA; } .sinfo { position:absolute; left:20px; right:20px; font-size:17px; color:#93A0A6; line-height:30px; } /* ---------- диалог ---------- */ .dlg { position:absolute; left:340px; top:150px; width:600px; background:#12171A; border:1px solid #2C363B; -webkit-border-radius:16px; border-radius:16px; padding:26px; } .dlg h2 { font-size:26px; margin-bottom:12px; } .dlg p { font-size:18px; color:#B4BEC3; line-height:26px; margin-bottom:20px; } .dlg .opt { height:52px; line-height:52px; padding:0 18px; font-size:20px; -webkit-border-radius:10px; border-radius:10px; margin-bottom:4px; overflow:hidden; white-space:nowrap; } .dlg .opt.foc { background:#0097A7; color:#FFFFFF; } .dnav { text-align:center; font-size:16px; color:#93A0A6; height:26px; line-height:26px; margin-top:6px; } .dlg .pin { text-align:center; font-size:44px; letter-spacing:16px; height:70px; line-height:70px; } /* екранната клавиатура за PIN: 3 колони по 4 реда, центрирана. Бутоните са .opt — така фокусът взима цвета на акцента от темата. */ .dlg .kp { width:372px; margin:6px auto 0; overflow:hidden; } .dlg .kpk { float:left; width:116px; height:56px; line-height:56px; margin:0 4px 6px 4px; padding:0; text-align:center; font-size:26px; background:#1A2125; } /* фокусът: същата тежест като .dlg .kpk, но по-късно — а цветните теми (html.t-… .dlg .opt.foc) са по-тежки и си взимат своя цвят */ .dlg .opt.foc { background:#0097A7; color:#FFFFFF; } /* ---------- съобщения ---------- */ /* ---------- показалец на звука ---------- Излиза долу в средата при бутоните за звук и се скрива сам. Лентата ползва .bar i, затова се оцветява от избраната тема като всичко останало. */ /* СЛОЕВЕ. Лентата за звука, съобщенията и диалозите трябва да са НАД всичко, което рисува екранът. Досега нямаха зададен слой и оставаха под екрана на радиото (.rstage е на 6) — звукът се променяше, но лентата не се виждаше. Лентата с иконите е на 5, радиото на 6, тези тук отгоре. */ #vol { position:absolute; left:390px; bottom:44px; width:500px; height:64px; display:none; background:rgba(18,23,26,.96); border:1px solid #2C363B; -webkit-border-radius:10px; border-radius:10px; z-index:30; } #vol.on { display:block; } #vol .sp { position:absolute; left:22px; top:21px; font-size:19px; color:#C2CCD1; white-space:nowrap; } #vol .pc { position:absolute; right:22px; top:20px; font-size:21px; font-weight:bold; text-align:right; } #vol .bar { position:absolute; left:96px; right:86px; top:29px; height:6px; background:#3D4246; /* плътна следа — картината да не прозира */ -webkit-border-radius:3px; border-radius:3px; overflow:hidden; } #vol .bar i { display:block; height:6px; background:#0097A7; } /* при изключен звук думите заемат целия ред, лентата се скрива */ #vol.mut .bar { display:none; } #vol.mut .sp { left:0; right:0; top:21px; text-align:center; color:#E7ECEE; } #toast { position:absolute; left:380px; bottom:78px; width:520px; z-index:30; text-align:center; display:none; } #toast span { display:inline-block; padding:13px 26px; font-size:19px; background:rgba(11,15,18,.94); border:1px solid #2C363B; -webkit-border-radius:26px; border-radius:26px; } #toast.on { display:block; } /* съобщение с кадър при превъртане */ #toast span.tt { padding:10px 10px 12px; } #toast .tt img { display:block; width:320px; height:180px; margin:0 auto 10px; background:#000; -webkit-border-radius:16px; border-radius:16px; } #toast .tt img.old { opacity:.45; } #toast .tt em { font-style:normal; } .center { position:absolute; left:84px; top:320px; width:1196px; text-align:center; font-size:20px; color:#93A0A6; } /* ---------- дебъг конзола ---------- */ #dbg { position:absolute; left:0; top:0; width:1280px; height:720px; background:rgba(0,0,0,.92); font-size:14px; line-height:18px; padding:16px; overflow:hidden; display:none; color:#9be08a; font-family:monospace; } #dbg.on { display:block; } /* ---------- размер на текста (Настройки → Размер на текста) ---------- */ html.fs-s .row .nm { font-size:18px; } html.fs-s .row .sub { font-size:14px; } html.fs-s .pt .tx { font-size:15px; } html.fs-s .epg .now { font-size:18px; } html.fs-s .srow .k, html.fs-s .row.set .lk { font-size:18px; } html.fs-l .row .nm { font-size:23px; } html.fs-l .row .sub { font-size:17px; } html.fs-l .pt .tx { font-size:18px; line-height:22px; } html.fs-l .epg .now { font-size:21px; line-height:27px; } html.fs-l .epg .nxt { font-size:19px; } html.fs-l .srow .k, html.fs-l .row.set .lk { font-size:22px; } html.fs-l .tile .cap { font-size:27px; } /* ---------- кръгче с инициали вместо липсващо лого ---------- */ .row .lg .ini { position:absolute; left:0; top:0; width:40px; height:32px; line-height:32px; text-align:center; font-size:14px; font-weight:bold; color:#93A0A6; background:#171D21; -webkit-border-radius:8px; border-radius:8px; } .row.foc .lg .ini { background:rgba(255,255,255,.20); color:#ffffff; } /* проба дали кутията изобщо рисува картинки (Настройки, дясната колона) */ /* ---------- вид на лентата на плейъра ---------- */ html.bar-solid #osd .infobar { background:#0C1114; border-color:#2C363B; } /* „Стъкло" = преливането от приложението (виж #osd .infobar по-горе) */ /* Без фон: само текст със сянка — за образи, които не смесват прозрачност */ html.bar-none #osd .infobar { background:transparent; border-color:transparent; } html.bar-none #osd .infobar div, html.bar-none #osd .infobar .num, html.bar-none #osd .infobar .nm, html.bar-none #osd .infobar .pg, html.bar-none #osd .infobar .tm, html.bar-none #osd .infobar .st, html.bar-none #osd .infobar .nx { text-shadow:0 2px 5px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.9); } html.bar-none #osd .infobar .pbar { background:#45494D; } html.bar-none #osd .zap, html.bar-none #osd .busy { background:rgba(0,151,167,.28); } /* ---------- начален екран: ляво меню като в Android TV приложението ---------- */ .nav { position:absolute; left:32px; top:96px; width:322px; height:520px; } .navit { position:absolute; left:0; width:322px; height:58px; line-height:58px; padding:0 22px; font-size:23px; color:#C6CFD3; -webkit-border-radius:12px; border-radius:12px; } .navit.sel { background:#171D21; color:#E7ECEE; } .navit.foc { background:#0097A7; color:#FFFFFF; font-weight:bold; } html.t-teal .navit.foc { background:#185F68; } html.t-azure .navit.foc { background:#1E88E5; } html.t-green .navit.foc { background:#2E9E5B; } html.t-amber .navit.foc { background:#C98A00; } html.t-coral .navit.foc { background:#E85D4A; } html.t-pink .navit.foc { background:#D81B60; } html.t-violet .navit.foc { background:#7E57C2; } html.t-gray .navit.foc { background:#5C7382; } .sectlbl { position:absolute; font-size:19px; color:#93A0A6; } /* Същата форма като в решетката с филмите: постерът е 2:3, а не легнал правоъгълник. Тук стояха филмови постери в кутия 202x170 и се смачкваха по същия начин, както преди в решетката. */ .card2 { position:absolute; width:121px; height:245px; background:#12171A; border:1px solid #2C363B; -webkit-border-radius:12px; border-radius:12px; overflow:hidden; } .card2 .im { position:absolute; left:0; top:0; width:119px; height:179px; overflow:hidden; text-align:center; background:#232733; } .card2 .im img { width:119px; height:179px; } .card2 .im .ph { position:absolute; left:6px; top:74px; width:107px; font-size:13px; color:#4A575D; line-height:17px; } .card2 .cn { position:absolute; left:6px; right:6px; top:186px; font-size:15px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .card2 .cs { position:absolute; left:6px; right:6px; top:210px; font-size:13px; color:#7C888E; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .card2.foc { border-color:#0097A7; background:#152227; } html.t-teal .card2.foc { border-color:#185F68; } html.t-azure .card2.foc { border-color:#1E88E5; } html.t-green .card2.foc { border-color:#2E9E5B; } html.t-amber .card2.foc { border-color:#C98A00; } html.t-coral .card2.foc { border-color:#E85D4A; } html.t-pink .card2.foc { border-color:#D81B60; } html.t-violet .card2.foc { border-color:#7E57C2; } html.t-gray .card2.foc { border-color:#5C7382; } /* съобщението за грешка при вход може да е дълго — да се събира на редове */ .login .actstatus { white-space:normal; line-height:28px; max-width:560px; font-size:18px; } /* ---------- „Прозрачна" гид-тема: живото видео пълни фона зад полупрозрачните панели на телевизионния екран, вместо малко прозорче (както в Hit TV — Настройки → Изглед на гида → Прозрачна с видео) ---------- */ .vid .panel { background:rgba(6,8,9,0.80); border-color:rgba(44,54,59,0.5); } .vid .panel .head { background:transparent; border-bottom-color:rgba(34,41,46,0.6); } .vid .topbar { background:rgba(6,8,9,0.55); } .vid .hintbar { background:rgba(6,8,9,0.55); } .vid .navit.sel { background:rgba(23,29,33,0.75); } /* ---------- телевизия като в приложението: без ленти, прозрачни колони, етикети горе, плаваща инфо карта ---------- Прозрачностите са същите като в Hit TV (GuideThemeVideo): фон на екрана #060809 при 40%, панелите — при 60%, а колоната с програмата избледнява надясно към чистото видео. */ /* Фонът на колоните: 80% в плътната тема, 48% върху видео — стойностите, които клиентът поиска („с 20% по-прозрачен"). Веднъж ги бях вдигнал по своя преценка заради четимостта; това е негово решение, не мое. */ .panel.bare { background:rgba(10,12,14,.80); border:none; -webkit-border-radius:0; border-radius:0; } /* заглавията над колоните („Категории", името на канала) са в акцентния цвят и по-едри — както в приложението */ /* Чертата под заглавието я има и в приложението — 2px в 0x99000000 (ChannelColumn). Тук беше изключена и заглавието висеше без разделител. */ .panel.bare .head { background:transparent; border-bottom:2px solid rgba(0,0,0,.60); font-size:22px; color:#26C6DA; height:46px; line-height:46px; } /* Панелите вече започват от самия връх на екрана, затова заглавията им се свалят поотделно там, където стояха преди — всяко със своя отстъп. */ /* Заглавието „Категории" се вдига над списъка, защото той вече тръгва от 64 — колкото и този с каналите. */ .panel.cats .head { top:18px; } .head.gph { top:20px; } html.t-teal .panel.bare .head { color:#4FB8C4; } html.t-azure .panel.bare .head { color:#6BB1F2; } html.t-green .panel.bare .head { color:#5FCB8A; } html.t-amber .panel.bare .head { color:#F0B93D; } html.t-coral .panel.bare .head { color:#FF8D7A; } html.t-pink .panel.bare .head { color:#FF5C96; } html.t-violet .panel.bare .head { color:#AC8CE8; } html.t-gray .panel.bare .head { color:#93A9B6; } /* избраният ред, докато колоната НЕ е на фокус — светъл воал, не тъмен */ /* Върху видео избраният ред също е в акцентен тон, не бял воал — така при плъзгане на колоните под предаването не остава чужд правоъгълник. */ .vid .row.sel { background:rgba(0,151,167,.30); } /* Плаващата карта: цветът и ъглите са от ProgramInfoCard (0xCC12151C, радиус 10), но прозрачността е свалена от 80% на 58% по желание — така картината зад нея се вижда, вместо да стои плътен блок. */ .panel.card { background:rgba(18,21,28,.46); border:none; -webkit-border-radius:10px; border-radius:10px; } /* Върху видео картата е прозрачна на 30%, тоест черното ѝ е на 70% — по-плътна от колоните (те са на 60%), за да се чете описанието. Формата ѝ (заоблена, плаваща) не се пипа. */ .vid .panel.card { background:rgba(6,8,9,.40); } /* старият .card .cn (за плочките) не бива да пипа заглавието в тази карта */ .panel.card .epg .cn { position:static; left:auto; right:auto; top:auto; font-size:23px; font-weight:bold; margin-bottom:10px; /* до два реда, както в приложението — дългите имена не се режат на един */ white-space:normal; line-height:27px; max-height:54px; overflow:hidden; } /* часът вляво, времетраенето вдясно — както в инфо картата на приложението */ .panel.card .epg .now { height:auto; line-height:22px; font-size:18px; color:#C2CCD1; margin-bottom:10px; } .panel.card .epg .now .lft { float:left; } .panel.card .epg .now .rgt { float:right; } /* Описанието: до 5 реда, както в приложението. Точната височина се задава от guideSide() след като текстът е сложен — иначе картата или реже края, или зее празна при кратко описание. */ .panel.card .epg .nxt { clear:both; height:auto; font-size:17px; color:#D3D7DE; line-height:23px; color:#C2CCD1; white-space:normal; overflow:hidden; } /* тясната колона с дните — вижда се само докато сме в програмата */ .row.dte .nm { left:8px; right:6px; top:14px; font-size:13px; white-space:normal; line-height:16px; color:#FFFFFF; } /* Избраният ден е КОНТУР, не запълнен — както в DatesColumn: border(width = if (sel) 2.dp, color = accent), radius 6. */ .row.dte.foc { background:transparent; border:2px solid #0097A7; -webkit-border-radius:6px; border-radius:6px; } .row.dte.foc .nm { color:#FFFFFF; font-weight:bold; } .row.dte.sel { background:transparent; } html.t-teal .row.dte.foc { border-color:#185F68; } html.t-azure .row.dte.foc { border-color:#1E88E5; } html.t-green .row.dte.foc { border-color:#2E9E5B; } html.t-amber .row.dte.foc { border-color:#C98A00; } html.t-coral .row.dte.foc { border-color:#E85D4A; } html.t-pink .row.dte.foc { border-color:#D81B60; } html.t-violet .row.dte.foc { border-color:#7E57C2; } html.t-gray .row.dte.foc { border-color:#5C7382; } /* ---------- голям постер и описание над решетката (както в Hit TV) ---------- */ /* Голямата картина заема горната част на екрана, а отдолу стои САМО ЕДИН ред малки постери. Така първият екран тегли шепа картинки вместо две дузини — зарежда се бързо и не подскача, докато се напълва. */ .vhero { position:absolute; left:114px; top:56px; right:32px; height:352px; } /* Фонът на постера е същият като в приложението (#232733) — по-светло и синкаво от панелите, без рамка. */ .vhero .hpos { position:absolute; left:0; top:0; width:234px; height:351px; background:#232733; overflow:hidden; -webkit-border-radius:10px; border-radius:10px; } .vhero .hpos img { width:234px; height:351px; } .vhero .hpos .ph { display:none; } /* Оценката като значка върху голямия постер — същата като на малките, само по-едра, за да отговаря на размера му. */ .vhero .hpos .badge { position:absolute; right:10px; top:10px; z-index:2; height:32px; line-height:32px; padding:0 12px; font-size:19px; font-weight:bold; color:#FFFFFF; background:rgba(0,0,0,.72); -webkit-border-radius:16px; border-radius:16px; } .vhero .hpos .badge .st { font-style:normal; color:#FFD75E; margin-right:6px; } .vhero .hinf { position:absolute; left:262px; top:0; right:0; height:351px; overflow:hidden; } .vhero .ht { font-size:36px; font-weight:bold; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .vhero .hm { margin-top:12px; font-size:19px; color:#26C6DA; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } /* звездата свети в златно, „/10" е дребно и приглушено, точките разделят */ .vhero .hm .st { font-style:normal; color:#FFD75E; margin-right:5px; } .vhero .hm .of { font-style:normal; font-size:15px; color:#8A949B; } .vhero .hm .sep { font-style:normal; color:#5A666D; margin:0 12px; } .vhero .hp { margin-top:16px; font-size:18px; line-height:26px; color:#C2CCD1; height:96px; overflow:hidden; } html.t-teal .vhero .hm { color:#4FB8C4; } html.t-azure .vhero .hm { color:#6BB1F2; } html.t-green .vhero .hm { color:#5FCB8A; } html.t-amber .vhero .hm { color:#F0B93D; } html.t-coral .vhero .hm { color:#FF8D7A; } html.t-pink .vhero .hm { color:#FF5C96; } html.t-violet .vhero .hm { color:#AC8CE8; } html.t-gray .vhero .hm { color:#93A9B6; } /* воалът върху видеото — целият екран на телевизията */ .vid { position:absolute; left:0; top:0; width:1280px; height:720px; background:rgba(6,8,9,.40); } /* Всички колони на гида са с ЕДИН фон — категории, канали, програма и дни. Различните плътности отпреди правеха от тях четири отделни плочи, а в приложението е една обща повърхност. */ /* ВСИЧКИ колони на гида, включително тази с каналите. Тя нямаше свой ред и попадаше под общото .panel.bare (прозрачно), затова стоеше по-светла от останалите — точно това се виждаше като разлика между колоните. */ .vid .panel.bare { background:rgba(6,8,9,.60); } /* Само най-дясната видима колона избледнява надясно към чистото видео. Кой е този панел се задава от layout() (клас .fade), защото се мени според това коя колона се вижда. */ .vid .panel.fade { background:-webkit-gradient(linear, left top, right top, from(rgba(6,8,9,.80)), color-stop(0.72, rgba(6,8,9,.80)), to(rgba(6,8,9,.02))); background:linear-gradient(to right, rgba(6,8,9,.80) 0%, rgba(6,8,9,.80) 72%, rgba(6,8,9,.02) 100%); } .lvcat { position:absolute; left:36px; top:20px; font-size:26px; font-weight:bold; color:#E7ECEE; z-index:2; } .lvdate { position:absolute; right:36px; top:24px; font-size:20px; color:#C2CCD1; z-index:2; } /* Тънката лента на прогреса под „сега върви" на реда — както в приложението: започва под текста и стига почти до края на реда. */ .row .rpb { position:absolute; left:134px; right:26px; bottom:6px; height:2px; background:rgba(255,255,255,.18); overflow:hidden; } .row .rpb i { display:block; height:2px; width:0; background:#0097A7; } .row.nolg .rpb { left:76px; } .row.nono .rpb { left:18px; } html.t-teal .row .rpb i { background:#185F68; } html.t-azure .row .rpb i { background:#1E88E5; } html.t-green .row .rpb i { background:#2E9E5B; } html.t-amber .row .rpb i { background:#C98A00; } html.t-coral .row .rpb i { background:#E85D4A; } html.t-pink .row .rpb i { background:#D81B60; } html.t-violet .row .rpb i { background:#7E57C2; } html.t-gray .row .rpb i { background:#5C7382; } /* В приложението следата е 0x33FFFFFF, а пълнежът е GuideTextAccent — и БЯЛ, когато редът е на фокус. Тук пълнежът беше тъмен, останало от времето, когато текстът върху акцента беше тъмен. */ .row .rpb { background:rgba(255,255,255,.20); } .row .rpb i { background:#26C6DA; } .row.foc .rpb { background:rgba(255,255,255,.30); } .row.foc .rpb i { background:#FFFFFF; } /* Темите задаваха цвят на „html.t-X .row .rpb i", което е по-силно от „.row.foc .rpb i" и печелеше — затова лентата в маркирания ред оставаше в тъмния цвят на темата вместо бяла. Тук се изравнява за всяка тема. */ html.t-teal .row.foc .rpb i, html.t-azure .row.foc .rpb i, html.t-green .row.foc .rpb i, html.t-amber .row.foc .rpb i, html.t-coral .row.foc .rpb i, html.t-pink .row.foc .rpb i, html.t-violet .row.foc .rpb i, html.t-gray .row.foc .rpb i { background:#FFFFFF; } html.t-teal .row.foc .rpb, html.t-azure .row.foc .rpb, html.t-green .row.foc .rpb, html.t-amber .row.foc .rpb, html.t-coral .row.foc .rpb, html.t-pink .row.foc .rpb, html.t-violet .row.foc .rpb, html.t-gray .row.foc .rpb { background:rgba(255,255,255,.30); } /* Предаването под името на канала е обвито в .acc-tx. Това правило го правеше тъмно при фокус — остатък от времето, когато текстът върху акцента беше тъмен. Сега е бял, като името. */ .row.foc .acc-tx { color:#FFFFFF; } /* редовете на програмата: час | заглавие | действие вдясно */ .row.prg .no { width:60px; top:11px; font-size:18px; } /* Заглавието заема ЦЯЛОТО останало място. Място за надписа вдясно се пази само на редовете, които наистина имат такъв — в приложението това е Text(weight = 1f) и следващият елемент взима колкото му трябва. Преди резервът важеше за всеки ред и заглавията се режеха без причина. */ .row.prg .nm { left:80px; right:12px; top:10px; font-size:19px; } .row.prg.haslk .nm { right:148px; } /* „Гледай на запис" е по-дребен от заглавието, както в приложението (11sp срещу 14sp) — така колоната остава 31% и текстът пак се събира. */ .row.prg .lk { left:auto; right:12px; top:12px; width:auto; font-size:14px; } /* Избраният ред в ПРОГРАМАТА е само контур, без запълване. В приложението (TvGuideSection.kt, реда на предаването): // Selected = outline only, no fill. .border(width = if (sel) 2.dp else 0.dp, color = if (sel) accent ...) Тук той наследяваше плътния акцентен фон на каналите и се получаваше голямо цветно петно, каквото в приложението няма. Колоната с каналите си остава запълнена — там наистина е запълнена и в приложението. */ /* С #screen отпред — иначе правилата за темите (html.t-… .row.foc) са по-силни и запълваха реда с цвета на темата, а текстът в акцент ставаше нечетим върху него (16.09.2026). Рамката взима цвета на темата от генерирания блок в края. */ .row.prg.foc, #screen .row.prg.foc { background:transparent; color:#E8EAED; border:2px solid #0097A7; -webkit-border-radius:4px; border-radius:4px; } .row.prg.foc .no { color:#93A0A6; } #screen .row.prg.foc .no { color:#93A0A6; } .row.prg.foc .nm { color:#E8EAED; } .row.prg.foc .acc-tx { color:#26C6DA; } .row.prg.sel, #screen .row.prg.sel { background:transparent; } /* „НА ЖИВО" — бял текст в бял контур, дребен и получер. */ .row.prg .livebd { font-size:12px; font-weight:bold; color:#FFFFFF; border:1px solid #FFFFFF; -webkit-border-radius:4px; border-radius:4px; padding:1px 6px; } .livebd { display:inline-block; border:1px solid #E7ECEE; padding:1px 9px; font-size:13px; color:#E7ECEE; -webkit-border-radius:4px; border-radius:4px; } .row.foc .livebd { border-color:#FFFFFF; color:#FFFFFF; } /* заглавието на програмната колона: лого + име */ .head.gph { height:46px; line-height:46px; font-size:21px; color:#E7ECEE; } .head.gph .ghlg { position:absolute; left:18px; top:9px; width:40px; height:28px; } .head.gph .ghlg img { position:absolute; } .head.gph .ghnm { position:absolute; left:70px; top:0; right:12px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-weight:bold; } /* ---------- постоянна лява лента (като в Hit TV) ---------- Прибрана: тясна колонка само с икони. Разгъната (ЛЯВО от категориите): застава ВЪРХУ екрана с икона + надпис, плюс „Рестартирай" и „Изход" — както в приложението. */ /* Тясната лента е само икони върху тъмна ивица — без кутийки около тях; само текущият (или избраният) раздел е с плътен акцентен фон, точно както в приложението. */ /* Лентата с иконите е със СЪЩИЯ фон като колоната до нея — иначе се вижда като отделна по-тъмна ивица вляво. Стойностите вървят заедно с фона на колоните: 80% в плътната тема, 60% върху видео. */ #rail { position:absolute; left:0; top:0; width:76px; height:720px; background:rgba(10,12,14,.80); border-right:none; display:none; z-index:5; } #rail.on { display:block; } /* Разгъната лентата е 232, както menuExpanded в приложението (свитата е 76 и там, и тук). */ #rail.open { width:232px; background:rgba(10,12,14,.80); } /* В гида под лентата вече минава общата подложка. Ако лентата рисува и свой фон, двата се събират и вляво излиза по-тъмна ивица — затова там тя е прозрачна и се вижда подложката, същата като на колоните. */ #rail.flat, #rail.flat.open, #rail.flat.vid, #rail.flat.vid.open { background:transparent; } /* Върху видео лентата е част от същата полупрозрачна повърхност като колоните. Класът се слага от екрана с телевизията, а НЕ се разчита на състоянието на плейъра — иначе при част от пусканията оставаше без фон и иконите увисваха право върху картината. Тук лентата стои САМА върху картината — това е менюто, отворено с НАЗАД от цял екран. Вдясно от нея няма друга колона, а чисто видео, затова десният ѝ край избледнява вместо да реже с права линия. Същият похват като при най-дясната колона в гида (.panel.fade по-горе). В гида това правило не важи: там лентата носи и flat, а #rail.flat.vid тежи повече и я оставя прозрачна — под нея минава общата подложка. */ #rail.vid, #rail.vid.open { background:rgba(6,8,9,.60); background:-webkit-gradient(linear, left top, right top, from(rgba(6,8,9,.60)), color-stop(0.74, rgba(6,8,9,.58)), to(rgba(6,8,9,0))); background:linear-gradient(to right, rgba(6,8,9,.60) 0%, rgba(6,8,9,.58) 74%, rgba(6,8,9,0) 100%); } /* Ред в лентата — по MenuRailRow: отстъп 8 отстрани и 2 отгоре-отдолу, заоблени 10, вътрешен отстъп 4 (свито) / 14 (разгънато) и 9 отгоре, икона 24. Дотук редът беше 56x46 с икона 30 — по-едро и по-сбито. */ /* Ред в лентата. Мерките от приложението (ред 42, икона 24) излязоха дребни на телевизор от разстояние, затова са вдигнати: ред 48, икона 28. Формата остава същата — заоблени 10, отстъп 8 отстрани. */ .railit { position:absolute; left:8px; width:60px; height:48px; color:#FFFFFF; background:transparent; border:none; overflow:hidden; white-space:nowrap; -webkit-border-radius:10px; border-radius:10px; } .railit i { position:absolute; left:16px; top:10px; width:28px; height:28px; background-repeat:no-repeat; background-position:center center; -webkit-background-size:28px 28px; background-size:28px 28px; } /* надписът се вижда само в разгънатата лента */ .railit .lbl { display:none; } #rail.open .railit { width:216px; } #rail.open .railit i { left:14px; } #rail.open .railit .lbl { display:block; position:absolute; left:54px; top:0; right:12px; line-height:48px; font-size:22px; overflow:hidden; text-overflow:ellipsis; } #rail.open .railit.cur .lbl, #rail.open .railit.foc .lbl { font-weight:bold; } /* „Рестартирай" се вижда и в свитата лента, както в приложението. */ .railit.xtra { display:block; } /* логото горе */ .railbrand { position:absolute; left:4px; width:68px; height:68px; background:rgba(255,255,255,.12); -webkit-border-radius:12px; border-radius:12px; text-align:center; overflow:hidden; } .railbrand b { display:block; margin-top:12px; font-size:23px; line-height:24px; color:#26C6DA; } .railbrand span { display:block; font-size:21px; line-height:23px; color:#E7ECEE; } /* Центрирано и в разгънатата лента: (232 - 78) / 2 = 77. В приложението кутията с логото е с horizontalAlignment = CenterHorizontally. */ /* Разгъната лентата — логото е по-едро, както в приложението (48 срещу 40 dp). Центрирано: (232 - 96) / 2 = 68. */ #rail.open .railbrand { width:96px; height:84px; left:68px; } #rail.open .railbrand b { margin-top:16px; font-size:27px; line-height:28px; } #rail.open .railbrand span { font-size:25px; line-height:27px; } .railit.cur, .railit.foc { background:#0097A7; color:#FFFFFF; } html.t-teal .railit.cur, html.t-teal .railit.foc { background:#185F68; color:#FFFFFF; } html.t-azure .railit.cur, html.t-azure .railit.foc { background:#1E88E5; color:#FFFFFF; } html.t-green .railit.cur, html.t-green .railit.foc { background:#2E9E5B; color:#FFFFFF; } html.t-amber .railit.cur, html.t-amber .railit.foc { background:#C98A00; color:#FFFFFF; } html.t-coral .railit.cur, html.t-coral .railit.foc { background:#E85D4A; color:#FFFFFF; } html.t-pink .railit.cur, html.t-pink .railit.foc { background:#D81B60; color:#FFFFFF; } html.t-violet .railit.cur, html.t-violet .railit.foc { background:#7E57C2; color:#FFFFFF; } html.t-gray .railit.cur, html.t-gray .railit.foc { background:#5C7382; color:#FFFFFF; } /* ---------- начален екран: панел вдясно, когато няма започнато ---------- */ .hero { position:absolute; left:390px; top:140px; width:830px; } .hero .ttl { font-size:46px; font-weight:bold; } .hero .who { font-size:22px; color:#0097A7; margin-top:6px; } .hero .rows { margin-top:34px; font-size:19px; line-height:38px; } .hero .rows span { display:inline-block; width:190px; color:#93A0A6; } .hero .rows b { font-weight:normal; } .hero .tip { margin-top:40px; font-size:17px; color:#7C888E; } html.t-teal .hero .who { color:#4FB8C4; } html.t-azure .hero .who { color:#6BB1F2; } html.t-green .hero .who { color:#5FCB8A; } html.t-amber .hero .who { color:#F0B93D; } html.t-coral .hero .who { color:#FF8D7A; } html.t-pink .hero .who { color:#FF5C96; } html.t-violet .hero .who { color:#AC8CE8; } html.t-gray .hero .who { color:#93A9B6; } /* ����� �� ������� � ��������, �� �� �� �� ������ �� ������� */ .railit.i-tv i { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAm0lEQVR4nO2XOw6AMAxD44r7X9ksjHyk1i4V+K0deHJIk1aFEEIII+DukCSniQCnLnhb7Em01eLgLr2r2B3w4rvLJ9jqD4I0NpUsQR7U6iWmWNT2D1IkaW0SCtKc0sUcEN1qAhi48K2CEEwiW4khGpPyBCGe3zJBmBYLSYlh3Hr+sSw4ycr/+VddGKU71p7yo6OMy18z7W2BUGZ2dblEJ6sq8k0AAAAASUVORK5CYII=); } .railit.i-mv i { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAgklEQVR4nO3WMQoDMRBD0T8i97/ypAgbwiYm2ywjg15pGWxU2AMRERExqc4L3d3vsF7xxxJ3Zoc6NgHCnFbBVHtnezZYJu3t2WAZtbdFg/XnHfzK79KLc+0bFOaEOWFOmBPmhDlhTpgT5oS5x9X/0Wncqpmr/D5/NVGPXLKGy4nY0hMXDUA7WRVL7QAAAABJRU5ErkJggg==); } .railit.i-sr i { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAhUlEQVR4nO3WSwoDMQwE0VIz97+yZ5/YAcNkXAu9rTFq5A+C1lprarVaGGOMd6NAVX3liSXcqm4s4Vb1LzZb/i9j0ZjpEZsEuSAX5IJckAtyQS7IBbkgF+SCXJC7fi2eng2nHXxzBpz5rD894lMh63Bz2hG1u+GJl10bd03/D+Z0gNaQuwFQOCAvcZ6JeQAAAABJRU5ErkJggg==); } .railit.i-rd i { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAA00lEQVR4nO2Xyw7DIAwEWYv//2X3REQJz4JhKzHnBA8bQ8C5y+XCgarqL+95RypmLqiTYgG4DWIAcFxQF4s9Y7CKBcAqFgCrWACsYlPbzA6xACz3sBWTFya5XH1hkst5eIY+qwX0+sRs+N4ZzSSqE1uUeYJa6OvefjcV1IZEj6SZoCbFEVF7bptgTCo10s/0q1gcObKjiCZ9NvLHMrs0AUAsUpJq9aNpgmgU71ks1QSXXHrwneTo2OYX99mJFgVZjl5y+oiVI/Z4LZLTkiAJ6XL5Gz7Y0nRCSvKK5QAAAABJRU5ErkJggg==); } .railit.i-cn i { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAA60lEQVR4nO2XwRLEIAhDDf//z+ylh+2OVQionR1ybCs8pWporVQqDYWWIFXVxwRAKAdWQGXCYgdYBBQZcBgkZMbcvmPhmHIpEUMsgTLgeuMsvwt270rvhN2A1sBZkMIm7n2jX2LGmwGzgnviPE1KTsFZJW+GMx8zK+EwKbO8deXMgCfh6F38F4Ca4HqWr6AaD+1tgLj0+zwCafJxGdbK4mh6eZaVGJ3VZCa6fBfjgqI95OhltMwzWeLL7mPDG0+yLXq2o3ZfdVFIdfY3lFlgIZVovsJ9MSZJon3xEcOKHQ7Jc89qwp1cKpVaXx8UyKw9kj/cRAAAAABJRU5ErkJggg==); } .railit.i-fv i { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAA0klEQVR4nO2XUQoDIQxEM9L7X3lKYQuLtTXRqKH6fmXj7FODihwONkhSHEkSnDTCHh0t7mOQmTUvi3sYpPPJnWaQDsFTZHtT9iA7fyBFtvcCMnlCDQBQNHgfWAWyDB9LvDIkCnMX9+CKkPgyZzXI6H2JiozqKR5pE4raqjYzIiSUNdV90DMkDLVMjdojJIw19rhuhQno0XJorPFfBlfw8CyG2wkN92hC1j68+ma3QfwI8h7rsan+y3wSqyE2ft+0xC3LhwsZhee1i0GeFofDQSbwBKnMUFTGNLB8AAAAAElFTkSuQmCC); } .railit.i-st i { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAABBUlEQVR4nO2YWQ7CMAxEMxb3v7IRSEhQNU68JpGYP0oZv7ZealrbXIgyYmb+MQZCvCkDrndsCSALIBGQLkCeAPBCPqpzi5V+VJlbbPCjqtxiox95cgsTj/t1jidXty8SapuL2omACBpTGvVidu9gJSSEWOIjroDEIAZmOv1MJeImkKWCrz6IaAkQ7oIXkjLhrGnyzUKZcBGQZ/bBnUTtBEAsmBwjfZgoqtokaYvwts1cv5COaYKzA+79efSD2QAwThL1qLPALXlZqIJL20mixRk7SYX+gMt2Ek1jh8PPtJNYpg6MfuqdxDO3YfAL/aeqJ89FuaoYwbma0mYQnKspfRDBuXqUnjvLsF02CEMcAAAAAElFTkSuQmCC); } .railit.i-rs i { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAA2ElEQVR4nO2W2w7EIAhEhf//59n0oYlxvQCyK02ZRy94HK2dUlKp3wsARn1cAsMdB0QFNwI97uBKHPVojwJiANdr56jOhb2DaDbA2slaB2pZ5rLnkzCTdWNkKU5Eonk7oPca9E84ac2r/25T3UEPOEmduj/cV9yKpUfh5V6vXug0s1IC7iodfLeDJHwKLJI+Yc92sJWXi1DUWQL2fuRWMEv4EDnoBQlDMhIf8S4kjLFNHQB6YDRZTDv+a6ySb7ioVNpUZHpmrNGLDPNcMh4mjnrnyFQq9TR9ALPCkAgP4r9EAAAAAElFTkSuQmCC); } .railit.i-ex i { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAA2ElEQVR4nO2XwQ4DIQhEB9L//2V66cGabgMDtqzxnQVmcVYUOBz+i1QmMzN7Sy6Szq9ojqI5iuYomqNojqI5ih0F2gssjqEEjkXMWZCJoQSyk0KmdRGRtAejY0zIsecWOH41W0yGOG8XXQIZc1flDW9x9oYiwfhHpthMxfUq3MEK72W8uOck+SWK5iiao2iO4u4ChRhPlUfX/Ts4k+2irbgPrhhh3rzuDlZ40YixSXuQeZOAILx1V4XkQ0cia6+gvJX5UST6VEACCwilnwkowL4IXXUCHLbhCcGHeCRX2hLtAAAAAElFTkSuQmCC); } /* ---------- начален екран ---------- */ .splash { position:absolute; left:0; top:0; width:1280px; height:720px; } .sp-logo { position:absolute; left:0; right:0; top:214px; text-align:center; font-size:64px; line-height:64px; font-weight:bold; letter-spacing:1px; } .sp-logo span { color:#0097A7; } .sp-logo b { color:#E7ECEE; font-weight:bold; margin-left:12px; } html.t-teal .sp-logo span { color:#4FB8C4; } html.t-azure .sp-logo span { color:#6BB1F2; } html.t-green .sp-logo span { color:#5FCB8A; } html.t-amber .sp-logo span { color:#F0B93D; } html.t-coral .sp-logo span { color:#FF8D7A; } html.t-pink .sp-logo span { color:#FF5C96; } html.t-violet .sp-logo span { color:#AC8CE8; } html.t-gray .sp-logo span { color:#93A9B6; } /* тънка лента, по която минава светло парче — показва, че нещо се случва */ .sp-bar { position:absolute; left:490px; top:330px; width:300px; height:4px; background:rgba(255,255,255,.10); overflow:hidden; -webkit-border-radius:2px; border-radius:2px; } .sp-bar i { position:absolute; left:-90px; top:0; width:90px; height:4px; background:#0097A7; -webkit-animation:spgo 1.4s linear infinite; animation:spgo 1.4s linear infinite; } @-webkit-keyframes spgo { from { left:-90px; } to { left:300px; } } @keyframes spgo { from { left:-90px; } to { left:300px; } } .sp-st { position:absolute; left:0; right:0; top:358px; text-align:center; font-size:17px; color:#7C888E; } /* при неуспех лентата спира и съобщението е в цвета на грешката */ .splash.bad .sp-bar { display:none; } .splash.bad .sp-st { color:#E86B5A; font-size:19px; } /* съобщение преди рестарт заради графичния режим */ .gres { position:absolute; left:0; top:0; width:1280px; height:720px; background:#0A0C0E; z-index:9000; } .gres-in { position:absolute; left:180px; top:290px; width:920px; text-align:center; font-size:30px; line-height:44px; color:#E6EDF1; } /* контурът на избраното предаване следва избрания цвят */ html.t-teal .row.prg.foc { border-color:#185F68; } html.t-azure .row.prg.foc { border-color:#1E88E5; } html.t-green .row.prg.foc { border-color:#2E9E5B; } html.t-amber .row.prg.foc { border-color:#C98A00; } html.t-coral .row.prg.foc { border-color:#E85D4A; } html.t-pink .row.prg.foc { border-color:#D81B60; } html.t-violet .row.prg.foc { border-color:#7E57C2; } html.t-gray .row.prg.foc { border-color:#5C7382; } /* ================= четливост на телевизор ================= „Голям" покриваше само пет-шест места и повечето екрани оставаха с дребния шрифт. Тук са всички, които се четат отдалеч: колоната с каналите, програмата, картата с описанието, категориите, филмите и настройките. „Много голям" е още една степен нагоре — за големи телевизори и за гледане отдалеч. */ /* ---------- Голям ---------- */ html.fs-l .row .no { font-size:20px; } html.fs-l .row.prg .no { font-size:20px; } html.fs-l .row.prg .nm { font-size:21px; } html.fs-l .row.prg .lk { font-size:17px; } html.fs-l .panel .head { font-size:22px; } html.fs-l .gph .ghnm { font-size:22px; } html.fs-l .card .t, html.fs-l .card .d { font-size:19px; } html.fs-l .det .inf .ti { font-size:34px; } html.fs-l .det .inf .tx { font-size:19px; line-height:26px; } html.fs-l .vhero .ht { font-size:38px; } html.fs-l .vhero .hm { font-size:20px; } html.fs-l .vhero .hp { font-size:19px; line-height:27px; } html.fs-l #osd .infobar .nm { font-size:32px; } html.fs-l #osd .infobar .pg { font-size:26px; } html.fs-l #osd .infobar .nx { font-size:22px; } html.fs-l .hint { font-size:17px; } /* ---------- Много голям ---------- */ html.fs-xl .row .nm { font-size:26px; } html.fs-xl .row .sub { font-size:19px; } html.fs-xl .row .no { font-size:22px; } html.fs-xl .row.prg .no { font-size:22px; } html.fs-xl .row.prg .nm { font-size:24px; } html.fs-xl .row.prg .lk { font-size:18px; } html.fs-xl .panel .head { font-size:25px; } html.fs-xl .gph .ghnm { font-size:25px; } html.fs-xl .pt .tx { font-size:20px; line-height:24px; } html.fs-xl .epg .now { font-size:24px; line-height:30px; } html.fs-xl .epg .nxt { font-size:21px; } html.fs-xl .srow .k, html.fs-xl .row.set .lk { font-size:24px; } html.fs-xl .tile .cap { font-size:29px; } html.fs-xl .card .t, html.fs-xl .card .d { font-size:21px; } html.fs-xl .det .inf .ti { font-size:38px; } html.fs-xl .det .inf .tx { font-size:21px; line-height:29px; } html.fs-xl .vhero .ht { font-size:42px; } html.fs-xl .vhero .hm { font-size:22px; } html.fs-xl .vhero .hp { font-size:21px; line-height:30px; } html.fs-xl #osd .infobar .nm { font-size:35px; } html.fs-xl #osd .infobar .pg { font-size:28px; } html.fs-xl #osd .infobar .nx { font-size:24px; } html.fs-xl .hint { font-size:18px; } .gres-sub { margin-top:26px; font-size:22px; color:#93A0A6; line-height:32px; } /* избраният ред без фокус следва избрания цвят */ html.t-teal .row.sel { background:rgba(24,95,104,.28); } html.t-azure .row.sel { background:rgba(30,136,229,.28); } html.t-green .row.sel { background:rgba(46,158,91,.28); } html.t-amber .row.sel { background:rgba(201,138,0,.28); } html.t-coral .row.sel { background:rgba(232,93,74,.28); } html.t-pink .row.sel { background:rgba(216,27,96,.28); } html.t-violet .row.sel { background:rgba(126,87,194,.28); } html.t-gray .row.sel { background:rgba(92,115,130,.28); } /* прозорчето за преглед следва избрания цвят */ html.t-teal .pv { background:rgba(24,95,104,.16); } html.t-azure .pv { background:rgba(30,136,229,.16); } html.t-green .pv { background:rgba(46,158,91,.16); } html.t-amber .pv { background:rgba(201,138,0,.16); } html.t-coral .pv { background:rgba(232,93,74,.16); } html.t-pink .pv { background:rgba(216,27,96,.16); } html.t-violet .pv { background:rgba(126,87,194,.16); } html.t-gray .pv { background:rgba(92,115,130,.16); } /* Предаването и лентата под името: на ИЗБРАНИЯ без фокус ред остават в акцентния тон, вместо да падат в тъмното на колоната. */ .row.sel .acc-tx { color:#26C6DA; } .row.sel .rpb { background:rgba(255,255,255,.22); } .row.sel .rpb i { background:#26C6DA; } html.t-teal .vid .row.sel { background:rgba(24,95,104,.30); } html.t-azure .vid .row.sel { background:rgba(30,136,229,.30); } html.t-green .vid .row.sel { background:rgba(46,158,91,.30); } html.t-amber .vid .row.sel { background:rgba(201,138,0,.30); } html.t-coral .vid .row.sel { background:rgba(232,93,74,.30); } html.t-pink .vid .row.sel { background:rgba(216,27,96,.30); } html.t-violet .vid .row.sel { background:rgba(126,87,194,.30); } html.t-gray .vid .row.sel { background:rgba(92,115,130,.30); } /* Лентата с иконите: избраното е с бял текст върху акцента. */ #rail .navit.foc, #rail .it.foc { color:#FFFFFF; } /* ---------- лента с търсене и подредба (Филми, Сериали) ---------- Стойностите са от MoviesSection.kt: заоблени 8, фон 0x22FFFFFF (и 0x33FFFFFF на фокус), кант 1px 0x4DFFFFFF, а на фокус — акцентен; отстъп 10 отстрани. Подредбата на фокус се запълва с акцента. */ .vtop { position:absolute; left:116px; right:32px; top:18px; height:34px; } .vtop .sfield, .vtop .sortch { position:absolute; top:0; height:32px; line-height:32px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.30); -webkit-border-radius:8px; border-radius:8px; padding:0 10px; font-size:17px; color:#FFFFFF; white-space:nowrap; overflow:hidden; } .vtop .sfield { left:0; width:300px; } .vtop .sortch { right:0; } .vtop .ic { font-style:normal; margin-right:6px; color:#26C6DA; } .vtop .ph { text-decoration:none; color:#93A0A6; } .vtop .sfield.foc { background:rgba(255,255,255,.20); border-color:#0097A7; } .vtop .sfield.foc .ic { color:#FFFFFF; } .vtop .sortch.foc { background:#0097A7; border-color:#0097A7; } .vtop .sortch.foc .ic { color:#FFFFFF; } /* поле за писане с екранната клавиатура */ .dlg.txt { left:180px; top:120px; width:920px; } .dlg.txt .fld { height:44px; line-height:44px; padding:0 14px; font-size:22px; background:#0C1114; border:1px solid #2C363B; -webkit-border-radius:8px; border-radius:8px; margin-bottom:14px; } .dlg.txt .car { display:inline-block; width:2px; height:24px; margin-left:2px; background:#26C6DA; vertical-align:middle; } /* избраният ред в настройките следва избрания цвят */ html.t-teal .row.set.foc { background:rgba(24,95,104,.22); } html.t-azure .row.set.foc { background:rgba(30,136,229,.22); } html.t-green .row.set.foc { background:rgba(46,158,91,.22); } html.t-amber .row.set.foc { background:rgba(201,138,0,.22); } html.t-coral .row.set.foc { background:rgba(232,93,74,.22); } html.t-pink .row.set.foc { background:rgba(216,27,96,.22); } html.t-violet .row.set.foc { background:rgba(126,87,194,.22); } html.t-gray .row.set.foc { background:rgba(92,115,130,.22); } /* ---------- обща подложка под колоните на гида ---------- Едно платно от левия ръб до края на последната колона. Колоните върху него са прозрачни, за да няма шевове и просветващо видео между тях — в приложението гидът е една повърхност, не отделни плочи. */ .guideback { position:absolute; left:0; top:0; height:720px; background:rgba(10,12,14,.80); } .vid .guideback { background:rgba(6,8,9,.60); } .guideback ~ .panel.bare { background:transparent; } .vid .guideback ~ .panel.bare { background:transparent; } /* Десният ръб на подложката избледнява към чистото видео — ивица от 120 пиксела, която маха рязката граница между гида и картината. В плътната тема прелива към фона на екрана, върху видео — към прозрачното. */ /* Преливането го прави самата подложка (backTo в screen-live.js) — тук панелът остава прозрачен, за да не рисува втори фон отгоре. */ .guideback ~ .panel.fade { background:transparent; } /* ---------- прозорецът с картината в плътната тема ---------- Страницата е прозрачна (видеото е под нея), а тези четири правоъгълника покриват всичко около прозореца със същия цвят като фона на страницата — така гидът изглежда точно като досега, а картината се вижда само в прозореца (pvMask в screen-live.js). */ .pvmask { position:absolute; background:#0A0C0E; } /* рамка около картината: тънък контур, вътре прозрачно. Ъглите са прави — дупката във фона е правоъгълна и при заоблени ъгли видеото щеше да се подава извън рамката. */ .pvframe { position:absolute; background:transparent; border:2px solid #2C363B; } /* ---------- ред в колоната с категориите ---------- Същата височина като реда на канал (68), но БЕЗ отместване за лого — там няма икона. Текстът е центриран по височина и е с ръста на името на канала, за да вървят двете колони в един ритъм. */ .row.catrow { height:48px; } .row.catrow .nm { left:18px; right:44px; top:0; line-height:48px; font-size:20px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .row.catrow .lk { left:auto; right:16px; top:0; line-height:48px; font-size:15px; } html.fs-l .row.catrow .nm { font-size:23px; } html.fs-xl .row.catrow .nm { font-size:26px; } /* ---------- радио ---------- По мерките от StationRow в приложението: номерът е в колона 48, логото е 40x40 със заоблени 6, после името; избраният ред е с фон от акцента на 22% и кант 2px, не плътно запълнен. */ .row.sta { height:52px; -webkit-border-radius:8px; border-radius:8px; border:2px solid transparent; } .row.sta .no { left:10px; top:0; width:48px; line-height:52px; text-align:left; font-size:18px; color:#93A0A6; } .row.sta .lg { left:60px; top:6px; width:40px; height:40px; -webkit-border-radius:6px; border-radius:6px; } .row.sta .lg img { max-width:40px; max-height:40px; } .row.sta .nm { left:112px; right:16px; top:0; line-height:52px; font-size:21px; font-weight:bold; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .row.sta.foc { background:rgba(0,151,167,.22); border-color:#0097A7; } .row.sta.sel { background:rgba(0,151,167,.12); } html.t-teal .row.sta.foc { background:rgba(24,95,104,.22); border-color:#185F68; } html.t-azure .row.sta.foc { background:rgba(30,136,229,.22); border-color:#1E88E5; } html.t-green .row.sta.foc { background:rgba(46,158,91,.22); border-color:#2E9E5B; } html.t-amber .row.sta.foc { background:rgba(201,138,0,.22); border-color:#C98A00; } html.t-coral .row.sta.foc { background:rgba(232,93,74,.22); border-color:#E85D4A; } html.t-pink .row.sta.foc { background:rgba(216,27,96,.22); border-color:#D81B60; } html.t-violet .row.sta.foc { background:rgba(126,87,194,.22); border-color:#7E57C2; } html.t-gray .row.sta.foc { background:rgba(92,115,130,.22); border-color:#5C7382; } /* „Сега свири" — вдясно от списъка, без панел с картина */ .rnow { position:absolute; left:740px; right:24px; top:64px; font-size:20px; line-height:30px; color:#C2CCD1; } .rnow b { display:block; font-size:26px; line-height:34px; color:#FFFFFF; margin-bottom:10px; } /* ---------- екран при пускане на радио (RadioStage) ---------- */ .rstage { position:absolute; left:0; top:0; width:1280px; height:720px; z-index:6; background:-webkit-gradient(linear, left top, left bottom, from(#0B0B0F), color-stop(0.5, #15151C), to(#0B0B0F)); background:linear-gradient(to bottom, #0B0B0F, #15151C 50%, #0B0B0F); } .rstage .rs-in { position:absolute; left:0; top:96px; width:1280px; text-align:center; } .rstage .rs-lg { position:relative; display:inline-block; width:220px; height:220px; overflow:hidden; -webkit-border-radius:20px; border-radius:20px; } .rstage .rs-lg img { max-width:220px; max-height:220px; } .rstage .rs-lg .ini { position:absolute; left:0; top:0; width:220px; height:220px; line-height:220px; text-align:center; font-size:64px; font-weight:bold; color:#93A0A6; background:rgba(255,255,255,.08); -webkit-border-radius:20px; border-radius:20px; } .rstage .rs-nm { margin-top:28px; font-size:30px; font-weight:bold; color:#FFFFFF; } /* Стълбчетата са ЗАКОТВЕНИ за долния ръб. Досега стояха на текстов ред с vertical-align:bottom и при смяна на височината редът се преизчисляваше — заради това цялото поле подскачаше. Сега всяко е на абсолютно място и расте само нагоре. */ .rstage .rs-eq { position:relative; margin:30px auto 0 auto; width:156px; height:90px; } .rstage .rs-eq i { position:absolute; bottom:0; width:12px; height:20px; background:#0097A7; -webkit-border-radius:6px; border-radius:6px; } .rstage .rs-eq i:nth-child(1) { left:0; } .rstage .rs-eq i:nth-child(2) { left:20px; } .rstage .rs-eq i:nth-child(3) { left:40px; } .rstage .rs-eq i:nth-child(4) { left:60px; } .rstage .rs-eq i:nth-child(5) { left:80px; } .rstage .rs-eq i:nth-child(6) { left:100px; } .rstage .rs-eq i:nth-child(7) { left:120px; } .rstage .rs-eq i:nth-child(8) { left:140px; } html.t-teal .rstage .rs-eq i { background:#185F68; } html.t-azure .rstage .rs-eq i { background:#1E88E5; } html.t-green .rstage .rs-eq i { background:#2E9E5B; } html.t-amber .rstage .rs-eq i { background:#C98A00; } html.t-coral .rstage .rs-eq i { background:#E85D4A; } html.t-pink .rstage .rs-eq i { background:#D81B60; } html.t-violet .rstage .rs-eq i { background:#7E57C2; } html.t-gray .rstage .rs-eq i { background:#5C7382; } /* ---------- ИКОНКИ КАТО КАРТИНКИ (17.09.2026) ---------- Знаците ⌕ ⇅ ↻ ⌫ ✕ ⇧ ги няма в шрифта на LG (webOS) и мястото им оставаше празно. Бели PNG (44px, показвани на 22px), както иконите в лявата лента. Слагат се от JS: ; ▶/↻ в надписи — през A.glyphs. */ .ic { display:inline-block; width:17px; height:17px; vertical-align:-2px; background-repeat:no-repeat; background-position:center center; -webkit-background-size:17px 17px; background-size:17px 17px; } .vtop .ic { margin-right:6px; } .btn .ic { margin-right:2px; } .key .ic, .kpk .ic { width:20px; height:20px; -webkit-background-size:20px 20px; background-size:20px 20px; vertical-align:-4px; } .ic.ic-srch { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAA/UlEQVR42u2YQQ6FIAxEafPvf+W6IjHmo9LOlJrQpQo8a4sztLZjx7dDPIPMzIYTikgZ4DvQLHBBg7LBlQmLGD8FjFoMCS3eRf59as+Y2fgha7LfQ5fBY0mMFnybodFziBdRVreztjVldzV6fmVmi5FlbR+LDbyBPcDezmbsOJquZ4PzKytbrP1cGb/W6K8dKn46jEet0R0HVMeKiJkZtYZRDdhhU7REFPoMC/GIbNeMPhJIOZdAQktLChR0mpa4g5optVTxg4BOV2tR6CXyMgK9TA97oZcKeA/0cscxC13CIs1Al/F0b6FLmdAR9Pl6Odd8hWZ7zDJncDu8cQC0oaxDUWx2GAAAAABJRU5ErkJggg==); } .ic.ic-sort { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAArUlEQVR42u2YSxKAIAxD2w73v3LdO1bBfgRM1gWeIdARIgiCIIiISFX1i3XZC8vM7P3YkTlktZ0VrzvV0ZCI3FZCS9Qhq4LeM8O97lW4LNEQ2dCSsXgm9D4Z9rqU5XIze/ZNu/S0VkQCwAAGcK7aDL9QVu3VdZnmsPdutsYjwxEu341Ld3gU+qm+JBK90D11yPBb93p3odRhC2rql58z3OihXC7D9LfXTwiCdtcBa2pUNhGYLbYAAAAASUVORK5CYII=); } .ic.ic-restart { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAA1klEQVR42u1YyxLEIAhrGP//l93LHnY6q5WXQoecC6YBwuh1FQoFEXrvXRJH2UhTBKU5xClbiyAiOQAIr/DqD4UkPOttiu4M9+/DKjxSGxn893cI20ry2dR6YXQmeZi7Vl2xrd2TW5FOa2v4ghPTThEVx3LK4jl8q+el8OEiXISLcETC/yzFa9NxLPT9LWGtMjcfea1Qr9VNO19ttjykjP5WS3oU/1RVWKjBaR1tnmZZ2tmBVm2Ekw4hqRJODp3EiWj3jUGbByesyeWKZE3+1BIqFApKfADW5pwLBJJDyAAAAABJRU5ErkJggg==); } .ic.ic-play { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAsUlEQVR42u3YAQrAMAgDQCv7/5e7H6xdm0QF84IjZA5q1ul0OrDMOWe0wU/QkXCv1rbfTkQNd9S2VXCv9lG6ES4JE+5GPIEMuFux2+0m+uGg4BIwEi4FI+Ah4Jt9h4JP2g4H/4WnAe/OJB141faTETzGGGUa/sKmangFTQPehaaYxF9sWMMn0BDwDVQKRkBlG0ZiqQ2joTQwC0qZBBsLa1gBhYCV0OtJRGBLvg93Oh1xXsx+dBsUazTEAAAAAElFTkSuQmCC); } .ic.ic-del { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAA7UlEQVR42u2Y2w7DMAhDqbX//+XsbZqqJgLjXKbh16bkFBFcYlYqlUqlnbqyAVprbTrkdX04cTrsXfglWBp4F6yZ2UtdYwqNEoJsMDWstCR2lkIY+Al2lF3PxzEJwEzYEZBnDQWczezT+541FHAUtvf8Ow4Tkz503sA96CzsEDjbvjzrmZaIme1rBMT2byjqNgqdiYfooVHYbCYeZv4bePqwzDju0NENtjpddIPeOVCUGzImwJhNFhqsCXjXe7qE3OlYaE8fljmdOtNTnW7VKLRkCM22uyOG0JXQOGFKXnKRsgsaJ91HlEql0h/qDaAgvDp15esCAAAAAElFTkSuQmCC); } .ic.ic-x { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAA0ElEQVR42u3YMRbDIAwDUKH735lOXVvbkj0k1pyn/hBKIMBms9lsXp97741ey87yTF+0l53l2ZuP9LKzvPKk/vWys7wyrc45Rwb/KsmiFWxqSjjQKjb9p1PQDmxpWaugXdgSOIt2YsvgKNqNBYADzL1WVaw0wtUfV7AWcAahYm3gCMaBtYKVdXgc7HjTjYGde4l2cHWdVdDsxHag2T2ybjQnpoETzanNtwvNqZOCC80prAstnenKW0QBXT7TqXsD9yCMfvn5Bnjgt7XNZrN5WD6xUtf8q2ebfQAAAABJRU5ErkJggg==); } .ic.ic-shift { background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAoElEQVR42u3YAQrDMAxD0fjT+185u8AYWyy5HUgHMK+uQkrXSpLkbfbe2zEXJ9aBxr1ZNZqJGijRTHVWhcaFrapyoHFiHWjcm1WjcddAjcaNVaOZwCrRTGFVaCaxCjTT2C6aO7AddHWu0w78dDbT37PdB+KJ2I91VGG/qYdi9nXaS8VbODkDrD9LwAEHHHDAAQcccCfX039gpxIBJ8lveQHFPpwT/MpB1wAAAABJRU5ErkJggg==); } /* ==== АКЦЕНТ ПО ТЕМИ — ГЕНЕРИРАНО от tools/accent_css.py, не се пипа на ръка ==== */ /* 53 правила с акцентен цвят × 8 теми */ /* teal */ html.t-teal .acc-bg { background:#185F68; } html.t-teal .acc-tx { color:#4FB8C4; } html.t-teal .acc-bd { border-color:#185F68; } html.t-teal .hintbar .b { background:#185F68; } html.t-teal .panel .head { color:#4FB8C4; } html.t-teal .row.sel { background:rgba(24,95,104,.28); } html.t-teal .row.foc { background:#185F68; } html.t-teal .row.set.sel { background:rgba(24,95,104,.22); } html.t-teal .row.set.foc { background:rgba(24,95,104,.22); border:2px solid #185F68; } html.t-teal .row.set.foc:after { color:#185F68; } html.t-teal .tile.foc { border-color:#185F68; } html.t-teal .tile.foc .mark { background:#185F68; } html.t-teal .card.foc { border-color:#185F68; } html.t-teal .pt.foc .box { border-color:#185F68; } html.t-teal .btn.foc { background:#185F68; border-color:#185F68; } html.t-teal .row.hdr .nm { color:#4FB8C4; } html.t-teal .pv { background:rgba(24,95,104,.16); } html.t-teal .bar i { background:#185F68; } html.t-teal #osd .infobar .num { color:#4FB8C4; } html.t-teal #osd .infobar .pbar i { background:#185F68; } html.t-teal #osd .infobar .rec { color:#4FB8C4; } html.t-teal .field.foc { border-color:#185F68; } html.t-teal .key.foc { background:#185F68; border-color:#185F68; } html.t-teal .key.shift.on { border:2px solid #4FB8C4; color:#4FB8C4; } html.t-teal .srow.foc { background:#185F68; } html.t-teal .dlg .opt.foc { background:#185F68; } html.t-teal .dlg .opt.foc { background:#185F68; } html.t-teal #vol .bar i { background:#185F68; } html.t-teal.bar-none #osd .zap, html.t-teal.bar-none #osd .busy { background:rgba(24,95,104,.28); } html.t-teal .navit.foc { background:#185F68; } html.t-teal .card2.foc { border-color:#185F68; } html.t-teal .panel.bare .head { color:#4FB8C4; } html.t-teal .vid .row.sel { background:rgba(24,95,104,.30); } html.t-teal .row.dte.foc { border:2px solid #185F68; } html.t-teal .vhero .hm { color:#4FB8C4; } html.t-teal .row .rpb i { background:#185F68; } html.t-teal .row .rpb i { background:#4FB8C4; } html.t-teal .row.prg.foc, html.t-teal #screen .row.prg.foc { border:2px solid #185F68; } html.t-teal .row.prg.foc .acc-tx { color:#4FB8C4; } html.t-teal .railbrand b { color:#4FB8C4; } html.t-teal .railit.cur, html.t-teal .railit.foc { background:#185F68; } html.t-teal .hero .who { color:#185F68; } html.t-teal .sp-logo span { color:#185F68; } html.t-teal .sp-bar i { background:#185F68; } html.t-teal .row.sel .acc-tx { color:#4FB8C4; } html.t-teal .row.sel .rpb i { background:#4FB8C4; } html.t-teal .vtop .ic { color:#4FB8C4; } html.t-teal .vtop .sfield.foc { border-color:#185F68; } html.t-teal .vtop .sortch.foc { background:#185F68; border-color:#185F68; } html.t-teal .dlg.txt .car { background:#4FB8C4; } html.t-teal .row.sta.foc { background:rgba(24,95,104,.22); border-color:#185F68; } html.t-teal .row.sta.sel { background:rgba(24,95,104,.12); } html.t-teal .rstage .rs-eq i { background:#185F68; } /* azure */ html.t-azure .acc-bg { background:#1E88E5; } html.t-azure .acc-tx { color:#6BB1F2; } html.t-azure .acc-bd { border-color:#1E88E5; } html.t-azure .hintbar .b { background:#1E88E5; } html.t-azure .panel .head { color:#6BB1F2; } html.t-azure .row.sel { background:rgba(30,136,229,.28); } html.t-azure .row.foc { background:#1E88E5; } html.t-azure .row.set.sel { background:rgba(30,136,229,.22); } html.t-azure .row.set.foc { background:rgba(30,136,229,.22); border:2px solid #1E88E5; } html.t-azure .row.set.foc:after { color:#1E88E5; } html.t-azure .tile.foc { border-color:#1E88E5; } html.t-azure .tile.foc .mark { background:#1E88E5; } html.t-azure .card.foc { border-color:#1E88E5; } html.t-azure .pt.foc .box { border-color:#1E88E5; } html.t-azure .btn.foc { background:#1E88E5; border-color:#1E88E5; } html.t-azure .row.hdr .nm { color:#6BB1F2; } html.t-azure .pv { background:rgba(30,136,229,.16); } html.t-azure .bar i { background:#1E88E5; } html.t-azure #osd .infobar .num { color:#6BB1F2; } html.t-azure #osd .infobar .pbar i { background:#1E88E5; } html.t-azure #osd .infobar .rec { color:#6BB1F2; } html.t-azure .field.foc { border-color:#1E88E5; } html.t-azure .key.foc { background:#1E88E5; border-color:#1E88E5; } html.t-azure .key.shift.on { border:2px solid #6BB1F2; color:#6BB1F2; } html.t-azure .srow.foc { background:#1E88E5; } html.t-azure .dlg .opt.foc { background:#1E88E5; } html.t-azure .dlg .opt.foc { background:#1E88E5; } html.t-azure #vol .bar i { background:#1E88E5; } html.t-azure.bar-none #osd .zap, html.t-azure.bar-none #osd .busy { background:rgba(30,136,229,.28); } html.t-azure .navit.foc { background:#1E88E5; } html.t-azure .card2.foc { border-color:#1E88E5; } html.t-azure .panel.bare .head { color:#6BB1F2; } html.t-azure .vid .row.sel { background:rgba(30,136,229,.30); } html.t-azure .row.dte.foc { border:2px solid #1E88E5; } html.t-azure .vhero .hm { color:#6BB1F2; } html.t-azure .row .rpb i { background:#1E88E5; } html.t-azure .row .rpb i { background:#6BB1F2; } html.t-azure .row.prg.foc, html.t-azure #screen .row.prg.foc { border:2px solid #1E88E5; } html.t-azure .row.prg.foc .acc-tx { color:#6BB1F2; } html.t-azure .railbrand b { color:#6BB1F2; } html.t-azure .railit.cur, html.t-azure .railit.foc { background:#1E88E5; } html.t-azure .hero .who { color:#1E88E5; } html.t-azure .sp-logo span { color:#1E88E5; } html.t-azure .sp-bar i { background:#1E88E5; } html.t-azure .row.sel .acc-tx { color:#6BB1F2; } html.t-azure .row.sel .rpb i { background:#6BB1F2; } html.t-azure .vtop .ic { color:#6BB1F2; } html.t-azure .vtop .sfield.foc { border-color:#1E88E5; } html.t-azure .vtop .sortch.foc { background:#1E88E5; border-color:#1E88E5; } html.t-azure .dlg.txt .car { background:#6BB1F2; } html.t-azure .row.sta.foc { background:rgba(30,136,229,.22); border-color:#1E88E5; } html.t-azure .row.sta.sel { background:rgba(30,136,229,.12); } html.t-azure .rstage .rs-eq i { background:#1E88E5; } /* green */ html.t-green .acc-bg { background:#2E9E5B; } html.t-green .acc-tx { color:#5FCB8A; } html.t-green .acc-bd { border-color:#2E9E5B; } html.t-green .hintbar .b { background:#2E9E5B; } html.t-green .panel .head { color:#5FCB8A; } html.t-green .row.sel { background:rgba(46,158,91,.28); } html.t-green .row.foc { background:#2E9E5B; } html.t-green .row.set.sel { background:rgba(46,158,91,.22); } html.t-green .row.set.foc { background:rgba(46,158,91,.22); border:2px solid #2E9E5B; } html.t-green .row.set.foc:after { color:#2E9E5B; } html.t-green .tile.foc { border-color:#2E9E5B; } html.t-green .tile.foc .mark { background:#2E9E5B; } html.t-green .card.foc { border-color:#2E9E5B; } html.t-green .pt.foc .box { border-color:#2E9E5B; } html.t-green .btn.foc { background:#2E9E5B; border-color:#2E9E5B; } html.t-green .row.hdr .nm { color:#5FCB8A; } html.t-green .pv { background:rgba(46,158,91,.16); } html.t-green .bar i { background:#2E9E5B; } html.t-green #osd .infobar .num { color:#5FCB8A; } html.t-green #osd .infobar .pbar i { background:#2E9E5B; } html.t-green #osd .infobar .rec { color:#5FCB8A; } html.t-green .field.foc { border-color:#2E9E5B; } html.t-green .key.foc { background:#2E9E5B; border-color:#2E9E5B; } html.t-green .key.shift.on { border:2px solid #5FCB8A; color:#5FCB8A; } html.t-green .srow.foc { background:#2E9E5B; } html.t-green .dlg .opt.foc { background:#2E9E5B; } html.t-green .dlg .opt.foc { background:#2E9E5B; } html.t-green #vol .bar i { background:#2E9E5B; } html.t-green.bar-none #osd .zap, html.t-green.bar-none #osd .busy { background:rgba(46,158,91,.28); } html.t-green .navit.foc { background:#2E9E5B; } html.t-green .card2.foc { border-color:#2E9E5B; } html.t-green .panel.bare .head { color:#5FCB8A; } html.t-green .vid .row.sel { background:rgba(46,158,91,.30); } html.t-green .row.dte.foc { border:2px solid #2E9E5B; } html.t-green .vhero .hm { color:#5FCB8A; } html.t-green .row .rpb i { background:#2E9E5B; } html.t-green .row .rpb i { background:#5FCB8A; } html.t-green .row.prg.foc, html.t-green #screen .row.prg.foc { border:2px solid #2E9E5B; } html.t-green .row.prg.foc .acc-tx { color:#5FCB8A; } html.t-green .railbrand b { color:#5FCB8A; } html.t-green .railit.cur, html.t-green .railit.foc { background:#2E9E5B; } html.t-green .hero .who { color:#2E9E5B; } html.t-green .sp-logo span { color:#2E9E5B; } html.t-green .sp-bar i { background:#2E9E5B; } html.t-green .row.sel .acc-tx { color:#5FCB8A; } html.t-green .row.sel .rpb i { background:#5FCB8A; } html.t-green .vtop .ic { color:#5FCB8A; } html.t-green .vtop .sfield.foc { border-color:#2E9E5B; } html.t-green .vtop .sortch.foc { background:#2E9E5B; border-color:#2E9E5B; } html.t-green .dlg.txt .car { background:#5FCB8A; } html.t-green .row.sta.foc { background:rgba(46,158,91,.22); border-color:#2E9E5B; } html.t-green .row.sta.sel { background:rgba(46,158,91,.12); } html.t-green .rstage .rs-eq i { background:#2E9E5B; } /* amber */ html.t-amber .acc-bg { background:#C98A00; } html.t-amber .acc-tx { color:#F0B93D; } html.t-amber .acc-bd { border-color:#C98A00; } html.t-amber .hintbar .b { background:#C98A00; } html.t-amber .panel .head { color:#F0B93D; } html.t-amber .row.sel { background:rgba(201,138,0,.28); } html.t-amber .row.foc { background:#C98A00; } html.t-amber .row.set.sel { background:rgba(201,138,0,.22); } html.t-amber .row.set.foc { background:rgba(201,138,0,.22); border:2px solid #C98A00; } html.t-amber .row.set.foc:after { color:#C98A00; } html.t-amber .tile.foc { border-color:#C98A00; } html.t-amber .tile.foc .mark { background:#C98A00; } html.t-amber .card.foc { border-color:#C98A00; } html.t-amber .pt.foc .box { border-color:#C98A00; } html.t-amber .btn.foc { background:#C98A00; border-color:#C98A00; } html.t-amber .row.hdr .nm { color:#F0B93D; } html.t-amber .pv { background:rgba(201,138,0,.16); } html.t-amber .bar i { background:#C98A00; } html.t-amber #osd .infobar .num { color:#F0B93D; } html.t-amber #osd .infobar .pbar i { background:#C98A00; } html.t-amber #osd .infobar .rec { color:#F0B93D; } html.t-amber .field.foc { border-color:#C98A00; } html.t-amber .key.foc { background:#C98A00; border-color:#C98A00; } html.t-amber .key.shift.on { border:2px solid #F0B93D; color:#F0B93D; } html.t-amber .srow.foc { background:#C98A00; } html.t-amber .dlg .opt.foc { background:#C98A00; } html.t-amber .dlg .opt.foc { background:#C98A00; } html.t-amber #vol .bar i { background:#C98A00; } html.t-amber.bar-none #osd .zap, html.t-amber.bar-none #osd .busy { background:rgba(201,138,0,.28); } html.t-amber .navit.foc { background:#C98A00; } html.t-amber .card2.foc { border-color:#C98A00; } html.t-amber .panel.bare .head { color:#F0B93D; } html.t-amber .vid .row.sel { background:rgba(201,138,0,.30); } html.t-amber .row.dte.foc { border:2px solid #C98A00; } html.t-amber .vhero .hm { color:#F0B93D; } html.t-amber .row .rpb i { background:#C98A00; } html.t-amber .row .rpb i { background:#F0B93D; } html.t-amber .row.prg.foc, html.t-amber #screen .row.prg.foc { border:2px solid #C98A00; } html.t-amber .row.prg.foc .acc-tx { color:#F0B93D; } html.t-amber .railbrand b { color:#F0B93D; } html.t-amber .railit.cur, html.t-amber .railit.foc { background:#C98A00; } html.t-amber .hero .who { color:#C98A00; } html.t-amber .sp-logo span { color:#C98A00; } html.t-amber .sp-bar i { background:#C98A00; } html.t-amber .row.sel .acc-tx { color:#F0B93D; } html.t-amber .row.sel .rpb i { background:#F0B93D; } html.t-amber .vtop .ic { color:#F0B93D; } html.t-amber .vtop .sfield.foc { border-color:#C98A00; } html.t-amber .vtop .sortch.foc { background:#C98A00; border-color:#C98A00; } html.t-amber .dlg.txt .car { background:#F0B93D; } html.t-amber .row.sta.foc { background:rgba(201,138,0,.22); border-color:#C98A00; } html.t-amber .row.sta.sel { background:rgba(201,138,0,.12); } html.t-amber .rstage .rs-eq i { background:#C98A00; } /* coral */ html.t-coral .acc-bg { background:#E85D4A; } html.t-coral .acc-tx { color:#FF8D7A; } html.t-coral .acc-bd { border-color:#E85D4A; } html.t-coral .hintbar .b { background:#E85D4A; } html.t-coral .panel .head { color:#FF8D7A; } html.t-coral .row.sel { background:rgba(232,93,74,.28); } html.t-coral .row.foc { background:#E85D4A; } html.t-coral .row.set.sel { background:rgba(232,93,74,.22); } html.t-coral .row.set.foc { background:rgba(232,93,74,.22); border:2px solid #E85D4A; } html.t-coral .row.set.foc:after { color:#E85D4A; } html.t-coral .tile.foc { border-color:#E85D4A; } html.t-coral .tile.foc .mark { background:#E85D4A; } html.t-coral .card.foc { border-color:#E85D4A; } html.t-coral .pt.foc .box { border-color:#E85D4A; } html.t-coral .btn.foc { background:#E85D4A; border-color:#E85D4A; } html.t-coral .row.hdr .nm { color:#FF8D7A; } html.t-coral .pv { background:rgba(232,93,74,.16); } html.t-coral .bar i { background:#E85D4A; } html.t-coral #osd .infobar .num { color:#FF8D7A; } html.t-coral #osd .infobar .pbar i { background:#E85D4A; } html.t-coral #osd .infobar .rec { color:#FF8D7A; } html.t-coral .field.foc { border-color:#E85D4A; } html.t-coral .key.foc { background:#E85D4A; border-color:#E85D4A; } html.t-coral .key.shift.on { border:2px solid #FF8D7A; color:#FF8D7A; } html.t-coral .srow.foc { background:#E85D4A; } html.t-coral .dlg .opt.foc { background:#E85D4A; } html.t-coral .dlg .opt.foc { background:#E85D4A; } html.t-coral #vol .bar i { background:#E85D4A; } html.t-coral.bar-none #osd .zap, html.t-coral.bar-none #osd .busy { background:rgba(232,93,74,.28); } html.t-coral .navit.foc { background:#E85D4A; } html.t-coral .card2.foc { border-color:#E85D4A; } html.t-coral .panel.bare .head { color:#FF8D7A; } html.t-coral .vid .row.sel { background:rgba(232,93,74,.30); } html.t-coral .row.dte.foc { border:2px solid #E85D4A; } html.t-coral .vhero .hm { color:#FF8D7A; } html.t-coral .row .rpb i { background:#E85D4A; } html.t-coral .row .rpb i { background:#FF8D7A; } html.t-coral .row.prg.foc, html.t-coral #screen .row.prg.foc { border:2px solid #E85D4A; } html.t-coral .row.prg.foc .acc-tx { color:#FF8D7A; } html.t-coral .railbrand b { color:#FF8D7A; } html.t-coral .railit.cur, html.t-coral .railit.foc { background:#E85D4A; } html.t-coral .hero .who { color:#E85D4A; } html.t-coral .sp-logo span { color:#E85D4A; } html.t-coral .sp-bar i { background:#E85D4A; } html.t-coral .row.sel .acc-tx { color:#FF8D7A; } html.t-coral .row.sel .rpb i { background:#FF8D7A; } html.t-coral .vtop .ic { color:#FF8D7A; } html.t-coral .vtop .sfield.foc { border-color:#E85D4A; } html.t-coral .vtop .sortch.foc { background:#E85D4A; border-color:#E85D4A; } html.t-coral .dlg.txt .car { background:#FF8D7A; } html.t-coral .row.sta.foc { background:rgba(232,93,74,.22); border-color:#E85D4A; } html.t-coral .row.sta.sel { background:rgba(232,93,74,.12); } html.t-coral .rstage .rs-eq i { background:#E85D4A; } /* pink */ html.t-pink .acc-bg { background:#D81B60; } html.t-pink .acc-tx { color:#FF5C96; } html.t-pink .acc-bd { border-color:#D81B60; } html.t-pink .hintbar .b { background:#D81B60; } html.t-pink .panel .head { color:#FF5C96; } html.t-pink .row.sel { background:rgba(216,27,96,.28); } html.t-pink .row.foc { background:#D81B60; } html.t-pink .row.set.sel { background:rgba(216,27,96,.22); } html.t-pink .row.set.foc { background:rgba(216,27,96,.22); border:2px solid #D81B60; } html.t-pink .row.set.foc:after { color:#D81B60; } html.t-pink .tile.foc { border-color:#D81B60; } html.t-pink .tile.foc .mark { background:#D81B60; } html.t-pink .card.foc { border-color:#D81B60; } html.t-pink .pt.foc .box { border-color:#D81B60; } html.t-pink .btn.foc { background:#D81B60; border-color:#D81B60; } html.t-pink .row.hdr .nm { color:#FF5C96; } html.t-pink .pv { background:rgba(216,27,96,.16); } html.t-pink .bar i { background:#D81B60; } html.t-pink #osd .infobar .num { color:#FF5C96; } html.t-pink #osd .infobar .pbar i { background:#D81B60; } html.t-pink #osd .infobar .rec { color:#FF5C96; } html.t-pink .field.foc { border-color:#D81B60; } html.t-pink .key.foc { background:#D81B60; border-color:#D81B60; } html.t-pink .key.shift.on { border:2px solid #FF5C96; color:#FF5C96; } html.t-pink .srow.foc { background:#D81B60; } html.t-pink .dlg .opt.foc { background:#D81B60; } html.t-pink .dlg .opt.foc { background:#D81B60; } html.t-pink #vol .bar i { background:#D81B60; } html.t-pink.bar-none #osd .zap, html.t-pink.bar-none #osd .busy { background:rgba(216,27,96,.28); } html.t-pink .navit.foc { background:#D81B60; } html.t-pink .card2.foc { border-color:#D81B60; } html.t-pink .panel.bare .head { color:#FF5C96; } html.t-pink .vid .row.sel { background:rgba(216,27,96,.30); } html.t-pink .row.dte.foc { border:2px solid #D81B60; } html.t-pink .vhero .hm { color:#FF5C96; } html.t-pink .row .rpb i { background:#D81B60; } html.t-pink .row .rpb i { background:#FF5C96; } html.t-pink .row.prg.foc, html.t-pink #screen .row.prg.foc { border:2px solid #D81B60; } html.t-pink .row.prg.foc .acc-tx { color:#FF5C96; } html.t-pink .railbrand b { color:#FF5C96; } html.t-pink .railit.cur, html.t-pink .railit.foc { background:#D81B60; } html.t-pink .hero .who { color:#D81B60; } html.t-pink .sp-logo span { color:#D81B60; } html.t-pink .sp-bar i { background:#D81B60; } html.t-pink .row.sel .acc-tx { color:#FF5C96; } html.t-pink .row.sel .rpb i { background:#FF5C96; } html.t-pink .vtop .ic { color:#FF5C96; } html.t-pink .vtop .sfield.foc { border-color:#D81B60; } html.t-pink .vtop .sortch.foc { background:#D81B60; border-color:#D81B60; } html.t-pink .dlg.txt .car { background:#FF5C96; } html.t-pink .row.sta.foc { background:rgba(216,27,96,.22); border-color:#D81B60; } html.t-pink .row.sta.sel { background:rgba(216,27,96,.12); } html.t-pink .rstage .rs-eq i { background:#D81B60; } /* violet */ html.t-violet .acc-bg { background:#7E57C2; } html.t-violet .acc-tx { color:#AC8CE8; } html.t-violet .acc-bd { border-color:#7E57C2; } html.t-violet .hintbar .b { background:#7E57C2; } html.t-violet .panel .head { color:#AC8CE8; } html.t-violet .row.sel { background:rgba(126,87,194,.28); } html.t-violet .row.foc { background:#7E57C2; } html.t-violet .row.set.sel { background:rgba(126,87,194,.22); } html.t-violet .row.set.foc { background:rgba(126,87,194,.22); border:2px solid #7E57C2; } html.t-violet .row.set.foc:after { color:#7E57C2; } html.t-violet .tile.foc { border-color:#7E57C2; } html.t-violet .tile.foc .mark { background:#7E57C2; } html.t-violet .card.foc { border-color:#7E57C2; } html.t-violet .pt.foc .box { border-color:#7E57C2; } html.t-violet .btn.foc { background:#7E57C2; border-color:#7E57C2; } html.t-violet .row.hdr .nm { color:#AC8CE8; } html.t-violet .pv { background:rgba(126,87,194,.16); } html.t-violet .bar i { background:#7E57C2; } html.t-violet #osd .infobar .num { color:#AC8CE8; } html.t-violet #osd .infobar .pbar i { background:#7E57C2; } html.t-violet #osd .infobar .rec { color:#AC8CE8; } html.t-violet .field.foc { border-color:#7E57C2; } html.t-violet .key.foc { background:#7E57C2; border-color:#7E57C2; } html.t-violet .key.shift.on { border:2px solid #AC8CE8; color:#AC8CE8; } html.t-violet .srow.foc { background:#7E57C2; } html.t-violet .dlg .opt.foc { background:#7E57C2; } html.t-violet .dlg .opt.foc { background:#7E57C2; } html.t-violet #vol .bar i { background:#7E57C2; } html.t-violet.bar-none #osd .zap, html.t-violet.bar-none #osd .busy { background:rgba(126,87,194,.28); } html.t-violet .navit.foc { background:#7E57C2; } html.t-violet .card2.foc { border-color:#7E57C2; } html.t-violet .panel.bare .head { color:#AC8CE8; } html.t-violet .vid .row.sel { background:rgba(126,87,194,.30); } html.t-violet .row.dte.foc { border:2px solid #7E57C2; } html.t-violet .vhero .hm { color:#AC8CE8; } html.t-violet .row .rpb i { background:#7E57C2; } html.t-violet .row .rpb i { background:#AC8CE8; } html.t-violet .row.prg.foc, html.t-violet #screen .row.prg.foc { border:2px solid #7E57C2; } html.t-violet .row.prg.foc .acc-tx { color:#AC8CE8; } html.t-violet .railbrand b { color:#AC8CE8; } html.t-violet .railit.cur, html.t-violet .railit.foc { background:#7E57C2; } html.t-violet .hero .who { color:#7E57C2; } html.t-violet .sp-logo span { color:#7E57C2; } html.t-violet .sp-bar i { background:#7E57C2; } html.t-violet .row.sel .acc-tx { color:#AC8CE8; } html.t-violet .row.sel .rpb i { background:#AC8CE8; } html.t-violet .vtop .ic { color:#AC8CE8; } html.t-violet .vtop .sfield.foc { border-color:#7E57C2; } html.t-violet .vtop .sortch.foc { background:#7E57C2; border-color:#7E57C2; } html.t-violet .dlg.txt .car { background:#AC8CE8; } html.t-violet .row.sta.foc { background:rgba(126,87,194,.22); border-color:#7E57C2; } html.t-violet .row.sta.sel { background:rgba(126,87,194,.12); } html.t-violet .rstage .rs-eq i { background:#7E57C2; } /* gray */ html.t-gray .acc-bg { background:#5C7382; } html.t-gray .acc-tx { color:#93A9B6; } html.t-gray .acc-bd { border-color:#5C7382; } html.t-gray .hintbar .b { background:#5C7382; } html.t-gray .panel .head { color:#93A9B6; } html.t-gray .row.sel { background:rgba(92,115,130,.28); } html.t-gray .row.foc { background:#5C7382; } html.t-gray .row.set.sel { background:rgba(92,115,130,.22); } html.t-gray .row.set.foc { background:rgba(92,115,130,.22); border:2px solid #5C7382; } html.t-gray .row.set.foc:after { color:#5C7382; } html.t-gray .tile.foc { border-color:#5C7382; } html.t-gray .tile.foc .mark { background:#5C7382; } html.t-gray .card.foc { border-color:#5C7382; } html.t-gray .pt.foc .box { border-color:#5C7382; } html.t-gray .btn.foc { background:#5C7382; border-color:#5C7382; } html.t-gray .row.hdr .nm { color:#93A9B6; } html.t-gray .pv { background:rgba(92,115,130,.16); } html.t-gray .bar i { background:#5C7382; } html.t-gray #osd .infobar .num { color:#93A9B6; } html.t-gray #osd .infobar .pbar i { background:#5C7382; } html.t-gray #osd .infobar .rec { color:#93A9B6; } html.t-gray .field.foc { border-color:#5C7382; } html.t-gray .key.foc { background:#5C7382; border-color:#5C7382; } html.t-gray .key.shift.on { border:2px solid #93A9B6; color:#93A9B6; } html.t-gray .srow.foc { background:#5C7382; } html.t-gray .dlg .opt.foc { background:#5C7382; } html.t-gray .dlg .opt.foc { background:#5C7382; } html.t-gray #vol .bar i { background:#5C7382; } html.t-gray.bar-none #osd .zap, html.t-gray.bar-none #osd .busy { background:rgba(92,115,130,.28); } html.t-gray .navit.foc { background:#5C7382; } html.t-gray .card2.foc { border-color:#5C7382; } html.t-gray .panel.bare .head { color:#93A9B6; } html.t-gray .vid .row.sel { background:rgba(92,115,130,.30); } html.t-gray .row.dte.foc { border:2px solid #5C7382; } html.t-gray .vhero .hm { color:#93A9B6; } html.t-gray .row .rpb i { background:#5C7382; } html.t-gray .row .rpb i { background:#93A9B6; } html.t-gray .row.prg.foc, html.t-gray #screen .row.prg.foc { border:2px solid #5C7382; } html.t-gray .row.prg.foc .acc-tx { color:#93A9B6; } html.t-gray .railbrand b { color:#93A9B6; } html.t-gray .railit.cur, html.t-gray .railit.foc { background:#5C7382; } html.t-gray .hero .who { color:#5C7382; } html.t-gray .sp-logo span { color:#5C7382; } html.t-gray .sp-bar i { background:#5C7382; } html.t-gray .row.sel .acc-tx { color:#93A9B6; } html.t-gray .row.sel .rpb i { background:#93A9B6; } html.t-gray .vtop .ic { color:#93A9B6; } html.t-gray .vtop .sfield.foc { border-color:#5C7382; } html.t-gray .vtop .sortch.foc { background:#5C7382; border-color:#5C7382; } html.t-gray .dlg.txt .car { background:#93A9B6; } html.t-gray .row.sta.foc { background:rgba(92,115,130,.22); border-color:#5C7382; } html.t-gray .row.sta.sel { background:rgba(92,115,130,.12); } html.t-gray .rstage .rs-eq i { background:#5C7382; } /* ==== край на генерираното ==== */