/* * ====== LIQUID GLASS THEME — Hero Board 3D стил ====== * Умумий тема — frontend ва admin panel иккаласида ишлайди. * * Фойдаланиш: * ёки body.liquid-theme * * Янги тема яратиш учун шу файлни нусхалаб, ранглар ва қийматларни ўзгартиринг. */ /* ====== CSS Variables ====== */ .theme-liquid, body.liquid-theme { --lq-primary: #6366F1; --lq-secondary: #EC4899; --lq-bg: #E4E7EE; --lq-text: #1E1B3A; /* Шиша қалинлик параметрлари */ --lq-blur: 36px; --lq-saturate: 240%; /* Чегара қалинликлари */ --lq-border-top: 3.5px; --lq-border-bottom: 7px; --lq-border-left: 4.5px; --lq-border-right: 5px; /* Чегара ранглари */ --lq-border-top-color: rgba(255,255,255,0.95); --lq-border-bottom-color: rgba(170,176,198,0.68); --lq-border-left-color: rgba(255,255,255,0.85); --lq-border-right-color: rgba(195,200,220,0.6); /* Нурли соя ранглари */ --lq-caustic-1: rgba(99,102,241,0.08); --lq-caustic-2: rgba(139,92,246,0.05); --lq-caustic-3: rgba(59,130,246,0.04); --lq-caustic-4: rgba(236,72,153,0.03); /* Rainbow ранглари */ --lq-rb-1: rgba(52,211,153,0.6); --lq-rb-2: rgba(59,130,246,0.7); --lq-rb-3: rgba(139,92,246,0.65); --lq-rb-4: rgba(236,72,153,0.6); --lq-rb-5: rgba(249,115,22,0.55); --lq-rb-6: rgba(34,211,238,0.5); } /* ====== 3D GLASS CARD ====== */ .lq-card { position: relative; border-radius: 28px; /* Кўп қатлам шиша gradient */ background: linear-gradient(120deg, rgba(255,255,255,0.3) 0%, transparent 22%, transparent 78%, rgba(255,255,255,0.15) 100%), linear-gradient(178deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.5) 8%, rgba(245,247,252,0.3) 25%, rgba(230,233,242,0.2) 45%, rgba(220,225,238,0.22) 65%, rgba(235,238,248,0.32) 82%, rgba(255,255,255,0.6) 100% ); backdrop-filter: blur(var(--lq-blur)) saturate(var(--lq-saturate)); -webkit-backdrop-filter: blur(var(--lq-blur)) saturate(var(--lq-saturate)); /* Қалин чегаралар */ border: none; border-top: var(--lq-border-top) solid var(--lq-border-top-color); border-bottom: var(--lq-border-bottom) solid var(--lq-border-bottom-color); border-left: var(--lq-border-left) solid var(--lq-border-left-color); border-right: var(--lq-border-right) solid var(--lq-border-right-color); /* Ҳажмли соялар + нурли caustics */ box-shadow: 0 30px 80px rgba(0,0,0,0.12), 0 12px 30px rgba(0,0,0,0.06), 0 4px 10px rgba(0,0,0,0.04), 0 20px 50px var(--lq-caustic-1), 0 30px 60px var(--lq-caustic-2), 12px 24px 40px var(--lq-caustic-3), -12px 24px 40px var(--lq-caustic-4), inset 0 7px 0 rgba(255,255,255,0.95), inset 0 14px 28px rgba(255,255,255,0.22), inset 0 -12px 28px rgba(0,0,0,0.08), inset 0 -5px 0 rgba(148,155,180,0.38), inset 12px 0 24px rgba(255,255,255,0.5), inset -12px 0 24px rgba(0,0,0,0.045), inset 7px 7px 14px rgba(255,255,255,0.18), inset -7px -7px 14px rgba(0,0,0,0.025); overflow: visible; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); color: var(--lq-text); } .lq-card:hover, .lq-card.lq-hover:hover { transform: translateY(-8px) scale(1.012); box-shadow: 0 40px 100px rgba(0,0,0,0.14), 0 16px 40px rgba(0,0,0,0.08), 0 28px 60px rgba(99,102,241,0.12), 0 35px 70px rgba(139,92,246,0.07), 15px 30px 50px rgba(59,130,246,0.06), -15px 30px 50px rgba(236,72,153,0.05), 0 0 80px rgba(99,102,241,0.06), inset 0 7px 0 rgba(255,255,255,0.98), inset 0 14px 28px rgba(255,255,255,0.25), inset 0 -12px 28px rgba(0,0,0,0.08), inset 12px 0 24px rgba(255,255,255,0.5), inset -12px 0 24px rgba(0,0,0,0.045); } .lq-card.lq-sm { border-radius: 20px; } .lq-card.lq-lg { border-radius: 32px; } /* --- Ички қатламлар --- */ /* Юқори думалоқ рефлекс */ .lq-highlight { position: absolute; top: 0; left: 2%; right: 2%; height: 60%; background: radial-gradient(ellipse 105% 75% at 50% -10%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 28%, rgba(255,255,255,0.1) 52%, transparent 72%); border-radius: inherit; pointer-events: none; z-index: 2; } /* Specular — юқори чап ёруғлик нуқтаси */ .lq-specular { position: absolute; top: 5px; left: 8%; width: 40%; height: 24px; background: radial-gradient(ellipse at 25% 50%, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.3) 35%, transparent 65%); border-radius: 50%; pointer-events: none; z-index: 3; } /* Чап ён шиша рефлекс */ .lq-edge-left { position: absolute; top: 6%; bottom: 6%; left: -1px; width: 8px; background: linear-gradient(180deg, transparent 5%, rgba(255,255,255,0.5) 20%, rgba(255,255,255,0.7) 45%, rgba(255,255,255,0.6) 55%, rgba(255,255,255,0.4) 80%, transparent 95%); border-radius: 50%; pointer-events: none; z-index: 4; } /* Ўнг ён шиша соя */ .lq-edge-right { position: absolute; top: 8%; bottom: 8%; right: -1px; width: 7px; background: linear-gradient(180deg, transparent 5%, rgba(0,0,0,0.02) 25%, rgba(0,0,0,0.05) 50%, rgba(0,0,0,0.02) 75%, transparent 95%); border-radius: 50%; pointer-events: none; z-index: 4; } /* Пастки металл чизиқ */ .lq-edge-bottom { position: absolute; bottom: 1px; left: 4%; right: 4%; height: 3px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5) 15%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0.5) 85%, transparent); border-radius: 50%; pointer-events: none; z-index: 4; } /* Юқори чегара ёруғлик */ .lq-edge-top { position: absolute; top: 0; left: 8%; right: 8%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7) 20%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0.7) 80%, transparent); border-radius: 50%; pointer-events: none; z-index: 4; } /* Rainbow refraction — animated */ .lq-rainbow { position: absolute; bottom: -10px; left: -3%; right: -3%; height: 28px; background: linear-gradient(90deg, var(--lq-rb-1), var(--lq-rb-2), var(--lq-rb-3), var(--lq-rb-4), var(--lq-rb-5), var(--lq-rb-6)); filter: blur(14px); border-radius: 50%; pointer-events: none; z-index: -1; animation: lqRbShift 8s ease-in-out infinite; } .lq-rainbow.lq-rb-strong { bottom: -14px; left: -8%; right: -8%; height: 36px; filter: blur(16px); animation-duration: 6s; } @keyframes lqRbShift { 0%, 100% { transform: translateX(0); opacity: 0.85; } 50% { transform: translateX(8px); opacity: 1; } } /* Диагонал ёруғлик */ .lq-diagonal { position: absolute; inset: 0; background: linear-gradient(140deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 25%, transparent 45%, transparent 55%, rgba(255,255,255,0.02) 75%, rgba(255,255,255,0.06) 100%); border-radius: inherit; pointer-events: none; z-index: 3; } /* Ички шиша чуқурлик */ .lq-inner-depth { position: absolute; bottom: 0; left: 0; right: 0; height: 45%; background: linear-gradient(0deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.015) 30%, transparent 65%); border-radius: inherit; pointer-events: none; z-index: 1; } /* Контент */ .lq-content { position: relative; z-index: 5; } /* ====== 3D GLASS BUTTON ====== */ .lq-btn { position: relative; overflow: visible; border-radius: 16px; background: linear-gradient(175deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.2) 40%, rgba(255,255,255,0.3) 100%); backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: none; border-top: 2px solid rgba(255,255,255,0.85); border-bottom: 3px solid rgba(185,190,208,0.5); border-left: 2px solid rgba(255,255,255,0.7); border-right: 2.5px solid rgba(210,215,228,0.45); box-shadow: 0 10px 30px rgba(0,0,0,0.07), 0 3px 8px rgba(0,0,0,0.04), inset 0 3px 0 rgba(255,255,255,0.8), inset 0 -4px 8px rgba(0,0,0,0.04), inset 4px 0 8px rgba(255,255,255,0.25), inset -4px 0 8px rgba(0,0,0,0.02); transition: all 0.3s; cursor: pointer; font-weight: 700; color: var(--lq-primary); } .lq-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,0.09), 0 0 30px var(--lq-caustic-1), inset 0 3px 0 rgba(255,255,255,0.85), inset 0 -4px 8px rgba(0,0,0,0.04); } .lq-btn.lq-btn-primary { color: var(--lq-primary); box-shadow: 0 10px 30px rgba(99,102,241,0.12), inset 0 3px 0 rgba(255,255,255,0.8), inset 0 0 20px rgba(99,102,241,0.06); } .lq-btn.lq-btn-success { color: #059669; box-shadow: 0 10px 30px rgba(16,185,129,0.12), inset 0 3px 0 rgba(255,255,255,0.8), inset 0 0 20px rgba(16,185,129,0.06); } .lq-btn.lq-btn-danger { color: #e11d48; box-shadow: 0 10px 30px rgba(244,63,94,0.12), inset 0 3px 0 rgba(255,255,255,0.8), inset 0 0 20px rgba(244,63,94,0.06); } /* ====== GLASS PANEL (sidebar, header, nav) ====== */ .lq-panel { background: linear-gradient(175deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.25) 40%, rgba(255,255,255,0.35) 100%); backdrop-filter: blur(var(--lq-blur)) saturate(var(--lq-saturate)); -webkit-backdrop-filter: blur(var(--lq-blur)) saturate(var(--lq-saturate)); border: 2px solid rgba(255,255,255,0.8); box-shadow: 0 6px 24px rgba(0,0,0,0.05), inset 0 3px 0 rgba(255,255,255,0.7), inset 0 -3px 6px rgba(0,0,0,0.03); } /* ====== GLASS INPUT ====== */ .lq-input { background: rgba(255,255,255,0.75); border: 1.5px solid rgba(255,255,255,0.5); box-shadow: inset 0 2px 4px rgba(0,0,0,0.05), inset 0 0 0 1px rgba(255,255,255,0.4); border-radius: 12px; transition: all 0.2s; } .lq-input:focus { border-color: rgba(99,102,241,0.5); box-shadow: 0 0 0 3px rgba(99,102,241,0.12), inset 0 2px 4px rgba(0,0,0,0.04); outline: none; } /* ====== АВТО-ТУГМАЛАР — liquid тема ишлаганда .btn автоматик шиша бўлади ====== */ .theme-liquid .btn, body.liquid-theme .btn { position: relative; overflow: visible; border-radius: 14px; background: linear-gradient(175deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0.2) 40%, rgba(255,255,255,0.3) 100%); backdrop-filter: blur(14px) saturate(170%); -webkit-backdrop-filter: blur(14px) saturate(170%); border: none; border-top: 2px solid rgba(255,255,255,0.85); border-bottom: 3px solid rgba(185,190,208,0.48); border-left: 2px solid rgba(255,255,255,0.7); border-right: 2.5px solid rgba(210,215,228,0.42); box-shadow: 0 8px 24px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.03), inset 0 2.5px 0 rgba(255,255,255,0.8), inset 0 -3px 6px rgba(0,0,0,0.035), inset 3px 0 6px rgba(255,255,255,0.2), inset -3px 0 6px rgba(0,0,0,0.015); transition: all 0.3s; color: #4b5563; font-weight: 600; } .theme-liquid .btn:hover, body.liquid-theme .btn:hover { transform: translateY(-2px); box-shadow: 0 14px 35px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.04), 0 0 25px rgba(99,102,241,0.05), inset 0 2.5px 0 rgba(255,255,255,0.85), inset 0 -3px 6px rgba(0,0,0,0.035); } /* Primary — индиго glow */ .theme-liquid .btn-primary, body.liquid-theme .btn-primary { color: #4338ca; box-shadow: 0 8px 24px rgba(99,102,241,0.1), 0 2px 6px rgba(0,0,0,0.03), inset 0 2.5px 0 rgba(255,255,255,0.8), inset 0 -3px 6px rgba(0,0,0,0.035), inset 0 0 16px rgba(99,102,241,0.06); } .theme-liquid .btn-primary:hover, body.liquid-theme .btn-primary:hover { box-shadow: 0 14px 35px rgba(99,102,241,0.15), 0 0 30px rgba(99,102,241,0.08), inset 0 2.5px 0 rgba(255,255,255,0.85), inset 0 0 24px rgba(99,102,241,0.1); } /* Success — яшил glow */ .theme-liquid .btn-success, body.liquid-theme .btn-success { color: #047857; box-shadow: 0 8px 24px rgba(16,185,129,0.1), inset 0 2.5px 0 rgba(255,255,255,0.8), inset 0 -3px 6px rgba(0,0,0,0.035), inset 0 0 16px rgba(16,185,129,0.06); } .theme-liquid .btn-success:hover, body.liquid-theme .btn-success:hover { box-shadow: 0 14px 35px rgba(16,185,129,0.15), 0 0 30px rgba(16,185,129,0.08), inset 0 2.5px 0 rgba(255,255,255,0.85), inset 0 0 24px rgba(16,185,129,0.1); } /* Danger — қизил glow */ .theme-liquid .btn-danger, body.liquid-theme .btn-danger { color: #be123c; box-shadow: 0 8px 24px rgba(244,63,94,0.1), inset 0 2.5px 0 rgba(255,255,255,0.8), inset 0 -3px 6px rgba(0,0,0,0.035), inset 0 0 16px rgba(244,63,94,0.06); } .theme-liquid .btn-danger:hover, body.liquid-theme .btn-danger:hover { box-shadow: 0 14px 35px rgba(244,63,94,0.15), 0 0 30px rgba(244,63,94,0.08), inset 0 2.5px 0 rgba(255,255,255,0.85), inset 0 0 24px rgba(244,63,94,0.1); } /* Кичик тугмалар */ .theme-liquid .btn-sm, body.liquid-theme .btn-sm { border-radius: 11px; border-top-width: 1.5px; border-bottom-width: 2.5px; border-left-width: 1.5px; border-right-width: 2px; } /* ====== АВТО-INPUT — liquid темада form-input шиша бўлади ====== */ .theme-liquid .form-input, body.liquid-theme .form-input { background: rgba(255,255,255,0.7); border: 1.5px solid rgba(255,255,255,0.5); border-bottom: 2.5px solid rgba(195,200,218,0.4); box-shadow: inset 0 2px 4px rgba(0,0,0,0.04), inset 0 0 0 1px rgba(255,255,255,0.35); border-radius: 12px; color: #1e1b3a; } .theme-liquid .form-input:focus, body.liquid-theme .form-input:focus { border-color: rgba(99,102,241,0.45); box-shadow: 0 0 0 3px rgba(99,102,241,0.1), inset 0 2px 4px rgba(0,0,0,0.03); } /* ====== АВТО-SWITCH ====== */ .theme-liquid .switch .slider, body.liquid-theme .switch .slider { background: rgba(200,205,218,0.5); border: 2px solid rgba(139,92,246,0.2); box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); } .theme-liquid .switch input:checked + .slider, body.liquid-theme .switch input:checked + .slider { background: #6366f1; border-color: rgba(99,102,241,0.4); box-shadow: 0 0 12px rgba(99,102,241,0.3); } /* Мобил */ @media (max-width: 768px) { .lq-card { border-radius: 20px; } .lq-card.lq-sm { border-radius: 16px; } .theme-liquid .btn, body.liquid-theme .btn { border-radius: 12px; } }