/* ========================================================================== Oneindia Polls — Desktop page styles Prefix: oi-polls- Tokens come from the inlined :root block in the page . ========================================================================== */ /* Hidden by default on initial load; the infinite-scroll script (in polls-active-list-new.tpl) toggles this with $('#loading_more').show()/ .hide() around its AJAX call. Without this default the plain
has no display rule at all and renders visible before any JS runs. */ #loading_more { display: none; } .oi-polls-shell { max-width: var(--oi-polls-shell); margin: 0 auto 0 auto; padding: 0 24px; } /* --- Breadcrumb ---------------------------------------------------------- */ .oi-polls-crumb { padding: 18px 0 0; font-size: 13px; } .oi-polls-crumb a { display: inline-flex; align-items: center; gap: 5px; color: var(--oi-polls-ink-3); text-decoration: none; } .oi-polls-crumb a:hover { color: var(--oi-polls-accent); } .oi-polls-crumb svg { width: 12px; height: 12px; } /* Category Page only: real breadcrumb trail (Home / {domain}), driven by the existing $breadcrumb variable — the Home Page's crumb never needed a second segment since it has nothing to descend from. */ .oi-polls-crumb__sep { margin: 0 6px; color: var(--oi-polls-ink-4); } .oi-polls-crumb__current { color: var(--oi-polls-ink-3); } /* --- Hero ---------------------------------------------------------------- */ .oi-polls-hero { padding: 14px 0 30px; } .oi-polls-hero__eyebrow { margin: 0 0 10px; font-size: 12px; font-weight: 500; letter-spacing: .34em; text-transform: uppercase; color: var(--oi-polls-ink-4); } .oi-polls-hero__title { margin: 0; max-width: 15ch; font-family: var(--oi-polls-font-display); font-weight: 900; font-size: clamp(48px, 5.4vw, 78px); line-height: .98; letter-spacing: -0.022em; text-transform: uppercase; color: var(--oi-polls-ink); } .oi-polls-hero__sub { margin: 20px 0 0; max-width: 56ch; font-size: 19px; line-height: 1.5; color: var(--oi-polls-ink-4); } /* --- Category filter ----------------------------------------------------- */ .oi-polls-filter { position: sticky; top: 68px; z-index: 40; padding: 16px 0; background: var(--oi-polls-bg); border-top: 1px solid var(--oi-polls-line); border-bottom: 1px solid var(--oi-polls-line); } .oi-polls-filter__track { display: flex; flex-wrap: wrap; gap: 10px; } a.oi-polls-pill { display: inline-flex; align-items: center; text-decoration: none; } .oi-polls-pill { height: 34px; padding: 0 18px; background: var(--oi-polls-surface); border: 1px solid var(--oi-polls-line); border-radius: 999px; font: inherit; font-size: 14px; font-weight: 400; letter-spacing: .04em; color: var(--oi-polls-ink-2); cursor: pointer; white-space: nowrap; transition: border-color .14s ease, color .14s ease; } .oi-polls-pill:hover { border-color: var(--oi-polls-ink-4); } .oi-polls-pill:focus-visible { outline: 2px solid var(--oi-polls-accent); outline-offset: 2px; } .oi-polls-pill[aria-selected="true"], .oi-polls-pill[aria-current="page"] { background: var(--oi-polls-accent); border-color: var(--oi-polls-accent); color: var(--oi-polls-accent-ink); font-weight: 500; text-transform: uppercase; } /* --- Card grid (CSS multicolumn = true ragged masonry, zero JS) ----------- */ .oi-polls-grid { padding: 26px 0 10px; columns: 3; column-gap: 22px; /* Skip layout/paint for off-screen cards on long lists */ content-visibility: auto; contain-intrinsic-size: auto 1600px; } .oi-polls-grid--single { columns: 1; max-width: 748px; margin: 0 auto; } .oi-polls-card { position: relative; break-inside: avoid; margin: 0 0 22px; padding: 22px 22px 8px; background: var(--oi-polls-surface); border: 1px solid var(--oi-polls-line); border-radius: var(--oi-polls-radius-card); transition: box-shadow .18s ease, transform .18s ease; } /* Voting-in-progress overlay: covers only this card (not the page), blocks clicks on the other options underneath it, cleared as soon as the AJAX response arrives — see castVote() in oi-polls.js. */ .oi-polls-card__overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; background: rgb(255 255 255 / 72%); border-radius: inherit; } .oi-polls-card__overlay img { width: 40px; height: 40px; } .oi-polls-card:hover { box-shadow: 0 14px 34px -18px rgb(16 20 24 / 20%); } /* Voted card lifts, matching the design's raised state */ .oi-polls-card.is-voted { box-shadow: 0 18px 44px -20px rgb(16 20 24 / 26%); } .oi-polls-card__q { margin: 0 0 24px; font-size: 20px; font-weight: 600; line-height: 118%; letter-spacing: -0.008em; color: var(--oi-polls-ink); } .oi-polls-card--lead .oi-polls-card__q { font-size: 21px; line-height: 1.32; margin-bottom: 22px; } .oi-polls-card__q a { color: inherit; text-decoration: none; } .oi-polls-card__q a:hover { text-decoration: underline; text-underline-offset: 3px; } /* --- Options ------------------------------------------------------------- */ .oi-polls-opts { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; } .oi-polls-opt__btn { position: relative; isolation: isolate; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px; padding: 10px 14px; background: var(--oi-polls-surface); border: 1px solid var(--oi-polls-line); border-radius: var(--oi-polls-radius-opt); font: inherit; font-size: 18px; color: var(--oi-polls-ink-2); text-align: left; cursor: pointer; overflow: hidden; transition: border-color .14s ease, background-color .14s ease; } .oi-polls-opt__btn:hover { border-color: var(--oi-polls-ink-4); } .oi-polls-opt__btn:focus-visible { outline: 2px solid var(--oi-polls-accent); outline-offset: 1px; } /* Result bar — width driven by the --oi-polls-pct custom property */ .oi-polls-opt__bar { position: absolute; inset: 0 auto 0 0; z-index: -1; width: 0; background: var(--oi-polls-bar); transition: width .62s cubic-bezier(.2, .7, .2, 1); } .is-voted .oi-polls-opt__bar { width: var(--oi-polls-pct, 0%); } .oi-polls-opt__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--oi-polls-dot); } .oi-polls-opt__btn[aria-checked="true"] .oi-polls-opt__dot { background: var(--oi-polls-ink); box-shadow: 0 0 0 3px rgb(16 20 24 / 8%); } .oi-polls-opt__label { flex: 1; min-width: 0; line-height: 1.35; } .oi-polls-opt__btn[aria-checked="true"] .oi-polls-opt__label { color: var(--oi-polls-ink); } .oi-polls-opt__pct { flex: none; opacity: 0; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--oi-polls-ink-2); transition: opacity .28s ease .18s; } .is-voted .oi-polls-opt__pct { opacity: 1; } /* Once voted, options stop reading as tappable */ .is-voted .oi-polls-opt__btn { cursor: default; border-color: var(--oi-polls-line); } /* --- Card footer --------------------------------------------------------- */ .oi-polls-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 16px; padding: 14px 0; border-top: 1px solid var(--oi-polls-line-soft); } .oi-polls-card__votes { margin: 0; display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--oi-polls-ink-4); font-variant-numeric: tabular-nums; } .oi-polls-card__votes b { font-weight: 500; color: var(--oi-polls-ink-3); } .oi-polls-card__actions { display: flex; align-items: center; gap: 14px; } .oi-polls-card__voted { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--oi-polls-ink-5); } .oi-polls-card__voted[hidden] { display: none; } .oi-polls-card__voted svg { width: 13px; height: 13px; } /* --- Share: single icon that expands into the social row ----------------- */ .oi-polls-share { display: flex; align-items: center; gap: 6px; } .oi-polls-share__btn { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; background: none; border: 0; border-radius: 50%; color: var(--oi-polls-ink-4); cursor: pointer; transition: color .14s ease, background-color .14s ease; } .oi-polls-share__btn:hover { color: var(--oi-polls-ink); background: var(--oi-polls-bg); } .oi-polls-share__btn:focus-visible { outline: 2px solid var(--oi-polls-accent); outline-offset: 1px; } .oi-polls-share__btn svg { width: 17px; height: 17px; } .oi-polls-share__panel { display: flex; align-items: center; gap: 6px; } .oi-polls-share__panel[hidden] { display: none; } .oi-polls-share__link { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--oi-polls-ink); text-decoration: none; transition: background-color .14s ease, opacity .14s ease; animation: oi-polls-pop .22s cubic-bezier(.2, .8, .2, 1) both; } .oi-polls-share__link:hover { background: var(--oi-polls-bg); } .oi-polls-share__link:nth-child(2) { animation-delay: .04s; } .oi-polls-share__link:nth-child(3) { animation-delay: .08s; } .oi-polls-share__link svg { width: 17px; height: 17px; } .oi-polls-share__close { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; background: var(--oi-polls-bar); border: 0; border-radius: 50%; color: var(--oi-polls-ink-3); cursor: pointer; } .oi-polls-share__close:hover { color: var(--oi-polls-ink); } .oi-polls-share__close svg { width: 11px; height: 11px; } @keyframes oi-polls-pop { from { opacity: 0; transform: translateX(6px) scale(.86); } to { opacity: 1; transform: none; } } /* --- More Polls (detail page) -------------------------------------------- */ .oi-polls-more { max-width: 748px; margin: 0 auto; padding: 34px 0 0; } /* Poll Landing/Detail Page only: below are additions not present in the original new-design/web mockup (landing.html has no answer-opinion, Google-ad, or "already voted" status equivalents to copy from — these reuse the mockup's existing card/typography tokens rather than inventing a new visual language). */ /* Ad slot wrapper — cosmetic centering only; the ad code/ids inside polls-ad-right.tpl / polls-ad-right-bottom.tpl are untouched. */ .oi-polls-ad-slot { max-width: 748px; margin: 24px auto; text-align: center; } /* Per-answer "opinion" text (old .poll-description block) */ .oi-polls-opinions { max-width: 748px; margin: 0 auto; } .oi-polls-opinions__item { padding: 16px 0; border-bottom: 1px solid var(--oi-polls-line); } .oi-polls-opinions__item:last-child { border-bottom: none; } .oi-polls-opinions__q { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--oi-polls-ink); } .oi-polls-opinions__desc { margin: 0; font-size: 14px; line-height: 1.6; color: var(--oi-polls-ink-3); } /* Poll-result status line (Thank you for voting / already voted / closed) */ .oi-polls-status { max-width: 748px; margin: 14px auto 0; font-size: 13px; font-weight: 500; color: var(--oi-polls-ink-3); } .oi-polls-more__title { margin: 0 0 18px; font-size: 22px; font-weight: 700; letter-spacing: -0.015em; color: var(--oi-polls-ink); } .oi-polls-more__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start; } .oi-polls-more__item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 15px 16px; background: var(--oi-polls-rose); border: 1px solid var(--oi-polls-rose-line); border-radius: 10px; text-decoration: none; transition: border-color .16s ease, transform .16s ease; } .oi-polls-more__item:hover { border-color: var(--oi-polls-rose-line-hi); transform: translateY(-1px); } .oi-polls-more__item:focus-visible { outline: 2px solid var(--oi-polls-accent); outline-offset: 2px; } .oi-polls-more__q { display: block; font-size: 18px; line-height: 130%; font-weight: 400; color: var(--oi-polls-ink-6); } .oi-polls-more__meta { display: flex; align-items: center; gap: 6px; margin-top: 7px; font-size: 14px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--oi-polls-ink-4); } .oi-polls-more__meta i { width: 5px; height: 5px; border-radius: 50%; background: var(--oi-polls-ink-4); } .oi-polls-more__chev { grid-row: 1 / -1; grid-column: 2; width: 16px; height: 16px; color: var(--oi-polls-ink-3); } /* --- Load more ----------------------------------------------------------- */ .oi-polls-loadmore { display: flex; justify-content: center; padding: 32px 0 0; } .oi-polls-loadmore__btn { height: 38px; padding: 7px 22px; background: var(--oi-polls-surface); border: 1px solid var(--oi-polls-link); border-radius: 999px; font: inherit; font-size: 14px; color: var(--oi-polls-link); cursor: pointer; transition: background-color .14s ease, color .14s ease; } .oi-polls-loadmore__btn:hover { background: var(--oi-polls-link); color: #fff; } .oi-polls-loadmore__btn:focus-visible { outline: 2px solid var(--oi-polls-accent); outline-offset: 2px; } .oi-polls-loadmore__btn[disabled] { opacity: .5; cursor: default; } /* --- Empty state --------------------------------------------------------- */ .oi-polls-empty { padding: 56px 0 40px; text-align: center; color: var(--oi-polls-ink-3); font-size: 15px; } .oi-polls-empty[hidden] { display: none; } /* --- Utilities ----------------------------------------------------------- */ .oi-polls-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- Narrower desktops / tablets ---------------------------------------- */ @media (max-width: 1080px) { .oi-polls-grid { columns: 2; } } @media (max-width: 760px) { .oi-polls-grid { columns: 1; } .oi-polls-more__grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .oi-polls-opt__bar, .oi-polls-opt__pct, .oi-polls-card, .oi-polls-more__item, .oi-polls-share__link { transition: none; animation: none; } } /* ========================================================================== Isotope masonry integration (added while porting this file for polls-active-list-new.tpl / polls-active-list-inner-new.tpl). The legacy home page and its "load more" infinite scroll are driven by jQuery Isotope in masonry mode against #article-container / .article-contentmain (see the inline script kept verbatim in polls-active-list-new.tpl). Isotope absolutely-positions each .article-contentmain based on its measured outerWidth, which is incompatible with this file's original CSS-multicolumn `.oi-polls-grid` layout (columns: 3). Without an explicit width, Isotope-positioned items collapse/overlap. These rules give the wrapper the width Isotope needs while leaving all .oi-polls-card visual styling above untouched. Not present in the original new-design/web mockup. ========================================================================== */ #article-container { position: relative; } .article-contentmain { float: left; width: 31.33%; margin: 0 1% 22px; } .article-contentmain.add { width: 300px; } @media (max-width: 1080px) { .article-contentmain { width: 48%; } } @media (max-width: 760px) { .article-contentmain { width: 98%; } } /* Real, server-rendered vote links (polls-active-list-new.tpl / polls-active-list-inner-new.tpl). Visual parity with .oi-polls-opt__btn, but a distinct class: these are plain navigations that perform the actual vote server-side, so they intentionally do NOT match `.oi-polls-opt__btn`, the selector oi-polls.js uses to wire up its client-side vote simulation (which needs data-votes counts this app does not expose at the list-page level). Keeping them visually and semantically separate avoids fabricating fake vote percentages. */ .oi-polls-opt__link { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 44px; padding: 10px 14px; background: var(--oi-polls-surface); border: 1px solid var(--oi-polls-line); border-radius: var(--oi-polls-radius-opt); font: inherit; font-size: 18px; color: var(--oi-polls-ink-2); text-decoration: none; transition: border-color .14s ease, background-color .14s ease; } .oi-polls-opt__link:hover { border-color: var(--oi-polls-ink-4); background: var(--oi-polls-bg); } .oi-polls-opt__link:focus-visible { outline: 2px solid var(--oi-polls-accent); outline-offset: 1px; } .oi-polls-card__foot { justify-content: flex-end; } .isotope { margin: 26px 0 10px; }