/*CSS*//* 24 Bangla News – Pro Admin (orange / ink bento style)
Only colours, radii and shadows are changed on Blogger's own elements so the
layout and every control keep working. */
html.bpa{
--bpa-bg:#f1f0ec; --bpa-paper:#fff; --bpa-paper2:#f6f5f2; --bpa-ink:#121212;
--bpa-line:rgba(18,18,18,.08); --bpa-muted:#6b6b6b; --bpa-accent:#ff4d1f; --bpa-accent-soft:#fff0ea;
--bpa-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 28px -16px rgba(0,0,0,.22);
}
html.bpa body{background:var(--bpa-bg)!important;
background-image:radial-gradient(rgba(18,18,18,.07) 1px,transparent 1.2px)!important;background-size:22px 22px!important}
/* ---------- top bar ---------- */
html.bpa header[role=banner]{background:rgba(255,255,255,.92)!important;backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--bpa-line),0 10px 30px -22px rgba(0,0,0,.35)!important;border-bottom:0!important}
html.bpa .bpa-search{background:var(--bpa-paper2)!important;border:1px solid var(--bpa-line)!important;border-radius:999px!important;box-shadow:none!important;transition:box-shadow .2s,border-color .2s}
html.bpa .bpa-search:focus-within{background:#fff!important;border-color:var(--bpa-accent)!important;box-shadow:0 0 0 4px rgba(255,77,31,.12)!important}
/* ---------- dark sidebar ---------- */
html.bpa [role=dialog][aria-label="navigational drawer"],
html.bpa [role=dialog][aria-label="navigational drawer"] gm-raised-drawer{background:var(--bpa-ink)!important;color:#d6d6d2!important;border-right:0!important;box-shadow:none!important}
html.bpa [role=dialog][aria-label="navigational drawer"] *:not(.bpa-new):not(.bpa-on a){background-color:transparent!important;color:inherit!important;border-color:rgba(255,255,255,.08)!important}
html.bpa [role=dialog][aria-label="navigational drawer"] svg,
html.bpa [role=dialog][aria-label="navigational drawer"] svg path:not([fill=none]){fill:currentColor!important}
html.bpa [role=dialog][aria-label="navigational drawer"] hr,
html.bpa [role=dialog][aria-label="navigational drawer"] [role=separator]{background:rgba(255,255,255,.08)!important}
html.bpa [aria-label="Blog Menu"]{width:100%!important}
html.bpa [aria-label="Blog Menu"] [role=menuitem] a{border-radius:12px!important;margin:2px 12px!important;width:calc(100% - 24px)!important;box-sizing:border-box!important;color:#c9c9c4!important;transition:background .2s,color .2s}
html.bpa [aria-label="Blog Menu"] [role=menuitem] a:hover{background:rgba(255,255,255,.07)!important;color:#fff!important}
html.bpa [aria-label="Blog Menu"] [role=menuitem].bpa-on a,
html.bpa [aria-label="Blog Menu"] [role=menuitem].bpa-on a:hover{background:var(--bpa-accent)!important;color:#fff!important;box-shadow:0 10px 22px -10px rgba(255,77,31,.9)}
html.bpa [aria-label="Blog Menu"] .bpa-on a *{color:#fff!important}
html.bpa .bpa-new{color:#fff!important;background:var(--bpa-accent)!important;border:0!important;border-radius:999px!important;box-shadow:0 10px 22px -10px rgba(255,77,31,.9)!important;transition:transform .2s}
html.bpa .bpa-new *{color:#fff!important;background-color:transparent!important}
html.bpa .bpa-new:hover{transform:translateY(-1px)}
/* ---------- notices ---------- */
html.bpa .bpa-notice{background:#fff!important;border:1px solid var(--bpa-line)!important;border-left:4px solid var(--bpa-accent)!important;border-radius:14px!important;margin:0 0 8px!important;box-shadow:var(--bpa-shadow)!important;color:#3a3a3a!important}
html.bpa .bpa-notice.bpa-info{border-left-color:var(--bpa-ink)!important}
/* ---------- post list ---------- */
html.bpa .bpa-row{background:#fff!important;border:1px solid var(--bpa-line)!important;border-radius:16px!important;margin:0 0 10px!important;box-shadow:var(--bpa-shadow);position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s}
html.bpa .bpa-row *{border-color:transparent!important}
html.bpa .bpa-row:hover{transform:translateY(-1px);border-color:rgba(255,77,31,.35)!important;box-shadow:0 18px 36px -20px rgba(0,0,0,.35)}
html.bpa .bpa-row::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:var(--bpa-accent);opacity:0;transition:opacity .2s;z-index:1}
html.bpa .bpa-row:hover::before{opacity:1}
html.bpa .bpa-row img{border-radius:10px!important}
html.bpa .bpa-st{display:inline-block!important;padding:1px 10px!important;border-radius:999px!important;font-weight:700!important;font-size:11.5px!important;letter-spacing:.02em;line-height:1.7!important}
html.bpa .bpa-st-draft{background:var(--bpa-accent-soft)!important;color:var(--bpa-accent)!important}
html.bpa .bpa-st-published{background:#e8f7ee!important;color:#15803d!important}
html.bpa .bpa-st-scheduled{background:#eef0ff!important;color:#4338ca!important}
/* ---------- KPI bento strip ---------- */
#bpa-kpi{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin:6px 0 18px;font-family:'Segoe UI','Hind Siliguri',system-ui,sans-serif}
#bpa-kpi .k{background:#fff;border:1px solid var(--bpa-line);border-radius:20px;padding:16px 18px;box-shadow:var(--bpa-shadow);display:flex;flex-direction:column;gap:2px;min-width:0;position:relative;overflow:hidden}
#bpa-kpi small{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--bpa-muted)}
#bpa-kpi b{font-size:30px;font-weight:900;letter-spacing:-.03em;line-height:1.15;color:var(--bpa-ink)}
#bpa-kpi b.sm{font-size:18px;letter-spacing:0;margin-top:4px}
#bpa-kpi span{font-size:12.5px;color:var(--bpa-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bpa-kpi .ink{background:var(--bpa-ink);border-color:var(--bpa-ink)}
#bpa-kpi .ink b{color:var(--bpa-accent)}#bpa-kpi .ink small,#bpa-kpi .ink span{color:#9b9b96}
#bpa-kpi .glow{background:radial-gradient(120% 120% at 20% 120%,#ff4d1f 0%,#b52c0b 35%,#161616 75%);border-color:transparent}
#bpa-kpi .glow b{color:#fff}#bpa-kpi .glow small,#bpa-kpi .glow span{color:rgba(255,255,255,.7)}
#bpa-kpi .acts{grid-column:span 2}
#bpa-kpi .btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
#bpa-kpi .btns a,#bpa-kpi .btns button{font:600 12.5px 'Segoe UI',system-ui,sans-serif;padding:6px 12px;border-radius:999px;border:1px solid var(--bpa-line);background:var(--bpa-paper2);color:var(--bpa-ink);cursor:pointer;text-decoration:none;transition:.2s}
#bpa-kpi .btns .pri{background:var(--bpa-accent);border-color:var(--bpa-accent);color:#fff}
#bpa-kpi .btns a:hover,#bpa-kpi .btns button:hover{background:var(--bpa-ink);border-color:var(--bpa-ink);color:#fff}
@media (max-width:1500px){#bpa-kpi{grid-template-columns:repeat(3,minmax(0,1fr))}#bpa-kpi .acts{grid-column:span 3}}
@media (max-width:700px){#bpa-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}#bpa-kpi .acts{grid-column:span 2}}
/* ---------- scrollbars ---------- */
html.bpa ::-webkit-scrollbar{width:10px;height:10px}
html.bpa ::-webkit-scrollbar-thumb{background:rgba(18,18,18,.18);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
html.bpa ::-webkit-scrollbar-thumb:hover{background:var(--bpa-accent);background-clip:padding-box}
/*JS*/window.chrome=window.chrome||{};chrome.runtime={lastError:null,sendMessage:function(m,cb){setTimeout(function(){cb({published:253,comments:0,pages:0,latest:'2022-05-17T06:25:00Z',latestTitle:'TEST STUB'})},300)}};// 24 Bangla News – Pro Admin
// Blogger's class names are obfuscated and change often, so everything here is
// located by ARIA roles/labels, visible text and geometry, then tagged with our
// own `bpa-*` classes that admin.css styles. Purely cosmetic: no Blogger data or
// behaviour is changed.
(() => {
const root = document.documentElement;
root.classList.add('bpa');
const SECTION_LABEL = {
posts: 'Posts', stats: 'Stats', comments: 'Comments', earnings: 'Earnings',
pages: 'Pages', layout: 'Layout', themes: 'Theme', settings: 'Settings',
};
const $ = (s, c = document) => c.querySelector(s);
const $$ = (s, c = document) => [...c.querySelectorAll(s)];
const leaves = (c, re) => $$('*', c).filter((e) => e.children.length === 0 && re.test(e.textContent.trim()));
// Blogger keeps previously visited pages in the DOM, hidden; only use what's on screen.
const visible = (e) => { const r = e.getBoundingClientRect(); return r.width > 0 && r.height > 0 && r.right > 0; };
const bn = (n) => String(n).replace(/\d/g, (x) => '০১২৩৪৫৬৭৮৯'[x]);
const blogId = () => (location.pathname.match(/\/(\d{8,})/) || [])[1];
const section = () => (location.pathname.match(/^\/blog\/([a-z]+)/) || [])[1] || (location.pathname.startsWith('/readinglist') ? 'readinglist' : '');
const isWhite = (el) => /^rgba?\(255, 255, 255(, 1)?\)$/.test(getComputedStyle(el).backgroundColor);
// Blogger keeps old (hidden) drawers around after in-app navigation, so
// prefer the one that is actually on screen.
const drawers = () => $$('[role=dialog][aria-label="navigational drawer"]');
const drawer = () => drawers().find((d) => d.getBoundingClientRect().right > 0) || drawers()[0];
/* ---------- sidebar: active item, New Post ---------- */
function styleDrawer() {
const want = SECTION_LABEL[section()] || (section() === 'readinglist' ? 'Reading List' : '');
drawers().forEach((dr) => {
$$('[role=menuitem]', dr).forEach((it) => it.classList.toggle('bpa-on', it.getAttribute('aria-label') === want));
$$('[role=button]', dr).forEach((btn) => { if (/new post/i.test(btn.textContent)) btn.classList.add('bpa-new'); });
});
}
/* ---------- header search pill ---------- */
function styleHeader() {
const input = $('header[role=banner] input[role=combobox]');
if (!input || $('.bpa-search')) return;
let el = input.parentElement;
for (let i = 0; i < 5 && el; i++, el = el.parentElement) {
const bg = getComputedStyle(el).backgroundColor;
if (bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') { el.classList.add('bpa-search'); break; }
}
}
/* ---------- let the page background show through white wrappers ---------- */
function flatten() {
const anchors = [$$('[role=list]').find(visible), $('[role=main]'), document.elementFromPoint(innerWidth * 0.62, Math.min(240, innerHeight / 2))];
anchors.forEach((a) => {
for (let el = a; el && el !== document.body; el = el.parentElement) {
if (el.dataset.bpaFlat || el.closest('header, [role=dialog]')) continue;
const r = el.getBoundingClientRect();
if (r.width > innerWidth * 0.5 && isWhite(el)) { el.style.setProperty('background-color', 'transparent', 'important'); el.dataset.bpaFlat = '1'; }
}
});
}
/* ---------- notices ---------- */
function styleNotices() {
$$('[role=region]').forEach((reg) => {
$$('div', reg).forEach((el) => {
if (el.dataset.bpaN) return;
const bg = getComputedStyle(el).backgroundColor.match(/\d+/g);
if (!bg || bg.length < 3) return;
const [r, g, b] = bg.map(Number);
if (r === 255 && g === 255 && b === 255) return;
if (r > 240 && g > 220 && b < 200) { el.classList.add('bpa-notice', 'bpa-warn'); el.dataset.bpaN = 1; }
else if (b > r && b > 230) { el.classList.add('bpa-notice', 'bpa-info'); el.dataset.bpaN = 1; }
});
});
}
/* ---------- post rows + status badges ---------- */
function styleRows() {
$$('[role=list]').forEach((list) => [...list.children].forEach((row) => {
if (!$('[role=listitem]', row) && row.getAttribute('role') !== 'listitem') return;
row.classList.add('bpa-row');
leaves(row, /^(Draft|Published|Scheduled)$/).forEach((s) => {
if (s.classList.contains('bpa-st')) return;
s.classList.add('bpa-st', 'bpa-st-' + s.textContent.trim().toLowerCase());
});
}));
}
/* ---------- KPI bento strip on the Posts page ---------- */
const stats = {};
let allCount = null;
function blogUrl() {
const a = $$('a', drawer() || document).find((x) => /view blog/i.test(x.textContent));
return a && a.href;
}
function kpiStrip() {
if (section() !== 'posts') { const old = $('#bpa-kpi'); if (old) old.remove(); return; }
const allEl = leaves(document.body, /^All \((\d+)\)$/).find(visible);
if (allEl) allCount = +allEl.textContent.match(/\d+/)[0];
// Sit above the notices when they exist, otherwise above the list toolbar.
let bar = leaves(document.body, /^Notices \(\d+\)$/).find(visible) || allEl || $$('[role=list]').find(visible);
while (bar && bar.getBoundingClientRect().width < 700) bar = bar.parentElement;
if (!bar || !bar.parentElement) return;
let strip = $('#bpa-kpi');
if (!strip) {
strip = document.createElement('section');
strip.id = 'bpa-kpi';
strip.innerHTML = `
মোট পোস্ট–পাবলিশড + ড্রাফট
Published–লাইভ পোস্ট
Draft / Scheduled–অপ্রকাশিত
Comments–সব পোস্ট মিলিয়ে
সর্বশেষ পোস্ট–
`;
$('[data-a=new]', strip).addEventListener('click', () => { const n = $('.bpa-new'); if (n) n.click(); });
}
if (strip.nextElementSibling !== bar) bar.parentElement.insertBefore(strip, bar);
const id = blogId(), url = blogUrl();
$('[data-a=stats]', strip).href = id ? `/blog/stats/week/${id}` : '#';
$('[data-a=theme]', strip).href = id ? `/blog/themes/${id}` : '#';
if (url) $('[data-a=view]', strip).href = url;
if (url && !stats[url]) {
stats[url] = 'loading';
chrome.runtime.sendMessage({ type: 'bpa-stats', blogUrl: url.replace(/\/$/, '/') }, (res) => {
if (chrome.runtime.lastError || !res) { delete stats[url]; return; }
stats[url] = res; fillKpi();
});
}
fillKpi();
}
function fillKpi() {
const strip = $('#bpa-kpi');
if (!strip) return;
const s = stats[blogUrl()] || {};
const set = (k, v) => { const el = $(`[data-k=${k}]`, strip); if (el && v != null && v === v) el.textContent = v; };
if (allCount != null) set('all', bn(allCount));
if (typeof s === 'object') {
if (Number.isFinite(s.published)) set('pub', bn(s.published));
if (Number.isFinite(s.published) && allCount != null) set('draft', bn(Math.max(0, allCount - s.published)));
if (Number.isFinite(s.comments)) set('com', bn(s.comments));
if (s.latest) set('last', new Date(s.latest).toLocaleDateString('bn-BD', { day: 'numeric', month: 'short', year: 'numeric' }));
if (s.latestTitle) set('lastT', s.latestTitle);
}
}
/* ---------- run on load and whenever Blogger re-renders ---------- */
let queued = false;
function apply() {
queued = false;
if (!document.body) return;
try { styleDrawer(); styleHeader(); styleNotices(); styleRows(); kpiStrip(); flatten(); } catch (e) { console.warn('[bpa]', e); }
}
const schedule = () => { if (!queued) { queued = true; setTimeout(apply, 120); } };
new MutationObserver(schedule).observe(document.documentElement, { childList: true, subtree: true });
addEventListener('resize', () => { $$('[data-bpa-flat]').forEach((e) => { e.style.removeProperty('background-color'); delete e.dataset.bpaFlat; }); schedule(); });
document.addEventListener('DOMContentLoaded', schedule);
})();