/* * xGunZ — Light + Neon Green Theme * Overrides :root variables and component rules when [data-theme="light"] is on . * * Variable strategy: --clr-red / --clr-red-bright / --clr-red-glow / --glow-red are * remapped to neon green values so that ALL existing component rules automatically * pick up green in light mode — no component rule changes required in style.css. */ /* ========================================================= VARIABLE OVERRIDES ========================================================= */ [data-theme="light"] { --clr-bg: #f0f4f0; --clr-panel: #ffffff; --clr-panel-edge: #f4faf4; --clr-surface: #f4faf4; /* Remap red → green so all components flip without rule changes */ --clr-red: #2d9e2d; --clr-red-bright: #39ff14; --clr-red-glow: rgba(57,255,20,0.35); --glow-red: 0 0 12px rgba(57,255,20,0.35), 0 0 30px rgba(57,255,20,0.15); --clr-blue: #2d9e2d; /* blue accents → darker green */ --clr-text: #1a2a1a; --clr-text-dim: #7a9a7a; --clr-text-bright: #0d1a0d; --clr-border: rgba(45,158,45,0.25); --clr-border-red: rgba(57,255,20,0.4); } /* ========================================================= BODY — remove dark scanline texture ========================================================= */ [data-theme="light"] html { background: var(--clr-bg); } [data-theme="light"] .hero-content::before { background: linear-gradient( 105deg, rgba(240,244,240,0.92) 0%, rgba(240,244,240,0.70) 60%, transparent 100% ); } [data-theme="light"] body { background-color: var(--clr-bg); background-image: none; color: var(--clr-text); } /* ========================================================= SCROLLBAR ========================================================= */ [data-theme="light"] ::-webkit-scrollbar-track { background: #e0ede0; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: #2d9e2d; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #39ff14; } /* ========================================================= LINKS ========================================================= */ [data-theme="light"] a { color: #5a7a5a; } [data-theme="light"] a:hover { color: #1a2a1a !important; } /* ========================================================= INPUTS ========================================================= */ [data-theme="light"] input[type=text], [data-theme="light"] input[type=password], [data-theme="light"] input[type=number] { background: #f8fff8; border: 1px solid #c8e6c9; color: #1a2a1a; } [data-theme="light"] input[type=text]:focus, [data-theme="light"] input[type=password]:focus, [data-theme="light"] input[type=number]:focus { border-color: #39ff14; box-shadow: 0 0 8px rgba(57,255,20,0.3); } /* ========================================================= GLOBAL TOP BAR — stays dark, anchors the page ========================================================= */ [data-theme="light"] .global-top-bar { background: #1a2a1a; border-bottom: 1px solid rgba(57,255,20,0.15); } [data-theme="light"] .global-top-bar a { color: #5a7a5a !important; } [data-theme="light"] .global-top-bar a:hover { color: #39ff14 !important; } [data-theme="light"] .global-top-bar a.logout { color: #39ff14 !important; } [data-theme="light"] .global-top-bar-separator { color: #2d4a2d; } [data-theme="light"] .webengine-language-switcher li { background: #2d4a2d; } /* ========================================================= NAVBAR ========================================================= */ [data-theme="light"] #navbar { background: rgba(255,255,255,0.96); border-bottom: 2px solid #39ff14; box-shadow: 0 2px 12px rgba(57,255,20,0.12); } [data-theme="light"] .nav-logo { border-right-color: rgba(57,255,20,0.4); background: linear-gradient(90deg, rgba(57,255,20,0.12) 0%, transparent 100%); } [data-theme="light"] .hero-form-card { background: rgba(255,255,255,0.92); border-color: rgba(57,255,20,0.4); } [data-theme="light"] .hero-form-card input { background: rgba(0,0,0,0.04); border-color: rgba(57,255,20,0.35); color: #1a2a1a; } [data-theme="light"] .hero-form-card input::placeholder { color: #7a9a7a; } [data-theme="light"] .hero-form-card button[type="submit"] { color: #fff; background: #2d9e2d; } [data-theme="light"] .hero-form-links a { color: #7a9a7a; } [data-theme="light"] .reg-field-group label { color: #2d9e2d; } [data-theme="light"] .reg-tos { color: #7a9a7a; } [data-theme="light"] .hero-form-alert--error { background: rgba(200,50,50,0.08); color: #c0392b; border-color: #c0392b; } [data-theme="light"] #navbar.scrolled { background: rgba(255,255,255,1); box-shadow: 0 2px 20px rgba(57,255,20,0.22); } [data-theme="light"] #navbar ul li a { color: #444 !important; } [data-theme="light"] #navbar ul li a::after { background: #39ff14; box-shadow: 0 0 8px rgba(57,255,20,0.5); } [data-theme="light"] #navbar ul li a:hover, [data-theme="light"] #navbar ul li a:active, [data-theme="light"] #navbar ul li a:focus { color: #1a2a1a !important; text-shadow: 0 0 8px rgba(57,255,20,0.4); } /* ========================================================= CONTAINER ========================================================= */ [data-theme="light"] #container { background: var(--clr-bg); border-color: #d0e8d0; } /* ========================================================= HEADER LOGO ========================================================= */ [data-theme="light"] .webengine-mu-logo { filter: drop-shadow(0 0 8px rgba(57,255,20,0.5)); } /* ========================================================= HEADER INFO ========================================================= */ [data-theme="light"] .header-info-container .header-info { background: rgba(255,255,255,0.9); border-color: #d0e8d0; color: #1a2a1a; } [data-theme="light"] .header-info-container .header-info .header-info-block { color: #7a9a7a; } [data-theme="light"] .header-info-container .header-info .header-info-block #tServerTime, [data-theme="light"] .header-info-container .header-info .header-info-block #tLocalTime { color: #1a2a1a; } [data-theme="light"] .header-info-container .header-info .header-info-block #tServerDate, [data-theme="light"] .header-info-container .header-info .header-info-block #tLocalDate { color: #7a9a7a; } [data-theme="light"] .header-info-container .header-info .header-info-block .online-count { color: #2d9e2d; } /* Online bar */ [data-theme="light"] .webengine-online-bar { background: #e0ede0; border-color: #c8e6c9; } [data-theme="light"] .webengine-online-bar .webengine-online-bar-progress { background: linear-gradient(90deg, #2d9e2d, #39ff14); box-shadow: 0 0 8px rgba(57,255,20,0.4); } /* ========================================================= HERO SECTION ========================================================= */ [data-theme="light"] .hero-section { background: linear-gradient(135deg, #eef4ee 0%, #f8fff8 50%, #eef4ee 100%); } [data-theme="light"] .hero-section::before { background: linear-gradient(180deg, transparent, rgba(57,255,20,0.3), transparent); } [data-theme="light"] .hero-section::after { background: linear-gradient(180deg, transparent, rgba(57,255,20,0.12), transparent); } [data-theme="light"] .hero-diagonal { background: linear-gradient(135deg, transparent 40%, rgba(57,255,20,0.04) 100%); } [data-theme="light"] .hero-render { filter: drop-shadow(-20px 0 40px rgba(57,255,20,0.2)); } [data-theme="light"] .hero-logo img { filter: drop-shadow(0 0 12px rgba(57,255,20,0.5)) drop-shadow(0 0 30px rgba(57,255,20,0.2)); } [data-theme="light"] .hero-tagline { color: #5a8a5a; } [data-theme="light"] .hero-stat { background: rgba(255,255,255,0.85); border-color: #d0e8d0; border-left-color: #39ff14; } [data-theme="light"] .hero-stat-value { color: #1a2a1a; } [data-theme="light"] .hero-stat-label { color: #7a9a7a; } /* Primary CTA: inverted — neon green bg, dark text */ [data-theme="light"] .btn-hero-primary { background: #39ff14; color: #1a2a1a !important; text-shadow: none; box-shadow: 0 0 12px rgba(57,255,20,0.3); } [data-theme="light"] .btn-hero-primary:hover { background: #2dcc10 !important; color: #1a2a1a !important; } [data-theme="light"] .btn-hero-secondary { color: #1a6b0a !important; border-color: #2d9e2d; background: rgba(45,158,45,0.10); text-shadow: none; } [data-theme="light"] .btn-hero-secondary:hover { background: rgba(45,158,45,0.22) !important; color: #0d3d05 !important; } [data-theme="light"] .btn-hero-ghost { color: #1a2a1a !important; border-color: rgba(26,42,26,0.5); background: rgba(255,255,255,0.55); } [data-theme="light"] .btn-hero-ghost:hover { background: rgba(255,255,255,0.85) !important; border-color: #1a2a1a; color: #000 !important; } /* ========================================================= CLASSES STRIP ========================================================= */ [data-theme="light"] .classes-strip { background: #fff; border-color: #d0e8d0; } [data-theme="light"] .strip-title { color: #7a9a7a; } [data-theme="light"] .strip-title::before, [data-theme="light"] .strip-title::after { color: #2d9e2d; } [data-theme="light"] .class-card { background: #f4faf4; border-color: #d0e8d0; border-left-color: #39ff14; } [data-theme="light"] .class-card:hover { border-color: #39ff14; } [data-theme="light"] .class-card-name { background: rgba(244,250,244,0.95); color: #1a2a1a; } /* ========================================================= PAGE TITLE ========================================================= */ [data-theme="light"] .page-title { color: #2d9e2d; text-shadow: none; } /* ========================================================= PANELS (sidebar + general + news) ========================================================= */ [data-theme="light"] .panel-sidebar, [data-theme="light"] .panel-general, [data-theme="light"] .panel-news { background: #fff; border-color: #d0e8d0; border-left-color: #39ff14; } [data-theme="light"] .panel-sidebar > .panel-heading, [data-theme="light"] .panel-general > .panel-heading, [data-theme="light"] .panel-news .panel-heading { background: #f4faf4; border-bottom-color: #d0e8d0; } [data-theme="light"] .panel-sidebar > .panel-heading .panel-title { color: #2d9e2d; } [data-theme="light"] .panel-sidebar > .panel-body, [data-theme="light"] .panel-general > .panel-body, [data-theme="light"] .panel-news .panel-body { color: #1a2a1a; } [data-theme="light"] .panel-news .panel-title { color: #1a2a1a; } [data-theme="light"] .panel-news .panel-footer { background: #fff; border-top-color: #d0e8d0; color: #7a9a7a; } [data-theme="light"] .panel-body .panel-title { color: #7a9a7a; border-bottom-color: #d0e8d0; } /* ========================================================= RANKINGS TABLE ========================================================= */ [data-theme="light"] .rankings-table tr td { background: #fff; border-bottom-color: #d0e8d0; color: #1a2a1a; } [data-theme="light"] .rankings-table tr:nth-child(even) td { background: #f4faf4; } [data-theme="light"] .rankings-table tr:hover td { background: rgba(57,255,20,0.06); } [data-theme="light"] .rankings-table-place { color: #7a9a7a; } [data-theme="light"] .rankings_menu a { background: #fff; border-color: #d0e8d0; color: #7a9a7a; } [data-theme="light"] .rankings_menu a:hover { border-color: #39ff14; color: #1a2a1a !important; } [data-theme="light"] .rankings_menu a.active { border-color: #39ff14; border-left-color: #39ff14; color: #1a2a1a; } [data-theme="light"] .rankings_menu span { color: #7a9a7a; } [data-theme="light"] .rankings-update-time { color: #b0c8b0; } /* ========================================================= SIDEBAR LOGIN FORM ========================================================= */ [data-theme="light"] .form-login-dark .form-control { background: #f8fff8; border-color: #c8e6c9; color: #1a2a1a; } [data-theme="light"] .form-login-dark .form-control:focus { border-color: #39ff14; box-shadow: 0 0 8px rgba(57,255,20,0.3); background: #fff; } [data-theme="light"] .form-login-dark .form-control::placeholder { color: #b0c8b0; } /* ========================================================= DOWNLOAD BANNER ========================================================= */ [data-theme="light"] .sidebar-banner img { filter: saturate(1); } /* ========================================================= USERCP PANEL ========================================================= */ [data-theme="light"] .panel-usercp { background: linear-gradient(135deg, rgba(240,244,240,0.95), rgba(248,255,248,0.95)); } [data-theme="light"] .panel-usercp ul li a { color: #1a2a1a !important; } [data-theme="light"] .panel-usercp ul li a:hover { color: #2d9e2d !important; } /* ========================================================= MY ACCOUNT ========================================================= */ [data-theme="light"] .myaccount-table { background: #fff; border-color: #d0e8d0; } [data-theme="light"] .myaccount-table tr td:first-child { color: #7a9a7a; } [data-theme="light"] .myaccount-table tr td { border-bottom-color: #d0e8d0; color: #1a2a1a; } [data-theme="light"] .myaccount-character-block { background: #f4faf4; border-color: #d0e8d0; } [data-theme="light"] .myaccount-character-block-level { background: rgba(26,42,26,0.7); color: #39ff14; } [data-theme="light"] .myaccount-character-name a { color: #1a2a1a; } /* ========================================================= GENERAL TABLE ========================================================= */ [data-theme="light"] .general-table-ui { background: #fff; border-color: #d0e8d0; } [data-theme="light"] .general-table-ui tr td { color: #1a2a1a; } [data-theme="light"] .general-table-ui tr:first-child td { color: #2d9e2d; } [data-theme="light"] .general-table-ui tr:nth-child(2n+2) td { background: #f4faf4; } /* ========================================================= DOWNLOADS / ADD STATS ========================================================= */ [data-theme="light"] .panel-downloads, [data-theme="light"] .panel-addstats { background: #fff; border-color: #d0e8d0; border-left-color: #39ff14; color: #1a2a1a; } [data-theme="light"] .panel-addstats .character-name { color: #1a2a1a; border-bottom-color: #d0e8d0; } /* ========================================================= FOOTER LOGO — footer sempre escuro, sempre usa logo-02 ========================================================= */ .footer-logo img.nav-logo-light { display: none !important; } .footer-logo img.nav-logo-dark { display: block !important; } [data-theme="light"] .footer-logo img.nav-logo-light { display: none !important; } [data-theme="light"] .footer-logo img.nav-logo-dark { display: block !important; } /* ========================================================= FOOTER — stays dark in both themes ========================================================= */ [data-theme="light"] .footer { background: #1a2a1a; border-top-color: rgba(57,255,20,0.4); color: #7a9a7a; } [data-theme="light"] .footer-inner { color: #7a9a7a; } [data-theme="light"] .footer-links a { color: #7a9a7a; } [data-theme="light"] .footer-links a:hover { color: #39ff14 !important; } [data-theme="light"] .footer-divider { background: rgba(57,255,20,0.15); } [data-theme="light"] .footer-bottom { color: #7a9a7a; } [data-theme="light"] .footer-sep { color: #39ff14; } /* ========================================================= BOOTSTRAP OVERRIDES in light theme ========================================================= */ [data-theme="light"] .form-control { background: #f8fff8; border-color: #c8e6c9; color: #1a2a1a; } [data-theme="light"] .form-control:focus { border-color: #39ff14; box-shadow: 0 0 8px rgba(57,255,20,0.3); color: #1a2a1a; } [data-theme="light"] .thumbnail { background-color: #fff; border-color: #d0e8d0; } [data-theme="light"] a.thumbnail:hover, [data-theme="light"] a.thumbnail:focus { border-color: #39ff14; box-shadow: var(--glow-red); } [data-theme="light"] .btn-primary { color: #2d9e2d; border-color: #2d9e2d; } [data-theme="light"] .btn-primary:hover, [data-theme="light"] .btn-primary:focus, [data-theme="light"] .btn-primary:active { color: #1a2a1a !important; background-color: #39ff14 !important; border-color: #39ff14 !important; } [data-theme="light"] .btn-default { color: #1a2a1a; background-color: #f4faf4; border-color: #d0e8d0; } [data-theme="light"] .btn-default:hover { border-color: #39ff14; } [data-theme="light"] .panel { background: #fff; border-color: #d0e8d0; } [data-theme="light"] .panel-heading { background: #f4faf4; border-bottom-color: #d0e8d0; } [data-theme="light"] .panel-title { color: #1a2a1a; } [data-theme="light"] .panel-body { color: #1a2a1a; } [data-theme="light"] .panel-footer { background: #f4faf4; border-top-color: #d0e8d0; color: #7a9a7a; } [data-theme="light"] .panel .table > tbody > tr > td { border-bottom-color: #d0e8d0 !important; color: #1a2a1a; } [data-theme="light"] .panel .table > thead > tr > th { border-bottom-color: #39ff14 !important; color: #7a9a7a; } [data-theme="light"] .alert-danger { background: rgba(45,158,45,0.08); border-color: #2d9e2d; color: #1a5c1a; } [data-theme="light"] .well { background: #f4faf4; border-color: #d0e8d0; color: #1a2a1a; } [data-theme="light"] .input-group-addon { background: #f4faf4; border-color: #c8e6c9; color: #7a9a7a; } [data-theme="light"] select.form-control { background: #fff; color: #1a2a1a; } [data-theme="light"] select.form-control option { background: #fff; color: #1a2a1a; } /* ========================================================= LANGUAGE SELECTOR Always visible in navbar, both themes. ========================================================= */ .lang-select-wrapper { display: flex; align-items: center; padding: 0 10px; flex-shrink: 0; } .lang-select { background: rgba(7,7,16,0.7); color: var(--clr-text); border: 1px solid var(--clr-border-red); font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 1px; padding: 5px 8px; cursor: pointer; outline: none; appearance: none; -webkit-appearance: none; border-radius: 0; transition: border-color .2s, box-shadow .2s; min-width: 80px; } .lang-select:hover, .lang-select:focus { border-color: var(--clr-red-bright); box-shadow: 0 0 6px var(--clr-red-glow); } .lang-select option { background: #0d0d1e; color: var(--clr-text-bright); } [data-theme="light"] .lang-select { background: rgba(255,255,255,0.85); color: #1a2a1a; border-color: rgba(57,255,20,0.4); } [data-theme="light"] .lang-select option { background: #fff; color: #1a2a1a; } /* ========================================================= THEME TOGGLE BUTTON Always visible in navbar, both themes. ========================================================= */ .theme-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 0 12px; margin-left: auto; user-select: none; flex-shrink: 0; } .theme-toggle-icon { font-size: 13px; line-height: 1; } .theme-toggle-track { width: 38px; height: 20px; background: var(--clr-red); border-radius: 10px; position: relative; transition: background .3s, box-shadow .3s; flex-shrink: 0; } [data-theme="light"] .theme-toggle-track { background: #39ff14; box-shadow: 0 0 8px rgba(57,255,20,0.5); } .theme-toggle-thumb { width: 16px; height: 16px; background: #fff; border-radius: 50%; position: absolute; left: 2px; top: 2px; transition: transform .3s, background .3s; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } [data-theme="light"] .theme-toggle-thumb { transform: translateX(18px); background: #1a2a1a; } /* ========================================================= RESPONSIVE — oculta lang/tema da navbar no mobile; reexibe dentro do menu aberto (navbar.menu-open) ========================================================= */ @media (max-width: 920px) { .lang-select-wrapper { display: none; } .theme-toggle { display: none; } #navbar.menu-open .lang-select-wrapper { display: flex; } #navbar.menu-open .theme-toggle { display: flex; } /* Menu mobile acompanha o light theme */ [data-theme="light"] #navbar ul { background: rgba(255,255,255,0.98); border-top-color: #d0e8d0; } [data-theme="light"] #navbar ul li a { color: #1a2a1a !important; border-bottom-color: #d0e8d0; } [data-theme="light"] #navbar ul li a:hover { color: #2d9e2d !important; background: rgba(57,255,20,0.05); } [data-theme="light"] #navbar.menu-open .lang-select-wrapper { background: rgba(255,255,255,0.98); border-top-color: #d0e8d0; } [data-theme="light"] #navbar.menu-open .theme-toggle { background: rgba(255,255,255,0.98); border-top-color: #d0e8d0; } }