/* ============================================================ PUZZLEY THEME — v3 Baznevisi-ye kamel. Jaygozin-e HAME-YE nasakhe-haye ghabli. ------------------------------------------------------------ GHANOON-E TALAEE (az tajrobe-ye v1/v2): Hich ghaede-i rooye position / height / display / flex / float nemizanim. Un-ha layout-e Ionic ro mishkanan. Faghat rang, ghab, gushe, saye, font va fasele. Se estesna-ye amn: - overflow:hidden rooye .list → baraye clip shodan-e gushe - min-height rooye button/input → baraye lams-e rahat - padding rooye input → baraye nafas keshidan Har seta test shodan va bi-zarar-an. SAKHTAR: 0 paye va font 1 background-e tire-ye zende 2 ripple 3 header / footer 4 list va item 5 form va input 6 button 7 tab bar 8 card 9 safhe-ye login 10 popup / modal / action sheet 11 toggle / checkbox / badge / spinner 12 side menu 13 dark-mode-e khonsa ============================================================ */ /* ============================================================ 0) PAYE VA FONT ============================================================ */ /* Baraye font-e Vazirmatn, in khat ro too bakhsh-e HTML bezar: */ body, input, textarea, select, button, .button, .bar .title, h1, h2, h3, h4, h5, h6 { font-family: "Vazirmatn", "Vazir", "IRANSans", Tahoma, "Segoe UI", sans-serif !important; } body { color: #1f2937 !important; line-height: 1.75 !important; } /* safhe-haye app hamishe roshan-an — matn hich vaght rooye background-e tire nemiofte. (.ionic-body inja NIST: un class rooye khode -e va sefid kardanesh background ro mipushune.) */ .pane, .view, .scroll-content { background: #ffffff !important; color: #1f2937 !important; } ::selection { background: #dbeafe; color: #1f2937; } ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-thumb { background: #cfd8e6; border-radius: 4px; } ::-webkit-scrollbar-track { background: transparent; } /* ============================================================ 1) BACKGROUND-E TIRE-YE ZENDE Se laye: rang-e paye rooye , gradient-e nafas-keshande (html::before, z-index -2), do sharare-ye shenavar (body::before/after, z-index -1). z-index-ha bayad MANFI bashan; ba 0 laye miad ru-ye app. Rooye body hich position/height nemizarim. Age nakhastish: kol-e bakhsh-e 1 ro pak kon. ============================================================ */ html { background: #0b1220 !important; } body, body.ionic-body, html body { background: transparent !important; } html::before { content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -2; pointer-events: none; background: radial-gradient(1200px 700px at 85% -10%, rgba(37, 99, 235, .22), transparent 60%), radial-gradient(1000px 700px at 10% 110%, rgba(124, 58, 237, .18), transparent 60%), #0b1220; animation: pzBreathe 16s ease-in-out infinite alternate; } @keyframes pzBreathe { from { opacity: .78; } to { opacity: 1; } } body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(70px); will-change: transform; } body::before { width: 44vmax; height: 44vmax; top: -14vmax; right: -10vmax; background: radial-gradient(circle at 35% 35%, rgba(37, 99, 235, .50), rgba(37, 99, 235, 0) 65%); animation: pzDrift1 26s ease-in-out infinite alternate; } body::after { width: 40vmax; height: 40vmax; bottom: -14vmax; left: -10vmax; background: radial-gradient(circle at 60% 40%, rgba(124, 58, 237, .40), rgba(124, 58, 237, 0) 62%), radial-gradient(circle at 30% 70%, rgba(20, 184, 166, .25), rgba(20, 184, 166, 0) 60%); animation: pzDrift2 32s ease-in-out infinite alternate; } @keyframes pzDrift1 { from { transform: translate(0, 0) scale(1); } 50% { transform: translate(-9vmax, 7vmax) scale(1.12); } to { transform: translate(4vmax, 14vmax) scale(.94); } } @keyframes pzDrift2 { from { transform: translate(0, 0) scale(1); } 50% { transform: translate(8vmax, -8vmax) scale(1.10); } to { transform: translate(-4vmax, -14vmax) scale(.96); } } @media (prefers-reduced-motion: reduce) { html::before, body::before, body::after { animation: none !important; } } /* ============================================================ 2) RIPPLE JS-e Puzzley ripple ro faghat ba event-e "animationend" pak mikone. In animation baes mishe un event hatman shelik beshe. BE IN BAKHSH DAST NAZAN. ============================================================ */ @keyframes puzzleyRipple { to { transform: scale(2.5); opacity: 0; } } .ripple-effect { position: absolute; border-radius: 50%; background: rgba(37, 99, 235, .13); transform: scale(0); opacity: 1; pointer-events: none; animation: puzzleyRipple .55s ease-out forwards; } .button-positive .ripple-effect, .button-calm .ripple-effect, .button-balanced .ripple-effect, .button-energized .ripple-effect, .button-assertive .ripple-effect, .button-royal .ripple-effect, .button-dark .ripple-effect, .tab-item .ripple-effect { background: rgba(255, 255, 255, .30); } /* ============================================================ 3) HEADER / SUBHEADER / FOOTER ============================================================ */ .bar, .bar-header, .bar-subheader, .bar-footer, .bar-dark, .bar-stable, .bar-light, .bar-assertive, .bar-energized, .bar-royal, .bar-calm, .bar-balanced, .bar-positive, ion-header-bar, .header-cartform { background: #ffffff !important; background-image: none !important; color: #1f2937 !important; box-shadow: none !important; } .bar-header, ion-header-bar, .header-cartform, .bar-dark, .bar-assertive, .bar-energized, .bar-royal, .bar-calm, .bar-balanced, .bar-positive, .bar-subheader { border-bottom: 1px solid #e6ecf5 !important; } .bar-footer { border-top: 1px solid #e6ecf5 !important; border-bottom: 0 !important; } .bar .title, .bar h1, .bar h2, .bar .button, .bar .button-icon, .bar i, .bar .icon, .bar svg { color: #1f2937 !important; fill: #1f2937 !important; text-shadow: none !important; } .bar .title { font-weight: 700 !important; font-size: 17px !important; } .bar .button { background: transparent !important; border-color: transparent !important; box-shadow: none !important; } /* ============================================================ 4) LIST VA ITEM ============================================================ */ .item, .item-complex .item-content, a.item, button.item, label.item { background: #ffffff !important; color: #1f2937 !important; border-color: #eef2f8 !important; } .item.activated, .item-complex.activated .item-content, .item .activated { background: #f6f8fb !important; } .item h2, .item h3 { font-weight: 600 !important; color: #1f2937 !important; } .item p, .item .item-note, .item-note { color: #8a94a3 !important; } .item .icon, .item i { color: #4b5563 !important; } .item .icon-accessory, .item .ion-chevron-left, .item .ion-chevron-right, .item .ion-ios-arrow-left, .item .ion-ios-arrow-right { color: #c4cddb !important; } /* divider-ha: onvan-e bakhsh */ .item-divider, .item-divider.item-dark, .item-dark, .item-divider.item-stable { background: #f6f8fb !important; background-image: none !important; color: #4b5563 !important; font-weight: 700 !important; font-size: 13px !important; border-color: #e6ecf5 !important; } /* list ba gushe-ye gerd */ .list { border-radius: 16px !important; overflow: hidden !important; } .list.list-inset, .card.list { border: 1px solid #e6ecf5 !important; box-shadow: 0 2px 12px rgba(20, 32, 54, .06) !important; margin: 12px 10px !important; } /* ============================================================ 5) FORM VA INPUT Har input ye ghab-e vazeh dare (moshkel-e form-e chand-marhale-i) va halat-e focus-e abi. ============================================================ */ /* GHAB-E TU-DAR-TU: too Ionic har input dakhel-e ye label.item.item-input hast ke khodesh border-e dour-e dour dare. Chon khode input alan ghab dare, in laye-ye biruni bayad kamel bi-ghab beshe — vagarna do ta ghab ru-ye ham miofte va zesht mishe. */ .item-input, .item-input-wrapper, label.item-input, .list .item-input, .item.item-input { background: transparent !important; border: 0 !important; box-shadow: none !important; padding-right: 0 !important; padding-left: 0 !important; } .item-input input, .item-input textarea, input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="date"], input[type="url"], input:not([type]), textarea, select { background: #f6f8fb !important; border: 1px solid #dbe3ef !important; border-radius: 12px !important; padding: 11px 13px !important; min-height: 46px !important; color: #1f2937 !important; font-size: 15px !important; } .item-input input:focus, .item-input textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="date"]:focus, input[type="url"]:focus, input:not([type]):focus, textarea:focus, select:focus { background: #ffffff !important; border-color: #2563eb !important; box-shadow: 0 0 0 3px #eaf0fe !important; outline: none !important; } /* label-ha: khana, na kam-rang */ .item-input .input-label, .input-label, .item label { color: #374151 !important; font-weight: 600 !important; font-size: 14px !important; } ::-webkit-input-placeholder { color: #9aa5b5 !important; } ::placeholder { color: #9aa5b5 !important; } /* setare-ye ejbari ghermez bashe ta dide beshe */ .required, .item-input .required { color: #dc2626 !important; } /* ============================================================ 6) BUTTON ============================================================ */ .button { border-radius: 14px !important; box-shadow: none !important; text-shadow: none !important; font-weight: 700 !important; transition: filter .15s ease, box-shadow .15s ease !important; } .button.button-block, .button.button-large { min-height: 50px !important; font-size: 16px !important; } .button.button-full { border-radius: 0 !important; /* full = chasbide be labe */ min-height: 50px !important; } /* default / stable / light: sefid ba ghab */ .button.button-light, .button.button-stable, .button:not([class*="button-"]) { background: #ffffff !important; color: #1f2937 !important; border: 1px solid #dbe3ef !important; } /* asli: abi-ye brand */ .button.button-positive, .button.button-calm { background: #2563eb !important; border-color: #2563eb !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(37, 99, 235, .26) !important; } .button.button-positive.activated, .button.button-calm.activated { background: #1d4ed8 !important; border-color: #1d4ed8 !important; box-shadow: 0 2px 8px rgba(37, 99, 235, .30) !important; } .button.button-balanced { background: #0f9d68 !important; border-color: #0f9d68 !important; color: #fff !important; box-shadow: 0 4px 14px rgba(15, 157, 104, .24) !important; } .button.button-energized { background: #d97706 !important; border-color: #d97706 !important; color: #fff !important; box-shadow: 0 4px 14px rgba(217, 119, 6, .24) !important; } .button.button-assertive { background: #dc2626 !important; border-color: #dc2626 !important; color: #fff !important; box-shadow: 0 4px 14px rgba(220, 38, 38, .24) !important; } .button.button-royal { background: #7c3aed !important; border-color: #7c3aed !important; color: #fff !important; box-shadow: 0 4px 14px rgba(124, 58, 237, .24) !important; } .button.button-dark { background: #1f2937 !important; border-color: #1f2937 !important; color: #fff !important; } .button.button-outline { background: transparent !important; color: #2563eb !important; border: 1px solid #2563eb !important; box-shadow: none !important; } .button.button-clear { background: transparent !important; border-color: transparent !important; color: #2563eb !important; box-shadow: none !important; } /* ============================================================ 7) TAB BAR ============================================================ */ .tabs, .tabs.tabs-dark, .tabs-dark > .tabs, .tabs-positive > .tabs, .tabs-assertive > .tabs, .tabs-energized > .tabs, .tabs-royal > .tabs, .tabs-calm > .tabs, .tabs-balanced > .tabs { background: #ffffff !important; background-image: none !important; color: #8a94a3 !important; border-top: 1px solid #e6ecf5 !important; } .tab-item { color: #8a94a3 !important; } .tab-item.tab-item-active, .tab-item.active, .tab-item.activated { color: #2563eb !important; } .tabs-striped .tab-item.tab-item-active, .tabs-striped .tab-item.active { border-color: #2563eb !important; color: #2563eb !important; } .tab-item .badge { background: #2563eb !important; color: #ffffff !important; } /* ============================================================ 8) CARD VA BOX-E GRADIENT ============================================================ */ .card { background: #ffffff !important; color: #1f2937 !important; border-radius: 18px !important; border: 1px solid #e6ecf5 !important; box-shadow: 0 2px 12px rgba(20, 32, 54, .06) !important; } .card .item { border-color: #f1f5fa !important; } .gradiant-primary { background: #ffffff !important; background-image: none !important; color: #1f2937 !important; padding: 20px !important; border-radius: 18px !important; border: 1px solid #e6ecf5 !important; box-shadow: 0 2px 12px rgba(20, 32, 54, .07) !important; } .gradiant-primary h3 { color: #1f2937 !important; font-size: 22px !important; font-weight: 700 !important; margin-bottom: 10px !important; } .gradiant-primary p { color: #4b5563 !important; font-size: 15px !important; line-height: 1.85 !important; } /* ============================================================ 9) SAFHE-YE LOGIN / SABT-E NAM Class-e daghigh-e in safhe too Puzzley malum nist, pas chand ehtemal ba ham target shode + ghaede-haye omumi-ye bala (.list gerd, button-e block boland) khodeshun kar ro dar miaran. ============================================================ */ /* LIST-I KE FAGHAT ZARF-E FORM-E: bi-ghab, bi-pas-zamine. Faghat khode input-ha dide mishan, na ye jabe dour-e-shun. */ .list.list-inset:has(.item-input), .login .list, .login-page .list, .signin .list, .register .list, .form-login { background: transparent !important; border: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; } /* poshtiban baraye browser-haye ghadimi ke :has() nadaran */ .list .item-input { background: transparent !important; } .login .button.button-block:first-of-type, .login-page .button.button-block:first-of-type, .signin .button.button-block:first-of-type, .button-login { background: #2563eb !important; border-color: #2563eb !important; color: #ffffff !important; box-shadow: 0 4px 14px rgba(37, 99, 235, .28) !important; } .login .button.button-block + .button.button-block, .login-page .button.button-block + .button.button-block, .signin .button.button-block + .button.button-block { background: #ffffff !important; color: #2563eb !important; border: 1px solid #dbe3ef !important; box-shadow: none !important; } .login a, .login-page a, .signin a { color: #2563eb !important; } /* ============================================================ 10) POPUP / MODAL / ACTION SHEET / LOADING ============================================================ */ .popup { background: #ffffff !important; color: #1f2937 !important; border-radius: 18px !important; box-shadow: 0 12px 40px rgba(20, 32, 54, .20) !important; } .popup-head { background: #ffffff !important; border-bottom: 1px solid #e6ecf5 !important; } .popup-title { color: #1f2937 !important; font-weight: 700 !important; } .popup-body { color: #4b5563 !important; } .popup-buttons .button { min-height: 46px !important; } .modal { background: #ffffff !important; color: #1f2937 !important; } .action-sheet { background: transparent !important; } .action-sheet-group { background: #ffffff !important; border-radius: 16px !important; overflow: hidden; } .action-sheet-title { color: #8a94a3 !important; border-bottom: 1px solid #e6ecf5 !important; } .action-sheet .button { background: #ffffff !important; color: #2563eb !important; border-bottom: 1px solid #f1f5fa !important; border-radius: 0 !important; box-shadow: none !important; } .action-sheet .destructive { color: #dc2626 !important; } .loading-container .loading { background: rgba(31, 41, 55, .92) !important; color: #ffffff !important; border-radius: 14px !important; } .backdrop { background: rgba(11, 18, 32, .55) !important; } /* ============================================================ 11) TOGGLE / CHECKBOX / RADIO / RANGE / SPINNER / BADGE ============================================================ */ .toggle .track { background: #dbe3ef !important; border-color: #dbe3ef !important; } .toggle input:checked + .track { background: #2563eb !important; border-color: #2563eb !important; } .toggle .handle { background: #ffffff !important; } .checkbox input:checked:before, .checkbox input:checked + .checkbox-icon:before { background: #2563eb !important; border-color: #2563eb !important; } .item-radio .radio-icon { color: #2563eb !important; } .item-radio input:checked ~ .radio-content .item-content { background: #f6f8fb !important; } .range input::-webkit-slider-thumb { background: #2563eb !important; } .spinner svg { stroke: #2563eb !important; fill: #2563eb !important; } .badge { border-radius: 999px !important; font-weight: 700 !important; font-size: 11px !important; } .badge.badge-positive, .badge.badge-calm { background: #eaf0fe !important; color: #2563eb !important; } .badge.badge-balanced { background: #e7f6ef !important; color: #0f9d68 !important; } .badge.badge-assertive { background: #fdeee6 !important; color: #c2410c !important; } .badge.badge-energized { background: #fef4e6 !important; color: #b45309 !important; } .badge.badge-stable, .badge.badge-light { background: #f6f8fb !important; color: #4b5563 !important; } /* ============================================================ 12) SIDE MENU ============================================================ */ .menu { background: #ffffff !important; color: #1f2937 !important; border-left: 1px solid #e6ecf5 !important; } .menu .item { background: transparent !important; color: #1f2937 !important; } .menu .bar { border-bottom: 1px solid #e6ecf5 !important; } /* ============================================================ 13) DARK-MODE-E KHODE APP — khonsa (hazf-e class ro JS-e fix anjam mide; in poshtibane) ============================================================ */ html.dark-mode .pane, html.dark-mode .view, html.dark-mode .scroll-content { background: #ffffff !important; color: #1f2937 !important; }