/* ============================================================ HyLeveling Forum — theme.css v3.0 Autor: HyLeveling Dev Team ============================================================ ÍNDICE 0. Anti-FOUC 1. Design tokens (:root) 2. Base (body / links / selección / scrollbar) 3. Header sticky glass 4. Hero banner 5. Botones (global) 6. Sidebar 7. Lista de discusiones 8. Posts / DiscussionPage 9. Composer (dock + ComposerPage) 10. Tags chips (inline) 11. Tags page — tiles 12. Tags page — subtags 13. Hero en Index / Tag / Discussion 14. Reply Placeholder 15. Dropdowns / modales 16. Alertas / avatares 17. Boot screen & Lang gate 18. Reset-password 19. Polishes UX (hr, focus, código, imágenes) 20. Accesibilidad & Responsive 21. Boton Reply Fix 22. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&display=swap'); /* ============================================================ 0) ANTI-FOUC — fondo oscuro instantáneo ============================================================ */ html { background: #0b0f16; } body { background: #0b0f16; color: rgba(255,255,255,.92); } .App { background: transparent !important; } /* ============================================================ 1) DESIGN TOKENS ============================================================ */ :root { /* Paleta de fondo */ --hl-bg: #0b0f16; --hl-bg2: #0f1624; /* Superficies glassmorphism */ --hl-surface: rgba(255,255,255,.035); --hl-surface2: rgba(255,255,255,.055); --hl-card: rgba(255,255,255,.045); --hl-cardHover:rgba(255,255,255,.070); /* Bordes */ --hl-border: rgba(255,255,255,.10); --hl-border2: rgba(255,255,255,.16); /* Texto */ --hl-text: rgba(255,255,255,.92); --hl-muted: rgba(255,255,255,.62); /* Accentos */ --hl-purple: #a855f7; --hl-cyan: #22d3ee; --hl-good: #22c55e; --hl-warn: #f59e0b; --hl-bad: #ef4444; /* Sombras */ --hl-shadow: 0 14px 45px rgba(0,0,0,.30); --hl-shadow2: 0 22px 70px rgba(0,0,0,.40); /* Radios */ --hl-radius: 18px; --hl-radius-sm: 14px; /* Hero */ --hl-hero-h: 260px; --hl-hero-img: url("/assets/header.png"); /* Motion */ --hl-ease: cubic-bezier(.2,.9,.2,1); /* Boot overlay */ --hl-boot-bg: rgba(5,8,12,.82); --hl-boot-card: rgba(0,0,0,.22); --hl-boot-border: rgba(255,255,255,.12); } /* ============================================================ 2) BASE ============================================================ */ html { scroll-behavior: smooth; scroll-padding-top: 72px; /* compensa header sticky */ } body { background: radial-gradient(1100px 520px at 12% 0%, rgba(168,85,247,.18), transparent 62%), radial-gradient(900px 520px at 88% 8%, rgba(34,211,238,.13), transparent 58%), radial-gradient(900px 900px at 50% 120%,rgba(168,85,247,.10), transparent 55%), linear-gradient(180deg, var(--hl-bg) 0%, #070a10 100%); color: var(--hl-text); } a { color: rgba(168,85,247,.95); } a:hover { color: rgba(34,211,238,.95); text-decoration: none; } ::selection { background: rgba(168,85,247,.25); color: var(--hl-text); } /* Scrollbar elegante */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: rgba(255,255,255,.03); } ::-webkit-scrollbar-thumb { background: rgba(168,85,247,.35); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover{ background: rgba(34,211,238,.45); } /* Focus accesible */ :focus-visible { outline: none !important; box-shadow: 0 0 0 3px rgba(34,211,238,.18), 0 0 0 1px rgba(168,85,247,.18) !important; border-radius: 12px; } /* Imágenes en posts */ .Post-body img { max-width: 100% !important; height: auto !important; border-radius: 12px; } /* Código en posts */ .Post-body code { background: rgba(0,0,0,.28) !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 6px; padding: 2px 6px; font-size: .9em; color: rgba(34,211,238,.92) !important; } .Post-body pre { background: rgba(0,0,0,.32) !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 12px; padding: 16px; overflow-x: auto; } /* Separador */ hr { border: 0 !important; border-top: 1px solid rgba(255,255,255,.12) !important; opacity: 1 !important; margin: 20px 0 !important; } /* iOS: evitar zoom en inputs */ @media (max-width: 680px) { input, textarea, select { font-size: 16px !important; } } /* ============================================================ 3) HEADER STICKY GLASS ============================================================ */ .App-header { position: sticky; top: 0; z-index: 9999; background: rgba(10,14,22,.76); border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* Línea glow bajo el header */ .App-header::after { content: ""; display: block; height: 1px; background: linear-gradient(90deg, transparent, rgba(168,85,247,.40), rgba(34,211,238,.30), transparent ); opacity: .70; } /* Título */ .Header-title a { font-weight: 900; letter-spacing: .6px; text-shadow: 0 0 18px rgba(168,85,247,.20); } /* Buscador */ .Search-input input { background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: var(--hl-radius-sm) !important; color: var(--hl-text) !important; transition: border-color .18s var(--hl-ease), box-shadow .18s var(--hl-ease); } .Search-input input:focus { border-color: rgba(34,211,238,.35) !important; box-shadow: 0 0 0 3px rgba(34,211,238,.12); } .Search-input input::placeholder { color: rgba(255,255,255,.45); } /* Botones del header */ .Header-primary .Button, .Header-secondary .Button { border-radius: var(--hl-radius-sm); } /* ============================================================ 4) HERO BANNER (full-width bajo el header) ============================================================ */ .App { position: relative; padding-top: var(--hl-hero-h); } /* Imagen de fondo */ .App::before { content: ""; position: absolute; inset: 0; width: 100%; height: var(--hl-hero-h); background: var(--hl-hero-img) center center / cover no-repeat; background-color: var(--hl-bg); border-bottom: 1px solid rgba(255,255,255,.06); z-index: 0; display: block; } /* Aura animada sobre el hero */ .App::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: var(--hl-hero-h); pointer-events: none; background: radial-gradient(900px 260px at 30% 25%, rgba(168,85,247,.20), transparent 60%), radial-gradient(900px 260px at 75% 25%, rgba(34,211,238,.14), transparent 60%), linear-gradient(to bottom, rgba(11,15,22,.08), rgba(11,15,22,.60)); mix-blend-mode: screen; opacity: .78; animation: hlHeroGlow 7s ease-in-out infinite alternate; z-index: 1; } @keyframes hlHeroGlow { 0% { opacity: .60; filter: blur(0px); } 100% { opacity: .82; filter: blur(1.5px); } } /* Contenido siempre encima */ .App-content { position: relative; z-index: 2; max-width: 1220px; margin: 0 auto; padding: 18px 14px 26px; } /* Sombra suave de separación hero → contenido */ .App-content::before { content: ""; display: block; height: 14px; margin-top: -10px; border-radius: 999px; background: radial-gradient(closest-side, rgba(0,0,0,.50), transparent 70%); opacity: .60; } /* Responsive hero */ @media (max-width: 900px) { :root { --hl-hero-h: 190px; } } @media (max-width: 520px) { :root { --hl-hero-h: 150px; } } /* ============================================================ 5) BOTONES (global) ============================================================ */ .Button { border-radius: var(--hl-radius-sm); border: 1px solid rgba(255,255,255,.10); transition: transform .14s var(--hl-ease), box-shadow .14s var(--hl-ease), background .14s var(--hl-ease), border-color .14s var(--hl-ease); } .Button--primary { background: linear-gradient(90deg, rgba(168,85,247,.95), rgba(34,211,238,.85)); border: 0; color: #0b0f16; font-weight: 900; box-shadow: 0 16px 42px rgba(168,85,247,.18); } .Button--primary:hover { transform: translateY(-1px); box-shadow: 0 22px 60px rgba(34,211,238,.18); filter: brightness(1.04); } .Button:active { transform: translateY(0) scale(.99); } /* ============================================================ 6) SIDEBAR PANEL (glass card) ============================================================ */ .IndexSidebar, .IndexPage .IndexSidebar, .TagPage .IndexSidebar { background: rgba(255,255,255,.025) !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: var(--hl-radius) !important; padding: 12px !important; box-shadow: var(--hl-shadow) !important; backdrop-filter: blur(10px); } .IndexPage .IndexSidebar .TagLink, .TagPage .IndexSidebar .TagLink { background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 14px !important; padding: 10px 12px !important; margin: 6px 0 !important; transition: transform .14s var(--hl-ease), box-shadow .14s var(--hl-ease), border-color .14s var(--hl-ease), background .14s var(--hl-ease); } .IndexPage .IndexSidebar .TagLink:hover, .TagPage .IndexSidebar .TagLink:hover { transform: translateY(-2px); background: rgba(168,85,247,.08) !important; border-color: rgba(168,85,247,.22) !important; box-shadow: 0 14px 30px rgba(0,0,0,.25); } .IndexPage .IndexSidebar .TagLink--active, .TagPage .IndexSidebar .TagLink--active { background: rgba(34,211,238,.09) !important; border-color: rgba(34,211,238,.22) !important; } .IndexPage .sideNav .Button, .IndexPage .sideNav .Dropdown-toggle { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); border-radius: var(--hl-radius-sm); } .IndexPage .sideNav .Button:hover, .IndexPage .sideNav .Dropdown-toggle:hover { background: rgba(168,85,247,.10); border-color: rgba(168,85,247,.35); box-shadow: 0 12px 28px rgba(0,0,0,.22); transform: translateY(-1px); } /* ============================================================ 7) LISTA DE DISCUSIONES ============================================================ */ .DiscussionList, .IndexPage .DiscussionList, .TagPage .DiscussionList { background: rgba(255,255,255,.018) !important; border: 1px solid rgba(255,255,255,.06) !important; border-radius: 22px !important; padding: 14px !important; box-shadow: 0 18px 55px rgba(0,0,0,.35); } /* Toolbar (All / Following / Tags) */ .IndexPage .IndexPage-toolbar .Button, .IndexPage .IndexPage-toolbar .Dropdown-toggle, .TagPage .IndexPage-toolbar .Button, .TagPage .IndexPage-toolbar .Dropdown-toggle { border-radius: 14px !important; padding: 10px 14px !important; background: rgba(255,255,255,.045) !important; border: 1px solid rgba(255,255,255,.10) !important; color: rgba(255,255,255,.86) !important; box-shadow: 0 10px 24px rgba(0,0,0,.22); transition: transform .14s var(--hl-ease), box-shadow .14s var(--hl-ease), border-color .14s var(--hl-ease), background .14s var(--hl-ease); } .IndexPage .IndexPage-toolbar .Button:hover, .IndexPage .IndexPage-toolbar .Dropdown-toggle:hover, .TagPage .IndexPage-toolbar .Button:hover, .TagPage .IndexPage-toolbar .Dropdown-toggle:hover { transform: translateY(-2px); background: rgba(34,211,238,.08) !important; border-color: rgba(34,211,238,.22) !important; box-shadow: 0 18px 38px rgba(0,0,0,.30); } .IndexPage .IndexPage-toolbar .Button--primary, .TagPage .IndexPage-toolbar .Button--primary { background: linear-gradient(90deg, rgba(168,85,247,.95), rgba(34,211,238,.85)) !important; color: #0b0f16 !important; font-weight: 950 !important; border: 0 !important; box-shadow: 0 18px 42px rgba(168,85,247,.18); } .IndexPage .IndexPage-toolbar .Button--primary::after { content: " ➜"; } .IndexPage .IndexPage-toolbar .Button--primary:hover, .TagPage .IndexPage-toolbar .Button--primary:hover { filter: brightness(1.05); box-shadow: 0 26px 66px rgba(34,211,238,.16); } /* Item de discusión */ .DiscussionListItem, .IndexPage .DiscussionListItem, .TagPage .DiscussionListItem { background: rgba(255,255,255,.042) !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 18px !important; margin: 5px 0 !important; overflow: hidden; box-shadow: 0 14px 40px rgba(0,0,0,.28); position: relative; transition: transform .16s var(--hl-ease), box-shadow .16s var(--hl-ease), border-color .16s var(--hl-ease), background .16s var(--hl-ease); } /* Shine sweep */ .DiscussionListItem::before { content: ""; position: absolute; inset: -2px; background: linear-gradient( 120deg, transparent 0%, rgba(34,211,238,.10) 35%, rgba(168,85,247,.12) 55%, transparent 72% ); transform: translateX(-120%); opacity: 0; transition: transform .55s var(--hl-ease), opacity .25s var(--hl-ease); pointer-events: none; z-index: 0; } .DiscussionListItem:hover, .IndexPage .DiscussionListItem:hover, .TagPage .DiscussionListItem:hover { transform: translateY(-3px); background: rgba(255,255,255,.055) !important; border-color: rgba(34,211,238,.22) !important; box-shadow: 0 24px 75px rgba(0,0,0,.45); } .DiscussionListItem:hover::before { transform: translateX(120%); opacity: 1; } /* Texto */ .DiscussionListItem-title, .IndexPage .DiscussionListItem-title, .TagPage .DiscussionListItem-title { font-weight: 900 !important; letter-spacing: .25px; color: rgba(255,255,255,.95) !important; line-height: 1.25; } .IndexPage .DiscussionListItem:hover .DiscussionListItem-title, .TagPage .DiscussionListItem:hover .DiscussionListItem-title { text-shadow: 0 0 14px rgba(34,211,238,.08); } .DiscussionListItem-author, .DiscussionListItem-info, .IndexPage .DiscussionListItem-info, .IndexPage .DiscussionListItem-author, .TagPage .DiscussionListItem-info, .TagPage .DiscussionListItem-author { color: rgba(255,255,255,.70) !important; } .DiscussionListItem--unread { border-color: rgba(168,85,247,.22) !important; } .DiscussionListItem--unread:hover { border-color: rgba(34,211,238,.22) !important; } .DiscussionListItem--unread .DiscussionListItem-title { text-shadow: 0 0 16px rgba(168,85,247,.22); } /* Tag chips inline */ .IndexPage .DiscussionListItem .TagLabel, .TagPage .DiscussionListItem .TagLabel { background: rgba(0,0,0,.18) !important; border-color: rgba(255,255,255,.10) !important; } /* ============================================================ 8) POSTS / DISCUSSION PAGE ============================================================ */ .DiscussionPage .App-content { max-width: 1220px !important; } .DiscussionPage .DiscussionPage-stream { margin-top: 10px !important; } .DiscussionPage-stream .Post { margin-bottom: 18px !important; } .Post { background: rgba(255,255,255,.035) !important; border: 1px solid rgba(255,255,255,.09) !important; border-radius: 20px !important; box-shadow: 0 18px 60px rgba(0,0,0,.38) !important; overflow: hidden; } .Post-header { border-bottom: 1px solid rgba(255,255,255,.06) !important; background: linear-gradient(90deg, rgba(168,85,247,.06), rgba(34,211,238,.05)) !important; } .Post-body { color: rgba(255,255,255,.88) !important; line-height: 1.65; } .Post-body a { color: rgba(34,211,238,.92) !important; } .Post-body a:hover { color: rgba(168,85,247,.95) !important; } .PostUser-name, .PostMeta { color: rgba(255,255,255,.78) !important; } .PostMeta-time { color: rgba(255,255,255,.60) !important; } .Avatar { border-radius: 16px !important; box-shadow: 0 12px 28px rgba(0,0,0,.35) !important; } /* Columna derecha (Reply / Follow / timeline) */ .DiscussionPage-nav { background: rgba(255,255,255,.02) !important; border: 1px solid rgba(255,255,255,.07) !important; border-radius: 20px !important; padding: 14px !important; box-shadow: 0 18px 55px rgba(0,0,0,.32) !important; } /* Split button groups (Reply + ▼, Follow + ▼) — mantener en fila */ .DiscussionPage-nav .ButtonGroup { display: inline-flex !important; flex-direction: row !important; gap: 3px !important; width: 100% !important; } .DiscussionPage-nav .ButtonGroup > .Button, .DiscussionPage-nav .ButtonGroup > .Dropdown-toggle { flex-shrink: 0 !important; } .DiscussionPage-nav .Button, .DiscussionPage-nav .Dropdown-toggle { border-radius: 14px !important; background: rgba(255,255,255,.045) !important; border: 1px solid rgba(255,255,255,.10) !important; color: rgba(255,255,255,.86) !important; transition: transform .14s var(--hl-ease), box-shadow .14s var(--hl-ease), border-color .14s var(--hl-ease), background .14s var(--hl-ease); } .DiscussionPage-nav .Button:hover, .DiscussionPage-nav .Dropdown-toggle:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(0,0,0,.28); border-color: rgba(34,211,238,.18) !important; background: rgba(34,211,238,.07) !important; } .DiscussionPage-nav .Button--primary { background: linear-gradient(90deg, rgba(168,85,247,.95), rgba(34,211,238,.85)) !important; border: 0 !important; color: #0b0f16 !important; font-weight: 950 !important; } .DiscussionPage-nav .Scrubber { opacity: .9; } .DiscussionPage-nav .Scrubber a { color: rgba(255,255,255,.70) !important; } .DiscussionPage-nav .Scrubber a:hover { color: rgba(255,255,255,.92) !important; } /* ============================================================ 9) COMPOSER ============================================================ */ /* ── 9a) Dock (global, flotante) ── */ .Composer { background: rgba(10,14,22,.76); border-top: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(14px); } /* Reply inline block */ .DiscussionReplyBlock { background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.08) !important; box-shadow: 0 18px 55px rgba(0,0,0,.35) !important; border-radius: 20px !important; overflow: hidden !important; } .DiscussionReplyBlock .ComposerBody { display: flex !important; gap: 12px !important; align-items: stretch !important; padding: 14px !important; } .DiscussionReplyBlock .ComposerBody-avatar { flex: 0 0 auto !important; align-self: flex-start !important; margin: 0 !important; } .DiscussionReplyBlock .ComposerBody-content { flex: 1 1 auto !important; min-width: 0 !important; } .DiscussionReplyBlock .ComposerBody-editor, .DiscussionReplyBlock .TextEditor, .DiscussionReplyBlock .TextEditor-editorContainer { width: 100% !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .DiscussionReplyBlock textarea { width: 100% !important; min-width: 0 !important; background: rgba(0,0,0,.18) !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 14px !important; color: rgba(255,255,255,.92) !important; padding: 14px !important; min-height: 110px !important; line-height: 1.6 !important; resize: vertical; } .DiscussionReplyBlock textarea::placeholder { color: rgba(255,255,255,.50) !important; } .DiscussionReplyBlock .TextEditor-controls { margin-top: 10px !important; padding-top: 10px !important; border-top: 1px solid rgba(255,255,255,.08) !important; } #composer textarea.FormControl.TextEditor-editor { color: rgba(255,255,255,.92) !important; } /* ── 9b) Composer dock / header comunes ── */ .Composer, .ComposerBody { background: rgba(10,14,22,.92) !important; border-top: 1px solid rgba(255,255,255,.10) !important; backdrop-filter: blur(14px) !important; padding: 20px 18px !important; } .ComposerBody-header { display: flex !important; flex-wrap: wrap !important; gap: 14px !important; align-items: center !important; margin-bottom: 16px !important; padding: 0 !important; list-style: none !important; } .ComposerBody-header .item-title h3 { margin: 0 !important; padding: 9px 16px !important; background: rgba(168,85,247,.12) !important; border: 1px solid rgba(168,85,247,.22) !important; border-radius: 999px !important; color: rgba(255,255,255,.95) !important; font-weight: 950 !important; font-size: 14px !important; letter-spacing: .4px !important; text-transform: uppercase !important; } .ComposerBody-header .item-tags { flex: 0 0 auto !important; margin: 0 !important; } .ComposerBody-header .item-tags .TagLabel, .ComposerBody-header .item-tags .TagsLabel { display: inline-flex !important; align-items: center !important; padding: 9px 14px !important; background: rgba(0,0,0,.22) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 999px !important; color: rgba(255,255,255,.92) !important; font-weight: 850 !important; cursor: pointer !important; transition: all .14s var(--hl-ease) !important; } .ComposerBody-header .item-tags .TagLabel:hover { transform: translateY(-2px) !important; border-color: rgba(34,211,238,.22) !important; } /* Input título — reset doble borde */ .ComposerBody-header .item-discussionTitle { all: unset !important; display: block !important; width: 100% !important; list-style: none !important; margin: 0 0 12px 0 !important; } .item-discussionTitle > h3:nth-child(1) { all: unset !important; display: block !important; width: 100% !important; } .item-discussionTitle > h3:nth-child(1)::before, .item-discussionTitle > h3:nth-child(1)::after { content: none !important; display: none !important; } .item-discussionTitle > h3:nth-child(1) > input:nth-child(1), body #app .ComposerBody-header .item-discussionTitle > h3:nth-child(1) > input:nth-child(1) { all: unset !important; display: block !important; width: 100% !important; box-sizing: border-box !important; padding: 14px 18px !important; background: rgba(0,0,0,.22) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 16px !important; color: rgba(255,255,255,.96) !important; font-weight: 850 !important; font-size: 17px !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important; letter-spacing: .2px !important; line-height: 1.5 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important; transition: border-color .18s ease, box-shadow .18s ease !important; -webkit-appearance: none !important; } .item-discussionTitle > h3:nth-child(1) > input:nth-child(1):focus { border-color: rgba(34,211,238,.35) !important; box-shadow: 0 0 0 3px rgba(34,211,238,.12), inset 0 1px 0 rgba(255,255,255,.06) !important; } .item-discussionTitle > h3:nth-child(1) > input:nth-child(1)::placeholder { color: rgba(255,255,255,.52) !important; } /* Editor textarea */ .TextEditor-editor, .ComposerBody-editor textarea.FormControl { width: 100% !important; min-height: 240px !important; padding: 16px 18px !important; background: rgba(0,0,0,.20) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 16px !important; color: rgba(255,255,255,.92) !important; font-size: 15px !important; line-height: 1.7 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important; resize: vertical !important; transition: border-color .18s ease, box-shadow .18s ease !important; } .TextEditor-editor:focus, .ComposerBody-editor textarea:focus { outline: none !important; border-color: rgba(34,211,238,.35) !important; box-shadow: 0 0 0 3px rgba(34,211,238,.12), inset 0 1px 0 rgba(255,255,255,.05) !important; } .TextEditor-editor::placeholder, .ComposerBody-editor textarea::placeholder { color: rgba(255,255,255,.52) !important; } /* Footer toolbar */ .TextEditor-controls, .Composer-footer { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; align-items: center !important; padding: 14px 0 0 !important; border-top: 1px solid rgba(255,255,255,.08) !important; list-style: none !important; margin: 0 !important; } .TextEditor-controls .item-submit .Button--primary, .Composer-footer .item-submit .Button--primary { background: linear-gradient(90deg, rgba(168,85,247,.95), rgba(34,211,238,.85)) !important; border: 0 !important; color: #0b0f16 !important; font-weight: 950 !important; padding: 12px 20px !important; border-radius: 14px !important; box-shadow: 0 16px 42px rgba(168,85,247,.18) !important; } .TextEditor-controls .item-submit .Button--primary:hover, .Composer-footer .item-submit .Button--primary:hover { transform: translateY(-2px) !important; box-shadow: 0 22px 60px rgba(34,211,238,.16) !important; filter: brightness(1.04) !important; } /* Markdown toolbar */ .MarkdownToolbar, .MarkdownToolbar.ButtonGroup { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; } .MarkdownToolbar .Button, .TextEditor-toolbar .Button { padding: 9px 11px !important; background: rgba(255,255,255,.04) !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 10px !important; color: rgba(255,255,255,.82) !important; min-width: 38px !important; min-height: 38px !important; transition: all .14s var(--hl-ease) !important; } .MarkdownToolbar .Button:hover, .TextEditor-toolbar .Button:hover { background: rgba(34,211,238,.08) !important; border-color: rgba(34,211,238,.18) !important; transform: translateY(-1px) !important; box-shadow: 0 8px 20px rgba(0,0,0,.22) !important; } .TextEditor-controls .item-fof-upload .Button, .TextEditor-controls .item-fof-upload-media .Button { padding: 9px 12px !important; background: rgba(255,255,255,.045) !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 10px !important; color: rgba(255,255,255,.85) !important; transition: all .14s var(--hl-ease) !important; } .TextEditor-controls .item-fof-upload .Button:hover, .TextEditor-controls .item-fof-upload-media .Button:hover { background: rgba(168,85,247,.08) !important; border-color: rgba(168,85,247,.18) !important; transform: translateY(-1px) !important; } .ComposerBody-avatar { width: 50px !important; height: 50px !important; border-radius: 16px !important; box-shadow: 0 12px 28px rgba(0,0,0,.35) !important; margin-right: 14px !important; flex-shrink: 0 !important; } /* ── 9c) ComposerPage (standalone) ── */ .ComposerPage .container { max-width: 1250px !important; padding: 26px 18px 34px !important; } .ComposerPage .ComposerBody { background: rgba(11,15,22,.86) !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 22px !important; box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(168,85,247,.08), 0 0 60px rgba(34,211,238,.08) !important; backdrop-filter: blur(16px) !important; padding: 22px !important; } .ComposerPage .ComposerBody-header { gap: 12px !important; margin-bottom: 10px !important; } .ComposerPage .ComposerBody-header .item-title h3 { background: rgba(168,85,247,.10) !important; border: 1px solid rgba(168,85,247,.22) !important; border-radius: 999px !important; padding: 9px 14px !important; font-weight: 950 !important; } .ComposerPage .TextEditor-editor, .ComposerPage textarea.FormControl { min-height: 340px !important; } .ComposerPage .TextEditor-controls { border-top: 1px solid rgba(255,255,255,.10) !important; margin-top: 14px !important; padding-top: 14px !important; gap: 10px !important; } .ComposerPage .TextEditor-controls .item-submit .Button--primary { padding: 12px 22px !important; background: linear-gradient(90deg, rgba(168,85,247,.95), rgba(34,211,238,.85)) !important; border: 0 !important; color: #0b0f16 !important; font-weight: 950 !important; border-radius: 14px !important; box-shadow: 0 18px 50px rgba(168,85,247,.18) !important; } .ComposerPage .ComposerSidebar, .ComposerPage .SideNav { background: rgba(11,15,22,.55) !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 18px !important; padding: 14px 12px !important; backdrop-filter: blur(12px) !important; } .ComposerPage .SideNav a { border-radius: 12px !important; } .ComposerPage .SideNav a:hover { background: rgba(168,85,247,.08) !important; } /* Responsive composer */ @media (max-width: 992px) { .ComposerPage .container { padding: 18px 12px 26px !important; } .ComposerPage .ComposerBody { padding: 18px !important; } } @media (max-width: 680px) { .ComposerBody-header { flex-direction: column !important; align-items: flex-start !important; } .ComposerBody-header .item-tags, .ComposerBody-header .item-title { width: 100% !important; } .TextEditor-controls { gap: 8px !important; } .MarkdownToolbar .Button { min-width: 34px !important; min-height: 34px !important; padding: 7px 9px !important; } } /* ============================================================ 10) TAG CHIPS (inline) ============================================================ */ .TagLabel { border-radius: 999px; padding: 3px 10px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); } /* ============================================================ 11) TAGS PAGE — TILES ============================================================ */ .TagsPage .TagsPage-list, .TagsPage .TagTiles { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.07); border-radius: var(--hl-radius); padding: 14px; } /* Tile base (todo consolidado) */ .TagsPage .TagTiles > li { border-radius: var(--hl-radius); border: 1px solid rgba(255,255,255,.10); box-shadow: var(--hl-shadow); overflow: hidden; position: relative; display: flex; isolation: isolate; cursor: pointer; /* Imagen */ background-size: 100% !important; background-position: center !important; background-repeat: no-repeat !important; transition: transform .18s var(--hl-ease), box-shadow .22s var(--hl-ease), border-color .18s var(--hl-ease), filter .22s var(--hl-ease), background-size .45s var(--hl-ease); } /* Hover tile */ .TagsPage .TagTiles > li:hover { transform: translateY(-6px) scale(1.012); border-color: rgba(34,211,238,.45) !important; background-size: 108% !important; box-shadow: 0 20px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.10), 0 0 28px rgba(168,85,247,.10), 0 0 24px rgba(34,211,238,.08) !important; filter: brightness(1.06) saturate(1.10); } .TagsPage .TagTiles > li:active { transform: translateY(-3px) scale(1.006); } /* Glow portal ::before */ .TagsPage .TagTiles > li::before { content: ""; position: absolute; inset: -2px; background: radial-gradient(280px 180px at 30% 30%, rgba(168,85,247,.22), transparent 65%), radial-gradient(280px 180px at 70% 35%, rgba(34,211,238,.16), transparent 65%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); opacity: .25; pointer-events: none; z-index: 0; transition: opacity .22s var(--hl-ease), filter .22s var(--hl-ease); filter: blur(.2px); } .TagsPage .TagTiles > li:hover::before { opacity: .55; filter: blur(1px); } /* Overlay oscuro ::after */ .TagsPage .TagTiles > li::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(5,8,12,.10), rgba(5,8,12,.85)); z-index: 1; transition: opacity .22s var(--hl-ease); } .TagsPage .TagTiles > li:hover::after { opacity: .88; } /* Link/tile — layout texto al fondo */ .TagsPage .TagTiles > li > a, .TagsPage .TagTiles > li .TagTile { position: relative; z-index: 2; width: 100%; height: 100%; min-height: 155px; display: flex !important; flex-direction: column; justify-content: flex-end; align-items: center; text-align: center !important; padding: 18px 16px; overflow: hidden; background: transparent !important; } /* Shine sweep sobre el link */ .TagsPage .TagTiles > li > a::before, .TagsPage .TagTiles > li .TagTile::before { content: ""; position: absolute; inset: -2px; pointer-events: none; z-index: 3; background: linear-gradient( 120deg, transparent 0%, rgba(34,211,238,.14) 35%, rgba(168,85,247,.16) 55%, transparent 75% ); transform: translateX(-130%) skewX(-12deg); opacity: 0; transition: transform .60s var(--hl-ease), opacity .22s var(--hl-ease); } .TagsPage .TagTiles > li:hover > a::before, .TagsPage .TagTiles > li:hover .TagTile::before { transform: translateX(130%) skewX(-12deg); opacity: 1; } /* Nombre — pill único */ .TagsPage .TagTiles > li .TagTile-name { display: inline-flex !important; align-items: center; justify-content: center !important; gap: 10px; margin-top: auto !important; padding: 10px 16px !important; border-radius: 999px; background: rgba(0,0,0,.22) !important; border: 1px solid rgba(255,255,255,.10) !important; backdrop-filter: blur(10px); box-shadow: 0 12px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06); color: rgba(255,255,255,.97) !important; font-weight: 900 !important; letter-spacing: .25px; text-align: center !important; width: auto !important; text-shadow: 0 14px 26px rgba(0,0,0,.78), 0 2px 0 rgba(0,0,0,.35) !important; transition: transform .18s var(--hl-ease), text-shadow .18s var(--hl-ease); } .TagsPage .TagTiles > li:hover .TagTile-name { transform: translateY(-2px); text-shadow: 0 18px 30px rgba(0,0,0,.75), 0 0 14px rgba(34,211,238,.12) !important; } /* Descripción — pill secundario */ .TagsPage .TagTiles > li .TagTile-description { display: inline-block !important; margin-top: 10px !important; padding: 8px 14px !important; border-radius: 999px; background: rgba(0,0,0,.18) !important; border: 1px solid rgba(255,255,255,.08) !important; color: rgba(255,255,255,.78) !important; text-shadow: 0 12px 22px rgba(0,0,0,.72) !important; text-align: center !important; width: auto; opacity: 1 !important; transition: transform .18s var(--hl-ease); } .TagsPage .TagTiles > li .TagTile-description:empty { display: none !important; } .TagsPage .TagTiles > li:hover .TagTile-description { transform: translateY(-2px); opacity: 1; } /* Icono */ .TagsPage .TagTiles > li .TagTile-icon { margin: 0 0 8px; opacity: .92; filter: drop-shadow(0 10px 18px rgba(0,0,0,.45)); } /* Ocultar metadata (contadores, último post, etc.) */ .TagsPage .TagTile-latest, .TagsPage .TagTile-lastPosted, .TagsPage .TagTile-activity, .TagsPage .TagTile-stats, .TagsPage .TagTile-meta, .TagsPage .TagTile-info, .TagsPage .TagTile-count, .TagsPage .TagTile-counts, .TagsPage .TagTile-discussionCount, .TagsPage .TagTile-postCount { display: none !important; } .TagsPage .TagTiles > li [class*="meta"], .TagsPage .TagTiles > li [class*="Meta"], .TagsPage .TagTiles > li [class*="stats"], .TagsPage .TagTiles > li [class*="Stats"], .TagsPage .TagTiles > li [class*="latest"], .TagsPage .TagTiles > li [class*="Latest"], .TagsPage .TagTiles > li [class*="last"], .TagsPage .TagTiles > li [class*="Last"], .TagsPage .TagTiles > li time, .TagsPage .TagTiles > li [class*="TagTile-"]:empty { display: none !important; } /* Suavizado de texto */ .TagsPage .TagTiles > li * { -webkit-font-smoothing: antialiased; } /* ── Imágenes por tag (slug) ── */ .TagsPage .TagTiles > li:has(a[href*="/t/general"]) { background-image: url("https://forum.hyleveling.net/assets/files/2026-02-08/1770573652-804172-general.png") !important; } .TagsPage .TagTiles > li:has(a[href*="/t/anuncios"]) { background-image: url("https://forum.hyleveling.net/assets/files/2026-02-08/1770573665-115839-anuncios.png") !important; } .TagsPage .TagTiles > li:has(a[href*="/t/soporte"]) { background-image: url("https://forum.hyleveling.net/assets/files/2026-02-08/1770577292-168673-soporte.png") !important; } .TagsPage .TagTiles > li:has(a[href*="/t/gu-as"]), .TagsPage .TagTiles > li:has(a[href*="/t/guias"]), .TagsPage .TagTiles > li:has(a[href*="/t/gu%C3%ADas"]) { background-image: url("https://forum.hyleveling.net/assets/files/2026-02-08/1770577232-236109-guias.png") !important; } .TagsPage .TagTiles > li:has(a[href*="/t/sugerencias"]) { background-image: url("https://forum.hyleveling.net/assets/files/2026-02-08/1770575748-263937-sugerencias.png") !important; } .TagsPage .TagTiles > li:has(a[href*="/t/reportes"]) { background-image: url("https://forum.hyleveling.net/assets/files/2026-02-08/1770573661-813702-reportes.png") !important; } .TagsPage .TagTiles > li:has(a[href*="/t/off-topic"]), .TagsPage .TagTiles > li:has(a[href*="/t/offtopic"]) { background-image: url("https://forum.hyleveling.net/assets/files/2026-02-08/1770573658-863527-offtopic.png") !important; } /* ============================================================ 12) TAGS PAGE — SUBTAGS (TagTile-children) ============================================================ */ :root { --hlp-a: rgba(168,85,247,.95); --hlp-b: rgba(34,211,238,.92); } /* No recortar zona de subtags */ .TagsPage .TagTiles > li, .TagsPage .TagTiles > li .TagTile, .TagsPage .TagTiles > li .TagTile-content, .TagsPage .TagTiles > li .TagTile-children { overflow: visible !important; } /* Contenedor de chips */ .TagsPage .TagTiles > li .TagTile-children { background: transparent !important; border: 0 !important; box-shadow: none !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 12px !important; padding: 0 !important; margin-top: 10px !important; overflow: visible !important; } /* Max 2 subtags visibles */ .TagsPage .TagTiles > li .TagTile-children > a[href^="/t/"]:nth-child(n+3) { display: none !important; } /* Chip base */ .TagsPage .TagTiles > li .TagTile-children > a[href^="/t/"] { position: relative !important; z-index: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 8px 16px !important; border-radius: 999px !important; background: rgba(0,0,0,.12) !important; border: 1px solid rgba(255,255,255,.14) !important; color: rgba(255,255,255,.92) !important; text-decoration: none !important; font-weight: 900 !important; letter-spacing: .15px !important; box-shadow: 0 10px 26px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06) !important; overflow: hidden !important; isolation: isolate !important; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease !important; } .TagsPage .TagTiles > li .TagTile-children > a[href^="/t/"] * { position: relative; z-index: 3; } /* Ring cónico ::before */ .TagsPage .TagTiles > li .TagTile-children > a[href^="/t/"]::before { content: ""; position: absolute; inset: -6px; border-radius: inherit; pointer-events: none; z-index: 2; background: conic-gradient( from 0deg, transparent 0%, var(--hlp-b) 18%, var(--hlp-a) 44%, var(--hlp-b) 70%, transparent 100% ); padding: 2px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transform: scale(.98); filter: blur(.25px); } /* Partículas ::after */ .TagsPage .TagTiles > li .TagTile-children > a[href^="/t/"]::after { content: ""; position: absolute; inset: -14px; border-radius: inherit; pointer-events: none; z-index: 2; background: radial-gradient(3.5px 3.5px at 8% 28%, rgba(34,211,238,.78), transparent 72%), radial-gradient(3.5px 3.5px at 12% 68%, rgba(168,85,247,.74), transparent 72%), radial-gradient(2.8px 2.8px at 16% 48%, rgba(255,255,255,.30), transparent 76%), radial-gradient(3.5px 3.5px at 22% 18%, rgba(34,211,238,.64), transparent 74%), radial-gradient(3.5px 3.5px at 36% 30%, rgba(168,85,247,.58), transparent 74%), radial-gradient(3.5px 3.5px at 52% 18%, rgba(34,211,238,.52), transparent 76%), radial-gradient(3.5px 3.5px at 68% 26%, rgba(34,211,238,.50), transparent 78%), radial-gradient(3.5px 3.5px at 84% 20%, rgba(168,85,247,.46), transparent 78%), radial-gradient(2.8px 2.8px at 88% 64%, rgba(34,211,238,.44), transparent 78%); opacity: 0; filter: blur(.12px); mix-blend-mode: screen; transform: translate3d(0,0,0); } /* Hover chip */ .TagsPage .TagTiles > li .TagTile-children > a[href^="/t/"]:hover { transform: translateY(-2px) !important; background: rgba(0,0,0,.10) !important; border-color: rgba(34,211,238,.22) !important; filter: brightness(1.06) saturate(1.10) !important; box-shadow: 0 18px 48px rgba(0,0,0,.55), 0 0 14px rgba(34,211,238,.10), inset 0 1px 0 rgba(255,255,255,.06) !important; } .TagsPage .TagTiles > li .TagTile-children > a[href^="/t/"]:hover::before { opacity: .95; animation: hlpSpin 1.05s linear infinite; } .TagsPage .TagTiles > li .TagTile-children > a[href^="/t/"]:hover::after { opacity: 1; animation: hlpDustDrift 6.8s ease-in-out infinite, hlpTwinkle 1.4s ease-in-out infinite alternate; } /* Subtag sidebar */ .TagsPage-nav .TagLink-children a, .TagsPage .TagLink-children a { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 6px 10px !important; margin: 4px 0 !important; border-radius: 999px !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.10) !important; color: rgba(255,255,255,.86) !important; font-weight: 800 !important; text-decoration: none !important; transition: transform .12s ease, filter .12s ease, border-color .12s ease, background .12s ease !important; } .TagsPage-nav .TagLink-children a:hover, .TagsPage .TagLink-children a:hover { background: rgba(255,255,255,.09) !important; border-color: rgba(34,211,238,.22) !important; filter: brightness(1.08) !important; transform: translateX(2px) !important; } /* Animaciones de chips */ @keyframes hlpSpin { to { transform: rotate(360deg) scale(.98); } } @keyframes hlpDustDrift { 0% { transform: translate3d(-1.5px, 0.8px, 0) rotate(0deg) scale(1); } 25% { transform: translate3d( 1.2px, -0.6px, 0) rotate(90deg) scale(1.01); } 50% { transform: translate3d( 0.8px, 1.4px, 0) rotate(180deg) scale(1.02); } 75% { transform: translate3d(-1.1px, -0.9px, 0) rotate(270deg) scale(1.01); } 100% { transform: translate3d(-1.5px, 0.8px, 0) rotate(360deg) scale(1); } } @keyframes hlpTwinkle { 0% { filter: blur(.10px); opacity: .75; } 100% { filter: blur(.22px); opacity: 1; } } /* ============================================================ 13) HERO (Index / TagPage / DiscussionPage) ============================================================ */ .Hero, .DiscussionHero { max-width: 1220px !important; margin: 16px auto 14px !important; border-radius: 0 !important; position: relative !important; overflow: hidden !important; background: linear-gradient(90deg, rgba(168,85,247,.10), rgba(34,211,238,.08)) !important; border: 0 !important; box-shadow: 0 24px 80px rgba(0,0,0,.55) !important; } /* Frame animado */ .Hero::before, .DiscussionHero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#0000,#0000) padding-box, linear-gradient(90deg, rgba(168,85,247,.55), rgba(34,211,238,.40)) border-box; border: 3px solid transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 0 0 4px rgba(0,0,0,.35); z-index: 0; animation: hlFrameShift 7s ease-in-out infinite alternate; } @keyframes hlFrameShift { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(12deg); } } /* Scanlines + aura */ .Hero .container, .DiscussionHero .container { position: relative; z-index: 1; padding: 18px !important; text-align: center !important; background: radial-gradient(900px 260px at 20% 10%, rgba(168,85,247,.28), transparent 60%), radial-gradient(900px 260px at 80% 10%, rgba(34,211,238,.18), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.26)), repeating-linear-gradient(to bottom, rgba(255,255,255,.030) 0px, rgba(255,255,255,.030) 1px, transparent 2px, transparent 6px) !important; } /* Título */ .Hero-title, .DiscussionHero-title, .DiscussionHero-title a { display: inline-block !important; margin: 0 auto !important; padding: 10px 18px !important; border-radius: 0 !important; color: rgba(255,255,255,.99) !important; opacity: 1 !important; font-weight: 950 !important; letter-spacing: .9px !important; text-transform: uppercase !important; font-size: clamp(18px, 2.2vw, 30px) !important; background: rgba(0,0,0,.18) !important; border: 1px solid rgba(255,255,255,.14) !important; text-shadow: 2px 0 0 rgba(0,0,0,.88), 0 2px 0 rgba(0,0,0,.88), 0 18px 40px rgba(0,0,0,.70), 0 0 22px rgba(168,85,247,.20), 0 0 22px rgba(34,211,238,.14) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 45px rgba(0,0,0,.40); } /* Línea HUD bajo el título */ .Hero-title::after, .DiscussionHero-title::after { content: ""; display: block; height: 2px; margin: 10px auto 0; width: 50%; background: linear-gradient(90deg, transparent, rgba(168,85,247,.60), rgba(34,211,238,.44), transparent); opacity: .95; } /* Badge tag dentro del hero */ .DiscussionHero .TagLabel, .Hero .TagLabel { background: rgba(0,0,0,.28) !important; border: 1px solid rgba(255,255,255,.14) !important; color: rgba(255,255,255,.92) !important; box-shadow: 0 12px 28px rgba(0,0,0,.35); padding: 6px 10px !important; } /* Subtítulo */ .Hero-description, .Hero-subtitle, .DiscussionHero-description, .DiscussionHero-subtitle { margin: 10px auto 0 !important; max-width: 860px; color: rgba(255,255,255,.82) !important; text-shadow: 0 16px 28px rgba(0,0,0,.70); } /* Hero solo en Index/Tags/TagPage */ .IndexPage .Hero, .TagsPage .Hero, .TagPage .Hero, .TagPage .TagHero { margin: 18px auto !important; border-radius: 22px !important; overflow: hidden !important; background: rgba(255,255,255,.03) !important; border: 1px solid rgba(255,255,255,.10) !important; box-shadow: 0 18px 60px rgba(0,0,0,.45) !important; backdrop-filter: blur(14px); } .IndexPage .Hero-title, .TagsPage .Hero-title, .TagPage .Hero-title, .TagPage .TagHero-title { font-weight: 950 !important; letter-spacing: .6px !important; color: rgba(255,255,255,.96) !important; text-shadow: 0 22px 40px rgba(0,0,0,.70), 0 0 18px rgba(168,85,247,.14), 0 0 18px rgba(34,211,238,.10) !important; margin: 0 auto !important; } /* Mensaje de bienvenida en Index */ .IndexPage .Hero .container::after { content: "Explora • Aprende • Reporta bugs • Propone ideas"; display: block; margin: 12px auto 0; max-width: 900px; padding: 10px 14px; border-radius: 999px; color: rgba(255,255,255,.74); background: rgba(0,0,0,.16); border: 1px solid rgba(255,255,255,.10); text-shadow: 0 14px 22px rgba(0,0,0,.65); backdrop-filter: blur(10px); letter-spacing: .25px; } /* Responsive hero */ @media (max-width: 680px) { .Hero .container, .DiscussionHero .container { padding: 14px !important; } .Hero-title, .DiscussionHero-title { padding: 9px 14px !important; letter-spacing: .7px !important; } } /* ============================================================ 14) REPLY PLACEHOLDER ("Write a Reply...") ============================================================ */ button.Post.ReplyPlaceholder { display: block !important; width: 100% !important; margin: 0 0 18px !important; padding: 0 !important; border-radius: 20px !important; border: 1px solid rgba(255,255,255,.10) !important; background: radial-gradient(700px 120px at 15% 20%, rgba(168,85,247,.10), transparent 55%), radial-gradient(700px 120px at 85% 20%, rgba(34,211,238,.08), transparent 55%), linear-gradient(180deg, rgba(10,14,20,.72), rgba(8,12,18,.52)) !important; box-shadow: 0 22px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06) !important; overflow: hidden !important; text-align: left !important; cursor: text !important; position: relative !important; transition: transform .14s var(--hl-ease), box-shadow .14s var(--hl-ease), border-color .14s var(--hl-ease), filter .14s var(--hl-ease) !important; } button.Post.ReplyPlaceholder::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0px, rgba(255,255,255,.035) 1px, transparent 2px, transparent 7px), radial-gradient(900px 160px at 50% 0%, rgba(255,255,255,.06), transparent 60%); opacity: .55; } button.Post.ReplyPlaceholder::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 10px; height: 2px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(168,85,247,.55), rgba(34,211,238,.45), transparent); opacity: .55; transition: opacity .14s var(--hl-ease); } button.Post.ReplyPlaceholder > .Post-header { display: flex !important; align-items: center !important; gap: 12px !important; padding: 16px 16px 18px !important; border: 0 !important; background: transparent !important; position: relative !important; z-index: 1 !important; } button.Post.ReplyPlaceholder .Avatar.PostUser-avatar { width: 46px !important; height: 46px !important; border-radius: 16px !important; box-shadow: 0 16px 36px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.10) !important; } button.Post.ReplyPlaceholder .Post-header { color: rgba(255,255,255,.62) !important; font-weight: 800 !important; letter-spacing: .25px !important; padding: 10px 12px !important; border-radius: 14px !important; background: rgba(0,0,0,.18) !important; border: 1px solid rgba(255,255,255,.08) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important; flex: 1 1 auto !important; transition: border-color .14s var(--hl-ease), background .14s var(--hl-ease), box-shadow .14s var(--hl-ease); } button.Post.ReplyPlaceholder:hover { transform: translateY(-2px); border-color: rgba(34,211,238,.22) !important; box-shadow: 0 28px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(34,211,238,.10), inset 0 1px 0 rgba(255,255,255,.06) !important; filter: brightness(1.03); } button.Post.ReplyPlaceholder:hover::after { opacity: .90; } button.Post.ReplyPlaceholder:hover .Post-header { border-color: rgba(34,211,238,.20) !important; background: rgba(0,0,0,.16) !important; } button.Post.ReplyPlaceholder:focus-visible { outline: none !important; border-color: rgba(168,85,247,.30) !important; box-shadow: 0 32px 110px rgba(0,0,0,.62), 0 0 0 3px rgba(168,85,247,.12), inset 0 1px 0 rgba(255,255,255,.06) !important; } @media (max-width: 680px) { button.Post.ReplyPlaceholder > .Post-header { padding: 14px !important; } button.Post.ReplyPlaceholder .Avatar.PostUser-avatar { width: 42px !important; height: 42px !important; } } /* ============================================================ 15) DROPDOWNS / MODALES ============================================================ */ .Dropdown-menu { background: rgba(11,15,22,.94); border: 1px solid rgba(255,255,255,.10); border-radius: 16px; backdrop-filter: blur(14px); box-shadow: var(--hl-shadow); } .Dropdown-menu > li > a { color: rgba(255,255,255,.85); } .Dropdown-menu > li > a:hover { background: rgba(168,85,247,.12); } .Modal-dialog { background: rgba(11,15,22,.96) !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 22px !important; backdrop-filter: blur(18px); box-shadow: 0 40px 120px rgba(0,0,0,.65) !important; } .Modal-header { border-bottom: 1px solid rgba(255,255,255,.08) !important; background: linear-gradient(90deg, rgba(168,85,247,.06), rgba(34,211,238,.05)) !important; } .Modal input.FormControl, .Modal textarea.FormControl { background: rgba(0,0,0,.22) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 14px !important; color: rgba(255,255,255,.92) !important; } .Modal input.FormControl:focus, .Modal textarea.FormControl:focus { border-color: rgba(34,211,238,.35) !important; box-shadow: 0 0 0 3px rgba(34,211,238,.12) !important; } /* ============================================================ 16) ALERTAS / AVATARES ============================================================ */ .Alert { border-radius: 16px; border: 1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); } .Alert--success { border-color: rgba(34,197,94,.25) !important; background: rgba(34,197,94,.06) !important; } .Alert--error { border-color: rgba(239,68,68,.25) !important; background: rgba(239,68,68,.06) !important; } .Alert--warning { border-color: rgba(245,158,11,.25) !important; background: rgba(245,158,11,.06) !important; } /* ============================================================ 17) BOOT SCREEN & LANGUAGE GATE ============================================================ */ #hlBoot, #hlLangGate { position: fixed; inset: 0; z-index: 999999; display: none; } #hlBoot .hlBoot-bg, #hlLangGate .hlBoot-bg { position: absolute; inset: 0; background: radial-gradient(900px 420px at 20% 20%, rgba(168,85,247,.18), transparent 60%), radial-gradient(900px 420px at 80% 20%, rgba(34,211,238,.12), transparent 60%), linear-gradient(180deg, var(--hl-boot-bg), rgba(5,8,12,.88)); backdrop-filter: blur(10px); } #hlBoot .hlBoot-card, #hlLangGate .hlBoot-card { position: relative; width: min(520px, calc(100% - 28px)); margin: auto; top: 50%; transform: translateY(-50%); padding: 18px; border-radius: 22px; background: var(--hl-boot-card); border: 1px solid var(--hl-boot-border); box-shadow: 0 30px 120px rgba(0,0,0,.65); text-align: center; overflow: hidden; } #hlBoot .hlBoot-card::before, #hlLangGate .hlBoot-card::before { content: ""; position: absolute; left: 14px; right: 14px; top: 12px; height: 2px; background: linear-gradient(90deg, transparent, rgba(168,85,247,.6), rgba(34,211,238,.45), transparent); opacity: .75; } .hlBoot-title { font-weight: 950; letter-spacing: .6px; margin: 12px 0 8px; color: rgba(255,255,255,.96); text-shadow: 0 16px 28px rgba(0,0,0,.65); } .hlBoot-sub { margin: 0 0 14px; color: rgba(255,255,255,.72); } .hlBoot-ring { width: 70px; height: 70px; margin: 14px auto 8px; border-radius: 999px; border: 2px solid rgba(255,255,255,.10); border-top-color: rgba(168,85,247,.75); border-right-color: rgba(34,211,238,.55); animation: hlSpin 1s linear infinite; box-shadow: 0 0 30px rgba(168,85,247,.10); } @keyframes hlSpin { to { transform: rotate(360deg); } } .hlLangBtns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; } .hlLangBtn { appearance: none; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: rgba(255,255,255,.90); border-radius: 14px; padding: 10px 14px; font-weight: 900; cursor: pointer; transition: transform .14s var(--hl-ease), box-shadow .14s var(--hl-ease), border-color .14s var(--hl-ease); } .hlLangBtn:hover { transform: translateY(-2px); border-color: rgba(34,211,238,.22); box-shadow: 0 18px 50px rgba(0,0,0,.45); } .hlLangBtn.primary { background: linear-gradient(90deg, rgba(168,85,247,.95), rgba(34,211,238,.85)); color: #0b0f16; border: 0; } .hlBoot-note { margin-top: 10px; font-size: 12.5px; color: rgba(255,255,255,.58); } /* ============================================================ 18) RESET PASSWORD ============================================================ */ body[route^="reset"] { background: #070a12; color: rgba(255,255,255,.92); } body[route^="reset"] .form-control { width: 100%; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 12px 14px; color: rgba(255,255,255,.92); } body[route^="reset"] .form-control::placeholder { color: rgba(255,255,255,.45); } body[route^="reset"] .button { width: 100%; margin-top: 8px; padding: 12px 16px; font-weight: 900; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(90deg, #a855f7, #22d3ee); color: #0b0f16; box-shadow: 0 10px 26px rgba(0,0,0,.45); cursor: pointer; } /* ============================================================ 19) POLISHES UX EXTRA ============================================================ */ /* Textarea/input global */ textarea, input, select { color: var(--hl-text); } /* Ícono del admin burger protegido */ body.App--admin .AdminNav .hamburger svg, body.App--admin .AdminNav .NavigationDrawer-toggle svg, body.App--admin .AdminNav button svg { display: inline-block !important; visibility: visible !important; } /* ============================================================ 20) ACCESIBILIDAD & RESPONSIVE ============================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } .hlBoot-ring { animation: none !important; } } @media (max-width: 680px) { .IndexPage .App-content, .TagsPage .App-content, .TagPage .App-content, .DiscussionPage .App-content { padding: 12px 10px 20px !important; } } /* ============================================================ 21) COMPOSER DOCK — IMPLEMENTACIÓN FINAL CONSOLIDADA (Reemplaza todos los bloques conflictivos anteriores) ============================================================ */ /* ── Estado oculto (controlado por Flarum JS) ── */ .Composer[style*="display: none"], .Composer[style*="display:none"] { display: none !important; } /* ── Dock base ── */ .Composer { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; z-index: 9990 !important; margin: 0 !important; padding: 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: 72vh !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; background: radial-gradient(1200px 160px at 50% 0%, rgba(168,85,247,.07), transparent 65%), linear-gradient(180deg, rgba(10,14,22,.97), rgba(8,12,18,.95)) !important; border-top: 1px solid rgba(168,85,247,.18) !important; backdrop-filter: blur(18px) !important; box-shadow: 0 -20px 60px rgba(0,0,0,.55) !important; cursor: default !important; resize: none !important; } /* ── Minimizado ── */ .Composer.minimized, .Composer--minimized { max-height: 52px !important; height: 52px !important; overflow: hidden !important; } .Composer.minimized .ComposerBody, .Composer--minimized .ComposerBody, .Composer.minimized .TextEditor-controls, .Composer--minimized .TextEditor-controls { display: none !important; } /* ── Full screen ── */ .Composer.Composer--fullScreen, .Composer--fullScreen { max-height: 100vh !important; height: 100vh !important; overflow-y: auto !important; } /* ── Body del dock (avatar | columna de contenido) ── */ .Composer .ComposerBody { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 14px !important; padding: 14px 20px !important; box-sizing: border-box !important; background: transparent !important; border: 0 !important; min-height: 0 !important; overflow: hidden !important; width: 100% !important; max-width: 1420px !important; margin: 0 auto !important; flex: 0 0 auto !important; position: relative !important; } /* ── Avatar ── */ .Composer .ComposerBody-avatar { flex: 0 0 44px !important; width: 44px !important; height: 44px !important; border-radius: 14px !important; align-self: flex-start !important; margin: 0 !important; box-shadow: 0 8px 20px rgba(0,0,0,.40) !important; overflow: hidden !important; } /* ── Columna de contenido ── */ .Composer .ComposerBody-content { flex: 1 1 auto !important; min-width: 0 !important; width: 100% !important; display: flex !important; flex-direction: column !important; gap: 8px !important; overflow: hidden !important; box-sizing: border-box !important; } /* ── Header — chip "↩ START HERE..." ── */ .Composer .ComposerBody-header { flex: 0 0 auto !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; padding: 0 72px 0 0 !important; margin: 0 !important; list-style: none !important; width: 100% !important; box-sizing: border-box !important; } .Composer .ComposerBody-header li { margin: 0 !important; padding: 0 !important; list-style: none !important; } .Composer .ComposerBody-header a, .Composer .ComposerBody-header button, .Composer .ComposerBody-header h3, .Composer .ComposerBody-header span { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 7px 16px !important; background: rgba(168,85,247,.12) !important; border: 1px solid rgba(168,85,247,.26) !important; border-radius: 999px !important; color: rgba(255,255,255,.90) !important; font-size: 12px !important; font-weight: 850 !important; letter-spacing: .3px !important; text-decoration: none !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 640px !important; margin: 0 !important; box-sizing: border-box !important; } /* ── Wrapper del editor ── */ .Composer .ComposerBody-editor, .Composer .TextEditor, .Composer .TextEditor-editorContainer { flex: 1 1 auto !important; min-height: 0 !important; width: 100% !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: hidden !important; } /* ── Textarea ── */ .Composer textarea.FormControl, .Composer .TextEditor-editor { flex: 1 1 auto !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; min-height: 80px !important; max-height: 120px !important; resize: none !important; padding: 12px 14px !important; background: rgba(255,255,255,.055) !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 14px !important; color: rgba(255,255,255,.92) !important; font-size: 14px !important; line-height: 1.6 !important; font-family: inherit !important; outline: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important; transition: border-color .18s ease, box-shadow .18s ease !important; overflow-y: auto !important; } .Composer textarea.FormControl::placeholder, .Composer .TextEditor-editor::placeholder { color: rgba(255,255,255,.45) !important; font-style: italic !important; } .Composer textarea.FormControl:focus, .Composer .TextEditor-editor:focus { border-color: rgba(34,211,238,.35) !important; box-shadow: 0 0 0 3px rgba(34,211,238,.10), inset 0 1px 0 rgba(255,255,255,.04) !important; } /* Fullscreen: textarea expandida */ .Composer--fullScreen .TextEditor-editor, .Composer--fullScreen .ComposerBody-editor textarea { min-height: 360px !important; max-height: none !important; resize: vertical !important; } /* ── Toolbar ── */ .Composer .TextEditor-controls, .Composer .Composer-footer { flex: 0 0 auto !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 5px !important; padding: 8px 20px 10px !important; border-top: 1px solid rgba(168,85,247,.10) !important; list-style: none !important; margin: 0 !important; overflow: visible !important; box-sizing: border-box !important; width: 100% !important; max-width: 1420px !important; align-self: center !important; } .Composer .MarkdownToolbar, .Composer .TextEditor-toolbar { display: inline-flex !important; flex-wrap: nowrap !important; gap: 5px !important; list-style: none !important; margin: 0 !important; padding: 0 !important; } /* Botones de la toolbar */ .Composer .MarkdownToolbar .Button, .Composer .TextEditor-toolbar .Button, .Composer .TextEditor-controls li:not(.item-submit) .Button { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; min-width: 32px !important; min-height: 32px !important; padding: 6px 8px !important; background: rgba(255,255,255,.05) !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 8px !important; color: rgba(255,255,255,.80) !important; font-size: 13px !important; cursor: pointer !important; flex-shrink: 0 !important; transition: all .12s ease !important; } .Composer .MarkdownToolbar .Button:hover, .Composer .TextEditor-toolbar .Button:hover, .Composer .TextEditor-controls li:not(.item-submit) .Button:hover { background: rgba(34,211,238,.09) !important; border-color: rgba(34,211,238,.20) !important; color: rgba(255,255,255,.96) !important; transform: translateY(-1px) !important; } /* ── Botón Submit (POST REPLY / POST DISCUSSION) ── */ .Composer .TextEditor-controls .item-submit, .Composer .Composer-footer .item-submit { margin-left: auto !important; flex-shrink: 0 !important; } .Composer .item-submit .Button--primary { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; padding: 9px 20px !important; white-space: nowrap !important; background: linear-gradient(90deg, rgba(168,85,247,.97), rgba(34,211,238,.90)) !important; border: 0 !important; border-radius: 11px !important; color: #0b0f16 !important; font-weight: 900 !important; font-size: 12px !important; letter-spacing: .5px !important; text-transform: uppercase !important; cursor: pointer !important; box-shadow: 0 10px 30px rgba(168,85,247,.22) !important; transition: all .14s ease !important; min-width: 110px !important; } .Composer .item-submit .Button--primary:hover { transform: translateY(-1px) !important; filter: brightness(1.06) !important; box-shadow: 0 16px 45px rgba(168,85,247,.30) !important; } /* ── Botones de control (−, ⬜, ✕) ── */ .Composer .Composer-controls { position: absolute !important; top: 14px !important; right: 16px !important; display: flex !important; gap: 6px !important; z-index: 20 !important; } .Composer .Composer-controls .Button, .Composer .Composer-controlButton { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 28px !important; background: rgba(0,0,0,.35) !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 8px !important; color: rgba(255,255,255,.72) !important; cursor: pointer !important; transition: all .12s ease !important; box-sizing: border-box !important; } .Composer .Composer-controls .Button:hover, .Composer .Composer-controlButton:hover { background: rgba(168,85,247,.18) !important; border-color: rgba(168,85,247,.30) !important; color: rgba(255,255,255,.96) !important; transform: translateY(-1px) !important; } /* ── Ocultar botón fullscreen (⬜) del Composer ── */ .Composer .Composer-controls .item-fullScreen, .Composer-controls li.item-fullScreen { display: none !important; } /* ── Handle y bordes fantasma — ocultos ── */ .Composer-handle, .ComposerHandle, .Composer .handle, .Composer-dragHandle, .Composer-edge, .ComposerEdge { display: none !important; height: 0 !important; pointer-events: none !important; } /* ── Padding del App-content ── */ .App-content { padding-bottom: 72px !important; } body.composerOpen .App-content { padding-bottom: 310px !important; } /* ── Responsive ── */ @media (max-width: 680px) { .Composer .ComposerBody { padding: 10px 12px !important; gap: 10px !important; } .Composer .ComposerBody-avatar { flex: 0 0 36px !important; width: 36px !important; height: 36px !important; border-radius: 10px !important; } .Composer textarea.FormControl, .Composer .TextEditor-editor { font-size: 16px !important; min-height: 60px !important; max-height: 90px !important; } .Composer .TextEditor-controls, .Composer .Composer-footer { padding: 6px 12px 8px !important; gap: 4px !important; } } /* ============================================================ 22) POST — overflow y botones de acción ============================================================ */ /* Permitir que los action buttons no queden cortados */ .Post, .CommentPost { overflow: visible !important; } .Post-content, .Post-body { overflow: visible !important; } /* Contenedor aside */ .Post-actions { margin-top: 12px !important; padding: 10px 0 4px !important; border-top: 1px solid rgba(255,255,255,.06) !important; overflow: visible !important; position: relative !important; z-index: 5 !important; width: 100% !important; } /* El