/* * animeflv-watch.css — owned by the watch area: the episode page * (frontend/watch + partials/watch/*), animeflv's /ver/-. * * The page emits animeflv's own DOM and classes (.CpCn .CpCnA .Brdcrmb * .CapiTop .CapiTnv .CapiTcn .CapOptns .BtnNw .DwsldCn .ShrCnB .WdgtCn), so * css.css draws almost all of it. What is here: * - the CMS engine's pieces animeflv never had in that DOM: #player inside * #player-wrapper (the .tab-pane), its cover / play button / messages, * prev/next visibility (.af-none), the add-to-list menu on the eye, the * auto play / next / skip and Watch2gether circles, the share links, * "Otros episodios" (#w-episodes in column B, animeflv.ro's browser), * "Últimos episodios" in the right column, the comment-scope pills, * the report dialog's episode line; * - the BS3 `.show{display:block!important}` policy for `.favourite.show`. * Everything is scoped to the engine root #watch-main.layout-page-watchtv * (or #w-report), so the anime page — which shares the root id — is untouched. * The comment thread itself is animeflv-comments.css. */ /* ------------------------------------------------------------- helpers */ .layout-page-watchtv .af-none { display: none !important; } /* ------------------------------------------------- titles / breadcrumb */ .layout-page-watchtv .Brdcrmb strong span, .layout-page-watchtv .CapiTop .Title span, .layout-page-watchtv .CapiTop .SubTitle span { font-weight: inherit; } /* --------------------------------------------------- language drop-down */ .layout-page-watchtv .lang-op .mm-dropdown img { width: 32px; height: 32px; vertical-align: middle; } .layout-page-watchtv .lang-op .mm-dropdown > ul { margin-bottom: 0; box-shadow: none; } /* css.css keeps 165px beside the title for a 190px box: a long CMS title would run under it, so the gutter grows to the box while one is shown. */ @media (min-width: 1020px) { .layout-page-watchtv .CpCnA .CapiTop:has(.mm-dropdown) { padding-right: 205px; } } /* While main.js fetches another episode's server list (animeflv-watch.js). */ .layout-page-watchtv #w-servers { transition: opacity .2s; } .layout-page-watchtv.af-svloading #w-servers { opacity: .5; pointer-events: none; } /* -------------------------------------------------------------- player */ /* #player-wrapper takes the place of animeflv's #video_box (.tab-pane: css.css makes it absolute and 100%). main.js empties #player of all but its iframe and writes .loading / .message into it. */ .layout-page-watchtv #player-wrapper { overflow: hidden; background-color: #000; color: #fff; } .layout-page-watchtv #player { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; } .layout-page-watchtv #player iframe { position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; border: 0; border-radius: inherit; } .layout-page-watchtv .af-cover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; background-position: center; background-size: cover; opacity: .35; } .layout-page-watchtv .af-novideo { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; align-items: center; justify-content: center; padding: 20px; background-color: #000; color: #fff; font-size: 15px; line-height: 20px; text-align: center; } .layout-page-watchtv #player-wrapper.af-noservers .af-novideo { display: flex; } /* The play cover main.js fades in once the episode list has loaded. */ .layout-page-watchtv #player .play { position: absolute; left: 50%; top: 50%; z-index: 3; width: 70px; height: 70px; margin: -35px 0 0 -35px; padding: 0; border: 0; border-radius: 50%; background-color: #01bcf3; color: #fff; font-size: 24px; line-height: 70px; text-align: center; box-shadow: 0 0 0 8px rgba(1, 188, 243, .25), 0 0 30px rgba(0, 0, 0, .5); transition: background-color .2s, transform .2s; } .layout-page-watchtv #player .play:hover { background-color: #00aeed; transform: scale(1.06); } .layout-page-watchtv #player .play i { margin-left: 5px; line-height: 70px; } .layout-page-watchtv #player .loading { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 3px solid rgba(255, 255, 255, .15); border-top-color: #01bcf3; border-radius: 50%; animation: af-spin .8s linear infinite; } .layout-page-watchtv #player .message { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 20px; color: #fff; font-size: 15px; line-height: 20px; text-align: center; } .layout-page-watchtv #player .message:empty:before { content: 'Actualmente no hay vídeos'; } @keyframes af-spin { to { transform: rotate(360deg); } } /* ------------------------------------------------------- options row */ /* Prev / list / next pill: animeflv's first/last-child corners and separators, with a hidden ANTERIOR / SIGUIENTE (.af-none) not counted. */ .layout-page-watchtv .CapNv a.CapNvPv.af-none + a.CapNvLs { border-radius: 20px 0 0 20px; box-shadow: inset -1px 0 0 rgba(0, 0, 0, .2); } .layout-page-watchtv .CapNv a.CapNvLs:has(+ a.CapNvNx.af-none) { border-radius: 0 20px 20px 0; box-shadow: inset 1px 0 0 rgba(0, 0, 0, .2); } .layout-page-watchtv .CapNv a.CapNvPv.af-none + a.CapNvLs:has(+ a.CapNvNx.af-none) { border-radius: 20px; box-shadow: none; } /* 768–1199px: column A/B is 640px at 1020–1199 (500px beside DESCARGAR), ~740px on tablets — too short for animeflv's row plus the CMS's two extra circles (652px). The pill keeps only its arrows (animeflv's own ≤480px look) and the gaps tighten, so the row stays on one line (132 + 118 + 5 × 40 + 7 × 6 = 492px). 1200px+ and phones are unchanged. */ @media (min-width: 768px) and (max-width: 1199px) { .layout-page-watchtv .CapOptns > * { margin-right: 6px; } .layout-page-watchtv .CapNv a.CapNvPv, .layout-page-watchtv .CapNv a.CapNvNx { font-size: 0; } .layout-page-watchtv .CapNv a.CapNvPv { padding-right: 5px; } .layout-page-watchtv .CapNv a.CapNvNx { padding-left: 5px; } } /* bootstrap.css 3's `.show{display:block!important}` (loaded after css.css) beats `.CapOptns>*` on main.js's open `.favourite.show`. */ .layout-page-watchtv .CapOptns > .favourite.show { display: inline-block !important; } /* The eye = add to list (main.js UserFavourite): animeflv's .CVst circle, filled while the anime is in a list; the folder menu in .mm-dropdown's look. */ .layout-page-watchtv .af-CVst { position: relative; } .layout-page-watchtv .af-CVst > .CVst { margin: 0; } .layout-page-watchtv .af-CVst.af-in > .CVst { background-color: #14bbf0; color: #fff; } .layout-page-watchtv .af-CVst > .dropdown-menu { position: absolute; left: 0; top: 100%; z-index: 20; display: none; min-width: 190px; margin: 10px 0 0; padding: 0; border: 0; border-radius: 0; background-color: #fff; box-shadow: 0 0 30px rgba(0, 0, 0, .1); font-size: 12px; text-align: left; } .layout-page-watchtv .af-CVst.show > .dropdown-menu { display: block; } .layout-page-watchtv .af-CVst > .dropdown-menu .dropdown-item { display: block; padding: 5px 15px; border-bottom: 1px solid #eee; color: #666; font-weight: 700; line-height: 32px; text-transform: uppercase; white-space: nowrap; cursor: pointer; } .layout-page-watchtv .af-CVst > .dropdown-menu .dropdown-item:last-child { border-bottom: 0; } .layout-page-watchtv .af-CVst > .dropdown-menu .dropdown-item:hover { background-color: rgba(1, 188, 242, .1); color: #01bcf2; box-shadow: 0 0 30px rgba(1, 188, 242, .4); } .layout-page-watchtv .af-CVst > .dropdown-menu .dropdown-item.active { background-color: #01bcf2; color: #fff; } .layout-page-watchtv .af-CVst > .dropdown-menu .dropdown-item i { margin-right: 5px; } /* The CMS's player settings and Watch2gether: animeflv's 40px white circles (.BtnNw.CVst / .Clgt values from css.css). */ .layout-page-watchtv .BtnNw.af-CfgBtn, .layout-page-watchtv .BtnNw.af-W2g { padding: 0; width: 40px; height: 40px; border-radius: 20px; color: #14bbf0; font-size: 15px; line-height: 40px; text-align: center; white-space: nowrap; cursor: pointer; } .layout-page-watchtv .BtnNw.af-CfgBtn:before, .layout-page-watchtv .BtnNw.af-W2g:before { position: static; width: inherit; height: inherit; line-height: inherit; margin-right: 0; } .layout-page-watchtv .CapOptns > .af-Cfg.show { display: inline-block !important; } .layout-page-watchtv .af-Cfg > .af-CfgBtn { margin: 0; } .layout-page-watchtv .af-Cfg { position: relative; } .layout-page-watchtv .af-Cfg.show > .af-CfgBtn { background-color: #14bbf0; color: #fff; } .layout-page-watchtv .af-Cfg > .af-cfg-menu { position: absolute; right: 0; left: auto; top: 100%; z-index: 20; display: none; width: 260px; margin: 10px 0 0; padding: 5px 0; border: 0; border-radius: 5px; background-color: #fff; box-shadow: 0 0 30px rgba(0, 0, 0, .15); font-size: 12px; line-height: 20px; text-align: left; } .layout-page-watchtv .af-Cfg.show > .af-cfg-menu { display: block; } .layout-page-watchtv .af-cfg-title { padding: 5px 15px; color: #9da1a4; font-size: 10px; font-weight: 700; text-transform: uppercase; } .layout-page-watchtv .af-cfg-row { display: flex; align-items: center; padding: 8px 15px; color: #3b4248; font-weight: 700; cursor: pointer; user-select: none; } /* OnOffControl rewrites the row's inside on click: keep the row itself as the event target, or main.js's dropdown loses track of the menu and closes it. */ .layout-page-watchtv .af-cfg-row > * { pointer-events: none; } .layout-page-watchtv .af-cfg-row:hover { background-color: rgba(1, 188, 242, .1); color: #01bcf2; } .layout-page-watchtv .af-cfg-row i { width: 20px; color: #14bbf0; font-size: 15px; text-align: center; } .layout-page-watchtv .af-cfg-row i:before { margin-right: 0; } .layout-page-watchtv .af-cfg-row .af-cfg-label { flex: 1; margin: 0 10px; } /* The switch: grey track, white knob; cyan when on. */ .layout-page-watchtv .af-sw { position: relative; flex: none; width: 34px; height: 18px; border-radius: 9px; background-color: #d5d9dc; transition: background-color .2s; } .layout-page-watchtv .af-sw:after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background-color: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: left .2s; } .layout-page-watchtv .af-sw.af-on { background-color: #01bcf3; } .layout-page-watchtv .af-sw.af-on:after { left: 18px; } /* ----------------------------------------------------------- downloads */ .layout-page-watchtv #DwsldCn .af-dl-empty td { text-align: center; color: #999; } /* css.css opens the box to max-height:99em (~1485px): an episode with many links (one row each, 40px) was cut off at the bottom. Open = no cap. The closed box is also out of the tab order (its links were focusable). */ .layout-page-watchtv #DwsldCn { visibility: hidden; } .layout-page-watchtv #DwsldCn.show { max-height: none; visibility: visible; } /* Phones: the four columns fit the card instead of hiding DESCARGAR off its right edge (the table still scrolls sideways if a host name is long). */ @media (max-width: 480px) { .layout-page-watchtv #DwsldCn .Dwnl th, .layout-page-watchtv #DwsldCn .Dwnl td { padding-left: 6px; padding-right: 6px; } .layout-page-watchtv #DwsldCn .Dwnl th:first-child, .layout-page-watchtv #DwsldCn .Dwnl td:first-child { padding-left: 10px; } .layout-page-watchtv #DwsldCn .Dwnl td:first-child { word-break: break-word; } } /* --------------------------------------------------------------- share */ .layout-page-watchtv .ShrCnB .List { margin-bottom: 0; } .layout-page-watchtv .ShrCnB .List a { display: block; } .layout-page-watchtv .ShrCnB .List a:before { margin-right: 0; } .layout-page-watchtv .ShrCnB .List a.af-telegram { background-color: #229ed9; } .layout-page-watchtv .ShrCnB .List a.fa-whatsapp { background-color: #25d366; } .layout-page-watchtv .ShrCnB .List a.fa-reddit-alien { background-color: #ff4500; } .layout-page-watchtv .ShrCnB .List a.af-copy { background-color: #3b4248; } .layout-page-watchtv .ShrCnB .List a.af-copy.copied { background-color: #00b046; } .layout-page-watchtv .ShrCnB .List a i { line-height: 50px; } .layout-page-watchtv .ShrCnB .af-sharethis { padding-top: 10px; } /* 1020–1199px: the left column is only ~620px — six squares beside the line would cover it, so they drop under it (as below 767px). */ @media (min-width: 1020px) and (max-width: 1199px) { .layout-page-watchtv .ShrCnB .List.af-share { position: static; } } @media (min-width: 767px) { .layout-page-watchtv .ShrCnB .af-sharethis { position: absolute; right: 0; top: 0; padding-top: 0; } } /* ------------------------------------------------------------ ads */ .layout-page-watchtv .af-ad { margin-bottom: 20px; text-align: center; line-height: 0; } .layout-page-watchtv .af-ad img, .layout-page-watchtv .af-ad iframe { max-width: 100%; } /* ---------------------------------------------- comment scope pills */ .layout-page-watchtv #comments .Top .af-cm-tabs { position: absolute; right: 0; top: 0; font-size: 0; } .layout-page-watchtv #comments .af-cm-tabs .BtnNew { margin: 0 0 0 5px; padding: 0 15px; font-size: 12px; font-weight: 700; cursor: pointer; } .layout-page-watchtv #comments .af-cm-tabs .BtnNew.af-active { background-color: #01bcf2; color: #fff; } /* ------------------------------ "Otros episodios" (column B, owner) */ /* animeflv.ro's compact episode browser (tmp/epfix/ro-ep.html #otros-episodios): a white box between COMPARTIR and the comments, head (title + count | search), a bar of range buttons with "Página X de N" arrows, and a grid of numbered buttons. The box is the engine's #w-episodes; its inside is partials/watch/episodes (also main.js's ajax/episode/list body). Current episode (main.js a.active) #01bcf3. */ .layout-page-watchtv #w-episodes.af-otros { margin: 0 0 20px; padding: 14px 16px 16px; border-radius: 3px; background-color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); } .layout-page-watchtv.af-single-ep #w-episodes.af-otros { display: none; } .layout-page-watchtv .af-otros [class*=fa-]:before { margin-right: 0; } .layout-page-watchtv .af-otros .af-ob-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 10px; } .layout-page-watchtv .af-otros .af-ob-name { flex: 0 1 auto; min-width: 0; } .layout-page-watchtv .af-otros .af-ob-name h2 { margin: 0; padding: 0; color: #343b40; font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: 0; } .layout-page-watchtv .af-otros .af-ob-name > span { display: block; margin: 3px 0 0; color: #929aa0; font-size: 12px; line-height: 1.2; } .layout-page-watchtv .af-otros .af-ob-rel { display: block; margin: 4px 0 0; color: #929aa0; font-size: 11px; font-style: normal; line-height: 1.3; } .layout-page-watchtv .af-otros .af-ob-rel:before { margin-right: 4px; color: #ff7e00; } .layout-page-watchtv .af-otros .af-ob-rel b { color: #51585e; font-weight: 600; } .layout-page-watchtv .af-otros .af-ob-search { position: relative; flex: 0 0 auto; width: 300px; max-width: 100%; } .layout-page-watchtv .af-otros .af-ob-search input { display: block; width: 100%; height: 34px; margin: 0; padding: 0 38px 0 11px; border: 1px solid #e1e5e8; border-radius: 3px; outline: 0; background-color: #fff; box-shadow: none; color: #50575d; font-size: 12px; line-height: 32px; } .layout-page-watchtv .af-otros .af-ob-search input::-webkit-search-cancel-button { display: none; } .layout-page-watchtv .af-otros .af-ob-search input:focus { border-color: #01bcf3; box-shadow: 0 0 0 1px rgba(1, 188, 243, .08); } /* css.css draws every