/* =============================================================================
* APEXDEV CUSTOM THEMES — api-sports.io Widgets v3
*
* Load AFTER the widget script:
*
*
*
* Activate by setting data-theme="apex-dark" (or any name below) on the
* element.
* ============================================================================= */
/* -----------------------------------------------------------------------------
* THEME 0 — "rocket-light" (RocketLiveScore production theme)
* --------------------------------------------------------------------------- */
[data-theme="rocket-light"] {
--background-color: #ffffff;
--background-color-header: #f8f9fb;
--background-color-hover: #f3f5f7;
--background-color-active: #fff7ed;
--color-text: #1a1c1e;
--color-text-header: #1a1c1e;
--color-text-secondary: #5c6166;
--color-text-muted: #9aa0a6;
--color-link: #e8590c;
--color-link-hover: #c24a06;
--color-success: #16a34a;
--color-danger: #e11d48;
--color-warning: #f59e0b;
--color-live: #e11d48;
--border-color: #e6e8eb;
--border-bottom: 1px solid #e6e8eb;
--border-radius: 8px;
--teams-logo-border: 0 solid transparent;
--font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--primary-font-size: 13px;
--secondary-font-size: 11px;
--header-font-size: 13px;
--title-font-size: 18px;
--button-font-size: 12px;
--primary-line-height: 1.45;
--teams-logo-size: 28px;
--flags-size: 20px;
--player-photo-size: 44px;
--primary-padding: 0.7rem;
--secondary-padding: 0.45rem;
--modale-background: #ffffff;
--modale-teams-name: 18px;
--modale-score: 40px;
--modale-border-radius: 12px;
--modale-backdrop: rgba(15, 23, 42, 0.5);
}
.rls-api-scoreboard api-sports-widget,
.rls-api-scoreboard api-sports-widget:not([data-type="config"]) {
display: block;
width: 100%;
min-width: 0;
box-sizing: border-box;
}
.rls-api-scoreboard > div,
.rls-api-scoreboard api-sports-widget + .api-sports-skeleton {
width: 100%;
}
/* -----------------------------------------------------------------------------
* THEME 1 — "apex-dark" (modern dark, electric accent — best for SaaS dashboards)
* --------------------------------------------------------------------------- */
[data-theme="apex-dark"] {
/* Colors */
--background-color: #0a0a0a;
--background-color-header: #111111;
--background-color-hover: #1a1a1a;
--background-color-active: #1f1f1f;
--color-text: #e5e5e5;
--color-text-header: #fafafa;
--color-text-secondary: #a3a3a3;
--color-text-muted: #737373;
--color-link: #3b82f6;
--color-link-hover: #60a5fa;
--color-success: #10b981;
--color-danger: #ef4444;
--color-warning: #f59e0b;
--color-live: #ef4444;
/* Borders */
--border-color: #262626;
--border-bottom: 1px solid #262626;
--border-radius: 10px;
--teams-logo-border: 0 solid transparent;
/* Typography */
--font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--primary-font-size: 13px;
--secondary-font-size: 11px;
--header-font-size: 14px;
--title-font-size: 18px;
--button-font-size: 12px;
--primary-line-height: 1.5;
/* Sizing */
--teams-logo-size: 32px;
--flags-size: 22px;
--player-photo-size: 48px;
--primary-padding: 0.75rem;
--secondary-padding: 0.5rem;
/* Modal */
--modale-background: #0a0a0a;
--modale-teams-name: 18px;
--modale-score: 40px;
--modale-border-radius: 14px;
--modale-backdrop: rgba(0, 0, 0, 0.85);
}
/* -----------------------------------------------------------------------------
* THEME 2 — "apex-contrast" (WCAG AAA high-contrast — accessibility-first)
* --------------------------------------------------------------------------- */
[data-theme="apex-contrast"] {
--background-color: #000000;
--background-color-header: #000000;
--background-color-hover: #1a1a1a;
--background-color-active: #2a2a2a;
--color-text: #ffffff;
--color-text-header: #ffff00;
--color-text-secondary: #e5e5e5;
--color-link: #00ffff;
--color-link-hover: #ffff00;
--color-success: #00ff00;
--color-danger: #ff0000;
--color-warning: #ffaa00;
--color-live: #ff0000;
--border-color: #ffffff;
--border-bottom: 2px solid #ffffff;
--border-radius: 4px;
--font-family: 'Atkinson Hyperlegible', system-ui, sans-serif;
--primary-font-size: 15px; /* lebih besar untuk legibility */
--secondary-font-size: 13px;
--header-font-size: 16px;
--title-font-size: 20px;
--button-font-size: 14px;
--teams-logo-size: 40px;
--flags-size: 28px;
--modale-teams-name: 22px;
--modale-score: 48px;
--modale-backdrop: rgba(0, 0, 0, 0.95);
}
/* -----------------------------------------------------------------------------
* THEME 3 — "apex-brand" (corporate brand colors — customize 4 vars below)
* --------------------------------------------------------------------------- */
[data-theme="apex-brand"] {
/* === BRAND VARS — change these 4 to match your brand === */
--brand-primary: #1e40af; /* primary action color */
--brand-secondary: #7c3aed;
--brand-accent: #f59e0b;
--brand-bg: #f8fafc;
/* ======================================================= */
--background-color: var(--brand-bg);
--background-color-header: #ffffff;
--background-color-hover: #f1f5f9;
--background-color-active: #e2e8f0;
--color-text: #0f172a;
--color-text-header: var(--brand-primary);
--color-text-secondary: #64748b;
--color-link: var(--brand-primary);
--color-link-hover: var(--brand-secondary);
--color-success: #16a34a;
--color-danger: #dc2626;
--color-warning: var(--brand-accent);
--color-live: #dc2626;
--border-color: #e2e8f0;
--border-bottom: 1px solid #e2e8f0;
--border-radius: 12px;
--font-family: 'Inter', system-ui, sans-serif;
--primary-font-size: 13px;
--secondary-font-size: 11px;
--header-font-size: 14px;
--title-font-size: 18px;
--teams-logo-size: 36px;
--flags-size: 24px;
--modale-background: #ffffff;
--modale-teams-name: 18px;
--modale-score: 42px;
--modale-border-radius: 16px;
--modale-backdrop: rgba(15, 23, 42, 0.6);
}
/* -----------------------------------------------------------------------------
* THEME 4 — "apex-stadium" (sports broadcast vibe — green pitch, gold trim)
* --------------------------------------------------------------------------- */
[data-theme="apex-stadium"] {
--background-color: #052e16;
--background-color-header: #14532d;
--background-color-hover: #166534;
--background-color-active: #15803d;
--color-text: #f0fdf4;
--color-text-header: #fbbf24;
--color-text-secondary: #bbf7d0;
--color-link: #fde047;
--color-link-hover: #fbbf24;
--color-success: #4ade80;
--color-danger: #ef4444;
--color-warning: #fbbf24;
--color-live: #ef4444;
--border-color: #166534;
--border-bottom: 1px solid #166534;
--border-radius: 8px;
--font-family: 'Roboto Condensed', 'Bebas Neue', sans-serif;
--primary-font-size: 13px;
--secondary-font-size: 11px;
--header-font-size: 14px;
--title-font-size: 20px;
--button-font-size: 12px;
--teams-logo-size: 34px;
--flags-size: 24px;
--player-photo-size: 52px;
--modale-background: #052e16;
--modale-teams-name: 20px;
--modale-score: 44px;
--modale-border-radius: 12px;
--modale-backdrop: rgba(5, 46, 22, 0.95);
}
/* -----------------------------------------------------------------------------
* RESPONSIVE OVERRIDES — applied to all custom themes on mobile
* --------------------------------------------------------------------------- */
@media (max-width: 640px) {
[data-theme^="apex-"] {
--teams-logo-size: 24px;
--flags-size: 18px;
--player-photo-size: 36px;
--primary-font-size: 12px;
--secondary-font-size: 10px;
--header-font-size: 12px;
--title-font-size: 16px;
--button-font-size: 11px;
--primary-padding: 0.5rem;
--secondary-padding: 0.25rem;
--modale-teams-name: 14px;
--modale-score: 28px;
}
}
/* -----------------------------------------------------------------------------
* REDUCED MOTION — respect prefers-reduced-motion
* --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
api-sports-widget,
api-sports-widget * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* -----------------------------------------------------------------------------
* CONTAINER SKELETONS — show while widget bootstraps (anti CLS)
* Apply class api-sports-skeleton ke parent container.
* --------------------------------------------------------------------------- */
.api-sports-skeleton {
min-height: 320px;
background: linear-gradient(90deg, var(--background-color, #0a0a0a) 0%,
var(--background-color-hover, #1a1a1a) 50%,
var(--background-color, #0a0a0a) 100%);
background-size: 200% 100%;
animation: api-sports-shimmer 1.6s ease-in-out infinite;
border-radius: var(--border-radius, 10px);
}
@keyframes api-sports-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
api-sports-widget:not([data-type="config"]):defined + .api-sports-skeleton,
api-sports-widget:defined ~ .api-sports-skeleton {
display: none;
}