Skip to content

Commit 43c3879

Browse files
theesfeldtheesfeld
committed
flag coloring
1 parent 2617fa3 commit 43c3879

2 files changed

Lines changed: 148 additions & 11 deletions

File tree

‎CleanX-user.js‎

Lines changed: 74 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -736,7 +736,10 @@
736736
overlay.id = id;
737737
overlay.textContent = flag;
738738
overlay.style =
739-
"position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:96px;opacity:0.08;pointer-events:none;user-select:none;filter:saturate(0.9);z-index:1;";
739+
"position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:220px;opacity:0.11;pointer-events:none;user-select:none;filter:saturate(0.9);z-index:1;overflow:hidden;line-height:1;";
740+
overlay.style.width = "100%";
741+
overlay.style.height = "100%";
742+
overlay.style.transform = "scale(1.1)";
740743
tweet.appendChild(overlay);
741744
tweet.dataset.xcbOverlayId = id;
742745
}
@@ -866,14 +869,19 @@
866869
tweet.dataset.xcbPrevPosition = tweet.style.position || "";
867870
tweet.style.position = "relative";
868871
}
869-
tweet.style.setProperty("outline", "3px solid #ff4d4f", "important");
872+
const palette = flagPalette(countryCode);
873+
tweet.style.setProperty(
874+
"outline",
875+
`3px solid ${palette.primary}`,
876+
"important",
877+
);
870878
tweet.style.setProperty("outline-offset", "2px", "important");
871879
tweet.style.setProperty(
872880
"box-shadow",
873-
"0 0 0 3px rgba(255,77,79,0.35)",
881+
`0 0 0 3px ${palette.shadow}`,
874882
"important",
875883
);
876-
tweet.style.setProperty("background-color", "rgba(255,77,79,0.12)", "important");
884+
tweet.style.setProperty("background-color", palette.background, "important");
877885

878886
const badge = document.createElement("div");
879887
const badgeId = `xcb-badge-${Math.random().toString(36).slice(2, 9)}`;
@@ -1289,7 +1297,7 @@
12891297
btn.setAttribute("role", "button");
12901298
btn.href = "javascript:void(0)";
12911299
btn.innerHTML =
1292-
'<span class="xcb-icon" style="font-size:22px;line-height:22px;color:#fff;">🚫</span><span class="xcb-label" style="font-size:18px;font-weight:700;">Blocker</span>';
1300+
'<span class="xcb-icon" style="font-size:22px;line-height:22px;color:#fff;">🚫</span><span class="xcb-label" style="font-size:18px;font-weight:700;">CleanX</span>';
12931301
btn.style =
12941302
"display:flex;align-items:center;gap:14px;padding:12px;border-radius:9999px;color:#e7e9ea;text-decoration:none;font-size:17px;font-weight:700;cursor:pointer;max-width:260px;min-width:52px;box-sizing:border-box;";
12951303
btn.onmouseenter = () => {
@@ -1310,9 +1318,17 @@
13101318
}
13111319
};
13121320
const label = btn.querySelector(".xcb-label");
1313-
if (label) {
1321+
const updateLabelVisibility = () => {
1322+
if (!label) return;
13141323
label.style.display =
13151324
(nav.getBoundingClientRect().width || 0) > 80 ? "inline" : "none";
1325+
};
1326+
updateLabelVisibility();
1327+
if (typeof ResizeObserver !== "undefined") {
1328+
const ro = new ResizeObserver(updateLabelVisibility);
1329+
ro.observe(nav);
1330+
} else {
1331+
window.addEventListener("resize", updateLabelVisibility);
13161332
}
13171333
if (btn.parentElement !== parent) {
13181334
if (moreEntry && moreEntry.parentElement === parent) {
@@ -1593,3 +1609,55 @@
15931609
"X Country Blocker v5.1 (CLEAN) ready — nothing blocked until you add it",
15941610
);
15951611
})();
1612+
function flagPalette(code) {
1613+
const c = (code || "").toUpperCase();
1614+
const table = {
1615+
US: { primary: "#b22234", secondary: "#3c3b6e" },
1616+
CA: { primary: "#d52b1e", secondary: "#ffffff" },
1617+
GB: { primary: "#c8102e", secondary: "#012169" },
1618+
FR: { primary: "#0055a4", secondary: "#ef4135" },
1619+
DE: { primary: "#000000", secondary: "#d00" },
1620+
IT: { primary: "#009246", secondary: "#ce2b37" },
1621+
ES: { primary: "#aa151b", secondary: "#f1bf00" },
1622+
NL: { primary: "#ae1c28", secondary: "#21468b" },
1623+
SE: { primary: "#006aa7", secondary: "#fecc00" },
1624+
NO: { primary: "#ba0c2f", secondary: "#00205b" },
1625+
FI: { primary: "#003580", secondary: "#ffffff" },
1626+
DK: { primary: "#c8102e", secondary: "#ffffff" },
1627+
RU: { primary: "#0039a6", secondary: "#d52b1e" },
1628+
UA: { primary: "#0057b7", secondary: "#ffd700" },
1629+
PL: { primary: "#dc143c", secondary: "#ffffff" },
1630+
CN: { primary: "#de2910", secondary: "#ffde00" },
1631+
JP: { primary: "#ffffff", secondary: "#bc002d" },
1632+
KR: { primary: "#003478", secondary: "#c60c30" },
1633+
AU: { primary: "#00247d", secondary: "#ff0000" },
1634+
NZ: { primary: "#00247d", secondary: "#ff0000" },
1635+
BR: { primary: "#009c3b", secondary: "#ffdf00" },
1636+
MX: { primary: "#006341", secondary: "#ce1126" },
1637+
AR: { primary: "#74acdf", secondary: "#f6b40e" },
1638+
IN: { primary: "#ff9933", secondary: "#128807" },
1639+
SA: { primary: "#006c35", secondary: "#ffffff" },
1640+
IL: { primary: "#0038b8", secondary: "#ffffff" },
1641+
IR: { primary: "#239f40", secondary: "#da0000" },
1642+
TR: { primary: "#e30a17", secondary: "#ffffff" },
1643+
ZA: { primary: "#007749", secondary: "#ffb612" },
1644+
NG: { primary: "#008753", secondary: "#ffffff" },
1645+
KE: { primary: "#006600", secondary: "#b22222" },
1646+
EG: { primary: "#ce1126", secondary: "#000000" },
1647+
ID: { primary: "#ce1126", secondary: "#ffffff" },
1648+
PH: { primary: "#0038a8", secondary: "#ce1126" },
1649+
SG: { primary: "#e0001b", secondary: "#ffffff" },
1650+
TH: { primary: "#2d2a4a", secondary: "#a51931" },
1651+
VN: { primary: "#da251d", secondary: "#ffde00" },
1652+
};
1653+
const entry = table[c] || table[(c || "").slice(0, 2)] || {
1654+
primary: "#ff4d4f",
1655+
secondary: "#ffffff",
1656+
};
1657+
return {
1658+
primary: entry.primary,
1659+
secondary: entry.secondary,
1660+
shadow: `${entry.primary}55`,
1661+
background: `${entry.secondary}1f`,
1662+
};
1663+
}

‎extension/content.js‎

Lines changed: 74 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -709,6 +709,59 @@
709709
return;
710710
}
711711

712+
function flagPalette(code) {
713+
const c = (code || "").toUpperCase();
714+
const table = {
715+
US: { primary: "#b22234", secondary: "#3c3b6e" },
716+
CA: { primary: "#d52b1e", secondary: "#ffffff" },
717+
GB: { primary: "#c8102e", secondary: "#012169" },
718+
FR: { primary: "#0055a4", secondary: "#ef4135" },
719+
DE: { primary: "#000000", secondary: "#d00" },
720+
IT: { primary: "#009246", secondary: "#ce2b37" },
721+
ES: { primary: "#aa151b", secondary: "#f1bf00" },
722+
NL: { primary: "#ae1c28", secondary: "#21468b" },
723+
SE: { primary: "#006aa7", secondary: "#fecc00" },
724+
NO: { primary: "#ba0c2f", secondary: "#00205b" },
725+
FI: { primary: "#003580", secondary: "#ffffff" },
726+
DK: { primary: "#c8102e", secondary: "#ffffff" },
727+
RU: { primary: "#0039a6", secondary: "#d52b1e" },
728+
UA: { primary: "#0057b7", secondary: "#ffd700" },
729+
PL: { primary: "#dc143c", secondary: "#ffffff" },
730+
CN: { primary: "#de2910", secondary: "#ffde00" },
731+
JP: { primary: "#ffffff", secondary: "#bc002d" },
732+
KR: { primary: "#003478", secondary: "#c60c30" },
733+
AU: { primary: "#00247d", secondary: "#ff0000" },
734+
NZ: { primary: "#00247d", secondary: "#ff0000" },
735+
BR: { primary: "#009c3b", secondary: "#ffdf00" },
736+
MX: { primary: "#006341", secondary: "#ce1126" },
737+
AR: { primary: "#74acdf", secondary: "#f6b40e" },
738+
IN: { primary: "#ff9933", secondary: "#128807" },
739+
SA: { primary: "#006c35", secondary: "#ffffff" },
740+
IL: { primary: "#0038b8", secondary: "#ffffff" },
741+
IR: { primary: "#239f40", secondary: "#da0000" },
742+
TR: { primary: "#e30a17", secondary: "#ffffff" },
743+
ZA: { primary: "#007749", secondary: "#ffb612" },
744+
NG: { primary: "#008753", secondary: "#ffffff" },
745+
KE: { primary: "#006600", secondary: "#b22222" },
746+
EG: { primary: "#ce1126", secondary: "#000000" },
747+
ID: { primary: "#ce1126", secondary: "#ffffff" },
748+
PH: { primary: "#0038a8", secondary: "#ce1126" },
749+
SG: { primary: "#e0001b", secondary: "#ffffff" },
750+
TH: { primary: "#2d2a4a", secondary: "#a51931" },
751+
VN: { primary: "#da251d", secondary: "#ffde00" },
752+
};
753+
const entry = table[c] || table[(c || "").slice(0, 2)] || {
754+
primary: "#ff4d4f",
755+
secondary: "#ffffff",
756+
};
757+
return {
758+
primary: entry.primary,
759+
secondary: entry.secondary,
760+
shadow: `${entry.primary}55`,
761+
background: `${entry.secondary}1f`,
762+
};
763+
}
764+
712765
function addFlagOverlay(tweet, countryCode) {
713766
if (!countryCode) return;
714767
const flag = countryCodeToFlag(countryCode);
@@ -724,7 +777,10 @@
724777
overlay.id = id;
725778
overlay.textContent = flag;
726779
overlay.style =
727-
"position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:96px;opacity:0.08;pointer-events:none;user-select:none;filter:saturate(0.9);z-index:1;";
780+
"position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:220px;opacity:0.11;pointer-events:none;user-select:none;filter:saturate(0.9);z-index:1;overflow:hidden;line-height:1;";
781+
overlay.style.width = "100%";
782+
overlay.style.height = "100%";
783+
overlay.style.transform = "scale(1.1)";
728784
tweet.appendChild(overlay);
729785
tweet.dataset.xcbOverlayId = id;
730786
}
@@ -854,14 +910,19 @@
854910
tweet.dataset.xcbPrevPosition = tweet.style.position || "";
855911
tweet.style.position = "relative";
856912
}
857-
tweet.style.setProperty("outline", "3px solid #ff4d4f", "important");
913+
const palette = flagPalette(countryCode);
914+
tweet.style.setProperty(
915+
"outline",
916+
`3px solid ${palette.primary}`,
917+
"important",
918+
);
858919
tweet.style.setProperty("outline-offset", "2px", "important");
859920
tweet.style.setProperty(
860921
"box-shadow",
861-
"0 0 0 3px rgba(255,77,79,0.35)",
922+
`0 0 0 3px ${palette.shadow}`,
862923
"important",
863924
);
864-
tweet.style.setProperty("background-color", "rgba(255,77,79,0.12)", "important");
925+
tweet.style.setProperty("background-color", palette.background, "important");
865926

866927
const badge = document.createElement("div");
867928
const badgeId = `xcb-badge-${Math.random().toString(36).slice(2, 9)}`;
@@ -1298,9 +1359,17 @@
12981359
}
12991360
};
13001361
const label = btn.querySelector(".xcb-label");
1301-
if (label) {
1362+
const updateLabelVisibility = () => {
1363+
if (!label) return;
13021364
label.style.display =
13031365
(nav.getBoundingClientRect().width || 0) > 80 ? "inline" : "none";
1366+
};
1367+
updateLabelVisibility();
1368+
if (typeof ResizeObserver !== "undefined") {
1369+
const ro = new ResizeObserver(updateLabelVisibility);
1370+
ro.observe(nav);
1371+
} else {
1372+
window.addEventListener("resize", updateLabelVisibility);
13041373
}
13051374
if (btn.parentElement !== parent) {
13061375
if (moreEntry && moreEntry.parentElement === parent) {

0 commit comments

Comments
 (0)