Fix wc2026.css: complete dark theme for .wc-data-box tables, force !important"

static/wc2026.css

@@ -1,116 +1,183 @@
-/* World Cup 2026 - CSS for bongda.com.vn API HTML content */
-/* Mirrors .ls-content styles so match/standings HTML renders correctly */
+/* World Cup 2026 - Dark theme for scraped HTML tables */
+/* Applied to .wc-data-box which wraps content from dantri/bongda */
 
-.wc-bongda-content {
+.wc-data-box {
   font-size: 12px;
   color: #ddd;
+  max-height: 450px;
+  overflow-y: auto;
   padding: 4px;
+  line-height: 1.5;
+  background: #0a1020;
+  border-radius: 6px;
 }
-.wc-bongda-content ul { list-style: none; padding: 0; margin: 0; }
-.wc-bongda-content .title-content {
-  display: flex; gap: 6px; align-items: center;
-  background: #1a2a3a; border-radius: 4px; margin: 4px 0; padding: 5px 8px;
-}
-.wc-bongda-content .title-content img { width: 18px; height: 18px; }
-.wc-bongda-content .title-content strong { font-size: 11px; color: #8ab4d8; }
-.wc-bongda-content .match-detail,
-.wc-bongda-content li.match-detail {
-  padding: 6px; border-bottom: 1px solid #1a2a3a; cursor: pointer;
-}
-.wc-bongda-content .match-detail:hover { background: #0d1a2a; }
-.wc-bongda-content .match { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
-.wc-bongda-content .datetime { width: 100%; font-size: 9px; color: #6a9fca; }
-.wc-bongda-content .teams { display: flex; width: 100%; align-items: center; gap: 4px; }
-.wc-bongda-content .team { flex: 1; display: flex; align-items: center; gap: 4px; min-width: 0; text-decoration: none; }
-.wc-bongda-content .team .name { font-size: 11px; color: #ddd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.wc-bongda-content .team .logo img { width: 18px; height: 18px; }
-.wc-bongda-content .home-team { justify-content: flex-end; text-align: right; }
-.wc-bongda-content .status { flex: 0 0 54px; text-align: center; }
-.wc-bongda-content .status a { color: #fff; text-decoration: none; font-weight: 800; font-size: 12px; }
-.wc-bongda-content .status .label { font-size: 8px; color: #6a9fca; display: block; }
-.wc-bongda-content .status .label.live { color: #e74c3c; }
-.wc-bongda-content .info, .wc-bongda-content .btns { display: none; }
-.wc-bongda-content .match-time { font-size: 9px; color: #6a9fca; }
 
-/* Tables (standings/BXH) */
-.wc-bongda-content table { width: 100%; border-collapse: collapse; font-size: 11px; color: #ccc; }
-.wc-bongda-content table th {
-  background: #0d1a2a; color: #6a9fca; padding: 6px 4px;
-  font-size: 10px; border-bottom: 1px solid #1a3a5a; text-align: left;
-}
-.wc-bongda-content table td { padding: 5px 4px; border-bottom: 1px solid #0d1a2a; }
-.wc-bongda-content table tr:hover { background: #0d1a2a; }
-.wc-bongda-content table .team-name,
-.wc-bongda-content table td a {
-  display: flex; align-items: center; gap: 4px;
-  color: #ddd; text-decoration: none;
-}
-.wc-bongda-content table .team-name img,
-.wc-bongda-content table td img { width: 16px; height: 16px; }
-.wc-bongda-content table .pts,
-.wc-bongda-content table td:last-child { font-weight: 800; color: #f0c040; }
+/* Force all text white */
+.wc-data-box,
+.wc-data-box * {
+  color: #ddd !important;
+  background-color: transparent !important;
+  border-color: #1a3050 !important;
+}
 
-/* Group headers */
-.wc-bongda-content h3, .wc-bongda-content h4,
-.wc-bongda-content .group-name, .wc-bongda-content .round-name {
-  font-size: 12px; font-weight: 800; color: #8ab4d8;
-  padding: 8px 0 4px; margin-top: 8px;
-  border-bottom: 1px solid #1a3a5a;
+/* Tables */
+.wc-data-box table {
+  width: 100% !important;
+  border-collapse: collapse !important;
+  font-size: 11px !important;
+  margin: 6px 0 !important;
+  border: 1px solid #1a3050 !important;
+}
+.wc-data-box th {
+  background: #0b1e35 !important;
+  color: #6cc0f0 !important;
+  padding: 7px 5px !important;
+  font-size: 10px !important;
+  text-align: center !important;
+  font-weight: 700 !important;
+  border: 1px solid #1a3050 !important;
+}
+.wc-data-box td {
+  padding: 6px 5px !important;
+  border: 1px solid #0d1f30 !important;
+  text-align: center !important;
+  background: #0a1525 !important;
+}
+.wc-data-box tr:nth-child(even) td {
+  background: #0c1a2e !important;
+}
+.wc-data-box tr:hover td {
+  background: #122a45 !important;
+}
+.wc-data-box td:first-child,
+.wc-data-box td:nth-child(2) {
+  text-align: left !important;
 }
 
-/* Player stats */
-.wc-bongda-content .player-row,
-.wc-bongda-content .stat-row {
-  display: flex; align-items: center; gap: 6px;
-  padding: 5px 8px; background: #0d1a2a; border-radius: 4px; margin: 3px 0;
-}
-.wc-bongda-content .player-name { flex: 1; font-size: 11px; color: #eee; }
-.wc-bongda-content .player-team { font-size: 9px; color: #6a9fca; }
-.wc-bongda-content .player-goals,
-.wc-bongda-content .player-assists { font-weight: 800; color: #f0c040; }
+/* Links */
+.wc-data-box a {
+  color: #8ab4d8 !important;
+  text-decoration: none !important;
+}
 
-/* H2H section */
-.wc-bongda-content .h2h-match,
-.wc-bongda-content .history-match {
-  display: flex; align-items: center; gap: 6px;
-  padding: 6px; border-bottom: 1px solid #0d1a2a;
-}
-.wc-bongda-content .h2h-date { font-size: 9px; color: #6a9fca; min-width: 60px; }
-.wc-bongda-content .h2h-teams { flex: 1; font-size: 11px; color: #ddd; }
-.wc-bongda-content .h2h-score { font-weight: 800; color: #fff; min-width: 40px; text-align: center; }
+/* Headings */
+.wc-data-box h1,
+.wc-data-box h2,
+.wc-data-box h3,
+.wc-data-box h4,
+.wc-data-box h5 {
+  color: #6cc0f0 !important;
+  font-size: 12px !important;
+  padding: 8px 4px 4px !important;
+  margin: 8px 0 4px !important;
+  border-bottom: 1px solid #1a3050 !important;
+  font-weight: 700 !important;
+  background: transparent !important;
+}
+
+/* Bold = highlights */
+.wc-data-box strong,
+.wc-data-box b {
+  color: #f0c040 !important;
+}
 
-/* Lineups */
-.wc-bongda-content .lineup-team { margin: 8px 0; }
-.wc-bongda-content .lineup-team h4 { font-size: 12px; color: #8ab4d8; margin-bottom: 6px; }
-.wc-bongda-content .lineup-player {
-  display: flex; align-items: center; gap: 6px;
-  padding: 4px 8px; font-size: 11px; color: #ccc;
-}
-.wc-bongda-content .lineup-player .number { color: #f0c040; font-weight: 700; min-width: 20px; }
-.wc-bongda-content .lineup-player img { width: 14px; height: 14px; }
+/* Lists */
+.wc-data-box ul {
+  list-style: none !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+.wc-data-box li {
+  padding: 6px 5px !important;
+  border-bottom: 1px solid #0d1f30 !important;
+}
+.wc-data-box li:hover {
+  background: #0b1e35 !important;
+}
 
-/* Commentary */
-.wc-bongda-content .commentary-item,
-.wc-bongda-content .event-item {
-  display: flex; gap: 8px; padding: 6px; border-bottom: 1px solid #0d1a2a;
-}
-.wc-bongda-content .commentary-time,
-.wc-bongda-content .event-time { font-size: 10px; color: #f0c040; font-weight: 700; min-width: 30px; }
-.wc-bongda-content .commentary-text,
-.wc-bongda-content .event-text { font-size: 11px; color: #ccc; flex: 1; }
+/* Paragraphs */
+.wc-data-box p {
+  margin: 4px 0 !important;
+  line-height: 1.5 !important;
+}
 
-/* Live indicator */
-.wc-bongda-content .live-indicator,
-.wc-bongda-content [class*="live"] { color: #e74c3c; }
+/* Match rows (bongda format) */
+.wc-data-box .match-detail {
+  padding: 6px 4px !important;
+  border-bottom: 1px solid #0d1f30 !important;
+}
+.wc-data-box .match-detail:hover {
+  background: #0b1e35 !important;
+}
+.wc-data-box .title-content {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  background: #0b1e35 !important;
+  border-radius: 4px;
+  margin: 6px 0;
+  padding: 6px 8px;
+}
+.wc-data-box .title-content strong {
+  color: #6cc0f0 !important;
+}
+.wc-data-box .teams {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 4px;
+}
+.wc-data-box .team {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+.wc-data-box .team .name {
+  font-size: 11px !important;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.wc-data-box .home-team {
+  justify-content: flex-end;
+  text-align: right;
+}
+.wc-data-box .status {
+  flex: 0 0 50px;
+  text-align: center;
+}
+.wc-data-box .status a {
+  font-weight: 800 !important;
+  font-size: 12px !important;
+}
 
-/* Generic links */
-.wc-bongda-content a { color: #8ab4d8; text-decoration: none; }
-.wc-bongda-content a:hover { color: #b4d4f8; }
+/* Hide ALL images, iframes, figures */
+.wc-data-box img,
+.wc-data-box figure,
+.wc-data-box figcaption,
+.wc-data-box picture,
+.wc-data-box video,
+.wc-data-box iframe {
+  display: none !important;
+}
 
-/* Images */
-.wc-bongda-content img { max-width: 100%; height: auto; }
+/* Hide junk elements */
+.wc-data-box .info,
+.wc-data-box .btns,
+.wc-data-box .ads,
+.wc-data-box .banner,
+.wc-data-box .social,
+.wc-data-box .relate,
+.wc-data-box .comment,
+.wc-data-box nav,
+.wc-data-box footer,
+.wc-data-box header {
+  display: none !important;
+}
 
 /* Scrollbar */
-.wc-bongda-content::-webkit-scrollbar { width: 4px; }
-.wc-bongda-content::-webkit-scrollbar-track { background: transparent; }
-.wc-bongda-content::-webkit-scrollbar-thumb { background: #1a3a5a; border-radius: 2px; }
+.wc-data-box::-webkit-scrollbar { width: 4px; }
+.wc-data-box::-webkit-scrollbar-track { background: transparent; }
+.wc-data-box::-webkit-scrollbar-thumb { background: #1a3050; border-radius: 2px; }