body {
font-family: "Roboto", sans-serif;
font-size: 14px;
color: #333;
margin: 0;
padding: 0;
}
.container {
scrollbar-width: none;
}
.container::-webkit-scrollbar {
display: none;
}
.table-compact {
width: 100%;
font-size: 14px;
}
.table-compact th,
.table-compact td {
padding: 8px 10px;
vertical-align: middle;
text-align: center;
}
.team-cell {
display: flex;
align-items: center;
gap: 10px;
text-align: left;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.team-logo {
width: 30px;
height: 30px;
object-fit: contain;
}
.last-games {
display: flex;
justify-content: center;
gap: 5px;
}
/* Style pour les icônes PLVYOFF dans la colonne Last 5 */
.plvyoff-icon {
vertical-align: middle;
width: 16px; /* Taille par défaut PC */
height: 16px;
display: inline-block;
}
/* Adaptation automatique - plus petit sur mobile */
@media (max-width: 1024px) {
.plvyoff-icon {
width: 14px;
height: 14px;
}
}
@media (max-width: 576px) {
.plvyoff-icon {
width: 12px;
height: 12px;
}
}
@media (max-width: 480px) {
.plvyoff-icon {
width: 10px;
height: 10px;
}
}
@media (max-width: 375px) {
.plvyoff-icon {
width: 9px;
height: 9px;
}
}
tr {
border-bottom: var(--thickness) solid var(--border);
transition: background-color 0.2s;
}
tr:hover {
background-color: var(--bg-hover);
}
tr.no-hover:hover {
background-color: transparent !important;
}
@media (max-width: 1024px) {
.table-compact {
font-size: 12px;
}
.team-logo {
width: 25px;
height: 25px;
}
.table-compact th,
.table-compact td {
padding: 5px 8px;
}
}
#team-graph {
scroll-margin-top: 75px;
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border-radius: 10px;
border: 1px solid var(--glass-border);
position: relative;
}
/* Style pour les boutons Average PPG/OPPG - Desktop */
.custom-team-btn {
font-size: 12px;
padding: 5px 12px;
border: 1px solid #6e7681 !important; /* Gris au lieu de turquoise */
border-radius: 4px;
background: transparent !important; /* Transparent au lieu de rgba */
color: #6e7681 !important; /* Gris au lieu de turquoise */
white-space: nowrap;
cursor: pointer;
transition: background 0.3s, color 0.3s;
display: inline-block;
/* Neutraliser les styles par défaut de Safari/iOS */
-webkit-appearance: none !important;
appearance: none !important;
outline: none;
text-decoration: none;
}
.custom-team-btn:hover,
.custom-team-btn:active,
.custom-team-btn:focus {
background: #6e7681 !important; /* Gris au lieu de turquoise */
color: white !important;
outline: none;
}
/* Réduire le padding supérieur sur mobile mais garder suffisamment d'espace */
@media (max-width: 1024px) {
#team-graph {
padding-top: 10px !important;
padding-bottom: 0px !important; /* Pas de padding bottom comme PlayerStats */
}
/* Ajuster le style des boutons pour mobile */
.button-container {
margin-top: 0;
margin-bottom: 8px;
padding: 0;
width: 85%;
justify-content: flex-start; /* Aligné à gauche au lieu de center pour le scroll */
gap: 10px !important;
margin-left: auto;
margin-right: auto;
position: relative;
top: 0;
/* Scroll horizontal pour éviter le débordement */
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
padding-bottom: 5px;
flex-wrap: nowrap;
}
/* Empêcher les boutons de rétrécir */
.button-container button,
.button-container select {
flex-shrink: 0;
}
/* Nouvelle classe propre pour les boutons Average PPG/OPPG sur mobile */
.custom-team-btn {
font-size: 10px !important;
padding: 5px 10px !important;
border: 1px solid #6e7681 !important; /* Gris au lieu de turquoise */
border-radius: 4px !important;
background: transparent !important; /* Fond transparent */
color: #6e7681 !important; /* Gris au lieu de turquoise */
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
min-width: auto !important;
max-width: none !important;
width: auto !important;
height: auto !important;
display: inline-block !important;
cursor: pointer !important;
transition: background 0.3s, color 0.3s;
/* Neutraliser Safari/iOS */
-webkit-appearance: none !important;
appearance: none !important;
-webkit-tap-highlight-color: transparent !important;
}
.custom-team-btn:hover,
.custom-team-btn:active,
.custom-team-btn:focus {
background: #6e7681 !important; /* Gris au lieu de turquoise */
color: white !important;
outline: none !important;
}
.controls-row {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.season-hidden {
display: none !important;
}
/* Style des boutons pour mobile en respectant les préférences minimalistes */
.styled-btn-small {
border: 1px solid #6e7681; /* Gris au lieu de turquoise */
border-radius: 4px;
font-size: 11.5px;
padding: 3px 8px;
line-height: 1;
min-height: 0;
background-color: rgba(0, 214, 180, 0.08); /* Fond légèrement teinté */
color: #00d6b4;
text-transform: none;
margin: 0;
letter-spacing: 0;
width: auto;
min-width: 60px;
max-width: none; /* Pas de limite de largeur pour afficher le texte complet */
white-space: nowrap; /* Empêche le retour à la ligne */
display: inline-block;
text-align: center;
}
}
/* Masquer le logo et le nom de l'équipe sur mobile */
@media (max-width: 1024px) {
#team-info {
display: none !important;
}
}
/* Centrer les boutons en haut de la carte sur mobile */
@media (max-width: 1024px) {
.controls-row {
justify-content: center !important;
padding-top: 0;
margin-top: 0;
}
/* Masquer le sélecteur de nombre de matchs sur mobile */
#numMatches {
display: none !important;
}
}
.graph-container {
overflow-x: auto;
white-space: nowrap;
width: 100%;
}
#graphCanvas {
display: inline-block;
}
.slider-container {
margin-top: 10px; /* COPIE EXACTE de PlayerStats */
text-align: center;
width: 100%;
}
/* ================================
Forcer le texte en gris et
MAJUSCULES pour les deux tableaux
Est / Ouest uniquement
================================ */
.col-md-6 .players-table tbody td {
/* Texte des cellules en gris */
color: var(--text-gray) !important;
}
/* ===========================================
Logos équipe dans les tableaux Est / Ouest
=========================================== */
.col-md-6 .team-cell .team-logo {
width: 2rem; /* 32px si 1rem = 16px */
height: 2rem;
object-fit: contain;
}
/* Styles pour les onglets EAST/WEST - visibles uniquement sur mobile */
.conference-tabs {
display: none; /* Par défaut, caché sur PC et grands écrans */
}
@media (max-width: 1023px) {
.conference-tabs {
display: flex;
justify-content: center;
margin-bottom: 10px;
background: rgba(255, 255, 255, 0.08);
border-radius: 14px;
overflow: hidden;
width: 100%;
}
/* Afficher les deux tableaux côte à côte sur PC, mais l'un après l'autre sur mobile */
#east-table,
#west-table {
width: 100%;
max-width: 100%;
}
/* Sur mobile, seul le tableau actif est visible */
#east-table:not(.active),
#west-table:not(.active) {
display: none;
}
}
.conference-tab {
flex: 1;
padding: 5px 16px;
text-align: center;
background-color: transparent;
border: none;
color: rgba(255, 255, 255, 0.4);
font-size: 0.7rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
letter-spacing: 0.02em;
user-select: none;
}
.conference-tab.active {
background: rgba(255, 255, 255, 0.12);
color: rgba(255, 255, 255, 0.9);
font-weight: 600;
}
/* Styles pour desktop et toutes les tailles d'écran */
.logo-and-name {
display: flex;
align-items: center;
width: 100%;
position: relative;
overflow: visible; /* Permet au logo de déborder sur les lignes en dessous */
}
/* Logo en arrière-plan (grand, transparent sur mobile) */
.team-logo-background {
position: absolute !important;
height: 200px !important; /* Hauteur fixe pour un logo imposant */
width: auto !important;
max-width: 200px !important; /* Largeur maximale du logo */
object-fit: contain !important;
opacity: 0.15 !important; /* Très transparent, effet subtil sur mobile */
z-index: 0 !important; /* Derrière tout */
left: 0 !important; /* Aligné à gauche du conteneur */
top: 50% !important;
transform: translateY(-50%) !important; /* Centré verticalement seulement */
pointer-events: none !important; /* Ne bloque pas les clics */
border-radius: 0 !important; /* Pas de bordure arrondie */
display: block !important; /* Force l'affichage */
}
/* Logo complètement opaque sur desktop */
@media (min-width: 1025px) {
.team-logo-background {
opacity: 1 !important; /* Logo complètement visible sur desktop */
}
}
/* Sur desktop, le logo et le nom sont sur la même ligne */
.logo-name-container {
display: flex;
flex-direction: row;
align-items: center;
}
/* Espacement entre le logo et le nom de l'équipe */
#team-logo-upper {
margin-right: 15px;
position: relative;
z-index: 1; /* Au-dessus du logo en arrière-plan */
}
/* Style pour le classement */
.ranking-large {
font-size: 1.8rem;
color: #00d6b4;
}
/* ———————————————————————————————————————————————————
MEDIA QUERY POUR ÉCRANS ≤ 768px (MOBILE)
——————————————————————————————————————————————————— */
/* Styles pour mobile - teamstat */
@media screen and (max-width: 1024px) {
/* Style pour le logo et le nom de l'équipe en version mobile */
.logo-and-name {
justify-content: space-between; /* Force l'écart maximal entre les éléments */
}
/* Conteneur pour le logo et le nom uniquement sur mobile */
.logo-name-container {
display: flex;
align-items: center;
max-width: calc(100% - 85px); /* Espace réservé pour le classement */
overflow: hidden;
}
/* Style pour le nom court de l'équipe avec troncature intelligente sur mobile */
#team-short-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 500;
font-size: 1.8rem;
max-width: calc(100% - 70px); /* Espace réservé pour le logo */
margin-right: 15px; /* Marge de sécurité entre le nom et le classement */
}
/* Style pour le classement sur mobile */
.ranking-large {
flex-shrink: 0; /* Empêche le classement de rétrécir */
margin-left: auto; /* Pousse le classement à droite */
}
}
/* Contour minimaliste autour des stats de la première carte (mobile uniquement) */
@media (max-width: 1023px) {
.stats-and-record {
border: 0.5px solid rgba(255, 255, 255, 0.15);
border-radius: 4px;
padding: 6px 8px;
margin: 0;
margin-right: 16px;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
color: #FFFFFF !important;
}
/* Force le blanc pour tous les sous-éléments */
.stats-and-record *,
.stats-first,
.stats-first span,
.record-first,
.record-first span,
.record-first.text-light,
.stats-and-record span[data-tooltip],
.stats-and-record .stats-first span,
.stats-and-record .record-first,
.stats-and-record .record-first span,
#team-wins,
#team-losses {
color: #FFFFFF !important; /* Blanc pour tous les textes et sous-éléments */
}
/* Ciblage ultra spécifique des W et L */
.stats-and-record .record-first.text-light {
color: #FFFFFF !important;
text-shadow: none !important;
}
/* Ajustement de l'espacement interne pour un look encore plus minimaliste */
.stats-first {
font-size: 0.75rem; /* Taille réduite pour tenir sur une ligne */
letter-spacing: 0;
}
.stats-first span {
margin-right: 8px; /* Espacement réduit entre les stats */
}
/* Taille des valeurs des stats réduite aussi */
.stats-first span,
.record-first {
font-size: 0.75rem;
color: #FFFFFF !important; /* Texte en blanc avec !important pour surcharger la règle globale */
font-weight: 600; /* Plus gras pour meilleure lisibilité */
}
/* Surcharge spécifique pour les textes dans stats-and-record sur mobile */
.stats-and-record,
.stats-and-record span {
color: #FFFFFF !important; /* Force le blanc sur tous les textes */
}
/* Compacter la ligne des stats */
.stats-and-record {
flex-wrap: nowrap;
justify-content: space-between;
}
}
/* Gestion des tableaux sur mobile */
@media (max-width: 1023px) {
/* Par défaut, les deux tableaux sont cachés */
.conference-table {
display: none;
}
/* Le tableau actif est visible */
.conference-table.active {
display: block;
}
/* Noms d'équipes en gras et majuscules sur mobile */
.team-name-span {
font-weight: 700 !important;
text-transform: uppercase !important;
}
/* Configuration pour afficher toutes les colonnes sans défilement */
.players-table-wrapper {
overflow-x: visible !important;
position: relative;
width: 100%;
margin: 0;
}
/* Structure de table avec toutes les colonnes visibles */
.players-table {
width: 100% !important;
table-layout: auto !important;
min-width: 0 !important;
max-width: none !important;
}
/* Ajustement des colonnes pour s'adapter à différentes tailles d'écran */
/* Colonne de rang - petite et fixe */
.players-table th:nth-child(1),
.players-table td:nth-child(1) {
width: 25px;
min-width: 25px;
}
/* Colonne d'équipe - flexible mais avec un minimum */
.players-table th:nth-child(2),
.players-table td:nth-child(2) {
min-width: 80px;
}
/* Colonne Player plus large pour accommoder photo + nom */
@media (max-width: 1024px) {
.players-table th:nth-child(2),
.players-table td:nth-child(2) {
min-width: 120px !important;
width: 120px !important;
}
}
/* Media queries pour ajuster la troncature selon la taille de l'écran */
@media (min-width: 480px) and (max-width: 1023px) {
.players-table .team-cell span {
max-width: 180px;
}
}
@media (min-width: 400px) and (max-width: 479px) {
.players-table .team-cell span {
max-width: 140px;
}
}
@media (max-width: 399px) {
.players-table .team-cell span {
max-width: 110px;
}
}
/* Colonnes GP, W, L - petites mais suffisantes pour les chiffres */
.players-table th:nth-child(3),
.players-table td:nth-child(3),
.players-table th:nth-child(4),
.players-table td:nth-child(4),
.players-table th:nth-child(5),
.players-table td:nth-child(5) {
width: 30px;
min-width: 30px;
max-width: 35px;
}
/* Colonne Last 5 Games - s'adapte à l'espace restant */
.players-table th:nth-child(6),
.players-table td:nth-child(6) {
min-width: 100px;
}
/* Ajustements pour les très petits écrans */
@media (max-width: 360px) {
.players-table .team-cell span {
max-width: 95px;
}
}
/* Ajustements pour les écrans moyens */
@media (min-width: 361px) and (max-width: 480px) {
.players-table .team-cell span {
max-width: 140px;
}
}
/* Ajustements pour les grands écrans mobiles */
@media (min-width: 481px) and (max-width: 1023px) {
.players-table .team-cell span {
max-width: 180px;
}
}
/* Tableaux EAST/WEST sur mobile — dimensionnement automatique */
@media (max-width: 1023px) {
#east-table .players-table,
#west-table .players-table {
width: 100% !important;
table-layout: auto !important;
margin: 0 !important;
max-width: none !important;
min-width: 0 !important;
border-collapse: collapse !important;
}
#east-table .players-table-wrapper,
#west-table .players-table-wrapper {
overflow-x: visible !important;
overflow: visible !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
#east-table .players-table th,
#west-table .players-table th,
#east-table .players-table td,
#west-table .players-table td {
padding: 6px 4px;
text-align: center;
white-space: nowrap;
}
/* Team col : seule colonne qui peut tronquer */
#east-table .players-table td:nth-child(2),
#west-table .players-table td:nth-child(2) {
overflow: hidden;
text-overflow: ellipsis;
max-width: 0;
width: 100%;
}
}
/* Style pour l'indicateur de défilement */
.scroll-indicator {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 40px;
background-color: rgba(0, 0, 0, 0.5);
color: #00d6b4;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px 0 0 4px;
box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
z-index: 10;
cursor: pointer;
}
/* Styles pour PC et grands écrans */
@media (min-width: 1025px) {
/* Afficher les deux tableaux côte à côte sur PC */
#east-table,
#west-table {
display: block !important; /* Toujours visibles sur PC */
width: 50%;
float: left;
}
/* Assurer que les deux tableaux ont exactement les mêmes styles */
#east-table .players-table,
#west-table .players-table {
width: 100%;
table-layout: auto;
}
}
/* S'assurer que les cellules d'équipe ont le même comportement dans les deux tableaux */
#east-table .team-cell span,
#west-table .team-cell span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Ajustements supplémentaires pour mobile */
.card {
border-radius: 0;
border: none;
margin-left: -15px;
margin-right: -15px;
}
.players-table th {
font-weight: 500;
color: rgba(255, 255, 255, 0.7);
}
/* Réduire l'espace entre les onglets et le tableau */
.conference-tabs + .conference-table {
margin-top: 0;
}
}
/* 1) Style de base pour tous les navigateurs */
input[type="range"].slider {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 50%;
height: 6px;
background: #2a2a2a; /* Fond gris, le box-shadow du thumb gère le remplissage */
border-radius: 3px;
outline: none;
margin: 0;
overflow: hidden; /* Contient le box-shadow du thumb */
}
/* 2) Track pour Chrome/Safari */
input[type="range"].slider::-webkit-slider-runnable-track {
height: 6px;
background: #2a2a2a;
border-radius: 3px;
border: none;
position: relative;
}
/* 3) Track “non rempli” (Firefox) */
input[type="range"].slider::-moz-range-track {
height: 6px;
background: #2a2a2a;
border-radius: 3px;
border: none;
}
/* 4) Track “rempli” (Firefox) */
input[type="range"].slider::-moz-range-progress {
background: #009e85; /* vert sombre pour partie remplie */
height: 6px;
border-radius: 3px;
border: none;
}
/* 5) Pouce (thumb) turquoise vif avec effet de remplissage */
input[type="range"].slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px;
height: 16px;
background: #00d6b4; /* turquoise vif */
border: none;
border-radius: 50%;
cursor: pointer;
margin-top: -5px; /* pour centrer verticalement sur track de 6px */
/* Box-shadow étendu vers la gauche pour créer l'effet de remplissage sur Chrome */
box-shadow: -1000px 0 0 1000px #009e85;
}
input[type="range"].slider::-moz-range-thumb {
width: 16px;
height: 16px;
background: #00d6b4;
border: none;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 2px rgba(0,0,0,0.3);
}
/* 6) Fallback pour IE/Edge anciens */
input[type="range"].slider::-ms-track {
width: 100%;
height: 6px;
background: transparent;
border-color: transparent;
color: transparent;
}
input[type="range"].slider::-ms-fill-lower {
background: #009e85; /* vert sombre pour partie remplie */
border-radius: 3px;
}
input[type="range"].slider::-ms-fill-upper {
background: #2a2a2a; /* gris foncé */
border-radius: 3px;
}
input[type="range"].slider::-ms-thumb {
width: 16px;
height: 16px;
background: #00d6b4;
border: none;
border-radius: 50%;
cursor: pointer;
}
.team-logos {
text-align: center;
margin-top: 20px;
}
.team-logos img {
width: 50px;
height: 50px;
margin: 0 10px;
}
.player-photo {
width: 50px;
height: 50px;
object-fit: contain;
}
/* Agrandir la photo dans les cartes best player */
.player-card .player-photo-block .player-photo {
width: 80px !important;
height: 80px !important;
object-fit: contain;
border-radius: 8px;
}
.styled-select {
background-color: transparent;
color: #6e7681; /* Gris comme les boutons */
border: 1px solid #6e7681; /* Bordure grise */
border-radius: 8px;
padding: 5px 8px;
width: 150px;
font-size: 14px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
outline: none;
transition: all 0.3s ease;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.styled-select:hover {
background-color: rgba(110, 118, 129, 0.1); /* Fond gris léger au hover */
color: white;
}
.styled-select:focus {
border: 1px solid #6e7681; /* Bordure grise au focus */
box-shadow: 0 0 10px rgba(110, 118, 129, 0.3); /* Ombre grise */
}
.select-label {
font-size: 14px;
color: white;
margin-right: 10px;
}
.button-container {
margin-top: 0;
display: flex;
justify-content: flex-start;
overflow: visible; /* Permettre le débordement pour les dropdowns */
gap: 6px; /* espace réduit entre TOUS les éléments */
}
.styled-btn-small {
background: transparent !important;
border: 1px solid var(--accent) !important;
color: var(--accent) !important;
padding: 4px 10px !important; /* moins de padding vertical et horizontal */
font-size: 0.75rem !important; /* texte plus petit */
line-height: 1 !important; /* hauteur de ligne compacte */
border-radius: 4px !important; /* coins légèrement arrondis */
min-width: auto !important; /* plus de largeur forcée */
max-width: none !important; /* Pas de limite de largeur */
white-space: nowrap !important; /* Texte sur une seule ligne */
transition: background 0.3s, color 0.3s;
}
.styled-btn-small:hover {
background: var(--accent) !important;
color: white !important;
}
/* Custom Dropdown - Style DayGames */
.custom-dropdown {
position: relative;
display: inline-block;
}
.custom-dropdown .dropdown__toggle {
background: rgba(255,255,255,0.04);
color: #888;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 6px;
padding: 6px 2em 6px 0.75em;
font-size: 0.75rem;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
min-width: 60px;
text-align: left;
}
.custom-dropdown .dropdown__toggle:hover,
.custom-dropdown .dropdown__toggle:focus {
border-color: rgba(0,214,180,0.3);
background: rgba(255,255,255,0.06);
outline: none;
}
.custom-dropdown .dropdown__arrow {
position: absolute;
right: 0.5em;
top: 50%;
transform: translateY(-50%);
transition: transform 0.2s;
color: #00d6b4;
font-size: 0.8em;
}
.custom-dropdown.open .dropdown__arrow {
transform: translateY(-50%) rotate(180deg);
}
.custom-dropdown .dropdown__menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
background: rgba(22,22,22,0.95);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
list-style: none;
padding: 0;
margin: 0;
max-height: 250px;
overflow-y: auto;
z-index: 9999;
display: none;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
/* S'assurer que le dropdown est au-dessus du canvas */
.custom-dropdown.open {
z-index: 10000;
position: relative;
}
.custom-dropdown.open .dropdown__menu {
display: block;
}
.custom-dropdown .dropdown__menu li {
padding: 0.6em 1em;
color: #888;
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
font-size: 0.75rem;
}
.custom-dropdown .dropdown__menu li:hover {
background: rgba(0,214,180,0.1);
color: var(--text-main);
}
.custom-dropdown .dropdown__menu li.selected {
color: var(--accent);
font-weight: 600;
}
.controls-row label,
#team-graph .select-label {
color: #fff !important;
}
/* Le numMatches garde sa couleur var(--accent) définie plus haut */
#team-graph #team-name {
color: var(--text-gray) !important;
}
/* 5) Logo sans cercle */
#team-graph #team-logo {
background: transparent; /* Pas de fond */
border: none; /* Pas de bordure */
border-radius: 0; /* Pas de cercle */
padding: 0; /* Pas de padding */
}
/* Victoires : pas de filtre - garder la couleur turquoise d'origine de l'icône */
/* --- Noms d'équipes : full sur PC, short (nickname) sur mobile --- */
.team-name-short {
display: none;
}
.team-name-full {
display: inline;
}
/* --- En-tête colonne : EAST/WEST sur PC, Rank sur mobile --- */
.header-rank {
display: none;
}
.header-conference {
display: inline;
}
@media (max-width: 1023px) {
.team-name-full {
display: none !important;
}
.team-name-short {
display: inline !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-transform: capitalize;
}
.header-conference {
display: none !important;
}
.header-rank {
display: inline !important;
}
/* Empêcher la troncature sur les en-têtes du tableau */
#east-table .players-table thead th,
#west-table .players-table thead th {
overflow: visible !important;
text-overflow: clip !important;
}
}
/* --- Badges de classement style FlashScore --- */
.rank-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
font-size: 11px;
font-weight: 700;
line-height: 1;
}
.rank-badge.rank-playoff {
background-color: #00d6b4;
color: #fff !important;
}
.rank-badge.rank-playin {
background-color: #e8a735;
color: #fff !important;
}
@media (max-width: 1023px) {
.rank-badge {
width: 20px;
height: 20px;
font-size: 10px;
}
}
.match-result-loss {
/* Filtre CSS pour rendre l'icône rouge (#ff5b5b) — PC */
filter: brightness(0) saturate(100%) invert(52%) sepia(85%) saturate(3026%) hue-rotate(332deg) brightness(101%) contrast(101%);
}
/* Mobile uniquement : icônes défaite en rouge doux/corail */
@media (max-width: 1023px) {
.match-result-loss {
filter: brightness(0) saturate(100%) invert(60%) sepia(60%) saturate(600%) hue-rotate(330deg) brightness(100%) contrast(90%);
}
}
/* --- NOUVEAU CSS POUR LA PREMIÈRE CARD --- */
.team-card {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border-radius: 10px;
border: 1px solid var(--glass-border);
width: 100%;
position: relative;
color: #fff;
padding: 14px 20px;
min-height: 130px;
display: flex;
flex-direction: column;
overflow: hidden;
}
/* on passe d’abord les joueurs, puis les stats */
.stats-and-record { order: 2; }
.star-players-first { order: 1; }
.card-first-row {
width: 100%;
display: flex;
align-items: center;
justify-content: center; /* 1) centre le flex container */
}
.logo-and-name {
display: flex;
align-items: center;
gap: 1.5rem;
margin-right: auto; /* 2) pousse le logo+nom à l’extrême gauche */
}
.team-logo-first {
width: 100px;
height: 100px;
object-fit: contain;
}
.team-name-first {
color: var(--text-gray) !important;
display: inline-block; /* nécessaire pour scale si vous voulez garder le transform */
font-size: 32px; /* passe de 22px à 32px pour plus de présence */
/*font-weight: 900; /* ultra bold */
line-height: 1; /* pour coller les deux lignes */
margin-left: 1rem;
/*text-transform: uppercase; /* déjà en majuscules */
letter-spacing: 1px; /* un peu d’air entre les lettres */
/* si vous ne voulez plus du transform scale : */
transform: none;
}
.stats-first {
gap: 15px;
font-size: 16px;
/*font-weight: bold;*/
}
.ranking {
font-size: 20px;
color: #00d6b4;
}
.record-first {
color: var(--text-gray) !important;
font-size: 14px;
/*font-weight: bold;*/
}
.star-players-first {
display: flex;
align-items: center;
gap: 20px;
font-size: 16px;
font-weight: bold;
margin: 0; /* 3) annule tout décalage latéral */
}
/* transforme chaque container de joueur en colonne : photo au-dessus, nom en dessous */
.star-players-first > div {
display: flex;
flex-direction: column;
align-items: center;
}
/* petit espace et style pour le nom */
.star-players-first > div span {
margin-top: 6px;
font-size: 14px;
text-transform: uppercase !important;
color: var(--text-gray) !important;
}
.last-games-icons-first {
display: flex;
gap: 5px;
justify-content: flex-end;
}
.last-games-icons-first i {
font-size: 18px;
}
/* --- Ajustements responsives pour petits écrans --- */
@media (max-width: 1024px) {
.card-first-row {
flex-direction: column;
align-items: center;
gap: 10px;
}
.logo-and-name {
display: flex;
align-items: center;
gap: 1.5rem; /* passe de 10px (~0.6rem) à 1.5rem pour plus d’air */
}
.stats-first {
flex-wrap: wrap;
justify-content: center;
text-align: center;
gap: 8px;
}
.record-first {
color: var(--text-gray) !important;
position: static;
margin-top: 5px;
}
.team-logo-first {
width: 60px;
height: 60px;
}
.team-name-first {
margin-left: 1rem; /* décale le nom vers la droite */
}
.stats-first span {
font-size: 14px;
}
/* Masquer la section des joueurs sur mobile */
.star-players-first {
display: none;
}
.last-games-icons-first {
justify-content: center;
}
}
.player-stats-card {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border-radius: 10px;
border: 1px solid var(--glass-border);
padding: 20px;
margin-top: 20px;
}
.table-title {
color: #fff;
font-size: 20px;
font-weight: 500;
text-align: center;
margin-bottom: 16px;
}
.table-wrapper {
overflow-x: auto;
}
.stats-table {
width: 100%;
border-collapse: collapse;
}
.stats-table thead th {
padding: 12px 8px;
color: var(--text-gray);
font-weight: 600;
font-size: 0.55rem;
text-transform: uppercase;
letter-spacing: 0.6px;
border-bottom: 1px solid var(--glass-border);
background: rgba(255,255,255,0.015);
text-align: center;
}
.stats-table tbody td {
padding: 12px 8px;
color: var(--text-gray) !important;
text-align: center;
vertical-align: middle;
}
.player-cell {
display: flex;
align-items: center;
gap: 12px;
text-align: left;
}
.player-avatar {
width: 40px;
height: 40px;
object-fit: cover;
border-radius: 50%;
}
.stats-table tbody tr {
border-bottom: 1px solid var(--glass-border);
}
.stats-table tbody tr:hover {
background-color: rgba(255,255,255,0.05);
}
@media (max-width: 1024px) {
.player-avatar { width: 30px; height: 30px; }
.stats-table thead th,
.stats-table tbody td {
padding: 8px 6px;
font-size: 12px;
}
}
:root {
--text-gray: #A0A0A0;
--bg-page: #0a0a0a;
--bg-panel: #131313;
--bg-header: #161616;
--bg-row: #111111;
--bg-hover: #1a1a1a;
--accent: #00d6b4;
--text-main: #e0e0e0;
--border: #1e1e1e;
--radius: 4px;
--thickness: 1px;
/* ── Glass Card tokens ── */
--glass-bg: rgba(255,255,255,0.025);
--glass-border: rgba(255,255,255,0.06);
--glass-hover: rgba(255,255,255,0.04);
--glass-blur: 20px;
}
/* wrapper scroll + fond panel — Glass Card */
.players-table-wrapper {
border: none;
border-radius: 0;
background: transparent;
}
/* Limitation de hauteur et scroll interne UNIQUEMENT sur desktop */
@media (min-width: 1025px) {
.players-table-wrapper {
max-height: 50vh;
overflow-y: auto;
}
}
/* Style pour le bloc W/L (ajout d'une marge à droite) */
.record-first {
margin-right: 15px !important;
}
/* Marges pour le logo et les boutons qui sont collés aux bords */
#team-info {
padding-left: 15px !important;
}
.button-container {
margin-left: 15px !important;
}
/* === FULL WIDTH MOBILE POUR TOUTES LES CARTES ET CONTENEURS === */
@media (max-width: 1023px) {
html, body {
overflow-x: hidden !important;
position: relative;
width: 100%;
max-width: 100%;
}
.row,
.container,
.col-12,
.col-md-6,
.col-md-3,
.card,
#team-graph,
.graph-container,
.player-card,
.player-stats-card,
.slider-container,
.rank-card {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
border-radius: 0 !important;
box-sizing: border-box;
}
/* Slider prend toute la largeur sur mobile */
.slider-container .slider,
.slider-container input[type="range"] {
width: 90% !important; /* 90% pour avoir un peu de marge */
margin: 0 auto !important;
display: block !important;
position: relative;
}
/* Equalize gap above and below .conference-tabs pill:
Bootstrap mb-3 (16px) → reduce to match conference-tabs margin-bottom (10px) */
.col-12:has(> .team-card) {
margin-bottom: 10px !important;
}
/* .team-card garde ses coins arrondis sur mobile */
.team-card {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
border-radius: 20px !important; /* Coins bien arrondis sur mobile */
box-sizing: border-box;
position: relative;
}
/* === FIX POUR LE TABLEAU DES JOUEURS (en bas) AVEC SCROLL HORIZONTAL === */
/* Ne s'applique PAS aux tableaux de classement East/West */
/* IMPORTANT: no backdrop-filter on scroll container (breaks position:sticky) */
.players-table-wrapper {
overflow-x: auto !important;
overflow-y: auto !important;
max-height: 55vh !important;
width: 100% !important;
max-width: 100% !important;
position: relative;
-webkit-overflow-scrolling: touch;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: #111111 !important;
}
.player-stats-card {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: #111111 !important;
padding: 8px !important;
}
/* Classements East/West : pas de scroll, auto-dimensionnement */
#east-table .players-table-wrapper,
#west-table .players-table-wrapper {
overflow-x: visible !important;
overflow: visible !important;
max-height: none !important;
background: transparent !important;
}
#east-table .players-table-wrapper table,
#west-table .players-table-wrapper table {
min-width: 0 !important;
table-layout: auto !important;
}
/* Tableau joueurs (bas de page) : scroll horizontal */
.player-stats-table {
min-width: 800px;
border-collapse: separate !important;
border-spacing: 0;
}
/* Taille des cellules — tableaux joueurs uniquement */
.player-stats-table th,
.player-stats-table td {
padding: 5px 8px !important;
font-size: 12px !important;
white-space: nowrap;
}
/* Hide injury-bar col (col 1) and Position col (col 2) on mobile */
.player-stats-table thead th:nth-child(1),
.player-stats-table tbody td:nth-child(1),
.player-stats-table thead th:nth-child(2),
.player-stats-table tbody td:nth-child(2) {
display: none !important;
}
/* Sticky Player column (col 3 = first visible on mobile) */
.player-stats-table thead th:nth-child(3),
.player-stats-table tbody td:nth-child(3) {
position: -webkit-sticky !important;
position: sticky !important;
left: 0 !important;
z-index: 2;
background: #111111 !important;
min-width: 130px;
max-width: 170px;
box-shadow: 6px 0 8px -4px rgba(0,0,0,0.4);
}
/* Zebra for sticky Player column */
.player-stats-table tbody tr:nth-child(odd) td:nth-child(3) {
background: #131313 !important;
}
.player-stats-table tbody tr:nth-child(even) td:nth-child(3) {
background: #111111 !important;
}
/* Header row: sticky top */
.player-stats-table thead th {
position: sticky !important;
top: 0;
z-index: 3 !important;
background: #161616 !important;
}
/* Player header: sticky both top+left → highest z-index */
.player-stats-table thead th:nth-child(3) {
z-index: 10 !important;
}
/* Stat columns uniform width */
.player-stats-table th:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)),
.player-stats-table td:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)) {
width: 40px !important;
min-width: 40px !important;
text-align: center !important;
}
/* Colonne Player plus large */
.player-stats-table th:nth-child(3),
.player-stats-table td:nth-child(3) {
width: 130px !important;
min-width: 130px !important;
}
}
/* table générale */
.players-table {
width: 100%;
border-collapse: collapse;
background: transparent;
color: var(--text-gray) !important;
}
/* en-têtes collants — opaque pour ne pas voir le contenu à travers */
.players-table thead th {
position: sticky;
top: 0;
background: #161616;
color: var(--text-gray);
font-weight: 600;
font-size: 0.55rem;
text-transform: uppercase;
letter-spacing: 0.6px;
border-bottom: 1px solid var(--glass-border);
padding: 0.4rem 0.75rem;
text-align: center;
z-index: 10;
}
/* cellule photo si besoin */
.players-table tbody td:nth-child(2) .player-photo {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: var(--radius);
}
/* lignes et hover — Glass Card */
.players-table tbody tr {
border-bottom: 1px solid rgba(255,255,255,0.03);
transition: background-color 0.15s;
}
.players-table tbody tr:nth-child(odd) {
background: rgba(255,255,255,0.01);
}
.players-table tbody tr:hover {
background: var(--glass-hover);
}
/* padding générique pour toutes les cellules */
.players-table td {
padding: 0.35rem 0.75rem;
text-align: center;
vertical-align: middle;
color: var(--text-gray) !important;
}
/* Met en gras et centre la colonne Position du tableau joueurs, texte gris uniforme */
.stats-table td.player-position,
.players-table td.player-position {
font-weight: bold;
text-align: center;
color: var(--text-gray) !important;
}
/* scrollbar custom — Glass Card thin */
.players-table-wrapper::-webkit-scrollbar {
width: 4px;
}
.players-table-wrapper::-webkit-scrollbar-thumb {
background: #2a2a2a;
border-radius: 2px;
}
.players-table-wrapper::-webkit-scrollbar-track {
background: transparent;
}
.player-name {
display: block; /* nécessaire pour text-overflow */
white-space: nowrap; /* pas de retour à la ligne automatique */
overflow: hidden; /* coupe le texte qui dépasse */
text-overflow: ellipsis; /* ajoute "…" en fin de mot si ça déborde */
max-width: 100%; /* limite à la largeur du parent */
}
.player-name img {
display: block; /* ou inline-block */
width: 40px; /* comme tu veux */
height: 40px;
border-radius: 50%;
}
.card {
border: none;
}
.col-md-6 > .card {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
border-radius: 10px;
overflow: hidden;
padding: 0;
}
/* Container des deux lignes du nom */
.team-name-2lines {
display: flex;
flex-direction: column;
/* Espace entre la ligne du haut et celle du bas */
gap: 0.3rem; /* ajuste cette valeur à ton goût */
position: relative;
z-index: 1; /* Au-dessus du logo en arrière-plan */
margin-left: 220px; /* Décalage à droite : 200px (logo) + 20px (espace) */
}
/* Optionnel : si tu préfères cibler le second */
.team-name-2lines span + span {
margin-top: 0.25em;
}
/* 1) On force chaque span à être un block verticalement empilé */
.team-name-2lines span {
display: block;
margin: 0;
padding: 0;
}
/* 2) On conserve le gap “modern” (pour Chrome, Edge, Safari…) */
.team-name-2lines {
display: flex;
flex-direction: column;
gap: 0.3rem; /* votre espacement désiré */
row-gap: 0.3rem; /* fallback explicite pour Firefox */
}
/* 3) Fallback de secours si jamais gap/row-gap ne suffisent : marge haute sur le 2ᵉ span */
.team-name-2lines span + span {
margin-top: 0.3rem; /* même valeur que votre gap */
}
/* Conteneur similaire à player-photo-container */
/* Agrandit les images dans les cartes de paris */
.bet-card .player-photo,
.bet-card .team-logo {
width: 120px;
height: 120px;
}
.star-player-photo-container {
position: relative;
width: 90px; /* ajustez selon l’espace dispo */
height: 90px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
margin-bottom: 4px; /* espace vers le nom */
}
.star-player-photo-container img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Nom sous la photo */
.star-players-first > div {
display: flex;
flex-direction: column;
align-items: center;
}
.star-players-first > div span {
font-size: 14px;
font-weight: bold;
color: #fff;
text-align: center;
}
/* 1) Forcer la cellule “Player” à limiter sa largeur - Responsive */
.player-stats-table .player-name {
max-width: 150px; /* largeur de base pour petits écrans */
white-space: nowrap; /* pas de retour à la ligne automatique */
overflow: hidden; /* masquer ce qui dépasse */
text-overflow: ellipsis; /* afficher "…" en fin de ligne */
display: flex; /* flex layout for photo + name */
align-items: center;
}
/* Media queries pour augmenter progressivement la largeur des noms sur grands écrans */
@media (min-width: 992px) {
.player-stats-table .player-name {
max-width: 200px; /* plus large sur écrans moyens */
}
}
@media (min-width: 1200px) {
.player-stats-table .player-name {
max-width: 250px; /* encore plus large sur grands écrans */
}
}
@media (min-width: 1400px) {
.player-stats-table .player-name {
max-width: 300px; /* largeur maximale sur très grands écrans */
}
}
/* 2) Si vous voulez que l’image du joueur reste fixe à gauche */
.player-stats-table .player-name img {
flex-shrink: 0; /* l’image ne rétrécit pas */
margin-right: 8px; /* petit espace avant le nom */
}
/* 3) (Optionnel) Si votre cellule “Player” est déjà en flex, on s’assure que le texte peut rétrécir */
.player-stats-card {
margin-top: 0; /* suppression de la marge négative */
}
.player-stats-table .player-name span {
flex-shrink: 1;
min-width: 0; /* autorise le texte à rétrécir correctement */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* (1) On rend le parent relatif pour l'absolute positioning */
.team-card .card-first-row {
position: relative;
}
/* (2) On centre absolument la zone des stars */
.team-card .star-players-first {
display: none !important;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
/* Grossit et met en avant le classement à côté du nom */
.ranking-large {
display: inline-block; /* pour gérer sa largeur/padding */
font-size: clamp(1.5rem, 8vw, 5rem);
/*font-weight: 900; */
line-height: 1; /* sans espacement vertical */
color: #00d6b4;
margin-left: 1.5rem; /* espace entre le nom et le # */
vertical-align: middle; /* pour centrer sur la ligne */
}
.stats-and-record,
.stats-and-record span {
color: var(--text-gray) !important;
}
/* ─── Donut Section ─────────────────────────────────── */
.donut-section {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.donut-section canvas {
display: block;
}
.donut-toggles {
display: flex;
gap: 6px;
}
.donut-toggle-btn {
background: rgba(100, 160, 220, 0.12);
border: 1px solid rgba(100, 160, 220, 0.25);
color: rgba(180, 210, 240, 0.85);
font-size: 0.7rem;
padding: 3px 12px;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s;
font-weight: 500;
letter-spacing: 0.02em;
outline: none;
}
.donut-toggle-btn:focus {
outline: none;
box-shadow: none;
}
.donut-toggle-btn:hover {
background: #00d6b4;
border-color: #00d6b4;
color: #fff;
}
.donut-toggle-btn.active {
background: rgba(0, 214, 180, 0.15);
border-color: rgba(0, 214, 180, 0.4);
color: #00d6b4;
font-weight: 600;
}
/* ─── Period toggle switch (Season | Last 5) ─── */
.donut-period-switch {
display: flex;
background: rgba(255,255,255,0.06);
border-radius: 12px;
overflow: hidden;
}
.switch-opt {
padding: 3px 10px;
font-size: 0.65rem;
font-weight: 500;
color: rgba(255,255,255,0.4);
cursor: pointer;
transition: all 0.2s;
user-select: none;
letter-spacing: 0.02em;
}
.switch-opt:hover {
color: rgba(255,255,255,0.7);
}
.switch-opt.active {
background: rgba(0, 214, 180, 0.18);
color: #00d6b4;
font-weight: 600;
}
/* === Joueurs (Points/Assists/Rebounds) === */
.player-highlight-cards .col-md-3 {
margin-bottom: 6px;
}
/* carte générique — Glass Card */
.player-card {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
border-radius: 10px;
width: 100%;
min-height: 60px;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.star-players-first > div:first-child {
margin-left: 2rem;
}
/* Écrans moyens (≤1199px) */
@media (max-width: 1199px) {
.star-players-first {
gap: 16px;
}
.star-players-first > div {
width: 70px;
}
.star-players-first > div .star-player-photo-container {
width: 70px;
height: 70px;
}
.star-players-first > div span {
font-size: 12px;
}
}
/* Écrans plus petits (≤991px) */
@media (max-width: 991px) {
.star-players-first {
gap: 12px;
}
.star-players-first > div {
width: 60px;
}
.star-players-first > div .star-player-photo-container {
width: 60px;
height: 60px;
}
.star-players-first > div span {
font-size: 11px;
}
}
/* Mobile strict (≤767px) : on masque complètement */
@media (max-width: 1023px) {
.star-players-first {
display: none !important;
}
}
/* corps de la carte - Design simplifié et fin */
.player-card-body {
padding: 10px 15px !important; /* Padding cohérent avec Player Stats */
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
min-height: 60px !important; /* Hauteur minimale comme Player Stats */
}
/* Container pour stat + nom du joueur */
.stat-info {
display: flex;
flex-direction: column;
gap: 2px; /* Espace minimal entre stat et nom */
}
/* Affichage de la stat sur une ligne */
.stat-display {
display: flex;
align-items: baseline;
gap: 6px;
}
.stat-label-left {
color: var(--text-gray);
font-size: 0.85rem;
font-weight: 500;
text-transform: uppercase;
}
.stat-value-main {
color: #00d6b4;
font-size: 0.85rem; /* Même taille que le label */
font-weight: 700;
}
.stat-unit {
color: var(--text-gray);
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
opacity: 0.7;
}
/* Nom du meilleur joueur en dessous */
.best-player-name {
color: var(--text-gray);
font-size: 0.7rem;
font-weight: 400;
opacity: 0.6;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 120px;
}
/* Photos empilées des top 5 joueurs - EXACTEMENT comme Player Stats */
.top-players-stack {
display: flex;
align-items: center;
gap: 0;
margin-left: auto;
position: relative;
}
.top-players-stack img {
width: 34px;
height: 34px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,0.08);
background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
object-fit: contain;
margin-left: -14px; /* Chevauchement comme Player Stats */
transition: transform 0.3s ease, z-index 0.2s ease, box-shadow 0.3s ease;
cursor: pointer;
position: relative;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
/* Première photo plus grande (le meilleur joueur) */
.top-players-stack img:first-child {
width: 42px; /* Plus grand */
height: 42px;
margin-left: 0;
z-index: 5;
border: 2.5px solid #6e7681; /* ✅ Bordure GRISE pour le #1 */
}
.top-players-stack img:nth-child(2) {
z-index: 4;
}
.top-players-stack img:nth-child(3) {
z-index: 3;
}
.top-players-stack img:nth-child(4) {
z-index: 2;
}
.top-players-stack img:nth-child(5) {
z-index: 1;
}
.top-players-stack img:hover {
transform: scale(1.3);
z-index: 100 !important;
box-shadow: 0 4px 16px rgba(0, 214, 180, 0.4);
}
/* Tooltip pour les photos */
.top-players-stack img::after {
content: attr(title);
position: absolute;
bottom: calc(100% + 12px);
left: 50%;
transform: translateX(-50%) translateY(4px);
background: linear-gradient(135deg, #141414 0%, #1a1a1a 100%);
color: #ffffff;
padding: 8px 14px;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 500;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1000;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3),
0 2px 8px rgba(0, 0, 0, 0.2),
0 0 0 1px rgba(0, 0, 0, 0.05);
}
.top-players-stack img:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(-2px);
}
/* bloc photo + nom */
.player-photo-block {
flex: 1; /* prend tout l’espace disponible, mais peut shrink */
min-width: 0; /* permet au flex-item de rétrécir correctement */
}
.player-photo {
width: 40px;
height: 40px;
object-fit: contain;
border-radius: 0; /* plus de coins arrondis */
}
.player-name {
margin-top: 4px;
color: var(--text-gray);
font-size: 0.9rem;
}
/* bloc statistique */
.player-stat-block {
display: flex;
align-items: center; /* tout sur la même ligne */
justify-content: flex-end;/* aligné à droite */
gap: 0.5rem; /* petit espace valeur ↔ label */
padding-right: 1rem;
}
.stat-value {
font-size: 2rem !important;
/*font-weight: 900 !important;*/
line-height: 1;
/*text-transform: uppercase;*/
color: var(--text-gray);
}
.stat-label {
font-size: 1.2rem !important;
font-weight: 900 !important;
text-transform: uppercase;
color: var(--text-gray);
}
.player-card-body.d-flex {
gap: 2rem; /* espace plus large pour aérer */
}
/* carte OFF/DEFF — Glass Card */
.rank-card {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
border-radius: 10px;
width: 100%;
min-height: 60px;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.rank-card .player-card-body {
display: flex;
align-items: center;
justify-content: space-evenly;
gap: 1rem;
}
.rank-card .player-stat-block {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* responsive */
@media (max-width: 1024px) {
.player-photo { width: 40px; height: 40px; }
.stat-value { font-size: 2rem; }
}
/* 1) Masquer la section "joueurs stars" sur écrans < 1024px */
@media (max-width: 1024px) {
.star-players-first {
display: none !important;
}
}
/* === Styles pour mobile (écrans ≤ 768px) === */
@media (max-width: 1024px) {
/* ─── Menu hamburger ───────────────────────────────────────────── */
.menu-toggle {
display: block;
}
/* ─── Sidebar : toujours fermé par défaut, s’ouvre avec .active ─── */
.sidebar {
top: 60px;
width: 60px; /* toujours fermé */
max-height: calc(100vh - 60px);
transition: width 0.3s ease;
}
.sidebar.active {
width: max-content;
}
.sidebar a .link-text {
display: inline-block;
}
/* ─── Contenu principal ─────────────────────────────────────────── */
.content {
margin-left: 0;
width: 100%;
padding-top: 80px;
}
/* ─── Tableaux, logos, etc. ─────────────────────────────────────── */
.table-compact {
font-size: 12px;
}
.team-logo {
width: 25px;
height: 25px;
}
.table-compact th,
.table-compact td {
padding: 5px 8px;
}
/* ─── Player photo / stat cards : disposition en ligne et hauteur réduite ────────────────────────────────── */
.player-card {
display: flex !important;
flex-direction: row !important; /* photo à gauche, stats à droite */
align-items: center !important; /* centre verticalement */
justify-content: space-between !important;
padding: 8px 12px !important; /* moins de padding vertical pour réduire la hauteur */
height: auto !important; /* pas de hauteur fixe */
min-height: unset !important; /* supprimer tout min-height imposé */
background: var(--glass-bg) !important;
border: 1px solid var(--glass-border) !important;
border-radius: 8px !important;
margin-bottom: 6px !important;
}
.player-card .player-card-body {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
width: 100%;
padding: 10px 15px !important;
}
.player-photo-block {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
}
.player-photo {
width: 40px !important;
height: 40px !important;
object-fit: contain;
border-radius: 0 !important;
}
.player-name {
font-size: 0.85rem !important;
font-weight: 400 !important;
color: var(--text-gray) !important;
display: flex;
align-items: center;
gap: 10px;
text-transform: none !important;
}
.player-stat-block {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 4px !important;
}
.stat-value {
font-size: 1.5rem !important;
font-weight: 900 !important;
line-height: 1 !important;
color: var(--text-gray) !important;
}
.stat-label {
font-size: 1rem !important;
color: var(--text-gray) !important;
}
/* ─── Carte OFF/DEFF Rank : mêmes dimensions que les autres ────────────────────────────────── */
.rank-card {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 8px 12px !important;
height: auto !important;
min-height: unset !important;
background: var(--glass-bg) !important;
border: 1px solid var(--glass-border) !important;
border-radius: 8px !important;
margin-bottom: 6px !important;
}
.rank-card .player-card-body {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
width: 100%;
padding: 0 !important;
}
.rank-card .player-stat-block {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 4px !important;
}
.rank-card .stat-value {
font-size: 1.5rem !important;
font-weight: 900 !important;
}
.rank-card .stat-label {
font-size: 1rem !important;
font-weight: 900 !important;
}
/* ─── Joueurs stars : toujours cachés sur ≤ 1024px ─────────────── */
.star-players-first {
display: none !important;
}
/* ─── Donut section : masquer sur mobile ─────────────────── */
.donut-section {
display: none !important;
}
/* ─── Card équipe : ajustements sur mobile ──────────────────────── */
.team-card {
position: relative; /* pour le positionnement absolu du classement */
padding-top: 12px; /* réduire l’espace au-dessus */
padding-bottom: 12px; /* réduire l’espace en-dessous */
min-height: unset; /* supprimer le min-height pour avoir une carte “fine” */
}
.card-first-row {
display: flex !important;
flex-direction: row !important; /* Garder logo et ranking sur la même ligne */
align-items: center; /* Centrer verticalement */
justify-content: flex-start; /* Logo à gauche */
position: relative; /* Nécessaire pour position:absolute du ranking */
padding-bottom: 8px; /* réduire l’espace sous la ligne du logo/nom */
}
.team-logo-first {
width: 60px;
height: 60px;
margin-left: 10px; /* Petit décalage depuis le bord */
}
.team-name-2lines {
display: none !important;
}
#team-short-name {
display: block;
font-size: 20px;
font-weight: 900;
color: var(--text-gray);
margin-left: 1rem;
text-transform: uppercase;
}
.ranking-large {
position: absolute;
right: 10px; /* Collé à droite */
top: 50%;
transform: translateY(-50%);
font-size: 2.5rem;
font-weight: 900;
color: #00d6b4;
margin-left: 0;
}
.stats-and-record {
margin-left: 10px;
margin-top: 6px; /* réduire l’espace au-dessus */
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-bottom: 6px; /* réduire l’espace en-dessous */
}
.stats-first {
font-size: 14px;
gap: 8px;
display: flex;
align-items: center;
}
.record-first {
font-size: 14px;
margin-top: 0;
}
.stats-first span:nth-child(3),
.stats-first span:nth-child(4) {
display: none;
}
/* ─── Espacement entre les deux tableaux Est et Ouest ──────────── */
.col-md-6.container {
margin-bottom: 1rem; /* espacement vertical entre les deux cartes */
}
.col-md-6.container:last-of-type {
margin-bottom: 0;
}
/* ─── GRAPHIQUE : aligner l’axe Y avec le bouton “Average PPG” ─── */
#team-graph {
/* On supprime le padding universel de 20px et on le remplace par 12px à gauche/droite */
padding-right: 12px;
padding-top: 20px; /* on conserve 20px en haut si nécessaire */
padding-bottom: 20px; /* on conserve 20px en bas si nécessaire */
}
/* 1) Positionner #team-info en haut à gauche en mode « ligne » */
#team-info {
position: static !important;
display: flex;
flex-direction: row; /* logo à gauche, nom à droite */
align-items: center;
justify-content: flex-start; /* coller à gauche */
padding: 0;
margin-bottom: 10px; /* espace sous le bloc */
}
/* 2) Réduire la taille du logo */
#team-info img {
width: 40px;
height: 40px;
margin-right: 8px; /* un petit espacement entre logo et nom */
}
/* 3) Réduire la taille du texte du nom */
#team-info span {
font-size: 18px;
font-weight: 700;
color: #e0e0e0; /* ou la couleur souhaitée */
margin: 0;
}
/* 4) Pour éviter tout chevauchement avec la ligne de boutons */
.controls-row {
margin-top: 8px; /* décale la ligne de boutons vers le bas */
}
}
/* === Styles pour tablettes (entre 769px et 1024px) === */
@media (min-width: 769px) and (max-width: 1024px) {
/* ─── Menu hamburger ───────────────────────────────────────────── */
.menu-toggle {
display: block;
}
/* ─── Sidebar : toujours fermé par défaut, s’ouvre avec .active ─── */
.sidebar {
top: 60px;
width: 60px; /* toujours fermé */
max-height: calc(100vh - 60px);
transition: width 0.3s ease;
}
.sidebar.active {
width: max-content;
}
.sidebar a .link-text {
display: inline-block;
}
/* ─── Contenu principal ─────────────────────────────────────────── */
.content {
margin-left: 0;
width: 100%;
padding-top: 80px;
}
/* ─── Tableaux, logos, etc. ─────────────────────────────────────── */
.table-compact {
font-size: 12px;
}
.team-logo {
width: 25px;
height: 25px;
}
.table-compact th,
.table-compact td {
padding: 5px 8px;
}
/* ─── Player photo / stat cards : disposition en ligne et hauteur réduite ────────────────────────────────── */
.player-card {
display: flex !important;
flex-direction: row !important; /* photo à gauche, stats à droite */
align-items: center !important; /* centre verticalement */
justify-content: space-between !important;
padding: 8px 12px !important; /* moins de padding vertical pour réduire la hauteur */
height: auto !important; /* pas de hauteur fixe */
min-height: unset !important; /* supprimer tout min-height imposé */
background: var(--glass-bg) !important;
border: 1px solid var(--glass-border) !important;
border-radius: 8px !important;
margin-bottom: 6px !important; /* réduction de l’espacement entre les cartes */
}
.player-card .player-card-body {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
width: 100%;
padding: 10px 15px !important; /* Padding cohérent avec Player Stats */
}
.player-photo-block {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px !important;
}
.player-photo {
width: 50px;
height: 50px;
object-fit: contain;
border-radius: 0;
}
.player-name {
font-size: 0.85rem !important; /* texte plus petit */
color: var(--text-gray) !important;
font-weight: 900 !important;
text-transform: uppercase !important;
}
.player-stat-block {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 4px !important;
}
.stat-value {
font-size: 1.5rem !important; /* plus petit que sur desktop */
font-weight: 900 !important;
line-height: 1 !important;
color: var(--text-gray) !important;
}
.stat-label {
font-size: 1rem !important;
font-weight: 900 !important;
color: var(--text-gray) !important;
}
/* ─── Carte OFF/DEFF Rank : mêmes dimensions que les autres ────────────────────────────────── */
.rank-card {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
padding: 8px 12px !important;
height: auto !important;
min-height: unset !important;
background: var(--glass-bg) !important;
border: 1px solid var(--glass-border) !important;
border-radius: 8px !important;
margin-bottom: 6px !important; /* réduction de l’espacement ici aussi */
}
.rank-card .player-card-body {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
width: 100%;
padding: 0 !important;
}
.rank-card .player-stat-block {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 4px !important;
}
.rank-card .stat-value {
font-size: 1.5rem !important;
font-weight: 900 !important;
}
.rank-card .stat-label {
font-size: 1rem !important;
font-weight: 900 !important;
}
/* ─── Joueurs stars : toujours cachés sur ≤ 1024px ─────────────── */
.star-players-first {
display: none !important;
}
/* ─── Donut section : masquer sur mobile ─────────────────── */
.donut-section {
display: none !important;
}
/* ─── Card équipe : ajustements sur mobile ──────────────────────── */
.team-card {
position: relative; /* pour le positionnement absolu du classement */
padding-top: 12px; /* réduire l’espace au-dessus */
padding-bottom: 12px; /* réduire l’espace en-dessous */
min-height: unset; /* supprimer le min-height pour avoir une carte “fine” */
}
.card-first-row {
display: flex !important;
flex-direction: row !important; /* Garder logo et ranking sur la même ligne */
align-items: center; /* Centrer verticalement */
justify-content: flex-start; /* Logo à gauche */
position: relative; /* Nécessaire pour position:absolute du ranking */
padding-bottom: 8px; /* réduire l’espace sous la ligne du logo/nom */
}
.team-logo-first {
width: 60px;
height: 60px;
margin-left: 10px; /* Petit décalage depuis le bord */
}
.team-name-2lines {
display: none !important;
}
#team-short-name {
display: block !important;
font-size: 20px;
font-weight: 900;
color: var(--text-gray);
margin-left: 1rem;
text-transform: uppercase;
}
.ranking-large {
position: absolute;
right: 10px; /* Collé à droite */
top: 50%;
transform: translateY(-50%);
font-size: 2.5rem;
font-weight: 900;
color: #00d6b4;
margin-left: 0;
}
.stats-and-record {
margin-left: 10px;
margin-top: 6px; /* réduire l’espace au-dessus */
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding-bottom: 6px; /* réduire l’espace en-dessous */
}
.stats-first {
font-size: 14px;
gap: 8px;
display: flex;
align-items: center;
}
.record-first {
font-size: 14px;
margin-top: 0;
}
.stats-first span:nth-child(3),
.stats-first span:nth-child(4) {
display: none;
}
/* ─── Espacement entre les deux tableaux Est et Ouest ──────────── */
.col-md-6.container {
margin-bottom: 1rem; /* espacement vertical entre les deux cartes */
}
.col-md-6.container:last-of-type {
margin-bottom: 0;
}
/* ─── GRAPHIQUE : aligner l’axe Y avec le bouton “Average PPG” ─── */
#team-graph {
/* On supprime le padding universel de 20px et on le remplace par 12px à gauche/droite */
padding-right: 12px;
padding-top: 20px; /* on conserve 20px en haut si nécessaire */
padding-bottom: 20px; /* on conserve 20px en bas si nécessaire */
}
/* 1) Positionner #team-info en haut à gauche en mode « ligne » */
#team-info {
position: static !important;
display: flex;
flex-direction: row; /* logo à gauche, nom à droite */
align-items: center;
justify-content: flex-start; /* coller à gauche */
padding: 0;
margin-bottom: 10px; /* espace sous le bloc */
}
/* 2) Réduire la taille du logo */
#team-info img {
width: 40px;
height: 40px;
margin-right: 8px; /* un petit espacement entre logo et nom */
}
/* 3) Réduire la taille du texte du nom */
#team-info span {
font-size: 18px;
font-weight: 700;
color: #e0e0e0; /* ou la couleur souhaitée */
margin: 0;
}
/* 4) Pour éviter tout chevauchement avec la ligne de boutons */
.controls-row {
margin-top: 8px; /* décale la ligne de boutons vers le bas */
appearance: none; /* ajout de la propriété standard 'appearance' pour la compatibilité */
}
}
/* ==== SPACING FIREFOX FIX ==== */
/* 1) On s’assure que le container reste en colonne */
/* 2) Chaque ligne est un block (pour que margin-top fonctionne) */
.team-name-2lines .team-name-first {
display: block !important;
}
/* 3) On force l’espacement si gap/row-gap ne sont pas appliqués */
.team-name-2lines .team-name-first + .team-name-first {
margin-top: 0.3rem !important;
}
/* 1) On neutralise toute marge négative sur la première ligne */
#playerFirstName,
.team-name-2lines .team-name-first {
margin-bottom: 0 !important;
}
/* 2) On s’assure que la deuxième ligne est un block */
/* pour que margin-top fonctionne parfaitement */
#playerLastName,
.team-name-2lines .team-name-first + .team-name-first {
display: block !important;
margin-top: 0.3rem !important; /* ajustez ici l’espacement que vous voulez */
}
/* hover-tooltip for player-card */
.player-card {
position: relative; /* ensure pseudo-element is positioned correctly */
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Effet hover pour les cartes joueurs cliquables */
.player-card[data-player-id]:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 214, 180, 0.2);
background-color: rgba(0, 214, 180, 0.05);
}
.player-card[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
top: -1.8rem; /* position above the card */
left: 50%;
transform: translateX(-50%);
background: #fff; /* white background */
color: #666; /* gray text */
padding: 4px 8px;
border: 1px solid #ccc;
border-radius: 4px;
white-space: nowrap;
font-size: 0.75rem;
pointer-events: none;
z-index: 1000;
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
/* hover‐tooltips on the stats row */
.stats-first span[data-tooltip] {
position: relative;
cursor: help;
}
.stats-first span[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: fixed;
top: auto;
bottom: auto;
left: 50%;
transform: translateX(-50%) translateY(-100%);
background: #fff;
color: #666;
padding: 4px 8px;
border: 1px solid #ccc;
border-radius: 4px;
white-space: nowrap;
font-size: 0.75rem;
font-weight: normal;
pointer-events: none;
z-index: 9999;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* en tête ou juste après vos variables : */
@supports (-moz-appearance: meterbar) {
@media (max-width: 1024px) {
/* cache le nom complet */
.team-name-2lines {
display: none !important;
}
/* force l’affichage du short name */
#team-short-name {
display: block !important;
}
}
}
/* Marges fines sur mobile (comme Betsmaker) */
@media (max-width: 1024px) {
/* Supprimer TOUTES les marges et paddings Bootstrap */
.container,
.container-fluid,
.col-md-6,
.col-md-3,
.col-12,
.row,
#east-table,
#west-table {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
/* Padding interne pour les graphiques et tableaux */
#team-graph,
.graph-section {
margin-left: 0 !important;
margin-right: 0 !important;
padding: 8px !important;
}
/* Card équipe - garder les arrondis */
.team-card {
margin-left: 3px !important;
margin-right: 3px !important;
padding-left: 8px !important;
padding-right: 8px !important;
}
/* Cards des tableaux - sans arrondis pour coller aux bords */
.conference-table .card {
margin-left: 0 !important;
margin-right: 0 !important;
border-radius: 0 !important;
}
/* Tableaux sans marges */
.conference-table,
.players-table {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Wrapper de tableau */
.table-wrapper,
.players-table-wrapper {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Body sans padding */
body {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Main content */
main,
.main-content,
.content {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Override du padding de base.css - navbar 50px + gutter 8px */
.content {
padding: 55px 8px 20px 8px !important;
}
}
/* ========================================================================
STYLES POUR JOUEURS CLIQUABLES - Navigation vers PlayerStats
======================================================================== */
/* Effet hover pour les lignes de joueurs cliquables dans le tableau */
.clickable-player-row {
transition: background-color 0.2s ease;
}
.clickable-player-row:hover {
background-color: rgba(0, 214, 180, 0.1) !important;
}
.clickable-player-row * {
cursor: pointer !important;
}
/* Espacement entre le logo et les stats pour éviter qu'ils se touchent (desktop uniquement) */
@media (min-width: 1025px) {
.stats-and-record {
padding-top: 6px !important;
}
}
/* =============================
Team Snapshot Button
============================= */
.team-snapshot-btn {
min-width: 28px;
padding: 4px 8px;
margin-left: 8px;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 6px;
color: #888;
cursor: pointer;
transition: all 0.2s;
display: inline-flex;
align-items: center;
justify-content: center;
}
.team-snapshot-btn:hover {
border-color: #00d6b4;
color: #00d6b4;
}
/* =============================
Snapshot Preview Modal
============================= */
.snapshot-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
}
.snapshot-modal__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(8px);
}
.snapshot-modal__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
max-width: 90vw;
max-height: 90vh;
gap: 12px;
}
.snapshot-modal__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-shrink: 0;
}
.snapshot-modal__tabs {
display: flex;
gap: 4px;
background: rgba(255, 255, 255, 0.06);
border-radius: 8px;
padding: 3px;
}
.snapshot-modal__tab {
padding: 6px 16px;
border: none;
border-radius: 6px;
background: transparent;
color: #888;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.snapshot-modal__tab:hover {
color: #ccc;
}
.snapshot-modal__tab.active {
background: #00d6b4;
color: #000;
font-weight: 600;
}
.snapshot-modal__actions {
display: flex;
gap: 8px;
align-items: center;
}
.snapshot-modal__download {
display: flex;
align-items: center;
padding: 6px 16px;
border: none;
border-radius: 6px;
background: #00d6b4;
color: #000;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
}
.snapshot-modal__download:hover {
background: #00f0c8;
}
.snapshot-modal__close {
width: 32px;
height: 32px;
border: none;
border-radius: 6px;
background: rgba(255, 255, 255, 0.08);
color: #888;
font-size: 16px;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
}
.snapshot-modal__close:hover {
background: rgba(255, 255, 255, 0.15);
color: #fff;
}
.snapshot-modal__preview {
overflow: hidden;
border-radius: 10px;
border: 1px solid var(--glass-border);
background: rgba(10,10,10,0.9);
}
.snapshot-modal__preview img {
display: block;
max-width: 80vw;
max-height: 75vh;
width: auto;
height: auto;
}
/* ========== Injury Bar (Player Table) ========== */
/* Both PC and mobile: bar is in its own | before Position column.
On mobile the Position column is hidden so the bar sits next to Player. */
.injury-bar {
display: inline-block;
width: 3px;
height: 40px; /* matches player-photo height */
border-radius: 2px;
vertical-align: middle;
flex-shrink: 0;
}
td.injury-bar-cell,
th.injury-bar-cell {
width: 6px;
padding: 0 2px !important;
vertical-align: middle;
text-align: center;
}
.injury-bar-green { background: #008348; box-shadow: 0 0 4px rgba(0,131,72,0.5); }
.injury-bar-orange { background: #f59e0b; box-shadow: 0 0 4px rgba(245,158,11,0.5); }
.injury-bar-red { background: #ef4444; box-shadow: 0 0 4px rgba(239,68,68,0.5); }
/* Desktop (≥1025px): bar column visible, inline bar hidden */
@media (min-width: 1025px) {
.ib-desktop-col { display: table-cell !important; }
.injury-bar-inline { display: none !important; }
}
/* Mobile (≤1024px): bar column hidden, inline bar visible; hide Position column */
@media (max-width: 1024px) {
.ib-desktop-col { display: none !important; }
.player-stats-table .player-position { display: none !important; }
}
/* Inline injury bar inside the Player cell (mobile only) */
.injury-bar-inline {
display: inline-block;
width: 3px;
height: 34px;
border-radius: 2px;
flex-shrink: 0;
margin-right: 5px;
}
/* =====================================================
NUCLEAR OVERRIDE — Tableaux classement mobile 100%
Placé en fin de fichier pour gagner en cascade CSS
===================================================== */
@media (max-width: 1023px) {
#east-table .card,
#west-table .card {
display: block !important;
width: 100% !important;
}
#east-table .players-table-wrapper,
#west-table .players-table-wrapper {
display: block !important;
width: 100% !important;
overflow: visible !important;
overflow-x: visible !important;
}
#east-table .players-table,
#west-table .players-table {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
table-layout: fixed !important;
}
/* Rank — juste le badge */
#east-table .players-table th:nth-child(1),
#east-table .players-table td:nth-child(1),
#west-table .players-table th:nth-child(1),
#west-table .players-table td:nth-child(1) {
width: 38px !important;
}
/* GP, W, L — 2 chiffres max */
#east-table .players-table th:nth-child(3),
#east-table .players-table td:nth-child(3),
#east-table .players-table th:nth-child(4),
#east-table .players-table td:nth-child(4),
#east-table .players-table th:nth-child(5),
#east-table .players-table td:nth-child(5),
#west-table .players-table th:nth-child(3),
#west-table .players-table td:nth-child(3),
#west-table .players-table th:nth-child(4),
#west-table .players-table td:nth-child(4),
#west-table .players-table th:nth-child(5),
#west-table .players-table td:nth-child(5) {
width: 30px !important;
}
/* Streak — 5 icônes de 16px + gaps */
#east-table .players-table th:nth-child(6),
#east-table .players-table td:nth-child(6),
#west-table .players-table th:nth-child(6),
#west-table .players-table td:nth-child(6) {
width: 105px !important;
}
/* Team — PAS de width → prend TOUT l'espace restant dynamiquement */
}
/* ============================================
Team Season Averages (mirrored from playerstat.css)
============================================ */
.player-averages-card {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border-radius: 10px;
border: 1px solid var(--glass-border);
padding: 12px 20px;
margin-top: 20px;
margin-bottom: 20px;
}
.averages-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.averages-title {
font-size: 0.95rem;
font-weight: 600;
color: #888;
margin: 0;
}
.averages-controls {
display: flex;
align-items: center;
gap: 12px;
height: 24px;
}
.switch-container {
display: flex;
align-items: center;
gap: 6px;
height: 24px;
}
.switch-label {
font-size: 0.8rem;
color: #888;
font-weight: 500;
transition: color 0.2s ease;
white-space: nowrap;
line-height: 24px;
height: 24px;
}
.switch-label.active {
color: #00d6b4;
}
.switch {
position: relative;
display: inline-block;
width: 32px;
height: 16px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.switch-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #1e1e1e;
transition: 0.3s;
border-radius: 16px;
}
.switch-slider:before {
position: absolute;
content: "";
height: 12px;
width: 12px;
left: 2px;
bottom: 2px;
background-color: #fff;
transition: 0.3s;
border-radius: 50%;
}
input:checked + .switch-slider {
background-color: #00d6b4;
}
input:checked + .switch-slider:before {
transform: translateX(16px);
}
.custom-games-input {
display: flex;
align-items: center;
gap: 6px;
height: 24px;
}
.custom-games-input label {
font-size: 0.8rem;
color: #888;
font-weight: 500;
line-height: 1;
height: auto;
margin: 0;
padding: 0;
}
.custom-games-input input {
width: 35px;
height: 24px;
padding: 0 6px;
background: transparent;
border: none;
color: #fff;
font-size: 0.8rem;
text-align: center;
line-height: 24px;
box-sizing: border-box;
appearance: textfield;
-moz-appearance: textfield;
}
.custom-games-input input::-webkit-outer-spin-button,
.custom-games-input input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.custom-games-input input:focus {
outline: none;
}
.custom-games-input .input-label {
font-size: 0.8rem;
color: #888;
line-height: 24px;
height: 24px;
}
.averages-table-wrapper {
overflow-x: auto;
}
.averages-table {
width: 100%;
border-collapse: collapse;
}
.averages-table th {
font-size: 0.7rem;
font-weight: 600;
color: #888;
text-transform: uppercase;
padding: 6px 10px;
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.averages-table td {
font-size: 0.85rem;
font-weight: 600;
color: #e0e0e0;
padding: 8px 10px;
text-align: center;
}
/* Mobile: horizontal scroll for Season Averages controls (matches Player Stats) */
@media (max-width: 1024px) {
/* Season Averages header: title on top line, controls below */
.averages-header {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.averages-title {
font-size: 0.75rem;
}
.averages-controls {
overflow-x: auto;
overflow-y: visible;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
padding-top: 4px;
padding-bottom: 5px;
height: auto;
}
.averages-controls .switch-container,
.averages-controls .custom-games-input {
flex-shrink: 0;
}
.player-averages-card {
padding-left: 8px;
padding-right: 8px;
}
.averages-table th {
padding-left: 6px;
padding-right: 6px;
}
.averages-table td {
padding-left: 6px;
padding-right: 6px;
}
}
.rankings-row td {
font-size: 0.7rem !important;
font-weight: 400 !important;
color: #666 !important;
padding: 4px 10px !important;
border-top: 1px solid rgba(255, 255, 255, 0.03);
}
/* Loading spinner for Season Averages */
.tavg-spinner {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid rgba(150, 150, 150, 0.2);
border-top-color: #999;
border-radius: 50%;
animation: tavg-spin 0.8s linear infinite;
}
@keyframes tavg-spin {
to { transform: rotate(360deg); }
}
/* Player name: full on desktop, abbreviated (F. Lastname) on mobile */
.name-short { display: none; }
@media (max-width: 1024px) {
.name-full { display: none; }
.name-short { display: inline; }
}
/* ─── Season Averages header: minimal style on mobile ─────────────── */
@media (max-width: 1024px) {
.averages-title {
font-size: 0.58rem !important;
font-weight: 300 !important;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(255, 255, 255, 0.3) !important;
padding-bottom: 7px;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
width: 100%;
margin-bottom: 0;
}
.averages-header {
gap: 8px !important;
}
}
/* ─── Sticky full-viewport table on mobile ─────────────────────────── */
@media (max-width: 1024px) {
.player-stats-card {
position: sticky !important;
top: 50px !important; /* below top navbar (50px on mobile) */
height: calc(100dvh - 50px - 60px) !important; /* minus topnav + bottomnav */
overflow: hidden !important;
z-index: 50 !important;
border-radius: 0 !important;
}
.player-stats-card .player-stats-wrapper,
.player-stats-card .players-table-wrapper {
height: 100% !important;
max-height: none !important;
overflow-y: auto !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
}
/* ═══════════════════════════════════════════════════════════════════
LAYOUT SYSTEM — Uniform spacing & alignment
─ Gap vertical : 8px mobile / 10px desktop
─ Marges latérales : gérées par .content (8px mobile), inchangées desktop
═══════════════════════════════════════════════════════════════════ */
/* ── Desktop: gap vertical uniforme entre toutes les cartes ────────── */
.col-12:has(> .team-card) { margin-bottom: 10px !important; }
.conference-tabs { margin-bottom: 10px !important; }
#east-table, #west-table { margin-bottom: 10px !important; }
#team-graph { margin-bottom: 10px !important; margin-top: 0 !important; }
.player-highlight-cards { margin-bottom: 10px !important; margin-top: 0 !important; }
.player-averages-card { margin-top: 0 !important; margin-bottom: 10px !important; }
.player-stats-card { margin-top: 0 !important; }
/* ── Mobile: alignement & cohérence visuelle ───────────────────────── */
@media (max-width: 1024px) {
/* Gap vertical uniforme 8px */
.col-12:has(> .team-card),
.conference-tabs,
#east-table, #west-table,
#team-graph,
.player-highlight-cards,
.player-averages-card,
.player-stats-card {
margin-bottom: 8px !important;
margin-top: 0 !important;
}
/* Team card: retirer le margin latéral manuel (géré par .content 8px) */
/* et harmoniser le border-radius avec les autres cartes */
.team-card {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 12px !important;
padding-right: 12px !important;
border-radius: 10px !important;
}
/* Conference table cards: même radius que team-card */
.conference-table .card {
border-radius: 10px !important;
}
/* Team graph: même radius */
#team-graph {
border-radius: 10px !important;
}
/* Player highlight cards: même radius, gap interne uniforme */
.player-highlight-cards .col-md-3 {
margin-bottom: 6px !important;
padding: 0 !important;
}
.player-card,
.rank-card {
border-radius: 10px !important;
}
/* Season averages card: même radius */
.player-averages-card {
border-radius: 10px !important;
overflow: hidden;
}
}
/* ── Player stats card (roster table): border-radius on mobile ── */
@media (max-width: 1024px) {
.player-stats-card {
border-radius: 10px !important;
overflow: hidden !important;
}
}
/* ── Layout fix: highlight cards → season averages gap sur mobile ── */
@media (max-width: 1024px) {
/* Supprimer le margin-bottom individuel des col-md-3,
le row .player-highlight-cards fournit déjà 8px */
.player-highlight-cards .col-md-3 {
margin-bottom: 0 !important;
}
}
/* ── Fix: zero out last highlight card margin so row margin-bottom is the only gap ── */
@media (max-width: 1024px) {
.player-highlight-cards .col-md-3:last-child .player-card,
.player-highlight-cards .col-md-3:last-child .rank-card {
margin-bottom: 0 !important;
}
}
|