/**************************************************************************** LEFT 4 DEAD (2) PLAYER STATISTICS ©2019-2020 PRIMEAS.DE BASED ON THE PLUGIN FROM MUUKIS MODIFIED BY FOXHOUND FOR SOURCEMOD - https://forums.alliedmods.net/showthread.php?p=2678290#post2678290 - https://www.primeas.de/ Style: Shiva & Sally ------------------------------------------------------------------------ Mismo lenguaje visual que el panel SourceBans++ del sitio: fotografía a pantalla completa, superficies de cristal, esquinas redondeadas, acento morado, tipografía Inter + JetBrains Mono. Se instala como un $site_style más. No modifica ningún .php ni .tpl. Contiene únicamente reglas para clases que el panel usa de verdad. NOTA SOBRE EL FONDO (el fallo de las versiones anteriores): la fotografía va en , no en . Si y llevan los dos un background-color, el de deja de propagarse al lienzo y se pinta como fondo normal, tapando cualquier pseudo-elemento con z-index negativo — que es justo por lo que antes se veía todo negro. Aquí: lleva la foto, es transparente, y el velo de legibilidad va en body::before. ****************************************************************************/ @font-face { font-family: 'Inter'; src: url('../fonts/Inter-Variable.woff2') format('woff2-variations'), url('../fonts/Inter-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { color-scheme: dark; --ss-bg: #080a0e; --ss-text: #f2f5f8; --ss-muted: rgba(242,245,248,.74); --ss-faint: rgba(242,245,248,.5); --ss-border: rgba(255,255,255,.14); --ss-border-strong: rgba(255,255,255,.24); /* Superficies de cristal: un degradado de brillo sobre un tinte oscuro traslúcido. El desenfoque es LOCAL a cada superficie — la fotografía de detrás nunca se desenfoca globalmente. */ --ss-glass: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04) 48%, rgba(255,255,255,.08)), rgba(10,12,18,.32); --ss-glass-solid: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.035) 48%, rgba(255,255,255,.07)), rgba(10,12,18,.72); --ss-blur: blur(20px) saturate(145%); --ss-purple: #9b5cff; --ss-purple-2: #7c3aed; --ss-purple-glow: rgba(155,92,255,.28); --ss-radius: 16px; --ss-radius-sm: 11px; --ss-shadow: 0 18px 44px rgba(0,0,0,.32); --ss-inset: inset 0 1px 0 rgba(255,255,255,.12); } /* ================================================================ 1. LIENZO — la fotografía siempre cubre la pantalla completa. ================================================================ */ html { height: 100%; background-color: var(--ss-bg); background-image: url("../images/shiva-sally-fondo.webp"); background-repeat: no-repeat; background-position: center center; background-size: cover; background-attachment: fixed; } body { min-height: 100%; background: transparent; color: var(--ss-text); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; } /* Velo de legibilidad, fijo y por debajo de todo el contenido. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 38%, rgba(8,10,14,.10), rgba(8,10,14,.42) 100%), linear-gradient(180deg, rgba(8,10,14,.30), rgba(8,10,14,.46)); } /* iOS: background-attachment:fixed no funciona; la capa fija de respaldo mantiene la foto cubriendo la pantalla igualmente. */ @supports (-webkit-touch-callout: none) { html { background-attachment: scroll; } body::after { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: url("../images/shiva-sally-fondo.webp") center center / cover no-repeat; } } /* Efecto de nieve del template original: fuera. */ #snow-container { display: none !important; } code, pre { font-family: 'JetBrains Mono', monospace; } h1, h2, h3, h4, h5, h6 { color: #fff; } small { color: var(--ss-muted); } /* --- Cabecera de página (título + migas) ------------------------- El markup pone el título dentro de un , que Bootstrap encoge al 80%. Se le devuelve su tamaño y se le añade una barra de acento a la izquierda, que sustituye a la línea separadora suelta que venía justo debajo. */ h1 { position: relative; margin: 0; padding-left: 16px; font-weight: 600; letter-spacing: -.02em; text-shadow: 0 2px 18px rgba(0,0,0,.5); } h1::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 4px; border-radius: 99px; background: linear-gradient(180deg, var(--ss-purple), var(--ss-purple-2)); box-shadow: 0 0 16px var(--ss-purple-glow); } h1 small { font-size: 100%; color: #fff; font-weight: inherit; } /* Las migas de pan, justo debajo del título. */ h1 + small { display: block; margin: .5rem 0 0 16px; font-size: .82rem; letter-spacing: .01em; color: var(--ss-faint); } h1 + small .fa-sitemap { margin-right: .1rem; opacity: .6; } /* ================================================================ 2. CABECERA — barra de cristal flotante en lugar del bloque negro. Las tres alturas (#navbar contenedor, .navbar barra, #navbar-fix espaciador) se mantienen coherentes entre sí. ================================================================ */ /* Fija al hacer scroll: la barra acompaña siempre, como el topbar del panel SourceBans++. #navbar-fix reserva su hueco. */ #navbar { position: fixed; top: 0; left: 0; width: 100%; height: auto; z-index: 1040; background: none; } #navbar-fix { height: 104px; } /* Una sola fila: logo a la izquierda, controles a la derecha. Sin esto el logo apaisado empuja el botón de menú a una segunda línea. */ .navbar .container { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: .75rem; } .navbar-brand { margin: 0; padding: 0; flex: 0 1 auto; min-width: 0; } .navbar-brand img { display: block; width: auto; max-width: 100%; max-height: 46px; border-radius: 8px; } .navbar { z-index: 10; height: auto; min-height: 74px; margin: 14px; padding: 0 .35rem; border-radius: var(--ss-radius); background: var(--ss-glass); border: 1px solid var(--ss-border-strong); box-shadow: var(--ss-shadow), var(--ss-inset); backdrop-filter: var(--ss-blur); -webkit-backdrop-filter: var(--ss-blur); } .navbar-brand2, a.nav-brand2 { color: #fff; text-decoration: none; } a.nav-brand2:hover { color: #fff; } .openbtn { color: #fff; padding: 9px 13px; border: 1px solid var(--ss-border) !important; border-radius: var(--ss-radius-sm) !important; background: rgba(255,255,255,.06); } .openbtn:hover, .openbtn:active { color: #fff; background: rgba(255,255,255,.12); } .navbar-toggler:focus { outline: none !important; box-shadow: none !important; } /* Separadores: el template los inserta como divs de 5px con .bg-main o .bg-main2. Se reducen a una línea fina que se desvanece por los extremos, en vez de una franja maciza. */ /* El acento del título ya marca la separación, así que los divs de 5px que el template intercala se retiran en vez de repintarse. */ #navbar-line, [style*="height: 5px"] { display: none !important; } /* --- Menú de escritorio (navbar-v2): el layout flotado del template original se conserva; solo cambia la piel. --- */ .navbar-v2 { overflow: visible; z-index: 1030; } .navbar-v2 a { float: left; font-size: 15px; color: rgba(242,245,248,.86); text-align: left; padding: 13px 18px; margin: 0 2px; text-decoration: none; border-radius: var(--ss-radius-sm); transition: background-color .16s ease, color .16s ease; } .dropdown-v2 { float: left; overflow: visible; } .dropdown-v2 .dropbtn-v2 { font-size: 15px; border: none; outline: none; color: rgba(242,245,248,.86); padding: 13px 18px; margin: 0 2px; background-color: transparent; border-radius: var(--ss-radius-sm); text-align: left; transition: background-color .16s ease, color .16s ease; } .navbar-v2 a:hover, .dropdown-v2:hover .dropbtn-v2 { background: rgba(155,92,255,.24); color: #fff; cursor: pointer; } .dropdown-content-v2 { display: none; position: absolute; min-width: 200px; padding: 12px 6px 6px; z-index: 999999; border: 1px solid var(--ss-border-strong); border-radius: var(--ss-radius); background: var(--ss-glass-solid); box-shadow: var(--ss-shadow), var(--ss-inset); backdrop-filter: var(--ss-blur); -webkit-backdrop-filter: var(--ss-blur); } .dropdown-content-v2 a { float: none; display: block; color: rgba(242,245,248,.84); padding: 10px 14px; border-radius: 9px; text-decoration: none; text-align: left; } .dropdown-content-v2 a:hover { background: rgba(155,92,255,.26); color: #fff; cursor: pointer; } .dropdown-v2:hover .dropdown-content-v2 { display: block; } /* --- Elementos del template ocultados a propósito --------------- El markup los sigue emitiendo (no se toca ningún .php); aquí simplemente no se muestran. Aviso del Steam-Group: la franja completa bajo la cabecera (es la primera sección .content del header) y su entrada en el menú lateral, que es el único enlace externo del menú. Los créditos del pie NO se tocan: siguen visibles. */ .content[style*="#eeeeee"] { display: none !important; } .mobile_submenu a[target="_blank"] { display: none !important; } /* La marca de la cabecera es el $site_logo de config.php, tal cual. Solo se le añade una sombra para que despegue del cristal. */ .navbar-brand img, .mobile_menu img { filter: drop-shadow(0 4px 14px rgba(0,0,0,.5)); } /* ================================================================ 3. MENÚ LATERAL MÓVIL — cerrado por defecto (width:0), igual que el template original; el script inline lo abre a width:100%. ================================================================ */ .sidebar { height: 100%; width: 0; position: fixed; z-index: 99999; top: 0; left: 0; overflow-x: hidden; transition: .4s ease; padding-top: 60px; background: var(--ss-glass-solid); backdrop-filter: var(--ss-blur); -webkit-backdrop-filter: var(--ss-blur); box-shadow: 10px 0 40px rgba(0,0,0,.45); } .sidebar a { display: block; padding: 11px 16px; margin: 2px 12px; font-size: 17px; color: rgba(242,245,248,.86); text-decoration: none; border-radius: var(--ss-radius-sm); transition: .2s ease; } .sidebar a:hover { background: rgba(155,92,255,.24); color: #fff; } .dropdown-btn { display: block; width: calc(100% - 24px); margin: 2px 12px; padding: 11px 16px; font-size: 17px; color: rgba(242,245,248,.86); text-align: left; background: none; border: none; border-radius: var(--ss-radius-sm); cursor: pointer; outline: none; transition: .2s ease; } .dropdown-btn:hover, .dropdown-btn.active { background: rgba(255,255,255,.08); color: #fff; } .dropdown-btn:focus { outline: none !important; } /* Submenú plegable: oculto por defecto, el script lo abre. */ .dropdown-container { display: none; margin: 0 12px 6px; padding: 4px 0 4px 10px; border: 0; border-left: 2px solid rgba(155,92,255,.45); background: rgba(0,0,0,.18); border-radius: 0 var(--ss-radius-sm) var(--ss-radius-sm) 0; } .dropdown-container a { font-size: 15px; margin: 1px 6px; padding: 8px 12px; } /* Cabecera del menú: el logo ocupa el ancho menos el hueco del botón de cierre, que se ancla arriba a la derecha. En el template ambos se solapaban porque el logo iba a ancho completo y la X flotaba encima. */ .mobile_menu { position: absolute; top: 22px; left: 16px; right: 68px; } .mobile_menu img { display: block; width: auto; max-width: 100%; max-height: 52px; border-radius: 10px; } .mobile_menu_close { position: absolute; top: 24px; right: 16px; float: none; } .sidebar .closebtn { position: static; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin: 0; padding: 0; font-size: 20px; color: var(--ss-text); background: rgba(255,255,255,.07); border: 1px solid var(--ss-border); border-radius: 12px; } .sidebar .closebtn:hover { background: rgba(255,255,255,.14); color: #fff; } .mobile_menu_links { position: relative; top: 96px; background: transparent; } .mobile_submenu { background: transparent; color: var(--ss-text); } @media screen and (max-height: 450px) { .sidebar { padding-top: 15px; } .sidebar a { font-size: 16px; } } /* ================================================================ 4. SUPERFICIES DE CRISTAL El markup lleva .rounded-0 de Bootstrap por todas partes, por eso los radios necesitan !important para imponerse. ================================================================ */ /* Las secciones de ancho completo del template traen un color claro fijo en el atributo style; se neutralizan para que se vea la foto. */ .content, .content-top, [style*="background-color: #eeeeee"], [style*="background-color: #f2f2f2"], [style*="background-color:#eeeeee"], [style*="background-color:#f2f2f2"] { background: transparent !important; } .card, .no-more-tables, .content .container > .rounded-0 { background: var(--ss-glass); border: 1px solid var(--ss-border-strong); border-radius: var(--ss-radius) !important; box-shadow: var(--ss-shadow), var(--ss-inset); backdrop-filter: var(--ss-blur); -webkit-backdrop-filter: var(--ss-blur); color: var(--ss-text); overflow: hidden; } /* El aviso del Steam-Group necesita su propio aire: en el markup es un div desnudo dentro de .container. */ .content .container > .rounded-0 { padding: 1.1rem 1.25rem; } /* En el ranking, .no-more-tables va DENTRO de .card. Anidar dos cristales crea un marco doble, así que el interior se vuelve plano. */ .card .no-more-tables { background: none; border: 0; border-radius: 0 !important; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; } .card-body { background: transparent; border-radius: 0 !important; } .card-title { color: #fff; font-weight: 600; letter-spacing: -.01em; } .card-deck { margin-bottom: 0; } /* Tarjetas destacadas (contadores de la portada, top 3 del ranking). */ .box-animated { text-align: center; transition: background .2s ease, border-color .2s ease, transform .2s ease; } .box-animated:hover { background: linear-gradient(135deg, rgba(155,92,255,.34), rgba(124,58,237,.14) 60%, rgba(255,255,255,.05)), rgba(10,12,18,.5); border-color: rgba(181,137,255,.5); color: #fff; transform: translateY(-2px); } .count-title { margin: 10px 0 0; font-size: 40px; font-weight: 600; text-align: center; color: #fff; } .img-border { padding: 8px; border-radius: var(--ss-radius-sm); box-shadow: 0 6px 18px rgba(0,0,0,.35); } .motd { color: var(--ss-text); } /* .bg-main acompaña a .card en los contadores y el top 3; ahí no debe añadir una segunda capa oscura sobre el cristal. */ .bg-main { background: rgba(10,12,18,.5); color: #fff; } .card.bg-main { background: var(--ss-glass); } /* --- Ventanas modales (Settings de /gameserver) ------------------ El markup emite el modal DENTRO de la tarjeta. Como la tarjeta lleva backdrop-filter, crea un contexto de apilamiento que atrapa al modal (que es position:fixed): el fondo oscuro de Bootstrap, que cuelga de , queda por encima y se come los clics — no se podía cerrar. Y overflow:hidden además lo recortaba. Mientras hay un modal abierto, el contenedor renuncia al desenfoque y al recorte, y el modal vuelve a colgar del viewport. */ .card:has(.modal.show), .no-more-tables:has(.modal.show), .card:has(.modal.fade.show) { backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; } .modal { z-index: 1050; } .modal-backdrop { background-color: #04050a; } .modal-backdrop.show { opacity: .6; } .modal-dialog { overflow-y: initial !important; } .modal-content { background: var(--ss-glass-solid); border: 1px solid var(--ss-border-strong); border-radius: var(--ss-radius) !important; box-shadow: var(--ss-shadow), var(--ss-inset); backdrop-filter: var(--ss-blur); -webkit-backdrop-filter: var(--ss-blur); color: var(--ss-text); } .modal-header, .modal-footer { background: transparent; border-color: var(--ss-border); } .modal-title { color: #fff; font-weight: 600; } /* El botón de cerrar de Bootstrap es negro por defecto: invisible sobre el cristal oscuro. */ .modal-header .close { color: var(--ss-text); text-shadow: none; opacity: .75; font-size: 1.6rem; padding: .5rem .9rem; } .modal-header .close:hover, .modal-header .close:focus { color: #fff; opacity: 1; } /* Altura relativa a la pantalla en vez de 250px fijos, para que la lista de cvars se lea bien también en móvil. */ .modal-body { height: auto; max-height: min(58vh, 460px); overflow-y: auto; -webkit-overflow-scrolling: touch; color: var(--ss-text); background: transparent; word-break: break-word; } /* ================================================================ 5. TABLAS ================================================================ */ .table { padding: 0 !important; margin: 0 !important; color: var(--ss-text); background: transparent; } .table td, .table th { border-color: var(--ss-border) !important; vertical-align: middle; } .table tbody tr { transition: background-color .18s ease; } .table tbody tr:hover td, .table tbody tr:hover th { background: rgba(155,92,255,.2); color: #fff; } .content-table-noborder { border: hidden; background: rgba(0,0,0,.26); border-radius: var(--ss-radius-sm); overflow: hidden; } .content-table-noborder td, .content-table-noborder th { color: var(--ss-muted); font-weight: 500; letter-spacing: .02em; } .content-table > thead > tr > th, .content-table > tbody > tr > th, .content-table > tfoot > tr > th, .content-table > thead > tr > td, .content-table > tbody > tr > td, .content-table > tfoot > tr > td { border: 0; border-bottom: 1px solid var(--ss-border); } th { font-weight: 500; color: var(--ss-muted); } /* Vista apilada en móvil (regla estructural del template original). */ @media only screen and (max-width: 800px) { .no-more-tables table, .no-more-tables thead, .no-more-tables tbody, .no-more-tables th, .no-more-tables td, .no-more-tables tr { display: block; } .no-more-tables thead tr { position: absolute; top: -9999px; left: -9999px; } .no-more-tables tr { padding: 2px 0; } .no-more-tables td { border: none; position: relative; padding-left: 50%; white-space: normal; text-align: left; } .no-more-tables td:nth-last-child(1), .no-more-tables th:nth-last-child(1) { border-bottom: 1px solid var(--ss-border); } .no-more-tables td:before { content: attr(data-title); position: absolute; top: 6px; left: 6px; width: 45%; padding-right: 10px; white-space: nowrap; text-align: left; font-weight: 600; color: var(--ss-faint); } } /* ================================================================ 6. CONTROLES ================================================================ */ .btn-main, .btn-pagination { border-radius: var(--ss-radius-sm) !important; border: 1px solid var(--ss-border-strong); color: #fff; background: rgba(255,255,255,.07); backdrop-filter: blur(8px) saturate(125%); -webkit-backdrop-filter: blur(8px) saturate(125%); transition: background .18s ease, border-color .18s ease; } .btn-main:hover, .btn-pagination:hover { background: linear-gradient(135deg, var(--ss-purple), var(--ss-purple-2)) !important; border-color: rgba(205,174,255,.5); color: #fff !important; box-shadow: 0 6px 20px var(--ss-purple-glow); } .btn-main:focus, .btn-main2:focus, .btn-pagination:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(155,92,255,.22) !important; } /* Acción principal (Steam-Group, buscar): morado, como el botón Connect del panel SourceBans++. */ .btn-main2 { border-radius: var(--ss-radius-sm) !important; border: 1px solid rgba(205,174,255,.45); color: #fff; background: linear-gradient(135deg, var(--ss-purple), var(--ss-purple-2)); box-shadow: 0 6px 20px var(--ss-purple-glow), var(--ss-inset); transition: filter .18s ease, box-shadow .18s ease; } .btn-main2:hover { filter: brightness(1.12); color: #fff !important; box-shadow: 0 8px 26px rgba(155,92,255,.4), var(--ss-inset); } .btn-no { padding: 0; border: 0 !important; background: transparent !important; color: var(--ss-muted); } .btn-no:hover { background: transparent !important; color: #fff !important; } .btn-no:focus { outline: none !important; box-shadow: none !important; } .form-control, .search { background: rgba(6,8,12,.55) !important; border: 1px solid var(--ss-border-strong) !important; border-radius: var(--ss-radius-sm) !important; color: #fff !important; backdrop-filter: blur(8px) saturate(125%); -webkit-backdrop-filter: blur(8px) saturate(125%); box-shadow: none !important; } .form-control::placeholder, .search::placeholder { color: var(--ss-faint) !important; } .form-control:focus, .search:focus { border-color: rgba(181,137,255,.7) !important; box-shadow: 0 0 0 3px rgba(155,92,255,.18) !important; outline: none !important; } /* Enlaces con subrayado que crece al pasar el cursor. */ a.alink-main, a.alink-main2, a.alink-link, a.alink-link2 { display: inline-block; text-decoration: none; transition: color .18s ease; } a.alink-main, a.alink-link { color: var(--ss-muted); } a.alink-main2 { color: #fff; } a.alink-link2 { color: var(--ss-purple); } a.alink-main::after, a.alink-main2::after, a.alink-link::after, a.alink-link2::after { content: ''; display: block; width: 0; height: 1px; background: var(--ss-purple); transition: width .3s ease; } a.alink-main:hover, a.alink-main2:hover, a.alink-link:hover, a.alink-link2:hover { color: var(--ss-purple); } a.alink-main:hover::after, a.alink-main2:hover::after, a.alink-link:hover::after, a.alink-link2:hover::after { width: 100%; } /* ================================================================ 7. PERFILES DE STEAM Los recuadros de rango (top 1/2/3) usan los assets originales del plugin; aquí solo se conserva su posicionamiento exacto. ================================================================ */ #steamprofile_avatar { position: absolute; width: 100px; height: 100px; z-index: 1; } #steamprofile_avatar_fix { width: 100px; height: 100px; } .steamprofile .sp-avatar img { width: 100px; height: 100px; border-radius: 12px; } #steamprofile_avatar_top_legendary, #steamprofile_avatar_top_epic, #steamprofile_avatar_top_epic_, #steamprofile_avatar_top_rare, #steamprofile_avatar_top_rare_ { position: absolute; width: 100px; height: 100px; background-image: none; z-index: 2; } #steamprofile_avatar_top_legendary { background-size: contain; } /* Los tres PNG originales (top3_rank_1/2/3.png, 348x140 escalados a un cuadrado) quedan sin usar pero NO se borran: para recuperarlos basta con devolver estas tres reglas a su forma original con background-image. .steamprofile_avatar_top_legendary { background-image: url('../images/top3_rank_1.png'); background-repeat: no-repeat; background-size: 100% 100%; } .steamprofile_avatar_top_epic { background-image: url('../images/top3_rank_2.png'); background-repeat: no-repeat; background-size: 100% 100%; } .steamprofile_avatar_top_rare { background-image: url('../images/top3_rank_3.png'); background-repeat: no-repeat; background-size: 100% 100%; } */ /* ---------------------------------------------------------------- PODIO DEL RANKING: oro, plata y bronce Las clases steamprofile_avatar_top_legendary/epic/rare las pone ranking_layout.tpl sobre el div.card de cada puesto, asi que aqui identifican al 1o, 2o y 3o. No hace falta tocar el PHP. ---------------------------------------------------------------- */ .steamprofile_avatar_top_legendary { --podio: #d9a441; --podio-glow: rgba(217,164,65,.45); } .steamprofile_avatar_top_epic { --podio: #b9c3cc; --podio-glow: rgba(185,195,204,.42); } .steamprofile_avatar_top_rare { --podio: #b0763f; --podio-glow: rgba(176,118,63,.42); } /* Aro de color alrededor del avatar de Steam. */ .steamprofile_avatar_top_legendary .steamprofile .sp-avatar img, .steamprofile_avatar_top_epic .steamprofile .sp-avatar img, .steamprofile_avatar_top_rare .steamprofile .sp-avatar img { border: 2px solid var(--podio); box-shadow: 0 0 14px var(--podio-glow); } /* Marco de la tarjeta entera en el mismo tono, con resplandor suave. Sin iconos ni numeros: la posicion ya la da el orden de las tarjetas. */ .steamprofile_avatar_top_legendary, .steamprofile_avatar_top_epic, .steamprofile_avatar_top_rare { border: 1px solid var(--podio) !important; box-shadow: 0 0 18px var(--podio-glow); } /* Al pasar el raton, .box-animated:hover cambia el borde a morado; aqui se mantiene el tono del puesto para que no se pierda la lectura. */ .steamprofile_avatar_top_legendary:hover, .steamprofile_avatar_top_epic:hover, .steamprofile_avatar_top_rare:hover { border-color: var(--podio) !important; box-shadow: 0 0 24px var(--podio-glow); } /* .sp-badge es el contenedor del widget, no el avatar: si se le pone fondo y borde, el marco sale mucho más grande que la imagen. El contorno va sobre la propia imagen. */ .sp-badge, .sp-bg-fade, .sp-bg-game { display: inline-block; background: none; border: 0; color: #fff; } .steamprofile .sp-avatar img { border: 1px solid var(--ss-border-strong); box-shadow: 0 6px 18px rgba(0,0,0,.4); } .sp-error { color: #fca5a5; } .sp-loading { color: var(--ss-faint); } /* Fichas emergentes al pasar el cursor sobre un jugador. */ .popover { background: var(--ss-glass-solid); border: 1px solid var(--ss-border-strong); border-radius: var(--ss-radius); box-shadow: var(--ss-shadow); backdrop-filter: var(--ss-blur); -webkit-backdrop-filter: var(--ss-blur); } .popover-header { background: rgba(0,0,0,.28); color: #fff; border-bottom-color: var(--ss-border); } .popover-body { color: var(--ss-text); } .tooltip-inner { background: var(--ss-glass-solid); color: var(--ss-text); border-radius: var(--ss-radius-sm); backdrop-filter: var(--ss-blur); -webkit-backdrop-filter: var(--ss-blur); } /* ================================================================ 8. CARRUSEL DE YOUTUBE (_source/youtube.php) ================================================================ */ .vid-container { position: relative; padding-bottom: 52%; padding-top: 30px; height: 0; } .vid-container iframe, .vid-container object, .vid-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: var(--ss-radius); } .vid-list-container { width: 92%; overflow: hidden; margin: 20px 0 0 4%; padding-bottom: 20px; } .vid-list { width: 2240px; position: relative; top: 0; left: 0; } .vid-item { display: block; width: 148px; height: 148px; float: left; margin: 0; padding: 10px; } .vid-item .desc { color: var(--ss-purple); font-size: 15px; margin-top: 5px; } .thumb { overflow: hidden; height: 84px; border-radius: 10px; } .thumb img { width: 100%; position: relative; top: -13px; } .arrows { position: relative; width: 100%; } .arrow-left, .arrow-right { color: #fff; position: absolute; padding: 15px; top: -130px; z-index: 1; cursor: pointer; } .arrow-left { left: -20px; } .arrow-right { right: -20px; } @media (max-width: 624px) { .arrows { position: relative; margin: 0 auto; width: 96px; } .arrow-left { left: 0; top: -20px; } .arrow-right { right: 0; top: -20px; } } .tablex { display: table; } .cellx { display: table-cell; } .tablex, .cellx { vertical-align: middle; width: 100%; } /* ================================================================ 9. PIE Los créditos del autor original (Custom Player Stats / XEVANIO.DE / muukis / SourceMod) se conservan íntegros: aquí solo se estiliza el contenedor. ================================================================ */ .footer, .page-footer { margin-top: 1.5rem; background: var(--ss-glass); border: 1px solid var(--ss-border); border-radius: var(--ss-radius) var(--ss-radius) 0 0; backdrop-filter: var(--ss-blur); -webkit-backdrop-filter: var(--ss-blur); } .copyright { color: var(--ss-faint); font-size: 12px; line-height: 1.45; } .copyright a { color: var(--ss-purple); } .copyright a:hover { color: #b589ff; } /* ================================================================ 10. AJUSTES MÓVILES ================================================================ */ @media (max-width: 800px) { .navbar { margin: 10px; min-height: 66px; } #navbar-fix { height: 90px; } h1 { font-size: 2rem; } .count-title { font-size: 34px; } } @media (prefers-reduced-motion: reduce) { .sidebar, .sidebar a, .dropdown-btn, .box-animated, .btn-main, .btn-main2, .btn-pagination, .table tbody tr, .navbar-v2 a, .dropdown-v2 .dropbtn-v2 { transition: none !important; } .box-animated:hover { transform: none; } }