/* * Tema compartido Motoclub Motrix — usado por Laravel, Piwigo y phpBB. * Ruta estable: /assets/theme/theme.css (mismo docroot para las tres apps). */ /* * Reserva siempre el hueco de la barra de scroll vertical, la necesite la * página o no — evita que el banner/nav centrado se desplace unos píxeles * al navegar entre páginas cortas (sin scroll) y largas (con scroll). */ html { overflow-y: scroll; scrollbar-gutter: stable; } :root { --motrix-dark: #1a1a1a; --motrix-accent: #3f7d47; --motrix-accent-dark: #2e5e35; --motrix-light: #f5f5f5; --motrix-page-bg: #212121; --motrix-card-bg: #3d3d3d; --motrix-border: #404040; --motrix-text: #ececec; --motrix-text-muted: #a8a8a8; --motrix-green: #63b76b; --motrix-green-light: #8ecb94; } /* * El banner y el nav se insertan dentro de Laravel, Piwigo y phpBB, cada uno * con su propio CSS global (que fija font-family/font-size en h1, p, a, nav, * ul, li...). Heredar pierde siempre frente a una regla explícita del host en * el propio elemento, así que aquí todo se declara explícito por elemento * (no solo en el contenedor) y en px (no rem, que depende del font-size del * de cada app, distinto entre ellas). */ .motrix-nav, .motrix-nav ul, .motrix-nav li, .motrix-nav a { font-family: Arial, Helvetica, sans-serif; line-height: normal; letter-spacing: normal; text-transform: none; } .motrix-banner { background: var(--motrix-dark); text-align: center; line-height: 0; padding: 24px 0; } .motrix-banner img { max-width: 100%; height: auto; } .motrix-nav { background: var(--motrix-accent); } .motrix-nav__list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; } .motrix-nav__list li { margin: 0; } .motrix-nav__list a { display: block; padding: 14px 20px; color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; transition: background-color 0.15s ease-in-out; } .motrix-nav__list a:hover, .motrix-nav__list a.is-active { background: var(--motrix-accent-dark); color: #fff; text-decoration: none; font-weight: 600; } /* phpBB envuelve todo su contenido en #wrap, justo debajo del nav compartido; sin esto queda pegado a la barra de navegación. */ #wrap { margin-top: 24px; } body { margin: 0; padding: 0; background: var(--motrix-dark); } .motrix-page { max-width: 960px; margin: 0 auto; padding: 2rem 1.5rem; background: var(--motrix-page-bg); font-family: Arial, Helvetica, sans-serif; color: var(--motrix-text); line-height: 1.6; } .motrix-page h2 { color: #fff; border-bottom: 2px solid var(--motrix-accent); padding-bottom: 0.4rem; } .motrix-page a { color: var(--motrix-green); } .motrix-page a:hover { color: var(--motrix-green-light); } .motrix-heading-center { text-align: center; } .motrix-card { background: var(--motrix-card-bg); border: 1px solid var(--motrix-border); border-radius: 6px; padding: 1rem 1.25rem; margin-bottom: 1rem; } .motrix-card h3 { margin: 0 0 0.35rem; color: #fff; } .motrix-card .motrix-meta { color: var(--motrix-text-muted); font-size: 0.9rem; } .motrix-card--compact { display: grid; grid-template-columns: auto 110px 1fr 150px; align-items: center; gap: 0.2rem 1rem; padding: 0.3rem 1rem; margin-bottom: 0.35rem; } .motrix-card--compact.motrix-card--no-dot { grid-template-columns: 110px 1fr 150px; } .motrix-card__col { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.85rem; line-height: 1.3; } .motrix-card__title { font-weight: 700; color: #fff; font-size: 0.95rem; } .motrix-index-bar { text-align: center; color: var(--motrix-text-muted); margin-bottom: 1.5rem; } .motrix-toolbar { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; } .motrix-toolbar-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.75rem; } .motrix-button-group { display: flex; flex-wrap: wrap; gap: 0.5rem; } .motrix-btn { display: inline-block; padding: 10px 20px; border: 1px solid #ddd; border-radius: 999px; background: #fff; color: #333; text-decoration: none; font-size: 0.9rem; font-weight: 600; line-height: 1; white-space: nowrap; transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out; } .motrix-btn:hover { border-color: var(--motrix-accent); color: var(--motrix-accent); } .motrix-btn.is-active { background: var(--motrix-accent); border-color: var(--motrix-accent); color: #fff; } .motrix-btn--sm { padding: 7px 16px; font-size: 0.8rem; } .motrix-btn--outline { border-color: #fff; color: #fff; background: transparent; } .motrix-btn--outline:hover { background: #fff; color: var(--motrix-dark); } .motrix-group-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin-top: 2rem; } a.motrix-back-to-index { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--motrix-accent); color: #fff; text-decoration: none; flex-shrink: 0; } a.motrix-back-to-index:hover { background: var(--motrix-accent-dark); } .motrix-status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.4rem; } .motrix-status-dot--future { background: #2e8b41; } .motrix-status-dot--past { background: #b22222; } .motrix-status-dot--lg { width: 22px; height: 22px; margin-right: 0; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12); } .motrix-badge-new { display: inline-block; background: var(--motrix-accent); color: #fff; font-size: 0.7rem; font-weight: 600; padding: 2px 6px; border-radius: 3px; margin-left: 0.4rem; vertical-align: middle; } .motrix-sponsored { border: 2px solid var(--motrix-accent); }