/* * theme.css v3 — sistema de diseño RankingTT. * * Dirección: SaaS claro y minimalista (shell con sidebar fijo). Fondos * blancos/gris muy claro, superficies con borde fino en vez de sombras * pesadas, naranja de marca como único acento fuerte, gris grafito neutro * como secundario, tipografía condensada (Oswald) para todo lo display y * cifras tabulares para todo lo numérico. * * Modo oscuro: paleta alternativa activada con [data-theme="dark"] en * (ver bloque al final del archivo y el toggle en base.html). Todo * el sistema de tokens --rtt-* de más abajo está pensado para que baste con * redefinir esas variables; los pocos componentes de Bootstrap que no las * usan (tablas, inputs, modales, dropdowns) se corrigen aparte. * * Se carga DESPUÉS de custom.css a propósito: custom.css conserva los * estilos históricos por página y este archivo impone el sistema global * por encima (misma especificidad -> gana el último en el orden). */ @font-face { font-family: "Oswald"; font-style: normal; font-weight: 200 700; font-display: swap; src: url("../vendor/fonts/oswald-var.woff2") format("woff2"); } /* ------------------------------------------------------------------ * Tokens * ------------------------------------------------------------------ */ :root { --rtt-bg: #eef0f3; --rtt-surface: #ffffff; --rtt-ink: #16181d; --rtt-ink-soft: #4a5058; /* #6d727a en vez de un gris más claro: con #7a7f88 el contraste sobre blanco caía a 4.02:1, por debajo del mínimo 4.5:1 de WCAG AA para texto normal (se usa como color de texto secundario en ~20 sitios). */ --rtt-ink-faint: #6d727a; --rtt-line: #e2e4e8; --rtt-accent: #c9450d; --rtt-accent-deep: #9c3b11; --rtt-accent-bright: #ff6b35; /* Gris grafito neutro: color secundario para lo que no debe competir con el naranja, pero sin ningún tinte de color (nada de azul) */ --rtt-court: #5b6470; --rtt-court-deep: #1a1d22; --rtt-font-display: "Oswald", "Arial Narrow", sans-serif; --rtt-font-body: -apple-system, "Segoe UI", system-ui, Roboto, sans-serif; --rtt-radius: 14px; --rtt-radius-sm: 10px; --rtt-shadow: 0 1px 2px rgba(16, 19, 26, .05); --rtt-shadow-lift: 0 12px 32px rgba(16, 19, 26, .12); --bs-body-bg: var(--rtt-bg); --bs-body-color: var(--rtt-ink); } /* ------------------------------------------------------------------ * Base * ------------------------------------------------------------------ */ html { scroll-padding-top: 88px; } body { font-family: var(--rtt-font-body); background-color: var(--rtt-bg); background-image: radial-gradient(rgba(16, 19, 26, 0.03) 1px, transparent 1px); background-size: 22px 22px; color: var(--rtt-ink); } ::selection { background: var(--rtt-accent); color: #fff; } :focus-visible { outline: 2px solid var(--rtt-accent); outline-offset: 2px; } .rtt-main { padding-top: 2rem; padding-bottom: 3rem; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ------------------------------------------------------------------ * Tipografía * ------------------------------------------------------------------ */ h1, h2, h3, h4, h5, h6 { font-family: var(--rtt-font-display); font-weight: 700; letter-spacing: .015em; text-transform: uppercase; } h1 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); } .lead, p { font-family: var(--rtt-font-body); text-transform: none; } .text-muted { color: var(--rtt-ink-faint) !important; } .text-accent { color: var(--rtt-accent) !important; } /* ------------------------------------------------------------------ * Shell de la app: sidebar fijo + contenido * ------------------------------------------------------------------ */ .rtt-shell { display: flex; align-items: stretch; min-height: 100vh; } .rtt-sidebar { width: 248px; flex-shrink: 0; display: flex; flex-direction: column; background: var(--rtt-surface); border-right: 1px solid var(--rtt-line); padding: 1.5rem 1rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 1045; } .rtt-sidebar-brand { display: flex; align-items: center; font-family: var(--rtt-font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: .03em; color: var(--rtt-ink); text-decoration: none; padding: 0 .6rem; margin-bottom: 1.75rem; } .rtt-sidebar-brand span:not(.rtt-label), .rtt-mobile-brand span { color: var(--rtt-accent); } .rtt-sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: .2rem; } .rtt-sidebar-section { margin: 1.25rem .6rem .4rem; font-family: var(--rtt-font-display); text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; color: var(--rtt-ink-faint); } .rtt-sidebar-link { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border-radius: var(--rtt-radius-sm); color: var(--rtt-ink-soft); text-decoration: none; font-weight: 600; font-size: .92rem; transition: background-color .15s ease, color .15s ease; } .rtt-sidebar-link i { width: 18px; text-align: center; color: var(--rtt-ink-faint); font-size: .9rem; transition: color .15s ease; } .rtt-sidebar-link:hover, .rtt-sidebar-link:focus { background: var(--rtt-bg); color: var(--rtt-ink); } .rtt-sidebar-link.is-active { background: rgba(201, 69, 13, .08); color: var(--rtt-accent-deep); } .rtt-sidebar-link.is-active i { color: var(--rtt-accent); } .rtt-sidebar-link.is-accent { color: var(--rtt-accent); } /* Badge de notificación sobre el icono: a diferencia de .rtt-label, no se oculta cuando el sidebar está colapsado en la franja de iconos, así que el aviso (p. ej. solicitudes de admisión pendientes) sigue siendo visible sin necesidad de pasar el ratón por encima. */ .rtt-sidebar-icon-wrap { position: relative; display: inline-flex; justify-content: center; width: 18px; flex-shrink: 0; } .rtt-nav-badge { position: absolute; top: -7px; right: -9px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: #dc3545; color: #fff; font-family: var(--rtt-font-body); font-size: .58rem; font-weight: 700; line-height: 15px; text-align: center; } .rtt-sidebar-link.is-accent i { color: var(--rtt-accent); } .rtt-sidebar-footer { border-top: 1px solid var(--rtt-line); padding-top: .75rem; margin-top: .75rem; } .rtt-sidebar-user { display: flex; align-items: center; gap: .75rem; padding: .3rem .75rem .75rem; } .rtt-sidebar-user-avatar { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--rtt-bg); border: 1px solid var(--rtt-line); color: var(--rtt-ink-soft); display: flex; align-items: center; justify-content: center; font-family: var(--rtt-font-display); font-weight: 700; font-size: .72rem; text-transform: uppercase; } .rtt-sidebar-user-name { font-weight: 600; font-size: .85rem; color: var(--rtt-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rtt-mobile-bar { display: none; align-items: center; justify-content: space-between; padding: .7rem 1rem; background: var(--rtt-surface); border-bottom: 1px solid var(--rtt-line); position: sticky; top: 0; z-index: 1030; } .rtt-sidebar-toggle { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--rtt-ink); font-size: 1.15rem; border-radius: var(--rtt-radius-sm); } .rtt-sidebar-toggle:hover { background: var(--rtt-bg); } .rtt-mobile-brand { font-family: var(--rtt-font-display); font-weight: 700; letter-spacing: .03em; color: var(--rtt-ink); text-decoration: none; } .rtt-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(16, 19, 26, .4); z-index: 1040; } .rtt-content { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* Escritorio: el sidebar vive colapsado como franja de iconos (auto-oculto) y se expande temporalmente en overlay al pasar el ratón o al enfocarlo con teclado. La marca vive dentro del propio sidebar: colapsado se ve solo "TT", y al expandirse se revela "RANKING" con la misma animación que las etiquetas de la navegación (.rtt-label). */ @media (min-width: 992px) { .rtt-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 68px; padding-left: .5rem; padding-right: .5rem; transition: width .18s ease, box-shadow .18s ease; } .rtt-sidebar:hover, .rtt-sidebar:focus-within { width: 248px; padding-left: 1rem; padding-right: 1rem; box-shadow: var(--rtt-shadow-lift); } .rtt-sidebar-link { white-space: nowrap; } .rtt-label { display: inline-block; opacity: 0; max-width: 0; overflow: hidden; white-space: nowrap; transition: opacity .15s ease, max-width .18s ease; } .rtt-sidebar:hover .rtt-label, .rtt-sidebar:focus-within .rtt-label { opacity: 1; max-width: 160px; } .rtt-content { margin-left: 68px; } } @media (max-width: 991.98px) { .rtt-mobile-bar { display: flex; } .rtt-sidebar { position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--rtt-shadow-lift); } .rtt-shell.sidebar-open .rtt-sidebar { transform: translateX(0); } .rtt-shell.sidebar-open .rtt-sidebar-overlay { display: block; } } /* ------------------------------------------------------------------ * Banda de cabecera de página (reutiliza la clase histórica * .bg-gradient-elegant presente en todas las plantillas interiores) * ------------------------------------------------------------------ */ .bg-gradient-elegant { background: linear-gradient(120deg, var(--rtt-surface) 0%, #fdf2ec 100%) !important; position: relative; } .card.bg-gradient-elegant { border: 1px solid var(--rtt-line) !important; border-radius: var(--rtt-radius); overflow: hidden; } .card.bg-gradient-elegant::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--rtt-accent-bright), var(--rtt-accent)); } .card.bg-gradient-elegant .card-body { position: relative; z-index: 1; } .bg-gradient-elegant .text-light, .bg-gradient-elegant .text-light-muted { color: var(--rtt-ink) !important; } .bg-gradient-elegant small.text-light-muted, .bg-gradient-elegant .text-light-muted { color: var(--rtt-ink-soft) !important; } .bg-gradient-elegant .text-light.text-decoration-none.opacity-75 { color: var(--rtt-ink-soft) !important; } /* ------------------------------------------------------------------ * Cards y superficies * ------------------------------------------------------------------ */ .card { background-color: var(--rtt-surface); border: 1px solid var(--rtt-line); border-radius: var(--rtt-radius); color: var(--rtt-ink); } /* Panel de superficie suelto: para envolver bloques de contenido (tablas, podios, listados) que si no quedarían flotando directamente sobre el fondo de página, sin ningún límite visual. */ .rtt-surface-panel { background-color: var(--rtt-surface); border: 1px solid var(--rtt-line); border-radius: var(--rtt-radius); padding: 1.5rem; } /* Aplana el shadow-lg histórico usado en todas las plantillas */ .shadow-lg { box-shadow: var(--rtt-shadow) !important; } .shadow-sm { box-shadow: var(--rtt-shadow) !important; } .card>.card-header { background: transparent !important; border-bottom: 1px solid var(--rtt-line) !important; font-family: var(--rtt-font-display); letter-spacing: .02em; } .card>.card-header.bg-light { background: transparent !important; } .card .card-footer { background: transparent; border-top: 1px solid var(--rtt-line); } /* ------------------------------------------------------------------ * Botones * ------------------------------------------------------------------ */ .btn { font-family: var(--rtt-font-display); text-transform: uppercase; letter-spacing: .05em; border-radius: var(--rtt-radius-sm); padding-left: 1.25rem; padding-right: 1.25rem; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease; } .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16, 19, 26, .15); } .btn:active { transform: translateY(0); } .btn-lg { border-radius: 12px; } .btn-sm { border-radius: 8px; } /* Botones-icono redondos (editar, etc.): solo cuando se pide explícitamente con .rounded-circle, para no aplastar botones con texto que también sean btn-outline-secondary btn-sm (p.ej. "Pendiente", "Deseleccionar todos") */ .btn-outline-secondary.btn-sm.rounded-circle { padding-left: 0; padding-right: 0; } .btn-outline-primary { color: var(--rtt-accent); border-color: var(--rtt-accent); } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.active { color: #fff; background-color: var(--rtt-accent); border-color: var(--rtt-accent); } .border-primary { border-color: var(--rtt-accent) !important; } /* ------------------------------------------------------------------ * Badges: planos, condensados, sin degradados * ------------------------------------------------------------------ */ .badge { font-family: var(--rtt-font-display); letter-spacing: .04em; font-weight: 500; border-radius: 6px; } .badge.bg-gradient { background-image: none !important; } .badge.bg-light { border: 1px solid var(--rtt-line); } /* ------------------------------------------------------------------ * Tablas * ------------------------------------------------------------------ */ .table { font-variant-numeric: tabular-nums; } .table thead th { font-family: var(--rtt-font-display); text-transform: uppercase; letter-spacing: .06em; font-size: .74rem; font-weight: 600; color: var(--rtt-ink-faint); border-bottom-width: 1px; } /* ------------------------------------------------------------------ * Formularios * ------------------------------------------------------------------ */ .form-control, .form-select { border-radius: var(--rtt-radius-sm); } .form-control:focus, .form-select:focus { border-color: var(--rtt-accent); box-shadow: 0 0 0 .25rem rgba(201, 69, 13, .18); } .form-check-input:checked { background-color: var(--rtt-accent); border-color: var(--rtt-accent); } /* ------------------------------------------------------------------ * Alertas (mensajes flash) * ------------------------------------------------------------------ */ .alert { border: 1px solid var(--rtt-line); border-left-width: 4px; border-radius: var(--rtt-radius-sm); } .alert-success { border-left-color: #198754; } .alert-danger { border-left-color: #dc3545; } .alert-warning { border-left-color: #96690a; } .alert-info { border-left-color: var(--rtt-court); } /* ------------------------------------------------------------------ * Modales y breadcrumbs * ------------------------------------------------------------------ */ .modal-content { border: none; border-radius: 16px; box-shadow: var(--rtt-shadow-lift); } .breadcrumb { font-size: .85rem; } .breadcrumb-item.active { color: var(--rtt-ink-faint); } /* ------------------------------------------------------------------ * Hero de portada * ------------------------------------------------------------------ */ .rtt-hero { position: relative; background: var(--rtt-surface); border: 1px solid var(--rtt-line); border-radius: 18px; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem); overflow: hidden; color: var(--rtt-ink); } .rtt-hero::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--rtt-accent), var(--rtt-court)); } /* Ilustración de fondo muy sutil (trazo único, tenis de mesa + ranking). Si el archivo no existe todavía, esta capa simplemente no pinta nada: basta con guardar la imagen en esa ruta para que aparezca sola. */ .rtt-hero::after { content: ""; position: absolute; inset: 0; background-image: url('../images/hero-bg-tabletennis2.png'); background-repeat: no-repeat; background-position: center; background-size: cover; opacity: .07; mix-blend-mode: multiply; pointer-events: none; z-index: 0; } @media (max-width: 767.98px) { .rtt-hero::after { display: none; } } .rtt-hero-ghost { position: absolute; right: -1rem; bottom: -3.5rem; font-family: var(--rtt-font-display); font-weight: 700; font-size: clamp(8rem, 22vw, 17rem); line-height: 1; color: rgba(201, 69, 13, .07); font-variant-numeric: tabular-nums; user-select: none; pointer-events: none; } .rtt-hero-content { position: relative; z-index: 1; max-width: 620px; } .rtt-hero-kicker { font-family: var(--rtt-font-display); text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; color: var(--rtt-accent); margin-bottom: 1rem; display: flex; align-items: center; gap: .6rem; } .rtt-hero-kicker::before { content: ""; width: 26px; height: 2px; background: var(--rtt-accent); } .rtt-hero-title { font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.02; color: var(--rtt-ink); margin-bottom: 1rem; text-wrap: balance; } .rtt-hero-title span { color: var(--rtt-accent); } .rtt-hero-sub { color: var(--rtt-ink-soft); font-size: 1.05rem; max-width: 48ch; margin-bottom: 1.75rem; } .rtt-hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; } /* Marcador agregado: tarjetas con icono en vez de números separados por filetes. */ .rtt-hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .8rem; position: relative; z-index: 1; } .rtt-hero .rtt-hero-stats { margin-top: 2rem; } .rtt-hero-stat { display: flex; align-items: center; gap: .8rem; background: linear-gradient(135deg, rgba(201, 69, 13, .08), rgba(201, 69, 13, 0) 70%); border: 1px solid var(--rtt-line); border-radius: 12px; padding: .8rem .95rem; transition: transform .2s ease, box-shadow .2s ease; } .rtt-hero-stat:hover { transform: translateY(-2px); box-shadow: var(--rtt-shadow); } .rtt-hero-stat-icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px; background: var(--rtt-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; } /* Variante grafito: para estadísticas secundarias/neutras, así el marcador no es naranja de principio a fin */ .rtt-hero-stat-icon.is-court { background: var(--rtt-court); } .rtt-hero-stat-value { font-family: var(--rtt-font-display); font-variant-numeric: tabular-nums; font-size: 1.35rem; font-weight: 700; line-height: 1; color: var(--rtt-ink); } .rtt-hero-stat-label { margin-top: .2rem; font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: var(--rtt-ink-faint); } /* Contenedor para cuando el marcador vive fuera del hero (usuarios ya autenticados: no hay mensaje de bienvenida, solo el marcador) */ .rtt-scoreboard { background: var(--rtt-surface); border: 1px solid var(--rtt-line); border-radius: var(--rtt-radius); padding: 1.25rem; } /* Chip de ELO con color dinámico (rojo->verde según nivel, calculado en backend con luminosidad fija para contraste sobre blanco). */ .rtt-elo-chip { background: var(--rtt-bg); border: 1px solid var(--rtt-line); padding: .05rem .55rem; border-radius: 6px; display: inline-block; } /* ------------------------------------------------------------------ * Chip de estado (torneo/jornada: en juego, actividad reciente, finalizado) * ------------------------------------------------------------------ */ .tournament-chip { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--rtt-font-display); text-transform: uppercase; letter-spacing: .05em; font-size: .68rem; font-weight: 600; padding: .22rem .6rem; border-radius: 20px; background: rgba(91, 100, 112, .12); color: var(--rtt-court); } .tournament-chip i { font-size: .55rem; } .tournament-chip.is-live { background: rgba(201, 69, 13, .1); color: var(--rtt-accent); } .tournament-chip.is-finished { background: rgba(108, 117, 125, .12); color: var(--rtt-ink-faint); } /* ------------------------------------------------------------------ * Control segmentado (alternar ranking ELO / regularidad, etc.) * Sustituye al btn-group de Bootstrap con dos botones sólidos. * ------------------------------------------------------------------ */ .rtt-segmented { display: inline-flex; background: var(--rtt-bg); border: 1px solid var(--rtt-line); border-radius: 50rem; padding: .25rem; gap: .25rem; } .rtt-segmented button, .rtt-segmented a { border: none; background: transparent; color: var(--rtt-ink-soft); font-family: var(--rtt-font-display); text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; font-weight: 600; padding: .5rem 1.25rem; border-radius: 50rem; text-decoration: none; transition: background .2s ease, color .2s ease; } .rtt-segmented button.is-active, .rtt-segmented a.is-active { background: var(--rtt-accent); color: #fff; } .rtt-segmented button:not(.is-active):hover, .rtt-segmented a:not(.is-active):hover { background: var(--rtt-line); color: var(--rtt-ink-soft); } /* ------------------------------------------------------------------ * Podio: los 3 primeros en formato visual (2º-1º-3º), no como filas * de lista. El 1º se eleva sobre una base más alta, como un podio real. * ------------------------------------------------------------------ */ .rtt-podium { display: flex; align-items: flex-end; justify-content: center; gap: 1rem; padding: 0 .5rem; } .rtt-podium-slot { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1 1 0; max-width: 220px; padding: 1.25rem 1rem 0; cursor: pointer; } .rtt-podium-crown { color: #d4a017; font-size: 1.3rem; margin-bottom: .4rem; } .rtt-podium-avatar { width: 56px; height: 56px; font-size: 1.1rem; border-width: 3px; } .rtt-podium-slot.rank-1 .rtt-podium-avatar { width: 76px; height: 76px; font-size: 1.5rem; border-color: #d4a017; } .rtt-podium-slot.rank-2 .rtt-podium-avatar { border-color: #9099a2; } .rtt-podium-slot.rank-3 .rtt-podium-avatar { border-color: #b3691f; } .rtt-podium-name { margin-top: .6rem; font-weight: 700; text-align: center; font-size: .92rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rtt-podium-value { font-family: var(--rtt-font-display); font-variant-numeric: tabular-nums; font-size: 1.3rem; font-weight: 700; color: var(--rtt-ink); margin-top: .15rem; } .rtt-podium-slot.rank-1 .rtt-podium-value { font-size: 1.6rem; color: var(--rtt-accent); } .rtt-podium-value small { font-size: .6rem; font-weight: 600; color: var(--rtt-ink-faint); letter-spacing: .05em; } .rtt-podium-base { width: 100%; margin-top: 1rem; border-radius: 10px 10px 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: .4rem; font-family: var(--rtt-font-display); font-weight: 700; font-size: 1.4rem; color: #fff; } .rtt-podium-slot.rank-1 .rtt-podium-base { height: 90px; background: linear-gradient(180deg, #e0b52a, #d4a017); } .rtt-podium-slot.rank-2 .rtt-podium-base { height: 62px; background: linear-gradient(180deg, #a2abb4, #9099a2); } .rtt-podium-slot.rank-3 .rtt-podium-base { height: 44px; background: linear-gradient(180deg, #c17a2e, #b3691f); } /* En móvil el podio no cabe con claridad (tres columnas + textos largos de nombre) y la misma información ya está en la tabla de ranking justo debajo, así que se oculta por completo en vez de intentar encajarlo. */ @media (max-width: 767.98px) { .rtt-podium { display: none; } } /* ------------------------------------------------------------------ * Tabla de ranking: fila completa clicable, top-3 con tinte de acento * ------------------------------------------------------------------ */ .rtt-ranking-table { --bs-table-bg: transparent; } .rtt-ranking-table tbody tr { cursor: pointer; transition: background-color .15s ease; } .rtt-ranking-table tbody tr:hover { background-color: rgba(201, 69, 13, .05); } .rtt-ranking-table tbody tr.is-podium { background-color: rgba(201, 69, 13, .035); } .rtt-ranking-table td { padding: .75rem .5rem; border-color: var(--rtt-line); } .rtt-ranking-elo { font-family: var(--rtt-font-display); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.05rem; } .ranking-position-sm { width: 32px; height: 32px; font-size: .85rem; } /* ------------------------------------------------------------------ * Jornadas: tira horizontal con scroll, no columna vertical estrecha * ------------------------------------------------------------------ */ .rtt-jornadas-strip { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem; scroll-snap-type: x proximity; } .rtt-jornada-card { scroll-snap-align: start; flex: 0 0 auto; width: 230px; background: var(--rtt-surface); border: 1px solid var(--rtt-line); border-radius: var(--rtt-radius); padding: 1.1rem 1.25rem; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .rtt-jornada-card:hover { transform: translateY(-3px); box-shadow: var(--rtt-shadow-lift); border-color: var(--rtt-accent); } .rtt-jornada-card.is-latest { border-color: rgba(201, 69, 13, .4); background: rgba(201, 69, 13, .04); } .rtt-jornada-num { font-family: var(--rtt-font-display); text-transform: uppercase; font-weight: 700; font-size: 1.05rem; margin-bottom: .5rem; } .rtt-jornada-meta { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--rtt-ink-faint); margin-bottom: .3rem; } .rtt-jornada-enter { margin-top: .6rem; display: flex; align-items: center; gap: .4rem; font-family: var(--rtt-font-display); text-transform: uppercase; letter-spacing: .05em; font-size: .74rem; font-weight: 600; color: var(--rtt-accent); } /* Versión compacta: portada con torneos, el hero no puede tapar lo que la gente entra a ver */ .rtt-hero-compact { padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 5vw, 3rem); } .rtt-hero-compact .rtt-hero-title { font-size: clamp(1.9rem, 4vw, 2.75rem); margin-bottom: .6rem; } .rtt-hero-compact .rtt-hero-sub { margin-bottom: 1.25rem; } /* ------------------------------------------------------------------ * Cabecera de sección (sustituye a "card gigante con card-header") * ------------------------------------------------------------------ */ .rtt-section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .rtt-section-head h2 { margin: 0; font-size: 1.5rem; display: flex; align-items: center; gap: .65rem; } .rtt-section-head h2::before { content: ""; width: 12px; height: 12px; background: var(--rtt-accent); flex-shrink: 0; } /* Variante grande: la sección de torneos es EL contenido principal de la portada, su cabecera debe pesar más que la del hero */ .rtt-eyebrow { font-family: var(--rtt-font-display); text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; color: var(--rtt-accent); margin-bottom: .3rem; display: flex; align-items: center; gap: .5rem; } .rtt-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--rtt-accent); box-shadow: 0 0 0 3px rgba(201, 69, 13, .18); } .rtt-section-head-lg h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); text-transform: uppercase; } .rtt-section-head-lg h2::before { display: none; } /* ------------------------------------------------------------------ * Torneo destacado (es_default): una sola tarjeta a todo el ancho, * más grande y con más contraste que el resto de la parrilla * ------------------------------------------------------------------ */ .tournament-featured { display: block; position: relative; background: var(--rtt-surface); border: 1px solid var(--rtt-line); border-left: 4px solid var(--rtt-accent); border-radius: var(--rtt-radius); text-decoration: none; overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; } .tournament-featured:hover { box-shadow: var(--rtt-shadow-lift); transform: translateY(-2px); } /* Misma ilustración de fondo muy sutil que el hero de home.html: si el archivo no existe todavía, esta capa no pinta nada. */ .tournament-featured::after { content: ""; position: absolute; inset: 0; background-image: url('../images/hero-bg-tabletennis.png'); background-repeat: no-repeat; background-position: center; background-size: cover; opacity: .07; mix-blend-mode: multiply; pointer-events: none; z-index: 0; } @media (max-width: 767.98px) { .tournament-featured::after { display: none; } } .tournament-featured-tag { position: absolute; top: 1.1rem; left: 1.5rem; z-index: 1; display: inline-flex; align-items: center; gap: .4rem; background: rgba(201, 69, 13, .1); color: var(--rtt-accent-deep); font-family: var(--rtt-font-display); text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; font-weight: 600; padding: .3rem .7rem; border-radius: 20px; } .tournament-featured-body { position: relative; z-index: 1; padding: 3.2rem 2rem 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; } .tournament-featured-text { /* La columna del texto crece para ocupar el espacio libre: el marcador de la derecha tiene ancho fijo, así el hueco no queda flotando en blanco entre ambos. */ flex: 1 1 420px; } .tournament-featured-text h3 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--rtt-ink); margin-bottom: .4rem; } .tournament-featured-text p { color: var(--rtt-ink-soft); margin: 0; max-width: 52ch; font-size: .92rem; } /* Marcador agrupado: superficie propia con filetes entre cifras, para que no queden números sueltos flotando en el espacio en blanco. */ .tournament-featured-stats { display: flex; flex: 0 0 auto; background: var(--rtt-bg); border: 1px solid var(--rtt-line); border-radius: 12px; padding: .7rem 0; } .tournament-featured-stats>div { padding: 0 1.35rem; border-right: 1px solid var(--rtt-line); text-align: center; } .tournament-featured-stats>div:last-child { border-right: none; } .tournament-featured-stats .stat-number { display: block; font-family: var(--rtt-font-display); font-variant-numeric: tabular-nums; font-size: 1.7rem; font-weight: 700; line-height: 1; color: var(--rtt-accent); } .tournament-featured-stats .stat-label { font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: var(--rtt-ink-faint); white-space: nowrap; } .tournament-featured-cta { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.25rem; font-family: var(--rtt-font-display); text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; font-weight: 600; color: #fff; background: var(--rtt-accent); padding: .65rem 1.1rem; border-radius: 10px; transition: background .2s ease, transform .2s ease; } .tournament-featured:hover .tournament-featured-cta { background: var(--rtt-accent-deep); transform: translateX(3px); } @media (max-width: 576px) { .tournament-featured-body { padding: 3rem 1.25rem 1.5rem; } .tournament-featured-stats { width: 100%; } } /* ------------------------------------------------------------------ * Franja de features de portada * ------------------------------------------------------------------ */ .rtt-feature { display: flex; gap: 1rem; align-items: flex-start; background: var(--rtt-surface); border: 1px solid var(--rtt-line); border-radius: var(--rtt-radius); padding: 1.25rem 1.4rem; height: 100%; } .rtt-feature>i { color: var(--rtt-accent); font-size: 1.3rem; margin-top: .2rem; } .rtt-feature h6 { margin-bottom: .3rem; } .rtt-feature p { margin: 0; font-size: .88rem; color: var(--rtt-ink-faint); } /* Hero con columna de texto + panel de features a la derecha */ .rtt-hero-row { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); flex-wrap: wrap; } .rtt-hero-row .rtt-hero-content { flex: 1 1 340px; max-width: 540px; } .rtt-hero-features { flex: 1 1 320px; max-width: 460px; display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; position: relative; z-index: 1; } .rtt-hero-features .rtt-feature { flex-direction: column; gap: .6rem; padding: 1.1rem 1.1rem 1.2rem; /* Semitransparente para dejar entrever la ilustración de fondo del hero (.rtt-hero::after) a través de la tarjeta: sin blur, que difuminaría el trazo fino del dibujo hasta hacerlo desaparecer. */ background: rgba(238, 240, 243, .7); } .rtt-hero-features .rtt-feature>i { font-size: 1.15rem; margin-top: 0; } .rtt-hero-features .rtt-feature h6 { font-size: .88rem; } .rtt-hero-features .rtt-feature p { font-size: .8rem; } @media (max-width: 767px) { .rtt-hero-features { grid-template-columns: 1fr 1fr; max-width: 100%; } } /* ------------------------------------------------------------------ * Footer * ------------------------------------------------------------------ */ .rtt-footer { background: var(--rtt-surface); color: var(--rtt-ink-soft); margin-top: 4rem; padding: 3rem 0 2rem; border-top: 1px solid var(--rtt-line); } .rtt-footer .rtt-footer-brand { font-family: var(--rtt-font-display); text-transform: uppercase; letter-spacing: .04em; font-size: 1.3rem; font-weight: 700; color: var(--rtt-ink); } .rtt-footer .rtt-footer-brand span { color: var(--rtt-accent); } .rtt-footer h6 { color: var(--rtt-ink-faint); font-size: .74rem; letter-spacing: .12em; margin-bottom: .85rem; } .rtt-footer a { color: var(--rtt-ink-soft); text-decoration: none; } .rtt-footer a:hover { color: var(--rtt-accent-deep); } .rtt-footer .rtt-footer-meta { border-top: 1px solid var(--rtt-line); margin-top: 2rem; padding-top: 1.25rem; font-size: .8rem; color: var(--rtt-ink-faint); } /* ------------------------------------------------------------------ * Componentes compartidos (conservados de v1, usados por plantillas) * ------------------------------------------------------------------ */ .rtt-empty-state { text-align: center; padding: 3rem 1.5rem; } .rtt-empty-state>i:first-child { font-size: 2.75rem; color: var(--rtt-line); display: block; margin-bottom: 1rem; } .rtt-empty-state h5 { color: var(--rtt-ink-soft); text-transform: none; font-family: var(--rtt-font-body); } .rtt-empty-state p { color: var(--rtt-ink-faint); } .rtt-stat-card { display: flex; align-items: center; gap: 1rem; background: var(--rtt-surface); border: 1px solid var(--rtt-line); border-radius: var(--rtt-radius); padding: 1.1rem 1.25rem; } .rtt-stat-icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--rtt-radius-sm); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #fff; } .rtt-stat-icon.is-accent { background: var(--rtt-accent); } .rtt-stat-icon.is-court { background: var(--rtt-court); } .rtt-stat-icon.is-success { background: #198754; } .rtt-stat-icon.is-danger { background: #dc3545; } .rtt-stat-icon.is-warning { background: #96690a; } .rtt-stat-value { font-family: var(--rtt-font-display); font-variant-numeric: tabular-nums; font-size: 1.6rem; font-weight: 700; line-height: 1; margin-bottom: .2rem; } .rtt-stat-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--rtt-ink-faint); } .rtt-admin-form-card { border: 1px solid var(--rtt-line); border-radius: var(--rtt-radius); overflow: hidden; box-shadow: var(--rtt-shadow); } .rtt-admin-form-header { padding: 1.75rem 2rem; color: #fff; position: relative; } .rtt-admin-form-header h1, .rtt-admin-form-header h2, .rtt-admin-form-header h3, .rtt-admin-form-header h4 { color: #fff; } .rtt-admin-form-header.is-create { background: linear-gradient(120deg, #9c3b11, #c9450d); } .rtt-admin-form-header.is-edit { background: linear-gradient(120deg, var(--rtt-surface), #eef0f2); color: var(--rtt-ink); border-bottom: 1px solid var(--rtt-line); } .rtt-admin-form-header.is-edit h1, .rtt-admin-form-header.is-edit h2, .rtt-admin-form-header.is-edit h3, .rtt-admin-form-header.is-edit h4 { color: var(--rtt-ink); } .rtt-danger-zone { border: 1px solid rgba(220, 53, 69, .35); background: rgba(220, 53, 69, .06); border-radius: var(--rtt-radius); padding: 1.25rem 1.5rem; } .rtt-danger-zone h6 { color: #dc3545; } .required-field::after { content: " *"; color: #dc3545; font-weight: bold; } .bg-label { background: linear-gradient(90deg, #e0e7ff 0%, #c7d2fe 100%); font-size: .85em; font-weight: 500; letter-spacing: .02em; } .sponsor-slot { width: 88px; height: 88px; border: 2px dashed var(--rtt-accent); border-radius: var(--rtt-radius-sm); display: flex; align-items: center; justify-content: center; color: var(--rtt-accent); font-size: 1.6rem; } /* ------------------------------------------------------------------ * Barra de victorias/derrotas: sustituye al donut de Chart.js que * repetía exactamente las mismas cifras que ya están en la cabecera. * ------------------------------------------------------------------ */ .rtt-winrate-bar { height: 10px; border-radius: 10px; overflow: hidden; background: #dc3545; display: flex; } .rtt-winrate-fill { height: 100%; background: var(--rtt-accent); transition: width .4s ease; } .rtt-winrate-dot { font-size: .55rem; margin-right: .4rem; vertical-align: middle; } .rtt-winrate-dot.is-win { color: var(--rtt-accent); } .rtt-winrate-dot.is-loss { color: #dc3545; } /* ------------------------------------------------------------------ * Chips de jugador (jornada.html): seleccionar 2 para registrar partido * ------------------------------------------------------------------ */ .rtt-player-chips { display: flex; flex-wrap: wrap; gap: .6rem; } /* Barra bajo los chips: ayuda a la izquierda, acción a la derecha, en vez de texto y botón apilados y centrados con mucho hueco alrededor. */ .rtt-select-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--rtt-line); } .rtt-player-chip { display: inline-flex; align-items: center; gap: .55rem; padding: .4rem .9rem .4rem .4rem; border: 1px solid var(--rtt-line); border-radius: 50rem; background: var(--rtt-surface); cursor: pointer; transition: transform .15s ease, border-color .15s ease, background-color .15s ease; } .rtt-player-chip span { font-size: .85rem; font-weight: 600; color: var(--rtt-ink); } .rtt-player-chip:hover { border-color: var(--rtt-accent); transform: translateY(-2px); } .rtt-player-chip.selected { background: rgba(201, 69, 13, .1); border-color: var(--rtt-accent); } /* ------------------------------------------------------------------ * Fila de partido estilo marcador: jugador - resultado - jugador * ------------------------------------------------------------------ */ #partidosContainer { display: flex; flex-direction: column; } /* Filas de un mismo listado (no tarjetas sueltas): se separan con un filete fino, no con borde+radio propios cada una. */ .rtt-match-row { display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid var(--rtt-line); padding: .85rem 1.25rem; transition: background-color .15s ease; } .rtt-match-row:last-child { border-bottom: none; } .rtt-match-row:hover { background: var(--rtt-bg); } .rtt-match-index { flex: 0 0 auto; width: 1.6rem; font-family: var(--rtt-font-display); font-variant-numeric: tabular-nums; font-size: .74rem; color: var(--rtt-ink-faint); } .rtt-match-side { display: flex; align-items: center; gap: .7rem; flex: 1 1 0; min-width: 0; } .rtt-match-side.is-right { flex-direction: row-reverse; text-align: right; } .rtt-match-player-info { min-width: 0; display: flex; flex-direction: column; } .rtt-match-side.is-right .rtt-match-player-info { align-items: flex-end; } .rtt-match-name { font-weight: 700; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rtt-match-elo { font-family: var(--rtt-font-display); font-variant-numeric: tabular-nums; font-size: .72rem; letter-spacing: .02em; } .rtt-match-elo.is-up { color: #198754; } .rtt-match-elo.is-down { color: #dc3545; } .rtt-match-elo.is-neutral { color: var(--rtt-ink-faint); } .rtt-match-score { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; padding: 0 .5rem; font-family: var(--rtt-font-display); font-variant-numeric: tabular-nums; font-size: 1.6rem; font-weight: 700; } .rtt-match-set { min-width: 1.5rem; text-align: center; color: var(--rtt-ink-faint); } .rtt-match-set.is-winner { color: var(--rtt-accent); } .rtt-match-sep { color: var(--rtt-line); font-weight: 400; } .rtt-match-delete { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--rtt-ink-faint); display: flex; align-items: center; justify-content: center; transition: all .15s ease; } .rtt-match-delete:hover { background: #dc3545; border-color: #dc3545; color: #fff; } @media (max-width: 576px) { .rtt-match-row { flex-wrap: wrap; } .rtt-match-index { display: none; } .rtt-match-score { order: 3; flex: 1 0 100%; justify-content: center; padding-top: .5rem; border-top: 1px solid var(--rtt-line); margin-top: .25rem; } .rtt-match-delete { order: 4; } } /* ------------------------------------------------------------------ * Modo oscuro * ------------------------------------------------------------------ * Redefine los tokens --rtt-* (esto ya recolorea cards, sidebar, tablas de * cabecera, texto, bordes... todo lo que usa var(--rtt-*) en este archivo) * y corrige aparte los componentes de Bootstrap que traen su propio color * fijo en vez de heredar de estos tokens. */ :root[data-theme="dark"] { --rtt-bg: #14161a; --rtt-surface: #1c1f26; --rtt-ink: #eef0f3; --rtt-ink-soft: #b8bcc4; --rtt-ink-faint: #8b909a; --rtt-line: #2c313c; --rtt-accent: #d94e14; --rtt-accent-deep: #b04111; --rtt-accent-bright: #ff7a47; /* --rtt-court y --rtt-court-deep NO se redefinen: además de fondo secundario también se usan como extremos de gradientes con texto blanco encima (p.ej. .badge.admin-badge en custom.css), y aclararlos los dejaría ilegibles. */ --rtt-shadow: 0 1px 2px rgba(0, 0, 0, .4); --rtt-shadow-lift: 0 12px 32px rgba(0, 0, 0, .5); /* Enlaces de texto (definidos en custom.css sobre :root): el naranja "profundo" baja de 4.8:1 a 3.7:1 de contraste sobre fondo oscuro, por debajo del mínimo de WCAG AA para texto normal. El "bright" sí cumple. */ --bs-link-color: var(--rtt-accent-bright); --bs-link-hover-color: #ff9166; color-scheme: dark; } :root[data-theme="dark"] body { background-image: radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px); } /* Tablas: Bootstrap fija --bs-table-color/--bs-table-bg de forma independiente a nuestros tokens, así que sin esto el texto quedaría oscuro sobre fondo oscuro. */ :root[data-theme="dark"] .table { color: var(--rtt-ink); --bs-table-color: var(--rtt-ink); --bs-table-bg: transparent; --bs-table-striped-bg: rgba(255, 255, 255, .035); --bs-table-hover-bg: rgba(255, 255, 255, .05); --bs-table-border-color: var(--rtt-line); } :root[data-theme="dark"] .form-control, :root[data-theme="dark"] .form-select { background-color: var(--rtt-surface); border-color: var(--rtt-line); color: var(--rtt-ink); } :root[data-theme="dark"] .form-control:disabled, :root[data-theme="dark"] .form-control[readonly] { background-color: var(--rtt-bg); } :root[data-theme="dark"] .form-control::placeholder { color: var(--rtt-ink-faint); } :root[data-theme="dark"] .input-group-text { background-color: var(--rtt-surface); border-color: var(--rtt-line); color: var(--rtt-ink-soft); } :root[data-theme="dark"] .modal-content { background-color: var(--rtt-surface); color: var(--rtt-ink); } :root[data-theme="dark"] .dropdown-menu { background-color: var(--rtt-surface); border-color: var(--rtt-line); } :root[data-theme="dark"] .dropdown-item { color: var(--rtt-ink); } :root[data-theme="dark"] .dropdown-item:hover, :root[data-theme="dark"] .dropdown-item:focus { background-color: var(--rtt-bg); color: var(--rtt-ink); } :root[data-theme="dark"] .list-group-item { background-color: var(--rtt-surface); border-color: var(--rtt-line); color: var(--rtt-ink); } :root[data-theme="dark"] .text-muted { color: var(--rtt-ink-faint) !important; } :root[data-theme="dark"] hr { border-color: var(--rtt-line); opacity: 1; } /* Botones de cerrar sin variante -white (los de las cabeceras de color como bg-danger ya usan .btn-close-white y no necesitan esto). */ :root[data-theme="dark"] .btn-close:not(.btn-close-white) { filter: invert(1) grayscale(100%) brightness(1.6); } /* El extremo #fdf2ec del degradado es un melocotón fijo pensado para fondo claro; en oscuro lo sustituimos por un tono cálido oscuro para no acabar con medio header claro y medio oscuro (con --rtt-ink, que en oscuro es texto claro, ilegible sobre la mitad clara). */ :root[data-theme="dark"] .bg-gradient-elegant { background: linear-gradient(120deg, var(--rtt-surface) 0%, #2a1c14 100%) !important; } :root[data-theme="dark"] .badge.bg-light { background-color: var(--rtt-bg) !important; color: var(--rtt-ink-soft) !important; } /* Utilidad .bg-light de Bootstrap fuera de badges: fuerza fondo claro con !important, así que en oscuro el texto (heredado de .card/body, que se vuelve claro) queda casi ilegible sobre ese fondo. Se retinta a superficie oscura. Se excluyen los .bg-light combinados con .text-dark (chips como "Miembro" o nombres de club): esos son intencionalmente claros en cualquier tema, igual que --rtt-court más arriba. */ :root[data-theme="dark"] .bg-light:not(.text-dark) { background-color: var(--rtt-surface) !important; } /* Cards de inscripción de jugadores (inscribir_jugador_jornada.html): el fondo claro está fijo en custom.css sin variante oscura, y el texto de dentro sí seguía los tokens --rtt-* (claro en modo oscuro) -> texto invisible sobre fondo claro. */ :root[data-theme="dark"] .jugador-card-inscripcion { background: var(--rtt-surface); border-color: var(--rtt-line); } :root[data-theme="dark"] .jugador-card-inscripcion.selected { background: rgba(40, 167, 69, .18); border-color: #2fb350; } :root[data-theme="dark"] .jugador-card-inscripcion.row-adding { background: rgba(40, 167, 69, .3); } :root[data-theme="dark"] .jugador-card-inscripcion.row-removing { background: rgba(220, 53, 69, .3); } /* Etiquetas de jugador (columna "Etiquetas" en ver_club.html, y también inscribir2.html/inscribir_jugador_jornada.html): el chip pastel usa texto oscuro fijo (.text-dark) e icono/borde con colores de Bootstrap sin variante oscura, así que sobre una superficie oscura el conjunto pierde contraste. Se retinta a un indigo oscuro con texto e icono claros. */ :root[data-theme="dark"] .bg-label { background: linear-gradient(90deg, #363c68 0%, #2b3054 100%); border-color: #4c5490 !important; } :root[data-theme="dark"] .bg-label.text-dark { color: #e8eaf6 !important; } :root[data-theme="dark"] .bg-label .text-primary { color: #9aa5ff !important; } /* Tarjetas de features del hero (home.html): usan un fondo gris claro fijo (rgba(238,240,243,.7)) para dejar entrever la ilustración del hero, pero el texto sigue los tokens --rtt-* (claros en oscuro) -> texto claro sobre fondo claro. En oscuro se retinta el fondo a superficie semitransparente oscura, manteniendo la misma idea de dejar ver el dibujo por debajo. */ :root[data-theme="dark"] .rtt-hero-features .rtt-feature { background: rgba(28, 31, 38, .7); } :root[data-theme="dark"] ::selection { background: var(--rtt-accent-bright); color: #14161a; } /* Botón de alternar tema: sol/luna en el pie del sidebar, junto a "Cerrar sesión" / "Iniciar sesión". */ .rtt-theme-toggle { display: flex; align-items: center; gap: .6rem; width: 100%; background: transparent; border: none; padding: .55rem .6rem; border-radius: var(--rtt-radius-sm); color: var(--rtt-ink-soft); font-size: .82rem; font-weight: 500; cursor: pointer; } .rtt-theme-toggle:hover { background: var(--rtt-bg); color: var(--rtt-ink); } .rtt-theme-toggle i { width: 1.1em; text-align: center; } .rtt-theme-toggle .rtt-theme-icon-dark { display: none; } :root[data-theme="dark"] .rtt-theme-toggle .rtt-theme-icon-light { display: none; } :root[data-theme="dark"] .rtt-theme-toggle .rtt-theme-icon-dark { display: inline; }