/* tsg_hex — HEX theme picker (client assets) */ /* IMPORTANT: Theme must be PER-USER (localStorage). We only recolor the UI when JS adds `.tsg-hex-enabled` on . Without this class, the site stays 100% original. */ .tsg-hex-enabled { --site-accent: #ff7591; --site-accent-2: #fe9544; --site-accent-rgb: 255, 117, 145; --site-accent-contrast: #ffffff; --accent-10: rgba(var(--site-accent-rgb), 0.10); --accent-18: rgba(var(--site-accent-rgb), 0.18); --accent-25: rgba(var(--site-accent-rgb), 0.25); --accent-35: rgba(var(--site-accent-rgb), 0.35); --accent-55: rgba(var(--site-accent-rgb), 0.55); --GLOBAL_STRONG: radial-gradient(100% 100% at 50% 0, var(--site-accent) 0, var(--site-accent-2) 170%); --GLOBAL_SOFT: radial-gradient(100% 100% at 50% 0, var(--accent-25) 0, rgba(0, 0, 0, 0) 170%); --GLOBAL_BG: radial-gradient(120% 120% at 50% 0, var(--accent-18) 0, rgba(0, 0, 0, 0) 170%); --GLOBAL: var(--GLOBAL_STRONG); /* Common vars used by many templates */ --primary-color: var(--site-accent); --primary-hover: var(--site-accent-2); --primary-color-rgb: var(--site-accent-rgb); } /* Не меняем фон всего сайта — только UI элементы */ .tsg-hex-enabled .last_activity_info { background: linear-gradient(24deg, var(--accent-18) 30%, var(--accent-35) 100%) !important; } .tsg-hex-enabled .circle_rules { background: var(--accent-18) !important; } .tsg-hex-enabled .sb_description i { background: var(--accent-35) !important; } .tsg-hex-enabled .btn-primary, .tsg-hex-enabled .badge-primary, .tsg-hex-enabled .bg-primary { background: var(--GLOBAL_STRONG) !important; border-color: var(--site-accent) !important; color: var(--site-accent-contrast) !important; } .tsg-hex-enabled .btn-primary *, .tsg-hex-enabled .badge-primary * { color: var(--site-accent-contrast) !important; } /* Make icons readable on any accent (only when theme enabled) */ .tsg-hex-enabled i[class^="bx"], .tsg-hex-enabled i[class*=" bx-"], .tsg-hex-enabled i[class^="fa"], .tsg-hex-enabled i[class*=" fa-"] { text-shadow: rgba(0, 0, 0, 0.35) 0px 1px 6px; } .tsg-hex-enabled .text-primary, .tsg-hex-enabled a.text-primary:hover, .tsg-hex-enabled a.text-primary:focus { color: var(--site-accent) !important; } .tsg-hex-enabled .btn_long_nav, .tsg-hex-enabled .navigation_profile .bxs-door-open { color: var(--site-accent-contrast) !important; text-shadow: rgba(0, 0, 0, 0.35) 1px 0 7px; } .tsg-hex-enabled .circleuved { background: var(--GLOBAL_STRONG) !important; color: var(--site-accent-contrast) !important; text-shadow: rgba(0, 0, 0, 0.55) 0px 0 5px; } .tsg-hex-enabled .wapper .header ul.user-menu > li.balance i { background: var(--GLOBAL_STRONG) !important; color: var(--site-accent-contrast) !important; } .tsg-hex-enabled .referal_block_info i, .tsg-hex-enabled .info_block_names i, .tsg-hex-enabled .stable i { background: var(--GLOBAL_SOFT) !important; color: var(--site-accent) !important; } .tsg-hex-enabled .stable { background: linear-gradient(4deg, rgba(var(--site-accent-rgb), 0.16) 0%, rgba(var(--site-accent-rgb), 0.06) 55%) !important; color: rgba(255, 255, 255, 0.85) !important; } .tsg-hex-enabled .circle_rules i { background: var(--GLOBAL_STRONG) !important; color: var(--site-accent-contrast) !important; } /* Preloader (only spinner circle, no background changes) */ .tsg-hex-enabled #loader, .tsg-hex-enabled #loader:before, .tsg-hex-enabled #loader:after { border-top-color: var(--site-accent) !important; } .tsg-hex-enabled .slide_block { position: relative; overflow: hidden; } .tsg-hex-enabled .slide_block::before { content: ""; position: absolute; inset: 0; background: var(--GLOBAL_SOFT); opacity: 0.95; pointer-events: none; } .tsg-hex-enabled .slide_block > * { position: relative; z-index: 1; } .tsg-hex-enabled .slide_block:hover .sb_description { background-color: rgba(var(--site-accent-rgb), 0.28) !important; color: var(--site-accent-contrast) !important; } .tsg-hex-enabled .slide_block:hover .sb_description i { background: rgba(var(--site-accent-rgb), 0.40) !important; color: var(--site-accent-contrast) !important; } /* ===== Extra UI recolor (SolutionTEST) ===== */ /* "Перейти" button on slider cards (always tinted, not only on hover) */ .tsg-hex-enabled .sb_description { background: rgba(var(--site-accent-rgb), 0.20) !important; border: 1px solid rgba(var(--site-accent-rgb), 0.30) !important; color: rgba(255, 255, 255, 0.92) !important; } .tsg-hex-enabled .sb_description i { background: rgba(var(--site-accent-rgb), 0.30) !important; color: rgba(255, 255, 255, 0.96) !important; } /* Buttons near slider (banlist/mutes) + their container */ .tsg-hex-enabled .left_btns { background: linear-gradient(49deg, rgba(var(--site-accent-rgb), 0.14) 30%, rgba(var(--site-accent-rgb), 0.26) 100%) !important; border: 1px solid rgba(var(--site-accent-rgb), 0.22) !important; } .tsg-hex-enabled .border_absolute { /* This is just a spacer/overlay — keep it transparent */ background: transparent !important; } .tsg-hex-enabled .bans_btn_slider, .tsg-hex-enabled .muts_btn_slider { background: var(--GLOBAL_STRONG) !important; color: var(--site-accent-contrast) !important; text-shadow: rgba(0, 0, 0, 0.55) 1px 0 12px; } .tsg-hex-enabled .bans_btn_slider:hover, .tsg-hex-enabled .muts_btn_slider:hover { opacity: 0.75; } /* Headings icons: "Последние новости/события" etc */ .tsg-hex-enabled .double_heading i { background: var(--GLOBAL_STRONG) !important; color: var(--site-accent-contrast) !important; box-shadow: 0 10px 25px rgba(var(--site-accent-rgb), 0.18) !important; } .tsg-hex-enabled .double_heading i:hover { opacity: 0.9; } .tsg-hex-enabled .btn_heading { background: var(--GLOBAL_STRONG) !important; color: var(--site-accent-contrast) !important; text-shadow: rgba(0, 0, 0, 0.45) 1px 0 8px; } .tsg-hex-enabled .btn_heading:hover { opacity: 0.85; color: var(--site-accent-contrast) !important; } /* Users / widgets icons */ .tsg-hex-enabled .flex_top_usr_i i, .tsg-hex-enabled .flex_top_setting i, .tsg-hex-enabled .stats_icon { background: var(--GLOBAL_STRONG) !important; color: var(--site-accent-contrast) !important; text-shadow: rgba(0, 0, 0, 0.45) 1px 0 8px; } /* "Users online" / similar icon pills */ .tsg-hex-enabled .visit_users_online i, .tsg-hex-enabled .visit_users_online1 i { background: rgba(var(--site-accent-rgb), 0.26) !important; color: var(--site-accent-contrast) !important; } /* "Последние события" right side: last activity info icon */ .tsg-hex-enabled .last_activity_info i { background: rgba(var(--site-accent-rgb), 0.22) !important; color: var(--site-accent-contrast) !important; padding: 8px; display: inline-flex; align-items: center; justify-content: center; } /* Footer social icons (vk/tg/ds + watermark) */ .tsg-hex-enabled .icon-vk, .tsg-hex-enabled .icon-tg, .tsg-hex-enabled .icon-ds, .tsg-hex-enabled .sdg_watermark { background: rgba(var(--site-accent-rgb), 0.18) !important; border: 1px solid rgba(var(--site-accent-rgb), 0.22) !important; color: rgba(255, 255, 255, 0.85) !important; } .tsg-hex-enabled .icon-vk:hover, .tsg-hex-enabled .icon-tg:hover, .tsg-hex-enabled .icon-ds:hover, .tsg-hex-enabled .sdg_watermark:hover { background: var(--GLOBAL_STRONG) !important; color: var(--site-accent-contrast) !important; } /* Promo-code block: icon + input */ .tsg-hex-enabled .flex_promo_text i { background: var(--GLOBAL_STRONG) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } .tsg-hex-enabled .promo_btn i { color: var(--site-accent-contrast) !important; -webkit-text-fill-color: var(--site-accent-contrast) !important; text-shadow: rgba(0, 0, 0, 0.55) 0px 1px 8px; } .tsg-hex-enabled .promo_btn i::before { color: var(--site-accent-contrast) !important; } .tsg-hex-enabled .promo_btn { filter: drop-shadow(0px 1px 8px rgba(0, 0, 0, 0.35)); } .tsg-hex-enabled .line_promo_up { box-shadow: 0px 5px 30px rgba(var(--site-accent-rgb), 0.35) !important; } .tsg-hex-enabled .micro_line { background: rgba(var(--site-accent-rgb), 0.28) !important; } .tsg-hex-enabled .big_line { background: linear-gradient(90deg, var(--site-accent) 0%, var(--site-accent-2) 100%) !important; } .tsg-hex-enabled .striped-circle { --stripe-color: rgba(var(--site-accent-rgb), 0.18) !important; } .tsg-hex-enabled .input_promo { border: dashed 1px rgba(var(--site-accent-rgb), 0.55) !important; background-color: transparent !important; background: linear-gradient(23deg, rgba(var(--site-accent-rgb), 0.18) 0%, rgba(var(--site-accent-rgb), 0.26) 55%) !important; color: rgba(255, 255, 255, 0.92) !important; } .tsg-hex-enabled .input_promo:focus { box-shadow: 0 0 0 3px rgba(var(--site-accent-rgb), 0.12) !important; outline: none !important; } /* Theme picker UI (как в шаблоне) */ .theme-picker { position: relative; display: flex; align-items: center; } .theme-picker__toggle { border: 0; cursor: pointer; } .theme-picker__panel { position: absolute; right: 0; top: 36px; width: 220px; padding: 12px; border-radius: 14px; background: #2d313a; border: 1px solid #3a3e47; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.35); z-index: 9999; display: none; } .theme-picker__panel.is-open { display: block; } .theme-picker__title { font-weight: 700; font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; color: #cfd5e5; margin-bottom: 10px; } .theme-picker__swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 10px; } .theme-picker__swatch { width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); background: var(--sw); cursor: pointer; transition: transform 0.08s ease, border-color 0.15s ease; } .theme-picker__swatch:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.35); } .theme-picker__swatch.is-active { outline: 2px solid rgba(255, 255, 255, 0.75); outline-offset: 1px; } .theme-picker__inputs { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: center; } .theme-picker__color { width: 40px; height: 34px; padding: 0; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); background: transparent; } .theme-picker__hex { height: 34px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); background: #242833; color: #ffffff; padding: 0 10px; font-weight: 600; font-size: 11px; letter-spacing: 0.4px; } .theme-picker__hex:focus { outline: none; border-color: var(--accent-55, rgba(255, 117, 145, 0.55)); box-shadow: 0 0 0 3px var(--accent-10, rgba(255, 117, 145, 0.10)); } .theme-picker__reset { grid-column: 1 / -1; height: 32px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); color: #cfd5e5; font-weight: 700; font-size: 11px; cursor: pointer; transition: 0.15s; } .theme-picker__reset:hover { background: rgba(255, 255, 255, 0.10); }